Wapyti Developer Guide

Objectifs

Le but de Wapyti n'est pas de refaire un n-ième album web classique, mais de proposer quelque chose de nouveau. Les albums en ligne ne permettent d'afficher qu'une seule image à la fois, toujours de la même manière. Wapyti, au contraire, reprend la philosophie des albums papiers, où l'on compose chaque page de façon indépendante, en présentant souvent plusieurs photos, dans différentes tailles et orientations, permettant une grande créativité. Un ou plusieurs textes pourront aussi accompagner chaque page.

Wapyti est accès sur la présentation, qui restera sobre. Les techniques récentes (effets web 2.0) ne seront utilisée que pour rendre la visualisation des albums la plus plaisante possible, càd en restant invisibles ! Les menus et autres boutons de navigations doivent rester discret, et n'apparaître que lorsqu'on en a besoin. La taille d'affichage sera paramétrable (plein écran possible).

Concernant les pages, elles seront basées sur des templates qui définiront l'emplacement et la taille des images. Il sera possible à l'utilisateur d'en rajouter facilement, pour enrichir le logiciel. Le coeur des templates est une simple CSS. En plus des templates de pages, il sera possible de choisir un thème global pour l'album, définissant les couleurs et polices utilisées.

Il serait bien de pouvoir piloter Wapyti depuis une appli cliente autre qu'un navigateur, permettant ainsi de développer des plugins pour les applications courantes. L'upload des images dans la zone d'attente est très facilement intégrable dans une appli comme Geeqie (fork de gqview, ce dernier n'étant plus maintenu).

À la différence des autres applis d'albums web, Wapyti n'est pas développé en PHP, mais en python, et est basé sur le fameux framework web Turbogears. De plus en plus d'hébergeurs proposent le support pour python, et le déploiement ne devrait pas poser de problème.

En pratique

URL et paramètres

TG permet de simplifier le passage des paramètres dans une URL. Par exemple, au lieu de :

/view?albumName="Album_1"&pageNum="4"

on peut écrire :

/view/Album_1/4

D'un point de vue développement, c'est la méthode view() du contrôleur Root qui sera appelée, avec les arguments donnés. Mais il est également possible de créer des sous-contrôleurs. Il est donc intéressant de réfléchir à une utilisation rationnelle de cette syntaxe. Par exemple, faut-il regrouper les contrôleurs par fonction ou par objet :

/album/view/Album_1/4
/album/edit/Album_1/4
/photo/view/img_3214.jpg
/photo/edit/img_3214.jpg

ou

/view/album/Album_1/4
/view/photo/img_3214.jpg
/edit/album/Album_1/4
/edit/photo/img_3214.jpg

Templates

Les pages d'albums sont définies via des templates. Ces templates, stockés dans le répertoire wapyti/templates, sont basés sur le moteur kid (bientôt Genshi), et définissent principalement la CSS qui sera utilisée pour l'affichage. Les images et textes sont positionnés en absolu, ce qui pose problème pour le redimensionnement : 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:py="http://purl.org/kid/ns#" py:extends="'master.kid'">
    <head>
        <style type="text/css">
            .photo {
                position: absolute;
                border: 1px dotted #808080;
                overflow: hidden;
            }
            #photo_0 {
                width: 400px;
                height: 250px;
                top: 50px;
                left: 150px;
            }
            #photo_1 {
                width: 400px;
                height: 200px;
                top: 350px;
                left: 400px;
            }
            .text {
                position: absolute;
                border: 1px dotted #808080;
                overflow: hidden;
            }
            #text_0 {
                text-align: left;
                width: 150px;
                height: 150px;
                top: 70px;
                right: 150px;
            }
        </style>
        <title>Wapyti - Album '${params['albumName']}'</title>
    </head>
    <body>
        ${photo.display(params, position=0, width=400, height=250)}
        ${photo.display(params, position=1, width=400, height=200)}
        ${text.display(params, position=0)}
    </body>
</html>

Upload photos

Les photos utilisables pour un album seront uploadées dans une zone d'attente ; chaque zone est propre à un album. Il sera possible de supprimer des photos de la zone d'attente (seulement si non utilisées). À terme, une interface permettra d'éditer les photos (retouche simple en ligne).

Comment stocker les photos sur le serveur :

  • sous forme de fichiers ?
  • dans la base de données ?

Controllers

Spliter le RootController en sub-controllers

  • EditController : mode édition d'album
    • ajout/copie/déplacement/supression page
    • choix/modification template
    • upload photos
  • AdminController : administration générale
    • édition user/group
    • maintenance de la base
  • HelpersController : fonctions annexes
    • liste photos/albums/templates...

Gestion des droits sur les albums

  • view
  • edit

Templates

Les pages d'albums sont définies via des templates. Ces templates, stockés dans le répertoire wapyti/templates, sont basés sur le moteur kid, et définissent principalement la CSS qui sera utilisée pour l'affichage. Les images et textes sont positionnés en absolu (bof)

  • Utiliser des coordonnées relatives pour les tailles et positions
  • Fonctions pour créer des effets dans les pages (ombres, bords...)
  • Intégrer les boutons de navigation dans les templates ?
  • Fonctions pour intégrer titre/numéro de pages dans les templates

Divers

Texte

Utiliser le module ImageFont pour générer le texte sous forme graphique

  • définir :
    • fonte
    • taille
    • justification
    • effets
  • prévisualisation