Formation Javascript & HTML5 : SPA Niveau 1

Single Page Application (SPA) niveau 1

Aujourd’hui internet est déjà partout. Ce n’est qu’un commencement !
Découvrez les principes et les outils les plus efficaces pour construire les interfaces web des applications de demain.
A l’aide de jQuery et jQuery mobile, vous serez guidés dans la création d’un projet portant le HTML5, les CSS3 à leur excellence mais surtout totalement développé côté client en javascript.

Durée 5 jours soit 40 heures de formations de 9h30 à 18h00.

Qualité 8 stagiaires par session maximum. 1 poste Mac ou Windows par stagiaire. Support de cours accessible en ligne.

Public Développeur web, intégrateur, webdesigner ou toute personne ayant de bonnes notions de programmation (Actionscript Flash, PHP ou autre langage)

Objectifs Réaliser des webapps HTML5 + JS + CSS3 Produire une application pour terminaux mobiles

Pré-requis Maîtrise d'au moins un langage de programmation (actionscript, php, javascript, objective c ...)
Notions de programmation orienté objet.
Notions en HTML et CSS.
Avoir les notions de :
Formation HTML & CSS : l'Essentiel
Formation Javascript Initiation
Formation HTML5 & CSS3

Formation Javascript & HTML5 : SPA Niveau 1


Un exemple est développé le long de la formation.

1 - Etat du web

  • Une petite histoire des plugins
  • Plus de player, le runtime est le navigateur
  • Le navigateur has-been et les autres…
  • Le marché des touchphone et leurs navigateurs : grade A 

2 - Transférer la logique sur le client

  • Répartir la charge des webapps
  • Modèle asynchrone de données
  • Prise en compte de la bande passante
  • Architecture n-tiers

3 - Plateforme web

  • HTML (5) + CSS (3)
  • Javascript
  • Les boîtes à outils Javascript (jQuery, jQuery mobile, ...)
  • Outils de développement
  • Debogeurs
  • Utiliser les navigateurs et leurs inspecteurs de développement
  • Profiler

4 - Bibliographie

5 - Atelier création RIA jQuery mobile : 1ère étape

  • jQuery mobile, la boîte à outils de composants d'interface
  • Principes généraux : l'enrichissement progressif
  • Création page, multi-pages
  • Composants d'interface
  • Les boutons
  • Les listes
  • Les formulaires
  • Mise en page
  • Thèmes et data-themes
  • Thème roller

6 - Javascript : Révisions de la syntaxe

  • Variables locales
  • Passer par référence, par valeur
  • Types et conversion

7 - Javascript : Sujets pointus

  • Gestions événementielle du DOM
  • Fonctions anonymes et références
  • Closures et contexte d'évaluation
  • Self invoking function : les modules
  • namespaces

8 - Modèle asynchrone Javascript

  • AJAX
  • JSON
  • Modèle CRUD
  • Webservices API

9 - Javascript orienté objet

  • Object object
  • Prototype 

10 - HTML5 Pratique

11 - HTML5 Pratique : API Geolocalisation

  • Principe
  • Exemple d'utilisation

12 - HTML5 Pratique: API LocalStorage

  • Histoire de la persistance de données locale
  • Exemple
  • Sérialisation JSON

13 - JQuery : sélecteurs et DOM scripting

  • Révision des sélecteurs CSS et du parcours du DOM
  • Principe d'optimisation

14 - Outils JQuery : histoires d'$

  • $.each()
  • $.support()
  • $.extend()
  • $.data

15 - JQuery : transitions et mise en forme

  • CSS à l'exécution
  • Dimensions
  • Transitions

16 - JQuery : notions avancées et bonnes pratiques

  • Chaînage de méthode
  • Conventions de code
  • $(this)
  • Gestion multi-librairies

17 - Révisions CSS3 Media Queries

18 - Atelier création RIA HTML5 : 2ème étape

19 - Structure d'une webapp JQuery et navigation

  • Le cycle de vie des pages
  • Afficher une boîte de dialogue
  • Navigation et historique
  • Transitions

20 - API javascript jQuery mobile

  • changePage() et pageLoading()
  • silentScroll()
  • Capturer les changements d'orientations
  • Media queries
  • jqmData()

21 - Atelier création d'une RIA HTML5 : 3ème étape

  • Finalisation de l'application