Ce livre sur le développement d’applications Web mobiles avec jQuery Mobile s’adresse aux développeurs web qui souhaitent proposer au plus grand nombre leurs applications Web parfaitement adaptées aux spécificités des périphériques mobiles.
Livre jQuery Mobile – HTML5, CSS3, JavaScript – Développez vos applications Web mobiles
Présentation
L’auteur effectue un bref récapitulatif sur HTML5. Puis il présente les différentes API JavaScript traitées dans cet ouvrage ainsi que les API en cours de développement.
L’auteur termine cette présentation avec des outils conseillés comme des éditeurs de code et des logiciels de debug.
Introduction
L’auteur commence par une introduction au développement sur le web mobile.
Caractéristiques du Web mobile
Le Web mobile représente l’accès au World Wide Web à partir de périphériques comme les smartphones et les tablettes.
Il s’agit d’un marché en plein développement, de plus en plus de personnes accèdent au web mobile avec leurs smartphones ou tablettes.
L’auteur présente les fonctionnalités communes des périphériques : le mode portrait, le tactile, le clavier physique et virtuel.
Viens ensuite, le comportement classique de l’internaute et un résumé des contraintes du développement sur mobile.
Pré-requis et outils
Cet livre s’adresse aux développeurs experts dans le domaine de la conception d’applications web destinées aux périphériques mobiles, smartphones ou tablettes. Vous devez avoir de bonnes bases en HTML5 et CSS3.
Puis l’auteur vous conseille les logiciels et navigateurs nécessaires ainsi que des outils de débogage.
Cette partie vous explique, dans le détail, comment tester vos applications à destination du web mobile.
Vous aurez plusieurs liens et logiciels avec le retour de l’auteur :
Les sites professionnels dédiés
L’installation des SDK
es émulateurs en ligne
Les émulateurs à installer
Les navigateurs de bureau adaptés
Les validateurs Web Mobile
Applications natives ou applications Html5
La première approche pour développer une application mobile est de concevoir une application native. Cela se résume par la conception d’une application pour iPhone et/ou une application pour Android.
Ces applications natives sont conçues dans le langage de programmation utilisé pour le système d’exploitation respectif, soit Objective-C, le langage utilisé pour écrire les applications natives Mac OS (iPhone et iPad), et Java pour les applications Android. Les deux systèmes sont très différents et incompatibles avec l’autre. Ainsi, une application pour iPhone ne fonctionne pas sous Android.
La seconde approche consiste par créer une application web HTML5 optimisée pour les smartphones, réalisée avec HTML5, CSS3 et les API JavaScript HTML5.
Puis l’auteur détaille les avantages et inconvénients d’une application native.
Les bonnes pratiques du Web mobile
Le W3C a développé une recommandation avec des directives dpour le développement de sites et applications mobiles.
La première directive est de créer pour un seul Web, soit de créer du contenu qui fonctionne sur un maximum de terminaux mobiles pour répondre aux besoins du plus grand nombre.
L’auteur fournit donc une liste de bonnes pratiques pour développer sur le web mobile :
Une URL concise
Le ciblage de la dimension d’écran avec les Media Queries
La verticalisation des pages
L’efficacité du contenu
Une navigation intuitive
L’optimisation des liens pour l’utilisation tactile
L’optimisation des images
Éléments utiles du Html5
Dans cette partie, l’auteur vous explique pourquoi et comment utiliser la balise meta viewport.
Vous avez aussi une liste de balises HTML5 à éviter. Ainsi que plusieurs exemples pour utiliser les nouveaux formulaires HTML5
Améliorer le design avec les CSS3
Cette fois, l’auteur vous explique précisément comment utiliser une partie du potentiel des nouveautés CSS3.
Vous verrez entre autres :
Les bords arrondis
Les ombres
Les dégradés de couleur
La présentation en colonnes (column)
Le traitement des longs intitulés
La césure automatique
Les transformations
Les transitions
L’ajustement de la taille des caractères
Les applications JavaScript Html5
Une partie très complète pour combiner les nouveautés HTML5 avec le JavaScript. Vous recevrez plusieurs exemples de code source commentés.
Voici un résumé de ce que vous allez apprendre à implémenter dans vos applications mobiles :
La géolocalisation
Le stockage de données en local
La consultation en mode déconnecté
Base de données SQL
Présentation de jQuery Mobile
jQuery Mobile est un framework optimisé pour la création d’interfaces pour les applications Web sur des périphériques tactiles du marché, smartphones ou tablettes.
jQuery est un framework JavaScript qui facilite l’écriture du code JavaScript. Il inclut plusieurs fonctionnalités comme les sélecteurs, la gestion d’événements DOM 2, Ajax et compatible avec les différents navigateurs.
jQuery Mobile est un sous-module de jQuery qui permet de développer des interfaces pour des applications Web mobiles compatibles avec la plupart des smartphones et tablettes.
L’auteur présente aussi les points forts de jQuery Mobile avec une liste de toutes les plateformes prises en compte.
Puis il présente les attributs data- du Html5, pourquoi et comment les utiliser, c’est important pour comprendre le fonctionnement de jQuery Mobile.
Une première application avec jQuery Mobile
Tout d’abord, vous allez mettre en place jQuery Mobile sur votre site, soit par CDN ou par hébergement sur votre nom de domaine.
Ensuite, vous allez créer votre première page avec jQuery Mobile. Puis l’auteur vous donne un modèle à utiliser pour les exercices pratiques du livre.
Pour terminer, vous recevez des liens vers la documentation (en anglais et en français).
Les pages
Dans cette partie, vous entrez réellement dans le vif du sujet. A savoir, utiliser le potentiel du Framework jQuery Mobile pour développer des sites web pour les périphériques mobiles.
Une page Html peut contenir un en-tête (header), un contenu (content) et un pied de page (footer). jQuery Mobile permet aussi de créer plusieurs pages dans une seule page HTML. Cela le préchargement de multiples pages au chargement du document HTML. Les pages de ce document multipage s’afficheront alors instantanément lorsqu’elles seront réclamées, plus de temps d’attente !
jQuery Mobile offre une option pour améliorer la réactivité de votre application en permettant de précharger les pages externes. Ces pages externes sont instantanément disponibles lorsque l’utilisateur clique sur le lien correspondant.
Voici ce que couvre l’auteur avec cette partie :
Un fichier de page unique
Un fichier de pages multiples
Le titre de la page et son rôle
Les liens entre les pages
Le préchargement des pages
La mise en cache des pages
Les thèmes graphiques de jQuery
Les transitions de pages
Les boutons
Toutes les balises de type boutons : <button>, <input type= »button »>, <input type= »submit »>, <input type= »reset »> sont automatiquement stylisées par jQuery Mobile.
L’auteur vous enseigne comment utiliser les fonctionnalités « button » de jQuery Mobile :
Ajouter un bouton
Changer les liens en boutons
Ajuster la largeur des boutons
Ajouter une icône aux boutons
Aligner des boutons
Grouper plusieurs boutons
Une présentation réduite des boutons
Styler les boutons
Les barres d’outil
Dans cette partie, vous apprendrez toutes les subtilités pour créer des barres de navigation efficaces, soit dans le header de la page ou dans le footer, ou les deux !
C’est parti pour découvrir les barres d’outils jQuery Mobile :
Ajouter une barre d’en-tête
Ajouter une barre de pied de page
Ajouter une barre de navigation
Positionner les barres d’outils
Les fenêtres de dialogue
Les fenêtres de dialogue fournissent des informations pour l’utilisateur. Comme les fenêtres d’alerte JavaScript, elles bloquent la navigation. Ce n’est qu’après une pression sur l’un de leurs boutons que l’utilisateur peut continuer à utiliser l’application.
Les pop-ups sont une nouveauté de jQuery Mobile. Ils reprennent le concept des fenêtres de dialogue mais de façon plus discrète.
L’auteur vous apprend comment ajouter simplement et rapidement des Pop Up 2.0 dans vos applications mobiles.
Les listes
Il s’agit d’une partie très complète sur l’utilisation des listes du Framework jQuery Mobile. Vous allez tout savoir ou presque !
Les listes représentent un élément essentiel dans la structuration d’une page HTML. Elles sont très pratiques avec les périphériques mobiles pour afficher des données ou des menus de navigation.
L’auteur vous apprendre comment :
Créer une liste non numérotée
Créer une liste numérotée
Créer des listes imbriquées
Ajouter des séparateurs dans la liste
Ajouter des séparateurs dans les éléments de liste
Formater le contenu des listes
Créer des listes multiples dans une page
Liste de formulaires
Ajouter des vignettes
Ajouter des icônes
Ajouter des bulles de comptage
Ajouter un filtre de recherche
Styler les listes
Les formulaires
C’est au tour des formulaires 😉
La conception de des formulaires avec jQuery Mobile est relativement aisée. Il suffit de reprendre les balises des formulaires HTML5.
A travers une multitude d’exemples de codes source commentés, vous découvrirez comment ajouter des formulaires plus ou moins complexes dans vos applications mobiles.
Voici comment créer :
Les formulaires sous jQuery Mobile
La ligne de texte
La zone de texte
La ligne de mot de passe
Les boutons de formulaire
La liste de sélection
Les boutons radio
Les cases à cocher
Les curseurs du Html5
Les boutons de permutation
Le bouton de recherche du Html5
Les autres formulaires du Html5
Une présentation compacte des formulaires
Une présentation native des formulaires
Éléments de présentation
jQuery Mobile propose un système de tableaux avec deux, trois, quatre ou cinq colonnes.
Vous allez aussi apprendre comment créer des menus déroulants et des menus accordions !
Toujours à travers de nombreux exemples de code source commentés, l’auteur vous guide, pas à pas, pour ajouter de nouvelles cordes à votre arc.
D’autres thèmes pour jQuery Mobile
Dans cette partie, l’auteur vous apprend comment personnaliser un thème jQuery Mobile. Et vous saurez aussi comment créer rapidement un nouveau thème jQuery Mobile.
L’API jQuery Mobile
A travers plusieurs paragraphes, vous découvrirez comment configurer jQuery Mobile. Et ensuite, vous passerez à l’utilisation des événements jQuery Mobile. Pour terminer par l’apprentissage des méthodes et propriétés du framework jQuery Mobile.
Annexe
Le framework jQuery Mobile utilise de nombreux attributs data- pour structurer les éléments des pages et pour personnaliser et styler les composants de celles-ci.
Vous saurez la tâche affecté à chaque attribut data- de jQuery Mobile.
Conclusion
Ce livre conviendra parfaitement aux développeurs confirmés en développement HTML5 / CSS3 qui souhaitent créer des applications web mobiles avancées.
Les différentes fonctionnalités de jQuery Mobiles sont très détaillées avec de nombreux exemples de code. Ce livre très complet, vous permet d’aller droit au but pour utiliser rapidement le potentiel de jQuery Mobile.
De plus, tous les exemples cités dans le livre sont en téléchargement sur le site www.editions-eni.fr.
Cependant, quelques exemples de code ne fonctionnent plus, ce qui est vraiment dommage.
Sinon, avec les informations contenus dans ce livre, vous pouvez commencer la création de sites web dynamiques et interactifs pour les périphériques mobiles.
Commandez ce Livre jQuery Mobile – HTML5, CSS3, JavaScript – Développez vos applications Web mobiles
