Ambitious Vision » Programmation

Galerie, made by me (MooTools v1.2.x)

Albin — Tue, 06 Jul 2010 10:49:51 +0000

Un bout de code

Ce script nécessite MooTools 1.2.x

Comme vous pouvez le voir si vous allez sur mon site, ce dernier dispose d’une galerie d’images. Cette dernière permet d’ouvrir une image au premier plan, dans un cadre ayant des dimensions pré-définies mais gardant cependant l’échelle de l’image ouverte.

Et bien en fait, c’est moi qui ai fait cette galerie, tout seul avec mes petits doigts ! Je l’ai utilisée pour mes Activités Professionnelles, demandées dans le cadre de l’examen du BTS Informatique de Gestion.

Le code en lui même n’est pas exploitable comme ça, mais il peut vous permettre d’avoir une bonne base pour créer votre propre galerie un peu plus évoluée (avec une navigation dans les différentes images par exemple ?)

On va donc commencer par le HTML attendu par le script JavaScript qui suit :

Le fichier contenant les balises HTML (clic droit + Enregistrer sous…)

Ce qu’il faut savoir :

L’attribut « name » sera considéré comme la description de l’image
La classe n’est pas obligatoire
L’ID non plus
Pour éviter des temps de chargements trop longs, il est conseillé d’indiquer un thumbnail plutôt que l’image en elle même…

Le JavaScript maintenant :

Le fichier contenant le script JavaScript (même technique !)

Comme vous pouvez le voir, la fonction open(source, nom) attends deux paramètres.

Le premier est le chemin de l’image que vous souhaitez ouvrir
Le deuxième est le nom (et donc la description) de l’image que vous souhaitez ouvrir

Une fois le clic effectué, tout s’ouvre comme prévu ;)

Il ne faut pas oublier d’ajouter une fonction à l’évènement « onClick » sur chaque images, sinon la fonction open(…) ne se lancera jamais. Cette manipulation est inclus dans le fichier JavaScript.

Ce script ajoute une fonction sur l’évènement onClick de chaque élément ayant la classe « galerie ». Cette fonction appelle la fonction open(…) en passant les paramètres qu’il faut !

Ne reste plus que le CSS, que voici :

Le CSS pour la galerie (toujours la même technique…)

Voilà, vous avez tous les fichiers en mains, ils sont normalement assez bien commentés. Mais je laisse quand même une liste de ToDo, parce-qu’il faut bien que vous sachiez ce qui n’est pas optimisé :

L’emplacement des images et le pré-formatage des noms des thumbnails ne sont pas gérés via des variables, il faut explorer le code pour pouvoir modifier ces paramètres…
Il n’y a pas de système de navigation (on ne peut voir qu’une seule image, la fermer, et en ouvrir une autre après)
L’image ne s’affiche que lorsque le chargement est terminé, avant cet évènement, on a un écran noir…

Vous pouvez me laisser vos avis, et dites moi si vous l’utilisez, que je saches si ça sert à quelqu’un ;) Ne me dites pas trop « tu aurais dû mettre ça », je sais très bien que ce n’est pas fini.

TiExplorer plugin

Albin — Wed, 10 Jun 2009 11:05:32 +0000

(English version in bottom)

Utilisant la nouvelle plateforme Titanium, j’ai créé un plugin pour explorer le disque dur. Le script est très simpliste et ne fais rien lorsque vous sélectionnez un fichier, mais il est simple de rajouter des fonctionnalités. Il ne fonctionne que sur la plateforme Titanium et avec la librairie JavaScript MooTools.

Titanium étant tout en anglais, le code l’est aussi et une traduction de ce billet en anglais est displonible plus bas. N’hésitez pas à commenter ce petit script et à laisser toutes vos impressions.

Je vous propose de lire les sources car c’est en réalité assez simpliste et c’est surtout commenté.

Voici le lien pour le JavaScript : TiExplorer

Et un lien pour un tout petit peu de design : TiExplorer Design

Le fonctionnement est simple :

Créer un fichier HTML
Ajoutez ces lignes dans le
Pour créer l’explorateur appelez la fonction :
```
createExplorer()
```

Ca y est, vous pouvez explorer votre disque dur.
Pensez à ajouter les traitements que vous souhaitez effectuer lors des clicks aux endroits indiqués dans le code.

