La sémantique html5 et Wordpress

La sémantique html5 et Wordpress
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/
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
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.
Exemples
Knowledge Graph
La sémantique HTML5 & Wordpress I: Pourquoi parler de sémantique ? II : La sémantique avec HTML5 III : Les Microdatas
 /* 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)
<!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
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>.
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 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
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> <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
<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
• 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
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-materiel="EOS" data-gps="48.582967,7.74828"> // Lire $("#moto").data("lieu"); // Modifier l'attribut $("#moto").attr("data-lieu","Strasbourg");
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
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
<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">© Monsite.org 2013 - tous droits réservés</small></li> </ul> </div> Exemples CONTACT FOOTER
Filet de navigation
<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/
C’est fini….merci d’être venu nous voir ! http://www.wp-nantes.org/ http://www.vectorskin.com/

La sémantique html5 et Wordpress

Check these out next

La sémantique html5 et Wordpress

Recommandé

Contenu connexe

Similaire à La sémantique html5 et Wordpress(20)

Dernier(20)

La sémantique html5 et Wordpress