Gustavo Ribeiro – Desenvolvedor Front-End

Como testar o estado :active e :hover do CSS no Firebug

Quando inspecionamos links, o Firebug nos mostra o estilo :link do CSS. Por default, o estilo :hover e o :active não são mostrados. Felizmente, podemos mudar o estado do link clicando em Estilo e selecionando a opção apropriada, como mostrado na imagem abaixo:

Feito isso, o CSS para o estado :hover e/ou :active irão magicamente aparecer em seu console.

Esse recurso é bastente útil, especialmente se você for debugar CSS complexos de menu drop-down e outros efeitos. Atualmente o Firebug é o único console de desenvolvimento que dá suporte ao recurso. Eventualmente ele apareceça também no Chrome e Safari.

Tem alguma outra dica útil para compartilhar?

Utilizando as listas: ul, ol e dl

Estarei começando hoje uma série de, podemos dizer tutoriais, explicações sobre o uso de cada tag xHTML e CSS. Cada tópico terá uma nomeclatura bastante direta sobre o assunto abordado, então vamos ao que interessa realmente.

Para iniciar a sequencia dos tutoriais, resolvi falar sobre listas de ordenação e explicar um pouco mais sobre o uso e cada uma e o porque isso é importante na hora de se desenvolver um site dentro dos padrões w3c.

Listas desordenadas: <ul>

As listas desordenadas são, comumente, as mais utilizadas por todos nós desenvolvedores quando resolvemos criar menus. E porque utilizamos as <ul> na criação de menus? Simples! Porque, semânticamente, os menus são itens correspondentes a uma lista sem ordenação não se encaixando em qualquer outra tag, semânticamente, a não ser a <ul>.

Listas ordenadas: <ol>

Idêntica as <ul>, porém nela temos a obrigação de ordernarmos os itens, seja eles por ordem alfabética, numérica, crescente ou decrescente. Devemos utilizá-las quando queremos criar, por exemplo, um passo-a-passo, uma receita ou até mesmo uma lista de categorias do seu blog.

Listas de definição: <dl>

As listas de definição são as menos utilizadas e pouco entendidas por muitos. Uma maneira bastante fácil e simples para o entendimento da <dl> é pensarmos em um glossário. Todo glossário possui termos e, cada termos, suas descrições. Para os termos utilizamos <dt> e para as descrições <dd>. Uma coisa muito importante na <dl> é que: nunca termos, em hipótese alguma, um termo repetido com descrições diferentes. Cada termo tem sua descrição única, caso contrário o mesmo não poderá ser um <dl>, e sim uma <ul> ou uma <ol>.

Em tempo, basta sabermos o nome de cada tag para qu possamos entender o seu uso. Consegui ser claro na explicação?

Verdades estão aí para serem ditas

Há quase 1 ano não estou mais em agência trabalhando com diversos públicos. Venho trabalhando em dois portais de conteúdo e público mais específico, o que me agrada bastante e to curtindo muito até agora.

Tá certo que o público não é tão específico quanto de um hotsite ou campanha, mas acredito ser muito mais específico e selecionado do que muitos possam imaginar. Por exemplo, é um público que compra na internet, que usa cartão de crédito, que viaja a turismo ou trabalho constantemente. Logo não é um público de pouca renda ou com baixo nível de conhecimento de internet, acredito eu apesar de alguns estudos e dados não confirmarem tanto.

Constantemente debato com meus colegas se nosso público é básico, se temos usuários com idades superiores a 60 anos (logo com dificuldade de leitura e coordenação montora – salvo raras excessões), se temos usuários com dificuldade de visão e por não ter uma resposta concreta ou a maioria deles achar que sim, acabo me frustando ao desenhar nossas interfaces.

Continue lendo.

CSS Reset

O CSS Reset é uma técnica bastante comum entre os desenvolvedores client-side para zerar os atributos pré-setados para as tags html que vem por default nos browsers, ou seja, possuem diferentes configurações de fonte padrão, margens etc.

Como muitos sabem, principalmente os desenvolvedores, essas diferenças de valores atrapalham no desenvolvimento e por isso temos que zerá-los antes de qualquer coisa para que podemos ter certeza, não tanta assim, de que estamos trabalhando fora desses valores default dos browsers.

Continue lendo.

Alterando o tamanho da fonte do site

Hoje iremos aprender como fazer um script para aumentar e diminuir o tamanho da fonte de seu site.

O script é bem simples e fácil de entender, porém temos que definir qual o tamanho padrão que iremos ter em nosso site.

Na maioria dos browsers – se não todos – utilizando 16px como tamanho de fonte padrão, podendo ser alterado pelo usuário caso prefira. Vamos trabalhar com o valor padrão, sem alteração.

Continue lendo.