[TUTO] Ajouter un WebClip personnalisé (Raccourci Web sur l'écran d'accueil)

Comment faire un WebClip personnalisé

Il n' y a pas que les applications et les modules d'Apple que l'on peut mettre sur l'écran d'accueil, il y a aussi les WebClips depuis la version 1.1.3. Les WebClips sont tout bêtement des raccourcis de vos pages Webs. Par défaut Safari définie une image pour le WebClip, c'est l'image du site comme on le voit depuis le net :

[TUTO] Ajouter un WebClip personnalisé (Raccourci Web sur l'écran d'accueil) 0310

exemple de WebClip par défaut

Mais certains sites possèdent directement leur propre icône pour les WebClips :

[TUTO] Ajouter un WebClip personnalisé (Raccourci Web sur l'écran d'accueil) 0110

exemple de WebClip

Mais comme on veut toujours tout contrôler, et surtout ses icônes sur l'écran d'accueil, voici comment mettre sa propre icône pour le WebClip.

Il faut avoir :

un iPhone ou iPod Touch
un bloc note (sur l'ordinateur, pas du papier )
Posséder un site dont on a les droits pour ajouter des pages Web et images

Dans notre exemple, nous allons faire un WebClip du forum iPhoneFrance. Le design des pages que l'on va faire sera des plus simple pour ne pas compliquer la procédure.

Etape 1 : Avoir une image

Vous avez plusieurs moyens pour avoir une image :

Vous êtes à l'aise avec Photoshop, alors amusez vous
Vous avez déjà l'image, ça c'est plus facile
Vous demandez à une autre personne

Je ne ferais pas de tuto pour faire une icône, je ne sais pas les faire. Mais je peux vous dire que la taille doit être de 60x60. Dans notre exemple, je vais prendre cette icône pour le forum :

[TUTO] Ajouter un WebClip personnalisé (Raccourci Web sur l'écran d'accueil) 0211

icône pour le forum

Donnez lui le nom : iPhoneFrance.png

Etape 2 : Préparation de la page de redirection

Comme on ne peut pas modifier le site de iPhoneFrance, nous allons faire une page de redirection vers le forum, et c'est sur cette page que l'on va appliquer l'image pour le WebClip. Copier le code ci-dessous dans un bloc note, puis enregistrez le sous le nom : iPhoneFrance.html

<html>
<head>
<title>iPhoneFr</title>
<SCRIPT LANGUAGE=JAVASCRIPT TYPE="TEXT/JAVASCRIPT">
if(document.referrer == ''){
window.location="http://iphonefranceforum.com"
}
</SCRIPT>
<link rel="apple-touch-icon" href="iPhoneFrance.png"/>
</head>
<body>
</body>
</html>

L'expression en rouge correspondant au nom de l'image pour le WebClip, le lien en Bleu c'est le lien vers lequel on redirige, et en Vert, c'est le nom par défaut de notre WebClip.

Cette page à 2 états donc le comportement est différent :

1. Si on lance cette page depuis une autre page, elle s'affiche mais lance pas la redirection.
2. Si on lance directement cette page, elle redirige vers le lien indiqué.

L'état 1 permet de pouvoir entrer la page en WebClip, et l'état 2 permet de lancer la redirection vers le site souhaité.

Etape 3 : La page d'accueil

Comme indiqué à la fin de l'étape 2, on doit avoir une page qui lance la page de redirection pour pourvoir la mettre en WebClip. Voici cette page que vous enregistrez sous le nom WebClip.html :

<html>
<head>
<title>WebClip</title>
</head>
<body>
<a href="iPhoneFrance.html">iPhone France Forum</a><br>
</body>
</html>

La partie en rouge correspondant au nom de la page possédant l'image et la redirection pour un WebClip.

Etape 4 : Le mettre sur notre site

Cette partie est propre à votre hébergeur, vous devez avoir plusieurs moyens d'ajouter ces fichiers (FTP, direct site de l'hébergeur, ...). Si vous avez déjà un site, vous devez savoir comment les mettre.

Dans mon exemple, je vais mettre les 3 fichiers (iPhoneFrance.png, iPhoneFrance.html et WebClip.html) dans un répertoire : WebClip. Les 3 fichiers doivent être dans le même répertoire, sinon la façon dont on a mis les liens ne fonctionnera pas.

[TUTO] Ajouter un WebClip personnalisé (Raccourci Web sur l'écran d'accueil) 0411

Exemple d'hébergement des fichiers

Etape 5 : Ajouter le WebClip sur l'écran d'accueil

Maintenant la dernière étape, lorsque l'on met des fichiers sur un site : celui-ci possède une adresse Web. Tapez cette adresse sur le Safari de votre iPhone ( Sur mon site, c'est http://crash.8.chez-alice.fr/WebClip/WebClip.html ) :

[TUTO] Ajouter un WebClip personnalisé (Raccourci Web sur l'écran d'accueil) Img_0011

Cliquez sur le lien « Forum iPhone France ».
Puis appuyez sur le « + » et sur « Ajouter à l'écran d'accueil ».

[TUTO] Ajouter un WebClip personnalisé (Raccourci Web sur l'écran d'accueil) Img_0012

Maintenant on doit donner le nom qui s'affichera sur la page d'accueil : On choisit « iPhoneFr ». Vous avez remarqué que notre icône est affiché, si c'est pas le cas : vérifiez le nom du ficher, son emplacement, et le nom marqué dans la page de redirection.

[TUTO] Ajouter un WebClip personnalisé (Raccourci Web sur l'écran d'accueil) Img_0016

Voilà c'est fini, vous avez un WebClip personnalisé pour votre Forum favori. Cliquez dessus pour tester si le lien de redirection fonctionne.

[TUTO] Ajouter un WebClip personnalisé (Raccourci Web sur l'écran d'accueil) Img_0017

Félicitation, vous pouvez maintenant faire vos propres WebClips personnalisés.

Très beau TUTO crash, tout en technicité et simplicité en même temps !
on te reconnait bien la Wink

en tout cas c'est bien utile en effet.

Merci Crash!

Trés sympas ce Tuto, ça va en occuper plus d'un (dont moi).. Wink

niclaglisse a écrit:: Merci Crash!

Trés sympas ce Tuto, ça va en occuper plus d'un (dont moi)..

Ah oui, tu as fais des icônes spécial pour d'autres sites ? Fait nous partager si tu veux.

Dés que je récupére mon pc perso, je m'y mets! je vois déjà mon icone "OM" Rolling Eyes

Bonjour à tous.

Je voudrais juste savoir quels sont les formats d'image supportés.
Merci d'avance !