Formation Technologies Web : HTML5, CSS3, JavaScript

Objectifs pédagogiques :

• Comprendre les architectures WEB et les technologies sous-jacentes
• Développer en HTML/HTML5
• Créer et utiliser des feuilles de style CSS3
• Proposer des formulaires dans votre application WEB
• Tirer parti des nouveautés HTML5 et CSS3 pour alléger les besoins en JavaScript
• Connaître les possibilités multimédia en HTML5/Javascript (video, son, animation)
• Créer des mises en page avec les CSS Grid
• Adapter l’affichage des versions mobile / tablette avec BootStrap
• Proposer des services géolocalisés dans vos développements
• Faciliter la communication entre le serveur et le naviGustur (Ajax)
• Proposer des applications hors ligne (mobile, tablette)

Cette formation Technologies Web : HTML5, CSS3, JavaScript est destinée aux développeurs web ainsi qu’aux intégrateurs HTML.

Des connaissances générales du web sont nécessaires pour suivre cette formation sur les technologies Web.
Il faut également connaître les bases de la programmation (variables, tests, boucles, fonctions, etc.) pour la partie JavaScript.

Vocabulaire, architecture et protocoles Web

• Vocabulaire autour des projets Web (front end, back end, backoffice, web services, etc.) Les métiers (développeur front, back, full, web master, data manager, référencement, etc.) Le modèle client/serveur dans le contexte du Web Les technologies côté front (HTML, CSS, JavaScript) Complémentarité avec les technologies du back office (Java, PHP, ASP.Net, etc.) La place des bases SQL dans les architectures Web (architecture n-tiers) Ce qui a changé pour le développeur avec l’arrivée du HTML5 et du CSS3 ? Protocoles et formats d’échange entre toutes ces briques (HTTP, XML, JSON, WebServices, Ajax, etc.) Développer une application Web selon le modèle MVC : définition et explication Synthèse à travers un exemple simple (formulaire) résumant une architecture standard d’application Web où le rôle de chaque brique est mis en évidence avec du code minimal

Les fondamentaux du langage HTML5

• Spécificités d’un langage de balises Un premier exemple HTML simple pour être concret (texte, titres, hyperliens) Format général d’un document (en-tête, corps, etc.) Différences entre HTML, XHTML, et XML Impacts de la normalisation pour les développeurs Pourquoi parle-t-on de DOM (Document Object Model) ? Gestion des paragraphes Compléments sur les hyperliens Comprendre les différences de format des images (gif, jpeg, png, etc.) Gestion des images dans une page HTML Les listes (puce, numérotée, menu, etc.) Les tables (th, tr, td, etc.)

Formulaires HTML5

• Le point d’interface avec l’utilisateur Comment gérer un formulaire en HTML ? Les méthodes GET, POST Récupérer et envoyer des données depuis un formulaire (FORM, LABEL, INPUT, TEXTAREA, BUTTON,) Concevoir le formulaire Mise en œuvre d’un formulaire standard (nom, adresse, téléphone, mail)

Les feuilles de style CSS3 (Cascading Style Sheets)

• Présentation des feuilles de style Pourquoi parle-t-on de cascade ? Définition et attributs d’un style La problématique du positionnement des éléments Normalisation et compatibilité des naviGusturs. Gestion des caractères (web fonts, ombrage, etc.) Gestion des couleurs et des effets Les apports des nouveautés CSS3 (survol, animation, transition, etc.). Zoom sur les transformations et les animations (rotation, redimensionnement, déformation) Découper l’espace en régions superposables avec les CSS Grid Tour d’horizon des propriétés CSS (grid-*) et des fonctions (repeat, minmax, fit-content) L’approche complémentaire Flex Exemple de feuilles CSS dans une charte graphique professionnelle

Bootstrap pour développer plus simplement

