<?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>Progressive Degradation</title>
	<atom:link href="http://walterg2.com/feed/" rel="self" type="application/rss+xml" />
	<link>http://walterg2.com</link>
	<description>As tools improve, experience declines</description>
	<lastBuildDate>Tue, 12 Jan 2010 19:07:06 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.3.1</generator>
		<item>
		<title>Getting More Out of Your UITableViews</title>
		<link>http://walterg2.com/2009/12/09/getting-more-out-of-your-uitableviews/</link>
		<comments>http://walterg2.com/2009/12/09/getting-more-out-of-your-uitableviews/#comments</comments>
		<pubDate>Thu, 10 Dec 2009 04:15:05 +0000</pubDate>
		<dc:creator>walterg2</dc:creator>
				<category><![CDATA[iPhone]]></category>
		<category><![CDATA[Building Your App]]></category>
		<category><![CDATA[Interface Builder]]></category>
		<category><![CDATA[NIB]]></category>
		<category><![CDATA[UITableView]]></category>
		<category><![CDATA[XIB]]></category>

		<guid isPermaLink="false">http://walterg2.com/?p=80</guid>
		<description><![CDATA[Everyone that has built an iPhone application has at one time or another worked with UITableViews. They are pretty much at the heart of most data intensive applications from Twitter clients to just your standard news app. One thing that&#8217;s not too clear is how do you get more from your tables without jamming (usually [...]]]></description>
			<content:encoded><![CDATA[<p>Everyone that has built an iPhone application has at one time or another worked with UITableViews. They are pretty much at the heart of most data intensive applications from Twitter clients to just your standard news app. One thing that&#8217;s not too clear is how do you get more from your tables without jamming (usually with a sledgehammer and your trusty shoe horn) them into a header of a table section header. There isn&#8217;t much information on the net (at least that I found in my multiple searches) that really goes into how to accomplish this as well.<span id="more-80"></span></p>
<h2>Starting out</h2>
<div id="attachment_81" class="wp-caption alignleft" style="width: 172px"><img class="size-medium wp-image-81" title="iphone-wireframe" src="http://walterg2.com/wp-content/uploads/2009/12/iphone-wireframe-162x300.png" alt="Wireframe of what your business wants" width="162" height="300" /><p class="wp-caption-text">Wireframe of what your business wants</p></div>
<p>So, you&#8217;ve been looking to build a view that is mainly a table, yet has something, maybe some instructional text or even a little description of what the view is for, more to make that view easily understood by the user, but you don&#8217;t want to sacrifice the use of your table header either. Of course, this probably came as a result of some sort of downfall you had seen in a previous application that does similar things, so you&#8217;re sold on this being the &#8220;right&#8221; way to do it.</p>
<p>But how do you actually do this and ensure that the view scrolls not just the table, but everything in that view? This was something I struggled with for a few hours, Trying time and time again to manpulate a UIScrollView XIB with a UITableView nested inside. All that did was override the scroll features of the UIScrollView to the UITableView, making the only thing you can scroll the table; not the entire view as desired. Before you lose all of your hair as to why, it&#8217;s basically due to the UITableView being a subclass of UIScrollView.</p>
<h2>How it&#8217;s done</h2>
<p>OK, now that we&#8217;re past trying to get our way through force, let&#8217;s get try some finesse. Given that we&#8217;re really trying to add more information to a UITableView, so why don&#8217;t we try something along those lines. First, we need to create the classes and XIB that will be our view when we&#8217;re done. Do this as you normally would by choosing <strong>File</strong> -&gt; <strong>New File</strong> or <strong>Command-N</strong> if you&#8217;re keyboard motivated. When the New File screen comes up, choose <strong>Cocoa Touch Class</strong> under the iPhone OS section, then <strong>UIViewController subclass</strong>. Make sure you check the two options available; <strong>UITableViewController subclass</strong> and <strong>With XIB for user interface</strong>. Choose <strong>Next</strong>, and create the <strong>.m</strong> and <strong>.h</strong> files.</p>
<p><img class="size-medium wp-image-85 alignright" title="interface-builder-table-view-nib" src="http://walterg2.com/wp-content/uploads/2009/12/interface-builder-table-view-nib-300x299.png" alt="interface-builder-table-view-nib" width="300" height="299" />Now you should have three files available to you: your .m, .h and .xib file so it&#8217;s time to make the XIB do what we want. Open the XIB file either by double-clicking it in XCode, or manually by opening Interface Builder, finding the file and opening the XIB file. To add in the necessary label which is the root of all this additional work, we simply need to do only two more things.</p>
<h2>The two steps</h2>
<p><img class="alignleft size-medium wp-image-86" title="interface-builder-table-view-with-label" src="http://walterg2.com/wp-content/uploads/2009/12/interface-builder-table-view-with-label-300x299.png" alt="interface-builder-table-view-with-label" width="300" height="299" />The first thing to do is to add a UIView as a child of your Table View. Easy enough, just find the UIView in the Library within Interface Builder and drag it into your XIB view where you&#8217;re looking to drop it. Simple enough. The next step is just as simple. We need to add the label. Again, find the Label in the Library and drag it under your UIView that you just added.</p>
<p>I&#8217;m sure you&#8217;re thinking, &#8220;It can&#8217;t be that simple, can it?&#8221; Well, believe it or not, it is. When I figured this out, it was just a shot in the dark as I had first tried everything I could think of by using a UIScrollView and embedding a table inside of it.</p>
<p>There is still a little formatting you will need to do to ensure your view and it&#8217;s label have enough space at the top of your view. But, once you&#8217;re done though, you should have the view of your XIB looking like the image below. You can also add another view and using simple positioning, place it at the bottom of your view, creating the same effect after your table.</p>
<p><img class="aligncenter size-medium wp-image-84" title="interface-builder-table-view-layout" src="http://walterg2.com/wp-content/uploads/2009/12/interface-builder-table-view-layout-206x299.png" alt="interface-builder-table-view-layout" width="206" height="299" /></p>
<h2>In close</h2>
<p>There are drawbacks, of course. Yes, everything has to have some drawback, nothing is free. The one that you need to be aware of is that you cannot build your code for an iPhone OS under 3.0. If you&#8217;re still building apps for 2.2.1 or below, this would be a great opportunity to change that.</p>
<p>If you&#8217;re wondering what spurred me into finding a solution for the problem at the beginning of this article, it was for an application where the &#8220;My Profile&#8221; tab is able to be updated by the server, so we needed a short label informing users that they can download their profile, but changes are not reflected at the server and a button to start the (potential) login and download processes.</p>
<p style="text-align: center;">
     ]]></content:encoded>
			<wfw:commentRss>http://walterg2.com/2009/12/09/getting-more-out-of-your-uitableviews/feed/</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
		<item>
		<title>Adding SVN Revision Numbers to Your Application&#8217;s Version</title>
		<link>http://walterg2.com/2009/12/07/adding-svn-revision-numbers-to-your-applications-version/</link>
		<comments>http://walterg2.com/2009/12/07/adding-svn-revision-numbers-to-your-applications-version/#comments</comments>
		<pubDate>Tue, 08 Dec 2009 04:45:47 +0000</pubDate>
		<dc:creator>walterg2</dc:creator>
				<category><![CDATA[iPhone]]></category>
		<category><![CDATA[SVN]]></category>
		<category><![CDATA[Versioning]]></category>
		<category><![CDATA[XCode]]></category>

		<guid isPermaLink="false">http://walterg2.com/?p=48</guid>
		<description><![CDATA[Recently, I&#8217;ve been given an oppotunity at my employer to participate in the next great version of our iPhone application. While it isn&#8217;t something fun and exciting, like ConvertBot or a game such as Eliminate Pro, it does allow me to get my hands dirty in Objective-C and iPhone development. With this experience has come [...]]]></description>
			<content:encoded><![CDATA[<p>Recently, I&#8217;ve been given an oppotunity at my employer to participate in the next great version of our iPhone application. While it isn&#8217;t something fun and exciting, like <a title="Visit the Tapbot website" href="http://tapbots.com/convertbot/" target="_blank">ConvertBot</a> or a game such as <a title="Visit the ngmoco website" href="http://eliminate.ngmoco.com/" target="_blank">Eliminate Pro</a>, it does allow me to get my hands dirty in Objective-C and iPhone development. With this experience has come a few things that I found difficult, at best, to spot an answer to within a single location. One of these things is something that, within a large corporation such as the one I work in, will help your support staff determine what version of your application a user currently has. Yes, there are items such as CFBundleVersion and CFBundleShortVersionString that accomplish this for you, but sometimes those may not be enough. Wouldn&#8217;t it be great if you could put the most recent commit revision number from your code repository? Good news, you can!<span id="more-48"></span></p>
<h2>Setting up your info.plist file</h2>
<div id="attachment_49" class="wp-caption alignright" style="width: 160px"><img class="size-thumbnail wp-image-49" title="info-plist-example" src="http://walterg2.com/wp-content/uploads/2009/12/info-plist-example-150x150.png" alt="Example info.plist file" width="150" height="150" /><p class="wp-caption-text">Example info.plist file</p></div>
<p>First thing that you&#8217;ll need to do is set up the info.plist file in your project to carry the appropriate keys you&#8217;re going to need for your project. These are your CFBundleVersion and CFBundleShortVersionString, or, if you prefer to use the interface provided within XCode, &#8216;Bundle version&#8217; and &#8216;Bundle version string, short&#8217;. These are used by Apple and iTunes to let the users know which version of the application you are using. From some simple tests I have done, they appear to check for the &#8216;Bundle version string, short&#8217; key if it exists, and, if not, then fall back to the &#8216;Bundle version&#8217;. For our purposes, we know we do not want the build number shown within the App Store and iTunes, so we need to set up both of these variables.</p>
<p>Since the &#8216;Bundle version&#8217; is going to change at build time to the latest commit revision, you can set this variable to anything you&#8217;d like. I prefer setting it to the same number as what will go in the &#8216;Bundle version string, short&#8217; value. This ensures that, no matter what, an appropriate version number is given to the user.</p>
<h2>Creating the Run Script</h2>
<div id="attachment_60" class="wp-caption alignleft" style="width: 160px"><img class="size-thumbnail wp-image-60" title="target-original-example" src="http://walterg2.com/wp-content/uploads/2009/12/target-original-example-150x150.png" alt="Target Build Steps" width="150" height="150" /><p class="wp-caption-text">Target Build Steps</p></div>
<p>Now that the base is established, it&#8217;s time to move to getting the revision number added at build time. Why at build time do you ask? Basically, if this was added at any time other than during the build, it would put you into a loop where your application&#8217;s revision number is always one commit behind. If the update was done at any other time, you would run into the issue of changing info.plist to be the most recent commit statement, then having a sync to get this code into SVN, thus putting you a commit behind. Repeat ad nauseum until your eyes cross and you give up on the effort altogether.</p>
<p>This is where Apple has stepped in and given you an extremely powerful tool within the build process which allows you to create new Build Phases within your project. During the build of your project, you can execute code in multiple languages including, the Bash Shell, Ruby, Perl and Python, just to name a few. Now, your builds can add additional features such as this revision number by simply adding in a script in the right order in your build.</p>
<div id="attachment_59" class="wp-caption alignright" style="width: 160px"><img class="size-thumbnail wp-image-59" title="add-build-phase-run-script" src="http://walterg2.com/wp-content/uploads/2009/12/add-build-phase-run-script-150x150.png" alt="Example shot of the New Run Script Build Phase" width="150" height="150" /><p class="wp-caption-text">Example shot of the New Run Script Build Phase</p></div>
<p>To do this, you have a few ways to do this. Within XCode, you can choose <strong>Project</strong>, <strong>New Build Phase</strong>, <strong>New Run Build Script Phase</strong> or from the Target in <strong>Groups and Files</strong>, <strong>CTRL</strong>+click on your application, choose <strong>Add</strong>, <strong>New Build Phase</strong>, <strong>New Run Build Script Phase</strong>. This will open a window to allow you to write your script in.</p>
<p>Now, for the fun part. In the language of your choosing, write your code. For this post, I&#8217;m going to use a Bash Shell to add the code necessary for the addition of our SVN Revision number. What we&#8217;re going to do is accomplished in only three lines of code, which, as anyone can agree, is awesome! The down side is that the code isn&#8217;t the most readable unless you&#8217;re very familiar with SED scripting.</p>

<div class="wp_syntax"><div class="code"><pre class="bash" style="font-family:monospace;"><span style="color: #007800;">REVISION</span>=<span style="color: #000000; font-weight: bold;">`</span><span style="color: #c20cb9; font-weight: bold;">svnversion</span> <span style="color: #660033;">-nc</span> <span style="color: #000000; font-weight: bold;">|</span> <span style="color: #000000; font-weight: bold;">/</span>usr<span style="color: #000000; font-weight: bold;">/</span>bin<span style="color: #000000; font-weight: bold;">/</span><span style="color: #c20cb9; font-weight: bold;">sed</span> <span style="color: #660033;">-e</span> <span style="color: #ff0000;">'s/^[^:]*://;s/[A-Za-z]//'</span><span style="color: #000000; font-weight: bold;">`</span>
<span style="color: #007800;">APPVERSION</span>=<span style="color: #000000; font-weight: bold;">`/</span>usr<span style="color: #000000; font-weight: bold;">/</span>libexec<span style="color: #000000; font-weight: bold;">/</span>PlistBuddy <span style="color: #660033;">-c</span> <span style="color: #ff0000;">&quot;Print CFBundleShortVersionString&quot;</span> <span style="color: #ff0000;">&quot;<span style="color: #007800;">${TARGET_BUILD_DIR}</span>&quot;</span><span style="color: #000000; font-weight: bold;">/</span><span style="color: #800000;">${INFOPLIST_PATH}</span><span style="color: #000000; font-weight: bold;">`</span>
<span style="color: #000000; font-weight: bold;">/</span>usr<span style="color: #000000; font-weight: bold;">/</span>libexec<span style="color: #000000; font-weight: bold;">/</span>PlistBuddy <span style="color: #660033;">-c</span> <span style="color: #ff0000;">&quot;Set :CFBundleVersion <span style="color: #007800;">$APPVERSION</span> (<span style="color: #007800;">$REVISION</span>)&quot;</span> <span style="color: #ff0000;">&quot;<span style="color: #007800;">${TARGET_BUILD_DIR}</span>&quot;</span><span style="color: #000000; font-weight: bold;">/</span><span style="color: #800000;">${INFOPLIST_PATH}</span></pre></div></div>

<p>Now, let&#8217;s explain what we&#8217;ve done. In the first line, we&#8217;re getting the SVN Revision number for the project. This is accomplished by using the <strong>svnversion</strong> program with two flags set, <strong>-n</strong> and <strong>-c</strong>. The -n flag removes the new-line character from the response (something we really don&#8217;t want anyway) and the -c flag asks for the most recent commit for the specific project you&#8217;re running under. We pipe that information into SED and run a quick regular expression on it. Why do we need a RegExp? Well, svnversion -c returns more information than we really need. It sends us back the initial version from when project was created followed by the last committed version. For instance, if you created the project and it was assigned version 500, three weeks later you&#8217;ve had quite a bit of code activity and your final check-in gives you revision number 847. When you run svnversion -c within your project folder, you will get back a result of 500:847. That&#8217;s great, but within you&#8217;re application you&#8217;re only looking for the last number. That&#8217;s where the SED command comes in.</p>
<p>The next line is something I&#8217;ve done in my project, but is, obviously not something that has to be done. Within that code is something important, it&#8217;s a call to an application that comes with XCode called <strong>PlistBuddy</strong>. PlistBuddy, in short, is a tool to read and update plist files which is exactly what we&#8217;re looking to do. The call is simply to store the value of <strong>CFBundleShortVersionString</strong> from our info.plist file to a local variable in the shell script. Since some developers (eh-hem, <a title="Visit Chad's Twitter stream" href="http://twitter.com/chadpredovich" target="_blank">@chadpredovich</a>) like to create their projects within a directory structure with spaces in it, the ${TARGET_BUILD_DIR} is wrapped in quotes to ensure the script doesn&#8217;t fail. Of course, TARGE_BUILD_DIR and INFOPLIST_PATH are variables within the build wrapper that is executing this script, so they&#8217;re available to us as well. Nice, huh?</p>
<p>The final line again uses PlistBuddy, but this time to set the <strong>CFBundleVersion </strong>to the values stored in our two variables, APPVERSION and REVISION.</p>
<div class="mceTemp">
<dl id="attachment_77" class="wp-caption alignleft" style="width: 160px;">
<dt class="wp-caption-dt"><img class="size-thumbnail wp-image-77" title="target-example" src="http://walterg2.com/wp-content/uploads/2009/12/target-example-150x108.png" alt="Move your Run Script to ensure updates to info.plist occur before the build of the application" width="150" height="108" /></dt>
</dl>
</div>
<p>Now that you have the script set up, simply place it in the correct order within the Build Phases. In our case, we want to do this immediately after the &#8216;Copy Bundle Resources&#8217; step inside your Target as the image illustrates.</p>
<h2>Time to add the pretty little bow</h2>

<div class="wp_syntax"><div class="code"><pre class="objc" style="font-family:monospace;"><span style="color: #400080;">NSString</span> <span style="color: #002200;">*</span>version <span style="color: #002200;">=</span> <span style="color: #002200;">&#91;</span><span style="color: #bf1d1a;">@</span><span style="color: #bf1d1a;">&quot;Version &quot;</span> stringByAppendingString<span style="color: #002200;">:</span><span style="color: #002200;">&#91;</span>mainBundle objectForInfoDictionaryKey<span style="color: #002200;">:</span><span style="color: #bf1d1a;">@</span><span style="color: #bf1d1a;">&quot;CFBundleVersion&quot;</span><span style="color: #002200;">&#93;</span><span style="color: #002200;">&#93;</span>;</pre></div></div>

<p>Now that you have the revision number added into the info.plist file, it&#8217;s as simple as pulling that information back out where you want to show it in your application. A little Obj-C magic and your support staff can rest easy that they can easily reproduce the issue a user may be having within your application by ensuring they are building the code from the exact code base that went to Apple.</p>
<h2>Update!!! (2010/01/12)</h2>
<p>When we tried to submit our app to the Apple App Store for review, it was rejected due to an improperly formed CFBundleVersion. It turns out, and is consequently poorly documented, that the CFBundleVersion can only be in the following format NN.N.N Where N is a number from 0 to 9. As you can tell, this means that in an application versioning, the app&#8217;s major version is a number between 0 and 99, minor and revision between 0 and 9. I&#8217;m not sure whether the version numbers are strictly upheld, but I can say that the above post will not be accepted.</p>
<p>Well, back to the drawing board on this one!</p>
     ]]></content:encoded>
			<wfw:commentRss>http://walterg2.com/2009/12/07/adding-svn-revision-numbers-to-your-applications-version/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Why All Developers Do Not Make Good JavaScript Developers</title>
		<link>http://walterg2.com/2009/09/03/why-all-developers-do-not-make-good-javascript-developers/</link>
		<comments>http://walterg2.com/2009/09/03/why-all-developers-do-not-make-good-javascript-developers/#comments</comments>
		<pubDate>Thu, 03 Sep 2009 20:43:11 +0000</pubDate>
		<dc:creator>walterg2</dc:creator>
				<category><![CDATA[JavaScript]]></category>

		<guid isPermaLink="false">http://walterg2.com/?p=39</guid>
		<description><![CDATA[In my job, I&#8217;m always asked to review and make recommendations regarding the code in the company&#8217;s User Interface space. While this is generally a fun and exciting process, it sometimes just proves the difference between developers that know a language and those that can get by during a coding effort. This is where I [...]]]></description>
			<content:encoded><![CDATA[<p>In my job, I&#8217;m always asked to review and make recommendations regarding the code in the company&#8217;s User Interface space. While this is generally a fun and exciting process, it sometimes just proves the difference between developers that know a language and those that can get by during a coding effort. This is where I believe large corporations usually fall short when defining roles for people to employ.<span id="more-39"></span></p>
<p>Whether the developer work in the .NET, Java, C++, C# or another application development space, most resumes that have web development experience at least mention the use of JavaScript, HTML and even, in some situations, CSS. To an interviewer that isn&#8217;t necessarily a strong developer in the languages they are hiring for, this looks like a dream come true; finally, someone that can develop the application from all aspects of it. MVC at it&#8217;s finest! But there is commonly one thing that most people ignore or forget, especially with contractor firms and that is that resumes are bloated with information even if the user has only done something as simple as read and debug a piece of code that wasn&#8217;t working well.</p>
<p>Of course, this situation occurs all the time without anyone to being the wiser in most situations. Corporations do not generally have individuals with advanced knowledge in languages other than the main server language they are employing. In fact, code reviews for these pieces of code are usually done by a development lead with around the same knowledge of these front-end languages so items get missed. But what items do you ask?</p>
<p>Let&#8217;s take for example some code I recently reviewed. Within this code is a simple timer when a user is logged into their account that will notify them shortly before the session actually expires to remind the user that they are logged in. Sounds simple enough; a timer and a message to the user to remind them, but how could the implementation go wrong? Well, let&#8217;s start by looking at the code.</p>

<div class="wp_syntax"><table><tr><td class="line_numbers"><pre>1
2
3
4
5
6
7
</pre></td><td class="code"><pre class="javascript" style="font-family:monospace;"><span style="color: #003366; font-weight: bold;">var</span> interval<span style="color: #339933;">;</span>var timer<span style="color: #339933;">;</span>var lengthToWait<span style="color: #339933;">;</span>
&nbsp;
<span style="color: #003366; font-weight: bold;">function</span> startTimer<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
  <span style="color: #000066; font-weight: bold;">if</span> <span style="color: #009900;">&#40;</span>timer<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
   clearTimer<span style="color: #009900;">&#40;</span>timer<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span> 
  <span style="color: #009900;">&#125;</span>
  timer <span style="color: #339933;">=</span> setTimer<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;someFunction();&quot;</span><span style="color: #339933;">,</span>lengthToWait<span style="color: #339933;">*</span><span style="color: #CC0000;">60</span><span style="color: #339933;">*</span><span style="color: #CC0000;">1000</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span><span style="color: #009900;">&#125;</span></pre></td></tr></table></div>

<p>Looks fine, but can you see the innate problem with this code? We have globally exposed variables that are generically named. The developer, while working on this specific code made sure that it worked specifically for the needs of this code itself, but what about all of the other code the site could possibly run during a user&#8217;s visit? What are the chances that another developer decided to use the same variables? If there are a lot of developers working on this code base, a pretty good chance. And finding the issue could be a daunting task given that the problem most likely would not be found until the regression testing suite that covers this piece of code and then, it&#8217;s doubtful that the tie would be made quickly, if at all, that the issue is with the variable naming in the global space.</p>
<p>So, what can one do to keep this from happening? Well, two items come to mind. The first, what a developer that knows enough of the JavaScript language to be dangerous would do, and the more appropriate way, which, ironically, would be the way the developer would fix the issue if they ran into it in their server language.</p>
<p>The first is not optimal, by far, but is the one most easily employed by our weekend JavaScript developer. It gets the job completed and everyone is happy until the next incident during another effort sometime in the future. The second approach takes a little more skill in the language, but it keeps the variables needed wrapped in an object that is only used within itself.</p>
<p>So, how do we get the best coding practices put in force? Hiring a group of User Interface developers would be the easiest solution. A team of developers that work daily in the languages used in this tier of the application space. Unfortunately, even though most companies need developers with these specific knowledge sets, it&#8217;s cheaper and faster to simply hire someone that knows enough to get the job done.</p>
<p>To close, I&#8217;ll leave you with this. You wouldn&#8217;t hire someone to build your house that has only tinkered with a hammer and nails, would you?</p>
     ]]></content:encoded>
			<wfw:commentRss>http://walterg2.com/2009/09/03/why-all-developers-do-not-make-good-javascript-developers/feed/</wfw:commentRss>
		<slash:comments>5</slash:comments>
		</item>
		<item>
		<title>Accessibility and You</title>
		<link>http://walterg2.com/2009/04/29/accessibility-and-you/</link>
		<comments>http://walterg2.com/2009/04/29/accessibility-and-you/#comments</comments>
		<pubDate>Thu, 30 Apr 2009 03:37:52 +0000</pubDate>
		<dc:creator>walterg2</dc:creator>
				<category><![CDATA[Accessibility]]></category>
		<category><![CDATA[JavaScript]]></category>
		<category><![CDATA[flash]]></category>

		<guid isPermaLink="false">http://walterg2.com/?p=11</guid>
		<description><![CDATA[We all have items we focus on from day to day when building sites. It is always a challenge to get an idea of what really matters to a client and even what they know about their consumers. Most developers/designers spend hours trying to convince clients that they need to focus on ensuring everyone that [...]]]></description>
			<content:encoded><![CDATA[<p>We all have items we focus on from day to day when building sites. It is always a challenge to get an idea of what really matters to a client and even what they know about their consumers. Most developers/designers spend hours trying to convince clients that they need to focus on ensuring <strong>everyone</strong> that comes to their site can access everything in it, but most clients want flashy, dynamic and even some times, over-thought items on their site just because it looks cool or someone has said the magic phrase, &#8220;It&#8217;s Web 2.0!&#8221;. For most, it&#8217;s working with people that don&#8217;t realize they could be missing out on multiple audiences when they ask for something. For others, it&#8217;s that they want what they like and everyone else must like it too. And even for more, it&#8217;s that they just don&#8217;t know any better.</p>
<p><span id="more-11"></span>At the company I work for today, there are many such individuals that see the web from a certain perspective and don&#8217;t seem to understand what it means to use certain techniques or technologies within the web world. Even trying to explain sometimes gets the glassy eyed stare of an individual that either doesn&#8217;t comprehend or just doesn&#8217;t appear to care to listen to the other side of what it is they&#8217;re going to be doing to users. Sometimes it&#8217;s as simple as &#8220;what if the user can&#8217;t see this?&#8221; which always seems to get a response of &#8220;what do you mean they can&#8217;t see this? They click the link and it appears!&#8221;</p>
<h2>Understanding your audience is key</h2>
<p>Knowing that the battle of a usable website for all of your visitors is a balancing act on a ninjato. Very short and very tretcherous. Short, only because without the right knowledge, you&#8217;ll never convince the individuals that you need to. Tretcherous because once you start down the path of trying to explain that there are those people that cannot use advanced items like modal windows or other DHTML techniques that deliver that interactive experience that a general web audience expects with today&#8217;s sites. With today&#8217;s analytic software options on the market today (free and paid), you can tell a pretty accurate story on quite a few items from where your traffic comes from geographically to when those users visit to even how many of them have JavaScript disable and which version of <a title="Visit Adobe's website" href="http://get.adobe.com/flashplayer/" target="_blank">Adobe&#8217;s Flash Player</a> they have. But, currently, no screen reader software creator on the market today has made the move to let website owners know that a computer with their software on it has visited their site. Without this knowledge it becomes increasingly difficult to educate your clients on the needs to balance their site with the right kinds of interactive features and good old fashion page refreshes to get a user through their experience.</p>
<h2>Then how do I get this information?</h2>
<p>Well, until recently, there was little anyone could do to find out if the user visiting your site really needed an alternative experience to ensure they were able to get the full use of your site. When I started looking into what could be done to garner this information, I was only able to find one product which did this; the infamous <a title="Visit OSFlash.org" href="http://osflash.org/flashaid" target="_blank">FlashAid application</a>. While this application did work, it was designed only for Internet Explorer and took approximately 2 seconds to return the information it was built to seek out. Not fast enough by today&#8217;s web standards, especially since most dynamic features are set as soon as the Document Object Model is ready for manipulation.</p>
<p>What were we to do? Well, improve upon the design, of course! The thought behind the FlashAid tool is still a great one today. More than 99% of users on the web today have the Adobe Flash Player, and thanks to sites like <a title="Visit YouTube.com" href="http://youtube.com" target="_blank">YouTube</a> and <a title="Visit Google Video" href="http://video.google.com" target="_blank">Google Video</a> users are quick to upgrade their player to the most recent one very quickly. This makes a Flash-based tool the perfect host for gathering information on accessibility tools.</p>
<h2>OK, so, what&#8217;s the code already?!?</h2>
<p>Well, the code is in two parts: a Flash component and JavaScript.</p>
<p>While probably all of this could be written directly in Flash, I chose to use a hybrid approach to allow users to more easily change how the component behaves. Yes, it&#8217;s two files to download, but with a little finese and proper planning, it won&#8217;t make much of a difference.</p>
<h2>Enter the JavaScript</h2>
<p>Inside the JavaScript package are two functions, first the Assistive Technology check code. This code is the meat behind the technology checker and does two main things. First, it adds, using SWFObject, the Flash application (shown later), stores a cookie on the user&#8217;s machine for use in other JavaScript applications and finally gives the ability to post the results of that Flash file to analytic software.</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
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
</pre></td><td class="code"><pre class="javascript" style="font-family:monospace;"><span style="color: #006600; font-style: italic;">/*globals SWFObject deconcept dcsMultiTrack escape */</span>
&nbsp;
<span style="color: #006600; font-style: italic;">/* Assistive Technology Checker
 * Version: 1.0
 * 2009/04/29
 * Author: George Walters II (walterg2_NOSPAM_@gmail.com)
 * Remove _NOSPAM_ to send me any comments/suggestions on improvements
 */</span>
&nbsp;
<span style="color: #006600; font-style: italic;">/* To launch:  as soon as possible, simply add in assistiveTech.init(debug); where debug is either true or false. 
 * This will allow for the flash to run in as little time as possible and mitigate as much of the delay in this
 * code running as possible.
 * Requires: SWFObject
 */</span>
&nbsp;
<span style="color: #003366; font-weight: bold;">var</span> assistiveTech <span style="color: #339933;">=</span> <span style="color: #009900;">&#123;</span>
  assistiveTechLocale<span style="color: #339933;">:</span> <span style="color: #3366CC;">&quot;./flash/assistiveTech.swf&quot;</span><span style="color: #339933;">,</span>
  replacementDiv<span style="color: #339933;">:</span> <span style="color: #3366CC;">&quot;assistiveTech&quot;</span><span style="color: #339933;">,</span>
  requireVersion<span style="color: #339933;">:</span> <span style="color: #3366CC;">&quot;9&quot;</span><span style="color: #339933;">,</span>
  debug<span style="color: #339933;">:</span> <span style="color: #003366; font-weight: bold;">false</span><span style="color: #339933;">,</span>
  debugFlag<span style="color: #339933;">:</span> <span style="color: #3366CC;">&quot;&quot;</span><span style="color: #339933;">,</span>
  techAssist<span style="color: #339933;">:</span> <span style="color: #003366; font-weight: bold;">false</span><span style="color: #339933;">,</span>
  cookieName<span style="color: #339933;">:</span> <span style="color: #3366CC;">&quot;assistiveTech&quot;</span><span style="color: #339933;">,</span>
  init<span style="color: #339933;">:</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span>debugFlag<span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>
    assistiveTech.<span style="color: #660066;">debug</span> <span style="color: #339933;">=</span> <span style="color: #009900;">&#40;</span>debugFlag<span style="color: #009900;">&#41;</span> <span style="color: #339933;">?</span> assistiveTech.<span style="color: #660066;">debugCheck</span><span style="color: #009900;">&#40;</span>debugFlag<span style="color: #009900;">&#41;</span> <span style="color: #339933;">:</span> assistiveTech.<span style="color: #660066;">debug</span><span style="color: #339933;">;</span>
	<span style="color: #003366; font-weight: bold;">var</span> cookieCheck <span style="color: #339933;">=</span> assistiveTech.<span style="color: #660066;">cookieExists</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
    <span style="color: #000066; font-weight: bold;">if</span> <span style="color: #009900;">&#40;</span><span style="color: #339933;">!</span>cookieCheck<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
      <span style="color: #003366; font-weight: bold;">var</span> so <span style="color: #339933;">=</span> <span style="color: #003366; font-weight: bold;">new</span> SWFObject<span style="color: #009900;">&#40;</span>assistiveTech.<span style="color: #660066;">assistiveTechLocale</span><span style="color: #339933;">,</span> <span style="color: #3366CC;">&quot;assistiveTechSwf&quot;</span><span style="color: #339933;">,</span> <span style="color: #CC0000;">1</span><span style="color: #339933;">,</span> <span style="color: #CC0000;">1</span><span style="color: #339933;">,</span> assistiveTech.<span style="color: #660066;">requireVersion</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
      so.<span style="color: #660066;">addParam</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;quality&quot;</span><span style="color: #339933;">,</span> <span style="color: #3366CC;">&quot;low&quot;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
      so.<span style="color: #660066;">addParam</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;allowScriptAccess&quot;</span><span style="color: #339933;">,</span> <span style="color: #3366CC;">&quot;all&quot;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
      <span style="color: #006600; font-style: italic;">// Pass the success handler's name to the Flash application. Flash</span>
      <span style="color: #006600; font-style: italic;">// will call this handler using ExternalInterface.</span>
      so.<span style="color: #660066;">addVariable</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;callback&quot;</span><span style="color: #339933;">,</span> <span style="color: #3366CC;">&quot;assistiveTech.flashSuccess&quot;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
      <span style="color: #006600; font-style: italic;">// Try and write out the SWFObject</span>
      <span style="color: #003366; font-weight: bold;">var</span> success <span style="color: #339933;">=</span> so.<span style="color: #000066; font-weight: bold;">write</span><span style="color: #009900;">&#40;</span>assistiveTech.<span style="color: #660066;">replacementDiv</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
      <span style="color: #006600; font-style: italic;">// If there's a problem in writing the tag, try to give the user more</span>
      <span style="color: #006600; font-style: italic;">// information (they've probably got the wrong version of the player)</span>
      <span style="color: #000066; font-weight: bold;">if</span> <span style="color: #009900;">&#40;</span> success <span style="color: #009900;">&#41;</span>
      <span style="color: #009900;">&#123;</span>
          <span style="color: #006600; font-style: italic;">// Successfully embedded. Now give the Flash movie focus</span>
          <span style="color: #006600; font-style: italic;">// or else it will be ignored by the screen reader and not</span>
          <span style="color: #006600; font-style: italic;">// get an update on isActive.</span>
          document.<span style="color: #660066;">getElementById</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;assistiveTechSwf&quot;</span><span style="color: #009900;">&#41;</span>.<span style="color: #000066;">focus</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
          <span style="color: #000066; font-weight: bold;">if</span> <span style="color: #009900;">&#40;</span> assistiveTech.<span style="color: #660066;">debug</span> <span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
            <span style="color: #006600; font-style: italic;">// Need to figure out what we want to do if debug is turned on and the flash piece succeeds</span>
          <span style="color: #009900;">&#125;</span>
      <span style="color: #009900;">&#125;</span>
&nbsp;
      <span style="color: #000066; font-weight: bold;">else</span> <span style="color: #009900;">&#123;</span>
        <span style="color: #006600; font-style: italic;">// Embedding the Flash application failed. </span>
        <span style="color: #006600; font-style: italic;">// Display the version message in the assistiveTech div only</span>
        <span style="color: #006600; font-style: italic;">// if we've been asked to do so.</span>
        <span style="color: #000066; font-weight: bold;">if</span> <span style="color: #009900;">&#40;</span> assistiveTech.<span style="color: #660066;">debug</span> <span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
          <span style="color: #003366; font-weight: bold;">var</span> version <span style="color: #339933;">=</span> deconcept.<span style="color: #660066;">SWFObjectUtil</span>.<span style="color: #660066;">getPlayerVersion</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
          <span style="color: #000066; font-weight: bold;">if</span> <span style="color: #009900;">&#40;</span>document.<span style="color: #660066;">getElementById</span> <span style="color: #339933;">&amp;&amp;</span> <span style="color: #009900;">&#40;</span>version.<span style="color: #660066;">major</span> <span style="color: #339933;">&gt;</span> <span style="color: #CC0000;">0</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span> 
          <span style="color: #009900;">&#123;</span>
            document.<span style="color: #660066;">getElementById</span><span style="color: #009900;">&#40;</span>assistiveTech.<span style="color: #660066;">replacementDiv</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">innerHTML</span> <span style="color: #339933;">=</span> <span style="color: #3366CC;">&quot;&lt;p&gt;This sample requires Flash Player version &quot;</span> <span style="color: #339933;">+</span>
                                                                         assistiveTech.<span style="color: #660066;">requireVersion</span> <span style="color: #339933;">+</span>
                                                                         <span style="color: #3366CC;">&quot;. You have Flash player &quot;</span> <span style="color: #339933;">+</span>
                                                                         version.<span style="color: #660066;">major</span> <span style="color: #339933;">+</span> <span style="color: #3366CC;">&quot;.&quot;</span> <span style="color: #339933;">+</span> version.<span style="color: #660066;">minor</span> <span style="color: #339933;">+</span> <span style="color: #3366CC;">&quot;.&quot;</span> <span style="color: #339933;">+</span> version.<span style="color: #660066;">rev</span> <span style="color: #339933;">+</span>
                                                                         <span style="color: #3366CC;">&quot; installed. &lt;a href='http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash'&gt;&quot;</span> <span style="color: #339933;">+</span>
                                                                         <span style="color: #3366CC;">&quot; Download the latest Flash Player&lt;/a&gt; to run the sample.&lt;/p&gt;&quot;</span><span style="color: #339933;">;</span>
          <span style="color: #009900;">&#125;</span>
        <span style="color: #009900;">&#125;</span>
        <span style="color: #006600; font-style: italic;">// Call the failure callback</span>
        <span style="color: #000066; font-weight: bold;">this</span> <span style="color: #009900;">&#91;</span> assistiveTech.<span style="color: #660066;">flashFailed</span> <span style="color: #009900;">&#93;</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
      <span style="color: #009900;">&#125;</span>
    <span style="color: #009900;">&#125;</span>
  <span style="color: #009900;">&#125;</span><span style="color: #339933;">,</span>
  setCookie<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> nextMonth <span style="color: #339933;">=</span> <span style="color: #003366; font-weight: bold;">new</span> Date<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
    nextMonth.<span style="color: #660066;">setSeconds</span><span style="color: #009900;">&#40;</span><span style="color: #CC0000;">0</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
    nextMonth.<span style="color: #660066;">setMinutes</span><span style="color: #009900;">&#40;</span><span style="color: #CC0000;">0</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
    nextMonth.<span style="color: #660066;">setHours</span><span style="color: #009900;">&#40;</span><span style="color: #CC0000;">0</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
    nextMonth.<span style="color: #660066;">setMonth</span><span style="color: #009900;">&#40;</span>nextMonth.<span style="color: #660066;">getMonth</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #339933;">+</span> <span style="color: #CC0000;">1</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
    nextMonth.<span style="color: #660066;">setDate</span><span style="color: #009900;">&#40;</span><span style="color: #CC0000;">1</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
    <span style="color: #003366; font-weight: bold;">var</span> expires_date <span style="color: #339933;">=</span> <span style="color: #003366; font-weight: bold;">new</span> Date<span style="color: #009900;">&#40;</span> nextMonth <span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
    document.<span style="color: #660066;">cookie</span> <span style="color: #339933;">=</span> assistiveTech.<span style="color: #660066;">cookieName</span> <span style="color: #339933;">+</span> <span style="color: #3366CC;">&quot;=&quot;</span> <span style="color: #339933;">+</span> escape<span style="color: #009900;">&#40;</span> assistiveTech.<span style="color: #660066;">techAssist</span> <span style="color: #009900;">&#41;</span> <span style="color: #339933;">+</span>
                      <span style="color: #3366CC;">&quot;; expires=&quot;</span> <span style="color: #339933;">+</span> expires_date.<span style="color: #660066;">toGMTString</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #339933;">+</span> 
                      <span style="color: #3366CC;">&quot;; path=/&quot;</span><span style="color: #339933;">;</span>
  <span style="color: #009900;">&#125;</span><span style="color: #339933;">,</span>
  getCookie<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> cookies <span style="color: #339933;">=</span> document.<span style="color: #660066;">cookie</span>.<span style="color: #660066;">split</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">';'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
    <span style="color: #000066; font-weight: bold;">for</span> <span style="color: #009900;">&#40;</span> <span style="color: #003366; font-weight: bold;">var</span> i <span style="color: #339933;">=</span> <span style="color: #CC0000;">0</span><span style="color: #339933;">;</span> i <span style="color: #339933;">&lt;</span> cookies.<span style="color: #660066;">length</span><span style="color: #339933;">;</span> i<span style="color: #339933;">++</span> <span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
      <span style="color: #003366; font-weight: bold;">var</span> cookieData <span style="color: #339933;">=</span> cookies<span style="color: #009900;">&#91;</span>i<span style="color: #009900;">&#93;</span>.<span style="color: #660066;">split</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'='</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
      <span style="color: #003366; font-weight: bold;">var</span> cookieName <span style="color: #339933;">=</span> cookieData<span style="color: #009900;">&#91;</span><span style="color: #CC0000;">0</span><span style="color: #009900;">&#93;</span>.<span style="color: #660066;">replace</span><span style="color: #009900;">&#40;</span><span style="color: #009966; font-style: italic;">/^\s+|\s+$/g</span><span style="color: #339933;">,</span> <span style="color: #3366CC;">''</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
      <span style="color: #000066; font-weight: bold;">if</span> <span style="color: #009900;">&#40;</span>cookieName <span style="color: #339933;">===</span> assistiveTech.<span style="color: #660066;">cookieName</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>	
        <span style="color: #000066; font-weight: bold;">return</span> cookieData<span style="color: #339933;">;</span>
      <span style="color: #009900;">&#125;</span>
    <span style="color: #009900;">&#125;</span>
    <span style="color: #000066; font-weight: bold;">return</span> <span style="color: #003366; font-weight: bold;">false</span><span style="color: #339933;">;</span>
  <span style="color: #009900;">&#125;</span><span style="color: #339933;">,</span>
  returnCookieValue<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> cookieInformation <span style="color: #339933;">=</span> assistiveTech.<span style="color: #660066;">getCookie</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	<span style="color: #000066; font-weight: bold;">return</span> cookieInformation<span style="color: #009900;">&#91;</span><span style="color: #CC0000;">1</span><span style="color: #009900;">&#93;</span><span style="color: #339933;">;</span>
  <span style="color: #009900;">&#125;</span><span style="color: #339933;">,</span>
  cookieExists<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> cookieInformation <span style="color: #339933;">=</span> assistiveTech.<span style="color: #660066;">getCookie</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	<span style="color: #000066; font-weight: bold;">if</span> <span style="color: #009900;">&#40;</span>assistiveTech.<span style="color: #660066;">debug</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
		<span style="color: #000066; font-weight: bold;">return</span> <span style="color: #003366; font-weight: bold;">false</span><span style="color: #339933;">;</span>
	<span style="color: #009900;">&#125;</span>
	<span style="color: #000066; font-weight: bold;">else</span> <span style="color: #000066; font-weight: bold;">if</span> <span style="color: #009900;">&#40;</span>cookieInformation <span style="color: #339933;">&amp;&amp;</span> cookieInformation.<span style="color: #660066;">length</span> <span style="color: #339933;">&gt;</span> <span style="color: #CC0000;">1</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
		<span style="color: #000066; font-weight: bold;">return</span> <span style="color: #003366; font-weight: bold;">true</span><span style="color: #339933;">;</span>
	<span style="color: #009900;">&#125;</span>
	<span style="color: #000066; font-weight: bold;">return</span> <span style="color: #003366; font-weight: bold;">null</span><span style="color: #339933;">;</span>
  <span style="color: #009900;">&#125;</span><span style="color: #339933;">,</span>
  debugCheck<span style="color: #339933;">:</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span>debugFlag<span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>
  	assistiveTech.<span style="color: #660066;">debugFlag</span> <span style="color: #339933;">=</span> debugFlag<span style="color: #339933;">;</span>
  	<span style="color: #000066; font-weight: bold;">if</span> <span style="color: #009900;">&#40;</span>debugFlag <span style="color: #339933;">===</span> <span style="color: #3366CC;">&quot;on&quot;</span> <span style="color: #339933;">||</span> debugFlag <span style="color: #339933;">===</span> <span style="color: #3366CC;">&quot;off&quot;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
		<span style="color: #000066; font-weight: bold;">return</span> <span style="color: #003366; font-weight: bold;">true</span><span style="color: #339933;">;</span>
	<span style="color: #009900;">&#125;</span>
	<span style="color: #000066; font-weight: bold;">else</span> <span style="color: #009900;">&#123;</span>
		<span style="color: #000066; font-weight: bold;">return</span> <span style="color: #003366; font-weight: bold;">false</span><span style="color: #339933;">;</span>
	<span style="color: #009900;">&#125;</span>
  <span style="color: #009900;">&#125;</span><span style="color: #339933;">,</span>
  flashSuccess<span style="color: #339933;">:</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span>accessibilityFlag<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
    assistiveTech.<span style="color: #660066;">techAssist</span> <span style="color: #339933;">=</span> <span style="color: #009900;">&#40;</span>assistiveTech.<span style="color: #660066;">debug</span> <span style="color: #339933;">&amp;&amp;</span> assistiveTech.<span style="color: #660066;">debugFlag</span> <span style="color: #339933;">===</span> <span style="color: #3366CC;">&quot;on&quot;</span><span style="color: #009900;">&#41;</span> <span style="color: #339933;">?</span> <span style="color: #003366; font-weight: bold;">true</span> <span style="color: #339933;">:</span> <span style="color: #009900;">&#40;</span><span style="color: #009900;">&#40;</span>assistiveTech.<span style="color: #660066;">debug</span> <span style="color: #339933;">&amp;&amp;</span> assistiveTech.<span style="color: #660066;">debugFlag</span> <span style="color: #339933;">===</span><span style="color: #3366CC;">&quot;off&quot;</span><span style="color: #009900;">&#41;</span> <span style="color: #339933;">?</span> <span style="color: #003366; font-weight: bold;">false</span> <span style="color: #339933;">:</span> accessibilityFlag<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
    assistiveTech.<span style="color: #660066;">setCookie</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
    <span style="color: #003366; font-weight: bold;">var</span> ATEnabled <span style="color: #339933;">=</span> assistiveTech.<span style="color: #660066;">techAssist</span> <span style="color: #339933;">?</span> <span style="color: #3366CC;">'Yes'</span> <span style="color: #339933;">:</span> <span style="color: #3366CC;">'No'</span><span style="color: #339933;">;</span>
    <span style="color: #006600; font-style: italic;">// Add in your favorite Analytics software call here</span>
  <span style="color: #009900;">&#125;</span><span style="color: #339933;">,</span>
  flashFailed<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: #006600; font-style: italic;">// Do something if the user doesn't have Flash 9 or higher installed</span>
    <span style="color: #000066; font-weight: bold;">if</span> <span style="color: #009900;">&#40;</span>assistiveTech.<span style="color: #660066;">debug</span> <span style="color: #339933;">===</span> <span style="color: #3366CC;">&quot;on&quot;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
		<span style="color: #000066;">alert</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'something went wrong'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	<span style="color: #009900;">&#125;</span>
  <span style="color: #009900;">&#125;</span>
<span style="color: #009900;">&#125;</span><span style="color: #339933;">;</span></pre></td></tr></table></div>

<p>The other piece is a Query String parser. Chances are you already have something to do this or have built one yourself very similar to this one. But, to make the code complete and allow for a debug mode, I&#8217;ve included the one below as part of the script. Does the normal items you&#8217;d expect from a Query String parser, evaluates the query string and allows you to get the value of a parameter passed on the query string. Very simple.</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
</pre></td><td class="code"><pre class="javascript" style="font-family:monospace;"><span style="color: #003366; font-weight: bold;">var</span> ParseQueryString <span style="color: #339933;">=</span> <span style="color: #009900;">&#123;</span>
  params<span style="color: #339933;">:</span><span style="color: #009900;">&#123;</span><span style="color: #009900;">&#125;</span><span style="color: #339933;">,</span>
  init<span style="color: #339933;">:</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span>qs<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
    <span style="color: #000066; font-weight: bold;">if</span> <span style="color: #009900;">&#40;</span><span style="color: #339933;">!</span>qs<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span> qs <span style="color: #339933;">=</span> location.<span style="color: #660066;">search</span>.<span style="color: #660066;">substring</span><span style="color: #009900;">&#40;</span><span style="color: #CC0000;">1</span><span style="color: #339933;">,</span> location.<span style="color: #660066;">search</span>.<span style="color: #660066;">length</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span> <span style="color: #009900;">&#125;</span>
    <span style="color: #000066; font-weight: bold;">if</span> <span style="color: #009900;">&#40;</span>qs.<span style="color: #660066;">length</span> <span style="color: #339933;">===</span> <span style="color: #CC0000;">0</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span> <span style="color: #000066; font-weight: bold;">return</span><span style="color: #339933;">;</span> <span style="color: #009900;">&#125;</span>
    <span style="color: #006600; font-style: italic;">// Turn &lt;plus&gt; back to &lt;space&gt;</span>
    <span style="color: #006600; font-style: italic;">// See: http://www.w3.org/TR/REC-html40/interact/forms.html#h-17.13.4.1</span>
    qs <span style="color: #339933;">=</span> qs.<span style="color: #660066;">replace</span><span style="color: #009900;">&#40;</span><span style="color: #009966; font-style: italic;">/\+/g</span><span style="color: #339933;">,</span> <span style="color: #3366CC;">' '</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
    <span style="color: #006600; font-style: italic;">// parse out name/value pairs separated via &amp;</span>
    <span style="color: #003366; font-weight: bold;">var</span> args <span style="color: #339933;">=</span> qs.<span style="color: #660066;">split</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'&amp;'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
    <span style="color: #006600; font-style: italic;">// split out each name=value pair</span>
    <span style="color: #000066; font-weight: bold;">for</span> <span style="color: #009900;">&#40;</span><span style="color: #003366; font-weight: bold;">var</span> i <span style="color: #339933;">=</span> <span style="color: #CC0000;">0</span><span style="color: #339933;">;</span> i <span style="color: #339933;">&lt;</span> args.<span style="color: #660066;">length</span><span style="color: #339933;">;</span> i<span style="color: #339933;">++</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
      <span style="color: #003366; font-weight: bold;">var</span> pair <span style="color: #339933;">=</span> args<span style="color: #009900;">&#91;</span>i<span style="color: #009900;">&#93;</span>.<span style="color: #660066;">split</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'='</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
      <span style="color: #003366; font-weight: bold;">var</span> <span style="color: #000066;">name</span> <span style="color: #339933;">=</span> decodeURIComponent<span style="color: #009900;">&#40;</span>pair<span style="color: #009900;">&#91;</span><span style="color: #CC0000;">0</span><span style="color: #009900;">&#93;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
      <span style="color: #003366; font-weight: bold;">var</span> value <span style="color: #339933;">=</span> <span style="color: #009900;">&#40;</span>pair.<span style="color: #660066;">length</span> <span style="color: #339933;">===</span> <span style="color: #CC0000;">2</span><span style="color: #009900;">&#41;</span> <span style="color: #339933;">?</span> decodeURIComponent<span style="color: #009900;">&#40;</span>pair<span style="color: #009900;">&#91;</span><span style="color: #CC0000;">1</span><span style="color: #009900;">&#93;</span><span style="color: #009900;">&#41;</span> <span style="color: #339933;">:</span> <span style="color: #000066;">name</span><span style="color: #339933;">;</span>
      <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">params</span><span style="color: #009900;">&#91;</span><span style="color: #000066;">name</span><span style="color: #009900;">&#93;</span> <span style="color: #339933;">=</span> value<span style="color: #339933;">;</span>
    <span style="color: #009900;">&#125;</span>
  <span style="color: #009900;">&#125;</span><span style="color: #339933;">,</span>
  get<span style="color: #339933;">:</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span>key<span style="color: #339933;">,</span> defaultText<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
	<span style="color: #003366; font-weight: bold;">var</span> value <span style="color: #339933;">=</span> ParseQueryString.<span style="color: #660066;">params</span><span style="color: #009900;">&#91;</span>key<span style="color: #009900;">&#93;</span><span style="color: #339933;">;</span>
	<span style="color: #000066; font-weight: bold;">return</span> <span style="color: #009900;">&#40;</span>value <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> value <span style="color: #339933;">:</span> defaultText<span style="color: #339933;">;</span>
  <span style="color: #009900;">&#125;</span><span style="color: #339933;">,</span>
  contains<span style="color: #339933;">:</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span>key<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
	<span style="color: #003366; font-weight: bold;">var</span> value <span style="color: #339933;">=</span> ParseQueryString.<span style="color: #660066;">params</span><span style="color: #009900;">&#91;</span>key<span style="color: #009900;">&#93;</span><span style="color: #339933;">;</span>
	<span style="color: #000066; font-weight: bold;">return</span> <span style="color: #009900;">&#40;</span>value <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: #009900;">&#125;</span>
<span style="color: #009900;">&#125;</span><span style="color: #339933;">;</span></pre></td></tr></table></div>

<h2>Don&#8217;t forget our friend Flash!</h2>
<p>And now for the Flash application. With the help of Michael Krotscheck (<a title="See Michael's profile on Twitter" href="http://twitter.com/krotscheck" target="_blank">@krotscheck</a> on Twitter), an ActionScript file was born. With only 19 lines of ActionScript, we have an application that checks for Accessibility and returns the information to a JavaScript callback function determined from a variable you pass into the Flash application. Since this is an ActionScript package, you can put this directly into a SWF file by use of the Flex SDK.</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
</pre></td><td class="code"><pre class="actionscript" style="font-family:monospace;">package <span style="color: #66cc66;">&#123;</span>
  <span style="color: #0066CC;">import</span> flash.<span style="color: #0066CC;">accessibility</span>.<span style="color: #0066CC;">Accessibility</span>;
  <span style="color: #0066CC;">import</span> flash.<span style="color: #006600;">display</span>.<span style="color: #006600;">LoaderInfo</span>;
  <span style="color: #0066CC;">import</span> flash.<span style="color: #006600;">display</span>.<span style="color: #006600;">Sprite</span>;
  <span style="color: #0066CC;">import</span> flash.<span style="color: #006600;">external</span>.<span style="color: #006600;">ExternalInterface</span>;
&nbsp;
  <span style="color: #0066CC;">public</span> <span style="color: #000000; font-weight: bold;">class</span> assistiveTech <span style="color: #0066CC;">extends</span> Sprite
  <span style="color: #66cc66;">&#123;</span>
    <span style="color: #0066CC;">public</span> <span style="color: #000000; font-weight: bold;">function</span> assistiveTech<span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span>
    <span style="color: #66cc66;">&#123;</span>
      <span style="color: #000000; font-weight: bold;">var</span> info : LoaderInfo = <span style="color: #0066CC;">this</span>.<span style="color: #006600;">root</span>.<span style="color: #006600;">loaderInfo</span>;
      <span style="color: #000000; font-weight: bold;">var</span> method : <span style="color: #0066CC;">String</span> = info.<span style="color: #006600;">parameters</span>.<span style="color: #006600;">callback</span>;
      <span style="color: #b1b100;">if</span> <span style="color: #66cc66;">&#40;</span> method <span style="color: #66cc66;">&amp;&amp;</span> ExternalInterface.<span style="color: #006600;">available</span> <span style="color: #66cc66;">&#41;</span>
      <span style="color: #66cc66;">&#123;</span>
        ExternalInterface.<span style="color: #0066CC;">call</span><span style="color: #66cc66;">&#40;</span> method, <span style="color: #0066CC;">Accessibility</span>.<span style="color: #006600;">active</span> <span style="color: #66cc66;">&#41;</span>;
      <span style="color: #66cc66;">&#125;</span>
    <span style="color: #66cc66;">&#125;</span>
  <span style="color: #66cc66;">&#125;</span>
<span style="color: #66cc66;">&#125;</span></pre></td></tr></table></div>

<h2>Next Steps</h2>
<p>Of course, I&#8217;m not finished just yet. With the code I have above, you can see that it&#8217;s JavaScript library independent. That is on purpose and I have plans to lock this down a bit more by encasing it into private and public functions, adding options and the like to make this a complete packaged piece of software. More on that to come though. For now, it&#8217;s time for bed.</p>
     ]]></content:encoded>
			<wfw:commentRss>http://walterg2.com/2009/04/29/accessibility-and-you/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Modal windows and accessibility</title>
		<link>http://walterg2.com/2009/02/23/modal-windows-and-accessibility/</link>
		<comments>http://walterg2.com/2009/02/23/modal-windows-and-accessibility/#comments</comments>
		<pubDate>Tue, 24 Feb 2009 03:16:33 +0000</pubDate>
		<dc:creator>walterg2</dc:creator>
				<category><![CDATA[Accessibility]]></category>
		<category><![CDATA[JavaScript]]></category>
		<category><![CDATA[flash]]></category>

		<guid isPermaLink="false">http://walterg2.com/?p=6</guid>
		<description><![CDATA[Everyone who has had to build a web application has come across issues with balancing accessibility needs of the product and keeping the site looking new and exciting. Even though my company is generally more on the conservative side, there are still those working within that realize that the only way to capture an audience is to "wow" them with a fresh look at the information users come to learn about and, hopefully, purchase. But what does this have to do with modals and accessibility?]]></description>
			<content:encoded><![CDATA[<p>Everyone who has had to build a web application has come across issues with balancing accessibility needs of the product and keeping the site looking new and exciting. Even though my company is generally more on the conservative side, there are still those working within that realize that the only way to capture an audience is to &#8220;wow&#8221; them with a fresh look at the information users come to learn about and, hopefully, purchase. But what does this have to do with modals and accessibility?<span id="more-6"></span></p>
<h2>Modals aren&#8217;t easily accessible!</h2>
<p>That&#8217;s right. If you&#8217;ve worked with modals on a web page, only the most recent versions of screen readers which have begun to implement solutions that listen for Dynamic HTML manipulations such as modal windows. That, however, only takes you as a developer so far. What about the rest of the users that need assistive technologies and can&#8217;t afford to upgrade to the latest and greatest all the time? I mean, at around $900 for the software, who can really afford to stay up to date?</p>
<h2>But what can we do about it?</h2>
<p>It&#8217;s difficult to even tell if you have a user base using assistive technologies most, if not all, screen readers today to not alert you, as a site owner, that a visitor has assistive technologies. Luckily, there have been some individuals who have begun looking into ways to finding ways to tell this information so you can react. One of those solutions is <a title="FlashAid" href="http://osflash.org/flashaid" target="_blank">FlashAid</a>.  Sure, it&#8217;s been in the 1.0 release for just under 2 years, the JavaScript code on their site only works in Internet Explorer (insert your IE6 complaint here; I&#8217;ll save that for a later post) and currently only checks whether an accessibility aid is communicating with Flash, but it&#8217;s a start!</p>
<p>Actually, it&#8217;s a pretty fine attempt at what we&#8217;re really looking for. With a small Flash application (238 bytes) and a little JavaScript, you can effectively test your visitors to see if they&#8217;re using accessibility aids on your site. But what do you really do with this information? Well, some options I&#8217;m currently trying are to store the response from the Flash file to a cookie (set by JavaScript) and then use that cookie in any and all code that creates modals, dynamically changes and displays HTML  and to pass that information to our analytics software so we can help better our site for all of our users.</p>
<h2>Downsides to the current implementation</h2>
<p>It&#8217;s currently only implemented in Flash 8/ActionScript 2.0 and takes a few seconds before it can tell whether or not accessibility is in use or not on the site. This could result in the user invoking an action that opens one of these inaccessible features. The chance is pretty slim, but of course, it could happen. Placing the JavaScript code which runs this check as close to the top of the body of you HTML pages will help make that time seem less, but a balance would need to be struck since running JavaScript at the top of a page is generally not a good idea.</p>
<h2>So, what&#8217;s next?</h2>
<p>I&#8217;ve written some JavaScript which will add the code (with the help of SWFObject) and set a cookie that gives the result from the Flash file which expires at the beginning of the next month. It works well and even has a &#8220;debug&#8221; mode so you can simulate a PC with an accessibility aid. But it&#8217;s only the beginning. Once this piece is added to the site, we&#8217;ll be able to tell how many users have an accessibility aid installed and active, but the less accessible code within your application will need to be updated to read that cookie and react accordingly.</p>
<p>I plan on sharing the code once I&#8217;ve more fully tested it to ensure it works across browsers and operating systems, so come back soon!</p>
     ]]></content:encoded>
			<wfw:commentRss>http://walterg2.com/2009/02/23/modal-windows-and-accessibility/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Let&#8217;s get this party started!</title>
		<link>http://walterg2.com/2009/02/23/lets-get-this-party-started/</link>
		<comments>http://walterg2.com/2009/02/23/lets-get-this-party-started/#comments</comments>
		<pubDate>Tue, 24 Feb 2009 00:11:19 +0000</pubDate>
		<dc:creator>walterg2</dc:creator>
				<category><![CDATA[Uncategorized]]></category>
		<category><![CDATA[blog intent]]></category>
		<category><![CDATA[start]]></category>

		<guid isPermaLink="false">http://walterg2.com/?p=3</guid>
		<description><![CDATA[Well, after years of reading others&#8217; blogs, I&#8217;ve finally decided to start my own. Being a developer at a major insurance company, there&#8217;s definitely a lot for me to talk about, yet sometimes time is not on my side. While posts may be sporadic for a while, I&#8217;m going to try an post at least [...]]]></description>
			<content:encoded><![CDATA[<p>Well, after years of reading others&#8217; blogs, I&#8217;ve finally decided to start my own. Being a developer at a major insurance company, there&#8217;s definitely a lot for me to talk about, yet sometimes time is not on my side. While posts may be sporadic for a while, I&#8217;m going to try an post at least once a week.</p>
     ]]></content:encoded>
			<wfw:commentRss>http://walterg2.com/2009/02/23/lets-get-this-party-started/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>

