Formation HTML5 et JavaScript

HTML5/JavaScript : développer des applications Web

à distance

Dans cette formation, vous apprendrez à créer des applications Web côté client avec les standards HTML5, CSS3 et JavaScript. Vous étudierez également les différentes approches d’adaptation de l’interface graphique et de l’ergonomie en fonction de l’appareil utilisé (smartphone, tablette, PC) et intégrerez des appels vers des Services Web de type REST et WebSocket à votre application.

icon Contenu

Introduction

  • Vue d’ensemble de la création de contenus pour le Web
  • Langages HTML, CSS et JavaScript
  • Organisation d’un site Web
  • Principaux navigateurs et niveau de compatibilité aux nouveautés HTML5 et CSS3
  • Outils de création de contenus pour le Web

Notions fondamentales du langage HTML5

  • Syntaxe XML
  • Vue d’ensemble des balises HTML
  • Attributs XML, HTML et événements
  • Structure du document HTML
  • Eléments d’entête

Notions de base de la mise en forme en CSS

  • Création et intégration d’une feuille de style CSS
  • Sélecteurs CSS simple
  • Héritage et cascades
  • Couleurs et Unités de mesures : px, in, %, em
  • Sélecteurs CSS3

Intégration et mise en forme de contenus simples

  • Gestion du texte, des paragraphes et des listes
  • Gérer les espaces et les sauts de lignes
  • Affichage en ligne ou en bloc
  • Dimensions et marges
  • Bordures et Fonds

Structure fluide et positionnement

  • Eléments conteneurs : nav, section, main, header, footer
  • Unités avancées : %, vh, vw, calc()
  • Dimensionnement fluide et marges
  • Positionnements relatifs et absolus
  • Habillage et débordements

Création de tableaux

  • Elément Table
  • Eléments ligne et cellule
  • Mise en forme d’un tableau

Création de formulaire HTML5

  • Structurer le formulaire avec les éléments Form, FieldSet et Label
  • Ajouter des éléments Input
  • Créer des listes de valeurs pour les éléments Input
  • Afficher des informations avec les éléments Output, Progress et Meter
  • Mettre en forme et valider un formulaire
  • Ajouter des boutons de contrôle

Responsive Web Design

  • Introduction
    • Principes fondamentaux
    • Approche Mobile First
  • Résolutions d’écrans et Media Queries
    • Résolutions et densités des principaux smartphones et tablettes
    • Viewport et Zoom
    • Critères d’adaptation (width, height, device-width, orientation, etc.)

Positionnement à base de « Flexbox »

  • Affichage « Flexbox »
  • Axe principal et axe transversal
  • Répartition et alignement des éléments
  • Dimensions de base, agrandissements et réductions
  • Ordonnancement des éléments

Fondamentaux du langage JavaScript

  • Fonctions
  • Tableaux et Objets
  • Fonctions anonymes et Encapsulation
  • Objets
  • Propriété prototype
  • Nouveautés ECMAScript 6

Interagir avec le DOM

  • Rechercher les éléments avec les fonctions querySelector() et querySelectorAll()
  • Parcourir le DOM
  • Modifier la présentation et le contenu du DOM
  • Modifier la structure du document
  • Intercepter les événements avec la fonction addEventListener()

Requête AJAX avec XMLHttpRequest

  • Définition d’une API REST
  • L’objet XMLHttpRequest2
  • Configurer une requête AJAX
  • Format d’échange JSON
  • L’événement progress

API Fetch et objets Promise

  • Les requêtes Fetch
  • L’objet Promise
  • Synchronisation des traitements et des requêtes

Communication temps réel

  • API WebSocket
  • Ouverture et fermeture de la connexion
  • Emettre des messages
  • Recevoir des messages

