iPhone iPad Android - Sites web optimisés pour mobiles

Durée du module / 4 jours

Objectifs

A l'issue du stage, le participant saura principalement développer des sites web (réalisés en HTML, CSS et JavaScript) optimisés dans les navigateurs pour les téléphones mobiles et tablettes nouvelle génération, comme iPhone, iPad et Android.
Il est en effet incontournable aujourd'hui de penser son site Internet (affichage, ergonomie) spécifiquement pour les écrans autres que le traditionnel ordinateur.

Prérequis

Le cours se basant essentiellement sur HTML, CSS et JavaScript, quelques notions sur ces langages sont les bienvenues.

Toutefois, les parties essentielles de ces langages (c'est-à-dire utiles pour le développement de ce genre d'applications) seront revues lors de la formation, donc leur connaissance peut n'être que superficielle.

Outils

HTML/CSS, JavaScript et PhoneGap

Déroulé

Rappels HTML - Mise en oeuvre du HTML 5

Balises
Attributs
Le texte
Les images
Les liens
Les listes
Les blocs

Tirer parti des nouveautés HTML 5

Principe du Responsive Web Design :
- Adapter son site d'origine pour les différents écrans de mobiles/tablettes.

Créer des mises en page flexibles.
Adapter les images en fonction du terminal

Rappels CSS - Utilisation des CSS 3

L'arrière-plan
Le texte
La police de caractères
Les bordures
Les espacements
Le positionnement des éléments
La taille des éléments
Sélecteurs CSS
Pseudo-classes
Combinateurs

Tirer parti des nouveautés CSS 3 pour les effets graphiques.

Les media queries

Rappels JavaScript

Syntaxe de base
Variables
Boucles
Fonctions
Accès au DOM

Les nouvelles API Javascript :

Stockage permanent/temporaire de données: Web Storage
Proposer la consultation d'un site hors-ligne : Application Cache
La géolocalisation

Introduction à jQuery Mobile

Découverte du framework
Créer de quelques pages de site avec jQuery Mobile et Dreamweaver
Convertir ces pages avec PhoneGap