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é
Cookies