Creation de thumbs d'url en 3D - Votre avis ?

[kooki]

Bonjour,

Je viens de mettre en place une nouvelle visualisation de thumbnails(vignettes d'url) en 3D, ou plus exactement en pseudo 3d avec reflection de l'image pour donner plus de profondeur à celles-ci... Il y aura 3 formats disponibles... (120x90 - 200x150 et 400x300), pour l'instant la 3d donne un effet vers la droite en profondeur mais je compte également proposé l'inverse de cet effet.

Bref, j'aimerais avoir votre avis sur cette pseudo 3d au niveau du rendu... bien ? pas bien ? etc...
Tous les avis sont les bienvenus...

Visible sur http://www.thumbs-online.com
et un exemple d'intégration sur :
http://www.tresorsduweb.com/cinema-4.html

Merci
Fabrice

 

[SuperCureuil]

Salut,

C'est fort joli et ça peut plaire, mais ce n'est pas révolutionnaire dans le sens où il n'y a pas de réelle valeur ajoutée par rapport à une vignette classique.

Allez hop, dans les favoris :wink:

 

[fra_arf]

Je ne sais pas si on peu appelé ça de la 3D mais le rendu est sympas en tout cas.
Merci à vista ou à celui qui à eu l'idée, c'est bien plus sympas qu'un thumbs classique en tout cas.

 

[webmasterlamogere]

j'aime bien cet effet avec en plus la fenêtre. +1 reco

 

[elcantar]

Joli et original -> +1 reco

 

[2dm]

Effectivement c'est plutôt bien fait.
Par contre, pourquoi dessiner la fenêtre du navigateur ?
Peut-être que tu pourrais proposer une option pour ne pas l'afficher.

 

[kooki]

Suite a ta remarque je viens d'essayer sans le cadre de la fenetre, résultat la perspective en pseudo 3d rend pas terrible du fait que le dégradé de l'image se confond avec l'image en elle-meme, on croit que la reflection de l'image fait partie de l'image ! le cadre rend donc mieux que sans cadre... j'ai meme essayé des variantes du cadre, a savoir sans l'espace bas, moins de barre en haut, etc... résultat seul celui que je propose correspond et rend le mieux...

Si vous avez des suggestion n'hésitez pas...

Fabrice

 

[sonikbuzz]

Salut Kooki,

Bravo pour ton service de screenshot (que j'utilise pour mes annuaires après en avoir testé pas mal...)

Personnellement, je préfèrerais un cadre à la place du navigateur (surtout IE :twisted: )

Y'a pas moyen quelles soient en .png pour un meilleur fondu transparent ?

 

[zeb]

avec reflection de l'image pour donner plus de profondeur à celles-ci...

pas top la reflection justement pour moi car mauvaise vue donc pour le vignettes sombres, la forme générale retourne vers le rectangle pur ce qui diminue l'effet 3D (surtout pour les petites tailles).

sinon IE bof bof +1 +1 +1

et pour le reste, super bonne idée bravo.

 

[2dm]

Donc en fait ce que tu devrais faire c'est proposer un tour customisable.
Ca me semble très simple à faire en css.

Par exemple tu génères l'image sans cadre (en le mettant transparent). L'utilisateur a ensuite le choix entre différents cadres (en changeant le style associé) ou a la possibilité de réaliser son propre cadre.

 

[Lomic2]

très chouette comme thumbs par contre je trouve la license trop exigeante, placer un lien sur la page où sont affichés les thumbnails ok, par contre sur la page d'accueil du site, pas d'accord.

s'il n'y avait pas ça j'aurais adopté ces thumbs 3D qui sont bien jolis

 

[Marie-Aude]

Comme Lomic2

 

[xTrade]

C'est toujours beaucoup moins exigeant que les licences sur les photos... :wink:

 

[kooki]

Réponses à vos remarques :

- pour ce qui est du cadre IE je vais voir pour enlever simplement le logo et le nom internet explorer... il restera donc la partie bleue et les icones a droite de manipulation de la fenetre

- pour mettre en png ? le probleme sera la taille des images, donc pas trop possible ! à moins de le faire uniquement pour 1 format !!! car là j'ai 3 formats par type, le normal, le 3d droite, le 3d gauche, ca fait 9 images stockées par url...

- c'est vrai que la réflection n'est pas hyper top dans le cas d'une image sombre, pourtant j'ai essayé de faire au mieux dans le dégradé, le tout devant tenir dans un rectangle...

- pour le coup du css, ca me parait compliquer pour le "webmaster de base" qui voudrait intégrer un cadre perso, sachant qu'en plus vu que l'image est déformée il faudrait respecter la déformation du cadre dans vos cadres personnalisés... donc je préfère partir pour une utilisation la plus simple possible !^

- pour la licence, j'ai changé celle-ci rendant l'apposition du code sur page d'accueil facultative mais facultative uniquement sur la page d'accueil, le reste de la licence ne changeant pas ! par contre si le service est utilisé sur un annuaire et que la page d'accueil affiche les vignettes ca changera pas grand chose par rapport a avant car l'apposition du code sera obligatoire sur la page d'accueil...

Sinon l'affichage "3d" inversé fonctionne, je mettrais ca en ligne tout a l'heure sur le site pour que vous voyiez ce que ca donne, le dégradé sur cette image inversée est légèrement différent...

Normalement la phase béta se terminant, je permettrais l'accès et l'affichage des thumbs 3d surement ce week end afin que chacun puisse en profiter sur ses sites...

Je reste à votre écoute concernant remarques et suggestions...

Fabrice

 

[Marie-Aude]

Ah ?
Je n'ai jamais demandé un lien en page d'acceuil pour qu'on utilise mes photos

 

[bertimus]

Curiosité : ta solution classique de création de thumbnail est-elle capable de générer des vignettes de pages internes ?

 

[kooki]

Bertimus, pour te répondre, ma solution est capable de générer toutes urls, donc les internes... bien sur il y a des limites a tout ! s'il s'agit de générer plusieurs centaines de milliers d'images d'url interne a un seul et meme site je serais obligé d'en limiter l'utilisation... autrement il n'y a aucun problème.

Si tu as un cas précis d'utilisation à faire dans ce sens, tu peux toujours me le soumettre en MP (par exemple) que je puisse te répondre plus précisement.

Fabrice

 

[Lomic2]

- pour la licence, j'ai changé celle-ci rendant l'apposition du code sur page d'accueil facultative mais facultative uniquement sur la page d'accueil, le reste de la licence ne changeant pas !

cool on a pas tous des annuaires après tout :wink:

ben je vais proposer ça à mon proprio de site

 

[zeb]

Bref, j'aimerais avoir votre avis sur cette pseudo 3d au niveau du rendu... bien ? pas bien ? etc...
Tous les avis sont les bienvenus...

Merci Fabrice pour la remarquable qualité de ta prise en compte des remarques faites sur ce fil.

Une autre puisque tu semble attaché aux avis des utilisateurs.

J'ai un annuaire (un autre bientôt en vue aussi) qui utilise mythumbshot et qui utilisait Thumbzor avant que j'ai du lâcher pour raison de lenteur (c'est pourtant pas mes 1000 VU qui le mettait à genoux lol).

Au changement de fournisseur, j'ai un peut amélioré le backoffice du site pour me donner les moyen de moins dépendre de son service et aussi surtout pour qu'il ne finisse pas comme Thumbzor, a mon avis, victime de son succès.

je dis 'victime de son succès' car je pense (ça reste a vérifier) que beaucoup de monde utilisant son service, le dit service deviens saturé et n'arrive pas à suivre. Pourquoi ? sûrement parce que l'usage a chaque affichage d'une source pour l'image de la forme -http://www.thumbzor.com/tel.php?url=http://www.monsite.com/ sollicite beaucoup leur serveur et fini par le saturer.

La parade pour l'utilisateur est pourtant simple, il suffit d'uploader l'image sur le serveur d'utilisation pour ne plus solliciter le serveur d'origine. (c'est ce que je fais avec mythumbshot)

Seulement il y a un Hic ! cette manipulation ne peut pas facilement être automatisée car mythumbshot (par exemple) renvoie une image d'attente si la vignette n'existe pas encore. Donc il est très difficile de faire la différence entre une vignette d'attente et la vrai vignette. OK il serait facile de la prendre a la volée et de comparer avec un hash de référence pour savoir si c'est une vrai vignette ou une vignette d'attente mais c'est vraiment lourd de coder cela sur chaque page utilisatrice et le jour ou la vignette d'attente change ...

Mon idée serait d'avoir chez toi un script capable d'avoir une info simple sur le statut d'une url (inéxistante, en préparation, existante, actualisé) afin d'automatiser les sauvegardes / mise a jour de tes vignettes et ceci vis a vis d'une date.

genre : -http://www.thumbs-online.com/status.php?url=url_du_site&date=un_timestamp

Est ce une idée conne ? un truc possible ? .... ton avis ...

 

[kooki]

Sinon pour ce qui est des autres fournisseurs qui ont pû avoir fait défaut suite à leur succès, de mon coté je proprose ce service depuis plus d'un an sans pour l'instant de probleme particulier... NB: Thumbs-Online fonctionne sur un dédié (quad core...) et diffuse des vignettes pour plusieurs dizaines de milliers VU/jour (voire centaines) , de plus j'utilise ces vignettes pour mes propres sites donc je n'ai pas spécialement intérêt à le laisser tomber... donc il n'y a pas de raison à avoir peur que le site ne fournisse pas assez rapidement les vignettes...

Zeb, suite à ta remarque effectivement j'avais deja pensé à autoriser la récupération d'images créées mais jusqu'a présent je ne l'autorisais pas !

Donc histoire de proposer quelque chose de plus par rapport à ceux qui fournissent également des thumbs et suite à ta demande, je propose donc le script que tu voulais... à savoir pour chaque type d'image désirée (9 possible), un script retourne en mode texte la taille de l'image, soit 0 si l'image n'est pas encore disponible et bien sûr dans ce cas elle est mise en attente de création... plus d'infos sur http://www.thumbs-online.com où j'ai remis tout ca à jour sur la page d'accueil du fait de tous les ajouts de ces derniers jours... par contre ce script est soumis également à licence d'utilisation...

Si le script ne convient pas, merci de m'indiquer vos souhaits et autres suggestions...

Fabrice

 

[fra_arf]

Moi ce que je ne comprends pas mais alors pas du tout, en tant que codeur, c'est pourquoi tu mets la taille à la fin de l'url ?

<img src="http://www.thumbs-online.com/view.php?url=url_du_site" width="120" height="90">

Pourquoi ne pas la passer en paramètre, c'est beaucoup plus simple je trouve.
De plus que tous les autres générateur de vignette font ça, donc c'est pas mal de suivre le mouvement.

Pour mieux comprendre, j'ai développé arfooo et le paramètre pour afficher les thumbs passe par une url classique comme ça :
http://www.thumbs-online.com/view.php?url=

Donc à la suite de ça apparait automatiquement l'url du site, donc faut que j'édit mon code pour le rendre compatible uniquement pour ton service ?

Bref faut adapter son code, enfin ce n'est que mon avis pour avoir un peu près la même logique que les autres services pour arriver à grapiller des utilisateurs.

Parce que si il faut adapter son code pour chaque service, on n'a jamais fini...

De plus tout ce qui est paramètre doit être passé en css avec une class pour la compatibilité.
Je chipote pour ça mais bon :lol:
Car je préfère une class dans mon css que width et height...

Sinon comme je l'ai déjà dit, c'est sympas

 

[kooki]

Re,

C'est vrai, dans le code html fourni j'indique de mettre largeur et hauteur mais bien evidement c'est facultatif étant donné que l'appel a view.php renvoie uniquement une image de cette taille, donc mettre la largeur et hauteur ou pas dans le tag html img ne changera rien au résultat donc je pense que ce soit un problème !

... si tu veux des images en 200x150 il faut appeler view1.php et view2.php pour du 400x300... avec dans le tag html img les valeurs de hauteur et largeur facultatives bien sûr...

fra_arf, coté simplicité je pense que l'appel à mon script est simple ? non ? on appelle view.php avec le parametre de l'url et c'est tout, en contrepartie on obtient la vignette désirée ! je ne vois pas trop quoi faire de plus pour rendre plus simple ! a moins de n'avoir pas compris ce que tu voulais dire !!!

Pareil, certains scripts d'annuaires il me semble propose l'appel à des générateurs de vignettes différents, surement parce tous ne propose pas toutes les vignettes à 100%, je rappelle que le mien propose toutes urls possible meme les internes... donc ya pas a integrer de multiples scripts ou services, si on utilise mon systeme celui-ci est censé tout fournir !

Fabrice

 

[olivier3249]

C'est très bien fait! Bravo encore! Cela change des view classiques

 

[zeb]

merci ;-)

 

[fra_arf]

ok, j'avais pas vu ce détail là, faut dire que j'ai la tête dans le c.l en c moment
Alors effectivement c'est simple à souhait et facile d'utilisation

 

[romain35]

Bonjour,

c'est très sympa cette petite fenêtre en 3d kooki et d'ailleurs je les installé sur mon site et ça rend super bien voir ici
http://www.aqua-annuaire.fr/4-annuaires.html pratiquement tout les images en 3d sont crée par contre
ce qui serai bien c'est que l'on puisse actualiser l'image à partir de votre site.

Cordialement,
romain

 

[romualb]

je les trouve un peu écrasées...

peut être qu'en réduisant la largeur...

 

[kooki]

Romain35, c'est vrai que les thumbs 3d rendent pas mal sur ton annuaire, ca rend effectivement mieux lorsque le fond est en majorité de couleur claire et que les textes sont pas trop près des thumbs, ca leur donne plus de perspective...

Pour ce qui est de l'actualisation des images, tu veux dire refaire un thumbs d'un site ? si c'est le cas il y a un formulaire sur http://www.thumbs-online.com en milieu de page qui permet de demander à effectuer une nouvelle capture d'une url (utile dans le cas ou le design d'un site aurait changé) ...

Romualb, tu dis que tu trouves que les thumbs semblent ecrasés ? c'est normal car c'est ce qui donne l'effet de perspective...
Pour le traitement de cette perspective je part de la meme image de base qui me sert pour les thumbs "vu de face", les images ne sont meme pas deformées sur le plan horizontal afin de garder le maximum de qualité, elles le sont uniquement réduites sur le plan vertical et progressivement pour donner justement l'effet 3d... donc c'est normal que l'on voit l'image s'écraser vers le "fond" de la perspective mais c'est voulu sinon il n'y aurait aucun effet 3d...

Fabrice

 

[romain35]

Merci d'avoir répondu aussi rapidement kooki, je ne regrette pas d'avoir choisi vos service.

Cordialement,
romain

 

[olivier3249]

Je les utilise aussi pour mon site, en prime tu as un lien vers ma page d'accueil et toutes les autres pages de mon site!

P.S.: comment compte tu vérifier si chaque site qui utilise tes thumbs a bien inscrit ton code html sur toutes ses pages?

 

[kooki]

Merci pour ceux qui utilisent mon service de thumbs et merci pour les respects de la licence...

Pour ce qui est de la vérification de la dite licence, je ne fais bien sûr pas cela tous les jours et sur toutes les pages de chaque site, je le fais de temps en temps et sur quelques pages en profondeur, si cela n'est pas respecté je coupe la visualisation pour le dit site en attendant que le webmaster corrige cela et ensuite je réautorise l'affichage, en cas de récidive je coupe complètement sans possibilité de réintégration (mais ce n'est jamais arrivé, si le service plait il n'y aucune raison de ne pas respecter la licence ?)

Fabrice

 

[romualb]

les images ne sont meme pas deformées sur le plan horizontal afin de garder le maximum de qualité, elles le sont uniquement réduites sur le plan vertical et progressivement pour donner justement l'effet 3d... donc c'est normal que l'on voit l'image s'écraser vers le "fond" de la perspective mais c'est voulu sinon il n'y aurait aucun effet 3d...

je suis pas d'accord. l'effet 3D est rendu par la forme parellelepipedique. le fait d'avoir des lignes de fuite qui convergent... Tu peux garder cet effet, même en réduisant en largeur.
Meintenant, c'est tout a fait subjectif...

 

[kooki]

Tout a fait d'accord avec toi, j'ai cherché un effet 3d ou plus exactement une effet de perspective et le plus rapide a faire sans trop de déformations a été de juste d'écraser légèrement l'image sur la hauteur progressivement sur la "ligne de fuite"...

Si je réduis la largeur le problème risque d'etre une déformation supplémentaire (donc qualité moindre) et j'aurais été obligé de prendre une image plus large pour qu'elle tienne au final dans le rectangle plein en 120x90...

Au final le résultat est satisfaisant je pense ! c'est clair qu'on pourrait mieux faire, mais pour moi ca reste très correct et l'effet désiré est bien là...

Fabrice

 

[mtgt]

Super, jusqu'à présent j'utilisais les preview de snapshot pour le survol des liens.
Si il pouvait y avoir un cadre blanc de 10px au moins puis une bordure autour des vignettes. cela eclaircierai le rendu. Je pinaille peut-être mais c'est un petit peu pour le design.

 

[zeb]

Super, jusqu'à présent j'utilisais les preview de snapshot pour le survol des liens.
Si il pouvait y avoir un cadre blanc de 10px au moins puis une bordure autour des vignettes. cela eclaircierai le rendu. Je pinaille peut-être mais c'est un petit peu pour le design.

Peut être pour ton intégration mais c'est pas forcement le cas de tous. de plus en css ça prend 2 seconde ce genre de truc.

 

[fra_arf]

Je viens demander, si tu as trouvé une solution pour le cadre bleu du navigateur ?
Car ce serait vraiment bien si il povuait disparaître.
Je parle bien evidemment de la barre bleu superieur.

J'ai testé rapidement et avec la barre bleu, c'est vraiment pas top, peut être jsute un avis perso, sinon j'aurais utilisé ton service.

Arf.

 

[kooki]

fra_arf, pour répondre a ta demande, je dirais qu'il me serait tres facile de supprimer la dite barre bleue étant donné que les thumbs 3d sont générés par inscrustation sur un cadre que j'ai fait et qui reprend la forme d'un navigateur, donc je peux le modifier comme je veux...

Par contre je trouve pas cette barre spécialement moche, elle fait d'ailleurs partie de tout navigateur internet et comme le but des thumbs 3d est d'etre une copie écran de navigation je trouve qu'elle à sa place !

En plus tu es le seul à t'en plaindre ?

Si cela gène d'autres personnes merci de me le signaler car les thumbs 3d sont partis pour être tous fait pareil... et actuellement il y a deja plus de 10.000 thumbs 3d (x6 formats) qui viennent d'etre créés depuis l'ouverture du service... et le rythme de création est actuellement soutenu pour suivre la demande, donc merci de me dire si la fameuse barre bleue vous gène...

Sinon fra_arf qu'est qui te gène plus exactement ? un probleme d'intégration dans ton site qui ferait que la barre bleue en haut n'aille pas visuellement ?

Fabrice

 

[takinelinfo]

Tout d'abord un grand bravo à toi. Ca fait un moment que je recherche ce genre de chose. Par contre une petite question, car je n'ai jamais reussi à trouver de code pour faire ceci, tu utilises quoi ? (php only, script cgi ???).
Voila si tu pouvais m'en dire un peu plus, car j'ai toujours cherché des infos pour mettre en place une t'elle solution et impossible de trouver quoi que ce soit.
Merci

 

[olivier3249]

Pour moi, le barre de navigation IE ne me gêne pas...

 

[kooki]

Takinelinfo, pour ce qui est la génération des thumbs je n'utilise ni php, ni cgi... et meme rien coté serveur ! je n'utilise d'ailleurs rien des quelques solutions existantes et disponible plus ou moins sur le net !

Tout est fait "maison" et en executable (exe windows) et donc cela n'est pas executé coté serveur mais tout simplement de chez moi ! d'ailleurs si j'avais pris une solution coté serveur je ne pense pas que j'aurais pu fournir des thumbs 3d aussi facilement et cela à l'avantage de pouvoir faire la différence avec la concurrence... De plus je dispose donc d'une copie de toutes les images en temps réel chez moi dont les images originales au cas où...

L'avantage aussi de ne pas faire cela coté serveur est la sécurité du dit serveur car l'execution de programme de capture d'urls ne me parait pas hyper fiable coté serveur (virus et autres problemes) et du coup pourrait rendre instable à répétition le serveur...

Ma solution peut paraitre lourde et pas pratique mais ce n'est pas le cas car depuis 1 an, plus d'un million de thumbs ont été créés (3 tailles confondues) et plus de 100 millions ont été affichés sur différents sites ! le script de génération tourne quelques minutes ou heures par jour en fonction de la demande et tout est automatique, de la capture au resize dans les différentes tailles et maintenant dans la création de la "3d", à savoir incrustation, déformation et réflection et bien sûr le transfert vers le serveur... tout en un clic donc !

Fabrice

 

[fra_arf]

A partir du moment que j'intègre une border de 1 px de couleur autre que le bleu par exemple alors c'est vraiment très génant et l'intégration est très mauvaise.

Après si tu ne mets aucune border alors ça passe déjà mieux.
Bien entendu c'est un screen d'écran mais le but est de prendre le site en photo et non le navigateur.

C'est ce que tu fais avec view.php (le navigateur n'apparaît pas) et en plus tu gagnes quelques millimètre pour l'image du site.

Après c'est ton service, tu fais comme bon te semble

Cordialement,
Arf.

 

[kooki]

fra_arf je viens de faire un test avec 2 autres types de visualisation, a savoir 1 avec un cadre de 1 pixel délimitant la capture et 1 autre sans cadre du tout...
Le test est visible là :
http://www.thumbs-online.com/test.htm

Lequel alors rend le mieux d'apres les 3 exemples ?

Mon avis :
Le 1er rend le mieux des 3 !
Le 2eme peut encore aller bien que l'effet de perspective ne saute pas vraiment aux yeux, quant au dernier, celui sans cadre, c'est pas terrible, on voit plus vraiment l'effet 3d...

A vous de me dire...

Fabrice

 

[olivier3249]

C'est vraiment mieux sans le navigateur en fait.
J'ai une petite préférence pour le rang 2!

 

[fra_arf]

Sans hésiter je vote pour le 2.
C'est vraiment plus class sans la barre du navigateur.
Merci pour le test, c'est vraiment sympas

Je te ferais une news sur arfooo pour les utilisateurs, comme le service est pas mal du tout
En esperant qu'il ne meurt pas comme bcp d'autres :?

Par contre pour celui sans cadre, c'est vraiment pas terrible...

 

[Vertigen]

Les thumbs 3D sont trés réussis en effet, mais au rang des petites améliorations peut être faisables j'ajouterais le choix de la couleur de fond.

le coin blanc en bas a droite qui donne l'effet de 3D convient bien aux sites à fond blanc également, mais pour les autres c'est un peu moins joli.