O que você precisa saber sobre HTML5

HTML5 está sendo discutido por todo lado. Natural. É a grande novidade da década no desenvolvimento para a Web. Depois de anos de indas e vindas com o XHTML2, W3C se uniu aos dissidentes do WHATWG para continuar desenvolvendo a especificação do HTML.

As maravilhosas oportunidades do HTML5 você pode ver no HTML5 Demos and Examples, no HTML5 Gallery ou no HTML5 Watch. Mas o que de fato você precisa saber antes de tomar uma decisão em aplicar este tipo de documento ao seu projeto?

Código mais frouxo

Nos últimos anos, a obsessão pelo código válido e bem formado nos fez esquecer o princípio do HTML: qualquer um pode escrever documentos e publicá-los na Web. Para quem trabalha com CSS e JavaScript, esta obsessão tem uma razão de ser. Qualquer trecho mal formado pode criar problemas de renderização indecifráveis. Nesta nova especificação, voltamos a não obrigatoriedade de fechar tags do HTML 4.

Além disso, o HTML5 permite tags escritas em caixa alta ou baixa. Quem tem TOC terá problemas em trabalhar com um código colaborativo ou legado.

Não há plugin de validação de código

Esta é uma meia verdade. Existe uma opção no Web Developer para exibição da validação da página que cobre o HTML5. O problema é navegar em outras páginas durante o trabalho. Tudo fica extremamente lento. E também há este plugin para Firefox que joga para o html5.validator.nu, o que é totalmente inútil se você estiver trabalhando localmente. E se você estiver com algum tempo livre sobrando, pode também instalar o validator.nu no seu ambiente local e usar o plugin do 456 Berea Street. Não tenho uma teoria de o porquê de não termos um bom plugin para validação ainda.

É de verdade ou é de brincadeirinha?

Qualquer aplicação ou site já desenvolvido pode ser passado integralmente para HTML5 sem dano. Basta mudar declaração do tipo de documento e validar a página para corrigir alguns detalhes. Mas o ideal é verificar quais são as novas tags disponíveis para a organização de um documento e treinar novas aplicações em diversos tipos de documento. Aqui vale um estudo mais cuidadoso dos modelos de conteúdo (ou content models). Aí está algo que nunca demos muita importância no passado principalmente depois das “verdades absolutas” proclamadas pelos evangelistas de SEO sobre o peso de cada elemento dentro de um documento e a relevância destes conteúdos para os mecanismos de busca.

E funciona no Internet Explorer?

Sim, HTML5 funciona no Internet Explorer com um JavaScript para habilitar as tags específicas. Mas não se preocupe: HTML5 está nos planos da Microsoft para o IE 10. Veja mais sobre este script no HTML5 Doctor.

De qualquer forma…

Todo desenvolvedor deve aprender HTML5. Nunca sabemos quando será o próximo projeto e quais serão seus requisitos básicos. E esta nova especificação não é difícil. Tenha em mente apenas que a semântica está mais presente e tem um papel mais fundamental do que nas versões anteriores. E este sempre foi o calcanhar de Aquiles do desenvolvimento para a Web.

Lembre-se sempre: HTML5 é mais do que as maravilhosas tags que permitem conteúdo rico em dispositivos móveis da Apple. ;)

Veja mais sobre este assunto:

Aprenda HTML5:

E você tem alguma consideração sobre o desenvolvimento em HTML5?

Tags:

Definindo estrutura, apresentação e comportamento

Um desenvolvimento maduro para a Web conta com bons nomes de arquivos, um diretórios organizados e separação das camadas de estrutura, apresentação e comportamento.

O que é estrutura, apresentação e comportamento em uma interface Web

Definimos assim cada uma destas camadas:

Estrutura

A camada de estrutura é formada por uma linguagem de marcação, como o XML, HTML e XHTML. Este arquivo contém o conteúdo do documento, além de informações de indexação e documentos relacionados.

O conteúdo deve ser marcado de modo que seja perfeitamente compreensível para qualquer tipo de usuário, seja ele quem for ou qual seja o dispositivo utilizado. Deve-se marcar cada trecho com seu correspondente, de acordo com a definição do tipo de documento (DTD). No HTML, por exemplo, usamos as tags:

  • <p> para parágrafos;
  • <a> para links de hipertexto;
  • <h1>, <h2> e <h3> para títulos;
  • <ul>, <ol>, <li>, <dl>, <dt> e <dd> para listas;
  • <table>, <thead>, <tbody>, <caption>, <tr> e <td> para tabelas; e assim por diante.

Cada elemento deve procurar seu melhor correspondente no tipo de documento. Se um elemento ou um conjunto deles não tiver uma boa correlação deve-se usar elementos genéricos:

  • <div> para elementos em bloco;
  • <span> para elementos em linha (dentro de parágrafos, por exemplo).

