Ergonomie, Rails et Architecture de l'information web (2.0)

On n’est jamais mieux servi que par soi-même, dit le proverbe. Aussi, afin de remplacer Photostack vraiment trop limité et brouillon ai-je décidé de développer ma propre galerie d’images, mais vite (et bien), car je n’ai pas vraiment que ça à faire.

En termes de fonctionnalités, je compte partir sur des bases simples, que j’améliorerai au fur et à mesure.

• De multiples galeries.
• La prise en charge du redimensionnement des images.
• La création automatique de vignettes.
• Un slideshow qui permette aux visiteurs de faire défiler l’ensemble d’une galerie sans aucun effort.
• Un flux XML pour du RSS ou de l’atom.

Pour le côté technique, j’ai dit vite – le temps d’avaler un plat de sushi – et propre. Cela exclue donc forcément PHP, au profit de Ruby on Rails. Maintenant, on fait comme dans la chanson, on monte sur les tables, on lève les bras bien haut, allez c’est parti !

Création de l’application

Nous commençons par créer une nouvelle application Rails.

powerbook:~/Documents/code$ rails imagilia

powerbook:~/Documents/code$ cd imagilia

Et pour fêter ça, j’attrape un premier sushi à l’oursin. Miam !

Ajout des galeries

Nous créons maintenant tout ce dont nous avons besoin ajouter, parcourir, modifier et supprimer des galeries.

powerbook:~/Documents/code$ script/generate scaffold_resource gallery name:string description:text status:boolean position:int created_at:date updated_at:date

Notre galerie possédera les attributs suivants :

• Un titre.
• Une description.
• Un état (en ligne / hors ligne).
• Une position.

Nous avons utilisé les fonctionnalités de génération automatique de Rails. Elles nous permettent maintenant de disposer de :

• Le formulaire de création et de modification de notre galerie /galleries/new.
• L’affichage HTML (sommaire) de notre galerie: /galleries/1.
• Un flux XML, for fun and profit : /galleries/1.xml

Aurais-je omis de dire que l’application est RESTful ? Oui ? Comme c’est dommage. Je vais donc noyer mon chagrin dans un second sushi, au saumon cette fois.

Ajout des images

Il nous manque le plus important : l’ajout et la visualisation des images. Comme précédemment, nous allons laisser Rails travailler pour nous et générer tout ce dont nous avons besoin, ou presque.

powerbook:~/Documents/code$ script/generate scaffold_resource picture gallery_id:int content_type:string filename:string thumbnail:string size:integer width:integer height:integer position:int title:string description:text status:boolean created_at:date updated_at:date

Nos images auront pour attribut :

• Une galerie parente. Nous créerons le menu déroulant plus tard.
• Un nom de fichier.
• Une vignette.
• Un sushi aux oeufs de saumon.
• Un poids en ko.
• Une hauteur en pixels.
• Une largeur en pixels.
• Une position.
• Un titre.
• Une description.
• Un état (en ligne / hors ligne).

Gestion de l’upload et du redimensionnement

Pourquoi faire compliqué et réinventer la roue quand on peut faire simple et laisser les autres travailler pour soi ? Je vous propose donc d’installer le greffon attachment_fu, et de manger un sushi à l’anguille fumée avant qu’il ne soit complètement froid.

powerbook:~/Documents/code$ script/plugin install http://svn.techno-weenie.net/projects/plugins/attachment_fu/

C’est fait, il ne nous reste plus qu’à lier les briques ensemble.

Dans app/model/gallery.rb

Nous spécifions la relation entre les galeries et les images : à une galerie correspond plusieurs images.

    class Gallery < ActiveRecord::Base
      has_many :pictures
    end

Et ligne 18 :

Il s’agit du champ correspondant à l’image que notre greffon s’attend à recevoir. Ne le décevons pas.

<%= f.file_field :uploaded_data %>

Dans app/model/picture.rb

Nous appelons notre greffon avec toutes les informations dont il a besoin :

• Nous stockons nos images sur le disque local. Nous pourrions aussi le stocker sur le service S3 d’Amazone de manière totalement transparente.
• L’image fera maximum 500 ko.
• Elle sera redimensionnée en 600*450 pixels.
• La vignette fera 120*90 pixels.

    class Picture < ActiveRecord::Base
        belongs_to :gallery
        has_attachment :content_type => :image, 
            :storage => :file_system, 
            :max_size => 500.kilobytes,
            :resize_to => '600x450>',
            :thumbnails => { :thumb => '120x90>' }
        validates_as_attachment
    end

