Adapter un site à la PSP avec le javascript
Monter un blog à propos de la PSP sans tenir compte des fonctionnalités de navigation web de la console serait vraiment dommage, voir ridicule. Adapter de manière exclusive la mise en page du blog à l’écran de la PSP, soit 480 pixels de large sur 272 de haut, aurait été assez désagréable à regarder depuis un écran d’ordinateur (voir cet exemple).
L’idée est donc d’adapter dynamiquement la mise en page de ce blog (ainsi que l’ensemble du contenu de la technobiosphere par la même occasion) en fonction de l’écran sur lequel il est consulté (PSP ou autre). Comme c’est le cas pour le site officiel de la console.
L’objectif est là. Comment l’atteindre ?
Une piste est apportée par Alexander Kohlhofer dans son post intitulé make your website PSP ready qui consiste à insérer dans la page php, le code suivant qui détecte le navigateur de la PSP pour basculer d’une page css vers une autre, adaptant ainsi la mise en page.
if (eregi(”PSP”, $_SERVER[’HTTP_USER_AGENT’])) { X } else { Y }
J’ai préféré le javascript pour rediriger complétement le visiteur vers une nouvelle page spécialement créée avec le même contenu mais une mise en page plus “carrée” (un moyen de me rassurer en cas de problème, peut-être, car si je “casse” le code, tout n’est pas à jeter). J’ai donc inséré entre les balises <head> et </head> de la page principale (visible depuis un navigateur “classique”) le code qui redirige vers celle réservée à la consultation sur la PSP:
<script type="text/javascript">
<!– Debut
var name = navigator.appName
if (name == "PSP (PlayStation Portable) Internet Browser")
this.location ="<$MTBlogURL$>psp-index.php";
// fin du script –>
</script>
Notez bien le nom du navigateur, ça s’improvise pas !
Et, dans la page visible depuis la PlayStation Portable, de la même façon, j’ai inséré un code qui renvoie l’utilisateur d’ordinateur vers la page principale qui lui est réservée.
<script type="text/javascript">
<!– Debut
var name = navigator.appName
if (!(name == "PSP (PlayStation Portable) Internet Browser"))
this.location ="<$MTBlogURL$>psp-index.php";
// fin du script –>
</script>
Ainsi, chacun son coin et tout est bien mis en page, joli comme tout, bien optimisé.
Pour les illustrations, je vous laisse vous ballader dans le présent site :-)
10 Commentaires
Réagir :
A lire aussi
:: Badge officiel :: Apple MacBook Pro vs. Big Brother :: Google aurait-il choisi son camp? :: …BloGraphiC… et housses Vaja :: uneautrevie.com ::
« Article précédent - Article suivant »
Je suis pas sur que le passage par du javascript soit la meilleure des solutions techniques pour gérer cela.
Un petit code en php est à mon avis plus sûr, car on peut désactiver le javascript sur les ordi.
tu as certainement raison. Mais je dois avouer ma faiblesse: je n’ai pas su le faire en php… malgré les renseignements que j’ai glânés de ci, de là…
le code en php:
if(strstr($_SERVER[’HTTP_USER_AGENT’],’PlayStation Portable’))
echo ‘Vous êtes sur une PSP’;
else
echo ‘Pas sur une PSP’;
tu peux utiliser la fonction header à la place du echo pour faire une redirection :)
je pige kedalle !!
Courage ! Accroche-toi ! Sois persévérant ! Tu y arriveras…
Intéressant, mais est-ce que ça va être utile à beaucoup de monde…?
avec du recul, plus tellement maintenant. Surtout quand on voit la qualité de safari sur un ipod touch !
Oui, je pense plutôt qu’il faudrait adapter votre site aux dernières sorties d’apple (Ipod touch & Iphone), si ce n’est pas déjà fait!^^
l’interface d’administration de ce blog est adaptable automatiquement, via un plugin, aux contraintes des iPhone/touch. Concernant le site lui-même, il n’y a rien à adapter, si ce n’est la limitation de l’emploi du flash qui n’est pas encore géré par Safari sur iPhone/touch. D’où les liens/captures pour les vidéos YouTube…
Ok, on apprend des choses chaque jour!^^