Interface developers’ weeknote – 17/9/10
Project ‘Stretchy Balls’ gains momentum
Ray has been working in conjunction with Magnus on the Stretchy Balls robotic table project (a video of work-in-progress).
They will be exhibiting at the London Tent Interactive Design Festival 2010 at The Truman Brewery.
The finished piece will use a canvas 1.6m wide with an 8 x 8 array of servoes / rods, and respond to input from a webcam which will be pointed at the floor of the exhibition. As people move about the floor, their movements will be mirrored by the movement of the balls on the table canvas.
New graphing engine uses vector graphics that work cross platform (including iPhone)
Project: “Green nightmare”
We’re currently working on a graphing ‘engine’ for a client project.
The technologies used are:
- Raphael – to render the graphs using vector graphics which will scale to any size without pixellation. An iOS-friendly alternative to Flash. Requires no browser plugins and works in all major browsers including IE6
- JSON – for lightweight supply of data to the graphing engine using Ajax
- CSS / HTML used wherever possible for extra interface elements eg. Tooltips
- The graphing engine itself is written in Javascript. It’s flexible in the format of JSON data it receives, as any conversion routine can be specified to adjust the JSON structure so it can be rendered
On the use of data attributes:
Used with the Raphael graphing engine. The container element for the graph contains all the information needed to initialise itself, within its own data attributes, including a reference to a JSON file with the graph data itself, and units for the axes.
<div class=”graph” data-graph-type=”vertical-bar” data-currency=”us” data-location=”/response_scripts/visualisations_json/vertical-bar-chart-8bars-3.json” data-unit-x=”time.middle” data-unit-y=”amount.us“></div>
This simple markup can be included on initial page load, or injected into the page using ajax. An initialisation routine can then be invoked to retrieve the JSON data and render the graph.
The shapes that make up graphs created with Raphael, are also DOM nodes and can have data attributes, eg. The node below is a single bar from a bar graph and stores data about that point that can then be used to render an information tooltip or popup when the user interacts with the graph:
<rect x=”265.830237777393” y=”82.2897777777778” width=”28.811278930368974” height=”223.7102222222222” data-key=”key1ebneuwiu2nf92y2t4u04” data-behaviour=”show-view” data-point=”{“key“:“key1ebneuwiu2nf92y2t4u04“,“label“:“TELEPHONE“,“amount“:{“eu“:95.228,“us“:209.5016},“items“:{“transactions“:2},“index“:0,“time“:{“start“:1279472031,“end“:1280076830,“range”:{“start”:”19/07/2010″,”end”:”25/07/2010″,”duration”:”1 week”},”period”:3,”middle”:1279774430.5},”colors”:{“base”:”F1E410″,”gradient”:”FFF87E”,”colorIndex”:22},”max”:3,”behaviour”:”show-view”,”currencyAmount”:209.5016,”currencyLabel”:”US”}”/>
Note – data attributes validate under an HTML 5 doctype but not under HTML 4
Facebook API harnessed to publicise energy efficiency goals
Project: “Race against Time”
The new “Energy Fit” site lets customers set goals to reduce their energy use. Now the site lets them automatically update their Facebook page when they complete an energy efficiency goal.
Lbi linked the site to Facebook’s recently introduced “Graph” API (which replaces the older “Connect” API)
‘Over the air’ conference
Tim and Pia went for the mobile conference ‘Over the Air’ in the Imperial College last Friday.
Interactive designer Aral Balkan (www.aralbalkan.com) gave a very inspiring speech about “the art of emotional design” – how important it was to take users’ emotion into account when designing IA and GUI of mobile applications. He also highlighted that User Experience should strictly take priority on top of creative process and any technical difficulties. He has shown us couple of good iPhone applications including his own – Feathers (http://feathersapp.com/) – a successful Twitter apps allows you to type special characters.
Bruce Lawson gave an extremely useful presentation about HTML5 on Mobile App/Web – http://www.slideshare.net/brucelawson/bruce-lawsonovertheair. He explaining the actual meaning of HTML5 and how it will make front-end coding more pleasure (e.g. built-in webform sliders, calendar, video and canvas) He also shown example of client-side validation, animation effects , embedding video player and controller without using any JS. He suggested canvas is not a replacement for SVG. Canvas draw pixel directly on screen which consume less process power, where on some occasion, SVG is more suitable for usability and accessibility purposes. He also demonstrated the new W3C standard for mobile apps (widget – http://www.w3.org/TR/widgets/), which can be easily produced by create .zip with HTML, CSS and JS and rename the file extension to .wgt – currently only supported on Opera browser.
The more interesting thing was he announced that there is a research group inside W3C called DAP which are researching/defining new API for retrieving Contacts/Calendars/Media Capture and Messaging on your mobile – W3C DAP can be found more info at http://www.w3.org/2009/dap/
We came across an organization called UNltd (www.unltd.org.uk) – which provides funding and resources to entrepreneurs which have an initiative using new technologies to solve problems in no developed countries.Brian Rieger (wwww.yiibu.com) gave an interesting presentation on ‘Rethinking the mobile web’. He demonstrate some live example of achieve “one web” in real world – worth it to see it:
http://www.slideshare.net/bryanrieger/rethinking-the-mobile-web-by-yiibu“Real World With your mobile” presented by Geoff Ballinger showed the technology around real world recognition using mobile technologies. Through
bar code: redlaser, google 2xing and pic2shop/visionSmart
visual search / video recognizion : googles & google shopper
Compass / GPS : location and orientation
Layar AR & RFID tags.What would Picassado do? It was a panel formed by Mathias Dahlston, Jason Fields, Tom Hume, Mills and Filip visujic. That was a good debate around the topic around technology and art between the panel and audient.
Jim Brown, CTO of Cloudmade gave a presentation on Geolocation / Multitasking using vertical app for social media. He used as example
London Cycle (http://itunes.apple.com/gb/app/london-cycle-maps-routes/id383292875?mt=8)
City Gays (http://itunes.apple.com/app/gaycities-your-gay-city-guide/id303661699?mt=8);He was highlight the following five points regarding why we should vertical app rather than google api.
1. The possibility to customise maps.
2. Add rich user specific content.
3. Add navigation
4. Monetize with ads & sponsored pols
5. Let you and your user to map and customize their world.
Tags: Facebook, interfacedevelopment, mobile, raphael
