Microsoft's Internet Explorer browser has no built-in vector graphics machinery required for "loss-free" gradient background themes.

Please upgrade to a better browser such as Firefox, Opera, Chrome, Safari or others with built-in vector graphics machinery and much more. (Learn more or post questions or comments at the Slide Show (S9) project site. Thanks!)

Create Mobile Web Apps with the iUI JavaScript Library

Gerald Bauer @ MobileCampVancouver2, Vancouver, British Columbia, September 2008


(Source)

Slide Show Keyboard Controls (Help)

Action Key
Go to next slide Space Bar, Right Arrow, Down Arrow, Page Down
Go to previous slide Left Arrow, Up Arrow, Page Up
Toggle between slideshow and outline view (Ø) T
Show/hide slide controls (Ø « ») C, Move mouse to bottom right corner

What’s the Mobile Web?

The mobile web is just like the regular web but you access it on the go using mobile devices such as mobile phones, mobile music/media players, mobile internet tablets etcetera.

Related Terms:

“One Web” – Before the Apple iPhone popularized the mobile web the industry used different “standards” for web access on mobile devices such as Wireless Markup Language (WML) or Wireless Access Protocoll (WAP) or XHTML Basic.

One Web = Use “classic” HTML, CSS, JavaScript, etcetera on the mobile web. No need for different “standards”.

Why does the mobile web matter?

How does the mobile web differ from the “classic” web?

Usually smaller screen

e.g. Apple’s iPhone screen size is 320×480 pixel or 480×320 pixel.

Note, iPhone’s browser lets you zoom in and zoom out. By default for non-mobile web screen size optimized sites iPhone will zoom out to make the screen appear to have a size of 980 pixels (instead of the actual 320).

Limited keyboard for text entry and limited clicking (no mouse)

Use accesskey for links allowing you to “click” links using your phone key numbers ( such as 1,2,3,4,5,etc.)

Limited connectivity/offline

Special links for phone numbers

<a href="tel:1-604-555-5555">1-604-555-5555</a>

What’s iUI?

iUI is an open-source framework (really just one iui.js – JavaScript file, one iui.css – style sheet and many graphics) created by Joe Hewitt (of Firebug fame) and now working at Facebook (and responsible for – surprise, surprise – the mobile web version of Facebook).

iUI Design

iUI – Getting Started in Three Minutes

Step 1: Download and Unzip iUI Package @ code.google.com/p/iui

Step 2: Try the Music Example or the Theaters Search Example (Open Up Page in a WebKit Browser)

That’s it. No Developer $$$ Fee. No F!?#!ing Non-Disclosure Agreement (NDA).

iUI – Lists

<ul title="Neighbourhoods">               
  <li><a href='/hood/1'>Commercial Drive</a>
    <span class='small'>Eastside</span>
  </li>                 
  <li><a href='/hood/2'>Mount Pleasant</a>
    <span class='small'>Eastside</span>
  </li>                 
  <li><a href='/hood/3'>Kitsilano</a>
    <span class='small'>Westside</span>
  </li>                 
  <li><a href='/hood/4'>Yaletown</a>
    <span class='small'>Downtown</span>
  </li>                 
</ul>

(Source: Roomienator)

iUI – Groups and Lists

<ul title="RoomieNATOR" selected="true">

  <li class="group">Browse</li>
    <li><a href='/neighbourhoods'>Neighbourhoods</a></li>
    <li><a href='/posts'>Posts</a></li>

  <li class="group">Accounts</li>
    <li><a href='/login'>Login</a></li>
    <li><a href='/signup'>Sign up</a></li>

  <li class="group">About</li>
    <li><a href="#help">Help</a></li>
    <li><a href="#about">About</a></li>
</ul>

Add class='group' to mark list item for grouping. That’s it.

iUI – Panels

<div id="about" title="About" class="panel">
  <h2>About RoomieNATOR</h2>
  <p>Sample Mobile Web App using the iUI JavaScript Library w/ Ruby on Rails</p>
