Upgrade to Pro — share decks privately, control downloads, hide ads and more …

HTML, Semântica e Microdata

HTML, Semântica e Microdata

Alexandre Gaigalas

May 03, 2012
Tweet

More Decks by Alexandre Gaigalas

Other Decks in Technology

Transcript

  1. 28 de Abril de 2012 FLISOL Campinas 2 <meta name=”author”

    content=” Alexandre Gomes Gaigalas“> <meta name=”author” content=” Augusto Pascutti“>
  2. 28 de Abril de 2012 FLISOL Campinas 3 <h2> Hoje

    você vai ver...</h2> <li>O que o HTML realmente é</li> <li>O que semântica realmente é</li> <li>A diferença entre semântica e web semântica</li>
  3. 28 de Abril de 2012 FLISOL Campinas 5 HTML é

    sobre informação. (CSS é visual!)
  4. 28 de Abril de 2012 FLISOL Campinas 6 <dfn> <acronym

    title=”Linguagem de Marcação de HiperTexto”> HTML </acronym> é sobre <strong> informação</strong> . </dfn>
  5. 28 de Abril de 2012 FLISOL Campinas 7 <dfn lang=”en-US”>

    <acronym title=”HyperText Markup Language”> HTML </acronym> is about <strong> information</strong> . </dfn>
  6. 28 de Abril de 2012 FLISOL Campinas 8 <dfn lang=”en-US”>

    <acronym title=”HyperText Markup Language”> HTML </acronym> is about <strong> information</strong> . </dfn> HTML é sensacional
  7. 28 de Abril de 2012 FLISOL Campinas 9 <table> <tr><td>

    Header</td></tr> <tr><td> Conteúdo</td></tr> <tr><td> Footer</td></tr> </table>
  8. 28 de Abril de 2012 FLISOL Campinas 10 <table> <tr><td>

    Header</td></tr> <tr><td> Conteúdo</td></tr> <tr><td> Footer</td></tr> </table> Uso incorreto
  9. 28 de Abril de 2012 FLISOL Campinas 11 <div> <div>

    Header</div> <div> Conteúdo</div> <div> Footer</div> </div>
  10. 28 de Abril de 2012 FLISOL Campinas 12 <div> <div>

    Header</div> <div> Conteúdo</div> <div> Footer</div> </div> Ausência de Semântica
  11. 28 de Abril de 2012 FLISOL Campinas 13 <body> <header>

    Header</header> <nav> Navegação</nav> <article> Conteúdo</article> <footer> Footer</footer> </body>
  12. 28 de Abril de 2012 FLISOL Campinas 14 <body> <header>

    <h1>Heineken</h1> </header> <nav> <h2>Menu</h2> </nav> <article> <h2>Notícias</h2> </article> <footer> <h2>Mais Informações</h2> </footer> </body>
  13. 28 de Abril de 2012 FLISOL Campinas 15 Document Outline

    • Heineken • Menu • Notícias • Mais Informações
  14. 28 de Abril de 2012 FLISOL Campinas 16 Document Outline:

    GMail • [Faltando] • Account Options • GMail • [Faltando] – Try them all, keep what fits • Invite a Friend – Importand and Unread – Starred – Everything Else • Chat
  15. 28 de Abril de 2012 FLISOL Campinas 17 Document Outline:

    GMail • [Faltando] • Account Options • GMail • [Faltando] – Try them all, keep what fits • Invite a Friend – Importand and Unread – Starred – Everything Else • Chat :(
  16. 28 de Abril de 2012 FLISOL Campinas 18 Document Outline:

    Wikipedia • Campinas • Índice • História – Origens e Pioneirismo – Formação Administrativa – Crescimento Econômico – História Recente • Geografia ...
  17. 28 de Abril de 2012 FLISOL Campinas 19 Document Outline:

    Wikipedia • Campinas • Índice • História – Origens e Pioneirismo – Formação Administrativa – Crescimento Econômico – História Recente • Geografia ... :)
  18. 28 de Abril de 2012 FLISOL Campinas 20 <p> Para

    <strong>instalar</strong> o <acronym title=”PHP: Hypertext Processor”> PHP </acronym> no Ubuntu, digite <kbd>sudo apt-get install php5<kbd> </p>
  19. 28 de Abril de 2012 FLISOL Campinas 21 <pre> _________________________________________

    / HTML Semântico é a peça mais importante \ \ da SEO de um projeto / ----------------------------------------- \ ^__^ \ (oo)\_______ (__)\ )\/\ ||----w | || || </pre>
  20. 28 de Abril de 2012 FLISOL Campinas 22 <section> <h3>Tipos

    de Cerveja</h3> <ul> <li>Ale<li> <li>Lager</li> <li>Stout</li> </ul> </section>
  21. 28 de Abril de 2012 FLISOL Campinas 23 <section> <h3>Como

    fritar ovos</h3> <ol> <li>Aqueça o óleo<li> <li>Quebre os ovos na frigideira</li> <li>Retire-os quando a gema endurecer</li> </ol> </section>
  22. 28 de Abril de 2012 FLISOL Campinas 24 <section> <h3>Publicação

    de Conteúdo na Web</h3> <dl> <dt>HTML</dt> <dd>Descreve o conteúdo</dd> <dt>CSS</dt> <dd>Descreve a aparência</dd> </dl> </section>
  23. 28 de Abril de 2012 FLISOL Campinas 25 <section> <h3>Publicação

    de Conteúdo na Web</h3> <dl> <dt>HTML</dt> <dd>Descreve o conteúdo</dd> <dd>É uma linguagem de marcação</dd> <dt>CSS</dt> <dd>Descreve a aparência</dd> <dd>É uma linguagem de estilos</dd> </dl> </section>
  24. 28 de Abril de 2012 FLISOL Campinas 26 <section> <h3>Publicação

    de Conteúdo na Web</h3> <dl> <dt>HTML</dt> <dd>Descreve o conteúdo</dd> <dd>É uma linguagem de marcação</dd> <dt>CSS</dt> <dd>Descreve a aparência</dd> <dd>É uma linguagem de estilos</dd> </dl> </section> Mais de uma definição por termo.
  25. 28 de Abril de 2012 FLISOL Campinas 27 <table> <tr>

    <td>Produto</td><td>Preço</td> <td>Heineken</td><td>R$ 3,50</td> <td>Original</td><td>R$ 3,50</td> </tr> </table>
  26. 28 de Abril de 2012 FLISOL Campinas 28 <table> <tr>

    <th>Produto</th><th>Preço</th> <td>Heineken</td><td>R$ 3,50</td> <td>Original</td><td>R$ 3,50</td> </tr> </table>
  27. 28 de Abril de 2012 FLISOL Campinas 29 <table> <thead>

    <tr> <th>Produto</th><th>Preço</th> </tr> </thead> <tbody> <tr> <td>Heineken</td><td>R$ 3,50</td> <td>Original</td><td>R$ 3,50</td> </tr> </tbody> </table>
  28. 28 de Abril de 2012 FLISOL Campinas 30 <table> <caption>Cardápio

    de Bebidas</caption> <thead> <tr> <th>Produto</th><th>Preço</th> </tr> </thead> <tbody> <tr> <td>Heineken</td><td>R$ 3,50</td> <td>Original</td><td>R$ 3,50</td> </tr> </tbody> </table>
  29. 28 de Abril de 2012 FLISOL Campinas 31 <form method=”get”

    action=”/search”> <fieldset> <legend>Filtros</legend> <label>Ano <select> … </select></label> <fieldset> <label> Termo <input type=”text” name=”q”> </label> </form> *http://gaigalas.net/lab/semanticforms.html
  30. 28 de Abril de 2012 FLISOL Campinas 33 <div class=”vcard”>

    <span class=”fn”>Alexandre Gaigalas</span> <a class=”url” href=”http://about.me”> About me. </a> </div>>
  31. 28 de Abril de 2012 FLISOL Campinas 34 <div class=”hreview”>

    <strong class=”fn”>The Last Samurai</strong> é um excelente filme. Nota <span class=”rating”>10</span>. </div>>
  32. 28 de Abril de 2012 FLISOL Campinas 35 <div class=”vcard”>

    <span class=”fn”>Alexandre Gaigalas</span> <a class=”url” href=”http://about.me”> About me. </a> </div>>
  33. 28 de Abril de 2012 FLISOL Campinas 36 <div itemscope

    itemtype=”http://schema.org/Person”> <span itemprop=”name”>Alexandre Gaigalas</span> <a itemprop=”url” href=”http://about.me”> About me. </a> </div>>