Leonardo Caineli Web Designer e Programador de Interfaces

Tabelas semânticas

A utilização da tabela é um assunto polêmico entre os Programadores de Interfaces. Alguns ainda às usam na estruturação de sites, outros levaram o termo “Tableless” ao pé da letra e resolveram abolir seu uso da face da Terra. Devemos lembrar que cada tag deve ser utilizada respeitando o propósito pelo qual foi criada, no caso da tabela, deve ser utilizada para tratar dados tabulares, ou seja, dados exibidos em linhas e colunas.

Estruturando semanticamente uma tabela:

<table summary="Lista de produtos">
	<caption>Lista de produtos</caption>
	<thead>
		<tr>
			<th>Produtos</th>
			<th>Preços</th>
		</tr>
	</thead>
	<tfoot>
		<tr>
			<th>Total de produtos:</th>
			<td>5</td>
		</tr>
	</tfoot>
	<tbody>
		<tr>
			<th>Nome do produto 1</th>
			<td>R$ 999,99</td>
		</tr>
		[...]
	</tbody>
</table>

Caption:

A tag “caption” permite criar o cabeçalho de título para a tabela.

Thead:

A tag “thead” permite criar o cabeçalho da tabela.

Tfoot:

A tag “tfoot” permite criar o rodapé da tabela (que será exibido após a tag “tbody”).

Tbody:

A tag “tbody” permite criar o corpo da tabela.

Tr:

A tag “tr” permite criar uma linha.

Th:

A tag “th” permite criar um título de linha ou coluna.

Td:

A tag “td” permite criar uma coluna.

Atributos:

O atributo “summary” permite criar uma descrição para a tabela.

Resultado:

Download Day 2008

Próximo ao lançamento do Firefox 3, a fundação Mozilla lançou a campanha Download Day 2008, no intuito de estabelecer um novo Recorde Mundial no Guinness Book para o software mais baixado em 24 horas.

A expectativa é ultrapassar a marca atingida pelo Firefox 2 (1,6 milhões), chegando aos 5 milhões de downloads no dia do lançamento. Para ajudar a bater esse novo Recorde Mundial, basta fazer o download do Firefox 3 no dia do lançamento (a data do lançamento ainda não foi divulgada).

Identação e boas práticas

Um código bem escrito faz toda diferença, principalmente para sites que recebem muitos acessos. Supondo que um site receba uma média 5.000 acessos diários e seu XHTML pese 30KB, haverá um consumo mensal de 4,5GB. Otimizando esse XHTML para 20KB, obtemos uma economia mensal de 1,5GB.

Aplicando boas práticas de codificação você estará organizando o código para futuras manutenções e fazendo com que a página carregue mais rapidamente, além de economizar R$ por conta da diminuição do consumo de banda.

Exemplo utilizando espaços (184 bytes):

<div>
  <h1>Lorem Ipsum</h1>
  <ul>
    <li>Lorem Ipsum</li>
    <li>Lorem Ipsum</li>
    <li>Lorem Ipsum</li>
    <li>Lorem Ipsum</li>
    <li>Lorem Ipsum</li>
  </ul>
</div>

Exemplo utilizando TAB’s (171 bytes):

<div>
	<h1>Lorem Ipsum</h1>
	<ul>
		<li>Lorem Ipsum</li>
		<li>Lorem Ipsum</li>
		<li>Lorem Ipsum</li>
		<li>Lorem Ipsum</li>
		<li>Lorem Ipsum</li>
	</ul>
</div>

O TAB é o melhor método de identação, resultando um arquivo leve e bem organizado estruturalmente e visualmente. Cada TAB e quebra de linha consumirá 1 byte, portanto evite o uso da quebra de linha desnecessariamente para elementos como h1, li, a, strong e afins.

Asus Lamborghini VX3

A Asus apresentou a terceira geração de seus notebooks VX Series, o Lamborghini VX3, inspirado nos famosos carros da fabricante italiana Lamborghini.