A seguir, um exemplo de documento bem simples pronto para a publicação.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
  <title>Meu site</title>
  <link rel="stylesheet" type="text/css" href="styles.css"/>
  <script type="text/javascript" src="behavior.js"></script>
</head>
<body>

  <h1>Olá mundo!</h1>

  <div id="avatar">
    <img src="avatar.jpg" width="48" height="48" alt="Foto">
  </div>

  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing
    onummy nibh euismod tincidunt ut laoreet dolore erat
    olutpat. Ut wisi enim ad minim veniam, quis nostation
    llamcorper suscipit lobortis nisl ex.</p>

  <p>Ut wisi enim ad minim veniam, quis nostrud exerci.
    <a href="http://outrosite.com" rel="external"
        title="Outro site">link abre uma nova janela</a>.
        Lorem ipsum dolor sit amet, sectetuer cidunt ut
        dolore magna aliquam erat volutpat.</p>

  <p><a href="mailto:eu@provedor.com">mande um e-mail!</a></p>

</body>
</html>

Se somente este código for mostrado ao usuário, é muito provável que ele consiga realizar as tarefas possíveis nesta interface que incluem ler o texto, ver a foto, clicar no link externo e mandar uma mensagem eletrônica.

Nesta camada, são tomadas decisões de conteúdo, como a hierarquia das seções (definidas pelos seus títulos), como será o formato de data, como estruturar um menu de navegação ou um breadcrumb, entre outras. Além disso, é nesta camada que reside boa parte das definições de acessibilidade de uma interface.

Veja um exemplo de página apenas com a estrutura. Perceba que mesmo sem layout ela continua sendo compreensível e que continua funcionando sem JavaScript. Para ver a estrutura de qualquer página use uma extensão para como o WebDeveloper para Firefox e aperte Ctrl+Shift+S.

Apresentação

Na camada de apresentação, está tudo que caracteriza o layout da página. Com o CSS, definimos cores de fontes, fundos, posição dos elementos na página e todas as outras decisões estéticas.

Veja um exemplo de código CSS aplicado ao nosso exemplo de estrutura:

body{
	font: 0.8em Arial, Helvetica, sans-serif;
	background: url(fundo.jpg) no-repeat;
	padding: 140px 0 0 100px;
}
p{
	width: 400px;
	margin:0;
	padding:10px;
	background: url(fundo.png);
}
p + p + p{
	background: transparent;
}
h1{
	width: 400px;
	margin-left: -30px;
	font: bold 3.5em Georgia,Times New Roman,serif;
	color: #93360D;
}
div{
	float: left;
	margin: 0 10px 0 0;
}
img{
	border: 1px solid #000;
}
a{
	color: #000;
}
a:hover{
	color: #93360D;
}
a[rel="external"]{
	background: url(externo.png) center right no-repeat;
	padding-right: 13px;
}
a[href ^="mailto:"]{
	font-size: 0.85em;
	font-weight: bold;
	text-decoration: none;
	padding: 2px 10px;
	background: #E0C284;
}

Separando todas as definições de estilo num documento separado permite melhor gerenciamento de estilos diferenciados de acordo com a mídia. Pode haver um estilo diferenciado para impressão:

@media print{
	* {
		color: #000;
		font-family: Georgia,Times New Roman,serif;
		text-decoration: none;
	}
	p + p + p, img{
		display: none;
	}
}

Veja o exemplo anterior, agora com a camada de apresentação.

Comportamento

Já na camada de comportamento, estão todos os efeitos e todas as decisões funcionais da interface. Manter a programação separada da estrutura facilita a manutenção e evita erros. Além disso, é mais fácil tratar alternativas para usuários que não possuem suporte a esta camada, como usuários de celular e de quiosques.

No exemplo anterior, clique no link para abrir um site externo em nova janela.

Veremos um artigo mais detalhado sobre scripts não intrusivos mais adiante.

Referências:

Tags: , ,

Preservando recursos naturais com desenvolvimento Web

Blog Action Day

Estou reciclando este texto para o Blog Action Day 2007.

Sua família separa o lixo para reciclagem? Você prefere deixar o carro na garagem e ir para o trabalho utilizando transportes públicos ou não poluentes? Você todos os equipamentos eletrônicos e as luzes quando deixa um cômodo? Então você está pronto para um novo nível de conscientização de preservação do meio ambiente. Veja como medidas simples no desenvolvimento Web podem fazer a diferença na utilização de recursos naturais.Os educadores ambientais trabalham com os princípios dos 4 R’s para a redução no consumo de insumos naturais e controle de resíduos: Reduzir, Reciclar, Reutilizar e Recuperar. No desenvolvimento Web podemos trabalhar principalmente com o princípio de redução do consumo de papel e energia. Veja algumas idéias:

