+- JeuWeb - Crée ton jeu par navigateur (https://jeuweb.org)
+-- Forum : Discussions, Aide, Ressources... (https://jeuweb.org/forumdisplay.php?fid=38)
+--- Forum : Art, graphisme, audio (https://jeuweb.org/forumdisplay.php?fid=50)
+--- Sujet : S'adapter aux nouveaux terminaux internet (/showthread.php?tid=762)
S'adapter aux nouveaux terminaux internet - Jeckel - 27-12-2010
D’après certaines prévisions estiment qu’en 2011, seulement 10% des processeurs écoulés sur le marché seront à destination d’ordinateurs fixes.
C'est-à-dire que tout le reste (90%) sera à destination : de portables, de net book, de smart phone, de tablettes, d’eBookReader, de webTV (googleTV, appleTV, etc.) et autre systèmes embarqués.
Depuis un peu plus d’un an, on assiste à une mutation des terminaux utilisés pour naviguer sur le web, et là où avant on se cassait le cul pour que notre site fonctionne aussi bien avec Internet Explorer et Firefox, aujourd’hui nous devons anticiper un peu plus et nous adapter à des outils de plus en plus variés.
Avec la diversité de plus en plus grande des outils s’ajoutent donc des contraintes d’utilisations différentes : résolutions d’écran, interface de contrôle (clavier, souris, tactile, télécommande) et de couleurs (noir et blanc pour les eBookReaders ou problème de luminosité sur les tablettes et smartphones en extérieur)
Je ne compte pas ici, vous dire comment faire pour que votre site fonctionne partout, mais plutôt vous sensibiliser sur un certains nombre de trucs à faire ou ne pas faire, et quelques points à prendre en considération, libre à vous ensuite d’essayer de rendre compatible votre site avec une ou plusieurs de ces interfaces alternatives.
Une chose est sûre, ces interfaces se multiplient et se limiter à un site pour un écran fixe, un clavier et une souris est à mon goût une grosse erreur.
Résolution d’écran :
Je me souviens encore d’une époque où il fallait que la page du site tienne sur un écran en 800x600 pour tout ceux qui était encore sur un écran 14 pouces et Windows 95.
Puis le standard est passé à 1024, puis dernièrement 1280.
Aujourd’hui les écrans de la plupart des nets books ne dépassent pas le 1024, parfois même en dessous. Quand aux smart phones, on tourne au mieux à 800 pixels de large.
Pour les télés, c’est encore différent, sur un écran cathodique (il en reste encore beaucoup) le balayage rend la lecture de texte souvent difficile, une résolution de 640 est à conseiller. Les télévision numérique (écran LCD, télé HD) ont une meilleure résolution, et une lecture d’une résolution plus fine est possible, mais la distance de l’utilisateur par rapport à l’écran est en général plus grande que face à un ordinateur, il est donc conseillé de ne pas dépasser une résolution de 1024.
D’un autre côté, pour les ordinateurs fixe, la taille standard des écrans augmente à vue d’œil, de nombreux écrans vendu sont maintenant à 20 puces de diagonale ou plus, et ont donc une résolution de 1800 pixels de large…
On distingue donc trois familles :
- les grandes résolutions ( > 1280)
- les standard (1024 à 1280)
- les petites ( < 1024)
Pour les grandes résolutions : le truc, c’est de rapporter l’interface à une résolution standard, centrer votre site au milieu du navigateur, mettez des marges ou des bordures en dégradés et une couleur de fond unie ou une texture répétitive pour tout le reste. Attention à la grande image de fond qui finit par se répéter sur un grand écran.
Pour les résolutions standard, vous savez faire.
Pour les petites résolutions : plusieurs solutions...
- soit vous arrivez à faire en sorte soit élastique et puisse se réduire automatiquement pour les petits écrans
- soit vous proposez une CSS alternative qui remettra en page votre site pour s’adapter aux écrans plus petits sans toucher aux formats plus « standard »
- soit vous proposez une version alternative du site, plus light et adapter à ce type d’écran.
Interface de contrôle
Le clavier et la souris, c’est dépassé…
Non, j’exagère, mais ce n’est plus la seule interface possible.
Depuis 2 ans environs, les smartphones utilisent plutôt des écrans tactiles, de même, HP en premier (avec son TouchSmart) les ordinateurs fixes se mettent aussi au tactile, et maintenant c’est au tour des tablettes d’arriver sur le marché (iPad d’apple et Galaxy Tab de Samsung pour citer les deux plus importantes).
A côté, Apple en premier et Google ensuite sortent leur interface de navigation web via la télévision… je crois même que l’on peut en faire de même avec certaines consoles de jeu (à confirmer, je n’en ai pas) ces appareils sont dépourvu de souris et de clavier et utilisent à la place une télécommande ou un équivalent.
Qu’est ce que ça change me direz-vous ?
Et bien un truc très con : les "onMouseOver" ne fonctionnent généralement plus... ben oui, il n’y a souvent plus de curseur de souris à déplacer, on clique directement sur la zone à activer... adieu les jolies menus déroulants, adieu les infos bulles qui se déclenchent quand la souris passe au-dessus d’un élément.
Et pour les interfaces utilisant une télécommande, la navigation de lien en lien fonctionne généralement comme la touche Tab de votre clavier, c'est-à-dire que l’attribut « tabindex » que l’on utilise souvent heu... pas du tout... devient indispensable à la navigation.
Quand à la barre de statut du navigateur... elle n’existe tout simplement pas sur de nombreux terminaux.
Que faire ?
Ne supprimez pas tout de suites vos menus déroulant et vos infos-bulles !! Il faut surtout prévoir une solution alternative, c’est à dire que ce que vous proposer par des infos-bulles par exemple doit pouvoir être accessible par un autre moyen.
Utilisez judicieusement le tabindex
Et... oubliez la barre de statut du navigateur, de nombreux terminaux n’en ont pas, et de toute façon, personne ne la regarde.
Gestion des couleurs
Deux cas sortent de l’ordinaire :
- premièrement les eBookReaders (de type Amazon Kindle) qui utilisent des écrans à base d’encre électronique (eInk), cette technologie à l’avantage d’être très très me en énergie et de ne pas souffrir des reflets du soleil par exemple... les écrans à encre électronique ne sont pas lumineux et sont donc aussi facilement lisible que du papier imprimé. Leur inconvénient est d’être par contre en noir et blanc.
- Deuxièmement, l’utilisation de tablettes et de smartphone en extérieur, et en particulier quand il y a du soleil, les écrans deviennent souvent illisibles s’ils ne sont pas suffisamment contrastés
Pour rester utilisable sur ce type d’interface il suffit de se conformer aux règles élémentaires d’accessibilités : si vos interface est lisible par les daltoniens, elle sera probablement lisible sur les eBookReaders et autre smartphone… utiliser des contrastes forts pour les données importantes, pas de bleu sur du vert par exemple.
Conclusion
Voilà, je ne vous ais pas énuméré toutes les différences qui découlent de la diversité des terminaux Internet mais les plus importants, et pour ceux qui se sont déjà frotté aux problématiques d’accessibilité (faire en sorte que son site soit accessible au plus grand nombre, y compris les personnes handicapées ou à visibilité réduites) constateront que ces nouveaux terminaux apportent le même type de problèmes, et nécessite souvent le même type de correction.
Voilà, maintenant, il semble presque impossible de faire un site et une interface pouvant répondre à toutes ces contraintes, tout en restant esthétique et ludique. Par conséquent, la solution que moi (personnellement) je préconiserait c’est de construire votre site de manière à pouvoir rapidement, ajouter une interface adaptée au périphérique les plus courants, le plus souvent en proposant une CSS alternative suffit, et utiliser l’attribut "media" lors de l’insertion de la feuille de style et le tour est joué.
Le développement de l’informatique et d’Internet est très rapide, l’image d’Internet aujourd’hui est déjà très différente de ce que nous avions il y a seulement 3 ans (apparition de l’Internet mobile) et nous ne pouvons pas savoir ce qu’il en sera dans seulement 2 ans... alors il faut anticiper, éviter tout ce qui peut, plus tard, nous empêcher de nous adapter à de nouvelles forme de navigation.
RE: S'adapter aux nouveaux terminaux internet - Sephi-Chan - 27-12-2010
(27-12-2010, 05:13 PM)Jeckel a écrit : Pour les petites résolutions : plusieurs solutions...
- soit vous arrivez à faire en sorte soit élastique et puisse se réduire automatiquement pour les petits écrans
- soit vous proposez une CSS alternative qui remettra en page votre site pour s’adapter aux écrans plus petits sans toucher aux formats plus « standard »
- soit vous proposez une version alternative du site, plus light et adapter à ce type d’écran.
À ce sujet, j'invite tout le monde à jeter un œil au site de Simon Collison (http://colly.com/) et de jouer avec la largeur de la fenêtre.
Une très bonne lecture également : Rethinking the Mobile Web by Yiibu.
Sephi-Chan
RE: S'adapter aux nouveaux terminaux internet - Jojodu42 - 27-12-2010
Merci beaucoup pour ce topic très enrichissant Jeckel !
+1
RE: S'adapter aux nouveaux terminaux internet - niahoo - 27-12-2010
OUi merci pour ce résumé c'est instructif. Cela dit, personnellement je vise une interface pour PC uniquement. Dans un temps lointain et secondaire je réfléchirai surement à l'implémentation d'accès via mobiles (par exemple pour wow ou eve online : accès aux ordres d'achat et vente sur le marché, un truc dans le style mais probablement pas les fonctionnalités complètes du jeu.)
RE: S'adapter aux nouveaux terminaux internet - Argorate - 27-12-2010
Hello,
Pour ma part, les tablettes et les portables ne sont et ne sont pas fait pour allez sur le net... C'est juste une fantésie (érésie) des hommes dans une scociété de consomation qui pouse a faire des "inovations" (parfois inutile) et donc qui a créé des produits qui tente de s'adapter et de se rendre compatible au net deja existant alors que ce n'est pas du tout ça fonction d'origine. (meme si je reconnais entièrement que certains aspects peuvent etre utile, genre gps et autre)
Cependant, je suis un puriste pur et dur pour ce qui est de l'informatique; c'est pas a moi de m'adapter au portable, c'est au portable de simuler un PC. Si on veux utiliser l'informatique faut pas le faire avec un outils totalement limité! Clavier, souris, c'est dépassé dis-tu? Moi je trouve qu'il n'y a que ça de vrai! Je ne supporte pas le tactile totalement imprécis et où on ne resens plus rien à se qu'on fait/touche, et de fait, est beaucoup plus limité/improductif (sans parler de la taille de l'"écran"...).
L'exemple du onmouseover est un parfait exemple de non progrés (régression) du tactile ... En effet, Une tablette (ou interface tactile en generale) est par definition pas assez évolué pour faire se qu'une simple souris peut faire, c'est un fait. (tu donnes suffisament d'exemples, je ne vais pas les reprendre, ni en ajouter).
Bref, la dessus j'en connais certains qui vont grogner, mais chacun ses avis fonder sur les expériances qu'il a eut, et en bref, il y a deja pas mal de soucis entre les différences résolution d'ecran, si en plus on s'auto limite dans les posibilités d'interface sous prétexte que certains utilisent des outils pas assez avencé, je trouve ça térible, car anti-évolutif!
Sur ce bonne soirée et merci pour ta syntèse Jeckel^^
RE: S'adapter aux nouveaux terminaux internet - Jeckel - 27-12-2010
@argorate : je comprend très bien ton point de vue et, en partie, je le partage...
Le fait est qu'il ne s'agit pas ici de notre point de vue à nous (créateurs de jeu web) qui importe, mais plutôt celui de nos utilisateurs, et par conséquent du publique.
Peu importe ce que je préfère utiliser, le fait est que le PC tel qu'on le connait n'est plus le seul et unique moyen d'utiliser un jeu web.
Tout comme on peut préférer utiliser Internet Explorer, Firefox ou Chrome... aujourd'hui on peut utiliser un PC, une tablette ou une WebTV.
Il existe toujours des sites "optimisé" pour Firefox et Chrome et qui font l'impasse sur Internet Explorer par exemple.
Il existe maintenant simplement un niveau supplémentaire correspondant au terminal.
A chaque de choisir vers quels publique il souhaite s'orienter, et sur quels publics il souhaite faire l'impasse.
RE: S'adapter aux nouveaux terminaux internet - Sephi-Chan - 28-12-2010
Argorate, je crois que tu n'as pas saisi le principe-même du Web : l'accessibilité. En effet, le Web a pour but d'être accessible qu'on soit sur un téléphone, un ordinateur, une tablette, une télé, un lecteur, une tablette braille. Les formes peuvent différer, les procédés de pointage aussi, mais là est bien l'essence du Web.
En tant que créateur de jeu, on a détourné l'usage premier du Web pour finalement créer du contenu ludique, souvent inaccessible. Réduire encore la masse d'utilisateurs ciblées par ces jeux est-il un mal ? A chacun de décider selon ses motivations : plaire aux gens, être disponible au plus grand nombre, générer de l'argent ou que sais-je encore.
(27-12-2010, 09:48 PM)Argorate a écrit : Cependant, je suis un puriste pur et dur pour ce qui est de l'informatique; c'est pas a moi de m'adapter au portable, c'est au portable de simuler un PC. Si on veux utiliser l'informatique faut pas le faire avec un outils totalement limité! Clavier, souris, c'est dépassé dis-tu? Moi je trouve qu'il n'y a que ça de vrai! Je ne supporte pas le tactile totalement imprécis et où on ne resens plus rien à se qu'on fait/touche, et de fait, est beaucoup plus limité/improductif (sans parler de la taille de l'"écran"...).
Si je peux comprendre qu'on n'aime pas le tactile, j'ai rarement lu quelque chose d'aussi bête que ta première phrase… Quel manque de réflexion ! Une fois de plus, tu es complètement déconnecté de la réalité et de ce que veulent les gens.
Tu occultes complètement le potentiel des terminaux tactiles et/ou mobiles :
- L'accéléromètre, qui permet de détecter des mouvements ou l'orientation (portait/paysage) ;
- La géolocalisation (pour une machine mobile) ;
- Le multi-touch, qui permet d'avoir plusieurs points de contact ;
Il peut faire tout ça ton PC, avec sa souris ? Rien que ces trois éléments peuvent permettre de créer de bons jeux. D'où crois-tu que vient le succès de l'iPhone (et d'autres smartphone) en tant que plateforme de jeu ?
L'idée n'est pas de faire un même jeu pour tous les terminaux, mais d'être conscient des forces de chaque plateforme.
Citation :Configuration Minimale : Internet Exploreur 7.0 ou FF 3.x, en 1280 x 800. (En 1024, cela fonctionne mais je ne garenti pas qu'il n'y est pas de scroll horizontale).
Configuration Optimale : Maxthon browser ou Firefox en 1680 x 1050.
Pourquoi faire si compliqué ?
Sephi-Chan
RE: S'adapter aux nouveaux terminaux internet - Argorate - 28-12-2010
Je pense que ce n'est qu'une affaire de définition.
Internet est un réseau informatique d'ordinateur qui permet de relier chaque poste individuel. Le hic, c'est qu'un portable (téléphone) n'est pas un ordinateur pour moi, et tant qu'on ne poura pas faire d'holograme comme dans star wars, cela restera juste un machin rectangulaire assez petit sans interface homme machine digne de se nom (et qui optionnelement sert a téléphoner). Mais ça après c'est une interprétention totalement personnel, on est bien d'accord, on est justement là pour discuter de nos divers point de vue je pense.
Pour se qui est de L'accéléromètre, c'est assez marant que tu en parles, car pas plus tard que tout a l'heure, ma chérie me montré le jeu "alchimie" (j'aime bien le principe, ça m'a rappelais 630km
) de son mega, giga portable tactile, et j'ai été fichetrement agacé lorsque je me suis alongé tranquilement sur le coté et qu'il a commencé a mettre l'image de traviole... mais bon ça c'est anecdotique je te l'acorde.Plus serieusement, le fait de pouvoir tourner le sens de l'écran n'a aucune utilité pour moi, mais je peux comprendre que ça amuse certain de tourner le portable et de voir que ça bouge (très comercial tout ça, ça fait style d'etre a la pointe de la technologie alors que c'est useless au possible ^^)
Quand a l'argument "c'est utile pour voir les les films dans le sens de la longueur" ne me convint pas puisque, grand cinéphile que je suis, c'est une honte de regarder SGA (par exemple) sur 50cm²... mais là encore, c'est sans doute une apréciation personnel.
En revanche comme je l'ai précisé dans mon post antérieur, l'interet du gps peut se justifier, là je trouve ça très pratique et une bonne idée qui a été exploité, mais rien avoir avec des jeux...
Quand au multi tuch, je trouve l'idée en soit potencielement interesante, mais il y a perte d'interet du fait que se soit combiner avec le tactile à mon sens, après il faut voir qu'es ce que pourait faire le multi tuch de réelement utile que ne pourait pas faire un PC normal? je n'y ait pas vraiment réfléchit a vrai dire.
Peut etre ai-je tors, mais je reste un inconditionnel du PC, rien n'est plus puissant (le reste n'est qu'une imitation a moindre mesure), et j'attend impatiament la vrai prochaine révolution dans le domaine, pas une n-ième bidouille électronique, mais une vrai avancé dans l'histoire : le pc quantique! Il parait qu'ils n'en sont plus très loin j'ai vu ça dans science & vie, ça va donner !
PS: pour mon site, la chose est en cours de traitement, la v0.2 sera bcp moins "compliqué" comme tu dis, j'en reparlerais quand se sera en place.
RE: S'adapter aux nouveaux terminaux internet - Sephi-Chan - 28-12-2010
Je comprends mieux pourquoi tu vomis sur les fonctionnalités : c'est parce que tu n'arrives pas à imaginer l'impact qu'elles peuvent avoir sur les jeux.
Regarde les accéléromètres, c'est quand même plus intuitif de guider un véhicule en se servant du téléphone comme d'un genre de volant virtuel que d'utiliser un clavier. Avec les accéléromètres, tu as accès aux mouvements sur les 6 axes. Ça peut être sympa pour un jeu de pilotage, mais aussi pour un jeu d'adresse, ou même un beat'em all.
Prends l'orientation : ça peut servir pour un jeu de plateforme dont la gravité pourrait venir des différents bords de l'écran : pour éviter un "trou", il faudrait pencher l'écran pour être attiré par la gravité d'un autre bord.
Quant au multitouch, il est intimement lié au tactile. Le tactile est une interface évidente et directe avec la machine : bien plus qu'une souris ou un clavier. Des utilisations ont été faîtes avec des jeux comme Guitar Hero, aucun doute qu'il y en a bien d'autres.
Enfin, la géolocalisation a bien des applications en terme de jeu : un jeu de rôle grandeur nature, par exemple.
Et tout ça ne sont que des exemples simples et assez évident. En réfléchissant, on doit pouvoir imaginer des trucs géniaux. Forcément, il faut y réfléchir un peu, mais ne dis pas que c'est useless ou commercial alors que tu n'as pas pris le temps de réfléchir aux enjeux.
C'est drôle, tu parles de l'ordinateur quantique comme une révolution, alors qu'il n'apporterait rien d'autres que des performances monstrueuses… Aucune évolution pour l'utilisateur. Ce sera bien une avancée pour l'informatique, mais pas pour les créateurs de jeux…
Sephi-Chan
RE: S'adapter aux nouveaux terminaux internet - niahoo - 28-12-2010
Quid des PC avec écran tactile ?