5160 sujets

Le Bar du forum

Viewlike.us : votre site dans toutes les résolutions d'écran

Bien le bonjour, je viens de tomber sur un site qui va sans nul doute se révéler utile à bon nombre d'entre vous.

http://viewlike.us

Je vous laisse découvrir son fonctionnement (easy as 1, 2, 3).

"View like us" (littéralement "voyez comme nous") permet d'émuler différentes résolutions d'écran.
Rien d'original a priori, l'option "resize" de la Web Developer ToolBar par exemple s'en acquitte très bien. Pour les résolution plus petite que votre résolution courante, sans conteste; il n'en est pas de même pour les résolutions plus grande.

Je me permets donc de partager avec vous cet outil qui a priori trouvera facilement une place dans la liste de vos/mes liens utiles.

Edit : j'ai réalisé un bookmarklet qui permet de soumettre facilement un lien sur viewlike.us
Modifié par Akhilleus (28 Jun 2009 - 23:11)
Sympa le lien. Je l'ai mis en favoris il me sera peut-être utile un de ces jours.
Modifié par SatoshiTajiri (28 Jun 2009 - 05:35)
Salut,

Effectivement, c'est tout con mais certainement utile. Ça fera une bonne réponse à ceux qui viennent demander ici comment tester leur site sur de grosses résolutions.
Administrateur
Bonjour,

excellente idée que voilà !

Question: avec un bookmarklet que pourrait-on reproduire comme fonctionnalité ?

EDIT: mon clavier begaie
Modifié par Felipe (29 Jun 2009 - 19:15)
Felipe a écrit :
avec un bookmarklet que pourrait-on pourrait reproduire comme fonctionnalité ?

Si ta question est "pourrait-on reproduire la même chose avec un bookmarklet ?" Smiley smile , je ne pense pas.

Par contre on peut facilement soumettre un lien sélectionné grâce à un bookmarklet puisqu'ils utilisent une méthode GET : http://viewlike.us/?url=http://alsacreations.com

Par exemple (fait en vitesse, testé sous MF 3.5) :
javascript:q%20=%20""%20+%20(window.getSelection%20?%20window.getSelection()%20:%20document.getSelection%20?%20document.getSelection()%20:%20document.selection.createRange().text);%20if%20(!q)%20q%20=%20prompt("You%20didn't%20select%20any%20link.%20%20Enter%20a%20a%20link:",%20"");%20if%20(q!=null)%20location="http://viewlike.us/?url="%20+%20escape(q).replace(/%20/g,%20"+");%20void%200

SI un texte est sélectionné
|- il est soumis à la variable (GET)url de viewlike.us
SINON, une boîte de dialogue permet de saisir un lien
|- SI un lien est saisi
   |- il est soumis à la variable (GET)url de viewlike.us
   SINON
   |- redirection simple vers viewlike.us

Edit @Felipe : à y regarder de plus près, il s'agirait simplement d'une iframe redimensionnée dynamiquement en JS, ce serait donc faisable.

Edit @marcv : pas de souci, je me suis laissé abuser par leur présentation "nous utilisons PHP et ajax [..]", je me suis imaginé du "curl" etc. alors qu'il n'en est rien Smiley smile
Modifié par Akhilleus (22 Jul 2010 - 22:49)
a écrit :
Si ta question est "pourrait-on reproduire la même chose avec un bookmarklet ?", je ne pense pas. Leur script utilise PHP pour récupérer la page et ses CSS, je ne pense pas que ce soit faisable en Javascript.
var i = document.createElement('iframe');
var url = location.href;
[#gray]// url 'no cache'[/#]
i.src = url
	+ (url.indexOf('?') != -1 ? '&' : '?')
	+ 't=' + (new Date).getTime();
i.width = 200;
i.height = 200;
document.body.appendChild(i);
Bon c'est qu'une ébauche, mais c'est juste pour montrer que c'est carrément faisable.

a écrit :
Par contre on peut facilement soumettre un lien sélectionné grâce à un bookmarklet puisqu'ils utilisent une méthode GET
Ça m'a quand même l'air d'être ça la solution la plus commode.

Edit : dsl, pas vu ton edit, j'étais en train de comprendre pourquoi les iframes chargeaient pas le doc ('coz of the cache)
Modifié par marcv (28 Jun 2009 - 10:30)
Super, merci.

