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

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

Travaux pratiques (à titre indicatif) : Création d'une page Web simple

Balises structurantes

• Blocs div et span

• Listes

• Tableaux

• iFrames

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

Web Forms 2

• Champs de saisie

• Listes déroulantes

• Bouton Radio

• Champ Date

• Placeholder

• Slider

• Validation automatique

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

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)

Styles CSS

• Syntaxe des sélecteurs CSS

• Pseudo-sélecteurs

• Principales propriétés CSS

• Règles CSS

• Frameworks CSS

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

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

Travaux pratiques (à titre indicatif) : utilisation des propriétés CSS position (Left, Top, Float, Clear)

CSS 3

• Nouveaux sélecteurs

• Fonts, couleurs et bordures

• Positionnement en colonnes

• Présentation des "media queries"

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)

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)

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

Travaux pratiques (à titre indicatif) : Test de différents types de grille

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

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é

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