La sémantique HTML5
& Wordpress
M.MARTINET Jacques
Intégrateur Web et formateur Web
http://www.vectorskin.com
I: Pourquoi ...
L’importance
de la sémantique
le Web devient
sémantique
Être compatible avec
les moteurs de
recherche
Un code
compréhensib...
Le Web sémantique ?
Par l’ajout de nouvelles balises HTML et d’un nouveau format de métadonnées,
un des buts du web sémant...
Exemples
Knowledge Graph
La sémantique HTML5
& Wordpress
I: Pourquoi parler de sémantique ?
II : La sémantique avec HTML5
III : Les Microdatas
<!--[if IE]>
<script
src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
/* tags HTML5 qui se ...
 
<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset=utf-8"/>
<title>Titre de ma page Web</title>
<meta name="author"...
En passant ….
L'attribut charset (sur <meta>)
<meta charset="utf-8">
L'élément <link>
<link rel="stylesheet" href="style.c...
Les balises HTML5
http://www.w3schools.com/tags/default.asp
http://html5doctor.com/
1er
cas
Le contenu est implicite  
<div><p>Mon contenu principal</p></div>
2d cas :
 Le contenu est indépendant du reste d...
http://gsnedders.html5.org/outliner/
HTML5 outliner
Le plan d’un document HTML5
<header>
<h1>Titre</h1>
     <nav>
     <h1>Titre</h1>
      <ul>….</ul>
     </nav>
</header>
<article>
<header>
        ...
<nav id="mainnav" role="navigation">
    <ul class="menu" id="menu-menu-du-header">
           <li class="menu-item curren...
• Les balises de sections sont absentes
• Certaines balises n’ont pas besoin d'être fermées comme les balises <img>,
<br>
...
Le footer
Jouons un peu !
^-^
single.php
?
?
archive.php
?
La sémantique HTML5
& Wordpress
I: Pourquoi parler de sémantique ?
II : La sémantique avec HTML5
III : Les Microdatas
Attributs data-*
<img src="mamoto.jpg" alt="Une moto rouge" id="moto"
data-auteur="Simon" data-lieu="Strasbourg"
data-mate...
MICRODATA
http://schema.org/
Spécifications W3C : www.w3.org/TR/microdata/
Ce qu’en dit Google : https://support.google.co...
MICRODATA
https://support.google.com/webmasters/answer/99170
Types d'extraits enrichis :
Balisage schema.org pour les vidé...
<ul itemtype="http://schema.org/Person" itemscope="itemscope" class="list-localisation">
<li><span itemprop="name">Prénom ...
Filet de navigation
<article id="post-<?php the_ID(); ?>" <?php post_class(); ?> >
<header>
<h1 class="entry-title"> <?php the_title(); ?> </h...
C’est fini….merci d’être venu nous voir !
http://www.wp-nantes.org/
http://www.vectorskin.com/
Prochain SlideShare
Chargement dans…5
×

La sémantique html5 et Wordpress

4 793 vues

Publié le

Présentée par Jacques MARTINET le 18/09/2013 à la Cantine Numérique de Nantes

Publié dans : Technologie
0 commentaire
2 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

Aucun téléchargement
Vues
Nombre de vues
4 793
Sur SlideShare
0
Issues des intégrations
0
Intégrations
2
Actions
Partages
0
Téléchargements
0
Commentaires
0
J’aime
2
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

La sémantique html5 et Wordpress

  1. 1. La sémantique HTML5 & Wordpress M.MARTINET Jacques Intégrateur Web et formateur Web http://www.vectorskin.com I: Pourquoi parler de sémantique ? II : La sémantique avec HTML5 III : Les Microdatas Meetup du 19/09/2013 http://cantine.atlantic2.org/evenements/
  2. 2. L’importance de la sémantique le Web devient sémantique Être compatible avec les moteurs de recherche Un code compréhensible par tout le monde
  3. 3. Le Web sémantique ? Par l’ajout de nouvelles balises HTML et d’un nouveau format de métadonnées, un des buts du web sémantique est d’offrir aux machines la capacité de comprendre le contenu qu’elle traite. Avec HTML5 : - Les balises HTML sémantique (section, article, nav…) - Microdata (schema.org) Autre… - RDFa - SPARQL - Knowledge Graph - Open Graph - etc.
  4. 4. Exemples
  5. 5. Knowledge Graph
  6. 6. La sémantique HTML5 & Wordpress I: Pourquoi parler de sémantique ? II : La sémantique avec HTML5 III : Les Microdatas
  7. 7. <!--[if IE]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> /* tags HTML5 qui se comportent comme des blocs */ article, aside, audio, canvas, datagrid, datalist, details, dialog, figure, footer, header, menu, nav, section, video { display: block; } /* tags de type en ligne */ abbr, eventsource, mark, meter, time, progress, output, bb { display:inline; } Compatibilité http://caniuse.com (la compatibilité est à voir au niveau navigateur plus qu’au niveau du CMS)
  8. 8.   <!DOCTYPE html> <html lang="fr"> <head>   <meta charset=utf-8"/> <title>Titre de ma page Web</title> <meta name="author" content="Jacques Martinet" /> <link rel="stylesheet" href="http://monsite.org/style.css" media="screen" /> </head> <body>                                                                                                  (…) <script src="http://monsite.org/jquery.js"></script>  <noscript><p>La fonction JavaScript n'est pas prise en charge par votre navigateur.</noscript> </body> </html> Structure d’un document HTLM5
  9. 9. En passant …. L'attribut charset (sur <meta>) <meta charset="utf-8"> L'élément <link> <link rel="stylesheet" href="style.css"> L'élément <script> <script src="script.js"></script> L’attribut Type est obsolète pour les balises <link> et <script>.
  10. 10. Les balises HTML5 http://www.w3schools.com/tags/default.asp http://html5doctor.com/
  11. 11. 1er cas Le contenu est implicite   <div><p>Mon contenu principal</p></div> 2d cas :  Le contenu est indépendant du reste de la page et peut-être syndicalisé, typique d’un article de Blog :  on utilise alors la balise   <article><p>Mon contenu principal</p></article> 3eme cas : Le contenu n’est pas indépendant, mais fait partit d’un ensemble comme un chapitre d’un livre  <section><p>Mon premier contenu</p></section> <section><p>Mon second contenu</p></section>   Bien choisir les balises de structure
  12. 12. http://gsnedders.html5.org/outliner/ HTML5 outliner Le plan d’un document HTML5
  13. 13. <header> <h1>Titre</h1>      <nav>      <h1>Titre</h1>       <ul>….</ul>      </nav> </header> <article> <header>             <h1>Titre</h1>               <time datetime="2011-04-01T12:42:42+02:00" pubdate="pubdate">Posté le premier avril 2011</time> </header> <p>…</p> <footer>…</footer> </article> <footer> <h1>Titre</h1> </footer> Bien choisir les balises de structure
  14. 14. <nav id="mainnav" role="navigation">     <ul class="menu" id="menu-menu-du-header">            <li class="menu-item current-menu-item"><a href="http://www.monsite.org/">Accueil</a></li>            <li class="menu-item menu-item-object-category"><a href="http://www.monsite.org/projets/">Projets</a></li>            <li class="menu-item menu-item-object-page"><a href="http://www.monsite.org/contact/">Contact</a>    </ul> </nav>  <?php $defaults = array( 'theme_location'  => 'InHeader', 'menu'            => 'Menu Header', 'container'       => 'nav', 'container_class' => '', 'container_id'    => 'mainnav', 'menu_class'      => 'menu', 'menu_id'         => '', 'echo'            => true, 'fallback_cb'     => 'wp_page_menu', 'before'          => '', 'after'           => '', 'link_before'     => '', 'link_after'      => '', 'items_wrap'      => '<ul id="%1$s" class="%2$s">%3$s</ul>', 'depth'           => 0, 'walker'          => ''          );          wp_nav_menu( $defaults ); ?> La navigation
  15. 15. • Les balises de sections sont absentes • Certaines balises n’ont pas besoin d'être fermées comme les balises <img>, <br> • Va manquer des attributs additionnels • Manque la balise <figure> • http://www.creativejuiz.fr/blog/wordpress/wordpress-transformer-code-caption- html5-figure-figcaption Le contenu éditorial Rajouter des shortcodes et modifications dans function.php si nécessaire
  16. 16. Le footer
  17. 17. Jouons un peu ! ^-^
  18. 18. single.php ? ?
  19. 19. archive.php ?
  20. 20. La sémantique HTML5 & Wordpress I: Pourquoi parler de sémantique ? II : La sémantique avec HTML5 III : Les Microdatas
  21. 21. Attributs data-* <img src="mamoto.jpg" alt="Une moto rouge" id="moto" data-auteur="Simon" data-lieu="Strasbourg" data-materiel="EOS" data-gps="48.582967,7.74828"> // Lire $("#moto").data("lieu"); // Modifier l'attribut $("#moto").attr("data-lieu","Strasbourg");
  22. 22. MICRODATA http://schema.org/ Spécifications W3C : www.w3.org/TR/microdata/ Ce qu’en dit Google : https://support.google.com/webmasters/bin/answer.py?hl=en&answer=176035 Tester son code : http://www.google.com/webmasters/tools/richsnippets
  23. 23. MICRODATA https://support.google.com/webmasters/answer/99170 Types d'extraits enrichis : Balisage schema.org pour les vidéos Événements Extraits enrichis : applications logicielles Extraits enrichis : avis Extraits enrichis : musique Extraits enrichis : notes associées aux avis Extraits enrichis : personnes Extraits enrichis : produits Extraits enrichis : recettes Extraits enrichis : rubriques de fil d'ariane Organisations Types d'applications logicielles compatibles Vidéos : Facebook Share et RDFa
  24. 24. <ul itemtype="http://schema.org/Person" itemscope="itemscope" class="list-localisation"> <li><span itemprop="name">Prénom NOM</span> - <span itemprop="jobTitle">Mon métier</span> <ul itemtype="http://schema.org/PostalAddress" itemscope="itemscope"> <li><span itemprop="streetAddress">120 rue du Calvaire de Grillaud</span></li> <li><span itemprop="postalCode">44100</span> <span itemprop="addressLocality">Nantes</span> - <span itemprop="addressCountry">FR</span></li> </ul> </li> <li>Tél : <span itemprop="telephone">02 51 84 77</span></li> <li><a itemprop="email" href="mailto:contact@moniste.org">contact@moniste.org</a></li> </ul> <div itemtype="http://schema.org/WPFooter" itemscope="itemscope" class="container"> <ul class="list-copyright"> <li class="seven columns"><small itemprop="description">Description de mon Footer</small></li> <li class="five columns end"><small itemprop="copyrightHolder">&copy; Monsite.org 2013 - tous droits réservés</small></li> </ul> </div> Exemples CONTACT FOOTER
  25. 25. Filet de navigation
  26. 26. <article id="post-<?php the_ID(); ?>" <?php post_class(); ?> > <header> <h1 class="entry-title"> <?php the_title(); ?> </h1> <div class="entry-meta"> <span class="meta-prep meta-prep-author">Publié le</span> <time pubdate datetime=" <?php the_time( DATE_W3C ); ?> " class="entry-date"> <?php the_time('j F Y'); ?> </time> <span class="author vcard">Auteur</span> </div> </header> <div class="entry-content"> <?php the_content(); ?> </div> <footer class="entry-utility entry-footer"> <?php the_tags('<ul><li>','</li><li>','</li></ul>'); ?> </footer> </article> Les microformats dans Wordpress http://www.seomix.fr/microformats-microdata-wordpress/
  27. 27. C’est fini….merci d’être venu nous voir ! http://www.wp-nantes.org/ http://www.vectorskin.com/

×