</div>

Add class='panel' to mark div block as a panel. That’s it.

iUI – Link Types

<ul id="home" title="Music" selected="true">
  <li><a href="#artists">Artists</a></li>
  <li><a href="#settings">Settings</a></li>
  <li><a href="/stats">Stats</a></li>
  <li><a href="http://code.google.com/p/iui/" target="_self">About</a></li>
  <li>Nothing</li>
</ul>

Intra-Page iUI Links

Browse Lists and Pages without Network Access

<ul id="artists" title="Artists">
  <li class="group">B</li>
    <li><a href="#TheBeatles">The Beatles</a></li>
    <li><a href="#BelleSebastian">Belle & Sebastian</a></li>
  <li class="group">C</li>
    <li><a href="#CrowdedHouse">Crowded House</a></li>
</ul>
<ul id="TheBeatles" title="The Beatles">
  <li><a href="#songs">Abbey Road</a></li>
  <li><a href="#songs">Help!</a></li>
  <li><a href="#songs">Rubber Soul</a></li>
  <li><a href="#songs">Sgt. Pepper's</a></li>
  <li><a href="#songs">White Album</a></li>
</ul>
<ul id="BelleSebastian" title="Belle & Sebastian">
  <li><a href="#songs">Boy With The Arab Strap</a></li>
  <li><a href="#songs">Dear Catastrophe Waitress</a></li>
  <li><a href="#songs">The Life Pursuit</a></li>
</ul>
...

iUI – Forms

<form title="Login" class="panel" action="/login" method="POST">

<h2>Welcome to RoomieNATOR</h2>

<fieldset>
  <div class="row">
    <label>Name</label>
    <input type="text" name="login" value="<%= params[:login] %>" >
  </div>
  <div class="row">
    <label>Password</label>
    <input type="password" name="password" value="<%= params[:password] %>" >
  </div>
</fieldset>
<a class="whiteButton" type="submit" href="#">Login</a>
</form>

Mark div block with class='row' for form rows and submit button with class='whiteButton'.

All Together Now

<html>
  <head>
    <title>RoomieNATOR</title>
    
    <style>@import "/iui/iui.css";</style>
    <script src="/iui/iui.js"></script>
  </head>
  <body>
    <div class="toolbar">
      <h1 id="pageTitle"></h1>
      <a id="backButton" class="button" href="#"></a>
      <a class="button" href="#searchForm">Search</a>
    </div>

    <%= yield %>

  </body>
</html>

That’s it.

iUI – Lists and Ruby

<ul title="Neighbourhoods">               
  <% for hood in @neighbourhoods do %>
    <li><%= link_to hood.name, hood %>
     <span class='small'> <%= hood.area %></span>
    </li>                 
  <% end %>
</ul>

Generates

<ul title="Neighbourhoods">               
  <li><a href='/hood/1'>Commercial Drive</a>
    <span class='small'>Eastside</span>
  </li>                 
  <li><a href='/hood/2'>Mount Pleasant</a>
    <span class='small'>Eastside</span>
  </li>                 
  <li><a href='/hood/3'>Kitsilano</a>
    <span class='small'>Westside</span>
  </li>                 
  <li><a href='/hood/4'>Yaletown</a>
    <span class='small'>Downtown</span>
  </li>                 
</ul>

Alternatives

and others

The Browser Players – WebKit, WebKit, WebKit

Good news. Microsoft’s Internet Explorer Web Browser is an also ran.

The defacto industry standard are browsers using the open source WebKit browser kernel/engine.

Mobile browsers built on WebKit include:

Other mobile browser include:

Browser Innovation in WebKit

About Web Kit

History/Beginnings:

Konqueror – Linux KDE Desktop Browser – Tagline: A Lean, Mean Web Browser

Building Blocks: KHTML, KJS

Instead of building the browser for the Apple OS X from scratch Apple decides to build on/reuse the open source KHTML/KJS core.

Desktop Browsers Using WebKit

More Mobile Web Links

That’s It. Thank You.