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.
30 Réponses sur cet article
Bonjour,
merci pour cet article !
juste une question, comment contraindre un champ de saisie à ouvrir le clavier de saisie d’email ?
merci d’avance
kopolito
10/12/2008
Bonjour,
il n’existe pas, pour le moment, une méthode quelconque qui indiquerai à Safari quel clavier afficher pour un champ de saisie en particulier.
Le choix d’un clavier pré-formaté est évidemment disponible dans le SDK d’Apple pour les développeurs d’applications iPhone/iPod Touch.
Attention à la nuance entre App (applications développées sous Mac) et WebApp (sites codés spécialement pour les mobiles Apple).
Cependant si vous trouvez une alternative, n’hésitez pas à la partager sur le blog.
Cordialement,
BENOIT
Benoit DELDICQUE
10/12/2008
Bonjour,
Je ne sais pas si cet endroit est approprié pour ma demande mais je suis novice dans le développement et j’aimerais simplement, pour mon iphone, créer une application web.
J’aimerais, si possible, dans un premier temps créer une icone (que j’aurais au préalable personnalisée) « clickable » via l’écran d’applications sur mon iphone, et qu’en cliquant dessus, s’affichent:
- le flux RSS de mon blog
- un lien vers le blog qui puisse être ouvert dans safari.
J’aimerais donc savoir par où commencer… Je ne sais pas si mon explication est claire mais j’espere avoir été le plus explicite possible.
En vous remerciant d’avance
Maroof
Maroof
27/12/2008
Cher Maroof,
la création d’icônes cliquables sur l’écran d’accueil du mobile s’effectue en navigant sur le site. Une fois la page désirée atteinte dans Safari, il suffit de choisir le bouton « Ajouter à l’écran d’accueil ». A ce moment, une icône se placera sur l’écran d’accueil du iPhone avec l’icône spécifiée par la balise :
Le fichier PNG contient le dessin de l’icône qui sera utilisée. C’est à vous de le créer et de le mettre en ligne.
La démarche est similaire pour la page contenant le flux RSS.
Une icône ne peut correspondre à une seule et unique action, soit un seul et unique lien. Il faudra donc deux icônes dans votre cas (RSS et lien).
Je reste à votre disposition si vous souhaitez des renseignements complémentaires.
Benoit
Benoit DELDICQUE
28/12/2008
Bonjour,
N’ayant pas d’Iphone et ayant un projet de page web pour Iphone à réaliser, je me demande si il existe un emulateur PC du navigateur Iphone ?
Ou simplement un emulateur Iphone pour PC
Merci pour votre aide
Matt
16/01/2009
Bonjour Matt !
Il n’existe pas d’émulateur pour iPhone sur PC. En revanche tu peux tester ta WebApp sur le navigateur Safari, disponible sur le site d’Apple (tu dois l’installer sur to PC).
Il te suffira alors de redimensionner la fenêtre du navigateur de façon à correspondre aux dimensions de l’écran d’iPhone.
Benoit
Benoit DELDICQUE
16/01/2009
bonjour
pourrais tu nous dire comment tu fait pour masquer la barre d’adresse du navigateur web de l’iphone?
je te remercie
Yvan
PYDO
19/04/2009
@PYDO Bonjour,
pour masquer la barre de titre dans ton application web iPhone, il faut simplement ajouter à la balise BODY le code suivant :
onload="setTimeout('scrollTo(0, 1)',10);"Cordialement,
BENOIT
Benoit DELDICQUE
22/04/2009
Bonjour
Je me suis créer un site perso pour naviguer et consulter des pages pdf que je télécharge en 3G. Mais pour éviter de telecharger chaque fois et comme par ailleurs via différente application j’ai ce même pdf dans iphone, je me demande si je ne peux pas accéder à C pdf directement à ces derniers depuis mon appli WEB.
merci
pour répondre à Matt
toujours en utilisant Safari http://www.iphonetester.com
macbidule
21/05/2009
salut benoit!
heum si j aimerai cree une application a partir d’un forum, c’est possible, utile, gerable?
parcqu’en fait j ai realiser que naviguer sur facebook avec l applique iphone est beaucoup plus cibler et agreable tout comme twitter! par contre pour mon forum c’est un peu lourd d’ etre sur le site de base et devoir zoomer dezoomer chercher et tout le toutime!
Si ca vaut la peine comment faire!??
mugabo
24/07/2009
Bonjour Mugabo,
pour adapter la mise en page de ton forum à un iPhone, il faut être vraiment sûr que cela en vaille le coup car c’est un long travail. De plus, je n’ai trouvé encore aucun forum avec un template dédié pour iPhone.
La solution la plus rapide pour ton cas serait d’installer un template pour ton forum à partir d’une source qui existe déjà. Il ne te restera plus qu’a modifier les couleurs…
Renseignes-toi en effectuant des recherches du type « template phpbb » ou « template iphone forum ».
Bonne continuation !
Benoit DELDICQUE
26/07/2009
un tera merci
bonne vie a toi!
mugabo
30/07/2009
Bonjour,
J’ai un blog de news sur un thème précis et j’aimerai en faire une appli gratuite mais je ne connais rien en codage. Pouvez-vous me donner une alternative ?
Eolia
5/10/2009
Bonjour,
Si vous ne connaissez pas le code ou si vous n’avez pas le temps ni les compétences, je vous recommande de mettre en place un thème (template) adapté à l’iPhone sur votre blog.
Pour Wordpress, utilisez le thème « iWPhone-by-ContentRobot » dispnible à cette adresse.
Je reste à votre a disposition, cdlt,
BENOIT
Benoit DELDICQUE
5/10/2009
Bonjour,
Merci pour ces petites astuces très bien expliquées.
J’ai pu créer la Webapp de mon site Web (Joomla initialement)Digimagz.fr grâce à iWebkit et à votre tutoriel.
Voila le résultat http://iphone.digimagz.fr
La preuve qu’avec un peu de patience on peut développer très facilement grâce aux infos postés sur le net. Alors merci Benoit !!!
Astro boy
20/10/2009
Bonjour Benoît,
J’ai pu grâce à notamment ce tutoriel développer un site avec les news du blog, faq, liste d’albums à écouter, moteur de recherche.
Mais je n’arrive pas à trouver d’info sur le streaming audio.
Je liste donc des albums, j’ai des titres à écouter, mais je n’ai aucune idée pour effectuer le streaming.
Il m’a bien semblé un moment avec la balise arriver à quelques choses, mais au mieux ça ouvre une fenêtre quicktime.
Y a-t-il moyen de lire le fichier en restant sur la page ?
Je pose la question ici, car Benoît, vous avez l’air spécialement réactif.
Merci à vous en tout cas pour cette page;
mr_ez
11/11/2009
Bonjour Emmanuel,
Comme il s’agit d’un site web proposant des contenus, il n’est pas possible de lire une vidéo ou un audio dans une page directement.
La lecture audio/vidéo ne s’effectue qu’avec le plugin Quicktime que vous avez réussi à faire apparaitre…
On ne peut pas recréer un lecteur MP3 avec une navigation comme un iPod touch ou un iPhone possèdent.
N’hésitez pas à publier les liens vers vos Web-Apps (site web iPhone) !
Benoit
Benoit DELDICQUE
11/11/2009
Bonjour, peux t’ont sur le même principe que le lien pour envoyer un mail, faire un lien pour permettre d’envoyer un SMS ?
Ludo
7/12/2009
Bonjour Ludo,
il n’est pas possible depuis une WebApp de composer ou ouvrir un sms.
Cordialement,
BENOIT
Benoit DELDICQUE
7/12/2009
Bonjour, super tuto que voici !! Juste une question. L’ouverture de vCard depuis mobile safari est impossible contrairement a ce qui est indiqué. En tout cas chez moi ça ne marche pas. Je souhaite mettre en ligne une vCard sur mon site Internet crée avec iWeb,mais sur iPhone impossible d’ouvrir le fichier. Existe t’il une solution alternative ?
Merci
Jonathr67
28/12/2009
Effectivement, cela ne fonctionne pas depuis safari mais les vCard sont lues dans les courriers électroniques.
Benoit DELDICQUE
28/12/2009
Bonjour,
Pour un de mes cours, je voudrais créer une application pour iPod Touch mais je ne sais pas vraiment où commencer… Je n’y connait presque rien mais y a t-il un site ou un livre qui pourrait m’aider dans mon projet ( du genre pas-à-pas)? On m’a dit c’est que mon projet est assez simple.
Merci
Lily
Lily
15/01/2010
Bonjour Lily,
je te suggère de comencer par lire ces exemples que j’ai réalisés avec des camarades.
http://www.benoit-deldicque.com/blog/tutoriels-iphone-sdk-3-exemples-avant-de-continuer-psm/
Benoit
Benoit DELDICQUE
16/01/2010
Merci pour le SDK.
Amine REGBA
3/02/2010
Bonjour
s’il est possible sur l’iphone depuis un lien de télécharger et lire un fichier « PDF » via un lien de type : voir mon fichier pdf.
Je voudrai savoir s’il est possible de lire un fichier pdf » déjà présent sur l’iphone ». Eviter donc de le télécharger à chaque fois en 3g ou wifi que je veux le consulter. Dans ce cas, sous quelle forme s’écrit le lien ?
As tu une idée ?
merci
Bidule
9/02/2010
Bonjour, il n’est pas possible d’accéder a des fichiers du téléphone car l’iPhone n’est pas un périphérique de stockage de données.
Un fichier PDF ne peut être « sauvegardé » que dans l’application Mail une fois la pièce jointe du message téléchargée.
Cdlt.
Benoit DELDICQUE
9/02/2010
moa je voulai savoir si on pouvait creer soi meme une application pour ipod
bogoss
26/02/2010
Il est tout a fait possible de créer son application pour un iPod touch en utilisant le SDK iPhone d’Apple. En revanche il n’est pas possible de créer des applications pour d’autres modèles d’ipod.
Benoit DELDICQUE
26/02/2010
« Si vous connaissez la position exacte, utilisez les coordonnées.
Dijon »
Mais voilà !!!
Comment relevé les valeurs du GPS de l’iphone pour se localiser.
Mon idée, je souhaite faire une WEB application qui permettrait d’envoyer une alerte par SMS ou un email avec l’adresse maps.google en lien
pour retrouver une personne qui se perd souvent alzeimer
Merci
Bidule
13/03/2010
Retrouvez des informations sur la géolocalisation sur iPhone dans l’article suivant: Utiliser la géolocalisation dans une application web pour iPhone
Benoit DELDICQUE
14/03/2010