<?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>WebMess &#187; macbook</title>
	<atom:link href="http://www.webmess.it/tag/macbook/feed/" rel="self" type="application/rss+xml" />
	<link>http://www.webmess.it</link>
	<description>Informatica, Web ed altro... il blog di Alessio Caprari.</description>
	<lastBuildDate>Fri, 06 Nov 2009 21:26:14 +0000</lastBuildDate>
	<generator>http://wordpress.org/?v=2.8.6</generator>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
			<item>
		<title>SteerMe &#8211; Firefox Orientation Bookmarklet</title>
		<link>http://www.webmess.it/2009/11/steerme-firefox-orientation-bookmarklet/</link>
		<comments>http://www.webmess.it/2009/11/steerme-firefox-orientation-bookmarklet/#comments</comments>
		<pubDate>Thu, 05 Nov 2009 23:28:22 +0000</pubDate>
		<dc:creator>alessio</dc:creator>
				<category><![CDATA[Javascript]]></category>
		<category><![CDATA[accelerometer]]></category>
		<category><![CDATA[bookmarklet]]></category>
		<category><![CDATA[CSS]]></category>
		<category><![CDATA[firefox]]></category>
		<category><![CDATA[macbook]]></category>
		<category><![CDATA[orientation]]></category>

		<guid isPermaLink="false">http://www.webmess.it/?p=108</guid>
		<description><![CDATA[Just a few days ago, the guys at Mozilla released the first beta version of the incoming Firefox 3.6.
While playing with it, I was wondering, which is the coolest feature introduced in this new release? Well, if you are a user, it should be the full screen support for native HTML5 video. If you are [...]]]></description>
			<content:encoded><![CDATA[<p>Just a few days ago, the guys at Mozilla released the <a href="http://www.mozilla.com/en-US/firefox/3.6b1/releasenotes/">first beta version of the incoming Firefox 3.6</a>.</p>
<p>While playing with it, I was wondering, which is the coolest feature introduced in this new release? Well, if you are a user, it should be the <a href="http://mozillalinks.org/wp/2009/10/firefox-3-6-gets-full-screen-native-video/">full screen support for native HTML5 video</a>. If you are a developer, it may be the <a href="https://developer.mozilla.org/En/Firefox_3.6_for_developers">new CSS enhancements</a>. But, what if you are a Macbook user?</p>
<p>If you are a Macbook user, it will surely be the <a href="https://developer.mozilla.org/en/DOM/window.onmozorientation">detection of the notebook orientation</a> using its integrated accelerometer.</p>
<p>There are a <a href="http://hacks.mozilla.org/2009/10/orientation-for-firefox/">bunch of demo</a> showing this new functionality, they were so exciting I wanted to build one on my own. So, here it is a brand new orientation bookmarklet:</p>
<p style="text-align: center; margin-top: 2em; margin-bottom: 2em;"><a style="background-color: #FF6600; color: white; -moz-border-radius: 7px; -webkit-border-radius: 7px; padding: 5px 8px; font-weight: bold; font-size: 125%; text-decoration: none;" href="javascript:window.addEventListener&amp;&amp;window.addEventListener(&quot;MozOrientation&quot;,function(e){var h=innerHeight,ox=scrollX+innerWidth/2,oy=scrollY+h/2,bs=document.body.style;bs.MozTransformOrigin=ox+&quot;px &quot;+oy+&quot;px&quot;;bs.MozTransform=&quot;rotate(&quot;+(90*e.x)+&quot;deg) scaleY(&quot;+(e.y+1)+&quot;) translateY(&quot;+(-h*(e.z+1))+&quot;px)&quot;;},true);void(0);">SteerMe</a></p>
<p style="text-align: left;">Simply drag and drop the SteerMe button into the bookmarks toolbar of Firefox, or copy its link and manually create a new bookmark. Then, go to a new web page, press the newly created bookmark and begin to rotate your Macbook.</p>
<p style="text-align: left;">You will see the page still vertical while you rotate the notebook on the left and on the right, you will see it stretched and tightened while you move the keyboard up and down. And you will see the page bounce when, ehm&#8230;, you drop your precious notebook!</p>
<p style="text-align: left;">
<div id="attachment_115" class="wp-caption aligncenter" style="width: 310px"><a href="http://www.webmess.it/wp-content/uploads/2009/11/06112009001.jpg"><img class="size-medium wp-image-115" title="Macbook rotated on the left" src="http://www.webmess.it/wp-content/uploads/2009/11/06112009001-300x225.jpg" alt="Tablet-like visualization with Macbook rotated on the left" width="300" height="225" /></a><p class="wp-caption-text">Tablet-like visualization with Macbook rotated on the left</p></div>
<div id="attachment_116" class="wp-caption aligncenter" style="width: 310px"><a href="http://www.webmess.it/wp-content/uploads/2009/11/06112009003.jpg"><img class="size-medium wp-image-116" title="Macbook upside down" src="http://www.webmess.it/wp-content/uploads/2009/11/06112009003-300x225.jpg" alt="Stretched page with keyboard upside down" width="300" height="225" /></a><p class="wp-caption-text">Stretched page with keyboard upside down</p></div>
<p style="text-align: left;">How does it work? This is the bookmarklet code with extra spaces:</p>

<div class="wp_syntax"><table><tr><td class="line_numbers"><pre>1
2
3
4
5
6
7
8
9
10
11
12
</pre></td><td class="code"><pre class="javascript" style="font-family:monospace;">window.<span style="color: #660066;">addEventListener</span> <span style="color: #339933;">&amp;&amp;</span>
window.<span style="color: #660066;">addEventListener</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;MozOrientation&quot;</span><span style="color: #339933;">,</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span>e<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
    <span style="color: #003366; font-weight: bold;">var</span> h <span style="color: #339933;">=</span> innerHeight<span style="color: #339933;">,</span>
        ox <span style="color: #339933;">=</span> scrollX <span style="color: #339933;">+</span> innerWidth <span style="color: #339933;">/</span> <span style="color: #CC0000;">2</span><span style="color: #339933;">,</span>
        oy <span style="color: #339933;">=</span> scrollY <span style="color: #339933;">+</span> h <span style="color: #339933;">/</span> <span style="color: #CC0000;">2</span><span style="color: #339933;">,</span>
        bs <span style="color: #339933;">=</span> document.<span style="color: #660066;">body</span>.<span style="color: #660066;">style</span><span style="color: #339933;">;</span>
    bs.<span style="color: #660066;">MozTransformOrigin</span> <span style="color: #339933;">=</span> ox <span style="color: #339933;">+</span> <span style="color: #3366CC;">&quot;px &quot;</span> <span style="color: #339933;">+</span> oy <span style="color: #339933;">+</span> <span style="color: #3366CC;">&quot;px&quot;</span><span style="color: #339933;">;</span>
    bs.<span style="color: #660066;">MozTransform</span> <span style="color: #339933;">=</span> <span style="color: #3366CC;">&quot;rotate(&quot;</span> <span style="color: #339933;">+</span> <span style="color: #009900;">&#40;</span><span style="color: #CC0000;">90</span> <span style="color: #339933;">*</span> e.<span style="color: #660066;">x</span><span style="color: #009900;">&#41;</span> <span style="color: #339933;">+</span> <span style="color: #3366CC;">&quot;deg) &quot;</span> <span style="color: #339933;">+</span>
                      <span style="color: #3366CC;">&quot;scaleY(&quot;</span> <span style="color: #339933;">+</span> <span style="color: #009900;">&#40;</span>e.<span style="color: #660066;">y</span> <span style="color: #339933;">+</span> <span style="color: #CC0000;">1</span><span style="color: #009900;">&#41;</span> <span style="color: #339933;">+</span> <span style="color: #3366CC;">&quot;) &quot;</span> <span style="color: #339933;">+</span>
                      <span style="color: #3366CC;">&quot;translateY(&quot;</span> <span style="color: #339933;">+</span> <span style="color: #009900;">&#40;</span><span style="color: #339933;">-</span>h <span style="color: #339933;">*</span> <span style="color: #009900;">&#40;</span>e.<span style="color: #660066;">z</span> <span style="color: #339933;">+</span> <span style="color: #CC0000;">1</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span> <span style="color: #339933;">+</span> <span style="color: #3366CC;">&quot;px)&quot;</span><span style="color: #339933;">;</span>
<span style="color: #009900;">&#125;</span><span style="color: #339933;">,</span> <span style="color: #003366; font-weight: bold;">true</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #000066; font-weight: bold;">void</span><span style="color: #009900;">&#40;</span><span style="color: #CC0000;">0</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></td></tr></table></div>

<p style="text-align: left;">As with every bookmarklet, its Javascript code must be as short as possible and tends to be quite obfuscated, but it is very simple. First of all, we will listen to the new <tt>MozOrientation</tt> event on the <tt>window</tt> object. Then we will apply a CSS transform to the body of the page using the event orientation data.</p>
]]></content:encoded>
			<wfw:commentRss>http://www.webmess.it/2009/11/steerme-firefox-orientation-bookmarklet/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>La scomparsa della mela</title>
		<link>http://www.webmess.it/2008/10/la-scomparsa-della-mela/</link>
		<comments>http://www.webmess.it/2008/10/la-scomparsa-della-mela/#comments</comments>
		<pubDate>Tue, 14 Oct 2008 18:44:14 +0000</pubDate>
		<dc:creator>alessio</dc:creator>
				<category><![CDATA[Computer]]></category>
		<category><![CDATA[apple]]></category>
		<category><![CDATA[macbook]]></category>
		<category><![CDATA[mela]]></category>
		<category><![CDATA[notebook]]></category>
		<category><![CDATA[portatile]]></category>
		<category><![CDATA[tastiera]]></category>

		<guid isPermaLink="false">http://www.webmess.it/?p=59</guid>
		<description><![CDATA[
Sbaglio o dalla tastiera dei nuovi MacBook è scomparso il simbolo della mela?
Update: Giulio nei commenti fa giustamente notare che il simbolo era scomparso dalle tastiere Apple già da qualche mese. La tastiera dei MacBook appena usciti è comunque nuova, sono infatti scomparsi tutti i simboli ad eccezione di quello del punto di interesse, niente [...]]]></description>
			<content:encoded><![CDATA[<p style="text-align: center;"><a href="http://www.webmess.it/wp-content/uploads/2008/10/macbookmela.jpg"><img class="size-full wp-image-60 aligncenter" title="MacBook" src="http://www.webmess.it/wp-content/uploads/2008/10/macbookmela.jpg" alt="" width="350" height="254" /></a></p>
<p>Sbaglio o dalla tastiera dei nuovi MacBook è scomparso il simbolo della mela?</p>
<p><strong>Update:</strong> Giulio nei commenti fa giustamente notare che il simbolo era scomparso dalle tastiere Apple già da qualche mese. La tastiera dei MacBook appena usciti è comunque nuova, sono infatti scomparsi tutti i simboli ad eccezione di quello del <a href="http://en.wikipedia.org/wiki/Saint_John%27s_Arms">punto di interesse</a>, niente simboli per Shift, Caps Lock, Tab e Delete e addirittura per il tasto Enter!</p>
]]></content:encoded>
			<wfw:commentRss>http://www.webmess.it/2008/10/la-scomparsa-della-mela/feed/</wfw:commentRss>
		<slash:comments>5</slash:comments>
		</item>
	</channel>
</rss>
