Mark Pilgrim (O’Reilly Media) está escrevendo e publicando uma seleção das funcionalidades mais bacanas do HTML5.
O site faz uso de fonte embed via @font-face, uma das grandes novidades da especificação – além das tags <video>, <audio> e <canvas>, já tão comentadas por aí.
Alguns capítulos já estão prontos ou num estágio bem avançado. Alguns outros, por enquanto, só constam no índice. Pilgrim dá exemplos de aplicação, compara e explica blocos de código.
Em inglês.
Foi anunciado ontem pelo WHATWG/W3C o primeiro rascunho público (Public Working Draft) do HTML 5. Na realidade, o conteúdo do rascunho já estava disponível online e era editado pelo grupo todos os dias, continuamente, com diversas marcações ao longo do texto. O release de ontem representa uma milestone importante do projeto, por representar idéias mais concretas, viáveis e passíveis de implementação nos browsers, além de servir como objeto de estudo.
Entre os príncipios do HTML estão: suporte ao conteúdo já existente (navegador deve processar e se comportar como era a intenção de que fosse) , prioridade à forma de codificação mais usada (ex: <br /> é hoje mais usado que <br>. Mesmo que no HTML5 não seja necessário fechar tags como <br>, <img> e <link>, não faz mal usar <br />, separação de conteúdo (HTML) de apresentação (CSS) e acesso universal (mídia, idiomas, acessibilidade).
Algumas das mais interessantes funcionalidades para os autores são as APIs para gráficos bi-dimensionais, incorporação e controle de audio e video (com tags específicas – achar o plugin/codec e fazer a reprodução fica por conta do browser) , armazenamento de dados persistente no client-side e a possibilidade de edição de documentos pelo usuário de maneira interativa. Elementos comuns nas páginas ficam mais fáceis de serem representados, com <section>, <footer>, <nav> (navegação) e <figure> (para colocar uma legenda numa foto ou outro conteúdo incorporado, por exemplo).
Por fim, a W3C diz que a especificação do HTML5 ajuda a melhorar a interoperabilidade e reduz os custos de software, por ter regras precisas, não só de como escrever um HTML correto, mas também de como recuperar erros.
via Under-Linux, Slashdot, W3C
Juro que este será o último post da série 
Minha intenção é começar a apresentar um pouquinho das mudanças de sintaxe no HTML 5. Tratarei aqui principalmente do que diz respeito ao cabeçalho, identificação do arquivo e coisas do tipo, principalmente porque isso já está definido pelo WHATWG e não deve ser mudado. As tags que ficarão dentro do <body> poderão sofrer mudanças de caráter semântico (terão outro sentido), outras serão mantidas como antes e algumas serão adicionadas, como a já famosa tag <canvas>, criada pela Apple no dashboard do OS X. Vários atributos e tags também serão removidos.
O HTML nasceu com a sintaxe SGML, relativamente simples e prática pras necessidades de uso e semântica. A customização da sintaxe de uma linguagem de marcação em SGML é especificada por um DTD (Document Type Definition) como este:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
para o HTML 4 strict, ou este:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
para o XHTML 1.0 Strict.
O DTD carrega toda a especificação da linguagem – suas tags, atributos e valores aceitos.
No HTML 5, bastará a declaração <!DOCTYPE html>, que é suficiente para o navegador renderizar o html em ’standards mode’ – não em ‘quirks mode‘.
É o MIME Type que define o tipo do documento que você está usando. O padrão para HTML clássico é e vai continuar sendo servido como text/html. Se você utiliza text/html para enviar um XHTML, ele será considerado um HTML, talvez com erros de sintaxe.
Hoje, quando não é possível o envio do MIME e do encoding da página pelo cabeçalho HTTP, usa-se:
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />No HTML5, o tipo deverá ser identificado somente no cabeçalho HTTP, de modo que se for possível identificar o encoding, a tag abaixo deve ser colocada logo após do DOCTYPE/html/head, antes mesmo do título, nos primeiros 512 bytes do código:
<meta charset="UTF-8">Um arquivo XHTML deve ser servido no cabeçalho HTTP com um MIME Type de XML, como application/xml ou application/xhtml+xml. A codificação é passada no atributo encoding, na declaração do XML (que DEVE estar na primeira linha):
<?xml version="1.0" encoding="UTF-8"?>Por fim, um arquivo HTML 5 teria essa estrutura básica:
<!doctype html> <html> <head> <meta charset="UTF-8"> <title>Example document</title> </head> <body> <p>Example paragraph</p> </body> </html>
e um arquivo XHTML 5 seria basicamente apresentado assim:
<?xml version="1.0" encoding="UTF-8"?> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Example document</title> </head> <body> <p>Example paragraph</p> </body> </html>
Provavelmente o elemento canvas ainda me renderá alguns post. Pra ir adiantando o assunto, deixo o ‘Doom’ feito pela Mozilla, os efeitos do CVI (canvas/JS), o clone do MS Paint e o tutorial feito pela Mozilla.
Para terminar, você pode conferir aqui a lista completa das diferenças entre o HTML 4 e o 5 e aqui um super artigo do A List Apart sobre o HTML 5, sua estrutura e a entrada de video/audio.
Bom, depois de ficar muito tempo sem postar (perdão!) e de assistir 2001: Uma Odisséia no Espaço, o que me deixará afetado por algumas semanas, retomo este post.
O HTML foi criado como um meio de troca de documentos (científicos) entre máquinas e sistemas diferentes, usando o protocolo HTTP. Quem um dia já teve a oportunidade de escrever um documento científico sabe que ele é constituído de diversos elementos (titulo, resumo, autores, bibliografia, referências, etc.) que geralmente se repetem ou são obrigatórios/necessários. Com essa estrutura ‘previsível’, levantar e implementar as tags HTML necessárias para formatar tais documentos provavelmente não foi uma tarefa das mais difíceis. Além disso, diversas tags o HTML já herdava do SGML.
… mas a Web cresceu. Foi aberta para o mundo, para todos. E aí? Nem só de documentos científicos vivia essa Web.
Pois bem. Os browsers cresceram e apareceram com a Web. Mosaic, Netscape, Internet Explorer.
- Como colocar ‘tal’ texto em ‘tal’ lugar? Como criar colunas, barras, etc?
- Tipo um jornal?
- É! Tipo um jornal!
- Ora! Com tabelas!
As tabelas foram incluídas na especificação do HTML 3, em 1995. Daí pra frente, além de carregarem consigo dados tabulares, as tabelas serviam de grid para as páginas. E assim foi até uns dias atrás.
A proposta do CSS1 veio no mesmo ano, em novembro. A Microsoft adotou a idéia e prometeu implementar no recém-lançado Internet Explorer
Vale lembrar que desde 1993 havia na lista www-talk a idéia de uma folha de estilos pra HTML. Nada ainda em ‘cascata’. Veja a proposta do pessoal da O’Reilly:
@H1 fo(fa=he,si=32,we=bo) ve(be=1,af=2)que equivale a:
h1 { font-family: sans-serif; font-size: 32pt; font-weight: 900; padding-top: 1em; padding-bottom: 2em; }
Daí em diante, muita água passou por debaixo da ponte. A web crescia mais e mais. Novas possibilidades surgiam: e-commerce, leilões, chats, comunidades, enormes portais, web apps. Os browsers – claro, principalmente o eixo IE-Netscape – implementavam novas tags e outras tecnologias deliberadamente, levados pelo mercado e na tentativa de ganhar novos adeptos, tanto o usuário final quanto o desenvolvedor. Site compatível com IE nem sempre era com o Netscape e vice-versa.
A especificações do HTML4 e do CSS2 foram liberadas em 1998. Também em 1998, foi fundado o WaSP, o projeto Mozilla e foram iniciados os rascunhos do que viria a ser o XHTML.
Pequenos e grandes movimentos deram início ao trabalho de evangelização dos webstandards. A tecnologia disponível e a maioria dos browsers em uso já suportava o “pleno” uso de HTML/CSS para a construção de quaisquer tipos de site sem o uso, por exemplo, de tabelas como grid ou da tag <font>.
Como antes “HTML não era importante”, era “coisa pra browser entender” e era “uma bagunça de tag com trilhões de <td>”, nem todo ‘profissional’ web entendia HTML – o negócio era editor WYSIWYG. Macromedia Dreamweaver, Microsoft FrontPage, Netscape Composer, Adobe GoLive! e tantos outros eram ferramentas essenciais. Até concordo. Criar inúmeras estruturas de tabelas aninhadas na unha nunca foi tarefa das mais fáceis. Pior ainda era entender aquilo depois. No entanto, o movimento dos webstandards pregava uma coisa que essas ferramentas ainda não faziam no modo visual – e não fazem direito até hoje. Talvez por isso a migração para os padrões tenha sido tão lenta: a longa curva de aprendizado dos profissionais que até então dominavam o mercado e a demora para a evolução das ferramentas.
Do início dos anos 2000 pra cá, a adoção dos webstandards cresceu exponencialmente. Quem até então relutava em fazer da web um mundo melhor foi convencido pelo bolso (redução de custos e tempo de implementação e manutenção), pela equipe (programador nenhum gosta de trabalhar em um mar de <td>), ou pelo Google (conteúdo relevante como ele deve ser). Ah, sem falar que agências e profissionais anunciavam webstandards como diferencial competitivo – o que de fato era. Como a concorrência não quer nunca ficar pra trás, fizeram a lição de casa.
O XHTML foi liberado em 2000, como uma substituição/evolução do HTML 4. Hoje provavelmente seja a especificação mais usada para a escrita de novos documentos, mais por conta das melhorias de sintaxe em relação do HTML 4 do que pela abordagem do seu uso como documento XML. O futuro proposto pela W3C para o XHTML foi visto por Apple, Mozilla e Opera como um distanciamento da realidade e das necessidades dos autores dos documentos da web. Por conta disso, formaram o WHATWG, com foco principal na construção da especificação do Web Applications 1.0 (aka HTML 5).
No próximo post (provavelmente o último), as mudanças nas sintaxes de HTML4 e XHTML para HTML 5.
Ref: http://virtuelvis.com/archives/2005/01/css-history – História do CSS, principalmente quanto às sintaxes propostas
img é sugerida pelo time de desenvolvimento do Mosaic;No próximo post, o uso do HTML ao longo dos anos pelos desenvolvedores.
Fonte:
http://www.w3.org/People/Raggett/book4/ch02.html
http://br.mozdev.org/sobre/crono/
http://www.eskimo.com/~bloo/indexdot/history/html.htm
