Slideshow transcript
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 ‘human’ 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



Add a comment on Slide 1
If you have a SlideShare account, login to comment; else you can comment as a guest- Favorites & Groups
Showing 1-50 of 15 (more)