WdStr

Résumé de l’apéro #6 ShareTheLove

Pour cette 6ième édition, le WdStr a été agréablement accueilli à la Plage Digitale.
Cette rencontre a été l’occasion d’échanger autour de quelques outils. Nous vous proposons un petit résumé des outils présentés mercredi soir.
Merci à tous pour vos contributions et votre participation :)

Sublime text

http://www.sublimetext.com/

Présenté par Thomas @M0rningMaj0r

Sublime Text est un éditeur de code multi-formats. Il peut être configuré et complété à la guise de chacun par l’ajout de différents “plugins”.

L’édition de plusieurs fichiers se fait facilement via un système d’onglets. Plusieurs vues sont possibles : vue simple, vue en colonnes, vue multiples. L’outil permet aussi l’édition en parallèle de différents projets. Un gestionnaire interne permet de configurer l’application à ses besoins : ajout de fonctionnalités, édition de chaînes de caractère, snippets de code.

Dans la version 3 (actuellement en béta, mais disponible pour les utilisateurs payants de l’application), Sublime Text offre la possibilité de suivre des classes et de les ouvrir directement dans le projet via Ctrl Alt Bas.
La version 3 offre aussi un nouveau gestionnaire de vues par groupes.

GuideGuide

http://guideguide.me/

Présenté par Arnaud @WDTrends

Extension gratuite pour Photoshop pour faciliter la création de grilles dans une maquette.

En quelques clics GuideGuide permet de générer la grille souhaitée dans le bloc ciblée avec le calcul automatique selon les valeurs fixées : nombre de colonnes, goutières, marges, …

Pour faire une grille, il suffit de :

  • sélectionner une forme
  • définir un nombre de colonnes
  • cliquer sur le bouton magique GuideGuide

GuideGuide permet aussi d’enregistrer des grilles pré-configurées.

ContrastA

http://www.dasplankton.de/ContrastA/

Présenté par Jennifer @bruitsilencieux

Contrast-A offre la possibilité de vérifier les contrastes entre une couleur de fond et une couleur de texte. Il s’agit donc surtout d’un outil utile lors de la réalisation du design.

Via un sélecteur de couleurs ou des saisies directes, ContrastA analyse et illustre le rendu des contrastes pour les différents cas : contrastes attendus au niveau AA, ou au niveau AAA, aperçu du rendu pour certaines déficiences visuelles, …
ContrastA permet en outre de se créer une palette de couleurs en ajoutant ses choix au fur et à mesure.
Les contrastes sont indiqués pour deux tailles de textes : Large 3:1 (au delà de 18px) et small 4.5:1 (11px et moins)

CheckMyColours

http://www.checkmycolours.com/

Présenté par Jennifer @bruitsilencieux

CheckMyColours permet de tester l’accessibilité d’un site existant, dans le cadre d’un audit d’accessibilité par exemple.

L’outil vérifie les couleurs du site en ligne et affiche le résultat de son analyse : textes valides ou non, erreurs, …

Le seul bémol est qu’il assez compliqué d’identifier à quel élément d’une page le texte correspond.

Emmet

http://docs.emmet.io/

Présenté par Sébastien @akkolad

Emmet (précédemment connu comme ZenCoding) est un ensemble de snippets de code qui s’intègre dans une multitude d’éditeurs de code, hormis DreamWeaver. La vidéo de présentation sur le site montre très bien les avantages de l’outil.
Emmet permet d’utiliser des alias comme : “ul>li” pour intégrer directement une lliste html complète dans son éditeur, ou d’utiliser un “*” pour multiplier les lignes selon ses besoins.

Les alias existent pour le HTML mais aussi pour les CSS, pour générer du texte de remplissage, etc.

PygmeeLessBootstrap

https://github.com/djacquel/pygmeeLessBootstrap

Présenté par David @djacquel

PygmeeLessBootstrap est un outil permettant de factoriser les développements. Twitter Bootstrap utilise des fichiers LESS qui nécessitent un préprocesseur CSS fourni dans le framework, mais qui s’exécute côté client.

Une autre solution est de parser les fichiers en amont avec LESSphp.

PygmeeLessBootstrap répond à cette problématique, sans toucher au versionning de Bootstrap pour conserver les mises à jour. PygmeeLessBootstrap, c’est donc Twitter Bootstrap + LESS + versionning et le tout est disponible sur github

