myphotos.fr exit les table et enter l’exif.

Allons voir ce nouveau site au design plus que pas mal : www.myphotos.fr

Le test du %

le fait d’inserer % dans le moteur de recherche produite, en général, une requête du genre :

select … from … where … and … = ‘%’ // ce qui est toujours vrai puisque % est un wilcard en mysql.

Voyons voir le resultat :

Cool : la liste des membres et de toutes les photos

Ceci est dangereux pour plusieurs raisons :

• Page très lourde à générer et à transporter donc : problème de charge serveur et lenteur coté client.
• on a la liste des membres, on peut très facilement aller chercher toutes les photos de tous les membres pour se faire une photothèque perso.
• quand vous aurez 10 000 membres et 500 000 photos (voir beaucoup moins) le serveur sera incapable de générer cette page.

Pas d’info ??? et pourquoi ca ?

Vous l’aurez vite compris en surfant, ce site est fait pour les photographes. Personnellement je ne suis pas photographe mais je me dit, que la technique doit etre importante pour les photos. Non ?

L’appareil utilisé, le flash, la vitesse d’obturation, l’ouverture … enfin des trucs de photographe quoi.

Ce qu’il y a de bien avec le format jpeg c’est qu’il y a pas mal d’information autre que l’image, ce sont des “meta-données” exif.

Voici la définition wikipedia de EXIF:

L’Exchangeable image file format ou Exif est une spécification de format de fichier pour les images utilisées par les appareils photographiques numériques. Il a été établi par le Japan Electronic Industry Development Association (JEIDA). Cette spécification repose sur des formats existants tels que JPEG, TIFF version 6.0 et RIFF format de fichier audio WAVE, en y ajoutant des balises de métadonnées. L’Exif n’est pas supporté avec les formats JPEG 2000 ou PNG.

Sauf que sur myphotos.fr, quand on veut afficher les informations d’une photo, voici le résultat :

Aucune des photos ne contient d’informations exif car elles ont toutes été redimensionnées avec GD (1 et non 2), voici ce qu’on obtient quand on essai d’afficher les meta-données :

Bref, rien de bien passionnant, alors que si lors du redimensionnement, les données exif avait été copiés nous aurions eu quelques chose du genre :

Imaginez un moteur de recherche ou un classement d’image par marque, modèle, longueur de focale, vitesse d’obturation … enfin le genre de truc qui font tripper les photographes un peu geek du zoom.

Non, ils ne sont pas gros

Je vais pas faire 15 lignes sur ce sujet, mais non il ne faut pas, non ce n’est pas bien et encore une fois, non non et non.
On ne change pas le ratio d’une image provenant de l’internaute.
Alors oui, c’est pas facile de composer avec des images paysages et portraits en même temps, oui c’est moins joli parce que pas aligné mais bon .. c’est comme ça.

Papa c’est quoi un md5 ?

Pendant ma navigation, je suis tombé sur un photoblog, celui de nikob (pas mal du tout d’ailleurs, il devrait faire du design web )
Je voulais regarder comment les images étaient stockées et je tombe sur cela :

Dans l’url d’emplacement, on peut voir que le répertoire est dbd61fa238… enfin un truc compliqué : un md5.

Que dit wikipédia sur le md5

L’algorithme MD5, pour Message Digest 5, est une fonction de hachage cryptographique très populaire, mais qui n’est plus considéré comme un algorithme sûr pour toutes les utilisations. On suggère maintenant d’utiliser plutôt des algorithmes tels que SHA-256, RIPEMD-160 ou Whirlpool. Le MD5 a été inventé par Ronald Rivest suite aux vulnérabilités sur MD4.

(nous passerons sur le fait qu’il est maintenant possible de retrouver le string correspondant à un md5, moyennant un peu de chance et une débauche d’espace disque et de temps CPU (raimbow)).

Juste par curiosité, je me suis demandé pourquoi utiliser un md5 (ce n’es pas sale un md5 hein, c’est juste ma curiosité qui voulais savoir) . En générale, la réponse est “pour éviter de se faire fetcher toutes les images”.

Il est donc impossible de trouver tous les repertoires photo sauf si … l’on connait tous les md5 de ce repertoire… en ayant par exemple… la liste des membres … ça on a. Mais en général, comme on touche à la sécurité, la transformation du compte du membre => md5 est faite avec un passphrase ex:
$directory = md5($user->id . $user->login . ‘You will never find it ah ahahahahah’ ) ;

Juste pour le fun, parce que je suis joueur (non j’ai pas le poil brillant), je teste sans passphrase, juste avec le login

Ce dbd61fa238… ne vous dit rien ?

Ici, nous avons donc : $directory = md5($user->login) ;

Pour résumer, avoir utilisé des md5 ne sert à rien, autant utiliser le pseudo du membre, c’est moins gros et au moins ils se retrouverons dans google.

(Pour info, j’accepterais que l’on me dise que sur ce coup là … je chipote)

Conclusion… aie non il reste une petite chose

Avant de terminer et de dire que en fait le site est pas mal du tout … tout ça tout ça …. je voulais juste ajouter une chose… euu … comment dire ….
C’est bien d’utiliser prototype, scriptaculous (joliment utilisé d’ailleurs), de faire du web2, des reflets … mais y’a un truc qu’il faut arrêter toute de suite :

les TABLES pour la mise en page !!!!!!!!

“jusqu’en 1999 l’utilisation de TABLE et de SPACER ([vide|empty].gif) était parfaite pour mettre en page pour les navigateurs Internet Explorer 3 et Netscape Navigator 4.”
Du coup forcement, la W3C à dépose plainte :
http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fwww.myphotos.fr%2F

mais ça vous l’avez bien cherché

Pourquoi faire du css et non des tables ? pour faire simple, parce que

- CSS allège le poids des pages

- CSS permet de faire du DRY : Don’t Repeat Yourself

- CSS est plus simple (mais si c’est toujours sympa de se battre avec des colspan )

- CSS permet une meilleur maintenabilité.

Conclusion

Je passe sur l’utilisation d’un texte rouge souligné de bleu sur un fond noir (couleurs interdites par l’association des mal voyants de France), de l’oubli d’activer mod_gzip (poutant installé sur le serveur) et vous félicite pour l’ensemble du projet qui n’est encore qu’en version beta.

Bravo pour l’effort sur la mise en cache
Bravo pour le design (vraiment très reussi)
Bravo pour l’intégration
Bravo pour le projet

written by Nicolas \\ tags: css, exif, md5, myphotos