Archive de la catégorie ‘Web’
Heaver-it : un backlog virtuel en JQuery
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
Note de service
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
Mon test d’Opera Unite
Salut tout le monde !
Je suis pas mal pris en ce moment. Je me demande si « en ce moment » n’est pas de trop d’ailleurs… mais bon je ne pouvais rester muet aujourd’hui car je viens de tester Opera Unite !!
On croyait qu’on avait tout vu en matière de navigateur Web depuis Firefox mais Opera Unite introduit de nombreux services inédits. Si la mayonnaise prend, on pourrait même assister à une petite révolution. Le principe de base est de transformer votre navigateur en serveur. La communication n’est alors plus unidirectionnelle mais bidirectionnelle. Mais les vidéos de présentation expliquent cela très bien.
Au niveau des services déjà disponibles dans la version 10.00 Beta on trouve :
-
Un service de partage de photo qui permet de… bah partager des photos ;
-
Un service de partage de fichiers pour… non là je vois pas ;
-
Un média player pour partager vos compositions musicales ;
-
Un serveur web sur lequel on ne peut héberger qu’un site statique d’après ce que j’ai compris. Cependant j’ai lu dans les commentaires que certains ont réussi a faire tourner du ruby dessus.
-
Une chat room pour communiquer avec Tata Martine.
-
Un frigo… oui mais juste pour coller des post-it dessus, pas pour stocker des bières.

Tout ça disponible sur votre machine ! Ainsi vos amis, votre famille ou le monde entier pourront accéder tous ces services… si votre machine est allumée et connectée avec Opera lancée. Vous pouvez voir ma page Opera Unite ici (quand je suis connecté bien sûr
)

Alors à votre avis révolution ou flop ? L’avenir nous le dira mais Opera Unite est ouvert aux développeurs et pourrait donc rapidement voir arriver de nouveaux services innovants. Et dire qu’il y en a qui sont encore sous IE 6.
Et pour finir petite dédicace Christine A. et Nadine M. avec le service de partage de fichiers et le Media Player… ah ah !

17 juin 2009 | 1 commentaire
Gloubi-boulga de blogs #3
Bon allez cette fois je m’y met. J’ai maintes et maintes fois repoussé. Ça y est il est temps, grand temps, des rires et des chants.
C’est le gloubi-boulga de blogs !
Il s’est passé tellement de trucs depuis le dernier que certaines news sont plutôt des olds… hu hu !
On commence avec Internet Explorer 8, parce que si vous n’êtes pas encore au courant (coma de longue durée ou autre…). Microsoft nous ressort son navigateur à grand renfort de marketing et de pizza… j’ai dit pizza ? Oui j’ai bien dit pizza.
Mais alors quoi de neuf ? A la lecture du test de Jay Salvat et de la terrible semaine passé par Stephen Shankland, je ne vais pas me précipiter. Allez-y les gars passez devant je vous rejoins… ou pas…

