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

Objectifs pédagogiques

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

Programme

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)

Prévoir l’achat de la certification en supplément

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.