Galerie photo en SVG

[GregP]

Voici une galerie photo simple mais "responsive" et ceci sans Javascript, Flash, CSS et ni même HTML!
C'est une galerie en pur SVG:

http://digicamsoft.com/demo/svg/index0.svg

Qu'en pensez-vous?

[bgl1]

Tel quel simple et efficace mais :

Compatible avec quoi ? (peut-on l'inclure sur un site existant)

Se gère comment ? (catégorie / sous-catégorie..., nombre limité ou non)

Personnalisable au niveau look ?

Peut-être que la réponse est dans "svg" mais je ne suis pas expert du truc.

A suivre...

[GregP]

Au niveau compatibilité des navigateurs, seul Internet Explorer gère de façon incomplète le SVG (tout ce qui est animations). Je ne peux qu'insiter à changer de navigateur!
On peut biensur inclure ce template dans un site existant. Ce template référence un SVG par photo ce qui oblige l'utilisation d'un iframe, mais on peut aussi faire un SVG qui se référence lui même afin de pouvoir etre embarqué dans un site existant à travers une simple balise image par exemple.
Ici, il sagit d'un prototype que je vais inclure dans HTTPhotos, mais je compte développer d'autres templates plus élaborés par la suite.

[bgl1]

Ok, mais si je peux te dire quel navigateur j'utilise il est impossible "d'obliger" tous les visiteurs potentiels de la planète à éventuellement en changer !

Pour les "iframes" j'avais retenu que ce n'était pas le top pour la sécurité et le référencement.

Sinon je reste attentif aux évolutions à venir.

A suivre...

[GregP]

Toute la polémique des iframes vient de la technique "pirate" qui consiste à introduire une iframe invisible afin de naviguer vers le site du pirate. Si c'est une iframe volontaire qui navigue vers une page choisie, ceci ne pose aucun problème de sécurité. Il n'y a pas véritablement de problème de référencement non plus, la page découverte par un iframe sera indexée elle aussi.
L'usage de IE n'est heureusement plus que de 19% et vouloir être compatible avec tous les navigateurs tend malheureusement à niveler vers le bas.
Reste que le SVG est un format élégant et possédant des caractéristiques interessantes pour concevoir des galeries photo.
Evolutions à suivre 

[bgl1]

Je ne polémique pas car je ne suis pas informaticien pro, je fais juste part de mises en garde que j'avais lues, sur différentes sources, lorsque je me suis intéressé à la création de site web.
Mon but est de faire simple et le plus "propre" possible en l'état de mes connaissances en la matière. Créer une usine à gaz engendre souvent une lassitude rapide au niveau maintenance.

A suivre...

[OuiOuiPhoto]

Voici une galerie photo simple mais "responsive" et ceci sans Javascript, Flash, CSS et ni même HTML!

Et quel est l'avantage de ne pas avoir d'HTML ou de CSS ?

[GregP]

Les iframes sont souvent utilisées pour ouvrir le contenu d'un autre site, ceci implique de faire confiance à cet autre site sur le moment et dans la durée, c'est aussi simple que ça (http://stackoverflow.com/questions/7289139/why-are-iframes-considered-dangerous-and-a-security-risk/9428051#9428051).
Le même type de problème pouvait se poser avec une simple image provenant d'un autre site (http://en.wikipedia.org/wiki/Buffer_overflow).

Pour revenir à la galerie SVG, l'exemple initial se base sur une image par page, c'est une idée de quelquechose qui est simple car après tout quoi de plus simple que de mettre en ligne les fichiers photos uniquement? Le seul problème d'un fichier image (raster) est qu'il ne permet pas de naviguer vers la photo suivante et c'est ce que le SVG apporte dans cette example.

Afin de répondre au besoin d'embarquer la galerie SVG dans une page HTML existante et sans utiliser d'iframe, je vais concevoir une autre galerie toujours en SVG mais qui cette fois fera l'hyperlien en interne afin d'afficher l'image suivante.

[GregP]

Et quel est l'avantage de ne pas avoir d'HTML ou de CSS ?

Il n'y a pas de réel avantage à ne pas avoir de HTML ou CSS, par contre il y en a un avantage à avoir un format comme le SVG qui est capable de faire autant que HTML+CSS+JS.
Le but final étant de faire simple et plus léger.

Je viens de faire un test sur flickr pour l'affichage d'une seule photo lorsque l'on clique sur "originale" par exemple.
Résultat:
22 requêtes serveur totalisant 1323Ko pour afficher une image de 324Ko (1024x683).

Si je regarde http://www.ouiouiphoto.fr/NewGalerie/Lightroom/NewNature/index.html
37 requêtes serveur totalisant 5882Ko! Ici, il y a un template plus sophistiqué qui affiche des miniatures, mais on peut noter que le JS+CSS=226Ko ce qui est beaucoup.

Dans l'exemple SVG donné ici, il y a 1 seule requête serveur pour afficher l'image + la navigation et 99% des données transférées sont l'image.

L'idée est bien de faire des choses simples.

[OuiOuiPhoto]

Si je regarde http://www.ouiouiphoto.fr/NewGalerie/Lightroom/NewNature/index.html
37 requêtes serveur totalisant 5882Ko!

Oui mais les photos sont en haute définition (2500px X 2500px)

Je comprend le concept de faire plus léger mais cela a-t-il du sens alors que les réseaux vont de plus en plus vite ?

[GregP]

Oui mais les photos sont en haute définition (2500px X 2500px)

Je comprend le concept de faire plus léger mais cela a-t-il du sens alors que les réseaux vont de plus en plus vite ?

... et aussi très belles!

Une étude menée par Akamai (page 31 de http://www.akamai.com/dl/akamai/akamai-soti-q413.pdf?WT.mc_id=soti_Q413) indique que le débit internet moyen pour un usager en Europe ou aux US est de l'ordre de 10Mbps soit 1250ko par seconde.
Il faut donc un peu plus de 1 seconde pour afficher la page chez Flickr et 4.7 secondes chez OuiOui!

Le portrait n'est cependant pas aussi catastrophique grace à la mise en cache dans les navigateurs et la compression de données possible entre serveur et navigateur.