moins52, le blog

Non ce blog n’est pas complètement à l’abandon. Il est juste moins prioritaire que pas mal d’autres trucs ces temps-ci.

J’ai quand même pris le temps d’apprendre un peu plus à utiliser JQuery. J’en ai profité pour réaliser Heaver-it un petit gestionnaire de Post-it® virtuel en JQuery et PHP.

Post-it® étant une marque déposée et n’ayant pas envie de me prendre un procès, j’emploierai le terme de note dans la suite de l’article.

CE QUE JE VEUX
L’idée donc est de pouvoir gérer le backlog d’un projet AGILE au format électronique (Parce que je trouve que les notes adhésive en papier c’est pas Green IT).
Les données doivent pouvoir être sauvegardées dans le dépôt SVN, GIT ou autre. Ce qui facilite la gestion de projet à distance par exemple.

Une version démo est accessible là : DEMO !

TECHNIQUEMENT PARLANT
Heaver-it est réalisé en JQuery, JQuery UI et utilise PHP pour la sauvegarde des données. Les données sont sauvegardées au format JSON.
Je ne suis pas super satisfait de l’utilisation du PHP car ça oblige à avoir un serveur PHP mais je ne voyais comment faire la sauvegarde autrement. Si Dr Benton passe par là il me dira peut-être d’utiliser Node.js.

PLUS EN DETAIL
Le code est assez simple et je ne présenterai ici que quelques astuces qui m’ont paru intéressantes durant la réalisation. Ça pourra servir à d’autres ou à mon « moi futur » .

ONE PLUGIN TO RULE THEM ALL
Pour chaque transformer une div en une note virtuelle il faut appliquer un certain nombre de plugins. J’ai donc créé un plugin qui regroupe tous les autres.
Le plugin s’appelle comme ça

<script>
$(function() {
$('#mydiv').taskify();
});
</script>

Il permet d’appliquer à « mydiv » en un ligne les plugins click, draggable et editable nécessaire pour en faire une note virtuelle. Yeah !

ONE PLUGIN TO BIND THEM
Lorsqu’on modifie quelque chose sur le backlog le bouton de sauvegarde prend en compte qu’il y a eu une modification. Pour réaliser cela j’ai utilisé la gestion d’évènements de JQuery.
Venant du monde Java ce fonctionnement m’a beaucoup rappelé le système des ActionListener.

J’ajoute donc au bouton « Save » la classe actionlistener.

<a href="#" class="actionlistener">Save</a>

Je définis ce que doit faire le bouton « Save » lorsqu’il y a une modification. Dans mon cas le texte change et devient « Save Now ».

$<span style="font-family: Georgia, 'Times New Roman', 'Bitstream Charter', Times, serif; line-height: 19px; white-space: normal;">( "#save" ).bind("modification", function () { $( "#save span" ).html("Save Now"); });[/</span>javascript]</pre>
Il n'y a plus qu'à déclencher l'événement "modification" sur tous les éléments implémentant la classe "actionlistener" pour chaque action modifiant le backlog.

1$<span style="font-family: Georgia, 'Times New Roman', 'Bitstream Charter', Times, serif; line-height: 19px; white-space: normal;">( ".actionlistener" ).trigger("modification");

Le fonctionnement est le même pour la gestion des plans. Lorsqu’on clique sur une note, un événement est déclenché informant toutes les notes que la note du plan N passe au premier plan.

$(".task").trigger("putTaskOnTop", [$$.css('zIndex')]);

Toutes les notes sont informées du déclenchement. Celle par qui l’événement a été déclenché passe au premier plan. Les notes qui se trouvent sur les plans supérieurs descendent d’un cran.

// Puts task on top
 $$.bind("putTaskOnTop", function(event, zIndex) {
 // Lows tasks currently on higher levels
 if (zIndex < $$.css('zIndex')) {
 $$.css({
 zIndex: $$.css('zIndex') - 1
 });
 }
 // Puts the one task on top
 else if (zIndex == $$.css('zIndex')) {
 $$.css({
 zIndex: $(".task").length - 1
 });
 }
 });

ONE PLUGIN TO BRING THEM ALL AND IN GITHUB SHARE THEM
Heaver-it est disponible sous licence GPL. Tout est publié sur GitHub ici.

CONCLUSION
Voilà ma première publication Open Source. Mon premier plugin JQuery. C’est ma Maman qui va être fière de son fiston.

Pour réaliser cet article et le plugin taskify, je me suis pas mal inspiré d’un article Jay Salvat sur la conception de plugin JQuery.

[picto]

13 mai 2011     |     2 commentaires

Je viens de corriger un bug : on ne pouvait plus voir les applications générées en ligne. Voilà c’est reparti.
En passant j’en profite pour vous dire que je bosse toujours sur la prochaine version du K-MetaModule et que ça devrait sortir dans pas longtemps.

[picto]

6 août 2010     |     Pas de commentaire

Mozilla avec Bespin n’est pas seul à croire que l’IDE du futur sera dans le Cloud. Lors de leur conférence « Darwin Among the IDEs » jeudi dernier au EclipseCon 2009, Tim Wagner (Microsoft Visual Studio) et Kevin McGuire (IBM) sont allés dans ce sens. Un résumé est disponible ici [en].

