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 vous montrer comment créer une liste avec vignette en utilisant HTML5 et jQuery Mobile. L'objectif est de rendre les éléments de la liste cliquables, en rendant toute la vignettes (image, titre et description) interactives. Pour ce faire, nous allons utiliser une balise A pour englober l'ensemble des éléments de la liste. Grâce à la DTD de HTML5, il est permis d'inclure des balises de type bloc comme H3 et IMG à l'intérieur d'une balise A.
Nous débuterons en modifiant la DTD pour s'assurer que notre document est bien en HTML5. Ensuite, nous intégrerons une image de 75 pixels de large, un titre de troisième niveau (H3) pour nommer l'élément de la liste, un paragraphe pour ajouter une description, et nous clôturerons ces éléments avec la balise A. Nous finaliserons en utilisant le DataInsetTrue pour améliorer l'esthétique de la liste.
Après avoir suivi cette leçon, vous serez capable de créer des listes cliquables avec des vignettes qui améliorent l'interaction utilisateur et l'attrait visuel de vos pages web. Cette compétence est particulièrement utile pour les développeurs web souhaitant enrichir leurs interfaces utilisateur avec des listes interactives et visuellement attrayantes.
Objectifs de cette leçon
Les objectifs de cette vidéo sont:
- Comprendre comment créer une liste cliquable avec vignette en HTML5 et jQuery Mobile.
- Savoir intégrer des images, titres et descriptions au sein d'une balise A.
- Apprendre à utiliser la DTD HTML5 pour permettre l'encapsulation des éléments de type bloc.
- Configurer les attributs jQuery Mobile pour améliorer l'aspect visuel des listes.
Prérequis pour cette leçon
Pour suivre cette leçon, vous devez avoir des connaissances de base en HTML5 et jQuery Mobile. Il est également recommandé de savoir manipuler les balises et attribuer des styles CSS de base.
Métiers concernés
Cette compétence est surtout utile pour les développeurs web, les intégrateurs, et les web designers. Elle peut également être pertinente pour les chefs de projet web et les consultants UX/UI afin de mieux comprendre les nécessités de l'implémentation front-end lors des phases de design et de développement.
Alternatives et ressources
En lieu et place de jQuery Mobile, vous pouvez envisager d'utiliser d'autres librairies telles que Bootstrap ou Foundation pour créer des listes interactives et visuelles. Des fonctionnalités similaires peuvent être obtenues avec Vue.js ou React pour une approche plus orientée composants.
Questions & Réponses
Je m'abonne