• Qu’est-ce qu’une feuille de style LESS ? Qu’entend-on par « Mobile First » ? Philosophie « responsive » de Bootstrap L’intégration de Bootstrap (HTML, CSS, Javascript, frameworks divers) Installer et utiliser Bootstrap dans son projet La dimension grille (ligne/colonne) de Bootstrap Mise en œuvre et tests sur différents équipements (mobile, PC, portable)

Le langage JavaScript

• Introduction au langage JavaScript Présentation d’exemples Les versions de JavaScript JavaScript embarqué dans les pages HTML Les fondamentaux (variables, types, structures, opérateurs, instructions) Manipulation de tableaux Fonction (définition, appel, passage d’arguments) Programmation objet en JavaScript (méthodes, propriétés) Dialogues avec l’utilisateur en JavaScript Les pièges classiques en JavaScript

EcmaScript : présentation des nouveautés

• JavaScript et EcmaScript (vocabulaire : ECMA, EcmaScript, ES?, ES201?) Le changement net depuis ES6 Compatibilité avec les naviGusturs et les frameworks Arrow function, promise, etc. Module import

Gérer les évènements et les données en JavaScript

• Les évènements gérés par JavaScript (survol, clic, clavier, etc.) Propagation des évènements L’objet Event Les pop-ups Le fonctionnement de l’objet document Interactivité, contrôle et transformation des pages HTML Manipulation de la page (DOM) Manipulation des URL et des redirections Sélection d’éléments Modification du contenu HTML Modification du graphisme CSS

Développer au quotidien avec JavaScript

• Gestion des chaînes de caractères à travers l’objet String Les principales fonctions mathématiques dans l’objet Math Manipulation des dates via l’objet Date Manipulation des tableaux via l’objet Array Les expressions régulières dans le JavaScript Règles de transtypage et comparaisons Paramètres obligatoires / facultatifs / indéfinis des fonctions Quelques outils pour tester, debugger et mesurer les performances de vos programmes JavaScript

Gestion des formulaires en JavaScript

• Rappel des composants d’un formulaire (checkbox, textbox, list, button, etc.) Manipulation de l’objet form Contrôle des données saisies dans un formulaire Le formulaire dynamique Liens entre évènements et formulaire (chargement, modification, validation, etc.) Validation du formulaire précédent « manuellement » en Javascript

AJAX : dialoguer avec le serveur

• Pourquoi AJAX (Asynchronous JavaScript And Xml) ? Mise en œuvre avec l’objet XMLHttpRequest Méthodes de requête http (GET, POST, etc.) Récupération de contenus HTML, XML ou JSON

Présentation de JavaScript avec HTML5

• Géolocalisation Glisser / Déposer Multi upload Historique (pushstate) Local Storage Web GL Web RTC Fullscreen API branchées mobile Détecteur de proximité Vibration API Utilisation du gyroscope du smartphone Accès à la webcam, au micro Shadow DOM Évolutions attendues

Vue générale des frameworks JavaScript

• Limites du JavaScript natif Comprendre le rôle des principaux frameworks et les technologies associées : Angular, Vue, React, Node Exemples de bases avec Angular React, philosophie et principes de fonctionnement Les tendances du marché et des projets

Cette formation Technologies Web : HTML5, CSS3, JavaScript vous propose de prendre en main de façon progressive les trois technologies « inséparables » utilisées par les développeurs front : HTML, CSS, et Javascript. Les langages sont tout d’abord présentés de manière individuelle, afin que vous puissiez bien comprendre leurs rôles ; puis, ces langages sont envisagés dans une approche globale afin d’illustrer la complémentarité de cette trilogie HTML, CSS et Javascript.

Bien entendu, les bonnes pratiques présentées sont adaptées aux différents supports (responsive design), et vous permettront de développer des applications Web pour tout type d’équipement (mobiles, tablettes, PC, portable). Nous abordons ensemble les nouveautés vastes et puissantes apportées conjointement par le HTML5, le CSS3, le puissant module CSS Grid ainsi que les nouvelles versions de JavaScript et AJAX.