TidBits

Teste seus conhecimentos com mais um quiz, este sobre XHTML. Todas as perguntas e respostas estão em português. Para quem não conhece bem a linguagem, pelo menos da pra aprender as regras básicas do XHTML.

Deixem comentários dizendo quantos pontos fizeram.

E pra quem ainda não fez, também tem o Quiz de Javascript , o Quiz de CSS e o Quiz de jQuery

Semana que vem tem o Quiz de Jquery

[]s

CSS Sprites é uma técnica muito usada em grandes portais que serve para melhorar o desempenho do site diminuindo o número de requisições HTTP. É uma técnica bem simples que serve para unir várias imagens em um só arquivo e posicionar o conteúdo através de CSS.

Ficou tudo muito abstrato né?

Imagine o seguinte menu (onde cada time tem um link próprio):

Agora pergunto:

Quantas imagens são necessárias pra fazer essa coleção de escudos de times?

Apenas uma imagem.

Fixando a altura e a largura de cada botão, podemos posicionar o background de cada link com o css position.

É mais trabalhoso, mas tem vantagens:

Carregando uma imagem grande ao invés de várias imagens pequenas, economizamos banda (nesse exemplo eram 31kb agora são 11), porque pra cada imagem tem cabeçalho, paleta de cores usadas na figura, enfim, uma série de dados que se repetiam em todos os times. E quando tempos uma figura só no lugar de 32, esses dados são preenchidos uma vez somente, e assim economizamos banda.

Além disso, o que melhora e muito a velocidade, é fazer uma só conexão HTTP. Em arquivos muito pequenos, costuma demorar mais pra estabelecer uma conexão com o servidor do que o próprio download em sí. Então, 31 conexões a menos com o servidor, dão uma boa diferença no tempo total do load da página.

É simples pra fazer, tem duas formas.

Imagine o HTML desse exemplo:

<ul class="escudos">
	<li><a href="/atleticomineiro">Atlético Mineiro</a></li>
	<li><a href="/atleticoparanaense">Atlético Paranaense</a></li>
	<li><a href="/barcelona">Barcelona</a></li>
	...
</u>

A primeira forma, que eu acho mais simples, funciona como um “mapeamento” da imagem:

/*
	Adicionando a única imagem de
	backgrounde e definindo largura na UL
 */
ul.escudos{
	background:url('times.png');
	width: 280px;
}

/*
	Posicionando os LI's com float
	como fazemos normalmente
*/
ul.escudos li{ float:left; }

/*
	Definindo uma largura e altura fixa para
	os links e adicionando text-indent negativo
	para fazer o imagem-replacement
*/
ul.escudos li a{
	width:35px;
	height:35px;
	display:block;
	text-indent:-9999px;
}

A segunda forma é uma coleção de css position

/* Definindo a largura somente */
ul.escudos{	width: 280px;}

*
	Posicionando os LI's com float
	como fazemos normalmente
*/
ul.escudos li{ float:left; }

/*
	Definindo uma largura e altura fixa para
	os links e adicionando text-indent negativo
	para fazer o imagem-replacement
*/
ul.escudos li a{
	width:35px;
	height:35px;
	display:block;
	text-indent:-9999px;
}

/*
	Adicionando o background com todos
	os escudos em todos os li's
*/
ul.escudos li{ background:url('times.png'); }

/*
	Adicionando um background para cada li
	(seria necessario colocar uma classe / id
	para cada elemento). Veja os exemplos:
*/
ul.escudos li.atleticomineiro { background-position: 0 0; }
ul.escudos li.atleticoparanaense { background-position: 35px 0; }
ul.escudos li.barcelona { background-position: 70px 0; }

A mesma técnica pode ser aplicada em menus, principalmente com mouse over:

<ul class="menu">
	<li class="videos"><a href="videos.php">Vídeos</a></li>
	...
</u>

A imagem é uma só para o estado normal e o estado com over.

E no CSS:

#menu li.videos a {
	background: url('/images/video.gif');
	display: block;
	width: 71px;
	height: 19px;
	text-indent: -9999px;
}
#menu li.videos a:hover { background-position: bottom; }

Repare que o height do link é metade do tamanho da imagem, assim, quando passa o mouse por cima do botão, o background é movido pra baixo dando a sensação de duas imagens diferentes.

O seu browser estar apresentando seu site corretamente não significa que seu código esta correto e também não significa que vai funcionar em mais 40 browsers que são usados atualmente. Programar a interface de um site é bem diferente do que programar numa linguagem server side onde, se você esquecer um “;” ou não fechar um if, seu código nem roda. Programando no lado do cliente, diversos erros de html são “consertados” pela maioria dos browsers. Ou seja, você esquece de fechar uma tag, ou coloca um <h1> dentro de um <a> no seu browser e aparece tudo ok, mas é errado.

Ok, mesmo que o site seja testado no Firefox, ie6, ie7, Safari, Chrome e Opera, quem garante que os navegadores Netscape 6.0, Ant Galio 3.1, Blaze 6.0 ou o Playstation 3 5.0 vão interpretar corretamente também?

