Todo machine : la machine à gérer des listes

Voici une nouvelle application web qui va nous, vous, enfin en tout cas me aider à gérer des projets, sous forme de todo lists : la todo machine.

Le système se veut volontairement simple, avec deux niveaux : projet et tâche. Un projet contient des tâches, point.

 

En sélectionnant un projet, on voit la liste des tâches apparaitre :

Pour marquer une tâche comme terminée, il suffit de cliquer sur la petite coche verte. La tâche devient transparente et est envoyée à la fin de la liste. En cliquant à nouveau, on la réactive. Il est possible de saisir une description précise de la tâche :

 

Les tâches sont triées par ordre alphabétique, donc pour ajouter une notion de date, il suffit d’écrire par example 2012-12-05 : titre de la tâche. Pas de prise de tête.

Perso, j’ai quelques projets à gérer en parallèle, et cette petite application m’est bien utile. On n’est jamais mieux servi que par soi-même…

Evidemment, cette application a été développée dans le framework Mozaic, comme d’hab.

Ca me fait penser… Il faut que je mette à jour le wiki, car les choses ont pas mal évolué… Hop, une nouvelle tâche pour le projet Mozaic !

Je vais aussi noter de faire les traductions à l’occasion…

Tooltips html

En html, pour indiquer au navigateur qu’on veut afficher un tooltip sur un élément, on utilise habituellement l’attribut title, comme sur les liens ci-dessous.

Je n’aime pas trop l’allure des tooltips natifs proposés par les navigateur, et comme la mise en œuvre des scripts disponibles sur le net est parfois un peu hasardeuse, j’ai écrit ma propre classe d’affichage de tooltips. Elle est visuellement personnalisable avec une css.

Tout ce qu’il y a à faire, c’est de renseigner l’attribut title, comme d’hab, et d’inclure les fichiers js de prototype et tooltip.js, ainsi que la feuille de style tooltip.css

Elle est basée sur prototype.js (c’est pas gros et ça aurait pu être fait d’une pièce, mais prototype est tellement pratique).

Voici ce que ça donne.

Le tout est téléchargeable ici!

Lancement de la Planning Machine

Voilà, c’est fait. Je vous livre la machine à planifier.

Il s’agit d’une application web destinée à planifier n’importe quoi. Pour être plus clair, l’application permet aux utilisateurs de créer des objets (voitures, appartements, personnes, outillage, que sais-je?).

On peut créer pour chaque type d’objet des propriétés (marque, modèle, carburant pour les voitures, surface, nombre de pièces pour un appartement, etc).

Libre à vous de créer toutes les propriétés que vous jugerez nécessaires pour gérer vos objets.

Ensuite, il n’y a plus qu’à planifier ces objets dans un calendrier.

Les anti Google peuvent parfaitement envisager de s’en servir comme agenda en ligne personnel, d’autant plus que a planification est exportable au format iCalendar, utilisable par les appareils portables.

 

Plus d’infos ici

Audacious : enregistrer ses bookmarks sur son propre serveur

Je viens présenter la 1ère application concrète développée autour du framework Mozaic.

C’est une idée que j’avais eue il y a un moment, lorsque delicious.com menaçait de fermer, d’être racheté, enfin on ne savait pas trop. En tant que fervent utilisateur, je me suis dit qu’il serait intéressant de développer ma propre plateforme de stockage centralisé de bookmarks.

Je l’avais commencé avant d’avoir développé Mozaic, et la chose s’était tassée.

Là, comme Mozaic est stable, je m’y suis relancé, et voilà le résultat.

Fonctionnalités :

  • multi-utilisateurs
  • tags
  • bookmarklet intégrable dans le navigateur, pour l’ajout rapide d’un nouveau bookmark
  • système de gestion d’accès aux fonctionnalités (hérité du framework Mozaic)
  • import de bookmarks depuis delicious ou firefox (pas testé avec d’autres navigateurs, mais l’implémentation est simple)

 

Mozaic framework : un environnement de développement pour PHP

C’est un sujet sensible… Si je souhaite développer un site, public ou privé, en PHP, comment m’y prendre ?

Alors pour des choses standards, des blogs par exemple, il existe moultes plateformes : WordPress, Drupal, Dotclear, Joomla (soyons fous).

Pour ma part, pour mon autre blog flexqueries.org, j’ai commencé avec Dotclear. C’était avant la version 2, et les fonctionnalités et extensions étaient assez limitées.

Puis est arrivé Joomla. Pratique, modulaire, mais… Lourd, vraiment lourd. Des temps de réponse vraiment pas top, et une architecture certes polyvalente, mais vraiment hardcore.

Il tourne actuellement sous Drupal, qui est un environnement assez riche, que j’ai trouvé un peu difficile à aborder au départ. Mais la documentation et les contributions sont nombreuses, et j’ai fini par assimiler les principes.

J’ai même osé écrire mon propre plugin, un truc qui affiche le contenu d’un répertoire du serveur dans une page…

Enfin, j’utilise WordPress pour le blog Dirty Marmotte, qui semble finalement être le plus accessible pour les utilisateurs normaux (non informaticiens).

Comme je disais, tous ces environnements sont personnalisables, mais chacun a ses propres conventions, ses techniques de développement, et en ce qui me concerne, ça m’emmerde de devoir tout réapprendre pour chaque environnement, et de passer des heures avant d’arriver à faire un truc très simple, car obligé de passer par l’API. C’est frustrant.

 

J’ai donc préféré mettre à profit mon expérience de développeur Web pour créer mon propre environnement de développement, sans fioritures. Je l’ai déjà utilisé pour le projet Mozaic, et je l’ai soigneusement enrichi et généralisé.

