création d'un site nom de domaine .mobi

[Anonymous]

Bonjour à tous,

Je dois créer pour ma boite un site déstiné aux mobiles (.mobi).
Le nom de domaine est réservé, j'ai lu des specs liés aux .mobi :
* Largeur du site : 120 Pixels
* Langage des pages : XHTML - Basic Profile (1.0)
* Encodage des caractères : UTF-8
* Format d'image : JPEG, GIF 89a (non-entrelacé, non-transparent, non-animé).
* Poids maximum d'une page : 20k Bytes.
* Couleurs : Couleurs web standards.
* Feuille de style : CSS Externe avec une définition interne du style et des propriétés des caractères

Mais je me pose une question :
=> Comment rediriger automatiquement les visiteurs mobiles de mon .com à mon .mobi ?

Si vous avez déjà une expérience sur le création d'un site mobile, y a t il autre chose auxquelles je dois penser ?

Merci de vos réponses !

Xp

 

[ChauffeurDeBuzz]

j'attends avec impatience les réponses que l'on va te donner.
ta question est interessante Xp

 

[Audiofeeline]

Il est possible de reconnaitre les navigateurs, je ne sais pas comment on fait mais je c'est que c'est possible avec PHP par exemple...

 

[Anonymous]

Il est possible de reconnaitre les navigateurs, je ne sais pas comment on fait mais je c'est que c'est possible avec PHP par exemple...

Oui bien sur en PHP on récupère le USER_AGENT, mais il me faudra tenir à jour une liste grandissante avec le temps des navigateurs intégrés sur les téléphones mobiles... donc ca va être la galère.

 

[Audiofeeline]

Et si tu vérifie que le navigateur n'est pas IE ou Firefox ça serait plus simple dans ce sens, non?

 

[baden32]

Il est clair que la liste de navigateurs va s'allonger...
Ceci dit, comme premier pas, j'essaierais d'accéder au site avec un PDA ou autre appareil portable pour voir ce que retourne la variable PHP $_SERVER['USER_AGENT']. Il y a peut-être des éléments communs entre différents PDA que l'on peut identifier.

 

[Leonick]

Je pense que cela doit être relativement facile en prenant le système d'exploitation dans le user_agent, au niveau téléphnie mobile Symbian est l'un des plus connu.

 

[Dandu]

Les sites mobiles, c'est galère.

Pour le mien, je fais la détection au niveau de l'user agent, normalement la première partie de celui-ci indique la marque du téléphone.

Après, il faut vérifier pour les autres : les PocketPC se loguent en tant que mozilla 4.0 windows CE, les Palm souvent mozilla 5.0 windows 98 (oui, super logique), etc.

Faut tester, tester et encore tester (y a pas mal d'outils existant).

Pour le reste, faut prendre en compte les comportements bizarres sur les CSS (genre un pocketpc prend une css "handheld" en mode portrait et "classic" en mode payasge), les options spécifiques à certains modèles, etc.

pour une compatibilité très grande : du xhtml simple, sans rien de bien spécifique, sans css. Après, on peut adapter en fonction du modèle (ce que je fais) quand on a les infos, mais ça demande pleins de code différents en détectant le modèle.

autre truc : les cookies sont pas toujours acceptés (et parfois effacé des la fin de la session) et le js est très rare et si présent, buggé/pas complet.

pour la taille des pages, 10Ko me semble un maximum, au dela certains téléphones ne prennent pas les pages (certains ont même la limite à moins).

pour la largeur des pages, faut éviter le fixe, la largeur des appareils mobiles varie fortement : 120 est une bonne moyenne, mais les téléphones récents ou les PDA proposent nettement plus.

enfin, pour les utilisateurs, l'utilisation des acces keys est fortement recomandée.

si vous avez des questions, contactez-moi en MP, j'ai pas mal joué avec ça, et c'est assez spécifique comme dévelopement.

 

[Anonymous]

pour la largeur des pages, faut éviter le fixe, la largeur des appareils mobiles varie fortement : 120 est une bonne moyenne, mais les téléphones récents ou les PDA proposent nettement plus.

Bonjour,

Merci pour ses renseignements très intéressants !

Pour la largeur de la fenêtre 120 pixels, c'est la norme imposée. Mais j'ai constaté que suivant le type de téléphone c'est un peu petit. 150px de large serait mieux.
Conseilles tu de faire une largeur en 100% ?

Pour les CSS, je suis également d'accord, cela varie beaucoup suivant le type de téléphone, donc le mieux c'est de s'en passer.

Pour les "user agent", as tu une liste que tu as déjà faite ?


Dans un premier temps, je compte proposer un site public d'info générale puis après on pensait se pencher sur un site bancaire sécurisé (mais c'est pas gagné encore !)

