Formation Webmaster Expert: Responsive Web Design (RWD) + Microdata, Schema.org et Rich Snippets

Commentaire sur Formation Webmaster Expert: Responsive Web Design (RWD) + Microdata, Schema.org et Rich Snippets - Présentiel - Aix-en-Provence - Bouches-du-Rhône

• Contenu
  Formation Webmaster Expert: Responsive Web Design (RWD) + Microdata, Schema.org et Rich Snippets.

  • Durée: 3 jours 
  • Public: Webmasters, développeurs, intégrateurs confirmés 
  • Pré-requis: Bonnes connaissances en HTML et CSS 
  • Objectifs: Maîtriser la création de sites adaptatifs - Mettre en place une sémantique web efficace pour le référencement de vos pages web 
  •  Référence: SIT848-F

  Programme:

  
  

  Construire un site web adaptatif.
  

  • Responsive Web Design (RWD): définition, composantes 
  • Standards, le HTML5 et CSS3 
  • Détection de ressources avec Modernizr
  • Contraintes ergonomiques et fonctionnelles
  • Viewport: notion, meta, valeurs 
  • Unités relatives (%, em) vs. absolues (px)
  • Ressources utiles: outils, galeries de sites mobiles

  • Atelier: Structure d'un site HTML5/CSS3, support par les anciens navigateurs

  Créer une grille d'affichage flexible. 
  

  • Tailles d'écran, résolution optimale
  • Modes portrait et paysage
  • Expression des tailles en pourcentage (%), em
  • Tailles minimales, maximales 
  • Blocs, approche contenu/contenant 
  • Principe des box, layout avec CSS3 
  • Taille des fonts: fixer une base pour les tailles, conversions em 
  • Eviter les débordements

  • Atelier: Multiples exemples de grilles flexibles

  Utiliser des médias flexibles.
  

  • Images flexibles: images de fond, adaptation HTML5
  • Marges et espaces flexibles 
  • Vidéos adaptées 
  • Support des propriétés CSS par les anciens navigateurs

  • Atelier: Eviter le débordements d'images/vidéos

  Ecrire des CSS3 Media Queries.
  

  • Adaptation de l'affichage en fonction de la résolution 
  • Types de médias
  • Choix des règles conditionnelles: orientation, device-width 
  • Medias queries internes, externes 
  • Gestion des menus et sliders 
  • Polyfills pour le support des anciens navigateurs

  • Atelier: Adaptation de l'affichage en fonction de la résolution

  Frameworks RWD.
  

  • Panorama des frameworks existants 
  • Bootstrap 
  • 960 grid 
  • Optimisation des ressources graphiques

  • Atelier: Construction d'un site adaptatif avec Bootstrap

  Comprendre la sémantique web. 
  

  • Valorisation du contenu d'une page web pour améliorer le référencement 
  • Hypertexte sémantique et sémantique embarquée dans les pages HTML 
  • Nouvelles balises sémantiques HTML5 
  • Formats de balisage: Microdata, Microformats, RDFa 
  • Rich Snippets: présentation, outils de test
  • Compatibilité des Rich Snippets avec les types de contenu: Avis, Personnes, Produits, Événements...

  Baliser des données à l'aide de Microformats. 
  

  • Entités 
  • Microformats simples: rel-license, rel-nofollow, rel-tag, rel-bookmark, XFN 
  • Microformats composés: hCard, hCalendar, hAtom, hReview, hResume 
  • Outils de génération de microformats: hCard Creator, hReview Creator,...

  Intégrer des Microdata et utilisation de schémas.
  

  • Microdata: spécifications HTML 5 
  • Nouveaux attributs: itemscope, itemtype, itemprop, itemref, itemid 
  • Microdata API support 
  • Schema.org: présentation, documentation
  • Hiérachie des types 
  • Mise en place, bonnes pratiques

  Tarifs:

  
  

  A distance ou présentiel: 1436 euros

Autre formation en rapport avec design web