« I think that’s a natural evolution, and I think that the Bespin technology is leading the way« , Kevin McGuire

Il y a donc fort à parier que les prochaines versions de Visual Studio et d’Eclipse se tourne vers le Cloud et ils ne seront pas les seuls. Je suis tombé sur 2 autres initiatives du genre.

• Le projet Enlide mené par une société française actuellement en Beta privé. Je n’y ai pas eu accès mais je suis ça de près.
• Ecoder un projet OpenSource d’IDE en ligne. (Via JaySlavat et son Twitter)

Parmis les autres évolutions qu’on peut attendre une meilleure gestion du multi-écran. Comment vous n’avez encore qu’un écran ? Mouah ah ah !

31 mars 2009     |     2 commentaires

La semaine dernière est sortie des laboratoires Mozilla un nouveau projet nommé Bespin. Bespin est un éditeur de code ou IDE (Integrated Development Environment) en ligne qui surfe sur la vague Webware du moment. Il existait déjà des initiatives similaires en ligne comme par exemple codeide mais qui n’ont jamais vraiment aboutis.

Mais quel est l’intérêt d’utiliser un outil en ligne pour coder ?

A mon avis il y en a plein et notamment tirer pleinement parti du travail collaboratif. Les outils classiques de contrôle de version, type SVN, permettent déjà de travailler à plusieurs sur un même projet. Il faut cependant bien se répartir les tâches car la phase d’intégration peut poser quelques soucis. Les merges manuels sont coûteux en temps et il y a toujours un risque de perdre du code.
Avec un outil comme Bespin on pourrait imaginer (ce n’est pas encore annoncer pour Bespin mais on a le droit de rêver) travailler sur le même fichier avec une vision en temps réel de ce que l’autre modifie. A la manière du travail collaboratif dans Google Apps. Plus de merge à proprement parler, tout le monde travaille sur les mêmes fichiers physiquement.

D’autres fonctionnalités pourrait rendre l’outil encore plus intéressant. L’ajout d’un chat pourrait permettre aux développeurs de discuter sur ce qu’ils font, échanger des bouts de code ou s’entraider. Un twitter-like pourrait signaler qui travaille sur quel fichier.

Bespin est déjà doté d’une API documentée pour permettre à une communauté de se créer et faire évoluer le projet. En invitant les développeurs à créer des plugins et extention pour Bespin, Mozilla poursuit la politique qui a fait le succès de Firefox ou Thunderbird.

Bref je suis assez enthousiasmé par le projet. D’ailleurs il n’y pas que moi. Boris Bokowski et son équipe présente déjà une version d’Eclipse in the cloud basée sur Bespin. Un wiki est d’ailleurs disponible pour en savoir plus.

3 mars 2009     |     Pas de commentaire

Ça y est la nouvelle home du K-MetaModule est en ligne. Vous ne tomberez plus sur un page vide vous demandant de vous inscrire sans vous expliquer pourquoi.
Désormais il y a une belle? page dans laquelle j’ai essayé d’être le plus clair et le plus concis possible en répondant aux questions :

• Qu’est ce que c’est ?
• Comment ça fonctionne ?
• Où je dois cliquer ?

Dîtes moi ce que vous en pensez ! Les avis sont les bienvenus !

[picto]

13 février 2009     |     Pas de commentaire

Pourquoi 2010 ? Parce que j’ai décidé que le K-MetaModule aurait un an d’avance sur tout le monde. J’annonce donc la sortie de la version 2010 build A02 en version Beta.

Quoi de neuf ? Pour cette nouvelle mouture quelques fonctionnalités ont été ajoutées ou corrigées :

- Sécurisation des données : Les comptes sont sécurisés et les informations sensibles cryptées. C’était un minimum pour une sortie en Beta ;
- Possibilité de télécharger les sources du projet générées sous forme d’archive zip : Disponible à la fin de la génération du code ;
- Correction de quelques bugs ;
- Création d’un logo ! : J’ai trouvé le temps et l’inspiration pour créer un logo au K-MetaModule. Il est susceptible d’évoluer quelque peu mais ça va me permettre de communiquer un peu plus sur le produit.

A venir dans la prochaine version :

- Faire une jolie page d’accueil pour le K-MetaModule : Aujourd’hui elle est moche, elle n’explique rien. J’ai du boulot !
- Nettoyer le framework : Suite au développements successifs certaines portions de code sont un peu crades. Un nettoyage de printemps est nécessaire (quand je vous disais que le K-MetaModule était en avance sur tout le monde ).
- D’autres surprises ?

Meilleurs vœux 2010 donc ! Stay tuned !

8 janvier 2009     |     2 commentaires

J’avais promis ici un tutoriel pour expliquer comment fonctionne le K-MetaModule. A la réflexion c’était même indispensable. En même temps ça fait un peu de teasing pour ceux qui n’ont pas accès à la version alpha. J’ai essayé tout un tas de logiciel de screencast pour faire un joli tuto vidéo et j’ai fini par opter pour Wink qui sort un swf un peu lourd mais permet un bon rendu lisible. Avec une vidéo sur YouTube on aurait rien vu.

