Prime Sky

Slide 1: PrimeSky A gentle stroll through the night sky, courtesy of the Royal Observatory Greenwich Brought to you by SVG, RSS, microformats, open APIs, the WURFL, iCAL, and the one web. Presented by Tom Hume and Bryan Rieger

Slide 2: “Create a web service that provides users with information on events they could expect to see in the night sky on any given evening.” PrimeSky Project Requirements (paraphrased)

Slide 3: Orion The Hunter

Slide 4: Cassiopeia

Slide 5: “The service must work on mobile as well.” PrimeSky Project Requirements (paraphrased)

Slide 6: Umm...

Slide 7: “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 Adams The Hitchhiker’s Guide to the Galaxy

Slide 8: Key Concepts Visual design leads database design follows Views within a dataset every uri has several representations Deliver optimal experience for platform content appropriate for specific channels, device and platforms

Slide 9: Design Challenges User Orientation finding location, azimuth + altitude Scaling & Legibility scaling illustrations, lines, shapes and text Multiple Views design must work across the web, mobile web and wap

Slide 10: Fail early Sketch initially Iterate constantly Test on a handset always Design with mobile in mind from the start

Slide 11: orientation? orientation? orientation? format? scaling? content? PAPER PNG HTML

Slide 12: Several iterations later...

Slide 13: icons svg

Slide 14: and in the wild resembles something like...

Slide 15: Orion (the hunter) Orion (the hunter)

Slide 16: Development Challenges Remaining Flexible designers can be so demanding (and fickle) Intelligent Scaling ensuring image detail isn’t lost or distorted Adaption & Delivery of appropriate content to various channels, devices & platforms

Slide 17: Technologies Used HTML, WML, RSS, CSS, SVG, JS... WALL4PHP Symfony the WURFL Image Magick LAMP - Linux, Apache, PHP, MySQL

Slide 18: SVG - Scalable Vector Graphics

Slide 19: 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

Slide 20: Orion (the hunter) Orion (the hunter) Orion (the hunter) Original Artwork Simple scale Smart scale designed for the BIG web everything scaled equal stars, lines and text variable

Slide 21: Microformats (µf)

Slide 22: hCal events iCal vCal

Slide 23: hCal based on iCal standard iCal feed contains upcoming events hCal defines events within HTML Can be used by plugins and applications µf can provide a simple API within HTML

Slide 24: hCal sample ... <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> ...

Slide 25: On the subject of APIs...

Slide 26: Every URL is available in several raw data formats /primesky/calendar/2008/3?api=json JSON, YAML, XML and serialized PHP Search feature is also part of the open API

Slide 27: We also publish data via feeds.

Slide 28: Publish upcoming events in various syndication formats. rss2, rss1 atom Subscribe to events using feed readers. Google Reader, NetNewsWire, NewsGator, IE7, Firefox, etc.

Slide 29: the WURFL

Slide 30: Provides data on handset capabilities ie: screen size, browser capabilities, etc. Determine appropriate content for a device xhtml, xhtml-mp, wml, png, jpg, wbmp, etc.

Slide 31: One Web

Slide 32: content adaption different markup languages one url presents appropriate content ie: screen size, browser capabilities, etc. consistent urls with m.* and *.mobi and www.*

Slide 33: Conclusions

Slide 34: 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

Slide 35: Thank you. http://futureplatforms.com