PLUxml pour iPhone

SapinTremblant · juillet 2008

Bonjour,
Je suis en train d'adapter PLUxml pour iPhone afin que les sites soient optimisés pour une navigation sur celui-ci.

En fait il faut proposer 2 templates au visiteur. Un pour les navigateurs classiques et un pour iPhone. SPIP propose un plugin (http://abel.foxylounge.com/Plugin-iSPIP.html), alors il faut se bouger dès maintenant...

La navigation sur iPhone est un peu particulière. Vous pouvez vous familiariser en visitant ces sites :
- http://blog.jaysalvat.com/articles/webapps-un-nouveau-framework-pour-vos-sites-iphone.php

- http://webapp.net.free.fr/Doc/Installation.html

Je pense que PLUxml est tout à fait adapté car il est léger.

J'ai commencé des recherches basées sur myPluXML 0.2 mais n'étant pas un roi du PHP, j'ai du mal a avancer.

Si cela vous dit, travaillons ensemble sur ce developpement. Votre site pourrait bientôt être visisble sur iPhone (de façon optimisé) et surtout éditable depuis celui-ci.

gcyrillus · juillet 2008

Bonjour ,

arf , non STP

, pas que Iphone , les mobiles oui mais pas que Iphone ou I-machin chose .

La suite IPhone , Ipod , etc ... je n'aime pas a cause de leur façon de faire en générale , pluxml est en open source , aucune raison donc de privelegier une société qui réverait d'avoir le monopole sur tout les fichiers numériques audio et vidéo .

Pour ajouter de l'eau a ton moulin , je te propose de tester dans l'Iphone : http://re7net.com (j'en ai pas de Iphone , j'ai un htc).

c'est un test et le script de base n'est pas de moi :
(je cite mes sources ici : http://re7net.com/?28-re7net-sur-pda-smartphone-iphone )
Dans le templtae , voici grosso modo la partie qui appel les styles :

<link rel="stylesheet" type="text/css" href="<?php __('template'); ?>/style.css" media="screen" />
	<link rel="stylesheet" type="text/css" href="<?php __('template'); ?>/print.css" media="print" />
	<!-- CC pour IE  ici (style , javascripts) -->
<?php
// test mobile (beta)
$mobile_browser = '0';

if(preg_match('/(up.browser|up.link|mmp|symbian|smartphone|midp|wap|phone)/i',
    strtolower($_SERVER['HTTP_USER_AGENT']))){
    $mobile_browser++;
    }

if((strpos(strtolower($_SERVER['HTTP_ACCEPT']),'application/vnd.wap.xhtml+xml')>0) or 
    ((isset($_SERVER['HTTP_X_WAP_PROFILE']) or isset($_SERVER['HTTP_PROFILE'])))){
    $mobile_browser++;
    }

$mobile_ua = strtolower(substr($_SERVER['HTTP_USER_AGENT'],0,4));
$mobile_agents = array(
    'w3c ','acs-','alav','alca','amoi','audi','avan','benq','bird','blac',
    'blaz','brew','cell','cldc','cmd-','dang','doco','eric','hipt','inno',
    'ipaq','java','jigs','kddi','keji','leno','lg-c','lg-d','lg-g','lge-',
    'maui','maxo','midp','mits','mmef','mobi','mot-','moto','mwbp','nec-',
    'newt','noki','palm','pana','pant','phil','play','port','prox',
    'qwap','sage','sams','sany','sch-','sec-','send','seri','sgh-','shar',
    'sie-','siem','smal','smar','sony','sph-','symb','t-mo','teli','tim-',
    'tosh','tsm-','upg1','upsi','vk-v','voda','wap-','wapa','wapi','wapp',
    'wapr','webc','winw','winw','xda','xda-');

if(in_array($mobile_ua,$mobile_agents)){
    $mobile_browser++;
    }

if (strpos(strtolower($_SERVER['ALL_HTTP']),'OperaMini')>0) {
    $mobile_browser++;
    }

if (strpos(strtolower($_SERVER['HTTP_USER_AGENT']),'iemobile')>0) {
$mobile_browser++;
}
 if (strpos(strtolower($_SERVER['HTTP_USER_AGENT']),' ppc;')>0) {
$mobile_browser++;
}
if($mobile_browser>0){

    //si mobile , donc :

   ?>
	<link rel="stylesheet" type="text/css"   href="<?php __('template'); ?>/handled.css"  />  
 	<?php   } else {
// si pas mobile , rien a ajouté ?
   }
   
// fin test mobile (beta)
// pour completer ce test  , un media query sur la largeur de l'ecran peut-etre avantageusement ajouter a la feuille de style afin de faire l'import du fichier handled.css
// EXEMPLES , pour l'Iphone par exemple .
/* 	<link rel="stylesheet" type="text/css"   href="<?php __('template'); ?>/handled.css"  media="handheld, only screen and (max-device-width:480px)" />  
@media screen and (max-device-width:480px)  {@import("<?php __('template'); ?>/handled.css");  />  */
?>

Bon , c'est le même combat que les js qui cherche a quoi ils ont a faire (test navigateur ou os) en attendant que les differents nav soit en mesure d'implementer correctement les media pour les styles.

Ne te trompe pas sur ma réaction

, je ne boycotte pas l'Iphone , au contraire , je ne veut pas boycotter ce qui n'est pas un Iphone .

Ensuite pour le squelette , celui de pluxml est deja simple et pas mal accessible , A ceux qui veulent en faire des 'sur mesures' , attention a faire des pages accessibles

et pas trop lourdes (zappé pub , grosse image , etc ), cela a aussi grande importance.

Pour les JS , ils sont plus ou moins pris en compte selon les mobiles , de pas du tout a pas mal .

... je laisse les autres apporter leur critiques et conseils avisée sur le sujet , je ne suis qu'un amateur .

GC

SapinTremblant · juillet 2008

Merci de ton commentaire. Je ne suis pas pour un monopole iPhone, je tente juste de répondre à une demande que l'on m'a faite. Je suis en Freelance et si l'on me demande de faire un système de blog pour iPhone je cherche dans cette direction afin de bosser un peu...

Cela dit je pense que les sites pour iPhone doivent être visible sur les autres plateforme, car le code est propre et assez sémantique.

Toujours est-il que je pensais que cela pourrait intéresser des gens dans la mesure ou SPIP et WP proposent un plugin pour adapter leurs sites. Cela peut être un très bon moyen de faire connaître PLUxml aussi car les blogs pour iPhone, et mobiles en général, ne sont pas légions.

Merci

Skyline · juillet 2008

Pourquoi développer une version spécialement pour l'iPhone ? Dans ce cas il faudrait aussi une version pour l'htc, une pour les smartphones Nokia, une pour les psp, une pour les nintendo DS etc etc...
Depuis longtemps déjà il a été mis en place des standards et la possibilité d'avoir des feuilles de styles alternatives. Ainsi si chacun fait son boulot correctement, c'est-à-dire d'un coté des sites aux normes évitant l'attribut "media=all" et de l'autre des fabricants de produits mobiles intégrant des navigateurs de qualité, une seule version d'un site web est nécessaire dans 99% des cas.

SapinTremblant · juillet 2008

pourquoi spécialement pour iPhone ? car j'ai des demandes dans ce sens. Alors oui, safari pour iPhone affiche, avec une grande qualité, les sites web, mais il est possible aussi d'avoir une navigation très simplifiée comme le propose DIGG, FACEBOOK, LE MONDE, 20 MINUTES et beaucoup d'autres encore sur des versions adaptées à l'iPhone. D'ailleurs celui qui n'a pas d'iPhone accède au site classique, donc personne n'est lésé, tout le monde a la même info mais dans un format différent.

D'autant qu'il n'y a rien d'extraordinaire. Il s'agit d'un peu JS et de CSS afin d'adapter les pages au format de l'écran. Alors en mettant tout cela en %, je pense que les navigateurs OPERA mobile et autres affichent cela à la perfection.

Mais je ne vais pas tenter de vous convaincre. Si cela n'interesse personne pas de problèmes. Je passe mon chemin pour ce developpement via Pluxml.

Skyline · juillet 2008

Pour moi une version d'un site optimisée pour {plateforme matérielle + un navigateur} c'est un retour en arrière technologiquement parlant.

SapinTremblant · juillet 2008

Attendons... reprenons depuis le début. Je crois que nous nous sommes mal compris.

Il s'agit juste de faire un template pour les petits écrans (de mobiles et autres eeepc). Je n'ai pas d'iPhone mais un eeepc 700 et je peux dire que les templates "iphone" de facebook et autre Digg sont des merveilles à visiter sur un écran de 7" en 800px de large. Voila où je voudrais aller.

La contrainte est aussi dans la conception car cela repose sur un effet "slide" qui demande de n'avoir qu"une seule page fixe et des appels de page de contenu sur cette page.

Si cela n'interesse tjs personne. Je laisse tomber. Mais je voulais juste clarifier un peu (ai-je réussi ?).

Skyline · juillet 2008

Il s'agit de s'adapter aux petits écrans en incluant une feuille de style alternative, là oui c'est intéressant.
Peut-tu m'en dire plus par contre sur l'effet "slide" ? (en lien détaillant ça par exemple)

SapinTremblant · juillet 2008

c'est une combinaison de javascript + css + une structure de liens qui font la navigation.
Tu peux aller voir sur http://www.joehewitt.com/blog/introducing_iui.php

ensuite les exemples sont quasi tous avec un style iPhone (désolé) mais tous sont très agréables et parfait sur un eeepc ou sur Opéra Mobile.

Aussi il faut une detection de User Agent qui redirige vers le "Template" adéquate en fonction.

Voila pour le moment.

tu peux aller voir sur www.aktiq.fr/iphone j'ai tenté une version fixe.

Skyline · juillet 2008

Merci je vais regarder ça

youpi38 · juillet 2008

Même si je n'ai pas d'Iphone (et je nen veux pas en plus) ni de Eeepc , l'idée est à mes yeux excellente : plus on facilite l'accès aux sites architecturés autour de pluxml, meilleure sera la renommée

SapinTremblant · juillet 2008

@skyline: as tu regardé ? cela t'intéresse-t-il ?

Skyline · août 2008

J'ai potassé tout ça et je reste un peu septique. Après ça n'empêche personne de faire un thème pluxml avec ce système.

gcyrillus · août 2008

bonsoir

oui , c'est interessant mais pas nouveau comme concept de nav (je n'ai plus de lien sous la main , désolé , ça date un peu).

un lien : version mobile ou simplifié/epuré, suffirait alors a basculé sur un 'template ou theme ' different .

Du coup la notion de 'Pluxml mobile ou iphone et de media handled ' n'est plus a l'ordre du jour , il s'agit de proposé un théme specifique (mobile ou iphone) au visiteur.

Sitot qu'on ne cherche pas a servir une version alternative automatiquement et que l'on laisse le choix au visiteur , il n'y a plus aucun problémes.

Sur les premier pluxml , un selecteur de theme etait utilisable , un formulaire reduit a un imput submit pour basculer d'un théme a l'autre ,serait envisageable .... mais quel support utilisé pour conservé se switch de theme ? : sessions , cookie ou un 'mode' a la $_get ? lequel le plus fiable et le plus facilement reversible ? .. ou une autre methode ?

Si le media handled est reconnu correctement , il ne pourra de toutes façon pas faire intervenir autre chose que des styles (logiquement) , donc pas moyen d'embarquer un js spécifique pour la navigation et encore moins appelé un fichier template.php differents .... finalement ou est bien sur un theme a part entiere a proposé , ... enfin me semble - t-il .

GC

Skyline · août 2008

Voici de quoi alimenter la discussion : http://www.libert-fr.com/blog/post/2008/07/20/La-folie-des-sites-optimises-pour-liPhone

SapinTremblant · décembre 2008

bonjour,
je souhaite relancer la discussion mais orientée média mobile. Comment faire avec la V4 de pluxml un selecteur de theme ?

Je peux faire un theme dédié média mobile mais il me faut un lien "version mobile" qui switch vers le theme en question ou éventuellemnt un JS qui detecte le média et switch automatiquement.

Quelqu'un a-t-il une idée ?

marama · décembre 2008

Salut,

Un sélecteur de thèmes à déjà été développé pour la beta 4, tu peux t'en inspirer je pense : http://wiki.pluxml.org/?7-installer-un-selecteur-de-themes

SapinTremblant · décembre 2008

ok, je vais regarder ça alors. merci beaucoup.

Hamtaro · décembre 2008

Si tu as déjà réalisé ton thème, cela m'intéresse sapintremblant.

Mais il me semble que l'on peut "reconnaitre" l'iphone en visite sur un site et lui demander (ou le forcer) à l'affichage du template. J'ai croisé ça sur plusieurs sites (avec mon iphone) et c'est pas mal comme solution.

TCho, Hamtaro.

SapinTremblant · décembre 2008

le thème n'est pas près mais je te tiendrai au courant. J'avais fait un htème pour la v3 de pluxml. Je vasi donc regarder cela pour la v4.

marama · décembre 2008

Pour détecter un iphone en PHP, on en parle ici : http://www.journaldunet.com/developpeur/client-web/tutoriel-pratique/08/0206-optimiser-site-web-iphone-2/1.shtml

Hamtaro · décembre 2008

Super Marama, on va pouvoir optimiser cela dès que le thème sera prêt

TCho, Hamtaro.

SapinTremblant · décembre 2008

bonjour, y a-il un problème avec le selecteur ou ai-je mal fait ?
voila l'erreur renvoyée :

Fatal error: Cannot instantiate non-existent class: myglob in ../../pluxml/plugins/selectskin.php on line 19

J'ai mis le dossier plugins à la racine et ai suivi les instructions du wiki...

si vous avez une idée.

marama · décembre 2008

SapinTremblant a écrit:
bonjour, y a-il un problème avec le selecteur ou ai-je mal fait ?
voila l'erreur renvoyée :
Fatal error: Cannot instantiate non-existent class: myglob in ../../pluxml/plugins/selectskin.php on line 19
J'ai mis le dossier plugins à la racine et ai suivi les instructions du wiki...

si vous avez une idée.

As tu bien suivi le tuto pour la bonne version de Pluxml et le bon sélecteur (http://download.pluxml.org/plugins/selectskin-blog-beta4.zip) ?

SapinTremblant · décembre 2008

oh l'idiot que je suis... tellement enthousiaste à l'idée d'avoir un selecteur que je n'ai pas fait attention à la version téléchargée.

J'avais donc "mal fait".... merci pour ta clairvoyance Marama.

Tout fonctionne parfaitement désormais.
Merci.

SapinTremblant · décembre 2008

Voila le thème iPhone près pour PLUxml V4. J'espère qu'il vous conviendra. Je pense l'avoir pas mal testé mais il se peut que des coquilles existent alors faites le savoir évidement.

Vous pouvez avoir une démo et télécharger le .ZIP sur cette page : http://aktiq.fr/?article24/theme-iphone-pluxml

je l'ai accompagné d'une procédure assez claire je crois.
à+

marama · décembre 2008

Je n'ai qu'un mot à dire : Bravo ! Beau travail

Hamtaro · décembre 2008

Superbe travail !

D'ailleurs, le thème de ton site est superbe !
Tu prends cher au niveau des tarifs ? ^^

Je vais de ce pas tester ce thème. A ce que j'ai compris, il refait aussi la partie admin ?
Mais au fait, l'iphone est automatiquement détecté et le thème devient imposé ?

TCho, Hamtaro.

Hamtaro · décembre 2008

Arff dsl pour les questions, je viens d'ouvrir le .txt.

SapinTremblant · décembre 2008

Merci pour le thème. Les tarifs, tout dépend de ce qu'il y a à faire.

Pour le moment le thème ne prend pas l'admin. J'y travaille.
L'iphone est détecté automatiquement et s'impose mais c'est une option. Tu gères cela avec le javascript dans header.php

Bon test.

Hamtaro · décembre 2008

Petit souci :
- la redirection automatique vers mon thème marche bien (http://www.geexy.fr/blog/?style=iphone)
- mais la page recharge sans arrêts, sans afficher de contenu.
- de plus sur mon PC (ubuntu + firefox) cette page ne renvoit pas mon thème...

J'ai juste copier coller le thème iphone ainsi que la code dans mon header.
Faut-il tout de même installer le sélecteur de thèmes ?

TCho, Hamtaro.

PLUxml pour iPhone

Réponses