E é por isso que devemos validar o código. Existem diversas ferramentas para validação de código.

A mais importante delas, creio que é o HTML validator, uma extensão de firefox. Além de válidar seu (x)html, ele diz o que está errado e como consertar o que é ótimo pra quem está começando a programar interface.

Para validar CSS, a melhor opção é o CSS validator da W3C. Infelizmente não existe (ou não conheço) nenhuma opção desktop. Mas mesmo assim, vale a pena utilizar.

Já o link-checker é um validador de links que analisa seu site e procura por links quebrados, muito útil. A análise é BEM completa, e demora muito tempo, afinal ele checa tudo. Analisando a home do TidBits ele demorou 286 segundos e checou mais de 200 arquivos.

Outras ferramentas como o firebug, ajudam bastante na codificação, principalmente pra detectar erros de JavaScript. E finalmente, para garantir a acessibilidade do seu site, existe diversas opções, duas em português: o Da Silva e o ASES desenvolvido pelo governo eletrônico.

Recentemente o site do Governo Eletrônico lançou um projeto implementar padrões web no site do governo. E inclusive lançou uma cartilha de codificação para auxiliar as administrações públicas.

O objetivo da cartilha é:

• Estabelecer padrões de qualidade de uso, desenho, arquitetura de informação e navegação;
• Estabelecer um fluxo de criação, desenvolvimento e manutenção na gestão dos sítios governamentais;
• Consolidar a acessibilidade;
• Criar artefatos de acordo com os padrões estabelecidos pelo W3C.

A apostila pode ser lida por qualquer desenvolvedor web, pois fala de padrões web em geral e não de sites do governo.

Clique aqui para baixar a cartilha.

Outra coisa que chamou a atenção essa semana, foi o blog do Danilo Nunes, ele está traduzindo um curso sobre padrões web que funcionários da Opera fizeram pra implementar nas universidades americanas, um projeto bem legal.

O curso (original, em inglês) tem 50 artigos, cada um bem detalhado. O Danilo Nunes disse que vai traduzir um por semana.

Imagine uma imagem grande, que demora pra ser carregada.
E se colocar um loading na imagem?
É bem simples:

<img src="imagemPesada.jpg" alt="alt da imagem" id="imagemPrincipal"/>

E no css :

img#imagemPrincipal{
	background: url('loading.gif') no-repeatcenter center;
}

Um outro exemplo do que se pode fazer com isso, é colocar níveis de profundidade, veja o exemplo abaixo:

Esse não foi feito por mim, eu achei na internet mas infelizmente não sei quem fez para dar os créditos, se alguém souber, avise-me.

Recentemente a Belinha comentou de CSS Global Reset num post falando de construção de sites cross browsers , mas acho que isso é tão importante que merece um post só pra ele.

Para entender o que faz o reset, pense que todo browser tem prioridades para definir o CSS de uma página. A ordem é:

1º - CSS inline : aquela porqueira <div style=”float:left”>

2º - CSS na página : outra coisa que não recomendo, e não vejo necessidade. É quando coloca a tag style dentro da tag head
<style> .publicidade { width: 200px; } </style>

3º - CSS externo : esse é o css normal, quando invocamos dentro do head <link href=”home.css” type=”text/css” rel=”stylesheet”/>

4º - CSS definido pelo browser: sim, isso existe e é isso que nos causa problemas.

Quando nenhum CSS é encontrado para um elemento (div, p, h1, img, etc..), o navegador coloca por sua conta, qual vai ser o tamanho dos títulos, dos paragráfos, a margin entre elementos, a fonte padrão, o padding da página, bordas dos elementos, etc…

É aí que entra o CSS Global Reset, que são uma série de propriedades css atribuidas a todos os elementos html, justamente para retirar o css definido pelo browser, deixando as propriedades de todos os elementos iguais. Assim reduz drasticamente a diferença entre Firefox, Mac, Ie, Opera, etc.

Existem diversos CSS Global Reset ( normalmente as pessoas colocam alguma coisa a mais pra facilitar no seu projeto ), mas todos eles variam pouco. Vejam o que eu utilizo:

*{outline-color:invert;outline-style:none;outline-width:medium;}
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li,fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0; padding: 0; border: 0; outline: 0; font-weight: normal; font-style: inherit; font-size: inherit;
	font-family: inherit; vertical-align: baseline;
}
:focus {outline: 0; }
body {line-height: 1; color: black; background: white; font-size:100.01%;}
ol, ul { list-style: none;}
table { border-collapse: separate; border-spacing: 0;}
caption, th, td { text-align: left; font-weight: normal;}
blockquote:before, blockquote:after,
q:before, q:after {content: "";}
blockquote, q {quotes: "" "";}
strong{ font-weight: bold; }
body,input,select,textarea {  font-size: inherit; }

E normalmente, quando vou começar a montar um html, um projeto novo, eu altero as propriedades da fonte, por exemplo: se o layout for usar sempre arial, vale a pena trocar “font-family: inherit;” para “font-family: arial;”

Seja lá qual CSS Global Reset escolherem, usem sempre um quando iniciarem um projeto, isso evita muitooo trabalho.