Dans app/views/pictures/new.rhtml ligne 5

<% form_for(:picture, :url => pictures_path) do |f| %>
<% form_for(:picture, :url => pictures_path, :html => { :multipart => true }) do |f| %>

Tout ça m’a donné faim. Et vous ?

Dans app/vews/galleries/show.rhtml

    <% for image in @gallery.pictures %>
        <p>
          <%= link_to (image_tag(image.public_filename(:thumb), :alt => image.title), image.public_filename) %><br />
          <%= image.title%>
          <% image.description %>
        </p>
    <% end %>

L’affichage plein écran et le slideshow

Une fois de plus, pas question de réinventer la roue quand d’autres le font pour moi. Nous nous en allons donc faire un tour du côté de chez Xuan et télécharger Splash Image, un script clica convi qui remplace avantageusement Lightbox sans nécessité 2go de RAM. Et pourquoi ne pas manger un sushi au thon tant qu’on y est ?

wget http://www.chez-xuxu.net/ressources/javascript/splash.image/splash.image.zip

Nous décompressons l’archive dans public/javascripts, et faisons les inclusions qui vont bien.

Dans app/views/layout/galleries.rhtml

<%= stylesheet_link_tag 'splash.image/splash.image.css' %>
<%= javascript_include_tag 'splash.image/splash.image.js' %>

Dans app/vews/galleries/show.rhtml

Nous remplaçons la ligne précédemment ajoutée par celle-ci :

<%= link_to image_tag(image.public_filename(:thumb), :alt => image.title ), , {:rel => "splash.image|groupe1"}, image.public_filename %>

Elle nous permet de grouper les images de cette galerie et de les faire défiler en pleine fenêtre comme si de rien n’était.

Conclusion

Voilà, c’est fini, ou presque. Il ne me reste plus qu’à ouvrir mon plat de maki et à nettoyer tout ça. Certes, ce n’est pas bien joli, mais ça marche. Je vais faire un peu de nettoyage dans le code, rajouter une feuille de style correcte, et mettre les sources sur un subversion afin que vous puissiez récupérer tout ça. Merci beaucoup à Bastien pour m’avoir montré le plugin upload_fu et avoir supporté mes blagues vaseuses toute la journée.

Vendredi, nous ajouterons une authentification basique, l’upload de masse depuis un système de fichier ou un ftp, les jolies URL search engine friendly et les tags le temps de nous siffler une ou deux pintes de Guiness que vous aurez eu la gentillesse de m’offrir par SMS comme il se doit.

[Edit] J’ai mis une démonstration du résultat final en ligne. Elle est accessible sur 20 minutes gallery et la démonstration est totalement fonctionnelle.

Parce qu’un peu d’auto promotion ne fait pas de mal, un billet qui ne traitera ni de près ni de loin des standards, de l’ergonomie et du web 2.0.

J’ai commencé il y a quelques temps un projet de photos de l’ensemble des églises de la capitale. Il s’agit évidemment d’un projet de très longue haleine, entre le nombre incroyablement élevé d’édifices religieux que compte la plus belle ville du monde (ceci dit en toute objectivité), et le peu de temps que mon travail, mes projets et ma famille me laissent pour le réaliser, mais j’avance.

Après plusieurs mois sans pouvoir sortir, j’ai fait d’une pierre deux coups hier avec l’église Saint Médard, construite entre le XVème et le XVIIIème siècle, et l’église romane de Saint Julien le Pauvre qui est la plus ancienne de Paris. Dédiée au culte grec melchitec, cette dernière est particulièrement remarquable pour sa superbe iconostase. Le visiteur curieux pourra ensuite traverser la rue et se rendre à Saint Séverin, ma favorite dont je vous propose par ailleurs deux clichés pris hier soir.

Le choeur de Saint Séverin

Saint Séverin, l’allée latérale droite vers le fond

Veuillez nous excuser pour cette interruption de service. Ce blog va maintenant reprendre le cours normal de ses activités.

Histoire de me changer un peu les idées et de consacrer un peu de temps à mon autre grande passion – la photographie numérique – je me suis offert Photoshop pour les photographes, de Cyril Bruneau et Bernard Richebé aux éditions Eyrolles. Pour la modique somme de 19 euros 90, cet ouvrage présenté sous la forme d’un cahier d’exercices remplacera allègrement des dizaines de didacticiels trouvés ici et là sur la toile en concentrant tout ce dont l’amateur aura besoin pour assurer une post production décente à ses oeuvres.

