Durée
32,0 heures
Tarif régulier
250 $
Objectifs de la formation
Le développement Front End correspond aux éléments d’une application web (développés avec HTML, CSS et JavaScript) qu’un utilisateur peut voir et avec lesquels il peut interagir directement. Cette e-formation s’adresse aux développeurs qui souhaitent acquérir les bonnes bases et les bonnes pratiques pour développer une application web Front End. Certification possible : Certification ENI - Développement de sites web avec le langage de balises HTML et des feuilles de style CSS option : HTML5 et CSS3.Clientèle visée
DéveloppeursPréalables
Pour suivre cette e-formation, des connaissances en algorithmique sont nécessaires.Formateurs
Information à venir
Architecture de la formation
Le Web et le client léger
• Objectifs
• C'est quoi le Web ?
• Comprendre les expressions du Web
• Le W3C
• Historique et usage d'Internet en France
• Différence entre page Web statique et dynamique
• Rôle du client et du serveur
• Définition des principaux éléments d'un site Web
• Quelques chiffres Internet
• Premier site Web
• Dates clés du Web
• Protocole HTTP
• Clients légers : navigateurs et moteurs de rendu
• Quelques chiffres sur les navigateurs
• Avantages et inconvénients du client léger
• Démonstration - Installation des outils pour les navigateurs
• Choix des navigateurs
• Démonstration - Installation d'un outil de développement
• Conclusion
Les balises HTML
• Objectifs
• Maquetter une page
• Démonstration - Maquetter une page
• L'historique d'HTML
• Les balises, attributs et règles d'HTML
• Les premières balises
• Les éléments HTML4 obsolètes
• Doctype : simplification HTML5
• La balise <html>
• La balise <head>
• La balise <title>
• La balise <meta>
• L'encodage des caractères
• La balise <body>
• Placer du texte sur une page HTML
• Les commentaires
• Les liens
• La validation du code HTML
• La mise en page à l'aide d'éléments conteneurs
• Les images
• Les couleurs
• Les nouveautés HTML5
• La balise <header>
• La balise <nav>
• La balise <section>
• La balise <aside>
• La balise <article>
• La balise <footer>
• Les avantages des nouvelles balises
• Les nouvelles balises sémantiques
• Les nouveaux attributs
• Tester la compatibilité des balises suivant le navigateur
• Bien coder
• Démonstration - Les principales balises HTML
• Enoncé du TP - Zoning
• Enoncé du TP - Biographie
Les formulaires HTML
• Objectifs
• Introduction
• Zones de saisie basiques
• Méthode GET ou POST
• Améliorer la saisie
• Principales balises du formulaire
• Valider un formulaire
• Attributs de la liste déroulante
• Attributs globaux HTML
• Événements de la fenêtre
• Événements du formulaire
• Événements du clavier
• Événements à la souris
• Événements liés au presse-papiers
• Événements des médias
• Événements divers
• Démonstration - Formulaire HTML
• Enoncé du TP - Créer un formulaire HTML
Les balises multimédia
• Objectifs
• La balise <audio>
• Le format mp3
• Le format Ogg Vorbis
• Le format Wav
• Le format AAC
• La compatibilité des formats audio
• Exemples d'utilisation de la balise <audio>
• Démonstration - La balise <audio>
• La balise <video>
• Le format H.264 MPEG-4
• Le format OGG
• Le format H.265 MPEG-4
• Le format WebM
• La compatibilité des formats vidéo
• Exemples d'utilisation de la balise <video>
• Démonstration - La balise <video>
Les feuilles de style CSS
• Objectifs
• Définition
• Les règles de base
• Les sélecteurs
• Les modes de sélection
• Cascade et héritage des propriétés
• Le positionnement des éléments
• La typographie et le texte
• Les Web fonts
• Démonstration - Intégrer des Web fonts avec Font Squirrel
• Démonstration - Intégrer des Web fonts avec Google Font Web
• Les listes
• Les arrière-plans
• Les liens hypertextes et les pseudo-éléments
• Les propriétés des boîtes
• Les tableaux
• Les bordures
• La mise en page
• La version CSS3
• Les bords arrondis (CSS3)
• Les ombres (CSS3)
• La gestion du texte (CSS3)
• Les arrière-plans multiples (CSS3)
• Les dégradés de couleurs (CSS3)
• Les transformations (CSS3)
• Les transitions (CSS3)
• Les animations (CSS3)
• Les transformations 3D (CSS3)
• Enoncé du TP - Biographie avec les balises CSS
• Enoncé du TP - Mettre en forme un formulaire HTML
Le Responsive Web Design (Media Queries)
• Objectifs
• Problématique et principes du web adaptatif
• Mise en page adaptative
• Principes du Responsive Web Design
• Démonstration - Affichage et résolution d'écran
• Media Queries
• Démonstration - Les outils du navigateur pour les développeurs
Un framework CSS : Bootstrap
• Objectifs
• Utilité et définition d'un framework
• Présentation de Bootstrap
• Fonctionnement de Bootstrap
• Points forts de Bootstrap
• Le fichier normalize.css
• Evolutions de Bootstrap
• Mise en œuvre de Bootstrap
• Le conteneur
• Dossiers d'installation de Bootstrap
• Démonstration - Installation de Bootstrap
• Minification des fichiers
• Utilisation de Bootstrap
• Exemples d'éléments Bootstrap
• Compatibilité avec les navigateurs
• Scripts JavaScript à ajouter
• Le code Bootstrap en résumé
• Présentation du système de grille
• Démonstration - Système de grille
• Optimisation du système de grille
• Démonstration - Offset Bootstrap
• Penser Mobile First
• Thèmes et documentations Bootstrap
• Présentation des éléments
• Éléments de la catégorie CSS
• Éléments de la catégorie Composant
• Éléments de la catégorie JavaScript
• Amélioration des interfaces
• Les fenêtres modales
• Personnalisation de Bootstrap
• Démonstration - Personnaliser Bootstrap avec les CSS
• Jumbotron
• Enoncé du TP - Application My Music
Le langage JavaScript
• Objectifs
• Historique
• Les bases du langage JavaScript
• Les tableaux
• La commande console
• Démonstration - La console JavaScript
• Les opérateurs
• Les différents tests d'égalité
• Les fonctions
• Les événements
• La programmation orientée objet
• La création d'une classe
• La mise en œuvre de l'héritage
• Démonstration - Modification du DOM
• Enoncé du TP - Le jeu du pendu
• Enoncé du TP - Fonctionnalités JavaScript sur l'application My Music
Le framework jQuery
• Objectifs
• Présentation de jQuery
• Écosystème jQuery
• Fonction jQuery
• Installation de jQuery
• La méthode ready
• Les différents modes de sélection
• Modifier le DOM
• Événements
• Démonstration - Utilisation de jQuery
• Enoncé du TP - Fonctionnalités jQuery sur l’application My Music
Conseils pour bien coder
• Objectifs
• Règle n°1 : respecter le doctype HTML5
• Règle n°2 : fermer les balises
• Règle n°3 : indiquer l'URL canonique
• Règle n°4 : définir le cache
• Règle n°5 : définir les emplacements pour le JavaScript
• Règle n°6 : respecter la sémantique
• Règle n°7 : respecter la hiérarchie des titres
• Règle n°8 : influencer le référencement
• Règle n°9 : bien choisir le texte d'un lien
• Règle n°10 : utiliser l'attribut nofollow
• Règle n°11 : mettre un attribut alt à chaque balise d'image
• Règle n°12 : préciser la taille des images
• Règle n°13 : utiliser la balise <time>
• Règle n°14 : limiter le nombre de balises <div>
• Règle n°15 : préférer les feuilles de style CSS aux attributs style
• Règle n°16 : utiliser l'attribut id
• Règle n°17 : limiter et combiner les fichiers du même type
• Règle n°18 : limiter le nombre de connexions à d'autres domaines
• Règle n°19 : assurer la compatibilité avec Internet Explorer
• Règle n°20 : tester le rendu final
HTML5 et CSS3 - Maîtrisez les standards de la création de sites Web (3e édition)
• Le HTML5 et les CSS 3
• Les bonnes pratiques
• Présentation du HTML5
• La structure des documents
• Les conteneurs sémantiques
• Les conteneurs de texte
• La mise en forme sémantique du texte
• Les liens
• Les tableaux
• Les images
• Les formulaires
• Le multimedia
• Présentation des feuilles de style
• La syntaxe des CSS
• Les propriétés CSS pour les polices de caractères
• Les propriétés CSS pour le texte
• Les propriétés CSS pour les listes et les tableaux
• La mise en forme des boîtes
• La mise en page des boîtes
• Les requêtes de media
• Les propriétés d'impression
• Les modules graphiques CSS3 en devenir
• Le dessin 2D
• La géolocalisation
• Le stockage de données en local
• Les applications en mode déconnecté (offline)
• Les autres API JavaScript du HTML5
Apprendre à développer avec JavaScript (2e édition)
• Présentation du langage JavaScript
• Développement à partir d’algorithmes
• Bases du langage JavaScript
• Conditionnement des traitements
• Traitements itératifs (boucles)
• Tableaux
• Procédures et fonctions
• Approche "objet" en JavaScript
• Objets de base de JavaScript
• Saisie de données via des formulaires
• Modèle DOM
• Exploration de flux XML via DOM
• Gestion des cookies en JavaScript
• Stockage local de données
• Stockage distant (Ajax - PHP - MySQL - XML)
• Stockage distant (Ajax - PHP - MySQL - JSON)
• Géolocalisation
• Dessin (HTML5 CANVAS)
• Graphiques de gestion
• Framework AngularJS
• EcmaScript 6
• Framework Node.js
• Serveur de données Mongo DB
• Accès à un serveur Mongo DB depuis Node.js
• Accès à un serveur Node.js depuis AngularJS
jQuery - Le framework JavaScript pour des sites dynamiques et interactifs (4e édition)
• Démarrer avec jQuery
• Les sélecteurs en jQuery
• Manipuler les attributs et les propriétés
• Manipuler les feuilles de style CSS
• Les événements
• Les effets
• Traverser le DOM
• Manipuler le DOM
• Filtrer le DOM
• AJAX vu par jQuery
• Quelques méthodes utilitaires
• Les formulaires
• Les plug-ins jQuery
Bootstrap - Apprenez à développer des interfaces web responsives
• Objectifs
• C'est quoi le Web ?
• Comprendre les expressions du Web
• Le W3C
• Historique et usage d'Internet en France
• Différence entre page Web statique et dynamique
• Rôle du client et du serveur
• Définition des principaux éléments d'un site Web
• Quelques chiffres Internet
• Premier site Web
• Dates clés du Web
• Protocole HTTP
• Clients légers : navigateurs et moteurs de rendu
• Quelques chiffres sur les navigateurs
• Avantages et inconvénients du client léger
• Démonstration - Installation des outils pour les navigateurs
• Choix des navigateurs
• Démonstration - Installation d'un outil de développement
• Conclusion
Les balises HTML
• Objectifs
• Maquetter une page
• Démonstration - Maquetter une page
• L'historique d'HTML
• Les balises, attributs et règles d'HTML
• Les premières balises
• Les éléments HTML4 obsolètes
• Doctype : simplification HTML5
• La balise <html>
• La balise <head>
• La balise <title>
• La balise <meta>
• L'encodage des caractères
• La balise <body>
• Placer du texte sur une page HTML
• Les commentaires
• Les liens
• La validation du code HTML
• La mise en page à l'aide d'éléments conteneurs
• Les images
• Les couleurs
• Les nouveautés HTML5
• La balise <header>
• La balise <nav>
• La balise <section>
• La balise <aside>
• La balise <article>
• La balise <footer>
• Les avantages des nouvelles balises
• Les nouvelles balises sémantiques
• Les nouveaux attributs
• Tester la compatibilité des balises suivant le navigateur
• Bien coder
• Démonstration - Les principales balises HTML
• Enoncé du TP - Zoning
• Enoncé du TP - Biographie
Les formulaires HTML
• Objectifs
• Introduction
• Zones de saisie basiques
• Méthode GET ou POST
• Améliorer la saisie
• Principales balises du formulaire
• Valider un formulaire
• Attributs de la liste déroulante
• Attributs globaux HTML
• Événements de la fenêtre
• Événements du formulaire
• Événements du clavier
• Événements à la souris
• Événements liés au presse-papiers
• Événements des médias
• Événements divers
• Démonstration - Formulaire HTML
• Enoncé du TP - Créer un formulaire HTML
Les balises multimédia
• Objectifs
• La balise <audio>
• Le format mp3
• Le format Ogg Vorbis
• Le format Wav
• Le format AAC
• La compatibilité des formats audio
• Exemples d'utilisation de la balise <audio>
• Démonstration - La balise <audio>
• La balise <video>
• Le format H.264 MPEG-4
• Le format OGG
• Le format H.265 MPEG-4
• Le format WebM
• La compatibilité des formats vidéo
• Exemples d'utilisation de la balise <video>
• Démonstration - La balise <video>
Les feuilles de style CSS
• Objectifs
• Définition
• Les règles de base
• Les sélecteurs
• Les modes de sélection
• Cascade et héritage des propriétés
• Le positionnement des éléments
• La typographie et le texte
• Les Web fonts
• Démonstration - Intégrer des Web fonts avec Font Squirrel
• Démonstration - Intégrer des Web fonts avec Google Font Web
• Les listes
• Les arrière-plans
• Les liens hypertextes et les pseudo-éléments
• Les propriétés des boîtes
• Les tableaux
• Les bordures
• La mise en page
• La version CSS3
• Les bords arrondis (CSS3)
• Les ombres (CSS3)
• La gestion du texte (CSS3)
• Les arrière-plans multiples (CSS3)
• Les dégradés de couleurs (CSS3)
• Les transformations (CSS3)
• Les transitions (CSS3)
• Les animations (CSS3)
• Les transformations 3D (CSS3)
• Enoncé du TP - Biographie avec les balises CSS
• Enoncé du TP - Mettre en forme un formulaire HTML
Le Responsive Web Design (Media Queries)
• Objectifs
• Problématique et principes du web adaptatif
• Mise en page adaptative
• Principes du Responsive Web Design
• Démonstration - Affichage et résolution d'écran
• Media Queries
• Démonstration - Les outils du navigateur pour les développeurs
Un framework CSS : Bootstrap
• Objectifs
• Utilité et définition d'un framework
• Présentation de Bootstrap
• Fonctionnement de Bootstrap
• Points forts de Bootstrap
• Le fichier normalize.css
• Evolutions de Bootstrap
• Mise en œuvre de Bootstrap
• Le conteneur
• Dossiers d'installation de Bootstrap
• Démonstration - Installation de Bootstrap
• Minification des fichiers
• Utilisation de Bootstrap
• Exemples d'éléments Bootstrap
• Compatibilité avec les navigateurs
• Scripts JavaScript à ajouter
• Le code Bootstrap en résumé
• Présentation du système de grille
• Démonstration - Système de grille
• Optimisation du système de grille
• Démonstration - Offset Bootstrap
• Penser Mobile First
• Thèmes et documentations Bootstrap
• Présentation des éléments
• Éléments de la catégorie CSS
• Éléments de la catégorie Composant
• Éléments de la catégorie JavaScript
• Amélioration des interfaces
• Les fenêtres modales
• Personnalisation de Bootstrap
• Démonstration - Personnaliser Bootstrap avec les CSS
• Jumbotron
• Enoncé du TP - Application My Music
Le langage JavaScript
• Objectifs
• Historique
• Les bases du langage JavaScript
• Les tableaux
• La commande console
• Démonstration - La console JavaScript
• Les opérateurs
• Les différents tests d'égalité
• Les fonctions
• Les événements
• La programmation orientée objet
• La création d'une classe
• La mise en œuvre de l'héritage
• Démonstration - Modification du DOM
• Enoncé du TP - Le jeu du pendu
• Enoncé du TP - Fonctionnalités JavaScript sur l'application My Music
Le framework jQuery
• Objectifs
• Présentation de jQuery
• Écosystème jQuery
• Fonction jQuery
• Installation de jQuery
• La méthode ready
• Les différents modes de sélection
• Modifier le DOM
• Événements
• Démonstration - Utilisation de jQuery
• Enoncé du TP - Fonctionnalités jQuery sur l’application My Music
Conseils pour bien coder
• Objectifs
• Règle n°1 : respecter le doctype HTML5
• Règle n°2 : fermer les balises
• Règle n°3 : indiquer l'URL canonique
• Règle n°4 : définir le cache
• Règle n°5 : définir les emplacements pour le JavaScript
• Règle n°6 : respecter la sémantique
• Règle n°7 : respecter la hiérarchie des titres
• Règle n°8 : influencer le référencement
• Règle n°9 : bien choisir le texte d'un lien
• Règle n°10 : utiliser l'attribut nofollow
• Règle n°11 : mettre un attribut alt à chaque balise d'image
• Règle n°12 : préciser la taille des images
• Règle n°13 : utiliser la balise <time>
• Règle n°14 : limiter le nombre de balises <div>
• Règle n°15 : préférer les feuilles de style CSS aux attributs style
• Règle n°16 : utiliser l'attribut id
• Règle n°17 : limiter et combiner les fichiers du même type
• Règle n°18 : limiter le nombre de connexions à d'autres domaines
• Règle n°19 : assurer la compatibilité avec Internet Explorer
• Règle n°20 : tester le rendu final
HTML5 et CSS3 - Maîtrisez les standards de la création de sites Web (3e édition)
• Le HTML5 et les CSS 3
• Les bonnes pratiques
• Présentation du HTML5
• La structure des documents
• Les conteneurs sémantiques
• Les conteneurs de texte
• La mise en forme sémantique du texte
• Les liens
• Les tableaux
• Les images
• Les formulaires
• Le multimedia
• Présentation des feuilles de style
• La syntaxe des CSS
• Les propriétés CSS pour les polices de caractères
• Les propriétés CSS pour le texte
• Les propriétés CSS pour les listes et les tableaux
• La mise en forme des boîtes
• La mise en page des boîtes
• Les requêtes de media
• Les propriétés d'impression
• Les modules graphiques CSS3 en devenir
• Le dessin 2D
• La géolocalisation
• Le stockage de données en local
• Les applications en mode déconnecté (offline)
• Les autres API JavaScript du HTML5
Apprendre à développer avec JavaScript (2e édition)
• Présentation du langage JavaScript
• Développement à partir d’algorithmes
• Bases du langage JavaScript
• Conditionnement des traitements
• Traitements itératifs (boucles)
• Tableaux
• Procédures et fonctions
• Approche "objet" en JavaScript
• Objets de base de JavaScript
• Saisie de données via des formulaires
• Modèle DOM
• Exploration de flux XML via DOM
• Gestion des cookies en JavaScript
• Stockage local de données
• Stockage distant (Ajax - PHP - MySQL - XML)
• Stockage distant (Ajax - PHP - MySQL - JSON)
• Géolocalisation
• Dessin (HTML5 CANVAS)
• Graphiques de gestion
• Framework AngularJS
• EcmaScript 6
• Framework Node.js
• Serveur de données Mongo DB
• Accès à un serveur Mongo DB depuis Node.js
• Accès à un serveur Node.js depuis AngularJS
jQuery - Le framework JavaScript pour des sites dynamiques et interactifs (4e édition)
• Démarrer avec jQuery
• Les sélecteurs en jQuery
• Manipuler les attributs et les propriétés
• Manipuler les feuilles de style CSS
• Les événements
• Les effets
• Traverser le DOM
• Manipuler le DOM
• Filtrer le DOM
• AJAX vu par jQuery
• Quelques méthodes utilitaires
• Les formulaires
• Les plug-ins jQuery
Bootstrap - Apprenez à développer des interfaces web responsives
Pourquoi est-il incontournable de développer des interfaces web responsives ?
• Quelques statistiques à partir d'un site réel
• Etude de cas
• Quelques statistiques à partir d'un site réel
• Etude de cas
Bootstrap : Le framework CSS du web responsive
• Présentation du framework mobile first
• Installation de Bootstrap
• Premiers pas avec Bootstrap
• Présentation du framework mobile first
• Installation de Bootstrap
• Premiers pas avec Bootstrap
Disposer des blocs de contenus responsives
• Concept de grille
• Créer une grille qui s'adapte à la taille de l'écran
• Afficher et cacher des blocs en fonction de la taille de l'écran
• Mise en pratique
• Concept de grille
• Créer une grille qui s'adapte à la taille de l'écran
• Afficher et cacher des blocs en fonction de la taille de l'écran
• Mise en pratique
Manipuler les Media Queries
• Media Queries : définition du concept
• Mise en pratique : Manipulation des polices en utilisant les media queries
• Media Queries : définition du concept
• Mise en pratique : Manipulation des polices en utilisant les media queries
Créer des menus et adapter les images
• Création d'un menu basique
• Principe d'affichage d'une image responsive
• Création d'un menu basique
• Principe d'affichage d'une image responsive
Créer une interface responsive : Exercice de synthèse
• Présentation de l'objectif
• Construction de l'en-tête
• Création du menu
• Disposition du bloc image
• Insertion du témoignage
• Présentation de l'objectif
• Construction de l'en-tête
• Création du menu
• Disposition du bloc image
• Insertion du témoignage
Formation privée en entreprise
Vous êtes plusieurs à vouloir suivre une formation en particulier dans votre entreprise? Si vous êtes plus de 8 personnes, nous pouvons nous déplacer à vos bureaux pour vous donner votre formation en privé. Contactez-nous pour plus de détails ou demandez-nous une soumission en ligne.
Demander une soumissionDurée
32,0 heures
Tarif régulier
250 $
Formation privée en entreprise
Vous êtes plusieurs à vouloir suivre une formation en particulier dans votre entreprise? Si vous êtes plus de 8 personnes, nous pouvons nous déplacer à vos bureaux pour vous donner votre formation en privé. Contactez-nous pour plus de détails ou demandez-nous une soumission en ligne.
Demander une soumission