Introduction
Généralités sur le marché des mobiles
Rappel HTML
Rappel CSS
Notions de HTML5 et CSS3
Concevoir une webApp
Les simulateurs
Construire sa première WebApp
Vérifier et compresser
Construire une webApp avec JQuery Mobile
Annexe 1 | Notions de bande passante
Annexe 2 | Les usages
Annexe 3 | Les librairies disponibles
Conclusion
Détails de la leçon
Description de la leçon
Dans cette leçon, nous allons apprendre à réaliser une première page avec jQuery Mobile. Cette bibliothèque permet de composer et de mettre en forme des pages web facilement en utilisant des balises <div> avec des attributs spécifiques comme data-role='page'. Nous allons structurer notre page avec un en-tête, un contenu et un pied de page, en utilisant les rôles header, content, et footer. Nous verrons également comment introduire du texte à l'intérieur de la zone de contenu et comment utiliser des balises HTML telles que <h2>, <h3> et <p> pour structurer notre contenu. Enfin, nous examinerons comment utiliser une balise <meta> pour adapter la taille de la page à celle d'un appareil mobile, assurant ainsi une bonne expérience utilisateur sur différents dispositifs.
Objectifs de cette leçon
Les objectifs de cette vidéo sont :
- Apprendre à créer une structure de page avec jQuery Mobile.
- Comprendre l'utilisation des attributs data-role.
- Savoir intégrer du contenu textuel et le mettre en forme.
- Adapter une page web à la taille des appareils mobiles.
Prérequis pour cette leçon
Avoir des connaissances de base en HTML et en CSS est nécessaire pour suivre cette vidéo.
Métiers concernés
Ce tutoriel est utile pour les professionnels tels que les développeurs front-end, les intégrateurs web, et les designers UI/UX.
Alternatives et ressources
Parmi les alternatives à jQuery Mobile, on peut utiliser des frameworks comme Bootstrap ou Foundation pour créer des pages web responsives.
Questions & Réponses
<div> avec l'attribut data-role='page' est utilisée pour délimiter une page en jQuery Mobile.
header attribué à un <div> permet de créer un en-tête.
<meta> est recommandée pour définir le viewport, car elle permet d'ajuster la taille du site à celle de l'appareil mobile, offrant une meilleure expérience utilisateur.
Je m'abonne