Design & Développement web - Le topic des canards qui mangent des cookies

**MrBeaner** · 21/11/2012, 22h06

Excuse-moi, j'ai conscience que c'est brouillon et j'hésitais à refaire mon message pour qu'il soit plus simple. Mais je voulais pas embrouiller encore davantage.

Par contre, pour les indentations, je sais pas comment vous faites mais quand je copie-colle depuis Notepad++ dans les balises [code], ça donne le bordel que tu vois là. Parce que ma mise en forme n'a rien à voir avec ce qui est affiché au-dessus : http://tof.canardpc.com/view/d93b219...ff137af69a.jpg . Le problème est que j'arrive pas à taper dans les balises code directement, non seulement parce que ce serait trop chiant mais aussi parce que Tab me gicle de la fenêtre de saisie.

Mais merci pour la double égalité (encore). Je crois qu'il me faut un peu de temps pour saisir le réflexe de le placer pertinemment.

**Tomaka17** · 21/11/2012, 22h10

Justement dans ton notepad++ c'est mal indenté aussi.
Les lignes "best = 0", "attempt = 0", "msg = blabla", etc. devraient être un cran plus à gauche.

**MrBeaner** · 21/11/2012, 22h22

Ah, tu veux dire que c'est une mauvaise idée que de les indenter sous var ? Ou alors même de supprimer complètement var peut-être ?

Merci pour le "==" encore, mais y a un truc que je saisis vraiment pas. Pourquoi doit-on le mettre avec "true" mais pas avec "false" ni avec "window.confirm(bla)" ? Je veux dire, si c'est encore une distinction entre déclarer/initialiser et attribuer une valeur je suis pas sûr de capter pour les booléens.

**GrandFather** · 21/11/2012, 22h34

Envoyé par MrBeaner

Merci pour le "==" encore, mais y a un truc que je saisis vraiment pas. Pourquoi doit-on le mettre avec "true" mais pas avec "false" ni avec "window.confirm(bla)" ? Je veux dire, si c'est encore une distinction entre déclarer/initialiser et attribuer une valeur je suis pas sûr de capter pour les booléens.

Quand tu écris :

Code:

continuer = window.confirm('Vous avez gagnés en ' + score + ' coups.<br>Voulez-vous rejouer ?');

Tu stockes dans une variable nommée "continuer" le résultat retourné par window.confirm(). = est le symbole (pratiquement universel en développement) de l'affectation d'une valeur à une variable.

Par contre, quand tu écris:

Code:

if (continuer == true) {
  ...
}

Tu effectues un test boolean. Si continuer est effectivement égal à true, alors le code compris entre accolades est exécuté. == est un test d'égalité qui renvoie Vrai (true) si les deux expressions de chaque côté du == sont égales, Faux (false) sinon. L'instruction if se sert du résultat de ce test pour éxécuter ou non le code entre accolades.

**Tomaka17** · 21/11/2012, 22h38

