Scribd Logo
Fazer o upload

Bem-vindo(a) ao Scribd!

  • HTML 5

    Enviado por

    gunswar
    124 visualizações5 páginas

    Título original

    html5

    Direitos autorais

    © Attribution Non-Commercial (BY-NC)

    Formatos disponíveis

    DOC, PDF, TXT ou leia online no Scribd

    Você considera este documento útil?

    Este conteúdo é inapropriado?

    Denunciar este documento

    Direitos autorais:

    Attribution Non-Commercial (BY-NC)
    Baixe no formato DOC, PDF, TXT ou leia online no Scribd
    Sinalizar o conteúdo como inadequado
    124 visualizações5 páginas

    HTML 5

    Enviado por

    gunswar

    Direitos autorais:

    Attribution Non-Commercial (BY-NC)
    Baixe no formato DOC, PDF, TXT ou leia online no Scribd
    Sinalizar o conteúdo como inadequado
    de 5

    :: Web

    Abreviando as declarações no CSS


    Por Erika Sarti, em 01/12/2009.

    Introdução

    Desde 1999, o desenvolvimento da linguagem HTML (HyperText Markup Language)


    ficou estacionado na versão 4. De lá pra cá, a W3C esteve focada em linguagens como
    XML (Extensible Markup Language) e SVG (Scalable Vector Graphics - o uso de
    gráficos vetoriais em navegadores). Enquanto isso, os navegadores estiveram
    preocupados em desenvolver suas funcionalidades, como exibir páginas em abas e
    oferecer a integração com leitores de RSS. Porém, recentemente organizações como
    Mozilla Foundation, Opera e Apple se uniram para atualizar o HTML e implementar
    nele novas funcionalidades.

    Neste artigo veremos as novidades que o HTML 5 traz. Para quem está se
    familiarizando agora com o HTML, sem preocupações: os elementos tradicionais
    continuam os mesmos, já que o HTML 5 foi desenvolvido pensando também em todos
    os usuários que não utilizam os navegadores mais recentes do mercado.

    Novos elementos

    Vários novos elementos foram introduzidos no HTML 5, todos com a finalidade de


    facilitar a compreensão e a manutenção do código. Alguns são uma evolução natural do
    elemento <div> com foco na semântica; outros surgiram da necessidade de padronizar a
    maneira de se publicar conteúdo, como acontece hoje com as imagens. Os principais
    elementos dessa nova versão são:

    Elementos de estrutura

    <header> - cabeçalho da página ou de uma seção (não confundir com a tag <head>);

    <section> - cada seção do conteúdo;

    <article> - um item do conteúdo dentro da página ou da seção;

    <footer> - o rodapé da página ou de uma seção;


    <nav> - o conjunto de links que formam a navegação, seja o menu principal do site ou
    links relacionados ao conteúdo da página;

    <aside> - conteúdo relacionado ao artigo (como arquivos e posts relacionados em um


    blog, por exemplo).

    Elementos de conteúdo

    <figure> - usado para associar uma legenda a uma imagem, vídeo, arquivo de áudio,
    objeto ou iframe:

    <figure id="figura01">
    <legend>Figura 1. Esquema de uma página em HTML 5</legend>
    <img src="html5.png" border="0" width="200" height="300"
    alt="Como fica a estrutura de uma página escrita com os novos
    elementos do HTML 5" />
    </figure>

    <canvas> - através de uma API gráfica, irá renderizar imagens 2D dinâmicas que
    poderão ser usadas em jogos, gráficos, etc;

    <audio> e <video> - usados para streaming (transmissão pela internet) de áudio e


    vídeo. É uma tentativa de criar um padrão em todos os navegadores como acontece hoje
    com as imagens:

    <audio src="musica.mp3" autoplay="autoplay" loop="20000" />

    <video src="video.mov" width="400" height="360" />


    <dialog> - junto com as tags <dt> e <dd> será usado para formatar um diálogo:

    <dialog>
    <dt> Michael, you never told me your family knew Johnny
    Fontane!
    <dd> Oh sure, you want to meet him?
    <dt> Yeah!
    <dd> You know, my father helped Johnny in his career.
    <dt> Really? How?
    <dd> ...Let's listen to this song.
    </dialog>

    <time> - representa data e/ou hora;

    <meter> - usada para representar medidas, que podem ser de distância, de armazenagem
    em disco, etc.

    Elementos retirados do HTML 5

    Alguns elementos não existirão mais no HTML 5. Alguns foram retirados porque sua
    função é puramente visual, e devem ser substituídos por uma declaração no CSS
    (Cascading Style Sheets), como: <basefont>, <big>, <center>, <font>, <s>,
    <strike>, <tt> e <u>. Outros foram retirados porque afetam negativamente a
    acessibilidade do site: <frame>, <frameset> e <noframes>.

    Apesar de serem considerados antigos, <b> e <i> ainda serão reconhecidos e


    renderizados para fins de formatação, mas devem ser substituídos sempre que possível
    pelos elementos <strong> e <em>, respectivamente.

    Também foram retirados alguns atributos, seja porque caíram em desuso ou porque
    podem ser substituídos semanticamente por declarações no CSS para definir o visual
    dos elementos. Os principais atributos retirados são:

    • target no elemento <a>;


    • align nos elementos <table> e demais tags de tabelas, <iframe>, <img>,
    <input>, <hr>, <div>, <p>, entre outros;
    • background em <body>;
    • bgcolor nos elementos de tabela e no <body>;
    • border em <table> e <object>;
    • cellpadding e cellspacing em <table>;
    • height em <td> e <th>;
    • width nos elementos <hr>, <table>, <td>, <th> e <pre>;
    • hspace e vspace em <img> e <object>;
    • noshade e size em <hr>.

    Doctype
    Com o HTML 5 usaremos apenas uma declaração doctype:

    <!DOCTYPE html>

    Além de única, ela é curta e fácil de lembrar - hoje em dia praticamente todos os
    desenvolvedores copiam e colam o longo e complicado doctype de algum lugar na hora
    de começar um novo documento HTML.

    Transição do XHTML

    A semelhança entre o HTML 5 e seus antecessores, HTML 4.01 e XHTML 1.0, é muito
    grande. Quem está familiarizado com as versões anteriores não sentirá nenhuma
    dificuldade na transição, e para quem ainda vai aprender a linguagem, os novos
    elementos deixarão o processo mais simples.

    A sintaxe dos elementos é como no HTML 4.01, que não exigia que elementos como
    <img> e <input> fossem "fechados":

    <input type="text" id="nome">

    Porém, para aqueles que estão migrando do XHTML, a barra que fecha um elemento
    continuará sendo aceita:

    <input type="text" id="nome" />

    É hora de usar o HTML 5?

    Essa pergunta ainda gera um extenso debate entre os desenvolvedores. Há quem diga
    que, como a maioria dos navegadores usados hoje em dia ainda não tem suporte a
    HTML 5, e nem todas as novas tags estão completamente definidas, ainda não é hora de
    gastar energia e tempo desenvolvendo um site para os navegadores mais recentes para
    depois ter que "corrigir" o código pensando nos navegadores antigos. Além disso, a
    própria W3C admite que as especificações atuais ainda não são definitivas e podem
    sofrer revisões.

    Por outro lado, algumas pessoas defendem que toda tecnologia nova deve ser colocada
    em prática para evoluir, encontrar erros e estabelecer melhorias. A resistência sempre
    vai existir, como aconteceu com os padrões web: ainda hoje muita gente utiliza tabelas
    para estruturar os layouts como se estivéssemos nos anos 1990, apesar do extenso
    material sobre layouts tableless disponível.

    De qualquer maneira, o jeito mais fácil de se tomar a decisão de migrar ou não para o
    HTML 5 é estudando o público alvo do site para saber quais os navegadores mais
    utilizados por ele, e pensar se o tempo gasto com a correção para navegadores antigos
    vai valer a pena. Talvez seja mais interessante, por exemplo, redesenhar seu blog
    pessoal em HTML 5, mas manter o portfolio em XHTML. Cada caso é um caso, e
    planejamento, como em qualquer projeto, é essencial.
    Decididamente o HTML 5 inaugura uma nova era no desenvolvimento de páginas para
    a internet, onde a mobilidade do usuário é a palavra chave. Mudanças foram
    implementadas a partir das necessidades dos desenvolvedores, baseadas em erros e
    acertos. A partir de agora teremos em breve aplicações web mais ricas e com maior
    integração entre conteúdo on-line e off-line.

    Para informações técnicas mais detalhadas sobre o HTML 5, consulte a documentação


    oficial do W3C e a listagem de diferenças entre o HTML 5 e sua versão anterior.

    Erika Sarti é web designer e trabalha como free-lancer desde 2000. É a responsável
    pelo novo layout do InfoWester, basicamente feito com tableless, um de seus assuntos
    preferidos. Seu portfólio está em www.erikasarti.net.

    Os artigos desenvolvidos pelo InfoWester estão sob uma Licença Creative Commons -
    http://creativecommons.org/licenses/by-nc-sa/3.0/br/
    InfoWester 2010 - Propagando conhecimento - www.infowester.com

    Você também pode gostar