HTML, Semântica e Microdata

28 de Abril de 2012 FLISOL Campinas 1 <h1> HTML,
Semântica e Microdata </h1>

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

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>

28 de Abril de 2012 FLISOL Campinas 4 HTML não
é visual.

28 de Abril de 2012 FLISOL Campinas 5 HTML é
sobre informação. (CSS é visual!)

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>

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>

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

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>

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

28 de Abril de 2012 FLISOL Campinas 11 <div> <div>
Header</div> <div> Conteúdo</div> <div> Footer</div> </div>

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

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

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>

28 de Abril de 2012 FLISOL Campinas 15 Document Outline
• Heineken • Menu • Notícias • Mais Informações

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

GMail • [Faltando] • Account Options • GMail • [Faltando] – Try them all, keep what fits • Invite a Friend – Importand and Unread – Starred – Everything Else • Chat :(

Wikipedia • Campinas • Índice • História – Origens e Pioneirismo – Formação Administrativa – Crescimento Econômico – História Recente • Geografia ...

Wikipedia • Campinas • Índice • História – Origens e Pioneirismo – Formação Administrativa – Crescimento Econômico – História Recente • Geografia ... :)

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>

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>

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>

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>

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>

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>

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.

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>

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>

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

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

28 de Abril de 2012 FLISOL Campinas 32

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

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

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

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

28 de Abril de 2012 FLISOL Campinas 37

28 de Abril de 2012 FLISOL Campinas 38 Perguntas?

28 de Abril de 2012 FLISOL Campinas 39 Obrigado!

HTML, Semântica e Microdata

HTML, Semântica e Microdata

More Decks by Alexandre Gaigalas

Other Decks in Technology

Featured

Transcript