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

Centre Dawan
Méthode Présentiel
Lieu Aix-en-Provence, Bordeaux, Lille, - voir plus
type Formations

Demande d'information

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

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

Mastère Spécialisé Entreprendre

Centre: EM Lyon

Demande d'information

Mastère spécialisé Management et Développement des Systèmes

Centre: EM Lyon

Demande d'information

Mastère Spécialisé Sécurité des Systèmes d’Information

Centre: SUPÉLEC

Demande d'information

Mastère spécialisé en Architecture des Systèmes d'Information

Centre: ENSTA ParisTech - École Nationale Supérieure de Techniques Avancées

Demande d'information

Mastère : Management de projets informatiques

Centre: ei.cesi - École d'ingénieurs du Cesi

Demande d'information

Mastère : Conception et architecture de Réseaux

Centre: TELECOM ParisTech

Demande d'information

Mastère : Conception et architecture des systèmes informatiques

Centre: TELECOM ParisTech

Demande d'information