HTML 5: Tá quase engrenando…

Neste Post vamos voltar a abordar o tão esperado HTML 5. Tão esperado por quê? Simplesmente porque ele permitirá reunir diversos recursos que hoje só funcionam com diversos plugins (Flash, centenas de jquerys e ajax em geral) e deixam as páginas pesadas e demoradas pra serem carregadas. Sem falar da incompatibilidade existente entre plataformas e até mesmo entre diferentes navegadores. Todo mundo que tem um Ipad tá chateado por não conseguir assistir vídeos ou animações em Flash.

Com isso o HTML 5 não será apenas uma atualização da linguagem, esta versão passará a oferecer recursos que eram impossíveis de se programar apenas em HTML puro. Quem acompanhou o começo da web deve lembrar-se de como eram feias as páginas naquela época, sites repletos de frames, tabelas (com aquelas bordas risórias..) e claro, não podemos nos esquecer das animações, os velhos e simpáticos Gifs! Naquele tempo só restava ao webmaster fazer graça com scripts inúteis. (Nessa época praticamente todo site tinha uma frase ou uma imagem passando pela tela. - Tag <marquee> do HTML)

O HTML 5 ainda está na incubadora, faltam alguns detalhes e normas à serem definidas. Mas aos poucos estamos tendo acesso a suas novas funcionalidades. Sua previsão de lançamento é para o segundo semestre de 2012. Atualmente temos apenas 2 navegadores que estão rodando bem os scripts nesta versão, trata-se do Google Chrome e do Safari. Os demais ainda precisam melhorar e muito no trabalho.

Em posts anteriores eu já citei alguns recursos que estarão presentes nesta nova versão. Hoje vou listar as principais novidades que estão prontas para entrar na ativa.

- Multimídia sem Plugin:

Hoje para reproduzirmos um vídeo numa pagina da Internet precisamos ativar algum plugin. Em larga escala, o mais utilizado é o Flash da Adobe. (Menos no mundo da Apple onde o QuickTime é mais legal). No entanto, esta necessidade será extinta, o HTML 5 oferecerá tag próprias para inclusão de conteúdo multimídia, tratam-se das tags <video> e <audio>. Abaixo vou deixar um exemplo de como publicar um video com esta nova tag:

<video src="video.mp4" width="320" height="240" controls></video>

Mole né? Vai ficar tão fácil como colocar uma foto nos dias atuais. para testar este recurso você pode acessar a página do Youtube confeccionada em HTML 5, siga o link: www.youtube.com/html5  -- (lembre-se de acessar o site usando um navegador compatível).

- Agora o CSS vai ficar legal

Agora é pra valer! Tudo indica que finalmente as tabelas e frames serão aposentados com o novo HTML. Pois ele terá tags para facilitar a organização e consequentemente para formatar o conteúdo. Serão as seguintes:

<header> <footer> <article> <section> <nav> <aside>

- Gráficos sem gambiarra

Sem dúvida os gráficos nos ajudam (e muito) a compreender informações mais complexas, como pesquisas ou mesmo estatísticas. Só que hoje em dia, fica difícil oferecer um gráfico dinâmico nos sites que desenvolvemos. A solução mais pratica é criar o visual dele em Flash e a ponte dos dados com o banco através do XML. Assim quando um dado for atualizado no banco as barrinhas do gráfico se alteram, (igualzinho o Excel). Logo, logo, teremos a tag <canvas> que possibilitará a exibição de gráficos dinâmicos sem a mesma complexidade de se fazer entendê-las.

- Calendários

Qual é a data a se entender quando se lê: 8/3/2011?

Pode ser 8 de Março no padrão brasileiro, e ao mesmo tempo 3 de Agosto no padrão americano. Se pode confundir até a gente imagine explicar isso para os seus códigos?

Particularmente, quando trabalho com datas costumo criar funções em PHP ou Asp para tratá-las de maneira uniforme. Tem gente que prefere o JavaScript.

Mas o HTML sozinho será capaz de driblar este problema, teremos a tag <time> que poderá identificar informações do navegador e mostrar a data correta no padrão do usuário.

- Aplicações Off-line

Em tempos de computação em nuvem (Cloud Computing). Ainda tem espaço para sistemas que rodam diretamente no HD do computador. Futuramente esta demanda será apenas para emergências, como a queda da conexão da Internet (lembrei do speedy agora, rs). Assim será possível que o usuário tenha salvo em seu micro uma cópia do sistema e possa continuar trabalhando mesmo sem estar ON para seus amigos do Messenger.

Hoje já temos o Google Gears que trabalha com o DOM Storage, Porém os navegadores precisam melhorar neste quesito, atualmente o Firefox oferece apenas 5 mb de espaço para isso e o Internet Explorer o valor sobe para 10 Mb.

- Quem disse que Internet é só clicar?

Sabe aquele joguinhos em Flash onde as crianças vestem animaizinhos com chapéus, roupinhas e tudo mais? Este recurso hoje é feito em 99% dos casos em Flash, pois o usuário (no caso a criança ou algum adulto com sérios problemas) precisa clicar na roupinha e arrastar até o bichinho para vesti-lo.

Teremos comandos para interagir com JavaScript, assim facilitando a criação do recurso "Arrastar e Soltar". São eles dragenter, dragover e drop. Para dizermos ao código que objeto será "arrastável", bastará aplicar o atributo: draggable="true".

Bem, resta-nos esperar por ele, torcer para que os navegadores acompanhem a tecnologia, e o mais importante, que nossos queridos usuários tenham a ciência de que é necessário atualizarem seus browsers sempre que tiverem uma versão nova disponível.