J'utilise à l'occasion (quand je l'ai sous la main) cette ligne javascript javascript:void(window.resizeTo(800,600)) à mettre dans la barre d'adresse mais le problème justement, c'est qu'on ne peut pas en faire un signet.

Il y a aussi ce site que j'utilise lorsque je n'ai pas la ligne de commande sous la main: http://setmy.browsersize.com/
a écrit :
J'utilise à l'occasion (quand je l'ai sous la main) cette ligne javascript javascript:void(window.resizeTo(800,600))
Ça suffit avec :
javascript:window.resizeTo(800, 600)
Smiley smile
a écrit :
mais le problème justement, c'est qu'on ne peut pas en faire un signet
Crée un signet bidon, ouvre ses propriétés et colle la ligne javascript dans le champ "adresse".
I'm very sorry that I know no French! Hopfully one of you fine people will be able to translate this for me. Thank you for visiting the site first of all, It's a small pet project I've been working on. The main reason it uses iFrames is because unlike some methods such as javascript:window.resizeTo the web designer can see what the site would look like on pages LARGER than the users actual browser. (Thanks to scrollbars)

Akhilleus, would you mind if I put that peice of javascript on the site? It's very handy!
a écrit :
I'm very sorry that I know no French
Google can help.
a écrit :
The main reason it uses iFrames is because...
We completely agree with your decision of using iframes. It makes your site much more useful than simply resizing the browser window.

Thanks for a nice tool. Keep up the good work Smiley smile
Modifié par marcv (28 Jun 2009 - 18:38)
Yes Google can help! Although it's not very good at times, and I don't want to end up it translating something like 'Thanks' to 'Shut up Smiley langue '! I'm in England, so I should really Learn French! Infact, I'll make that a promise Smiley cligne
marcv a écrit :
Crée un signet bidon, ouvre ses propriétés et colle la ligne javascript dans le champ "adresse".


Ah merci, je n'avais je n'avais jamais pensé à cela.. Je viens de me faire un dossier de signets avec différentes résolutions.
Here comes the translation Smiley cligne

Akhilleus a écrit :
Hi there ! I just found a website that will - without a doubt - be usefull to most of you.

http://viewlike.us

I leave you find out how it works, it's just easy as 1, 2, 3.

"View like us" ([french translation]) allow you to emulate different kind of screen resolutions.
Even if it seems like there's nothing new, the "resize" option from the "Web Developer ToolBar" for instance can get rid of it easy way, there is. The main issue is that the "Web Developer ToolBar" only allows you to switch to smaller viewports; thanks to "Viewlike.us" you can chose bigger ones.

That's the reason why I take the liberty of sharing this tool with you. At first, it could easily get a place into your/mine "useful links" list

Edit : I've just created a bookmarklet that allow you to submit a link on viewlike.us

And here comes the bookmarklet :
javascript:q%20=%20""%20+%20(window.getSelection%20?%20window.getSelection()%20:%20document.getSelection%20?%20document.getSelection()%20:%20document.selection.createRange().text);%20if%20(!q)%20q%20=%20prompt("You%20didn't%20select%20any%20link.%20%20Enter%20a%20a%20link:",%20"");%20if%20(q!=null)%20location="http://viewlike.us/?url="%20+%20escape(q).replace(/%20/g,%20"+");%20void%200

DDClarke a écrit :
Akhilleus, would you mind if I put that peice of javascript on the site? It's very handy!

Feel free to share it Smiley cligne
Modifié par Akhilleus (29 Jun 2009 - 01:20)
Administrateur
Testing lower resolutions is fine with the WDT for Firefox but for other browsers I used reSizer. Being a Windows program, it works with any browser (IE6, 7, 8, Opera 6 to 10, Safari 3 and 4, Chrome, whatever).

I now use a dual-screen so I can mimick a 2560x1024 resolution (with a huuuge bar in the middle!) but still, viewlike.us is a nice idea if I am not at our office for any reason: demo on a beamer (is it a US-only word ?), sending a link to a client, etc

@DDClarke
It seems to me that using iframes was the best choice. According to the spec (i)frames
The IFRAME element allows authors to insert a frame within a block
of text. Inserting an inline frame within a section of text is much like
inserting an object via the OBJECT element: [b]they both allow you to
insert an HTML document in the middle of another[/b], they may both be
aligned with surrounding text, etc.


edit: oops, long line in a pre element
edit2: still too long Smiley biggol
Modifié par Felipe (29 Jun 2009 - 19:41)
Administrateur
Pour les grandes résolutions, c'est sympa.

Par contre les boutons "iphone" et "wii browser" sont trompeurs : il s'agit simplement d'un redimensionnement et en aucun cas d'une émulation. Smiley ohwell
Modifié par Raphael (30 Jun 2009 - 18:08)
Sujet clos
Aller à