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 35.00 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

  • Connaissez-vous l'état du web aujourd'hui (les possibilités des navigateurs, les utilisations, ...)
  • Savez-vous comment transférer un maximum d'opérations logiques côté client
  • Connaissez-vous les outils de développement et de déboggage disponibles
  • Connaissez-vous les boites à outils javascript disponible sur le web
  • Savez-vous utiliser JQuery Mobile
  • Savez-vous développer en JavaScript
  • Savez-vous développer un modèle asynchrone en JavaScript
  • Savez-vous développer en orienté objets en JavaScript
  • Savez-vous géolocaliser en HTML5
  • Savez-vous utiliser les nouvelles syntaxe avancées de JQuery
  • Connaissez-vous les bonnes pratiques avec JQuery
  • Connaissez-vous les Medias Queries

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 HTML5 & CSS3
Formation HTML & CSS : l'Essentiel

Formation Javascript & HTML5 : SPA Niveau 1

"exh3">Réaliser des webapps HTML5 + JS + CSS3 Produire une application pour terminaux mobiles


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
/srv/datadisk01/home/formation/site3