html5

As promised, videos of my San Francisco and Vancouver real-time HTML5 geotagged photo mashups driven by the great flickr and CloudMadeAPIs (each time a geotagged photo to the city is uploaded to flickr, a dot is posted on the map; the dot does a reverse blue fade-in and then alternates between green and red and the map alternates between orange and pink). Next up, add music driven by the neighbourhood (i.e. a different tune for each woeid, which means 26 different tunes for Vancouver).

Vancouver real-time flickr cloudmade html5 mashup:

Code:

github.com/rtanglao/rth5/blob/master/vancouver-emerges...

Try it out yourself! (may take some time for photos to appear since dots are only added when photos are uploaded to flickr geotagged in the city of vancouver):

dl.dropbox.com/u/361757/CCC/vancouver-emerges-d3.html

San Francisco real-time flickr cloudmade html5 mashup:

Code:

github.com/rtanglao/rth5/blob/master/sanfrancisco-emerges...

Try it out yourself (may take some time for photos to appear since dots are only added when photos are uploaded to flickr geotagged in the city of san francisco):

dl.dropbox.com/u/361757/CCC/sanfrancisco-emerges-d3.html

in response to air's comment, here's a video version (select the HD version if your screen is big enough!) of the penmachine barcode which hopefully is more fun and more self-explanatory:

If you can't play the above YouTube video e.g. perhaps because your platform doesn't support flash, try the original quicktime version of the penmachine dodging buses barcode video

What the video displays

Boring tech stuff:

1. In the middle, 4616 of derek's photos (75x75 pixel thumbnails of all photos >= 720 pixels high from flickr) are displayed
2. while at the bottom their 1 pixel wide by 720 pixel high "barcode slice" is displayed.
3. Finally at the top, a red dot shows where the latest 1 pixel slice is being displayed.

 All three lines wrap-around after 900 pixels.

Cool People in the video:

• miller family-o-sphere
• vancouver tech-o-sphere (if you are in Vancouver and you are in tech, you probably are in the video!)
• gnomedex-o-sphere (chris, ponzi, etc)
• northernvoice-o-sphere

Their is also a webapp version but due the network not being infinitely fast and zero latency it falls behind and out of sync

Here's the webapp version: http://dl.dropbox.com/u/361757/pm-bc-video/html5-barcode/drawbarcode.html

It's a pity zero latency and infinite bandwidth networks don't exist :-)

In order to create the video, I ran the webapp on my localhost to eliminate bandwith and latency problems!

Colophon:

photos by derek k miller:
http://www.flickr.com/photos/penmachine
music "dodging buses by derek k miller:
http://www.penmachine.com/podcast/2009/06/dodging-buses.html
4616 barcode images of derek's flickr photos generated by:
https://github.com/rtanglao/barcode
html5 web app code to generate the video :
https://github.com/rtanglao/html5-barcode/blob/master/drawbarcode.html

video made using: Snapz Pro X from ambrosia software

Known Bugs:

(tested on Mac OS X Safari,  Chrome 12 and Firefox Aurora and Firefox Mobile on Nexus S)

1. the white space on the right side of the video
2. The red dot should skip by 75pixels instead of 1pixel or perhaps we need a separate indicator pointing from the slice to the 75x75 thumbnail
3. The red dot should be erased when it wraps around

Lessons Learned

I need to work more with cool music from people like Derek. Music + code indeed music + anything is fantastic

HTML+CSS+JavaScript+flickr=awesome mashups for everyone aka it's the golden age of computing for everybody not just computer science majors so let's go for it!

Got ideas on a Northern Voice related flickr mashup I can do as part of my NV 2011 Moosecamp lightning talk (or in general, love to collaborate HTML5ish and flickrish for good  on something during the conference and after the conference as well) ? Leave 'em here as a comment or tweet @rtanglao or send me smoke signals :-). See you at Northern Voice 2011 in May!

Hard to believe that I didn't make any predictions in 2009 (my 2008 predictions)!

Herewith again some randomly ordered Mobile predictions which are worth what you paid for them!

Mobile

1. Google will introduce a "comes with data" mobile phone featuring an easy environment to write HTML5 & JS apps
2. A Canadian mobile phone carrier will actually sell mobiles other than the iPhone that have current software & aren't 6-12 months old :-) The current "sell old phones with old firmware with bogus customizations" model of Rogers, Bell and Telus will be over in 2011.
   
3. Apple's tablet will be introduced, it wil be big seller and a great creator and consumer of multi-media and it will be closed and have the iPhone App Store model rather than the Mac app model.
4. Nokia will deliver Maemo 6 and an N900 successor but it won't be good enough for the mainstream but will be awesome for me & other mobile devs because mobile Firefox will offer superior HTML5 and JS experience (yes working for Mozilla I am biased :-) !)
5. The next iPhone will boast a 5 mega pixel camera and other still and video imaging improvements which will be more than good enough for old cameraphone snobs like me and accelerate Nokia's decline among mobile multimedia creators.
6. Mozilla Messaging (my employer!) will introduce a version of Raindrop that doesn't require you to do geeky things like install things like CouchDB yourself and it will rock on Android, Maemo and any other modern open mobile web  environment (sorry Blackberry, iPhone and Symbian but you lose since you are all neither open or modern or both :-) !) Just kidding, it will rock on any modern mobile web browser open or closed methinks :-) !