<?xml version="1.0" encoding="utf-8"?>
<feed xmlns="http://www.w3.org/2005/Atom">
   <title>Griffin Interactive</title>
   <link rel="alternate" type="text/html" href="http://www.griffininteractive.net/" />
   <link rel="self" type="application/atom+xml" href="http://www.griffininteractive.net/atom.xml" />
   <id>tag:www.griffininteractive.net,2008://1</id>
   <updated>2008-04-02T15:36:54Z</updated>
   <subtitle>The all new Griffin Interactive weblog</subtitle>
   <generator uri="http://www.sixapart.com/movabletype/">Movable Type 3.35</generator>

<entry>
   <title>Doctor who is back</title>
   <link rel="alternate" type="text/html" href="http://www.griffininteractive.net/2008/04/doctor_who_is_back.html" />
   <id>tag:www.griffininteractive.net,2008://1.151</id>
   
   <published>2008-04-02T15:28:32Z</published>
   <updated>2008-04-02T15:36:54Z</updated>
   
   <summary>Doctor who ventures back to our screens this weekend in the latest 4th season, check out the video below....</summary>
   <author>
      <name>James Griffin</name>
      
   </author>
         <category term="Misc" scheme="http://www.sixapart.com/ns/types#category" />
   
   <category term="412" label="Doctor Who" scheme="http://www.sixapart.com/ns/types#tag" />
   
   <content type="html" xml:lang="en" xml:base="http://www.griffininteractive.net/">
      <![CDATA[Doctor who ventures back to our screens this weekend in the latest 4th season, check out the video below.

<object width='460'><param name='movie' value='http://video.news.sky.com/sky-news/app/flash/SkyvideoWrapper.swf?playerType=embedded&type=sky_production&videoSourceID=1311449&flashVideoUrl=feeds/skynews/latest/flash/drwho_p4640.flv'></param><param name='allowFullSceen' value='true'></param><param name='allowScriptAccess' value='always'></param><embed src='http://video.news.sky.com/sky-news/app/flash/SkyvideoWrapper.swf?playerType=embedded&type=sky_production&videoSourceID=1311449&flashVideoUrl=feeds/skynews/latest/flash/drwho_p4640.flv' type='application/x-shockwave-flash' allowFullScreen='true' allowScriptAccess='always' width='460'></embed></object>]]>
      
   </content>
</entry>
<entry>
   <title>Vista you start me up!</title>
   <link rel="alternate" type="text/html" href="http://www.griffininteractive.net/2008/02/vista_you_start_me_up.html" />
   <id>tag:www.griffininteractive.net,2008://1.150</id>
   
   <published>2008-02-16T23:32:32Z</published>
   <updated>2008-02-16T23:57:04Z</updated>
   
   <summary>So some of us have moved to Windows Vista, a few teething problems but are please with some usability improvements. For instance the most obvious to note is that you no longer have to start in order to &apos;shut down&apos;....</summary>
   <author>
      <name>James Griffin</name>
      
   </author>
         <category term="Usability" scheme="http://www.sixapart.com/ns/types#category" />
   
   <category term="396" label="Microsoft" scheme="http://www.sixapart.com/ns/types#tag" />
   <category term="27" label="Usability" scheme="http://www.sixapart.com/ns/types#tag" />
   <category term="316" label="Vista" scheme="http://www.sixapart.com/ns/types#tag" />
   <category term="404" label="Windows" scheme="http://www.sixapart.com/ns/types#tag" />
   
   <content type="html" xml:lang="en" xml:base="http://www.griffininteractive.net/">
      <![CDATA[So some of us have moved to Windows Vista, a few teething problems but are please with some usability improvements.

For instance the most obvious to note is that you no longer have to start in order to 'shut down'.

As a user of Windows XP you had to select the 'Start' button to shut down the machine, which always seemed a bit of a misnomer to me. However Vista improves on this by only showing the icon button.

<strong>Windows XP - Start it up then Shut it down</strong>

<img alt="xp-shutdown.png" src="http://www.griffininteractive.net/xp-shutdown.png" width="333" height="64" />

<br />

<strong>Windows Vista - Shut down</strong>

<img alt="vista-shoutdown1.png" src="http://www.griffininteractive.net/vista-shoutdown1.png" width="410" height="78" />

Although I still found myself hunting the 'shut down' option and inadvertently selecting the globally recognised symbol for stand-by.

<img alt="vista-standby.png" src="http://www.griffininteractive.net/vista-standby.png" width="146" height="54" />]]>
      
   </content>
