Bon, tout compte fait, je vais quand même essayer, j'ai rien d'autre à faire pour l'instant :3
Une autre question, mais là peut être que tu n'en sais rien : Sais-tu comment faire sur un site mobile pour forcer l'affichage de la version web ? Tu sais, le lien "Affichez la version PC" souvent disponible sur les versions mobiles d'un site ! Eh bien je cherche à faire la même chose !
Il faut un sous domaine. Le site mobile a le préfixe de domaine "m" en général. Genre m.monsite.fr et le lien version PC mène au domaine principal, donc monsite.fr. Les deux domaines ont un template graphique différent. L'un totalement responsive et l'autre pas. A l'arrivée de l'utilisateur sur le site, il est redirigé vers la version mobile si détecté comme étant sur tablette ou smartphone.
Il n'y a pas forcément besoin de sous-domaine. Après, la méthode pour empêcher le déclenchement des éléments responsive mobile dépend de la façon dont le site a été construit.
En regardant vite fait dans la documentation, il y a des fonctions toutes prêtes pour ça :
Et aussi une configuration à définir pour que le lock soit global et pas juste activé sur une seule page :
Attention par contre, cette lib semble utiliser la méthode du meta tag viewport, qui devrait fonctionner sur les navigateurs mobiles usuels, mais de souvenir c'est pas terrible, niveau support, sur les navigateurs desktop (du moins ça ne réagit pas comme sur smartphone, par contre certains implémentent le @viewport en CSS, mais ça n'a pas l'air d'être utilisé par Skel.js).
Donc pour tester le résultat, il vaut mieux que tu utilises ton smartphone, plutôt que de tenter de le faire avec ton navigateur desktop et en réduisant la taille de la page.
@Seldell On utilise de moins en moins cette technique, avec les media queries en CSS3 tu définis tes points de rupture où ton site doit basculer sur d'autres réglages CSS.
Colchope parlait explicitement d'un lien "Accéder à la version PC", ce qui n'est pas quelque chose qu'on trouve dans les designs responsives avec points de rupture
Je m'y connais clairement moins bien que vous, et je sais juste qu'une version mobile était prise en charge pour le template que j'ai utilisé. Après, ça n'a pas été très difficile de changer de trois trucs.
AlphaPizza, j'y connais que dalle en JS, donc si il faut que j'utilise ce qui est donné dans la documentation, je n'ai absolument aucune idée de comment le mettre en place.
Si tu dis que skel ne permet pas que ça se fasse en CSS, tant pis, de toute façon la version mobile sera probablement peu utilisée
Merci en tout cas pour ton commentaire précis, comme d'habitude !
Je signalais juste qu'un site responsive n'a, théoriquement, pas de lien "Accéder à la version PC" puisque c'est un design qui s'adapte tout seul à la taille de l'écran, indépendamment que l'utilisateur soit détecté comme étant sur mobile, tablette ou ordi. S'il y a un lien pour rejoindre une version PC, c'est que c'est un système avec un sous domaine dédié au mobile, et que l'utilisateur peut y avoir été dirigé par erreur car la détection peut échouer, d'où le lien pour permettre à l'utilisateur de rejoindre le domaine qui lui est réservé, avec l'agencement prévu, au cas où.
Le mode "Desktop", même sur un site responsive, n'implique pas forcément la présence d'un sous-domaine dédié (même si ça reste une technique valide).
Il "suffit" de désactiver les points de rupture "mobile" pour que le site ne déclenche pas les modes adaptés/dégradés malgré la taille de l'écran réduite.
C'est plus ou moins simple si on utilise une bibliothèque qui le gère de base (ce que skelJS semble faire), sinon faut mettre un peu la main à la patte et le faire sois-même avec un peu de Javascript et des cookies/localstorage/sessionstorage, ou du code serveur qui ne renvoi pas les css "mobile" si un cookie lui dit que l'utilisateur n'en veut pas.
Sinon, @ColChope, c'est vraiment pas compliqué d'utiliser les méthodes fournies par SkelJS, c'est l'histoire de quelques lignes à rajouter.
Dans ton fichier /js/init.js, à la fin du fichier, mais avant le "})(jQuery);" qui ferme le tout, rajoute ces quelques lignes :
Edit: j'utilise la base [quote] vu que la balise [code] semble cassée.
Ensuite, dans ton template HTML, rajoute une ancre ou un bouton qui aura pour id "#lockDesktop", par exemple : <button id="lockDesktop"></button>
Et c'est tout, normalement, sur mobile quand tu cliqueras sur le bouton, il rechargera la page en mode "bureau" (en réalité, ça force le viewport à 1440px de large, tu peux mettre la valeur que tu veux tant que ça dépasse la taille minimale qui fait passer en mode "mobile"). En recliquant sur le bouton, l'utilisateur repasse en mode "normal".
Désolé du retard, quelques bugs ont été résolu! Voici le ptit lien de l’exécutable, c'est une version sans installation si il y a des soucis je peux te passer sinon la version à installer (souvent un problème de framework que l'installateur inclus)
Le tuto:
Tu dois d'abords charger ton html ou ton CSS.
Tu peux le faire de 3 façon!
Par un lien relatif, l'exe doit être dans le dossier de ton site et tu tape juste "index.html" par exemple (le site peut etre plus tard "site/index.html" ou plus tôt "../index.html" dans l'arborescence bien entendu)
Par un lien absolu (exemple "C:/Users/ColChope/Documents/MonSite/index.html")
Par une url ("http://localhost/MonSite" par exemple en cas d'utilisation du PHP via un environnement WAMP, l'http:// est indispensable en cas de saisie d'URL)
Ensuite tu dois analyser l'html ou le css rentré, attention toutefois, le css doit être nickel et ne présenter aucunes erreurs d'accolade au risque de zapper des class/id, (les accolades et les class/id mis en commentaires sont pour l'instant compter et peuvent faire des erreurs dans l'analyse, ce sera corriger (en plus c'est simple à faire mais j'ai pas le temps ))
Idem les class/id doivent etre mis entre " " ou entre ' ' dans l'html sinon ça fait nawak (c'est aussi sur ma todo list)
Tu peux refaire ces deux étapes pour chaque fichiers de ton site ou en changeant les paramètres $_GET en cas d'utilisation du PHP, tu peux ensuite faire la comparaison entre les deux analyses et voir les class/id en trop depuis le css! (Je n'ai pas fait l'inverse avec l'html, les class/id pouvant servir dans les ancrages et le javascript sans pour autant être mis dans le css)
Le logiciel ne casse pas trois pattes à un canard mais ça peut toujours servir
D'ailleurs je me pose une question, dans quelle section je pourrai demander conseils pour un problème Algorithique/Mathematiques pour une implémentation dans un jeu? Le sujets n'est pas vraiment le jeu (ca concerne l'utilisation de courbe de bezier (ou d'autre spline) pour rendre un pathfinding moins lineaire), du coup je ne penses pas que la partie dédié a la création de jeu soit coherente
Bon, tout compte fait, je vais quand même essayer, j'ai rien d'autre à faire pour l'instant :3
Une autre question, mais là peut être que tu n'en sais rien : Sais-tu comment faire sur un site mobile pour forcer l'affichage de la version web ? Tu sais, le lien "Affichez la version PC" souvent disponible sur les versions mobiles d'un site ! Eh bien je cherche à faire la même chose !
Il faut un sous domaine. Le site mobile a le préfixe de domaine "m" en général. Genre m.monsite.fr et le lien version PC mène au domaine principal, donc monsite.fr. Les deux domaines ont un template graphique différent. L'un totalement responsive et l'autre pas. A l'arrivée de l'utilisateur sur le site, il est redirigé vers la version mobile si détecté comme étant sur tablette ou smartphone.
Trop de stress pour un si petit renard.
Il n'y a pas forcément besoin de sous-domaine. Après, la méthode pour empêcher le déclenchement des éléments responsive mobile dépend de la façon dont le site a été construit.
En regardant les sources de ta page, ton site semble utiliser la lib Skel.js pour switcher automatiquement les css à utiliser selon la taille de la fenêtre. Enfin, plutôt une ancienne version de Skel.js.
En regardant vite fait dans la documentation, il y a des fonctions toutes prêtes pour ça :
Et aussi une configuration à définir pour que le lock soit global et pas juste activé sur une seule page :
Attention par contre, cette lib semble utiliser la méthode du meta tag viewport, qui devrait fonctionner sur les navigateurs mobiles usuels, mais de souvenir c'est pas terrible, niveau support, sur les navigateurs desktop (du moins ça ne réagit pas comme sur smartphone, par contre certains implémentent le @viewport en CSS, mais ça n'a pas l'air d'être utilisé par Skel.js).
Donc pour tester le résultat, il vaut mieux que tu utilises ton smartphone, plutôt que de tenter de le faire avec ton navigateur desktop et en réduisant la taille de la page.
@Seldell On utilise de moins en moins cette technique, avec les media queries en CSS3 tu définis tes points de rupture où ton site doit basculer sur d'autres réglages CSS.
http://www.alsacreations.com/article/lire/930-css3-media-queries.html
Venez apprendre à créer des jeux vidéo avec la Communauté française de Construct : www.construct-french.fr
Colchope parlait explicitement d'un lien "Accéder à la version PC", ce qui n'est pas quelque chose qu'on trouve dans les designs responsives avec points de rupture
Marginal Gamers est fait avec les medias queries.
Trop de stress pour un si petit renard.
Seldell, je n'ai aucun sous-domaine moi.
Je m'y connais clairement moins bien que vous, et je sais juste qu'une version mobile était prise en charge pour le template que j'ai utilisé. Après, ça n'a pas été très difficile de changer de trois trucs.
AlphaPizza, j'y connais que dalle en JS, donc si il faut que j'utilise ce qui est donné dans la documentation, je n'ai absolument aucune idée de comment le mettre en place.
Si tu dis que skel ne permet pas que ça se fasse en CSS, tant pis, de toute façon la version mobile sera probablement peu utilisée
Merci en tout cas pour ton commentaire précis, comme d'habitude !
Je signalais juste qu'un site responsive n'a, théoriquement, pas de lien "Accéder à la version PC" puisque c'est un design qui s'adapte tout seul à la taille de l'écran, indépendamment que l'utilisateur soit détecté comme étant sur mobile, tablette ou ordi. S'il y a un lien pour rejoindre une version PC, c'est que c'est un système avec un sous domaine dédié au mobile, et que l'utilisateur peut y avoir été dirigé par erreur car la détection peut échouer, d'où le lien pour permettre à l'utilisateur de rejoindre le domaine qui lui est réservé, avec l'agencement prévu, au cas où.
Trop de stress pour un si petit renard.
Le mode "Desktop", même sur un site responsive, n'implique pas forcément la présence d'un sous-domaine dédié (même si ça reste une technique valide).
Il "suffit" de désactiver les points de rupture "mobile" pour que le site ne déclenche pas les modes adaptés/dégradés malgré la taille de l'écran réduite.
C'est plus ou moins simple si on utilise une bibliothèque qui le gère de base (ce que skelJS semble faire), sinon faut mettre un peu la main à la patte et le faire sois-même avec un peu de Javascript et des cookies/localstorage/sessionstorage, ou du code serveur qui ne renvoi pas les css "mobile" si un cookie lui dit que l'utilisateur n'en veut pas.
Sinon, @ColChope, c'est vraiment pas compliqué d'utiliser les méthodes fournies par SkelJS, c'est l'histoire de quelques lignes à rajouter.
Dans ton fichier /js/init.js, à la fin du fichier, mais avant le "})(jQuery);" qui ferme le tout, rajoute ces quelques lignes :
Edit: j'utilise la base [quote] vu que la balise [code] semble cassée.
Ensuite, dans ton template HTML, rajoute une ancre ou un bouton qui aura pour id "#lockDesktop", par exemple :
<button id="lockDesktop"></button>
Et c'est tout, normalement, sur mobile quand tu cliqueras sur le bouton, il rechargera la page en mode "bureau" (en réalité, ça force le viewport à 1440px de large, tu peux mettre la valeur que tu veux tant que ça dépasse la taille minimale qui fait passer en mode "mobile"). En recliquant sur le bouton, l'utilisateur repasse en mode "normal".
Génial Alpha, ça marche très bien !
Merci beaucoup à vous !
Désolé du retard, quelques bugs ont été résolu!
Voici le ptit lien de l’exécutable, c'est une version sans installation si il y a des soucis je peux te passer sinon la version à installer (souvent un problème de framework que l'installateur inclus)
Le tuto:
Tu dois d'abords charger ton html ou ton CSS.
Tu peux le faire de 3 façon!
Ensuite tu dois analyser l'html ou le css rentré, attention toutefois, le css doit être nickel et ne présenter aucunes erreurs d'accolade au risque de zapper des class/id, (les accolades et les class/id mis en commentaires sont pour l'instant compter et peuvent faire des erreurs dans l'analyse, ce sera corriger (en plus c'est simple à faire mais j'ai pas le temps ))
Idem les class/id doivent etre mis entre " " ou entre ' ' dans l'html sinon ça fait nawak (c'est aussi sur ma todo list)
Tu peux refaire ces deux étapes pour chaque fichiers de ton site ou en changeant les paramètres $_GET en cas d'utilisation du PHP, tu peux ensuite faire la comparaison entre les deux analyses et voir les class/id en trop depuis le css! (Je n'ai pas fait l'inverse avec l'html, les class/id pouvant servir dans les ancrages et le javascript sans pour autant être mis dans le css)
Le logiciel ne casse pas trois pattes à un canard mais ça peut toujours servir
D'ailleurs je me pose une question, dans quelle section je pourrai demander conseils pour un problème Algorithique/Mathematiques pour une implémentation dans un jeu? Le sujets n'est pas vraiment le jeu (ca concerne l'utilisation de courbe de bezier (ou d'autre spline) pour rendre un pathfinding moins lineaire), du coup je ne penses pas que la partie dédié a la création de jeu soit coherente
Pages