Como usar HTML5 em seu site agora

Existem muitos artigos sobre HTML5, como "O que esperar do HTML5?" ” e “Como o HTML5 mudará a web?” e assim por diante, mas para desenvolvedores web, a principal coisa a saber é: O que posso fazer com o HTML5 agora e como posso começar a usá-lo? A boa notícia é que já existem muitas coisas disponíveis em HTML5.

Porém, há uma coisa que você deve entender no início: você precisa conhecer seu público, caso contrário você não deve usar HTML5. Se a maioria das pessoas que visitam seu site usa o IE6, não há absolutamente nenhuma razão para você usar HTML5. Por outro lado, se todos os visitantes do seu site usam navegadores móveis, como iPhones e iPads, o que você está esperando? Você pode começar agora! Espere, aqui estão algumas orientações, não é tarde para começar depois de lê-las.

Quais recursos do HTML5 você pode usar agora?

Embora o padrão HTML5 ainda seja um rascunho e esteja sendo discutido nas mãos de organizações de padronização, partes importantes foram implementadas por muitos navegadores modernos. Apple Safari, Google Chrome, Mozilla Firefox, Opera e Microsoft IE9 já suportam alguns recursos do HTML5.

Vamos primeiro dar uma olhada na pontuação de cada navegador no site HTML5 TEST:

*Apple Safari 5.0: 208

*Google Chrome 5.03:197

*Microsoft IE7: 12

*Microsoft IE8: 27

*Mozilla Firefox 3.66:139

* Ópera 10.6: 159

Parece óbvio que a maioria dos navegadores convencionais que não são o núcleo do IE têm um bom suporte para HTML5 e podem fazer com que "sites que usam o rascunho HTML5" funcionem muito bem.

Voltando ao início, agora você pode usar o doctype HTML5, não há razão para não usá-lo, você pode até consultar e substituir em todo o site:

torna-se:

O código a seguir parece mais limpo e direto, não é? Se os navegadores renderizassem suas páginas da web de maneira compatível com os padrões, eles ainda o fariam.

Vamos falar sobre o vídeo. Muitas publicações sobre HTML5 mencionarão os concorrentes atuais, quatro no total: Flash, H.264, OGG e WebM. Todos eles podem se tornar um formato padrão no futuro e nenhum deles será reproduzido corretamente em todos os navegadores e em todas as plataformas. Infelizmente, parece que os patrocinadores do navegador não prepararam um formato público para esse recurso tão cedo.

Portanto, é óbvio que a tag Vídeo ainda não atingiu o estágio de aplicação. Mas espere, deve-se esperar que a tag de vídeo HTML5 seja independente do formato. Na verdade, como um vídeo pode conter múltiplas tags de origem, ele tem que funcionar desta forma. Se o seu navegador não suportar a primeira opção, ele tentará a segunda, depois a terceira, a quarta, a quinta...

HTML para lidar com situações como essa é um projeto de código aberto que suporta vídeo baseado na web sem usar scripts e detecção de navegador e pode ser encontrado aqui .

Semanticamente falando, uma grande mudança no HTML5 são aquelas tags com semântica clara. A mudança que você pode ver é que seu site agora está preenchido com um código semelhante a este:

Em HTML5, você pode expressar assim:

A semântica está mais clara? Claro, ainda temos que usar CSS [Cascading Style Sheets] para formatar esses elementos. Mas espere, nenhuma versão do IE suporta essas tags! Este é um grande problema para as pessoas! Somos realmente tão azarados? Felizmente, temos uma solução: tudo que você precisa fazer é colar o seguinte código na tag HEAD da sua página:

HTML5 Shiv é um projeto de código aberto baseado em uma descoberta simples: se você criar um elemento DOM no IE, poderá usar esse nome em estilos. Por exemplo, se você usar

Crie um elemento DOM, então você pode adicionar qualquer número de tags foo à página atual e o IE irá formatá-las. HTML5 Shiv contém alguns elementos HTML5 que o IE não consegue reconhecer e os cria um por um. Desta forma você pode usar estas tags HTML5, por exemplo:

Smart Forms, outro recurso que torna o HTML5 mais inteligente. Se você está cansado de escrever sempre o mesmo script para verificar a validade de um endereço de e-mail ou algo como um número de telefone, endereço de Internet, etc., você não está sozinho! Há uma razão para deixar o navegador fazer todo esse trabalho chato, não é? É verdade.

Aqui está a sintaxe:

O que esses navegadores mais antigos farão? A parte mais inteligente: se eles virem um atributo TYPE com um valor que não reconhecem, eles renderizarão o elemento com o valor padrão Text, que é exatamente o resultado de compatibilidade com versões anteriores que esperamos. Os navegadores que suportam HTML5 verificarão automaticamente esse tipo de campo, mas é melhor você não jogar fora seus scripts anteriores, pelo menos não até que o IE9 se torne popular.

Se você está se perguntando o que os navegadores que suportam esses tipos de ações fazem além da validação, você pode tentar estes formulários no seu iPhone. Você notará que o tipo de teclado associado ao formulário muda. Às vezes é numérico, às vezes é alfanumérico com um símbolo @ anexado e alguns até possuem uma tecla.com diretamente. Tudo que você precisa fazer é alterar o valor do atributo type.

Também pode ser um pouco mais inteligente, aqui está um novo atributo:

Este valor pode simplesmente especificar um pedaço de texto, um efeito que você vê frequentemente na Internet. Este texto é exibido quando você clica, o valor fica vazio e retorna ao texto quando você o deixa. no passado, Javascript era usado para processá-lo, mas agora o navegador fará isso para você.

Quais recursos do HTML5 você pode usar imediatamente?

