Accueil > Technologies WEB > Technologies Web : HTML5, CSS3, JavaScript
Formation #TWC67

Formation Technologies Web : HTML5, CSS3, JavaScript

Durée : 5 jours

Code : TWC67


Prochaines dates programmées :

Du 10 au 14 Juin 2024

Du 23 au 27 Sept. 2024

Du 09 au 13 Déc. 2024

Fin d'Inscription :
Le Bulletin d'Inscription doit être rempli, cacheté, signé et envoyé par email : Au minimum 15 JOURS OUVRÉS avant la date de formation.
Si vous avez un besoin URGENT et que vous souhaitez une date de formation plus proche que les sessions programmées (minimum 15 à 20 jours ouvrés à date de votre demande)

Objectifs

  • Créer des pages en HTML5 et utiliser les nouvelles balises
  • Mettre en page et en forme avec CSS3
  • Utiliser les nouvelles API JavaScript
  • Gérer la mobilité et maitriser le responsive web design
Programme
Introduction
  • Le processus de normalisation : le W3C et le WHATWG
  • 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

Partie 1 : HTML5

Les fondamentaux
  • La syntaxe HTML
  • Le nouveau Doctype
  • Encodage des caractères
  • Le support navigateur
  • Créer un template de base réutilisable pour tous les projets
HTML5 : Structurer un document
  • Évolution de l’imbrication des balises : disparition des notions de inline et block
  • Les nouvelles balises : header, footer, structure, aside, nav, hgroup, etc
  • Les balises obsolètes : center, font, frame, acronym, etc
  • Structurer une page avec les nouvelles balises
Les listes
  • Numérotées, à puces, imbriquées
  • Les listes de définition
Les tableaux
  • Cellules de tableau et fusion des cellules
  • Gestion de la taille du tableau
  • En-tête et légende
  • Les bordures
  • Les groupes de colonnes et de lignes
Les hypertextes
  • La balise de liens
  • Les différents types de liens : vers une autre page, dans une page, vers un site Web, de téléchargement...
  • Les Target
  • L'attribut titre
  • La couleur des liens
  • Liens et feuilles de style
Insertions d'images
  • L'insertion d'une image
  • L'espace autour d'une image
  • L'alignement d'une image
  • Couleur et image d'arrière-plan
  • L'insertion d'un lien sur une image
  • Les images réactives
Les formulaires
  • Les nouveaux champs de formulaire et leur structure
  • Les nouvelles pseudo-class CSS (valid, invalid, checked…)
  • Créer un formulaire de contact type
  • Accessibilité des éléments dynamique (ARIA)
Le multimédia
  • La balise video
  • La balise audio
  • Le ShadowDom
  • Les balises object, embed et svg
  • Conteneur (MP4, OGG, WEBM) et codec (.h264, Vorbis, Theora, VP8…)
  • Inclure une video dans une page et créer une interface de contrôle personnalisée
Graphique et dessin
  • La balise canvas
  • SVG et ses filtres
  • WebGL
  • Créer un graphique

Partie 2 : CSS3

CSS3 : Introduction & selector
  • 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)
CSS3 : Mise en forme
  • Fonction calc() et propriété box-sizing
  • Mise en forme tabulaire et multi-colonnes
  • Le modèle de boite flexible
  • Les modèles de mise en page CSS
  • La mise en page en grille CSS
  • Mise en forme d’un modèle de site vitrine
CSS3 : Responsive web design
  • Les bonnes pratiques du Responsive Web Design
  • Adaptabilité des pages et web application
  • Frameworks et librairies : iUi, Less, FitVids, Modernizr, Angular2…
  • Adaptabilité du contenu et du contenant
  • Le viewport
  • Créer une page adaptive
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)

Partie 3 : JavaScript

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 avec 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
Approche Pédagogique

Approche Pédagogique

  • Pédagogie très opérationnelle fondée sur l'alternance entre théorie et pratique
  • Cas pratiques
  • Remise d’outils
  • Echanges d’expériences
Public Cible

Personnes Visées

  • Développeurs Web
  • Chefs de projet Web
Dates

Dates

  • Du 10 au 14 Juin 2024
  • Du 23 au 27 Sept. 2024
  • Du 09 au 13 Déc. 2024
  • Fin d'Inscription :
    Le Bulletin d'Inscription doit être rempli, cacheté, signé et envoyé par email : Au minimum 15 JOURS OUVRÉS avant la date de formation.