<?xml version="1.0" encoding="utf-8"?>
<rss version="2.0" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:atom="http://www.w3.org/2005/Atom">
  <channel>
    <title>The Lab Category: </title>
    <link>http://www.mediamolecule.com/lab/</link>
    <description></description>
    <dc:language>en</dc:language>
    <dc:creator>ChrisC</dc:creator>
    <dc:rights>Copyright Media Molecule Ltd 2011</dc:rights>
    <pubDate>Tue, 30 Aug 2011 12:09:55 GMT</pubDate>
    <atom:link href="http://www.mediamolecule.com/feeds/lab.rss" rel="self" type="application/rss+xml" />
     <item>
    <title>Adventures in Austin at SXSW</title>
    <link>http://www.mediamolecule.com/lab/article/adventures_in_austin_at_sxsw/</link>
    <guid isPermaLink="false">http://www.mediamolecule.com/lab/article/adventures_in_austin_at_sxsw/#id:1993#date:16:00</guid>
    <description>
      <![CDATA[<p>Whilst some Molecules were out in San Francisco at this years <a href="http://www.gdconf.com/">Game Developers Conference</a>, I was a lone ranger out in the not-so-darkest-depths of Texas. Every year, Austin plays host to <a href="http://sxsw.com/" title="SXSW">South by Southwest</a> (SXSW) - a huge festival merging the worlds of music, film and interactive in one big melting pot of win. I was mostly there for there for the Interactive bit (<a href="http://sxsw.com/interactive" title="SXSW Interactive">SXSWi</a>), to discover what&#8217;s cooking in the land of the internets and maybe discover some new stuff. It&#8217;s nicknamed <em>spring break for geeks</em>.</p>

<p>So, what is hot? What&#8217;s buzzing in the land of the internets? Commence Tom-rant-rabble! :)
</p><p><a href="http://gowalla.com"><img src="http://www.mediamolecule.com/images/uploads/gowalla.png" alt="Gowalla" width="199" height="189" class="floatright marg" /></a>Probably the most significant thing I noticed at SXSWi was the use of geo-location services <a href="http://gowalla.com" title="Gowalla">Gowalla</a> and <a href="http://foursquare.com/" title="FourSquare">Foursquare</a>. I&#8217;m sure many of you have heard of these before, but for the benefit of those who haven&#8217;t - they&#8217;re both essentially games which work using your GPS-enabled mobile phone as you move around in your day-to-day life. When you reach a destination, you can choose to &#8220;<em>check-in</em>&#8221; there, thereby showing your friends where you are and what you&#8217;re doing. There are gameplay elements too: Foursquare lets users who check-in often to a location become &#8220;Mayor&#8221; of that location, and Gowalla displays leaderboards of each location. With Gowalla you can also pick up virtual items or drop them in places - some virtual items are even redeemable for real-world discounts or services.<br />
The thing about SXSWi, is that there is such a high concentration of geeks in one place, it&#8217;s the perfect testing ground for services like Gowalla and Foursquare. It was four years since Twitter &#8220;hatched&#8221; at SXSWi, and 3 years since it&#8217;s potential was realised by the masses there - mass live tweeting of events as they happened.<br />
There was a real sense of Gowalla and Foursquare picking up some speed at SXSWi, so many people were using them that they became a truly viable way to meet new people, see where the hotspots were in town and what people were saying about talks, venues and gigs. The most memorable moment came when I saw a girl walk straight to the front of a queue at a venue, approach the bouncer and show him a virtual wristband displayed on the screen of her iPhone (something she could have been given, or unlocked through a series of challenges). &#8220;<em>I&#8217;ve got this wristband, can I get in here?</em>&#8221; she asked - &#8220;<em>Oh yeah, you need to be in the VIP section over there</em>&#8221; the bouncer replied.That was pretty awesome. And there weren’t just wristbands - there were other virtual items being dropped around town, exchangeable for their real world counterparts. Someone got their mitts on a digital camera!</p>

<p>The connection between virtual world and real world items/people/places was made regularly throughout SXSWi. If you wanted to exchange contact details with anyone, you could simply use your smartphone to scan the <a href="http://en.wikipedia.org/wiki/QR_Code" title="QR code">QR code</a> on the event pass around their neck. This instantly loads a webpage on your phone showing who they are and how to contact them. A host of other products and services were using QR codes to make the connection between physical and digital. And it even looks like <a href="http://techcrunch.com/2010/03/16/facebook-qr-code/" title="Facebook QR Codes">Facebook may be integrating them soon too</a>.</p>

<p>It&#8217;s a pretty hectic schedule at SXSW - the hour-and-a-bit long talks run from 9am to 6pm with any one session having up to 27 other talks running at the same time (you have to choose your talks wisely!). And there&#8217;s plenty of stuff going on in the evenings too :)</p>

<p>Amongst the talks I enjoyed most were Jonathan Stark&#8217;s <a href="http://www.slideshare.net/jonathanstark/hold-the-cocoa-building-ip" title="Hold the Cocoa"><em>Hold the Cocoa</em></a> (<a href="http://www.twapperkeeper.com/hashtag/holdthecocoa" title="#holdthecocoa">#holdthecocoa</a>)- building web apps for iPhone. Many people are interested in building apps for the iPhone these days, but there are clear barriers to entry. Firstly, You need a license for the iPhone SDK  and secondly, you need to learn Objective C to code the thing. If you&#8217;re primarily a web developer, that might not be too appealing. More importantly though - you&#8217;d be investing time and energy developing for the walled garden that is the iPhone. By building an <a href="http://www.quirksmode.org/blog/archives/2010/03/html5_apps.html" title="HTML5 Apps">HTML5 web app</a>, you can easily port your code to any of the not-insignificant number of webkit enabled smartphones out there. <br />
So, you make your HTML5 web app but how can you make it look and feel like a native iPhone app? Easy: jQtouch. <br />
<a href="http://www.jqtouch.com/" title="jQtouch"><img src="http://www.mediamolecule.com/images/uploads/jqtouch.png" alt="jQtouch" class="floatright" /></a><a href="http://www.jqtouch.com/" title="jQtouch">jQtouch</a> is an awesome jQuery library available for iPhone which lets you rapidly develop iPhone web apps. It comes bundled with a whole host of super-easy-to-use and awesome features, like <em>oooohhh-aahhhhhh</em> animated CSS3 page transitions, super-simple ajax usage, customisable themes, support for offline caching, geo-location and plenty more. If you&#8217;re thinking about making an app for iPhone then *<strong>you need to check this shit out</strong>*!<br />
The <em>Part 2 of Awesome</em> is <a href="http://phonegap.com/" title="Phonegap">PhoneGap</a> (this is where geeks really start to drool). PhoneGap will bundle your web app in to a native app, so you can deploy your iPhone application to Apple&#8217;s iTunes Store. It&#8217;ll even let you plug in to the phones API so you can use, say - the contacts manager or camera. Epic win! I really enjoyed this talk, so mad love to <a href="http://jonathanstark.com/" title="Jonathan Stark">Jonathan Stark</a> (<a href="http://twitter.com/Jonathanstark" title="Jonathan Stark">@Jonathanstark</a>).<br />
Oh, and If you know any similar Android or Symbian toolkits out there like jQtouch, let us know in the comments!</p>

<p>Other interesting talks included <em>Beauty in Web Design</em> (<a href="http://www.twapperkeeper.com/hashtag/beautyinwebdesign" title="#beautyinwebdesign">#beautyinwebdesign</a>), a talk from <a href="http://clearleft.com/" title="Clearleft">Clearleft</a>&#8216;s Cennydd Bowles (<a href="http://twitter.com/cennydd" title="Cennydd Bowles">@cennydd</a>) - a throughly interesting talk about how web designers need to start thinking bigger and getting more emotional with our designs to engage audiences. <br />
<em>ActivityStrea.ms: Is it getting Streamy in Here?</em> (<a href="http://www.twapperkeeper.com/hashtag/gettingstreamy" title="Getting Streamy">#gettingstreamy</a>) was a talk from Chris Messina (<a href="http://twitter.com/Chrismessina" title="Chris Messina">@Chrismessina</a>) about the new Atom feed format for activity streams detailed over at <a href="http://activitystrea.ms/">activitystrea.ms</a>. <br />
<a href="http://badassideas.com/get-stoked-on-web-typography-wrap-up/" title="Get Stoked for Web Typography"><em>Get Stoked for Web Typography</em></a> with a highly enthusiastic <a href="http://badassideas.com/" title="Samantha Warren">Samantha Warren</a> (<a href="http://twitter.com/Samanthatoy" title="Samantha Warren">@swarren</a>), looked at basic principles of typography and showed use of @font-face in CSS3 (something I <a href="http://www.mediamolecule.com/lab/article/lovely_browser_fonts_with_css3_font-face/" title="CSS3 font-face">talked a little bit about</a> following the launch of this here new Mm site). She rocked it. <br />
<em>Interactive Infographics</em> (<a href="http://www.twapperkeeper.com/hashtag/interinfo" title="#interinfo">#interinfo</a>) has a great panel showing off excellent examples of data mashup visualisations out there (try <a href="http://mapumental.channel4.com/" title="Mapumental">Mapumental</a>, <a href="http://oakland.crimespotting.org/" title="Crimespotting">crimespotting.org</a> and <a href="http://walking-papers.org/" title="Walking Papers">walking-papers.org</a>). @jenniferconley shared some nice slide pics and notes, posted <a href="http://rachcreative.posterous.com/guest-brain-jenniferconley-shares-her-notes-o">over here</a>.<br />
<em>Gaming the Crowd: Turning work in to Play</em> (<a href="http://www.twapperkeeper.com/hashtag/gamingthecrowd" title="#gamingthecrowd">#gamingthecrowd</a>) was a really interesting talk by Andy Baio (<a href="http://twitter.com/waxpancake" title="@waxpancake">@waxpancake</a>) about how simple gameplay mechanics can be applied to websites to make them more fun and enjoyable for users. I really enjoyed the example from <a href="http://www.panic.com/blog/2010/03/the-panic-status-board/" title="Panic Blog">Panic on their blog</a> showing how they improved customer service efficiency.<br />
The <em>Can the Real-Time Web be Realized?</em> (<a href="http://www.twapperkeeper.com/hashtag/realtimeweb" title="#realtimeweb">#realtimeweb</a>) Panel talked about some of the existing services out there right now which are making the most out of the realtime web and what you could be doing to take advantage of it too (In short: just go ahead and make webpages realtime, don&#8217;t create walled gardens, integrate fully with existing realtime services). <br />
I thoroughly enjoyed the BBC&#8217;s <em>Digital Planet Live Quiz</em>. A special quiz edition of the Digital Planet show (broadcast on World Service and you can <a href="http://www.bbc.co.uk/programmes/p006lhjr" title="Digital Planet at SXSW on iPlayer">hear it on iPlayer</a>), which had the audience interacting with the panel through a special web app made for the event. Apart from being a great laugh and damn good fun, I also came away feeling like other panel sessions were seriously missing a trick by not making more of audience interaction. I got to meet the team later a bit later on and they are a really fine bunch of people :)</p>

<p>I need to shout out to <a href="http://www.umbrellagroup.org/author/tweeture/" title="Tweeture">Tweeture</a> too - such a fun idea from <a href="http://www.pmstudio.co.uk/" title="Pervasive Media">Pervasive Media Studio</a>. Here&#8217;s a clip from the the Digital Planet team&#8217;s coverage of SXSW explaining Tweeture rather nicely and what it was all about:</p>

<div class="center"><object width="448" height="364"><param name="movie" value="http://www.bbc.co.uk/emp/external/player.swf"></param><param name="allowFullScreen" value="true"></param><param name="allowScriptAccess" value="always"></param><param name="FlashVars" value="playlist=http%3A%2F%2Fwww%2Ebbc%2Eco%2Euk%2Fworldservice%2Fmeta%2Fdps%2F2010%2F03%2Femp%2F100316%5Ftweeture%2Eemp%2Exml&amp;config_settings_showPopoutButton=true&amp;config_settings_language=en&amp;config_settings_showFooter=true&amp;"></param><embed src="http://www.bbc.co.uk/emp/external/player.swf" type="application/x-shockwave-flash" allowfullscreen="true" allowScriptAccess="always" width="448" height="364" FlashVars="playlist=http%3A%2F%2Fwww%2Ebbc%2Eco%2Euk%2Fworldservice%2Fmeta%2Fdps%2F2010%2F03%2Femp%2F100316%5Ftweeture%2Eemp%2Exml&amp;config_settings_showPopoutButton=true&amp;config_settings_language=en&amp;config_settings_showFooter=true&amp;"></embed></object></div><p>
I first noticed Tweeture, albeit a bit later on, at the thoroughly enjoyable <em>Pervasive Games and Playful Experiences: Rendering the Real World</em>.</p>

<p>Keynotes I went to included Evan Williams (<a href="http://twitter.com/ev" title="@ev">@ev</a>) talking about Twitter&#8217;s expansion with the announcement of the <a href="http://blog.twitter.com/2010/03/anywhere.html" title="@ anywhere platform">@ anywhere platform</a> and Daniel Ek (<a href="http://twitter.com/Eldsjal" title="@Eldsjal">@Eldsjal</a>) talking about the future of music delivery, <a href="http://spotify.com" title="Spotify">Spotify</a> and it&#8217;s successes in Europe. Live graphical notetaking of all the keynotes was brilliant - read over the ones below for an insight in to all the keynotes at SXSWi.</p>

<p><a href="http://www.mediamolecule.com/images/uploads/danah_boyd.JPG" rel="shadowbox[keynotes]"  title="Danah Boyd - Making Sense of Publicity and Privacy"><img src="http://www.mediamolecule.com/images/uploads/danah_boyd_sml.jpg" alt="Danah Boyd - Making Sense of Publicity &amp; Privacy" width="648" height="337" /></a><br />
<span class="caption">Danah Boyd - Making Sense of Privacy &amp; Publicity</span></p>

<p><a href="http://www.mediamolecule.com/images/uploads/valerie_casey.JPG" rel="shadowbox[keynotes]" title="Valerie Casey - The Designers Accord"><img src="http://www.mediamolecule.com/images/uploads/valerie_casey_sml.jpg" alt="Valerie Casey - The Designers Accord" width="648" height="370" /></a><br />
<span class="caption">Valerie Casey - The Designers Accord</span></p>

<p><a href="http://www.mediamolecule.com/images/uploads/evan_williams.JPG" rel="shadowbox[keynotes]" title="Evan William, co-founder and CEO of Twitter"><img src="http://www.mediamolecule.com/images/uploads/evan_williams_sml.jpg" alt="Evan William, co-founder and CEO of Twitter" width="648" height="370" /></a><br />
<span class="caption">A conversation with Evan Williams, co-founder and CEO of Twitter</span></p>

<p><a href="http://www.mediamolecule.com/images/uploads/daniel_ek.JPG" rel="shadowbox[keynotes]" title="Daniel Ek - The Future of Music Delivery" ><img src="http://www.mediamolecule.com/images/uploads/daniel_ek_sml.jpg" alt="Daniel Ek - The Future of Music Delivery" width="648" height="370" /></a><br />
<span class="caption">Daniel Ek - The Future of Music Delivery</span></p>

<p>It was a busy week of rushing around seeing new things, learning new things, meeting great people, and &#8216;<a href="http://www.appvee.com/t/iphone-app-review-bump" title="iPhone Bump">bumping</a>&#8217; with someone for the first time. If you&#8217;ve ever wondered about heading to SXSW - music, film or interactive - then don&#8217;t wait around any longer and get out there and go. It&#8217;s freaking awesome. </p>

<p>Anyway, I&#8217;m back with some handy new skillz, some energy from all the inspiration - plus I&#8217;ve had my never-been-to-the-U.S status officially removed. I was the biggest  noob imaginable when I arrived. Now? Um, not quite as much :)
</p>]]>
    </description>
    
    <category>Web</category>
    <pubDate>Sat, 27 Mar 2010 16:00 GMT</pubDate>
    </item> <item>
    <title>Lovely browser fonts with CSS3 @font&#45;face</title>
    <link>http://www.mediamolecule.com/lab/article/lovely_browser_fonts_with_css3_font-face/</link>
    <guid isPermaLink="false">http://www.mediamolecule.com/lab/article/lovely_browser_fonts_with_css3_font-face/#id:1952#date:16:12</guid>
    <description>
      <![CDATA[<p>Some of you might have noticed some rather nice fonts on the new Media Molecule website. Well, I suppose that might depend on whether or not you like them and if you&#8217;re using a half decent web browser.</p>

<p>Anyway, yes - those tasty fonts use CSS3&#8217;s @font-face rule. Not all browsers support it, but some additional file formats leave you with support in working in IE4+, Firefox 3.5+ Opera 10+, Safari 3.1+ and Chrome 4.0+. You upload the relevant <em>licensed-for-web-use</em> font files to your webserver, telling your web browser where to download the various files from. You can of course <a href="http://www.mediamolecule.com/_incs/stylesheet.css">read our stylesheet</a>, but for our title font, <a href="http://new.myfonts.com/fonts/exljbris/museo-slab/" title="Museo">Museo</a> (from Jos Buivenga&#8217;s <a href="http://www.josbuivenga.demon.nl/museoslab.html" title="exljbris Font Foundry">exljbris Font Foundry</a>) it looks a little something like this:</p>

<pre class="prettyprint"><code class="lang-css">@font-face {
	font-family: 'Museo500';
	src: url('/images/assets/fonts/Museo500-Regular.eot');
	src: local('Museo 500'), local('Museo-500'), url('/images/assets/fonts/Museo500-Regular.woff') 	format('woff'), url('/images/assets/fonts/Museo500-Regular.otf') format('opentype'), url('/images/assets/fonts/Museo500-Regular.svg#Museo-500') format('svg');
}</code></pre>

<p>So - .ttf and .otf font files for standards compliant browsers, and .eot files for Internet Explorer 4+, .woff files for Firefox 3.6+ and even an .svg format for iPhone (ain&#8217;t that kind!) </p>

<p>Anyway, chances are if you&#8217;re not using @font-face already, you soon will be - so at this point I&#8217;d recommend <a href="http://www.fontsquirrel.com/" title="Font Squirrel">www.fontsquirrel.com</a> - a great resource for 100% free for commercial use fonts, complete with a growing collection of &#8220;<a href="http://www.fontsquirrel.com/fontface" title="@font-face kits">@font-face kits</a>&#8221; and incredibly, a free <a href="http://www.fontsquirrel.com/fontface/generator" title="@font-face generator">@font-face generator</a> that will let you convert license free fonts for use on the web.</p>

<p>If you&#8217;re looking for a wider range of fonts for use on the web, check out <a href="http://typekit.com/" title="TypeKit">TypeKit</a> and <a href="http://clearleft.com/" title="Clearleft's">Clearleft&#8217;s</a> upcoming <a href="http://fontdeck.com/" title="FontDeck">Fontdeck</a>.
</p>]]>
    </description>
    
    <category>Web</category>
    <pubDate>Tue, 09 Feb 2010 16:12 GMT</pubDate>
    </item></channel>
</rss>