PSL-Brasil - Você está pronto para o HTML 5? - Software Livre

Você está pronto para o HTML 5? March 9, 2010, by Miguel Matiolla - No comments yet

Viewed 220 times

 Go back to Comunidade

Veja como a nova linguagem pode aposentar plug-ins, melhorar o visual da web e criar sites mais interativos

Svilen Milev

Quem acompanhou o começo da web deve lembrar do quanto as primeiras páginas eram feias. O design de páginas com HTML puro era cinza, quadradão, feito na base de frames e tabelas, as animações eram arquivos GIF toscos e restava ao webmaster fazer graça com scripts inúteis. Nesses últimos anos, vários padrões e tecnologias surgiram para ajudar a linguagem, como o CSS, o Flash e o XHTML. Mesmo assim, chegou a hora de mais mudança. A nova versão do padrão HTML está mais sólida, com os principais navegadores suportando suas inovações e facilitando assim a vida do designer, que poderá dispensar bibliotecas e pacotes auxiliares.

Vale lembrar que nem tudo funciona em todos os browsers, já que, na falta de uma especificação definitiva (que está prevista para 2012), os empresas adicionam os recursos do HTML 5 nos navegadores a conta-gotas. Conheça, a seguir, as principais mudanças que já estão aprovadas pela W3C e pelo WHATWG, as entidades que decidem o futuro da linguagem HTML.

Multimídia sem plug-in
O conteúdo em áudio e vídeo na web é refém dos plug-ins, como o Flash, para ser exibido. O HTML 5 prevê uma forma de contornar isso com as tags e <:audio>. Falta ainda definir os tipos de codecs a ser utilizados universalmente com essas tags. Hoje, Chrome e Safari conseguem exibir filmes em H.264 e tocar áudio AAC, encapsulados num arquivo MP4. Já o Firefox, fiel aos padrões abertos, mostra só vídeos Theora e som Vorbis, dentro de um arquivo Ogg. O impasse não preocupa tanto, pois as tags e <:audio> podem receber mais de um arquivo, com o browser selecionando qual é a opção compatível. Para adicionar um vídeo à página, basta usar o código .

CSS arrumadinho
O novo HTML promete aposentar frames e tabelas das páginas, com o CSS efetivado como responsável para esse fim. Além disso, a versão 5 conta com tags para definir seções dos sites, facilitando a integração com as folhas de estilo. Atualmente, o normal é usar um elemento

, com seu nome indicando o tipo de seção. As novas tags são

,

,

,

,

e

. Elas definem o cabeçalho, o rodapé, um artigo, uma seção (de um artigo), a barra de navegação e anotações sobre o conteúdo. Com esses elementos, é criada uma padronização que facilita a localização de conteúdo pelos buscadores e o reaproveitamento dos arquivos CSS.

Gráficos nascidos na web
O elemento permite criar desenhos usando JavaScript. Assim é possível, por exemplo, transformar dados do site em gráficos dinâmicos. A tag também serve para usar um texto ou imagem como substituto do desenho, caso o browser não tenha suporte aos gráficos dinâmicos. Nesse caso, o conteúdo alternativo fica entre e e .

Calendários sem erro
Qual é a data definida por 10/2/2010? Pode ser 10 de fevereiro, no padrão usado no Brasil, e, ao mesmo tempo, 2 de outubro, no modelo americano. O HTML 5 pode contornar essas situações com tags que definem o tipo de dados e sua formatação no texto da página web. A tag marca hora e data e evitaria o problema descrito acima usando o código , que poderia identificar as informações do navegador e decidir qual seria a data correta, para que ela possa ser exibida no padrão do usuário.

Versão offline
Já ouviu falar no Google Gears? Ele transforma aplicativos web em programas que rodam no browser mesmo em máquinas sem conexão com a web. Essa mágica é feita pelo recurso DOM Storage, que poderá ser usado por qualquer site em HTML 5. Um ponto essencial dessa forma de armazenamento local é que o servidor remoto não pode acessar diretamente o conteúdo (diferentemente dos cookies). Somente o browser e os scripts da página acessada podem modificar o conteúdo offline. Hoje, cada browser usa um limite de espaço. O Firefox aloca no máximo 5 MB por domínio web acessado. Já o Internet Explorer libera 10 MB por base de dados criada, independentemente do domínio.

Muito além dos cliques
Existem várias bibliotecas para habilitar o suporte ao recurso de arrastar e soltar objetos em sites. Mas no HTML 5 a coisa fica bem mais fácil. Basta definir valores para três eventos em JavaScript: dragenter, dragover e drop. Eles indicam, respectivamente, a entrada e a passagem de um elemento sobre outro, além do evento para o momento em que um item é solto. Definir um elemento da página como item que pode ser arrastado é mais fácil ainda. Basta adicionar a definição draggable="true" a ele.

 

Fonte: Info Online

PSL-Brasil - Você está pronto para o HTML 5? - Software Livre

 

 

Technorati Marcas: : PSL-Brasil, Software Livre, Brasil, PSL, Projeto,

 

 

BlogBlogs Marcas: : PSL-Brasil, Software Livre, Brasil, PSL, Projeto,