• Facebook
  • Twitter
  • LinkedIn
  • Viadeo
  • Flux RSS

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&amp;subject=objet%20du%20mail&amp;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=nqx_yl7OSUE">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.




AUTRES LECTURES
Ajouter un profil de configuration sur iPhone et iPod t
Créer une application web pour iPhone, 2ème partie
Différence entre WebApp et application pour iPhone et ...
iOS 4.0.2 sur iPhone et iPod
VOS RÉACTIONS
#1 kopolito

Bonjour,
merci pour cet article !
juste une question, comment contraindre un champ de saisie à ouvrir le clavier de saisie d’email ?
merci d’avance

#2 Benoit DELDICQUE

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

#3 Maroof

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

#4 Benoit DELDICQUE

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

#5 Matt

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

#6 Benoit DELDICQUE

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

#7 PYDO

bonjour

pourrais tu nous dire comment tu fait pour masquer la barre d’adresse du navigateur web de l’iphone?

je te remercie

Yvan

#8 Benoit DELDICQUE

@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

#9 macbidule

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

#10 mugabo

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!??

#11 Benoit DELDICQUE

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 !

#12 mugabo

un tera merci
bonne vie a toi!

#13 Eolia

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 ?

#14 Benoit DELDICQUE

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

#15 Astro boy

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 !!!

#16 mr_ez

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;

#17 Benoit DELDICQUE

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

#18 Ludo

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 ?

#19 Benoit DELDICQUE

Bonjour Ludo,
il n’est pas possible depuis une WebApp de composer ou ouvrir un sms.
Cordialement,
BENOIT

#20 Jonathr67

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

#21 Benoit DELDICQUE

Effectivement, cela ne fonctionne pas depuis safari mais les vCard sont lues dans les courriers électroniques.

#22 Lily

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

#23 Benoit DELDICQUE

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

#24 Amine REGBA

Merci pour le SDK.

#25 Bidule

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

#26 Benoit DELDICQUE

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.

#27 bogoss

moa je voulai savoir si on pouvait creer soi meme une application pour ipod :hum:

#28 Benoit DELDICQUE

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.

#29 Bidule

« 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

#30 Benoit DELDICQUE

Retrouvez des informations sur la géolocalisation sur iPhone dans l’article suivant: Utiliser la géolocalisation dans une application web pour iPhone

#31 Legarspol

Bonsoir,
Je suis étudiant et je créé une app iphone. quand on est dans le mode « j ai cliqué sur plus et je consulte le site comme une app » à un moment j’ai créé un lien et quand on clique dessus sur un Iphone, la fenêtre ce ferme et se rouvre dans safari pour charger la page suivante. je ne comprend pas pourquoi… Auriez vous une piste ? Le lien en question est un lien à rallonge avec variable get…

#32 Benoit DELDICQUE

Bonjour,
Pourriez-vous préciser votre cas d’utilisation car je ne comprend pas votre message (de quel « mode » parlez-vous, dans quelle application?).

Le fait d’ajouter une icône sur votre écran d’accueil offre un raccourci vers la pages web spécifiée et ouverts dans Safari.

Benoit

#33 Legarspol

D’accord,
En fait je ne créé qu’un site internet qui se comportera comme une application pour iphone:
L’utilisateur vas sur le site clique sur « + », il a donc une icône sur son écran d’accueil qui ouvrira une version spéciale de safari, sans barre de navigation en haut et en bas. (barre d’adresse et de recherche, « + », historique et nouvel onglet)
Mon « application web » marche parfaitement, cependant, a un moment dans l’application (qui est ouverte comme expliqué au dessus.) lorsque l’on va sur une page, et que l’on clique sur une image qui sert de lien, on peut voir la « fenêtre » ou la version allège de safari se fermer puis la même page que précédemment est ouverte dans safari (donc avec toutes les barres d’outils) puis la page activé par le lien s’ouvre dans un nouvel onglet.
Voila j’espère avoir été plus clair. Merci de votre aide !

#34 Benoit DELDICQUE

