A Semântica do HTML5

O que são os Padrões W eb? es, Padrões Web são um conjunto de normas, diretriz de recomendaçõ es, notas, artigos, tutoriais e afins . caráter técnico, produzidos pelo W3C É destinado a orientar fabricantes, desenvolvedores e projetistas para o uso de práticas que possibilitem a dos. criação de uma Web acessível a to

A Web sem padrões... Código e Dificudade d Incompreensíve l Desen volvimento Para máquinas ção E Manuten Excesso de código Sem signi ficado e tação s Forma junta <table> a Estrutur

Div isão em Camadas... Javascript XHTML CSS CSS CSS

Anotem isso... Trabalhar com Web Standards não é uma questão de trocar tabelas por div's, é um a questão de Semântica!

Tableless Vs Web Stand ards r no Tableless é um termo que ficou muito popula Bras il, e que acaba por confundir muita gente. Tableless sig nifica um site desenvolvido sem o uso do da s tabelas para organizar o layout, e sim usan CSS. ja Cr iar um site Tableless não significa que este ém de se guindo os Padrões Web, que vão muito al um código válido, e tem preocupações maiores como a Semântica e a Acessibilidade

Caso Mike Davidson foi o responsável pelo Rede sign do site da ESPN, seguindo os Padrões Web Média de redução de 50Kb por página Com isso, a economia de banda foi de: 2 Terabytes/dia 61 Terabytes/mês 730 Terabytes/ano

Caso uzidos Um dos primeiros sites acessíveis prod por uma empresa comercial ra Todo o Rede sign foi baseado nas Diretivas pa da W3C a acessi bilidade de conteúdo da Web, Com isso, as taxas de conversão aumentaram 300%, l custos de manuten ção caíram 66%, listagem natura nas buscas aumentou 50 %, e o tempo de carregamento da página caiu 75%

Estrutura... informação, como Uma estrutura de M L, deve conter documento s escritos em HT rcações com devido apenas ma marcações sem signifi cado. Adicionar e ser comparado a od significa do em um site p b ranco a um livro adicionar div ersas páginas em

Um código Semântico. .. Semântica refere-se ao estudo do significado. Quando utilizamos cada marcação para o que ela realmente foi criada, estamos construindo um “Código Semântico” Parar de pensar em “isso vem aqui, isso vai ali...” e pensar na “Estrutura da Informação” Criar uma “Marcação com Significado”

Compreensivel para humanos e máquinas Isso possibilitaria que informações úteis em diferentes sistemas fossem integradas para facilitar a vida das pessoas. Interoperabilidade

Marcação Semântica res Usar <tab le></table> apenas para dados tabula Usar <h1></h1> até <h6></h6> para títulos Usar <ol></ol> para Listas Ordenadas e <ul></ul> para Listas Não Ordenadas, seguidos do elemento <li></li> Usar <em></em> para Enfase, e <strong></strong> para Enfase Forte Usar <label></label> para identificar campos em formulários

Mas não é o suficiente

HTML5 ● Ian Hickson é o editor do HTML5 ● Desde 2008 vêm sendo apresentados rascunhos (Working Draft) ● Espera-se que essa nova versão seja liberada ainda em 2010 ● A previsão para que se torne uma “recomendação” é para 2012 ● Já é compreendido pelas versões mais recentes dos Browsers

HTML5 Browser como o Google Chrome, Firefox 3.5, Internet Explorer 8 e Safari 4 já dão suporte ao HTML5, e com isso algumas páginas já vão aderindo a nova versão

HTML5 API's para a criação de Gráficos 2D, controle de conteúdo multimídia, melhor depuração de erros e aprimoramento do uso offline são algumas das novidades da nova versão

HTML5 Novos elementos para identificar melhor os conteúdos, como <header> e <footer> para cabeçalho e rodapé, <section> para sessões de uma página ou <article> para identificar um artigo ou um post.

HTML5 <header> Para definir onde será o cabeçalho da página <footer> Para definir onde será o rodapé da página ou da sessão

HTML5 <aside> Informações relativas ao conteúdo principal, como um menu ou campo de busca <dialog> Será usada para descrever dialogos, usando tags de termos de definição

HTML5 <figure> Para a inserção de imagens com legenda <figure id="1"> <img src="imagem.jpg" alt="descrição"> <legend>Legenda da Imagem</legend> </figure>

HTML5 <audio> Exibe qualquer elemento de streaming de áudio, com atributos para exibição de controles ou execução automatica. <audio src="horse.ogg" controls="controls"> Seu Navegador não suporta esse recurso </audio>

HTML5 <video> Exibe vídeos na página, com exibição de controles e de uma imagem enquanto o vídeo é carregado. <video src="movie.ogg" controls="controls"> Seu navegador não suporta esse recurso </video>

HTML5 <nav> Sessão de navegação, para links 'lado a lado'. <nav> <a href="default.asp">Home</a> <a href="tag_meter.asp">Anterior</a> <a href="tag_noscript.asp">Próximo</a> </nav>

HTML5 <menu> Serve para gerar um menu, com o auxílio da marcação <li>. <menu> <li><input type="checkbox" />Vermelho</li> <li><input type="checkbox" />Azul</li> </menu>

Para referência sobre todas as tag's http://www.w3schools.com/html5/html5_reference.asp Recomendo a leitura de “Refletindo sobre Semântica” http://tinyurl.com/beervb Acesso aos canais de participação dos grupos de trabalho http://www.whatwg.org/

Muito Obrigado :) os de Agni é diretor de arte online, trabalha com projet in terface, web standards e criação. www.twitter.com/eduagni www.formspring.me/eduagni www.a gni.art.br

http://www.agni.art.br	412
http://www.slideshare.net	42
http://www.thiagorsr.net	30
http://bitly.com	4
http://sistemasdoctum.blogspot.com	3
http://webcache.googleusercontent.com	1
http://us-w1.rockmelt.com	1

A Semântica do HTML5

by Edu Agni on Jan 29, 2010

Accessibility

Categories

Tags

Upload Details

Usage Rights

7 Embeds 493

Statistics

A Semântica do HTML5 — Presentation Transcript