Merci de rapporter tout bug que vous pouvez rencontrer. Les améliorations sont les bienvenues ;)

— English Version —

Using the new Titanium platform, I created a plugin for exploring your hard drive. The script is really simple and does nothing when you select a file, but it’s really simple to add functionality to. It only works on Titanium and with the MooTools JavaScript Library. I suggest you to read source code because it’s really simple and commented.

This is the link for JavaScript : TiExplorer

And the link for a few design : TiExplorer Design

The operation is really simple :

Create a HTML file
Add these lines in the
For create the explorer, call the function :
```
createExplorer()
```

Now, you can explore your hard drive.

Remember to add code you want to execute when you click to indicated location in the source code.

Please report any bugs you see. Fixes are welcome ;)

Titanium : quand Adobe AIR se fait concurencer par le libre

Albin — Wed, 03 Jun 2009 22:35:37 +0000

Logo de Titanium

Dans mon précédent billet, je vous parlais déjà de Titanium. Je décide de vous faire un article consacré spécialement à cette plateforme qui me semble assez prometteuse ou qui, en tout cas, a une sacré ambition. Elle tend tout simplement à concurencer Adobe AIR en recréant à peu près le même environnement, mais diffusé sous licence libre cette fois. De plus, son utilisation est gratuite (redistribution, modification et tout ce qui s’en suit l’est également, bien sûr).

Cependant, certaines personnes ne voient ce genre d’applications, dites RIA (pour Rich Internet Applications), seulement comme de petits gadgets, à cause notament de la multiplication des outils tels que TweetDeck, ou Twhirl. Ces applications arrivent cependant lentement sur le marché, mais ne sont actuellement que dans une phase d’implantation et de découverte pour le public. Ainsi, on ne voit pas encore de réelles grosses applications fonctionnant avec de telles plateformes.

Quoi de neuf ?

Leur intéret premier est de permettre le travail en offline sur des données disponibles sur un serveur. On crée donc une copie en local des données distantes et on met à jour dés que la connexion est disponible. On peut ainsi éviter la perte de données, la perte de productivité, la perte de temps, mais également allégé un peu le serveur en évitant d’enregistrer toutes les modifications inutiles ou en évitant de multiplier les copies « de sécurité » (brouillon par exemple).

L’existant

On connait déjà des applications qui fonctionnent comme cela : Outlook est un des exemples les plus connus. Vous ne traitez pas vos mails directement sur le serveur (comme avec Gmail par exemple), mais vous travaillez sur une copie de vos messages qui est sur votre disque dur. Ainsi, vous ne perdez pas vos données. La seule différence avec les RIA, c’est que avec ces dernières les données sont amenées à être effacées du disque dur.

Plus encore…

Vous n’êtes toute fois pas obligé d’utiliser Titanium seulement pour des applications de ce type. Vous pouvez créer une interface avancée pour intéragir avec n’importe quel service en ligne. Vous disposez ici d’une possibilité de coder en Python et/ou en Ruby en plus de tous les langages du net que l’on connait déjà ((x)HTML, CSS, Javascript).

On peut dire que c’est une sorte de mini-apache super amélioré. Toute votre application est exécutée côté client et va chercher sur le serveur les données dont elle a besoin. Plus aucun traitement n’est fait sur le serveur. Encore un bon moyen de l’alléger. Ainsi, le PHP n’est pas disponible puisque son code s’exécute côté serveur.

Finalement !

Pour tous les développeurs qui souhaitent se plonger dans les applications de demain, c’est certainement une voix à explorer. On voit là-dedans les notions de web 2.0 poussées à leur comble avec des services web maintenant très complets et sans réelle limite.

Enfin, et pour en finir avec les louanges, ce genre d’applications présentent également un avantage non négligeable : elle est multi-plateforme et ne nécessite pas de la recoder pour chaque système d’exploitation ! De quoi ravir tous ceux qui voyagent d’un OS à l’autre.

Avant de terminer totalement, nous avons parler au début du billet de Twitter sur Adobe AIR, il y a une application disponible sur Titanium aussi, nommée Tweetanium. Je vous laisse découvrir les quelques démos.

Etes-vous attirer par ces nouvelles façon de voir le web ? Pensez-vous que c’est une bonne chose, une bonne évolution ?