Ton var il couvre que la première variable, pas les autres. Justement il faudrait mettre var partout (sauf pour "attempt" puisque tu l'utilises dans deux fonctions différentes, ça doit être global).
(et si tu sais pas ce que c'est var, ne le mets pas par contre)

Pour l'histoire des booléens, attention ça va être un peu compliqué.
Les valeurs true ou false ce sont des valeurs comme les autres. En fait dis toi que true c'est égal à 1 et false c'est égal à 0.
Quand tu écris "if (a)" ou "while (a)", le script va évaluer la valeur de a, et si elle est égale à true, ben ça exécute le contenu.

Donc par exemple tu peux écrire "while (continue)" tout court. Le script va regarder la valeur de "continue", il va voir que ça contient la valeur true, et va continuer la boucle.
Quand tu écris "while (continue == true)", en fait le script va regarder la valeur de "continue == true". Il va donc comparer "continue" et "true", va voir que ces deux valeurs sont égales, la comparaison renvoie true (dans le sens "oui les deux valeurs sont bien égales"), et le while continue parce que la comparaison a renvoyé true. En fait tu fais un calcul supplémentaire.

Pour que tu comprennes mieux, dis toi que les comparaisons comme <, >, <=, >=, == et != c'est exactement la même chose que des +, -, *, /, %
Ainsi "1 == 1" vaut true, tout comme "1 + 1" vaut 2. Une comparaison est comme un calcul, sauf que le résultat est un booléen.
Au lieu d'écrire "continue = false" tu pourrais écrire "continue = (3 < 2)", ça revient au même car "(3 < 2)" c'est un calcul qui renvoie false.

Bref, là je sens que t'as décroché.

**MrBeaner** · 21/11/2012, 22h48

Envoyé par Tomaka17

Ton var il couvre que la première variable, pas les autres. Justement il faudrait mettre var partout (sauf pour "attempt" puisque tu l'utilises dans deux fonctions différentes, ça doit être global).
(et si tu sais pas ce que c'est var, ne le mets pas par contre)

(Je reviendrai pour la question des booléens, je suis trop jetlaggé pour capter grand chose)

Perso je ne le met pas parce que j'ai compris qu'il pouvait être implicite. C'est plus lourd de le mettre à chaque fois, même si c'est plus rigoureux dans l'écriture du code. L'idée de mettre var une fois puis d'indenter les autres m'est venue de Mdt je crois. Je vais voir ce qu'il a dit à ce sujet.

EDIT : http://forum.canardpc.com/threads/72...=1#post5991730

Du coup, j'ai préféré supprimer complètement var et retirer un cran d'indentation.

**Skiant** · 21/11/2012, 22h51

MrBeaner, tu devrais peut-être te pencher sur le cursus Javascript Fundamentals sur Codeacademy. C'est pas mal du tout, expliqué pas à pas calmement et avec un exercice à chaque fois pour te faire comprendre par la pratique ce qu'ils expliquent, parce que là j'ai vraiment l'impression que tu mets la charrue avant les bœufs, et que tu fais des exercices qui mélangent un peu toutes les bases sans avoir clairement intégré ces bases.

**Tomaka17** · 21/11/2012, 22h54

Ben justement non c'est très différent de mettre var ou pas, et ce n'est pas implicite.

Quand tu écris "var i", ça veut dire que tu créé une variable i qui n'existe qu'à l'intérieur des { } où tu te trouves.
Par exemple :

Code:

if (blabla) {
    var i = 5;
    alert(i);      // ok, affiche 5
}

alert(i);    // erreur, car i n'existe plus ici

Si tu ne mets pas de var et que la variable n'existe pas, il va créer une variable globale, c'est à dire accessible absolument partout.
Par exemple :

Code:

function foo() {
    i = 5;
}

function bar() {
    alert(i);
}

function alpha() {
    var i = 2;
    alert(i);     // affiche 2
}

foo();      // met 5 dans la variable globale i
bar();      // affiche 5, la fonction accède à la variable globale i

alpha();    // affiche 2 en lisant sa propre variable locale i
bar();       // affiche 5, la variable globale i n'a pas changé

**MrBeaner** · 21/11/2012, 23h15

Du coup pour mon truc ça ne change pas grand chose non ? (à part pour "attempt" bien sûr)

---------- Post added at 23h15 ---------- Previous post was at 23h11 ----------

Envoyé par Skiant

MrBeaner, tu devrais peut-être te pencher sur le cursus Javascript Fundamentals sur Codeacademy. C'est pas mal du tout, expliqué pas à pas calmement et avec un exercice à chaque fois pour te faire comprendre par la pratique ce qu'ils expliquent, parce que là j'ai vraiment l'impression que tu mets la charrue avant les bœufs, et que tu fais des exercices qui mélangent un peu toutes les bases sans avoir clairement intégré ces bases.

Je crois bien que j'ai le même sentiment que toi sur la façon qu'ils (je suis un cours à l'uni d'introduction au Développement Web) ont de nous balancer dans le sujet à nous infliger des exercices à l'aveuglette et sans explications aucunes. On voit quelques trucs, c'est sûr, mais si je ne veux pas simplement faire du boulot de singe, comprendre les concepts du langage de développement m'aide vraiment (et en ce sens vous m'êtes très précieux par ici, surtout Tomaka17 pour ces derniers temps).

Merci pour la référence, je jetterai un coup d'oeil

**Anon26492** · 22/11/2012, 18h52

Envoyé par MrBeaner

Perso je ne le met pas parce que j'ai compris qu'il pouvait être implicite. C'est plus lourd de le mettre à chaque fois, même si c'est plus rigoureux dans l'écriture du code. L'idée de mettre var une fois puis d'indenter les autres m'est venue de Mdt je crois. Je vais voir ce qu'il a dit à ce sujet.

Attention :

Code:

var a = 1,
    b = 2;

n'est pas pareil que :

Code:

var a = 1;
    b = 2;

Les beaux gosses n’enchaînent pas les var.

Du coup pour mon truc ça ne change pas grand chose non ? (à part pour "attempt" bien sûr)

Même si ça ne change rien niveau exécution, il est d'usage de ne pas polluer comme un sale le global namespace.

Rien à voir, mais les beaux gosses devraient lire : http://addyosmani.com/blog/a-few-new...to-javascript/

Code:

let

**Skiant** · 22/11/2012, 19h42

Envoyé par Mdt

Rien à voir, mais les beaux gosses devraient lire : http://addyosmani.com/blog/a-few-new...to-javascript/

Code:

let

Les beaux gosses devraient lire tout ce que publie Addy Osmani.

**Anon26492** · 22/11/2012, 21h03

J'ai encore mal à la tête de ma lecture d'essential design pattern.
Très largement au delà de mes bases de JS.

**tenshu** · 22/11/2012, 21h54

Tient en parlant de JS a Stras je vais a une petite conf' sur Angular.
Vous vous déplacez souvent dans ce genre de truc ?

Genre sur Paris j'avais été a celle sur les Design Pattern organisée par O'Reilly c'était pas mal et y'avait un buffet saucisson fromage baguette à la fin

**Skiant** · 22/11/2012, 22h41

Envoyé par tenshu

Tient en parlant de JS a Stras je vais a une petite conf' sur Angular.
Vous vous déplacez souvent dans ce genre de truc ?

Genre sur Paris j'avais été a celle sur les Design Pattern organisée par O'Reilly c'était pas mal et y'avait un buffet saucisson fromage baguette à la fin

Si mon entretien mercredi se passe bien, j'entre dans une toute petite agence 100% web qui se déplace régulièrement à des conférences. Par contre, les autres sont, à la base, des designers qui savent coder et pas l'inverse, donc y'a des chances qu'eux privilégient les conférences un peu moins techniques.

Angular ça a l'air super coolos, j'ai pas encore eu l'occase de m'y mettre pour de vrai, mais ça donne envie.

Et sinon, dans la série des mecs à suivre quand on bosse dans le domaine, y'a le compère d'Addy, Paul Irish, qui est une véritable mine d'or à infos sur le web moderne.

**Tomaka17** · 23/11/2012, 10h50

Tiens j'ai un petit problème de HTML.

J'ai un tableau avec pas mal de lignes, et je voudrais "grouper" ces lignes par 7.
Par exemple mettre une bordure qui entoure les lignes 1 à 7, une autre bordure qui entoure les lignes 8 à 14, etc.

Il y a un moyen de faire ça proprement, c'est à dire sans mettre de 'class="rowGroupStart"', 'class="rowGroupMiddle"' et 'class="rowGroupEnd"' ?

J'ai essayé de glisser un <div> autour de mes 7 lignes, mais le parser semble le dégager. Les styles que j'applique à ce <div> ne sont pas pris en compte.

**elpaulo** · 23/11/2012, 10h55

Un tableau de tableaux de 7 lignes ?

**Skiant** · 23/11/2012, 11h16

Envoyé par Tomaka17

Tiens j'ai un petit problème de HTML.

J'ai un tableau avec pas mal de lignes, et je voudrais "grouper" ces lignes par 7.
Par exemple mettre une bordure qui entoure les lignes 1 à 7, une autre bordure qui entoure les lignes 8 à 14, etc.

Il y a un moyen de faire ça proprement, c'est à dire sans mettre de 'class="rowGroupStart"', 'class="rowGroupMiddle"' et 'class="rowGroupEnd"' ?

J'ai essayé de glisser un <div> autour de mes 7 lignes, mais le parser semble le dégager. Les styles que j'applique à ce <div> ne sont pas pris en compte.

Groupe en faisant plusieurs <tbody>.

Code HTML:

<table>
    <tbody>
        <tr>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
        </tr>
    </tbody>
    <tbody>
        <tr>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
        </tr>
    </tbody>
    <tbody>
        <tr>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
        </tr>
    </tbody>
</table>

**Tomaka17** · 23/11/2012, 12h04

Ah oui, je savais pas qu'on pouvait mettre plusieurs tbody.
Merci bien.

**Tomaka17** · 27/11/2012, 14h46

Bon, en fait AngularJS c'est absolument génial.
Je sais plus qui en avait parlé ici, et je me suis dit "oui ça a l'air sympa, ça peut faire gagner un peu de temps".
Et en en analysant profondément le principe, j'ai compris que les concepteurs ont vraiment tenu à simplifier absolument tous les aspects des webapps, que ce soit au niveau des hash, de l'AJAX, des templates, etc.

La différence entre utiliser ou non AngularJS pour faire une webapp est la même qu'entre utiliser ou non jQuery pour faire une page avec plein d'animations et de manipulation DOM.

Le seul point noir d'Angular pour l'instant c'est la courbe d'apprentissage un peu raide à cause de sa documentation un peu mal foutue. Rien que pour les exemples de la page d'accueil t'es obligé de prendre le temps d'analyser le code parce qu'ils n'expliquent pas correctement ce qu'ils font.

**tenshu** · 27/11/2012, 14h56

Justement, je vais à ça demain à Strasbourg : http://www.jugevents.org/jugevents/event/47709

**Skiant** · 27/11/2012, 15h27

Envoyé par tenshu

Justement, je vais à ça demain à Strasbourg : http://www.jugevents.org/jugevents/event/47709

Et je suis jaloux.

AngularJS, clairement c'est de la balle. Et quand tu sais que les mecs derrière AngularJS ont pour ambition de faire passer leur syntaxe (ou une autre approchant) dans les futures normes HTML, afin que ce soit implémenté de base par les navigateurs, bah ça fait rêver.

**tenshu** · 27/11/2012, 15h30

Envoyé par Skiant

Et quand tu sais que les mecs derrière AngularJS

= Google.

**Tomaka17** · 27/11/2012, 15h32

Envoyé par Skiant

Et je suis jaloux.

AngularJS, clairement c'est de la balle. Et quand tu sais que les mecs derrière AngularJS ont pour ambition de faire passer leur syntaxe (ou une autre approchant) dans les futures normes HTML, afin que ce soit implémenté de base par les navigateurs, bah ça fait rêver.

Euh.. bof. Je trouve que lier officiellement javascript et HTML c'est pas forcément une super idée.
Personnellement tous les attributs ng-app, ng-repeat, etc. je nomme ça data-ng-app, data-ng-repeat (la syntaxe est supportée) et je trouve que c'est mieux comme ça.

**tenshu** · 27/11/2012, 16h26

Bon j'en ai plein le cul.
Si vous êtes DA, Graphiste, Maquettiste, Stagiaire et que vous avez des choses a compenser, pitié stop toute la chaîne de production derrière vous souffre de vos errances.

On vient de me demander mon avis sur ce slider d'image, en gardant à l'idée qu'il pourrait être responsive "plus tard" (oubliez les 2 mois a parler du mobile first):

ENLARGE MY PENICHE§§§§

**Skiant** · 27/11/2012, 16h31

Envoyé par tenshu

Bon j'en ai plein le cul.
Si vous êtes DA, Graphiste, Maquettiste, Stagiaire et que vous avez des choses a compenser, pitié stop toute la chaîne de production derrière vous souffre de vos errances.

On vient de me demander mon avis sur ce slider d'image, en gardant à l'idée qu'il pourrait être responsive "plus tard" (oubliez les 2 mois a parler du mobile first):

https://pbs.twimg.com/media/A8t5NeSCUAEAEkr.jpg:large

ENLARGE MY PENICHE§§§§

Slider d'image responsive ? Trop gros, passera pas.

Sinon j'ai aussi eu une bonne blague, venant d'un chargé de projet. Avant qu'on ne commence à ré-écrire tout le code front-end de notre appli, je lui ai fait un long laïus sur les avantages du RWD, et pourquoi j'estimais que, s'il voulait proposer une expérience intéressante aux visiteurs, on se devait de l'employer. Sauf que voilà, il avait décidé que la version mobile serait module à vendre en plus au client... Donc exit le responsive.

Ici, il a besoin d'une maquette statique du futur site mobile pour une conférence, et il se rend notamment compte que, les designs pensés par le graphiste interne (qui présente toujours les layouts avec un cadre type IE6 aux clients), pas du tout flexibles et pas du tout pensés pour le mobile si ce n'est qu'ils sont en 240px de large (vieille résolution iPhone, tout ça) passent très mal sur son iphone 5.

Et donc maintenant il voudrait que le site mobile soit responsive. Mais pas la version Desktop.

**tenshu** · 27/11/2012, 16h41

Haha.
Toi aussi tu expérimente la philosophie Mobile Last.

Slider d'image responsive ? Trop gros, passera pas.

Ça existe mais pas comme celui-ci.
Et de toute façon un slider c'est un aveux de médiocrité.
Ça rempli l'espace et ça coûte au client avec absolument aucunne justification fonctionnelle (9 fois /10).

Tu sais que la fois précédente j'ai eu le droit la caméra de coloscopie, qui surgit comme un "serpent"

**Skiant** · 27/11/2012, 16h48

Envoyé par tenshu

Haha.
Toi aussi tu expérimente la philosophie Mobile Last.

Money first.

Mais à priori, si mon deuxième entretien se passe bien, ça va trancher, chérie.

**tenshu** · 27/11/2012, 17h08

Money First, Mobile Last.

Tu devrais le faire imprimer sur des t-shirt.

**Skiant** · 27/11/2012, 17h28

Envoyé par tenshu

Money First, Mobile Last.

Tu devrais le faire imprimer sur des t-shirt.

Et me faire un max de fric.

Putain génial.

**alliocha** · 27/11/2012, 17h55

Envoyé par tenshu

Bon j'en ai plein le cul.
Si vous êtes DA, Graphiste, Maquettiste, Stagiaire et que vous avez des choses a compenser, pitié stop toute la chaîne de production derrière vous souffre de vos errances.

On vient de me demander mon avis sur ce slider d'image, en gardant à l'idée qu'il pourrait être responsive "plus tard" (oubliez les 2 mois a parler du mobile first):

https://pbs.twimg.com/media/A8t5NeSCUAEAEkr.jpg:large

ENLARGE MY PENICHE§§§§

Il y a un effet de """parallax scrolling""" sur la péniche ?

Discussion: Design & Développement web - Le topic des canards qui mangent des cookies

Outils de la discussion

Règles de messages