Web Standards semântica Na Web

Web Standards e a semântica na Web 14º EDTED 1

O que são os Web Standards? 2

O que são os Web Standards? Padrões estabelecidos pelo World Wide Web Consortium (W3C) a fim de criar uma Web universal, disponível para todos independente de dispositivos de acesso ou deficiências do usuário. 3

O que são os Web Standards? A escrita correta do HTML e CSS proporciona: • Código mais limpo e objetivo; • Economia de tempo e dinheiro: • Menor tempo para manutenções; • Transferência de dados é reduzida drasticamente; • Site mais acessível a dispositivos e deficientes (visuais e motores); • Sistemas de busca dão maior relevância. 4

O que são os Web Standards? Desenvolvimento separado por camadas O código HTML volta a ser desenvolvido sem a customização visual. As tags criadas somente para efeitos de estilização não devem ser mais usadas, por exemplo: , , , , <center>, <blink>, <marquee> A maneira correta de aplicar o layout é utilizar folhas de estilo (CSS). 5

O que são os Web Standards? Desenvolvimento separado por camadas 6

Trabalhando com HTML da forma correta 7

Trabalhando com HTML da forma correta • Esqueça os editores visuais (WYSIWYG); • Declare o DOCTYPE corretamente; • Descrever o site e seu conteúdo através das Meta Tags; • Incluir CSS no cabeçalho do código, usando um arquivo externo (.css); • Modularizar o conteúdo; • Utilizar comentários sempre que possível; • Manter padrão para nomenclatura de classes e ID’s; • Diversificar uso de tags para enriquecer o conteúdo e sua semântica. 8

Trabalhando com HTML da forma correta Incluir CSS no cabeçalho do código <link rel=”stylesheet” type=”text/css” href=”css/estilo.css” media=”screen” /> 9

Trabalhando com HTML da forma correta Modularizar o conteúdo (grid) 10

Trabalhando com HTML da forma correta Diversificar uso de tags <div id=quot;menuquot;> <a href=quot;index.htmlquot;>Página inicial</a> Classificamos <a href=quot;a-empresa.htmlquot;>A empresa</a> melhor nosso <a href=quot;produtos.htmlquot;>Produtos</a> conteúdo <a href=quot;contato.htmlquot;>Contato</a> </div> <ul id=quot;menuquot;> <li><a href=quot;index.htmlquot; title=quot;Voltar à página inicialquot;>Página inicial</a></li> <li><a href=quot;a-empresa.htmlquot; title=quot;Mais detalhes sobre a empresaquot;>A empresa</a></li> <li><a href=quot;produtos.htmlquot; title=quot;Produtos oferecidos pela empresaquot;>Produtos</a></li> <li><a href=quot;contato.htmlquot; title=quot;Formas de contato conoscoquot;>Contato</a></li> </ul> 11

Limitações do HTML atual 12

Limitações do HTML atual Avanço das aplicações na Web exige criação de novas tags para classificar o conteúdo mais detalhadamente. 13

Limitações do HTML atual Soluções propostas: • HTML 5 • XHTML 2 • RDFa • Microformats 14

Microformats 15

Microformats O que é? O que não é? Padrão criado para adicionar Novo tipo de tecnologia que fará semântica ao nosso conteúdo, você esquecer tudo que sem criar novas tags. aprendeu até hoje e recomeçar do zero. Como não depende de iniciativa da W3C teve menos burocracia e Não tem como objetivo já é amplamente utilizado. classificar TODOS os dados da Internet. 16

Microformats Principais padrões utilizados: • hCalendar • hCard • rel-license • rel-nofollow • rel-tag • XFN 17

Microformats Padrões ainda em desenvolvimento (drafts): • hAtom • hProduct • hResume • hReview 18

Microformats Exemplo prático: hCard Visualização Necessidade de criar um perfil para o HSBC Chile com os dados: nome, endereço, telefone e e-mail. 19

Microformats Exemplo prático: hCard Código-fonte <div> HSBC HSBC Chile <div> Avenida Andrés Bello 2711 Piso 9 Las Condes Santiago Chile </div> Tel: + 56 2 299 7200 <a href=quot;mailto:contacto@cl.hsbc.comquot; title=quot;Contactoquot;>contacto@cl.hsbc.com</a> </div> 20 Documento confidencial

Microformats Exemplo prático: hCard Código-fonte <div id=quot;hcard-HSBC-Chilequot; class=quot;vcard caixaquot;> HSBC HSBC Chile <div class=quot;adrquot;> Avenida Andrés Bello 2711 Piso 9 Las Condes Santiago Chile </div> Tel: + 56 2 299 7200 <a class=quot;emailquot; href=quot;mailto:contacto@cl.hsbc.comquot; title=quot;Contactoquot;>contacto@cl.hsbc.com</a> </div> 21 Documento confidencial

Microformats Exemplo prático: hCard Código-fonte <div id=quot;hcard-HSBC-Chilequot; class=quot;vcard caixaquot;> HSBC HSBC Chile <div class=quot;adrquot;> Avenida Andrés Bello 2711 Piso 9 Las Condes Santiago Chile </div> Tel: + 56 2 299 7200 <a class=quot;emailquot; href=quot;mailto:contacto@cl.hsbc.comquot; title=quot;Contactoquot;>contacto@cl.hsbc.com</a> </div> 22 Documento confidencial

Microformats Ferramentas: • Há geradores de Microformats para diversos padrões: • hCard; • hCalendar; • XFN; • hReview. Os demais são tão simples que podem ser decorados ;) 23

Quem já está usando Microformats? 24

Quem já está usando Microformats? Aplicados na Mídia Digital: W3C Tecnisa Google HSBC Chile Yahoo HSBC Arena Technorati Thá Microsoft Unimed Wordpress Mídia Digital 25

Quem já está usando Microformats? Google Rich Snippets: Ainda em fase de testes, suporta apenas alguns tipos de Microformats 26

Futuro da Web Semântica 27

Futuro da Web Semântica A chamada “Web 3.0” terá como foco a total classificação do conteúdo, representando uma revolução dos sistemas de busca. • Microformats são a opção mais viável na atualidade; • HTML 5 e XHTML 2; • RDFa oferece a maior flexibilidade. 28

OBRIGADO Carlos Eduardo de Souza project47.viscountbox.com 29 webstandards.blog.br

http://project47.viscountbox.com	1394
http://www.slideshare.net	24
http://flavors.me	3
http://blog.ufpr.br	1
http://felipeweb.tumblr.com	1
http://www.netvibes.com	1

Web Standards semântica Na Web

by Putcharles on Jun 06, 2009

Accessibility

Categories

Tags

Upload Details

Usage Rights

6 Embeds 1,424

Statistics

Web Standards semântica Na Web — Presentation Transcript