Este post irá reunir alguns tópicos sobre o desenvolvimento Web em geral, abordando desde algumas dicas à alguns sermões para os profissionais da Web.
Use todos os seletores CSS avançados
Você realmente conhece a fundo o CSS? Nesta dica irei reunir algumas formas avançadas de selecionar elementos para definir os estilos.
- Attribute selectors
Nesse tipo de seletor ele irá pegar um elemento baseado em algum atributo definido no XHTML. No exemplo abaixo todos os elementos img com a propriedade alt definida serão afetados pelo estilo:
img[alt] {
border: 1px dotted #999;
}
Um outro exemplo é aplicar o estilo dependendo do conteúdo dos atributos:p[class="title"]{
font-size:16px;
color:green;
}
Neste caso, todos os parágrafos que tenham a classe title serão afetados pelo estilo.- Child selectors
<div>
<a href="#">Teste</a>
<ul>
<li><a href="##">Teste1</a></li>
<li><a href="##">Teste2</a></li>
</ul>
</div>
Perceba que somente o primeiro link é que é um filho direto da div, os outros links são filhos diretos da lista e não da div.div > a {
color: black;
}
O estilo acima só irá afetar o primeiro link, uma vez que ele é filho direto da div.- Adjacent sibling selectors
Este tipo de seletor consiste em pegar o elemento que possui o mesmo pai e que esta imediatamente após outro seletor.
<h2>Título</h2> <p>Este aqui será estilizado</p> <p>Este aqui não será estilizado</p>
E com o seguinte CSS, somente o primeiro parágrafo será estilizado.
h2 + p {
color: red;
}
Existem muitas outros seletores, não poderei abordar todos para não deixar o post muito grande. Mas isso serve como um incentivo para vocês buscarem conhecer mais. 
Use convenções de nomes
Quem aqui já desenvolveu um site e não se preocupou muito com a organização, sabe a grande dor de cabeça que isto dá, por isso, uma outra dica que eu dou é usar convenções de nomes para os seus elementos. E claro, nunca misture inglês com português, use somente um idioma.
Abaixo uma lista de convenções de nomes geralmente usadas (em inglês):
- #branding
- #content_sub
- #content_main
- #content_supp
- #nav_main
- #nav_sub
- #site_info
Instale as extensões Firebug e Web Developer
Eu acredito que a grande maioria dos desenvolvedores Web utilizam o Firefox para seu ambiente de produção. Caso você não use, recomendo fortemente que o faça agora. O Firefox possui duas extensões poderosas e que auxiliam e muito o desenvolvimento de páginas web: Firebug e Web Developer.
Você pode baixá-las aqui: http://getfirebug.com/ e https://addons.mozilla.org/en-US/firefox/addon/60/.
Quando você instala essas extensões, é criada uma barra na parte superior do navegador, com diversas opções do Web Developer. O Firebug fica no canto direito inferior da tela. Após instalar o Firebug irá aparecer um ícone de um inseto que ao ser clicado irá abrir o Firebug.
Com o Web Developer podemos editar o CSS enquanto estamos visualizando a página no navegador e obter o resultado na medida que fazemos as alterações. Podemos também ver diversas informações da página. Uma função que eu gosto muito é a de exibir a topografia. Vá em informações > Exibir topografia e veja o resultado.
Usando Firebug podemos facilmente descobrir onde está determinado elemento ou a que elemento pai um elemento filho pertence. Com o Firebug instalado e o Firefox aberto, clique no ícone do inseto para abrir o Firebug.
Clique agora no ícone da setinha azul, a segunda opção da esquerda para a direita. Após fazer isso passe o mouse por cima da página, você vai perceber que ele vai selecionando os elementos, quando você clicar em algum elemento ele irá mostrar o XHTML e o CSS daquele elemento.
Separe o estilo do conteúdo
Já se foi a época em que usávamos o HTML para definir o visual das páginas Web, hoje em dia devemos utilizar o CSS para este fim. O XHTML é onde definimos a marcação e colocamos o conteúdo, somente isso! Todo a estilização é feita via CSS. Uma forma interessante de ver se você está fazendo a coisa certa é verificar como sua página fica sem o CSS. Se ela ainda possuir fontes customizadas, fontes coloridas, backgrounds e etc, isso é um mal sinal, pois você está usando o XHTML para estilizar sua página. Com o Web Developer é possível verificar como a página fica sem o CSS.
Para fazer isso vá em “Nenhum erro de CSS > Desativar estilos > Todos os estilos”, após fazer isso o CSS será desativado e o navegador só ira renderizar o XHTML.
Teste em todos os navegadores
Um outro ponto de suma importância: teste o site em todos os navegadores, não há nada mais desagradável do que ver um site funcionar perfeitamente em um navegador mas em outro navegador ele está com erros. Um exemplo é o site da Wizard . Até o presente momento ele está com o layout quebrado no Google Chrome.Preze pela acessibilidade
Você sabe o que é acessibilidade? Você sabe as técnicas utilizadas para prover uma acessibilidade? Se você não sabe responder essas perguntas, provavelmente seus sites são bastantes inacessíveis.Propriedades como alt e title são essenciais para uma boa acessibilidade. Imagine que você tem uma imagem como um link, um internauta cego, logicamente não vai conseguir ver a sua página, então ele usa um leitor de tela.
Quando o leitor de tela vê uma imagem, ele procura por propriedades como alt e title, que descrevem o que é aquilo. Dessa forma um internauta cego conseguiria saber do que se trata aquele link. Se não houver um atributo deste tipo, provavelmente o leitor de tela irá ler o destino do link. O que não seria nada esclarecedor para o internauta.
Agora vamos mudar de situação, imagine um internauta que não consiga usar o mouse, ou que tenhas dificuldades de usar o mouse, então ele usa na maior parte do tempo o teclado para trabalhar no computador. Imagine aqueles famosos menus que quando passamos o mouse em cima aparece o submenu, como o deficiente iria conseguir imaginar que ali tem submenus?
Outra dificuldade seria navegar pela página, navegar pelos links utilizando apenas o teclado. Para problemas desse tipo existe o tabindex, uma propriedade que define a “prioridade” de cada elemento. Ou seja quando pressionarmos a tecla TAB os elementos serão selecionados de acordo com a prioridade definida pela propriedade tabindex.
Você pode estar sentindo falta de um apelo anti-flash, mas isso é assunto para um post inteiro, então para finalizar deixo esses vídeos que falam muito sobre acessibilidade, é um pouco grande mas vale muito a pena assistir. Espero que após verem esses vídeos, seus sites sejam mais acessíveis.
Fonte: I/O Tecnologia
Nenhum comentário:
Postar um comentário