Création d’applications web avec HTML5 et CSS3
Objectifs
- Disposer des compétences nécessaires au développement d’un site internet full HTML5 / CSS3
- Savoir produire des pages compatibles avec les différents navigateurs internet
- Être capable de créer des interactions dynamiques avec l’utilisateur sans développement serveur
- Comprendre comment tirer parti des dernières nouveautés HTLM5 comme le lecteur vidéos compatible mobiles
Programme
Présentation
- HTML : le langage du Web
- Contexte historique
Environnement et structure
- Le concept des balises
- Le bon usage des balises
- Particularités et pièges du HTML
- Le document HTML minimum
Mise en forme du document
- Le texte simple
- Les objets d’un document
- L’en-tête d’un document HTML
Mise en forme du texte
- Les titres
- Les paragraphes de texte
- Le contrôle de passage à la ligne
- Le formatage du texte
- L’alignement
- La taille, la couleur et la police
- Les caractères spéciaux
- Les commentaires
- Les autres balises de texte
Les listes
- Numérotées
- A puces
- Imbriquées
- Les listes de définition
Les tableaux
- Les cellules de tableau
- La fusion des cellules
- Gestion de la taille du tableau
- En-tête et légende
- Les bordures
- Les groupes de colonnes
- Les groupes de lignes
Les hypertextes
- La balise de liens
- Liens vers une autre page
- Liens à l’intérieur d’une page
- Liens vers un autre site Web
- Liens vers une adresse électronique
- Liens pour télécharger un fichier
- Les Target
- L’attribut titre
- La couleur des liens
- Liens et feuilles de style
Insertions d’images
- Les images du Web
- L’insertion d’une image
- L’espace autour d’une image
- L’alignement d’une image
- L’insertion d’une couleur d’arrière-plan
- L’insertion d’image d’arrière-plan
- L’insertion d’un lien sur une image
- Les images réactives
Les formulaires
- La déclaration de formulaire
- Zone de texte à une ligne, à plusieurs lignes
- Menu déroulant
- Bouton radio
- Bouton checkbox
- Bouton d’envoi
- Bouton d’annulation
- Bouton de commande
- Les formulaires cachés
- Les formulaires de transfert de fichier
- Les formulaires de mot de passe
- L’organisation des éléments d’un formulaire
Les meta-informations
Les feuilles de style
- Les propriétés : couleur, police, marge,…
- Les classes
- Dynamiser un site avec CSS
- Gérer les positionnements
Introduction à JavaScript
- JavaScript pour quoi faire ?
- L’environnement du client Web
- Le navigateur
- Les outils
JavaScript : le coeur du langage
- La syntaxe
- Les variables
- Les fonctions globales
- Les opérateurs
- Les structures de contrôle
- Les fonctions : définition, arguments, fonctions littérales, fonctions sous forme de données
- Les objets personnalisés : constructeur, méthodes et propriétés, prototype, objets littéraux, objets sous forme de tableaux associatifs
- Les objets globaux : Array, Date, Math, RegExp, String…
- Manipuler les tableaux, les dates, les chaînes de caractères
Les objets du navigateur
- La hiérarchie des objets
- Les principaux objets : window, document, location, screen, navigatior, form… Leurs propriétés et méthodes
- Manipuler des fenêtres
- Gérer des timers
Introduction à HTML5
- Contexte : fonctionnement d’un site internet
- Histoire du HTML
- Les organismes de normalisation : WHATWG et W3C
- La nouvelle vision HTML5
- Roadmap HTML5
Comment utiliser le HTML5 aujourd’hui
- Savoir quand choisir le HTML5
- Utiliser le HTML5 avec des navigateurs qui ne le supportent pas
Le balisage HTML5
- Structure d’une page
- Doctype
- Les nouveaux éléments et les éléments obsolètes
- HTML5 et CSS3
Les formulaires
- La balise form
- Créer et utiliser des formulaires HTML5
Audio et Vidéo
- Les éléments audio et vidéo
- Les conteneurs, les codecs
- Compromis pour un site à forte audience
Vue d’ensemble des APIs
- Les APIs HTML5
- Audio et vidéo
- Site web hors ligne
- Drag et Drop
Dessiner en HTML
- Canvas vs SVG
- Contexte et accessibilité
La communication en HTML5
- Les évènements
- Envoi de messages entre documents
- Envoi de messages par canaux
- Le push et les WebSockets pour plus de performances
La géolocalisation
- Vue d’ensemble
- La vie privée de l’utilisateur
Stockage
- Stockage local
- Stockage en session
- Bases de données SQL Web
CSS3 : standardiser des propriétés
- Vue d’ensemble : se passer d’images, éviter les astuces
- Coins arrondis, ombres portées, transparence, animations
- Mise en page et positionnement
- Autres nouveautés
CSS3 : mise en page et positionnement
- Vue d’ensemble : clarifier le code, éviter la multiplication de div imbriquées
- Niveau de présentation
- Mise en page par patron
- Mise en page multi-colonnes
- Mise en page par boites horizontales ou verticales
- Positionnement par grille
- Autres nouveautés
- CSS3 pour mobiles et tablettes : bonnes pratiques
MOYENS PÉDAGOGIQUES ET TECHNIQUES D’ENCADREMENT DES FORMATIONS
Modalités pédagogiques :
- Évaluation des besoins et du profil des participants.
- Apport théorique et méthodologique : séquences pédagogiques regroupées en différents modules.
- Contenus des programmes adaptés en fonction des besoins identifiés pendant la formation.
- Le formateur évalue la progression pédagogique du participant tout au long de la formation au moyen de travaux pratiques, étude de cas et mise en situation.
- Méthodes expositive, active et participative.
- Réflexion et échanges sur cas pratiques.
- Retours d'expériences.
- Corrections appropriées et contrôles des connaissances à chaque étape, fonction du rythme de l’apprenant mais également des exigences requises au titre de la formation souscrite.
Éléments matériels :
- Mise à disposition des outils nécessaires au bon déroulement des travaux pratiques.
- Support de cours au format numérique projeté sur écran et transmis au participant en fin de la formation.
Référent pédagogique et formateur :
- Chaque formation est sous la responsabilité du directeur pédagogique de l’organisme de formation.
- Le bon déroulement est assuré par le formateur désigné par l’organisme de formation.
MOYENS PERMETTANT LE SUIVI ET L’APPRÉCIATION DES RÉSULTATS
- Feuilles de présences signées des participants et du formateur par demi-journée.
- Attestation de fin de formation mentionnant les objectifs, la nature et la durée de l’action et les résultats de l’évaluation des acquis de la formation.
Please login to get access to the quiz
Back to Développement web – Frontend
