<?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>Delivering Quality &#187; Web Application</title>
	<atom:link href="http://www.markdeepwell.com/category/web-application/feed/" rel="self" type="application/rss+xml" />
	<link>http://www.markdeepwell.com</link>
	<description>A Software Developers View of the World</description>
	<lastBuildDate>Thu, 29 Jul 2010 16:44:04 +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>Validating a Facebook Session Within an iFrame</title>
		<link>http://www.markdeepwell.com/2010/02/validating-a-facebook-session-within-an-iframe/</link>
		<comments>http://www.markdeepwell.com/2010/02/validating-a-facebook-session-within-an-iframe/#comments</comments>
		<pubDate>Thu, 04 Feb 2010 02:18:51 +0000</pubDate>
		<dc:creator>Mark</dc:creator>
				<category><![CDATA[Web Application]]></category>
		<category><![CDATA[Facebook]]></category>
		<category><![CDATA[iFrame]]></category>
		<category><![CDATA[PHP]]></category>

		<guid isPermaLink="false">http://www.markdeepwell.com/?p=470</guid>
		<description><![CDATA[Facebook takes security seriously and there are many many things a Facebook app cannot do. Sometimes it is necessary to create an iFrame and load the page in to work around Facebook's security model. This example shows how you can continue to use the $facebook->require_login() method while you are inside an iFrame. Each Facebook request [...]]]></description>
			<content:encoded><![CDATA[<p>Facebook takes security seriously and there are many many things a Facebook app cannot do. Sometimes it is necessary to create an iFrame and load the page in to work around Facebook's security model. This example shows how you can continue to use the $facebook->require_login() method while you are inside an iFrame.</p>
<p>Each Facebook request to your application contains a number of parameters that you can use to  authenticate if the request really came from Facebook and if the user is actually logged in. These parameters looks like this:</p>
<pre>Array
(
    [fb_sig_in_canvas] =&gt; 1
    [fb_sig_request_method] =&gt; GET
    [fb_sig_friends] =&gt; 12345678,123456789,...
    [fb_sig_locale] =&gt; en_US
    [fb_sig_in_new_facebook] =&gt; 1
    [fb_sig_time] =&gt; 1265247656.6432
    [fb_sig_added] =&gt; 1
    [fb_sig_profile_update_time] =&gt; 1261813927
    [fb_sig_expires] =&gt; 1265248900
    [fb_sig_user] =&gt; 1234567
    [fb_sig_session_key] =&gt; 2.18zPq2sNPEE6sn0wpMLc5w__.3600.1265248800-1234567
    [fb_sig_api_key] =&gt; ab6c2d2604ae9604be0efef88315c53e
    [fb_sig_app_id] =&gt; 289424642699
    [fb_sig] =&gt; 575ed0ccd0c9b3ea2d5d7c5417187de6
)
</pre>
<p>If you create an iFrame in your facebook page, the parameters will be passed to the iFrame but by will not automatically be passed from one request to the next. Once the user clicks on a link or you try to do an ajax request, you will not be able to validate the user. The simple trick to keep the authorization is to pass the fb_sig_* parameters to request. A handy PHP function like this will help:</p>
<div class="igBar"><span id="lphp-2"><a href="#" onclick="javascript:showPlainTxt('php-2'); return false;">PLAIN TEXT</a></span></div>
<div class="syntax_hilite"><span class="langName">PHP:</span>
<div id="php-2">
<div class="php">
<ol>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color:#000000; font-weight:bold;">function</span> fb_vars<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="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><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="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; <span style="color:#0000FF;">$fb_vars</span> = <a href="http://www.php.net/array"><span style="color:#000066;">array</span></a><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="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; <span style="color:#616100;">foreach</span> <span style="color:#006600; font-weight:bold;">&#40;</span><span style="color:#0000FF;">$_GET</span> <span style="color:#616100;">as</span> <span style="color:#0000FF;">$key</span> =&gt; <span style="color:#0000FF;">$value</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="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; <span style="color:#006600; font-weight:bold;">&#123;</span></div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; <span style="color:#616100;">if</span> <span style="color:#006600; font-weight:bold;">&#40;</span><a href="http://www.php.net/strpos"><span style="color:#000066;">strpos</span></a><span style="color:#006600; font-weight:bold;">&#40;</span><span style="color:#0000FF;">$key</span>, <span style="color:#FF0000;">"fb_sig"</span><span style="color:#006600; font-weight:bold;">&#41;</span> !== <span style="color:#000000; 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="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; <span style="color:#006600; font-weight:bold;">&#123;</span>&nbsp; &nbsp;</div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; <span style="color:#0000FF;">$fb_vars</span><span style="color:#006600; font-weight:bold;">&#91;</span><span style="color:#006600; font-weight:bold;">&#93;</span> = <span style="color:#0000FF;">$key</span>.<span style="color:#FF0000;">"="</span>.<span style="color:#0000FF;">$value</span>;</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; <span style="color:#006600; font-weight:bold;">&#125;</span>&nbsp; &nbsp;</div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&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="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp;</div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; <span style="color:#616100;">return</span> <a href="http://www.php.net/implode"><span style="color:#000066;">implode</span></a><span style="color:#006600; font-weight:bold;">&#40;</span><span style="color:#FF0000;">'&amp;'</span>, <span style="color:#0000FF;">$fb_vars</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="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color:#006600; font-weight:bold;">&#125;</span> </div>
</li>
</ol>
</div>
</div>
</div>
<p></p>
<p>If you append the result of that function to the query string of each request, the $facebook-&gt;require_login() call and the $facebook-&gt;validate_fb_params() can then successfully validate if your user is from Facebook.</p>
]]></content:encoded>
			<wfw:commentRss>http://www.markdeepwell.com/2010/02/validating-a-facebook-session-within-an-iframe/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Building for Mobile with Device Orientation</title>
		<link>http://www.markdeepwell.com/2010/01/building-for-mobile-with-device-orientation/</link>
		<comments>http://www.markdeepwell.com/2010/01/building-for-mobile-with-device-orientation/#comments</comments>
		<pubDate>Tue, 26 Jan 2010 16:54:29 +0000</pubDate>
		<dc:creator>Mark</dc:creator>
				<category><![CDATA[Web Application]]></category>
		<category><![CDATA[CSS]]></category>
		<category><![CDATA[Device Orientation]]></category>
		<category><![CDATA[Fennec]]></category>
		<category><![CDATA[Firefox]]></category>
		<category><![CDATA[Mobile]]></category>

		<guid isPermaLink="false">http://www.markdeepwell.com/?p=460</guid>
		<description><![CDATA[Mozilla Firefox 3.5 and Firefox for Mobile 1.0 (Fennec) both have support for modifying a web applications look based on screen dimensions and current orientation. These abilities give web developers the power to build better web applications for mobile devices and the ability to optimize the browsing experience when screen space is constrained. CSS Orientation [...]]]></description>
			<content:encoded><![CDATA[<p>Mozilla Firefox 3.5 and Firefox for Mobile 1.0 (Fennec) both have support for modifying a web applications look based on screen dimensions and current orientation. These abilities give web developers the power to build better web applications for mobile devices and the ability to optimize the browsing experience when screen space is constrained.</p>
<h3>CSS Orientation Properties</h3>
<p>Web applications look and feel is defined by a CSS file, so therefore the Firefox developers made it super easy to tie current orientation and screen dimensions into which CSS file to load.</p>
<p>For examaple: If the browser is in portrait mode, a single CSS media parameter will specify which styles to use:</p>
<div class="igBar"><span id="ljavascript-7"><a href="#" onclick="javascript:showPlainTxt('javascript-7'); return false;">PLAIN TEXT</a></span></div>
<div class="syntax_hilite"><span class="langName">JAVASCRIPT:</span>
<div id="javascript-7">
<div class="javascript">
<ol>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">@media all and <span style="color: #66cc66;">&#40;</span>orientation: portrait<span style="color: #66cc66;">&#41;</span> <span style="color: #66cc66;">&#123;</span> ... <span style="color: #66cc66;">&#125;</span> </div>
</li>
</ol>
</div>
</div>
</div>
<p></p>
<p>In the same way, you can create a custom CSS stylesheet for users who are browsing with a screen size between 500 and 700 pixels:</p>
<div class="igBar"><span id="ljavascript-8"><a href="#" onclick="javascript:showPlainTxt('javascript-8'); return false;">PLAIN TEXT</a></span></div>
<div class="syntax_hilite"><span class="langName">JAVASCRIPT:</span>
<div id="javascript-8">
<div class="javascript">
<ol>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">@media screen and <span style="color: #66cc66;">&#40;</span>min-width: 500px<span style="color: #66cc66;">&#41;</span> and <span style="color: #66cc66;">&#40;</span>max-width: 700px<span style="color: #66cc66;">&#41;</span> <span style="color: #66cc66;">&#123;</span> ... <span style="color: #66cc66;">&#125;</span> </div>
</li>
</ol>
</div>
</div>
</div>
<p></p>
<h3>Orientation Events</h3>
<p>Firefox 3.6 adds support for orientation events in JavaScript, so you can get current updates of how the user is holding their mobile device:</p>
<div class="igBar"><span id="ljavascript-9"><a href="#" onclick="javascript:showPlainTxt('javascript-9'); return false;">PLAIN TEXT</a></span></div>
<div class="syntax_hilite"><span class="langName">JAVASCRIPT:</span>
<div id="javascript-9">
<div class="javascript">
<ol>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">window.<span style="color: #006600;">addEventListener</span><span style="color: #66cc66;">&#40;</span><span style="color: #3366CC;">"MozOrientation"</span>, handleOrientation, <span style="color: #003366; font-weight: bold;">true</span><span style="color: #66cc66;">&#41;</span>; </div>
</li>
</ol>
</div>
</div>
</div>
<p></p>
<p>Once you register the event handler, the handleOrientation function will receive an object specifying the x, y, and z value of the devices current position:</p>
<div class="igBar"><span id="ljavascript-10"><a href="#" onclick="javascript:showPlainTxt('javascript-10'); return false;">PLAIN TEXT</a></span></div>
<div class="syntax_hilite"><span class="langName">JAVASCRIPT:</span>
<div id="javascript-10">
<div class="javascript">
<ol>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #003366; font-weight: bold;">function</span> handleOrientation<span style="color: #66cc66;">&#40;</span>orientData<span style="color: #66cc66;">&#41;</span> <span style="color: #66cc66;">&#123;</span></div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #003366; font-weight: bold;">var</span> x = orientData.<span style="color: #006600;">x</span>;</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #003366; font-weight: bold;">var</span> y = orientData.<span style="color: #006600;">y</span>;</div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #003366; font-weight: bold;">var</span> z = orientData.<span style="color: #006600;">z</span>;</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #66cc66;">&#125;</span> </div>
</li>
</ol>
</div>
</div>
</div>
<p></p>
<p>With those parameters and a game timer, you can probably build the <a href="http://www.turbosquid.com/FullPreview/Index.cfm/ID/275316">Labyrinth game</a>.</p>
<p>For those of your that are ready to start experimenting with this API right away, Mozilla Developer Center has the full <a href="https://developer.mozilla.org/en/Detecting_device_orientation">Firefox orientation documentation</a>.</p>
]]></content:encoded>
			<wfw:commentRss>http://www.markdeepwell.com/2010/01/building-for-mobile-with-device-orientation/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Facebook vs You!</title>
		<link>http://www.markdeepwell.com/2009/12/facebook-vs-you/</link>
		<comments>http://www.markdeepwell.com/2009/12/facebook-vs-you/#comments</comments>
		<pubDate>Wed, 23 Dec 2009 06:31:49 +0000</pubDate>
		<dc:creator>Mark</dc:creator>
				<category><![CDATA[Software Development]]></category>
		<category><![CDATA[Web Application]]></category>
		<category><![CDATA[CSS]]></category>
		<category><![CDATA[Facebook]]></category>
		<category><![CDATA[Facebook App]]></category>
		<category><![CDATA[HTML]]></category>
		<category><![CDATA[JavaScript]]></category>

		<guid isPermaLink="false">http://www.markdeepwell.com/?p=445</guid>
		<description><![CDATA[Have you had the... how should I describe it... experience of writing a Facebook application? No? OK, here's an introduction to what you can expect. When developing an application you must learn Rule #1 Facebook is the gatekeeper. Everything you do, be it HTML, CSS or JavaScript, is restricted by Facebook. Only the commands, functions, [...]]]></description>
			<content:encoded><![CDATA[<p>Have you had the... how should I describe it... <strong>experience</strong> of writing a Facebook application? No? OK, here's an introduction to what you can expect.</p>
<p>When developing an application you must learn Rule #1 <strong>Facebook is the gatekeeper</strong>. Everything you do, be it HTML, CSS or JavaScript, is restricted by Facebook. Only the commands, functions, CSS properties, HTML tags etc. that Facebook allows are permissible. If you have an error in your HTML such as an unclosed tag or if you try to use a CSS property that does not exist, Facebook will render a very nice message saying you made an error.</p>
<p>Rule #2 <strong>The never ending cycle</strong>. The Facebook platform is constantly changing and APIs that you are using in your application could disappear one day without any notice. It's the life of a Facebook application, working one instant, inexplicably broken the next. Be prepared for irregular maintenance just to keep your application working.</p>
<p>A Facebook Application  lives in the world of Facebook and while it might initially seem  like you're developing a standard web application you are not. Rule #3 <strong>You're application is on the Facebook web</strong>. It's not a regular web application which is a very slight but critical distinction. Facebook has used their powers as the gatekeeper to make modifications to the web. Some HTML tags are allowed, some are not. <a href="http://wiki.developers.facebook.com/index.php/FBJS#FBJS_DOM_Objects">JavaScript has been altered</a> to remove a lot of its power and replace only some of them with Facebook specific functions and even CSS has restrictions. Don't expect existing code to function when placed in the Facebook web.</p>
<h3>Additional Caveats</h3>
<ul>
<li>You cannot include any external JavaScript or style sheet files, they must be included in-line. This is so Facebook can parse them and allow only approved commands. Yes it enhances the security of the social networking site as a whole, but it will slow down your development time.</li>
<li>Facebook will filter, compile, and drastically alter your original code. Clicking view-source on a Facebook page with your application will show your JavaScript code mushed into awkward Facebook functions.</li>
</ul>
<p>Do you see that it's a bit of a battle of you against the mighty Facebook? Don't sweat too much, other developers have persevered and with a few wounds and time you can build and maintain a successful Facebook application. Good luck!</p>
]]></content:encoded>
			<wfw:commentRss>http://www.markdeepwell.com/2009/12/facebook-vs-you/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>UpcomingHoliday.com Now with Geolocation</title>
		<link>http://www.markdeepwell.com/2009/12/upcomingholiday-com-now-with-geolocation/</link>
		<comments>http://www.markdeepwell.com/2009/12/upcomingholiday-com-now-with-geolocation/#comments</comments>
		<pubDate>Thu, 17 Dec 2009 06:27:40 +0000</pubDate>
		<dc:creator>Mark</dc:creator>
				<category><![CDATA[Web Application]]></category>
		<category><![CDATA[Firefox]]></category>
		<category><![CDATA[Geolocation]]></category>
		<category><![CDATA[Google Chrome]]></category>
		<category><![CDATA[HTML5]]></category>
		<category><![CDATA[iPhone]]></category>
		<category><![CDATA[JavaScript]]></category>
		<category><![CDATA[Safari]]></category>

		<guid isPermaLink="false">http://www.markdeepwell.com/?p=440</guid>
		<description><![CDATA[UpcomingHoliday.com has been updated and now includes geolocation support. If your browser supports it your country should automatically find and select your country. If not, it will fall back to IP based country lookup. Geolocation is a HTML 5 feature that is supported by Safari on the iPhone 3.0 OS, Firefox 3.5 and Google Chrome. [...]]]></description>
			<content:encoded><![CDATA[<p><a href="http://upcomingholiday.com">UpcomingHoliday.com</a> has been updated and now includes <a href="http://dev.w3.org/geo/api/spec-source.html">geolocation</a> support. If your browser supports it your country should automatically find and select your country. If not, it will fall back to IP based country lookup. Geolocation is a HTML 5 feature that is supported by Safari on the iPhone 3.0 OS, Firefox 3.5 and Google Chrome.</p>
<p>UpcomingHoliday.com is an application that tells you what and when your <a href="http://upcomingholiday.com">next federal holiday</a> is. Currently it's available for people in: Australia, Canada, France, Germany, India,  Nigeria, United Kingdom and United States.</p>
]]></content:encoded>
			<wfw:commentRss>http://www.markdeepwell.com/2009/12/upcomingholiday-com-now-with-geolocation/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>
