HTML 5, CSS 3, Responsive - Création de pages Web

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

Exemple de travaux pratiques (à titre indicatif)

• Création d'une page Web simple

Balises structurantes

• Blocs div et span
• Listes
• Tableaux
• iFrames

Exemples de travaux pratiques (à titre indicatif)

• Création d'un menu à partir d'une liste à puces
• Création d'un tableau de contacts
• Affichage d'un fichier PDF dans une page Web

Jour 1 - Après-midi

Web Forms 2

• Champs de saisie
• Listes déroulantes
• Bouton Radio
• Champ Date
• Placeholder
• Slider
• Validation automatique

Exemples de travaux pratiques (à titre indicatif)

• Création et validation d'un formulaire de saisie d'informations d'un contact

HTML 5

• Balises sémantiques
• Audio et vidéo

Exemples de travaux pratiques (à titre indicatif)

• Affichage d'un élément audio et vidéo
• Structuration d'une page Web avec les éléments
• Header
• Nav
• Section
• Article
• Footer

Jour 2 - Matin

Styles CSS

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

Exemples de travaux pratiques (à titre indicatif)

• Analyse du site Zen Garden
• Mise en forme avec CSS
• Mise en forme d'un tableau et d'un formulaire avec Bootstrap

Structure des éléments

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

Exemple de travaux pratiques (à titre indicatif)

• Mise en forme d'une page Web avec les propriétés CSS : padding et margin

Positionnement

• Positionnement
• Dans le flux
• Absolu et relatif
• Fixé
• Flottant

Exemples de travaux pratiques (à titre indicatif)

• Utilisation des propriétés CSS position
• Left
• Top
• Float
• Clear

Jour 2 - Après-midi

CSS 3

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

Exemples de travaux pratiques (à titre indicatif)

• Utilisation des propriétés CSS
• Les ombrages
• Les dégradés de couleurs
• Les angles arrondis
• Les Flex Box
• Mise en forme selon le type de média

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)

Exemple de travaux pratiques (à titre indicatif)

• Utilisation des "media queries" pour s'adapter à différents hardwares

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

Exemple de travaux pratiques (à titre indicatif)

• Test de différents types de grille

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

Exemples de travaux pratiques (à titre indicatif)

• Installation de Bootstrap et test de différentes grilles selon des tailles d'écrans différentes

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é

Exemple de travaux pratiques (à titre indicatif)

• Adaptation des pages réalisées pour les rendre accessibles

Certification (en option, hors inscription via le CPF)

• Prévoir l'achat de la certification en supplément (ne concerne pas les inscriptions via le CPF pour lesquelles la certification est incluse)
• 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

Le contenu de ce programme peut faire l'objet d'adaptation selon les niveaux, prérequis et besoins des apprenants.

Modalités d’évaluation des acquis

• En cours de formation, par des études de cas ou des travaux pratiques
• Et, en fin de formation, par un questionnaire d'auto-évaluation et/ou une certification (proposée en option)