Suivez le fil RSS
 

Le DVD vidéo de Florent V. pour apprendre XHTML et CSS

Elephorm apprendre XHTML et CSS
Auteur
Akhilleus
# 27 Jun 2009 - 21:09:27
Citer
278 Posts
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)

http://andreloconte.com 
^
SatoshiTajiri
# 28 Jun 2009 - 05:35:20
Citer
3 Posts
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)

^
marcv
# 28 Jun 2009 - 08:27:43
Citer
599 Posts
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.

^
Felipe
# 28 Jun 2009 - 09:24:30
Citer
Administrateur
5767 Posts
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)

^
Akhilleus
# 28 Jun 2009 - 09:50:08
Citer
278 Posts
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 ?" 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 smile
Modifié par Akhilleus (22 Jul 2010 - 22:49)

http://andreloconte.com 
^
marcv
# 28 Jun 2009 - 10:27:56
Citer
599 Posts
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;
// 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)

^
pastazere
# 28 Jun 2009 - 11:26:22
Citer
87 Posts
Merci bien Akhilleus

Mine de rien tu réponds à une question que j'ai posée il y a 4 ans presque jour pour jour http://forum.alsacreations.com/topic.php?fid=1&tid=4857&s=

L'informatique, ça fait gagner beaucoup de temps... à condition d'en avoir beaucoup devant soi !

^
largowin
# 28 Jun 2009 - 17:24:14
Citer
350 Posts
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/

Écoutez Thérèse, je n'aime pas dire du mal des gens, mais effectivement, elle est gentille.

^
marcv
# 28 Jun 2009 - 17:31:09
Citer
599 Posts
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)
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".

^
DDClarke
# 28 Jun 2009 - 17:58:09
Citer
2 Posts
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!

http://viewlike.us msn 
^
marcv
# 28 Jun 2009 - 18:38:19
Citer
599 Posts
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 smile
Modifié par marcv (28 Jun 2009 - 18:38)

^
DDClarke
# 28 Jun 2009 - 18:43:14
Citer
2 Posts
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 langue '! I'm in England, so I should really Learn French! Infact, I'll make that a promise cligne

http://viewlike.us msn 
^
largowin
# 28 Jun 2009 - 21:24:04
Citer
350 Posts
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.

Écoutez Thérèse, je n'aime pas dire du mal des gens, mais effectivement, elle est gentille.

^
Akhilleus
# 28 Jun 2009 - 22:51:55
Citer
278 Posts
Here comes the translation 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 cligne
Modifié par Akhilleus (29 Jun 2009 - 01:20)

http://andreloconte.com 
^
Akhilleus
# 28 Jun 2009 - 23:03:08
Citer
278 Posts
@largowin : l'extension "Web Developer ToolBar" pour Firefox fait - entre autre - ça très bien cligne

Screenshot : http://omicronlab.net/upload/upic-0071935001246222567.png

(nota : je me permets un double post car j'ai donné un lien vers la traduction à DDClarke)
Modifié par Akhilleus (28 Jun 2009 - 23:09)

http://andreloconte.com 
^
Skoua
# 29 Jun 2009 - 13:52:15
Citer
Ô Roméo mon Roméo
226 Posts
Plutôt pratique.

Dans le genre, il y a l'extension FireSizer pour Firefox que j'utilise beaucoup :
FireSizer

http://www.kelvindesigns.com/ 
^
Felipe
# 29 Jun 2009 - 19:40:03
Citer
Administrateur
5767 Posts
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: they both allow you to
insert an HTML document in the middle of another
, they may both be
aligned with surrounding text, etc.


edit: oops, long line in a pre element
edit2: still too long biggol
Modifié par Felipe (29 Jun 2009 - 19:41)

^
Raphael
# 30 Jun 2009 - 18:08:10
Citer
twitter.com/goetter
Administrateur
11635 Posts
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. ohwell
Modifié par Raphael (30 Jun 2009 - 18:08)

Le saviez-vous ? Alsacréations propose dorénavant des formations web (XHTML/CSS, accessibilité, Flash, jQuery).

http://www.goetter.fr 
^
Powered by Phedio v3.8.7 beta in 12 ms © dew