Des outils pour vous simplifier le développement web
494 J'aime !

Des outils pour vous simplifier le développement web

Publié par Yann GROSYEUX

Construire un site web, c’est de la méthodologie, de l’apprentissage du langage, mais c’est aussi savoir utiliser des outils pratiques !

Compte-tenu du froid qui ne te fera pas bouger d’un pouce de ta chaumière – à moins de ne pas avoir le choix – nous voulions partager avec toi, un peu de nos techniques qui nous ont permis de développer ce blog.

 

Lors de l’élaboration d’un site web, on souhaiterait tous avoir :

  • un/une chef de projet qui prend le temps de planifier avec un joli Gantt toutes les actions à réaliser, qui en assure le suivi, et la documentation
  • un/une webdesigner qui va te mitonner une interface aux petits oignons
  • un/une traffic manager qui va œuvrer au quotidien pour que ton référencement soit béton
  • un/une community manager qui va te booster sur les réseaux sociaux
  • des testeurs en pagaille pour t’assurer que tu n’as pas de coquilles qui traînent
  • des relecteurs/correcteurs pour valider ton contenu éditorial, car nous ne sommes pas tous Jacques Capelovici – comment ça tu ne sais pas qui c’est ? Jette un œil, sur wikipedia wink

 

Voilà, ça c’est ce que l’on souhaiterait. Dans les faits, à moins de bosser en SSII ou dans une grosse structure, ce sera souvent toi qui feras tout le boulot, en t’aidant de ton pote qui est un peu graphiste à ses heures perdues, et de ta mère dont tu n’atteindras jamais le niveau de maîtrise de la langue française (merci maman !).

 

Partant de ce principe, il faut se doter des outils adéquats.

 

C’est quoi un outil adéquat ?

Adéquat, pour moi, signifie adapté à un besoin et à un contexte. Tu noteras que par adéquat, je ne désigne pas que des logiciels hors de prix : inutile de prendre celui qui a le plus de possibilités si tu ne le maîtrises pas. Par analogie, tu peux mettre une F1 dans les mains d’un non initié, et tu verras le résultat surprised

 

Dans le même ordre d’idées, il faut parfois être pragmatique et mettre quelques dollars / euros pour gagner du temps et / ou se doter d’un outil ou d’un service qui va-t’en faire gagner.

 

Garde à l’esprit que :

  • moins on est nombreux sur un projet, plus il faut être polyvalent et efficace
  • si tu mets un dollar et que tu en récoltes deux, alors tu es gagnant !

 

Ceci étant dit, passons maintenant en revue quelques outils ou services qui nous font gagner du temps au quotidien.

 

Trello.com

Trello est un service en ligne qui va te permettre d’organiser tes activités dans des boards, selon la méthode Kanban de Toyota. Pour être clair, c’est plus évolué que le post-it, mais ça ne te fera pas un joli Gantt.

 

outils-pour-simplifier-le-developpement-web-trello-01

 

Cela va te permettre, seul ou en équipe, de définir des tâches à réaliser, et d’en suivre l’avancement en déplaçant ta tâche selon des statuts que tu auras défini au préalable.

 

Pour chaque activité, tu peux indiquer un sujet, une description, une date de fin (qui génèrera des alertes), une liste d’actions. Tu peux également joindre des fichiers, attribuer une tâche à quelqu’un de ton équipe, et la tagguer avec des labels de ton choix.

 

outils-pour-simplifier-le-developpement-web-trello-02

 

Ce service est gratuit – il existe aussi une version payante, mais je n’ai jamais eu besoin d’y recourir – et se révèle très pratique pour s’organiser. Seul bémol, il est disponible uniquement en anglais.

 

Site : https://trello.com/

 

MySQL Workbench

Si tu es amené à créer ou modifier des bases MySQL, voici un outil qui va vraiment te simplifier la vie : rétroconception d’une base existante, définition d’un ou plusieurs schémas de données, génération d’un script de mise à jour entre une base et un modèle modifié. Cet outil est génial !

 

De base, il va te permettre de modéliser ta structure physique de données (tu te souviens le fameux MPD ?? smile ) : tables, vues, triggers, autorisations, jeux de données. 

 

outils-pour-simplifier-le-developpement-web-mysql-workbench-01

 

outils-pour-simplifier-le-developpement-web-mysql-workbench-02

 

Une fois la modélisation effectuée, tu pourras générer ta structure de base de données sous forme d’un script SQL à jouer à la mano, ou en te connectant à ta base préférée.

 

outils-pour-simplifier-le-developpement-web-mysql-workbench-05

 

Il supporte 20 moteurs de base de données dont MyISAM et InnoDB et la plupart des collations disponibles.

 

outils-pour-simplifier-le-developpement-web-mysql-workbench-03

 

outils-pour-simplifier-le-developpement-web-mysql-workbench-04

 

Alors la conception oneagainbistoufly de ta prochaine base de données : c’est terminé !

 

Dote-toi de cet outil très pratique qui te fera gagner un paquet de temps. Ça te permettra également de documenter ta structure de données (tu pourras par exemple imprimer ou exporter en PDF des diagrammes avec tes objets).

 

http://www.mysql.fr/products/workbench/

 

Générateur CSS 3

Le CSS 3 a révolutionné la manière de styler nos sites et applications web. Grâce aux bordures arrondies, dégradés de fond, et autres transitions, nous pouvons dans la majorité des cas nous affranchir des images de fond bien lourdes – souviens toi des découpages fastidieux de PSD et du pixel qui dépassait – et du javascript qui nous permettait de créer des effets d’animation. Avec CSS 3, c’est fini laughing

 