Nem todos os elementos HTML5 estão prontos para uso ainda, por vários motivos (nenhum dos quais é abreviado como IE), o suporte do navegador estará disponível em breve e, em um futuro não muito distante, você terá imediatamente dois elementos prontos para uso.

Fontes mágicas, todo designer tem um sonho, esperando que todos os visitantes do site instalem as fontes de que precisam ao projetar. Para fazer isso, costumava haver uma variedade de métodos, incluindo imagens, Flash, etc., mas agora, eles. tenha esse direito e poderá forçar seus visitantes a instalar as fontes que você especificar. Isto é o que o CSS3 suporta: atributo @font-face. Versões do Firefox anteriores à 3.5 e versões móveis do Safari (anteriores ao iOS 4) não suportam esse atributo. Se o seu site tiver muitas visitas semelhantes, talvez seja necessário esperar.

Independentemente disso, não há motivo real para todos os navegadores usarem a mesma fonte. Se você deseja fornecer fontes personalizadas para navegadores que suportam esse atributo e, em seguida, fornecer uma fonte alternativa para navegadores que não suportam esse atributo, neste momento também é uma boa solução. fontface/generator é um bom lugar para ir.

Sombras e cantos arredondados são coisas que deixam muitos designers felizes. Sombras de texto, sombras de bloco, cantos arredondados de bloco, etc. agora são padrões suportados pelo CSS3. Novamente, se não quiser medir a renderização em diferentes navegadores com base na perfeição dos pixels, você pode começar a usar esses recursos agora. Os geradores CSS3 irão ajudá-lo a fazer isso.

Quais recursos você poderá usar algum dia?

Este catálogo contém recursos nos quais desenvolvedores e designers vêm pensando há anos. Infelizmente, pode levar vários anos até que possam ser usados ​​no mundo real.

Os formulários inteligentes já foram mencionados antes, mas na verdade existem muitos outros elementos úteis que não foram mencionados, mas antes de um suporte mais amplo, não há como usá-los.

Seletor deslizante:

Seletor de cores:

Seletor de data:

Caixa de entrada com validação regular:

Caixas de entrada obrigatórias:

Nenhuma dessas tags tem suporte para vários navegadores ou plataformas, mas quando esse dia chegar, você definitivamente estará ansioso para usar essas tags.

Os layouts impressos, outro recurso do CSS3, ainda levarão anos para serem totalmente implementados. Fornece aos designers recursos de layout de várias colunas. Atualmente só pode ser implementado nos casos de teste do Firefox e Safari.

A detecção de geolocalização, com o crescimento de serviços baseados em localização como Gowalla e Foursquare, é útil para os navegadores saberem onde o usuário está. Portanto, não é surpreendente que os navegadores móveis baseados em telefones celulares sejam os primeiros a implementar esse recurso. O Firefxo 3.5 e o Safari 5 já começaram a fornecer suporte para geolocalização. (Um serviço semelhante do Chrome é implementado através do Gears, mas está gradualmente migrando para o HTML5).

Trabalhar off-line e armazenar dados localmente na nuvem é uma ótima ideia quando você não percebe que não tem uma conexão com a Internet ou tem um aplicativo que precisa processar grandes quantidades de dados e precisa ser executado com frequência; servidor. A comunicação com os clientes é mais fácil do que você pensa. Como você obtém mais; ou talvez seus dados móveis sejam limitados e você queira armazenar mais dados em seu telefone para evitar muita perda de dados. A resposta neste momento é usar o armazenamento local para fazer o aplicativo funcionar offline. para a nuvem quando conectado.

Os navegadores que suportam este recurso são: Firefox 3.5+, Safari Mobile 3.1+, Safari 4+, Chrome 4+.

Pranchetas, animações e efeitos de transformação, uma das promessas do HTML5 pode ser alcançada utilizando o elemento Canvas e algumas propriedades CSS3 para conseguir um site totalmente ilustrado e totalmente animado. Isto é do padrão de 12 de julho de 2010.

Verde = Alcançado, Vermelho = Não planejado

Atalhos para HTML5 de última geração

Se você mal pode esperar que o IE8 morra, há muitas maneiras de ignorá-lo e seguir em frente - novamente, tudo depende dos visitantes. Dê uma olhada nos registros de acesso do seu site para ver quais cabeçalhos de navegador são mais visitados. Uma maneira de fazer isso é, por exemplo, usar o Chrome Frame do Google para incorporar uma instância do Chrome no IE. Se você entende que os visitantes do seu site podem ter instalado o GCF [Google Chrome Frame], então você pode adicioná-lo ao seu HEAD. A tag META na linha anterior força o IE a usar o GCF para exibir seu site:

[Editor: Mas gostaria de lembrá-lo de que fazer isso invalidará o modo de compatibilidade original do IE7 de IE=7, se desejar. ]

Juntamente com um pequeno script fornecido pelo Google, que permite aos usuários que não instalaram o GCF ir para a página de instalação do GCF, você poderá pular as restrições do IE. [Editor: Estou louco, parece que publicidade gratuita do GCF traz tráfego grátis...]

Os elementos listados neste artigo são apenas uma pequena parte dos rascunhos HTML5 e CSS3 atuais. Se você precisar usar alguns dos novos recursos, é necessário verificar os projetos de código aberto existentes para que você possa navegar. Os problemas de compatibilidade do servidor são minimizados. .

Ao reportar sobre HTML, muitos meios de comunicação focam em sua postura, como “não até 2022” e “Flash killer”. A realidade é que o HTML5 é uma atualização há muito esperada e completamente nova para o tão esperado HTML4 - então você pode começar a usá-lo hoje.