Au menu, une foule de choses utiles – 32 en tout – présentées avec forces captures d’écran afin de guider sans coup férir les clica convi impaired dans mon genre, mais je retiens surtout :

• Éclaircir une photo sous exposée.
• Accentuer localement le contraste.
• Corriger une photo sur exposée.
• Détourer à la plume.
• Supprimer un élément indésirable.
• Retoucher un visage.
• Réaliser un assemblage panoramique.

Je mets en ligne mes premiers essais (cliquez pour agrandir) d’autant plus maladroits qu’ils ont été faits avec une vieille mini souris pour portable, ma Mightymouse sans fil passant le week-end au bureau.

Avant.

Après.

Passage en noir et blanc et cadrage plus serré.

Note pour Gwen : je t’ai aussi pris le bouquin sur Ruby on Rails, tu me dois 40 euros, et pas la peine de te foutre de moi, je sais bien que tu fais beaucoup mieux.

J’ai un peu l’impression de réécrire le même billet tous les six mois, sorte de piqûre de rappel en forme de placebo inutile, mais je ne peux m’empêcher de pousser mon coup de gueule bisannuel, bien que je sache pertinemment que je ne fais que crier dans le désert.

J’apprécie déjà moyennement qu’on lie mes photos depuis cette machine sans en donner les crédits ; je laisse faire, un peu par flemme : je pourrais très bien mettre en place une rewrite rule qui renvoyant le contrevenant vers une source comique, amusante, voire cocasse.

En revanche, je dois avouer sortir de mes gonds quand quelqu’un se permet de faire du hotlinking sur mes photos, s’en attribue la paternité et se permet même la sublime démonstration de mauvaise foi de m’expliquer qu’il les a prises quand ce dont nous parlons se trouve sur mon serveur, et les originales sur mon disque dur. Je ne demande pas grand chose en dehors de la réattribution césarienne de ce qui lui appartient, ce qui semble pour certain une épreuve infranchissable.

Je ne sais pas trop s’il s’agit de mauvaise éducation, ou d’absence d’éducation, mais il semble que mes concitoyens n’ont pas encore totalement intégré le concept de propriété intellectuelle. Trouver un document en libre consultation sur le web ne signifie en aucun cas qu’il est libre de droits. Cela vaut évidemment pour les photos, mais aussi pour les textes, et les récents déboires de Google avec la justice belge, et le retour de bâton qui s’ensuivit, en sont l’exemple le plus récent.

Détail de la chaire de prêche de l’église Saint Roch à Paris

Après des années de militantisme libriste, d’apprentissage de la valeur d’une oeuvre de l’esprit et des libertés et contraintes sous-jacentes, je me vois obligé de marquer toutes les photos de ma galerie à cause d’une bande d’imbéciles que je préfère croire plus mal élevés que malhonnêtes. J’ose imaginer sans conviction qu’ils prendront conscience de ce qu’ils font avant de se réveiller dans un monde entièrement verrouillé par une série de brevets et de DRM, monde contre lequel je milite et me bats depuis des années.

[edit]
Mat me signale cet intéressant article sur l’ajout d’annotations à la volée quand l’image est affichée par une source extérieure. Malheureusement, ça n’empêche pas ceux qui sauvegardent la photo et la réutilisent depuis chez eux de le faire.

Et je rajoute une photo prise samedi, extraite de ma galerie des églises de Paris, juste pour le plaisir.

Je viens de tomber sur un service qui n’a rien de très original en soi – pour les habitués des applications web récentes – mais qui manquait toutefois dans le paysage du Web.

Avec l’augmentation des capacités des machines et de la bande passante il devient de plus en plus difficile de trouver des logiciels faisant une chose et UNE SEULE, en l’occurrence celle pour laquelle ils ont été conçus. Prenons par exemple les outils de galerie photo pour le Web. On a le choix soit à des produits peu ou pas finis, soit à des usines à gaz dans le genre de Gallery 2, qui ne font même pas forcément le strict minimum.

J’ai énuméré mes besoins, à savoir :

• Gestion des albums et des sous albums.
• Fonctionnement par répertoire (idéalement, j’upload un répertoire et hop, j’ai un album).
• Pas de base MySQL.
• Gestion des tags.
• Gestion des URL élégantes: je ne veux plus de /mon-album/photo.jpg mais /mon-album/ma-jolie-photo.
• Possibilité d’avoir plusieurs tailles pour une même photo.
• Un truc vraiment statique et non une usine à gaz.
• En option, un slideshow.