Como usar HTML5 em seu site agora

Muitos artigos foram escritos sobre HTML5, como "O que esperar do HTML5?" e "Como o HTML5 mudará a web", mas a principal coisa que os desenvolvedores da web devem saber é: O que posso usar agora? e como começo a usá-lo? A boa notícia é que já existem muitas coisas disponíveis em HTML5.

Porém, você deve entender uma coisa 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 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 suporta a primeira opção, então você 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 acontecerá com esses navegadores mais antigos? 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 um key.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ê com frequência 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 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, também é uma boa solução. No momento, http://www.fontsquirrel com/. 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 navegadores diferentes 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 estão a anos de 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 por meio 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. Existem mais transações com clientes do que você imagina; ou seu tráfego de dados móveis é limitado e você deseja armazenar mais dados em seu telefone para evitar muita perda de tráfego. trabalhe off-line e sincronize com 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ê não pode esperar que o IE8 morra, há muitas maneiras de ignorá-lo e seguir em frente - novamente, isso depende dos visitantes. Dê uma olhada nos registros de acesso do seu site para ver quais cabeçalhos do 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 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 publicidade gratuita para o GCF trazer tráfego grátis...]

Os elementos listados neste artigo são apenas uma pequena parte dos rascunhos atuais de HTML5 e CSS3. 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 “menos de 2022” e “Flash killer”. A realidade é que o HTML5 é uma atualização há muito necessária e completamente nova para o HTML4 há muito esperado - então você pode começar a usá-lo hoje.

Contribuição de: SafariX — blog chinês do Safari, compartilhando informações, dicas e extensões do Safari.

Fonte original: Infomundo

Fonte chinesa: http://safarix.net/how-to-use-html5-on-your-site-today