Pour la structure, je dirais qu’il est MVC-friendly. J’entends par là MVC, mais si on veut faire quelque chose de simple, on n’est pas obligé de se taper le cheminement complet. C’est bête, mais ça peut faire gagner beaucoup de temps.

Pour l’accès à la base de données, j’utilise adodb, dont la qualité n’est plus à prouver.

Pour les templates, j’ai eu une expérience avec Smarty, mais il est assez lourd et surtout, surtout : il ne supporte pas l’héritage. Et ça, ça craint. J’ai donc opté pour Dwoo, et franchement je ne suis pas déçu. L’héritage est vraiment super, et il conserve une compatibilité avec Smarty, donc on n’est pas perdu 🙂

Pour les curieux, c’est ici : http://dirtymarmotte.net/wiki

Galerie d’images Mozaic

Tout ce que je voulais, c’était copier un ou plusieurs dossiers de photos sur un serveur FTP, et les rendre immédiatement visibles par une page web dynamique, sous une forme qui ait de la gueule :

Mozaic - Galerie d'images

Première tentative avec une table HTML générée dynamiquement, mais ce n’est pas très adaptable à de multiples résolutions, et encore moins au redimensionnement.

Au final, j’ai préféré générer des balises <div>, contenant les miniatures, et positionner ces <div> par javascript, mais attention, encore une fois : de la gueule, bordel !

Donc, direction http://script.aculo.us/ et leurs incroyables fonctionnalités d’animation.

En ce qui me concerne, un simple Effect.move() me satisfait amplement.

Les miniatures sont donc positionnées dynamiquement ET joliment, en fonction de la largeur d’écran disponible.

Et pour zoomer sur une image, merci à lightbox, c’est du beau boulot 🙂

Ça, c’était pour la partie client ; je n’ai fait qu’assembler des briques existantes de façon… disons harmonieuse. Avec un peu de CSS pour faire joli.

Côté serveur, c’est évidemment en PHP, et il y a eu un petit peu plus de boulot.

J’ai repris mon framework maison habituel, avec comme moteur de template Dwoo (tip top, et bien plus léger que Smarty)

Comme il n’y a qu’une page, c’est peut être un peu masturbatoire de mettre en place cette structure (même si elle reste légère), mais au moins elle est là pour la suite si j’ai des envies futures.

Bref ! Dans ce type d’application, il est à mon humble avis judicieux de générer des miniatures pour l’affichage dans la galerie. Pas question de faire télécharger aux clients des images full-size pour les afficher à 200 pixels de large…

Donc, une petite fonction génère un cache de miniatures sur le serveur, et ce sont ces miniatures qui sont envoyées pour l’affichage global de la galerie. Et si l’utilisateur veut grossir une des images, alors on peut lui envoyer une image plus grande (dans mon cas, je n’envoie pas l’image full-size non plus, mais une image à 800px). Et si VRAIMENT on veut pouvoir accéder à l’image full size, il n’y a qu’à générer un lien par image.

Côté sécurité, il y a une protection contre le path traversal, c’était la moindre des choses.

Voici le résultat : http://mozaic.dirtymarmotte.net. Appréciez le comportement quand on redimensionne la fenêtre…

Fabriquer son propre DynDns (ou presque)

Le but initial de ma manœuvre est de pouvoir connaitre l’IP externe de la maison à tout moment, afin d’accéder à un service quelconque sur une machine de mon réseau local.

Le concept est assez simple :

  1. j’ai un script PHP sur le serveur qui héberge ce blog.
  2. j’envoie régulièrement (disons toutes les 10 minutes) une requête http sur ce script depuis la maison.
  3. le script côté serveur récupère l’IP qui l’appelle, et la stocke quelque part (base de données, fichier…)
  4. depuis une page du serveur, je peux désormais accéder à l’IP de chez moi !

Côté serveur, basiquement voici la chose. Je l’ai appelé ping.php.

C’est tout… Pour le moment. Parce que si jamais un petit rigolo s’amuse à ouvrir cette page, c’est son IP qui va être mémorisée, et du coup ce n’est pas top. Avec une bonne vieille authentification HTTP, le problème sera résolu.

 

Côté client, on va avoir besoin d’un script shell qui va appeler ping.php à intervalles réguliers. Quelque chose comme :

Notez qu’on pourrait tout aussi bien créer une tache cron pour lancer le wget.

A partir de là, nous avons tout ce qu’il faut pour effectuer une redirection vers la maison, depuis une page de notre serveur.

Un peu de PHP :

Et sur la même page, un peu de HTML pour charger la page dans un iframe:

Et en plus, ça fonctionne ! on peut même envisager une redirection http avec un en-tête Location.

Bon, ce n’est pas vraiment du DNS dynamique, car le système se limite à un accès par navigateur. Mais en tout cas, cela me permet de connaître à tout moment l’IP de la maison, et à partir de là, je peux établir une connexion arbitraire (ssh, ftp, ou ce que je veux).

Exploiter la barre des tâches de Windows 7

Vous l’avez sûrement remarqué, depuis Windows 7, les boutons d’application de la barre des tâches ont quelque peu évolué. Mais comment exploiter ces nouvelles capacités, comme par exemple l’affichage d’une progressbar dans la barre des tâches?

Il faut utiliser l’API de Windows… Mais comme chacun sait, l’appel de fonctions non managées depuis .NET est plus que chiant.

En faisant une petite recherche, j’ai trouvé une bibliothèque fournie par Microsoft, utilisable directement sous .NET : WindowsAPICodePack.

Du coup, pour définir une progressbar à 20% dans l’icône de l’application, il suffit d’un: TaskbarManager.Instance.SetProgressValue(20, 100);

Classe, non ? Il n’y a plus qu’à intégrer ça dans la boucle de votre traitement et c’est tout bon.