11497 sujets

JavaScript, DOM et API Web HTML5

Bonjour tout le mode,

Je suis en plein dans un développement assez conséquent et ce projet inclus une partie de récupération de contenu d'article web.

Je vous explique :
Sur ce site la : https://contently.com/ des journalistes se créent un profil où il ont un Wall où ils rajoutent les articles qu'ils ont écrits. Au moment de ce rajout, contently ajoute une miniature de la photo de l'article. c'est ce dernier point qui m'intéresse.

Savez vous comment cela est possible ? Ou bien tout simplement comment appelleriez vous cette technique ? (J'ai du mal à orienter mes recherches sur le net, sans mots clés ^^), certain d'entre vous on déjà utilisé/développer des plugin ou script se rapprochant de cela ? Les images sont uniquement des liens ? Ou avons nous besoin de DL les images pour les afficher de notre côté ?

Enfin voilà comme vous le voyez j'ai beaucoup d'inconnues ! L'idée pour moi c'est d'avoir des pistes pour avancer...

PS: le JS est presque une contrainte obligatoire pour X raisons ^^

Merci à vous =)
Salut,
tu peux faire ca en php.
Tu cherche php et miniature ou thumbnail et tu devrais trouver pas mal de script.

En gros le principe tu as une image source puis tu en crée une miniature au dimension que tu veux ( ensuite à toi de voir si tu veux garder la proportion de l'image ou si tu veux les déformer pour qu'elles soient toute a la même taille ( sinon y a des moyens de coupé des bouts je crois aussi pour avoir la même taille mais bon c'est pas forcement très jolie non plus ^^ )

Voila j’espère que cela t'aidera ( après j'ai pas trop saisi comment tu récupère l'image source donc bon je t'aide pas plus que ça ^^ )
Exact tu ne m'aide pas beaucoup mais tu confirme ce que je pense déjà savoir (et c'est déjà pas mal =p).

Je cherche un moyen en javascript (mon supérieur veux du JS ^^) Je pense qu'il va falloir qu'on creuse sévèrement ^^

Niveau proportion, la hauteur pourra variée sans problème donc juste réduire la largeur des images en gardant les proportions =)
Modérateur
Bonjour,

Ce n'est pas de l'upload d'image mais de l'aspiration d'image sur un site. Je ne connais pas de script "ready to go" pour effectuer cela mais le principe est simple à expliquer, et complexe à mettre en place.

1 – Grâce à l'url fournie d'une page, on récupère cette page en html.
2 – On analyse la page pour trouver la «bonne» image. (c'est là que ça se complique).
3 – Soit on télécharge, redimensionne/recadre, et stocke cette image pour des requêtes futures, soit on ne stocke que l'URL de l'image. Dans tous les cas on stocke quelque chose, le point 2 pouvant être assez lourd.

Pour trouver l'image dans la page, il existe des méthodes:

– Facebook a mis au point un protocole (basé sur le RDF) pour indiquer des métadonnées et notamment la ou les images principales d'une page, il s'agit d'ajouter la balise suivante dans le head:
<meta property="og:image" content="IMAGE_URL" />

ou
<meta property="http://ogp.me/ns#image" content="IMAGE_URL" />

Pour plus de précisions: Le protocole Open Graph Protocol. C'est une pratique assez répandue.

– Il existe d'autre méthodes pour indiquer cela dans une page, par exemple les Twitter cards:
<meta name="twitter:image" content="IMAGE_URL"/>


– Si les précédentes méthodes ne donne rien, il s'agit de trouver la balise <img> la plus relevante dans la page. Comme cela n'est pas forcément simple, ont peut aussi toutes les récupérer et proposer à l'utilisateur de choisir.

Au final, vu que l'on parse une page externe et l'analyse, ce ne sera pas possible en javascript, à cause des limitations d'origine, mais de plus effectuer cette opération à la volée serait plutôt lourd. Par contre on peut laisser le serveur mouliner avec une couche d'ajax par dessus.
Modifié par kustolovic (17 Dec 2013 - 14:02)
J'au eu une petit urgence je n'est pas pu répondre immédiatement...

Sympa ce système, mais est t'il utilisé sur les sites ? Car en gros si je comprend bien, je me fait (ou trouve) un script capable de lire/reconnaître les balises qui m'intéresse, l'a récupérer, stocker (uniquement l'URL car comme tu dit, ça sera vite lourd ^^), et le tour est joué ?