A bientôt

Xp

 

[Dandu]

Pour la largeur : je sais que c'est "imposé", mais le fait est que c'est trop petit.

La majorité de ceux qui surfent sur des téléphones le font sur des modèles récent avec des résolutions de 176*220 ou 240*320, donc 120 c'est trop petit.

je travaille en largeur 100% quand je reconnais pas le téléphone, et je fixe la bonne valeur quand je le connais.

Pour les images, même chose : je travaille avec une image en 640*480 au déaprt (ou à peu près) que je redimensionne à la volée (via GD en PHP) en fonction du modèle.


Pour les UserAgent :

On a en général la marque suivi du modèle, puis la navigateur utilisé et enfin la compatibilité XHTML.

On a plusieurs navigateurs possibles :

Ceux basés sur UP.Browser chez un certain nombre de fabricants, bonne compatibilité.
Nokia utilise un proprio, assez efficace aussi.
Sony-Ericsson en utilise 3 :
-Teleca sur les bas de gamme, seulement compatible wml,
-SEMC sur le milieu de gamme, un d'origine Sony-Ericsson assez buggé
-Netfront sur le haut de gamme, très efficace

Les Smartphone sous Symbian ou Windows utilisent différents navigateurs, faut tester avec émulateurs.

Voici quelques exemples pris dans les visites, avec les explications en gros de la structure.

SonyEricssonK790i/R1CC Browser/NetFront/3.3 Profile/MIDP-2.0 Configuration/CLDC-1.1
SonyEricssonK700i/R2A SEMC-Browser/4.0 Profile/MIDP-1.0 MIDP-2.0 Configuration/CLDC-1.1
SonyEricssonP910i/R4A SEMC-Browser/Symbian/3.0 Profile/MIDP-2.0 Configuration/CLDC-1.0
SonyEricssonJ210i/R2L/TelecaBrowser/4.08 UP.Link/1.1

Chez Sony-Ericsson :

SonyEricssonModèle et version firmware suivi du browser utilisé puis de la config compatible.

Les modèles "Netfront", récent, supportent le html, les css et pleins de trucs comme ça.
Les modèles SEMC-Browser utilisent le navigateur Sony-Ericsson, un peu buggé, mais avec un support css correct.
Les modèles Symbian utilisent différents modèles, dont le SEMC (et parfois opera)
Ceux avec TelecaBrowser ne supportent pas le xhtml, seulement le wml.

Nokia6230/2.0 (04.43) Profile/MIDP-2.0 Configuration/CLDC-1.1
Nokia6680/1.0 (5.04.07) SymbianOS/8.0 Series60/2.6 Profile/MIDP-2.0 Configuration/CLDC-1.1

Chez Nokia :

Nokia-modèle-version de navigateur. Suivi du profil xhtml supporté.

Si c'est un smartphone, on a la version SymbianOS, l'interface graphique (Serie60, 80) puis le profil.

SEC-SGHC100G/1.0 UP.Browser/5.0.5.1 (GUI)
SAMSUNG-SGH-X640/1.0 UP.Browser/6.2.2.6 (GUI) MMP/1.0

Chez Samsung :

SEC suivi du modèle exact
Samsung suivi du modèle exact.

Après, on a le browser utilisé qui est UP.

MOT-V220/0B.D1.09R MIB/2.2.1 Profile/MIDP-2.0 Configuration/CLDC-1.0
Panasonic-X300/1.0 UP.Browser/6.1.0.7.8 (GUI) MMP/1.0
SAGEM-my401X/1.0/ MIDP-2.0 Configuration/CLDC-1.1 UP.Browser/6.2.3.3.g.2.107 (GUI) MMP/2.0
SIE-A65/15 Profile/MIDP-1.0 Configuration/CLDC-1.0 UP.Browser/6.1.0.7.3 (GUI) MMP/1.0
LG-F2400 MIC/WAP2.0 MIDP-2.0/CLDC-1.1

MOT pour Motorola
Panasonic pour Panasonic
SAGEM pour Sagem
SIE pour Siemens
LG our LG

structure classique, je les regroupe parce que j'ai trop peu de visites de ceux là pour vérifier vraiment les données, en fait.

portalmmm/2.0 SG343i(c10;TB)

Une structure imode :

portalmmm veut dire imode
/2.0 la version supportée
le modèle exact
dans la parenthèse, c'est la taille max de page envoyable, ici 10Ko (parfois 20).