Voilà il ne vous reste plus qu’à suivre le petit lapin blanc guide.

21 octobre 2008     |     Pas de commentaire

Wow ! Grand jour pour moi. Je me jette à l’eau !! La version alpha privée du K-MetaModule est lancée. Vous pouvez y accéder en cliquant ici. Mais il faudra me demander la permission avant par mail moins52 [AT] realisation-site-internet [DOT] com. L’objectif est de régler les improbables bugs avant la beta qui sera publique.

Pour ceux qui n’auraient pas suivit le K-MetaModule permet de générer du code PHP afin de réaliser une interface d’administration.

Les fonctionnalités actuelles :

• Définition du modèle de données enrichi
• Génération du code
• Prévisualisation du résultat hébergé sur ce serveur
• Génération d’un début de documentation technique en fait juste ce que certains appellent le dictionnaire de données
• Visualisation du schéma de la base de données générée

A venir pour la beta :

• Sécurisation des données
• Possibilité de télécharger les sources du projet généré sous forme d’archive zip
• La correction des improbables bugs présents dans la version alpha
• Peut-être plus en fonction de mon temps libre

La mise en ligne d’un outils au départ créé pour moi et moi seul (ouais je la jouais perso) est un sacré exercice de remise en question. J’ai essayé de rendre les choses le plus claire possible et je compte un peu sur mes alpha-testeurs triés sur le velux pour m’aider de ce coté là. Je ferais un tuto pour éclairer vos lanternes.

Enjoy !

10 octobre 2008     |     Pas de commentaire

Dans les nouveaux outils qui permettent de créer des sites Internet on peut distinguer 2 grandes familles :

- Les outils destinés aux développeurs pour les aider dans leur dur métier comme par exemple le K-MetaModule (autopromo inside) ou plus généralement les outils MDA. Ces outils générent du code que le développeur pourra ensuite retravailler pour en faire un magnifique bijou online.

- Les outils destinés aux utilisateurs finaux pour les aider à créer leur site internet sans devoir faire appel à un développeur. Et je n’irai pas dire que ces outils volent le travail du bon développeur web car il faut se réveiller : Faire des sites Internet plaquette ça paye plus. Il faut passer à autre chose.

Jimdo fait plutôt partie de la deuxième catégorie. Je dis plutôt car les possibilités de personnalisation sont telles qu’un développeur pourrait très bien s’en servir. Jimdo est donc un site SaaS qui permet de réaliser un site Internet avec un minimum de connaissance grâce à une interface utilisateur plutôt bien pensée. Pour changer le contenu ou le design de son site, il suffit de cliquer sur les éléments de la page. On accède à des menus contextuels qui permettent de les modifier ou de les supprimer. On peut ainsi créer un nombre illimité de pages avec des contenus divers comme du texte, des images, des vidéos, des formulaires et bien d’autres choses.

Jimdo et ses menus contextuels

Il est aussi possible d’intégrer des fichiers HTML, CSS, ou javascript réaliser à la main pour créer son propre design ou des widgets par exemple.

La formule gratuite propose déjà un bon nombre d’outils mais pour avoir des statistiques détaillées ou un nom de domaine il faudra passer à la formule payante (5 €/mois).

Point fort :
Simplicité d’utilisation
Point faible :
Le problème qu’on peut trouver à ce genre de service c’est qu’on est un peu limité dans la réalisation à ce qui a été défini par l’équipe de développement. Si vous voulez faire de la mise en page compliquée passez votre chemin.

26 septembre 2008     |     1 commentaire

Pour réaliser le K-MetaModule j’ai utilisé un certain nombre d’outils que je vais détailler ici. C’est en quelque sorte la page de credits du site.

Le K-MetaModule est réalisé en PHP/MySQL. Là je ne présente pas. Pour en savoir plus reportez vous aux sites officiels.

FCKeditor est un éditeur HTML wysiwyg en ligne.

Smarty est un moteur de template pour PHP. Il est rapide et permet la gestion des caches. Il facilite la séparation entre la logique applicative et la présentation.

WWW SQL Designer est un outil en ligne de type SaaS pour la conception de base de données MySQL. Il permet de visualiser le schéma de la base de données et des relations entre les différentes tables générées par le K-MetaModule.

famfamfam est un gros set d’environ 1000 icônes. Ce qui permet d’assurer une homogénéité sur tout le site.

Alfresco est un système de gestion de contenu (en anglais ECM pour Enterprise Content Management) Open source. Je me suis inspiré j’ai honteusement pompé leur design. C’est Open source mais je suis pas sûr d’avoir le droit de le faire… ça n’est donc que provisoire.

Autres logiciels :

Mov’AMP permet d’embarquer Apache, MySQL et PHP, sur une clé USB ou n’importe quel autre support de faible capacité. C’est bien utile pour développer de n’importe où.

30 juillet 2008     |     Pas de commentaire