impératifs d'écriture pour les nouveaux médias ?

Le dimanche 17 janvier 2010 à 22:12, docanski a écrit :

Bonjour la foule,

Salut,

Quelle différence y a-t'il entre la création de pages pour iPhone et
autres iPod et la création de pages HTML + CSS destinées au Web ?

Outre le fait que ces produits Apple doivent pouvoir s'adapter au Web tel
qu'il existe aujourd'hui, il me semble que créer des pages pour iPhone et
autres iPod ressemble beaucoup à ce qui se faisait au siècle dernier
lorsque certains faisaient un Web optimisé pour les grosses parts de marché
de Microsoft Internet Explorer...
Même si le navigateur de l'iPhone est respectueux des standards, la plupart
des sites iphone.sitalacon.com qui existent actuellement ne « passent » pas
très bien sur d'autres navigateurs mobiles tout aussi rigoureux... alors si
ce n'est pas le but, autant, ÀMHA, éviter ;)

Quels sont par ailleurs les impératifs de mise en page pour ces médias
où l'affichage est nettement plus réduit en taille ?

Si ces équipements dotés de petits écrans ne peuvent pas afficher un seul
Web, il doit être possible d'utiliser des standards comme les Media Queries
pour éviter de faire un site web pour les grands, un autre pour la Safari
de l'iPhone, un autre pour Firefox Mobile sur N900 ou un autre pour Opera
sur la Nintendo Wii, baladeurs Archos ou Opera Mini sur quelques centaines
de téléphones mobiles à la taille d'écran très variable...

Depuis plusieurs années, Opera diffuse quelques conseils de développement
pour les navigateurs mobiles (et pas que les siens...), sur
http://dev.opera.com/articles/mobile/
par exemple :
http://dev.opera.com/articles/view/introduction-to-the-mobile-web/
http://dev.opera.com/articles/view/designing-and-developing-mobile-web-site-1/
http://dev.opera.com/articles/view/the-phone-factor-2/
http://dev.opera.com/articles/view/making-small-devices-look-great/

Cordialement,

@+
--
rm - http://opera-fr.com

On 18 jan, 08:51, rm <ra...@opera-fr.invalid> wrote:

Le dimanche 17 janvier 2010 à 22:12, docanski a écrit :

> Bonjour la foule,

Salut,

> Quelle différence y a-t'il entre la création de pages pour iPhone e t
> autres iPod et la création de pages HTML + CSS destinées au Web ?

Outre le fait que ces produits Apple doivent pouvoir s'adapter au Web tel
qu'il existe aujourd'hui, il me semble que créer des pages pour iPhone et
autres iPod ressemble beaucoup à ce qui se faisait au siècle dernier
lorsque certains faisaient un Web optimisé pour les grosses parts de ma rché
de Microsoft Internet Explorer...
Même si le navigateur de l'iPhone est respectueux des standards, la plu part
des sites iphone.sitalacon.com qui existent actuellement ne « passent » pas
très bien sur d'autres navigateurs mobiles tout aussi rigoureux... alor s si
ce n'est pas le but, autant, ÀMHA, éviter ;)

> Quels sont par ailleurs les impératifs de mise en page pour ces méd ias
> où l'affichage est nettement plus réduit en taille ?

Si ces équipements dotés de petits écrans ne peuvent pas afficher u n seul
Web, il doit être possible d'utiliser des standards comme les Media Que ries
pour éviter de faire un site web pour les grands, un autre pour la Safa ri
de l'iPhone, un autre pour Firefox Mobile sur N900 ou un autre pour Opera
sur la Nintendo Wii, baladeurs Archos ou Opera Mini sur quelques centaine s
de téléphones mobiles à la taille d'écran très variable...

Depuis plusieurs années, Opera diffuse quelques conseils de développe ment
pour les navigateurs mobiles (et pas que les siens...), surhttp://dev.ope ra.com/articles/mobile/
par exemple :http://dev.opera.com/articles/view/introduction-to-the-mobil e-web/http://dev.opera.com/articles/view/designing-and-developing-mobile-we ...http://dev.opera.com/articles/view/the-phone-factor-2/http://dev.opera.c om/articles/view/making-small-devices-look-great/

> Cordialement,

@+
--
rm -http://opera-fr.com

Bonjour,

Pour rebondir sur ce fil, existe-t-il des sites où il est possible de
visualiser un site tel qu'il est vu par tel ou tel équipement mobile ?

Merci.

www.grenault.net

Le lundi 18 janvier 2010 à 09:20, Guy a écrit :

Bonjour,

Salut,

Pour rebondir sur ce fil, existe-t-il des sites où il est possible de
visualiser un site tel qu'il est vu par tel ou tel équipement mobile ?