IcoMoon

http://icomoon.io/app/

Présenté par Guillaume @idsquare

IcoMoon est une application en ligne qui permet de créer sa propre font-icon (police de caractère qui utilise des icônes à la place des glyphes).

IcoMoon regroupe plusieurs librairies d’icônes pour générer ensuite une police d’écriture utilise sur un site. L’application offre la possibilité d’importer son propre stock d’icônes, de choisir le caractères associé à chaque glyphe et de gérer ses propres icônes en SVG.
Une fois la font-icon définie, on peut la télécharger pour l’utiliser sur son site web. L’avantage d’une font-icon est que les icônes sont impeccables sur n’importe quelle résolution d’écran (même en HD).

Kuler

https://kuler.adobe.com/

Présenté par Sébastien

Kuler est un site pour graphiste en panne de couleur. Il propose :

  • des sets de couleur prédéfinis (plus de 18 000 !). Cela peut servir pour la création de logos, pour trouver différentes gammes de couleurs par exemple
  • une roue chromatique pour sélectionner une gamme de couleurs avec différents modes : monochromatique, triad, complentaire, etc
  • avec un compte, on peut aussi créer et partager ses propres palettes de couleur.
  • les gammes de couleurs sont récupérables facilement pour Photoshop.

Invision App

http://www.invisionapp.com/

Présenté par Isaac

Invision est un outil collaboratif et interactif de gestion de projet. Il permet :

  • de taguer, d’inviter des amis
  • d’ajouter des commentaires
  • d’uploader une maquette et de la partager directement

Invision permet d’échanger rapidement et d’interagir sur des maquettes visuelles.

f.lux

http://stereopsis.com/flux/

Présenté par Thibaut

F.lux est un outil qui permet de changer la luminosité de son écran en fonction de la luminosité ambiante. Très utile pour les développeurs qui travaillent tard le soir, f.lux s’adapte tout seul, selon la plage horaire où l’on se situe pour modifier la luminosité de l’écran.

F.lux est disponible sur plusieurs plateformes (Windows, Mac, ..)

SpriteCow

http://www.spritecow.com/

Jonathan @jonathanpath

SpriteCow est une application en ligne pour créer différentes sprites plus facilement. À partir d’une sprite, il permet de récupérer très facilement les coordonnées d’un élément.

CodaSlider

http://kevinbatdorf.github.com/codaslider/

Présenté par Jonathan @jonathanpath

CodaSlider est un slider JS. Beaucoup de sliders sur le marché ont beaucoup d’options mais CodaSlider est le plus facile à customiser.
Il permet de mettre ce qu’on veut dans la zone du slider et n’a pas vraiment de limites.

SubtlePatterns

http://subtlepatterns.com/ et http://bradjasper.com/subtle-patterns-bookmarklet/

Présenté par Stéphanie @walterstephanie

SubtlePatternsBookmarklet est un bookmarklet (un petit script JS à placer dans ses favoris pour pouvoir l’utiliser sur n’importe quel site). Il permet de tester sur n’importe quel site une texture de fond. Les textures sont issues du site de Subtle Patterns.

Dégradés CSS3

http://www.colorzilla.com/gradient-editor/

Présenté par Stéphanie @walterstephanie

Cet outil en ligne permet de créer des dégradés complexes en visualisant directement le résultat. Il permet :

  • d’enregistrer son dégradé
  • de prévoir une version pour IE
  • de récupérer le code CSS directement généré
  • d’importer une image et en extraire un dégradé CSS

Cet outil permet aussi de recréer un dégradé à partir d’une image de manière assez fine.

Balsamiq

http://www.balsamiq.com/

Présenté par Philippe @eToileGraphic

Balsamiq est une application (en ligne ou sur poste) pour créer des wireframes (maquettes schématiques) rapidement. C’est un outil facile à prendre en main par les chefs de projet, mais aussi très complet, avec une ergonomie d’utilisation proche d’Illustrator.
Fourni avec une librairie complète des éléments de navigation, il permet d’échanger ou d’ébaucher rapidement avec le designer et le développeur

Merci pour votre lecture, et à bientôt !

Laisser une réponse

Your email address will not be published. Required fields are marked *

*

*