Styleguide

Un guide de style ou styleguide est un ensemble de normes pour l'écriture et la conception de documents, que ce soit pour un usage général ou pour une publication, organisation spécifique ou dans un domaine. La mise en œuvre d'un guide de style procure une uniformité dans le style et le formatage d'un document. (Wikipédia)

Depuis un certain temps, j'avais envi de faire un guide de style pour mon site afin de pouvoir rassembler et documenter les styles que j'utilise plus ou moins fréquemment. En effet, il m'arrive souvent de créer un jeu de styles spécifiques pour un truc en particulier, et de devoir le réutiliser des mois bien après. Parfois même il m'est même arrivé de dupliquer des styles... Ainsi, un styleguide est très pratique pour :

  • Présenter tous les styles disponibles ;
  • Documenter l'utilisation des styles et du HTML qui va avec ;
  • Faire une sorte de plate-forme de test, permettant de faire la comparaison d'affichage sur plusieurs navigateurs ;
  • Conserver une trace dans le temps de ce qui a été fait, notamment en signalant les classes dépréciées.

Ce guide est inspiré par l'article Style Guide sur A List Apart.

Lire la suite...

Test du Canvas HTML 5 : Création d'une petite application style paint

Voici un petit bout de code HTML 5 + Javascript pour tester les fonctionnalités des Canvas. J'essaye ici de faire un p'tit editeur d'image en ligne style photoshop en beaucoup beaucoup plus simple.
Cet exemple utilise le système de dessin de chemins (context.beginPath) pour dessiner des pixels de couleurs sur le canvas. Cet exemple aborde aussi l'export d'un canvas vers un format bitmap (html5 canvas to png). Enfin, cet exemple fonctionne comme un plugin jQuery, et présente un peu le système d'événements qu’il convient d’adopter pour ce type de projet.

  • Black
  • Red
  • Blue
  • White
  • Green
  • Orange

Lire la suite...

Adapter un site web pour les périphériques mobiles grâce aux CSS

Créer une version d’un site spécialement pour les mobiles ce n’est pas compliqué.

En fait, c’est très simple. En utilisant seulement quelques lignes de code, il est possible de repenser toute l’organisation d’un site Web, et d’offrir un superbe affichage sur les smartphones. Pour cela, on fait appel au viewport, à la balise @media, et surtout à quelques principes d’ergonomie qui vont changer la vie de votre site Web.

Dans ce cas précis, je m’intéresse essentiellement à l’iPhone, car c’est le périphérique mobile le plus répandu aujourd’hui (2011) mais c’est surtout un choix personnel. J’explique étape par étape dans cet article comment j’ai adapté mon site Web à l’iPhone, et comment vous pouvez l’adapter à votre propre usage.

Lire la suite...

Intelligent & Responsive UI - Une interface pensée pour l'utilisateur

old_chimi.jpg Il y a peu de temps, on m’a demandé au boulot de réaliser une interface graphique entièrement nouvelle pour un outil de suivi interne. Le délai était très court – il s’agissait d’un projet interne non-rémunéré – mais l’interface devait néanmoins s’adapter à l’affichage sur iPhone.

Parti du constat qu’un site Web beau et simple est plus attrayant qu’une interface moche et basique, et faisant partie des futurs utilisateurs, j’ai voulu faire en sorte que le design et les interactions soient le plus possible optimisés pour une utilisation agréable et rapide. A force de glaner des idées à droite à gauche, notamment sur les réseaux sociaux ou chez Google, je me suis rendu compte qu’une véritable interface graphique optimisée RIA (Rich Internet Application) pouvait intégralement changer son utilisation.

Voici donc une collection de « bonnes pratiques » pour réaliser des interfaces graphiques intelligentes et intuitives, agréables à utiliser et surtout … humaines.

Lire la suite...

FormBuilder

FormBuilder est une librairie PHP qui permet de simplifier le design, la création, la génération et la validation des formulaires HTML.

J'ai réalisé cette librairie car j'en avais ras le bol de créer des formulaires à la main, et de refaire à chaque fois le script de validation. La plus grande partie de ce processus est très répétitive. En plus d'être très énervant, c'est aussi le meilleur moyen de reproduire des erreurs déjà commises, voir même laisser des failles de sécurité. FormBuilder permet de délaisser la partie répétitive, et de se concentrer sur des tâches de plus haut niveau.

Cette librairie génère automatiquement le code HTML et Javascript nécessaire au formulaire, et valide les données à la réception. Testée et renforcée, c'est l'accumulation de plusieurs années de développement et d'utilisation.

C'est une librairie complète qui supporte les champs habituels (input text, password, checkbox, textarea...), les champs HTML 5 (search, email, tel, ...) ainsi que des champs spécifiques, tel que :

   

La distribution disponible ici contient plusieurs moteurs de rendu (div, flow layout, table), une demi-douzaine d'éléments de formulaires (dont des slider, un champ d'upload en ajax, un sélecteur de tags...) ainsi qu'un formulaire client type.

Enfin, cette librairie est distribuée sous la licence GNU.

 Site du projet