HTML et CSS3 - Créer des interfaces responsive et accessibles

3 jours - 21 heures

Objectifs

Comprendre le fonctionnement d’une page web et le rôle du navigateur. Maîtriser la structure sémantique d’un document HTML. Appliquer les règles CSS pour mettre en forme une interface. Construire des formulaires adaptés aux différents utilisateurs. Mettre en œuvre des mises en page modernes avec Flexbox et Grid. Adapter les contenus aux ordinateurs, tablettes et smartphones. Contrôler la qualité, l’accessibilité et la compatibilité des pages produites.

Participants

Développeurs web débutants, intégrateurs web, webdesigners, chefs de projet web, responsables de communication et toute personne souhaitant créer ou modifier des pages web.

Prérequis

Maîtriser les fonctions courantes d’un ordinateur et la navigation sur Internet. Aucune connaissance préalable en programmation n’est nécessaire.

Pédagogie

La pédagogie est basée sur le principe de la dynamique de groupe avec alternance d'apports théoriques, de phases de réflexion collectives et individuelles, d'exercices, d'études de cas et de mises en situations observées. Formation / Action participative et interactive : les participants sont acteurs de leur formation notamment lors des mises en situation car ils s'appuient sur leurs connaissances, les expériences et mettront en œuvre les nouveaux outils présentés au cours de la session.

Spécificités pédagogiques de la session à distance

Formation dispensée en visio-formation avec un séquencement adapté. Configuration et accès à notre outil de visio-formation. Accès à la bibliothèque pédagogique virtuelle durant la formation afin de partager les exercices, contrôler les résultats obtenus et déployer l’ensemble du séquencement pédagogique. La durée exacte des modules définis ci-après est susceptible de varier en fonction de la vitesse d’appropriation des concepts enseignés de la part du stagiaire.

Remarques

Public Visé

Collaborateurs : Développer ses compétences, s’affirmer comme expert dans son domaine, sécuriser son parcours professionnel... Entreprises ou organisations : Accélérer les évolutions de carrière des collaborateurs, augmenter l’efficacité et l’employabilité des équipes... Demandeurs d’emploi : Développer son employabilité, favoriser sa transition professionnelle...

Certification

Profil de l'intervenant

Consultant-formateur expert. Suivi des compétences techniques et pédagogiques assuré par nos services.

Accessibilité

Nous contacter

Moyens techniques

Le suivi pédagogique, administratif et logistique est assuré et coordonné par nos services afin de garantir le bon déroulement de l’action de formation. Les stagiaires bénéficient d’un encadrement complet tout au long de la formation. Pour les formations réalisées en centre, les participants disposent d’un espace d’accueil, de salles configurées techniquement selon les besoins pédagogiques et d’un matériel dédié. Des ressources pédagogiques sont mis à disposition des participants pendant la formation. Une documentation pédagogique est remise à échéance de la formation au format papier ou numérique

Moyens techniques relatifs aux sessions à distance

Encadrement complet des stagiaires durant la formation. Accès à notre service technique durant l’animation pour toute limite rencontrée. Accès à l’espace de conversation instantané durant la session pour interagir avec le formateur et les participants. Transmission d’un email de contact pour réaction privée durant la session. Remise d’une documentation pédagogique papier ou numérique à échéance de la formation.

Méthodes d'évaluation des acquis

Un contact téléphonique est systématiquement établi avec le stagiaire ou la personne chargée de son inscription afin de définir le positionnement. Si besoin, un questionnaire est adressé pour valider les prérequis en correspondance et obtenir toute précision nécessaire permettant l’adaptation de l’action. Durant la formation, des exercices individuels et collectifs sont proposés pour évaluer et valider les acquis du stagiaire. La feuille d’émargement signée par demi-journée ainsi que l’évaluation des acquis sont adressées avec la facture.

Méthodes d'évaluation des acquis de la formation à distance