Enfin, presque fini… Toutes ces nouvelles propriétés mettent du temps à être normalisées. Il existe donc encore des préfixes propres à chaque navigateur pour les implémenter. Pour y voir plus clair dans tout ça, et ne pas oublier une syntaxe propre à un navigateur, des générateurs CSS 3 ont été développés pour nous simplifier la vie ! Comme pour tout, il en existe des basiques – dont je ne te parlerai pas – et d’autres super complets.

 

http://css3generator.com/

Super complet ! Il a l’avantage de t’indiquer à partir de quelle version d’un navigateur la propriété est prise en charge.

 

http://www.css3maker.com/

Idem au précédent, avec une interface un peu plus conviviale et complète.  

 

http://enjoycss.com/

Différent des deux précédents dans son approche, il propose des modèles déjà fait. Ça donne quelques idées quand on est en panne d’inspiration.

 

http://www.createcss3.com/

Très complet. Il se différencie des autres en proposant la syntaxe SASS Compass en plus du CSS, et la possibilité de mixer les propriétés pour obtenir le code complet (ex. Border radius et background gradient).

 

Traitement des images

XnView

XnView est un freeware de traitement d’images. Jusque-là, rien de bien différenciant… Ce qui le rend si particulier est sa capacité à gérer des lots de traitement, de manière pratique et efficace. D’autres le font, mais c'est pas aussi convivial.

 

outils-pour-simplifier-le-developpement-web-xnview

 

Nous avons eu à le tester récemment dans le cadre d’un lot d’images de tailles différentes à redimensionner. L’objectif était d’avoir des images de 700px de large, sans les déformer, et en traitant uniquement celles qui étaient supérieures à la dite largeur. En 2 minutes c’était fait… Il va bien plus loin que ça et permet de mixer des transformations (redimensionner et ajouter un alpha par exemple).

 

Rendez-vous sur le site de son auteur pour découvrir et télécharger cet outil super pratique : http://www.xnview.com/fr/xnviewmp/

 

Lupas Rename 2000

Un peu hors sujet – quoique – cet outil vous permettra de renommer selon des règles définies un lot de fichiers ou de dossiers. Vous pourrez personnaliser le nom et l’extension, en utilisant majuscule/minuscule, des incréments, des préfixes et suffixes, ou même en supprimant les caractères accentués.

 

outils-pour-simplifier-le-developpement-web-lupas-rename-2000

 

Son interface n’est pas toute jeune, mais ce freeware fait super bien son boulot !

http://www.01net.com/telecharger/windows/Utilitaire/gestion_de_fichier/fiches/27800.html

 

Greenshot

Il existe des caisses de logiciels de capture d’écran, mais mon choix d’est arrêté sur celui-là. Ce petit outil s’insère dans votre barre des tâches, et il répond à une combinaison de touches. Vous pourrez définir l’action par défaut à effectuer (enregistrement automatique, ouverture d’une fenêtre de dialogue pour spécifier le nom du fichier, etc.).

 

Sa particularité est d’offrir une fenêtre de personnalisation de la capture écran avant enregistrement, pour ajouter un rectangle sur une partie à mettre en avant par exemple. Super pratique au quotidien !

 

outils-pour-simplifier-le-developpement-web-greenshot

 

Découvrez-le ou téléchargez-le sur http://getgreenshot.org/fr/

 

Tests de performance

Au-delà de l’ergonomie et du contenu, l’une des clés d’une expérience utilisateur réussie, repose sur les performances du site web : les pages doivent charger le plus vite possible, tout en étant efficient dans sa consommation de ressources. Mise en cache, adaptation du contenu au périphérique et à la bande passante, tuning du serveur et de la base de données, tous ces points sont primordiaux.

 

Chaque site étant unique – technologie, plateforme, code, base de données – l’important est de savoir identifier les leviers d’amélioration et d’optimisation. Et ça tombe bien, les outils suivants vont vous y aider. Ne vous attendez pas non plus à atteindre le seuil des 100 à chaque rubrique – à moins d’avoir les moyens de se payer du CDN partout, un dédié, etc. – mais gardez à l’esprit l’important : c’est un travail au long cours, à mesurer régulièrement.

 

C’est d’autant plus vrai si la partie éditoriale est entre les mains de votre service marketing – oui avec une résolution de 4000x3000px et un DPI élevé, il n’y pas de perte… mais l’image fait 8mo !

 

L’optimisation passe également par la formation et la mise en œuvre de bonnes pratiques.

 

Google Insights

Très bon outil axé sur la performance. Il se distingue par un double regard : desktop et mobile. Il mesure et formule des suggestions d’amélioration par criticité.

https://developers.google.com/speed/pagespeed/insights/

 

Opquast

C’est Simon qui nous a fait découvrir ce très bon outil : Opquast ! Au-delà des performances, il se distingue par les autres rubriques qu’il propose en analyse : SEO, accessibilité. Ça en fait certainement le plus complet pour les mesures. Côté interface et précision des suggestions, je le trouve moins pratique qu’Insights par contre.

https://desktop.opquast.com/fr/

 

GTMetrix

GT Metrix est un outil de mesure incontournable qui vous proposera deux méthodes d’analyse : Page Speed et YSlow. Les suggestions sont triées par l’impact qu’elles auront sur les résultats du test. Il propose également un historique des mesures, qui vous donnera le smile à chaque amélioration.

http://gtmetrix.com/

 

C’est tout… pour le moment tongue-out

 

494 J'aime !

Un commentaire ? Réagissez !