Mobile Menu

Une trousse à outils idéale pour bien démarrer dans le web

13 / 05 / 2016
Intégration, Veille

Outils

Article rédigé par Julien Muller, stagiaire en webdesign & intégration web chez Oboqo

Quand on débute dans le web, il n’est pas simple de savoir par où commencer. J’ai perdu moi-même un temps incalculable à tester différentes méthodes de travail, outils et logiciels avant de trouver le panel utile et fonctionnel au quotidien. En tant que stagiaire webdesigner / intégrateur web chez Oboqo, j’ai pensé qu’il serait intéressant de rassembler dans un article les outils idéaux pour bien démarrer dans le web.

Par où commencer ?

Dans le web, comme dans tous les domaines, il faut dans un premier temps créer son espace de travail.

Pour cela nous avons besoin :

  • D’un éditeur de texte pour taper du code ;
  • De plusieurs navigateurs pour faire des tests ;
  • D’outils, de plugins et de bonnes adresses pour se simplifier la tâche.

Choisir un bon éditeur de texte

S’il y a un programme utilisé 90% du temps au quotidien par les intégrateurs et développeurs web, c’est bien l’éditeur de texte ! Et parmi tous ceux existants, il n’est pas évident de faire le bon choix. Bien entendu, chacun a ses préférences, mais tous les éditeurs ne se valent pas.

Privilégiez un outil simple qui ne vous fera pas perdre de temps à cause de son fonctionnement. Le Bloc-notes de base pourrait théoriquement suffire, mais privilégiez plutôt un éditeur de code comme Sublime Text 3 ou Brackets, bien plus agréables d’utilisation.

Ils proposent chacun une interface intuitive et extensible (possibilité d’ajout de plugins), la possibilité de créer des dossiers et sous-dossiers de travail hiérarchisés par projet pour facilement s’y retrouver, et, petit plus, vous pouvez facilement personnaliser leur apparence, et donc avoir un meilleur confort visuel en utilisant par exemple une couleur de fond sombre.

Brackets, qui est déjà nativement disponible en français, dispose d’une option plutôt intéressante : l’option « Aperçu en direct » qui permet d’ouvrir la page web que vous êtes en train de coder directement dans Google Chrome et de voir vos modifications en direct. Pratique quand on travaille en double écran !

Se faciliter le travail grâce aux extensions des éditeurs de texte

Quelques lignes plus haut, j’évoquais le fait qu’il est possible d’ajouter des extensions à nos éditeurs de texte afin de se faciliter la vie. En effet, il est souvent pénible de taper à répétition, ligne après ligne, le même bout de code ou de bien respecter l’indentation de son code pour que celui-ci reste propre.

Je ne peux que vous conseiller d’utiliser Emmet, une extension qui permet de générer une dizaine de lignes de code en n’en tapant qu’une seule à l’aide d’abréviations. Un simple « ! » suivis de la touche « TABULATION » vous génèrera le code de base d’une page HTML.

Exemple :

Tapez cette abréviation puis la touche TAB :