</entry>
<entry>
   <title>Tag cloud filter</title>
   <link rel="alternate" type="text/html" href="http://www.griffininteractive.net/2007/07/tag_cloud_filter.html" />
   <id>tag:www.griffininteractive.net,2007://1.148</id>
   
   <published>2007-07-16T18:14:09Z</published>
   <updated>2008-01-11T17:28:08Z</updated>
   
   <summary>Tag clouds are great to visually indicate the popularity or frequency of a word. But as tag clouds increase in size so it takes more time to find the content tag you&apos;re looking for. The efficiency of the tag cloud...</summary>
   <author>
      <name>James Griffin</name>
      
   </author>
         <category term="UI Design Patterns" scheme="http://www.sixapart.com/ns/types#category" />
   
   <category term="304" label="Interaction design" scheme="http://www.sixapart.com/ns/types#tag" />
   <category term="51" label="JavaScript" scheme="http://www.sixapart.com/ns/types#tag" />
   <category term="193" label="Prototype" scheme="http://www.sixapart.com/ns/types#tag" />
   <category term="310" label="Slider" scheme="http://www.sixapart.com/ns/types#tag" />
   <category term="353" label="Tag Cloud" scheme="http://www.sixapart.com/ns/types#tag" />
   <category term="283" label="UI design" scheme="http://www.sixapart.com/ns/types#tag" />
   <category term="187" label="Widgets" scheme="http://www.sixapart.com/ns/types#tag" />
   
   <content type="html" xml:lang="en" xml:base="http://www.griffininteractive.net/">
      <![CDATA[<img class="article-img" src="/gi-images/articles/tagcloud.png" alt="Tag cloud filter"/>Tag clouds are great to visually indicate the popularity or frequency of a word. But as tag clouds increase in size so it takes more time to find the content tag you're looking for.

The efficiency of the tag cloud can be improved by applying colour ranges to match word frequency, as well as better use of <a href="http://www.echochamberproject.com/node/247" target="_BLANK" title="Tag Cloud Font Distribution Algorithm">text size</a>. The article (<a href="http://coelomic.wordpress.com/2006/01/02/tag-clouds/">"In search of the perfect Tag Cloud"</a> looks at a number of sites with varying techniques.

Another way to quickly view tags by popularity is to filter them by a selected weight. Using the slider interface we can let the user quickly adjust the displayed tags. 

Using a number of popular scripting libraries here is an example of our <a href="http://www.griffininteractive.net/slider/slider.html" target="_BLANK">Tag Cloud filter</a>.

<a class="action" style="padding-left: 80px; padding-right: 10px; float: left; clear: none" href="http://www.griffininteractive.net/slider/slider.html" target="_BLANK"><img src="/gi-images/actions/look.png" alt="Look at the fancy tag cloud slider"/></a><a class="action" href="http://www.griffininteractive.net/slider/slider.zip"><img src="/gi-images/actions/download.png" alt="Download the fancy tag cloud slider"/></a>]]>
      <![CDATA[The Tag Cloud filter is implemented using unobtrusive techniques and uses the following scripts:

<ul class="article">
<li><a href="http://www.prototypejs.org/">Prototype</a></li>
<li><a href="http://wiki.script.aculo.us/scriptaculous/show/SliderDemo">Scriptaculous - Slider Demo</a></li>
<li><a href="http://www.aldenta.com/examples/script.aculo.us/">Slider example - aldenta.com</a></li>
<li><a href="http://encytemedia.com/blog/articles/2006/3/21/introducing-css-event-selectors">CSS event selectors</a></li>
</ul>
<a href="http://www.griffininteractive.net/slider/slider.zip">Download Tag Cloud filter (zip archive)</a> 
]]>
   </content>
</entry>
<entry>
   <title>Managing multiple onLoad events with Prototype</title>
   <link rel="alternate" type="text/html" href="http://www.griffininteractive.net/2007/06/managing_multiple_onload_events_with_prototype.html" />
   <id>tag:www.griffininteractive.net,2007://1.147</id>
   
   <published>2007-06-16T12:11:58Z</published>
   <updated>2008-03-27T10:55:11Z</updated>
   
   <summary>This is an update to a previous article written way back in 2003 &quot;Managing multiple onLoad events in JavaScript&quot;. The article describes how to create an array of onload (window.onload) events in order to queue each event and enable the...</summary>
   <author>
      <name>James Griffin</name>
      
   </author>
         <category term="Scripting" scheme="http://www.sixapart.com/ns/types#category" />
   
   <category term="51" label="JavaScript" scheme="http://www.sixapart.com/ns/types#tag" />
   <category term="193" label="Prototype" scheme="http://www.sixapart.com/ns/types#tag" />
   
   <content type="html" xml:lang="en" xml:base="http://www.griffininteractive.net/">
      <![CDATA[<p>This is an update to a previous article written way back in 2003 "<a href="http://www.griffininteractive.net/2003/04/managing_multiple_onload_event.html">Managing multiple onLoad events in JavaScript</a>".</p>

<p>The article describes how to create an array of onload (window.onload) events in order to queue each event and enable the browser to perform onload sequentially. However this can all be forgotten in preference to the <a href="http://www.prototypejs.org">Prototype Javascript Framework</a> and the useful <a href="http://www.prototypejs.org/api/event/observe">Event Observe</a> method.</p>

<p>Use Event.observe instead of using &lt;body onload="return myFunction()"&gt; or DOM Level-0 event property window.onload = myFunction;</p>]]>
      <![CDATA[<strong>Example</strong>
<ol class="code">
<li class="odd">
<code class="first">Event.observe(window, 'load', function() { myFunction.init() });</code></li>
<li class="even">
<code class="last">Event.observe(window, 'load', function() { myFunction2.init() });</code></li>
</ol>]]>
   </content>
</entry>
<entry>
   <title>Alien Attack</title>
   <link rel="alternate" type="text/html" href="http://www.griffininteractive.net/2007/05/alien_attack.html" />
   <id>tag:www.griffininteractive.net,2007://1.146</id>
   
   <published>2007-05-28T19:43:16Z</published>
   <updated>2007-05-28T23:38:57Z</updated>
   
   <summary>Whilst looking through some dated archives I found some old animations, before condemning them to the waste bin I decided to upload a few to youtube for future reference. ISS-7 Alien Attack was a university animation project (1998), and created...</summary>
   <author>
      <name>James Griffin</name>
      
   </author>
         <category term="Creativity" scheme="http://www.sixapart.com/ns/types#category" />
   
   <category term="333" label="3D Animation" scheme="http://www.sixapart.com/ns/types#tag" />
   <category term="334" label="3D Studio Max" scheme="http://www.sixapart.com/ns/types#tag" />
   <category term="336" label="Computer animation" scheme="http://www.sixapart.com/ns/types#tag" />
   <category term="331" label="Showreel" scheme="http://www.sixapart.com/ns/types#tag" />
   <category term="321" label="youtube" scheme="http://www.sixapart.com/ns/types#tag" />
   
   <content type="html" xml:lang="en" xml:base="http://www.griffininteractive.net/">
      <![CDATA[Whilst looking through some dated archives I found some old animations, before condemning them to the waste bin I decided to upload a few to youtube for future reference.

ISS-7 Alien Attack was a university animation project (1998), and created using 3D Studio Max.

<p class="media"><object width="300" height="250"> <param name="movie" value="http://www.youtube.com/v/9lKy8ku_L0k"> </param> <embed src="http://www.youtube.com/v/9lKy8ku_L0k" type="application/x-shockwave-flash" width="300" height="250"> </embed> </object></p>]]>
      Back in &apos;98 graphic rendering took days not hours, you would often have to produce an animation only to redo the whole thing and see the first results a day later.

It would be great to do this project again using a Core Duo.
   </content>
</entry>
<entry>
   <title>Introducing the Slider control</title>
   <link rel="alternate" type="text/html" href="http://www.griffininteractive.net/2007/05/introducing_the_slider_control.html" />
   <id>tag:www.griffininteractive.net,2007://1.145</id>
   
   <published>2007-05-17T19:01:14Z</published>
   <updated>2007-05-25T08:20:15Z</updated>
   
   <summary>The slider as a control interface can be found on a number of appliances within the home. Maybe more so within older analogue interfaces such as a television volume control or Hi-fi graphic equaliser. All in all the sliders prime...</summary>
   <author>
      <name>James Griffin</name>
      
   </author>
         <category term="UI Design Patterns" scheme="http://www.sixapart.com/ns/types#category" />
   
   <category term="67" label="Google" scheme="http://www.sixapart.com/ns/types#tag" />
   <category term="299" label="HCI" scheme="http://www.sixapart.com/ns/types#tag" />
   <category term="304" label="Interaction design" scheme="http://www.sixapart.com/ns/types#tag" />
   <category term="320" label="Kayak" scheme="http://www.sixapart.com/ns/types#tag" />
   <category term="39" label="Mobile UI" scheme="http://www.sixapart.com/ns/types#tag" />
   <category term="154" label="OSX" scheme="http://www.sixapart.com/ns/types#tag" />
   <category term="310" label="Slider" scheme="http://www.sixapart.com/ns/types#tag" />
   <category term="312" label="T-Mobile" scheme="http://www.sixapart.com/ns/types#tag" />
   <category term="283" label="UI design" scheme="http://www.sixapart.com/ns/types#tag" />
   <category term="314" label="UIQ" scheme="http://www.sixapart.com/ns/types#tag" />
   <category term="316" label="Vista" scheme="http://www.sixapart.com/ns/types#tag" />
   <category term="187" label="Widgets" scheme="http://www.sixapart.com/ns/types#tag" />
   <category term="318" label="XP" scheme="http://www.sixapart.com/ns/types#tag" />
   <category term="322" label="YouTube" scheme="http://www.sixapart.com/ns/types#tag" />
   
   <content type="html" xml:lang="en" xml:base="http://www.griffininteractive.net/">
      <![CDATA[<img class="article-img" src="/gi-images/articles/slider-ui/slider-ctrl.png" alt="Slider control"/>The slider as a control interface can be found on a number of appliances within the home. Maybe more so within older analogue interfaces such as a television volume control or Hi-fi graphic equaliser.

All in all the sliders prime use is to control a range, where the position of the slider defines the control.

In this article we look at common uses of the 'Slider' within the home, the computer interface, web and Mobile UI.]]>
      <![CDATA[<h4>Slider controls around the home</h4>

The most common use that spring-to-mind are from older appliances, these have mainly been replaced by digital alternatives.

<dl class="article-images">
<dt class="mask"><img src="/gi-images/articles/slider-ui/old-television.jpg" alt=""></dt>
<dt>Old fashioned TV (pre 1990's)</dt>
<dd>Used to control volume, contrast and brightness levels</dd>
</dl>
<dl class="article-images">
<dt class="mask"><img src="/gi-images/articles/slider-ui/toaster.jpg" alt=""></dt>
<dt>Toaster</dt>
<dd>Select toasting time for the appropriate bread thickness</dd>
</dl>
<dl class="article-images">
<dt class="mask"><img src="/gi-images/articles/slider-ui/graphic-equaliser.jpg" alt=""></dt>
<dt>Retro Hi-fi graphic equalizer</dt>
<dd>Used to control frequency levels</dd>
</dl>
<dl class="article-images">
<dt class="mask"><img src="/gi-images/articles/slider-ui/dimmer-switch.jpg" alt=""></dt>
<dt>Light dimmer switch</dt>
<dd>Adjust the brightness</dd>
</dl>

<div class="hr"><hr/></div>
<h4>Slider controls within computer operating systems</h4>
<p>Here we compare slider controls used on Windows XP, Vista, Apple Mac OSX, and the native Java user interface</p>
<dl class="article-images">
<dt class="mask"><img src="/gi-images/articles/slider-ui/audio-xp.png" alt=""></dt>
<dt>Audio Mixer - Windows XP</dt>
</dl>
<dl class="article-images">
<dt class="mask"><img src="/gi-images/articles/slider-ui/audio-vista.png" alt=""></dt>
<dt>Audio Mixer - Windows Vista</dt>
</dl>
<dl class="article-images">
<dt class="mask"><img src="/gi-images/articles/slider-ui/audio-mac.png" alt=""></dt>
<dt>Audio controls - Mac OSX</dt>
</dl>
<dl class="article-images">
<dt class="mask"><img src="/gi-images/articles/slider-ui/audio-java.png" alt=""></dt>
<dt>Audio controls - Native Java UI</dt>
</dl>

<div class="hr"><hr/></div>
<h4>Slider controls within web design</h4>
<p>It has really only been since the introduction of Web 2.0 and AJAX that the Slider control has been successfully implemented within web design.</p>
<p>Not only is it technically possible to create such an interface but the use of implementation enriches the user experience. Just as with the other slider controls shown above, when the user adjusts the control an immediate response is expected, and it is this response that can now be achieved through <acronym title="Asynchronous JAvaScript and XML">AJAX</acronym>.</p>
<p>Popular and successful implementations of the slider are largely based around filtering search results.</p>
<dl class="article-images">
<dt class="mask"><img src="/gi-images/articles/slider-ui/web-kayak.png" alt=""></dt>
<dt><a href="http://www.kayak.co.uk">Kayak</a> - Find cheaper flights</dt>
<dd>Used to filter airline departure\return times</dd>
</dl>
<dl class="article-images">
<dt class="mask"><img src="/gi-images/articles/slider-ui/web-amazon.png" alt=""></dt>
<dt><a href="http://www.amazon.com/gp/gsl/search/finder?productGroupID=loose_diamonds">Amazon.com </a>- Search for the right diamond</dt>
<dd>Used to search for diamonds on a whole range of criteria</dd>
</dl>
<p>Other popular uses include controlling the scale of a map and selecting the time line of a video.</p>
<dl class="article-images">
<dt class="mask"><img src="/gi-images/articles/slider-ui/web-googlemaps.png" alt=""></dt>
<dt><a href="http://maps.google.co.uk">Google maps</a></dt>
<dd>Used to Zoom in and out of a map</dd>
</dl>
<dl class="article-images">
<dt class="mask"><img src="/gi-images/articles/slider-ui/web-youtube.jpg" alt=""></dt>
<dt><a href="href://www.youtube.com">YouTube</a></dt>
<dd>Controlling the time line of a video</dd>
</dl>

<div class="hr"><hr/></div>
<h4>Mobile &amp; handset UI</h4>
<p>Lastly we can see the slider control in use within both mobile UI and handset design.</p>
<dl class="article-images">
<dt class="mask-portait"><img src="/gi-images/articles/slider-ui/mobile-audio.jpg" alt=""></dt>
<dt><a href="http://www.sonyericsson.co.uk">Sony Ericsson</a> UIQ</dt>
<dd>Graphical equalizer and volume control</dd>
</dl>
<dl class="article-images">
<dt class="mask-portait"><img src="/gi-images/articles/slider-ui/mobile-volume.jpg" alt=""></dt>
<dt><a href="http://www.tmobile.co.uk">T-mobile</a> MDA2</dt>
<dd>Volume control slider on the side of the handset</dd>
</dl>
<p>The mobile UI is designed using <a href="http://www.uiq.com/">UIQ</a>, a stylus allows the user to control the slider directly from the handset screen.</p>]]>
   </content>
</entry>
<entry>
   <title>Google&apos;s User Experience for Mobile Applications</title>
   <link rel="alternate" type="text/html" href="http://www.griffininteractive.net/2007/05/googles_user_experience_for_mobile_applications.html" />
   <id>tag:www.griffininteractive.net,2007://1.142</id>
   
   <published>2007-05-06T13:06:37Z</published>
   <updated>2007-05-15T13:48:51Z</updated>
   
   <summary>Google have unveiled their Mobile User Experience Strategy for the delivery of Mobile Applications. To read more on the overall strategy check out the article &quot;Google’s Mobile User Experience Strategy&quot; over at Information Week. Google state that the application design...</summary>
   <author>
      <name>James Griffin</name>
      
   </author>
         <category term="Mobile" scheme="http://www.sixapart.com/ns/types#category" />
   
   <category term="67" label="Google" scheme="http://www.sixapart.com/ns/types#tag" />
   <category term="47" label="GPS" scheme="http://www.sixapart.com/ns/types#tag" />
   <category term="37" label="Mobile Applications" scheme="http://www.sixapart.com/ns/types#tag" />
   <category term="39" label="Mobile UI" scheme="http://www.sixapart.com/ns/types#tag" />
   <category term="41" label="Mobile User Experience" scheme="http://www.sixapart.com/ns/types#tag" />
   <category term="43" label="Mobility" scheme="http://www.sixapart.com/ns/types#tag" />
   <category term="45" label="Nokia N95" scheme="http://www.sixapart.com/ns/types#tag" />
   
   <content type="html" xml:lang="en" xml:base="http://www.griffininteractive.net/">
      <![CDATA[<p>Google have unveiled their Mobile User Experience Strategy for the delivery of Mobile Applications. To read more on the overall strategy check out the article "<a href="http://www.informationweek.com/blog/main/archives/2007/04/google_lays_out.html">Google’s Mobile User Experience Strategy</a>" over at <a href="http://www.informationweek.com">Information Week</a>.</p>

<p>Google state that the application design can be segmented into 6 layers:</p>

<ol>
<li>Understanding users, anywhere, anytime</li>
<li>Fits in your pocket</li>
<li>More personal than the PC</li>
<li>Consistency across modes</li>
<li>Localization is intensified</li>
<li>Integrated devices, modes, products</li>
</ol>]]>
      <![CDATA[<h4>Understanding users, anywhere, anytime</h4>
<p>Mobile users can be divided into three behavior groups:</p>
<p><strong>Repetitive now</strong></p>
<p>A mobile user who checks for the same information over and over again.</p>
<p><strong>Bored now</strong></p>
<p>A user with time on their hands.</p>
<p><strong>Urgent now</strong></p>
<p>User with a need to fulfill an immediate task.</p>
<h4>Consistency</h4>
<p>Maintain a consistent look-n-feel across all Google applications.</p>
<h4>Localization is intensified</h4>
<p>Drive mobile content through localisation - This is a key advantage for Mobile applications, especially with the recent introduction of readily available Location Enabled Devices (<a href="http://www.allaboutsymbian.com/reviews/item/Nokia_N95-part_2_the_Navigator.php">Nokia N95 - with GPS Mapping</a>).</p>
<blockquote><p>In the mobile world developers have to be prepared to optimize for different devices, browsers, languages, carriers, countries and cultures.</p>
</blockquote>]]>
   </content>
</entry>
<entry>
   <title>BBC Explain Web Accessibility</title>
   <link rel="alternate" type="text/html" href="http://www.griffininteractive.net/2007/05/bbc_explain_web_accessibility.html" />
   <id>tag:www.griffininteractive.net,2007://1.141</id>
   
   <published>2007-05-04T22:20:55Z</published>
   <updated>2007-05-05T07:44:30Z</updated>
   
   <summary>When a national TV network air a story on Web Accessibility you know, finally knowledge is spreading and soon enough people will take notice. Explaining Accessibility to clients back in 2003 was difficult, So it is great to see topics...</summary>
   <author>
      <name>James Griffin</name>
      
   </author>
         <category term="Accessibility" scheme="http://www.sixapart.com/ns/types#category" />
   
   <category term="35" label="BBC" scheme="http://www.sixapart.com/ns/types#tag" />
   <category term="27" label="Usability" scheme="http://www.sixapart.com/ns/types#tag" />
   <category term="23" label="Web Accessibility" scheme="http://www.sixapart.com/ns/types#tag" />
   <category term="25" label="Web Standards" scheme="http://www.sixapart.com/ns/types#tag" />
   
   <content type="html" xml:lang="en" xml:base="http://www.griffininteractive.net/">
      <![CDATA[When a national TV network air a story on Web Accessibility you know, finally knowledge is spreading and soon enough people will take notice.

Explaining Accessibility to clients back in 2003 was difficult, So it is great to see topics such as Web Accessibility covered on the BBC's technology programme.

Okay, some of the facts are a little scew; CSS has actually been around way before stated (Try looking at <a href="http://www.useit.com/alertbox/9707a.html" title="Link to useit.com">Effective Use of Style Sheets</a>, dated 1997).

<p class="media"><object width="300" height="250"><param name="movie" value="http://www.youtube.com/v/U2VVxrWun6A"></param><param name="wmode" value="transparent"></param><embed src="http://www.youtube.com/v/U2VVxrWun6A" type="application/x-shockwave-flash" wmode="transparent" width="300" height="250"></embed></object>
</p>]]>
      This year could really mark a milestone in website redesign geared to Web Accessibility.
   </content>
</entry>
<entry>
   <title>Mobile Web Guidelines</title>
   <link rel="alternate" type="text/html" href="http://www.griffininteractive.net/2006/07/mobile_web_guidelines.html" />
   <id>tag:jimbola.local,2006:/gi//1.138</id>
   
   <published>2006-07-27T21:21:58Z</published>
   <updated>2007-05-06T18:49:31Z</updated>
   
   <summary>With input from big players such as Google, Microsoft, Nokia, AOL, AT&amp;T, Ericsson, GoDaddy, and Vodafone the W3C have defined a set of basic guidelines for developing mobile Web content. Mobile Web Best Practices 1.0, consists of instructions on how...</summary>
   <author>
      <name>James Griffin</name>
      
   </author>
         <category term="Mobile" scheme="http://www.sixapart.com/ns/types#category" />
   
   <category term="16" label="AOL" scheme="http://www.sixapart.com/ns/types#tag" />
   <category term="21" label="ATT" scheme="http://www.sixapart.com/ns/types#tag" />
   <category term="10" label="Ericsson" scheme="http://www.sixapart.com/ns/types#tag" />
   <category term="20" label="GoDaddy" scheme="http://www.sixapart.com/ns/types#tag" />
   <category term="6" label="Mobile Web" scheme="http://www.sixapart.com/ns/types#tag" />
   <category term="8" label="Nokia" scheme="http://www.sixapart.com/ns/types#tag" />
   <category term="12" label="Vodafone" scheme="http://www.sixapart.com/ns/types#tag" />
   <category term="14" label="W3C" scheme="http://www.sixapart.com/ns/types#tag" />
   
   <content type="html" xml:lang="en" xml:base="http://www.griffininteractive.net/">
      <![CDATA[With input from big players such as Google, Microsoft, Nokia, AOL, AT&T, Ericsson, GoDaddy, and Vodafone the W3C have defined a set of basic guidelines for developing mobile Web content.

<a href="http://www.w3.org/TR/2006/CR-mobile-bp-20060627/">Mobile Web Best Practices 1.0</a>, consists of instructions on how to avoid technical issues when viewing web content from mobile devices.

The guidelines also focus on how to prevent known problems such as pop-up windows, horizontal page scrolling and more. It is seen that these guides will aid content authors, web developers and web designers when planing to create websites that will also be available via mobile devices.

There is also a Wiki dedicated to the Mobile Web Best Practices, enabling people to actively respond and add valuable input.

<a href="http://www.w3.org/2005/MWI/BPWG/techs/TechniquesIntro">Mobile Web Best Practices Wiki</a>]]>
      
   </content>
</entry>
<entry>
   <title>XMLHttpRequest Object methods</title>
   <link rel="alternate" type="text/html" href="http://www.griffininteractive.net/2006/07/xmlhttprequest_object_methods.html" />
   <id>tag:jimbola.local,2006:/gi//1.139</id>
   
   <published>2006-07-15T15:14:03Z</published>
   <updated>2007-05-06T18:47:23Z</updated>
   
   <summary> table#object caption {text-align: left } table#object th { text-align: left; background-color: #F5F5F5;} table#object td, table#object th { font-size: 90%; border: 1px solid #ccc; padding: 4px; } Description of the Methods and Properties used to make up the XMLHttpRequest Object...</summary>
   <author>
      <name>James Griffin</name>
      
   </author>
         <category term="Web design" scheme="http://www.sixapart.com/ns/types#category" />
   
   <category term="49" label="AJAX" scheme="http://www.sixapart.com/ns/types#tag" />
   <category term="51" label="JavaScript" scheme="http://www.sixapart.com/ns/types#tag" />
   
   <content type="html" xml:lang="en" xml:base="http://www.griffininteractive.net/">
      <![CDATA[<style>
 table#object caption {text-align: left }
 table#object th { text-align: left; background-color: #F5F5F5;}
 table#object td, table#object th { font-size: 90%; border: 1px solid #ccc; padding: 4px; } 
</style>

<table id="object">
<caption>Description of the Methods and Properties used to make up the XMLHttpRequest Object</caption>
<thead>
 <tr><th>Method/Property</th><th>Description</th></tr>
</thead>
<tbody>
 <tr><th>abort()</th><td>Stops the current request.</td></tr>
 <tr><th>getAllResponseHeaders()</th><td>Returns the response headers as a string.</td></tr>
 <tr><th>getResponseHeader("headerLabel")</th><td>Returns a single response header as a string.</td></tr>
 <tr><th>open("method", "URL"[, asyncFlag[,<br/>"userName"[, "password"]]])</th><td>Initializes the request parameters.</td></tr>
 <tr><th>send(content)</th><td>Performs the HTTP request.</td></tr> 
 <tr><th>setRequestHeader("label", "value")</th><td>Sets a label/value pair to the request header.</td></tr>
 <tr><th>onreadystatechange</th><td>Used to set the callback function that handles request state changes.</td></tr>
 <tr><th valign="top" rowspan="6">readyState</th><td>Returns the status of the request:</td></tr>
 <tr><td>0 = uninitialised</td></tr>
 <tr><td>1 = loading</td></tr>
 <tr><td>2 = loaded</td></tr>
 <tr><td>3 = interactive</td></tr>
 <tr><td>4 = complete</td></tr>
 <tr><th>responseText</th><td>Returns the server response as a string.</td></tr>
 <tr><th>responseXML</th><td>Returns the server response as an XML document.</td></tr>
 <tr><th>Status</th><td>Returns the status code of the request.</td></tr>
 <tr><th>statusText</th><td>Returns the status message of the request.</td></tr>
</tbody>
</table>]]>
      
   </content>
</entry>
<entry>
   <title>IE AlphaImageLoader filter and browser memory usage</title>
   <link rel="alternate" type="text/html" href="http://www.griffininteractive.net/2006/04/ie_alphaimageloader_filter_and.html" />
   <id>tag:jimbola.local,2006:/gi//1.137</id>
   
   <published>2006-04-12T22:06:21Z</published>
   <updated>2007-04-23T16:06:32Z</updated>
   
   <summary>The AlphaImageLoader filter does allow basic rendering of alpha transparent PNGs within the IE web browser, however heavy usage does come with a price in memory usage. If your webpage does use images with transparency, then the performance difference will...</summary>
   <author>
      <name>James Griffin</name>
      
   </author>
         <category term="Web design" scheme="http://www.sixapart.com/ns/types#category" />
   
   
   <content type="html" xml:lang="en" xml:base="http://www.griffininteractive.net/">
      <![CDATA[<p>The AlphaImageLoader filter does allow basic rendering of alpha transparent PNGs within the IE web browser, however heavy usage does come with a price in memory usage.</p>

<blockquote><p>If your webpage does use images with transparency, then the performance difference will depend on how many of those images are present, what size they are, and how they are drawn". (<a href="http://blogs.msdn.com/ie/" title="IE7 Blog">Quoted from the IEBlog</a>).</p></blockquote>

<p>Take a look at <a href="http://challenger.se/">challenger.se</a> the site uses a number of Alpha transparent images, including the ability for the users to drag images around the page.</p>

<p>The author of the site has noticed a few issues when supported Internet Explorer.</p>
<blockquote>
<p>I have noticed that IE doesn't free up the memory usage of a filter allocates, even though the element/object its attached to is "deleted"/removed dynamically. This should be taken care of. Otherwise, single-page-navigation-pages allocates very much memory fast.</p>
<p>A change of css-properties will cause IE to re-download any background-images it has attached to the element, event though the background property isn't affected. The "event" bubbles to parent elements as well, which causes additional download. I think this has to be fixed soon, obtain a high priority. (Quote from the Swedish author).</p>
</blockquote>]]>
      
   </content>
</entry>
<entry>
   <title>Zends PHP Web application framework</title>
   <link rel="alternate" type="text/html" href="http://www.griffininteractive.net/2005/11/zends_php_web_application_fram.html" />
   <id>tag:jimbola.local,2005:/gi//1.136</id>
   
   <published>2005-11-02T23:09:20Z</published>
   <updated>2007-02-16T21:24:17Z</updated>
   
   <summary>Zend have announced that they are working (with some industry players) in developing a standard PHP application framework. Hopefully this will cement PHP use as a serious development language, I believe more often than not developers are put off by...</summary>
   <author>
      <name>James Griffin</name>
      
   </author>
         <category term="Misc" scheme="http://www.sixapart.com/ns/types#category" />
   
   
   <content type="html" xml:lang="en" xml:base="http://www.griffininteractive.net/">
      <![CDATA[Zend have announced that they are working (with some industry players) in developing a <a href="http://zend.com/news/zendpr.php?id=109">standard PHP application framework</a>.

Hopefully this will cement PHP use as a serious development language, I believe more often than not developers are put off by poor development practices when using PHP.

With PHP 5.0 and a Standard development framework (backed by industry players) then it is sure to add more clout to a already very popular programming language. And yes I say programming language NOT scripting language.

If Microsoft own .Net and SUN own Java then I wonder who will step in and fund the majority towards a credible PHP development framework? Project participants currently include: IBM, Oracle, MySQL and Intel.]]>
      
   </content>
</entry>
<entry>
   <title>JCB Song</title>
   <link rel="alternate" type="text/html" href="http://www.griffininteractive.net/2005/09/jcb_song.html" />
   <id>tag:jimbola.local,2005:/gi//1.135</id>
   
   <published>2005-09-23T09:08:44Z</published>
   <updated>2007-05-15T13:42:12Z</updated>
   
   <summary>jcssong.co.uk, created by monkeehub.com is a pure masterpiece and it is made even better if you are a fan of Transformers, and the A-Team. Check out the JCB Song music video too....</summary>
   <author>
      <name>James Griffin</name>
      
   </author>
         <category term="Misc" scheme="http://www.sixapart.com/ns/types#category" />
   
   <category term="57" label="Music" scheme="http://www.sixapart.com/ns/types#tag" />
   
   <content type="html" xml:lang="en" xml:base="http://www.griffininteractive.net/">
      <![CDATA[<a href="http://www.jcbsong.co.uk">jcssong.co.uk</a>, created by <a href="http://www.monkeehub.com/">monkeehub.com</a> is a pure masterpiece and it is made even better if you are a fan of <a href="http://www.transformers.com">Transformers</a>, and the <a href="http://www.ateamshrine.co.uk">A-Team</a>. Check out the <a href="http://www.jcbsong.co.uk/jcbvideo.asp">JCB Song music video</a> too.]]>
      
   </content>
</entry>
<entry>
   <title>Google Blog Search</title>
   <link rel="alternate" type="text/html" href="http://www.griffininteractive.net/2005/09/google_blog_search.html" />
   <id>tag:jimbola.local,2005:/gi//1.134</id>
   
   <published>2005-09-16T13:33:47Z</published>
   <updated>2007-05-15T13:48:19Z</updated>
   
   <summary>With the ever increasing popularity of Blog sites Google have decided to create a customised search site dedicated to Blogs. Called Google Blog Search. I guess Blogs have infiltrated the Google search index on mass, and with many refers between...</summary>
   <author>
      <name>James Griffin</name>
      
   </author>
         <category term="Misc" scheme="http://www.sixapart.com/ns/types#category" />
   
   <category term="278" label="Blogs" scheme="http://www.sixapart.com/ns/types#tag" />
   <category term="67" label="Google" scheme="http://www.sixapart.com/ns/types#tag" />
   
   <content type="html" xml:lang="en" xml:base="http://www.griffininteractive.net/">
      <![CDATA[With the ever increasing popularity of Blog sites Google have decided to create a customised search site dedicated to Blogs. Called <a href="http://blogsearch.google.com/">Google Blog Search</a>.

I guess Blogs have infiltrated the Google search index on mass, and with many refers between blogs it means that most blog sites are top of the search pile. Maybe this the the sole reason to split them up into their own separate search site???

What I would really like to know is, how do Google define a blog site. When is a blog not a blog?]]>
      
   </content>
</entry>
<entry>
   <title>IE and CSS :focus</title>
   <link rel="alternate" type="text/html" href="http://www.griffininteractive.net/2005/08/ie_and_css_focus.html" />
   <id>tag:jimbola.local,2005:/gi//1.133</id>
   
   <published>2005-08-16T22:45:58Z</published>
   <updated>2007-05-15T13:42:52Z</updated>
   
   <summary>CSS gives us (the web designer) the ability to add a pseudo class called :hover and :focus, however Internet Explorer does not support such functionality, and therefore you cannot tell if an anchor tag is legitamately chosen. relativelyabsolute.com shows us...</summary>
   <author>
      <name>James Griffin</name>
      
   </author>
         <category term="Web design" scheme="http://www.sixapart.com/ns/types#category" />
   
   <category term="29" label="CSS quirks" scheme="http://www.sixapart.com/ns/types#tag" />
   <category term="4" label="IE" scheme="http://www.sixapart.com/ns/types#tag" />
   
   <content type="html" xml:lang="en" xml:base="http://www.griffininteractive.net/">
      <![CDATA[CSS gives us (the web designer) the ability to add a pseudo class called <b>:hover</b> and <b>:focus</b>, however Internet Explorer does not support such functionality, and therefore you cannot tell if an anchor tag is legitamately chosen.

<a href="http://www.relativelyabsolute.com/articles/focus/">relativelyabsolute.com</a>
shows us how we can get around this, using a .htc file (<a href="http://www.relativelyabsolute.com/cssfocusandhover.htc">cssfocusandhover.htc</a>) we can add the functionality to our web site. It is not ideal and if you have a large stylesheet it wont work at all.

So what does it do? the .htc file reads all your external stylesheets and replaces any instance of :focus / :hover with a JavaScript alternative.

Don't take my word for it, give it ago, and try to extend the functionality too.]]>
      
   </content>
</entry>

</feed>
