f-spot et symfony

Une des choses les plus intéressantes d’un logiciel libre, c’est que l’on peut bâtir dessus. … et je ne m’en prive pas !

J’utilise depuis plusieurs années maintenant le très bon logiciel f-spot qui permet de gérer des photos. Rien d’extraordinaire, mais tout de même ce logiciel permet de les visionner, de leur affecter des « étiquettes » (tags), de faire quelques retouches de base et d’exporter les photos vers toute sortes de service en ligne. Ainsi mes photos sont triées et en quelques cliques je peux trouver toutes les photos que j’ai d’une personne ou d’un lieu.

Comme je ne suis pas seul, je désire montrer ces photos sans pour autant avoir à faire d’export et encore moins à payer un hébergement onéreux.

Comme les données de f-spot sont enregistrées dans une base de donnée sqlite, je me suis dit que je pourrais l’utiliser directement pour monter un site web rapidement. J’ai donc configuré mon ordinateur domestique comme serveur web accessible depuis Internet.

J’ai sorti le meilleur outils de développement rapide : symfony. En quelques minutes j’ai pu « attaquer » directement la base de f-spot et récupérer des photos.

Avec deux trois outils en plus, j’ai pu finaliser en quelques heures un petit site : http://photos.fam-martel.eu

J’ai utilisé :

  • sfImageTransformPlugin pour faire des vignettes et des images de taille à aller sur le web.
  • Osez HTML5 et CSS3 ! pour réaliser une jolie présentation.
  • YoxView pour avoir un diaporama avec effet d’agrandissement et de transition.
  • Piwik pour récupérer des statistiques de consultation.
  • … et bien entendu ma machine tourne sous GNU/Linux avec un serveur Apache.

Au final, ce ne sont que des logiciels libres que j’ai assemblés pour en faire ce dont j’ai besoin. Je n’ai presque rien développé, j’ai fait fonctionner ensemble des morceaux de logiciels.

sfImageTransformPluginsfImageTransformPlugin

flattr this!

CSS technique de cliping

Un problème fréquent lorsque l’on a des sites très graphique, c’est que les nombreuses images mettent longtemps à ce charger.  Non pas qu’elle soit forcément volumineuse, mais surtout du fait qu’il y en ai beaucoup.

Voici une technique qui permet de limiter le nombre d’image en utilisant CSS pour les images de fond. Attention, pour des raisons d’accessibilité, ces images ne doivent pas apporter d’informations.

Le principe est d’assembler plusieurs images ensemble pour qu’elles ne forment plus qu’une seule, puis, au moment de les appliquer en fond d’un élément de les positionner de tel sorte que l’on ne voit que la partie qui nous interesse.

Exemple :

l’image : nous assemblons trois drapeau dans la même image, l’un en dessous de l’autre.

flag for cliping

flag for cliping

le code : nous voulons agrémenter une liste horizontale de pays

<ul id="pays">
<li id="fr">France</li>
<li id="it">Italie</li>
<li id="es">Espagne</li>
</ul>
<style>
#pays li{display:inline;}
#fr {background:transparent url(http://nat.fam-martel.eu/wp-content/flag.gif) 0 -30px no-repeat;padding-left:20px;}
#it {background:transparent url(http://nat.fam-martel.eu/wp-content/flag.gif) 0 -60px no-repeat;padding-left:20px;}
#es {background:transparent url(http://nat.fam-martel.eu/wp-content/flag.gif) 0 0 no-repeat;padding-left:20px;}</style>

Le résultat :

  • France
  • Italie
  • Espagne

La technique n’a rien de nouveau et elle permet de réduire le nombre de requête HTTP, ce qui accélère le chargement d’une page, l’image est un peu plus longue à chargé du fait qu’elle est plus grande et qu’elle à plus de couleur, mais l’un dans l’autre, le gain est significatif.

Un autre avantage est au niveau serveur : Celui-ci ne distribue qu’une image puisqu’il ne reçoit qu’une requête ! Ainsi il est moins demandé et réagit mieux à la charge.

Bateau dans le port de Nice

Bateau dans le port de Nice

flattr this!

WCAG contenus non textuel

WCAG :
“Web Content Accessibility Guidelines”, soit “directives pour l’accessibilité des contenu du web” en français.

1.1 – Contenu non textuel.

  • Toutes les images, les boutons de formulaires, et les zone active des images mapé doivent avoir un équivalent textuel approprié.
  • Les images qui ne véhiculent pas d’information possèdent un texte alternatif null (atl= » ») ou sont implémenté en CSS. Les images liés ont un texte alternatif de description.
  • Les alternatives équivalente des images complexes, sont disponible dans le contexte ou dans une page séparé (lié ou dans le « longdesc »).
  • Les boutons des formulaire ont une valeur significative.
  • Les champs de formulaire ont une étiquette (label) associé ou, à défaut, un attribut title descriptif.
  • Les élément multimédia (vidéo, flash) embarqué sont identifié par un contenu textuel adapté.
  • Les frames sont correctement titré.
Moineau

moineau

Commentaire : jusque là pas de difficulté, si ce n’est peut être de passer en revue les dernières illustrations ajouté ou changé mainte fois à la demande du client.

WebAIM’s WCAG 2.0 Check (en)Web Content Accessibility Guidelines (WCAG) 2.0 (en)

flattr this!