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 - Savoir identifier les instrusions et mettre en place une stratégie de sécurité dans vos applications web
Référence: SIT847-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,...