Par exemple si le membre entre l'adresse de l'article suivant : http://www.theverge.com/2013/12/16/5216522/can-humans-love-computers-sex-robots-her-spike-jonze

Si The Verge utilise ce système, je pourrais retrouver facilement l'image puis la traiter pour l'afficher ? Je trouve ça trop facile ahah je me trompe ? Smiley ohwell
Modifié par lucas73 (17 Dec 2013 - 16:58)
oki je pense que je comprends un peu mieux.
En gros, tu propose un genre de formulaire, un gars va mettre un lien vers une page d'un article, valider , et toi tu va chercher a absorber le contenu de cet article et mettre en avant l'image principale. C'est bien ça ?
(Je suppose que non parce que j'arrive pas trop a piger comment ça peut être fais en javascript :x )

Personnellement j'imaginerai bien une solution en php ( ouais je sais je suis chiant, mais en javascript je vois pas comment tu pourrai avoir accès au code source d'une page différente que la page en cours ... ( a la limite en magouillant avec l'ajout d'une iframe caché quand le mec valide l'url de l'article, mais ça reste que c'est du traitement coté serveur pour prendre le code source de la page de l'article ^^ ).En gros le script php va recuperer le code source de la page entrer dans ton formulaire, et ensuite tu dois pouvoir faire une expression régulière qui va chercher toutes les balises "<img ....>" dans ce code source.

Pour la détection automatique de l'image "principale" ça me semble plus difficile et j'ai pas trop d'idée ... Tu peux peut etre faire avec les dimension d'affichage de l'image : elle sera certainement de taille plus importante ( mais est ce que c'est forcement le cas ? Pas sur ... )
Sinon ce que tu peux faire (vu que ça a l'air d’être un peu collaboratif), ça sera de montrer toutes les images trouver par l'expression régulière, et de demander au gars de cliquer sur l'image qu'il veut faire afficher en miniature pour l'article. ( et éventuellement une case pour dire aucune de ces images si pour une raison x ou y l'expression régulière à échoué)

Voila j’espère que cela t'aidera un peu plus Smiley smile
Modérateur
lucas73 a écrit :

Sympa ce système, mais est t'il utilisé sur les sites ? Car en gros si je comprend bien, je me fait (ou trouve) un script capable de lire/reconnaître les balises qui m'intéresse, l'a récupérer, stocker (uniquement l'URL car comme tu dit, ça sera vite lourd ^^), et le tour est joué ?

Presque, ce système est actuellement très utilisé, particulièrement sur les sites d'infos/news destinés à cela. Par contre ce n'est pas un absolu, ce genre de balises peuvent être absentes. Il faut donc avoir une solution sans et là c'est bien plus complexe. Récupérer les tailles d'image et choisir la plus grande peut fonctionner, mais il reste pas mal d'erreurs.

lucas73 a écrit :
Par exemple si le membre entre l'adresse de l'article suivant : http://www.theverge.com/2013/12/16/5216522/can-humans-love-computers-sex-robots-her-spike-jonze

Dans cet exemple il y a la balise suivante:
<meta property="og:image" content="http://cdn1.sbnation.com/entry_photo_images/9571879/Screen_Shot_2013-12-16_at_3.25.58_PM_large_verge_super_wide.png" />
Tout d'abord merci à tout les deux, le schmilblik avance ^^

mathieu1004 :

Alors oui effectivement je pensais en javascript, et effectivement je ne sait pas pourquoi j'ai cru pouvoir le faire exclusivement en javascript... Je pense que l'idéal serais de pouvoir leurs proposer une set d'images pour qui sélectionne la meilleurs (pour eux^^) et si les images récupérer ne conviennent pas, et bien leur laisser le choix. Soit uploader leur propre image, soit pas d'image. Cela me paraît une solution convenable et ayant un bon équilibre entre la complexité de dev et le service pour l'user Smiley cligne

kustolovic :

D'accord, je pense que je vais voir cela comme ça :

Utiliser ce système couplé à un qui récupère les images les plus grande, en gros si le 1er système ne trouve pas de balise alors on bascule sur le système par taille d'image... Avoir si le script ne sera pas trop complexe et long à développer ^^ Car avant j'ai tout le système d'agrégation des donnée des profils de mes menbres à développer... autant dire que c'est à base de connexion script intégré dans wordpress, de connexions BDD multiples...Il va falloir que je révise mon PHP à fond...

Merci en tout cas vous m'éclairez énormément ! Smiley lol