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.
[html]<link rel="apple-touch-icon" href="icone.png"/>[/html]
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 ».
[html]<meta name="viewport" content="user-scalable=no">[/html]
Pour afficher la page avec un niveau de zoom spécifique, utilisez :
(1.0 = sans zoom, 2.0 = zoom deux fois, …)
[html]<meta name="viewport" content="initial-scale=1.0">[/html]
Les plages de zoom peuvent aussi etre spécifiées :
(valeurs comprises entre 0.1 et 10)
[html]<meta name="viewport" content="minimum-scale=1.0">
<meta name="viewport" content="maximum-scale=1.0">[/html]
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 ».
[html]<input autocorrect="off"/>[/html]
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.
[html]<a href="tel:0352416396">Tél. 03 52 41 63 96</a>[/html]
Envoyer un mail
Si vous le souhaitez, vous pouvez créer un lien permettant à votre visiteur de vous envoyer un mail.
[html]<a href="mailto:frank@example.com">John Frank</a>[/html]
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).
[html]<a href="mailto:foo@example.com?cc=bar@example.com&subject=objet%20du%20mail&body=mon%20message">Envoyer un mail</a>[/html]
Adresse
Vous pouvez localiser votre entreprise et permettre au visiteur de vous retrouver via l’application Plans.
[html]<a href="http://maps.google.com/maps?q=dijon">Dijon</a>[/html]
Si vous connaissez la position exacte, utilisez les coordonnées.
[html]<a href="http://maps.google.com/maps?ll=47.322301,5.042038">Dijon&</a>[/html]
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 :
[html]<a href="http://www.youtube.com/watch?v=nqx_yl7OSUE">Une vidéo</a>[/html]
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).
[html]<a href="mapage.html" style="-webkit-tap-highlight-color:rgba(200,0,0,0.4);">mon lien</a>[/html]
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 :
[html]<embed src="poster.jpg" href="movie.m4v" type="video/x-m4v" target="_self" scale="1">[/html]
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 :
[html]<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>[/html]
Sources : Jay Salvat, iPheed, Apple.
Bonjour,
Je reviens suite à mes premiers essais de mises en ligne effective de mon site version iPhone.
Très vite, une parenthèse : je regrette que mon dernier post sur la balise Quicktime n’ai pas été validé pour affichage public ici : car ma balise est bel et bien correcte : toutes mes vidéos tournent à 100% sur iPhone… Tant pis.
Cela étant, je reviens pour 2 questions =
1) J’ai des scripts PHP qui récupèrent les infos de l’internaute tel que son n° IP par ex, son nom d’hôte réel, etc… Or ces données comportent des suites de chiffres et l’iPhone les transforment automatiquement en liens, comme si c’était des numéros de téléphone !! COMMENT FAIRE POUR L’EMPÊCHER DE FAIRE çA ??
2) J’ai créé un webclip comme indiqué ici par Benoît. Aucun problème. Cela étant, l’internaute sur iPhone ne sait pas que ce webclip existe, et si en plus il ignore qu’il lui faut cliquer sur le bouton « + » de l’iPhone pour intégrer ce webclip sur son écran d’accueil, hé bien ce webclip ne sert à rien.
Ma question est donc simple : EST-CE-QU’ON PEUT FAIRE OUVRIR UN POP UP façon Alerte à l’ouverture de la page d’accueil du site, pour signaler que le webclip existe et en cliquant sur un OK, faire intégrer le webclip par l’internaute sur son iPhone ?
Merci de bien vouloir valider ce post et me répondre.
Cordialement,
Neum
Neum,
1) Pour ne pas détecter automatiquement les liens téléphone :
[html]<meta name="format-detection" content="telephone=no">[/html]
2) Pour présenter le webclip, je vous recommande de consulter les différents sites de Google (Gmail, Latitude) qui présentent quelque fois des infos sur le webclip.
Je suis actuellement très chargé et m’efforce de répondre dans les plus brefs délais.
Bonjour,
c’est peut être déjà marqué sur le site, mais comme je n’ai pas lu toutes les pages du début jusqu’à la fin, je me permet de répondre à la toute première question de kopolito qui demandait s’il on pouvait contraindre à faire apparaître un clavier email, ou numérique, plutôt que celui habituel.
C’est possible. A la place de l’habituel input type= »text » que l’on utilise, on remplace par un input type= »number » pour le clavier numérique, type= »email », pour le clavier mail, et un input type= »url » pour le clavier des urls.
Ca marche très bien pour les webApps.
Merci pour ce très bon article sinon, ça m’a permis de commencer tranquillement ma webapp sans trop chercher à mille endroits. Merci encore.
Bonne journée à tous.
bonjour,
pour commencer, super blog, félicitation ! !
j’ai essayé de masquer la barre du navigateur safari comme mentionné plus haut dans les commentaires…
mais ça ne fonctionne pas chez moi !
c’est bien ? ?
Tom,
Avez-vous bien ajouté un webclip sur l’écran d’accueil de votre appareil en utilisant le « + » dans safari?
Sans cette manipulation, il est impossible de faire disparaitre la barre de statut.
Benoit.
j’ai un probleme avec l’image startup.png.. ell en s’affiche pas… peut être trop lourde..
et quand mon appliweb est lancé et que je clique sur les liens de mon site ça ouvre safari dans une autre fenetre avec menu en haut et n bas..
voici mon site..c’est plus facile pour voir les erreurs :
http://mobile.auberge-hazemann.com
Bonjour,
Il est tout a fait normal que votre webapp se lance de nouveau dans safari lorsque vous cliquez sur un lien. Pour garder le mode plein écran, votre webapp doit pouvoir fonctionner sans charger de nouvelle page. Il faut donc faire des appels avec Ajax si vous voulez ne pas ouvrir safari.
Concernant le splashscreen, vous devez vous référer a la documentation pour safari et mettre en place votre image dans un format predefini.
Cordialement
Bonjour.
J’ai créé, depuis quelques mois déjà, mon site au format mobile.
Je souhaite désormais en faire une WebApp pour iPhone.
J’ai trouvé les codes Apple simulant une application, et ceux-ci fonctionnent très bien, le hic c’est que quand je « clique » sur un des onglets du site, celui-ci s’ouvre sur Safari alors qu’il n’y a pas de traget= »_blank » dans le code.
Une petite idée afin de régler ce detail?
cdlt
Bonjour,
en mode webapp, il est impossible de créer des liens sortants tout en restant en mode webapp (plein écran).
La webapp doit, normalement, fournir à l’utilisateur un service et pas des liens sortants.
Pour charger des autres pages en webapp, vous devez utiliser Ajax.
Cordialement,
BENOIT
Bonjour,
je viens de développer un site pour iphone, je suis infographiste et donc il va falloir m’expliquer avec détails lol
donc, j’aimerais que mon site s’affiche en pleins ecran, mon site à bien la taille de 320 px de large.
J’ai testé hier soir ce script, mais une fois sur 2 il ne marche pas :-/
top.resizeTo(window.screen.availWidth,
window.screen.availHeight);
Merci d’avance pour vos conseils.
Magali
Bonjour, je joue à un jeux vidéo ou ont peut trouvé un lien Feed RSS sous forme de blog qui s’ouvre avec Flux (ça c’est sur le pc, je n’arrive pas à mettre ce lien sur une application pour l’utiliser comme un blog ou je pourrais avoir les notifications) et je peut avoir accès au liens en RSS ou en Atome (en atome j’ai trouvé aucune applications en tapant atome dans app store) voilà si vous pouvez m’aidez je vous en serais reconnaissant merci x) +
Bonjour,
je ne comprend pas votre demande. Pourriez-vous la reformuler en un peu plus qu’une phrase ?
Merci. Benoit
Bonjour,
J’aimerais savoir comment faire pour faire une application pour le ipod touch à partir d’un pc (et non pas un mac). Mon projet est simple, ma fille est diabétique type 1. Je veux faire un fichier qui va contenir des informations sur les glucides dans les restaurant et etc. J’espère que vous pouvez m’aider. À l’aide
Merci,
Josée
Bonjour,
On ne peut malheureusement pas développer d’applications depuis un PC car aucun outil officiel stable n’existe à ce jour.
Vous pouvez tenter d’installer une machine virtuelle avec VirtualPC par exemple et y installer un système Mac virtuel dans lequel vous aurez les bons outils.
Bon développement dans votre projet.
Benoît
Merci pour ces infos, certaines me manquaient, notamment pour le lien vers le tel, de couleur bleu sur iphone, c’est pas top, en revanche en applicquant un css (pour qu’il soit blanc) ça ne marche pas… curieux?
Chris
Bonjour Chris,
Pour changer la couleur du lien bleu, il faut effectivement utiliser le CSS. En définissant les styles pour la balise a, tout devrait fonctionner.
Benoît
Bonjour,
Pourriez-vous me dire ou il faut mettre les trucs dans ce genre :
Et, coment l’iTouch/iPhone sait après que cette image est bonne et dernière question : comment mettre l’image ?
Bonjour,
pourriez-vous préciser votre demande ?
Benoit
Bonjour Benoît,
et ravi de « vous retrouver ». Comment allez-vous depuis l’année dernière? Bien j’espère. Et quoiqu’il en soit, laissez-moi vous souhaiter une belle et heureuse année 2012, avec un beau blog iPhone!
Je reviens vers vous parce que j’ai une vraie incompréhension, totale, et un vrai problème, avec le méta-tag :
Il est sensé proposer le plein-écran de votre site web en lui donnant la configuration d’un application iPhone en quelque sorte (pour faire court), et ce, à partir du moment où on l’ouvre depuis son webclip.
Si l’on s’en tient à la page qu’ouvre le webclip directement (généralement la page d’accueil de votre site), en effet, ça marche : votre page s’ouvre, débarrassée de toute interface : aucune barre d’adresse ni de navigation en haut et en bas de l’écran.
Oui.
MAIS LE PROBLÈME est que dès que l’on clique sur un des liens de cette page, pour accéder à une autre dans son site, elle disparaît en fond d’écran iPhone au profit d’une nouvelle page Safari qui glisse et s’ouvre au 1er plan pour s’afficher cernée par l’interface de Safari… Plus aucun mode plein-écran… Tout le surf sur le site se déroule ensuite comme d’habitude : dans Safari avec toute son interface… Seule donc la page d’accueil est en mode FullScreen!
Je précise quand même que le mata tag « apple-mobile-web-app-capable » est présent dans tous les Heads de toutes les pages du site.
Seul un Javascript pour faire disparaître la barre d’adresse de Safari (barre supérieure) m’a débarrassé effectivement de cette partie de l’interface de Safari. Mais impossible donc de masquer la barre de navigation inférieure de la sorte. D’où mon besoin de faire fonctionner le meta tag…
A quoi sert donc ce meta-tag s’il n’est capable d’ouvrir qu’une page du site en Plein-écran!??!! Comment le faire fonctionner???
Par avance, et quelque soit la réponse, merci de toutes vos informations – en français, ouf enfin ! – sur le sujet.
Bien cordialement,
Neum
Neum,
Bonne année 2012.
Pour répondre à ta question, l’utilisation du mode web-app-capable permet effectivement d’afficher un site web en plein écran.
Cependant, une web app fonctionne uniquement en plein écran si les contenus sont chargés de manière asynchrone.
Tout lien classique ouvre le navigateur Safari.
Il faut donc faire des chargements avec jQuery par exemple.
En cherchant un peu, tu trouveras dans ton téléphone un lien vers un annuaire de web apps chez Apple.
Cordialement
Le programme suivant bugge, mais uniquement lorsqu’il est sauvé sur le desktop. Si je clique sur le lien pour appeler le num et que je raccroche. Plus moyen de telephoner ensuite, plus de SMS. Faut eteindre et rallumer le phone.
Si on vire la ligne meta….. Ca marche.. mais on a la bannière de safari
Any ideas ??
DANIEL PHONE
Bonjour,
je n’ai jamais rencontré ce problème, mais j’ai peut-être une explication.
Une webapp exécutée en mode plein écran peut uniquement charger des contenus via des requêtes asynchrones (AJAX).
Tout autre lien fait immédiatement quitter la webapp.
Dans le cas du line de téléphone, une fois l’appel effectué, le système ré-ouvre le lien de la page mais dans Safari et non plus dans la webapp.
Il s’agit ici d’un comportement système que nous ne pouvons corriger.
Dites-moi si cette réponse correspond à votre question.
Benoit