article(s) dans votre panier VOIR

Tuto Web App | Le viewport

  • Vidéo 37 sur 81
  • 6h54 de formation
  • 81 leçons

Un contenu flash devrait s'afficher ici. Votre navigateur ne comporte pas de plugin flash, ou il ne s'est pas correctement initialisé.

Vous pouvez télécharger le plugin flash depuis le site d'Adobe à l'adresse suivante : http://get.adobe.com/flashplayer/.

Pour accéder à la suite de cette formation, vous devez vous abonner.
previous
summary
resume
next
play
Le viewport
00:00 / 08:19
HD
fullscreen
Je m’abonne
à partir de 16,6 € / mois
  • Visionnage en ligne
  • Accès illimité à toutes nos formations
OU
J'achète uniquement
la formation
49,90€
  • Téléchargement + VOD à vie
  • Accès uniquement à cette formation

Sommaire de la formation

Détails de la formation

Dans ce tutoriel en ligne pour créer une Web App, l’auteur vous apprend le Viewport. L’objectif de cette formation est de pouvoir réaliser la première page d’un site. En premier lieu, votre première page doit comporter un en-tête. Pour cela, vous créez tout d’abord un titre. Dans votre plan de travail, vous insérez le titre puis vous enregistrez ce document dans un nouveau dossier sous le nom Index.html. Suite à cette action, vous visualisez cela dans le simulateur d’iPhone. Vous effectuez un clic maintenu sur votre dossier et vous le glissez dans le simulateur. Vous remarquez que votre page s’affiche sous une petite taille en fonction de l’affichage par défaut des sites affichés sur des smartphones. Il est à noter que la taille par défaut d’un smartphone ou d’un Android est de 980 Pixels. Cependant, vous pouvez afficher le titre sous une taille normale. Afin d’effectuer cette modification, vous ajoutez une balise de type meta dans la page html. Le but de cette balise est de pouvoir afficher la taille normale de la page suivant sa taille réelle. Vous ajoutez également un attribut content pour spécifier la taille. Vous enregistrez vos modifications puis vous le testez dans le simulateur. Vous actualisez la page de votre simulateur et le résultat est ainsi affiché. Dans ce cadre, la taille s’adapte à la taille des smartphones. Par ailleurs, vous pouvez ajouter d’autres valeurs dans cette balise en les séparant par des virgules. Cela peut concerner la taille minimum et la taille maximum. Suite à ces modifications, vous enregistrez et vous testez dans le simulateur. Vous apercevez que la taille reste la même dans le cas où vous effectuez un zoom. Pour cette dernière, vous appuyez sur la touche Alt pour afficher les éléments permettant le zoom. Vous effectuez le zoom à l’aide de votre curseur. Pour continuer, vous avez également la possibilité de bloquer le zoom en ajoutant un user-scalable=no sur la balise. Pour conclure, vous pouvez maintenant créer votre site.