Prime Sky

PrimeSkyA gentle stroll through the night sky, courtesy of the

Royal Observatory Greenwich

Presented by Tom Hume and Bryan Rieger

Brought to you by SVG, RSS, microformats, open APIs, the WURFL, iCAL, and the one web.

“Create a web service that provides users with information on events they could expect to see

in the night sky on any given evening.”PrimeSkyProject Requirements (paraphrased)

OrionThe Hunter

Cassiopeia

“The service must work on mobile as well.”

PrimeSkyProject Requirements (paraphrased)

Umm...

“Space is big. You just won't believe how vastly, hugely, mind- bogglingly big it is. I mean, you

may think it's a long way down the road to the chemist's, but that's just peanuts to space.”

Douglas AdamsThe Hitchhiker’s Guide to the Galaxy

Key Concepts

Visual design leadsdatabase design follows

Views within a datasetevery uri has several representations

Deliver optimal experience for platformcontent appropriate for specific channels, device and platforms

Design Challenges

User Orientationfinding location, azimuth + altitude

Scaling & Legibilityscaling illustrations, lines, shapes and text

Multiple Viewsdesign must work across the web, mobile web and wap

Design with mobile in mind from the start

Fail early

Sketch initially

Iterate constantly

Test on a handset always

PNG

scaling?

orientation?

HTML

content?

orientation?

PAPER

format?

orientation?

Several iterations later...

icons

svg

and in the wild resembles something like...

Orion(the hunter)

Orion(the hunter)

Development Challenges

Remaining Flexibledesigners can be so demanding (and fickle)

Intelligent Scalingensuring image detail isn’t lost or distorted

Adaption & Deliveryof appropriate content to various channels, devices & platforms

LAMP - Linux, Apache, PHP, MySQL

Symfony

Image Magick

the WURFL

WALL4PHP

HTML, WML, RSS, CSS, SVG, JS...

Technologies Used

SVG - Scalable Vector Graphics

Original art designed for web

Full scaling resulted in distortion

Solution was to scale individual elements

Rendered image delivered to device in an appropriate format

Original Artwork

Orion(the hunter)

designed for the BIG webSimple scale

Orion(the hunter)

everything scaled equalSmart scale

Orion(the hunter)

stars, lines and text variable

Microformats (µf)

eventshCal

iCal

vCal

hCal based on iCal standard

iCal feed contains upcoming events

hCal defines events within HTML

µf can provide a simple API within HTML

Can be used by plugins and applications

...<li class="vevent">

<div class="datebox"><span class="day">WED</span><span class="date">26</span></div><div class="desc"><span class="start"><abbr class="dtstart" title="2008-03-26T20:37:00+00:00">8:37pm</abbr></span>

<h3 class="summary"><a href="/primesky/calendar/2008/3/26/Plough+%28part+of+Ursa+Major%2C+the+Great+Bear%29">Test SMS Significant</a></h3><p class="description"> Orion, a winter constellation, is one of the most easily recognisable constellations, with seven bright stars in an almost &lsquo;human&rsquo; form! It contains a very distinct line of three stars (th... <a href="/primesky/calendar/2008/3/26/Plough+%28part+of+Ursa+Major%2C+the+Great+Bear%29">More</a></p>

</div></li>...

hCal sample

On the subject of APIs...

/primesky/calendar/2008/3?api=json

Every URL is available in several raw data formats

JSON, YAML, XML and serialized PHP

Search feature is also part of the open API

We also publish data via feeds.

Publish upcoming events in various syndication formats.

rss2, rss1 atom

Subscribe to events using feed readers.Google Reader, NetNewsWire, NewsGator, IE7, Firefox, etc.

the WURFL

Provides data on handset capabilitiesie: screen size, browser capabilities, etc.

Determine appropriate content for a devicexhtml, xhtml-mp, wml, png, jpg, wbmp, etc.

One Web

one url presents appropriate contentie: screen size, browser capabilities, etc.

different markup languages

consistent urls with m.* and *.mobi and www.*

content adaption

Conclusions

one web isn’t just a theory

look for design solutions first

get something on a handset early

can be built using open source tools

complexity should be hidden from experience

Thank you.

http://futureplatforms.com