Web Standards semântica Na Web

Loading...

Flash Player 9 (or above) is needed to view presentations.
We have detected that you do not have it on your computer. To install it, go here.

0 comments

Post a comment

    Post a comment
    Embed Video
    Edit your comment Cancel

    2 Favorites

    Web Standards semântica Na Web - Presentation Transcript

    1. Web Standards e a semântica na Web 14º EDTED 1
    2. O que são os Web Standards? 2
    3. 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
    4. 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
    5. 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: <b>, <i>, <u>, <font>, <center>, <blink>, <marquee> A maneira correta de aplicar o layout é utilizar folhas de estilo (CSS). 5
    6. O que são os Web Standards? Desenvolvimento separado por camadas 6
    7. Trabalhando com HTML da forma correta 7
    8. 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
    9. 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
    10. Trabalhando com HTML da forma correta Modularizar o conteúdo (grid) 10
    11. Trabalhando com HTML da forma correta Diversificar uso de tags <div id=\"menu\">   <a href=\"index.html\">Página inicial</a><br> Classificamos   <a href=\"a-empresa.html\">A empresa</a><br> melhor nosso   <a href=\"produtos.html\">Produtos</a><br> conteúdo   <a href=\"contato.html\">Contato</a> </div>    <ul id=\"menu\">   <li><a href=\"index.html\" title=\"Voltar à página inicial\">Página inicial</a></li>   <li><a href=\"a-empresa.html\" title=\"Mais detalhes sobre a empresa\">A empresa</a></li>   <li><a href=\"produtos.html\" title=\"Produtos oferecidos pela empresa\">Produtos</a></li>   <li><a href=\"contato.html\" title=\"Formas de contato conosco\">Contato</a></li> </ul> 11
    12. Limitações do HTML atual 12
    13. 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
    14. Limitações do HTML atual Soluções propostas: • HTML 5 • XHTML 2 • RDFa • Microformats 14
    15. Microformats 15
    16. 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
    17. Microformats Principais padrões utilizados: • hCalendar • hCard • rel-license • rel-nofollow • rel-tag • XFN 17
    18. Microformats Padrões ainda em desenvolvimento (drafts): • hAtom • hProduct • hResume • hReview 18
    19. 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
    20. Microformats Exemplo prático: hCard Código-fonte <div> <p><strong>HSBC</strong> <strong><span>HSBC Chile</span></strong></p> <div> <p><span>Avenida Andrés Bello 2711</span> Piso 9</p> <em>Las Condes <span>Santiago</span> <span>Chile</span></em> </div> <p><strong>Tel:</strong> <span>+ 56 2 299 7200</span></p> <a href=\"mailto:contacto@cl.hsbc.com\" title=\"Contacto\">contacto@cl.hsbc.com</a> </div> 20 Documento confidencial
    21. Microformats Exemplo prático: hCard Código-fonte <div id=\"hcard-HSBC-Chile\" class=\"vcard caixa\"> <p><strong class=\"org\">HSBC</strong> <strong class=\"fn n\"><span class=\"given- name\">HSBC Chile</span></strong></p> <div class=\"adr\"> <p><span class=\"street-address\">Avenida Andrés Bello 2711</span> Piso 9</p> <em>Las Condes <span class=\"locality\">Santiago</span> <span class=\"country- name\">Chile</span></em> </div> <p><strong>Tel:</strong> <span class=\"tel\">+ 56 2 299 7200</span></p> <a class=\"email\" href=\"mailto:contacto@cl.hsbc.com\" title=\"Contacto\">contacto@cl.hsbc.com</a> </div> 21 Documento confidencial
    22. Microformats Exemplo prático: hCard Código-fonte <div id=\"hcard-HSBC-Chile\" class=\"vcard caixa\"> <p><strong class=\"org\">HSBC</strong> <strong class=\"fn n\"><span class=\"given- name\">HSBC Chile</span></strong></p> <div class=\"adr\"> <p><span class=\"street-address\">Avenida Andrés Bello 2711</span> Piso 9</p> <em>Las Condes <span class=\"locality\">Santiago</span> <span class=\"country- name\">Chile</span></em> </div> <p><strong>Tel:</strong> <span class=\"tel\">+ 56 2 299 7200</span></p> <a class=\"email\" href=\"mailto:contacto@cl.hsbc.com\" title=\"Contacto\">contacto@cl.hsbc.com</a> </div> 22 Documento confidencial
    23. 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
    24. Quem já está usando Microformats? 24
    25. 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
    26. Quem já está usando Microformats? Google Rich Snippets: Ainda em fase de testes, suporta apenas alguns tipos de Microformats 26
    27. Futuro da Web Semântica 27
    28. 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
    29. OBRIGADO Carlos Eduardo de Souza project47.viscountbox.com 29 webstandards.blog.br

    + PutcharlesPutcharles, 5 months ago

    custom

    665 views, 2 favs, 0 embeds more stats

    O site que segue os Web Standards possui diversas v more

    More info about this document

    © All Rights Reserved

    Go to text version

    • Total Views 665
      • 665 on SlideShare
      • 0 from embeds
    • Comments 0
    • Favorites 2
    • Downloads 23
    Most viewed embeds

    more

    All embeds

    less

    Flagged as inappropriate Flag as inappropriate
    Flag as inappropriate

    Select your reason for flagging this presentation as inappropriate. If needed, use the feedback form to let us know more details.

    Cancel
    File a copyright complaint
    Having problems? Go to our helpdesk?

    Categories