<?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>Ajaxian &#187; Editorial</title>
	<atom:link href="http://ajaxian.com/by/topic/editorial/feed" rel="self" type="application/rss+xml" />
	<link>http://ajaxian.com</link>
	<description>Cleaning up the web with Ajax</description>
	<lastBuildDate>Thu, 02 Feb 2012 22:23:48 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
    	<generator>http://wordpress.org/?v=3.2</generator>
		<item>
		<title>From zero-install to instant-install</title>
		<link>http://ajaxian.com/archives/from-zero-install-to-instant-install</link>
		<comments>http://ajaxian.com/archives/from-zero-install-to-instant-install#comments</comments>
		<pubDate>Mon, 21 Jun 2010 10:44:33 +0000</pubDate>
		<dc:creator>Dion Almaer</dc:creator>
				<category><![CDATA[Editorial]]></category>
		<category><![CDATA[Front Page]]></category>

		<guid isPermaLink="false">http://ajaxian.com/?p=9635</guid>
		<description><![CDATA[Aaron has a nice editorial piece on going from zero-install to instant-install in which he discusses the notion of web apps: Bringing back a lightweight notion of installation offers an interesting way out of Web constraints. If an author uses APIs like window.open() and desktop notifications in an annoying way, his app will be uninstalled. <a href="http://ajaxian.com/archives/from-zero-install-to-instant-install">Read the rest...</a>]]></description>
			<content:encoded><![CDATA[<p><a href="http://www.flickr.com/photos/felipe_gabaldon/4300220282/"><img src="http://ajaxian.com/wp-content/images/4300220282_14d04e62a3.jpg" alt="" title="4300220282_14d04e62a3" width="500" height="333" class="alignnone size-full wp-image-9636" /></a></p>
<p>Aaron has a nice editorial piece on <a href="http://www.google.com/buzz/zboogs/T3cumksXHam/Going-from-zero-install-to-instant-install-Its">going from zero-install to instant-install</a> in which he discusses the notion of web apps:</p>
<blockquote><p>
Bringing back a lightweight notion of installation offers an interesting way out of Web constraints. If an author uses APIs like window.open() and desktop notifications in an annoying way, his app will be uninstalled. The UA can make it easy for the user to discover the uninstall button, so there&#8217;s a strong incentive for authors to not be assholes. Since there are a manageable number of apps installed at any one time (by definition, since they were manually installed), UAs can offer permanent storage to apps. If the apps abuse the privilege, the user can easily scan a list, see which one is doing it and uninstall it.
</p></blockquote>
<p>He discusses the revolution of the &#8220;zero install&#8221; Web. We pass people URLs. We link to things. We don&#8217;t think of this as &#8220;running apps&#8221;. He then brings up the issues of this freedom. Since my mum doesn&#8217;t think of this as running apps, we shouldn&#8217;t grant access to these URLs, and we end up with a strong sandbox, which limits functionality.</p>
<p>With &#8220;installable web apps&#8221; we get some of the best of both worlds, but it doesn&#8217;t quite feel like we have matched a perfect equilibrium yet. As a power user, I am excited about taking a strong sandboxed model and opening it up with APIs that all go through the sandbox. This means that I can monitor everything that is going on. Add to this social monitoring (so if something bad happens it quickly moves through the social network to be fixed and blocked) and I look forward to a blended world of permissions. We have long had the ability to break through the sandbox in browsers. Unfortunately, these methods are browser specific, and result in annoying prompts that drive you nuts. As we scale out the permissions, this becomes more annoying. To get around this, some platforms are asking the user to accept permission at install time. You have the advantage that: a) the user has to agree before anything is even downloaded; b) one click, at the time of install, and you are off to the races. </p>
<p>However, there are huge problems: When prompted at this time, there is a strong likelihood that the user is trying to do something and will thus say YES YES YES no matter what. Some may question an 8-ball app that asks for deep permissions, but even then&#8230;. we run into the same prompty neglect that we get on the desktop. Have you ever downloaded a Mac app, ran it, and then when the &#8220;this app came from the Internet&#8221; dialog showed up&#8230;. said &#8220;you know what. Naaaah&#8221;? And what about nuance? Weather apps ask for access to the GPS. What if you want to use the app (and search for an area) but don&#8217;t want to give location information? Some systems won&#8217;t let you download the app (this is where the Web Geolocation API is great!)</p>
<p>Installable == special powers. Uninstalled == less powers. I still have hope that after these first steps we get the right metaphors that offer simplicity for users, but nice fine grained control and awareness.</p>
]]></content:encoded>
			<wfw:commentRss>http://ajaxian.com/archives/from-zero-install-to-instant-install/feed</wfw:commentRss>
		<slash:comments>7</slash:comments>
		</item>
		<item>
		<title>The march to a more client-centric Web; Will the mobile Web, HTML5, and Chrome Web Apps be the tipping point?</title>
		<link>http://ajaxian.com/archives/the-march-to-a-more-client-centric-web-will-the-mobile-web-html5-and-chrome-web-apps-be-the-tipping-point</link>
		<comments>http://ajaxian.com/archives/the-march-to-a-more-client-centric-web-will-the-mobile-web-html5-and-chrome-web-apps-be-the-tipping-point#comments</comments>
		<pubDate>Thu, 17 Jun 2010 20:25:26 +0000</pubDate>
		<dc:creator>Dion Almaer</dc:creator>
				<category><![CDATA[Editorial]]></category>
		<category><![CDATA[Front Page]]></category>

		<guid isPermaLink="false">http://ajaxian.com/?p=9631</guid>
		<description><![CDATA[Progressive enhancement. Disconnected offline applications. There is a tension brewing in how we deliver applications on the Web. This isn't a new tension. It has been around ever since we started to do more than just throw HTML down the pipe for the hypertext document runtime to render. With the Ajax revolution we talked a <a href="http://ajaxian.com/archives/the-march-to-a-more-client-centric-web-will-the-mobile-web-html5-and-chrome-web-apps-be-the-tipping-point">Read the rest...</a>]]></description>
			<content:encoded><![CDATA[<p><a href="http://www.flickr.com/photos/toffehoff/244870161/"><img src="http://ajaxian.com/wp-content/images/244870161_2a9468bb74.jpg" alt="" title="tug of war" width="500" height="335" class="alignnone size-full wp-image-9632" /></a></p>
<p>Progressive enhancement.</p>
<p>Disconnected offline applications.</p>
<p>There is a tension brewing in how we deliver applications on the Web. This isn't a new tension. It has been around ever since we started to do more than just throw HTML down the pipe for the hypertext document runtime to render.</p>
<p>With the Ajax revolution we talked a lot about "Web applications". Gmail. Google Maps. Those are written in a very different manner. The architecture isn't one of: client asks for a URL.... server does all of the work: business logic, and view logic, since it sends back the entire view as HTML. A popular Ajax pattern was that of still keeping the client kinda dumb, and having the server return interface elements and behaviour in the form of HTML/CSS/JS that the client would eval/innerHTML/etc. This continues to be used a lot as it is flexible (especially if the bulk of the team is on the server side) and sometimes easier to do (chop up the functionality on the backend into more discrete tasks). This is a progressive enhancement style of richer Web applications.</p>
<p>When I was working with <a href="http://gears.google.com/">Gears</a> I saw first hand how reluctant developers were to move from the progressive enhancement style into a more aggressive client server-esque style of Web application development. The Gears APIs themselves are trivial. Nicely implemented. Simple APIs. We get to use them these days in the form of App Cache, SQL database API, Web Workers, GeoLocation, etc. Taking your application and sprinkling a GeoLocation API is very simple and fits into progressive enhancement easily. Even doing what the WordPress guys did early on, and using App Cache as an aggressive fast cache is easy. </p>
<p>The harder sell to developers was: If you want to have your Web application work offline, you need to re-architect it to enable that. Instead of having your PHPs firing down interfaces, you need the client to coordinate the work and just speak REST to services that give you the data, and then have a layer of abstraction that can get the data locally etc. Then you can look at handling sync and the like. This is real work. This is moving code from point A to point B. It is a big deal. Many developers didn't see the value proposition. Do they REALLY care about the offline use case? Getting some performance improvements by taking out latency is nice (hit cache first etc) but is that worth the rework?</p>
<p>For many people, it just wasn't worth it.</p>
<p>As I look at what is changing in the world, I see a few things that may add up collectively to a tipping point:</p>
<p><b>"HTML5" hype</b></p>
<p>HTML5 has a lot of great functionality. There will be pressure for developers and sites to raise the bar. Expectations of what a Web application "can do" is drastically going to change, and as soon as that change happens you don't want to be left behind. MapQuest was fantastic. Until Google Maps came out. Then, on that day forth, it felt archaic. All of that with XHR++..... what will happen with all of the HTML5 functionality available? A lot of code we will be rewritten and changed for "HTML5ication", which is an opportunity for a change in how things are done.</p>
<p><b>"Apps" and the Web as a unified device platform</b></p>
<p>I haven't been quiet with my concern at the rise of the proprietary app platforms. The Web needs to fight back, and it has the opportunity to actually solve developer problems (rather than just rant about how the world should be more open damn it!).</p>
<p>As a developer, do you want to port experiences between incredibly varied platforms such as Web, iPhone, Android, WinPho 7, RIM, Kindle SDK, [insert many others!]? No. The Web has the opportunity to share a lot of that code and development. It has to compete with the native platforms on features, performance, and the like.... but I would argue that it is doing a great job and getting better FAST.</p>
<p>Within the apps ecosystem there are some very interesting things happening:</p>
<p><b>Chrome Web Store</b>: The Chrome Web Store is happening. I know of other Web store efforts in various stages of life too. A lot of developers want to get into the app distribution bandwagon, and will be looking at the notion of a "web app" in a new light because of this. This will give a lot of momentum, along with the fact that HTML5 is the first real spec envisioned for "app" functionality versus documents, to the web app movement.</p>
<p><b>Mobile Web</b>: As developers want to get applications to as many devices as possible, they are finding that the Mobile Web is an attractive development platform. But, how do you do it? If you think about Web distribution, then you have the progressive enhancement world again (device and layout tweaks via CSS, JS, etc) all the way up to a mobile framework. We see the two worlds with <a href="http://jqtouch.com/">jQTouch</a> on one side and <a href="http://ajaxian.com/archives/sencha-touch">Sencha Touch</a> on the other.</p>
<p>Take a look at how an app looks in Sencha Touch:</p>
<p><b>templates in HTML</b></p>
<div class="igBar"><a href="javascript:showCodeTxt('html-3');">PLAIN TEXT</a></div>
<div class="syntax_hilite"><span style="color:#000000; font-weight:bold;">HTML:</span>
<div id="html-3">
<div class="html">
<ol>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp;</div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #009900;"><a href="http://december.com/html/4/element/textarea.html"><span style="color: #000000; font-weight: bold;">&lt;textarea</span></a> <span style="color: #000066;">id</span>=<span style="color: #ff0000;">"legislatorbrief"</span> <span style="color: #000066;">class</span>=<span style="color: #ff0000;">"x-hidden-display"</span><span style="color: #000000; font-weight: bold;">&gt;</span></a></span></div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; <span style="color: #009900;"><a href="http://december.com/html/4/element/div.html"><span style="color: #000000; font-weight: bold;">&lt;div</span></a> <span style="color: #000066;">class</span>=<span style="color: #ff0000;">"legislator-brief"</span><span style="color: #000000; font-weight: bold;">&gt;</span></a></span></div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #009900;"><a href="http://december.com/html/4/element/div.html"><span style="color: #000000; font-weight: bold;">&lt;div</span></a> <span style="color: #000066;">class</span>=<span style="color: #ff0000;">"legislator-tnail"</span> <span style="color: #000066;">style</span>=<span style="color: #ff0000;">"background-image: url(http://www.govtrack.us/data/photos/{govtrack_id}-50px.jpeg)"</span><span style="color: #000000; font-weight: bold;">&gt;</span></a></span><span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/div&gt;</span></span></div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #009900;"><a href="http://december.com/html/4/element/h3.html"><span style="color: #000000; font-weight: bold;">&lt;h3&gt;</span></a></span>{title} {firstname} {middlename} {lastname} ({party})<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/h3&gt;</span></span></div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #009900;"><a href="http://december.com/html/4/element/p.html"><span style="color: #000000; font-weight: bold;">&lt;p&gt;</span></a></span>{state} {district:this.ordinal}<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/p&gt;</span></span></div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; <span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/div&gt;</span></span></div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/textarea&gt;</span></span></div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp;</div>
</li>
</ol>
</div>
</div>
</div>
<p><b>OO app framework with layout and components</b></p>
<div class="igBar"><a href="javascript:showCodeTxt('javascript-4');">PLAIN TEXT</a></div>
<div class="syntax_hilite"><span style="color:#000000; font-weight:bold;">JAVASCRIPT:</span>
<div id="javascript-4">
<div class="javascript">
<ol>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp;</div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">Geo.<span style="color: #006600;">App</span> = Ext.<span style="color: #006600;">extend</span><span style="color:#006600; font-weight:bold;">&#40;</span>Ext.<span style="color: #006600;">Panel</span>, <span style="color:#006600; font-weight:bold;">&#123;</span></div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; cls: <span style="color: #3366CC;">'app'</span>,</div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; fullscreen: <span style="color: #003366; font-weight: bold;">true</span>,</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; layout: <span style="color: #3366CC;">'card'</span>,</div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; activeItem: <span style="color:#800000;">0</span>,</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp;</div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; initComponent: <span style="color: #003366; font-weight: bold;">function</span><span style="color:#006600; font-weight:bold;">&#40;</span><span style="color:#006600; font-weight:bold;">&#41;</span> <span style="color:#006600; font-weight:bold;">&#123;</span>&nbsp; &nbsp; &nbsp; &nbsp;</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #006600;">startScreen</span> = <span style="color: #003366; font-weight: bold;">new</span> Geo.<span style="color: #006600;">views</span>.<span style="color: #006600;">StartScreen</span><span style="color:#006600; font-weight:bold;">&#40;</span><span style="color:#006600; font-weight:bold;">&#123;</span></div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; flex: <span style="color:#800000;">1</span></div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; &nbsp; <span style="color:#006600; font-weight:bold;">&#125;</span><span style="color:#006600; font-weight:bold;">&#41;</span>;</div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #006600;">splash</span> = <span style="color: #003366; font-weight: bold;">new</span> Ext.<span style="color: #006600;">Container</span><span style="color:#006600; font-weight:bold;">&#40;</span><span style="color:#006600; font-weight:bold;">&#123;</span></div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; cls: <span style="color: #3366CC;">'splash'</span>,</div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; layout: <span style="color:#006600; font-weight:bold;">&#123;</span></div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; type: <span style="color: #3366CC;">'vbox'</span>,</div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; align: <span style="color: #3366CC;">'stretch'</span>,</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; pack: <span style="color: #3366CC;">'end'</span></div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span style="color:#006600; font-weight:bold;">&#125;</span>,</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; listeners: <span style="color:#006600; font-weight:bold;">&#123;</span></div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; deactivate: <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #006600;">onSplashDeactivate</span>,</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; scope: <span style="color: #000066; font-weight: bold;">this</span></div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span style="color:#006600; font-weight:bold;">&#125;</span>,</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; items: <span style="color:#006600; font-weight:bold;">&#91;</span><span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #006600;">startScreen</span><span style="color:#006600; font-weight:bold;">&#93;</span></div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; &nbsp; <span style="color:#006600; font-weight:bold;">&#125;</span><span style="color:#006600; font-weight:bold;">&#41;</span>;</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #006600;">detail</span> = <span style="color: #003366; font-weight: bold;">new</span> Geo.<span style="color: #006600;">views</span>.<span style="color: #006600;">LegislatorDetails</span><span style="color:#006600; font-weight:bold;">&#40;</span><span style="color:#006600; font-weight:bold;">&#41;</span>;</div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; &nbsp;</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #006600;">items</span> = <span style="color:#006600; font-weight:bold;">&#91;</span><span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #006600;">splash</span>, <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #006600;">detail</span><span style="color:#006600; font-weight:bold;">&#93;</span>;</div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; &nbsp; Geo.<span style="color: #006600;">App</span>.<span style="color: #006600;">superclass</span>.<span style="color: #006600;">initComponent</span>.<span style="color: #006600;">call</span><span style="color:#006600; font-weight:bold;">&#40;</span><span style="color: #000066; font-weight: bold;">this</span><span style="color:#006600; font-weight:bold;">&#41;</span>;</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; &nbsp;</div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #006600;">startScreen</span>.<span style="color: #006600;">on</span><span style="color:#006600; font-weight:bold;">&#40;</span><span style="color: #3366CC;">'legislatorselect'</span>, <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #006600;">onLegislatorSelect</span>, <span style="color: #000066; font-weight: bold;">this</span><span style="color:#006600; font-weight:bold;">&#41;</span>;</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; <span style="color:#006600; font-weight:bold;">&#125;</span>,</div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp;</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; afterRender: <span style="color: #003366; font-weight: bold;">function</span><span style="color:#006600; font-weight:bold;">&#40;</span><span style="color:#006600; font-weight:bold;">&#41;</span> <span style="color:#006600; font-weight:bold;">&#123;</span></div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; &nbsp; Geo.<span style="color: #006600;">App</span>.<span style="color: #006600;">superclass</span>.<span style="color: #006600;">afterRender</span>.<span style="color: #006600;">apply</span><span style="color:#006600; font-weight:bold;">&#40;</span><span style="color: #000066; font-weight: bold;">this</span>, arguments<span style="color:#006600; font-weight:bold;">&#41;</span>;</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; &nbsp; Ext.<span style="color: #006600;">getBody</span><span style="color:#006600; font-weight:bold;">&#40;</span><span style="color:#006600; font-weight:bold;">&#41;</span>.<span style="color: #006600;">on</span><span style="color:#006600; font-weight:bold;">&#40;</span>Ext.<span style="color: #006600;">isChrome</span> ? <span style="color: #3366CC;">'click'</span> : <span style="color: #3366CC;">'tap'</span>, <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #006600;">onLinkTap</span>, <span style="color: #000066; font-weight: bold;">this</span>, <span style="color:#006600; font-weight:bold;">&#123;</span>delegate: <span style="color: #3366CC;">'a.goOutside'</span><span style="color:#006600; font-weight:bold;">&#125;</span><span style="color:#006600; font-weight:bold;">&#41;</span>;</div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; <span style="color:#006600; font-weight:bold;">&#125;</span>,</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp;</div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; onLinkTap: <span style="color: #003366; font-weight: bold;">function</span><span style="color:#006600; font-weight:bold;">&#40;</span>e, t<span style="color:#006600; font-weight:bold;">&#41;</span> <span style="color:#006600; font-weight:bold;">&#123;</span>&nbsp; &nbsp; &nbsp; &nbsp;</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; &nbsp; e.<span style="color: #006600;">stopEvent</span><span style="color:#006600; font-weight:bold;">&#40;</span><span style="color:#006600; font-weight:bold;">&#41;</span>;</div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; &nbsp; Geo.<span style="color: #006600;">Util</span>.<span style="color: #006600;">openUrl</span><span style="color:#006600; font-weight:bold;">&#40;</span>t.<span style="color: #006600;">href</span><span style="color:#006600; font-weight:bold;">&#41;</span>;</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; <span style="color:#006600; font-weight:bold;">&#125;</span>,</div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp;</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp;</div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; onSplashDeactivate: <span style="color: #003366; font-weight: bold;">function</span><span style="color:#006600; font-weight:bold;">&#40;</span><span style="color:#006600; font-weight:bold;">&#41;</span> <span style="color:#006600; font-weight:bold;">&#123;</span></div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #006600;">startScreen</span>.<span style="color: #006600;">list</span>.<span style="color: #006600;">clearSelections</span><span style="color:#006600; font-weight:bold;">&#40;</span><span style="color:#006600; font-weight:bold;">&#41;</span>;</div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; <span style="color:#006600; font-weight:bold;">&#125;</span>,</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp;</div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; onLegislatorSelect: <span style="color: #003366; font-weight: bold;">function</span><span style="color:#006600; font-weight:bold;">&#40;</span>govtrack_id<span style="color:#006600; font-weight:bold;">&#41;</span> <span style="color:#006600; font-weight:bold;">&#123;</span></div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #006600;">setCard</span><span style="color:#006600; font-weight:bold;">&#40;</span><span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #006600;">detail</span>, Geo.<span style="color: #006600;">defaultAnim</span><span style="color:#006600; font-weight:bold;">&#41;</span>;</div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #006600;">detail</span>.<span style="color: #006600;">update</span><span style="color:#006600; font-weight:bold;">&#40;</span>govtrack_id<span style="color:#006600; font-weight:bold;">&#41;</span>;</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; <span style="color:#006600; font-weight:bold;">&#125;</span></div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color:#006600; font-weight:bold;">&#125;</span><span style="color:#006600; font-weight:bold;">&#41;</span>;</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp;</div>
</li>
</ol>
</div>
</div>
</div>
<p>This looks similar to how we <a href="http://developer.palm.com/index.php?option=com_content&#038;view=article&#038;id=1758">build apps on webOS with Mojo</a> and other frameworks like <a href="http://grrok.com/jo/">Jo</a>. Rich full featured mobile frameworks.</p>
<p>Once you have built your Web application, technology such as PhoneGap and Appcelerator Titanium can package it for the various app distribution platforms.</p>
<p>So, when I put this all together, I see the opportunity for the growth of Web applications through both progressive enhancement, but also via rich client frameworks. The tension will be there between the two, and I am sure that there will be more solutions that blend the best of both worlds.</p>
<p>What do you think? What are you seeing as you build richer Web applications for a variety of devices and form factors?</p>
]]></content:encoded>
			<wfw:commentRss>http://ajaxian.com/archives/the-march-to-a-more-client-centric-web-will-the-mobile-web-html5-and-chrome-web-apps-be-the-tipping-point/feed</wfw:commentRss>
		<slash:comments>12</slash:comments>
		</item>
		<item>
		<title>HTML5: Deja Vu on Ajax</title>
		<link>http://ajaxian.com/archives/html5-deja-vu-on-ajax</link>
		<comments>http://ajaxian.com/archives/html5-deja-vu-on-ajax#comments</comments>
		<pubDate>Wed, 09 Jun 2010 10:10:35 +0000</pubDate>
		<dc:creator>Dion Almaer</dc:creator>
				<category><![CDATA[Editorial]]></category>
		<category><![CDATA[Front Page]]></category>
		<category><![CDATA[HTML]]></category>

		<guid isPermaLink="false">http://ajaxian.com/?p=9539</guid>
		<description><![CDATA[What does Open Web mean? What does Ajax mean? Is it AJAX or Ajax? Remember those discussions? We had the arguments ... the purists who would shout and scream if you said something was Ajax and didn't use XHR with async mode + XML as the format. Ajax beat our AJAX and became the new <a href="http://ajaxian.com/archives/html5-deja-vu-on-ajax">Read the rest...</a>]]></description>
			<content:encoded><![CDATA[<p><a href="http://dhtml5.com"><img src="http://ajaxian.com/wp-content/images/dhtml5.png" alt="" title="dhtml5" width="480"  class="alignnone size-full wp-image-9540" /></a></p>
<p>What does Open Web mean?</p>
<p>What does Ajax mean? Is it AJAX or Ajax?</p>
<p>Remember those discussions? We had the arguments ... the purists who would shout and scream if you said something was Ajax and didn't use XHR with async mode + XML as the format. Ajax beat our AJAX and became the new term for DHTML and the term that meant "all of the cool shizzle that browsers and JS library authors are now doing!"</p>
<p>The new king on the hill is "HTML5" which has taken that exact mantle. One extreme view is that the term is marketing drivel. The other is that it should ONLY be used to mean the W3C version of the HTML5 core specification.</p>
<p>Brad Neuberg <a href="http://codinginparadise.org/weblog/2008/07/open-web-definition-version-04.html">enjoys thinking about these things</a> and has put together some thoughts in two posts: <a href="http://blog.codinginparadise.org/2010/06/why-im-going-to-keep-calling-it-html5.html">Why I'm Going to Keep Calling it HTML5</a> and <a href="http://blog.codinginparadise.org/2010/06/html5-defined-its-not-just-marketing.html">HTML5 Defined! It's Not Just a Marketing Term</a>.</p>
<p>I really like how Brad goes deeper on HTML5. It is far too confusing to know what capabilities are in browsers, what specs they are in, and what really matters... what can I use as a Web developer.</p>
<p>Brad takes apart the various specs and APIs:</p>
<blockquote>
<p>Going deeper, I've broken these down into separate areas:</p>
<ul>
<li><span style="font-weight: bold;"><a href="http://blog.codinginparadise.org/2010/06/html5-defined-its-not-just-marketing.html#html5_strict">"HTML5 Strict"</a> </span>- Things that are strictly inside the W3C's HTML5 spec.</li>
<li><a href="http://blog.codinginparadise.org/2010/06/html5-defined-its-not-just-marketing.html#referenced_by_html5"><span style="font-weight: bold;">"Referenced by HTML5"</span></a> - Things that are referenced by the HTML5 spec and which can optionally be parsed into the DOM and displayed.</li>
<li><a href="http://blog.codinginparadise.org/2010/06/html5-defined-its-not-just-marketing.html#broken_out_of_html5"><span style="font-weight: bold;">"Broken out of HTML5"</span></a> - Things that used to be part of HTML5 or its older iterations, called Web Applications and Web Forms.</li>
<li><a href="http://blog.codinginparadise.org/2010/06/html5-defined-its-not-just-marketing.html#html5_family_of_technologies"><span style="font-weight: bold;">"HTML5 Family of Technologies"</span></a> - Extended set of technologies not strictly part of HTML5 spec or referenced but likely to be used in conjunction with HTML5.</li>
<li><a href="http://blog.codinginparadise.org/2010/06/html5-defined-its-not-just-marketing.html#html5++"><span style="font-weight: bold;">"HTML5++"</span></a> - More experimental technologies pushing the web forward that are not part of the HTML5 spec at all; may or may not see broader adoption.</li>
</ul>
<p>One small note; there are actually <i>two</i> HTML5 specs, <a href="http://dev.w3.org/html5/spec/Overview.html">one maintained by the W3C</a> and the other <a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/">maintained by the WhatWG</a>.</p>
<p>You need to understand that HTML5 <a href="http://en.wikipedia.org/wiki/Web_Hypertext_Application_Technology_Working_Group#History">began as a revolution</a> to the established order, initiated by the <a href="http://whatwg.org/">WhatWG</a>. A peace of sorts developed over the years, with the upstart "Web Applications" and "Web Forms" specs brought in-house to the W3C under the moniker HTML5. Over time I'm assuming that the W3C spec, when Final Call has happened, will be the canonical spec.</p>
<p>To simplify things below, I'm only referencing the W3C HTML5 spec for now. Here's how I would break things down based on what I said above; if you think something should be somewhere else or things get moved around email me and I'll update this (<span style="font-weight: bold;">Last Updated: June 7th, 2010</span>). If you want to know the state of where these technologies are implemented see <a href="http://caniuse.com/">caniuse.com</a>; if you want your code to detect what is available <a href="http://diveintohtml5.org/detect.html">see Mark Pilgrim's book for details</a>.</p>
<div id="html5_strict"><span style="font-size:130%;"><span style="font-weight: bold;">"HTML5 Strict"</span><i>: Strictly Inside the W3C's HTML5 Spec</i></span></div>
<ul>
<li>HTML5 Doctype: &lt;!doctype html&gt;</li>
<li>HTML5 parsing</li>
<li>XHTML5 serialization</li>
<li>Cleaning up edge cases of existing web content for greater compatibility</li>
<li>New semantic, behavior, and application tags: section, nav, article, aside, hgroup, header, footer, address, figure, figcaption, time, code, var, samp, kbd, output, progress, meter, details, summary, command, menu</li>
<li>Being able to nest H1, H2, etc. arbitrarily</li>
<li>Sandbox attribute on iframes</li>
<li>Video tag, API and events</li>
<li>Audio tag, API, and events</li>
<li>New form input types: telephone, search, url, e-mail, date, time, month, week, number, range, color</li>
<li>New form abilities: multiple file upload; placeholder text; directing focus on initial page load; constraint validation by input type and properties</li>
<li>New link rel types: alternate, archives, author, bookmark, external, help, icon, license, nofollow, noreferrer, pingback, prefetch, search, sidebar, tag, index, up, first, last, next, prev</li>
<li>data-* attributes for SCRIPT tags</li>
<li>Offline Web applications</li>
<li>contenteditable for editing</li>
<li>Drag and Drop</li>
<li>UndoManager for consistent undos</li>
<li>Parsing empty and unknown tags into the DOM: &lt;foobar /&gt;</li>
<li>async attribute on SCRIPT tags</li>
<li>PUT and DELETE methods for form submission</li>
<li>Deprecated elements: acronym, applet, basefont, big, center, dir, font, frame, frameset, isindex, noframes, s, strike, tt, u</li>
</ul>
<p>
<div id="referenced_by_html5"><span style="font-size:130%;"><span style="font-weight: bold;">"Referenced by HTML5"</span><i>: Referenced from W3C HTML5 spec, including how to parse into an HTML5 DOM; HTML5 parsing engines can optionally include these in DOM and display them</i></span></div>
<ul>
<li>MathML</li>
<li>SVG</li>
</ul>
<p>
<div id="broken_out_of_html5"><span style="font-size:130%;"><span style="font-weight: bold;">"Broken Out of HTML5"</span><i>: Used to be inside of HTML5, Web Applications, or Web Forms specifications</i></span></div>
<ul>
<li>Web Sockets</li>
<li>Local Persistent Storage (localStorage and sessionStorage)</li>
<li>SQL Storage (in contention versus IndexDB)</li>
<li>DataGrid</li>
<li>Specific HTML5 Video codec: H.264, Ogg/Theora, WebM (contention between video codecs)</li>
<li>Specific HTML5 Audio codec</li>
<li>Device element</li>
<li>Ping attribute</li>
<li>Timed track model for media elements</li>
<li>Canvas</li>
<li>Microdata and Microdata Vocabularies (some level of contention versus RDFa and Microformats)</li>
<li>Cross-document messaging</li>
<li>Channel messaging</li>
<li>W3C XMLHttpRequest specification</li>
<li>Server-Sent Events</li>
<li>Ajax Session History</li>
<li>MIME type and Protocol handler registration</li>
<li>P2P connections
</li>
</ul>
<p>
<div id="html5_family_of_technologies"><span style="font-size:130%;"><span style="font-weight: bold;">"HTML5 Family of Technologies"</span><i>: Extended set of technologies not strictly part of HTML5 spec or referenced but likely to be used in conjunction with HTML5</i></span></div>
<ul>
<li>CSS3
<ul>
<li>Flex Box Layout</li>
<li>Multi-Column Layout</li>
<li>Animations</li>
<li>Transforms (2D and 3D)</li>
<li>Transitions</li>
<li>Masking and Effects (rounded corners, shadows, etc.)</li>
<li>Gradients</li>
<li>CSS3 Selectors</li>
<li>Media Queries</li>
</ul>
</li>
<li>Web Fonts - CSS 2.1 @font-face + OpenType/WOFF (slight contention for OpenType vs. WOFF)</li>
<li>W3C Geolocation</li>
<li>Metadata - RDFa, Microformats (Some level of contention vs. Microdata)</li>
<li>Web workers</li>
<li>ARIA</li>
<li>EcmaScript 5</li>
<li>Faster JavaScript</li>
<li>CSS styling of new HTML5 input types (color, range, etc.)</li>
<li>IndexDB (in contention versus SQL Storage)</li>
<li>querySelector/querySelectorAll</li>
<li>getElementsByClassName</li>
<li>GPU acceleration of HTML, Canvas, SVG, and CSS3 Animations/Transitions/Transforms</li>
</ul>
<div id="html5++"><span style="font-size:130%;"><span style="font-weight: bold;">"HTML5++"</span><i>: More experimental technologies pushing the web forward; may or may not see broader adoption</i></span></div>
<ul>
<li>WebGL</li>
<li>O3D</li>
<li>Firefox Audio APIs</li>
<li>XBL 2.0</li>
</ul>
<div style="clear:both; padding-bottom:0.25em"></div>
</blockquote>
<p>We can argue about which term to use when, but I am much more excited about is explaining the capabilities and working together on nice stacks so we can build killer applications on the Web platform in a productive manner.</p>
<p>Check out a <a href="http://www.focus.com/images/view/11905/">nice info graphic</a> on all things HTML5:</p>
<p><a href="http://media.focus.com/images/uploaded/fyi/wtf-html5-infographic/HTML5__.jpg"><img src="http://media.focus.com/images/uploaded/fyi/wtf-html5-infographic/HTML5__.jpg" width="480"/></a></p>
]]></content:encoded>
			<wfw:commentRss>http://ajaxian.com/archives/html5-deja-vu-on-ajax/feed</wfw:commentRss>
		<slash:comments>12</slash:comments>
		</item>
		<item>
		<title>Are we going to be stick shift drivers amidst the automatic population?</title>
		<link>http://ajaxian.com/archives/are-we-going-to-be-stick-shift-drivers-amidst-the-automatic-population</link>
		<comments>http://ajaxian.com/archives/are-we-going-to-be-stick-shift-drivers-amidst-the-automatic-population#comments</comments>
		<pubDate>Thu, 03 Jun 2010 10:43:30 +0000</pubDate>
		<dc:creator>Dion Almaer</dc:creator>
				<category><![CDATA[Editorial]]></category>
		<category><![CDATA[Front Page]]></category>

		<guid isPermaLink="false">http://ajaxian.com/?p=9472</guid>
		<description><![CDATA[An editorial piece taken from my personal blog goes into some thoughts on the computing platforms and how they are evolving. I have been talking in analogy for the last few days. The common meme is relating the computing usage trends to that of the car industry. As I watch continue to watch my family <a href="http://ajaxian.com/archives/are-we-going-to-be-stick-shift-drivers-amidst-the-automatic-population">Read the rest...</a>]]></description>
			<content:encoded><![CDATA[<p><em>An editorial piece <a href="http://almaer.com/blog/will-we-feel-like-stick-shift-drivers-the-potential-shift-in-the-os-marketplace">taken from my personal blog</a> goes into some thoughts on the computing platforms and how they are evolving.</em></p>
<p><a href="http://toonlet.com/archive?m=s&#038;i=45830"><img src="http://almaer.com/blog/uploads/stickinthemud.png" alt="stickinthemud" title="stickinthemud" width="480" height="183" class="alignnone size-full wp-image-2716" /></a></p>
<p>I have been talking in analogy for the last few days. The common meme is relating the computing usage trends to that of the car industry. As I watch continue to watch my family use their devices, it does feel like things are changing. My mum continues to thrive on her iPad / Palm Pixi combo. She feels empowered to try the different corners of the experience. To download new experiences. She is having fun.</p>
<p><img src="http://almaer.com/blog/uploads/stickshift.jpg" alt="stickshift" title="stickshift" width="480" class="alignnone size-full wp-image-2714"/></p>
<p>One friend suggested that it is like the shift (pun intended) that we saw when automatic transmissions were introduced. At first they were expensive and had some issues, but being able to have simple controls changed the way that people drove. It became so simple. There were people who cried that it would never take off. "People want the control of a manual stick shift system!" However, although we continue to see some die-hards, the vaste majority of the US population drive automatics (this isn't true everywhere in the world). That battle is over. We will never go back.</p>
<p>The iPad experience is like driving the computing experience without the manual hassle. You don't have to know how to install the engine to start out (install an OS), nor deal with (and worry endlessly about) the workings. In general, you just don't need to worry about all of the abstractions any more. The notion of files. And, don't get me started on viruses.</p>
<p>As my mother thrives on her iPad, I use it sparingly, mainly as an entertainment consumption device. Wait a minute: <em>Am I am the guy who loves the stick shift and never wants to jump to an automatic?</em> I am a little different from the religious chaps who claimed they couldn't understand why anyone would want an automatic. Or looked down on those people. I understand why my Mum prefers the iPad experience.</p>
<p>I do find the iPad experience often frustrating however. My "why did the car shift then? it wasn't time!" moments occur mainly around the restricted access to customization, and the inherent and enforced immersion.</p>
<p>First a small thing, which will unfortunately show off an how anal I can be:</p>
<p><img src="http://almaer.com/blog/uploads/bbcname1.png" alt="bbcname" title="bbcname" width="99" height="107" class="alignnone size-full wp-image-2712"/></p>
<p>I want to rename this to "BBC News". I am the guy who winces when someone bookmarks a page and doesn't rename it, thus having "Foo.com - a barish company that deals in widgets, gadgets, monkeys, and flubbers". I want to jump in and rename it to "Foo" on the bookmark bar. More space. More room. Petty for sure.</p>
<p>Where it gets more real for me is in the lack of integration between applications. Being immersed with one application at a time can be a fantastic thing, I will give you that... even if I often would love to give a bit of screen real estate to me Twitter stream while working on another app right next to it. However, if you live in an immersive environment, you need great integration between experiences. I should be able to Tweet/Share from any application, and not have to close down the app, go to a Twitter client, and get back to the app that had content I was tweeting. A lot of this comes down to multitasking, but more comes from integration..... and putting intents on a stack. On the iPad I feel like I am jumping through doors without an easy way to go back.</p>
<p>The browser has some of these notions baked in. States have URLs that I can bookmark. I can go forward and back. I can search. I can fork off (new tab). Turns out, I really like those abstractions, and miss them when they are not there, and every single app tries to reproduce some of them. They are often cross cutting concerns. I don't want the app developer to have to write code and choose where to put a "Share" button. I want the system to know that I have an account on Twitter and let me share with a simple gesture.</p>
<p>Back to the Web. I was a little stunned when a friend showed me the <a href="http://speedtest.net/">Speed Test.net</a> experience on an iPad:</p>
<p><img src="http://almaer.com/blog/uploads/speedtest.png" alt="speedtest" title="speedtest" width="480" height="640" class="alignnone size-full wp-image-2713" /></p>
<p>Yup, if you go to speedtest.net, you are automatically redirected to the App Store. There is no way to trick it (again: would be nice to have customizability and tweak user agents etc).</p>
<p>To the credit of the speed test developers, the website is driven by Flash, which won't work.... so they are trying to do something good for a user. I get that.</p>
<p>However, I am scared to death to think of the Web going this way. You go to websites and get sent to apps directly. I *do* want user agents to tell me if apps are available (hence the <a href="http://almaer.com/blog/appdiscover">App Discover</a> experiment), but don't force me into the world of apps. I also think that doing what YouTube does and take over a URL in a certain way can be a good thing. I would love to install handlers for mime types.... so a certain link always opens up my favourite Twitter client say.</p>
<p>I personally prefer many of the Web experiences to the "new" app experiences. (I talked earlier about the abstractions that I find useful). This could break the Web. Data that was shared at the ReadWriteWeb Mobile Summit showed that the same users often hit a site using: mobile website, full website, and application. We are context switching in real-time already. Different views are best for different use cases.</p>
<p>It definitely feels like there is a shift in the force. We need to get the balance spot on as we move to automatic transmissions. What should be customizable. What should be locked down. As developers as well as consumers, we need to make our voices heard. What do you think?</p>
]]></content:encoded>
			<wfw:commentRss>http://ajaxian.com/archives/are-we-going-to-be-stick-shift-drivers-amidst-the-automatic-population/feed</wfw:commentRss>
		<slash:comments>14</slash:comments>
		</item>
		<item>
		<title>A second look at the &#8220;webbyness&#8221; of an &#8220;installable&#8221; Web App</title>
		<link>http://ajaxian.com/archives/a-second-look-at-the-webbyness-of-an-installable-web-app</link>
		<comments>http://ajaxian.com/archives/a-second-look-at-the-webbyness-of-an-installable-web-app#comments</comments>
		<pubDate>Thu, 27 May 2010 18:35:47 +0000</pubDate>
		<dc:creator>Dion Almaer</dc:creator>
				<category><![CDATA[Editorial]]></category>
		<category><![CDATA[Front Page]]></category>

		<guid isPermaLink="false">http://ajaxian.com/?p=9418</guid>
		<description><![CDATA[Many in the Web community have been guarded about the notion of "apps" and what a Web app is. Google itself, via Gears and now HTML5 support, were pushing the notion of giving the browser the abilities to do app-like things.... rather than pushing for a native app runtime. The Chrome Web Store and its <a href="http://ajaxian.com/archives/a-second-look-at-the-webbyness-of-an-installable-web-app">Read the rest...</a>]]></description>
			<content:encoded><![CDATA[<p>Many in the Web community have been guarded about the notion of "apps" and what a Web app is. Google itself, via Gears and now HTML5 support, were pushing the notion of giving the browser the abilities to do app-like things.... rather than pushing for a native app runtime.</p>
<p>The Chrome Web Store and its .crx installable zip archive bring up the question yet again of what a web app is. http://gmail.com is a Web app isn't it? What is the difference between that and gmail.crx?</p>
<p>The notion of an app can be a little scary when we think about the current incarnations. Having centralized closed marketplaces are un-webby. However, that says nothing for the technology, but rather the policy and implementation.</p>
<p>Atul has written a very nice piece <a href="http://www.toolness.com/wp/?p=821">that dives deep into the core issues</a>:</p>
<blockquote><p>
I am not sure exactly what webby means, but if I had to guess, it would involve the kinds of qualities that Mitchell Baker and Mark Surman believe <a href="http://commonspace.wordpress.com/2009/05/28/what-makes-the-web-better/">make the web better</a>: more transparent, participatory, decentralized, and hackable.
</p></blockquote>
<p>He goes into detail on the benefits of untethered applications, beyond "working offline". We can get to a better place where some apps, and pieces of apps, can work very well untethered. Of course, many applications out there quickly talk to the Internet, but a disconnected cacheable world makes a lot of sense (CouchDB apps :). It feels silly to go to a simple one player game at http://somegame.com/ and not be able to play because of the Internet connection. AppCache and friends go along way, but there is more.</p>
<p>Another key piece is permissions. As I watch folks talk about the W3C Widget Spec and the Chrome Web App manifest, permissions seems to be the crux of the matter. We need people to focus on this piece. If we can collectively crack that nut, my gut tells there will be an explosion of amazing things... and the world will make more sense.</p>
<p>Atul also talks about the Web of Trust:</p>
<blockquote><p>
Another area in which Installable Web Apps could decentralize the internet has to do with the field of trust. It’s currently very difficult to actually prove that a piece of Web content or functionality I created came from me, and wasn’t altered at some point by someone else. The only viable way to do this is via Secure HTTP, which requires asking an authority for permission to issue you a certificate. That this frequently involves paying them money and that the system is susceptible to corruption are besides the point. As Mark Surman mentions in a draft of Drumbeat’s mission statement:</p>
<p>"Ultimately, our goal is a strong, safe open internet: an internet built and backed by a massive global community committed to the idea that everyone should all be able to freely create, innovate and express ideas online without asking permission from others."</p>
<p>It should be possible to prove to other people that something came from you without having to ask permission from someone else, and in this respect, even though this mechanism is part of the Web, I would argue that it is profoundly un-webby. Google’s proposal for Installable Web Applications associates an application’s identity with a public key that doesn’t require a blessing from any kind of authority; all versions of the application are self-signed by the key, which makes it far easier to establish trust between a user and an application. The trust model is also more granular and secure, because it creates a trust relationship between the user and the particular application they’re using, rather than the server they’re connecting to—which often isn’t even under a web developer’s full control. It’s because of this that we’re using a similar mechanism in Jetpack; extending it to the entire Web would be very webby, not coincidentally because it establishes a foundation for what could eventually become a web of trust.
</p></blockquote>
<p>I am really enjoying the conversations and thoughts that have come out of the strong competition from proprietary app platforms.</p>
<p>It feels like the scale of our movement has changed from infighting (Gecko vs. WebKit vs. Trident) to collective war (Web vs. proprietary app platforms). The Google folks who believe in the Web (Chrome++) are more aligned to what we are doing at Palm, and what Mozilla is doing.... than the Android platform. Ditto for Safari/iPhone.</p>
<p>The world keeps getting more interesting. The browsers have strong competition internally, and now the platform has competition.</p>
]]></content:encoded>
			<wfw:commentRss>http://ajaxian.com/archives/a-second-look-at-the-webbyness-of-an-installable-web-app/feed</wfw:commentRss>
		<slash:comments>4</slash:comments>
		</item>
		<item>
		<title>Web 2.0 Expo Browser Panel</title>
		<link>http://ajaxian.com/archives/web-2-0-expo-browser-panel</link>
		<comments>http://ajaxian.com/archives/web-2-0-expo-browser-panel#comments</comments>
		<pubDate>Thu, 06 May 2010 15:39:21 +0000</pubDate>
		<dc:creator>Dion Almaer</dc:creator>
				<category><![CDATA[Editorial]]></category>
		<category><![CDATA[Front Page]]></category>

		<guid isPermaLink="false">http://ajaxian.com/?p=9217</guid>
		<description><![CDATA[Yesterday, I had the pleasure of moderating a panel at Web 2.0 Expo on the future of browsers with Ben. On the panel were distinguished gents. In the photo (courtesy of TechCrunch) you see (sitting from left to right): Alex Russell (Google), Brendan Eich (Mozilla), Charles McCathieNevile (Opera Software), Giorgio Sardo (Microsoft Corporation), and Douglas <a href="http://ajaxian.com/archives/web-2-0-expo-browser-panel">Read the rest...</a>]]></description>
			<content:encoded><![CDATA[<p>Yesterday, I had the pleasure of <a href="http://www.web2expo.com/webexsf2010/public/schedule/detail/12159">moderating a panel at Web 2.0 Expo</a> on the future of browsers with Ben.</p>
<p><a href="http://techcrunch.com/2010/05/05/web-2-0-expo-a-look-at-the-future-of-web-browsers-from-the-guys-who-build-them/"><img src="http://tctechcrunch.files.wordpress.com/2010/05/panel.jpg" width="480"/></a></p>
<p>On the panel were distinguished gents. In the photo (courtesy of TechCrunch)  you see (sitting from left to right): Alex Russell (Google), Brendan Eich (Mozilla), Charles McCathieNevile (Opera Software), Giorgio Sardo (Microsoft Corporation), and Douglas Crockford (Yahoo! Inc.).</p>
<p>TechCrunch has a <a href="http://techcrunch.com/2010/05/05/web-2-0-expo-a-look-at-the-future-of-web-browsers-from-the-guys-who-build-them/">detailed post</a> on the Q&#038;A, and then also dives into <a href="http://techcrunch.com/2010/05/06/google-hewitt-old/">one question, responding to Joe Hewitt</a>'s Tweets from last week on the Web platform.</p>
<p>I think that Alex Russell responded fantastically. He has been a developer, dealing with the ugly underbelly of the browsers (and old ones). He is fighting to make a difference with Chrome Frame among other things. The Web has a long way to go. The last thing we want is for it to become the ghetto which Steve Jobs wants. In an ideal world, "apps" would be premium real estate, and the long tail of crud lives in the Web ghetto.</p>
<p>Chris Anderson scared me a little on this topic in a keynote he gave at the MarkLogic conference yesterday. He talked about having the Web be a way to engage with community and tease them into the premium options. Maybe a few free Wired articles here and there, but get the "App" for the real deal. People are used to purchasing apps, and he thinks that he can technically do more on app platforms.</p>
<p>However, it doesn't have to be that way. <a href="http://techcrunch.com/2010/05/05/scribd-html5/">Scribd is going HTML5</a> and the screenshots of their new code looks great:</p>
<p><img src="http://tctechcrunch.files.wordpress.com/2010/05/scribdpad1.jpg" width="480"/></p>
<p>As a community we need to come together again and show the world that we can deliver amazing experiences, that the Web can be THE platform (and has a role in the world of apps....) and engage with browser vendors and standards to push the Web faster. We can do it.</p>
<p>One other topic of conversation from the panel was <a href="http://www.theregister.co.uk/2010/05/05/microsoft_ie9_and_canvasn/">IE9 and Canvas</a>. I asked the crowd who would like to see canvas supported in IE9 (didn't show up in yesterdays preview). 80% of the crowd put their hands up, and I am sure the other 20% just didn't get them up in time ;) Giorgio of Microsoft himself put his hand up, which was nice. The strange comment from him was that the canvas spec is "big" which was refuted by Brendan. Microsoft has implemented SVG support which is massive in comparison, and I am sure they could wire together canvas API calls to the underlying 2d engine ;)</p>
<p>I would love to hear a reason from Microsoft on why they are not supporting canvas. They may have a valid reason, but I haven't heard it yet. Dean has been open to communicating on HTML5 video on his blog, so maybe you could answer this one mate? It could be that they just haven't gotten around to it yet and it will show up in a new preview. Let me know and I will shut the hell up.</p>
<p>It is fantastic that Microsoft is being more open. Giorgio showed up at the panel yesterday. Dean is blogging. Compare that to the Safari team. I would *love* to have those guys speaking.... Dave Hyatt, Maciej, etc are all amazing.... but that isn't the Apple Way. Thanks for sitting at the table Microsoft..... and I hope it continues.</p>
]]></content:encoded>
			<wfw:commentRss>http://ajaxian.com/archives/web-2-0-expo-browser-panel/feed</wfw:commentRss>
		<slash:comments>5</slash:comments>
		</item>
		<item>
		<title>So all this is done in HTML5 by the way</title>
		<link>http://ajaxian.com/archives/so-all-this-is-done-in-html5-by-the-way</link>
		<comments>http://ajaxian.com/archives/so-all-this-is-done-in-html5-by-the-way#comments</comments>
		<pubDate>Fri, 09 Apr 2010 08:32:30 +0000</pubDate>
		<dc:creator>Dion Almaer</dc:creator>
				<category><![CDATA[Editorial]]></category>
		<category><![CDATA[Front Page]]></category>

		<guid isPermaLink="false">http://ajaxian.com/?p=8915</guid>
		<description><![CDATA[What a day. I sometimes don't know how to feel about Apple. On the one hand they do great things for the cause of HTML5: They gave us Canvas, and CSS transforms, and ... They brought us WebKit, and now WebKit 2 By blocking Flash on their mobile platform, they force people to take HTML5 <a href="http://ajaxian.com/archives/so-all-this-is-done-in-html5-by-the-way">Read the rest...</a>]]></description>
			<content:encoded><![CDATA[<p>What a day. I sometimes don't know how to feel about Apple. On the one hand they do great things for the cause of HTML5:</p>
<ul>
<li>They gave us Canvas, and CSS transforms, and ...</li>
<li>They brought us WebKit, and now WebKit 2</li>
<li>By blocking Flash on their mobile platform, they force people to take HTML5 video seriously</li>
<li>iAds shows off HTML5, and Jobs was sure to let us know about that.</li>
</ul>
<p>Great technology. Great for the Web.</p>
<p>Then we see the <a href="http://daringfireball.net/2010/04/why_apple_changed_section_331">section 3.3.1 change</a> to their developer terms which has people thinking that <a href="http://daringfireball.net/2010/04/iphone_agreement_bans_flash_compiler">the Flash compiler is toast</a> just before CS5 is about to come out.</p>
<p>This same change to the terms may also affect some of our own. For example, <a href="http://developer.appcelerator.com/blog/2010/04/iphone-os-4-0-announcement-and-our-commitment-to-you.html">the Titanium crew</a>. PhoneGap appears to be safe by the letter of the law, since they link to the iPhone OS WebKit engine. I hope that Apple responds wrt Titanium.</p>
<blockquote><p>
3.3.1 — Applications may only use Documented APIs in the manner prescribed by Apple and must not use or call any private APIs. Applications must be originally written in Objective-C, C, C++, or JavaScript as executed by the iPhone OS WebKit engine, and only code written in C, C++, and Objective-C may compile and directly link against the Documented APIs (e.g., Applications that link to Documented APIs through an intermediary translation or compatibility layer or tool are prohibited).
</p></blockquote>
<p>Some on the Apple side are arguing that:</p>
<ul>
<li>Objective-C apps are good. Anything else is crap. When folks try to go meta, they shouldn't be allowed</li>
<li>And hey, Apple can do whatever they want.</li>
</ul>
<p>Although I can see how this could in some ways help the Open Web (less Flash, more HTML), I can't ignore the other feeling. The Web is so special as it isn't owned by a single vendor. This means that this kind of crap can't happen. One company can't change the rules in one fell swoop. There isn't that one company that can become misaligned with the interests of certain developers and Do Bad Things.</p>
<p>I continue to look forward to what Apple does to help the Web. But I am very glad indeed that the Web itself isn't run by them, or any one group.</p>
<p>I hope that the Web becomes the unified platform on mobile.... and that folks like Titanium have the opportunity to do their best. Developers should be able to use the languages and tools of their choice, and let the best apps win.</p>
]]></content:encoded>
			<wfw:commentRss>http://ajaxian.com/archives/so-all-this-is-done-in-html5-by-the-way/feed</wfw:commentRss>
		<slash:comments>16</slash:comments>
		</item>
		<item>
		<title>Mouseovers on Touch Devices</title>
		<link>http://ajaxian.com/archives/mouseovers-on-touch-devices</link>
		<comments>http://ajaxian.com/archives/mouseovers-on-touch-devices#comments</comments>
		<pubDate>Tue, 23 Feb 2010 07:35:29 +0000</pubDate>
		<dc:creator>Michael Mahemoff</dc:creator>
				<category><![CDATA[Apple]]></category>
		<category><![CDATA[Editorial]]></category>
		<category><![CDATA[Flash]]></category>
		<category><![CDATA[Front Page]]></category>
		<category><![CDATA[iPhone]]></category>

		<guid isPermaLink="false">http://ajaxian.com/?p=8642</guid>
		<description><![CDATA[Most of the thinking on iPad's exclusion of Flash has been focused on battery life, performance, stability, or control of the application market, but here's a Flash developer who's thinking differently. Morgan Adams argues it's all about the mouseover, and he raises a point that is just as relevant to rich Javascript apps. Many (if <a href="http://ajaxian.com/archives/mouseovers-on-touch-devices">Read the rest...</a>]]></description>
			<content:encoded><![CDATA[<p>Most of the thinking on iPad's exclusion of Flash has been focused on battery life, performance, stability, or control of the application market, but here's <a href="http://www.roughlydrafted.com/2010/02/20/an-adobe-flash-developer-on-why-the-ipad-cant-use-flash/">a Flash developer who's thinking differently</a>. Morgan Adams argues it's all about the mouseover, and he raises a point that is just as relevant to rich Javascript apps.</p>
<blockquote><p>
Many (if not most) current Flash games, menus, and even video players require a visible mouse pointer. They are coded to rely on the difference between hovering over something (mouseover) vs. actually clicking. This distinction is not rare. It’s pervasive, fundamental to interactive design, and vital to the basic use of Flash content. New Flash content designed just for touchscreens can be done, but people want existing Flash sites to work. All of them—not just some here and there—and in a usable manner. That’s impossible no matter what.<br />
....<br />
<strong>Mouseover examples:</strong></p>
<p>* Video players where the controls appear on mouseover and hide otherwise. (This seems to be the norm, in fact. Whereas a click on the same video does something different: usually Pause. Try Hulu for instance.)</p>
<p>* Games where you steer with the mouse without clicking (extremely common).</p>
<p>* Menus that popup up subpage links when you mouse over a main button, vs. going directly to a main category page when you click.<br />
....
</p></blockquote>
<p>He claims all the alternatives are unsatisfactory, e.g. re-coding every application manually, introducing gestures, substituting double-clicking for clicking and clicking for mouseovers.</p>
<p>The issues are relevant to Javascript developers; for example, PPK has previously speculated on <a href="http://www.quirksmode.org/blog/archives/2008/08/iphone_events.html">the demise of mouse* events, as well as hover</a> in touch environments. How will that play out with a web app that relies on them?</p>
<p>It's a bit like Dion's <a href="hhttp://twitter.com/dalmaer/status/8663249663">recent tweet</a>: "I find myself typing click^H^H^H^H^Htap 20 times a day at the moment. Is there a term that abstractly could mean both? :)". We can get away with simple substitutions with straightforward web apps maybe, but it gets a lot more complicated with seriously rich interaction styles, the kind traditionally seen in some Flash games and now possible with Javascript. We tend to think of mobile device design as a matter of massaging the look with some CSS...the harder part to get right is often the "feel" in the look-and-feel equation. Platforms, like the web, which want to support multiple interaction styles, need to provide ways to ease the transition for developers, automating degradation and enhancement in the first instance, but allowing application designers to customise further for each device. <a href="http://www.odannyboy.com/">Dan Saffer</a>'s sideshow below makes the point well, regarding gesture design in touch devices:</p>
<div style="width:425px;text-align:left" id="__ss_2495091"><a style="font:14px Helvetica,Arial,Sans-serif;display:block;margin:12px 0 3px 0;text-decoration:underline;" href="http://www.slideshare.net/dansaffer/tap-is-the-new-click-2495091" title="Tap is the New Click">Tap is the New Click</a><object style="margin:0px" width="425" height="355"><param name="movie" value="http://static.slidesharecdn.com/swf/ssplayer2.swf?doc=tapisthenewclick-091113125811-phpapp01&#038;stripped_title=tap-is-the-new-click-2495091" /><param name="allowFullScreen" value="true"/><param name="allowScriptAccess" value="always"/><embed src="http://static.slidesharecdn.com/swf/ssplayer2.swf?doc=tapisthenewclick-091113125811-phpapp01&#038;stripped_title=tap-is-the-new-click-2495091" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="425" height="355"></embed></object>
<div style="font-size:11px;font-family:tahoma,arial;height:26px;padding-top:2px;">View more <a style="text-decoration:underline;" href="http://www.slideshare.net/">presentations</a> from <a style="text-decoration:underline;" href="http://www.slideshare.net/dansaffer">Dan Saffer</a>.</div>
</div>
]]></content:encoded>
			<wfw:commentRss>http://ajaxian.com/archives/mouseovers-on-touch-devices/feed</wfw:commentRss>
		<slash:comments>14</slash:comments>
		</item>
		<item>
		<title>Google isn&#8217;t Evil. Flash isn&#8217;t Dead; Thank god the Open Web doesn&#8217;t have a single vendor</title>
		<link>http://ajaxian.com/archives/google-isnt-evil-flash-isnt-dead-thank-god-the-open-web-doesnt-have-a-single-vendor</link>
		<comments>http://ajaxian.com/archives/google-isnt-evil-flash-isnt-dead-thank-god-the-open-web-doesnt-have-a-single-vendor#comments</comments>
		<pubDate>Tue, 02 Feb 2010 02:38:27 +0000</pubDate>
		<dc:creator>Dion Almaer</dc:creator>
				<category><![CDATA[Editorial]]></category>
		<category><![CDATA[Front Page]]></category>

		<guid isPermaLink="false">http://ajaxian.com/?p=8520</guid>
		<description><![CDATA[The following post is a reprint from my personal blog. It is editorial in nature and even delves into random politics. I apologise. You can deal with it though :) Steve Jobs didn't hold back when talking about Google and Adobe. That is great. Life is so much more fun when people speak their mind. <a href="http://ajaxian.com/archives/google-isnt-evil-flash-isnt-dead-thank-god-the-open-web-doesnt-have-a-single-vendor">Read the rest...</a>]]></description>
			<content:encoded><![CDATA[<p><em>The following post is a <a href="http://almaer.com/blog/google-isnt-evil-flash-isnt-dead-thank-god-the-open-web-doesnt-have-a-single-vendor">reprint from my personal blog</a>. It is editorial in nature and even delves into random politics. I apologise. You can deal with it though :)</em></p>
<p><img src="http://almaer.com/blog/uploads/openclosed.jpg" alt="openclosed" title="openclosed" width="480" height="480" class="alignnone size-full wp-image-2620" /></p>
<p>Steve Jobs didn't hold back when <a href="http://iphoneroot.com/jobs-about-google-and-adobe/">talking about Google and Adobe</a>. That is great. Life is so much more fun when people speak their mind. I remember hearing a story when Sir Steve was asked why mac keyboards where the way they were. He grabbed a PC keyboard and started to rip out "stupid keys" (print screen, F keys, and the like) and swore a lot.</p>
<p>We love to paint with broad black and white brushes these days don't we? Whenever I hear people talking about Google being "evil" or not.... I sit back and think about how interesting it is that companies become "people", especially in this country.</p>
<p>It makes sense when you look up <a href="http://en.wikipedia.org/wiki/Corporation">Corporation</a>:</p>
<blockquote cite="http://en.wikipedia.org/wiki/Corporation"><p>
Corporations are recognized by the law to have rights and responsibilities like actual people.</p>
<p>That may have been a convenient (and often almost genius) abstraction by lawyers, but it is screwed up. It feels like the times when you use inheritence in a way that isn't a ISA relationship, but it does kinda make the code nice. We have all done that, until we learned to favor composition. Corporations ISA Person? No. They are composed of them though.</p>
<p>I have been thinking about this ever since the recently surprise court decision the other day that "allows corporations and unions to pour unprecedented amounts of money into elections."</p>
<p>Lawrence Lessig had some interesting commentary:</p>
<p><object width="425" height="344"><param name="movie" value="http://www.youtube.com/v/87YOBDzxwj4&#038;rel=0&#038;color1=0xb1b1b1&#038;color2=0xcfcfcf&#038;hl=en_US&#038;feature=player_embedded&#038;fs=1"></param><param name="allowFullScreen" value="true"></param><param name="allowScriptAccess" value="always"></param><embed src="http://www.youtube.com/v/87YOBDzxwj4&#038;rel=0&#038;color1=0xb1b1b1&#038;color2=0xcfcfcf&#038;hl=en_US&#038;feature=player_embedded&#038;fs=1" type="application/x-shockwave-flash" allowfullscreen="true" allowScriptAccess="always" width="425" height="344"></embed></object></p>
<p>The court decision does feel totally wonky to me. Right now, $ has a direct bearing on elections, and allowing multi-nationals (who have the money) to rain it down makes no sense.</p>
<p><b>Fun aside</b></p>
<p>My renaissance friend Graham Glass talks about how corporations can be considered a single conscious in his series on "the mind".</p>
<p><object width="425" height="344"><param name="movie" value="http://www.youtube.com/v/_qTI_jrEmXg&#038;color1=0xb1b1b1&#038;color2=0xcfcfcf&#038;hl=en_US&#038;feature=player_embedded&#038;fs=1"></param><param name="allowFullScreen" value="true"></param><param name="allowScriptAccess" value="always"></param><embed src="http://www.youtube.com/v/_qTI_jrEmXg&#038;color1=0xb1b1b1&#038;color2=0xcfcfcf&#038;hl=en_US&#038;feature=player_embedded&#038;fs=1" type="application/x-shockwave-flash" allowfullscreen="true" allowScriptAccess="always" width="425" height="344"></embed></object></p>
<p>The issue with the vast number of corporations is that they are profit driven entities whose charter is to bring financial reward to shareholders. While you could argue that <a href="http://en.wikipedia.org/wiki/The_Selfish_Gene">we as a species are driven by the selfish gene</a>, corporations are driven by profits. Duh. Capitalism.</p>
<p>Google is a company. It is driven by this same goal. Now, there are various paths to a particular goal to make profits. Some companies sell things that kill people (weapons, cigarettes, etc). Others offer medical devices. All companies are not equal. Having spent time at Google, I do feel like the place isn't just an evil cult. The people that make up the consciousness were very driven strong willed people that cared about the company mission (universal access to information and all that) more than just the $. Sure some folks are focused on that. Also, although the wool could be placed over your eyes, the guys at the top of the chain have their hearts in the right place. While Larry and Sergey are there, decisions will be made that aren't solely based on profit. They want to create a different kind of legacy and company.</p>
<p>That being said, I think it is quite easy to fall into a trap such as:</p>
<blockquote><p>
If we do something here to block competition, we can make more $ and since we are Good Guys we can do better things with that money!
</p></blockquote>
<p>Google will sometimes do things that could be considered "evil" by some. That is life.</p>
<p>The good news with Google is that their search and ads business deals in a trust economy. It doesn't take much to switch from Google to Bing. Google knows that. Even though they have some HUGE advantages (technical [data centers, talent], brand, etc) the low barrier to change is huge.</p>
<p><b>Not all corporations are profit driven</b></p>
<p>I had the huge pleasure of working for Mozilla, which is a mission based corporation. Wow does that make life different. While you have to sustain yourself, it does mean that you think of the world very differently. You would rather go out in a blaze of glory doing something great for the mission, than just slowly die not doing much. Every choice you make .... you think of the mission.</p>
<p>It was interesting to work there knowing that I actually wouldn't want Firefox to be a 90% browser. You can fall into the similar trap as above and think:</p>
<blockquote><p>
We are mission based! If we had that domination we would use it for good!
</p></blockquote>
<p>But, not having that power in one hand is even better. Imagine working somewhere thinking "in my wildest dreams, the market would be shared somewhat evenly with the competition." The Open Web is amazing in that there is NO SINGLE VENDOR. If we are able to keep a decent balance between browsers (and thus the platform as we know it) then we have a balance of powers. Sure, in some ways you can't move as fast as a dictatorship, but there is a reason we don't want dictatorships in our government (even if the trains run on time!)</p>
<p>And, this brings me to the Adobe half of the Steve Jobs equation. Flash isn't dead. HTML5 is slowly going to put a dent into it if we ever get some of the use cases just right (e.g. video), but Adobe has a good penetration and can move at the speed of a dictatorship. The iPhone/iPad combo not shipping Flash will have an interesting dynamic here too, hopefully helping the HTML5 video cause. There is still much more work to be done. Flash and browser plugins have had a long history at forging new paths, and the Web can come in behind them and standardize. May that continue.</p>
<p>I do watch for single-owned platforms such as Flash, Silverlight, or now the Apple platform (even though they do great work on the HTML5 side of the house). I don't want any of those vendors to have too much power. The thought of a Web that required the use of their technology makes me shudder (we have a piece of that with Flash video). Right now I can turn off those plugins and life moves on. Sure I can't Hulu or Netflix, but that will change. I would miss some of the Flash sites that my kids use, but they could even be partially ported over to HTML5 these days.</p>
<p>I don't want to "kill" these other platforms as they offer competition and spur on the industry. I just don't want any one of them to take over. It may seem like the world would be better if we all just used Macs and iPhones and iPads, but would it? Do you think Steve would be a benevolent dictator? </p>
<p><img src="http://iphoneroot.com/wp-content/uploads/2010/01/steve_jobs_630x-400x210.jpg"/></p>
<p>Erm, no.</p>
<p>And thus I find myself torn. I really want to go out and by that iPad....... but when is it "too late". Surely I have a few years right? I can enjoy the shiny new toy? :)</p>
<p>Faruk Ate? also has a nice post <a href="http://farukat.es/journal/2010/02/385-so-long-and-thanks-for-all-the-flash">on where he see's Flash going</a> which is bolder than mine :)</p>
<p>What do you think?</p></blockquote>
]]></content:encoded>
			<wfw:commentRss>http://ajaxian.com/archives/google-isnt-evil-flash-isnt-dead-thank-god-the-open-web-doesnt-have-a-single-vendor/feed</wfw:commentRss>
		<slash:comments>14</slash:comments>
		</item>
		<item>
		<title>View Source; How important was it, is it, and will it be?</title>
		<link>http://ajaxian.com/archives/view-source-how-important-was-it-is-it-and-will-it-be</link>
		<comments>http://ajaxian.com/archives/view-source-how-important-was-it-is-it-and-will-it-be#comments</comments>
		<pubDate>Fri, 08 Jan 2010 11:25:27 +0000</pubDate>
		<dc:creator>Dion Almaer</dc:creator>
				<category><![CDATA[Editorial]]></category>
		<category><![CDATA[Front Page]]></category>

		<guid isPermaLink="false">http://ajaxian.com/?p=8396</guid>
		<description><![CDATA[Alex Russell has pontificated on the notion that View Source is not only good and important, but that it may be under attack. Do you feel that view source added to the popularity of the Web? or that it was just a nice to have that is neither here nor there? Other technologies have tried <a href="http://ajaxian.com/archives/view-source-how-important-was-it-is-it-and-will-it-be">Read the rest...</a>]]></description>
			<content:encoded><![CDATA[<p>Alex Russell has <a href="http://alex.dojotoolkit.org/2010/01/view-source-is-good-discuss/">pontificated on the notion that View Source is not only good</a> and important, but that it may be under attack.</p>
<p>Do you feel that view source added to the popularity of the Web? or that it was just a nice to have that is neither here nor there? Other technologies have tried to bolt it on (e.g. in Flex you can opt-in to view source) but opt-in to a developer flips a bit of "hmm no I will keep this to myself" for various reasons.</p>
<p>I personally feel like the ability to view source fit in perfectly with the culture of the Web, and was especially important early on. I am willing to bet that we have all learned from the notion of view source.</p>
<p>However, it is also true that in some ways our front ends are getting a lot more complex and by the time you run a compressor through, or a tool like GWT/Cappuccino/insert others there isn't much to learn. Of course, on the back end all the code is hidden and we have found ways to learn there (big thanks to open source and communities that have sprung up).</p>
<p>The notion of view source is under attack. How hard to we try to fight it? How do we fight it?</p>
<p>Keep reading Alex's post which has some good stuff such as:</p>
<blockquote><p>
To understand the importance of view-source, consider how people learn. Some evidence exists that even trained software engineers chose to work with copy-and-pasted example code. Participants in the linked study even expressed guilt over it the copy-paste-tweak method of learning, but guilt didn’t change the dynamic: a blank slate and abstract documentation doesn’t facilitate learning nearly as well as poking at an example and feeling out the edges and possibilities by doing. View-source provides a powerful catalyst to creating a culture of shared learning and learning-by-doing, which in turn helps formulate a mental model of the relationship between input and output faster. Web developers get started by taking some code, pasting it into a file, loading it in a browser and switching between editor and browser between even the most minor changes. This is a stark contrast with other types of development, notably those that impose a compilation step on development, in which the process of seeing what what done requires an intermediate action. In other words, immediacy of output helps build an understanding of how the system will behave, and ctrl-r becomes a seductive and productive way for developers to accelerate their learning in the copy-paste-tweak loop. The only required equipment is a text editor and a web browser, tools that are completely free.
</p></blockquote>
]]></content:encoded>
			<wfw:commentRss>http://ajaxian.com/archives/view-source-how-important-was-it-is-it-and-will-it-be/feed</wfw:commentRss>
		<slash:comments>23</slash:comments>
		</item>
		<item>
		<title>The End of Days for &#8220;View Source&#8221;?</title>
		<link>http://ajaxian.com/archives/the-end-of-days-for-view-source</link>
		<comments>http://ajaxian.com/archives/the-end-of-days-for-view-source#comments</comments>
		<pubDate>Thu, 03 Dec 2009 15:40:20 +0000</pubDate>
		<dc:creator>Michael Mahemoff</dc:creator>
				<category><![CDATA[Editorial]]></category>
		<category><![CDATA[Front Page]]></category>
		<category><![CDATA[Performance]]></category>

		<guid isPermaLink="false">http://ajaxian.com/?p=8080</guid>
		<description><![CDATA["View Source is your friend", we've learned countless times as web developers. It's something special about web development that we can seamlessly lift the covers on anything we see and find out how the sausage is made. And it gets even better with great tools to interrogate the system in real-time. This capability has helped <a href="http://ajaxian.com/archives/the-end-of-days-for-view-source">Read the rest...</a>]]></description>
			<content:encoded><![CDATA[<p><img alt="Apocalypse 2012" src="http://www.collider.com/wp-content/image-base/Movies/T/Two_2012/posters/2012%20movie%20poster%20slice.jpg" title="Apocalypse 2012" width="507" height="193" /></p>
<p>"View Source is your friend", we've learned countless times as web developers. It's something special about web development that we can seamlessly lift the covers on anything we see and find out how the sausage is made. And it gets even better with <a href=" http://getfirebug.com">great</a> <a href="http://webkit.org/blog/41/introducing-the-web-inspector/">tools</a> to interrogate the system in real-time. This capability has helped us evolve practices and patterns, and contributed to the production of many a fine browser extension and Greasemonkey script.</p>
<p>Our friend might sadly be going the way of the blink tag. View Source has always worked because the standard development model is to put up some static Javascript files on a server somewhere and serve them out. That model is changing though; performance is a <a href="http://conferences.oreilly.com/velocityonline">very</a> <a href="http://www.scalecamp.org.uk/">hot</a> topic right now, and View Source is playing victim to that trend.</p>
<p>Google's <a href="http://googleblog.blogspot.com/2009/06/lets-make-web-faster.html">Let's Make the Web Faster</a> initiative is a case in point. Here is a multi-pronged attack on the performance issue, involving new protocols (SPDY), tools (PageSpeed), browser improvements (Chrome), on-demand loading (Closure), and - most pertinent - compression techniques (Closure again). And we ain't seen nothing yet; there's every reason to believe Google will soon be putting its money where its mouth is, by <a href="http://gigaom.com/2009/11/22/should-web-page-speed-influence-google-pagerank/">rewarding faster sites with higher rankings</a>. (I guess I was alone in assuming they always did that.) While performance <em>should</em> always be a consideration for site owners, a dangling SEO carrot would no doubt convert the best of intentions into the most concrete of actions.</p>
<p>Site owners can't (much) control factors such as browser choice and browser efficiency, but they <em>can</em> get their own performance-fu in order, and code compression is low-hanging fruit. Looking at the <a href="http://www.alexa.com/topsites">top 20-ranked sites</a>, filtering only English-language sites, I found the very top  guys (Google, Facebook, Yahoo, YouTube, Windows Live) predominately using Javascript compression, with the others not using it much, if at all. I expect most of them to be using it in the next 12-24 months.</p>
<p>In addition to compression, there is also obfuscation. With Javascript being used for more complex tasks and replacing desktop functionality, more companies will be wondering about all that intellectual property sitting in plain view. (And let's not mention the security-by-obscurity fans, who will also go this route, however flawed their thinking.)</p>
<p>Is it all bad? No. There's a much healthier respect for <a href="http://microformats.org/wiki/posh">plain old semantic HTML</a> these days, which means HTML documents should be View Sourcier now than ever before. (CSS, not so much, with compression also likely to grow.)  If I had to choose between one or the other, I'd take clear HTML over clear Javascript. Also, we will probably find the majority of sites in the long tail won't feel the need to do anything about their code (but the ones who do make efforts are probably the ones with the most interesting things to look at). Also, the aforementioned tools, which do things like XHR sniffing, will help us to understand from a "black box" perspective even if we can't peer into the code. Hopefully, there will also be more attention paid towards Javascript beautifiers as well, to make sense of compressed code.</p>
<p>I can't speculate on the waning of View Source without mentioning the tremendous counter-balancing act played out by  Open Source. From the get-go, open source has played a vital role in Ajax, with individuals and companies releasing code for all sorts of reasons. Most of this is library and framework code, rather than production-ready applications, so we might lose something there, but we still have much to gain from the ever-growing corpus of code that's out there, free to be studied and incorporated into our own applications.</p>
]]></content:encoded>
			<wfw:commentRss>http://ajaxian.com/archives/the-end-of-days-for-view-source/feed</wfw:commentRss>
		<slash:comments>24</slash:comments>
		</item>
		<item>
		<title>CBC Radio 3 Case Study</title>
		<link>http://ajaxian.com/archives/cbc-radio-3-case-study</link>
		<comments>http://ajaxian.com/archives/cbc-radio-3-case-study#comments</comments>
		<pubDate>Wed, 25 Nov 2009 11:05:53 +0000</pubDate>
		<dc:creator>Dion Almaer</dc:creator>
				<category><![CDATA[Articles]]></category>
		<category><![CDATA[Editorial]]></category>
		<category><![CDATA[Front Page]]></category>
		<category><![CDATA[Prototype]]></category>
		<category><![CDATA[Showcase]]></category>

		<guid isPermaLink="false">http://ajaxian.com/?p=7988</guid>
		<description><![CDATA[Phil Rabin of CBC Radio 3 has kindly written a guest post on his experience creating a fantastic Web interface for the station that uses Flash for audio, but a full HTML experience that maintains state from page to page. CBC Radio 3 is a community, radio station and user-generated independent music library which is <a href="http://ajaxian.com/archives/cbc-radio-3-case-study">Read the rest...</a>]]></description>
			<content:encoded><![CDATA[<p><em><a href="http://twitter.com/philrabin">Phil Rabin</a> of CBC Radio 3 has kindly written a guest post on his experience creating a fantastic Web interface for the station that uses Flash for audio, but a full HTML experience that maintains state from page to page.</em></p>
<p><img src="http://ajaxian.com/wp-content/images/cbcradio3.png" alt="cbcradio3" title="cbcradio3" width="500" height="62" class="alignnone size-full wp-image-7989" /></p>
<p><a href="http://radio3.cbc.ca/">CBC Radio 3</a> is a community, radio station and user-generated independent music library which is a small department of the Canadian Broadcasting Corporation. When the CBC Radio 3 web team was called upon to rebuild the site we were confronted with the technical problem of having an uninterrupted music experience for our users. The old design of the site (see image) achieved this by embedding a flash player in the body with the content being served through a statically positioned iframe in the center of the page. Radio 3's content offerings were outgrowing the design so we went with a full page 1000px-wide layout with the player resting in the page. This created an obvious hurdle being that with a fresh page load comes a bad listening experience like myspace where a single wrong click breaks the audio. Also, not having popup player was a design decision that was made to give the website a more integrated feel.</p>
<p>We decided to completely removed flash from the UI equation and went full html/ajax because we found that it offered more flexibility and play with the page. The hardest part was figuring out a way to maintain state on each page load while keeping the audio continuous. </p>
<p>We went with an old-school frameset to create a type of inter-frame communication  with the top level frameset acting as the orchestrator/bootstrapper. The visible "UI Controller" frame is completely blown out with the stateful player frame hidden from view. </p>
<p>The stateful player frame contains hidden swfs to handle playing audio and connecting to RTMP for our live streaming. All the communication in and out of flash is handled by a couple gateway javascript classes to abstract out the flash from the rest of the application. </p>
<p>Here's an example of a communication gateway for wrapping the events coming to and from flash. The event objects are native flash event objects that get sent by Flash's ExternalInterface and come in as JSON that can: </p>
<div class="igBar"><a href="javascript:showCodeTxt('javascript-11');">PLAIN TEXT</a></div>
<div class="syntax_hilite"><span style="color:#000000; font-weight:bold;">JAVASCRIPT:</span>
<div id="javascript-11">
<div class="javascript">
<ol>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp;</div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">CBCR3.<span style="color: #006600;">namespace</span><span style="color:#006600; font-weight:bold;">&#40;</span><span style="color: #3366CC;">"CBCR3.Player.External"</span><span style="color:#006600; font-weight:bold;">&#41;</span>; </div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp;</div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">CBCR3.<span style="color: #006600;">Player</span>.<span style="color: #006600;">External</span>.<span style="color: #006600;">RTMPGateway</span> = <span style="color: #003366; font-weight: bold;">Class</span>.<span style="color: #006600;">create</span><span style="color:#006600; font-weight:bold;">&#40;</span>CBCR3.<span style="color: #006600;">Commons</span>.<span style="color: #006600;">EventDispatcher</span>, <span style="color:#006600; font-weight:bold;">&#123;</span> </div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp;</div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; initialize:<span style="color: #003366; font-weight: bold;">function</span><span style="color:#006600; font-weight:bold;">&#40;</span>$super<span style="color:#006600; font-weight:bold;">&#41;</span> </div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; <span style="color:#006600; font-weight:bold;">&#123;</span> </div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; &nbsp; $super<span style="color:#006600; font-weight:bold;">&#40;</span><span style="color:#006600; font-weight:bold;">&#41;</span>;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; <span style="color:#006600; font-weight:bold;">&#125;</span>, </div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp;</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; <span style="color: #009900; font-style: italic;">//Functions to receive events from flash&nbsp; &nbsp; </span></div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; sendStreamEvent:<span style="color: #003366; font-weight: bold;">function</span><span style="color:#006600; font-weight:bold;">&#40;</span>event<span style="color:#006600; font-weight:bold;">&#41;</span> </div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; <span style="color:#006600; font-weight:bold;">&#123;</span> </div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #006600;">dispatchEvent</span><span style="color:#006600; font-weight:bold;">&#40;</span>event.<span style="color: #006600;">type</span><span style="color:#006600; font-weight:bold;">&#41;</span>; </div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; <span style="color:#006600; font-weight:bold;">&#125;</span>, </div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; </div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; sendMetaDataEvent:<span style="color: #003366; font-weight: bold;">function</span><span style="color:#006600; font-weight:bold;">&#40;</span>event<span style="color:#006600; font-weight:bold;">&#41;</span> </div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; <span style="color:#006600; font-weight:bold;">&#123;</span>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #003366; font-weight: bold;">var</span> metaData = <span style="color: #003366; font-weight: bold;">new</span> CBCR3.<span style="color: #006600;">Player</span>.<span style="color: #006600;">Mappers</span>.<span style="color: #006600;">StreamMetaDataDtoMapper</span><span style="color:#006600; font-weight:bold;">&#40;</span><span style="color:#006600; font-weight:bold;">&#41;</span>.<span style="color: #006600;">mapCollection</span><span style="color:#006600; font-weight:bold;">&#40;</span>event.<span style="color: #006600;">metaData</span><span style="color:#006600; font-weight:bold;">&#41;</span>;&nbsp; &nbsp; &nbsp; &nbsp; </div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #006600;">dispatchEvent</span><span style="color:#006600; font-weight:bold;">&#40;</span>CBCR3.<span style="color: #006600;">Player</span>.<span style="color: #006600;">Events</span>.<span style="color: #006600;">RTMPStreamEvent</span>.<span style="color: #006600;">metaDataReceived</span>, <span style="color:#006600; font-weight:bold;">&#123;</span>metaData:metaData<span style="color:#006600; font-weight:bold;">&#125;</span><span style="color:#006600; font-weight:bold;">&#41;</span>; </div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; <span style="color:#006600; font-weight:bold;">&#125;</span>, </div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; &nbsp; </div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; <span style="color: #009900; font-style: italic;">//Functions to send commands from flash </span></div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; sendStreamCommand:<span style="color: #003366; font-weight: bold;">function</span><span style="color:#006600; font-weight:bold;">&#40;</span>commandName, commandArgs<span style="color:#006600; font-weight:bold;">&#41;</span> </div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; <span style="color:#006600; font-weight:bold;">&#123;</span>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;</div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; &nbsp; $<span style="color:#006600; font-weight:bold;">&#40;</span>CBCR3.<span style="color: #006600;">Player</span>.<span style="color: #006600;">Globals</span>.<span style="color: #006600;">rtmpPlayerId</span><span style="color:#006600; font-weight:bold;">&#41;</span>.<span style="color: #006600;">streamCommand</span><span style="color:#006600; font-weight:bold;">&#40;</span>commandName, commandArgs<span style="color:#006600; font-weight:bold;">&#41;</span>; </div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; <span style="color:#006600; font-weight:bold;">&#125;</span> </div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color:#006600; font-weight:bold;">&#125;</span><span style="color:#006600; font-weight:bold;">&#41;</span>; </div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp;</div>
</li>
</ol>
</div>
</div>
</div>
<p>A single instance of this gateway is always maintained in the application which is called by a sort of simple container like this: </p>
<div class="igBar"><a href="javascript:showCodeTxt('javascript-12');">PLAIN TEXT</a></div>
<div class="syntax_hilite"><span style="color:#000000; font-weight:bold;">JAVASCRIPT:</span>
<div id="javascript-12">
<div class="javascript">
<ol>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp;</div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">ExternalInterface.<span style="color: #006600;">call</span><span style="color:#006600; font-weight:bold;">&#40;</span><span style="color: #3366CC;">"CBCR3.Player.Application.IoC.getInstanceOf('rtmpGateway').sendStreamEvent"</span>, event<span style="color:#006600; font-weight:bold;">&#41;</span>;&nbsp; &nbsp; </div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp;</div>
</li>
</ol>
</div>
</div>
</div>
<p>An instance of the gateway has to be maintained by the player application because events coming from flash have no context. This way the application classes can subscribe to events coming from flash like this: </p>
<div class="igBar"><a href="javascript:showCodeTxt('javascript-13');">PLAIN TEXT</a></div>
<div class="syntax_hilite"><span style="color:#000000; font-weight:bold;">JAVASCRIPT:</span>
<div id="javascript-13">
<div class="javascript">
<ol>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp;</div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">CBCR3.<span style="color: #006600;">Player</span>.<span style="color: #006600;">Players</span>.<span style="color: #006600;">RTMPPlayer</span> = <span style="color: #003366; font-weight: bold;">Class</span>.<span style="color: #006600;">create</span><span style="color:#006600; font-weight:bold;">&#40;</span>CBCR3.<span style="color: #006600;">Commons</span>.<span style="color: #006600;">EventDispatcher</span>, <span style="color:#006600; font-weight:bold;">&#123;</span> </div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; initialize:<span style="color: #003366; font-weight: bold;">function</span><span style="color:#006600; font-weight:bold;">&#40;</span>$super, rtmpGateway, thumbLookupService<span style="color:#006600; font-weight:bold;">&#41;</span> </div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; <span style="color:#006600; font-weight:bold;">&#123;</span> </div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; &nbsp; $super<span style="color:#006600; font-weight:bold;">&#40;</span><span style="color:#006600; font-weight:bold;">&#41;</span>;&nbsp; &nbsp; &nbsp;</div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #006600;">rtmpGateway</span> = rtmpGateway;&nbsp; &nbsp; &nbsp; &nbsp; </div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp;</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #006600;">rtmpGateway</span>.<span style="color: #006600;">addEventListener</span><span style="color:#006600; font-weight:bold;">&#40;</span>CBCR3.<span style="color: #006600;">Player</span>.<span style="color: #006600;">Events</span>.<span style="color: #006600;">RTMPStreamEvent</span>.<span style="color: #006600;">metaDataReceived</span>, <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #006600;">rtmpMetaDataReceivedHandler</span>.<span style="color: #006600;">bind</span><span style="color:#006600; font-weight:bold;">&#40;</span><span style="color: #000066; font-weight: bold;">this</span><span style="color:#006600; font-weight:bold;">&#41;</span><span style="color:#006600; font-weight:bold;">&#41;</span>;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;</div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #006600;">rtmpGateway</span>.<span style="color: #006600;">addEventListener</span><span style="color:#006600; font-weight:bold;">&#40;</span>CBCR3.<span style="color: #006600;">Player</span>.<span style="color: #006600;">Events</span>.<span style="color: #006600;">RTMPStreamEvent</span>.<span style="color: #006600;">ready</span>, <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #006600;">streamReadyHandler</span>.<span style="color: #006600;">bind</span><span style="color:#006600; font-weight:bold;">&#40;</span><span style="color: #000066; font-weight: bold;">this</span><span style="color:#006600; font-weight:bold;">&#41;</span><span style="color:#006600; font-weight:bold;">&#41;</span>; </div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #006600;">rtmpGateway</span>.<span style="color: #006600;">addEventListener</span><span style="color:#006600; font-weight:bold;">&#40;</span>CBCR3.<span style="color: #006600;">Player</span>.<span style="color: #006600;">Events</span>.<span style="color: #006600;">RTMPStreamEvent</span>.<span style="color: #006600;">connecting</span>, <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #006600;">streamConnectingHandler</span>.<span style="color: #006600;">bind</span><span style="color:#006600; font-weight:bold;">&#40;</span><span style="color: #000066; font-weight: bold;">this</span><span style="color:#006600; font-weight:bold;">&#41;</span><span style="color:#006600; font-weight:bold;">&#41;</span>; </div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #006600;">rtmpGateway</span>.<span style="color: #006600;">addEventListener</span><span style="color:#006600; font-weight:bold;">&#40;</span>CBCR3.<span style="color: #006600;">Player</span>.<span style="color: #006600;">Events</span>.<span style="color: #006600;">RTMPStreamEvent</span>.<span style="color: #006600;">streaming</span>, <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #006600;">streamStreamingHandler</span>.<span style="color: #006600;">bind</span><span style="color:#006600; font-weight:bold;">&#40;</span><span style="color: #000066; font-weight: bold;">this</span><span style="color:#006600; font-weight:bold;">&#41;</span><span style="color:#006600; font-weight:bold;">&#41;</span>; </div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #006600;">rtmpGateway</span>.<span style="color: #006600;">addEventListener</span><span style="color:#006600; font-weight:bold;">&#40;</span>CBCR3.<span style="color: #006600;">Player</span>.<span style="color: #006600;">Events</span>.<span style="color: #006600;">RTMPStreamEvent</span>.<span style="color: #006600;">connected</span>, <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #006600;">streamConnectedHandler</span>.<span style="color: #006600;">bind</span><span style="color:#006600; font-weight:bold;">&#40;</span><span style="color: #000066; font-weight: bold;">this</span><span style="color:#006600; font-weight:bold;">&#41;</span><span style="color:#006600; font-weight:bold;">&#41;</span>; </div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #006600;">rtmpGateway</span>.<span style="color: #006600;">addEventListener</span><span style="color:#006600; font-weight:bold;">&#40;</span>CBCR3.<span style="color: #006600;">Player</span>.<span style="color: #006600;">Events</span>.<span style="color: #006600;">RTMPStreamEvent</span>.<span style="color: #006600;">metaDataConnected</span>, <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #006600;">rtmpMetaDataConnectedHandler</span>.<span style="color: #006600;">bind</span><span style="color:#006600; font-weight:bold;">&#40;</span><span style="color: #000066; font-weight: bold;">this</span><span style="color:#006600; font-weight:bold;">&#41;</span><span style="color:#006600; font-weight:bold;">&#41;</span>; </div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #006600;">rtmpGateway</span>.<span style="color: #006600;">addEventListener</span><span style="color:#006600; font-weight:bold;">&#40;</span>CBCR3.<span style="color: #006600;">Player</span>.<span style="color: #006600;">Events</span>.<span style="color: #006600;">RTMPStreamEvent</span>.<span style="color: #006600;">failed</span>, <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #006600;">rtmpMetaDataFailedHandler</span>.<span style="color: #006600;">bind</span><span style="color:#006600; font-weight:bold;">&#40;</span><span style="color: #000066; font-weight: bold;">this</span><span style="color:#006600; font-weight:bold;">&#41;</span><span style="color:#006600; font-weight:bold;">&#41;</span>; </div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp;</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp;</div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; <span style="color:#006600; font-weight:bold;">&#125;</span>, </div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp;</div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; streamReadyHandler:<span style="color: #003366; font-weight: bold;">function</span><span style="color:#006600; font-weight:bold;">&#40;</span>event<span style="color:#006600; font-weight:bold;">&#41;</span> </div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; <span style="color:#006600; font-weight:bold;">&#123;</span> </div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #009900; font-style: italic;">//handle stream event </span></div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; <span style="color:#006600; font-weight:bold;">&#125;</span>, </div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp;</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; streamConnectingHandler:<span style="color: #003366; font-weight: bold;">function</span><span style="color:#006600; font-weight:bold;">&#40;</span>event<span style="color:#006600; font-weight:bold;">&#41;</span> </div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; <span style="color:#006600; font-weight:bold;">&#123;</span>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #009900; font-style: italic;">//handle connecting event </span></div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; <span style="color:#006600; font-weight:bold;">&#125;</span>, </div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp;</div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; streamConnectedHandler:<span style="color: #003366; font-weight: bold;">function</span><span style="color:#006600; font-weight:bold;">&#40;</span>event<span style="color:#006600; font-weight:bold;">&#41;</span> </div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; <span style="color:#006600; font-weight:bold;">&#123;</span> </div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #009900; font-style: italic;">//handle connected event </span></div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; <span style="color:#006600; font-weight:bold;">&#125;</span>, </div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp;</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; rtmpMetaDataConnectedHandler:<span style="color: #003366; font-weight: bold;">function</span><span style="color:#006600; font-weight:bold;">&#40;</span>event<span style="color:#006600; font-weight:bold;">&#41;</span> </div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; <span style="color:#006600; font-weight:bold;">&#123;</span> </div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; &nbsp;<span style="color: #009900; font-style: italic;">//handle meta deta connected event </span></div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; <span style="color:#006600; font-weight:bold;">&#125;</span>, </div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp;</div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; rtmpMetaDataReceivedHandler:<span style="color: #003366; font-weight: bold;">function</span><span style="color:#006600; font-weight:bold;">&#40;</span>event<span style="color:#006600; font-weight:bold;">&#41;</span> </div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; <span style="color:#006600; font-weight:bold;">&#123;</span>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;</div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #009900; font-style: italic;">//handle meta data event etc etc </span></div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; <span style="color:#006600; font-weight:bold;">&#125;</span> </div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color:#006600; font-weight:bold;">&#41;</span>; </div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp;</div>
</li>
</ol>
</div>
</div>
</div>
<p>At the core, audio is always played by Flash. The swfs broadcast events, such as audio head position and download progress of mp3s, and connection, streaming, meta data events from RTMP. Those events get passed on the instance of the hidden stateful player.</p>
<p>Since the server frame is only loaded once when the site first loads, an instance of the stateful server player is instantiated for the entire session on the site. On each client frame page load, the server player instance is "injected" into the visible client UI controller by the "bootstrapper" top frame. State is maintained in that instance which allows for the controller to query the state of that object and reestablish everything like which track is playing, progress, time, thumbs up or down status, shuffle, play mode (stream or individual mp3 and playlists), etc. Everything had to be covered like if an mp3 was in mid-load when someone browsed to a new page, the loading progress had to pickup on the next page. Here's a example of the bootstrapper code contained in the frameset: </p>
<div class="igBar"><a href="javascript:showCodeTxt('javascript-14');">PLAIN TEXT</a></div>
<div class="syntax_hilite"><span style="color:#000000; font-weight:bold;">JAVASCRIPT:</span>
<div id="javascript-14">
<div class="javascript">
<ol>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp;</div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">CBCR3.<span style="color: #006600;">namespace</span><span style="color:#006600; font-weight:bold;">&#40;</span><span style="color: #3366CC;">"CBCR3.Player.Application"</span><span style="color:#006600; font-weight:bold;">&#41;</span>; </div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp;</div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">CBCR3.<span style="color: #006600;">Player</span>.<span style="color: #006600;">Application</span>.<span style="color: #006600;">R3PlayerBootStrap</span> = <span style="color: #003366; font-weight: bold;">Class</span>.<span style="color: #006600;">create</span><span style="color:#006600; font-weight:bold;">&#40;</span><span style="color:#006600; font-weight:bold;">&#123;</span> </div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp;</div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; serverFrame:<span style="color: #003366; font-weight: bold;">null</span>, </div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; clientFrame:<span style="color: #003366; font-weight: bold;">null</span>, </div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp;</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; autoStart:<span style="color: #003366; font-weight: bold;">true</span>, </div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; permalink:<span style="color: #003366; font-weight: bold;">null</span>, </div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp;</div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; initialize:<span style="color: #003366; font-weight: bold;">function</span><span style="color:#006600; font-weight:bold;">&#40;</span>preferences<span style="color:#006600; font-weight:bold;">&#41;</span> </div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; <span style="color:#006600; font-weight:bold;">&#123;</span>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;</div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #006600;">autoStart</span> = preferences.<span style="color: #006600;">autoStart</span>; </div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #006600;">permalink</span> = preferences.<span style="color: #006600;">permalink</span>;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;</div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; <span style="color:#006600; font-weight:bold;">&#125;</span>, </div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp;</div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; setServerFrame:<span style="color: #003366; font-weight: bold;">function</span><span style="color:#006600; font-weight:bold;">&#40;</span>serverFrame<span style="color:#006600; font-weight:bold;">&#41;</span> <span style="color:#006600; font-weight:bold;">&#123;</span> </div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #006600;">serverFrame</span> = serverFrame; </div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; <span style="color:#006600; font-weight:bold;">&#125;</span>,&nbsp; &nbsp; &nbsp;</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;</div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; setClientFrame:<span style="color: #003366; font-weight: bold;">function</span><span style="color:#006600; font-weight:bold;">&#40;</span>clientFrame<span style="color:#006600; font-weight:bold;">&#41;</span> <span style="color:#006600; font-weight:bold;">&#123;</span> </div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #006600;">clientFrame</span> = clientFrame;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;</div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; <span style="color:#006600; font-weight:bold;">&#125;</span>, </div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp;</div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp;</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; <span style="color: #009900; font-style: italic;">//TRY LOAD PLAYER </span></div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; loadPlayer:<span style="color: #003366; font-weight: bold;">function</span><span style="color:#006600; font-weight:bold;">&#40;</span><span style="color:#006600; font-weight:bold;">&#41;</span> </div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; <span style="color:#006600; font-weight:bold;">&#123;</span>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;</div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #000066; font-weight: bold;">if</span><span style="color:#006600; font-weight:bold;">&#40;</span>!<span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #006600;">clientFrame</span> || !<span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #006600;">serverFrame</span><span style="color:#006600; font-weight:bold;">&#41;</span> </div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #000066; font-weight: bold;">return</span>; </div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp;</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #009900; font-style: italic;">//both frames are loaded at this point </span></div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #000066; font-weight: bold;">if</span><span style="color:#006600; font-weight:bold;">&#40;</span><span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #006600;">serverFrame</span>.<span style="color: #006600;">getPlayerInstance</span><span style="color:#006600; font-weight:bold;">&#40;</span><span style="color:#006600; font-weight:bold;">&#41;</span> == <span style="color: #003366; font-weight: bold;">null</span><span style="color:#006600; font-weight:bold;">&#41;</span> </div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #006600;">initializePlayer</span><span style="color:#006600; font-weight:bold;">&#40;</span><span style="color:#006600; font-weight:bold;">&#41;</span>; </div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #000066; font-weight: bold;">else</span> </div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #006600;">resumePlayer</span><span style="color:#006600; font-weight:bold;">&#40;</span><span style="color:#006600; font-weight:bold;">&#41;</span>; </div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; <span style="color:#006600; font-weight:bold;">&#125;</span>, </div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp;</div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; initializePlayer:<span style="color: #003366; font-weight: bold;">function</span><span style="color:#006600; font-weight:bold;">&#40;</span><span style="color:#006600; font-weight:bold;">&#41;</span> </div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; <span style="color:#006600; font-weight:bold;">&#123;</span> </div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #006600;">serverFrame</span>.<span style="color: #006600;">initPlayer</span><span style="color:#006600; font-weight:bold;">&#40;</span><span style="color:#006600; font-weight:bold;">&#41;</span>; </div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp;</div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #006600;">clientFrame</span>.<span style="color: #006600;">checkEnvironment</span><span style="color:#006600; font-weight:bold;">&#40;</span><span style="color:#006600; font-weight:bold;">&#41;</span>; </div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #003366; font-weight: bold;">var</span> masterPlayerInstance = <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #006600;">serverFrame</span>.<span style="color: #006600;">getPlayerInstance</span><span style="color:#006600; font-weight:bold;">&#40;</span><span style="color:#006600; font-weight:bold;">&#41;</span>; </div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #006600;">clientFrame</span>.<span style="color: #006600;">loadPlayer</span><span style="color:#006600; font-weight:bold;">&#40;</span>masterPlayerInstance<span style="color:#006600; font-weight:bold;">&#41;</span>; </div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; &nbsp; masterPlayerInstance.<span style="color: #006600;">addEventListener</span><span style="color:#006600; font-weight:bold;">&#40;</span><span style="color: #3366CC;">"stateInitEvent:streamPlayerLoaded"</span>, <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #006600;">streamPlayerLoadedHandler</span>.<span style="color: #006600;">bind</span><span style="color:#006600; font-weight:bold;">&#40;</span><span style="color: #000066; font-weight: bold;">this</span><span style="color:#006600; font-weight:bold;">&#41;</span><span style="color:#006600; font-weight:bold;">&#41;</span>; </div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; &nbsp; masterPlayerInstance.<span style="color: #006600;">addEventListener</span><span style="color:#006600; font-weight:bold;">&#40;</span><span style="color: #3366CC;">"stateInitEvent:playlistPlayerLoaded"</span>, <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #006600;">playlistPlayerLoadedHandler</span>.<span style="color: #006600;">bind</span><span style="color:#006600; font-weight:bold;">&#40;</span><span style="color: #000066; font-weight: bold;">this</span><span style="color:#006600; font-weight:bold;">&#41;</span><span style="color:#006600; font-weight:bold;">&#41;</span>; </div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; <span style="color:#006600; font-weight:bold;">&#125;</span>, </div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp;</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; resumePlayer:<span style="color: #003366; font-weight: bold;">function</span><span style="color:#006600; font-weight:bold;">&#40;</span><span style="color:#006600; font-weight:bold;">&#41;</span> </div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; <span style="color:#006600; font-weight:bold;">&#123;</span> </div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #006600;">clientFrame</span>.<span style="color: #006600;">loadPlayer</span><span style="color:#006600; font-weight:bold;">&#40;</span><span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #006600;">serverFrame</span>.<span style="color: #006600;">getPlayerInstance</span><span style="color:#006600; font-weight:bold;">&#40;</span><span style="color:#006600; font-weight:bold;">&#41;</span><span style="color:#006600; font-weight:bold;">&#41;</span>; </div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #006600;">clientFrame</span>.<span style="color: #006600;">resumePlayer</span><span style="color:#006600; font-weight:bold;">&#40;</span><span style="color:#006600; font-weight:bold;">&#41;</span>;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; <span style="color:#006600; font-weight:bold;">&#125;</span>, </div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp;</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; streamPlayerLoadedHandler:<span style="color: #003366; font-weight: bold;">function</span><span style="color:#006600; font-weight:bold;">&#40;</span>event<span style="color:#006600; font-weight:bold;">&#41;</span> </div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; <span style="color:#006600; font-weight:bold;">&#123;</span> </div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #000066; font-weight: bold;">if</span><span style="color:#006600; font-weight:bold;">&#40;</span><span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #006600;">autoStart</span> &amp;&amp; <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #006600;">permalink</span>.<span style="color: #006600;">include</span><span style="color:#006600; font-weight:bold;">&#40;</span><span style="color: #3366CC;">"/stream/"</span><span style="color:#006600; font-weight:bold;">&#41;</span><span style="color:#006600; font-weight:bold;">&#41;</span> </div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #006600;">clientFrame</span>.<span style="color: #006600;">getPlayerInstance</span><span style="color:#006600; font-weight:bold;">&#40;</span><span style="color:#006600; font-weight:bold;">&#41;</span>.<span style="color: #006600;">stream</span><span style="color:#006600; font-weight:bold;">&#40;</span><span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #006600;">permalink</span><span style="color:#006600; font-weight:bold;">&#41;</span>; </div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; <span style="color:#006600; font-weight:bold;">&#125;</span>, </div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp;</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; playlistPlayerLoadedHandler: <span style="color: #003366; font-weight: bold;">function</span><span style="color:#006600; font-weight:bold;">&#40;</span>event<span style="color:#006600; font-weight:bold;">&#41;</span> </div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; <span style="color:#006600; font-weight:bold;">&#123;</span> </div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #000066; font-weight: bold;">if</span><span style="color:#006600; font-weight:bold;">&#40;</span><span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #006600;">autoStart</span> &amp;&amp; <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #006600;">permalink</span>.<span style="color: #006600;">include</span><span style="color:#006600; font-weight:bold;">&#40;</span><span style="color: #3366CC;">"/play/"</span><span style="color:#006600; font-weight:bold;">&#41;</span><span style="color:#006600; font-weight:bold;">&#41;</span> </div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #006600;">clientFrame</span>.<span style="color: #006600;">getPlayerInstance</span><span style="color:#006600; font-weight:bold;">&#40;</span><span style="color:#006600; font-weight:bold;">&#41;</span>.<span style="color: #006600;">playlist</span><span style="color:#006600; font-weight:bold;">&#40;</span><span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #006600;">permalink</span><span style="color:#006600; font-weight:bold;">&#41;</span>; </div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; <span style="color:#006600; font-weight:bold;">&#125;</span> </div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color:#006600; font-weight:bold;">&#125;</span><span style="color:#006600; font-weight:bold;">&#41;</span>;</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp;</div>
</li>
</ol>
</div>
</div>
</div>
<p>We used Prototype/Scriptaculous as the base for the entire site. All the AJAX communication is handled with asp.net web services with scripting enabled. ASP.NET takes care of all the serialization of DTO's (Data Transfer Object) into JSON which are specific to the player application. </p>
<p>All of the classes in the application are written using Prototype's Class/inheritance model. Most of the classes subclass from a base EventDispatcher much like AS3, which is adapted from <a href="http://positionabsolute.net/blog/2007/06/event-dispatcher.php">Matthew Foster's example</a> for Prototype and our own custom Event model. This allows for a nice separation of concerns and decoupled classes throughout the application and allows the UI Controller to add event listeners to custom events coming from the server player instance.</p>
<div class="igBar"><a href="javascript:showCodeTxt('javascript-15');">PLAIN TEXT</a></div>
<div class="syntax_hilite"><span style="color:#000000; font-weight:bold;">JAVASCRIPT:</span>
<div id="javascript-15">
<div class="javascript">
<ol>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp;</div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">CBCR3.<span style="color: #006600;">namespace</span><span style="color:#006600; font-weight:bold;">&#40;</span><span style="color: #3366CC;">"CBCR3.Commons"</span><span style="color:#006600; font-weight:bold;">&#41;</span>; </div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp;</div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">CBCR3.<span style="color: #006600;">Commons</span>.<span style="color: #006600;">EventDispatcher</span> = <span style="color: #003366; font-weight: bold;">Class</span>.<span style="color: #006600;">create</span><span style="color:#006600; font-weight:bold;">&#40;</span><span style="color:#006600; font-weight:bold;">&#123;</span> </div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp;</div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; buildListenerChain:<span style="color: #003366; font-weight: bold;">function</span><span style="color:#006600; font-weight:bold;">&#40;</span><span style="color:#006600; font-weight:bold;">&#41;</span> </div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; <span style="color:#006600; font-weight:bold;">&#123;</span> </div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #000066; font-weight: bold;">if</span><span style="color:#006600; font-weight:bold;">&#40;</span>!<span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #006600;">listenerChain</span><span style="color:#006600; font-weight:bold;">&#41;</span> </div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #006600;">listenerChain</span> = <span style="color:#006600; font-weight:bold;">&#123;</span><span style="color:#006600; font-weight:bold;">&#125;</span>;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp;</div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; <span style="color:#006600; font-weight:bold;">&#125;</span>, </div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp;</div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; addEventListener:<span style="color: #003366; font-weight: bold;">function</span><span style="color:#006600; font-weight:bold;">&#40;</span>type, listener<span style="color:#006600; font-weight:bold;">&#41;</span><span style="color:#006600; font-weight:bold;">&#123;</span> </div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #000066; font-weight: bold;">if</span><span style="color:#006600; font-weight:bold;">&#40;</span>!listener <span style="color: #000066; font-weight: bold;">instanceof</span> <span style="color: #003366; font-weight: bold;">Function</span><span style="color:#006600; font-weight:bold;">&#41;</span> </div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #000066;">alert</span><span style="color:#006600; font-weight:bold;">&#40;</span><span style="color: #3366CC;">"Listener isn't a function"</span><span style="color:#006600; font-weight:bold;">&#41;</span>; </div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #006600;">buildListenerChain</span><span style="color:#006600; font-weight:bold;">&#40;</span><span style="color:#006600; font-weight:bold;">&#41;</span>; </div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #000066; font-weight: bold;">if</span><span style="color:#006600; font-weight:bold;">&#40;</span>!<span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #006600;">listenerChain</span><span style="color:#006600; font-weight:bold;">&#91;</span>type<span style="color:#006600; font-weight:bold;">&#93;</span><span style="color:#006600; font-weight:bold;">&#41;</span>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #006600;">listenerChain</span><span style="color:#006600; font-weight:bold;">&#91;</span>type<span style="color:#006600; font-weight:bold;">&#93;</span> = <span style="color:#006600; font-weight:bold;">&#91;</span>listener<span style="color:#006600; font-weight:bold;">&#93;</span>; </div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #000066; font-weight: bold;">else</span> </div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #006600;">listenerChain</span><span style="color:#006600; font-weight:bold;">&#91;</span>type<span style="color:#006600; font-weight:bold;">&#93;</span>.<span style="color: #006600;">push</span><span style="color:#006600; font-weight:bold;">&#40;</span>listener<span style="color:#006600; font-weight:bold;">&#41;</span>; </div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;</div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; <span style="color:#006600; font-weight:bold;">&#125;</span>, </div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;</div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; hasEventListener:<span style="color: #003366; font-weight: bold;">function</span><span style="color:#006600; font-weight:bold;">&#40;</span>type<span style="color:#006600; font-weight:bold;">&#41;</span> </div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; <span style="color:#006600; font-weight:bold;">&#123;</span> </div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #000066; font-weight: bold;">return</span> <span style="color:#006600; font-weight:bold;">&#40;</span><span style="color: #000066; font-weight: bold;">typeof</span> <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #006600;">listenerChain</span><span style="color:#006600; font-weight:bold;">&#91;</span>type<span style="color:#006600; font-weight:bold;">&#93;</span> != <span style="color: #3366CC;">"undefined"</span><span style="color:#006600; font-weight:bold;">&#41;</span>; </div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; <span style="color:#006600; font-weight:bold;">&#125;</span>, </div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp;</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; removeEventListener:<span style="color: #003366; font-weight: bold;">function</span><span style="color:#006600; font-weight:bold;">&#40;</span>type, listener<span style="color:#006600; font-weight:bold;">&#41;</span> </div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; <span style="color:#006600; font-weight:bold;">&#123;</span> </div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #000066; font-weight: bold;">if</span><span style="color:#006600; font-weight:bold;">&#40;</span>!<span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #006600;">hasEventListener</span><span style="color:#006600; font-weight:bold;">&#40;</span>type<span style="color:#006600; font-weight:bold;">&#41;</span><span style="color:#006600; font-weight:bold;">&#41;</span> </div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #000066; font-weight: bold;">return</span> <span style="color: #003366; font-weight: bold;">false</span>; </div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp;</div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #000066; font-weight: bold;">for</span><span style="color:#006600; font-weight:bold;">&#40;</span><span style="color: #003366; font-weight: bold;">var</span> i = <span style="color:#800000;">0</span>; i &amp;lt;this.<span style="color: #006600;">listenerChain</span><span style="color:#006600; font-weight:bold;">&#91;</span>type<span style="color:#006600; font-weight:bold;">&#93;</span>.<span style="color: #006600;">length</span>; i++<span style="color:#006600; font-weight:bold;">&#41;</span> </div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #000066; font-weight: bold;">if</span><span style="color:#006600; font-weight:bold;">&#40;</span><span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #006600;">listenerChain</span><span style="color:#006600; font-weight:bold;">&#91;</span>type<span style="color:#006600; font-weight:bold;">&#93;</span><span style="color:#006600; font-weight:bold;">&#91;</span>i<span style="color:#006600; font-weight:bold;">&#93;</span> == listener<span style="color:#006600; font-weight:bold;">&#41;</span> </div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #006600;">listenerChain</span>.<span style="color: #006600;">splice</span><span style="color:#006600; font-weight:bold;">&#40;</span>i, <span style="color:#800000;">1</span><span style="color:#006600; font-weight:bold;">&#41;</span>; </div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp;</div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; <span style="color:#006600; font-weight:bold;">&#125;</span>, </div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp;</div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; clearEventListeners:<span style="color: #003366; font-weight: bold;">function</span><span style="color:#006600; font-weight:bold;">&#40;</span><span style="color:#006600; font-weight:bold;">&#41;</span> </div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; <span style="color:#006600; font-weight:bold;">&#123;</span> </div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #006600;">listenerChain</span> = <span style="color:#006600; font-weight:bold;">&#123;</span><span style="color:#006600; font-weight:bold;">&#125;</span>; </div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; <span style="color:#006600; font-weight:bold;">&#125;</span>, </div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp;</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; dispatchEvent:<span style="color: #003366; font-weight: bold;">function</span><span style="color:#006600; font-weight:bold;">&#40;</span>type, data, target<span style="color:#006600; font-weight:bold;">&#41;</span> </div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; <span style="color:#006600; font-weight:bold;">&#123;</span>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #003366; font-weight: bold;">var</span>&nbsp; &nbsp; event = <span style="color: #003366; font-weight: bold;">new</span> CBCR3.<span style="color: #006600;">Commons</span>.<span style="color: #006600;">Event</span><span style="color:#006600; font-weight:bold;">&#40;</span>type, data, target || <span style="color: #000066; font-weight: bold;">this</span><span style="color:#006600; font-weight:bold;">&#41;</span>; </div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #006600;">buildListenerChain</span><span style="color:#006600; font-weight:bold;">&#40;</span><span style="color:#006600; font-weight:bold;">&#41;</span>; </div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp;</div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #000066; font-weight: bold;">if</span><span style="color:#006600; font-weight:bold;">&#40;</span>!<span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #006600;">hasEventListener</span><span style="color:#006600; font-weight:bold;">&#40;</span>type<span style="color:#006600; font-weight:bold;">&#41;</span><span style="color:#006600; font-weight:bold;">&#41;</span> </div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #000066; font-weight: bold;">return</span> <span style="color: #003366; font-weight: bold;">false</span>; </div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp;</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #006600;">listenerChain</span><span style="color:#006600; font-weight:bold;">&#91;</span>type<span style="color:#006600; font-weight:bold;">&#93;</span>.<span style="color: #006600;">any</span><span style="color:#006600; font-weight:bold;">&#40;</span><span style="color: #003366; font-weight: bold;">function</span><span style="color:#006600; font-weight:bold;">&#40;</span>funct<span style="color:#006600; font-weight:bold;">&#41;</span><span style="color:#006600; font-weight:bold;">&#123;</span> </div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #000066; font-weight: bold;">return</span> <span style="color:#006600; font-weight:bold;">&#40;</span>funct<span style="color:#006600; font-weight:bold;">&#40;</span>event<span style="color:#006600; font-weight:bold;">&#41;</span> == <span style="color: #003366; font-weight: bold;">false</span> ? <span style="color: #003366; font-weight: bold;">true</span> : <span style="color: #003366; font-weight: bold;">false</span><span style="color:#006600; font-weight:bold;">&#41;</span>; </div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; &nbsp; <span style="color:#006600; font-weight:bold;">&#125;</span><span style="color:#006600; font-weight:bold;">&#41;</span>; </div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; <span style="color:#006600; font-weight:bold;">&#125;</span> </div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color:#006600; font-weight:bold;">&#125;</span><span style="color:#006600; font-weight:bold;">&#41;</span>;</div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp;</div>
</li>
</ol>
</div>
</div>
</div>
<p>This also allows the UI Controller to unsubscribe from all events when the page unloads. This was key in memory management and so that we don't get orphaned references to instances of the UI Controller. </p>
<p>The most difficult part of the whole player project was re-establishing state of the controller on every page load. We hoped that we could implement some sort of state-pattern with no luck. In the end, the UI controller contains a couple monster resume methods that we haven't been able to abstract out of that class. We'd like to bring in some sort of MVC architecture that wires up the UI player view to a state object. Any suggestions would be welcome! Go check out the site and give us some feedback!</p>
<p><em>Dion: I then asked Phil about the CBCR3 library and he replied</em></p>
<p>CBCR3 is the base namespace for all th javascript controls and apps written for the site. Everything for the player is in CBCR3.Player, the concert calendar is CBCR3.Gigs, etc. We have a shared base lib which is in CBCR3.Commons.</p>
<p>An issue with Prototype that we had was some bug with including 1.6.1 in a frameset in Opera. So, right now the frameset is holding an older version of prototype while the frames have the latest. One thing that Prototype was seriously lacking was Date extensions. (like addDay, addMonth, addWeek) etc.<br />
We ended up going with <a href="http://developer.yahoo.com/yui/docs/YAHOO.widget.DateMath.html">YUI's DateMath widget</a> for that which really smoothed out working with dates.</p>
<p>Most of the issues we had cross-browser stuff was with IE6 (no surprise), which were almost all related to CSS rendering bugs, and IE DOM manipulation problems. A big one was upon the dynamic removal of items from lists. IE has a real hard time refreshing the positions of items. We had to write methods like</p>
<div class="igBar"><a href="javascript:showCodeTxt('javascript-16');">PLAIN TEXT</a></div>
<div class="syntax_hilite"><span style="color:#000000; font-weight:bold;">JAVASCRIPT:</span>
<div id="javascript-16">
<div class="javascript">
<ol>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp;</div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">myList.<span style="color: #006600;">select</span><span style="color:#006600; font-weight:bold;">&#40;</span><span style="color: #3366CC;">"li"</span><span style="color:#006600; font-weight:bold;">&#41;</span>.<span style="color: #006600;">each</span><span style="color:#006600; font-weight:bold;">&#40;</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color:#006600; font-weight:bold;">&#40;</span><span style="color: #000066; font-weight: bold;">item</span><span style="color:#006600; font-weight:bold;">&#41;</span><span style="color:#006600; font-weight:bold;">&#123;</span></div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp;li.<span style="color: #006600;">setStyle</span><span style="color:#006600; font-weight:bold;">&#40;</span><span style="color:#006600; font-weight:bold;">&#123;</span>display:<span style="color: #3366CC;">"none"</span><span style="color:#006600; font-weight:bold;">&#125;</span><span style="color:#006600; font-weight:bold;">&#41;</span>;</div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp;li.<span style="color: #006600;">setStyle</span><span style="color:#006600; font-weight:bold;">&#40;</span><span style="color:#006600; font-weight:bold;">&#123;</span>display:<span style="color: #3366CC;">"block"</span><span style="color:#006600; font-weight:bold;">&#125;</span><span style="color:#006600; font-weight:bold;">&#41;</span>;</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color:#006600; font-weight:bold;">&#125;</span><span style="color:#006600; font-weight:bold;">&#41;</span>;</div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp;</div>
</li>
</ol>
</div>
</div>
</div>
<p>this would in effect "nudge" the browser and force it to update the position of the remaining DOM elements. In the end, we chose to drop IE6 support and to tell you the truth, we haven't heard a single complaint about it!</p>
]]></content:encoded>
			<wfw:commentRss>http://ajaxian.com/archives/cbc-radio-3-case-study/feed</wfw:commentRss>
		<slash:comments>12</slash:comments>
		</item>
		<item>
		<title>A note from the editors; Hat change!</title>
		<link>http://ajaxian.com/archives/a-note-from-the-editors-hat-change</link>
		<comments>http://ajaxian.com/archives/a-note-from-the-editors-hat-change#comments</comments>
		<pubDate>Mon, 28 Sep 2009 22:07:17 +0000</pubDate>
		<dc:creator>Dion Almaer</dc:creator>
				<category><![CDATA[Editorial]]></category>
		<category><![CDATA[Front Page]]></category>

		<guid isPermaLink="false">http://ajaxian.com/?p=7466</guid>
		<description><![CDATA[Dear Ajaxian Community, As editors-in-chief so to speak, I always feel that it is important to fully disclose to the community any affiliation change. We have always tried to by balanced, and show that by featuring all kinds of news (for example, we haven't been shy at posting about great WebKit tech while at Mozilla, <a href="http://ajaxian.com/archives/a-note-from-the-editors-hat-change">Read the rest...</a>]]></description>
			<content:encoded><![CDATA[<p>Dear Ajaxian Community,</p>
<p>As editors-in-chief so to speak, I always feel that it is important to fully disclose to the community any affiliation change. We have always tried to by balanced, and show that by featuring all kinds of news (for example, we haven't been shy at posting about great WebKit tech while at Mozilla, or amazing IE news ( ;) when at Google.)</p>
<p>Ben and I are <a href="http://almaer.com/blog/joining-palm-with-ben">now</a> <a href="http://benzilla.galbraiths.org/2009/09/25/palm/">at</a> <a href="http://pdnblog.palm.com/2009/09/ben-galbraith-and-dion-almaer-to-lead-developer-relations-team-at-palm/">Palm</a> leading up the developer relations team.</p>
<p>We started <a href="http://devphone.com/">devphone</a> awhile back as a place to talk about mobile dev, but I personally didn't have the gas to write a lot about that as I was mainly interested in the Web side of mobile development. Thus, my excitement when Palm released webOS and I had a nice path to take my Ajax skills to the rapidly growing mobile Web market.</p>
<p>You can expect to see some more mobile Web news, just because I will be looking at that world a lot more. However, you shouldn't expect to see any lack of other news, and we also <a href="mailto:ajaxians@ajaxian.com">love to accept contributions</a> both as quick links to great Ajax news, but also guest posts. We really do see this as your community!</p>
<p>Also, expect to continue to see Bespin and Mozilla news, because we are very much going to continue to be involved in that community. I am in a Bespin meeting right now! Yay open source, and open companies like Mozilla!</p>
<p>Thanks for being loyal readers for the life of Ajaxian.com so far, and we look forward to serving you even more in the future!</p>
<p>Cheers,</p>
<p><a href="http://twitter.com/dalmaer">Dion</a> and <a href="http://twitter.com/bgalbs">Ben</a></p>
]]></content:encoded>
			<wfw:commentRss>http://ajaxian.com/archives/a-note-from-the-editors-hat-change/feed</wfw:commentRss>
		<slash:comments>12</slash:comments>
		</item>
		<item>
		<title>Why I’m Done Making Desktop Applications</title>
		<link>http://ajaxian.com/archives/why-i%e2%80%99m-done-making-desktop-applications</link>
		<comments>http://ajaxian.com/archives/why-i%e2%80%99m-done-making-desktop-applications#comments</comments>
		<pubDate>Fri, 11 Sep 2009 11:21:21 +0000</pubDate>
		<dc:creator>Dion Almaer</dc:creator>
				<category><![CDATA[Editorial]]></category>
		<category><![CDATA[Front Page]]></category>

		<guid isPermaLink="false">http://ajaxian.com/?p=7330</guid>
		<description><![CDATA[Patrick Mckenzie has written an interesting editorial comparing his life as a desktop developer and a Web one. He talks about an application that he has traditionally sold as a desktop app, and how it is faring on the Web. Bingo Card Creator is the application in question, and he has strong opinions :) Over <a href="http://ajaxian.com/archives/why-i%e2%80%99m-done-making-desktop-applications">Read the rest...</a>]]></description>
			<content:encoded><![CDATA[<p><a href="http://twitter.com/patio11">Patrick Mckenzie</a> has written an interesting <a href="http://www.kalzumeus.com/2009/09/05/desktop-aps-versus-web-apps/">editorial comparing his life as a desktop developer and a Web one</a>.</p>
<p>He talks about an application that he has traditionally sold as a desktop app, and how it is faring on the Web. <a href="http://www.bingocardcreator.com/">Bingo Card Creator</a> is the application in question, and he has strong opinions :)</p>
<blockquote><p>
Over roughly the same period my day job has changed and transitioned me from writing thick clients in Swing to big freaking enterprise web apps.  I’ve learned SQL, Rails, etc and used them to fairly decent effect in selling Bingo Card Creator, which is a Swing app (if all you have is a hammer…).  This summer, I decided to try stepping my web programming skills up a notch, and released a web version of Bingo Card Creator.  It has exceeded all my expectations: in ease of writing, in features, in sales, in support burden, in marketability, etc.  In game theory terms, it strictly dominates the desktop version, when seen from the eyes of the developer at any rate.</p>
<p>If I were starting out today, I would, without a shadow of a doubt, write a web app instead of a desktop app, for these reasons:</p>
<ul>
<li>The Shareware Funnel Is Lethal
</li>
<li>Web Applications Convert Better
</li>
<li>Your AdWords Strategy Is Very Sensitive To Conversion Rates
</li>
<li>Web Applications Are Easier To Support
</li>
<li>The Age Of The Pirates Is Coming An End, Jack
</li>
<li>Phone Home vs. Google Analytics
</li>
<li>Web Apps Can Be Customized Per User
</li>
</ul>
<p>Interesting to read. Note, Patrick does admit that he much prefers desktop apps in general (e.g. Excel &gt; Google Docs).</p>
<p>We are all so into the Web, that we are often very critical. Web apps are too hard to build. They are too hard to monetize. However, the grass isn't always greener on the other side, and this shows you how brown it can be.</p></blockquote>
]]></content:encoded>
			<wfw:commentRss>http://ajaxian.com/archives/why-i%e2%80%99m-done-making-desktop-applications/feed</wfw:commentRss>
		<slash:comments>7</slash:comments>
		</item>
		<item>
		<title>Web OS? Web VM? Value in both?</title>
		<link>http://ajaxian.com/archives/web-os-web-vm-value-in-both</link>
		<comments>http://ajaxian.com/archives/web-os-web-vm-value-in-both#comments</comments>
		<pubDate>Tue, 01 Sep 2009 12:18:49 +0000</pubDate>
		<dc:creator>Dion Almaer</dc:creator>
				<category><![CDATA[Browsers]]></category>
		<category><![CDATA[Editorial]]></category>
		<category><![CDATA[Front Page]]></category>

		<guid isPermaLink="false">http://ajaxian.com/?p=7323</guid>
		<description><![CDATA[The following post comes from my personal blog Chrome OS created a whole slew of buzz around the Web finally being an OS. There are many other examples of this of course. On the desktop we have had the likes of moblin and Jolicloud for quite some time. On the phone we have webOS. The <a href="http://ajaxian.com/archives/web-os-web-vm-value-in-both">Read the rest...</a>]]></description>
			<content:encoded><![CDATA[<p><em>The following post comes from <a href="http://almaer.com/blog/the-web-is-the-most-successful-fantastic-virtual-machine">my personal blog</a></em></p>
<p>Chrome OS created a whole slew of buzz around the Web finally being an OS. There are many other examples of this of course. On the desktop we have had the likes of <a href="http://moblin.org/">moblin</a> and <a href="http://www.jolicloud.com/">Jolicloud</a> for quite some time. On the phone we have <a href="http://developer.palm.com/">webOS</a>.</p>
<p><b>The Web as a virtual machine</b></p>
<p>In many ways, it seems obvious that this will happen. When I look at my desktop, I often find it looking like this:</p>
<p><img src="http://almaer.com/blog/uploads/browserasvm.png" alt="browserasvm" title="browserasvm" width="500" height="308" class="alignnone size-full wp-image-2526" /></p>
<p>which looks surprisingly similar to this:</p>
<p><img src="http://almaer.com/blog/uploads/windowsinmac.jpg" alt="windowsinmac" title="windowsinmac" width="500" height="313" class="alignnone size-full wp-image-2527" /></p>
<p>Wait a minute. Can't you look at the browser as being a virtual machine for the Web? A hugely successful one that has been ported to almost every platform known to man. It is a viral virtual machine that has become so successful due to its simple yet powerful constructs that allowed the platforms to do the porting (oh and it was friggin made to be free! Take that <a href="http://en.wikipedia.org/wiki/Gopher_(protocol)">gopher</a>!). As a virtual machine it grew so fast that it is quickly usurping the hosts themselves. The traditional operating systems. Applications are being written for the VM rather than the OS. This is very different to the diagram that has Windows running inside a VM on the Mac. In that case you are running applications written for Windows on the Mac. The virtualization crew have done wonders to make that emulation possible. With the Web you didn't quite need those tricks, and instead thanks to Web standards, you just had to write a browser.</p>
<p><b>Going inside out</b></p>
<p>Normally, we have seen systems built natively and then we virtualize them. In the case of the Web, the "Web platform" is the host environment and the VM. As this environment has become stronger and stronger, there is bound to be the time to ask "do we need our host anymore?" We are on the fringe of that time right now where a huge bulk of the applications that people use are Web based.</p>
<p>I just ran an experiment in this area myself. The hard drive in my Macbook Pro died and while the kind folks at the local Apple store replaced it I had to pick up a random machine for use. What would life be like if I had to work on a random machine? I purposely didn't restore from my own backup, and ended up with a week seeing how much of this cloud thing I use.</p>
<p>It turned out that all of the apps that weren't somehow cloud based were now a pain in the arse. Obviously I could get my email with Gmail and the other Web apps were there. However it went further than that. I could download <a href="http://www.atebits.com/tweetie-iphone/">Tweetie</a> and be instantly up and running where I left off (thanks to the fact that Twitter is just a Web service). I got to see which IM servers did a good job keeping my server based contacts, and what a pain it is when you make changes on the local client to tell you that <em>flubber65</em> is <em>Frank</em> and suddenly you have no idea who anyone is without that (NOTE: if you build a service, for gods sake save everything up there!).</p>
<p>It even made me happy for <a href="http://bespin.mozilla.com/">Bespin</a>, as I was able to get to a bunch of my code. That has incentivized me to help make Bespin great :)</p>
<p>So, I learned that Web based services won. I was productive on a random machine in minutes, and cursed the situations where this wasn't the case (mainly around development).</p>
<p>If the entire OS was Web based, with a rich cloud infrastructure, then I could literally login to any machine and be ready to roll. X Windows productivity will be back! :)  This will greatly change the role of devices too. Seamless upgrades. Multiple devices sharing data. Fun times.</p>
<p>So, Web OS it is. Hopefully the Web platform will be complete enough, and where it isn't this kind of force behind it will push it even faster (this is why I am excited to see the space heat up, and also wanting to keep a watchful eye to see how things get standardized with crazy timelines behind them).</p>
<p><b>What do we lose?</b></p>
<p>But, wait a minute. We have seen that virtual machines are actually pretty awesome. Having an entire system in a single file that I can suspend, backup, and run multiple off? Cool. I am running multiple "Web OS's" every day (Firefox, Safari, Chrome). I can update them whenever I want, and they can compete.</p>
<p>We also see fantastic features where we can watch over all of the connections from the virtual machine to the host. Tweak how ethernet works, set limits on various usage, etc. Just as we are getting amazing things out of virtual machines.... maybe we don't need the Web platform to move from there just yet.</p>
<p><b>User-Agent</b></p>
<p>Chris Beard (Chief Innovation Officer at Mozilla) is often talking about what it means for the browser to be the "users agent". There is so much that the s/browser/virtual-web-machine/g can be doing for us, and we have only just begun.</p>
<p>We need to be wary of losing out on any of these thoughts if the Web becomes the OS on the computer (whatever that means, of course!).</p>
<p>As we think about <a href="https://jetpack.mozillalabs.com/">Jetpack</a> and granting enhanced functionality from Web apps to browser-chrome I am often thinking about a morphing browser. When I am on Gmail, I don't need the URL bar and all of that jazz. Instead, add new Gmail specific UI for me to use, and let me tie into the local system for contacts etc.</p>
<p>In that vein, it has been nice to see a step in that direction when listening to <a href="http://limi.net/">Alexander Limi</a> speak about UX in Firefox last week. He and the UX team showed some concept mockups for future versions of Firefox such as this:</p>
<p><img src="https://wiki.mozilla.org/images/7/7e/Mockup-4-0-Vista-%28TabsTop%29-%28LocBarSearch%29.png" width="500"/></p>
<p>By the "home" tab you can imagine other tabs that are for applications. Thin tabs that just have an icon (e.g. an email notification icon showing new message counts). These "app tabs" can be slightly magical. The user has to bless them, and at that time can grant special powers to access local services such as a File API, or a Webcam, or Geo location, or [insert cool thing that native apps can do]. This feels like a small step for the browser, but one that can open up a lot.</p>
<p>In conclusion, I am bullish about the Web being called the 'OS' on certain computing devices. I am most excited about seeing this driving innovation into the Web platform as a whole, and also exploring the great side of having a platform run as a virtual machine on your hardware. Gotta love the Web :)</p>
]]></content:encoded>
			<wfw:commentRss>http://ajaxian.com/archives/web-os-web-vm-value-in-both/feed</wfw:commentRss>
		<slash:comments>23</slash:comments>
		</item>
		<item>
		<title>Craftmanship and UI latency</title>
		<link>http://ajaxian.com/archives/craftmanship-and-ui-latency</link>
		<comments>http://ajaxian.com/archives/craftmanship-and-ui-latency#comments</comments>
		<pubDate>Mon, 08 Jun 2009 05:25:42 +0000</pubDate>
		<dc:creator>Dion Almaer</dc:creator>
				<category><![CDATA[Editorial]]></category>
		<category><![CDATA[Front Page]]></category>

		<guid isPermaLink="false">http://ajaxian.com/?p=6900</guid>
		<description><![CDATA[Ben gave a fantastic talk on creating compelling user experiences that discussed craftmanship in software. He details the somewhat opposing views of Alan Cooper (pictured above) and Joel Spolsky talking about how IT people are screwed when it comes to quality. A depressing thought, and one that we need to combat in the trenches by <a href="http://ajaxian.com/archives/craftmanship-and-ui-latency">Read the rest...</a>]]></description>
			<content:encoded><![CDATA[<p><img src="http://bengalbraith.files.wordpress.com/2009/06/cooper11.png?w=500"/></p>
<p>Ben gave a fantastic talk on creating compelling user experiences that discussed <a href="http://benzilla.galbraiths.org/2009/06/04/craftmanship/">craftmanship in software</a>.</p>
<p>He details the somewhat opposing views of Alan Cooper (pictured above) and Joel Spolsky <a href="http://www.joelonsoftware.com/articles/Craftsmanship.html">talking about how IT people are screwed when it comes to quality</a>. A depressing thought, and one that we need to combat in the trenches by just creating great software at work and proving that it is a winning strategy.</p>
<p>One piece of the talk I wanted to highlight was when Ben discussed UI latency. He has a simple <a href="http://galbraiths.org/feedback">feedback test page</a> that lets you see how various delays make you feel. Give it a go and think about what feels sluggish and annoying. It differs between people, but 100ms feels like the "noticeable" level and 200+ feels sluggish. We should have a page that doesn't show numbers and is randomly setup, and then do a test. What do you think?</p>
<p>Also, to finish off, you owe it to yourself to spend a couple of minutes watching this awesome rant of Louis C.K. as he discusses how screwed up we are wrt expectations:</p>
<p><object width="425" height="344"><param name="movie" value="http://www.youtube.com/v/jETv3NURwLc&#038;color1=0xb1b1b1&#038;color2=0xcfcfcf&#038;feature=player_embedded&#038;fs=1"></param><param name="allowFullScreen" value="true"></param><embed src="http://www.youtube.com/v/jETv3NURwLc&#038;color1=0xb1b1b1&#038;color2=0xcfcfcf&#038;feature=player_embedded&#038;fs=1" type="application/x-shockwave-flash" allowfullscreen="true" width="425" height="344"></embed></object></p>
<p>This is actually incredibly relevant to us as developers, as we run up against expectations in software too. Do you want to meet expectations? Or set new boundaries?</p>
]]></content:encoded>
			<wfw:commentRss>http://ajaxian.com/archives/craftmanship-and-ui-latency/feed</wfw:commentRss>
		<slash:comments>2</slash:comments>
		</item>
		<item>
		<title>Someone at Apple, please review stance on PhoneGap</title>
		<link>http://ajaxian.com/archives/someone-at-apple-please-review-stance-on-phonegap</link>
		<comments>http://ajaxian.com/archives/someone-at-apple-please-review-stance-on-phonegap#comments</comments>
		<pubDate>Tue, 19 May 2009 02:03:44 +0000</pubDate>
		<dc:creator>Dion Almaer</dc:creator>
				<category><![CDATA[Editorial]]></category>
		<category><![CDATA[Front Page]]></category>
		<category><![CDATA[iPhone]]></category>

		<guid isPermaLink="false">http://ajaxian.com/?p=6818</guid>
		<description><![CDATA[We are big fans of PhoneGap, the "open source development tool for building fast, easy mobile apps with JavaScript" including apps that run on the iPhone platform. The PhoneGap team has been winning awards and developers like it. However, we have just heard that some applications using PhoneGap have been targetted by the Apple review <a href="http://ajaxian.com/archives/someone-at-apple-please-review-stance-on-phonegap">Read the rest...</a>]]></description>
			<content:encoded><![CDATA[<p>We are big fans of <a href="http://phonegap.com/">PhoneGap</a>, the "open source development tool for building fast, easy mobile apps with JavaScript" including apps that run on the iPhone platform.</p>
<p>The PhoneGap team has been <a href="http://www.techcrunch.com/2009/04/02/5-startups-take-flight-at-web-20-launchpad/">winning awards</a> and developers like it.</p>
<p>However, we have just heard that <a href="http://blog.nachbaur.com/2009/05/open-letter-to-apple-iphone-developer.html">some applications using PhoneGap</a> have been targetted by the Apple review process:</p>
<blockquote><p>
Upon review of your application,  cannot be posted to the<br />
App Store due to the usage of private API. Usage of such non-public<br />
API, as outlined in the iPhone SDK Agreement section 3.3.2 is<br />
prohibited:</p>
<p>" An Application may not itself install or launch other executable<br />
code by any means, including without limitation through use of a plug-<br />
in architecture, calling other frameworks, other APIs or otherwise.<br />
No interpreted code may be downloaded and used in an Application<br />
except for code that is interpreted and run by Apple's Published APIs<br />
and built-in interpreter(s).</p>
<p>The PhoneGap API implemented in your application is an external<br />
framework.
</p></blockquote>
<p>This is just wrong. They haven't targeted RegexKitLite or Google Toolbox for Mac, or Joe Hewitt's cool new framework. PhoneGap only uses official APIs, so it isn't doing anything wrong there.</p>
<p>You could assume that this is on purpose, to keep people in the Obj-C sandbox. Or, you could consider the fact that the review process is probably manned by a LOT of people who sit there with check lists. I am hoping that someone at Apple gets to see the outcry from developers and steps in to do the right thing, just like they did when Trent Reznor and many others complained about the hypocrisy of his iPhone app not getting in the store.</p>
<p>So, fix it Apple. Please.</p>
]]></content:encoded>
			<wfw:commentRss>http://ajaxian.com/archives/someone-at-apple-please-review-stance-on-phonegap/feed</wfw:commentRss>
		<slash:comments>23</slash:comments>
		</item>
		<item>
		<title>Excuse me, maybe, the foundries, erm, let&#8217;s mess with em?</title>
		<link>http://ajaxian.com/archives/excuse-me-maybe-the-foundries-erm-lets-mess-with-em</link>
		<comments>http://ajaxian.com/archives/excuse-me-maybe-the-foundries-erm-lets-mess-with-em#comments</comments>
		<pubDate>Mon, 27 Apr 2009 11:07:52 +0000</pubDate>
		<dc:creator>Dion Almaer</dc:creator>
				<category><![CDATA[Editorial]]></category>
		<category><![CDATA[Front Page]]></category>
		<category><![CDATA[font]]></category>

		<guid isPermaLink="false">http://ajaxian.com/?p=6691</guid>
		<description><![CDATA[Mark Pilgrim has a certain style, and it was in full force on his latest post on font issues that we have on the Web. Some people are offended by tone and such, but if you ignore that, Mark is actually normally spot on! In this case, the font world feels like the DRM world <a href="http://ajaxian.com/archives/excuse-me-maybe-the-foundries-erm-lets-mess-with-em">Read the rest...</a>]]></description>
			<content:encoded><![CDATA[<p>Mark Pilgrim has a certain style, and it was in full force on his latest post on <a href="http://diveintomark.org/archives/2009/04/21/fuck-the-foundries">font issues</a> that we have on the Web.</p>
<p>Some people are offended by tone and such, but if you ignore that, Mark is actually normally spot on!</p>
<p>In this case, the font world feels like the DRM world of music. They can battle up hill all they want, but if they don't start working with their users (who are willing to pay for fonts, just like we are willing to pay for music!) they will find themselves in big trouble.</p>
<p>I was chatting with a GFX engineer on Firefox and after a fun time talking about how freaking fun it is to get fonts right cross platform (holy subtle-ties batman!) he pointed to a nice M+ font (multiple weights etc):</p>
<p><a href="http://www.fontsquirrel.com/fonts/M-1c"><img src="http://ajaxian.com/wp-content/uploads/mplus.png" alt="" title="mplus" width="500" height="380" class="alignnone size-full wp-image-6692" /></a></p>
<p>There are tons of great open source fonts out there. One day, instead of looking up to the foundries in their ivory towers in the sky, we will look down on the floor and see the gold is right there! And, then what? What will the foundries have after they push everyone to go the open source route?</p>
<p>Let's enjoy <a href="http://www.fontsquirrel.com/fonts/M-1c">font squirrel</a> and find some nice friendly fonts and use them to make the Web more fontific, and hope that the other chaps work out how to play nicely.</p>
]]></content:encoded>
			<wfw:commentRss>http://ajaxian.com/archives/excuse-me-maybe-the-foundries-erm-lets-mess-with-em/feed</wfw:commentRss>
		<slash:comments>7</slash:comments>
		</item>
		<item>
		<title>Web April Fools</title>
		<link>http://ajaxian.com/archives/web-april-fools</link>
		<comments>http://ajaxian.com/archives/web-april-fools#comments</comments>
		<pubDate>Wed, 01 Apr 2009 05:01:53 +0000</pubDate>
		<dc:creator>Dion Almaer</dc:creator>
				<category><![CDATA[Editorial]]></category>
		<category><![CDATA[Front Page]]></category>

		<guid isPermaLink="false">http://ajaxian.com/?p=6468</guid>
		<description><![CDATA[Ah, that time of year is here again. The day of the "Microsoft bought us" jape. Are there some good'uns this year? The early chaps who jumped the line a touch were the smashing magazine people talking about IE 8.1, all with WebKit/Gecko integration, fast JavaScript, CSS 3 support, and more. Then Opera does something <a href="http://ajaxian.com/archives/web-april-fools">Read the rest...</a>]]></description>
			<content:encoded><![CDATA[<p><script type="text/javascript" src="http://toonlet.com/embed/strip?i=25201"></script></p>
<p>Ah, that time of year is here again. The day of the "Microsoft bought us" jape. Are there some good'uns this year?</p>
<p>The early chaps who jumped the line a touch were the <a href="http://www.smashingmagazine.com/2009/03/31/breaking-internet-explorer-81-eagle-eyes-leaked/">smashing magazine people talking about IE 8.1</a>, all with WebKit/Gecko integration, fast JavaScript, CSS 3 support, and more.</p>
<p>Then Opera does something actually quite cute with their <a href="http://labs.opera.com/news/2009/04/01/">Opera Face Gestures</a> gag:</p>
<blockquote><p>
Looking ahead, we recognize the future importance of touch interfaces, but we believe that there is another input device that is already present in most new computers and it’s ready to enable a whole new way of user-interaction: the webcam.</p>
<p>Today we introduce Face Gestures, a revolutionary technology designed to make interacting with your browser easier and simpler on computers with cameras. Face Gestures lets you perform frequent browsing operations with natural and easy to make face gestures. By using an internal technology dubbed Face Observation Opera Language, we are able to recognize pre-determined facial expressions and match them to commands on the Opera browser.
</p></blockquote>
<p><object width="425" height="344"><param name="movie" value="http://www.youtube.com/v/kkNxbyp6thM&#038;color1=0xb1b1b1&#038;color2=0xcfcfcf&#038;hl=en&#038;feature=player_embedded&#038;fs=1"></param><param name="allowFullScreen" value="true"></param><embed src="http://www.youtube.com/v/kkNxbyp6thM&#038;color1=0xb1b1b1&#038;color2=0xcfcfcf&#038;hl=en&#038;feature=player_embedded&#038;fs=1" type="application/x-shockwave-flash" allowfullscreen="true" width="425" height="344"></embed></object></p>
<p>What else do you see out there?</p>
]]></content:encoded>
			<wfw:commentRss>http://ajaxian.com/archives/web-april-fools/feed</wfw:commentRss>
		<slash:comments>10</slash:comments>
		</item>
		<item>
		<title>Platform Optimization Strategies for Ajax Toolkits</title>
		<link>http://ajaxian.com/archives/platform-optimization</link>
		<comments>http://ajaxian.com/archives/platform-optimization#comments</comments>
		<pubDate>Thu, 22 Jan 2009 07:14:10 +0000</pubDate>
		<dc:creator>Dion Almaer</dc:creator>
				<category><![CDATA[Ajax]]></category>
		<category><![CDATA[Editorial]]></category>
		<category><![CDATA[Examples]]></category>
		<category><![CDATA[Front Page]]></category>
		<category><![CDATA[Library]]></category>
		<category><![CDATA[Topic]]></category>

		<guid isPermaLink="false">http://ajaxian.com/?p=5762</guid>
		<description><![CDATA[Dylan Schiemann has posted on Platform Optimization Strategies for Ajax Toolkits which covers techniques for having code run on multiple platforms effectively. He talks about how some frameworks have code paths for specific browsers to shorten the if (foo) type overhead. Having a compile step like GWT does makes this easy. TIBCO GI "builds an <a href="http://ajaxian.com/archives/platform-optimization">Read the rest...</a>]]></description>
			<content:encoded><![CDATA[<p>Dylan Schiemann has posted on <a href="http://www.sitepen.com/blog/2009/01/22/platform-optimization-strategies-for-ajax-toolkits/">Platform Optimization Strategies for Ajax Toolkits</a> which covers techniques for having code run on multiple platforms effectively.</p>
<p>He talks about how some frameworks have code paths for specific browsers to shorten the <code>if (foo)</code> type overhead. Having a compile step like GWT does makes this easy. TIBCO GI "builds an optimized code tree for each major browser release (the opposite of the approach jQuery 1.3 and others have taken, as code only makes it into a build for that browser if that browser is known to support that functionality)."</p>
<p><b>excludeStart(”webkitMobile”)</b></p>
<p>Dylan then discusses what is happening in the Dojo community:</p>
<blockquote><p>
In recent discussions on the Dojo mailing list, discussions turned to how to make Dojo faster for mobile users. In most cases, this involves removing code and features that are not needed on that platform given the precious resources available on mobile devices and over mobile networks.</p>
<p>Alex Russell checked in some work he started last year that looks like this:</p>
<p>[javascript]<br />
//>>excludeStart("webkitMobile", kwArgs.webkitMobile);<br />
!dojo.isIE &#038;&<br />
//>>excludeEnd("webkitMobile");<br />
[./javascript]</p>
<p>The syntax is a bit verbose, but it excludes the code between the start and end in a Dojo build created for webkitMobile:</p>
<blockquote><p>
./build.sh profile=base action=clean,release webkitMobile=true
</p></blockquote>
<p>While we would love to switch to pure feature detection over browser version detection like John has done with jQuery 1.3, version detection is generally more concise and precise, and does not necessarily make Dojo any less forwards compatible.</p>
<p>Version detection also makes it easy to exclude code created solely for browsers that require major workarounds, such as IE 6. To get the most out of this though would require doing something similar for each major browser, which would make Dojo more challenging to understand and maintain, would probably require a build step even during development (not just in production to improve performance).</p>
<p>At this point, there are no clear answers, just a lot of questions on how to create a toolkit that offers edge of the web features for desktop users, and still preserves performance for mobile web users. What approach do you think is best?
</p></blockquote>
]]></content:encoded>
			<wfw:commentRss>http://ajaxian.com/archives/platform-optimization/feed</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
	</channel>
</rss>