Certain navigateurs disposent de mode de rendu simulant des petits écrans
(Opera, menu Afficher > Petit écran, des extensions pour Firefox doivent
singer çà)
Sinon, Opera propose aussi un simulateur d'Opera Mini en ligne (JAVA
requis)
http://files.getwebb.org/index.php?mode=view&id=cre66fkv
Toujours pour les navigateurs mobiles d'Opera, il est possible de les faire
tourner sous Windows (et Mac/Linux pour Mini) via des émulateurs, voir :
http://www.opera-fr.com/wiki/wiki?OperaMiniSurVotrePC
http://www.opera-fr.com/wiki/wiki?OperaMobileSurVotrePC
L'émulateur Windows Mobile permettra bien évidemment de faire tourner aussi
SkyFire, NetFront Browser, Firefox Mobile, MSIE Mobile, IrisBrowser...

@+
--
rm - http://opera-fr.com

On 18 jan, 09:40, rm <ra...@opera-fr.invalid> wrote:

Le lundi 18 janvier 2010 à 09:20, Guy a écrit :

> Bonjour,

Salut,

> Pour rebondir sur ce fil, existe-t-il des sites où il est possible de
> visualiser un site tel qu'il est vu par tel ou tel équipement mobile ?

Certain navigateurs disposent de mode de rendu simulant des petits écra ns
(Opera, menu Afficher > Petit écran, des extensions pour Firefox doiven t
singer çà)
Sinon, Opera propose aussi un simulateur d'Opera Mini en ligne (JAVA
requis)http://files.getwebb.org/index.php?mode=view&id=cre66fkv
Toujours pour les navigateurs mobiles d'Opera, il est possible de les fai re
tourner sous Windows (et Mac/Linux pour Mini) via des émulateurs, voir :http://www.opera-fr.com/wiki/wiki?OperaMiniSurVotrePChttp://www.opera-fr.c om/wiki/wiki?OperaMobileSurVotrePC
L'émulateur Windows Mobile permettra bien évidemment de faire tourner aussi
SkyFire, NetFront Browser, Firefox Mobile, MSIE Mobile, IrisBrowser...

@+
--
rm -http://opera-fr.com

Merci.

En visualisant avec Opera et "Petit écran", cela donne effectivement
une idée : pas si mal, en fait...

Guy

Alors que les eleveurs et agriculteurs polluent toujours la Bretagne, rm
ecrit ce qui suit en ce 18/01/2010 08:51 :

Salut,

Yo !

Outre le fait que ces produits Apple doivent pouvoir s'adapter au Web tel
qu'il existe aujourd'hui, il me semble que créer des pages pour iPhone et
autres iPod ressemble beaucoup à ce qui se faisait au siècle dernier
lorsque certains faisaient un Web optimisé pour les grosses parts de marché
de Microsoft Internet Explorer...

Donc, c'est un problème d'implantation des normes, si je comprends bien
? Tu dis pourtant plus loin qu'il existe du Firefox Mobile, du Opera
Mobile et donc 2 navigateurs alternatifs. MSIE aurait réussi, là aussi,
à imposer son navigateur ? Si c'est le cas, pour développer une
application simple (un dictionnaire illustré par exemple), HTML 4.0 et
CSS 2 devraient pouvoir s'en sortir ?

Même si le navigateur de l'iPhone est respectueux des standards, la plupart
des sites iphone.sitalacon.com qui existent actuellement ne « passent » pas
très bien sur d'autres navigateurs mobiles tout aussi rigoureux... alors si
ce n'est pas le but, autant, ÀMHA, éviter ;)

Ils sortent des bons vieux standards où ils utilisent des "technologies"
multimédia du genre Flash, peut-être ?
Le but est simple : adapter un site Web aux portables actuels, qu'il
s'agisse de GSM, d'iPhone et autres supports de ce genre.

Si ces équipements dotés de petits écrans ... très variable...

Pour pouvoir permettre un affichage pour la majorité de ces produits,
comme les développeurs le font déjà pour le Web en partant du principe
que l'affichage doit être parfait dès qu'une fenêtre de 800 pixels de
largeur est ouverte, quelle serait la résolution à adopter pour être
plus ou moins universel ?

Depuis plusieurs années, Opera diffuse quelques conseils de développement
pour les navigateurs mobiles (et pas que les siens...), sur
http://dev.opera.com/articles/mobile/
par exemple :
http://dev.opera.com/articles/view/introduction-to-the-mobile-web/
http://dev.opera.com/articles/view/designing-and-developing-mobile-web-site-1/
http://dev.opera.com/articles/view/the-phone-factor-2/
http://dev.opera.com/articles/view/making-small-devices-look-great/

Je vais étudier cela. Merci pour ces liens.

Cordialement,
--
docanski

