Salut à tous , marre de galèrera avec les favoris de vôtre navigateur pour venir sur le forum ?
Voilà une astuce sous iOS 7 et 8 et sous Android pour avoir sur le bureau de votre téléphone un icone lien directe pour le forum de MeM .
Sous androïd:
Ne vous inquiétez pas, c’est très facile d’ajouter un raccourci de site internet sur Android
Sous iOS :
Pour ajouter l'icone d'un site, avec son lien, sur l'écran d'accueil de votre iphone il suffit seulement d'appuyer sur le symbole + en bas au centre de l'écran et sélectionner Ajouter à l'écran d'accueil. ( version simple ) ( part défaut limage de l'icône sera XEN FORO , mais vous pouvez changez ça ainsi que le nom explication ci dessou )
ajouter l'icone d'un site, avec son lien, sur l'écran d'accueil de votre iphone il suffit seulement d'appuyer sur le symbole + en bas au centre de l'écran et sélectionner Ajouter à l'écran d'accueil.
Les inventions d'Apple que sont l'iPhone, l'iPod Touch et l'iPad forment aujourd'hui un ensemble d'outils permettant de naviguer sur le web. Leur popularité est telle que des fonctionnalités spécifiques à ces plate-formes sont souvent mises en place pour faciliter leur utilisation avec un site web en particulier et avec la navigation tactile.
Parmi elles, la création d'une icône spécifique d'accès au site web, pour l'écran d'accueil (un raccourci dirons-nous). En effet, le navigateur Safari Mobile qui accompagne les trois appareils cités précédemment prévoit la prise en compte d'une balise <link>supplémentaire pour faciliter la création d'un lien direct associé à un fichier icône au format PNG.
Par défaut si aucune icône n'est indiquée, une capture d'écran de votre site sera utilisée.
Implémentation d'une icône
Pour implémenter cette fonctionnalité sur votre site il vous suffit de créer une icône de format carrée, idéalement avec une résolution supérieure ou égale à 114 x 114 pixels (*). L'effet "glossy" et les coins arrondis seront ajoutés automatiquement par l'appareil lui-même. Sauvegardez le tout au format PNG.
Par défaut, le navigateur Safari Mobile vérifiera la présence d'un fichier portant le nom de apple-touch-icon.png à la racine de votre site. Cependant il vous est possible de prendre la main sur ce comportement (pour attribuer une icône spécifique à une page par exemple ou placer le fichier dans un sous-répertoire) pour cela il vous faut ajouter cette ligne dans la section <head>de votre code html :
<link rel="apple-touch-icon" href="chemin_vers_votre_image.png" />
Cette icône sera donc utilisée à la place de apple-touch-icon.png. Et le tour est joué!
(*) Apple recommandait initialement une dimension de 57 x 57 px, mais la résolution de leurs nouveaux appareils se trouvant augmentée, celle des icônes peut également l'être pour gagner en qualité. En effet toute icône sera redimensionnée aux valeurs requises par la plate-forme de destination. Notez que le site Apple.comutilise une icône de 129 x 129px. Les dimensions minimales sont de :
Allons plus loin
Apple prévoit de vous donner la main sur les détails.
Voyons précisément comment procéder.
Suppression des effets par défaut
Comme nous l'avons vu précédemment, la machine ajoute automatiquement des reflets sur votre icône.
Il est possible de lui demander de ne pas les mettre en utilisant la valeur "apple-touch-icon-precomposed" :
<link rel="apple-touch-icon-precomposed" href="chemin_vers_votre_image.png" />
Adapter votre image aux résolutions
Apple prévoit également de pouvoir multiplier les occurence du link pour ajouter autant d'icônes adaptées aux différentes résolutions.
Pour ce faire il suffit de rajouter lattribut size à l'élément link :
<link rel="apple-touch-icon" href="touch-icon-iphone.png" />
<link rel="apple-touch-icon" sizes="72x72" href="touch-icon-ipad.png" />
<link rel="apple-touch-icon" sizes="114x114" href="touch-icon-iphone4.png" />
Ici nous avons donc une icône adaptée à iPhone 3 (la première en 57 x 57 px), une icône adaptée aux iPads, et une dernière pour l'iPhone 4 et + (Retina).
Voilà une astuce sous iOS 7 et 8 et sous Android pour avoir sur le bureau de votre téléphone un icone lien directe pour le forum de MeM .
Sous androïd:
Ne vous inquiétez pas, c’est très facile d’ajouter un raccourci de site internet sur Android
- Appuyez 2 à 3 secondes sur un espace vide de votre page d’accueil / home screen Android (ou appuyez sur la touche Menu puis appuyez sur Ajouter selon votre version d’Android)
- La fenêtre « Ajouter à l’écran d’accueil » apparaîtra.
- Sélectionnez « Raccourcis »
- Sélectionnez « Favoris »
- Sélectionnez le site que vous voulez ouvrir dans la liste de vos favoris
Sous iOS :
Pour ajouter l'icone d'un site, avec son lien, sur l'écran d'accueil de votre iphone il suffit seulement d'appuyer sur le symbole + en bas au centre de l'écran et sélectionner Ajouter à l'écran d'accueil. ( version simple ) ( part défaut limage de l'icône sera XEN FORO , mais vous pouvez changez ça ainsi que le nom explication ci dessou )
ajouter l'icone d'un site, avec son lien, sur l'écran d'accueil de votre iphone il suffit seulement d'appuyer sur le symbole + en bas au centre de l'écran et sélectionner Ajouter à l'écran d'accueil.
Les inventions d'Apple que sont l'iPhone, l'iPod Touch et l'iPad forment aujourd'hui un ensemble d'outils permettant de naviguer sur le web. Leur popularité est telle que des fonctionnalités spécifiques à ces plate-formes sont souvent mises en place pour faciliter leur utilisation avec un site web en particulier et avec la navigation tactile.
Parmi elles, la création d'une icône spécifique d'accès au site web, pour l'écran d'accueil (un raccourci dirons-nous). En effet, le navigateur Safari Mobile qui accompagne les trois appareils cités précédemment prévoit la prise en compte d'une balise <link>supplémentaire pour faciliter la création d'un lien direct associé à un fichier icône au format PNG.
Par défaut si aucune icône n'est indiquée, une capture d'écran de votre site sera utilisée.
Implémentation d'une icône
Pour implémenter cette fonctionnalité sur votre site il vous suffit de créer une icône de format carrée, idéalement avec une résolution supérieure ou égale à 114 x 114 pixels (*). L'effet "glossy" et les coins arrondis seront ajoutés automatiquement par l'appareil lui-même. Sauvegardez le tout au format PNG.
Par défaut, le navigateur Safari Mobile vérifiera la présence d'un fichier portant le nom de apple-touch-icon.png à la racine de votre site. Cependant il vous est possible de prendre la main sur ce comportement (pour attribuer une icône spécifique à une page par exemple ou placer le fichier dans un sous-répertoire) pour cela il vous faut ajouter cette ligne dans la section <head>de votre code html :
<link rel="apple-touch-icon" href="chemin_vers_votre_image.png" />
Cette icône sera donc utilisée à la place de apple-touch-icon.png. Et le tour est joué!
(*) Apple recommandait initialement une dimension de 57 x 57 px, mais la résolution de leurs nouveaux appareils se trouvant augmentée, celle des icônes peut également l'être pour gagner en qualité. En effet toute icône sera redimensionnée aux valeurs requises par la plate-forme de destination. Notez que le site Apple.comutilise une icône de 129 x 129px. Les dimensions minimales sont de :
- iPad : 72 x 72 px
- iPhone (≥4) : 114 x 114 px
- iPhone ≤3GS: 57 x 57px
Allons plus loin
Apple prévoit de vous donner la main sur les détails.
Voyons précisément comment procéder.
Suppression des effets par défaut
Comme nous l'avons vu précédemment, la machine ajoute automatiquement des reflets sur votre icône.
Il est possible de lui demander de ne pas les mettre en utilisant la valeur "apple-touch-icon-precomposed" :
<link rel="apple-touch-icon-precomposed" href="chemin_vers_votre_image.png" />
Adapter votre image aux résolutions
Apple prévoit également de pouvoir multiplier les occurence du link pour ajouter autant d'icônes adaptées aux différentes résolutions.
Pour ce faire il suffit de rajouter lattribut size à l'élément link :
<link rel="apple-touch-icon" href="touch-icon-iphone.png" />
<link rel="apple-touch-icon" sizes="72x72" href="touch-icon-ipad.png" />
<link rel="apple-touch-icon" sizes="114x114" href="touch-icon-iphone4.png" />
Ici nous avons donc une icône adaptée à iPhone 3 (la première en 57 x 57 px), une icône adaptée aux iPads, et une dernière pour l'iPhone 4 et + (Retina).
