Jour 1 - Matin

Les terminaux

• Types de terminaux (mobile, tablette, tv, liseuse...) et leur résolution
• Périphériques, OS, navigateurs
• Le marché mobile et parts de marché
• Standards HTML, HTML 5, CSS 3 (API, sélecteurs...)

Structure d'une page

• Tags principaux
• Simplification avec HTML 5
• Les éléments et leurs placements

Balises structurantes

• Blocs div et span
• Listes
• Tableaux
• iFrames

Jour 1 - Après-midi

Web Forms 2

HTML 5

• Balises sémantiques
• Audio et vidéo

Jour 2 - Matin

Styles CSS

• Syntaxe des sélecteurs CSS
• Pseudo-sélecteurs
• Principales propriétés CSS
• Règles CSS
• Frameworks CSS

Structure des éléments

• Le modèle de boîte
• Eléments "block" et "inline"
• La propriété display
• Padding, marges et bordures

Positionnement

Jour 2 - Après-midi

CSS 3

• Nouveaux sélecteurs
• Fonts, couleurs et bordures
• Positionnement en colonnes
• Présentation des "media queries"

Jour 3 - Matin

Présentation des "media queries"

• Adaptation des CSS aux caractéristiques du terminal
• Règles conditionnelles (orientation, device-width...)
• JavaScript et les anciens navigateurs
• Réglage complémentaire de rendu visuel (viewport)

Principes de grilles fluides, fixes

• Conception classique versus conception selon une grille
• Importance des blocs, approche contenu / contenant
• Unités de mesure ( pourcent, em, px), mode Retina
• Eviter les débordements et les points de rupture
• Principe des box, layout avec CSS 3

Jour 3 - Après-midi

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

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é

Certification

• L'examen (en français) sera passé le dernier jour, à l'issue de la formation et s'effectuera en ligne
• La durée moyenne est de 1h00

• 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.

• Créer une page Web à l'aide des balises du HTML5 afin de rendre sa lecture accessible à tous types d'utilisateurs, y compris ceux en situation de handicap
• Mettre en forme une page Web et ses éléments HTML5 afin de respecter la maquette graphique définie par l'entreprise en utilisant les règles de mise en forme et de positionnement du CSS3
• Adapter l'affichage d'une page Web aux différents supports (ordinateur, smartphone, tablette...) en utilisant les règles de "media queries" pour optimiser sa lecture sur différents appareils
• Concevoir et développer des formulaires (formulaire d'inscription, formulaire de paiement...) utilisables par tout type d'utilisateurs, y compris ceux en situation de handicap pour recueillir des informations (textes, fichiers...) au moyen de balises adéquates du HTML5 et en respectant les recommandations de sécurité fournies par les instances officielles (OWASP, ANSII...)
• Animer avec du contenu dynamique (vidéo, audio, animation...), une page Web en vue de sa consultation par tout type d'utilisateurs, y compris ceux en situation de handicap, en utilisant les balises avancées du HTML5 et les propriétés du CSS3 pour améliorer l'expérience utilisateur.

Lien pour visualiser la fiche RS : [lien privée]>