nielk/stage — pull request #1 by xseignard (2013-07-14 09:42:31+00:00)
Title: Restructuration des sources

Salut Alexandre,

C'est cool tu as l'air motivé! Je vois que tu comprends un peu comment tout ça fonctionne. Cependant la façon dont tu répartis tes sources n'est pas terrible :) T'inquiète, quand j'ai commencé je faisais encore pire que toi!

Je t'envoie cette pull request (https://help.github.com/articles/using-pull-requests) afin de te proposer une structure un peu plus "propre". Il y a 2 dossiers :
- libs : ou tu peux mettre toutes les libs et frameworks que tu va utiliser et qui sont des fichiers de ton projet que tu n'auras pas à modifier (à priori)
- src : un dossier de tes propres fichiers que tu vas créer/modifier

Je n'ai pas tout corrigé dans ta structure, il reste les choses suivantes à faire :
- sortir le css du html et le mettre dans src/assets/styles
- sortir le js du html et le mettre dans src/app
- mettre le chargement de tes scripts js juste avant la balise fermante `

` (voir : http://www.siteduzero.com/informatique/tutoriels/bonnes-pratiques-javascript/ou-placer-son-code-javascript-1 et tout le reste du tuto d'ailleurs!)

Je vois que tu as charges les libs js depuis des CDN, c'est une bonne pratique, mais la comprends tu?
C'est tout bête, ton navigateur garde une copie locale des fichiers auxquels il accède (le cache), donc si ton site fait référence au fichier situé à l'adresse http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js il est très vraisemblable qu'un autre site web que tu aurais déjà visité y fasse aussi appel et que donc ce fichier est déjà en cache dans ton navigateur, donc pas besoin de le retélécharger et c'est autant de temps de téléchargement économisé et donc une meilleure expérience utilisateur.
Quelques choses à lire à ce sujet:
- http://developer.yahoo.com/performance/rules.html
- http://webdesign.tutsplus.com/tutorials/workflow-tutorials/best-practices-for-increasing-web-site-performance/

Mais il ne faut pas oublier le cas où le fichier ne serait pas en cache sur le navigateur de ton visiteur, il faut donc aussi avoir une copie sur ton serveur, et ensuite vérifier si l’élément javascript dont tu as besoin est disponible et si ce n'est pas le cas le charger depuis la version que tu as sur le serveur de ton site web. En général on écrit qqch comme ça
```

```
La première ligne tu dois la comprendre vu que c'est ce que tu fais déjà (à part le fait qu'il n'y ait pas le http en début d'url, c'est juste pour ne pas s'occuper de savoir si tu récupères le fichier via http ou https).
La deuxième liste c'est du js, un "ou conditionnel" (`||`) si la première partie du "ou" est vérifiée pas besoin d'exécuter la seconde.

En clair, si l'objet jQuery est accessible sur ta page tout est ok, sinon on le charge depuis le serveur sur lequel est ton site web en rajoutant à la page html la ligne dans le `document.write`. Le `\x3C` c'est juste un petit hack pour la compatibilité avec certains navigateurs qui buggent avec les caractères un peu bizarres.

J'espère que tu comprends ce que je te raconte! Si c'est pas le cas, n'hésite pas à me poser des questions, je suis là pour t'aider. C'est des choses que je ne comprenais pas non plus il y a quelques années, donc ça serait déplacé de ma part de te jeter la pierre si tu ne comprends pas.

Mon objectif dans cet encadrement technique de ton stage c'est de te permettre de développer un site web avec les outils modernes et de te sensibiliser aux bonnes pratiques de développement. Après si c'est pas ce que tu recherches, je peux toujours adapter mon tutorat à ce que tu recherches, dis moi juste ce que tu veux apprendre, y'a pas de soucis.

Donc pour résumer, adopte la structure de projet que cette pull request te propose et modifie le html pour en le css et le js, puis charge ton js juste avant la balise fermante du body.

Bon courage et à plus!

Xavier