<?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"
	>

<channel>
	<title>Web 3.0, 6 Bladed Razors, 7 Minute Abs &#187; Application Design</title>
	<atom:link href="http://www.zachleat.com/web/category/general/feed/" rel="self" type="application/rss+xml" />
	<link>http://www.zachleat.com/web</link>
	<description></description>
	<pubDate>Thu, 21 Aug 2008 06:02:08 +0000</pubDate>
	<generator>http://wordpress.org/?v=2.5</generator>
	<language>en</language>
			<item>
		<title>Double Whammy: OpenID and Microformats</title>
		<link>http://www.zachleat.com/web/2008/05/23/double-whammy-openid-and-microformats/</link>
		<comments>http://www.zachleat.com/web/2008/05/23/double-whammy-openid-and-microformats/#comments</comments>
		<pubDate>Fri, 23 May 2008 06:13:01 +0000</pubDate>
		<dc:creator>Zach Leatherman</dc:creator>
		
		<category><![CDATA[Application Design]]></category>

		<category><![CDATA[Interface Design]]></category>

		<category><![CDATA[Flickr]]></category>

		<category><![CDATA[hCard]]></category>

		<category><![CDATA[microformat]]></category>

		<category><![CDATA[OpenID]]></category>

		<category><![CDATA[Technorati]]></category>

		<category><![CDATA[Twitter]]></category>

		<guid isPermaLink="false">http://www.zachleat.com/web/?p=141</guid>
		<description><![CDATA[<a href="http://www.ownyouridentity.com/2008/04/30/get-satisfactions-nice-import-profile-feature/">Own your Identity had a great post today</a> detailing a great feature on the signup form of the <a href="http://getsatisfaction.com/people/new">Get Satisfaction</a> site.

They rely on the fact that sites like Twitter and Flickr publish an <a href="http://microformats.org/wiki/hcard">hCard microformat</a> for all of their users publicly on their website.]]></description>
			<content:encoded><![CDATA[<h3>Microformategery</h3>
<p><a href="http://www.ownyouridentity.com/2008/04/30/get-satisfactions-nice-import-profile-feature/">Own your Identity had a great post today</a> detailing a great feature on the signup form of the <a href="http://getsatisfaction.com/people/new">Get Satisfaction</a> site.</p>
<p>They rely on the fact that sites like Twitter and Flickr publish an <a href="http://microformats.org/wiki/hcard">hCard microformat</a> for all of their users publicly on their website.  If you go to <a href="http://twitter.com/zachleat/">my twitter page</a> and view the source, you'll find the following code available to anyone (without authentication):</p>
<div class="syntax_hilite">
<div id="html-1">
<div class="html"><span style="color: #009900;"><a href="http://december.com/html/4/element/address.html"><span style="color: #000000; font-weight: bold;">&lt;address&gt;</span></a></span><br />
&nbsp; &nbsp;<span style="color: #009900;"><a href="http://december.com/html/4/element/ul.html"><span style="color: #000000; font-weight: bold;">&lt;ul</span></a> <span style="color: #000066;">class</span>=<span style="color: #ff0000;">"about vcard entry-author"</span><span style="color: #000000; font-weight: bold;">&gt;</span></a></span><br />
&nbsp; &nbsp; &nbsp; <span style="color: #009900;"><a href="http://december.com/html/4/element/li.html"><span style="color: #000000; font-weight: bold;">&lt;li&gt;</span></a></span><span style="color: #009900;"><a href="http://december.com/html/4/element/span.html"><span style="color: #000000; font-weight: bold;">&lt;span</span></a> <span style="color: #000066;">class</span>=<span style="color: #ff0000;">"label"</span><span style="color: #000000; font-weight: bold;">&gt;</span></a></span>Name<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/span&gt;</span></span> <span style="color: #009900;"><a href="http://december.com/html/4/element/span.html"><span style="color: #000000; font-weight: bold;">&lt;span</span></a> <span style="color: #000066;">class</span>=<span style="color: #ff0000;">"fn"</span><span style="color: #000000; font-weight: bold;">&gt;</span></a></span>Zach Leatherman<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/span&gt;</span></span><span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/li&gt;</span></span><br />
&nbsp; &nbsp; &nbsp; <span style="color: #009900;"><a href="http://december.com/html/4/element/li.html"><span style="color: #000000; font-weight: bold;">&lt;li&gt;</span></a></span><span style="color: #009900;"><a href="http://december.com/html/4/element/span.html"><span style="color: #000000; font-weight: bold;">&lt;span</span></a> <span style="color: #000066;">class</span>=<span style="color: #ff0000;">"label"</span><span style="color: #000000; font-weight: bold;">&gt;</span></a></span>Location<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/span&gt;</span></span> <span style="color: #009900;"><a href="http://december.com/html/4/element/span.html"><span style="color: #000000; font-weight: bold;">&lt;span</span></a> <span style="color: #000066;">class</span>=<span style="color: #ff0000;">"adr"</span><span style="color: #000000; font-weight: bold;">&gt;</span></a></span>Omaha, NE USA<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/span&gt;</span></span><span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/li&gt;</span></span><br />
&nbsp; &nbsp; &nbsp; <span style="color: #009900;"><a href="http://december.com/html/4/element/li.html"><span style="color: #000000; font-weight: bold;">&lt;li&gt;</span></a></span><span style="color: #009900;"><a href="http://december.com/html/4/element/span.html"><span style="color: #000000; font-weight: bold;">&lt;span</span></a> <span style="color: #000066;">class</span>=<span style="color: #ff0000;">"label"</span><span style="color: #000000; font-weight: bold;">&gt;</span></a></span>Web<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/span&gt;</span></span> <span style="color: #009900;"><a href="http://december.com/html/4/element/a.html"><span style="color: #000000; font-weight: bold;">&lt;a</span></a> <span style="color: #000066;">href</span>=<span style="color: #ff0000;">"http://www.zachleat.com/"</span> <span style="color: #000066;">class</span>=<span style="color: #ff0000;">"url"</span> <span style="color: #000066;">rel</span>=<span style="color: #ff0000;">"me"</span><span style="color: #000000; font-weight: bold;">&gt;</span></a></span>http://www.zachle...<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/a&gt;</span></span><span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/li&gt;</span></span><br />
&nbsp; &nbsp; &nbsp; <span style="color: #009900;"><a href="http://december.com/html/4/element/li.html"><span style="color: #000000; font-weight: bold;">&lt;li</span></a> <span style="color: #000066;">id</span>=<span style="color: #ff0000;">"bio"</span><span style="color: #000000; font-weight: bold;">&gt;</span></a></span><span style="color: #009900;"><a href="http://december.com/html/4/element/span.html"><span style="color: #000000; font-weight: bold;">&lt;span</span></a> <span style="color: #000066;">class</span>=<span style="color: #ff0000;">"label"</span><span style="color: #000000; font-weight: bold;">&gt;</span></a></span>Bio<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/span&gt;</span></span> <span style="color: #009900;"><a href="http://december.com/html/4/element/span.html"><span style="color: #000000; font-weight: bold;">&lt;span</span></a> <span style="color: #000066;">class</span>=<span style="color: #ff0000;">"bio"</span><span style="color: #000000; font-weight: bold;">&gt;</span></a></span>UI Programmer, JavaScript Enthusiast, Soccer Hooligan<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/span&gt;</span></span><span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/li&gt;</span></span><br />
&nbsp; &nbsp;<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/ul&gt;</span></span><br />
<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/address&gt;</span></span></div>
</div>
</div>
<p></p>
<p>The premise here is that hCard tells you how to parse this markup to get usable information.  The <code>adr</code> CSS class tells you what my address is.  The <code>fn</code> CSS class tells you what my name is, and so on.  So, Get Satisfaction goes and spiders this page behind the scenes and autopopulates your profile with what it can find.  Pretty sweet.</p>
<p>Now, they don't limit you to the services they provide, which are: Flickr, Technorati, Twitter, Upcoming, and last.fm.  They provide an Other category for any hCard enabled URL (your personal homepage or perhaps an <a href="http://microformats.org/wiki/hresume">hResume</a> you have posted on the web).</p>
<h3>Integrate with OpenID</h3>
<p>However, why not take it to the next level?  Why not integrate this microformat functionality WITH an openid login system?  You'd be able to kill two birds (not a twitter joke) with one stone in some cases, since both Twitter and Technorati are also OpenID producers (re-echo: We need more consumers).</p>
<p>So, not only do you get the benefits of having OpenID authentication on your website, but you'd be able to prepopulate a certain amount of profile data with an hCard parser.  And the best part is, if you already have a <a href="http://remysharp.com/2008/04/24/stop-using-openid-why-how/">nice clean user interface</a> set up to handle different OpenID producers, there wouldn't be any additional clutter on the interface to get this benefit.  It'd be transparent to the user when it works, and fall back to a normal empty profile form when it doesn't.</p>
<p>What I'd like to see, is more sites that are OpenID producers, also serve hCard microformats as well.  If we can get all the major producers on board, we'd have a nice tidy little system going.</p>
]]></content:encoded>
			<wfw:commentRss>http://www.zachleat.com/web/2008/05/23/double-whammy-openid-and-microformats/feed/</wfw:commentRss>
		</item>
		<item>
		<title>Screen Readers and Listening at the Speed of Sound</title>
		<link>http://www.zachleat.com/web/2007/05/17/screen-readers-and-listening-at-the-speed-of-sound/</link>
		<comments>http://www.zachleat.com/web/2007/05/17/screen-readers-and-listening-at-the-speed-of-sound/#comments</comments>
		<pubDate>Fri, 18 May 2007 00:23:38 +0000</pubDate>
		<dc:creator>Zach Leatherman</dc:creator>
		
		<category><![CDATA[Application Design]]></category>

		<category><![CDATA[Web Browsers]]></category>

		<category><![CDATA[Accessibility]]></category>

		<guid isPermaLink="false">http://www.zachleat.com/web/2007/05/17/screen-readers-and-listening-at-the-speed-of-sound/</guid>
		<description><![CDATA[Here is a presentation given by a guy named Victor Tsaran on how he personally uses screen readers to browse the web.  As web developers, accessibility is an important aspect of our work and cannot be ignored.  How many websites have you browsed that had flash navigation?  If you're not a web [...]]]></description>
			<content:encoded><![CDATA[<p>Here is a <a href="http://yuiblog.com/blog/2007/05/14/video-intro-to-screenreaders/">presentation</a> given by a guy named Victor Tsaran on how he personally uses screen readers to browse the web.  As web developers, accessibility is an important aspect of our work and cannot be ignored.  How many websites have you browsed that had flash navigation?  If you're not a web developer, you need to skip ahead to time stamp 25:44 to see the mega-fast speed this guy uses the screen reader at.  I couldn't understand a single word coming out of my speaker.</p>
]]></content:encoded>
			<wfw:commentRss>http://www.zachleat.com/web/2007/05/17/screen-readers-and-listening-at-the-speed-of-sound/feed/</wfw:commentRss>
		</item>
		<item>
		<title>Checklist for Web Applications</title>
		<link>http://www.zachleat.com/web/2007/02/20/checklist-for-web-applications/</link>
		<comments>http://www.zachleat.com/web/2007/02/20/checklist-for-web-applications/#comments</comments>
		<pubDate>Tue, 20 Feb 2007 06:38:43 +0000</pubDate>
		<dc:creator>Zach Leatherman</dc:creator>
		
		<category><![CDATA[Application Design]]></category>

		<guid isPermaLink="false">http://www.zachleat.com/web/2007/02/20/checklist-for-web-applications/</guid>
		<description><![CDATA[As the first post in this new category of web development, I've decided to keep it simple and post the different components and architecture considerations a developer must consider when making a new application, especially in today's world of in-page dynamic interaction and the complications that has put on the problems that were considered solved [...]]]></description>
			<content:encoded><![CDATA[<p>As the first post in this new category of web development, I've decided to keep it simple and post the different components and architecture considerations a developer must consider when making a new application, especially in today's world of in-page dynamic interaction and the complications that has put on the problems that were considered solved in yesterday's page level world. Mostly this is a place to collect my thoughts on this subject.</p>
<ul>
<li><strong>Automatic Print Styling</strong>: Is the page going to be able to be printed properly without a "Printer friendly" link? CSS style sheets can be used to modify the output of the page using the @media print declaration. Are the widget components you're using in your JavaScript library able to support easy printing?</li>
<li><strong>Browser History Management</strong>: Will your application support the back button, especially with the increased usage of AJAX interactions on a full page application. Don't use XMLHTTPRequest's to fetch the entire content of a page. Just redirect them to a new page when you are only saving the header and the footer.</li>
<li><strong>Graded Browser Support</strong>: support of the web browsers with a large percentage of market share using the ideas put forth by Nate Koechley in his Graded Browser Support descriptions.</li>
<li><strong>Bookmark and Permanent Linking</strong>: is the behavior of your JavaScript application changing how data is being displayed? You'd better modify the URL to allow the user to bookmark link straight to the same view.</li>
<li><strong>File Compression</strong>: Minimize your CSS and JavaScript for delivery. GZip your CSS and JavaScript for browsers that support it (most all modern browsers do).</li>
<li><strong>Efficient Caching Mechanisms</strong>: server side caching of data is necessary for high volume traffic.</li>
<li><strong>Internationalization</strong> (i18n): will your application be viewed in other countries by non-English speakers? Are your dates in an international format? How about 24 hour time formats? Time zones? Do they observe Daylight Saving Time?</li>
<li><strong>Error Logging</strong>: Both server side and client side (using AJAX to log JavaScript errors can be very helpful)</li>
</ul>
<p><strong>Recommended Luxury Items</strong></p>
<ul>
<li><strong>Support mobile devices</strong>: How will your application look on a Blackberry? How does it render in Opera Mini?</li>
<li><strong>Offline Mode</strong>: Add and modify data offline, with the ability to automatically synchronize changes when an internet connection becomes available.</li>
<li><strong>Exportable data</strong>: PDF, Excel, RSS, even offline static HTML. JavaScript can sometimes give unknown results when using the browser to save the page locally. Make sure this is supported. Don't force your users to save screenshots.</li>
</ul>
<p><strong>Enterprise Client Side Widgets</strong></p>
<ul>
<li><strong>Data Grid</strong>: businesses just love data grids. Nothing like a nice standard set of cookie cutter constraints to force upon your data.</li>
<li><strong>Charts and Graphs</strong>: metrics are important. Existing client side JavaScript charting packages can be limited when it comes to printing, or even saving the chart as an image file. These are important.</li>
</ul>
<p>There are many facets that a developer must consider when designing a new application. I hope this list will at least make you think about some things that you may not have considered before. Thanks for reading.</p>
]]></content:encoded>
			<wfw:commentRss>http://www.zachleat.com/web/2007/02/20/checklist-for-web-applications/feed/</wfw:commentRss>
		</item>
	</channel>
</rss>