Un contact téléphonique est systématiquement établi avec le stagiaire ou la personne chargée de son inscription afin de définir le positionnement. Si besoin, un questionnaire est adressé pour valider les prérequis en correspondance et obtenir toute précision nécessaire permettant l’adaptation de l’action. Durant la formation, des exercices individuels et collectifs sont proposés pour évaluer et valider les acquis du stagiaire. La feuille d’émargement signée par demi-journée ainsi que l’évaluation des acquis sont adressées avec la facture.

Programme

Environnement et technologies

• Fonctionnement général d’une page web
• Rôle du navigateur et du moteur de rendu
• Différences entre structure HTML, présentation CSS et interactions JavaScript
• Rôle du W3C et du WHATWG
• HTML Living Standard et évolution modulaire de CSS
• Compatibilité entre les navigateurs
• Organisation des fichiers d’un projet web
• Utilisation d’un éditeur de code

Outils du navigateur

• Outils de développement intégrés
• Inspection de la structure HTML
• Analyse et modification des règles CSS
• Console du navigateur
• Simulation des différents formats d’écran
• Identification des erreurs de chargement et d’affichage

Structure générale d’un document HTML

• Déclaration du type de document
• Éléments html, head et body
• Définition de la langue du document
• Encodage des caractères
• Titre et métadonnées
• Configuration de la zone d’affichage avec viewport
• Relations entre les documents HTML et les feuilles de style

Structure sémantique

• Éléments header, nav, main et footer
• Éléments section, article et aside
• Hiérarchie des titres
• Organisation logique des contenus
• Intérêt de la sémantique pour l’accessibilité et le référencement
• Utilisation raisonnée des éléments génériques div et span
• Slider
• Validation automatique

Contenus textuels

• Création de liens internes et externes
• Chemins absolus et relatifs
• Ancres de navigation
• Liens vers des documents, des adresses électroniques et des numéros de téléphone
• Intitulés de liens compréhensibles et accessibles

Images et contenus multimédias

• Insertion d’images
• Choix du format d’image
• Textes alternatifs
• Éléments figure et figcaption
• Images adaptatives avec picture et srcset
• Intégration de contenus audio et vidéo
• Sous-titres et alternatives aux contenus multimédias
• Utilisation encadrée des éléments iframe

Tableaux

• Création de tableaux de données
• Lignes, colonnes et cellules
• En-têtes de lignes et de colonnes
• Titre et description d’un tableau
• Structuration accessible des données

Structure des formulaires

• Élément form
• Libellés avec label
• Regroupement des champs avec fieldset et legend
• Champs obligatoires et indications de saisie
• Organisation logique du parcours utilisateur

Champs de saisie

• Champs textuels et zones de texte
• Adresses électroniques, numéros de téléphone et URL
• Champs numériques, dates et heures
• Listes déroulantes
• Cases à cocher et boutons radio
• Sélecteurs de fichiers
• Curseurs et champs de recherche
• Boutons de commande

Validation et accessibilité

• Attributs required, pattern, min, max et step
• Utilisation de autocomplete
• Rôle et limites de placeholder
• Validation native du navigateur
• Messages d’erreur compréhensibles
• Identification des champs obligatoires
• Navigation au clavier dans les formulaires

Principes fondamentaux du CSS

• Syntaxe d’une règle CSS
• Feuilles de style internes et externes
• Sélecteurs simples et combinateurs
• Sélecteurs d’attributs
• Pseudo-classes et pseudo-éléments
• Cascade, héritage et spécificité
• Ordre d’application des règles

Mise en forme des contenus

• Polices et typographie
• Couleurs et transparence
• Arrière-plans et dégradés
• Bordures et ombres
• Espacement et alignement
• Styles des listes, liens et tableaux
• Gestion du focus et des états interactifs

CSS moderne

• Propriétés personnalisées et variables CSS
• Fonctions calc(), min(), max() et clamp()
• Propriétés logiques
• Organisation et réutilisation des styles
• Introduction aux conventions de nommage
• Présentation des frameworks CSS et de Bootstrap