Organiser ses dossiers et ses fichiers
Les dossiers
Voici quelques conseils:
- le fichier index.htm (ou index.php) dans le dossier de base (en général de nom www)
- un dossier pour les images (_images)
- un dossier fourre-tout (_foutou)
- un dossier pour votre feuille de style et vos js (_mywork)
- tous les noms de dossiers ont le même nombre de caractères (j'utilise 2 lettres), sauf ceux de l'arborescence de base
- les noms des dossiers doivent être mnémoniques
Les fichiers
Il faut prévoir des noms faciles à construire, voici quelques conseils:
- le nom des fichiers commence par les 5 premières lettres les plus évidentes suivi d'underscore et du
nom du dossier qui le contient;
- utiliser un jeux de caractères fixe, lettres min/maj, underscore et les 10 chiffres. Ne jamais utiliser
l'espace, les caractères accentués et spéciaux;
- donner l'extension .php à vos fichiers, cela vous évitera de les renommer s'il fallait
y rajouter du code php.
Vérifier le code
Il faut éviter document.write() en JS, vous empêchez le parser du navigateur de continuer son exécution sur le code HTML qui pourrait suivre. Le navigateur web va rester bloqué sur cette instruction jusqu’à ce que le script soit téléchargé, mais aussi exécuté.
Les temps de chargement de vos pages peuvent être considérablement allongés!
Il est est utile de vérifier son code html, le site du W3C propose un correcteur bien pratique.
Il suffit de copier/coller le code dans l'espace prévu. W3C correcteur
On peut directement vérifier une page:
- par son url
- on peut télécharger la page
- en faisant un copier/coller du code
GTmetrix permet de mesurer la rapidité de chargement d'une page, le site propose également des solutions aux problèmes trouvé.
Il suffit de copier l'url dans la page.
Organiser le code
Aucune des règles suivantes n'est obligatoire, mais au fil de la pratique elles se révèlent particulièrement précieuses:
Séparer contenu et mise en page
La structure et le contenu informatif d'une page web se font au niveau du code html, les balises structurantes et sémantiques permettant d'informer les robots des moteurs de recherche sur le contenu du site et donc de le référencer.
La mise en page (polices, fonds, couleurs, bordures.etc) se fait au travers d'une feuille de styles CSS qui sera liée aux fichiers html du site.
La séparation du contenu (html) et du contenant (css) permet une actualisation plus aisée de votre site
Lisibilité
Au sein de votre éditeur l'espace, le retour à la ligne et la tabulation n'ont aucun effet sur la mise en page
du document. Ces caractères seront donc utiliser pour organiser la lisibilité du code.
- veiller, dans l'éditeur, à ne pas dépasser le cadre de la fenêtre afin d'éviter l'utilisation de la barre de défilement horizontale;
- penser à respecter l'ordre d'imbrication pour les tags imbriqués:
<I> <B> ..…… </B> </I> et non <I> <B>..…… </I> </B>
- utiliser toujours les attributs dans les tags en respectant le même ordre, cela permet de repérer plus facilement l'attribut recherché;
- utiliser dans l'éditeur des lignes vierges pour séparer visuellement les paragraphes et passages du code HTML;
- indenter les lignes du code;
Commenter le code
<!-- Mon merveilleux premier commentaire... -->
Les commentaires sont impératifs, ce sont eux qui vous rappelleront ce que vous aviez fait il y a 2 jours,
2 semaines, 2 mois ou 2 ans.
Les pages Web créées aujourd'hui subiront de très nombreuses mises à jour. Ces modifications du code peuvent être espacées de plusieurs semaines.
Il est donc indispensable de structurer le plus clairement possible le code HTML de façon à faciliter les modifications et corrections
ultérieures.
<!doctype html>
<html lang="fr">
<head>
<!-- l'en-tête du document -->
</head>
<body>
<!-- le contenu du document -->
</body>
</html>
Organiser son travail
Le bureau
Lorsque vous travaillez il faut avoir ouvert 4 programmes:
- le poste de travail (explorateur)
- Notepad++ (win <--)
- votre navigateur préféré (win -->)
- easyphp pour ceux qui travaillent en php
Mécanisme de travail
- j'ouvre mes 3 ou 4 programmes
- je travail sur un fichier dans Notepad++
- je fais ctrl+s
- je fais alt+tab et je sélectionne le browser
- je fais F5 pour voir l'effet de mon travail
- je fais alt+tab pour revenir sur Notepad++
- et ainsi de suite...
Notepad++
Toujours veiller à travailler avec un document déclaré html5, spécifiant la langue utilisée et dans le bon jeu de caractères (utf-8), utiliser au minimum pour l'en-tête:
<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8">
</head>
<body>
<!-- Contenu informatif -->
</body>
</html>
Raccourcis clavier Notepad++
- ctrl + s permet de sauver
- ctrl + D permet de dupliquer la ligne active
- ctrl + C permet de copier
- ctrl + X permet de couper
- ctrl + V permet de coller
- ctrl + F permet d'ouvrir la fenêtre de recherche
- ctrl + L permet de supprimer la ligne courante
- ctrl + T permet d'intevertir la ligne courante avec la précédente
- ctrl + U permet de transformer en minuscules la sélection
- ctrl + shift + U permet de transformer en majuscules la sélection
- ctrl + shift + down permet de déplacer la ligne courante vers le bas
- ctrl + shift + up permet de déplacer la ligne courante vers le haut
- alt + souris permet de sélectionner en colonnes
- TAB permet d'insérer une tabulation
- shift + TAB permet de supprimer une tabulation
- ctrl + spacebar permet d'afficher un menu de fonctions pour le langage concerné (très pratique)
- ctrl + enter permet d'afficher la liste des mots possibles en fonction des lettres entrées (très pratique)
Raccourcis clavier Windows
- alt + tab permet de passer d'une fenêtre à l'autre
- alt + F4 permet de fermer une fenêtre et le programme qui s'y trouve
- WIN + D permet de minimiser toutes les fenêtres d'un coup
- WIN + --> et WIN + <-- permet à 2 programmes ouverts d'occuper chacun une demi fenêtre
- ctrl + <--- permet de supprimer du texte mot par mot
Raccourcis YouTube
- K pour mettre en pose
- J pour revenir en arrière de 10s
- L pour avancer de 10s
- M pour couper le son de la vidéo
