<?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>Brian Peppler &#187; Tutorials</title>
	<atom:link href="http://www.brianpeppler.com/category/tutorials/feed/" rel="self" type="application/rss+xml" />
	<link>http://www.brianpeppler.com</link>
	<description>UX designer, usability accessibility advocate</description>
	<lastBuildDate>Sun, 08 Aug 2010 20:17:32 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	
		<item>
		<title>Making Flash Accessible and SEO Friendly</title>
		<link>http://www.brianpeppler.com/webtechnology/making-flash-seo-friendly/</link>
		<comments>http://www.brianpeppler.com/webtechnology/making-flash-seo-friendly/#comments</comments>
		<pubDate>Mon, 24 Mar 2008 20:38:10 +0000</pubDate>
		<dc:creator>Brian</dc:creator>
				<category><![CDATA[Accessibility]]></category>
		<category><![CDATA[Tutorials]]></category>
		<category><![CDATA[Web Standards]]></category>
		<category><![CDATA[Web Technology]]></category>

		<guid isPermaLink="false">http://www.brianpeppler.com/2008/03/24/making-flash-seo-friendly/</guid>
		<description><![CDATA[Flash has always been a great vehicle for delivering multimedia content on the web. I&#8217;m always wowed by its unlimited bounds, but I&#8217;m simultaneously disappointed by its poor handling of SEO and accessibility. While the rest of the web has evolved into a rich and standards-based medium, Flash and its developers have concentrated on beefing [...]]]></description>
			<content:encoded><![CDATA[<p>Flash has always been a great vehicle for delivering multimedia content on the web. I&#8217;m always wowed by its unlimited bounds, but I&#8217;m simultaneously disappointed by its poor handling of SEO and accessibility. While the rest of the web has evolved into a rich and standards-based medium, Flash and its developers have concentrated on beefing up the bling. In 2005 Macromedia published <a href="http://www.adobe.com/resources/accessibility/best_practices/best_practices_acc_flash.pdf">Best Practices for Accessible Flash Design</a>, a white paper that did little to address real accessibility needs.</p>
<p>The issue  stems from how Flash is referenced within a web page. Traditionally Flash was detected by HTML using either <span class="code">&lt;embed&gt;</span> or <span class="code">&lt;object&gt;</span> tags, however both tags have accessibility and plug-in detection issues, and <span class="code">&lt;embed&gt;</span> is invalid XHTML. These methods can cause some browsers and screen readers to misinterpret or entirely ignore your Flash content.</p>
<p>My favorite solution to this problem has been Bobby van der Sluis&#8217; <a href="http://www.bobbyvandersluis.com/ufo/">Unobtrusive Flash Object (UFO)</a>, but it was recently deprecated and replaced by Geoff Stearns&#8217; <a href="http://code.google.com/p/swfobject">SWFObject 2.0</a>. Like UFO, SWFObject is a DOM script that detects the Flash plug-in and embeds Flash objects. It&#8217;s JavaScript API provides an amazing and complete toolset for embedding SWF files and retrieving Flash Player-related information. It has its roots in the web standards community and is designed to support W3C standards-compliant, accessible and search engine friendly web design. The handy JavaScript detection determines whether Flash content or alternative content should be shown and avoids outdated Flash plug-ins break Flash content. The example below illustrates how simple it is to detecting Flash and add alternative content.</p>
<div class="codeblock">&lt;!DOCTYPE html PUBLIC &#8220;-//W3C//DTD XHTML 1.0 Strict//EN&#8221; &#8220;http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd&#8221;&gt;<br />
&lt;html xmlns=&#8221;http://www.w3.org/1999/xhtml&#8221; lang=&#8221;en&#8221; xml:lang=&#8221;en&#8221;&gt;<br />
&lt;head&gt;<br />
&lt;title&gt;SWFObject v2.0 dynamic embed &#8211; step 3&lt;/title&gt;<br />
&lt;meta http-equiv=&#8221;Content-Type&#8221; content=&#8221;text/html; charset=iso-8859-1&#8243; /&gt;<br />
&lt;script type=&#8221;text/javascript&#8221; src=&#8221;swfobject.js&#8221;&gt;&lt;/script&gt;</p>
<p>&lt;script type=&#8221;text/javascript&#8221;&gt;<br />
swfobject.embedSWF(&#8220;myContent.swf&#8221;, &#8220;myContent&#8221;, &#8220;300&#8243;, &#8220;120&#8243;, &#8220;9.0.0&#8243;);<br />
&lt;/script&gt;</p>
<p>&lt;/head&gt;<br />
&lt;body&gt;<br />
&lt;div id=&#8221;myContent&#8221;&gt;<br />
&lt;p&gt;Alternative content&lt;/p&gt;<br />
&lt;/div&gt;<br />
&lt;/body&gt;<br />
&lt;/html&gt;</p></div>
]]></content:encoded>
			<wfw:commentRss>http://www.brianpeppler.com/webtechnology/making-flash-seo-friendly/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Microformats</title>
		<link>http://www.brianpeppler.com/webtechnology/microformats/</link>
		<comments>http://www.brianpeppler.com/webtechnology/microformats/#comments</comments>
		<pubDate>Fri, 16 Mar 2007 16:36:23 +0000</pubDate>
		<dc:creator>Brian</dc:creator>
				<category><![CDATA[Tutorials]]></category>
		<category><![CDATA[Web Technology]]></category>

		<guid isPermaLink="false">http://www.brianpeppler.com/2007/03/16/microformats/</guid>
		<description><![CDATA[Over the course of four days, I attended roughly twenty panels at SXSW Interactive. The discussions covered everything from online social networks for teens to a primer on the mobile web. One event really stood out for me, but it wasn&#8217;t the Mardi Gras atmosphere or the celebrity keynote speakers. Tantek Çelik (Chief Technologist at [...]]]></description>
			<content:encoded><![CDATA[<p>Over the course of four days, I attended roughly twenty panels at <a href="http://2007.sxsw.com/interactive/">SXSW Interactive</a>. The discussions covered everything from <a href="http://2007.sxsw.com/interactive/programming/panels/?action=show&amp;id=IAP060248">online social networks for teens</a> to a <a href="http://2007.sxsw.com/interactive/programming/panels/?action=show&amp;id=IAP060152">primer on the mobile web</a>. One event really stood out for me, but it wasn&#8217;t the Mardi Gras atmosphere or the celebrity keynote speakers.</p>
<p>Tantek Çelik (Chief Technologist at Technorati) moderated <em>The Growth and Evolution of Microformats</em>. <a href="http://microformats.org/">Microformats</a> are a set of simple, open data formats that standardize the meaning of HTML content. Examples of content that can be used with Microformats include people, organizations, events, addresses and more. Many sites including Google, Upcoming, and Flickr are using microformats, and both Firefox 3 and Internet Explorer 8 will have built-in microformat readers. Until then, microformats can be read through the <a href="https://addons.mozilla.org/en-US/firefox/addon/4106">Operator</a> and <a href="https://addons.mozilla.org/en-US/firefox/addon/2240">Tails</a> Firefox extensions.</p>
<h3>Formatting Your Data</h3>
<p>Let&#8217;s use my contact information as an example where we will use the <a href="http://microformats.org/wiki/hcard">hCard</a> format (a microformat that represents people, companies, organizations, and places). On my contact page, I posted my name and contact information. If this information is relevant to a user, they may copy it—line by line—to a contact list in Outlook, iCal, or a mobile device. By adding an hCard, this process is automated. The code looks like this:</p>
<div class="codeblock">&lt;div id=&#8221;hcard-Brian-Peppler&#8221; class=&#8221;vcard&#8221;&gt;<br />
&lt;a class=&#8221;url fn&#8221; href=&#8221;http://www.brianpeppler.com&#8221;&gt;Brian Peppler&lt;/a&gt;&lt;br /&gt;<br />
&lt;a class=&#8221;email&#8221; href=&#8221;mailto:brian@brianpeppler.com&#8221;&gt;brian <br />@brianpeppler.com&lt;/a&gt;<br />
&lt;div class=&#8221;adr&#8221;&gt;<br />
&lt;div class=&#8221;street-address&#8221;&gt;1514 17th St. NW #101&lt;/div&gt;<br />
&lt;span class=&#8221;locality&#8221;&gt;Washington&lt;/span&gt;, &lt;span class=&#8221;region&#8221;&gt;DC&lt;/span&gt;, &lt;span class=&#8221;postal-code&#8221;&gt;20036&lt;/span&gt; &lt;span class=&#8221;country-name&#8221;&gt;USA&lt;/span&gt; &lt;/div&gt;<br />
&lt;/div&gt;</div>
<p>The result can be formatted in HTML like this:</p>
<div id="hcard-Brian-Peppler" class="vcard"> <a class="url fn" href="http://www.brianpeppler.com">Brian Peppler</a><br />
<a class="email" href="mailto:hello@brianpeppler.com">hello@brianpeppler.com</a> </p>
<div class="adr">
<div class="street-address">1514 17th St. NW #101</div>
<p>  <span class="locality">Washington</span>, <span class="region">DC</span>, <span class="postal-code">20036</span> <span class="country-name">USA</span></div>
</div>
<p>Your contact information can also be formatted as  a <a href="http://technorati.com/contact/http://www.brianpeppler.com/2007/03/16/microformats/">downloadable hCard<br />
</a> through the <a href="http://technorati.com/contact">Technorati Contacts Feed Service</a>. </p>
<p>This looks nice, but what good does it do? Aside from exporting the data to desktop applications, mobile phone browsers visiting this site can place a call to me directly from my microformatted content.</p>
<h3>Additional Resources</h3>
<p>Check out the <a href="http://www.webstandards.org/action/dwtf/microformats/">Dreamweaver microformat extension</a> and <a href="http://www.microformats.org">microformats.org</a> help creating your own microformats. </p>
]]></content:encoded>
			<wfw:commentRss>http://www.brianpeppler.com/webtechnology/microformats/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>