Cher Legarspol,
Je comprend un peu mieux votre problème.
Premier point, à ma connaissance, il est impossible de masquer la barre d’outils (en bas) dans Safari sur iPhone normal (non jailbreaké). Si vous avez réussi à faire cela, je serai curieux de connaitre votre méthode (on se recontactera le cas échéant).
Votre problème de lien semble concerner l’affichage d’une nouvelle page qui, soit s’ouvre dans un nouvel onglet de Safari à cause d’un « target=_blank » dans votre lien, soit ne prend pas en compte le mécanisme de mise en page dans Safari (barre du haut et suppression magique de la barre du bas.

Si vous souhaitez un diagnostic plus précis, je vous recommande de me fournir l’adresse de votre projet.

Si vous souhaitez poursuivre nos échanges par mail et assurer la confidentialité de votre projet, laissez un message sur ce post et je vous recontacterai par mail !

#35 jean paul

Hello, j’ai créé avec l’aide de Matt (de bdnum) et des infos de ce post une webapp pour présenter des extraits de BD (je suis éditeur).
J’ai créé sur chaque post un bouton pour envoyer le post à un ami, mais j’ai deux questions:
- j’ai utilisé le code html ci-dessus, mais est-ce qu’il existe un plug-in paramétrable?
- je voudrais intégrer dans le mail une image (du blog ou d’ailleurs si nécessaire) par défaut, je n’ai pas réussi dans le html malgré tous mes essais.
merci de votre aide

#36 pilou

merci pour toutes les informations mais je ne sais pas ou il faut rentrer toutes ces donnés pour crée une application????

#37 Benoit DELDICQUE

Bonjour,
malheureusement, il n’existe pas de solutions pour votre problème. En effet, il est impossible de créer ses propres contenus autres que texte pour le corps d’un message électronique (idem que sur un site HTML avec la balise mailto).
Vous pouvez seulement inclure du texte dans le message.

J’ai visité votre site et il fonctionne très bien sur mon iPhone. Félicitations pour votre travail !

#38 Benoit DELDICQUE

Ces données sont à inclure dans le code HTML de vos pages pour créer une web-app. Attention, il ne s’agit pas ici d’une application iPhone à proprement parler… voir l’article « Différence entre WebApp et application pour iPhone et iPod touch« .

#39 Legarspol

Effectivement des meta donnée dsont parametrable pour:
#Changer la couleur de la barre du haut (la petite avec batrie )

#Masquer la barre du bas

#ajouter une image spécifique pour l’icone de l’app et une page de chargement (genre logo de votre webapp.)

Quand à mon problème il c’est résolu par lui même mais réapparait quand l’utilisateur « clique » sans attendre le téléchargement entier de la page.

#40 Legarspol

Lol vous bloquez le HTML
Dommage… :)

#41 Benoit DELDICQUE

Voici un second lien, Créer une application web pour iPhone, 2ème partie. Je comprend mieux votre dernier commentaire…

#42 Jérémy

Très utile Merci !!!

Je suis en train de me créer un p’tit site web pour iphone, je fouille le net dans l’espoir de trouver la possibilité de faire ceci:

Créer un icone ou un texte cliquable sur le site permettant d’effectuer la fonction « Ajouter à l’écran d’accueil »

Est ce réalisable ???

#43 tfoutfou

bonjour benoit , votre site est tres interessant

et vous allez peut etre pouvoir m’aider a régler un probleme que je rencontre

je possede une interface web sur une carte speciale (gce ipx800) qui me permet de commande l’ouverture et la fermeture de relais.

J’ai donc realisé une version de la page de commande speciale pour iphone

J’ai rajouté en entete le meta
qui me permet de charger la page depuis l’ecran d’accueil en cachant la barre du bas de safari

par contre mes boutons sur ma page (pour la commande des relais) comporte des liens html avec un target=iframe

et mon iframe est la suivante

ca me permet de rester sur ma page perso sans charger le lien html de mon bouton a l’ecran

le probleme : ca marche tres bien sous safari (on ne voit meme pas de chargement c’est tres reactif)

par contre en mode « webapp » ca ouvre safari avec le lien qui etais dans la bouton sans prendre en compte l’iframe

Je peut vous communiquer mon site et mon code source pour en discuter ensemble si possible

Cordialement , Antoine

#44 Benoit DELDICQUE

Antoine,
L’utilisation des iframe sur iPhone est très délicate. Comprenant votre problème, nous pouvons nous mettre en relation pour en discuter. Plus tranquillement.

Vous trouverez quelques infos pour me contacter sur mon site (pas le blog).

Cdlt.

#45 Neum

Bonjour,

Après documentation auprès de plusieurs sites, dont ce blog donc, et si j’ai bien compris, lorsqu’on veut faire lire une vidéo d’un site web iphone directement dans le lecteur vidéo de l’iphone, il suffit de faire un lien sur son bouton comme suit :

