WordPress, Iphone, Mobile – Afficher un wordPress sur iPhone, iPod et Android
Le sujet est d’une brûlante actualité, en effet au même titre que le blogging sous WordPress a du réagir à l’hémorragie lié aux pratiques du micro-blogging, le blogging sous WP se doit aussi de faire face à l’épidémie des terminaux mobiles type Iphone ou Android qui bouleverse les usages sur Internet. En effet, c’est aujourd’hui un mode de surf affectionné par un grand nombre d’utilisateurs qui passent indifféremment de l’ordinateur au mobile et le nombre ne cesse de croitre. Voici, donc un article sur les différents modes de récation à disposition si vous administrez un blog sous WP et penser faire mouvement vers le mobile.
Un grand merci à Julien Landouar qui nous a donné quelques précieuses pistes sur les plugins existants pour faire exister une version mobile d’un WP.
Pour mémoire, quelques essais avaient été menés sur un site en Joomla, sans véritable réussite, il faut bien le reconnaitre. Toutefois, si il est à tirer un enseignement de cette expérience, c’est que la version mobile se gère sur un sous-domaine : http://iphone.hecube.net/*, http://mobile.hecube.net/*.
Cela suppose quand même une certaine maîtrise de ce domaine, ce qui n’est pas toujours la cas, que ce soit sous Joomla ou WordPress.
* ces sous-domaines ne sont donnés qu’à titre d’exemple, ce qui ne fait pas mentir le proverbe « Les cordonniers sont toujours les plus mal chaussés »
Créer intégralement sous WordPress son thème Iphone et Mobile
On va voir rapidement les principes de création d’un thème WordPress pour téléphone mobile et/ou pour Iphone, Android. C’est une manière “quick and dirty” comme on dit mais qui permet d’obtenir un résultat rapide pour convertir son blog sous WP au format mobile et Iphone, Android.
Cette création de zéro se scinde en 3 étapes :
- La création de deux “Modèles” au sein de votre thème WordPress. Ces deux fichiers constitueront les 2 destinations vers lequel seront redirigés vos visiteurs, munis d’un mobile wap ou d’un mobile Iphone ou un mobile Android
- L’ajout d’une css spécifique pour la page à destination UNIQUEMENT des visiteurs munis d’un mobile Iphone ou un mobile Android.
- Un script
.phpde détection des navigateurs de vos visiteurs pour le rediriger automatiquement vers la bonne destination en fonction de leurs mobiles.
1. La création des fichiers spécifiques mobile.php et iphone.php
Les fichiers
mobile.phpetiphone.phpsont à placer dans/le-repertoire-qui-contient-le-wordpress/wp-content/themes/nom-de-votre-theme/
Le code php de la page mobile.php à joindre à votre thème
<?php /* Template Name: mobile */ ?> <html> <head> <title>Version Mobile d'un blog sous Wordpress <?php bloginfo('name'); ?></title> </head> <body id="version-mobile"> <div> <h3>Version Mobile d'un blog sous Wordpress <?php bloginfo('name'); ?></h3> <?php /* */ print('<div class="description">'); bloginfo('description'); print('</div>'); ?> <?php /* Cette query affiche les 3 derniers articles postés dans le blog toutes catégories confondues */ query_posts('showposts=3'); while (have_posts()) : the_post(); ?> <div> <h2><?php the_title(); ?></h2> <div><?php /* La fonction d'affichage du contenu a été désactivée */ /* the_content(); */ ?></div> <p>Publié le <?php the_time('j F Y') ?> par <?php the_author() ?>.</p> <hr /> </div> <?php endwhile; ?> </div> </body> </html> |
Le début du code pour le template de iphone.php
la valeur placé en en-tête Template Name: iphone va donné le nom au template. Ce sera ce nom qui sera disponible dans la menu déroulant dans votre outil d’adminsitration de votre blog sous WP.
<?php /* Template Name: iphone */ ?> <html> <head> <title>Version Mobile d'un blog sous Wordpress <?php bloginfo('name'); ?></title> <!-- L'ajout d'une CSS specifique est expliqué au point 2 --> <link media="only screen and (max-device-width: 480px)" href="http://www.jimramsey.net/iphone.css" type="text/css" rel="stylesheet" /> </head> <body id="version-mobile"> <div> <!-- le code vient ici --> |
Lors de la création d’une page, il faut lui affecter le template mobile
Vous avez désormais 2 destinations pour les mobiles : d’un coté l’internet en noir et blanc pour les bouffeurs de wap et de l’autre l’internet ++ en couleurs
Une fois les deux fichiers conçus
2. La création de la CSS pour iphone.php
Pour rehausser le webdesign de la page pour iphone/android, rien de tel qu’un fichier .css pour améliorer l’affichage. En cherchant un peu sur le web, vous trouverez faclement des exemples dont celui de Jim Ramsey qui s’est interress come webdesigner à cette question de l’affichage sous iphone. C’est un bon début pour personnaliser ensuite votre ffcihage.
Le chargement de cette css iphone dans une page web
<link media="only screen and (max-device-width: 480px)" href="http://www.jimramsey.net/iphone.css" type="text/css" rel="stylesheet" />
Un exemple de .css pour iphone
/* This stylesheet is for Mobile Safari only */ /* Reset ------------------------------------------------------------------ */ body { background-color: #fff; -webkit-text-size-adjust: none; } html, body, div, p, hr, h1, h2, h3, h4, h5, h6, ul, ol, li, dl, dt, dd, blockquote, pre, th, td, form, fieldset, input, select, textarea { margin: 0; padding: 0; } h1, h2, h3, h4, h5, h6 { font-size: 100%; font-weight: normal; } ol, ul { list-style: none; } a img { border: 0; } body, input, select, textarea { font: 18px Helvetica, sans-serif; } #beta { display: none; } |
Source : http://www.jimramsey.net/
3. La création d’un script .php d’autodetect
Un usage du script si vous utilisez l’outil de configuration en ligne mis à disposition par les créateurs du script.
include('mobile_device_detect.php'); mobile_device_detect(false,true,true,true,true,true,false,false); |
Source : http://detectmobilebrowsers.mobi/
Source dans header.php dans votre théme WP
Voilà plutôt la partie intéressante, à savoir l’intégration de ce détecteur dans le thème par défaut livrer avec Worpdress.
<?php /** * @package WordPress * @subpackage Default_Theme */ ?> <?php include('mobile_device_detect.php'); $mobile = mobile_device_detect(); // le retour d'un simple boléen true or false qui fait echo ! if($mobile==true){ echo 'Vous utilisez un mobile'; }else{ echo 'Vous êtes sur un navigateur traditionnel'; } // redirection de tous les mobiles vers le site mobile et de tout le reste vers la site normal /* if($mobile==true){ header('Location:http://mobile.mon-nom-de-domaine.fr'); }else{ header('Location:http://www.mon-nom-de-domaine.fr'); } exit; */ ?> |
Le détection fonctionne, le message s’affiche pour indiquer que vous êtres bien sur un navigateur traditionnel.
Si, via le User Agent Switcher, la détection fonctionne, le message s’affiche pour indiquer que vous êtres bien sur un navigateur sur mobile. Alléluia !
Ultime conclusion, comme souvent, par manque de temps, nous ne prenons pas le temps de finaliser la création du thème néanmoins les principes sont là pour réaliser vous même et sur mesure le thème iphone/android de vos rêves. Dans un souci d’efficacité, nous préconisons quand même l’usage de plugins existants. Cela tombe bien, c’est la partie qui vient ensuite !
Les solutions “clé en main” sous WordPress
1. L’ensemble theme et plugin iWPhone WordPress Plugin and Theme
Une fois le dossier dézippé, vous vous retrouvez avec un répertoire nommé iwphone-wordpress-plugin-and-theme. A l’intérieur de ce répertoire, vous trouvez :
- Le fichier du plugin à proprement parler
iwphone.php - Le répertoire contenant le thème WordPress qui est conçu pour un affichage optimisé pour Iphone.
La marche à suivre pour l’installation iwphone-wordpress-plugin-and-theme.zip
1. Il vous faut envoyer par FTP le fichier iwphone.php dans le répertoire plugins de votre blog sous WordPress. le chemin sera de la forme suivante sur le serveur /le-repertoire-serveur-qui-heberge-votre-blog-wp/wp-content/plugins
N’activez pas encore le plugin car vous devez ensuite envoyer l’étape suivante, à savoir installation du thème.
2. Il vous reste à placer le thème conçu par les experts WordPress de contentrobot.com . le répertoire se nomme iwphone-by-contentrobot. Vous l’envoyez par FTP dans ce répertoire.
/le-repertoire-serveur-qui-heberge-votre-blog-wp/wp-content/themes/
Une fois le thème disponible surtout ne pas l’activer.
Les étapes en anglais de l’installation du plugin et du thème
1. Download the iWPhone WordPress Plugin and Theme zip file.
2. Extract the “iwphone-wordpress-plugin-and-theme” folder.
3. Locate the file “iwphone.php” inside the “iwphone-wordpress-plugin-and-theme” folder and upload it into your wp-content/plugins/ directory.
4. Locate and upload the entire folder named “iwphone-by-contentrobot” into your wp-content/themes/ directory.
5. Go to your WordPress administration area and click on Plugins and activate the plugin called “iWPhone”. Do NOT make the iWPhone-by-ContentRobot theme the current theme under Presentation.
IMPORTANT
N’activez pas le theme que vous venez d’installer. L’affichage sous Iphone va se faire via une detéction du user-agent.
La fonction php qui permet la détection sur le user-agent au sein du fichier iwphone.php
function detectiPhone($query){
$container = $_SERVER['HTTP_USER_AGENT'];
//print_r($container); //this prints out the user agent array. uncomment to see it shown on page.
$useragents = array (
"iPhone","iPod");
$this->iphone = false;
foreach ( $useragents as $useragent ) {
if (eregi($useragent,$container)){
$this->iphone = true;
}
}
/*if($this->iphone){
echo ("You are on an iPhone or iPod touch - Lucky you!
");
}else{
echo ("You are not on an iPhone or iPod touch - Too bad :(
");
}*/
}
Procédure d’activation du plugin IWPhone
Le tout s’active comme un simple plugin WP…
Votre site enfin disponible sur Iphone
Quelques captures pour enjolivés un peu cet article austère.
2. L’ensemble thème et plugin WPtouch iPhone Theme
L’artillerie lourde en matière de plugin et de thème, extrêmement sophistiqué, requiert au minimum un WP 2.6
Ce plugin se pare de tous les adjectif suivants : iphone, ipod touch, theme, apple, mac, bravenewcode, ajax, mobile, mobile, android, blackberry. Il est donc complet et vous assure une visibilité sur un très grand nombre de mobiles.
Les paramètres de la “Skin” ou l’apparence à donner sous l’Iphone notamment.
Le paramétrage de Google Analytics
Le site sur iphone avec le plugin WPtouch iPhone Theme
Extrait du contenu du site vu avec WPtouch iPhone Theme
Tester sa solution
Hormis, l’achat pur et simple d’un iphone ou d’un blackberry pour tester vos pages , il existe des solutions intermédiaires, mois onéreuse cela va sans dire.
- L’installation d’un add-ons firefox
User Agent Switcher - Le recours à des émulateurs pour tester vos pages. On se contentera de ceux disponibles en ligne, sans parler des émulateurs livrés avec d’éventuels SDK de développement pour mobile.
1. Quel agent êtes-vous ou du bon usage du add-on User Agent Switcher ?
Il vous faut tester l’affichage de votre version mobile en simulant le comportement d’un Iphone ou d’un Android. Le Add-on User Agent Switcher est là pour vous y aider. Ce module sous Firefox vous permettra une gestion plus fine des “User Agent” qui est l’élément pivot de la simulation via un navigateur d’un environnement mobile.
Attention, cela peut perturber le bon fonctionnement de votre navigateur Firefox et certains sites peuvent ne plus savoir ce que vous êtes ! Le problème est survenu notamment avec le site google… qui peut ne plus s’afficher, c’est ballot ! On peut quand même vivre sans google et iphone, tout de même !
Les agents disponibles avec User Agent Switcher, il ne manque que Fox, Mulder et Bauer
Importer, Editer, Exporter les user-agent de User Agent Switcher
L’édition du user-agent “iphone” sous User Agent Switcher
Une erreur possible sur Google suite à l’installation du add-ons User Agent Switcher
A noter, le “Veuillez contacter le webmestre du site…”, savoureux, larry ou sergei, tu peux corriger steplay !
Description :
Android
User Agent :Mozilla/5.0 (Linux; U; Android 1.5; fr-fr; HTC Magic Build/CRB17) AppleWebKit/528.5+ (KHTML, like Gecko) Version/3.1.2 Mobile Safari/525.20.1
Une liste plutôt exhaustive des User Agent trouvée sur le net et amendée des User Agent IPhone et Android
<useragentswitcher> <useragent description=":: BROWSERS - Windows ::" useragent="" appname="" appversion="" platform="" vendor="" vendorsub=""/> <useragent description="MSIE 6 (Win XP)" useragent="Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1)" appname="Microsoft Internet Explorer" appversion="4.0 (Compatible; MSIE 6.0; Windows NT 5.1)" platform="" vendor="" vendorsub=""/> <useragent description="MSIE 5.5 (Win 2000)" useragent="Mozilla/4.0 (compatible; MSIE 5.5; Windows NT 5.0 )" appname="Microsoft Internet Explorer" appversion="4.0 (compatible; MSIE 5.5; Windows NT 5.0)" platform="" vendor="" vendorsub=""/> <useragent description="MSIE 5.5 (Win ME)" useragent="Mozilla/4.0 (compatible; MSIE 5.5; Windows 98; Win 9x 4.90)" appname="" appversion="" platform="" vendor="" vendorsub=""/> <useragent description="Netscape 4.8 (Win XP)" useragent="Mozilla/4.8 [en] (Windows NT 5.1; U)" appname="" appversion="" platform="" vendor="" vendorsub=""/> <useragent description="Opera 8.0 (Win 2000)" useragent="Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.0; en) Opera 8.0" appname="Microsoft Internet Explorer" appversion="4.0 (compatible; MSIE 6.0; Windows NT 5.0; en)" platform="" vendor="" vendorsub=""/> <useragent description="Opera 7.51 (Win XP)" useragent="Opera/7.51 (Windows NT 5.1; U) [en]" appname="" appversion="" platform="" vendor="" vendorsub=""/> <useragent description="Opera 7.5 (Win XP)" useragent="Opera/7.50 (Windows XP; U)" appname="" appversion="" platform="" vendor="" vendorsub=""/> <useragent description="Avant Browser" useragent="Avant Browser/1.2.789rel1 (http://www.avantbrowser.com)" appname="" appversion="" platform="" vendor="" vendorsub=""/> <useragent description="Netscape 7.1 (Win 98)" useragent="Mozilla/5.0 (Windows; U; Win98; en-US; rv:1.4) Gecko Netscape/7.1 (ax)" appname="" appversion="" platform="" vendor="" vendorsub=""/> <useragent description="Multizilla (Win xp)" useragent="Mozilla/5.0 (Windows; U; Windows XP) Gecko MultiZilla/1.6.1.0a" appname="" appversion="" platform="" vendor="" vendorsub=""/> <useragent description="Opera 7.5 (Win ME)" useragent="Opera/7.50 (Windows ME; U) [en]" appname="" appversion="" platform="" vendor="" vendorsub=""/> <useragent description="Netscape 3.01 gold (Win 95)" useragent="Mozilla/3.01Gold (Win95; I)" appname="" appversion="" platform="" vendor="" vendorsub=""/> <useragent description="Netscape 2.02 (Win 95)" useragent="Mozilla/2.02E (Win95; U)" appname="" appversion="" platform="" vendor="" vendorsub=""/> <useragent description=":: SPIDERS - search ::" useragent="" appname="" appversion="" platform="" vendor="" vendorsub=""/> <useragent description="Googlebot 2.1 (New version)" useragent="Mozilla/5.0 (compatible; Googlebot/2.1; +http://www.google.com/bot.html)" appname="" appversion="" platform="" vendor="" vendorsub=""/> <useragent description="Googlebot 2.1 (Older Version)" useragent="Googlebot/2.1 (+http://www.googlebot.com/bot.html)" appname="" appversion="" platform="" vendor="" vendorsub=""/> <useragent description="Msnbot 1.0 (current version)" useragent="msnbot/1.0 (+http://search.msn.com/msnbot.htm)" appname="" appversion="" platform="" vendor="" vendorsub=""/> <useragent description="Msnbot 0.11 (beta version)" useragent="msnbot/0.11 (+http://search.msn.com/msnbot.htm)" appname="" appversion="" platform="" vendor="" vendorsub=""/> <useragent description="Yahoo Slurp" useragent="Mozilla/5.0 (compatible; Yahoo! Slurp; http://help.yahoo.com/help/us/ysearch/slurp)" appname="" appversion="" platform="" vendor="" vendorsub=""/> <useragent description="Ask Jeeves/Teoma" useragent="Mozilla/2.0 (compatible; Ask Jeeves/Teoma)" appname="" appversion="" platform="" vendor="" vendorsub=""/> <useragent description=":: BROWSERS - Mac ::" useragent="" appname="" appversion="" platform="" vendor="" vendorsub=""/> <useragent description="Safari 125.8 (Mac OSX)" useragent="Mozilla/5.0 (Macintosh; U; PPC Mac OS X; en) AppleWebKit/125.2 (KHTML, like Gecko) Safari/125.8" appname="" appversion="" platform="" vendor="" vendorsub=""/> <useragent description="Safari 85 (Mac OSX)" useragent="Mozilla/5.0 (Macintosh; U; PPC Mac OS X; en) AppleWebKit/125.2 (KHTML, like Gecko) Safari/85.8" appname="" appversion="" platform="" vendor="" vendorsub=""/> <useragent description="MSIE 5.15 (Mac OS 9)" useragent="Mozilla/4.0 (compatible; MSIE 5.15; Mac_PowerPC)" appname="" appversion="" platform="" vendor="" vendorsub=""/> <useragent description="Firefox 0.9 (Mac OSX )" useragent="Mozilla/5.0 (Macintosh; U; PPC Mac OS X Mach-O; en-US; rv:1.7a) Gecko/20040614 Firefox/0.9.0+" appname="" appversion="" platform="" vendor="" vendorsub=""/> <useragent description="Omniweb563 (Mac OSX)" useragent="Mozilla/5.0 (Macintosh; U; PPC Mac OS X; en-US) AppleWebKit/125.4 (KHTML, like Gecko, Safari) OmniWeb/v563.15" appname="" appversion="" platform="" vendor="" vendorsub=""/> <useragent description=":: BROWSERS - linux/unix/beos ::" useragent="" appname="" appversion="" platform="" vendor="" vendorsub=""/> <useragent description="Mozilla 1.6 (Debian)" useragent="Mozilla/5.0 (X11; U; Linux; i686; en-US; rv:1.6) Gecko Debian/1.6-7" appname="" appversion="" platform="" vendor="" vendorsub=""/> <useragent description="Epiphany (Linux)" useragent="ozilla/5.0 (X11; U; Linux; i686; en-US; rv:1.6) Gecko Epiphany/1.2.5" appname="" appversion="" platform="" vendor="" vendorsub=""/> <useragent description="Epiphany (Ubuntu)" useragent="Mozilla/5.0 (X11; U; Linux i586; en-US; rv:1.7.3) Gecko/20040924 Epiphany/1.4.4 (Ubuntu)" appname="" appversion="" platform="" vendor="" vendorsub=""/> <useragent description="Galeon 1.3.14 (Linux)" useragent="Mozilla/5.0 (X11; U; Linux; i686; en-US; rv:1.6) Gecko Galeon/1.3.14" appname="" appversion="" platform="" vendor="" vendorsub=""/> <useragent description="Konqueror 3 rc4 (Linux)" useragent="Konqueror/3.0-rc4; (Konqueror/3.0-rc4; i686 Linux;;datecode)" appname="" appversion="" platform="" vendor="" vendorsub=""/> <useragent description="Konqueror (Gentoo)" useragent="Mozilla/5.0 (compatible; Konqueror/3.3; Linux 2.6.8-gentoo-r3; X11;" appname="" appversion="" platform="" vendor="" vendorsub=""/> <useragent description="Firefox 0.8 (Linux)" useragent="Mozilla/5.0 (X11; U; Linux i686; en-US; rv:1.6) Gecko/20040614 Firefox/0.8" appname="" appversion="" platform="" vendor="" vendorsub=""/> <useragent description="ELinks 0.9.3 (Kanotix)" useragent="ELinks/0.9.3 (textmode; Linux 2.6.9-kanotix-8 i686; 127x41)" appname="" appversion="" platform="" vendor="" vendorsub=""/> <useragent description="Elinks (Linux)" useragent="ELinks (0.4pre5; Linux 2.6.10-ac7 i686; 80x33)" appname="" appversion="" platform="" vendor="" vendorsub=""/> <useragent description="Links 2.1 (Linux)" useragent="Links (2.1pre15; Linux 2.4.26 i686; 158x61)" appname="" appversion="" platform="" vendor="" vendorsub=""/> <useragent description="Links 0.9.1 (Linux)" useragent="Links/0.9.1 (Linux 2.4.24; i386;)" appname="" appversion="" platform="" vendor="" vendorsub=""/> <useragent description="Opera 7.23 (Linux)" useragent="MSIE (MSIE 6.0; X11; Linux; i686) Opera 7.23" appname="" appversion="" platform="" vendor="" vendorsub=""/> <useragent description="Lynx 2.8.5rel.1 (Linux)" useragent="Lynx/2.8.5rel.1 libwww-FM/2.14 SSL-MM/1.4.1 GNUTLS/0.8.12" appname="" appversion="" platform="" vendor="" vendorsub=""/> <useragent description="w3m 0.5.1 (Linux)" useragent="w3m/0.5.1" appname="" appversion="" platform="" vendor="" vendorsub=""/> <useragent description="Links 2 (FreeBSD)" useragent="Links (2.1pre15; FreeBSD 5.3-RELEASE i386; 196x84)" appname="" appversion="" platform="" vendor="" vendorsub=""/> <useragent description="Mozilla 1.7 (FreeBSD)" useragent="Mozilla/5.0 (X11; U; FreeBSD; i386; en-US; rv:1.7) Gecko" appname="" appversion="" platform="" vendor="" vendorsub=""/> <useragent description="Netscape 4.77 (Irix)" useragent="Mozilla/4.77 [en] (X11; I; IRIX;64 6.5 IP30)" appname="" appversion="" platform="" vendor="" vendorsub=""/> <useragent description="Netscape 4.8 (SunOS)" useragent="Mozilla/4.8 [en] (X11; U; SunOS; 5.7 sun4u)" appname="" appversion="" platform="" vendor="" vendorsub=""/> <useragent description="Net Positive (BeOS)" useragent="Mozilla/3.0 (compatible; NetPositive/2.1.1; BeOS)" appname="" appversion="" platform="" vendor="" vendorsub=""/> <useragent description=":: SPIDERS - misc ::" useragent="" appname="" appversion="" platform="" vendor="" vendorsub=""/> <useragent description="gulperbot" useragent="Gulper Web Bot 0.2.4 (www.ecsl.cs.sunysb.edu/~maxim/cgi-bin/Link/GulperBot)" appname="" appversion="" platform="" vendor="" vendorsub=""/> <useragent description="Email Wolf" useragent="EmailWolf 1.00" appname="" appversion="" platform="" vendor="" vendorsub=""/> <useragent description="grub client" useragent="grub-client-1.5.3; (grub-client-1.5.3; Crawl your own stuff with http://grub.org)" appname="" appversion="" platform="" vendor="" vendorsub=""/> <useragent description="download demon" useragent="Download Demon/3.5.0.11" appname="" appversion="" platform="" vendor="" vendorsub=""/> <useragent description="omni web" useragent="OmniWeb/2.7-beta-3 OWF/1.0" appname="" appversion="" platform="" vendor="" vendorsub=""/> <useragent description="winHTTP" useragent="SearchExpress" appname="" appversion="" platform="" vendor="" vendorsub=""/> <useragent description="ms url control" useragent="Microsoft URL Control - 6.00.8862" appname="" appversion="" platform="" vendor="" vendorsub=""/> <useragent description="iPhone 3.0" useragent="Mozilla/5.0 (iPhone; U; CPU iPhone OS 3_0 like Mac OS X; en-us) AppleWebKit/528.18 (KHTML, like Gecko) Version/4.0 Mobile/7A341 Safari/528.16" appcodename="Mozilla" appname="Netscape" appversion="5.0 (iPhone; U; CPU iPhone OS 3_0 like Mac OS X; en-us) AppleWebKit/528.18 (KHTML, like Gecko) Version/4.0 Mobile/7A341 Safari/528.16" platform="iPhone" vendor="Apple Computer, Inc." vendorsub=""/> <useragent description="Android" useragent="Mozilla/5.0 (Linux; U; Android 1.5; fr-fr; HTC Magic Build/CRB17) AppleWebKit/528.5+ (KHTML, like Gecko) Version/3.1.2 Mobile Safari/525.20.1" appcodename="Android" appname="Android" appversion="1.0" platform="Android" vendor="Google Android" vendorsub=""/> <useragent description=":: source: hecube.net ::" useragent="" appname="" appversion="" platform="" vendor="http://hecube.net" vendorsub=""/> </useragentswitcher> |
Source : http://www.useragentstring.com/pages/useragentstring.php
Source : http://fr.wikipedia.org/wiki/User-Agent
Source : WAP User Agents
2. Emulateur ou comment voir son site sans se fatiguer ?
Voir son site sous un émulateur iphone
Vous risquez de rencontrer quelques difficultés à afficher votre site sous cet émulateur, une fois l’installation du plugin iWPhone WordPress Plugin and Theme. En effet, il semble que vous soyez pris pour un navigateur et non un iphone par la fonction qui détecte le user agent. Vérification faite à l’aide d’un véritable iphone, votre site s’affiche bien correctement donc pas d’inquiétudes intempestives.
- Le lien vers un émulateur Iphone
http://iphonetester.com/
Voir son site sous un émulateur mobile
Vous êtes dans le monde merveilleux du WAP (Wireless Application Protocol), un monde en noir et blanc avec son langage à la syntaxe très similaire à l’HTML, le WML et son langage de scripting appelé le WMLScript. . Vous disposez de deux modèles de téléphone mobile un Nokia N70 et un Sony K750.
- Le lien vers un émulateur Mobile
http://mtld.mobi/emulator.php
Quelques captures de la page mobile.php
Si vous cherchez à charger le site destiné à l’iphone, c’est l’erreur assurée
Un tour d’horizon rapide du WAP et de ses acolytes .wbmp et .wml
“Vizavi” de J2M, ou par déférence pour ce grand visionnaire en N&B, on se devait de parler du WAP. On ne va s’étendre sur le langage .wml, c’est une sorte de html du pauvre. Ce qui est plus problématique c’est la création des images dans ce format .wbmp. L’extension .wbmp signifie WirelessBitmap; Il existe deux types d’extensions possibles .wbm ou .wbmp.
Le format WBMP est le format standard d’optimisation des images pour des périphériques mobiles tels que des téléphones portables. Il prend en charge les couleurs 1 bit, ce qui signifie que les images WBMP contiennent uniquement des pixels noir et blanc.
Source : http://help.adobe.com/fr_FR/Photoshop/11.0/WSD4628152-756A-4312-8B2C-A30568F599C7.html
Conversion via php au format wbmp d’un jpg ou d’un png
Un exemple avec png2wbmp()
// Chemin vers la cible png $path = 'logo_wordpress.png'; // Récupération de la taille de l'image $image = getimagesize($path); // Convertion de l'image png2wbmp($path, 'logo_wordpress_png.wbmp', $image[1], $image[0], 7); |
Source : http://www.php.net/manual/fr/function.png2wbmp.php
Le fichier au format logo_wordpress.png
Le fichier logo_wordpress.png converti au format .wbmp
Pour des raisons d’affichage dans un navigateur, l’image au format .wbmp est au format .png
Un exemple avec jpeg2wbmp()
Vous pouvez faire la conversation y compris à partir d’un fichier .jpg
// Chemin vers la cible jpeg $path = 'logo_wordpress.jpg'; // Récupération de la taille de l'image $image = getimagesize($path); // Convertion de l'image jpeg2wbmp($path, 'logo_wordpress_jpg.wbmp', $image[1], $image[0], 5); |
Source : http://www.php.net/manual/fr/function.jpeg2wbmp.php
Pour aller plus loin
- Le tag
iphonesur l’espace plugins de WordPress
http://wordpress.org/extend/plugins/tags/iphone - Le site officiel des créateurs de
WPtouch iPhone Theme
http://www.bravenewcode.com/ - Le site officiel des créateurs de
WPtouch iPhone Theme
http://www.bravenewcode.com/downloadables/ - Le site officiel des créateurs de
iwphone-wordpress-plugin-and-theme.zip
http://www.contentrobot.com/ - Tout ce que vous devez savoir sur le iWPhone WordPress Plugin and Theme de contentrobot.com
http://iwphone.contentrobot.com/ - Un très bonne article de Bruno Bichet, intégrateur HTML & CSS sur le sujet
WordPress — Un blog version «mobile» sans plugin
http://www.css4design.com/blog/wordpress-version-mobile-de-votre-blog-sans-plugin - Une introduction au monde du WAP avec cet article "Créer et tester ses pages pour le WAP"
http://www.funix.org/fr/linux/wap.htm - Un article pour détecter les terminaux mobiles à l’aide de php – "Detecting Mobile Devices Using PHP"
http://www.hand-interactive.com/resources/detect-mobile-php.htm - Detect Mobile Browsers – Mobile User Agent Detection
http://detectmobilebrowsers.mobi/
