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...

[Dotclear] Include PHP file in Dotclear template

Voilà un petit moment que je cherche une solution pour pouvoir simplement inclure un bout de code PHP dans un template Dotclear. Mais avec Dotclear, ce n’est pas si simple…

Au lieu de choisir un format standard (comme Smarty), les développeurs de Dotclear ont préféré créer leur propre syntaxe de template. Sans être aussi chiant que celle de Spip, la syntaxe de Dotclear essaye tellement de simplifier les choses que cela complique les choses les plus simples… Et c’est une des bonnes raisons qui ont fait que Dotclear est aujourd’hui en train de disparaitre face à des concurrents plus “open” comme Wordpress.

Donc, pour réussir à lancer le moindre code PHP depuis un template Dotclear, plusieurs solutions existent sur le Net. La plus répandue conciste à ajouter un fichier _public.php à la racine du répertoire du theme. Chez moi, pas moyen de faire fonctionner ce truc. Il y aurait aussi une simple manip’ à faire dans le backoffice, mais encore une fois pas moyen de la trouver… problème de version certainement.

Bref! Voici une petite astuce qui marche à tous les coups, et qui va en plus alléger légerement le temps de traitement du template.

Editez le fichier /inc/clearbricks/template/class.template.php à la ligne 225, et mettez en commentaires les lignes suivantes :

dotclear-template-include-php-hack.jpg

Et voilà, bye bye la suppression des tags PHP dans les templates! Désormais, pour inclure du code PHP dans vos templates, vous n’avez plus qu’à ouvrir avec le tag <?php et à fermer avec ?> le plus simplement du monde!

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