Une vidéo

Ayant lu ça, j’ai compris que le « num de vidéo » est donc l’ID de la vidéo youtube, telle qu’apparaît dans l’URL de la vidéo. OK ?
Et en outre, il faut placer cette suite de lettres et de chiffres entre accolades. J’ai pensé que ces dites accolades permettaient justement d’ouvrir le lecteur vidéo iPhone en évitant de partir sur le site youtube (ce qui se produirait avec un lien URL sans accolade). OK ?

Bien. OR, quand je teste ce code, j’ai un message d’erreur : ID INCORRECT… Pourtant, et après moult vérifications, il n’y pas d’erreur d’ID. D’autant plus que je l’ai copié-collé pour être sûr.

Cependant, je travaille toujours en localhost sur mon Mac (le site n’est pas encore en ligne) et je teste le site depuis Safari mais avec le USER AGENT iphone activé. Donc ma question est simple : est-ce-que mon lien ne fonctionne pas parce que je suis sur mon mac en local? Donc est-ce-que mon lien fonctionnera une fois que je naviguerais sur le site depuis mon iphone???

Merci de me répondre.
Neum

#46 Benoit DELDICQUE

Bonjour Neum,

Tout d’abord vous ne devez pas inclure les accolades Dan l’adresse de la vidéo. Ensuite, le player Youtube ne peut pas fonctionner sur votre Mac car le lien s’ouvre automatiquement dans l’application Youtube sur iPhone, iPod touch ou iPad.

Il est donc nécessaire de travailler en ligne pour tester la fonctionnalité.

#47 Neum

Rebonjour,

et donc, merci Benoît de votre réponse.

2 choses :

1) : Effectivement, maintenant, les liens vidéos fonctionnent, une fois les accolades effacées.
2) : Le système du « Développement » web de Safari étant activé, et donc le user agent iphone étant enclenché, si certes je ne peux pas tester le lecteur iphone (puisque je suis sur Mac!) je peux néanmoins tester l’ouverture de la vidéo dans l’interface youtube spéciale iphone. Et avec les accolades retirées, tout fonctionne. Une fois sur iPhone, il est certain maintenant que le lecteur s’ouvrira bel et bien.

Merci donc. Cela étant, juste une toute petite dernière remarque. Elle vaut certes pour vos conseils ici sur votre blog, mais aussi pour tous les sites de conseils iphone, puisque, selon toutes vraisemblances, vous reprenez tous les mêmes syntaxes sans vous demander si elles seront réellement comprises sinon même compréhensibles : PUISQUE LES ACCOLADES NE DOIVENT PAS ÊTRE INCLUSES DANS LES LIENS… RETIREZ-LES DE VOTRE CODE D’EXEMPLE ! Moyennant quoi, tout le monde comprendra parce que clairement ce sera compréhensible, le bon usage de ce script de lien vidéo youtube pour iPhone. C’est l’évidence même. D’ailleurs, pourquoi des accolades pour mettre en exergue l’intitulé de la mention ID ? Et pourquoi pas des tirets ? Des guillements texte ? Etc… Les meilleures idées et en outre les plus pédagogiques, sont les simples, les plus luminieuses : aussi marquez seulement (…)/watch?v=votre numéro ID de vidéo ici et tout sera parfait !

Bref, merci encore, vraiment, qui plus est avec une telle réactivité, mais s’il vous plaît, corrigez ce malentendu, car ma main au feu que je ne suis pas le seul à trouver cela confus pour ne pas dire aberrant…

Bien cordialement,
Neum

#48 Benoit DELDICQUE

Je prends toujours note des remarques de mes lecteurs !
La correction est apportée et j’y ai ajouté la colorisation syntaxique.

Benoit.

#49 Neum

Bonjour Benoît,

je viens de passer les 2 derniers jours, entiers, à compulser les très rares informations web sur les vidéos quicktime pour iPhone INTÉGRÉES dans les pages html d’un site iPhone.

Très rares et souvent approximatives, elliptiques ou fantaisistes, ces maigres informations, au final, ne servent à rien sinon à frustrer celui qui cherche la solution, voire même l’inquiéter, et à tout le moins, le perdre.

C’est pourquoi je reviens vers vous pour vous demander votre avis, bien que votre propre code embed est des plus limités et lui aussi très vague, amenant moult questions sans réponse.

