Scribd Logo
Fazer o upload

Bem-vindo(a) ao Scribd!

  • Introdução HTML5

    Enviado por

    lmalthus
    33 visualizações10 páginas

    Título original

    Introdução_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
    33 visualizações10 páginas

    Introdução HTML5

    Enviado por

    lmalthus

    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 10

    Introduo

    Desde 1999, o desenvolvimento da linguagem HTML (HyperText Markup Language) ficou estacionado na verso 4. De l pra c, a W3C esteve focada em linguagens como XML (Extensible Markup Language) e SVG (Scalable Vector Graphics - o uso de grficos vetoriais em navegadores). Enquanto isso, os navegadores estiveram preocupados em desenvolver suas funcionalidades, como exibir pginas em abas e oferecer a integrao com leitores de RSS. Porm, recentemente organizaes como Mozilla Foundation, Opera e Apple se uniram para atualizar o HTML e implementar nele novas funcionalidades. Neste artigo veremos as novidades que o HTML5 traz. Para quem est se familiarizando agora com o HTML, sem preocupaes: os elementos tradicionais continuam os mesmos, j que o HTML5 foi desenvolvido pensando tambm em todos os usurios que no utilizam os navegadores mais recentes do mercado.

    Novos elementos
    Vrios novos elementos foram introduzidos no HTML5, todos com a finalidade de facilitar a compreenso e a manuteno do cdigo. Alguns so uma evoluo natural do elemento <div> com foco na semntica; outros surgiram da necessidade de padronizar a maneira de se publicar contedo, como acontece hoje com as imagens. Os principais elementos dessa nova verso so: Elementos de estrutura
    <header>

    - cabealho da pgina ou de uma seo (no confundir com a tag <head>); - cada seo do contedo; - um item do contedo dentro da pgina ou da seo;

    <section> <article> <footer> <nav>

    - o rodap da pgina ou de uma seo;

    - o conjunto de links que formam a navegao, seja o menu principal do site ou links relacionados ao contedo da pgina; - contedo relacionado ao artigo (como arquivos e posts relacionados em um blog, por exemplo).
    <aside>

    Elementos de contedo - usado para associar uma legenda a uma imagem, vdeo, arquivo de udio, objeto ou iframe:
    <figure> <figure id="figura01"> <legend>Figura 1. Esquema de uma pgina em HTML5</legend> <img src="html5.png" border="0" width="200" height="300" alt="Como fica a estrutura de uma pgina escrita com os novos elementos do HTML5" /> </figure>

    - atravs de uma API grfica, ir renderizar imagens 2D dinmicas que podero ser usadas em jogos, grficos, etc;
    <canvas>

    e <video> - usados para streaming (transmisso pela internet) de udio e vdeo. uma tentativa de criar um padro em todos os navegadores como acontece hoje com as imagens:
    <audio> <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 dilogo:
    Michael, you never told me your family knew Johnny Oh sure, you want to meet him? Yeah! You know, my father helped Johnny in his career. Really? How? ...Let's listen to this song.

    <dialog> <dt> Fontane! <dd> <dt> <dd> <dt> <dd>

    </dialog> <time>

    - representa data e/ou hora;

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

    Elementos retirados do HTML5


    Alguns elementos no existiro mais no HTML5. Alguns foram retirados porque sua funo puramente visual, e devem ser substitudos por uma declarao 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 sero reconhecidos e renderizados para fins de formatao, mas devem ser substitudos sempre que possvel pelos elementos <strong> e <em>, respectivamente. Tambm foram retirados alguns atributos, seja porque caram em desuso ou porque podem ser substitudos semanticamente por declaraes no CSS para definir o visual dos elementos. Os principais atributos retirados so:
    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 HTML5 usaremos apenas uma declarao doctype:
    <!DOCTYPE html>

    Alm de nica, ela curta e fcil de lembrar - hoje em dia praticamente todos os desenvolvedores copiam e colam o longo e complicado doctype de algum lugar na hora de comear um novo documento HTML.

    Transio do XHTML

    A semelhana entre o HTML5 e seus antecessores, HTML 4.01 e XHTML 1.0, muito grande. Quem est familiarizado com as verses anteriores no sentir nenhuma dificuldade na transio, e para quem ainda vai aprender a linguagem, os novos elementos deixaro o processo mais simples. A sintaxe dos elementos como no HTML 4.01, que no exigia que elementos como <img> e <input> fossem "fechados":
    <input type="text" id="nome">

    Porm, para aqueles que esto migrando do XHTML, a barra que fecha um elemento continuar sendo aceita:
    <input type="text" id="nome" />

    Logotipo HTML5
    Em janeiro de 2011 o HTML5 ganhou um logotipo, junto com smbolos grficos que mostram para o visitante quais recursos esto sendo utilizados naquele site, como CSS3 e multimdia. Segundo o site oficial da W3C, o logotipo "forte e confivel, universal como a linguagem de marcao que voc escreve".

    hora de usar o HTML5?


    Com exceo do Internet Explorer (que promete mudar isso na sua verso 9), todos os navegadores j oferecem suporte maior parte dos elementos do HTML5. Alguns desenvolvedores defendem a ideia de esperar pela popularizao do IE9 para comear a usar a nova especificao. Outros acreditam que toda nova tecnologia deve ser colocada em prtica o quanto antes, e j comearam a utilizar o HTML5 junto com scripts que fazem os navegadores mais antigos reconhecerem as novas tags (como, por exemplo, este script do desenvolvedor Remy Sharp). A resistncia sempre vai existir (infelizmente ainda hoje encontramos sites diagramados com <table> como se estivssemos em 1990!), mas a verso 6 do Internet Explorer permaneceu em uso durante mais de uma dcada e precisou da ao de grandes companhias como o Google, que deixou de dar suporte a ele para tentar diminuir a quantidade de usurios com um navegador incrivelmente antigo. Por isso, mesmo que o Internet Explorer 9 se popularize rapidamente, quando o desenvolvedor optar por

    utilizar HTML5, deve se preocupar em desenvolver pginas que funcionem em navegadores mais antigos. De qualquer maneira, o jeito mais fcil de se tomar a deciso de migrar ou no para o HTML5 estudando o pblico-alvo do site para saber quais os navegadores mais utilizados por ele, e pensar se o tempo gasto com a correo para navegadores antigos valer a pena. Talvez seja mais interessante, por exemplo, redesenhar seu blog pessoal em HTML5, mas manter o portfolio em XHTML. Cada caso um caso e planejamento, como em qualquer projeto, essencial. Decididamente o HTML5 inaugura uma nova era no desenvolvimento de pginas para a internet, onde a mobilidade do usurio a palavra chave. Mudanas foram implementadas a partir das necessidades dos desenvolvedores, baseadas em erros e acertos. A partir de agora teremos aplicaes Web mais ricas e com maior integrao entre contedo on-line e off-line. Para informaes tcnicas mais detalhadas sobre o HTML5, consulte a documentao oficial do W3C e a listagem de diferenas entre o HTML5 e sua verso anterior. http://www.infowester.com/introhtml5.php

    HTML 5 Mudanas na estrutura e semntica


    Todos os dias sites e mais sites so publicados na internet e nenhum deles com um padro de nomenclatura de classes e ids.

    64

    A Semntica sempre um dos pontos mais importantes do desenvolvimento com Padres Web. Algumas iniciativas com o Microformats vieram na tentativa de trazer mais semntica ainda para nossos cdigos, com o intuito de novas aplicaes e oportunidades pudessem utilizar melhor a informao distribuda na web. Acontece que o resto do HTML no foi a bastante tempo modificado. Por exemplo, como voc consegue distinguir de forma automtica as informaes do header (cabealho) dos sites? No consegue. Voc no consegue por exemplo, de maneira automatizada, identificar o que um rodap ou a parte do layout que est exibindo um artigo, por exemplo. Todos os dias sites e mais sites so publicados na internet e nenhum deles com um padro de nomenclatura de classes e ids que possamos utilizar para extrair informao de maneira inteligente. O HTML 4.01 a verso atual da linguagem bsica da Web, e no atualizado a alguns anos. Esses detalhes de semntica no podem ser supridos para sempre por tecnologias como o Microformats. A verso 5 do HTML tende a suprimir essas necessidades e tambm atualizar pontos antigos do HTML 4, por exemplo, formulrios.

    Como disse no comeo deste post, a estrutura de um site no bvia para as mquinas. No existe nenhum padro de construo dos elementos para indicar o que o cabealho e o que o rodap, por exemplo. No HTML 5, iremos utilizar um padro de tags que nos ajudar a marcar estas estruturas. Uma estrutura conhecida mais ou menos assim:
    1 <body> 2 <div id="header">...</div> 3 <div id="menu">...</div> 4 <div class="post">...</div> 5 <div id="sidebar">...</div> 6 <div id="rodape">...</div> 7 </body>

    Na estrutura acima, utilizei alguns nomes de classes e ids que costumamos utilizar no dia-a-dia. eu mesmo no utilizo a classe POST, uso mais CONTENT ou algo parecido. A estrutura do HTML acabar com isso. A idia substituir esse amontoado de DIVS por elementos que se encarreguem dessas funes, um exemplo da estrutura serial esse:
    1 2 3 4 5 6 7 8 9 10 11 <body> <header>...</header> <nav>...</nav> <section> <article> ... </article> </section> <aside>...</aside> <footer>...</footer> </body>

    O elemento header define o cabealho. Nav define o menu ou a navegao do site. Article define uma parte da pgina que tem uma composio de formulrios, textos etc. Por exemplo, pode ser um post de forum, blog, comentrios etc. O elemento Section define uma seo do layout em um determinado element. Ele pode conter um header e tambm um footer se preciso. O elemento aside consiste em envolver informaes que tem algo a ver com o contedo principal do site. Pode ser um menu lateral, um sidebar padro com menu, banner, busca etc Footer define o rodap do elemento ou do layout.

    Entenda que agora, qualquer elemento pode ter seu contedo separado por sees com o elemento section. Note tambm que os elementos podem ter tambm um header e um footer independentes do resto do layout. Como na imagem.

    Uma dvida comum entre os desenvolvedores como fazer a estruturao e distribuio das tags de ttulos (h1 at h6). Por exemplo, se eu utilizei j a tag H1 no logo do site, poderei utilizar para o ttulo do artigo? Se repetirmos muitas vezes as mesmas tags de ttulos, a importncia que cada ttulo tem sobre o outro se perder. O Google poder indexar de forma diferente e etc. No HTML 5 esse problema ser resolver, porque cada section que voc inicia, voc poder comear novamente uma nova ordem de ttulos. Por exemplo:
    1 2 3 4 5 6 7 8 9 <header> <h1>Logo</h1> </header> <article> <h1>Ttulo do artigo</h1> <p>texto</p> <h2>Subtitulo</h2> <p>Mais texto</p> </article>

    Dessa forma voc conseguir definir exatamente qual a importncia de cada ttulo e os leitores de tela, sistemas de busca e outras aplicaes conseguiro fazer uma separao mais eficaz dos elementos textuais. Entenda que os divs no iro deixar de existir. Voc os usar em casos muito especficos, por exemplo, para fazer caixas de destaque:
    1 2 3 4 5 6 7 8 9 10 <section> <div class="destaque"> <h1>Destaque 1</h1> <p>Texto</p> </div> <div class="destaque"> <h1>Destaque 1</h1> <p>Texto</p> </div> </section>

    Nesse caso estou usando os DIVs apenas por motivos de formatao. Ali no caberia um article, porque o contedo no uma redao de um post, artigo e etc Tambm no caberia uma section porque eu j agrupei este contedo dentro de uma section pai. Para saber mais sobre isso, leia: The Elements Of HTML 5. Irei escrever outros artigos sobre a insero de vdeo e audio no cdigo e uma srie de outros assuntos interessantes sobre HTML 5. E o que voc acha disso tudo? Deixe seu comentrio! http://www.tableless.com.br/html5-estrutura-semantica

    IE 9 o navegador mais compatvel com HTML5 at agora autor: alexandre


    De acordo com relatrio do w3c, o navegador da Microsoft, ainda em beta, o mais compatvel com o HTML 5. Os testes do rgo colocam o Internet Explorer 9 beta release 6 no topo da lista, seguido pelo Firefox 4 beta 6, Google Chrome 7, Opera 10.6 e Safari 5.0. A anlise incluiu 7 elementos do HTML5: "attributes", "audio", "video", "canvas", "getElementsByClassName", "foreigncontent," and "xhtml5".

    Vale lembrar que o teste no cobre todos os aspectos do HTML 5, que ainda nem sequer est finalizado. Mesmo assim os entusiastas da Microsoft podem comemorar a mudana na mentalidade da empresa, que havia ignorado o HTML5 no lanamento do IE7,enquanto seus concorrentes j estavam adaptando seus navegadores s funcionalidades do novo padro.

    http://www.adrenaline.com.br/internet/noticias/6627/ie-9-e-o-navegador-maiscompativel-com-html5-ate-agora.html

    Google abandona suporte a vdeos H.264 HTML5 no Chrome autor: alexandre


    12/01/2011 O Google anunciou hoje que est abandonando o suporte para vdeos H.264 no HTML5 do Chrome. A empresa alega que passar a apoiar apenas padres abertos para compartilhamento de vdeo. Apesar da popularidade crescente do formato H.264, a medida pretende impulsionar a adoo do WebM, formato aberto para streaming de vdeo baseado em VP8 e Ogg Theora que patrocinado pelo Google. A empresa espera que os sites migrem voluntariamente seus vdeos HTML5 para WebM. Ainda no se sabe se alguma extenso ou plugin vai manter o suporte a H.264 no Chrome. Abandonar o H.264 pode ser uma manobra arriscada, mesmo para o Google. A maior parte dos vdeos em HTML5 da web usam o formato, que suportado pelo iPad e vrios outros dispositivos que no tm suporte a Flash. Apesar disso, o suporte ao H.264 nos navegadores requer o pagamento de uma licena cara que, ao que parece, o Google no quer pagar. A medida do Google com certeza vai incomodar concorrentes que apostam no H.264. O grupo MPEG-LA, a Apple e a Microsoft alertaram que o WebM pode estar violando patentes e enfrentaria problemas legais relacionados ao pagamento de royalties. Comentrios no blog da empresa tambm acusam o Google de hipocrisia por causa da sua relao com a Adobe. Suas intenes de no s apoiar o uso do formato proprietrio Flash, mas de integr-lo diretamente ao Chrome contradizem a ideia de apoiar formatos de vdeo abertos.

    http://www.adrenaline.com.br/internet/noticias/7251/google-abandona-suporte-avideos-h264-html5-no-chrome.html

    O projeto WebM dedicada ao desenvolvimento de uma alta qualidade, formato de vdeo para a web aberta que est disponvel gratuitamente para todos. WebM suportado pelo Mozilla, Opera, Adobe, Google e mais de setenta outras editoras e fornecedores de software e hardware

    O que WebM?
    WebM um aberto, royalty-free, formato de arquivo de mdia projetado para a web. WebM define a estrutura de container formatos de arquivo de vdeo e udio. Arquivos WebM consistem de fluxos de vdeo comprimidos com o codec de vdeo VP8 e udio comprimido com oVorbis codec de udio. A estrutura do arquivo WebM baseado no Matroska container. Para mais informaes sobre WebM, consulte a FAQ . Desenvolvedores: Para participar visite nossa pgina de cdigo .

    Benefcios da WebM

    Abertura e inovao. Um fator chave no sucesso da web que as suas principais tecnologias, como HTML, HTTP e TCP / IP esto abertas para qualquer um de implementar e melhorar. Com ncleo de vdeo que est sendo a experincia web, de alta qualidade, escolha formato aberto de vdeo necessria. WebM 100% gratuito e de cdigo aberto sob licena BSD . Otimizado para a web. Servindo de vdeo na web diferente da televiso tradicional e mdias offline. Formatos de vdeo existentes foram projetados para atender s necessidades desses mdiuns e faz-lo muito bem. WebM est focada em atender as necessidades nicas de servir de vdeo na web. Pegada computacional baixo para permitir a reproduo em qualquer dispositivo, incluindo baixo consumo de energia netbooks, portteis, tablets, etc * Recipiente de formato simples Mais alta qualidade de entrega de vdeo em tempo real Clique e codificar. Mnima perfis codec, sub-opes, quando possvel, deixe o codificador fazer as escolhas difceis.

    * Nota: Os lanamentos desenvolvedor inicial pr-visualizao de browsers apoio WebM ainda no esto totalmente otimizado e, portanto, tm uma maior pegada computacional para processamento de tela do que ns esperamos para os lanamentos em geral. A eficincia computacional de WebM so mais medidos com preciso hoje usando a ferramentas de desenvolvimento na VP8 SDKs .Otimizaes das implementaes browser esto prximas.
    WebM um formato de udio e vdeo concebido para proporcionar um royalty-free , aberto de compresso de vdeo de formato para uso com vdeo HTML5 . Desenvolvimento do projeto patrocinado pela Google . Um arquivo WebM consiste em VP8 vdeo e Vorbis streams de udio, em um recipientebaseado em um perfil de Matroska .
    [2][3][4]

    O projeto libera WebM software

    relacionado sob um licena BSD e todos os usurios recebem uma licena mundial, no exclusiva, gratuita, isenta de royalties de licena de patente. Apesar disso, alguns na indstria tem chamado Google de fornecer indenizao contra processos por patentes.

    Comparao com H.264


    De acordo com uma comparao de VP8 (codificados com o lanamento inicial do libvpx) e H.264 conduzido por StreamingMedia, concluiu-se que "H.264 pode ter uma vantagem de qualidade leve, mas no comercialmente relevante" e que "lado Mesmo assistindo -by-side (que nenhum espectador nunca faz), os telespectadores muito poucos podem dizer a diferena ". Eles tambm afirmaram que "H.264 tem uma vantagem de implementao, e no uma vantagem tecnolgica." [ 41 ] Apesar da declarao do Google de que VP8 oferece a "melhor qualidade de entrega de vdeo em tempo real", [ 42 ] uma reviso conduzida maio 2010 concluiu que H.264 oferece qualidade ligeiramente melhor do que VP8. [ 43 ] Libvpx, no entanto, tem um modo em que o mximo de recursos possvel CPU ser usada enquanto ainda mantendo a velocidade de codificao quase exatamente equivalente velocidade de reproduo (tempo real), mantendo a qualidade to alta quanto possvel, sem lag. Jason Garrett-Glaser, um desenvolvedor do x264 encoder, deu vrios pontos de crticas por VP8, alegando que no tinha especificao real, e que estava faltando em diversas reas. [ 44 ] [ 45 ]

    Você também pode gostar