Créer une application Web - HTML5 et Bootstrap

Vous êtes ici

Présentation: 

Le HTML5 (nom générique pour HTML5 + CSS3 + Api JavaScript) est un rouage essentiel dans la construction des applications Web, pour répondre aux nouveaux usages, prendre en compte la diversité des supports (mobiles, tablettes, portables...).

Cette formation permet aux participants d'aborder la construction d'interface utilisateur responsive avec Boostrap, de tirer parti de l'API HTML5 (capture de point de géolocalisation, manipulation de données dans le navigateur ...) pour créer une application "Capture de points d'intérêt".

Objectifs: 

Cette formation permet aux participants

  • de revoir les bases du HTML et CSS
  • d'acquérir les grands principes du HTML5 (la syntaxe, quelques nouveaux éléments CANVAS, VIDEO...)
  • de découvrir le framework Bootstrap (Mise en place d'un gabarit Responsive)
  • d'acquérir les bases de JavaScript et jQuery (Ajax)
  • de découvrir et utiliser les APIs JavaScript : Geolocation, XMLHttpRequest, LocalStorage...
Prérequis: 
Avoir une première expérience en HTML/CSS et JavaScript
Public: 
Personne en charge de la réalisation d'une application Web. Webmasters, webdesigners, personnes impliquées dans un projet Application Web...
Durée: 
5 jours
Programme: 

A. Introduction

  • Contexte général
  • Genèse du HTML5, les organismes (W3C, WhatWG),
  • La nouvelle approche Application Web
  • Les contraintes de l'environnement client
    Accessibilité, portabilité, 
    les équipements (portable, tablette, mobile...), 
    les navigateurs (versions, mises à jour...)
  • L'environnement de travail
    Éditeur, validation, outils...
  • Sources d'information : savoir si cette fonctionnalité est implémentée...

B. HTML5 et CSS3

Rappel des bases HTML

  • La syntaxe, les balises, les attributs...

Les grands principes du HTML5

  • Le Web sémantique
  • La syntaxe du HTML5
  • La déclaration DOCTYPE, l'en-tête, le corps du document, les commentaires
  • La prise en charge par les principaux navigateurs
    Les bibliothèques d'aide : Modernizr, html5shim...
    Prise en charge pour d'anciens navigateurs
  • Valider un document

Dessins avec Canvas

  • Définition de canvas
  • Définir le contexte de rendu
  • Dessiner avec Canvas, quelques exemples
  • Les solutions alternatives

Le multimédia

  • Les éléments audio, vidéo, source
  • Les différents formats d'encodage
  • Les polyfills, les sources alternatives
    Comment construire un lecteur vidéo HTML5 
    compatible avec les anciens navigateurs.

Les éléments de formulaire

  • Introduction         
  • Les nouveaux types de champs INPUT
  • Les nouveaux éléments, les attributs
  • Prise en charge par les navigateurs
  • Les solutions alternatives, framework JavaScript ...

Ateliers: Projet Capture de points d'intérêts

  • Créer un tableau pour afficher les données
  • Créer un formulaire pour capturer les données

Rappel des bases CSS

  • Principe du CSS
  • La syntaxe, les préfixes, les sélecteurs, les règles, les propriétés
  • Les principaux sélecteurs
  • Placer les déclarations de styles dans un fichier externe
  • Principe d'un reset CSS

Introduction au CSS3

  • Spécifications CSS (CSS3)
  • Nouvelles fonctionnalités diverses

Mediaqueries

  • Introduction
  • Définir une feuille styles pour un type d'équipements
  • Exemple de principe

C. Bootstrap 3.x - Framework Responsive

Introduction

  • Présentation de Bootstrap, la documentation
  • Principe d'utilisation, les classes, la personnalisation
  • Prise en compte de IE8

Créer une grille Responsive ou fixe

  • Principe d'un gabarit Responsive Mobile First
  • Les lignes et les colonnes, centrer une ligne
  • Organiser un gabarit responsive, un gabarit fixe
  • Afficher/masquer des éléments en fonction de la taille de l'écran

Ajouter un menu

  • Principe de la barre de navigation, mode étendu/réduit
  • Ajouter ou retirer des éléments au menu

Quelques éléments

  • Insérer et personnaliser des boutons, ajouter des icônes
  • Ajouter et habiller un tableau de données
  • Ajouter et habiller un formulaire
  • Ajouter une fenêtre de dialogue modale

Ateliers: Projet Capture de points d'intérêts

  • Créer un gabait responsive pour mobile
  • Créer un gabarit fixe pour Desktop
  • Ajouter une barre de navigation
  • Créer une page pour la capture des points d'intérêts
    Ajouter et habiller un formulaire de capture
    Ajouter et habiller un tableau de de données

D. Les bases de JavaScript et jQuery

Le cœur du langage

  • La syntaxe
  • Les variables et types, opérateurs, structures de contrôle
  • Les fonctions globales, fonctions personnalisées
  • Les objets du langage
    Array, Objets, Date, Math, RegExp, String, JSON...
    Manipuler les tableaux , les objets, les dates, les chaînes de caractères, le JSON...

Les objets du navigateur

  • Introduction
  • Window, Les cookies, Document, Location, Navigator, History...

Le DOM (Document Object Model)

  • Modélisation d'un document
  • Manipuler les nœuds, les attributs, les styles CSS...

Principe de jQuery

  • Introduction : intérêt et principe de jQuery
    La documentation, l'organisation, les méthodes
    Compatibilité avec les navigateurs
  • Un 1er exemple, un aperçu de jQuery, jQuery(), $()
    Importer la bibliothèque jQuery dans une page
    Les CDNs Content Delivery Network
  • Sélectionner un élément ou une collection d'éléments, les sélecteurs

Manipuler le DOM, les CSS avec JavaScript et jQuery

  • Naviguer dans le DOM
  • Manipuler le DOM
    ajouter du HTML, modifier le contenu d'un élément
    modifier les attributs d'un élément HTML
  • Manipuler les styles CSS avec JavaScript et jQuery,
    ajouter une classe, appliquer un style...

Les formulaires avec JavaScript et jQuery

  • Les différents éléments d'un formulaire
    Récupérer les valeurs
  • Valideret soumettre un formulaire

Ateliers: Projet Capture de points d'intérêts

  • Afficher dynamiquement des données JSON dans un tableau HTML

La gestion des événements avec JavaScript et jQuery

  • Principe des événements avec JavaScript
    JavaScript dans une URL, modèles "DOM 0" et DOM 2
  • Les principaux événements
  • Les méthodes JavaScript et jQuery
  • La propagation des événements
  • L'objet event, les propriétés target, currentTarget...
  • La délégation d'événement avec jQuery

Ateliers: Projet Capture de points d'intérêts

  • Ajouter des boutons au tableau de données
  • Ajouter une action pour supprimer une ligne

Les échanges Ajax - JavaScript et jQuery

  • Principe d'AJAX Asynchronous JavaScript And XML
    L'objet XMLHttpRequest
  • Requêtes synchrones et asynchrones, GET et POST
  • L'encodage, les échanges : Texte, JSON...
  • Simplifier la mise en place des échanges avec jQuery
  • Les principales méthodes jQuery

Ateliers: Projet Capture de points d'intérêts

  • Charger dynamiquement des données à afficher

E. Quelques éléments API JavaScript

Introduction

  • Présentation de quelques API        

Geo Localisation

  • Prise en charge avec un navigateur
  • Capturer des coordonnées

Stockage, persistance de données

  • Stockage d'informations dans le navigateur sessionStorage, localStorage

Application Offline Webapps

  • Principe Service worker
  • Détecter l'état du navigateur online/offline

Ateliers: Projet Capture de points d'intérêts

  • Capturer un point de géolocalisation
  • Valider les données du formulaire
  • Stocker les données en LocalStorage
  • Afficher les données de LocalStorage
  • Définir un fonctionnement en mode non connecté

F. Bilan, aller plus loin

Généralités

  • Présentation d'autres API JavaScript
  • Présentation d'outils et de techniques
    Exemple: LessCSS, Minifier JavaScript et CSS

Contact

Financement

Financement possible au titre de la formation continue. Consultez votre entreprise, votre OPCA (Organisme Paritaire Collecteur Agréé).

Intermittents du spectacle

Consultez l'AFDAS pour connaître les possibilités de financement.

En recherche d'emploi

Consultez Pôle Emploi pour connaître les possibilités de financement.

Formation en intra

Nous assurons nos formations en intra dans vos locaux. Pour cela nous nous déplaçons dans toute la France:

Bretagne, Normandie, Pays de Loire...

Rennes, St Brieuc, Quimper, Vannes, Brest, Lorient, Nantes, Angers, Caen, Laval, Tours, Poitiers, Orléans...

Formation sur mesure

Formation sur mesure en groupe ou en individuel, que vous soyez développeur, webdesigner ou débutant "total", le programme de chaque formation peut être adapté pour répondre parfaitement à vos attentes et votre expérience. Déplacement sur toute la France.