FORMATION Développement de site WEB pour mobiles multi plate-formes (Iphone, Android, BlackBerry, …)
Objectifs de la formation Site web Mobile
Cette formation Site Web Mobile vous permettra de réaliser des sites WEB pour mobiles uniquement avec des technologies standards comme HTML 5, CSS 3, ou Javascript. L’utilisation de ces langages et de la bibliothèque iUI, dans un contexte mobile, ainsi que la prise en main des principaux Framework JavaScript du moment comme Jquery Mobile ou Sencha Touch vous permettront de développer un site WEB professionnel dans son architecture et riche dans sa présentation.
Le respect des normes et l’application des bonnes pratiques vous permettront de proposer un site parfaitement compatible avec les possibilités des standards comme iPhone, iPod, iPad, Android, Symbian, Blackberry, etc. qui proposent un navigateur webkit.
A qui s'adresse la formation Site web Mobile
Cette formation Développement mobile s'adresse aux développeurs et aux chefs de projets
Pré-requis :
Connaître au moins un langage de programmation et avoir des notions de bases sur HTML, CSS, JavaScript et XML. La première journée est consacrée aux connaissances essentielles sur ces langages.
Contenu de la formation Site web Mobile
Concepts et architecture d'un site WEB pour mobile
Bien comprendre le rôle de chaque technologie (HTML, XML, JavaScripts, CSS, ...)
Qu'entend-on par « Application Ajax » (Asynchronous Javascript and XML) ?
Les différences entre un site « classique » et un site pour mobile
Tirer parti des possibilités d'un mobile par rapport au PC (téléphonie, GPS, ...)
Qu’est-ce qu’un navigateur Webkit ?
Rappels syntaxiques et compléments (HTML, JavaScript, CSS)
Gérer des textes, Images, Liens, Listes, Blocs en HTML5
Bonnes pratiques à propos de la présentation des données (CSS )
L'identification et le regroupement d'éléments (class, id, span, div)
Maîtriser le positionnement avec le modèle des boîtes dans CSS (margin, border, padding, bottom, top)
Empiler les images (z-index, l'exemple du jeu de cartes)
Valider son document comme conforme aux standards du Web (W3C)
Rappels syntaxiques sur JavaScript (variables, tests, boucles, fonctions)
La représentation d'une page HTML sous forme d'arbre (DOM : Document Object Model)
Afficher et interagir dynamiquement avec l'information présentée (DOM et JavaScript, événements : onclick, onmouseover, ...)
Les transformations CSS (webkit-xxxx, rotation, translation, zoom, inclinaison, ...)
HTML5, pour profiter au maximum du web
Doctype, namespaces, encoding
Sections, entête, pied de page, navigation, articles...
Eléments sémantiques
Dates et temps
Dessiner en JavaScript : l'élément canvas
L'élément vidéo
Communication : Sockets et Message provenant du serveur (push)
Géolocalisation
Base de données locale
Utilisation de cache local
IUI une bibliothèque CSS pour mobile
Un premier site mobile pour iPhone et Android
Comment disposer du « style » iPhone pour d’autres mobiles ?
Fenêtres et navigation dans les pages
Afficher des menus sous forme de listes
Proposer le clavier virtuel de saisie à l'utilisateur
Dialoguer avec l'utilisateur avec la class CSS dialog (bouton, fenêtre superposée, ...)
Alimenter une base de données grâce aux formulaires
Améliorer l'affichage grâce aux extensions iUI (listes de sélection, calendrier, ...)
La gestion des thèmes (theme-switcher)
IUI côté JavaScript
Améliorer encore nos sites avec la partie Javascript de iUI
Maîtriser la gestion des liens et de leurs attributs (href, type, target, submit, cancel, ...)
Affichage de menus, saisie avec JavaScript
Navigation rapide dans les pages (showPageByID, goBack)
Précisions sur les méthodes GET et POST
Comprendre les différentes formes d'appels d'une page HTML (showPageByHref, ajax)
Insérer une ou plusieurs fenêtres en fin de page HTML (insertPages)
Récupérer l'élément DOM associé à la fenêtre courante (getSelectedPage)
Bien utiliser le DOM (addClass, removeClass)
Exemples :
- Utilisation de liens différents selon le contexte
- Récupération d'information suite à la saisie dans un formulaire
Evénements associés aux fenêtres (load, unload, focus, blur, ...)
JQuery Mobile : un framework optimisé et dédié aux mobiles
Les apports de Jquery Mobile
JQuery : syntaxe , sélecteurs, évènements
Fenêtres
Barres d’outils
Formulaires
Listes (avec et sans séparateurs)
AJAX
Créer son propre design
Gérer les tablettes
Intégrer du CSS3 dans une application JQuery Mobile
Listes dynamiques avec appels AJAX
Dynamiser son site avec JQuery Mobile
Présentation de Sencha Touch : un framework HTML5 pour mobile
Sencha Touch et les autres frameworks
Compatibilité (OS, mobiles, écrans, navigateurs, …)
Le modèle MVC avec Sencha Touch
Les containers
Les composants
Les Box, Cards, Panels, Tabs
Barres d’outils, Icones, Boutons
Les Formulaires : création, validation, soumission
Les sliders
Les appels réseaux avec Sencha Touch
Manipulations XML et JSON
Drag & Drop
Le stockage des données (Ext.data.Model, Ext.data.Store)
ComplémentsLa géolocalisation (Ext.Util.Geolocalisation)
Comment faire en sorte que son site fonctionne avec tous les navigateurs mobiles ?Comparaison entre une application native et sa version « distante »
Gestion du GPS
Comment utiliser un son ?
Bien comprendre le rôle de chaque technologie (HTML, XML, JavaScripts, CSS, ...)
Qu'entend-on par « Application Ajax » (Asynchronous Javascript and XML) ?
Les différences entre un site « classique » et un site pour mobile
Tirer parti des possibilités d'un mobile par rapport au PC (téléphonie, GPS, ...)
Qu’est-ce qu’un navigateur Webkit ?
Rappels syntaxiques et compléments (HTML, JavaScript, CSS)
Gérer des textes, Images, Liens, Listes, Blocs en HTML5
Bonnes pratiques à propos de la présentation des données (CSS )
L'identification et le regroupement d'éléments (class, id, span, div)
Maîtriser le positionnement avec le modèle des boîtes dans CSS (margin, border, padding, bottom, top)
Empiler les images (z-index, l'exemple du jeu de cartes)
Valider son document comme conforme aux standards du Web (W3C)
Rappels syntaxiques sur JavaScript (variables, tests, boucles, fonctions)
La représentation d'une page HTML sous forme d'arbre (DOM : Document Object Model)
Afficher et interagir dynamiquement avec l'information présentée (DOM et JavaScript, événements : onclick, onmouseover, ...)
Les transformations CSS (webkit-xxxx, rotation, translation, zoom, inclinaison, ...)
HTML5, pour profiter au maximum du web
Doctype, namespaces, encoding
Sections, entête, pied de page, navigation, articles...
Eléments sémantiques
Dates et temps
Dessiner en JavaScript : l'élément canvas
L'élément vidéo
Communication : Sockets et Message provenant du serveur (push)
Géolocalisation
Base de données locale
Utilisation de cache local
IUI une bibliothèque CSS pour mobile
Un premier site mobile pour iPhone et Android
Comment disposer du « style » iPhone pour d’autres mobiles ?
Fenêtres et navigation dans les pages
Afficher des menus sous forme de listes
Proposer le clavier virtuel de saisie à l'utilisateur
Dialoguer avec l'utilisateur avec la class CSS dialog (bouton, fenêtre superposée, ...)
Alimenter une base de données grâce aux formulaires
Améliorer l'affichage grâce aux extensions iUI (listes de sélection, calendrier, ...)
La gestion des thèmes (theme-switcher)
IUI côté JavaScript
Améliorer encore nos sites avec la partie Javascript de iUI
Maîtriser la gestion des liens et de leurs attributs (href, type, target, submit, cancel, ...)
Affichage de menus, saisie avec JavaScript
Navigation rapide dans les pages (showPageByID, goBack)
Précisions sur les méthodes GET et POST
Comprendre les différentes formes d'appels d'une page HTML (showPageByHref, ajax)
Insérer une ou plusieurs fenêtres en fin de page HTML (insertPages)
Récupérer l'élément DOM associé à la fenêtre courante (getSelectedPage)
Bien utiliser le DOM (addClass, removeClass)
Exemples :
- Utilisation de liens différents selon le contexte
- Récupération d'information suite à la saisie dans un formulaire
Evénements associés aux fenêtres (load, unload, focus, blur, ...)
JQuery Mobile : un framework optimisé et dédié aux mobiles
Les apports de Jquery Mobile
JQuery : syntaxe , sélecteurs, évènements
Fenêtres
Barres d’outils
Formulaires
Listes (avec et sans séparateurs)
AJAX
Créer son propre design
Gérer les tablettes
Intégrer du CSS3 dans une application JQuery Mobile
Listes dynamiques avec appels AJAX
Dynamiser son site avec JQuery Mobile
Présentation de Sencha Touch : un framework HTML5 pour mobile
Sencha Touch et les autres frameworks
Compatibilité (OS, mobiles, écrans, navigateurs, …)
Le modèle MVC avec Sencha Touch
Les containers
Les composants
Les Box, Cards, Panels, Tabs
Barres d’outils, Icones, Boutons
Les Formulaires : création, validation, soumission
Les sliders
Les appels réseaux avec Sencha Touch
Manipulations XML et JSON
Drag & Drop
Le stockage des données (Ext.data.Model, Ext.data.Store)
ComplémentsLa géolocalisation (Ext.Util.Geolocalisation)
Comment faire en sorte que son site fonctionne avec tous les navigateurs mobiles ?Comparaison entre une application native et sa version « distante »
Gestion du GPS
Comment utiliser un son ?
Formation Developpement web Mobile
-Formation Creation site web mobile
-Formation Site Web iPhone
-Formation Site Web iPhone iPad