Y a plus d'infos chez Bouyques.

Opera/8.01 (J2ME/MIDP; Opera Mini/2.0.4509/1316; fr; U; ssr)

Un structure OperaMini, impossible de trouver des infos sur le téléphone, une plaie.

Mozilla/4.0 (compatible; MSIE 4.01; Windows CE; PPC; 240x320)

Une structure PocketPC.
Les smartphone sont indiqués Smartphone.
Les versions ou autres sont indiquées aussi.

Malgré le fait que 240*320 soit indiqué, ça veut rien dire : un modèle en 240*240, en mode paysage ou en VGA renvoie la même chaine (super la logique).


Je sais que c'est long, mais ce genre de site est un casse-tête à mettre en oeuvre si on veut un truc qui va bien.

Et la règle d'or : tester soi-même avec un téléphone, et utiliser les accesskeys (touche de raccourcis).

 

[Anonymous]

Merci encore pour les infos, ma liste n'était pas si complète.

En ce qui concerne les émulateurs, je connais -http://emulator.mtld.mobi/emulator.php
Peut être que tu en connais d'autres ?

Un petit tour sur -http://demo.mtld.mobi/ me confirme également que tout le monde développe en 100 %...

Xp

 

[Dandu]

sur le site de Microsoft, mais j'ai plus l'adresse en tete (je regarderais tout à l'heure) il y a un émulateur de PocketPC fonctionnel.

Chez SE, il y a de (vieux) émulateurs WAP de P800, T610 et T68i.

Pour les autres, il suffit de développer et de vérifer la validité avec le validator w3c.

Attention, les téléphones sont très sensibles : la ou FireFox/IE corrige tout seul les erreurs (ou les négligent) les téléphones font une erreur.

De plus, le comportement varie en fonction du mime type : sur un t68 (antiquité, mais bon) si on envoie en text/html ou en wap (mime type spécifique) certains trucs changent, donc la signalisation des access keys.

et google sitemaps marche bien pour l'indexation de ce type de site

 

[AW]

Trés intéressante cette discution, je recommande !

j'ai trouvé ça pour une aide pour l'emulateur pocket PC : http://blogs.labo-dotnet.com/patrice/ar ... /5106.aspx

 

[Anonymous]

autre truc : les cookies sont pas toujours acceptés (et parfois effacé des la fin de la session) et le js est très rare et si présent, buggé/pas complet.

Je reviens sur ce que tu disais précédement au sujet des cookies.
Ils ne sont pas acceptés... donc mon idée de site sécurisé avec identification via des cookies tombe à l'eau (il s'agit d'un site bancaire sécurisé).
Tu as fait des tests dans ce sens ?

Xp

 

[Dandu]

Les téléphones imode le supporte pas du tout (sauf 1 ou 2 modèles) et le reste ça dépend des marques.

Je le vois via mon script de stat, je suis le cheminement via cookies, et certains modèles s'enregistrent en permanence.

Et une partie (certains Samsung) gardent le cookie durant la session, et l'efface après.

Pour un truc sécurisé, il y a moyen de récuperer certaines infos des téléphones, mais ça nécessitent un truc adapté chez l'opérateur (je sais que Bouyques propose ça pour l'imode).

 

[Anonymous]

Je reviens sur sujet quelque mois après car mon projet se concrétise.

Donc pour résumer, si je veux redirigé tous les téléphones mobiles et pda de mon www.tld.com vers le www.tld.mobi, je dois tenir une liste (énorme) de navigateurs embarqués...
Personne n'a trouvé d'autre solution ?


Pour tout ce qui est sous Window CE, je pensais faire qqchose du style :

User agent d'un htc 3600 :
HTCP3600-Mozilla/4.0 (compatible; MSIE 4.01; Windows CE; PPC; 240x320)

if (strpos(($_SERVER["HTTP_USER_AGENT"]),"Windows CE")){
=> redirect vers le tld.mobi
}

