Saiba como a Web Semântica (Web 3.0) vem se tornando cada vez mais uma realidade com a chegada do HTML 5 e conheça o que essa nova versão da linguagem de marcação tem de diferente das anteriores e quais as vantagens que nos traz. Com Edu Agni, diretor de Arte Online, e especialista em Semântica e Web Standards.

2. 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

3. 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

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

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

6. 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

7. 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

8. 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%

9. 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

10. 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”

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

12. 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

13. Mas não é o
suficiente

14. 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

15. 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

16. 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

17. 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.

18. 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

19. 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

20. 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>

21. 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>

22. 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>

23. 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>

24. 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>

25. 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/

26. 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