• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
La sémantique html5 et Wordpress
 

La sémantique html5 et Wordpress

on

  • 732 views

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

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

Statistics

Views

Total Views
732
Views on SlideShare
732
Embed Views
0

Actions

Likes
1
Downloads
0
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    La sémantique html5 et Wordpress La sémantique html5 et Wordpress Presentation Transcript

    • 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
    • <!--[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)
    •   <!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">&copy; 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/