<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>Le petit blog de Mat &#187; interface</title>
	<atom:link href="http://blog.bellet.com/tag/interface/feed/" rel="self" type="application/rss+xml" />
	<link>http://blog.bellet.com</link>
	<description>Quelques nouvelles de mon (petit) front !</description>
	<lastBuildDate>Fri, 03 Sep 2010 04:40:56 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.0.1</generator>
		<item>
		<title>Google Browser Size</title>
		<link>http://blog.bellet.com/2010/02/06/google-browser-size/</link>
		<comments>http://blog.bellet.com/2010/02/06/google-browser-size/#comments</comments>
		<pubDate>Sat, 06 Feb 2010 09:37:28 +0000</pubDate>
		<dc:creator>Mat</dc:creator>
				<category><![CDATA[Geek]]></category>
		<category><![CDATA[browser size]]></category>
		<category><![CDATA[conception]]></category>
		<category><![CDATA[découverte]]></category>
		<category><![CDATA[écran]]></category>
		<category><![CDATA[Google]]></category>
		<category><![CDATA[google labs]]></category>
		<category><![CDATA[html]]></category>
		<category><![CDATA[interface]]></category>
		<category><![CDATA[truc]]></category>
		<category><![CDATA[utilitaires]]></category>
		<category><![CDATA[web]]></category>
		<category><![CDATA[webmaster]]></category>

		<guid isPermaLink="false">http://blog.bellet.com/?p=1336</guid>
		<description><![CDATA[Les Google Labs sont un trésor permanent. On y trouve vraiment toutes sortes d&#8217;applications que Google a plus ou moins mis en avant. Certains sont des extensions d&#8217;applications connues comme Gmail ou GCal, d&#8217;autres sont plus spécifiques. C&#8217;est le cas de Browser Size, qui s&#8217;adresse plutôt aux concepteurs de sites web. Une fois sur le [...]]]></description>
			<content:encoded><![CDATA[<p><img class="alignleft size-full wp-image-1337" title="glab-icone" src="http://blog.bellet.com/wp-content/uploads/2010/02/glab-icone.png" alt="" width="120" height="90" />Les <a href="http://blog.bellet.com/tag/google/" class="st_tag internal_tag" rel="tag" title="Posts tagged with Google">Google</a> Labs sont un trésor permanent. On y trouve vraiment toutes sortes d&#8217;applications que <a href="http://blog.bellet.com/tag/google/" class="st_tag internal_tag" rel="tag" title="Posts tagged with Google">Google</a> a plus ou moins mis en avant.<br />
Certains sont des extensions d&#8217;applications connues comme <a href="http://mail.google.com/mail/" target="_blank">Gmail</a> ou <a href="http://www.google.com/calendar/" target="_blank">GCal</a>, d&#8217;autres sont plus spécifiques.</p>
<p>C&#8217;est le cas de <a href="http://browsersize.googlelabs.com" target="_blank">Browser Size</a>, qui s&#8217;adresse plutôt aux concepteurs de sites <a href="http://blog.bellet.com/tag/web/" class="st_tag internal_tag" rel="tag" title="Posts tagged with web">web</a>.</p>
<p><span id="more-1336"></span>Une fois sur le site, vous rentrez l&#8217;URL du site qui vous intéresse et il s&#8217;affiche en dessous d&#8217;un calque indiquant les tailles d&#8217;écran de navigateurs. C&#8217;est là que c&#8217;est très intéressant parce qu&#8217;il ne s&#8217;agit pas de la taille des écrans mais <strong>effectivement de la taille utilisée par les navigateurs pour vraiment visualiser une page</strong> (en laissant les menus de l&#8217;interface OK et du navigateur, les barres d&#8217;icones, etc.).</p>
<p>Le système indique le <strong>pourcentages de la population</strong> disposant de ces différentes tailles (en fait de la population connue par <a href="http://blog.bellet.com/tag/google/" class="st_tag internal_tag" rel="tag" title="Posts tagged with Google">Google</a> via ce qu&#8217;il récolte sur elle depuis son moteur de recherche).<br />
Au passage, ceci est encore un exemple des tonnes d&#8217;informations que <a href="http://blog.bellet.com/tag/google/" class="st_tag internal_tag" rel="tag" title="Posts tagged with Google">Google</a> récolte lorsqu&#8217;on utilise ses services gratuits et qu&#8217;il est susceptible d&#8217;utiliser, ou de vendre.</p>
<p>Il est possible de régler l&#8217;opacité et de naviguer sur le site à travers cette interface pour cible une page ou un bouton particulier.</p>
<p>&gt; <a href="http://browsersize.googlelabs.com" target="_blank">http://browsersize.googlelabs.com</a></p>
<p style="text-align: center;"><a href="http://blog.bellet.com/wp-content/uploads/2010/02/browsersize.png"><img class="size-medium wp-image-1339 aligncenter" title="browsersize" src="http://blog.bellet.com/wp-content/uploads/2010/02/browsersize-300x233.png" alt="" width="300" height="233" /></a></p>
<div class="fblike_button" style="margin: 10px 0;"><iframe src="http://www.facebook.com/plugins/like.php?href=http%3A%2F%2Fblog.bellet.com%2F2010%2F02%2F06%2Fgoogle-browser-size%2F&amp;layout=button_count&amp;show_faces=false&amp;width=450&amp;action=like&amp;colorscheme=light" scrolling="no" frameborder="0" allowTransparency="true" style="border:none; overflow:hidden; width:450px; height:25px"></iframe></div>
]]></content:encoded>
			<wfw:commentRss>http://blog.bellet.com/2010/02/06/google-browser-size/feed/</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
		<item>
		<title>Voir un site sur son PDA</title>
		<link>http://blog.bellet.com/2009/06/01/voir-sur-iphon/</link>
		<comments>http://blog.bellet.com/2009/06/01/voir-sur-iphon/#comments</comments>
		<pubDate>Mon, 01 Jun 2009 17:23:50 +0000</pubDate>
		<dc:creator>Mat</dc:creator>
				<category><![CDATA[Geek]]></category>
		<category><![CDATA[ipod-iphone]]></category>
		<category><![CDATA[blackberry]]></category>
		<category><![CDATA[écran]]></category>
		<category><![CDATA[ergonomie]]></category>
		<category><![CDATA[extension]]></category>
		<category><![CDATA[interface]]></category>
		<category><![CDATA[iphone-ipod]]></category>
		<category><![CDATA[PDA]]></category>
		<category><![CDATA[smartphones]]></category>
		<category><![CDATA[thumbnail]]></category>
		<category><![CDATA[WordPress]]></category>

		<guid isPermaLink="false">http://blog.bellet.com/?p=839</guid>
		<description><![CDATA[Les écrans d&#8217;ordinateurs sont de plus en plus grands, et les interfaces de sites web ont suivi cette tendance. Il est loin le temps où l&#8217;une des obligations d&#8217;un cahier des charges pour un site web était qu&#8217;il devait &#171;&#160;tenir&#160;&#187; dans une interface de 640 x 512 pixels, barre de navigation du navigateur comprise ! [...]]]></description>
			<content:encoded><![CDATA[<p><a class="flickr-image alignright" title="Wordpress PDA &amp; iPhone 1" rel="flickr-mgr" href="http://www.flickr.com/photos/mbellet/3545124366/" target="_blank"><img class="flickr-original" longdesc="http://farm4.static.flickr.com/3417/3545124366_7d398a21b5_o.jpg" src="http://farm4.static.flickr.com/3417/3545124366_6ef63414f8_t.jpg" alt="Wordpress PDA &amp; iPhone 1" /></a>Les écrans d&#8217;ordinateurs sont de plus en plus grands, et les interfaces de sites <a href="http://blog.bellet.com/tag/web/" class="st_tag internal_tag" rel="tag" title="Posts tagged with web">web</a> ont suivi cette tendance. Il est loin le temps où l&#8217;une des obligations d&#8217;un cahier des charges pour un site <a href="http://blog.bellet.com/tag/web/" class="st_tag internal_tag" rel="tag" title="Posts tagged with web">web</a> était qu&#8217;il devait &laquo;&nbsp;tenir&nbsp;&raquo; dans une interface de 640 x 512 pixels, barre de navigation du navigateur comprise !</p>
<p>Aujourd&#8217;hui la mise en page des sites est beaucoup plus complexe, et prend beaucoup plus de place. Et le rendu sur un écran de taille maintenant &laquo;&nbsp;standard&nbsp;&raquo; de <strong>17, voire 20 pouces</strong> n&#8217;est forcément pas le même que sur un <strong>écran de Blackberry ou d&#8217;iphone</strong>.</p>
<p><span id="more-839"></span></p>
<p>Heureusement le petit monde de WordPress propose une réponse en l&#8217;extension &laquo;&nbsp;<strong><em>WordPress PDA &amp; iPhone</em></strong>&laquo;&nbsp;, de <a href="http://imthi.com/wp-pda" target="_blank">Imthiaz Rafiq</a>.<br />
Grâce à celle-ci, la mise en page est automatiquement adaptée au &laquo;&nbsp;<em>device</em>&nbsp;&raquo; utilisé pour la viste : je vous laisse apprécier les écrans ci-dessous, testés sur mon ipod, mais j&#8217;ai également testé avec un Blackberry et ça fonctionne également en prenant en compte les caractéristiques de chaque petite machine.</p>
<p>Cliquez ci-dessous pour agrandir les quelques photos d&#8217;écran permettant de comparer quelques pages selon qu&#8217;elles sont &laquo;&nbsp;lues&nbsp;&raquo; par telle ou telle machine&#8230; Les pages et les écrans sont reformatées en laissant de côté les barres de navigation et les colonnes de widgets et autres fonctions annexes (commentaires, etc.), et des boutons &laquo;&nbsp;iphone&nbsp;&raquo; sont ajoutés pour naviguer en haut de l&#8217;écran.</p>
<p>[flickrset id="72157618509411968" thumbnail="square" overlay="true" size="original"]</p>
<p>Avec le succès grandissant de l&#8217;iphone et des autres smartphones qui s&#8217;en inspirent, on peut sans hésitation prévoir que de plus en plus de sites prendront en compte cet aspect.
<div class="fblike_button" style="margin: 10px 0;"><iframe src="http://www.facebook.com/plugins/like.php?href=http%3A%2F%2Fblog.bellet.com%2F2009%2F06%2F01%2Fvoir-sur-iphon%2F&amp;layout=button_count&amp;show_faces=false&amp;width=450&amp;action=like&amp;colorscheme=light" scrolling="no" frameborder="0" allowTransparency="true" style="border:none; overflow:hidden; width:450px; height:25px"></iframe></div>
]]></content:encoded>
			<wfw:commentRss>http://blog.bellet.com/2009/06/01/voir-sur-iphon/feed/</wfw:commentRss>
		<slash:comments>2</slash:comments>
		</item>
	</channel>
</rss>