Otimizando o CSS de impressão

A produção de papel é um dos procedimentos mais nocivos à natureza. É necessário o desmatamento de grandes áreas para o plantio de uma ou duas espécies de árvores. O impacto no ecossistema é irreversível.

Não é possível impedir a impressão das interfaces e nem é aconselhável, mas é possível reduzir o número de páginas impressas disponibilizando para esta media apenas o essencial. Limpe o CSS eliminando fundos, cores, banners, menus e todo tipo de informação que não é útil para quem está imprimindo aquele conteúdo.

Utilizando protótipos navegáveis

No projeto de desenvolvimento Web o arquiteto de informação deve ser o maior consumidor de papel. Ele precisa de dezenas de impressões de wireframes para testes, correções e validação do cliente, sem mencionar a prototipação utilizando post-its. Protótipos navegáveis são de longe a melhor forma de fechar o escopo do projeto com o cliente, principalmente em sistemas altamente interativos. E podem ser reutilizados para a integração com as camadas de apresentação e comportamento.

Trabalhando a acessibilidade em dispositivos móveis

O futuro da Web não depende exclusivamente de acesso nos computadores desktop como conhecemos hoje. Notebooks já são mais acessíveis para usuários finais e usuários corporativos estão obtendo acesso aos sistemas Web por dispositivos móveis cada vez menores. A fonte de energia destes dispositivos ainda são baterias recarregáveis com uma vida útil limitada. Nem sempre o despejo destas baterias, que são compostas por diversas substâncias tóxicas, é adequado. Estes despejos acabam em aterros sanitários comuns, contaminando o solo e as águas.

Trabalhando um pouco a media handheld no seu CSS é possível diminuir o tempo de uso de alguns destes dispositivos, mas a diferença aparece mesmo na verificação de acessibilidade. Passe suas interfaces nos verificadores automáticos e assegure-se de conseguir o maior nível de acessibilidade de acordo com os prazos disponíveis.

Lendo este artigo, esta iniciativa pode parecer ineficaz ou mesma utópica, mas são nas pequenas atitudes que conseguimos as pequenas economias que farão a diferença. É cada um fazendo a sua parte. Todos lucram.

Tags: , , ,

Visie: Code Show

Code Show
17 de Agosto de 2007.
E duas semanas depois, alguns notas sobre o Code Show:

  • Ótima dica do Élcio para separar entregas de um grande aplicativo em pequenos módulos. O cliente vê que o projeto está andando, os projetos mais fáceis de gerenciar e o tesãozinho de trabalho cumprido quase que diariamente.
  • Que nervoso me deu com Diego espalhando aquele font-family no código todo! Lembrete para mim mesma: escrever algo sobre boas práticas para CSS, reset.css ou mesmo sobre CSS frameworks. Update: Escrevi! Uma outra visão sobre CSS Frameworks.
  • Outro ponto que me deixou tensa foi a estrutura da página. Quando começo a montar um conteúdo, coloco apenas as tags indispensáveis para a compreensão do conteúdo. Qualquer div ou span de estrutura só entra quando estou feliz com o conteúdo e começo a montar o CSS. Isto minimiza a ocorrência de tags desnecessárias, principalmente para quem está começando com o CSS design.
  • Não vi os meninos validarem o código HTML durante o processo. Não vi se o CODA já faz isso e eu perdi a deixa. Estou sempre validando para evitar erros de renderização bizarros e evitar o acúmulo de erros em todas as páginas. O mesmo serve para a verificação de acessibilidade e usabilidade. Assim que estou com o HTML montadinho em todo site navego para ver se faz algum sentido. Isso antes mesmo de ter um layout! Eu sei que era apenas um exercício, mas era o lugar para aprendermos um pouco das práticas uns dos outros.
  • Subversion é tudo nesta vida. Ainda vou ter um! *:D
  • Estava curiosa sobre o Python, mas foi só isso. Não me apaixonei.
  • Foi ótimo finalmente conhecer Elcio, Diego, Rafael e Jader, e conhecer o menino Victor, que levou a gente para almoçar, e todo mundo mais!
    Visie Code Show
  • Preciso de um destes aparelhinhos wi-fi. Me senti em 1986 com bloquinho de notas e lapiseira.
  • Ainda não vi a gravação do CodeShow! Tenho que fazer isso logo!!!
  • Não comi pizza, mas tomei um chopp preto ótimo no Prainha Paulista (que infame!).
  • Nunca vá de vestidinho para SP no inverno. Você vai congelar.

Uma resenha mais profunda no blog do Jader.

Tags: , , , ,
Página 1 de 512345