Je fais parti de ceux qui ont depuis très très longtemps utilisé Quicktime et qui sont sur Mac depuis les début quasiment. Aussi j’utilise le FreeWare Pageot pour générer la balise Quicktime proprement. Mais elle doublonne la balise avec Object – Embeb pour tenir compte des PC . Je l’ai donc tronqué pour ne conserver que Embed, puisque seul Safari iPhone lira les vidéos. Cela étant, j’ai conservé le code Pageot des vignettes cliquables pour lancer ensuite le film.
Reste que ce code est différent de votre ligne embed : elle est plus complète et plus détaillée, en tous cas est elle précise au moins.
Là-dessus, après avoir encodé mes vidéos en 3GP, j’ai lu à droite et à gauche que ces 3GP n’étaient prises en compte que sous certaines conditions, et en outre, je me suis rendu compte que le format alourdissait les fichiers vidéos. Donc la question de leurs portabilités iPhone se posait d’évidence. Aussi, et depuis Quicktime Pro, ai-je utilisé la fonction « Exporter pour iPhone » afin de laisser Quicktime tout régler parfaitement et générer des vidéos en m4v, 100% compatible iPhone. Quant à mes vignettes cliquables, ce sont de simples JPG réalisés dans Photoshop.

Enfin, je précise que je n’affiche pas qu’une seule vidéo, mais plusieurs : en fait, je n’appelle qu’une seule et même page vidéo, mais grâce au PHP, en fonction du bouton d’appel cliqué, c’est à chaque fois une vidéo différente qui s’affiche au même emplacement. Or mes vidéos ne sont pas du tout au même format : la plus petite fait 320×240, la plus grande 400×300. Aussi ai-je dû compléter la balise Quicktime avec les mentions width et height, renseignées dynamiquement par du code php, spécifiquement pour chaque vidéo. Idem pour le nom du fichier vidéo appelé dans la mention href et également pour l’image cliquable dans la mention src.

Je vous livre maintenant la balise telle que je l’ai composée. Eu égard à vos sécurités du champ de saisie ici dans votre blog, j’ai juste remplacé les mentions php par du texte explicatif et enlevé les syntaxes html :

–> Début embed
s r c = dossier vidéo/PHP pour JPG
width = PHP pour Largeur height = PHP pour Hauteur
controler = false
autoplay = false
scale= 1
volume = 75
showlogo = true
cache= false
h r e f= PHP pour nom Fichier VIDÉO associé aux mentions Autoplay true et Controller true
target= myself
kioskmode = true
type = video/x-m4v
pluginspage = Lien vers site Apple
–> Fin embed

Comme je l’avais dit, je travaille toujours en localhost sur mon Mac (le site n’est pas encore en ligne) mais via la modification du USER AGENT de Safari, je simule l’Iphone pour tester mon site mobile : en l’état, tout fonctionne : les jpg sont cliquables, les vidéos se lancent, etc : aucun problème.
Reste que ce n’est qu’une simulation, pas l’iPhone. Aussi, aimerais-je à présent avoir votre avis éclairé sur tout ce que je viens d’exposer. (Ne tenez pas compte de mon précédent post en attente de validation).
J’aimerais ainsi savoir si :
1) La balise vous semble-t-elle correcte pour l’iPhone ?
2) Les vidéos se liront-elles dans la page de mon site, ou est-ce-qu’après avoir cliqué sur les JPG cliquables, les vidéos s’ouvriront-elles dans le lecteur iPhone en plein-écran ?

Vous savez tout. J’ai bien conscience d’avoir fait long. Mes excuses. Mais à la vérité, au regard de la somme astronomique de questions sur ce sujet, toujours quasiment sans réponse, il m’est avis que ce topic complet devrait intéresser une foule pour ne pas dire une masse d’internautes proprement incroyable… pour le plus grand bonheur de votre blog !
Merci donc de bien vouloir valider ce post et de bien vouloir me répondre. A très bientôt j’espère.

Bien sincèrement,
Neum

#50 Benoit DELDICQUE

Cher Neum,

Merci pour toutes vos remarques et pour l’attrait que vous portez à mon blog.
J’ai créé un article spécialement dédié à la vidéo sur le web et sur iPhone !
Vidéo Quicktime dans une page HTML

Bonne lecture.

#51 Neum

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

#52 Benoit DELDICQUE

Neum,

1) Pour ne pas détecter automatiquement les liens téléphone :

<meta name="format-detection" content="telephone=no">

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.



;) :x :what: :star: :mrgreen: :love: :lol: :hum: :cry: :? :) :( 8O