Travaux pratiques

  • Création d’un site Web par étapes en respectant l’enchainement des modules théoriques
    • Structure HTML de la page
    • Ajout de contenus simples, titres, listes, images
    • Mise en place de liens de navigation entres les pages
    • Ajout d’un tableau de données HTML
    • Création d’un formulaire HTML
  • Mise en forme du site Web en CSS
    • Mise en forme des éléments texte
    • Mise en page et positionnement des contenus
    • Mise en forme du menu de navigation
    • Habillage du tableau de données
    • Mise en forme du formulaire
    • Conception de pages Responsives en utilisant les principales techniques CSS : structure fixe, structure fluide à base de « Flexbox », structure fluide à l’aide de « Media Queries »
  • Création de classes métiers en JavaScript
    • Création d’objets métiers à l’aide d’un formulaire
    • Affichage des données dans un tableau HTML
  • Appeler des Services Web
    • Charger les données de la page aves les différentes sortes de Services Web : XMLHTTPRequest, Fetch API, WebSocket

icon Compétences visées

  • Construire des pages Web en HTML5
  • Habiller et mettre en forme des pages Web avec CSS3
  • Créer des formulaires avancés
  • Créer des tableaux de données
  • Créer des menus de navigation
  • Utiliser les différentes techniques CSS de positionnement et dimensionnement pour adapter la présentation aux différents appareils (smartphone, tablette, PC)
  • Parcourir et modifier la structure d’une page en JavaScript
  • Gérer des événements utilisateur
  • Intégrer des appels à des Services Web REST et WebSockets en JavaScript

icon Méthodologie

Depuis votre domicile ou votre entreprise. Vous rejoignez un environnement de formation en ligne, à l’aide de votre ordinateur, tout en étant éloigné physiquement du formateur et des autres participants. Vous êtes en totale immersion avec le groupe et participez à la formation dans les mêmes conditions que le présentiel.

En début et en fin de formation, les stagiaires réalisent une auto-évaluation de leurs connaissances et compétences en lien avec les objectifs de la formation. L’écart entre les deux évaluations permet ainsi de mesurer leurs acquis.

icon Public & Prérequis

Cette formation s’adresse aux concepteurs/développeurs, intégrateurs Web.

PrérequisConnaître les notions fondamentales de la programmation (Algorithmie).

icon Titre obtenu

Vous recevez une attestation de suivi de cours CPI Formations à la fin de cette formation.

Intervenant

Formateur informatique

Intervenant de la formation

Professionnel de l'informatique et de la pédagogie
Formateur informatique

Intervenant de la formation

Professionnel de l'informatique et de la pédagogie

La formation est animée par un professionnel de l’informatique et de la pédagogie, dont les compétences techniques, professionnelles et pédagogiques ont été validées par des certifications et/ou testées et approuvées par les éditeurs et/ou notre équipe pédagogique. Il est en veille technologique permanente et possède plusieurs années d’expérience sur les produits, technologies et méthodes enseignés. Il est présent auprès des stagiaires pendant toute la durée de la formation.

Prochaines sessions

icon Dates

icon Prix

icon Lieu

Dates
15/11/2021 – 19/11/2021
inscriptions ouvertes
35 périodes de 60 minutes (5 jours de formation)

⌚ Horaire : 9h00 – 17h30

Prix
CHF 2'490
Lieu
À distance
Détails
Dates
07/03/2022 – 11/03/2022
inscriptions ouvertes
35 périodes de 60 minutes (5 jours de formation)

⌚ Horaire : 9h00 – 17h30

Prix
CHF 2'490
Lieu
À distance
Détails

icon Planifiez votre propre session.

Vous êtes une entreprise ? Vous êtes un particulier ? Nous nous tenons à votre disposition pour étudier la mise en place d'une formation sur mesure adaptée à vos besoins.

Plus d'informations link icon

HTML5/JavaScript : développer des applications Web

Questions et pré-inscription

Claudia vous conseille et répond à vos questions sur ce cours

026 305 27 64 link icon
claudia.magne@cpi.ch link icon