Application web pour PC, tablette et smartphone : modes portrait/paysage

Bonjour,
Je suis en train de coder un jeu réalisé auparavant avec le logiciel Renpy (basé sur du python simplifié) pour le transformer en appli web qui puisse être compatible sur tous supports et simple à accéder.

Il y a 4 niveaux. Chaque niveau mène à un plan de Paris avec des boutiques ou monuments à cliquer (image Map). Chaque lieu mène à un mini-jeu de français. Par exemple, une question est posée et il faut cliquer sur une image parmi 4 ou 5 pour répondre à la question. La question est choisie aléatoirement entre 4 ou 5 possibilités à chaque fois qu'on relance le mini-jeu et la position des images change.
Autre exemple: il faut écrire ou recopier un mot parmi plusieurs. Les réponses sont données sous forme graphique principalement, avec juste une phrase pour féliciter le joueur ou l'engager à recommencer. Le texte peut parfois s'afficher à un emplacement précis de l'image et dans certains mini-jeux, l'image peut être transformée pour faire mieux comprendre la réponse.

J'ai commencé à tester un des mini-jeux avec un peu de html et de javascript et cela fonctionne sur mon tel portable aussi bien que sur Firefox et Chrome.

Malheureusement, l'image du jeu (800*600px) se retrouve toute petite sur le téléphone en mode portrait (l'écran affiche aussi une partie du fond du body, sur le côté droit) et je ne sais pas comment la mettre en mode paysage. :(

Y a-t-il une propriété css ou une méthode en javascript permettant d'effectuer la rotation sans pour autant créer une version spéciale pour les téléphones ?
Puis-je au moins afficher l'image sur toute la largeur de l'écran en mode portrait ?

D'autre part, puis-je me passer de php et d'Ajax afin que les personnes n'ayant pas de connexion internet chez eux puissent bénéficier du jeu et s'entraîner à la maison?

La rotation de l'écran est gérée par le téléphone, pour avoir le site en mode paysage l'utilisateur doit tenir son téléphone en mode paysage et avoir activé la rotation auto de l'écran.

Tu peux appliquer des règles CSS spécifiquement pour les orientations portrait/paysage à l'aide de media queries

Code:

---

1 2 3 4 5 6 7

@media only screen and (orientation : landscape) { /* Styles pour cette Media Query */ }   @media only screen and (orientation : portrait) { /* Styles pour cette Media Query */ }

---

Concernant le mode déconnecté, tout dépend du rôle du serveur dans ton jeu. Si la logique de jeu est côté client (pas de PHP), alors oui en théorie c'est possible à l'aide de l'applicationCache. Quelques liens pour en savoir plus :
http://f-lefevre.developpez.com/tuto...html5/offline/
http://xhtml.developpez.tv/#zenika-p...ers-html5-2010
(ils datent un peu, ne pas hésiter à chercher des infos plus fraîches)

Merci, j'ai pu tester aujourd'hui, après avoir amélioré un peu mon code pour afficher la réponse de façon graphique et non plus textuelle.

Je n'utilise pas beaucoup mon portable à part pour téléphoner, il va falloir que je m'y intéresse davantage. :oops:

Mon problème est maintenant qu'en orientation paysage, le format 800*600 que j'ai adopté ne convient pas trop, il me faudrait un format 16/9, je pense. Pas trop compliqué à réaliser, même si le plan de Paris n'est pas trop adapté pour cela !

Malheureusement, les formats sont tellement variés que c'est un peu compliqué de s'adapter à tous. Tes conseils sur les CSS me seront précieux pour la suite de mon travail. :D

Pour l'utilisation ou non de PHP, je vais voir un peu en ajoutant d'autres jeux si je peux tout faire côté client, je pense que ce serait préférable.

Citation:

---

Envoyé par doudoulolita

Malheureusement, les formats sont tellement variés que c'est un peu compliqué de s'adapter à tous. Tes conseils sur les CSS me seront précieux pour la suite de mon travail. :D

---

Même si la grande variété de formats décourage beaucoup de devs, ça reste tout à fait dans le domaine du faisable une fois qu'on a les bases techniques et la bonne méthodologie. Si tu veux tous mes conseils, j'ai écrit un bouquin de 150 pages sur comment concevoir des sites web pour toutes les plates-formes. Une bonne partie du livre est accessible gratuitement en ligne : http://books.google.fr/books?id=XL7KAwAAQBAJ

Merci pour le lien. J'ai déjà pas mal à lire sur le javascript mais quand j'ai un moment, je me mets à ton livre !