Portail et annuaire du nord-Bretagne : http://armorance.free.fr/
Guide des champignons d'Europe : http://mycorance.free.fr/
La vallée de la Rance maritime : http://valderance.free.fr/
Les côtes du nord de la Bretagne : http://docarmor.free.fr/

Le lundi 18 janvier 2010 à 10:53, docanski a écrit :

[...]

Outre le fait que ces produits Apple doivent pouvoir s'adapter au Web tel
qu'il existe aujourd'hui, il me semble que créer des pages pour iPhone et
autres iPod ressemble beaucoup à ce qui se faisait au siècle dernier
lorsque certains faisaient un Web optimisé pour les grosses parts de marché
de Microsoft Internet Explorer...

Donc, c'est un problème d'implantation des normes, si je comprends bien
?

Quel problème ? Il n'y a pas de problème, tant que le site est accessible à
toutes sortes de navigateurs modernes et est interopérable depuis n'importe
quelle plate-forme...

Tu dis pourtant plus loin qu'il existe du Firefox Mobile, du Opera
Mobile et donc 2 navigateurs alternatifs.

Il en existe beaucoup plus, presque autant que de navigateur pour station
de travail :)

MSIE aurait réussi, là aussi,
à imposer son navigateur ?

Non, sur plate-formes mobiles, Windows et donc Internet Explorer Mobile ne
sont pas en situation de monopole, aussi personne à ma connaissance ne
développe spécifiquement pour IE Mobile.

Si c'est le cas, pour développer une
application simple (un dictionnaire illustré par exemple), HTML 4.0 et
CSS 2 devraient pouvoir s'en sortir ?

Si le but est de faire simple, ce genre d'application devrait fonctionner
et s'adapter à n'importe quel écran ;)

Même si le navigateur de l'iPhone est respectueux des standards, la plupart
des sites iphone.sitalacon.com qui existent actuellement ne « passent » pas
très bien sur d'autres navigateurs mobiles tout aussi rigoureux... alors si
ce n'est pas le but, autant, ÀMHA, éviter ;)

Ils sortent des bons vieux standards où ils utilisent des "technologies"
multimédia du genre Flash, peut-être ?

Non, des sites comme mobile.pcinpact.com ou iphone.liberation.fr sont, à
première vue, respectueux des standards mais il ne sont pas toujours
agréables/pratiques à consulter sur des mobiles autres que ceux décorés
d'une pomme. Dommage.

Le but est simple : adapter un site Web aux portables actuels, qu'il
s'agisse de GSM, d'iPhone et autres supports de ce genre.

L'iPhone est un GSM comme un autre, doté d'un navigateur qui sait, comme
ceux d'Opera, de Netfront, de Nokia, de Mozilla... afficher du code pas
spécifiquement adapté aux mobiles.
Bon, après, tu peux essayer, comme chaque pages d'opera.com par exemple
d'optimiser l'affichage pour ces appareils dotés de petits écrans... tant
que ce n'est pas optimisé pour iPhone, ça devrait rester accessible :D

Si ces équipements dotés de petits écrans ... très variable...

Pour pouvoir permettre un affichage pour la majorité de ces produits,
comme les développeurs le font déjà pour le Web en partant du principe
que l'affichage doit être parfait dès qu'une fenêtre de 800 pixels de
largeur est ouverte, quelle serait la résolution à adopter pour être
plus ou moins universel ?

Il m'arrive de surfer mobile depuis un petit Motorola en 240x320 pixels,
d'un HTC en 480x800 pixel, d'un baladeux Archos en 800x480 pixels, donc il
ne me parait pas simple de rechercher l'universalité...
C'est fini, le temps des sites "optimisés pour des écrans 1024x768", non ?

Depuis plusieurs années, Opera diffuse quelques conseils de développement
pour les navigateurs mobiles (et pas que les siens...), sur
http://dev.opera.com/articles/mobile/
par exemple :
http://dev.opera.com/articles/view/introduction-to-the-mobile-web/
http://dev.opera.com/articles/view/designing-and-developing-mobile-web-site-1/
http://dev.opera.com/articles/view/the-phone-factor-2/
http://dev.opera.com/articles/view/making-small-devices-look-great/

Je vais étudier cela. Merci pour ces liens.

Bon courage :)

@+
--
rm

Alors que les eleveurs et agriculteurs polluent toujours la Bretagne, rm
ecrit ce qui suit en ce 18/01/2010 14:13 :

C'est fini, le temps des sites "optimisés pour des écrans 1024x768", non ?

Il est bien évident que mon but n'est pas de réaliser "des sites
"optimisés pour des écrans 1024x768"" mais de choisir une taille minimum
pour permettre cette sorte d'universalité dont je parle plus haut.
Savoir, par exemple, si un format de page de 320 pixels de largeur
serait à même d'assurer près de 100 % des compatibilités d'affichage
sans avoir recours au curseur de déplacement horizontal ou au "glissé".
Le problème est que c'est un format très petit et il serait évidemment
plus intéressant (à condition, toujours, de permettre autant que
possible, une lecture facile et agréable) de pouvoir passer à du 400,
480 pixels, par exemple.

