La Vague du Web #6

28 avril 2013

La Vague du Web est un condensé de ressources en tout genre vous permettant de suivre les dernières tendances web… Aujourd’hui dans cette chronique : une liste de micro-librairies JS, quelques plugins jQuery, ou encore un site « extracteur » de couleurs. Bref, place à la Vague du Web numéro #6 !

Wookmark

Comparable au script Grid-A-Licious, Wookmark est un plugin jQuery permettant de réaliser une grille responsive de blocs flottants semblable à l’interface du réseau social Pinterest. Cet affichage en colonnes est très prisée par les concepteurs de sites riches en médias car c’est un excellent moyen d’afficher plusieurs images de tailles différentes. Disponible en licence MIT, le plugin possède plusieurs paramètres pour configurer au mieux la grille : alignement, largeur, espacement, etc.

wookmark_jquery

Flat UI

Annoncée comme la grande tendance du webdesign en 2013, le flat design fait beaucoup parler de lui en ce moment. Il s’agit d’un style graphique minimaliste et épuré se caractérisant par des formes simples, sans textures ni effets de volumes, ainsi que des couleurs souvent vives et utilisées en aplats. Flat UI est un kit complet regroupant fichiers PSD, HTML et CSS pour mettre en place une interface flat sur le framework front-end Bootstrap. Simple, efficace et agréable à naviguer.

flat_ui

MicroJS

MicroJS est un site regroupant une liste de bibliothèques et frameworks JavaScript, particulièrement légers et spécialisés dans un domaine bien particulier. Marre d’utiliser un « gros » framework pour développer une fonctionnalité simple et précise ? MicroJS est fait pour vous ! Le site dispose d’un moteur de recherche vous permettant de trouver le script qu’il vous faut, avec une trentaine de thématiques générales (AJAX, JSON, jeux vidéo, etc). Un outil à garder sous la main !

microjs

Dropzone.js

Publié sous licence MIT, Dropzone.js est une librairie JavaScript open source (anciennement plugin jQuery) qui permet de créer une zone d’upload de fichiers à la volée grâce la technique du drag’n’drop. L’interface propose un aperçu des fichiers une fois uploadés (loader de chargement pendant le transfert) avec titre, poids et miniature pour les images. Evidemment, Dropzone étant un script côté client, il ne gère pas le téléchargement réel du fichier sur le serveur ; c’est à vous de mettre en place le code côté serveur pour recevoir et stocker le fichier.

dropzone_js

Sidr

Sidr est un plugin jQuery qui permet de mettre en place un menu affiché en sidebar, aussi appelé « off canvas » : conçu pour la navigation mobile, il s’agit d’un volet hors écran, pouvant être situé à gauche comme à droite, qui apparaît uniquement si l’utilisateur le désire, permettant ainsi d’optimiser l’espace et de contrer la verticalité d’un site web. Sidr est un script sous licence MIT qui propose une manière plus élégante de présenter un menu pour les smartphones mais aussi pour les desktops. Deux thèmes CSS (dark et light) sont disponibles.

sidr

Web Colour Data

Quelles sont les couleurs les plus utilisées sur le web ? Quelles sont celles qu’on retrouve le plus souvent pour une thématique donnée ? Quelles sont celles qui sont le plus fréquemment associées ? Web Colour Data est un service en ligne qui répond à ces questions grâce à un « extracteur » de couleurs. Il suffit de soumettre une URL pour avoir un résumé de couleurs, en se basant aussi bien sur le CSS que sur les images du site scanné. L’idée est assez originale.

web_colour_data

jQuery Builder

Vous n’utilisez pas toutes les fonctionnalités de jQuery et vous souhaitez optimiser votre code ? Alors créez votre version personnalisée grâce au générateur jQuery Builder (non officiel) : choisissez votre version originale, puis décochez les modules (AJAX, CSS, effects, etc) dont vous n’avez pas besoin. L’idée est plutôt bonne, encore faut-il connaitre à quoi correspond tel ou tel module (voir l’API). Il existe également un builder officiel pour jQuery Mobile.

jquery_builder

Lazy Line Painter

Basé sur la librairie JS Raphaël spécialisée dans le dessin vectoriel, Lazy Line Painter est un plugin jQuery qui permet de réaliser des animations à partir d’un fichier SVG simple (les images, les formes et les dégradés ne sont pas supportés). Une fois votre image exportée au format SVG (via Illustrator), il vous suffira de glisser votre création sur le site pour qu’elle soit convertie en variable JavaScript afin d’être passée au plugin. Il ne vous reste plus qu’à télécharger le plugin et ses dépendances, et de copier coller le code généré. Publié sous licence MIT.

lazy_line_painter

» Voir toutes les Vagues du Web

Commentaires

  • Yoann

    Très utile, j’apprécie énormément ton blog, les ressources y sont de bonne qualité !

  • Aimed

    Votre site est fort. Félisitation.