Além do design sofisticado, os modelos contam com um processador de 2.5GHZ, 4GB de memória, placa de vídeo de 256MB, HD de 320GB, tela de 12.1″, Wi-Fi, DVDRW, superfície de safira, sistema biométrico e acabamento em titânio e couro. O notebook custará US$ 3.300 nos EUA e ainda não há previsão de chegada ao Brasil.

Registro COM.BR para pessoas físicas

“Por decisão do CGI.br, o domínio COM.BR, destinado a atividades comerciais genéricas na Internet, também poderá ser registrado sob um CPF. Ou seja, pessoas naturais com atividades comerciais e afins poderão registrar domínios COM.BR. Esta modificação terá efeito a partir do dia 01/05/2008. Inicialmente, somente o domínio COM.BR estará disponível nesta nova categoria, genérica, que permite registro tanto com CNPJ quanto com CPF.”

Comunicado emitido em 16/04/2008 pelo Registro.br.

Browsershots – Teste suas interfaces

Uma das maiores dificuldades dos Programadores de Interfaces é ter em mãos todos os ambientes para testar suas interfaces, evitando possíveis problemas de renderização.

O Browsershots é um sistema online (e gratuito) que possibilita ao usuário renderizar um site mesclando-o entre diversos browsers e plataformas diferentes. O sistema ainda permite escolher a resolução, qualidade da cor e habilitar ou desabilitar Javascript, Java e Flash.

Woopra – Monitoramento em tempo real

Não é nenhuma novidade que o Google Analytics é a ferramenta mais usada para monitoramento de estatísticas, mas o Woopra chegou com a proposta de ter tudo que o Analytics tem, e mais um pouco.

O sistema oferece monitoramento em tempo real, mostrando quais usuários estão online, sua origem e qual conteúdo estão olhando. Mas não para por aí, caso os usuários sejam cadastrados no sistema, o administrador poderá analisar seus perfis e abrir um chat em tempo real.

Poolga

Designers e ilustradores do Mundo uniram-se e criaram o Poolga, um site que tem como exclusiva missão disponibilizar novos wallpapers para os usuários de iPhones e iPods Touch.

As criações seguem conceitos criativos, diversificados e divertidos. Antes de usar um wallpaper é possível conferir como ficará o resultado na galeria de fotos. Os visitantes ainda podem enviar suas criações, que serão analisadas e disponibilizados no site caso sejam aprovadas.

Document Type Definition (DTD)

Se você quer começar a montar seu XHTML dentro dos Padrões Web, o Document Type Definition (DTD) é literalmente o início de tudo. É obrigatória sua declaração no início do documento para que seus arquivos XHTML e CSS sejam validados e renderizados corretamente pelo browser. Ignorando ou utilizando um DTD inválido, o browser irá renderizá-lo em “Quirks Mode”, interpretando seu XHTML de forma inválida. Segue abaixo a lista dos DTD’s existentes:

<!-- HTML 4.01 Strict -->
< !DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<!-- HTML 4.01 Transitional -->
< !DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

<!-- HTML 4.01 Frameset -->
< !DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">

<!-- XHTML 1.0 Strict -->
< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<!-- XHTML 1.0 Transitional -->
< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<!-- XHTML 1.0 Frameset -->
< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

<!-- XHTML 1.1 DTD -->
< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml">

Strict, Transitional e Frameset:

Strict é quando o XHTML segue à risca os padrões de codificação.
Transitional é quando o XHTML está sendo atualizado para um novo DTD.
Frameset é quando o XHTML possui frames.

CRIR – Checkbox & Radio Input Replacement

Para aqueles que se recusam a aceitar aquela aparência crua e sem-graça dos checkboxes e radio buttons, o CRIR pode vir a ser um forte aliado. Utilizando CSS e Javascript, ele permite personalizar esses elementos, dando mais graça e interatividade aos formulários.

Além da questão estética, outro ponto a ser ressaltado é o fato dos elementos manterem a renderização padrão caso o Javascript não seja carregado pelo browser. Você pode fazer o download e aprender a implementar o CRIR aqui.