Formation HTML5, CSS3, Responsive – création de pages web
- Référence : DEHTML05
- Durée : 21 heures
- Certification : Non
- Eligible CPF : Non
CONNAISSANCES PREALABLES
- Aucun
PROFIL DES STAGIAIRES
- Webmasters, concepteurs Web, développeurs et chefs de projets techniques
OBJECTIFS
- Décrire la structuration d'une page HTML 5
- Ajouter des styles CSS aux éléments d'une page
- Utiliser les blocs et les tableaux
- Créer des formulaires avec Web Forms 2
- Tester les nouveautés HTML 5 et CSS 3
- Exploiter les "media queries" pour s'adapter aux tailles d'écran
- Expliquer la philosophie des framemorks HTML/CSS pour le développement responsive
METHODES PEDAGOGIQUES
- 6 à 12 personnes maximum par cours, 1 poste de travail par stagiaire
- Remise d’une documentation pédagogique papier ou numérique pendant le stage
- La formation est constituée d’apports théoriques, d’exercices pratiques et de réflexions
METHODES D'EVALUATION DES ACQUIS
- Auto-évaluation des acquis par le stagiaire via un questionnaire
- Attestation de fin de stage adressée avec la facture
FORMATEUR
Consultant-Formateur expert Développement Internet
CONTENU DU COURS Développement Internet
1 - Les terminaux
- Périphériques, OS, navigateurs
- Types de terminaux (mobile, tablette, tv, liseuse…) et leur résolution
- Standards HTML, HTML 5, CSS 3 (API, sélecteurs…)
- Le marché mobile et parts de marché
2 - Structure d'une page
- Tags principaux
- Simplification avec HTML 5
- Les éléments et leurs placements
3 - Balises structurantes
- Blocs div et span
- Listes
- Tableaux
- iFrames
4 - Web Forms 2
- Placeholder
- Validation automatique
- Slider
- Champ Date
- Bouton Radio
- Listes déroulantes
- Champs de saisie
5 - HTML 5
- Balises sémantiques
- Audio et vidéo
6 - Styles CSS
- Syntaxe des sélecteurs CSS
- Pseudo-sélecteurs
- Principales propriétés CSS
- Règles CSS
- Frameworks CSS
7 - Structure des éléments
- Padding, marges et bordures
- La propriété display
- Le modèle de boîte
- Eléments "block" et "inline"
8 - Positionnement
- Positionnement : Dans le flux
- Positionnement : Absolu et relatif
- Positionnement : Fixé
- Positionnement : Flottant
9 - CSS 3
- Nouveaux sélecteurs
- Fonts, couleurs et bordures
- Positionnement en colonnes
- Présentation des "media queries"
10 - Présentation des "media queries"
- Réglage complémentaire de rendu visuel (viewport)
- JavaScript et les anciens navigateurs
- Règles conditionnelles (orientation, device-width…)
- Adaptation des CSS aux caractéristiques du terminal
11 - Principes de grilles fluides, fixes
- Conception classique versus conception selon une grille
- Importance des blocs, approche contenu/contenant
- Unités de mesure (%, em, px), mode Retina
- Eviter les débordements et les points de rupture
- Principe des box, layout avec CSS 3
12 - Frameworks et librairies responsives
- Détecter les ressources avec "Modernizr"
- Librairies de substitution (less, CSS 3 PIE…)
- Frameworks CSS 960 Grid, HTML 5 Boilerplate, Bootstrap, Foundation, Skeleton, 320
13 - Les fondamentaux de l'accessibilité numérique
- Le RGAA (Référentiel Général d’Amélioration de l’Accessibilité) : définition d’un site Web "accessible"
- Les outils dédiés
- Bonnes pratiques de construction HTML des pages
- La sémantique des éléments
- Les attributs fondamentaux pour l’accessibilité