Partage
  • Partager sur Facebook
  • Partager sur Twitter

[Atelier] Créez votre galerie

Atelier CSS

    2 juin 2015 à 9:47:24

    Cocopop a écrit:

    Je suis aussi partant pour le JS (enfin via librairie Jquery car une fois utilisée on ne peut plus s'en passer :D) !


    Un challenge intéressant pourrait être d'adopter précisément comme règle le point de vue contraire en interdisant le recours à jQuery.

    Celui-ci est souvent une facilité pour le programmeur, mais pas une mesure d'économie globale ; comme je l'ai écrit ailleurs, cela revient parfois "à utiliser une tronçonneuse pour casser une allumette".

    Voir les liens que je donnais ici développant cette réflexion: 

    http://openclassrooms.com/forum/sujet/groupe-de-checkbox-dont-l-un-est-requis#message-87882897

    • Partager sur Facebook
    • Partager sur Twitter
    "La Vérité doit être dite, le monde dût-il en voler en éclats"  (J. G. Fichte)
      2 juin 2015 à 9:59:41

      il peut y avoir plusieurs ateliers, un en vanilla JS et un avec librairie/framework, mais effectivement, les regles doivent être clairs et connus de tous :)

      (et si c'est vanilla JS, ça peut etre "modern browser only" pour s'épargner de gérer IE8 ou des vieux browsers android :))

      -
      Edité par STuFF 2 juin 2015 à 10:00:37

      • Partager sur Facebook
      • Partager sur Twitter
      N'utilisez JAMAIS alert() pour debugger. Utilisez console.log()
        2 juin 2015 à 10:17:44

        Oui, bien sûr, tout est intéressant, mais pour les choses simple, le réflexe jQuery est parfois trop automatique:

        un exemple repris de ce fil: http://openclassrooms.com/forum/sujet/afficher-cacher-une-div-article-sectio-par-un-clic

        pour faire une simple bascule ON/OFF :

        HTML

        <button id="Bouton">Press me !</button>
        <div id="tonDiv">Hello !</div>
        • version jQuery:
        $(function(){
           $('#tonBoutton').click(function(){
              $('#tonDiv').toggle() // AFFICHE ET CACHE A CHAQUE CLIQUE SUR LE BOUTTON
           });
        });
        • version pur JS développée:
        document.querySelector("#Bouton").onclick = function() {
        if (window.getComputedStyle(document.querySelector('#tonDiv')).display=='none'){
        document.querySelector("#tonDiv").style.display="block";
        } else {
        document.querySelector("#tonDiv").style.display="none";
        }
        }
        • version pur JS compactée:
        document.querySelector("#Bouton").onclick = function() { 
        document.querySelector("#tonDiv").style.display=(window.getComputedStyle(document.querySelector('#tonDiv')).display=='none') ? "block" : "none"; 
        }
        • version pur JS extrêmement compactée (1 ligne contre 5 en jQuery):
        Bouton.onclick=function(){tonDiv.style.display=(window.getComputedStyle(tonDiv).display=='none')?"block":"none";};

        Cette dernière syntaxe utilisant directement l'ID est sujette à débat (voir: http://openclassrooms.com/forum/sujet/document-getelementbyid-est-il-utile ), mais elle fonctionne parfaitement et est "technically safe to use in the latest version of all major browsers" (cf. lien ci-dessus.)





        -
        Edité par philiga 2 juin 2015 à 10:19:52

        • Partager sur Facebook
        • Partager sur Twitter
        "La Vérité doit être dite, le monde dût-il en voler en éclats"  (J. G. Fichte)
          2 juin 2015 à 10:27:29

          Personnellement, je pense qu'on peut autoriser les deux, c'est à dire from sratch et  avec utilisation d'une librairie, je comprends tout à fait ton point de vue philiga, mais pour avoir réaliser quelques stages dans le domaine du web, généralement la plupart utilise jquery sans se poser de questions pratique qui j'en conviens et un peu dommage. Tout ça pour dire, si j'avais pratiquer un peu avant j'aurai été plus efficace. Je trouve ça donc dommage de restreindre l'atelier. 

          Voila c'était mon magnifique avis :p

          -
          Edité par Lud0v1c 2 juin 2015 à 10:27:40

          • Partager sur Facebook
          • Partager sur Twitter
            2 juin 2015 à 10:34:22

            d'ailleurs j'ai une question concernant le jQuery ^^

            je vois souvent la même chose écrite différemment :

            $('document').ready(function() {
                $('div').click(function() {
                   // le script
                });
            });

            et :

            $('document').ready(function() {
                $('div').on(click, function() {
                   // le script
                });
            });

            c'est quoi la différence entre .click(function()) et .on(click, function())  ?


            • Partager sur Facebook
            • Partager sur Twitter

            Mon portfolio /  Le CSS ça peut craindre -->Conférence CSS3.CREATE

              2 juin 2015 à 10:39:00

              @philiga

              ya bcp de sujets a débat dans ton code :)

              le premier code en jquery peut aussi tenir en 1 ligne de code, compter le ligne de code n'est donc pas pertinent pour juger de la qualité ou pas :)

              même si on compare la version js développée, il y a pas mal a redire

              1) elle est beaucoup plus verbeuse, et bien moins "lisible"

              2) tu repetes 2 fois un selecteur (#tonDiv) alors qu'on ne le repete pas avec Jquery

              3) tu utilise directement .onclick, ce qui implique que tu ne peux accrocher qu'un seul event comme ça sur ton bouton. Il faudrai utilise addEventListener, mais du coup tu perds la compat avec I8 (ce que jQuery conserve avec .click, tout en gardant la possibilité d'accrocher plusieurs event)

              4) sur les 5 lignes de js de la version jquery, il y a aussi l'attente a domReady (le $(function) que tu n'as pas toi (qui reste useless si tu mets ton script en bas de page, mais c'est un autre pb :))

              5) la tu utilises directement le style display none/block, ce qui peut avoir deux problemes : si jamais ton element etais pas block au départ, tu vas avoir des surprises... Si tu veux utiliser autre chose, genre changer l'opacité, avec style.display, tu vas avoir des problèmes sur IE8 (spa grave, tu me diras, ok :p)

              Donc en fait, ouais, tu évites d'utiliser jQuery dans ce cas particulier, et c'est ce qu'il faut probablement faire si tu as juste ces 5 lignes de codes sur ton site. Mais tu tombes trés rapidement dans des cas un peu galere a gérer sans jquery, et qui t'amene a faire bcp de code supplémentaires, et au finale réinventer la roue

              Par mis les trucs un peu touchy a faire a la main, on peut parler de :

              - délégation d'event

              - requete ajax

              - divers opération sur les tableaux/objet ($.merge, $.extend)

              Pour conclure, et pour parler d'openclassrooms un peu :p, jQuery est utilisé, massivement, dans sa derniere version, qui exclue donc IE8 par exemple. Une fois minimifié et gzipé, en provenance d'un CDN, le fichier fait 30ko, soit le poids d'une image relativement petite. Ca vaut clairement pas le coup de s'en passer (ça vaut pour d'autre librairies équivalente, hein, jsuis pas jquery fan boy non plus)


              Le code est plus lisible, par plus de gens (plutôt que d'inventer des solutions qui réinventes des choses...) et la lib s'occupe de lisser les petites diff entre les browsers

              @stefde3

              les deux syntax sont équivalentes (enfin, pour la deuxiement, c'est 'click' entre guillement, pas directement comme ça, et elle permet d'avoir plus d'options si tu veux)

              -
              Edité par STuFF 2 juin 2015 à 10:40:25

              • Partager sur Facebook
              • Partager sur Twitter
              N'utilisez JAMAIS alert() pour debugger. Utilisez console.log()
                2 juin 2015 à 10:53:59

                ok donc .on(click = une seule option et .click( = plusieurs options dedans) compris merci ;)
                • Partager sur Facebook
                • Partager sur Twitter

                Mon portfolio /  Le CSS ça peut craindre -->Conférence CSS3.CREATE

                  2 juin 2015 à 11:48:25

                  @STuFF:

                  Merci pour ces précisions ; on est d'accord: ce que j'en dis est valable pour les sites simples personnels qui n'ont souvent pas besoin de sortir la grosse artillerie (même si elle n'est pas si grosse que ça: 30ko, ok...) et ne souffriront guère de ne pas vérifier le document.ready à chaque clic sur un bouton.

                  • Partager sur Facebook
                  • Partager sur Twitter
                  "La Vérité doit être dite, le monde dût-il en voler en éclats"  (J. G. Fichte)
                    2 juin 2015 à 17:18:32

                    @philiga: ou en plus propre :
                    var div = document.getElementById('div')
                    document.getElementById('button').addEventListener('click', function() {
                        if (div.style.display == 'none') {
                            div.style.display = 'block'
                        } else {
                            div.style.display = 'none'
                        }
                    })
                    • Partager sur Facebook
                    • Partager sur Twitter
                    Copain
                      2 juin 2015 à 17:50:06

                      ce qui est, reconnaissons le, largement moins élégant que la version jQuery :)
                      • Partager sur Facebook
                      • Partager sur Twitter
                      N'utilisez JAMAIS alert() pour debugger. Utilisez console.log()
                        2 juin 2015 à 17:51:53

                        @Wake_Up:

                        • ok pour le getElementById à la place du querySelector (le 1er + optimisé, je crois) ; 
                        • Pour l'addEventListener: 1+ & 1- (IE8) d'après les précisions techniques de STuFF ci-dessus
                        • pour la variable, peut-être ai-je tort, mais n'est-ce pas une étape supplémentaire totalement inutile ici ?
                        • j'avoue que j'aime bien ma version hypercompacte en une seule ligne, même si elle n'est pas 100% orthodoxe !

                        En tous cas, ce genre d'échange autour des avantages et inconvénients respectifs de chaque façon de procéder est très formateur ;

                        ça pourrait faire l'objet d'un concours intéressant avec par exemple des règles du type:

                        • donnez deux versions: A) la plus complète et orthodoxe et B) la plus courte possible pour remplir la même fonction.

                        Même si personnellement, mon petit niveau en JS me permettrait plus d'être observateur intéressé que participant à un tel concours !

                        -
                        Edité par philiga 2 juin 2015 à 17:52:21

                        • Partager sur Facebook
                        • Partager sur Twitter
                        "La Vérité doit être dite, le monde dût-il en voler en éclats"  (J. G. Fichte)
                          2 juin 2015 à 18:00:25

                          Si je puis me permettre, le plus propre serait d'ajouter et d'enlever une classe plutôt que modifier style :) d'autant que comme ça on peut utiliser un moyen plus complexe et plus pertinent pour cacher, comme une hauteur à 0 avec overflow: hidden etc. display: none s'pas cool pour les lecteurs d'écran. Et il serait bon aussi de modifier l'attribut aria-hidden. Mais bon, c'est qu'un exemple, je sais, je pinaille :D

                          • Partager sur Facebook
                          • Partager sur Twitter

                          Pas d'aide concernant le code par MP, le forum est là pour ça :) (en plus je n'y connais rien en C)

                            2 juin 2015 à 18:02:11

                            Personnellement aujourd'hui j'ai totalement délaissé le JS "traditionnel" barbant à écrire (surtout pour sélectionner des éléments) et devient vite moins lisible.

                            Le Jquery c'est beaucoup plus simple, ergonomique et compréhensible.

                            Quand on reprend un code écrit il y a plusieurs mois, on se le réapproprie hyper rapidement avec une structure basée sur Jquery.
                            • Partager sur Facebook
                            • Partager sur Twitter
                            Anonyme
                              2 juin 2015 à 18:08:38

                              Tant qu'on est là, je vais pas créer un topic pour ça. Il existe le hover, qui va vers un autre code CSS au survol. Il y a une propriété au clic?
                              • Partager sur Facebook
                              • Partager sur Twitter
                                2 juin 2015 à 18:09:00

                                Cocopop > "le jQuery" ça n'existe pas. C'est pas un langage. Dis "la syntaxe jQuery", s'il te plaît.

                                • Partager sur Facebook
                                • Partager sur Twitter

                                Pas d'aide concernant le code par MP, le forum est là pour ça :) (en plus je n'y connais rien en C)

                                  2 juin 2015 à 18:14:41

                                  Histoire de jouer sur les mots, une librairie serait encore plus juste, dixit jquery.com : "jQuery is a fast, small, and feature-rich JavaScript library"

                                  ;)

                                  • Partager sur Facebook
                                  • Partager sur Twitter
                                    2 juin 2015 à 18:15:40

                                    xdNoliv > jouons, jouons ! C'est "bibliothèque", dans ce cas :p

                                    • Partager sur Facebook
                                    • Partager sur Twitter

                                    Pas d'aide concernant le code par MP, le forum est là pour ça :) (en plus je n'y connais rien en C)

                                      2 juin 2015 à 18:16:51

                                      Lamecarlate a écrit:

                                      Cocopop > "le jQuery" ça n'existe pas. C'est pas un langage. Dis "la syntaxe jQuery", s'il te plaît.


                                      @Lamecarlate: Là oui, tu pinailles !;) 

                                      Et sinon, est-ce vraiment "plus propre d'ajouter et d'enlever une classe plutôt que modifier style" ?

                                      Pour des choses complexes ok, mais pour afficher/masquer une pop-up, par exemple, display:none; me semble très bien non ?

                                      @Quentin: non, malheureusement, pas de :clic en CSS ; il y a des ruses avec checked, mais c'est un peu lourd (mais utile quand même).
                                      Il y a en fait 2 façons de simuler le clic en CSS ; avant que tu ne le demandes, voici un double exemple :

                                      http://openclassrooms.com/forum/sujet/affichage-dynamique-css-pure?page=1#message-87745841

                                      -
                                      Edité par philiga 2 juin 2015 à 18:25:46

                                      • Partager sur Facebook
                                      • Partager sur Twitter
                                      "La Vérité doit être dite, le monde dût-il en voler en éclats"  (J. G. Fichte)
                                      Anonyme
                                        2 juin 2015 à 18:19:09

                                        philiga a écrit:

                                        Lamecarlate a écrit:

                                        Cocopop > "le jQuery" ça n'existe pas. C'est pas un langage. Dis "la syntaxe jQuery", s'il te plaît.


                                        @Lamecarlate: Là oui, tu pinailles !;) 

                                        Et sinon, est-ce vraiment "plus propre d'ajouter et d'enlever une classe plutôt que modifier style" ?

                                        Pour des choses complexes ok, mais pour afficher/masquer une pop-up, par exemple, display:none; me semble très bien non ?

                                        @Quentin: non, malheureusement, pas de :clic en CSS ; il y a des ruses avec checked, mais c'est un peu lourd (mais utile quand même).

                                        Oh zut :/ Bon, bah tant pis. Merci quand même!

                                        -J'espère qu'il le mettront dans un CSS4 ;)-

                                        -
                                        Edité par Anonyme 2 juin 2015 à 18:19:26

                                        • Partager sur Facebook
                                        • Partager sur Twitter
                                          2 juin 2015 à 18:20:55

                                          Bravo aux gagnants.
                                          Félicitations :)
                                          • Partager sur Facebook
                                          • Partager sur Twitter
                                            2 juin 2015 à 18:25:17

                                            philiga a écrit:

                                            Lamecarlate a écrit:

                                            Cocopop > "le jQuery" ça n'existe pas. C'est pas un langage. Dis "la syntaxe jQuery", s'il te plaît.


                                            @Lamecarlate: Là oui, tu pinailles !;) 

                                            Tu codes "en PHP" ou "en Symphony" ? Non, tu codes "en PHP avec Symphony". Ben là, c'est pareil.

                                            Et sinon, est-ce vraiment "plus propre d'ajouter et d'enlever une classe plutôt que modifier style" ?

                                            Pour des choses complexes ok, mais pour afficher/masquer une pop-up, par exemple, display:none; me semble très bien non ?

                                            Comme je l'explique juste après, display: none pour masquer/afficher une pop-up c'est pas fameux, ça pose des problèmes d'accessibilité.

                                            • Partager sur Facebook
                                            • Partager sur Twitter

                                            Pas d'aide concernant le code par MP, le forum est là pour ça :) (en plus je n'y connais rien en C)

                                              2 juin 2015 à 18:34:12

                                              Lamecarlate a écrit:

                                              Comme je l'explique juste après, display: none pour masquer/afficher une pop-up c'est pas fameux, ça pose des problèmes d'accessibilité.


                                              Peux-tu préciser lesquels ? En quoi cela change pour les lecteurs d'écran?

                                              @Quentin: J'ai complété ma réponse ; je ne sais pas si tu as vu ?

                                              -
                                              Edité par philiga 2 juin 2015 à 18:35:00

                                              • Partager sur Facebook
                                              • Partager sur Twitter
                                              "La Vérité doit être dite, le monde dût-il en voler en éclats"  (J. G. Fichte)
                                                2 juin 2015 à 18:44:14

                                                philiga > suis un peu pressée, désolée, tu trouveras je pense pas mal de bonnes réponses avec cette recherche : https://duckduckgo.com/?q=display none accessibility

                                                • Partager sur Facebook
                                                • Partager sur Twitter

                                                Pas d'aide concernant le code par MP, le forum est là pour ça :) (en plus je n'y connais rien en C)

                                                Anonyme
                                                  2 juin 2015 à 18:46:08

                                                  Ah non, je vais voir ^^ Merci!
                                                  • Partager sur Facebook
                                                  • Partager sur Twitter
                                                    2 juin 2015 à 18:50:01

                                                    Quentin Saison a écrit:

                                                    philiga a écrit:

                                                    Lamecarlate a écrit:

                                                    Cocopop > "le jQuery" ça n'existe pas. C'est pas un langage. Dis "la syntaxe jQuery", s'il te plaît.


                                                    @Lamecarlate: Là oui, tu pinailles !;) 

                                                    Et sinon, est-ce vraiment "plus propre d'ajouter et d'enlever une classe plutôt que modifier style" ?

                                                    Pour des choses complexes ok, mais pour afficher/masquer une pop-up, par exemple, display:none; me semble très bien non ?

                                                    @Quentin: non, malheureusement, pas de :clic en CSS ; il y a des ruses avec checked, mais c'est un peu lourd (mais utile quand même).

                                                    Oh zut :/ Bon, bah tant pis. Merci quand même!

                                                    -J'espère qu'il le mettront dans un CSS4 ;)-

                                                    Comment ça pas de clic en CSS ?

                                                    Et :target ?

                                                    • Partager sur Facebook
                                                    • Partager sur Twitter
                                                    Vous cherchez à faire un menu déroulant ? Visitez www.frogweb.fr ! frogweb le site qu'il vous faut !
                                                      2 juin 2015 à 19:29:53

                                                      Pas de véritable :clic comme il y a un :hover en CSS, oui Frogweb, mais  j'ai complété ma réponse avec un exemple qui illustre les deux façons de le simuler: target et checked

                                                       http://openclassrooms.com/forum/sujet/affichage-dynamique-css-pure?page=1#message-87745841

                                                      • Partager sur Facebook
                                                      • Partager sur Twitter
                                                      "La Vérité doit être dite, le monde dût-il en voler en éclats"  (J. G. Fichte)
                                                        2 juin 2015 à 19:38:55

                                                        philiga a écrit:

                                                        Pas de véritable :clic comme il y a un :hover en CSS, oui Frogweb, mais  j'ai complété ma réponse avec un exemple qui illustre les deux façons de le simuler: target et checked

                                                         http://openclassrooms.com/forum/sujet/affichage-dynamique-css-pure?page=1#message-87745841

                                                        Ah ok ^^

                                                        Pour la peine un exemple au clic et tout en CSS d'une "modalbox" fait avec mes petits doigts ^^
                                                        Je le mets parce qu'un peu mieux styliser ça pouvait être dans le sujet de l'atelier : créer votre galerie.

                                                        L'image se referme soit en cliquant sur le lien fermer, soit en cliquant en dehors.

                                                        http://www.frogweb.fr/modal-css.html



                                                        • Partager sur Facebook
                                                        • Partager sur Twitter
                                                        Vous cherchez à faire un menu déroulant ? Visitez www.frogweb.fr ! frogweb le site qu'il vous faut !
                                                          3 juin 2015 à 5:44:39

                                                          Personnellement je dis "je code sous Symphony" ou "je code en Jquery".

                                                          Certes c'est pas le terme "puriste" adapté mais c'est plus simple à dire et à la fin tout le monde comprend :D
                                                          • Partager sur Facebook
                                                          • Partager sur Twitter
                                                            3 juin 2015 à 7:43:40

                                                            "Je code avec jQuery". Comme ça tout le monde comprend et en plus c'est correct.
                                                            • Partager sur Facebook
                                                            • Partager sur Twitter
                                                            Ce n'est pas parce que vous ne savez pas vous servir d'un marteau qu'il faut planter des clous au tournevis.
                                                              3 juin 2015 à 7:50:34

                                                              nightmat a écrit:

                                                              "Je code avec jQuery". Comme ça tout le monde comprend et en plus c'est correct.

                                                              Oui c'est encore mieux ainsi :)
                                                              • Partager sur Facebook
                                                              • Partager sur Twitter

                                                              [Atelier] Créez votre galerie

                                                              × Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
                                                              × Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.
                                                              • Editeur
                                                              • Markdown