Speed dial

Bonjour à tous,

Je suis actuellement en train d'essayer de créer un speed dial (comme les navigateurs proposent maintenant sur leur page new tab) en HTML et CSS seulement. J'ai donc pour cela utilisé la balise object qui permet d'intégrer une autre page web. Et c'est là que mon problème se pose : Le site visé est bien intégré à ma page, mais on ne voit que la partie haut-gauche de celui-ci. Et je n'ai trouvé aucune solution pour avoir une vue d'ensemble sur la page intégré. J'ai cherché au niveau du zoom, des différents attributs que la balise object peut prendre en paramètre. Mais je n'ai pas trouvé mon bonheur. J'ai bien essayé avec la balise iframe aussi, mais cela n'a rien donné de mieux.

C'est pourquoi j'aimerai savoir si vous connaissiez un moyen de créer une vue d'ensemble (une miniature ?) d'un site externe en html.

Merci d'avance pour votre aide, ShiiFu.

Tu pourrais faire des objects de la taille de l'écran et les réduire en css par la suite. Bon, j'ai jamais fait ça hein ^^. Tu me dira de que ça donne.

Je ne vois pas comment mettre la balise object de la taille de l'écran sans CSS pour pouvoir la changer en CSS ensuite. A moins que je n'ai pas compris ton explication ?

Cette API semble intéressante pour afficher un snapshot, et correspond à ce que tu souhaites : https://www.url2png.com/, tu peux l'utiliser directement en javascript (ou si tu mets l'url en claire ça doit fonctionner) d'après ce que j'ai lu.

EDIT : Exclusivement en php, il protège la génération.

Cependant c'est possible d'avoir une indication plus claire sur tes attentes ? Tu souhaites un simple snapshot du site ?

Je pensais à un truc comme ça.

Déjà tu peux oublier la balise object qui est plutôt faite pour intégrer des choses nécessitant un plugin (animations Flash, applets Java…). Tu auras le même résultat plus simplement avec une iframe.

Ensuite le contenu affiché sera le site avec son CSS, donc si un site n'est pas responsive par défaut il ne s'adaptera pas à son parent (ici l'iframe, plutôt que la fenêtre).

La solution reste d'afficher une simple image en utilisant un générateur d'aperçus comme le suggère A-312. Il existe des APIs pour faire ça (souvent limitées ou payantes), sinon il faudra installer un programme sur ton propre serveur pour l'utiliser comme générateur…

Merci à vous tous pour vos suggestions

A la base c'est un exercice où je devais faire ça seulement en HTML et en CSS. Ce qui permet simplement d'intégré une page web sans avoir une vue globale du site. (pas comme les speed dial des navigateur du coup) Mais pour aller plus loin, j'ai commencé à essayer vos différentes solutions qui permettent d'avoir une vue globalisé du site ciblé. (Et là du coup ça serait comme les speed dial des navigateurs).

Une petite lumière pour mes connaissances très maigres : les programme à installer sur son propre serveur sont souvent des script python, pearl ou autre que l'on retrouve souvent que les serveurs dédié web ? Je vous avouerais n'avoir jamais touché un serveur dédié

Il y a des chances pour que tu doives passer par un dédié si tu utilises ton propre script oui. Ou un VPS éventuellement.

Sinon tu peux toujours tenter une technique de sioux : définir tes iframes comme faisant la taille de ta fenêtre (pour que le site affiché aie les bonnes dimensions quoi qu'il arrive) puis appliquer un CSS du style transform: scale(.2) pour les rétrécir sans les déformer. Pas sûr que ça fonctionne mais ça se tente.

Par contre attention avec cette technique : ça chargera l'ensemble de la page pour chaque vignette chez le client, ça risque vite de devenir lourd contrairement à de simple images…

Oki, merci de l'information pour le dédié.

C'est sûr que ça met du temps à charger. Rien que 6 sites mettent 5 à 10 secondes pour se charger entièrement. Je vais essayer la solution du transform scale, après avoir changé mes object en iframe.

Je partage l'inquiétude de viki53. La solution du transform: scale(.2); risque d'être lourde selon le nombre et le type d'élément sur la page web, le navigateur, et le nombre de site que tu affiches, ça risque de tirer sur le CPU.

Pour éviter toute latence, je te conseille de mettre un "overlay" (masque) sur chaque iframe pour éviter d’exécuter des events hover/mousemove.

Surtout que certain site bloque l'iframe (comme Google).

Sinon tu as d'autres sites qui fonctionnent avec l'url direct (sans php donc) : page2images, ajaxsnapshots