Construire une application Web HTML5 - Développeurs

Vous êtes ici

Présentation: 

Le client Web prend de plus en plus d'importance dans la construction des applications actuelles. Les développeurs confirmés en Java, DotNET, framework PHP doivent aujourd'hui de plus en plus intervenir sur le poste client. Ils n'ont pas toujours les connaissances nécessaires en HTML, CSS, JavaScript pour aborder la construction d'applications Web HTML5, il devient alors nécessaire de consolider ou compléter leurs connaissances. Cette formation est faite pour eux, elle permet de voir la création d'application Web dans sa globalité en abordant les évolutions apportées par le HTML5 (HTML, CSS, JavaScript), les évolutions des outils, des pratiques, des architectures...

Cette formation permets aux participants  de découvir les applications web HTML5. La formation est illustrée par la création d'un projet concret de capture de points d'intérêt : capture de coordonnées de géolocalisation, stockage de données coté serveur en REST, stockage des données dans le navigateur...

Objectifs: 

Cette formation permet aux participants

  • de revoir rapidement les bases du HTML et CSS
  • d'acquérir les grands principes du HTML5 et du CSS3 (la syntaxe, quelques nouveaux éléments CANVAS, VIDEO... les médiaqueries)
  • de découvrir la mise en place d'un gabarit Responsive (utilisation du framework Bootstrap)
  • de découvrir l'environnement de développement avec des outils tels que Node.js, npm, bower...
  • de revoir ou d'acquérir les bases de JavaScript, jQuery,
  • de découvrir AJAX, les échanges avec le serveur (REST)
  • de découvrir des notions avancées JavaScript comme les closures, délégation d'événement, création d'objet, les modules
  • de découvrir les principales API JavaScript et en utiliser quelques unes : Geolocation, LocalStorage...
  • de découvrir quelques bases d'architecture (Template, Module AMD, loader Require.js)
Prérequis: 
Avoir une expérience en développement Java, DotNET, PHP...
Public: 
Développeurs confirmés devant aborder le développement sur le poste client, chefs de projet, architectes.
Durée: 
5 jours
Programme: 

A. Introduction

Généralités, environnement, ressources

  • Contexte général
  • Organisation des applications, architecture
  • Les langages, la place de JavaScript
  • Les contraintes de l'environnement client
    Accessibilité, portabilité, équipements (portable, tablette, mobile...), navigateurs (versions, mises à jour...)
  • L'environnement de développement : outils, éditeur, qualité du code, gestion des packages...
    les outils du navigateur,
  • L'environnement de développement avec Node.js
  • Sources d'information : savoir si cette fonctionnalité est implémentée...

Ateliers: POI (Point Of Interest), Projet Capture de points d'intérêts

  • Présentation du projet

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
  • Prise en charge pour les anciens navigateurs
    Les solutions alternatives, les solutions fallback et les polyfills

Quelques éléments HTML5

  • Les éléments de dessin Canvas et SVG
  • Les lecteurs audio, vidéo
    Les différents formats d'encodage
    Les polyfills, les sources alternatives
  • Les sections
  • Les microdatas

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: POI, Créer un tableau de données

  • Créer un document HTML
  • 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
  • Principe d'un reset CSS

Introduction au CSS3

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

Mediaqueries

  • Introduction
  • Principe des gabarits "responsive"

C. Interface Utilisateur en pratique

Introduction

  • Stratégie de mise en oeuvre. Responsive (Mobile first, Desktop first), sites dédiés...
  • Pratiques et portabilité

Présentation de quelques outils

  • Les resets CSS
  • Les grilles
  • Les pré-processeurs Less CSS, SASS...
  • Les minifiers, construire un build...

Quelques librairies et frameworks UI

  • Bootstrap, Foundation, Pure CSS, KNACSS
  • jQuery Ui, jQuery Mobile...

Introduction à Bootstrap - Framework Responsive

  • Présentation de Bootstrap, la documentation
  • Créer une grille Responsive ou fixe
    Insérer des colonnes, afficher/masquer des colonnes
  • Créer une barre de navigation, mode étendu/réduit
  • Créer un tableau de données
  • Créer un formulaire
  • Ajouter un fenêtre modale

Ateliers: POI, Créer l'interface utilisateur du projet

  • Créer un gabarit responsive pour l'application
  • Ajouter une barre de navigation
  • Créer une page pour la capture des points d'intérêts
  • Insérer et habiller un tableau de de données
  • Insérer et habiller un formulaire de capture

D. JavaScript et jQuery

Rappel sur 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
  • 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 un élément ou un attribut, modifier le contenu d'un élément
  • Manipuler les styles CSS, les classes

Ateliers: POI, Afficher des données dans un tableau HTML

  • Afficher dynamiquement des données dans un tableau HTML

Gérer événements avec JavaScript et jQuery

  • Principe des événements et des fonctions "gestionnaire d'événement"
  • Les principaux événements
  • Attacher un gestionnaire d'événement à un élément du DOM, le détacher
  • La propagation des événements
  • L'objet event
  • La délégation d'événement

Ateliers: POI, Identifier une ligne du tableau

  • Mettre en évidence les closures, la propagation des événements, la délégation d'événement
  • Ajouter des boutons au tableau de données
  • Ajouter une action pour afficher l'identifiant d'une ligne de donnée

Notions de JavaScript avancé

  • Les fonctions auto-exécutées, les espaces de nom
  • Les modèles d'objet "classes", les modules

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 échanges en REST

  • Principe de REST

Ateliers: POI, Stocker les données REST

  • Afficher dynamiquement des données distantes dans un tableau HTML
  • Tester le service REST de stockage des points d'intérêt
  • Créer un module REST d'échange avec le serveur
  • Créer un modèle d'objet "Classe" Point avec validation des données
  • Afficher, ajouter, modifier, supprimer des données
  • Créer une fenêtre modale Bootstrap d'alerte et de validation

Les formulaires avec JavaScript et jQuery

  • Les différents éléments d'un formulaire
  • Valider et soumettre un formulaire
  • La validation HTML5, les solutions alternatives

Ateliers: POI, Créer un formulaire de contact

  • Créer un formulaire de contact
  • Valider les données avec la librairie jQuery Validate
  • Transmettre les données au serveur en Ajax

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
  • Stockage en base de données (Web SQL, IndexedDB)
    Solution alternative, la librairie localforage

Application Offline Webapps

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

Ateliers: POI, Stocker les données dans le navigateur

  • Capturer un point de géolocalisation
  • Créer un module de stockage en local (localStorage) avec une interface synchrone
  • Créer un module de stockage en local avec une interface asynchrone
  • Créer un module de stockage en local asynchrone avec la librairie localforage
  • Définir un fonctionnement en mode non connecté

F. Architecture

Introduction

  • Présentation de différentes architectures
    Les applications SPA (Single Page Application) 
    Les architectures MVC, MV*, les templates
    Les frameworks AngularJS, Backbone.js

Introduction à RequireJS

  • Principe des modules AMD
  • Principe de RequireJS
  • Configuration, syntaxe d'un module

Ateliers: POI, Utiliser RequireJS

  • Réécrire le projet avec RequireJS et des modules
  • Construire un build

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.