!>(header>(#nav1>ul.menu(li*5(a)))(#nav2(ul.menu(li*3(a)))))>article>(h1{Hello World !})(p{Emmet c’est vraiment super, on gagne un temps incroyable !})

Vous obtiendrez le code suivant :

Emmet, extension pour éditeur de texte

Le résultat dans Brackets

Emmet produit un code indenté, c’est-à-dire propre dans la disposition (balise ouvrante alignée avec la balise fermante), mais bien souvent nous avons besoin d’y apporter des modifications, ce qui peut avoir pour répercussion de tout décaler et par conséquent de rendre difficile la lecture du code.

Heureusement, Beautify est là ! Cette seconde extension permet en un clic de ré-indenter son code. Un code propre est essentiel, surtout si une personne tierce est susceptible de reprendre votre travail. À ce propos, il est important de nommer ses fichiers proprement et d’ordonner ses dossiers. Par convention n’utilisez pas d’espaces ni d’accents. Ces règles sont aussi applicables dans votre code pour les « id » les « class », les noms de variables…

Ces deux extensions seront très utiles dans notre trousse à outils idéale pour bien démarrer dans le web. Vous trouverez sur Internet une liste interminable d’autres extensions aux fonctionnalités très diverses pour votre éditeur de texte.

Les navigateurs

Sans eux, impossible de voir le fruit de votre travail ou tout simplement de naviguer sur Internet. Il en existe une multitude, mais seulement 5 de ces navigateurs sont réellement utilisés par les internautes (chiffres d’avril 2016 d’après StatCounter) :

  • 47.4 % de part de marché pour Google Chrome ;
  • 12.8 % de part de marché pour Safari ;
  • 9.1 % de part de marché pour Internet Explorer et Edge, le petit dernier de Microsoft ;
  • 8.4 % de part de marché pour Firefox.

Qui dit plusieurs navigateurs, dit plusieurs rendus ! Un site Internet peut avoir un aspect différent de Google Chrome à Internet Explorer, surtout si la version installée n’est pas à jour. Il est donc important d’effectuer des tests sur plusieurs navigateurs pour vérifier qu’il n’y ait pas de bogues d’affichages.

Pour être efficace, installez au minimum Google Chrome et Mozilla Firefox en plus d’Internet Explorer ou Safari, respectivement présents de base sur Windows et Mac. Si vous avez Windows 10, vous pourrez également tester votre code sur Edge, destiné à remplacer Internet Explorer à terme.

Une grande majorité de développeurs utilisent Google Chrome pour consulter des sites web et pour déboguer (touche F12 pour ouvrir la console de débogage). Encore une fois c’est une question de préférence, mais notez bien que si Chrome est le navigateur le plus utilisé ce n’est pas sans raison.

Faciliter et sécuriser le transfert de fichiers

Pour héberger votre site web afin qu’il soit consultable par les internautes, vous devez déposer les fichiers qui l’assemblent (html, css, php, js…) sur un serveur qui vous est loué par un hébergeur (comme OVH ou 1&1).

Afin d’accéder à vos fichiers sur le serveur, vous pouvez vous y connecter via un client FTP (abréviation de File Transfert Protocole) en utilisant les identifiants de connexion fournis par l’hébergeur.  Rien ne vous empêche aussi d’installer votre propre serveur pour y stocker vos fichiers et de tout gérer vous-même si vous en êtes capable.

Client FTP

FlieZilla, un client FTP

FileZilla et WinSCP sont deux clients FTP libres qui permettent de faciliter et sécuriser les transferts. Chacun a ses avantages : FileZilla permet des transferts plus rapides mais vous oblige à confirmer l’envoi du fichier à chaque enregistrement, contrairement à WinSCP. On préfèrera donc WinSCP pour l’intégration ou le développement, et FileZilla pour les gros transferts (migration de site, sauvegarde…).

Vous pouvez également configurer certains éditeurs (dont Brackets via l’extension SFTPUpload) pour travailler directement sur votre serveur et donc enregistrer instantanément vos modifications en ligne grâce à un simple Ctrl+S.

Et pour le design ?

Voilà un point à ne pas prendre à la légère ! Il ne faut pas oublier que pour réaliser un site Internet, il faut se poser les bonnes questions avant de se plonger dans la partie technique :

  • Quel type de site ?
  • Quels objectifs ?
  • Quelle cible ?

N’oublions pas que le contenu et la structure des pages ne seront pas les mêmes sur un site e-commerce destiné à la vente de vêtements et sur un blog où seront postés des articles liés au webdesign.

Pour trouver l’inspiration, l’une des meilleures méthodes consiste à parcourir des sites qui répertorient les tendances design actuelles comme awwards.com, theme-forest.net ou webdesign-inspiration.com, d’en noter des idées, faire des brouillons… en bref, se tenir au courant de la « mode » du web.

Les mockups avec Pencil Project

Pour anticiper l’intégration de ses contenus dans ses pages web (logos, menu de navigation, sections d’articles…), on réalise un « mockup », un prototype d’interface pour représenter les différents scénarios de navigation du site.

Pencil Project est un logiciel destiné à la réalisation de mocks-up. Intuitif et très complet, il a l’avantage d’être gratuit et adapté à des projets d’envergure en cas de besoin.

Pour l’utiliser, il vous suffit de faire un glisser-déposer des différents éléments (boutons, titres, textes, images, puces, menus déroulants…) depuis la colonne de gauche vers votre document, les redimensionner et les placer.

Mockup Pencil

Exemple de mockup réalisé sur Pencil Project

Réaliser ses maquettes

L’étape incontournable qui suit la réalisation des mockups est la création des maquettes. Et pour cela, rien de plus efficace que le célèbre logiciel Adobe Photoshop grâce auquel vous allez finaliser l’apparence de votre site web en intégrant les polices que vous utiliserez lors de l’intégration, les couleurs, les effets (transparences, ombres ou autres)…

Adobe Photoshop va également vous aider à optimiser vos images pour le web, redimensionner vos visuels pour les sliders ou encore les alléger en poids pour limiter le temps de chargement de vos pages.

Voir aussi : Comment faire des maquettes que les intégrateurs ne vont pas détester

En bonus : La boîte à couleurs

Un outil que j’apprécie tout particulièrement est La boite à couleurs, un petit programme très pratique qui se lance instantanément et qui vous permet de récupérer le code hexadécimal d’une couleur sur une page web, une image, dans Adobe Photoshop ou n’importe où sur votre écran, via un color-picker. Une autre fonctionnalité intéressante est de pouvoir générer des couleurs personnalisées, ce qui peut s’avérer utile pour les déclinaisons. La boîte à couleurs présente un gros avantage dans ses options : vous pouvez laisser la fenêtre du programme au premier plan.

La boîte à couleurs

La boîte à couleurs

Quelques adresses utiles

HTML / CSS

W3schools.com, la référence de tout développeur, propose des tutoriels et exemples des bonnes pratiques pour les langages HTML, CSS, JavaScript, PHP, SQL, Bootstrap et jQuery.

Css-faciles.com, un excellent mémo des différentes propriétés CSS proposant des astuces et tutoriels.

Jaetheme.com/balises-html5, un mémo complet des balises HTML5.

Css3generator.com, un générateur de code online intuitif et très performant.

Pxtoem.com, un convertisseur de pixels en « em » pour faciliter l’intégration de vos maquettes en responsive.

Banques d’images et icônes libres de droits

Flaticon.com est un site qui propose de télécharger des icônes pour vos maquettes.

Fontawesome.io est une banque d’icônes sous forme de police, à intégrer directement dans vos pages web via une classe CSS.

Thestocks.im, une banque d’images / photos en haute définition et libres de droits pour vos blogs, maquettes, articles, etc.

Polices

Bien qu’il existe de nombreux sites où télécharger des polices pour vos maquettes et sites Internet, il est conseillé d’utilisé les polices proposées par Google Font. Elles ont l’avantage d’être très faciles à intégrer à votre code (une ligne à insérer dans la balise <head>). Elles sont suffisamment nombreuses et variés pour y trouver votre bonheur.

Les sites fontsquirrel.com et dafont.com sont également deux bonnes adresses pour télécharger vos polices pour Photoshop ou un logiciel de traitement de texte.

Recherche de couleurs

Color.adobe.com est un outil pratique qui vous propose de générer une palette de couleurs via une image téléchargé au préalable.

Color Adobe

Paletton.com est une roue chromatique qui génère un nuancier de cinq tons différents à partir d’une couleur de base.

Paletton

En conclusion

Cet ensemble est un bon point de départ pour bien débuter dans le web, mais ne vous limitez pas à cette liste, soyez curieux ! Les technologies évoluent quotidiennement, et régulièrement de nouveaux logiciels et outils voient le jour.

Au fur et à mesure de votre progression dans l’aventure du web, vous serez amené à utiliser de nouveaux softwares comme XAMPP, un outil capable de créer un serveur virtuel et ainsi lire et comprendre le langage PHP pour travailler en local. Si vous travaillez à plusieurs sur un projet, vous pourrez aussi utiliser un serveur Git, un environnement de partage où vous pouvez gérer l’évolution du contenu des fichiers via une arborescence.

Vous trouverez de nombreuses informations sur les tendances actuelles sur des sites spécialisés dans le domaine du web et du multimédia ainsi que sur les réseaux sociaux et forums de webdesign. N’hésitez pas à consulter également nos autres articles sur le blog d’Oboqo mais aussi sur Alsace Référencement, le blog de Première Place, pour en apprendre plus sur l’e-marketing.

Pour résumer, vous disposez maintenant :

  • D’un éditeur de texte amélioré grâce à des plugins ;
  • De plusieurs navigateurs pour faire vos tests ;
  • D’adresses utiles au développement ;
  • D’outils en lignes (générateurs de codes, mémos, palettes de couleurs) ;
  • De quoi réaliser le design de vos projets (Pencil et Photoshop) ;
  • D’un client FTP pour faciliter et sécuriser vos transferts.

Il ne vous reste plus qu’à vous lancer !

Source image : Flickr

Article rédigé par Julien Muller, stagiaire en webdesign & intégration web chez Oboqo