Bon courage :)

Il faudra bien y passer si on ne veut pas se laisser larguer ...

Cordialement,
--
docanski

Portail et annuaire du nord-Bretagne : http://armorance.free.fr/
Guide des champignons d'Europe : http://mycorance.free.fr/
La vallée de la Rance maritime : http://valderance.free.fr/
Les côtes du nord de la Bretagne : http://docarmor.free.fr/

Le lundi 18 janvier 2010 à 14:50, docanski a écrit :

C'est fini, le temps des sites "optimisés pour des écrans 1024x768", non ?

Il est bien évident que mon but n'est pas de réaliser "des sites
"optimisés pour des écrans 1024x768"" mais de choisir une taille minimum
pour permettre cette sorte d'universalité dont je parle plus haut.

Si j'ai bien compris, les Media Queries de CSS3 permettent l'adaptibilité :
http://www.w3.org/TR/css3-mediaqueries/
« By using media queries, presentations can be tailored to a specific range
of output devices without changing the content itself. »

Opera supporte ce genre de raffinement depuis longtemps et est aujoud'hui à
ce niveau :
http://www.opera.com/docs/specs/presto23/css/mediaqueries/
Quelques articles liés sur
http://dev.opera.com/articles/tags/media%20queries/

Mozilla et Apple supportent aussi Media Queries, apparemment.
Donc, à défaut d'universalité, ça reste accessible à pas mal de navigateurs
sur pas mal de tailles d'écran.

@+
--
rm

On 18/01/2010 14:50, docanski wrote:

Il est bien évident que mon but n'est pas de réaliser "des sites
"optimisés pour des écrans 1024x768"" mais de choisir une taille minimum
pour permettre cette sorte d'universalité dont je parle plus haut.

Tout dépend de la nature de votre site. De l'expérience que j'en ai (et
j'ai rabaché cela nombre de fois ici), "faire un site pour mobile" ne
correspond pas à simplement adapter l'affichage. Il faut vous mettre
dans la peau de vos utilisateurs et déterminer ce qu'ils viennent
chercher sur votre site lorsqu'ils se connectent par un périphérique
mobile... Si vous avez une application en ligne, il y a à parier que
vous aurez nombre d'adaptations à réaliser dans l'ihm ! Un site de
contenu, proposer une navigation plus allégée, et peux être plus liée au
compte utilisateurs (articles favoris, sélection de sources, ...). Etc
etc...

Le 1/18/10 2:50 PM, docanski a écrit :

Savoir, par exemple, si un format de page de 320 pixels de largeur
serait à même d'assurer près de 100 % des compatibilités d'affichage

Mais qu'est-ce que c'est que cette notion de largeur en pixels
qui semble perdurer ...

Que tu réduises la fenêtre de ton navigateur à 250px de large pour y
voir comment réagissent tes pages à ce format est une chose,
Vouloir coder pour cette largeur ("format de page" dis-tu) est une erreur.
Faut que ça passe de 200 à 1800 px de large, zioup! hop! la!

sans avoir recours au curseur de déplacement horizontal ou au "glissé".
Le problème est que c'est un format très petit et il serait évidemment
plus intéressant (à condition, toujours, de permettre autant que
possible, une lecture facile et agréable) de pouvoir passer à du 400,
480 pixels, par exemple.

Est-ce que tu as pu tester ton site sur la démo du Mni-Opera ?
(sur le simulateur de mobile embarquant Opera)
<http://www.opera.com/mini/demo/>

Il y a quand même pas mal de choses qui passent bien.
Même s'il faut parfois "recadrer".

De cette démo en ligne il m'apparait que :
Opera semble réduire tt seul la largeur de lignes pour une lecture
facilité sur mobiles.
Les pages de largeurs (ou celles des conteneur de contenu) fixées en px
s'affichent genre vignette, les textes eux sont de largeur lisible à
l'écran dès qu'on a cliqué le recadrage sur eux.

Par exemple sur cette page (conçue aussi pour mobiles)
<http://my.opera.com/speeddial/>
on clique le recadrage et comme ça chacune des 2 colonnes est bien
lisible sur le phone.
(ton site champignons ne passe pas si mal, au moins les fiches)
(bien qu'on puisse y oublier de lire le commentaire)

Sur le site d'Opera ils semblent donner un truc pour compléter sa FdS
en l'adaptant pour les mini-écrans.
(si j'ai bien compris ? là ils ne causent pas fr)

@media all and (max-width: 500px) {
img { width: 80%; margin: 15% }

}

--
sm