<?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>Protofy - The art of Prototyping &#187; Web Development</title>
	<atom:link href="http://proto5.net/category/web-development/feed/" rel="self" type="application/rss+xml" />
	<link>http://proto5.net</link>
	<description>What we prototype is something under discussion, what we dont is reality</description>
	<lastBuildDate>Wed, 04 Nov 2009 21:22:25 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.0.1</generator>
		<item>
		<title>WidgetPad &#8211; HTML5</title>
		<link>http://proto5.net/2009/11/widgetpad-html5/</link>
		<comments>http://proto5.net/2009/11/widgetpad-html5/#comments</comments>
		<pubDate>Wed, 04 Nov 2009 19:23:20 +0000</pubDate>
		<dc:creator>R</dc:creator>
				<category><![CDATA[Web Development]]></category>

		<guid isPermaLink="false">http://proto5.net/?p=69</guid>
		<description><![CDATA[]]></description>
			<content:encoded><![CDATA[<p><img class="alignleft size-full wp-image-86" style="margin: 15px;" title="widgetPadExample" src="http://proto5.net/wp-content/uploads/2009/11/widgetPadExample.jpg" alt="widgetPadExample" width="320" height="480" /><a title="WidgetPad is for Smartphone Mobile Web Development." href="http://widgetpad.com/" target="_self">WidgetPad</a> describes itself as :</p>
<p><em>&#8220;collaborative development environment for developers to develop fully-interactive, stand-alone, downloadable SmartPhone applications in HTML5, CSS3 and Javascript.&#8221;</em></p>
<p>This is a wonderful initiative to share and modify already built code. I hope they reach a level where all of these components can be bundled into a framework library like Dojo. You might say that there are libraries such as <a href="http://www.jqtouch.com/" target="_blank">JQTouch</a> which are already out there. But I found that the CSS based animations are aimed solely at the iPhone and iPod touch. Android devices such as G1 had much trouble rendering the swipe and slide animations.</p>
<p>Interestingly the <a href="http://widgetpad.com/47/">3D photo example</a> using HTML5 and JavaScript makes the Iphone slower reminding that its not only plugins but embedded manufacturer supported technologies can also slow down when the limits are tested.  Only toggling the screen lock would un-freeze mobile safari out of its task in rendering the wall.</p>
]]></content:encoded>
			<wfw:commentRss>http://proto5.net/2009/11/widgetpad-html5/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Losing a Sale with a bad website design.</title>
		<link>http://proto5.net/2009/08/losing-a-sale-with-a-bad-website-design/</link>
		<comments>http://proto5.net/2009/08/losing-a-sale-with-a-bad-website-design/#comments</comments>
		<pubDate>Mon, 24 Aug 2009 15:34:13 +0000</pubDate>
		<dc:creator>R</dc:creator>
				<category><![CDATA[Web Development]]></category>

		<guid isPermaLink="false">http://proto5.net/?p=55</guid>
		<description><![CDATA[Looking for a Intel SSD, I thought I could just go to intel.com and click on the SSD link under their products/ hard drive section. One,  their SSD page is buried under products/netbooks/&#8221;Solid-State Drives and Caching&#8221; category and two this is what happened on my browser: Update: Works in Firefox. Safari still has a 10% [...]]]></description>
			<content:encoded><![CDATA[<p style="font-size: 19.5px; line-height: 28.5px;">Looking for a Intel SSD, I thought I could just go to intel.com and click on the SSD link under their products/ hard drive section. One,  their SSD page is buried under products/netbooks/&#8221;Solid-State Drives and Caching&#8221; category and two this is what happened on my browser:</p>
<p style="font-size: 19.5px; line-height: 28.5px;"><a href="http://proto5.net/wp-content/uploads/2009/08/snapshot-2009-08-24-11-00-38.gif"><img title="Intel SSD where to buy error." src="http://proto5.net/wp-content/uploads/2009/08/snapshot-2009-08-24-11-00-38.gif" alt="Intel SSD Error on their webpage." width="600" height="400" /></a></p>
<p style="font-size: 19.5px; line-height: 28.5px;"><br style="font-size: 19.5px; line-height: 28.5px;" /></p>
<p style="font-size: 19.5px; line-height: 28.5px;"><br style="font-size: 19.5px; line-height: 28.5px;" /></p>
<p style="font-size: 19.5px; line-height: 28.5px;"><strong style="font-size: 19.5px; line-height: 28.5px;"><em style="font-size: 19.5px; line-height: 28.5px;">Update</em></strong>: Works in Firefox. Safari still has a <a style="font-size: 19.5px; line-height: 28.5px;" title="Safari has a 10% market share and deserves it." href="http://www.inquisitr.com/19146/safaris-market-share-passes-10-and-it-deserves-it/" target="_blank">10% market share</a> and should be supported or at least tested.</p>
<p style="font-size: 19.5px; line-height: 28.5px;">Intel, you lost my business as I got distracted writing this post rather than trying to buy a SSD from you.<br style="font-size: 19.5px; line-height: 28.5px;" /></p>
]]></content:encoded>
			<wfw:commentRss>http://proto5.net/2009/08/losing-a-sale-with-a-bad-website-design/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>When custom attributes conflict with validation</title>
		<link>http://proto5.net/2008/08/when-custom-attributes-conflict-with-validation/</link>
		<comments>http://proto5.net/2008/08/when-custom-attributes-conflict-with-validation/#comments</comments>
		<pubDate>Fri, 08 Aug 2008 21:17:10 +0000</pubDate>
		<dc:creator>R</dc:creator>
				<category><![CDATA[Web Development]]></category>
		<category><![CDATA[entities]]></category>
		<category><![CDATA[jquery]]></category>
		<category><![CDATA[spry]]></category>
		<category><![CDATA[validation]]></category>
		<category><![CDATA[w3c]]></category>

		<guid isPermaLink="false">http://proto5.net/?p=43</guid>
		<description><![CDATA[I must confess, I am not a validation freak. Semantics and pixel perfection are my primary goals. Forgetting to specify a &#8220;type&#8221; on a javascript is not the biggest crime. However I went ahead and validated the page I made for this telecom major. A social media campaign microsite which we created in five using [...]]]></description>
			<content:encoded><![CDATA[<p>I must confess, I am not a validation freak. Semantics and pixel perfection are my primary goals. Forgetting to specify a &#8220;type&#8221; on a javascript is not the biggest crime.</p>
<p>However I went ahead and validated the page I made for this telecom major. A social media campaign microsite which we created in five using restful calls and jquery in the front.</p>
<p>Back to validation, 11 validation errors awaited me, apart from the missing &#8220;type&#8221; attributes, I had custom attributes, ouch!</p>
<p>I was using those attributes among others for parameters, Ajax url&#8217;s. I knew the solution was a custom DTD, I remembered from a previous oroject where we had used adobe spry widgets, the software would drop a custom namespace on top of the header. Searching on the adobe site I figured that they had a tough time too and suggested having a entity tag in the header for the valufator and remove  it when going to production. </p>
<p>Code samples in my case are in the next post.</p>
<p>Oh and other than that I had a custom live chat code that had reserved keywords and unescaped characters. </p>
<p>So what did I do? read my next post for the answer. </p>
]]></content:encoded>
			<wfw:commentRss>http://proto5.net/2008/08/when-custom-attributes-conflict-with-validation/feed/</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
		<item>
		<title>Simulating the Click Event on Firefox</title>
		<link>http://proto5.net/2008/08/simulating-the-click-event-on-firefox/</link>
		<comments>http://proto5.net/2008/08/simulating-the-click-event-on-firefox/#comments</comments>
		<pubDate>Mon, 04 Aug 2008 19:45:23 +0000</pubDate>
		<dc:creator>R</dc:creator>
				<category><![CDATA[Web Development]]></category>

		<guid isPermaLink="false">http://proto5.net/?p=42</guid>
		<description><![CDATA[1 2 3 4 5 6 7 8 9 10 11 12 if&#40;navigator.appName.indexOf&#40;&#34;Explorer&#34;&#41;== -1&#41; &#123; &#160; // Simulates the click() event for gecko based browsers &#160; HTMLElement.prototype.click = function&#40;&#41; &#123; var evt = this.ownerDocument.createEvent&#40;'MouseEvents'&#41;; evt.initMouseEvent&#40;'click', true, true, this.ownerDocument.defaultView, 1, 0, 0, 0, 0, false, false, false, false, 0, null&#41;; this.dispatchEvent&#40;evt&#41;; &#125; &#125; Source : Unknown [...]]]></description>
			<content:encoded><![CDATA[
<div class="wp_syntax"><table><tr><td class="line_numbers"><pre>1
2
3
4
5
6
7
8
9
10
11
12
</pre></td><td class="code"><pre class="javascript" style="font-family:monospace;">	<span style="color: #000066; font-weight: bold;">if</span><span style="color: #009900;">&#40;</span>navigator.<span style="color: #660066;">appName</span>.<span style="color: #660066;">indexOf</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;Explorer&quot;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">==</span> <span style="color: #339933;">-</span><span style="color: #CC0000;">1</span><span style="color: #009900;">&#41;</span>
	<span style="color: #009900;">&#123;</span>
&nbsp;
		<span style="color: #006600; font-style: italic;">// Simulates the click() event for gecko based browsers</span>
&nbsp;
		HTMLElement.<span style="color: #660066;">prototype</span>.<span style="color: #660066;">click</span> <span style="color: #339933;">=</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span>
		 <span style="color: #009900;">&#123;</span>
			<span style="color: #003366; font-weight: bold;">var</span> evt <span style="color: #339933;">=</span> <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">ownerDocument</span>.<span style="color: #660066;">createEvent</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'MouseEvents'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
			evt.<span style="color: #660066;">initMouseEvent</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'click'</span><span style="color: #339933;">,</span> <span style="color: #003366; font-weight: bold;">true</span><span style="color: #339933;">,</span> <span style="color: #003366; font-weight: bold;">true</span><span style="color: #339933;">,</span> <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">ownerDocument</span>.<span style="color: #660066;">defaultView</span><span style="color: #339933;">,</span> <span style="color: #CC0000;">1</span><span style="color: #339933;">,</span> <span style="color: #CC0000;">0</span><span style="color: #339933;">,</span> <span style="color: #CC0000;">0</span><span style="color: #339933;">,</span> <span style="color: #CC0000;">0</span><span style="color: #339933;">,</span> <span style="color: #CC0000;">0</span><span style="color: #339933;">,</span> <span style="color: #003366; font-weight: bold;">false</span><span style="color: #339933;">,</span> <span style="color: #003366; font-weight: bold;">false</span><span style="color: #339933;">,</span> <span style="color: #003366; font-weight: bold;">false</span><span style="color: #339933;">,</span> <span style="color: #003366; font-weight: bold;">false</span><span style="color: #339933;">,</span> <span style="color: #CC0000;">0</span><span style="color: #339933;">,</span> <span style="color: #003366; font-weight: bold;">null</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
			<span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">dispatchEvent</span><span style="color: #009900;">&#40;</span>evt<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
		 <span style="color: #009900;">&#125;</span>
	<span style="color: #009900;">&#125;</span></pre></td></tr></table></div>

<p><small> </small></p>
<p><small>Source : Unknown</p>
<p></small></p>
<p><small> Drop me a line and I will provide credit <img src='http://proto5.net/wp-includes/images/smilies/icon_smile.gif' alt=':)' class='wp-smiley' /> </small></p>
]]></content:encoded>
			<wfw:commentRss>http://proto5.net/2008/08/simulating-the-click-event-on-firefox/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>OuterHTML snippet</title>
		<link>http://proto5.net/2008/08/outerhtml-snippet/</link>
		<comments>http://proto5.net/2008/08/outerhtml-snippet/#comments</comments>
		<pubDate>Mon, 04 Aug 2008 15:46:06 +0000</pubDate>
		<dc:creator>R</dc:creator>
				<category><![CDATA[Web Development]]></category>

		<guid isPermaLink="false">http://proto5.net/?p=41</guid>
		<description><![CDATA[Here is a simple snippet that enables OuterHTML in Firefox. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 if &#40;document.body.__defineGetter__&#41; &#123; &#160; if &#40;HTMLElement&#41; &#123; &#160; var element = HTMLElement.prototype; [...]]]></description>
			<content:encoded><![CDATA[<p>Here is a simple snippet that enables OuterHTML in Firefox.</p>

<div class="wp_syntax"><table><tr><td class="line_numbers"><pre>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
</pre></td><td class="code"><pre class="javascript" style="font-family:monospace;"><span style="color: #000066; font-weight: bold;">if</span> <span style="color: #009900;">&#40;</span>document.<span style="color: #660066;">body</span>.__defineGetter__<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
&nbsp;
       <span style="color: #000066; font-weight: bold;">if</span> <span style="color: #009900;">&#40;</span>HTMLElement<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
&nbsp;
              <span style="color: #003366; font-weight: bold;">var</span> element <span style="color: #339933;">=</span> HTMLElement.<span style="color: #660066;">prototype</span><span style="color: #339933;">;</span>
&nbsp;
              <span style="color: #000066; font-weight: bold;">if</span> <span style="color: #009900;">&#40;</span>element.__defineGetter__<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
&nbsp;
                     element.__defineGetter__<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;outerHTML&quot;</span><span style="color: #339933;">,</span>
&nbsp;
                           <span style="color: #003366; font-weight: bold;">function</span> <span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
&nbsp;
                                  <span style="color: #003366; font-weight: bold;">var</span> parent <span style="color: #339933;">=</span> <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">parentNode</span><span style="color: #339933;">;</span>
&nbsp;
                                  <span style="color: #003366; font-weight: bold;">var</span> el <span style="color: #339933;">=</span> document.<span style="color: #660066;">createElement</span><span style="color: #009900;">&#40;</span>parent.<span style="color: #660066;">tagName</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
                                  el.<span style="color: #660066;">appendChild</span><span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">this</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
                                  <span style="color: #003366; font-weight: bold;">var</span> shtml <span style="color: #339933;">=</span> el.<span style="color: #660066;">innerHTML</span><span style="color: #339933;">;</span>
&nbsp;
                                  parent.<span style="color: #660066;">appendChild</span><span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">this</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
                                  <span style="color: #000066; font-weight: bold;">return</span> shtml<span style="color: #339933;">;</span>
&nbsp;
                           <span style="color: #009900;">&#125;</span>
&nbsp;
                     <span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
              <span style="color: #009900;">&#125;</span>
&nbsp;
       <span style="color: #009900;">&#125;</span>
&nbsp;
<span style="color: #009900;">&#125;</span></pre></td></tr></table></div>

<p><P>Originial Credit : <a target="_new" href="http://snipplr.com/view/5460/outerhtml-in-firefox/" title="Originial Snippet on ">Snipplr</a> </P></p>
]]></content:encoded>
			<wfw:commentRss>http://proto5.net/2008/08/outerhtml-snippet/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Compressor Rater &#8211; The Javascript Compression rater.</title>
		<link>http://proto5.net/2007/10/compressor-rater-the-javascript-compression-rater/</link>
		<comments>http://proto5.net/2007/10/compressor-rater-the-javascript-compression-rater/#comments</comments>
		<pubDate>Fri, 26 Oct 2007 14:28:50 +0000</pubDate>
		<dc:creator>rama</dc:creator>
				<category><![CDATA[Web Development]]></category>

		<guid isPermaLink="false">http://proto5.com/?p=32</guid>
		<description><![CDATA[I like comparisons and especially when a tool takes my input and produces 3 different Step in Compressor Rater it takes the Dojo Shrinker, JSMin and YUI compressors for Javascript and produces a report as well as gives you an option to copy paste the resulting code. More &#62; http://compressorrater.thruhere.net/]]></description>
			<content:encoded><![CDATA[<p>I like comparisons and especially when a tool takes my input and produces 3 different</p>
<p>Step in Compressor Rater it takes the Dojo Shrinker, JSMin and YUI compressors for Javascript and produces a report as well as gives you an option to copy paste the resulting code.</p>
<p>More &gt; <a class="external external external external external" title="The Compressor Rater." href="http://compressorrater.thruhere.net/" target="_blank">http://compressorrater.thruhere.net/</a></p>
<p><!--wsa:gad--></p>
]]></content:encoded>
			<wfw:commentRss>http://proto5.net/2007/10/compressor-rater-the-javascript-compression-rater/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Of Jumping Cows and Energy Domes.</title>
		<link>http://proto5.net/2007/10/of-jumping-cows-and-energy-domes/</link>
		<comments>http://proto5.net/2007/10/of-jumping-cows-and-energy-domes/#comments</comments>
		<pubDate>Fri, 19 Oct 2007 04:14:20 +0000</pubDate>
		<dc:creator>rama</dc:creator>
				<category><![CDATA[Web Development]]></category>

		<guid isPermaLink="false">http://proto5.com/?p=31</guid>
		<description><![CDATA[Both Jquery and Mootools are great libraries, however one must win. Is it the Cow or the Dome, find out as I compare both these libraries feature by feature. But why now?, Mootools has just released their 1.2 version which boasts of a HashMap for clientside objects. Jquery has seen a 1.2.1 version ( sounds [...]]]></description>
			<content:encoded><![CDATA[<p><img src="http://proto5.net/wp-content/uploads/2007/10/featured-copy.jpg" alt="featured-copy" width="200" height="300" align="left" />Both <a class="external external" title="Jquery - The code less do more library." rel="external" href="http://www.jquery.com">Jquery</a> and <a class="external external" title="Mootools - The Compact Javascript Framework." rel="external" href="http://www.mootools.net">Mootools</a> are great libraries, however one must win. Is it the Cow or the <a class="external external" title="The Jquery logo, inspired by the Energy Dome made famous by Devo" href="http://en.wikipedia.org/wiki/Devo" target="_blank">Dome</a>, find out as I compare both these libraries feature by feature.</p>
<p>But why now?, Mootools has just released their <a class="external external" title="Excerpt: A Hash is basically a wrapper for native JavaScript Objects." href="http://blog.mootools.net/2007/10/8/what-s-new-in-moo-1-2-the-hash" target="_blank">1.2 version which boasts of a HashMap for</a> clientside objects.</p>
<p>Jquery has seen a 1.2.1 version ( sounds familiar?, look above) for a month now.</p>
<p>Why dont you <a class="external external" title="Subscribe to the Protofy Feed." href="http://feeds.feedburner.com/proto5" target="_blank">subscribe to the feed</a> to be the first one to hear about it.</p>
<p><!--wsa:gad--></p>
]]></content:encoded>
			<wfw:commentRss>http://proto5.net/2007/10/of-jumping-cows-and-energy-domes/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>You just can&#8217;t stop learning in a XHTML world.</title>
		<link>http://proto5.net/2006/06/you-just-cant-stop-learning-in-a-xhtml-world/</link>
		<comments>http://proto5.net/2006/06/you-just-cant-stop-learning-in-a-xhtml-world/#comments</comments>
		<pubDate>Fri, 23 Jun 2006 10:34:54 +0000</pubDate>
		<dc:creator>rama</dc:creator>
				<category><![CDATA[Web Development]]></category>

		<guid isPermaLink="false">http://proto5.com/?p=5</guid>
		<description><![CDATA[This page is a XHTML 1.0 strict page and I wanted a new window to open on external pages on the previous post Sadly XHTML 1.0 strict doctypes dont allow blank window&#8217;s. Enter good old hacks Here&#8217;s how it is achieved, use the standard &#60; a href=" yourlink.html " rel="external" .... and use the following [...]]]></description>
			<content:encoded><![CDATA[<p>This page is a XHTML 1.0 strict page and I wanted a new window to open on external pages on the previous post</p>
<p>Sadly <a class="external" title="Go to the gods of XHTML" rel="external" href="http://www.w3.org/MarkUp/2004/xhtml-faq#target">XHTML 1.0 strict doctypes dont allow blank window&#8217;s. </a> Enter good old <a class="external" rel="external" href="http://www.sitepoint.com/article/standards-compliant-world/3">hacks </a></p>
<p>Here&#8217;s how it is achieved, use the standard</p>
<p><code>&lt; a href=" yourlink.html " <strong>rel="external"</strong> .... </code>and use the following snippet to be called on all pages</p>
<p><code lang="javascript">function externalLinks() {<br />
if (!document.getElementsByTagName) return;<br />
var anchors = document.getElementsByTagName("a");<br />
for (var i=0; i   var anchor = anchors[i];i++) {<br />
if (anchor.getAttribute("href") &amp;&amp;<br />
anchor.getAttribute("rel") == "external")<br />
anchor.target = "_blank";<br />
}<br />
}<br />
window.onload = externalLinks;</code><em>Code from the article at Sitepoint : <a class="external" title="Sitepoint article" rel="external" href="http://www.sitepoint.com/article/standards-compliant-world/3">New-Window Links in a Standards-Compliant World</a> </em></p>
<p>You just have to be a dynamic HTML in your head or else you will be <a class="external" title="Go back into history" rel="external" href="http://www.archive.org">archived</a></p>
]]></content:encoded>
			<wfw:commentRss>http://proto5.net/2006/06/you-just-cant-stop-learning-in-a-xhtml-world/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>
