Formation Technologies Web : HTML5, CSS3, JavaScript


  • HTML, CSS, JAVASCRIPT, HTTP, BOOTSTRAP, CSS GRID, AJAX...
REFERENCE
 
 
IJSO1B
DUREE
 
 
5 jours
TARIFS
 
 
2675 € HT
Niveau : Intermédiaire
Classe à distance: Possible

Vous pouvez suivre cette formation en direct depuis votre domicile ou votre lieu de travail. Plus d'informations sur notre solution de classe à distance...

OBJECTIFS :
 

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.

Concrètement, à l'issue de cette formation Technologies Web : HTML5, CSS3, JavaScript vous serez capable de :

  • 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 navigateur (Ajax)
  • Proposer des applications hors ligne (mobile, tablette)
PRÉ-REQUIS :
 

Des connaissances générales du web sont nécessaires pour suivre ce cours Technologies Web : HTML5, CSS3, JavaScript.
Il faut également connaître les bases de la programmation (variables, tests, boucles, fonctions, etc.) pour la partie JavaScript.

PUBLIC :
 

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

PROGRAMME :
 

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

S'INSCRIRE À CETTE
FORMATION TECHNOLOGIES WEB : HTML5, CSS3, JAVASCRIPT
Cliquez sur une date pour vous inscrire
Information pratiques sur
LA FORMATION
Lieu de la formation Paris - LA DEFENSE
Nous contacter 01 43 34 90 94
CETTE FORMATION SUR-MESURE Ce cours est réalisable en intra-entreprise, dans vos locaux ou nos salles de cours CONTACTER NOTRE SERVICE INTRA
D'autres formations
SUR LE MÊME THÈME

3 j

 
Node.js est une approche performante et non-sequentielle, permettant de développer très facilement des applications écrites en Javascript, mais côté...

3 j

 

Web - Digital

Node.js avancé
Node.js est un projet open-source reposant sur le moteur V8 de Chrome. Il permet d'exécuter du code JavaScript côté serveur, contrairement à ce que l'on a...

3 j

 
Si vous êtes perdu face aux nombreux frameworks JavaScript modernes, Vue.js est la réponse à la complexité grandissante des solutions existantes. Puissant, rapide et...

3 j

 

Web - Digital

ExtJS 4
Cette formation ExtJS 4 vous permettra de développer des applications Web riches (RIA) et interactives pour mobiles ou Desktop. Ce standard du développement d'application Web...
Plus de formations sur le même thème

Des questions ?

ON VOUS RAPPELLE

 

0

Formations
Informatique
et Management
en ligne à ce jour

+ 0

Stagiaires dans nos
salles de cours sur
l'année

0%

De participants
satisfaits ou très
satisfaits de nos
formations

0

Formateurs experts
validés PLB