Objectifs
Cette formation vous permet d'identifier les nouveautés HTML5 et CSS3 et leurs compatibilités, d'améliorer le référencement dans les moteurs de recherche, d'améliorer l'ergonomie et l'accessibilité, d'être capable d'intégrer de la vidéo, de l'audio et de réaliser des animations sans Flash ni Javascript, de réaliser du graphisme avancé avec peu d'images et d'adapter le positionnement aux différents médias (mobile, tablettes).
Public
Graphistes, webdesigners, webmasters, intégrateurs, développeurs, chefs de projet, ou toute autre personne en charge de la création de pages web.
Durée
21 heures en présentiel sur 2 jours
Pré-requis
Avoir suivi la formation HTML et CSS les BASES ou posséder les compétences equivalentes
Formateur
Formateur expérimenté, développeur de site Web, et spécialiste du Web.
Méthode pédagogique
8 participants maximum, un poste par stagiaire et un support de cours est remis en fin de stage. La formation est constituée d'apports théoriques, de démonstrations et de mises en pratique basées sur des exercices.
Modalité de validation des acquis
Évaluation en ligne des acquis via un questionnaire. Attestation de fin de stage.
Programme de la formation
Compatibilité
- Manuels et outils de travail
- Standards et compatibilités des navigateurs
- DOCTYPE, charset et modes de compatibilité
Référencement
- Nouvelles balises sémantiques (header, nav, article, footer, ...)
- Microdonnées (itemscope, itemtype, itemprop)
Ergonomie et accessibilité des formulaires
- Nouveaux type de champs (email, ...)
- Nouveaux attributs (required, ...)
Multimédia
- Vidéo et audio (sans Flash)
- Sous-titres
- SVG embarqué
Sélecteurs et valeurs CSS3
- Sélecteurs d'attributs
- Nouvelles pseudo-classes d'état
- Valeurs dynamiques : calc()
- Variables
Positionnement CSS3
- Inlineblock, boxsizing, clearfix
- Flexbox
Introduction au responsive design
- Media queries CSS : s'adapter au différentes tailles d'écran et à l'orientation
- Viewport
Graphisme façon print
- Colonnes
- Régions et exclusions
Graphisme avancé
- Polices personnalisées
- Couleurs, transparence et dégradés
- Ombres
- Bordure arrondies et en images
- Arrière-plans multiple
- Filtres (noir et blanc, ...)
Animations (sans Flash ni Javascript)
- Transformation 2D
- Transitions
- Animations autonomes
