Informatique


Quelques bonnes pratiques!

Aller à


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.

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 le 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++
  • votre navigateur préféré(sauf IE !!))
  • easyphp pour ceux qui travaillent en php
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>
 
Voici quelques raccourcis bien utiles:
  • 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)
le browser
  • Utiliser F5 pour rafraîchir la page
  • Utiliser ctrl+maj +j pour ouvrir la console
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...