Créer une application web pour iPhone et iPod Touch
Depuis la sortie de la dernière version de l'iPhone, version 2.0, il devient de plus en plus intéressant de créer ou d'adapter un site pour ces périphériques.
Nous allons voir à travers cet article quelles sont les bases pour créer un site pour iPhone/iPod Touch.
Les résolutions d'affichage
Mode portrait
Largeur : 320 pixels
Hauteur : 356 pixels et 416 pixels si la barre d'adresse est masquée.
Clavier : 216 pixels + 44 pixels de barre de boutons.
Mode paysage
Largeur : 480 pixels
Hauteur : 208 pixels et 268 pixels si la barre d'adresse est masquée.
Clavier : 180 pixels + 32 pixels de barre de boutons.
Les balises utiles dans le HEAD
Spécifiez l'icône qui sera utilisée si un WebClip est ajouté au bureau de l'iPhone. L'icône doit être au format PNG et de dimensions égales à 57 par 57 pixels. L'effet de lumière arrondi est automatiquement créé par l'iPhone/iPod Touch.
<link rel="apple-touch-icon" href="icone.png"/>
Le ViewPort
Safari sur iPhone n'a pas de fenêtre comme sur un ordinateur, ni de scroll-bars ou de boutons de redimensionnement. L'utilisateur zoom en double-tappant et en utilisant l'ouverture de ses doigts.
C'est par les différences entre les interactions utilisateur sur un ordianteur et sur un iPhone que le ViewPort, autrement dit la zonne d'affichage, ne sont pas les mêmes.Certaines différences entre ces modes d'affichage peuvent affecter le rendu sur ordinateur ou iPhone/iPod Touch.
Pour interdire le zoom par l'utilisateur, ajoutez cette ligne entre les balises HEAD :
user-scalable accepte soit "yes" ou "no".
<meta name="viewport" content="user-scalable=no">
Pour afficher la page avec un niveau de zoom spécifique, utilisez :
(1.0 = sans zoom, 2.0 = zoom deux fois, ...)
<meta name="viewport" content="initial-scale=1.0">
Les plages de zoom peuvent aussi etre spécifiées :
(valeurs comprises entre 0.1 et 10)
<meta name="viewport" content="minimum-scale=1.0"> <meta name="viewport" content="maximum-scale=1.0">
Les balises utiles dans le BODY
Il est possible de d'indiquer au navigateur s'il doit ou non utiliser la correction automatique et la mise en majuscule lors de la saisie de texte dans des champs de formulaire.
Le code suivant permet de désactiver le correcteur :
autocorrect prends les valeurs "on" ou "off".
<input autocorrect="off"/>
Les liens spéciaux
Il est possible, suivant le type de lien, d'interagir avec les applications du périphérique (Mail, Contacts, Plans et YouTube). Voici comment créer des liens sur votre site pouvant utiliser ces applications.
Numéro de téléphone
Il est possible de créer un lien sur un numéro de téléphone afin que l'utilisateur puisse l'utiliser, voire l'enregistrer. Ce type de lien fonctionne seulement sur un iPhone. Safari affichera une erreur si ce lien est visité depuis un iPod Touch.
<a href="tel:0352416396">Tél. 03 52 41 63 96</a>
Envoyer un mail
Si vous le souhaitez, vous pouvez créer un lien permettant à votre visiteur de vous envoyer un mail.
<a href="mailto:frank@example.com">John Frank</a>
Le code suivant permet de spécifier une adresse de copie (paramètre cc), le sujet du mail (paramètre subject) et le corps du message (paramètre body).
<a href="mailto:foo@example.com?cc=bar@example.com&subject=objet%20du%20mail&body=mon%20message">Envoyer un mail</a>
Adresse
Vous pouvez localiser votre entreprise et permettre au visiteur de vous retrouver via l'application Plans.
<a href="http://maps.google.com/maps?q=dijon">Dijon</a>
Si vous connaissez la position exacte, utilisez les coordonnées.
<a href="http://maps.google.com/maps?ll=47.322301,5.042038">Dijon</a>
Vidéo YouTube
L'iPhone est capable de lire les vidéos postées sur YouTube grâce au lecteur intégré. Pour faire un lien sur une vidéo, utilisez le code suivant :
<a href="http://www.youtube.com/watch?v={num de vidéo}">Une vidéo</a>
Couleur
Il est possible d'indiquer quelle doit être la couleur du lien cliqué. Par défaut, il s'agit d'un gris clair avec une transparence. C'est cette couleur qui peut être changée.
Définition de la couleur par rgba(R,G,B,A) avec R, G et B en décimal (0 à 255) et A pour la transparence (0 à 1).
<a href="mapage.html" style="-webkit-tap-highlight-color:rgba(200,0,0,0.4);">mon lien</a>
Les types de fichiers reconnus
Ci-après la liste des types fichiers que Safari peut lire et donc que vous pourrez mettre à disposition.
- Fichiers de texte (.css, .txt)
- Fichiers Microsoft Office (.doc, .docx, .xls, .csv, .ppt, .pptx)
- Fichiers Adobe Acrobat (.pdf)
- Fichiers audio/vidéo (.wav, .mp3, .mov, .mp4, .m4v, .3gp dans certains formats)
Les fichiers issus de Microsoft Office 2007 (.docx, .pptx) on un affichage qui peut s'avérer inapproprié selon le contenu qu'ils contiennent.
D'autres types de fichiers sont également exploitables suivant les applications :
- Dans Plans, les fichiers de cartes (.kml)
- Dans Mail, les fichiers de contact vCard (.vcf)
Suivant le type de contenu et la taille du fichier, la visualisation de ce dernier peut se révéler assez déroutante et lourde.
Utilisation de vidéos
Il est impératif de respecter certains points pour pouvoir lire des vidéos dans Safari sur votre iPhone.
L'extension du fichier doit être soit .mov, .mp4, .m4v, ou.3gp.
Les standards de vidéo supportés sont :
- Profil de base H.264 Level 3.0 video, jusqu'à 640 x 480 à 30 fps.
- Vidéo MPEG-4 Part 2 (Profil simple)
- Audio AAC-LC, jusqu'à 48 kHz.
Pour ajouter une vidéo à votre page (illustration et bouton de lecture), utilisez le code suivant :
<embed src="poster.jpg" href="movie.m4v" type="video/x-m4v" target="_self" scale="1">
Utilisation de la console
Si vous développez une application web sur iPhone ou iPod Touch, vous arrez surement besoin d'utiliser la console pour tracer les évènements JavaScript de votre site.
La méthode log() ajoute un événement au jounal, la méthode warn() ajoute des avertissements, la méthode error() indique les erreurs et la méthode info() trace des messages.
Le code suivant ajoute plusieurs entrées dans le journal :
<script>
console.log("My log message goes here.");
console.warn("My warning message goes here.");
console.error("My error message goes here.");
console.info("My information message goes here.");
</script>
Sources : Jay Salvat, iPheed, Apple.
