[AI] Você está pronto para o HTML 5?

Lucas da Costa Petes lucaspetes em gmail.com
Segunda Março 15 11:49:26 EDT 2010


Hmm, o HTML5 tem a especificação ainda em fase de rascunho e vai ser a
próxima versão do HTML, depois do 4 em 98 (?) e do XHTML no começo da
década. Esqueci os detalhes, mas basicamente houve uma insatisfação por
parte dos fabricantes de browsers sobre o rumo que a W3C estava dando ao
HTML, começando pelo fato de que a idéia do XHTML era boa, mas um tanto
quanto inviável para a 'massa' por N motivos. Iniciaram então o WHATWG e
começaram a fazer uma nova especificação por conta propria, seguindo
principios diferentes, que mais tarde foi aceito e apoiado pela W3C.

Muito do que vai sendo especificado e ganhando alguma maturidade já vai
sendo implementado nos browsers, de modo que várias das novidades do HTML5
(e do CSS3, vale lembrar) já podem ser testadas e até usadas comercialmente.
Há vários serviços e bibliotecas que fazem uso exclusivo do HTML5
(processing.js, por exemplo) e outros serviços em produção tem feito alguns
testes (Youtube e Vimeo com player HTML5, por exemplo). Outros trocentos
sites-conceito aparecem diariamente por aí.

Vantagens: antecipação ao futuro?
Desvantagem: capaz de vc esquecer tudo antes de poder usar largamente ;D

2010/3/15 Eliel Zulato <zullatto em gmail.com>

> Olá pessoal, para um leigo como eu, que acabei de iniciar uma Pós-Graduação
> na impacta, que não entende de programação ainda, quais as vantagem e
> desvantagem deste aplicativo?
>
>
> 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 *
> <video>* 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 *
> <video>* 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 *<video src="meuvideo.mp4 width="320" height="240"
> controls></video>.*
> *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 *<div>*, com seu nome
> indicando o tipo de seção. As novas tags são *<header>*, *<footer>*, *
> <article>*, *<section>*, *<nav>* e *<aside>*. 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 *<canvas>* 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 *<canvas> *e *</canvas>*.
>
> *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 *<time>* marca hora e data e
> evitaria o problema descrito acima usando o código *<timedatetime="2010-02-10">
> </time>*, 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.
>
>
> --
> "O conhecimento é uma ferramenta e, como todas as ferramentas, seu impacto
> está nas mãos do usuário".
>
> Eliel Costa Zulato
> Bibliotecário
> CRB-8º : 8164
>
> . . . . . . . . . . . . . . . . . . . . . .
> Ao responder, elimine o texto não essencial
> de mensagens anteriores e evite formatação.
>
> Lista de discussão AIfIA-pt
> AIfIA-pt em lists.ibiblio.org
> Arquitetura de Informação em Português
> http://lists.ibiblio.org/mailman/listinfo/aifia-pt
>
-------------- Próxima Parte ----------
Um anexo em HTML foi limpo...
URL: http://lists.ibiblio.org/pipermail/aifia-pt/attachments/20100315/9f68e437/attachment.html 


Mais detalhes sobre a lista de discussão AIfIA-pt