A moins de faire du vaudou pour bannir à tout jamais IE 6 d’Internet, il va donc désormais falloir tester son site sous IE 6, 7 et 8… On est pas sorti de la berge. Il existe heureusement quelques solutions pour nous simplifier la vie. Voici 7 façons de tester votre site sur tous les navigateurs.
Je parlais ici des nouvelles balises video et canvas. Voici une nouvelle démo de ce qu’on peut faire avec. C’est rigolo mais pour l’instant je vois pas à quoi ça peut servir. A part pour présenter la météo sur Internet… Sébastien Folin si tu m’entends…
Sur travailleur du web un post qui date un peu mais qui n’a pas vieilli : Qu’est ce qui fait un bon développeur ? Ça m’inspire pas mal pour un prochain billet : Qu’est ce qu’un bon générateur de code ?
A lire aussi, une étude intéressante sur les formulaires d’inscription sur Web Design Tuts.
Le monde est petit il parait mais des fois ça donne un peu le tournis quand même et quand tout le monde s’y met c’est super puissant. C’est beau Internet ! Un moyen de réunir les gens. Une grande communauté sans frontière. Et d’autre l’utilisent pour se foutre sur la gueule. Arf !
Et puisque vous avez été sages un test de jeu vidéo qui m’a bien fait rire. Voici chez Korben le jeu vidéo de l’année : Bigs Rigs Racing !
Bon allez j’en garde pour la prochaine fois.
18 avril 2009 | 1 commentaire
Coin… euh… Tweet ! Tweet !
Ouvert il y a un moment puis laissé à l’abandon, j’ai dépoussiéré mon compte Twitter (Ménage de printemps oblige !). J’y posterai au fur et à mesure mes découvertes sur le net.
Alors rejoignez-mon tweet tweet !
26 mars 2009 | Pas de commentaire
Le K-MetaModule sur Feedburner
Je voulais le faire depuis un moment et là ça y est ! J’ai passé le flux RSS de ce blog sur feedburner. La nouvelle adresse du flux est la suivante :
http://feeds2.feedburner.com/k-metamodule
Merci de mettre à jour vos readers.
[picto]
14 février 2009 | Pas de commentaire
Bonne année 2010 !
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
Blogueurs francophones qui êtes-vous ?
Voilà une bonne initiative de stagueve que je tenais à relayer ! Il s’agit d’une enquête sur les blogueurs francophones. Et en analysant les résultats de l’année dernière, je m’aperçois que je suis vraiment pas original.
En fait le blogueur moyen francophone c’est moi ! Yeah !
Je trouve l’idée tellement bonne que je réfléchis à la reprendre pour les générateurs de code. En attendant, je vous invite à participer à l’enquête sur NoWhereElse.
13 décembre 2008 | Pas de commentaire
Gloubi-boulga de blogs #2
Tout ce que j’aurais dû écrire et que d’autres ont écrit peut-être mieux que moi d’ailleurs.
- Je vous parlais ici de Jimdo qui permet de créer un site web sans connaissance techniques. Voici un comparatif de 12 solutions similaires. Jimdo sort en tête avec Webon (via Emob).
- Olivier Diaz nous présente quelque chose que j’intègrerai peut-être un de ces 4 au K-MetaModule : un générateur de template. Celui-là est pour WordPress.
- Grâce à Jy[B]log, on en sait un peu plus sur la balise vidéo dont je vous avez parlé ici.
- On nous avait bassiné avec Google Chrome pour pas grand chose (1% de part de marché d’après ce que j’ai pu lire) ; Mais il n’a pas dit son dernier mot ! Dell et plusieurs autres constructeur pourraient remplacer Internet Explorer par Chrome dans leurs ordinateurs. Affaire à suivre. (via ilionet)
- Et si on lit ensuite cette interview de Mitchell Baker, la présidente de la Mozilla Foundation, on peut se dire que la part de marché d’Internet Explorer va fondre à vitesse grand V.
- Je parlais il y a peu des canvas. Voilà un exemple de canvas en 3D. Le plus rigolo c’est d’aller voir la source. Bluffant !
- Sur Kinoa on vous expliquera comment passer la crise au chaud. J’ai particulièrement aimé l’utilisation de l’informatique dans les nuages
Puisqu’on en parle voilà une grosse session de Cloud Computing, webwares, webapps ou SaaS… il va falloir statuer sur un nom !
- Et ça commence avec Jean-Marie qui nous présente 10 alternatives en ligne et gratuite à Photoshop. Trop de SaaS tue le SaaS. Il va falloir que certaines solutions se démarquent pour stabiliser le marché.
- Sur Web2Pro, Pierrick présente de manière détaillée une grosse quinzaine de solutions de travail collaboratif en ligne. Il y a en tellement que ça se déroule en plusieurs parties. A l’heure où j’écris il y en 3 : partie 1, partie 2 et partie 3.
- Autre webware de travail collaboratif mais cette fois à télécharger et à installer chez vous voici OpenGoo avec gestion de calendrier, contacts, tâches, notes et documents. (via Presse Citron et Francis sur linkube
)
25 novembre 2008 | 6 commentaires
K-MetaModule : Le tutoriel
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


