Déviation conditionnel Home page

Réduire
X
 
  • Filtrer
  • Heure
  • Afficher
Tout effacer
nouveaux messages

  • Déviation conditionnel Home page

    Bonjour les amis,

    J'aimerais dévier les utilisateurs Windows vers une Home page alternative.

    (En fait, idéalement, pour ceux qui ont un écran haut de gamme, ce serait pas nécessaire. Mais bon faut pas rêver...)

    Le site en question est superbe sur Mac, mais sur PC (avec écran bas de gamme), c'est pas terrible.

    Je peux facilement créer des pages spécial PC avec un profil adapté (autre police) car j'utilise un template Yootheme qui le permet. Mais je ne sais pas du tout comment, ou plutôt quelle est la meilleure façon, d'automatiser cette déviation au moment de l'arrivée sur la Home page.

    Est-ce que ce script vous paraît convenable ???

    <SCRIPT>
    page = ((navigator.platform.indexOf('Win') > -1) ? "win.html" : "mac.html");
    window.location=page;
    </script>

    D'avance merci.

    BT
    Dernière édition par carbonathus à 06/01/2013, 00h33

  • #2
    Re : Déviation conditionnel Home page

    Bonjour,

    Il faut que tu adaptes ton fichier css et non rediriger vers un page.
    Si tu n'as pas la même chose sous Mac que sous Windows ce n'est pas normal, ou alors c'est qu'il manque des polices.

    Il faut à mon avis débugger ta feuille de style.

    Voici quelques pistes:

    Tu peux utiliser les commentaires conditionnels pour détecter si c'est un windows ou pas et adapter ta feuille de style

    Exemple issu de html5 boilterplate
    Code:
    <!DOCTYPE html>
    <!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
    <!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
    <!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
    <!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
    Si c'est fonction de la dimension de ton écran tu peux jeter un coup d'oeil sur les media queries mais c'est du css3.
    Sinon avec mootools je crois que c'est
    Code:
    window.getSize()
    Enfin la redirection n'est à mon avis pas la solution.

    Damien.
    www.Crac-Design.com

    Commentaire


    • #3
      Re : Déviation conditionnel Home page

      Salut Damien,

      C'est vraiment super sympa tes infos.

      Mais il s'agit vraiment d'une question de qualité d'écran. J'ai installé le font QuickSand, que je j'apprécie beaucoup, très proche de celui utilisé par la chaîne de TV Antenne 2 (qui a un très beau design à mes yeux). Mais c'est un font super "Light" qui s'affiche super bien sur les Macs (et encore mieux avec un écran Thunderbold) mais nettement nettement moins bien sur des écrans bas de gamme généralement utilisés par les PC. A remarquer qu'avec un écran de qualité, le PC l'affichera tout aussi bien que le Mac. Mais à remarquer aussi que c'est souvent les pros qui investissent dans l'écran, la grande majorité des utilisateurs PC ont des mauvaises résolution (écran à 3 ou 400 euros). Et donc, c'est à prendre en compte.

      Il doit aussi y avoir un problème de licence, parce que étonnamment, IE sur PC (bas de gamme), l'affiche plutôt mieux que les autres navigateurs (opera catastrophique). Avec IE, c'est acceptable, pas mal du tout ! Marrant ça d'ailleurs....

      Cela dit, ma "cliente" (qui a un Mac) adore cette police (qui personnalise bien son site) et ne veut pas en changer. Moi, en tant que Webmaster, je suis obligé de lui dire qu'il n'est pas possible d'ignorer les PC. D'où la demie mesure, ou le compromis, de la redirection vers un profil du site avec un autre font et d'autres CSS (pour les alignements surtout). En soi, ce n'est pas un très gros boulot, c'est jouable... Mais je suis d'accord, dans le principe c'est vraiment pas terrible (uniformité etc).

      Je vais convaincre la "cliente" de renoncer à cette Police (c'est aussi de ma faute, j'aurais dû vérifier plus vite sur PC).

      Mais quand même, la redirection est un sujet qui m'intéresse, ça peut dans certains cas s'avérer pas mal (pour iPhone et autres nouveaux appareils aux résolutions mini, ou redirection en fonction de l'IP ou.....). J'aimerais bien maîtriser cette fonction.

      L'idéal serait sûrement un code php, mais là, c'est mon grand regret : je ne code pas encore en php (j'envisage une formation). Le java est plus simple, même si pour lui aussi, je dois faire attention, c'est une porte pour le piratage et je ne le maîtrise pas assez pour être sûr que je ne prends pas de risque.

      C'est pour ça que j'ai lancé ce post.

      Mais ce que tu me présentes est intéressant, ça pourra aussi être très utile dans une autre circonstance. Je le garde :O)

      Voilà voilà, je pense que tu vois mieux ce que je voulais dire.

      Bonne journée à toi.

      BT

      Commentaire


      • #4
        Re : Déviation conditionnel Home page

        Dans ce cas pour une redirection:
        Code:
        var size = window.getSize();
        if(size.x<1000){
            document.location.href="pc.html";
        }
        C'est pas sur l'OS qu'il faut que tu joues mais sur la taille écran voir peut être sur l'affichage rétina Apple.

        T'aurais une adresse ou on peut voir ça, j'aimerais quand même bien voir cette différence en réel. (en mp si tu veux pas le poster sur le forum)

        Damien
        www.Crac-Design.com

        Commentaire


        • #5
          Re : Déviation conditionnel Home page

          Ok, je t'ai envoyé un message.

          Voici le lien : http://www.espace-alpha.net

          C'est clair que j'ai fait une erreur. Web fonts, je me suis dit c'est bon ! mais..... aïe pas si sûr.

          Quelle solution choisir : changement de fonts (tout simplement- mais ça plaît pas à la "cliente") ou redirection en fonction de l'OS ou de la taille écran ou, ce qui serait peut-être encore mieux, de la résolution en dpi (Mais là, certainement qu'il faut les calculer.... ça je sais pas.)

          Dans tous les cas, vos idées et conseils sur la redirection (avec un bon codage) est un sujet qui m'intéresse beaucoup.

          Et vos avis sur cette question en général seront super bienvenus et j'espère qu'ils pourront être utiles aussi à d'autres.

          @mitiés et remerciements d'avance.

          BT
          Dernière édition par carbonathus à 07/01/2013, 19h48

          Commentaire


          • #6
            Re : Déviation conditionnel Home page

            Il y a un de mes posts qui a disparu.
            Bizarre.

            Je disais donc qu'à mon avis le problème vient du lissage des polices qui n'est pas le même sur ie que sous osx.

            Je pense que la meilleure solution c'est de changer de police sous IE si tu veux vraiment garder cette police pour le reste.
            Dans ce cas il faut utiliser un commentaire conditionnel dans le head pour ajouter une feuille de style spéciale IE qui surchargera la font.
            Code:
            <!--[if lt IE 8]>
                <link rel="stylesheet" type="text/css" href="style.css">
            <![endif]-->
            Damien
            www.Crac-Design.com

            Commentaire


            • #7
              Re : Déviation conditionnel Home page

              Oui, très intéressant ce code conditionnel dans le Head. C'est déjà une super infos cette façon de poser le truc.

              Cela dit Damien, si tu regardes bien le site, IE affiche plutôt assez bien ce font sur un PC (même sur écran bas de gamme).

              Sur PC, (écran bas de gamme) c'est même le seul à bien l'afficher (Safari, Opera ou même Firefox le font nettement moins bien).

              Donc faudrait plutôt ajouter une feuille de style pour tous, sauf IE et Mac. (c'est bien la première fois que IE me surprend en bien), ce qui serait un peu bizarre comme test.

              Concernant IE, j'ai lu qu'en fait, IE avait beaucoup investi dans le @Font-face CSS. Bref ils sont forts dans ce domaine.


              Comme tu dis, c'est plutôt le lissage qui est en cause (c'est aussi mon avis), et d'après moi, c'est la définition de l'écran en dpi, qui fait vraiment la différence. (peut-être que je me trompe avec cette théorie ???)

              J'ai deux PC chez moi, celui que j'ai installé avec un vieil écran Mac (qui était sur mon ancien Power Mac), affiche parfaitement le font. Et je pense que d'autres marques d'écran avec une bonne définition le feront aussi très bien. Mais l'autre PC (écran nul), affiche très mal ce fonts.

              Au final pour moi, c'est pas le navigateur ni vraiment Mac ou PC qui fait la grosse différence, c'est les Dpi de l'écran. (mac = 72 / PC= généralement autour des 96 ou >). C'est aussi ce qui fait que tout est toujours plus gros sur PC (sur écran bas de gamme seulement)

              Alors existe-t-il un moyen de tester les dpi dans ce code conditionnel ??? ça serait, à mon sens la vraie solution.

              Et c'est pour ça que pour faire plus simple, au début, je pensais carrément tester PC (qui lissent bien seulement avec un bon écran) ou Mac (qui lissent toujours très bien) ? Et ne laisser cette police que pour les Mac.

              En conclusion et à mon avis, pour ce problème c'est soit on trouve un truc (si il existe ce truc) pour tester les dpi du visiteur

              Soit, solution de facilité, je change de font pour me débarrasser du problème (ce que je vais plutôt faire, si vraiment il n'y a pas de formule dpi).

              Est-ce que tu es d'accord avec cette conclusion que c'est les dpi qui font la différence ?

              Et est-ce que tu connais un test pour ces dpi ?

              Si tu réponds à ça, alors là, tu es plus que cool ! parce que je suis conscient que dans le genre pénible, là, je suis au sommet :O)

              Un grand merci pour ton attention, en tous cas.

              Blaise
              Dernière édition par carbonathus à 07/01/2013, 22h50

              Commentaire


              • #8
                Re : Déviation conditionnel Home page

                Eh ben non, je ne suis pas cool!
                A ma connaissance il n'y a pas de solution pour connaitre ces dpi et je ne crois pas que ça fasse la différence.

                C'est vraiment le lissage qui va faire la différence. Ça se configure directement dans windows.
                Je te laisse faire l'essai j'ai pas de PC sous la main. (A partir de windows 7 le lissage est activé par défaut).

                Te prends pas trop la tête non plus les gens qui visitent ton site on aussi un des polices pourries sur les autres sites. Ils ne feront pas la différence.

                Damien
                www.Crac-Design.com

                Commentaire


                • #9
                  Re : Déviation conditionnel Home page

                  Mais si, très cool. no problem...

                  J'ai trouvé un site qui teste ces fonts et Google fonts pour les deux plateformes. La prochaine fois, j'irai y faire un tour avant d'installer et je vérifierai avant de trop avancer.

                  En plus, j'ai confondu dpi (point par pouce) avec ppi (pixel par pouce). C'est le ppi qu'il me faudrait (le dpi c'est pour les imprimeurs).

                  (donc remplacer dpi par ppi dans toutes mes réponses précédentes)

                  Le problème semble assez courant.

                  Eh c'est comme ça qu'on apprend.

                  J'ai visité ton site. Super bien présenté.

                  Bonne journée

                  B
                  Dernière édition par carbonathus à 08/01/2013, 09h18

                  Commentaire


                  • #10
                    Re : Déviation conditionnel Home page

                    Après quelques recherches, il me semble comprendre que le problème si situe au niveau du pixel-ratio.

                    Même si le lissage est aussi important. Les deux le sont si je comprends bien (et ça explique certaines choses d'ailleurs)

                    Généralement utilisé pour changer d'image en fonction de ce ratio (ou densité des pixels).

                    Je crois que je vais poster un nouveau sujet.

                    2 articles intéressants :

                    http://css3.bradshawenterprises.com/...-for-new-ipad/

                    http://wdfriday.com/blog/2012/06/ada...ecrans-retina/


                    J'aimerais déjà tester ce qu'une fonction php (ou script java) retourne comme résultat pixel-ratio sur mes différents écrans (dont un bas de gamme). A partir de là, je pourrais peut-être mieux définir une condition et une redirection.

                    Voilà deux codes qui me semblent s'approcher de ce que je cherche (sauf qu'ils changent d'image là où moi je souhaiterais une redirection) :

                    --------------------------

                    De la même manière que l’on peut détecter les largeurs d’un écran en CSS, l’exemple suivant vous permet de cibler sa densité de pixels. Notez que la propriété s’applique à tous les navigateurs pouvant l’interpréter.

                    @media only screen and (-webkit-min-device-pixel-ratio: 1.5),
                    only screen and (-o-min-device-pixel-ratio: 3/2),
                    only screen and (min--moz-device-pixel-ratio: 1.5),
                    only screen and (min-device-pixel-ratio: 1.5) {
                    /*vos styles ici*/
                    }


                    -------

                    1. // Set pixelRatio to 1 if the browser doesn't offer it up.
                    2. var pixelRatio = !!window.devicePixelRatio ? window.devicePixelRatio : 1;
                    3. *
                    4. // Rather than waiting for document ready, where the images
                    5. // have already loaded, we'll jump in as soon as possible.
                    6. $(window).on("load", function() {
                    7. if (pixelRatio > 1) {
                    8. $('img').each(function() {
                    9. *
                    10. // Very naive replacement that assumes no dots in file names.
                    11. $(this).attr('src', $(this).attr('src').replace(".","@2x."));
                    12. });
                    13. }
                    14. });

                    ------------------------------------------

                    Commentaire


                    • #11
                      Re : Déviation conditionnel Home page

                      Oui le pixel ratio doit jouer aussi mais la c'est encore une autre histoire.

                      Pour ta redirection en fonction du ratio (en utilisant ton code)

                      Code:
                      $(window).on("load", function() {
                         pixelRatio = !!window.devicePixelRatio ? window.devicePixelRatio : 1;
                         if (pixelRatio == 1) {
                             document.location.href="ratio1.html";
                         }
                      }
                      Damien
                      www.Crac-Design.com

                      Commentaire


                      • #12
                        Re : Déviation conditionnel Home page

                        ouatcha super Damien !

                        Je vais utiliser Jumi, un composant visiblement super pour intégrer des codes très simplement dans Joomla (découvert sur post ici et recommandé par Zepelin). Pour faire des tests. ensuite j'intégrerai tout ça dans le Head.

                        Est-ce que j'abuserais en te demandant un code qui tout simplement me retournera le ratio de l'écran (un simple echo je pense) ?

                        ça ça me permettra d'analyser le ratio de mon écran bas de gamme, et de définir la bonne condition après.

                        1 (dans la formule) je ne sais pas exactement ce que ça représente en fait. C'est peut-être 1.5 ou au contraire 0.8 (ou même <1)

                        Blaise

                        P.S : je ne sais pas comment, mais il faudra que je puisse te rendre service (la pareille) une fois. C'est trop super ce forum.
                        Dernière édition par carbonathus à 08/01/2013, 11h24

                        Commentaire


                        • #13
                          Re : Déviation conditionnel Home page

                          Code:
                          $(window).on("load", function() {
                             pixelRatio = !!window.devicePixelRatio ? window.devicePixelRatio : 1;
                             //au choix 
                             console.log(pixelRatio);
                             //ou
                             alert(pixelRatio);
                             if (pixelRatio == 1) {
                                 document.location.href="ratio1.html";
                             }
                          }
                          le console.log affiche le tout dans la console de débogage de ton navigateur alors que le alert fait une popup mais est beaucoup plus intrusif.

                          T'en fait pas, moi aussi on me rend service sur le forum, si c'est pas toi c'est un autre mais à la fin on y gagne tous
                          www.Crac-Design.com

                          Commentaire


                          • #14
                            Re : Déviation conditionnel Home page

                            Excellent, je te tiendrai au courant.
                            Avec ça pas besoin de Jumi (si je comprends bien). Je vais tester dans le head, et ça me donnera la réponse.
                            Bonne appétit.
                            B

                            Commentaire


                            • #15
                              Re : Déviation conditionnel Home page

                              Mince, m'en sors pas. Suis nul avec ça.... faut que j'apprenne.

                              - J'ai créé un doc ratio1.html que j'ai placé à la racine du site. ???? sans savoir si il le fallait

                              - et voici mon head :


                              <!DOCTYPE HTML>
                              <html lang="<?php echo $this['config']->get('language'); ?>" dir="<?php echo $this['config']->get('direction'); ?>">

                              <head>
                              $(window).on("load", function() {
                              pixelRatio = !!window.devicePixelRatio ? window.devicePixelRatio : 1;

                              alert(pixelRatio);
                              if (pixelRatio == 1) {
                              document.location.href="ratio1.html";
                              }
                              }

                              <?php echo $this['template']->render('head'); ?>
                              </head>


                              - La ligne s'inscrit en haut de la page web, mais pas d'alert, pas de popup. Avec l'autre solution, je n'avais rien d'indiqué dans la console.

                              - j'ai aussi essayé avec if (pixelRatio < 1) et >. Je n'obtiens pas l'info.

                              -----------------

                              Et finalement, je conclus que tous mes écrans ont un ratio de 1, ce n'est donc pas la solution. Car avec ce javascript, l'alerte "This is a high-density screen" arrive sur tous mes écrans (yc le mauvais). DAMNED !!! :

                              <script>
                              if (window.devicePixelRatio == 1) {
                              alert("This is a high-density screen");
                              } else if (window.devicePixelRatio < 1) {
                              alert("This is a low-density screen");
                              }
                              </script>


                              B
                              Dernière édition par carbonathus à 08/01/2013, 15h18

                              Commentaire

                              Annonce

                              Réduire
                              1 sur 2 < >

                              C'est [Réglé] et on n'en parle plus ?

                              A quoi ça sert ?
                              La mention [Réglé] permet aux visiteurs d'identifier rapidement les messages qui ont trouvé une solution.

                              Merci donc d'utiliser cette fonctionnalité afin de faciliter la navigation et la recherche d'informations de tous sur le forum.

                              Si vous deviez oublier de porter cette mention, nous nous permettrons de le faire à votre place... mais seulement une fois
                              Comment ajouter la mention [Réglé] à votre discussion ?
                              1 - Aller sur votre discussion et éditer votre premier message :


                              2 - Cliquer sur la liste déroulante Préfixe.

                              3 - Choisir le préfixe [Réglé].


                              4 - Et voilà… votre discussion est désormais identifiée comme réglée.

                              2 sur 2 < >

                              Assistance au forum - Outil de publication d'infos de votre site

                              Compatibilité: PHP 4.1,PHP4, 5, 6DEV MySQL 3.2 - 5.5 MySQLi from 4.1 ( @ >=PHP 4.4.9)

                              Support Version de Joomla! : | J!3.0 | J!2.5.xx | J!1.7.xx | J!1.6.xx | J1.5.xx | J!1.0.xx |

                              Version française (FR) D'autres versions sont disponibles depuis la version originale de FPA

                              UTILISER À VOS PROPRES RISQUES :
                              L'exactitude et l'exhaustivité de ce script ainsi que la documentation ne sont pas garanties et aucune responsabilité ne sera acceptée pour tout dommage, questions ou confusion provoquée par l'utilisation de ce script.

                              Problèmes connus :
                              FPA n'est actuellement pas compatible avec des sites Joomla qui ont eu leur fichier configuration.php déplacé en dehors du répertoire public_html.

                              Installation :

                              1. Téléchargez l'archive souhaitée : http://afuj.github.io/FPA/

                              Archive zip : https://github.com/AFUJ/FPA/zipball/master

                              2. Décompressez le fichier de package téléchargé sur votre propre ordinateur (à l'aide de WinZip ou d'un outil de décompression natif).

                              3. Lisez le fichier LISEZMOI inclus pour toutes les notes de versions spécifiques.

                              4. LIRE le fichier de documentation inclus pour obtenir des instructions d'utilisation détaillées.

                              5. Téléchargez le script fpa-fr.php à la racine de votre site Joomla!. C'est l'endroit que vous avez installé Joomla et ce n'est pas la racine principale de votre serveur. Voir les exemples ci-dessous.

                              6. Exécutez le script via votre navigateur en tapant: http:// www. votresite .com/ fpa-fr.php
                              et remplacer www. votresite .com par votre nom de domaine


                              Exemples:
                              Joomla! est installé dans votre répertoire web et vous avez installé la version française du fichier FPA:
                              Télécharger le script fpa-fr.php dans: /public_html/
                              Pour executer le script: http://www..com/fpa-fr.php

                              Joomla! est installé dans un sous-répertoire nommé "cms" et vous avez installé la version française du fichier FPA:
                              Télécharger le script fpa-fr.php dans: /public_html/cms/
                              Pour executer le script: http://www..com/cms/fpa-fr.php

                              En raison de la nature très sensible de l'information affichée par le script FPA, il doit être retiré immédiatement du serveur après son utilisation.

                              Pour supprimer le script de votre site, utilisez le lien de script de suppression fourni en haut de la page du script. Si le lien de suppression échoue pour supprimer le script, utilisez votre programme FTP pour le supprimer manuellement ou changer le nom une fois que le script a généré les données du site et le message publié sur le forum. Si le script est toujours présent sur le site, il peut être utilisé pour recueillir suffisamment d'informations pour pirater votre site. Le retrait du script empêche des étrangers de l'utiliser pour jeter un oeil à la façon dont votre site est structuré et de détecter les défauts qui peuvent être utilisé à vos dépends.
                              Voir plus
                              Voir moins

                              Partenaire de l'association

                              Réduire

                              Hébergeur Web PlanetHoster
                              Travaille ...
                              X