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 à créer une image de préchargement pour un site web. Nous commencerons par préparer une image PNG nommée splash.png de taille 320x460 pixels, qui sera placée dans le dossier des images du site. Cette image apparaîtra pendant le chargement de la première page (index) du site.
Pour que cette fonctionnalité fonctionne correctement, il est essentiel que l'utilisateur ait placé l'icône du site sur son bureau. Ensuite, nous utiliserons une balise link avec l'attribut rel et la valeur apple-touch-startup-image, ainsi que l'attribut href pointant vers notre image splash.png.
Nous ajouterons aussi une balise meta avec l'attribut name définissant apple-mobile-web-app-capable et la valeur yes. Cela indique au navigateur que cette icône doit se comporter comme une application mobile, ce qui permet d'afficher l'image de préchargement pendant le chargement de la page index.
Objectifs de cette leçon
Les objectifs de cette vidéo sont d'apprendre à insérer une image de préchargement sur un site web, comprendre l'utilisation des balises meta et link, et mettre en pratique ces compétences pour améliorer l’expérience utilisateur.
Prérequis pour cette leçon
Pour suivre cette vidéo, vous devez avoir des connaissances de base en HTML et CSS, et être capable de manipuler des fichiers graphiques comme les PNG.
Métiers concernés
Les compétences abordées dans cette vidéo sont particulièrement utiles pour les métiers tels que développeur front-end, designer UX/UI, et intégrateur web.
Alternatives et ressources
En alternative, vous pouvez utiliser des frameworks comme React ou Vue.js qui offrent des solutions intégrées pour gérer les images de préchargement et les écrans de démarrage.
Questions & Réponses
Je m'abonne