Notepad ++ ; premiers pas et trucs utiles.
Coucou les Utopiens ! ♥ Pour ma toute première contribution ici, j'ai décidé de vous parler de ce logiciel dont on voit souvent le nom courir entre les codeurs qui bavardent, et dont certains —comme... moi, jusqu'à il y a peu, je l'avoue— se tiennent à distance, en se demandant "gnééé keskecé ?" Eh bien, je vais vous répondre ! Il s'agit d'une sorte de bloc-notes, mais en beaucoup plus pratique, puisqu'il y a une mise en place automatique de couleurs, par exemple, ce qui vous permets de trouver rapidement vos balises mal écrites ou mal fermées. Il permet de mettre ses codes au propre, notamment, mais aussi de les prévisualiser en direct sur votre navigateur, de les héberger, et... et vous allez voir, ce dernier point est bien l'un des plus pratiques qui soient ! Car, je vous le demande : quel codeur qui touche au CSS dans des posts (par exemple, fiche de RP sur un forum dont on n'a pas accès à la feuille de style) ne s'est jamais retrouvé avec un CSS de 60 lignes imbuvables à descendre dans sa zone de saisie Forumactif avant de pouvoir taper son petit RP ? Et si je vous disais que ces soixante lignes, on pouvait les remplacer par une seule ? Si, si. C'est possible. Et je vais vous le montrer, en toute fin d'astuce, parce que c'est cadeau et que ça fait toujours plaisir !
L'astuce va se diviser en deux parties :
— en premier lieu, je vais vous montrer comment utiliser Notepad++ le plus simplement du monde, autrement dit les bases, et ce qu'il vous suffit de connaître pour exploiter le logiciel.
— dans un deuxième temps, je vous parlerai de la fameuse astuce cadeau pour ne plus s'embêter avec les soixante lignes de CSS au début d'un post. Je vous assure, ça n'est pas de la magie, juste quelques clics !
— en premier lieu, je vais vous montrer comment utiliser Notepad++ le plus simplement du monde, autrement dit les bases, et ce qu'il vous suffit de connaître pour exploiter le logiciel.
— dans un deuxième temps, je vous parlerai de la fameuse astuce cadeau pour ne plus s'embêter avec les soixante lignes de CSS au début d'un post. Je vous assure, ça n'est pas de la magie, juste quelques clics !
Notepad ++
Votre logiciel téléchargé sur le lien officiel & sécurité fourni plus haut —pour ma part, j'ai choisi le Notepad++ Installer, autrement dit le premier de la liste— et enfin ouvert, il vous place en face d'une page de récapitulatif des débugs etc, ignorez-la. Cliquez simplement sur l'icone nouveau, ou bien Ficher > Nouveau. C'est un nouvelle onglet qui s'ouvre, complètement vierge, avec un petit chiffre sur la gauche : bref, vous avez affaire à une feuille de style dans toute sa beauté.
Créer une page html
Première étape importante ! Allez dans Langage > H > HTML. Ainsi, le logiciel saura ce que vous comptez lui raconter, la façon dont il devra comprendre votre blabla et comment l'interpréter pour réagir correctement. De ce fait, le style restera noir, mais le html prendra des couleurs de sorte à vous permettre de vous repérer dans votre fichier. Pratique, non ? %D
Etant donné qu'ici, il s'agit d'une page HTML, il faut la "paramétrer" de la même façon qu'on pourrait le faire sur un forum. Mais si, vous savez, le doctype, le body, le style... Le but ici n'est pas de vous expliquer à quoi correspond chaque balise, aussi je vous la fournis simplement. Elle est à copier / coller dans votre document Notepad++.
- Code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Titre</title>
<style type="text/css">/*Feuille de style CSS*/</style>
</head>
<body>
Corps de la page html
</body>
</html>
Vous le savez peut-être déjà, mais un rafraîchissement de la mémoire ne fait jamais de mal : c'est à la suite de l'ouverture de la balise "head" que vous pouvez, si vous le souhaitez, rajouter la ou les polices Google Fonts que vous utiliserez dans votre document. N'oubliez pas non plus qu'un seul lien est nécessaire, et qu'il suffit de séparer chaque police d'un | dans ce seul et même lien pour qu'elles fonctionnes toutes ! Exemple : [...]family="Open+Sans|Oswald|Roboto'[...] rend les polices Open Sans, Oswald et Roboto utilisables dans tout le document qui suivra.
Ceci fait, le logiciel fonctionne exactement comme une page HTML : il vous revient donc de remplir le style et le body comme bon vous semble, à votre goût, pour faire une PA, un répertoire à RP, une fiche de relations, bref, ce que vous voulez. Au final, vous n'aurez plus qu'à copier / coller le code sur une véritable page HTML de votre forum, tout beau, tout propre. 
Attention ! Lorsque vous enregistrez, vérifier bien que l'extension soit .html, et non pas .txt ! Normalement, puisque vous avez donné le HTML comme langage à votre fichier, le .html devrait s'y trouver par défaut, mais rien n'est moins sûr. Alors, faites-y bien attention ! En soit, ça n'est pas grave s'il reste en .txt, mais cette extension-ci empêchera le bon fonctionnement de l'astuce qui suit, et qui est pourtant fortement pratique. c:
Petite astuce : prévisualisation directe
Petit truc sympa qu'il me semble tenir de Batty, sur Epicode, et qui empêche de galérer à devoir faire d'innombrables copiés / collés pour avoir le droit au visu de sa page : une fois votre document.html enregistré, allez le chercher dans le dossier où vous l'avez placé. Ici, vous faites un petit clic droit dessus > ouvrir avec > votre navigateur. Une page s'ouvrira, avec votre code mis en page ! A chacune de vos modifications ensuite, enregistrez simplement, et actualisez votre page sur votre navigateur. Vous pouvez ainsi voir les changements effectués pas à pas, comme vous le feriez sur un forum par exemple !
Créer une feuille de style CSS
Le principe est exactement le même que pour créer une page HTML. Vous ouvrez votre nouveau document, et vous allez à nouveau déterminer un langage pour votre fichier. Evidemment, puisqu'ici on ne parle plus de HTML, on ne demandera pas à Notepad++ de parler HTML —ne demandez pas à un français de parler allemand dans un cours d'anglais, c'est illogique, m'voyez ?
Alors, cette fois-ci, on va dans Langage > C > CSS. Ensuite, sur votre fichier, pas besoin de glisser le moindre docstyle ou quoique ce soit d'autre : vous pouvez directement commencer à nommer vos class et remplir leur style. Cette fois-ci, le CSS se met en couleurs, et vous guide à nouveau dans votre façon de coder, à l'affût des balises mal fermées ou des souci de syntaxe de votre code !
Attention ! Pour l'enregistrement cette fois-ci, veillez à ce que l'extension soit bien .css et rien d'autre !
Complément utile : Archive Host
Archive Host est une plateforme d'hébergement réputée pour être véritablement polyvalente et utilisable pour tout et n'importe quoi. Elle est parfaite pour installer des musiques sur nos forums ou dans nos signatures, parfaite aussi pour sauvegarder nos fichiers et les retrouver sans avoir à s'encombrer d'une clef USB, et... parfaite aussi pour héberger des feuilles de style, et nous l'allons voir dans un instant !
Inscription
On entend souvent dire qu'Archive Host est payant... C'est faux ! Enfin, il y a eu des périodes où il l'était entièrement, si je ne dis pas de bêtise, mais aujourd'hui, comme beaucoup d'autres plateformes, le site propose une version pour les particuliers, qui n'ont pas besoin d'autant d'espace de stockage que les professionnels ou les entreprises.
Lorsque vous arrivez sur la page d'index d'A-H, cliquez sur Inscription dans la barre de navigation, puis choisissez le Stockage de fichiers. Vous êtes redirigés vers une page avec diverses offres —payantes, oui—, mais celle qui nous intéresse est la dernière, celle qui nous demande si "nos besoins sont simples", et nous propose une offre gratuite réservée à nous autres, pauvres petits particuliers sur la paille.
Cliquez, inscrivez-vous, validez votre email, connectez-vous, et ensuite, les choses sérieuses commencent !Au moment de vous connecter, ne soyez pas bête comme moi qui ne fais pas attention avant de cliquer : il y a deux boutons de connexion, un Panel et un Manager. Faites bien attention de cliquer sur celui qui fait face à Panel, sinon vous pouvez toujours essayer de vous connecter, ce sera un échec pur et dur —auquel je me confronte souvent 
Hébergement d'une feuille de style
Une fois que vous êtes dans vos fichiers —si votre connexion ne vous y redirige pas automatiquement, cliquez sur la petite maison à côté de Panel pour y accéder—, cliquez sur Ajouter des Fichiers pour ouvrir une boîte d'hébergement. A nouveau, Ajouter des fichiers, et allez chercher votre feuille de style enregistrée un peu plus tôt avec l'extension .css. Ceci fait, vous cliquez sur Démarrer l'envoi, puis vous pouvez fermer votre boîte si elle ne se ferme pas automatiquement. Notez que vous pouvez envoyer plusieurs fichiers à la fois sans souci !
Votre fichier .css apparaît désormais sur votre espace de stockage, sous la forme d'un icone papier à bordure rose —très joli, par ailleurs, notez-le bien. Bravo, vous avez hébergé une feuille de style CSS !
D'accord... C'est bien joli de savoir héberger une feuille de style, mais concrètement, ça sert à quoi en fait ? Puis t'aurais pas oublié de nous causer de ton astuce pour palier aux soixante lignes de code, là, par hasard ?
Utilisation d'une feuille de style hébergée
Minute, papillon ! Je n'ai point oublié, et nous y voilà enfin : l'astuce finale, bien pratique, qui nous permettra de clôturer en beauté ! Vous avez d'un côté votre CSS, sagement hébergé sur Archive Host, et de l'autre, votre code de RP/répertoire/fiche de liens/que sais-je tout en class et complètement dépendant de ce CSS parti vers d'autres cieux ? Pas de panique, vous pouvez à nouveau les relier, tout en faisant une grosse économie de place, de caractères, et un pas de géant dans la praticité !
La recette magique ? Elle vous dira forcément quelque chose... la voici :
- Code:
<link href='URL' rel='stylesheet' type='text/css'>
Eh oui ! Il s'agit du même lien qui vous permet de relier des polices de Google Fonts à vos messages ! Et c'est aussi cette petite chose qui, du même coup, va vous permettre de relier votre CSS à partir d'un autre site —dans le cas présent, à partir d'Archive-Host.
Retournons sur la plateforme d'hébergement, donc. Si vous survolez votre fichier, vous pourrez voir apparaître une petite flèche orientée vers le bas, en haut à droite de la zone de survol. Cliquez dessus ! Apparaissent différentes fonctions. Celle qui nous intéresse ici, c'est la fonction Informations et Codes. Un petit clic, et une nouvelle boîte s'ouvre, normalement par défaut sur l'onglet des codes. C'est parfait ! Ne vous occupez que du premier, le lien Principal, qui doit ressembler à quelque chose comme ça :
- Code:
http://www.aht.li/sériedechiffres/NOM_DE_VOTRE_FICHIER.css
Vous le copiez, et vous le collez dans le lien que j'ai mis un peu plus haut, à la place du "URL". Mais si, celui-là même qui vous permet de relier les liens Google Fonts, vous savez bien ! Ceci fait, vous obtenez donc :
- Code:
<link href='http://www.aht.li/sériedechiffres/NOM_DE_VOTRE_FICHIER.css' rel='stylesheet' type='text/css'>
Et là, vous n'avez plus qu'à le placer au début ou à la fin de votre message rempli de class, à la façon d'une police Google Fonts. Tout à coup, les class prendront vie, animées par la poussière de fée de votre feuille de style hébergée ! Si c'est pas beau, ça.
Petite information bonus :
Sur Archive Host, si vous avez fait une erreur dans votre CSS ou que vous voulez le modifier, il suffit que vous ré-hébergiez le fichier avec le même nom et l'ancien fichier sera remplacé par le nouveau fichier sans que le lien ne soit modifié, ce qui fait gagner beaucoup de temps si votre css est utilisé à plusieurs endroits.
Petite information bonus 2 :
Il est possible d'héberger des fichiers de polices (.ttf par exemple) sur Archive Host.
Dernière édition par Encrine le Dim 15 Mai 2016 - 12:44, édité 4 fois
, on espère qu'il y en aura d'autres !
)
(oui, ça semble vraiment "Captain'Obvious" là, du coup j'hésite xD).
♥