Pour un NOKIA:
if (strpos(($_SERVER["HTTP_USER_AGENT"]),"nokia")){

Pour un Sony Ericsson
if (strpos(($_SERVER["HTTP_USER_AGENT"]),"SonyEricsson")){

...

puis après regarder pour les autres portables...


Xp

 

[Dandu]

Moi, je n'ai pas trouvé d'autres solutions.

tester et parser le fihier ua envoyé par les téléphones peut fonctionner, mais une partie des appareils ne renvoie pas le fichier, ou un mauvais.

Le problème de tester juste sur la marque, c'est que c'est trop générique.

Pour prendre le cas de Sony Ericsson, tu peux avoir un modèle qui ne supporte que le wap en wml avec un écran 100px, et un autre qui prend le html avec un écran 320px.

 

[Anonymous]

Pour info deux articles intéressants :
-http://www.xitimonitor.com/fr-fr/technique/telephones-mobiles-novembre-2006/index-1-1-3-64.html
-http://www.xitimonitor.com/fr-fr/technique/telephones-mobiles-juin-2006/index-1-1-3-34.html

Cela donne une idée des marques qui dominent...

 

[John Smith]

tester et parser le fihier ua envoyé par les téléphones peut fonctionner, mais une partie des appareils ne renvoie pas le fichier, ou un mauvais.

Bonjour,

Pourrais-tu nous offrir la partie de ton code qui teste l'ensemble des config et redirige vers la page correspondante. Tu me rendrais un très grand service ! Merci.

 

[Dandu]

Le fichier complet non, c'est trop long, trop crade et adapté à mon site

ce que je fais, c'est ça :

je parse le referer en fonction du téléphone, et je prends que le nom du modèle. Ca commence par la marque (genre Nokia, SonyEricsson, etc.)

je récupère le fihier uaprof

$_SERVER["HTTP_X_WAP_PROFILE"];

et je vérifie dedans les infos qui m'intéresse, je rentre tout en base de donnée et je fais la comparaison à chaque visite.

Moi je vérifie la largeur de l'écran (pour charger une image adaptée), le type de langage supporté (wml, xhtml ou html) et la taille max des pages (il y a une limite en wap).

la limite de chargement, c'est juste pour voir si je peux envoyer une image, et ça varie de 3 Ko (vieux vieux modèles) à 512 Ko. au dessus de la limite, le téléphone plante. C'est généralement 10/16 Ko.
Attention, c'est la page complète (donc css et images compris).

Une fois pas semaine, je vérifie les téléphones pas encore connus et je rentre tout en base à la main. Au début, c'est chiant, le truc reconnait aucun modèle. après un temps, c'est 5/6 modèles semaines max (jai 30 modèles environ pour le moment en base)

 

[John Smith]

Bonjour,

En clair tu t'es fait un compteur de visite pour mobile en stoquant chaque passage en base de donnée ?

D'ailleurs à ce propos, j'ai dû supprimer xiti et google analytics car je passais pas le test sur http://ready.mobi/launch.jsp !

Faut-il se contenter de ces statistiques hébergeurs ?

 

[Dandu]

Pas tout à fait, je ne stocke réellement que les téléphones pas encore connu

les autres, à chaque page, j'envoie les paramètres correctes pour l'affichage

c'est un peu lourd en traitement SQL/PHP, mais j'ai pas des masses de visites, donc ça passe

 

[John Smith]

Ah très bien !

Une autre question, comment faire connaitre son site ? Y a -t-il un moyen d'indiquer à Google que son site (ou une partie de son site) est optimisé pour l'affichage sur mobile et autres pda ?

 

[Dandu]

Il y a des "sitemap" pour les PDA et les mobiles.

sinon, ben faut mettre des liens, et si les entetes sont bons, google bot mobile va passer.

faut juste bien filtrer : comme y a moins de fioriture de menu (enfin, moi), au début la version mobile était mieux référencée que la normale et tombait avant.

 

[John Smith]

Il y a des "sitemap" pour les PDA et les mobiles.

sinon, ben faut mettre des liens, et si les entetes sont bons, google bot mobile va passer.

faut juste bien filtrer : comme y a moins de fioriture de menu (enfin, moi), au début la version mobile était mieux référencée que la normale et tombait avant.

Tes réponses, pour le néophyte que je suis soulève de nouvelle question :

Qu'est-ce qu'un sitemap ?

Quelles sont les entêtes qu'il faut mettre pour que Google me référence ?

Merci.

 

[Dandu]

sitemap : les outils pour webmaster de google

il faut chercher le mot sur le forum, c'est un fichier qui contient toutes les adresses des pages du site, pour que le moteur vienne voir

les entetes : la définition en début de fichier, du genre "<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">"

il y a des doctype spécifiques au web mobile.

 

[nartconcept]

salut à tous,

pour les infos par rapport à .mobi c'est par là http://www.dev.mobi/

pour ton problème, le plus simple c'est de préciser sur le site monsite.com que la version GSM/PDA se trouve à l'adresse monsite.mobi

note : il y a un bot pour joomla qui fait ce que tu veux, peut-être que ça te donnera des idées...

il est là http://extensions.joomla.org/component/ ... Itemid,35/

cordialement

 

[John Smith]

sitemap : les outils pour webmaster de google

il faut chercher le mot sur le forum, c'est un fichier qui contient toutes les adresses des pages du site, pour que le moteur vienne voir

les entetes : la définition en début de fichier, du genre "<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">"

il y a des doctype spécifiques au web mobile.

J'ai mis un truc comme ça :

<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd">

à la suite des tests effectués sur : http://ready.mobi/launch.jsp

Je pense que ça devrait aller.

Sinon, dans ce test, ils demandent de remplacer dans le stylesheet toutes les valeurs absolues du genre 12pt, 10px en em, ex etc.
Qu'en penses-tu ? Est-ce qu'il faut mettre des valeurs relatives pour toutes les dimensions pour être bien lisible sur mobile ?

Autre truc :

A cette page : http://emulator.mtld.mobi/emulator.php

On peut tester son site sur un Nokia n70 et un Sony K750. Bizarement, mon site fonctionne parfaitement sur le Nokia mais sur le Sony, la page se charge puis se bloque ! J'avoue que ça me laisse perplexe... Quelqu'un aurait-il une idée ?

 

[Dandu]

Pour les valeurs, je mets du fixe dans les css, souvent oui.

En même temps, les téléphones ont souvent du mal avec les CSS, donc il ne faut pas se baser que sur ça.

Pour l'émulateur, c'est que ta page n'est pas totalement valide.

Les téléphones sont très sensibles, teste avec la validateur du W3C

validator.w3.org

 

[John Smith]

Effectivement, il semble que j'ai un petit soucis avec l'utf8...

Sinon connais-tu d'autre site qui propose d'autres émulateur d'autres marques de mobiles ?

 

[nartconcept]

pour valider son site mobile il y a un validateur sur le site dev.mobi qui vous montre le poids, la vitesse de chargement, le coût par pays (on n'a pas encore d'illimité sur les portable), etc...

 

[John Smith]

pour valider son site mobile il y a un validateur sur le site dev.mobi qui vous montre le poids, la vitesse de chargement, le coût par pays (on n'a pas encore d'illimité sur les portable), etc...

Oui, c'est ce que j'utilise mais il me pénalise sur les valeurs absolues de mes css !

Sinon, j'ai une note de 4/5 à part ça !

 

[John Smith]

je récupère le fihier uaprof

$_SERVER["HTTP_X_WAP_PROFILE"];

et je vérifie dedans les infos qui m'intéresse, je rentre tout en base de donnée et je fais la comparaison à chaque visite.

Je reviens encore sur ce sujet ( ) mais si on teste la présence de la chaine MIDP dans la variable $_SERVER["HTTP_USER_AGENT"] pour faire la redirection, on détecte bon nombre de portables non ? Qu'en penses-tu ?

 

[Dandu]

Oui, mais tu n'as pas la résolution du portable, ni la taille max supportées.

Sans ces deux infos là, soit tu tapes les images en petit (genre 100 px) mais c'est pas génial pour les modèles récents, soit ça déforme les pages.

et si tu envoies des pages plus grosses que la limite du téléphone, ça plante en général.

en résolution (en largeur), ça varie entre 100 px (les très vieux), à 320 px (les récents en paysage), voir plus.

La limitation de page (page + css + image dans la page), ça varie de 3 Ko à 512 Ko environ.

C'est assez casse pieds de développer pour téléphones (en plus les navigateurs sont buggés).

 

[John Smith]

Merci de ta précieuse contribution. Je vais compulser toute ces infos !

 

[Cartman]

Sinon connais-tu d'autre site qui propose d'autres émulateur d'autres marques de mobiles ?

Je te conseillerais celui-ci:

-http://developer.openwave.com/dvl/tools_and_sdk/phone_simulator/

Dandu l'a bien dit, c'est assez casse-pied à developper. Certains anciens mobiles (3650) s'arrêtent en chargeant l’en-tête de mon site par example, d'autres plus récents (Nokia 3250) m'affichent en écran blanc lorsque je selectionne un lien. Dev.mobi me donne un 5/5 pourtant. Désesperant parfois.

 

[John Smith]

Merci. Je suis passé à 5/5 sur ma première page, le reste est à 4/5... Mais je ne pense pas que je vais suivre toutes les recommendations comme les valeurs relatives par exemple...

 

[Cartman]

Tu as raison. L'affichage parfait sur tous les mobiles étant trop lourd à réaliser, je pense qu'il vaut mieux se concentrer, à un certain point, sur le developpement du contenu.

Cheers, all