aifia-pt AT lists.ibiblio.org
Subject: Arquitetura da Informação (em Português)
List archive
- From: Eliel Zulato <zullatto AT gmail.com>
- To: Arquitetura da Informação (em Português) <aifia-pt AT lists.ibiblio.org>
- Subject: [AI] Você está pronto para o HTML 5?
- Date: Mon, 15 Mar 2010 12:11:27 -0300
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
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
-
[AI] Você está pronto para o HTML 5?,
Eliel Zulato, 03/15/2010
- [AI] Res: Você está pronto para o HTML 5?, Paulo de Tarso, 03/15/2010
-
Re: [AI] Você está pronto para o HTML 5?,
Lucas da Costa Petes, 03/15/2010
- Re: [AI] Você está pronto para o HTML 5?, Bernardo Doré, 03/15/2010
Archive powered by MHonArc 2.6.24.