HTML, CSS, JavaScript : Développement d’applications Web Front End

PROGRAMME

Le programme 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

Pourquoi est-il incontournable de développer des interfaces web responsives ?

• 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

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

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

POUR QUI ?

À qui s’adresse cette formation ?

Pour qui

Développeurs

Prérequis

Pour suivre cette e-formation, des connaissances en algorithmique sont nécessaires.

OBJECTIFS

Les 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.