tag:blogger.com,1999:blog-63822120518219029952024-03-13T05:27:06.842+00:00Expanding horizonsubiquitous computing, cognitive science, design and everyday thingsAdam Cohen-Rosehttp://www.blogger.com/profile/12286496556944495325noreply@blogger.comBlogger215125tag:blogger.com,1999:blog-6382212051821902995.post-64759751789722734662021-05-23T22:22:00.001+01:002021-05-23T22:22:55.512+01:00micro:bit music making<p>The year 6 <a href="https://codeclub.org/en/clubs/c604e29f-595c-40ad-bc3f-6ef9d104402b">Fleetville Code Club</a> has kept going during all through lockdown – we spent a lot of time in Minecraft, which worked pretty well for virtual sessions, since we were all sharing the same virtual space.</p>
<p>This term we did something a bit different: the students have been making and programming <a href="https://doitkits.com/portfolio-item/minimuglove/">MINI•MU musical gloves</a>. This is a kit designed by <a href="https://twitter.com/helenleigh">Helen Leigh</a> based on the <a href="https://mimugloves.com/">MiMU Glove</a> – in turn invented by the musician <a href="https://twitter.com/imogenheap">Imogen Heap</a> and her team. You can get a glimpse of what the full MiMU Gloves can do in the following video:</p>
<iframe width="560" height="315" src="https://www.youtube.com/embed/CvyVQqCO8pY" title="YouTube video player" allowfullscreen=""></iframe>
<br><br>
<p>The MINI•MU Gloves are considerably simpler than the ones in the video – instead of picking up all finger and hand movements, they use the movement sensors on a <a href="https://microbit.org/">BBC micro:bit</a> to detect basic hand motions, like how much you tilt your hand front to back and side to side. It’s still plenty of input to use for a musical instrument though!</p>
<p>We received the glove kits thanks to the <a href="https://openuk.uk/openkidscamp/">OpenUK Digital Kids Camp</a> and Huawei – who sent out 3000 kits and provided some cool e-zines which we used as a basis for our sessions. The students had to first cut the pattern from felt and sew their glove together, then connect the micro:bit, sound board and battery pack – before programming the micro:bit to make their own sounds.</p>
<p>This was a harder project to get to work in an all-remote environment, and I think some of the students found it hard to stay engaged without being able to share their creations in real life. Even so, I was really impressed with what they managed to build. Here’s my favourite wishing one of the student’s grandparents a happy birthday!</p>
<blockquote class="twitter-tweet"><p lang="en" dir="ltr">The <a href="https://twitter.com/FleetvilleJnr?ref_src=twsrc%5Etfw">@FleetvilleJnr</a> year 6 <a href="https://twitter.com/CodeClub?ref_src=twsrc%5Etfw">@CodeClub</a> have been making and programming MINI•MU Gloves this term – here's my favourite recording for the <a href="https://twitter.com/hashtag/MicrobitVirtualConcert?src=hash&ref_src=twsrc%5Etfw">#MicrobitVirtualConcert</a> with <a href="https://twitter.com/jrflorentine?ref_src=twsrc%5Etfw">@jrflorentine</a> & <a href="https://twitter.com/TinkeringStudio?ref_src=twsrc%5Etfw">@TinkeringStudio</a><br><br>Thanks to <a href="https://twitter.com/openuk_uk?ref_src=twsrc%5Etfw">@openuk_uk</a> for providing the kits designed by the amazing <a href="https://twitter.com/helenleigh?ref_src=twsrc%5Etfw">@helenleigh</a>! <a href="https://t.co/d7nJ7z32Uc">pic.twitter.com/d7nJ7z32Uc</a></p>— Adam Cohen-Rose (@adamcohenrose) <a href="https://twitter.com/adamcohenrose/status/1395712725360291842?ref_src=twsrc%5Etfw">May 21, 2021</a></blockquote>
<h3 id="taking-it-further…">Taking it further…</h3>
<p>The MINI•MU gloves make it easy to make a sound as they have a built-in speaker. However, the micro:bit can only make very simple beeps by itself.</p>
<p>I spent a bit of time trying to get closer to the full MiMU glove experience by sending the movement of the glove to something else that could make some richer sounds.</p>
<h3 id="scratch">Scratch</h3>
<p>One option is to connect the micro:bit to Scratch using its bluetooth connection. The Scratch site has <a href="https://scratch.mit.edu/microbit">very clear instructions on how to get the micro:bit connected</a> – you need to install the Scratch Link software on macOS or Windows, or else use the Scratch app for ChromeOS or Android tablets; then install a special program on the micro:bit itself; and finally add the micro:bit extensions to Scratch and identify your micro:bit by the name it displays.</p>
<p>There’s a <a href="https://scratch.mit.edu/projects/239075756/">few</a> <a href="https://scratch.mit.edu/projects/239075950/">tutorial</a> <a href="https://scratch.mit.edu/projects/239075973/">programs</a> to get you started on the Scratch site, and there’s <a href="https://microbit.org/projects/make-it-code-it/?filters=scratch">a range of examples on the microbit site</a> as well – including a <a href="https://microbit.org/projects/make-it-code-it/scratch-theremin/">theremin</a> to make spooky sci-fi noises.</p>
<p>I’ve made <a href="https://scratch.mit.edu/projects/530438662">another example</a> that lets you make noises as you move either the mouse or the micro:bit around. You can have a go below:</p>
<iframe src="https://scratch.mit.edu/projects/530438662/embed" width="485" height="402" scrolling="no" allowfullscreen=""></iframe>
<br><br>
<h3 id="bluetooth-midi">Bluetooth MIDI</h3>
<p>Another way to get better sound from the MINI•MU glove is to connect the micro:bit to a tablet or computer using MIDI over Bluetooth. MIDI is a music communication system that’s even older than the micro:bit’s BBC precursor from 1981, the venerable <a href="https://en.wikipedia.org/wiki/BBC_Micro">BBC Micro</a>. You can use MIDI to describe starting and stopping a particular note, how hard the note is played (its velocity) and all sorts of other variations – and the system is supported by most music making programs, including things like GarageBand.</p>
<p>To get MIDI from your micro:bit to your computer or tablet is a little complex but once it’s working, you can make all kinds of sounds! Here’s some tips and tricks to get you going:</p>
<h4 id="build-a-project-with-the-bluetooth-midi-extension">Build a project with the Bluetooth MIDI extension</h4>
<p>To send Bluetooth MIDI from your micro:bit, you’ll need to add the Bluetooth MIDI extension:</p>
<ol>
<li>In MakeCode, click Advanced at the bottom of the blocks</li>
<li>Scroll down to the bottom to see Extensions</li>
<li>Click that and type “midi” into the search bar</li>
<li>Make sure you click on the bluetooth-midi extension, not the plain midi one</li>
<li>You’ll now have some extra light blue blocks in the Midi category</li>
</ol>
<p>Here’s a ready-made project you can start with – <a href="https://makecode.microbit.org/_hUkLRmfYVF9Y">Pentatonic MIDI controller</a></p>
<p>Tilt your micro:bit left and right to choose a note, then press the A button to make the micro:bit send the current note. There’s a secret feature to use the light levels picked up from the LEDs – can you figure out how to use it?</p>
<h4 id="make-your-microbit-easier-to-connect">Make your micro:bit easier to connect</h4>
<p>micro:bit MakeCode projects have a secret option that makes it easier to connect the micro:bit to something over bluetooth. It would probably make things harder if you had lots of devices in a classroom, but if you’re just wanting to connect a single micro:bit to your computer or tablet then this will make your life much easier!</p>
<ol>
<li>Go to project settings by clicking on the gearwheel at the top right of the page</li>
<li>Turn on “No Pairing Required: Anyone can connect via Bluetooth”</li>
<li>Click Save</li>
<li>Re-download your project to the micro:bit</li>
</ol>
<p>The Pentatonic MIDI Controller project above already has this option set for you!</p>
<h4 id="microbit-to-ipad">micro:bit to iPad</h4>
<p>This is fairly simple – in GarageBand for the iPad, go to Settings (the gearwheel icon), click Advanced, click Bluetooth MIDI Devices, tap the micro:bit then tap the Connect switch on. If the micro:bit is marked as offline, click Edit and Forget the device.</p>
<p>Now you can use your micro:bit to play and record tunes in GarageBand – and choose any instrument you want!</p>
<h4 id="microbit-to-mac">micro:bit to Mac</h4>
<p>macOS won’t connect to the micro:bit by itself and needs a little bit of prompting. Download and run the <a href="https://github.com/jnross/Bluetility">Bluetility app</a> to see the micro:bit, then click the last service and the last characteristic (they should start “E95D93AF-” and “E95DB84C-” respectively). You should then see a Subscribe button to click in the Detail pane – and this should then make the micro:bit appear in your Bluetooth system preferences.</p>
<p>Now that the micro:bit is connected over Bluetooth, you need to tell the macOS MIDI system that it needs to listen to it. Open the Audio MIDI Setup app (it lives in /Applications/Utilities – or just use Spotlight Search). Make sure the MIDI Studio window is showing (if not, go to the Window menu and choose Show MIDI Studio). Then click the Bluetooth symbol in the MIDI Studio window’s toolbar, which should open the Bluetooth Configuration window and list your connected micro:bit. Click the Connect button next to your micro:bit and you’re finally ready to play!</p>
<p>Open GarageBand, create a new project, and add a Software Instrument. GarageBand should pick up the connected micro:bit immediately and play the notes that you send. You can then choose different sounds from the Library to make your micro:bit play whatever instruments you want.</p>
<h4 id="microbit-to-windows-10">micro:bit to Windows 10</h4>
<p>I haven’t tried this, but there’s a <a href="https://youtu.be/Flp23ZxFtQs">very clear video by BEATNVISION</a> that suggests using the <a href="https://www.microsoft.com/en-gb/p/midiberry/9n39720h2m05?activetab=pivot:overviewtab">MIDIberry app</a> to receive the Bluetooth MIDI from your micro:bit and play sound.</p>
<h3 id="use-the-microbit-connectors">Use the micro:bit connectors</h3>
<p>As well as the movement sensors, the micro:bit also has edge connectors that you can use to attach all sorts of other technology. The MINI•MU glove uses these to connect the speaker, but if you’re going to use bluetooth to output the sound, then you can use the connectors to get more input.</p>
<p>Here’s the micro:bit wizard <a href="https://twitter.com/whaleygeek">David Whale</a> with his micro:bit guitar:</p>
<iframe width="560" height="315" src="https://www.youtube.com/embed/gpyBcDmcHtc" title="YouTube video player" allowfullscreen=""></iframe>
<br><br>
<p>And if you really want to see how far you can go, how about using muscle movements to control your music? Here’s a video on how to pick up electrical changes from your muscles using a micro:bit:</p>
<iframe width="560" height="315" src="https://www.youtube.com/embed/vxlPQZIwYRc" title="YouTube video player" allowfullscreen=""></iframe>
<br><br>
<p>Keep making music!</p>
Adam Cohen-Rosehttp://www.blogger.com/profile/12286496556944495325noreply@blogger.com0tag:blogger.com,1999:blog-6382212051821902995.post-16183283936411380842016-06-22T22:56:00.001+01:002016-06-22T22:56:52.146+01:00Bringing the real world into Minecraft<p>I’ve been running a Code Club at Fleetville Junior School in St Albans for the past four years and we have a whole load of fun programming and making things with computers.</p>
<p>About a year and a half ago, I introduced some Minecraft challenges to the club and soon discovered that it was the genie that can’t be put back into the bottle…</p>
<p>But what a genie! The students have been programming virtual turtles to build and dig their way through challenges, culminating in designing and building huge bridges across an endless ocean (<a href="https://youtu.be/DcqpTrT49sk">see</a> <a href="https://youtu.be/P_fdP4WbSNo">their</a> <a href="https://youtu.be/YU8UZkeSxPI">videos</a>). They can’t get enough of being in Minecraft — even if they’re <em>not</em> allowed to kill each other or blow things up!</p>
<p>For the follow-on project from the bridge building, I wanted to give the students the chance to create something without programming — so I asked them to build a model of their school in Minecraft. They loved the idea!</p>
<p>I wanted the students to build the model themselves, but they needed a guide to help them get things to scale. I figured that a flat map of the school buildings sitting in the Minecraft world would be a good place to start.</p>
<p>Google Maps has a good detailed view of the outside of the school, but this wouldn’t help with the interior rooms. Luckily the school had a PDF architectural plan of the school that they were happy to contribute.</p>
<p>I took a screenshot of the Google Earth aerial imagery of the school and its grounds and then combined the image with the architectural plan in a drawing program.</p>
<p>The next step was to convert the image into a Minecraft “schematic” file — this is a file that can be imported into a world using the <a href="http://wiki.sk89q.com/wiki/WorldEdit">WorldEdit</a> mod.
There’s a great little program called <a href="http://diamondpants.com/spritecraft/">Spritecraft</a> that does exactly this job. You’ll need the (paid for) Full version of Spritecraft to export as a schematic, but all the money goes to a children’s charity.</p>
<p>It took me a little while to adjust the image to give a good output in Spritecraft. First of all, I had to adjust the architectural plan to make it a bit more chunky — those fine lines just didn’t make it into the block-based world of Minecraft. Filling in the walls and removing the door symbols helped a lot, as did setting the windows to a contrasting colour (don’t forget that some students might be colour blind).</p>
<p>Secondly I had to choose a scale… I measured the outside of the school using Google Maps (right-click on a starting point and choose “Measure Distance” then left-click on the end point) and compared this to the number of pixels across the school in the image. Although Minecraft is all set up to use one block to one metre, using this default scale made the school corridors too narrow at just one block wide!</p>
<p>For my build, a scale of 1.5 blocks to 1 metre seemed to work better — the corridors were a couple of blocks wide and the building didn’t seem too large. This might be different for your build — so play around and see what works for you. Here's the result:</p>
<p><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgi-ohahFZCxADC5ybdK9YwsDguotBS84v5HwTO_N6iMvFKdHWzyvZzS5IqB9_WzT_DvQDc1-f2dZk34U4cSQLnKHzn4pqdiMdqXnMTNMMyGusi1CU_4rUbWHYN1JYyfWBg2F8c2fsf6AY/s1600/Fleetville-ground-floor-plan.png" alt="Actual image used to export schematic of school"/></p>
<p>Finally, I exported the schematic file from Spritecraft and copied it into the correct server directory (for MinecraftEdu that’s <code>server/schematics</code> but it may be different for your server). Then in a flat Minecraft world, I used the WorldEdit <code>//schematic load <filename></code> and <code>//paste</code> commands to make the plan appear on the ground.</p>
<p>For our school there was an extra complication — the whole school is built on a slope, with steps and ramps along the corridors. To ensure the floor level ended up in the right place, I asked the students to start building at the lowest point of the school and then create the corridors (with their slopes and steps) before creating the classrooms.</p>
<p>This has been a really successful project so far. The students have made some really detailed rooms, complete with furniture, automated lighting systems(!) and non-player characters acting as teachers.</p>
<p>Here’s some pictures of their build so far — I hope to make another video before the end of term of the students giving a guided tour…</p>
<a data-flickr-embed="true" href="https://www.flickr.com/photos/adamcohenrose/albums/72157670024354536" title="Fleetville School in Minecraft"><img src="https://c3.staticflickr.com/8/7104/27567169770_d8f6b2c19f_z.jpg" width="640" height="360" alt="Fleetville School in Minecraft"></a><script async src="//embedr.flickr.com/assets/client-code.js" charset="utf-8"></script>
<p>If this has helped you and you’ve created something from the real world in Minecraft (especially another school), please comment below — I’d love to hear from you!</p>
Adam Cohen-Rosehttp://www.blogger.com/profile/12286496556944495325noreply@blogger.com0tag:blogger.com,1999:blog-6382212051821902995.post-41584690540216598992016-03-17T21:00:00.000+00:002016-04-18T09:52:21.150+01:00Mobile@Scale 2016<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_GB/sdk.js#xfbml=1&version=v2.5";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<p>Last month Facebook invited mobile developers into their London offices for a collaborative discussion on scaling mobile development.</p>
<p>The focus was mainly on native development — and the attendees were mostly iOS and Android developers — but the scope expanded to include scaling development processes as well as how to scale apps for lots of users.</p>
<p>Jim Purbrick <a href="https://twitter.com/JimPurbrick">@JimPurbrick</a>, Engineering Manager in Facebook London’s office, introduced the talks by saying that on mobile, the bug stakes are higher — once a bug is released, the app is on people’s phones and is much harder to fix. You can’t just update the code and see people get the fix in the next page refresh.</p>
<p>And for all the focus on ending up with a native app in the platform-specific app store, two of the big themes were sharing code across platforms and being able to make quick changes to apps that were already deployed.</p>
<p>I was impressed by the inclusivity of the conference — not only were the speakers from a variety of companies (not just Facebook or Facebook partners) but the audience were encouraged and given time to ask questions and discuss with the speakers.</p>
<p>The talks and discussions were all videoed and I’ve linked to them below together with my notes highlighting the points that made an impression on me.</p>
<h3 id="scaling_ios_google">Scaling iOS @ Google</h3>
<p><em>Michele Aiello</em> <a href="https://twitter.com/micheleaiello">@micheleaiello</a>, Tech Lead Manager on the Calendar app, Google</p>
<p>Michele gave a really detailed talk about how the iOS teams at Google deal with handling large amounts of code shared amongst many geographically spread developers. There’s lots of useful nuggets in here — and it’s interesting to see where Google have invested time and effort in order to make cross-platform and large team development easier.</p>
<div class="fb-video" data-href="https://www.facebook.com/atscaleevents/videos/1707976772808753/" data-width="320"><div class="fb-xfbml-parse-ignore"><blockquote cite="https://www.facebook.com/atscaleevents/videos/1707976772808753/"><a href="https://www.facebook.com/atscaleevents/videos/1707976772808753/">Scaling iOS @ Google - Michele Aiello</a><p></p>Posted by <a href="https://www.facebook.com/atscaleevents/">At Scale</a> on Monday, 28 March 2016</blockquote></div></div>
<ul>
<li>Google has more than 60 apps in the Apple App Store!</li>
<li>iOS devs have moved from London to every office worldwide</li>
<li>strategy on how to share code really important</li>
<li>design & ease of use crucial for scaling apps</li>
<li>yearly gathering of all mobile developers
<ul>
<li>often start shared efforts there</li>
</ul></li>
<li>regular tech talks in local offices + recorded & streamed around the world</li>
<li>have feature specific “Tiger teams”
<ul>
<li>one goal: ship a feature</li>
<li>cross functional: Android, iOS, web, PM, UX, API, etc</li>
</ul></li>
<li>have trouble with merging & reviewing xib, project & storyboard files
<ul>
<li>so Chrome team developed GYP: JSON for structure & dependencies</li>
<li>GYP: “generate your project”</li>
<li>use storyboard & xibs for prototyping, then shared code for elements</li>
</ul></li>
<li>release management:
<ul>
<li>regular releases every 2-6 weeks</li>
<li>with feature flags to toggle new features</li>
<li>compile time flag during initial dev, then runtime flags for later</li>
<li>known as the release train</li>
<li>heavier-weight trains need synchronising with marketing etc — ok to be a little late</li>
<li>75%-80% of users are using auto-update so automatically get updates</li>
</ul></li>
<li>testing:
<ul>
<li>XCTests for functional and performance</li>
<li>KIF & <a href="https://github.com/google/EarlGrey">Earl Grey</a> for UI tests</li>
</ul></li>
<li>sharing code
<ul>
<li>single repo</li>
<li>HEAD is always stable</li>
<li>all code is available and shared</li>
<li>making a change in shared code: see the test results and roll back if issues</li>
</ul></li>
<li>for any shared code
<ul>
<li>enforce documentation & example code</li>
<li>catalog app for UI elements</li>
</ul></li>
<li>for cross platform sharing
<ul>
<li>try to share model cross platform and to server too</li>
<li>makes offline easier</li>
<li>have tried webviews & javascript</li>
<li>now using C++ & <a href="http://j2objc.org/">J2ObjC</a>
<ul>
<li>C++ easy on iOS, complicated on Android</li>
<li>used in Chrome</li>
<li>j2ObjC used for Inbox</li>
</ul></li>
<li>j2ObjC even lets you debug into transpiled Java code in Xcode
<ul>
<li>breakpoints, stepping, variable values all work</li>
</ul></li>
<li>if code is simple, look at sharing the tests rather than the code</li>
</ul></li>
<li>swift at Google: currently playing with it
<ul>
<li>have found that development is faster</li>
<li>probably waiting a few months to bring into production apps</li>
</ul></li>
<li>user testing using beta releases (testflight, android beta)
<ul>
<li>metrics in the app</li>
<li>surveys after testing</li>
</ul></li>
<li>have tools to search whole repo to find out if code is still used</li>
<li>sharing layout
<ul>
<li>done using sharing layout logic</li>
</ul></li>
</ul>
<h3 id="when_mobile_ides_need_to_scale">When mobile IDEs need to scale</h3>
<p><em>Al Sutton</em> <a href="https://twitter.com/AlSutton">@AlSutton</a>, Facebook</p>
<p>Al talked about how Facebook builds Android apps, and how they feed back improvements to their build process into the open source community (e.g. IntelliJ community edition and the <a href="https://buckbuild.com/">Buck</a> build tool). By using Buck, they allow their developers to choose whatever IDE they want.</p>
<div class="fb-video" data-href="https://www.facebook.com/atscaleevents/videos/1707980922808338/" data-width="320"><div class="fb-xfbml-parse-ignore"><blockquote cite="https://www.facebook.com/atscaleevents/videos/1707980922808338/"><a href="https://www.facebook.com/atscaleevents/videos/1707980922808338/">When mobile IDEs need to scale - James Pearce and Al Sutton</a><p></p>Posted by <a href="https://www.facebook.com/atscaleevents/">At Scale</a> on Monday, 28 March 2016</blockquote></div></div>
<h4 id="nuclide">Nuclide</h4>
<p><em>James Pearce</em> <a href="https://twitter.com/JamesPearce">@JamesPearce</a>, Head of Open Source at Facebook</p>
<p>James continued from Al’s Android introduction to talk about Facebook’s new Nuclide IDE for building iOS apps… It’s exciting to see some competition in the iOS IDE world — whilst Xcode is great at some things, it often leaves a lot to be desired. <a href="https://www.jetbrains.com/objc/">JetBrains’ AppCode</a> is a useful challenger but to have an extensible open-source IDE for iOS could be a game changer. The only downside for me is that Nuclide relies on Buck, so you have to change your project to buy in to the Facebook toolchain. Perhaps if someone could create a <a href="http://fastlane.tools/">Fastlane</a> plug-in…?</p>
<ul>
<li>unlike IntelliJ, Xcode is not open source, so can’t contribute</li>
<li>existential issue for Facebook…</li>
<li>started extending Atom from github</li>
<li>aded <a href="https://github.com/facebook/flow">Flow</a>, <a href="https://babeljs.io/">Babel</a>, Clang & Buck</li>
<li>created Nuclide</li>
<li>also added Chromium dev tools to help debug into app
<ul>
<li>lets you debug into Javascript, Objective C, etc all in same place</li>
<li>transpiling keeps source maps to help with line numbers</li>
<li>also lets you inspect into UI hierarchy for ReactNative apps</li>
<li>includes highlighting</li>
</ul></li>
<li>now have 2/3rds of committing engineers using Nuclide</li>
<li>have analytics built-in
<ul>
<li>tracking feature usage</li>
</ul></li>
<li>internal infrastructure team has become a product team</li>
<li>now available at http://nuclide.io
<ul>
<li>analytics kept for internal</li>
</ul></li>
<li>other open source projects
<ul>
<li>pop: iOS animation library</li>
</ul></li>
<li>doesn’t have refactoring yet</li>
</ul>
<h3 id="6_lessons_learned_scaling_mobile_at_soundcloud">6 lessons learned scaling mobile at SoundCloud</h3>
<p>Next up were a couple of sessions from smaller companies (though still not small!) showing how they built and adapted their apps faster to keep up with demand. SoundCloud spoke about using ReactNative (more on that later) and how they structured their dev teams to include mobile developers.</p>
<p><em>Jamie McDonald</em> (Android) <a href="https://twitter.com/jdamcd">@jdamcd</a> & <em>Matej Balatic</em> (iOS) <a href="https://twitter.com/skavt">@skavt</a>, SoundCloud</p>
<div class="fb-video" data-href="https://www.facebook.com/atscaleevents/videos/1708005706139193/" data-width="320"><div class="fb-xfbml-parse-ignore"><blockquote cite="https://www.facebook.com/atscaleevents/videos/1708005706139193/"><a href="https://www.facebook.com/atscaleevents/videos/1708005706139193/">6 lessons learned scaling mobile at SoundCloud - Jamie McDonal…</a><p></p>Posted by <a href="https://www.facebook.com/atscaleevents/">At Scale</a> on Monday, 28 March 2016</blockquote></div></div>
<ul>
<li>building out new SoundCloud Pulse app for people creating sounds</li>
<li>most engineers busy on main SoundCloud listener app</li>
<li>got a partner for Android, but built iOS app with ReactNative using web developers</li>
<li>shared design & feature set across platforms saves a lot of time
<ul>
<li>were previously designing features twice</li>
<li>marketing was more complex too</li>
</ul></li>
<li>mobile specific API
<ul>
<li>mobile-specific features: background sync, batch fetches</li>
<li>“back-end for front-end” idea from ThoughtWorks</li>
</ul></li>
<li>developed C-based mobile playback library (skippy)
<ul>
<li>initially for Android, now rolled out across iOS too</li>
<li>e.g. optimise streaming for emerging markets</li>
</ul></li>
<li>tried to spread mobile devs through feature teams
<ul>
<li>but spread too thinly</li>
<li>weren’t able to pair and share knowledge</li>
</ul></li>
<li>instead created clusters of feature teams
<ul>
<li>mobile engineers shared amongst each cluster</li>
<li>could be in enough numbers together</li>
</ul></li>
<li>release train model
<ul>
<li>each feature team can take responsibility for shipping</li>
<li>allowed action but also feedback and responsibility</li>
<li>use feature flags — team responsible for turning on when ready</li>
</ul></li>
<li>tools used:
<ul>
<li>iOS:
<ul>
<li><a href="https://github.com/soundcloud/FlipTheSwitch">FlipTheSwitch</a></li>
<li>stable CoreData stack — specific use of framework</li>
</ul></li>
<li>Android, use LightCycle (soon to be open-sourced)
<ul>
<li>forward life cycle events to small independent modules</li>
<li>receives callbacks but doesn’t need to know which activity its attached to</li>
<li>enables better unit tests as can separate things out more effectively</li>
</ul></li>
</ul></li>
</ul>
<h3 id="backend_driven_native_uis">Backend-driven native UIs</h3>
<p><em>John Sundell</em> <a href="https://twitter.com/johnsundell">@johnsundell</a>, iOS Developer, Spotify</p>
<p>Spotify have an almost completely content-based app and are constantly tweaking to change the presentation and priority of different music. John and his team came up with a way of handling that change by controlling the whole app UI from the backend API.</p>
<div class="fb-video" data-href="https://www.facebook.com/atscaleevents/videos/1708052886134475/" data-width="320"><div class="fb-xfbml-parse-ignore"><blockquote cite="https://www.facebook.com/atscaleevents/videos/1708052886134475/"><a href="https://www.facebook.com/atscaleevents/videos/1708052886134475/">Backend-driven native UIs - John Sundell and Diego Cristina Ca…</a><p></p>Posted by <a href="https://www.facebook.com/atscaleevents/">At Scale</a> on Monday, 28 March 2016</blockquote></div></div>
<ul>
<li>define components in backend API</li>
<li>generalised data binding</li>
<li>generalised components
<ul>
<li>implement standardised components which can be picked up from API</li>
</ul></li>
<li>can put cacheing, and lots of standard stuff in the generalised app</li>
<li>control the UI from the backend
<ul>
<li>API contains view models rather than raw models</li>
</ul></li>
<li><em>Ed.: makes sense if you have an app with lots of similar components</em>
<ul>
<li><em>especially for a content-based app</em></li>
<li><em>similar to Google’s code-based component library</em></li>
</ul></li>
<li>were able to delete 20,000 lines of code on home page browse view</li>
<li>overall have been able to delete 100K lines of code across iOS & Android</li>
<li>use layout traits to control layout
<ul>
<li>e.g. full width, separator, stackable</li>
</ul></li>
<li>request sends a lot of data about the device to the backend
<ul>
<li>can return different components & layout depending on device or screen size etc</li>
<li>sometimes send extra data in response so can handle quick changes e.g. screen rotation</li>
</ul></li>
<li>support infinite scroll using metadata with URIs for follow-up pages</li>
<li>can set up fallback components — if this not available, fallback to previous
<ul>
<li>enables playing around with new features & UI but still supporting older builds</li>
</ul></li>
</ul>
<h3 id="infer_moving_fast_with_static_analysis">Infer: Moving fast with static analysis</h3>
<p><em>Dulma Churchill</em>, Software Engineer, Facebook</p>
<p>Taking up Jim Purbrick’s challenge of dealing with the higher stakes of bugs in mobile, Dulma gave us an introduction to <a href="http://fbinfer.com">Infer</a> — Facebook’s static analyzer that can check for memory and resource leaks and null pointer issues each time you compile.</p>
<div class="fb-video" data-href="https://www.facebook.com/atscaleevents/videos/1708059786133785/" data-width="320"><div class="fb-xfbml-parse-ignore"><blockquote cite="https://www.facebook.com/atscaleevents/videos/1708059786133785/"><a href="https://www.facebook.com/atscaleevents/videos/1708059786133785/">Infer: Moving fast with static analysis - Dulma Churchill</a><p></p>Posted by <a href="https://www.facebook.com/atscaleevents/">At Scale</a> on Monday, 28 March 2016</blockquote></div></div>
<ul>
<li>static analyzer that doesn’t require pre/post conditions</li>
<li>compositional, so doesn’t need to process whole project at once</li>
<li>very intertwined with compiler</li>
<li>infer can find inter-procedural bugs not local to single file</li>
<li>used with CI can be set up to only process newly compiled files</li>
<li>within facebook: fix rate around 70% in recent months
<ul>
<li>high rate due to getting results on continuous integration</li>
</ul></li>
<li>there’s an Xcode plugin</li>
<li>integrated with <a href="https://codeboard.io">codeboard</a>
<ul>
<li>web-based IDE to teach programming in classroom</li>
<li>Java, Python Haskell…</li>
</ul></li>
<li>see <a href="http://fbinfer.com/blog/2016/03/17/collaboration-with-spotify.html">their blog post about being used at Spotify</a></li>
</ul>
<h3 id="3000_images_per_second">3000 images per second</h3>
<p><em>Henna Kermani</em> <a href="https://twitter.com/tokyotwilight">@tokyotwilight</a>, Software Developer, Twitter</p>
<p>Some interesting stats from Twitter here, in Henna’s story of how Twitter scaled up their image and video handling.</p>
<div class="fb-video" data-href="https://www.facebook.com/atscaleevents/videos/1708070772799353/" data-width="320"><div class="fb-xfbml-parse-ignore"><blockquote cite="https://www.facebook.com/atscaleevents/videos/1708070772799353/"><a href="https://www.facebook.com/atscaleevents/videos/1708070772799353/">3000 images per second - Henna Kermani</a><p></p>Posted by <a href="https://www.facebook.com/atscaleevents/">At Scale</a> on Monday, 28 March 2016</blockquote></div></div>
<ul>
<li>image uploading used to be all in the same API call as the tweet itself
<ul>
<li>any point of failure would fail whole thing</li>
<li>waste of bandwidth for client & server</li>
</ul></li>
<li>split out image upload from tweet content
<ul>
<li>also allowed segmented, resumable uploads</li>
<li>used multi-part POST requests with separate INIT, APPEND & FINALIZE API calls</li>
<li>massive drop in upload failures, especially in developing world</li>
</ul></li>
<li>did research on age of images:
<ul>
<li>15 days 50th percentile</li>
<li>150 days 90th percentile</li>
</ul></li>
<li>so kept original + 20 days of variants
<ul>
<li>balance between storage increase per day and computation on each request</li>
<li>saved $6m in 2015 just from this change!</li>
</ul></li>
<li>image formats
<ul>
<li>tried using WebP for 6 months last year in Android app
<ul>
<li>~25% smaller than PNG or JPG — better engagement</li>
<li>but not supported on Android <4 or iOS…</li>
</ul></li>
<li>converging on progressive JPEG instead</li>
<li>used Facebook’s <a href="http://frescolib.org/">Fresco</a> library in Android app</li>
</ul></li>
</ul>
<h3 id="react_native">React Native</h3>
<p><em>Pieter De Baets</em> <a href="https://twitter.com/javache">@javache</a>, Facebook</p>
<p>Pieter gave a detailed intro to <a href="https://facebook.github.io/react-native/">React Native</a> — building native apps for iOS and Android using just JavaScript and HTML-like markup.</p>
<div class="fb-video" data-href="https://www.facebook.com/atscaleevents/videos/1708080349465062/" data-width="320"><div class="fb-xfbml-parse-ignore"><blockquote cite="https://www.facebook.com/atscaleevents/videos/1708080349465062/"><a href="https://www.facebook.com/atscaleevents/videos/1708080349465062/">React Native: bringing the best of web development to native -…</a><p></p>Posted by <a href="https://www.facebook.com/atscaleevents/">At Scale</a> on Monday, 28 March 2016</blockquote></div></div>
<ul>
<li>if you ship a bug in a mobile app, there will always be a user out there running that bug — no matter how many updates you apply…</li>
<li>write UI declaratively, code in Javascript</li>
<li>share lots of code between iOS and Android</li>
<li>Apple’s guidelines don’t allow you to update code in a running app
<ul>
<li>but there’s an exception that lets you update JavaScript over the air</li>
<li>so you can update React Native apps instantly</li>
</ul></li>
</ul>
<h3 id="don8217t_forget_the_web">Don’t forget the web</h3>
<p><em>Jeremy Keith</em> <a href="https://twitter.com/adactio">@adactio</a>, Founder, Clearleft</p>
<p>After all that talk of native development, Jeremy brought us back to thinking about the web and how it will always be the largest, widest target. It isn’t a “platform” and it will never be the leading edge of mobile, but it is for everybody.</p>
<div class="fb-video" data-href="https://www.facebook.com/atscaleevents/videos/1708087206131043/" data-width="320"><div class="fb-xfbml-parse-ignore"><blockquote cite="https://www.facebook.com/atscaleevents/videos/1708087206131043/"><a href="https://www.facebook.com/atscaleevents/videos/1708087206131043/">Don’t forget the web - Jeremy Keith</a><p></p>Posted by <a href="https://www.facebook.com/atscaleevents/">At Scale</a> on Monday, 28 March 2016</blockquote></div></div>
<ul>
<li>when building for the web
<ul>
<li>start with core functionality</li>
<li>implement with simplest techology</li>
<li>enhance!</li>
</ul></li>
<li>can be done for whole service but also for individual components</li>
<li><em>Ed. is this that much different from native?</em>
<ul>
<li><em>especially for different OS levels, Android features etc</em></li>
</ul></li>
<li>there’s always something new that’s not fully supported</li>
</ul>Adam Cohen-Rosehttp://www.blogger.com/profile/12286496556944495325noreply@blogger.com010 Brock St, Kings Cross, London NW1 3FG, UK51.525743299999988 -0.139922500000011551.209630299999986 -0.78536950000001149 51.841856299999989 0.5055244999999885tag:blogger.com,1999:blog-6382212051821902995.post-90130728017036806182015-04-09T21:03:00.002+01:002015-04-09T21:03:40.231+01:00Pebble Meetup London<p>There’s a definite buzz in the air around watches this week — with the Apple Watch due for pre-order tomorrow and Pebble Time just finished its Kickstarter…</p>
<p>Here’s my notes from tonight’s Pebble Meetup — a big turnout of mostly developers and lots of people interested in building new apps.</p>
<h3 id="pebble_evernote">pebble & evernote</h3>
<p>Damian Mehers (<a href="https://twitter.com/DamianMehers">@DamianMehers</a>), Senior Software Engineer, Wearables, Evernote</p>
<ul>
<li>have to wait for iOS app to be released for store to be updated (?)</li>
<li>initially limited to 120 bytes in messages sent to watch
<ul>
<li>bigger messages allowed now</li>
</ul></li>
<li>Evernote app pages data into watch (using most recently used caches)</li>
<li>attaches a data structure to each window</li>
<li>had to implement an Evernote sync engine in Javascript…
<ul>
<li>using local storage</li>
</ul></li>
<li>timeline allows contextually relevant info
<ul>
<li>possible to query timeline to join with other info?</li>
</ul></li>
<li>want to get wearable use to be partly subconscious
<ul>
<li>making use of the basal ganglia :-)</li>
</ul></li>
<li>to keep a pebble timeline continually updated, need something running continually
<ul>
<li>JS in Pebble app doesn’t</li>
</ul></li>
</ul>
<h3 id="pebble_time_new_sdk">pebble time & new SDK</h3>
<p>Matthew Tole (<a href="https://twitter.com/MatthewTole">@MatthewTole</a>), Pebble Developer Evangelist</p>
<ul>
<li>colors all have names :-)</li>
<li>PNG & APNG (animated) support (auto-conversion of GIF files)</li>
<li>AppFaces — 3.0 launch only for system apps
<ul>
<li>a peek into your app’s current status</li>
</ul></li>
<li>pebble drawing commands
<ul>
<li>will have conversion from SVG — some kind of extension of GPath</li>
<li>define an SVG in a cyclical form — easy to morph to new forms</li>
</ul></li>
</ul>
<h4 id="timeline">timeline</h4>
<ul>
<li>will have built-in calendar & weather support</li>
<li>can have actions
<ul>
<li>initially just open app with parameter</li>
<li>but will allow more later</li>
</ul></li>
<li>can push notifications through server-side web api</li>
</ul>
<h4 id="new_designs">new designs</h4>
<ul>
<li>encouraged to make all apps backwards compatible</li>
<li>recommended to stick each screen to one or two colours</li>
</ul>
Adam Cohen-Rosehttp://www.blogger.com/profile/12286496556944495325noreply@blogger.com0tag:blogger.com,1999:blog-6382212051821902995.post-4538780310431598292015-01-11T21:48:00.001+00:002015-01-11T21:48:42.070+00:00The easiest way to use Raspberry Pis in primary schools?I really like the idea of Raspberry Pis for education, but I've not yet managed to get them to work in the primary school where I run my <a href="http://codeclub.org.uk/">Code Club</a>. The school has roaming laptops, iPads and iPod touches and no easy way to plug in Pis to screens and keyboards — there's just no room available for them.<br />
<div>
<br /></div>
<div>
Browsing through Simon Walters' (<a href="https://twitter.com/cymplecy">@cymplecy</a>) latest exploits with <a href="http://simplesi.net/scratchgpio/">ScratchGPIO</a> and <a href="http://simplesi.net/sidrpi/">Scratch Interface Device (SID)</a> got me thinking a little… I wonder if the following is possible:</div>
<div>
<ol>
<li>Set up Pi with DHCP server to assign 10.x addresses (school laptops are on 192.168.x) and to have its own address set to 10.0.0.1</li>
<li>Set up Pi to run a script on startup that waits for Scratch remote sensor connections on 10.0.0.2 — then run ScratchGPIO with 10.0.0.2 as its host</li>
<li>Connect Pi to laptop with ethernet cable and USB (for power) — no other cables required!</li>
<li>Laptop should have wired IP of 10.0.0.2</li>
<li>Open Scratch on laptop and enable remote sensor connections</li>
<li>ScratchGPIO should start on Pi and be available to the laptop</li>
<li>Plug some hardware into the Pi and start controlling it!</li>
</ol>
<div>
Can anyone help test this out?</div>
</div>
Adam Cohen-Rosehttp://www.blogger.com/profile/12286496556944495325noreply@blogger.com0tag:blogger.com,1999:blog-6382212051821902995.post-74862112154939576892014-10-31T22:00:00.000+00:002014-11-02T11:55:55.396+00:00The Web Is... Day Two<p>Took me a little while to prepare my notes for the second day of The Web Is… conference, mainly due to an ‘orrible cold that developed over the last week. I hope I haven’t given it to the lovely people I spoke to over the last few days!</p>
<p>Thank you once again to <a href="https://twitter.com/craiginwales">Craig</a> and <a href="https://twitter.com/amienlockwood">Amie</a> Lockwood and all their helpers for a fantastic conference. I know they had a lot of trouble getting the conference organised, but the end result was very definitely worth it.</p>
<p>Craig — please keep organising more conferences! You have a rare skill in finding and curating talks that connect at many different levels —- and that challenge us to do better and improve the world.</p>
<p>Here are my notes for day two, complete with the additional <a href="http://creativemornings.com/" title="CreativeMornings | Breakfast lecture series for the creative community">Creative Morning</a> session.</p>
<h3 id="creative_mornings_crossover">Creative Mornings: Crossover</h3>
<ul>
<li>creative mornings: 99 cities around the world</li>
<li>meeting once a month with a common theme across all</li>
<li>this month, the theme is Crossover</li>
</ul>
<p>David Hieatt, <a href="http://hiutdenim.co.uk/" title="Hiut Denim">Hiut Denim</a> <a href="https://twitter.com/davidhieatt">@davidhieatt</a></p>
<ul>
<li>co-founded Howies</li>
<li>runs the <a href="http://www.thedolectures.com/">Do Lectures</a></li>
<li>entrepreneurs fall in love with things so they don’t quit</li>
<li>have to choose something that you’re interested in
<ul>
<li>it will get tough and test you</li>
</ul></li>
<li>vision: what have I seen that others haven’t</li>
<li>intersection of skill, interest & vision
<ul>
<li>where you’re most alive</li>
</ul></li>
<li>fight a battle you can win</li>
<li>denim factory in wales used to be biggest jeans factory in UK</li>
<li>employed 400 people, made 35K pairs of jeans a week for decades</li>
<li>tried to be cheapest — not the right battle</li>
<li>in UK have to use our creativity</li>
<li>dreams should not be logical or sensible
<ul>
<li>should scare you!</li>
</ul></li>
<li>currently employing 14 people — quite a way to go</li>
<li>but everyone in the town has decades of experience making jeans</li>
<li>there are people in the factory who have 50,000 hours of experience</li>
<li>the elite makers club</li>
<li>but quality isn’t enough</li>
<li>need to find ideas to act as multipliers</li>
<li>hiut denim: an ideas company that makes jeans</li>
<li>Richard Seymour: the more you operate in the future, the less competition you will have</li>
<li>lots of small experiments</li>
<li>small company — move fast</li>
<li>jeans have <a href="http://hiutdenim.co.uk/pages/historytag">history tags</a> on them
<ul>
<li>6 photos of them being made</li>
<li>plus you can upload new photos for their history</li>
<li>when the jeans get handed down, you can see their history</li>
</ul></li>
<li>80% of environmental impact is the washing, not the making
<ul>
<li>hence <a href="http://hiutdenim.co.uk/pages/the-no-wash-club">no wash club</a></li>
<li>people doing crazy things to not wash for 6 months or more</li>
</ul></li>
<li>people want to wear used jeans
<ul>
<li>so sent out jeans to people to break in</li>
<li>they would get their deposit back when returned</li>
<li>then receive 20% of resulting sale</li>
</ul></li>
<li>facetime store
<ul>
<li>will create a custom fit for you from a facetime call</li>
</ul></li>
<li>instagram is going to change stores</li>
<li>your best project is the one that’s in front of you now</li>
</ul>
<h3 id="the_web_is8230_like_water">The Web Is… Like Water</h3>
<p>Scott Jenson <a href="https://twitter.com/scottjenson">@scottjenson</a> <a href="http://google.github.io/physical-web/">http://google.github.io/physical-web/</a></p>
<ul>
<li>standardising pull to refresh, just like the steering wheel…?</li>
<li>but steering wheels started as tillers with rear wheel steering</li>
<li><a href="http://www.amazon.co.uk/gp/product/1421401924/ref=as_li_tl?ie=UTF8&camp=1634&creative=19450&creativeASIN=1421401924&linkCode=as2&tag=expandhorizo-21&linkId=D2UUUMOQOS2COUDC">User Unfriendly</a>, Joseph J Corn
<ul>
<li>people preferred the tiller at the time</li>
<li>needed <em>irreversible steering</em> to prevent too much feedback from potholes</li>
</ul></li>
<li>browsers have a DOS prompt on the top…
<ul>
<li>the browser needs a browser</li>
</ul></li>
<li>the web = Loki — proud, <em>vs</em> iPhone = the Hulk
<ul>
<li>“I am a God, you dull creature. I will not be bullied”</li>
<li><a href="https://www.youtube.com/watch?v=DsUCRcK7QYc">…body slam…</a></li>
</ul></li>
<li>the web is currently following native, not driving the future</li>
<li>we have app myopia</li>
<li>“thin crust of effort” around apps
<ul>
<li>people will only install them if they’re important</li>
</ul></li>
<li>apps are our technology tiller…</li>
<li>Apple iBeacons are per-app at the moment
<ul>
<li>go into a mall — install one app for each store…</li>
<li>then delete them all afterwards as they’re all crap</li>
</ul></li>
<li>the web is good at the long tail</li>
<li>break down the internet of things into several layers
<ul>
<li>coordination
<ul>
<li>devices talking to each other</li>
<li>toast automatically ready when you come down for breakfast</li>
<li>cool but will take a while</li>
</ul></li>
<li>control
<ul>
<li>where we are right now</li>
</ul></li>
<li>discovery
<ul>
<li>commonly ignored — usually “download our app”</li>
</ul></li>
</ul></li>
<li>think small — just a bit of information for each thing</li>
<li>Bluetooth Low Energy beacons just broadcasting a URL
<ul>
<li>like QR codes but without having to get so close</li>
</ul></li>
</ul>
<ul>
<li>URL with information
<ul>
<li>bus stop</li>
</ul></li>
<li>URL that sends info back to the device
<ul>
<li>vending machine</li>
<li>GSM modems are really cheap</li>
<li>Sigfox offers $1/year plans</li>
</ul></li>
<li>URL with javascript talking BLE direct to object
<ul>
<li>object can make use of all the capabilities of the phone</li>
<li>so much cheaper per device</li>
<li>Chrome already has Bluetooth library but behind Chrome apps</li>
<li>but creating a proposal with Mozilla to put into web sandbox</li>
</ul></li>
</ul>
<ul>
<li>two kinds of ideas:
<ul>
<li>truck ideas — products</li>
<li>road ideas — infrastructure</li>
</ul></li>
<li>Malcolm McLean — invented container shipping
<ul>
<li>created lots of patents then gave them away</li>
<li>realised he would make more by having a smaller percentage of larger market</li>
</ul></li>
</ul>
<ul>
<li>physical web beacon
<ul>
<li>currently no security etc — just for testing</li>
<li>configure it by pressing the button</li>
</ul></li>
<li>the Google Chrome team is staffed by boy scouts
<ul>
<li>just want more URLs in the world</li>
</ul></li>
</ul>
<h3 id="the_web_is8230_still_young">The Web Is… Still Young</h3>
<p>Benjamin Hollway <a href="https://twitter.com/benjaminhollway">@benjaminhollway</a></p>
<p>Slides available at <a href="http://nothingrandom.com/says/thewebis/young">http://nothingrandom.com/says/thewebis/young</a></p>
<ul>
<li>how can we support young coders under 18?</li>
<li>cheap/free tickets for conferences</li>
<li>opportunities to speak
<ul>
<li>unique perspective</li>
</ul></li>
<li>alternative after party venues
<ul>
<li>accessible to people who can’t drink or are too young</li>
</ul></li>
<li>help introduce kids to computing
<ul>
<li>join or set up a <a href="http://codeclub.org.uk">Code Club</a></li>
</ul></li>
<li>mentoring
<ul>
<li>work experience</li>
<li>paid internships — 2-3 weeks during summer holiday</li>
<li>deeper insight into how the industry works</li>
</ul></li>
<li>future
<ul>
<li>inclusivity</li>
<li>< 5% use IE, but at least that or more have disabilities</li>
</ul></li>
</ul>
<h3 id="the_web_is8230_turning_difficulties_into_opportunities">The Web Is… Turning Difficulties Into Opportunities</h3>
<p>Robin Christopherson, <a href="https://twitter.com/USA2DAY">@USA2DAY</a></p>
<ul>
<li><a href="https://twitter.com/AbilityNet">AbilityNet</a>: leading experts in technology & disability</li>
<li>also do assessments: one of first was Prof. Stephen Hawking</li>
<li>technology can really help people with disabilities</li>
<li><a href="http://geni.us/3BKu">light detector</a>
<ul>
<li>helps to see if lights/indicators are on or off</li>
<li>especially for enabling oven light (they don’t make speaking ovens)</li>
</ul></li>
<li><a href="http://geni.us/2Ebn">talking goggles</a>
<ul>
<li>reads any text from camera</li>
<li>also recognises some images</li>
</ul></li>
<li><a href="http://geni.us/gFy">word lens</a>
<ul>
<li>translates and can then read out using voiceover</li>
</ul></li>
<li>TABs — temporarily able bodied
<ul>
<li>it’s likely everyone will have some kind of some kind of disability eventually in their lives</li>
</ul></li>
<li>also mobile use cases are often very similar to accessibility cases</li>
<li><a href="https://www.youtube.com/watch?v=VgSDPJUrqak">a blind date with an iPhone</a>
<ul>
<li>woman prepares all her responses before the date…</li>
</ul></li>
<li>google glass captioned audio
<ul>
<li>speak into Android phone, see captioned audio on glass screen</li>
</ul></li>
<li><a href="http://hdl.handle.net/1959.13/28927">FaceXpress</a>
<ul>
<li>identifies emotions from faces</li>
</ul></li>
<li>live facial recognition
<ul>
<li>identify people coming to your door if you’re bed-bound</li>
</ul></li>
<li>directions in maps apps
<ul>
<li>audio directions are very powerful</li>
</ul></li>
<li><a href="http://www.motorola.com/us/accessories-bluetooth-headsets/Moto-Hint/moto-hint-pdp.html">Moto Hint</a>
<ul>
<li>Google Now as an earbud</li>
</ul></li>
<li>IBM Watson now has a <a href="https://developer.ibm.com/watson/">developer kit</a></li>
<li>self-driving cars
<ul>
<li>30% of city driving is looking for a space</li>
<li>eliminating human error accidents</li>
<li>need to have speech output</li>
<li>otherwise can’t tell if arrived or just stopped at a traffic light!</li>
</ul></li>
<li>direct brain interface
<ul>
<li>completely paralysed woman able to move a robot arm</li>
</ul></li>
<li>technology4good lifetime award given to Prof. Hawking
<ul>
<li><a href="http://www.abilitynet.org.uk/news/stephen-hawking-accepts-abilitynet-award">acceptance speech</a> worth listening to</li>
</ul></li>
<li>73% of people with a vision impairment are out of work
<ul>
<li>there’s no longer any reason why they can’t work</li>
</ul></li>
</ul>
<h3 id="the_web_is8230_too_slow">The Web Is… Too Slow</h3>
<p>Andy Davies <a href="https://twitter.com/AndyDavies">@AndyDavies</a></p>
<ul>
<li>shopdirect (run littlewoods brand):
<ul>
<li>on average, each purchase is across 2.4 devices</li>
</ul></li>
<li>Tammy Everts: only 12% of top 100 US retail sites render feature content under 3 seconds</li>
<li>we perceive delays around the 1s mark
<ul>
<li>100ms appears instantaneous</li>
<li>200-300ms fast enough</li>
<li>1s start to feel it</li>
<li>> 1s we start to task switch</li>
</ul></li>
<li>the web is for everybody …but only if we make it that way</li>
<li>Chris Zachariah: made youtube pages faster
<ul>
<li>but time to view video went down</li>
<li>turns out they were reaching new audiences</li>
<li>that hadn’t been able to use the site at all before</li>
</ul></li>
<li>Guardian’s new design:
<ul>
<li>speed was a feature in the press release</li>
</ul></li>
<li>Walmart have released conversion rate vs load time
<ul>
<li>all conversions concentrated in first 4 secs of load time</li>
</ul></li>
<li>Staples increased conversions by 10%
<ul>
<li>cut 1s from median home page</li>
<li>6s from 98th percentile</li>
</ul></li>
<li>we’re more tolerant of slow experiences in some cases
<ul>
<li>when we’re more committed, e.g. further into conversion funnel</li>
<li>when we’re used to it</li>
</ul></li>
<li>kayak study: we don’t trust comparison sites that are too quick…</li>
<li>Matias Duarte: “design is finding solutions within constraints .. if no constraints, it’s not design but art”</li>
<li>need to set a performance design constraint
<ul>
<li>e.g. an event that matters to the user happens within a certain time under certain network conditions</li>
</ul></li>
<li>doesn’t mean anything to measure page sizes or number of objects</li>
<li>Etsy: have lots of feature flags
<ul>
<li>all staff see a performance bar at the top of the page</li>
<li>indicates if the page has met requirements</li>
</ul></li>
<li><a href="https://github.com/lafikl/perfBar">PerfBar</a>
<ul>
<li>plugins for different browsers and sites</li>
</ul></li>
<li>WebPageTest
<ul>
<li>can run tests & set a budget based on competitor sites</li>
</ul></li>
<li>speedcurve
<ul>
<li>used by the guardian</li>
<li>have a performance chart outside the financial director’s office</li>
<li>performance budget lines coming in November</li>
</ul></li>
<li>headline network speed doesn’t include latency
<ul>
<li>often matters more than bandwidth</li>
</ul></li>
<li>network connection closer to a bucket brigade than a pipe</li>
<li>TCP has a slow start algorithm that directly affects initial page latency
<ul>
<li>more modern operating systems <a href="http://monolight.cc/2010/12/increasing-tcp-initial-congestion-window/">increase the initial congestion window</a></li>
<li>this increases the number of segments that can be sent without an acknowledgement</li>
</ul></li>
<li>rendering:
<ul>
<li>CSS Object Model blocks Javascript execution</li>
<li>Javascript blocks DOM construction</li>
<li>complex CSS can really slow the initial rendering</li>
</ul></li>
<li>dealing with fonts
<ul>
<li>Ilya Gregorik suggested new font-timeout & font-desirability properties</li>
<li>would allow us to choose to render the page without the font</li>
</ul></li>
<li>HTTP/2 has server push
<ul>
<li>server can push additional files that it knows the browser will want</li>
<li>if the browser has a cached version, it can reject the push</li>
</ul></li>
</ul>
<p>Slides will be available at <a href="http://www.slideshare.net/andydavies">http://www.slideshare.net/andydavies</a> (eventually)</p>
<h3 id="the_web_is8230_our_responsibility">The Web Is… Our Responsibility</h3>
<p>Sally Jenkinson <a href="https://twitter.com/sjenkinson">@sjenkinson</a> <a href="http://recordssoundthesame.com">http://recordssoundthesame.com</a></p>
<p><iframe src="//www.slideshare.net/slideshow/embed_code/40991506" width="425" height="355" frameborder="0" marginwidth="0" marginheight="0" scrolling="no" style="border:1px solid #CCC; border-width:1px; margin-bottom:5px; max-width: 100%;" allowfullscreen></iframe><div style="margin-bottom:5px"><strong><a href="//www.slideshare.net/sallyjenkinson/the-web-is-our-responsibility" title="The Web Is Our Responsibility" target="_blank">The Web Is Our Responsibility</a></strong> from <strong><a href="//www.slideshare.net/sallyjenkinson" target="_blank">Sally Jenkinson</a></strong></div></p>
<ul>
<li>concept keyboards provided touch-based input to BBC Micros back in 1984</li>
<li>symbiotic relationship between technology and experiences</li>
<li>remember it’s as much about people as it is about development</li>
<li>all the roles need to work together
<ul>
<li>e.g. performance cuts through all layers</li>
</ul></li>
<li>responsive design mostly seen to be to do with screen widths</li>
<li>but there’s much more (especially in CSS level 4 draft)
<ul>
<li>whether the device supports hover affordances</li>
<li>the current ambient light level</li>
</ul></li>
<li>invisible requirements
<ul>
<li>the technical choices that we make underpinning everthing</li>
<li>e.g <a href="http://offlinefirst.org/">http://offlinefirst.org/</a></li>
</ul></li>
<li>Open Data Institute guest book
<ul>
<li>iPad with keyboard</li>
<li>can sign in with touch or typing</li>
<li>or can add an existing RFID card (e.g. Oyster or bank card) to check-in in future</li>
</ul></li>
<li><a href="http://www.gehealthcare.com/promo/advseries/adventure_series.html" title="GE Adventure Series » Description and Gallery">GE Healthcare adventure series</a>
<ul>
<li>MRI scanner dressed up as spaceship</li>
<li>children can imagine the spaceship rumbling through space</li>
<li>much less scary</li>
</ul></li>
<li>be aware of the choices we make</li>
<li>try to think beyond ourselves</li>
<li>you are responsible for things you build</li>
<li>if someone presents you with something that you don’t agree with, then question it
<ul>
<li>even if it’s not officially your responsibility</li>
</ul></li>
<li>try and educate people as to why things should be done differently</li>
<li>if you are in a big project that you disagree with, try and make little changes</li>
</ul>
<h3 id="the_web_is8230_read_write">The Web Is… Read/Write</h3>
<p>Owen Gregory, editor <a href="https://twitter.com/FullCreamMilk">@FullCreamMilk</a></p>
<ul>
<li>acts as a conduit between writer and reader</li>
<li>the web has a closer relationship between writers and readers</li>
<li>publishers & editors need to be advocates in their community</li>
<li>jason santamaria: where is the cultural and aesthetic discourse on web design
<ul>
<li>writing is mostly about the new techniques and looking forward</li>
<li>where does a common language for web design discourse start?</li>
</ul></li>
<li>jakob nielsen: we should accept that the web is too fast moving for big picture description</li>
<li>book: nicely said: writing for the web with style and purpose
<ul>
<li>nicole fenton & kate kiefer lee</li>
</ul></li>
<li>Sir Thomas Browne: The Garden of Cyrus
<ul>
<li>drawing parallels between lots of different fields</li>
</ul></li>
<li>W G Sebald: The Rings of Saturn
<ul>
<li>new style of writing, referring to the author</li>
<li>tracking Thomas Browne’s work</li>
</ul></li>
<li>deploying a text can be a continuous process — Mandy Brown
<ul>
<li>comments, talks, reframing, etc.</li>
</ul></li>
</ul>
<h3 id="the_web_is8230_progress">The Web Is… Progress</h3>
<p>Mr Bingo, <a href="https://twitter.com/mr_bingo">@mr_bingo</a></p>
<p>instagram: <a href="http://instagram.com/mr_bingstagram" title="Instagram">mr_bingstagram</a></p>
<ul>
<li>apparently the web is blue…</li>
<li>D&AD brief: put the fun back in to the web</li>
<li>hand-drawn aesthetic — much easier in flash…</li>
<li>2010 selling prints of drawings for £5 each for Haiti earthquake</li>
<li>internet commenting is like toilet graffiti</li>
<li>worried that if I die, when my life flashes before my eyes, all I will see is square pictures of food</li>
<li>weird stock photography… (just watch the talk!)</li>
<li>opened a service for sending people insults on postcards
<ul>
<li><a href="http://www.mr-bingo.org.uk/index.php?/root/hate-mail/">HATE Mail</a> — and now a book</li>
</ul></li>
</ul>
<h3 id="the_web_is8230_progress">The Web Is… Progress</h3>
<p>Brad Frost <a href="https://twitter.com/brad_frost">@brad_frost</a></p>
<ul>
<li>web enabled linking to anything we want (was a radical change…)</li>
<li>open by default</li>
<li>the most sharing community in the world
<ul>
<li>e.g. <a href="http://css-tricks.com/license/">css-tricks license</a></li>
<li>“I want the web to get better and being all Johnny Protective over everything doesn’t get us there”</li>
</ul></li>
<li>pittsburgh food bank
<ul>
<li>designed and built a new web site for them</li>
<li>did the entire process in the open</li>
<li><a href="http://foodbank.bradfrostweb.com/timeline/">http://foodbank.bradfrostweb.com/timeline/</a></li>
</ul></li>
<li>why share?
<ul>
<li>because we can — it’s cheap</li>
<li>but it can be really uncomfortable</li>
<li>other people can contribute</li>
</ul></li>
<li>trying to solve everyone’s problem is in some cases easier to solve just your own
<ul>
<li>an idea can snowball into a plugin just a few hours later</li>
</ul></li>
<li>our first drafts can have their own value
<ul>
<li>in some cases they can have more value than the finished work</li>
</ul></li>
<li>the web is for everyone — but that means all the violence, hate and anger as well…</li>
<li>guardian, bbc and gov.uk designing in the open</li>
<li>other companies and even other countries can use this as a blueprint for their own work</li>
<li>each of us is individual and has unique different experiences</li>
<li>knowledge is an iterative and cumulative process</li>
<li>depending on sharing and combining our different perspectives</li>
<li><a href="http://designopen.org/">designopen.org</a></li>
<li>even if lots of people contribute similar things, they still contribute
<ul>
<li>e.g. 162,000 youtube videos on how to re-wire a plug</li>
</ul></li>
<li>your post might not be the most original, but it might be the one that tips over the scales</li>
<li>it has never been easier in the history of the world to contribute to the knowledge of the world</li>
</ul>
Adam Cohen-Rosehttp://www.blogger.com/profile/12286496556944495325noreply@blogger.com0tag:blogger.com,1999:blog-6382212051821902995.post-32422549082383623652014-10-30T20:45:00.000+00:002014-11-02T11:43:17.240+00:00The Web Is... Day One<p>Another excellent conference from <a href="http://www.craiglockwood.co.uk/" title="The House Of Lockwood">Craig Lockwood</a> — and this is only the first day.</p>
<p>I’m always impressed by the groundedness and open-hearted feeling I get when I attend Craig’s conferences. He curates the speakers not just for their intellectual knowledge and not just for inspiration, but also for their ability to connect to and understand the world and the people in it.</p>
<p>I’m looking forward to tomorrow!</p>
<h3 id="the_web_is8230_knowledge">The Web is… Knowledge</h3>
<p>Christopher Murphy <a href="https://twitter.com/fehler">@fehler</a>, Teaches MFA at Belfast School of Art</p>
<ul>
<li>recommended reading
<ul>
<li><a href="http://www.amazon.co.uk/gp/product/0141045256/ref=as_li_tl?ie=UTF8&camp=1634&creative=19450&creativeASIN=0141045256&linkCode=as2&tag=expandhorizo-21&linkId=K3IFBKTLJMMGO6TS">The Element: Ken Robinson</a></li>
<li><a href="http://www.amazon.co.uk/gp/product/178125091X/ref=as_li_tl?ie=UTF8&camp=1634&creative=19450&creativeASIN=178125091X&linkCode=as2&tag=expandhorizo-21&linkId=GEWAIRAMAHCPIG4X">Mastery: Robert Greene</a>
<ul>
<li>rediscovering the mentor/protege model</li>
</ul></li>
<li><a href="http://www.amazon.co.uk/gp/product/142212312X/ref=as_li_tl?ie=UTF8&camp=1634&creative=19450&creativeASIN=142212312X&linkCode=as2&tag=expandhorizo-21&linkId=PZHTWYLRZIJNVIO6">Managing Oneself: Peter Drucker</a>
<ul>
<li>how you relate to other people in the workplace</li>
</ul></li>
</ul></li>
<li>interaction design course (part of Master in Fine Arts)
<ul>
<li>get started with a github profile</li>
</ul></li>
<li>teaching to see:
<ul>
<li>bauhaus model & visual grammar</li>
<li>point > line > plane</li>
</ul></li>
<li>charlie munger
<ul>
<li>warren buffet’s business partner at Berkshire Hathaway</li>
<li>latticework of mental models</li>
<li>learning new models in related fields</li>
<li>all useful fields to understand interaction design…</li>
</ul></li>
<li>lollapalooza effect
<ul>
<li>power of ideas together is greater than each by themselves</li>
<li>e.g. put a designer & developer together and get more than you would get by themselves</li>
</ul></li>
<li>nuance and human interaction easier to learn from humans</li>
<li>master and apprentice
<ul>
<li>not just a one way relationship</li>
<li>master learns to see the world in a new way with fresh eyes</li>
</ul></li>
<li>apprentice moves on then becomes a journeyman
<ul>
<li>going to different masters</li>
<li>gradually starting to teach others</li>
</ul></li>
<li>ken robinson: have to move to an organic process of education</li>
<li>teach a whole mind:
<ul>
<li>need self-belief, manners, confidence, politeness</li>
<li>as well as skills in business, design, technology, etc</li>
</ul></li>
<li>universities move at a glacial pace
<ul>
<li>takes 5 years to change a curriculum…</li>
</ul></li>
<li>short form courses
<ul>
<li>patterns: josh long</li>
<li>general assembly</li>
</ul></li>
<li>those who can, do; those who <em>care</em> teach</li>
</ul>
<h3 id="the_web_is8230_constant">The Web is… Constant</h3>
<p><em>How do we design for constant change… and not go mad</em></p>
<p>Nathan Ford <a href="https://twitter.com/nathan_ford">@nathan_ford</a>, Monotype, <a href="http://artequalswork.com">http://artequalswork.com</a></p>
<ul>
<li>web design not yet nailed down as a discipline</li>
<li>creating repeated success in a volatile environment</li>
<li>previously worked as Creative Director at Mark Boulton Design
<ul>
<li>these ideas come from that time</li>
</ul></li>
<li>team
<ul>
<li>bring the client into the team</li>
<li>or bring your team into the client</li>
<li>embedding</li>
<li>learn empathy…</li>
</ul></li>
<li>look for a champion on the client side
<ul>
<li>someone who trudges through all the muck</li>
<li>make sure they can involve all the stakeholders</li>
<li>get the problem stakeholders involved as early as possible</li>
</ul></li>
<li>no big reveal — eliminate surprises & blame</li>
<li>wicked problems
<ul>
<li>term from sociology: massive problems that are hard to define and difficult to resolve</li>
<li>web sites are a simpler thing, but their implications often make them behave like a wicked problem</li>
</ul></li>
<li>measure goals by improvement, not completion</li>
<li>when you don’t know, try a lot of things
<ul>
<li>don’t be afraid to throw stuff away</li>
<li>failure is ok, but you must keep learning</li>
</ul></li>
<li>ensure the client writes the user stories
<ul>
<li>can help with a workshop to elucidate</li>
</ul></li>
<li>work in iterations
<ul>
<li>each iteration should include research, design & building</li>
<li>then evaluate and repeat</li>
<li>don’t forget to evaluate…</li>
</ul></li>
<li>always have an available prototype
<ul>
<li>brings the pain of the project earlier</li>
<li>lets them show the working consensus to others</li>
</ul></li>
<li>start with real content
<ul>
<li>if you don’t have any, make it up (NOT lauren ipsum…)</li>
<li>motivates client to actually make their own</li>
</ul></li>
<li>build out grids from content
<ul>
<li>grids within grids</li>
<li>content-based items</li>
<li>no high-level overarching</li>
</ul></li>
<li>choose the right css units
<ul>
<li>percent for scaling</li>
<li>vw & vh for headlines & page framing — relative to the viewport</li>
<li>pixels for media queries — one to one, easier to understand</li>
<li>ems and exes for typography
<ul>
<li>exes work better with newer web fonts</li>
<li>work on x-height</li>
</ul></li>
</ul></li>
<li>let things get big: but limit on content items</li>
<li>example: typekit blog — building out a design based on the Chapparal typeface</li>
<li>also leads to simpler testing
<ul>
<li>but still need to test on devices</li>
<li>especially type sizes — can be surprising on actual hardware…</li>
</ul></li>
</ul>
<h3 id="the_web_is8230_everywhere">The Web is… Everywhere</h3>
<p><em>What we can learn from console browsers</em></p>
<p>Anna Debenham <a href="https://twitter.com/anna_debenham">@anna_debenham</a>, <a href="http://console.maban.co.uk">http://console.maban.co.uk</a></p>
<ul>
<li>new style of inputs: gestures & voice</li>
<li>think about small screen and a very big screen</li>
<li>everywhere you can stick a screen, eventually there will be a browser</li>
<li>“don’t fall prey to convenience of device silos” cameron moll</li>
<li>console browser users are (currently) likely to be younger and lower income</li>
<li>consoles and web TVs have low memory</li>
<li>performance is crucial</li>
<li>the xbox browser can pretend to be a windows mobile device
<ul>
<li>probably added to allow simpler interfaces</li>
</ul></li>
<li>large screen doesn’t always mean more pixels…</li>
<li>handheld consoles often have very wide screens
<ul>
<li>often misidentified to show full fat design</li>
<li>should probably have a simpler design</li>
</ul></li>
<li>the PS Vita includes Amazon’s Kindle Fire Silk UA in its agent string…</li>
<li>dual screens often have odd behaviour
<ul>
<li>Nintendo 3DS has two screens with different widths…</li>
</ul></li>
<li>Wii U aiming to be a full entertainment system
<ul>
<li>four different ways to zoom</li>
<li>really important for viewing web on TV when text is often too small</li>
<li>supports various presentation modes
<ul>
<li>turning mirroring on and off</li>
<li>draw curtains, prepare then reveal</li>
<li>play video on main screen, while continue to browse</li>
</ul></li>
<li>can use multiple wiimotes as pointers</li>
</ul></li>
<li>similar for xbox one
<ul>
<li>using xbox smartglass app</li>
<li>supports split screen: game/tv + browser</li>
<li>voice and gesture works really well</li>
</ul></li>
<li>vimeo couch mode:
<ul>
<li>user choice for big screen support</li>
</ul></li>
<li>microsoft’s design for xbox and windows phone is truly scalable</li>
<li>x-webkit-speech — for speech synthesis
<ul>
<li>currently Google Chome only…</li>
</ul></li>
<li>microsoft has a design guide for kinect
<ul>
<li>really good read to understand gesture design</li>
</ul></li>
<li>30% of people this year used a smart TV to browse the web</li>
</ul>
<h3 id="the_web_is8230_playful">The Web Is… Playful</h3>
<p>See Lee-Delisle <a href="https://twitter.com/seb_ly">@seb_ly</a></p>
<ul>
<li><a href="http://lazerarcade.com">http://lazerarcade.com</a>
<ul>
<li>used microphones to detect nerf bullets hitting a screen</li>
</ul></li>
<li>smashingconf opening animation
<ul>
<li>laser light show mapped onto a dome & pipe organ…</li>
<li>definitely worth watching the video</li>
</ul></li>
<li>lunar trails
<ul>
<li><a href="http://moonlander.seb.ly">http://moonlander.seb.ly</a></li>
<li>records its trails into moonlander.seb.ly/viewer</li>
<li>then built a physical arcade machine</li>
<li>full screen browser, controlled by an arduino pretending to be a keyboard</li>
<li>all linked up to a giant wall-hanging plotter</li>
<li>based on polar plotter, but using DC servos rather than stepper motors</li>
</ul></li>
<li>playfulness on the web has died a little bit
<ul>
<li>the little flash games got taken over by the marketing agencies</li>
<li>became viral campaigns that nobody wanted</li>
</ul></li>
<li>internet of things — nobody knows what it’s for yet
<ul>
<li>much more space for being playful :-)</li>
</ul></li>
</ul>
<h3 id="the_web_is8230_in_the_hands_of_the_97ers">The Web Is… In The Hands of the 97ers</h3>
<p>Emma Mulqueeny, Founder of Rewired State and Young Rewired State <a href="http://twitter.com/hubmum">@hubmum</a></p>
<ul>
<li>people born in 1997 and later, grew up with social media</li>
<li>those born at the beginning have no leadership</li>
<li>Ivan Illich: deschooling society
<ul>
<li>“educational webs … transform each moment … into learning, sharing & caring”</li>
</ul></li>
<li>the 97ers are already doing peer-to-peer learning</li>
<li>the discussion about teaching how to code is almost irrelevant
<ul>
<li>the teachers won’t be teaching how to learn line by line</li>
<li>role of all-knowing teacher will become irrelevant</li>
<li>much about flipping the classroom and enabling the teacher as guide</li>
</ul></li>
<li>refugees united: dealing with families split up as they crossed the Somali > Kenya border
<ul>
<li>refugees would have similar names, might lie as they’re scared etc</li>
<li>YRSer Kevin figured out that storytelling was important</li>
<li>designed service to speak a local story into the phone</li>
<li>then find stories that roughly match</li>
<li>reunited families went from 3% to over 79%</li>
</ul></li>
<li>identity is crucial to 97ers
<ul>
<li>their stories (not their names) are their identifier</li>
<li>tagged photos</li>
<li>peer verification</li>
</ul></li>
<li>try not to police community as that affects identity</li>
<li>have a very early understanding of how to influence community
<ul>
<li>they get immediate feedback from youtube/facebook/etc</li>
<li>have figured out how to tweak and skew their message until it works</li>
<li>can be quite an arrogant generation — they know how to get those likes…</li>
</ul></li>
<li>going into the world
<ul>
<li>the most unsafe thing they could do would be to work for a big organisation</li>
<li>self-employment is much more attractive — feels safer</li>
<li>not about making lots of money — more about long-term employment</li>
</ul></li>
<li>the Wi-Fi is the bedrock of their needs
<ul>
<li>it’s the gateway to their community and therefore their support network</li>
</ul></li>
<li>they can’t engage with politics until 18 — it’s too late…
<ul>
<li>they engage with policies rather than parties</li>
</ul></li>
</ul>
<h3 id="the_web_is8230_all_consuming">The Web Is… All Consuming</h3>
<p>Keir Whitaker <a href="https://twitter.com/keirwhitaker">@keirwhitaker</a>, Shopify</p>
<p>Best to watch this when the video comes out — I couldn’t do it justice with notes.</p>
<ul>
<li>daily todo: 1 big thing, 3 medium things, some small things</li>
</ul>
<h3 id="the_web_is8230_made_of_links">The Web Is… Made Of Links</h3>
<p>Phil Hawksworth, R/GA <a href="https://twitter.com/philhawksworth">@philhawksworth</a></p>
<script async class="speakerdeck-embed" data-id="db6b3200426e0132aca556294df362d1" data-ratio="1.77777777777778" src="//speakerdeck.com/assets/embed.js"></script>
<ul>
<li>Paul Downey’s 2008 “uberdoodle”: The URL is the Thing</li>
<li>Ted Nelson: coined the terms hypertext, hypermedia & transclusion (and teledildonics…)</li>
<li>you can link to anything from anywhere — the whole becomes more than the sum of its parts</li>
<li>:// => “double-meh”</li>
<li>Paul Downey: The Web is Agreement</li>
<li>browsers are very liberal in what they accept</li>
<li>browsers starting to obscure URLs
<ul>
<li>mobile Safari already hides everything but the host</li>
<li>Chrome Canary doing similar thing</li>
<li>Jake Archibald: the URL is the share button of the web</li>
</ul></li>
<li>taco bell #onlyintheapp — no longer have any content on their website
<ul>
<li>and only with access to lots of permissions on your phone</li>
</ul></li>
<li>google experimented with different shades of blue for links (#41shades)
<ul>
<li>apparently the change made about $200m difference</li>
<li>but they lost a designer who said he couldn’t argue for all his design decisions</li>
</ul></li>
<li>this is for everyone (with javascript enabled) — Dan Williams</li>
<li>more than 60% of population of India & China is still offline
<ul>
<li>we will need to support them…</li>
</ul></li>
</ul>
<h3 id="unfinished_business_geek_mental_help_the_web_is">Unfinished Business Geek Mental Help @ The Web Is</h3>
<p>An enormously important discussion, started by <a href="http://stuffandnonsense.co.uk/blog/about/announcing-geek-mental-help-week" title="Announcing Geek Mental Help Week — Stuff & Nonsense, And All That Malarkey">Andy Clarke</a> a few days ago.</p>
<p>The discussion was recorded as an episode of <a href="http://unfinished.bz/" title="Andrew Clarke and guests have Unfinished Business">Unfinished Business</a> and included <a href="https://twitter.com/fehler">Chris Murphy</a>, <a href="https://twitter.com/cole007">Cole Henley</a>, <a href="https://twitter.com/RellyAB">Relly Annett-Baker</a> and <a href="https://twitter.com/Pumpkinsouper">@pumpkinsouper</a>.</p>
<p>There are many more articles to be read at <a href="http://geekmentalhelp.com/">http://geekmentalhelp.com/</a> — go and read, even if you think you don’t need to.</p>
<p>I think the most crucial advice I heard, was “keep talking” — this discussion is not over…</p>
Adam Cohen-Rosehttp://www.blogger.com/profile/12286496556944495325noreply@blogger.com0tag:blogger.com,1999:blog-6382212051821902995.post-67863889462122257982014-09-29T13:11:00.001+01:002014-09-29T13:11:57.832+01:00BarCampLondon X<p>So that was a pretty busy weekend! Thank you to all the organisers and the sponsors for yet another amazing BarCamp London.</p>
<p>If you don’t know what a BarCamp is, go read about <a href="http://ten.barcamplondon.org/about/" title="About BarCamp :: BarCamp London X">how it works</a>, and then come back to read my notes on some of the sessions I attended.</p>
<p>Here’s a picture of all the sessions that the attendees ran over the weekend (that’s a lot!) and it doesn’t list all the random conversations, games and general meeting people that happened outside of the posted schedule.</p>
<iframe src="https://www.flickr.com/photos/adamcohenrose/15390572145/in/pool-barcamplondon/player/" width="500" height="192" frameborder="0" allowfullscreen webkitallowfullscreen mozallowfullscreen oallowfullscreen msallowfullscreen></iframe>
<h3 id="devoxx4kids">devoxx4kids</h3>
<p>Dan Hardiker <a href="https://twitter.com/dhardiker">@dhardiker</a></p>
<p><a href="http://www.devoxx4kids.org/">http://www.devoxx4kids.org/</a></p>
<ul>
<li>one day workshop</li>
<li>aimed at age 8-16
<ul>
<li>8-9 year olds treated a bit differently — they need a bit more guidance</li>
</ul></li>
<li>with specific goals
<ul>
<li>make a robot</li>
<li>iOS game development</li>
</ul></li>
<li>want to say “I made that”</li>
<li>one child been building iOS apps since age 6:
<ul>
<li><a href="http://geni.us/1xak">spikeball attack</a> & <a href="http://geni.us/2QgE">pet noises</a></li>
</ul></li>
<li>worldwide</li>
<li>dominican republic had > 1000 kids over 2 days</li>
<li>> 30% people who come are girls/women</li>
<li>generally 5 or 6 tracks selected from:
<ul>
<li><a href="https://github.com/devoxx4kids/materials/tree/master/workshops/minecraft">minecraft modding</a></li>
<li>scratch</li>
<li>python</li>
<li>lego mindstorms</li>
<li>raspberry pi</li>
<li>arduino</li>
<li>greenfoot</li>
<li>alice</li>
<li>kojo</li>
<li>iOS</li>
<li>mathbreakers</li>
<li>NAO robot</li>
</ul></li>
<li>4 sessions in a day</li>
<li>also go to big conferences and run devoxx4kids for the adults</li>
<li>first London event in June
<ul>
<li>got 95% attendance from people who signed up!!</li>
<li>4 x 1hr sessions</li>
<li>40 volunteers</li>
<li>had an 11 year-old fly over on his own (met his dad at airport) to run a group of 20 x 11-15 year-olds how to do minecraft modding</li>
<li>he also did a <a href="https://www.youtube.com/watch?v=__2YXaj-LFc">closing keynote</a></li>
</ul></li>
<li>had the creator of <a href="http://www.greenfoot.org/door" title="Greenfoot">greenfoot</a> teaching how to build a minesweeper game</li>
<li>have a load of volunteers available to help children build stuff</li>
<li>have a show and tell at the end of the day</li>
<li>mindstorms:
<ul>
<li>build the main wheelbase</li>
<li>children add grab arms to grab a ball</li>
<li>get children to control by hand first</li>
<li>program the same steps (5 steps forward etc)</li>
<li>add touch & distance sensors</li>
<li>program to grab without hard-wiring distance</li>
</ul></li>
</ul>
<h3 id="how_to_start_a_hackerspace">how to start a hackerspace</h3>
<p>Matt Copperwaite <a href="https://twitter.com/mattcopp">@mattcopp</a></p>
<ul>
<li>start a company - level of protection
<ul>
<li>limited company - need 3 people, can then state not for profit</li>
<li>community interest - lots of paperwork</li>
</ul></li>
<li>business bank account
<ul>
<li>barclays have APIs, £50 cashback at the time…</li>
</ul></li>
<li>insurance: paid £300/year
<ul>
<li>recommendation from London Hackspace</li>
<li><a href="https://www.gov.uk/government/organisations/department-for-business-innovation-skills">BIS</a> will issue advice on this shortly</li>
</ul></li>
<li>keep trustees involved
<ul>
<li>raise issues that split them: colour of the logo…!</li>
</ul></li>
<li>system designed so you can cancel the membership at any point</li>
<li>get people signed up with open days</li>
<li>people really like laser cutters!</li>
</ul>
<p>See current UK Hackspaces at:</p>
<ul>
<li><a href="http://www.hackspace.org.uk/view/Main_Page">http://www.hackspace.org.uk/view/Main_Page</a></li>
<li><a href="http://hackerspaces.org/wiki/United_Kingdom">http://hackerspaces.org/wiki/United_Kingdom</a></li>
</ul>
<h3 id="kinect_v2">kinect v2</h3>
<p>Mike Taulty <a href="https://twitter.com/mtaulty">@mtaulty</a></p>
<ul>
<li>v2 is £159 (cheaper than v1 at £199!)</li>
<li>HD video</li>
<li>infrared</li>
<li>depth sensor</li>
<li>can track up to 6 bodies (25 skeletal joints)</li>
<li>tracks depth from 0.5m to about 8m</li>
<li>infrared & depth is much lower res: 512 x 424 pixels</li>
<li>body index separates pixels of different bodies
<ul>
<li>lets you do green screen really easily</li>
</ul></li>
<li>MS’s SDK is Windows only (doesn’t work with Windows VMs since it needs USB 3 & DirectX 11)</li>
<li>but <a href="https://github.com/OpenKinect/libfreenect2">libfreenect2</a> is an alternative open source driver for Mac/Linux</li>
</ul>
<h3 id="mobile_network_in_a_field">mobile network in a field</h3>
<p>Sam Machin <a href="https://twitter.com/sammachin">@sammachin</a> and Kevin Prince <a href="https://twitter.com/kevinprince">@kevinprince</a></p>
<p><a href="https://fieldphone.org">https://fieldphone.org</a> at <a href="https://www.emfcamp.org/">EMF Camp 2014</a></p>
<ul>
<li>EMF Camp was c.1200 people</li>
<li>runs every two years</li>
<li>“a very british burning man” or “glastonbury for nerds”</li>
<li>aiming for phone calls but not data
<ul>
<li>mainly because of there was already fast wifi</li>
</ul></li>
<li>just three base stations, so could simply architecture a fair bit…</li>
<li>using OpenBTS, Asterisk + Twilio & Heroku</li>
<li>Asterisk server sat in the on-site hosting centre
<ul>
<li>a refrigerated shipping container with servers on pallets</li>
</ul></li>
<li>recreated phone supply chain by using Amazon & a tent
<ul>
<li>bought some Amazon burner phones on 30 day return…</li>
</ul></li>
<li>SIMs were the hardest things to sort
<ul>
<li>wanted to play nicely with other networks</li>
<li>didn’t want people on real networks to connect to camp network</li>
<li>SIMs are pretty expensive: 50p to £1 each</li>
<li>hard to order in low quantities</li>
</ul></li>
<li>bought OpenBTS boxes from <a href="http://www.rangenetworks.com/">RangeNetworks</a>
<ul>
<li>startup in SF</li>
<li>mostly selling to small Pacific islands</li>
<li>massively cheaper than normal kit (c.$5K)</li>
<li>also put one in a search & rescue helicopter in Iceland</li>
<li>connects to someone’s phone as it flies over</li>
<li>locates to area of a football field</li>
<li>allows helicopter to call phone!</li>
</ul></li>
<li>need spectrum to run in the UK…
<ul>
<li>O2 had some they had forgotten about ;-)</li>
<li>concurrent spectrum license: shared by 15 companies</li>
<li>better in other countries:
<ul>
<li>Netherlands: just need landowner permission</li>
<li>Germany: just need 30 days notice</li>
<li>Burning Man: use DARPA military spectrum not in use in the middle of the Nevada desert</li>
</ul></li>
</ul></li>
<li>antennas make a big difference
<ul>
<li>need a proper site survey</li>
</ul></li>
<li>EMF Camp provide about 40 routers around the site
<ul>
<li>set up in locked portaloos! Datenklos (term from CCC)</li>
</ul></li>
<li>created everybody’s accounts ahead of time
<ul>
<li>needed to map phone numbers to IMSIs</li>
<li>got people to type in last 4 digits of SIM</li>
</ul></li>
<li>set up voicemail using twilio to record and forward via email</li>
<li>SMSs are harder if you need to store & forward</li>
<li>dealt with inbound calls by having a single central public number
<ul>
<li>call it and then dial 5 digit account number</li>
</ul></li>
<li>added outgoing calls as well (via Twilio)
<ul>
<li>limited to c.3 minutes</li>
<li>but even so fairly cheap</li>
</ul></li>
<li>also set up a few group rooms to see if people used them</li>
<li>stats:
<ul>
<li>~200 SIMs handed out</li>
<li>~100 attached users at any time</li>
<li>close to 100% coverage</li>
<li>about 1800 minutes of twilio</li>
</ul></li>
<li>ideas for next time:
<ul>
<li>phone boxes</li>
<li>POTS to tent: turn up and plug in a BT phone!</li>
</ul></li>
</ul>
<h3 id="managing_css">managing CSS</h3>
<p>Ben Scott <a href="https://twitter.com/BPScott">@BPScott</a></p>
<p><a href="http://reload.me.uk/talk-structuring-css">http://reload.me.uk/talk-structuring-css</a></p>
<ul>
<li>people keep on writing new CSS</li>
<li>not obvious how and where things are used</li>
<li>no confidence in what you can change and if it will break anything</li>
<li>build smaller isolated things
<ul>
<li>single responsibilities</li>
</ul></li>
</ul>
<h4 id="structure">structure</h4>
<ul>
<li>components
<ul>
<li>domain-specific objects</li>
<li>text next to image in a particular way</li>
</ul></li>
<li>macro layout
<ul>
<li>grid system</li>
<li>layout of components within a page</li>
</ul></li>
<li>theming
<ul>
<li>colouring of components</li>
</ul></li>
</ul>
<h4 id="resulting_composition">resulting composition</h4>
<ul>
<li>this thing, here on the page, in this colour</li>
<li>mobile first & extend from core functionality
<ul>
<li>much easier to reason about adding in CSS</li>
<li>harder to take things out</li>
</ul></li>
<li>use additional classes to toggle additional behaviour</li>
<li><a href="http://bradfrostweb.com/blog/post/atomic-web-design/" title="Atomic Design | Brad Frost Web">Brad Frost: atomic design</a>
<ul>
<li>pages are accidents — what happens when you put components in a particular order</li>
</ul></li>
<li>create a styleguide page
<ul>
<li>component, layout variations</li>
<li>automatically generated from HTML partials in application</li>
<li>HTML partials are essentially custom tags</li>
</ul></li>
</ul>
<h4 id="tips">tips</h4>
<ul>
<li>avoid using IDs in CSS selectors</li>
<li>try to keep selectors to max 3 levels</li>
<li>naming convention: <a href="https://bem.info/method/definitions/">BEM</a>
<ul>
<li>double underscore = within</li>
<li>double hyphen = modifier</li>
</ul></li>
</ul>
<h4 id="problems_breaking_up">problems & breaking up</h4>
<ul>
<li>mobile first, but oldIE needs to be desktop first as it doesn’t understand media queries</li>
<li>could use respond.js but takes a lot longer to load</li>
<li>created <a href="https://github.com/BPScott/breakup">Breakup</a>
<ul>
<li>SASS/Compass plugin</li>
<li>generates different CSS files from the same SASS input</li>
<li>according to directives in top-level</li>
<li>lets you avoid wrapping specific elements in media queries</li>
</ul></li>
</ul>
<h3 id="real_life_brain_training">real life brain training</h3>
<p>SenseLabs <a href="http://getversus.com">http://getversus.com</a></p>
<ul>
<li>split activity into different frequency bands = EEG</li>
<li>delta < 4 KHz
<ul>
<li>babies have this all the time</li>
</ul></li>
<li>theta 4 - 7 KHz</li>
<li>alpha 7 - 14 KHz</li>
<li>beta 15 - 30 KHz
<ul>
<li>focused</li>
</ul></li>
<li>gamma 30 - 100 KHz
<ul>
<li>complex active stuff</li>
</ul></li>
<li>other stuff:
<ul>
<li>Mu (8 - 12 KHz)</li>
<li>SMR (13 - 15 KHz)</li>
</ul></li>
<li>neurofeedback
<ul>
<li>constant feedback, close to realtime (~200ms)</li>
<li>useful to use more than one sense to enable different people to relate to it better</li>
</ul></li>
<li>current system has five measurement points</li>
<li>Chief Science Office is Leslie Sherlin</li>
</ul>
<h4 id="training">training</h4>
<ul>
<li>focus:
<ul>
<li>augment low beta</li>
<li>inhibit theta & alpha</li>
</ul></li>
<li>can train stress response too</li>
<li>sports consistency</li>
<li>exam preparation</li>
</ul>
<h4 id="problems">problems</h4>
<ul>
<li>QA engineer was overusing focus training</li>
<li>had problems sleeping…</li>
</ul>
<h4 id="uses_not_scientifically_proven">uses (not scientifically proven)</h4>
<ul>
<li>worked with Felix Baumgartner</li>
<li>tennis players</li>
<li>reported to alleviate long term ADHD…</li>
<li>improved sleep patterns amongst developers…</li>
</ul>
<h4 id="available_systems">available systems</h4>
<ul>
<li>medical
<ul>
<li>existing $10K for bare minimum</li>
<li>require expensive software, only run on Windows XP</li>
</ul></li>
<li>kickstarter systems
<ul>
<li>cool, but not much neuroscientist input</li>
<li>not so accurate or useful</li>
</ul></li>
<li>versus
<ul>
<li>looks like headphones</li>
<li>rebaseline every time you put it on</li>
<li>connects over bluetooth to iPad</li>
<li>uses dry spikes sensors that contact scalp</li>
<li>first consumer product $750, aiming for $500</li>
</ul></li>
</ul>
<h3 id="toys_gadgets">toys & gadgets</h3>
<ul>
<li><a href="https://www.thalmic.com/en/myo/">thalmic myo</a>
<ul>
<li>bluetooth armband picking up arm and hand actions</li>
</ul></li>
<li>oculus rift
<ul>
<li>now integrated with LEAP Motion on the front</li>
<li><a href="https://www.leapmotion.com/product/vr">https://www.leapmotion.com/product/vr</a></li>
</ul></li>
<li><a href="http://nfcring.com/">NFC ring</a>
<ul>
<li>lower range than usual</li>
<li>internal and external tags (private & public?)</li>
</ul></li>
<li>Google Glass</li>
<li>estimote beacons
<ul>
<li>use at least three to get indoor location fixes</li>
<li>google have set up mountain view…</li>
</ul></li>
<li>chromecast
<ul>
<li>don’t bother with a digital picture frame — just get a cheap TV and one of these</li>
<li>great for broadcasting any media around the house</li>
</ul></li>
<li><a href="http://www.securifi.com/almondplus">almond+</a> touchscreen router & home security</li>
<li>3D printer
<ul>
<li>check out 3d printer subreddit</li>
<li>solidoodle</li>
<li>arduino will be launching one v. soon</li>
</ul></li>
<li><a href="https://www.kickstarter.com/projects/nerotrigger/miops-smartphone-controllable-high-speed-camera-tr">MIOPS camera trigger</a>
<ul>
<li>plugs in to flash hotshoe</li>
<li>light sensor</li>
<li>laser sensor</li>
</ul></li>
</ul>
<h3 id="scaling_agile">scaling agile</h3>
<p>Matt Walton, Head of Product @ FutureLearn <a href="https://twitter.com/matt_walton">@matt_walton</a></p>
<h4 id="spotify">spotify</h4>
<ul>
<li>have documented a lot of their processes</li>
<li>think it, build it, ship it, tweak it</li>
<li>now about 2000 people</li>
<li>squads consist of engineers, designers & agile coaches</li>
<li>autonomous teams with long running missions</li>
<li><a href="https://labs.spotify.com/2014/03/27/spotify-engineering-culture-part-1/">spotify engineering culture</a></li>
<li>“agile at scale requires trust at scale”</li>
</ul>
<h4 id="gds">GDS</h4>
<ul>
<li>lots of information radiators</li>
<li>product roadmap split into team “swimlanes”</li>
<li>have a scrum of scrums</li>
</ul>
<h4 id="songkick">songkick</h4>
<ul>
<li>similar teams</li>
<li>each team needs:
<ul>
<li>product management</li>
<li>design lead</li>
<li>tech lead</li>
</ul></li>
<li>how to organise a roadmap
<ul>
<li>KIPs broken into themes</li>
<li>time box themes</li>
<li>agree measurements</li>
<li>form autonomous team</li>
</ul></li>
<li>lean analytics (book)
<ul>
<li>ratio or rate, not a total number</li>
</ul></li>
<li>business focussed aims:
<ul>
<li>if … then … because</li>
<li>based on lean analytics experiments</li>
</ul></li>
<li>two backlogs: separate “hygiene”
<ul>
<li>then add 70% valid features, 30% bugs, tech support to each iteration</li>
</ul></li>
</ul>
<h4 id="futurelearn">futurelearn</h4>
<ul>
<li>product strategy themed by vision areas</li>
<li>each sprint split by % of work for BAU, products, etc</li>
<li>standups and retrospectives still whole team to encourage community</li>
<li>though work done in smaller project teams</li>
</ul>
<h4 id="conclusion">conclusion</h4>
<ul>
<li>share vision, mission & values</li>
<li>give autonomy and create community</li>
<li>rhythm & reflection</li>
</ul>
Adam Cohen-Rosehttp://www.blogger.com/profile/12286496556944495325noreply@blogger.com0Microsoft Offices, Victoria, UK51.497061881020727 -0.1402741670608520551.496752881020726 -0.14090466706085206 51.497370881020728 -0.13964366706085204tag:blogger.com,1999:blog-6382212051821902995.post-15754987380629019862014-09-29T10:08:00.001+01:002014-09-29T10:08:45.041+01:00MomoLondon: Demo Night 2014<p>Amazingly enough this demo night finished on time and even a little bit early. Thanks to <a href="https://twitter.com/jewl">Julia Shalet</a> for keeping things running smoothly on the night and <a href="https://twitter.com/jorabin">Jo Rabin</a> too for the varied selection of demos — lots of great ideas.</p>
<p>Pictures and more commentary on the <a href="http://www.mobilemonday.org.uk/2014/09/what-happened-at-demo-night-16th.html" title="Mobile Monday London: What happened at Demo Night, 16th September 2014">Mobile Monday Blog</a>.</p>
<h3 id="5_tiles">5 Tiles</h3>
<p><a href="https://play.google.com/store/apps/details?id=touchKeyboard.five">Android keyboard app</a></p>
<p>Previous demo night success</p>
<ul>
<li><a href="http://www.christianlindholm.com/christianlindholm/about.html">Christian Lindholm</a> now an advisor & investor</li>
<li>available on Android Wear (Samsung Gear)</li>
<li>soon available on iOS</li>
</ul>
<h3 id="grabyo">Grabyo</h3>
<p>Benjamin Bourdin, <a href="http://grabyo.com">http://grabyo.com</a></p>
<ul>
<li>realtime video sharing</li>
<li>get any IP feed, apply title, edit</li>
<li>save & share using twitter, facebook, ooyala, brightcove etc</li>
<li>monetize through in-stream ads</li>
<li>initial customers are broadcasters</li>
<li>done deals with ITV & Sky Sports</li>
<li>also did wimbledon & big brother</li>
<li>also have a consumer platform: if a broadcaster wants to get people involved in sharing content</li>
</ul>
<h3 id="good_food_talks">Good Food Talks</h3>
<p>Matt Wadsworth, <a href="http://goodfoodtalks.com">http://goodfoodtalks.com</a></p>
<ul>
<li>web app to let visually impaired people read restaurant menus</li>
<li>a very few menus offer braille but only 1% of visually impaired people can read braille</li>
<li>surveyed 5000 people — main complaint was difficult navigation</li>
<li>web app has simple navigation
<ul>
<li>search/near me > restaurant name > menu</li>
</ul></li>
<li>free for users</li>
<li>various ways of getting data in
<ul>
<li>restaurants pay for input</li>
<li>API ingest, full service, etc</li>
</ul></li>
<li>commercial for just over a year</li>
<li>400 venues</li>
<li>biggest so far is Carluccio’s, then Pret</li>
</ul>
<h3 id="swytch">Swytch</h3>
<p>Chris Michael, CEO, <a href="http://www.swytch.com/">http://www.swytch.com/</a></p>
<ul>
<li>additional mobile numbers on your phone</li>
<li>just closing alpha tester list</li>
<li>free credits to alpha testers</li>
<li>only service that allows you to have multiple UK mobile numbers on your phone</li>
<li>aiming for worldwide too</li>
</ul>
<h3 id="quiztix">QuizTix</h3>
<p>Ian Masters & Albert Marshall, <a href="http://quiztix.co/">http://quiztix.co/</a></p>
<ul>
<li>mobile quiz games</li>
<li>opt-in adverts for rewards</li>
<li>all four versions are available on <a href="http://geni.us/quiztix">iOS</a>, <a href="https://play.google.com/store/search?q=pub:QuizTix">Google</a> & <a href="http://j.mp/quiztix-amazon" title="Amazon.com: QuizTix: Apps & Games">Amazon</a>
<ul>
<li>movies, pop, world football, video games</li>
</ul></li>
<li>targeting around existing passions</li>
<li>also want to target venues with seats</li>
</ul>
<h3 id="mylo">Mylo</h3>
<p>Martin Sandstrom & Mark Lee, <a href="http://mylo-app.com/">http://mylo-app.com/</a></p>
<ul>
<li>split your bill when you live in a house share</li>
<li>direct connection to various providers
<ul>
<li>energy, TV, phone, etc</li>
</ul></li>
<li>push notifications to other housemates</li>
<li>settle bill with paypal (peer to peer is free)</li>
<li>no business model at moment
<ul>
<li>aiming for future paid features</li>
</ul></li>
<li>aiming to attract lots of users first…</li>
<li>app available for <a href="http://geni.us/yR8">iOS</a> and <a href="https://play.google.com/store/apps/details?id=com.myloapp.cordova">Android</a></li>
</ul>
<h3 id="viewmaker">Viewmaker</h3>
<p>Douglas Robb, <a href="http://www.scramboo.com/">http://www.scramboo.com/</a></p>
<ul>
<li>location-enabled augmented reality</li>
<li><a href="https://play.google.com/store/apps/details?id=com.scramboo.viewmaker&hl=en">Android</a> & <a href="http://geni.us/scrambooviewmaker">iOS</a> apps, CMS for template-based content</li>
<li>content discovery & engagement</li>
<li>can control timing of content as well</li>
<li>also support image-recognition-based AR</li>
<li>first commercial partner is Jockey Club</li>
<li>prototype app for Sandown Race Course</li>
<li>involving novice race-goers in the racing</li>
<li>planning to roll out to other Jockey Club venues</li>
</ul>
<h3 id="pronto">Pronto</h3>
<p>James Roy Poulter, <a href="https://www.prontoapp.it/">https://www.prontoapp.it/</a></p>
<ul>
<li>food to wherever you are</li>
<li>don’t need an address</li>
<li>only get a choice of four options (different each day)</li>
<li>authenticate through nexmo API by voice call</li>
<li>credit card payments only</li>
<li>launched 100 days ago in Trento, Italy</li>
<li>initially <a href="http://geni.us/prontoios">iOS</a> only, then <a href="https://play.google.com/store/apps/details?id=com.prontoapp">Android</a>, + Windows coming next week</li>
<li>launching next week in London (now available <a href="https://www.prontoapp.it/#/delivery-info">in the City</a>)</li>
<li>won an accelerator in Italy</li>
<li>worked with restaurants in Italy, but difficult for food in 10 minutes</li>
<li>aiming to get own centralized kitchen as margins are incredible</li>
<li>also get drivers — performance based pay</li>
<li>but made easier with centralized kitchen with limited delivery range</li>
</ul>
<h3 id="adsy">Adsy</h3>
<p>Frederick Tubiermont, <a href="http://www.adsy.me/">http://www.adsy.me/</a></p>
<ul>
<li>create mobile web apps on mobile for mobile</li>
<li>can now create apps on desktop too</li>
<li>web apps are square shaped</li>
<li>magic touch swipe to choose link destination
<ul>
<li>includes email, telephone</li>
</ul></li>
<li>can embed videos, twitter feeds, etc</li>
<li>can embed adsy apps in web pages or just view on mobile</li>
<li>use case:
<ul>
<li>kids & teens making a web app about a concert during a concert</li>
<li>then sharing the evolving content</li>
</ul></li>
<li>meant to create snackable content</li>
<li>will announce a product based on the platform in 2-3 weeks</li>
</ul>
<h3 id="ifs">IFS</h3>
<p>Matthew Bridge, <a href="http://www.ifsworld.com/en/">http://www.ifsworld.com/en/</a></p>
<ul>
<li>business critical messages to smart watches</li>
<li>useful feature: view on device — opens up more detail on the phone through quick selection on watch</li>
<li>driven from enterprise resource planning</li>
<li>staff can subscribe to specific notifications</li>
</ul>
<h3 id="opentrv">OpenTRV</h3>
<p>Mark Hill and Damon Hart-Davis, <a href="http://opentrv.org.uk/">http://opentrv.org.uk/</a></p>
<ul>
<li>60% of your energy and 20% of UK emissions flow through TRVs</li>
<li>50% of that energy is wasted</li>
<li>one thermostat usually controls whole house</li>
<li>target price £10 per radiator: save £300 in the first year</li>
<li>production samples coming mid-November</li>
<li>hotels losing £50 per room per year on heating bills</li>
</ul>
Adam Cohen-Rosehttp://www.blogger.com/profile/12286496556944495325noreply@blogger.com0tag:blogger.com,1999:blog-6382212051821902995.post-69243277539115689732014-05-15T22:48:00.000+01:002014-05-15T22:48:09.069+01:00Kidcrafters – a day of talks by parents for parents<p>This weekend I went to a different kind of conference — not a technology one, but a parenting one (though with some technology involved!).</p>
<p>The conference was <a href="http://www.kidcrafters.org.uk/">Kidcrafters</a> — a day of talks by parents for parents, held at the Royal Institution in London (the same place as the Christmas Lectures).</p>
<p>The whole conference was videoed and is <a href="https://www.youtube.com/watch?v=yIPEA8_PgUk">available on YouTube here</a>, but here’s my notes and impressions in the hope that someone finds them useful.</p>
<p>The first speaker ran an exercise that reminded me of a quote from Francis Bacon:</p>
<blockquote>
<p>Read not to contradict and confute; nor to believe and take for granted; nor to find talk and discourse; but to weigh and consider. Some books are to be tasted, others to be swallowed, and some few to be chewed and digested: that is, some books are to be read only in parts, others to be read, but not curiously, and some few to be read wholly, and with diligence and attention</p>
</blockquote>
<p>The conference felt like a day to weigh and consider — lots of different viewpoints, some contradictory, some provoking, mostly inspiring and all worthy of attention.</p>
<p>For the whole thing to have been organised from scratch in a couple of months is little short of astounding… Congratulations and many thanks to Nick Corston and his team of incredible hard-working volunteers.</p>
<h3 id="raising_braves_education_for_a_tricky_world">Raising Braves: Education for a tricky world</h3>
<p><em>Professor Guy Claxton</em>, Centre for Real-World Learning at the University of Winchester <a href="mailto:guy.claxton@winchester.ac.uk">guy.claxton@winchester.ac.uk</a></p>
<ul>
<li>thinking on your feet - flounder intelligently</li>
<li>important both for university & google interviews…</li>
<li>how to prepare for this?</li>
<li>learn how to flourish when in difficulty</li>
<li>John Holt: love learning so well, that they will be able to learn whatever comes up</li>
<li>Jean Piaget: intelligence = knowing what to do when you don’t know what to do</li>
<li>one of the best ways to happiness: being engaged productively with something challenging and making progress with it
<ul>
<li>being in flow</li>
</ul></li>
<li><a href="http://icould.com">http://icould.com</a> - short presentations on how people found what was interesting for them</li>
<li>being venturesome: being willing to try something that you’ll be crap at for a while</li>
<li>when you talk to your 4 year old, do you encourage her skepticism? her inquisitiveness?</li>
<li>education is everything that we do to help our children to become happiness prone adults</li>
<li>school is a cultural norm that is a particular expression of that (and may have been twisted)</li>
<li>praise children for their talent, not for their results</li>
<li>don’t over-rescue children, especially girls
<ul>
<li>let them struggle and deal with frustration & confusion</li>
</ul></li>
<li>allow them to be bored — boredom is the engine of imagination</li>
<li>have a wonder wall: peppered with their questions and your questions</li>
<li>rediscover the conversation about going back to the basics of education</li>
</ul>
<h3 id="designing_a_school_around_questions_and_more_questions">Designing a school around questions and more questions</h3>
<p><strong>A question-led curriculum</strong></p>
<p><em>Paul Phillips</em>, Principal Designate Gladstone School</p>
<p><a href="http://www.gladstoneschool.org">http://www.gladstoneschool.org</a></p>
<ul>
<li>setting up a new school</li>
<li>how long is a lesson?
<ul>
<li>aiming to have one lesson a day - or maybe one lesson a week</li>
</ul></li>
<li>“finishing-off homework” is never worth it
<ul>
<li>the children who’ll end up doing the work by themselves are those that most need help</li>
</ul></li>
<li>each half term will take a big philosophical question and aim to get the children to ask it</li>
<li>aiming to use London as a base: get the children to go out into London and bring London into the school</li>
<li>“hinge questions” — getting to the point</li>
</ul>
<h3 id="design_thinking_for_new_learning">Design thinking for new learning</h3>
<p><em>Graham Brown-Martin</em>, Ed Labs <a href="https://twitter.com/GrahamBM">@GrahamBM</a></p>
<ul>
<li>industrial revolution: took crafts and scaled them to mass-production</li>
<li>got rid of craftsmen and replaced with factory workers</li>
<li>industrialisation of education having same effect</li>
<li>if you designed a classroom, would it be a room?</li>
<li>lots of lenses through which to consider schools</li>
</ul>
<h3 id="why_i_home_educated_my_son_for_two_years">Why I home educated my son for two years</h3>
<p><em>Sarah Eaton</em> <a href="https://twitter.com/llamacroft">@llamacroft</a></p>
<ul>
<li>we treat children differently from adults</li>
<li>adults have options and support</li>
<li>took son out of school when he got seriously bullied
<ul>
<li>took about six months to get him to feel better</li>
</ul></li>
<li>radical unschooling
<ul>
<li>total freedom in whatever he wanted to do</li>
</ul></li>
<li>Alfie Cohn: Unconditional Parenting</li>
<li>he made a web site when he was 8</li>
<li>eventually he wanted to go back to school</li>
<li>children are more important than the system itself</li>
</ul>
<h3 id="a_digital_native8217s_view_of_games_and_gadgets">A digital native’s view of games and gadgets</h3>
<p><em>Dan Tomlinson</em> <a href="https://twitter.com/dantoml">@dantoml</a></p>
<ul>
<li>aged 17</li>
<li>writes for the Observer</li>
<li>was bullied for about 9 years at school</li>
<li>found a great set of friends through the internet at aged 8 or 9</li>
<li>discovered programming properly about a year after the bullying started</li>
<li>we’re undergoing a fundamental shift in the way we interact with the world</li>
<li>minecraft gives children a level of freedom and creativity that they don’t get anywhere else</li>
</ul>
<h3 id="minecraft_creative_or_crack">Minecraft – creative or crack?</h3>
<p><em>Simon De Deny</em>, Dad</p>
<ul>
<li>has shameful memories of playing games all night when younger
<ul>
<li><em>Ed.: why shameful…?</em></li>
</ul></li>
<li>so when had kids and said they wouldn’t have a console</li>
<li>then neighbours got a playstation with an EyeToy</li>
<li>they enjoyed the physical games, but other games came along with it</li>
<li>watched with horror as 6 yo got bored with physical games and really into the non-physical games (Sonic, etc)</li>
<li>tried one out himself and got a similar adrenaline hit as taking drugs</li>
<li>and this was for a six year old…</li>
<li>so got rid of the playstation…</li>
<li>much later, son now has an xbox</li>
<li>now playing minecraft</li>
<li>younger son, 10, also joining in</li>
<li>felt more relaxed</li>
<li>less of an adrenaline hit</li>
<li>engaging socially, creating, problem-solving</li>
<li>mods - going beyond the game</li>
<li>would like to ask the games industry for “other things” that are more like minecraft</li>
<li>creative & problem solving rather than just running around shooting things</li>
</ul>
<h3 id="teach_your_kids_to_code_not_just_consume_games">Teach your kids to code not just consume games</h3>
<p><em>Stef Lewandowski</em>, <a href="http://makeshift.io/">Makeshift</a> <a href="https://twitter.com/stef">@stef</a></p>
<ul>
<li>give them a laptop and let them break it…</li>
<li>have a hackable computer</li>
<li>use the recycling box as construction kit</li>
<li>Eden: low-scale of minecraft for younger kids</li>
<li>robots: e.g. <a href="http://egg-bot.com/">http://egg-bot.com/</a></li>
<li>start with making web sites first, before coding…?
<ul>
<li>use as a creative & sharing exercise</li>
</ul></li>
<li>in Scratch look at drawing with the pen while following the mouse</li>
</ul>
<h3 id="should_you_manage_your_screen_time">Should you manage your screen time?</h3>
<p>I was looking forward to this part of the day, but the presentations didn’t really get into the issue at hand.</p>
<p>The first presenter, who didn’t set limits to screen time at all, seemed to have children who didn’t get zoned out by the screen — and he himself hated computer games…</p>
<p>The second presenter had children under 5 who weren’t getting any social pressure to play on the computer and were probably too young to do so anyway.</p>
<p><em>Matthew Karas</em> — no limits</p>
<ul>
<li>daughter likes bikes & guitar</li>
<li>son’s favourite activity is writing books with pencil</li>
<li>they will jump off the computer if given an offer to go and play in the park</li>
<li>personally hate computer games</li>
<li>information overload is everywhere: even in a forest</li>
<li>“taking children seriously foundation”</li>
</ul>
<p><em>Kate Jangra</em> — no screen time at all</p>
<ul>
<li>home educate two boys, one four, one two</li>
<li>personally believe that children under five don’t need computing</li>
<li>need to learn about moving, mud, etc — the real world — before understanding the virtual world</li>
<li>played first ever game (sonic the hedgehog) when 17 and didn’t do anything until finished</li>
<li>instant gratification isn’t great for development</li>
<li>sets up unrealistic expectations</li>
<li>indoor vs outdoor debate</li>
<li>children need to fall in love with our world first</li>
<li>ration yourself too — children are mimics</li>
</ul>
<p><em>My situation</em> — where’s the edge?</p>
<p>I have two boys: a four year-old and an eleven year-old — both of whom are like me and can really focus on what they’re doing, but lose the sense of their body when do so. This could be on a movie, a game or even a book (for the older one — the younger one’s not reading yet…)</p>
<p>I work with computers for a living. I really enjoy the creativity and sense of possibilities computers provide, but I also know that I can get lost and lose whole evenings to trawling around on wikipedia…</p>
<p>Through experimenting with different amounts of time on the computer, we have found that our older boy finds it harder to stop and feels more anger when he plays for much longer than an hour at a time. The issue seems to be how separated he becomes from how he’s actually feeling — it doesn’t seem to matter if the game is a high adrenaline adventure or being creative in Minecraft.</p>
<p>What does make a difference is relating to another person or being physically active while he’s playing. We have a Xbox Kinect and he is much more able to talk about stopping and doing something else if he has been jumping around the room while playing. Similarly, if I have been playing the game with him — and actually talking to him while doing so, rather than us playing separately in the same game — then it’s much easier for him to relate to me about non-game activities.</p>
<p>Has anyone else had a similar experience? I know my son is quite frustrated that we limit his time on the computer so much compared to some of his friends, but we haven’t found an alternative that works better for us.</p>
<h3 id="screentime_a_healthy_diet">Screentime – a healthy diet?</h3>
<p><em>Dr Omer Moghraby</em> Child Psychiatrist <a href="https://twitter.com/moghraby">@moghraby</a></p>
<ul>
<li>very little research on causality</li>
<li>sleep is very important</li>
<li>different ages need specific amounts</li>
<li>more at younger ages</li>
<li>sleep latency is also really important — how quickly you get to sleep</li>
<li>increased amount of screen time has an effect on sleep latency</li>
<li>increased console use does not link to obesity</li>
<li>violence leading to action — mostly debunked, but needs to be contextualized</li>
<li>what about kids developmental level?</li>
<li>arguments and fights around screen time may cause more problems than the screen time itself…</li>
</ul>
<h3 id="qa">Q&A</h3>
<ul>
<li>video game writer:
<ul>
<li>not much research on active screen usage</li>
<li>active engagement is better than passive engagement</li>
<li>Kate has a list of articles will make available later</li>
</ul></li>
<li>dominic — <a href="http://codeclub.org.uk">code club</a> & <a href="http://codeclubpro.org/">code club pro</a> trainer:
<ul>
<li>Tom: how did you stop bully following you online?</li>
<li>Answer: easier to filter out online</li>
<li>still hurts, but can skip past it</li>
</ul></li>
<li>parent & doctor:
<ul>
<li>perhaps a gender difference in bullying getting into personal space</li>
<li>have to give girls extra support</li>
<li>skeletal development & bone health is important</li>
<li>already a vitamin D deficiency in the population — children need to get outside in the summer</li>
<li>Omer: supervision & balance</li>
<li>not much evidence that this generation are that much different</li>
<li>Matthew: children have never declined going to the park…</li>
<li>it will always get them off the computer</li>
<li>Simon: been using geocaching with 10yo as a fun outdoor activity</li>
</ul></li>
<li>active & passive screen:
<ul>
<li>concerned about losing non-digital creativity</li>
<li>children always drawn to screens</li>
<li>digital as constrained… (really?)</li>
<li>vs constraints being good</li>
<li>vs digital not always screens</li>
</ul></li>
</ul>
<h3 id="understanding_and_inspiring_creativity_in_kids">Understanding and inspiring creativity in kids</h3>
<p><em>Steve Vranakis</em> Google’s Creative Director for the UK <a href="https://twitter.com/stevevran">@stevevran</a></p>
<ul>
<li>grew up in Vancouver, Canada</li>
<li>spent most of his time outside</li>
<li>immigrant parents: wanted him to be a doctor or something else professional, but he was good at drawing</li>
<li>lives in Brighton</li>
<li>have a 6 yo & 3 yo + another on the way</li>
<li>“65% of today’s primary chidren will end up at jobs that haven’t been invented yet”</li>
<li>works for Google Creative Lab</li>
<li>Science Museum: Web Lab
<ul>
<li>sketchbots - takes a picture of you, then draws it, and shares the video of it drawing you on youtube</li>
<li>universal orchestra - playing instruments with people around the world</li>
<li>data tracer</li>
<li>teleporters - live 360 degree video & audio feed from somewhere, including inside a shark tank…</li>
</ul></li>
<li>world’s biggest band over the internet</li>
<li><a href="http://www.jamwithchrome.com/">Jam with Chrome</a>
<ul>
<li>choose an instrument</li>
<li>could invite up to three other people to join you</li>
</ul></li>
<li>his group launches everything with a video</li>
<li><a href="http://g.co/devart">DevArt</a>
<ul>
<li>coding as a new creative discipline</li>
<li>three artists curated</li>
<li>competition to have fourth person </li>
<li>devart young creators: schools invited to visit before public opening in morning</li>
<li>get talks & interaction from artists</li>
</ul></li>
<li><a href="https://www.googlesciencefair.com">google science fair</a>
<ul>
<li>what you love</li>
<li>what you’re good at</li>
<li>what you want to change</li>
</ul></li>
</ul>
<h3 id="imagination_is_priceless">Imagination is Priceless</h3>
<p><em>Tom Morley</em>, <a href="http://ecotoybox.com/">Eco Toy Box</a> & <a href="http://www.instantteamwork.com/">Instant Teamwork</a></p>
<ul>
<li>here to represent the godparents, mad uncles and artistic aunties</li>
<li>adolescence can fail</li>
<li>make sure you stay creative</li>
<li>the world’s most popular toy is a stick, the second most popular toy is a cardboard box</li>
<li>eco toy box has pictures to make cardboard boxes come alive</li>
<li>doors, windows, castles, speakers, masks, portholes</li>
<li>stick them on boxes to give your imagination a boost</li>
<li><a href="http://blacktiewhitelie.com">black tie, white lie</a>
<ul>
<li>meet on waterloo bridge and pretend we’ve been up all night</li>
<li>a way of getting permission and having fun with our children</li>
</ul></li>
<li>be as creative, as mad, as flamboyant as you can</li>
<li>Tom runs drumming & singing sessions in schools
<ul>
<li>link up with a school in Africa to sing the same song</li>
</ul></li>
</ul>
<h3 id="how_a_community_can_inspire_kids_with_creativity">How a community can inspire kids with creativity</h3>
<p><em>Nick Corston</em>, STEAM Dad</p>
<ul>
<li>little house of fairy tales at camp bestival
<ul>
<li>the science of music</li>
</ul></li>
<li>watch <a href="http://cainesarcade.com/">caine’s arcade</a></li>
<li>offer lots of activities</li>
<li>children choose what they want to do</li>
<li>most popular prize in school auction:
<ul>
<li>10 yo son offered to run a stop-motion animation workshop for a family</li>
</ul></li>
<li>Ford contributed half a Goblin electric car kit</li>
<li>S.S. Great Britain in Bristol
<ul>
<li>Brunel should be on the curriculum!</li>
</ul></li>
<li>community, collaboration, co-creation</li>
<li>announcing STEAM Co.</li>
<li>want other schools to get involved</li>
<li>one school thinking of converting the whole top floor of school into a STEAM attic</li>
</ul>
<h3 id="the_value_of_drawing_with_your_children">The value of drawing with your children</h3>
<p><em>Tony De Saulles</em>, Illustrator of Horrible Science</p>
<ul>
<li>creativity at home is an investment in our children’s futures</li>
<li>was only boy in 6th form doing art</li>
<li>children all over the world laugh at the same things
<ul>
<li>especially poo and wee…</li>
</ul></li>
<li><a href="http://www.amazon.co.uk/gp/product/1407111019/ref=as_li_ss_tl?ie=UTF8&camp=1634&creative=19450&creativeASIN=1407111019&linkCode=as2&tag=expandhorizo-21">How to Draw Horrible Science</a></li>
<li>workshops: get the children to copy me</li>
<li>follow simple instructions</li>
<li>there’s no right or wrong</li>
<li>copying is a good thing</li>
<li>drawing with 150 children: they all drew the same thing but all were different</li>
</ul>
<h3 id="getting_kids_making_things_and_doing_stuff">Getting kids making things and doing stuff</h3>
<p><em>Amy Solder</em>, funding creative things at NESTA</p>
<ul>
<li>Mark Hatch: <a href="http://www.mcgrawhillprofessionalbusinessblog.com/2014/03/07/the-maker-movement-is-changing-the-world/">The Maker Movement Manifesto</a></li>
<li>Look out for Fab Lab / Hackspace / Maker Space</li>
<li>Make: magazine — mainly for adults, some kids projects too</li>
<li>Make Things Do Stuff: projects for kids
<ul>
<li>written by kids for kids</li>
</ul></li>
<li>printcraft — minecraft server with 3D printing</li>
<li>little bits: magnetic electronic circuits</li>
</ul>
<h3 id="get_your_kids_animated_through_animation">Get your kids animated through animation</h3>
<p><em>Gavin Molloy</em>, Get Smart</p>
<ul>
<li>animation — get kids to build simple storyboards first
<ul>
<li>beginning, middle & end</li>
<li>think about characters</li>
</ul></li>
<li>software:
<ul>
<li>iPhone/iPad: <a href="http://georiot.co/2wm4">iMotion HD</a> or <a href="http://georiot.co/U2y">iStopMotion for iPad</a></li>
<li>Android: <a href="https://play.google.com/store/apps/details?id=com.ui.LapseIt">Lapse It</a>, <a href="https://play.google.com/store/apps/details?id=com.octoroid.komadori.lite">Stop Motion Maker</a></li>
</ul></li>
</ul>
<h3 id="qa">Q&A</h3>
<ul>
<li>getting artists/authors into schools who are focussing on literacy:
<ul>
<li>Authors Aloud, Speaking of Books</li>
</ul></li>
<li>revision mind maps
<ul>
<li>make a mess for revising</li>
<li>draw it and label it yourself</li>
<li>sticks in your mind</li>
</ul></li>
</ul>
<h3 id="working_smart_time_not_part_time">Working smart time not part time</h3>
<p><em>Amelia Torode</em></p>
<p>I just caught the end of this talk…</p>
<p>Amelia is going to be writing a book — and is looking for input on part-time working</p>
<h3 id="getting_inspired_by_ideas_innovation_ambitino">Getting inspired by ideas, innovation & ambitino</h3>
<p><em>Nico Macdonald</em></p>
<ul>
<li>London Transport Museum Depot — in Acton, where all the things that don’t fit in the museum are stored
<ul>
<li>opens once a month</li>
</ul></li>
<li>Selfridges Festival of Imagination</li>
<li>Big Bang Fair at ExCel</li>
<li>Technopop London at QE Park</li>
<li>finding out:
<ul>
<li><a href="http://www.ianvisits.co.uk/">ianvisits</a> mailing list</li>
<li><a href="http://www.urbanexplorer.com/">urban explorer</a></li>
</ul></li>
</ul>
<h3 id="bringing_stories_to_life_as_experiences">Bringing stories to life as experiences</h3>
<p><em>Valerie Coward</em></p>
<ul>
<li>inspired by Philip Pullman’s <a href="http://www.amazon.co.uk/gp/product/0141442220/ref=as_li_ss_tl?ie=UTF8&camp=1634&creative=19450&creativeASIN=0141442220&linkCode=as2&tag=expandhorizo-21">Grimm Tales for Young and Old</a></li>
<li>Grimm Tales for young and old at Shoreditch Town Hall basement</li>
<li>first 6 week season just finished in April</li>
<li>did storytelling as parents tell children</li>
<li>were originally concerned that younger children would find stories scary</li>
<li>but they didn’t mind — as long as the baddies got dealt with in the end, they were happy</li>
<li>actors played multiple parts</li>
<li>clearness about the story: the characters can be fluid</li>
<li>at the end of the guided session, they let the audience wander through the set</li>
<li>coming back in bigger venue in November with new stories</li>
</ul>
Adam Cohen-Rosehttp://www.blogger.com/profile/12286496556944495325noreply@blogger.com1tag:blogger.com,1999:blog-6382212051821902995.post-61160108355893742862014-05-14T22:36:00.000+01:002014-05-14T22:49:43.312+01:00MomoLondon: Cloud Computing & Mobile<p>A new venue tonight — up on the 9th floor of Google’s Central St Giles office. They even provided good food for the hungry mobile mondayers…</p>
<p>The evening’s focus was on Cloud Computing and Mobile, and the questions seemed to focus mainly on the cloud with not much discussion about how it related to mobile. The chair, Camille, kept the discussion moving along briskly, but we didn’t really get into any depth on any of the subjects. Maybe the audience could smell the food!</p>
<h3 id="the_panel">The panel</h3>
<ul>
<li>Chair: Camille Mendler <a href="https://twitter.com/cmendler">@cmendler</a>
<ul>
<li>Principal Analyst at Informa</li>
</ul></li>
<li>Rob Easton <a href="https://twitter.com/Cloud_Easton">@Cloud_Easton</a>
<ul>
<li>Head of Google Cloud Platform UK & Ireland</li>
<li>Eurovision app used App Engine for back-end</li>
</ul></li>
<li>Dr Janko Mrsic-Flogel
<ul>
<li>CEO of <a href="http://www.privateplanet.co.uk/" title="Private Planet - Your Place In The Internet">Private Planet</a> — personal cloud</li>
<li>7 out of 10 carriers are providing a personal cloud solution</li>
</ul></li>
<li>Caroline Van Den Bergh <a href="https://twitter.com/GoldenGekko">@GoldenGekko</a>
<ul>
<li><a href="http://www.goldengekko.com/" title="Mobile app solutions | Mobilize your ideas | Golden Gekko">Golden Gekko</a> mobile agency</li>
<li>85% of apps we build are based on Google App Engine</li>
</ul></li>
<li>Jonathan Raper <a href="https://twitter.com/MadProf">@MadProf</a>
<ul>
<li>CEO at <a href="http://transportapi.com/" title="Transport API | powering change and innovation in transport">Placr/transportapi</a> & Visiting Professor at City University</li>
<li>purchasers of cloud services</li>
<li>mostly built on <a href="http://www.memset.com/" title="Dedicated Servers, Managed Hosting & Dedicated Server Hosting | Memset">memset</a></li>
</ul></li>
</ul>
<h3 id="outages_availability">outages & availability</h3>
<ul>
<li>JR: best service providers are those that communicate well when things go wrong
<ul>
<li>one provider went down and didn’t tell us anything for an hour</li>
</ul></li>
</ul>
<h3 id="looking_forward">looking forward</h3>
<ul>
<li>RE: google datacentres include a new one in Taiwan at 15 hectares
<ul>
<li>green computing</li>
<li>Google can provide very low latency</li>
<li>enables reaching out to new business areas such as the film industry</li>
</ul></li>
<li>JR: still talking quite aggregated performance measures
<ul>
<li>can’t ask for X many transactions for Y pounds</li>
<li>not that detailed</li>
<li>next step may be platform products</li>
</ul></li>
<li>CVDB: mobile enterprise software saving two days a week
<ul>
<li>managing remote teams</li>
</ul></li>
<li>JR: sometimes blame is shifted between telcos & cloud
<ul>
<li>would like to have better tracing</li>
</ul></li>
<li>JMF: Private Planet have a totally green datacentre in Telecity in Holland for T-Mobile</li>
</ul>
<h3 id="internet_of_things">internet of things</h3>
<ul>
<li>JR: the problem is trading information
<ul>
<li>automatically discovering different feeds & blending them</li>
<li>spend 3 weeks integrating code and 3 months arguing over terms & conditions</li>
</ul></li>
<li>CVDB: best successes have been smaller ones</li>
<li>CM: find my yak in nepal
<ul>
<li>the yak’s don’t talk back — so there’s no privacy issues!</li>
</ul></li>
<li>RE: getting electricity usage feeds every 10 minutes</li>
<li>CVDB: there has been scaremongering around Google capturing data</li>
<li>JR: all our data is royalty-free downstream
<ul>
<li>makes it much easier to deal with</li>
</ul></li>
<li>CM: Copenhagen have bike devices to share traffic information
<ul>
<li>provide individual exercise info</li>
<li>but also shared with municipality</li>
</ul></li>
<li>JR: Waze has lots of complicated terms & conditions
<ul>
<li>data is available but locked up</li>
</ul></li>
</ul>
<h3 id="the_next_generation">the next generation</h3>
<ul>
<li>CM: has been proved conclusively that 3D gaming improves your cognitive ability</li>
<li>JR: …minecraft</li>
<li>JR: it’s still a bit like early 2000 — mobile operator walled gardens
<ul>
<li>want to take down the barriers and bring the data silos together</li>
</ul></li>
<li>CVDB: working with Saga
<ul>
<li>older people have more time, want to delve deeper</li>
<li>tablets more popular than mobile phones</li>
</ul></li>
</ul>
<h3 id="data_scientists">data scientists</h3>
<ul>
<li>CM: shouldn’t we moving towards everyone manipulating their own data</li>
<li>JR: digital literacy is very shallow, especially in highest decision-making tiers</li>
</ul>
<h3 id="security_issue_8212_data_protection">security issue — data protection</h3>
<ul>
<li>safe harbour in tatters</li>
<li>can’t use the cloud at all if we have any secure data</li>
<li>JMF: Private Planet always has data centre in the specific country
<ul>
<li>but are governments the biggest problem? what about the corporates?</li>
</ul></li>
<li>JR: if you need to do it, in-country encrypted solutions are available</li>
<li>RE: sure, there are some workloads that Google can’t take on
<ul>
<li>e.g. we won’t let you audit our data centre</li>
<li>so can’t work under FCA regulations</li>
<li>over time, some of these regulations are going to change</li>
</ul></li>
<li>JR: all have to do as much as we can to help the government make the right decisions</li>
<li>JR: sometimes the safest place to do something is in the cloud — e.g. running Windows
<ul>
<li>we don’t allow it on any of our machines</li>
<li>but it’s great in the cloud!</li>
</ul></li>
</ul>
<h3 id="what_if_cloud_provider_company_goes_bankrupt">what if cloud provider company goes bankrupt?</h3>
<ul>
<li>JR: escrow</li>
<li>JMF: most agreements done via a channel partner — so that partner will continue the service
<ul>
<li>single party relationship is much more complicated</li>
</ul></li>
<li>RE: cloud business could be bigger than ads for Google
<ul>
<li>SLA penalties are often a percentage of what you pay</li>
<li>but if you pay less and less, the SLA means less and less…</li>
</ul></li>
</ul>
<h3 id="is_it_becoming_like_supermarket_wars">is it becoming like supermarket wars?</h3>
<ul>
<li>RE: Google reduced prices — and if you use an instance more than 25% per month then get a discount
<ul>
<li>terabyte of storage is $26/month</li>
</ul></li>
<li>CM: just like a loyalty card…
<ul>
<li>who will be Lidl and who will be Waitrose?</li>
</ul></li>
</ul>
<h3 id="will_we_still_be_waiting_in_several_years">will we still be waiting in several years?</h3>
<ul>
<li>JR: overestimate change in the short term and underestimate in the long term — change is stepped
<ul>
<li>sometimes have to wait for the step change in technology or regulation</li>
</ul></li>
<li>CVDB: business are going to grow up quickly
<ul>
<li>first digital generation CEOs will be around in the next few years</li>
</ul></li>
</ul>
<h3 id="third_party_dependencies">third party dependencies</h3>
<ul>
<li>JR: Apple reviews can be capricious
<ul>
<li>if Apple fall out of love with Dropbox, then that could cause a problem for lots of apps</li>
</ul></li>
<li>JMF: was a huge debate on mobile medical health a while ago
<ul>
<li>then suddenly there was an app that just works</li>
<li>and the issues can just disappear</li>
<li>gadget-led terms and conditions…?</li>
</ul></li>
</ul>
<h3 id="speed_access">speed & access?</h3>
<ul>
<li>RE: check out <a href="https://blog.serverdensity.com/why-we-moved-away-from-the-cloud-to-a-real-server/">server density review</a>
<ul>
<li>blog by someone who reviewed lots of providers and switched to Google</li>
</ul></li>
<li>CVDB: Golden Gekko mandate that all backends must be on Google App Engine
<ul>
<li>mainly so that clients can scale</li>
</ul></li>
</ul>
<h3 id="new_innovations_in_infrastructure">new innovations in infrastructure?</h3>
<ul>
<li>RE: Google build our own servers
<ul>
<li>apparently they would be the 3rd biggest manufacturers in the world</li>
<li>they value new innovation</li>
</ul></li>
</ul>
<h3 id="where_is_the_next_growth_to_make_it_easier">where is the next growth to make it easier?</h3>
<ul>
<li>RE: focused on the developer
<ul>
<li>acquired <a href="https://www.stackdriver.com/">StackDriver</a> to manage cloud capabilities</li>
</ul></li>
<li>JMF: <a href="http://ifttt.com">If This Then That</a>
<ul>
<li>making cloud development open to the consumer</li>
<li>certain mobile operators are understanding this and joining up devices in the home</li>
</ul></li>
<li>CVDB: finding that parse.com doesn’t suit
<ul>
<li>one size doesn’t quite fit all</li>
<li>prefer google’s flexibility</li>
</ul></li>
</ul>
<h3 id="inviting_consumers_to_get_more_involved">inviting consumers to get more involved</h3>
<ul>
<li>CVDB: user testing
<ul>
<li>avoiding ivory tower</li>
<li>developed O2 Priority Moments</li>
<li>built packaged solutions based on it</li>
<li>incentivized behaviour also used in enterprise apps</li>
</ul></li>
<li>JR: designed a first location bank
<ul>
<li>your own location storage — that you can choose to share</li>
<li>(Ed. see also <a href="http://en.wikipedia.org/wiki/Fire_Eagle">fireeagle</a>)</li>
<li>next generation have a different approach to privacy</li>
</ul></li>
<li>RE: snapchat is a massive google customer</li>
<li>audience: teenagers using technology completely differently
<ul>
<li>using snapchat to have a whole conversation</li>
</ul></li>
<li>RE: snapchat consumes more IT than any banking industry
<ul>
<li>JDI has 10 petabytes on Google cloud</li>
<li>consumers of IT will be well away from the enterprise</li>
<li>can have failure at a much cheaper cost — can learn more</li>
</ul></li>
</ul>
<h3 id="what_financial_services_are_possible_in_the_cloud">what financial services are possible in the cloud?</h3>
<ul>
<li>RE: restricted by FCA regulations, but other options possible
<ul>
<li>e.g. datasift to search across twitter</li>
<li>big challenge to attract IT talent in financial services as there are so many restrictions</li>
</ul></li>
</ul>
<h3 id="skills">skills</h3>
<ul>
<li>JR: right now it’s hard to hire — ruby on rails developers are hard to find
<ul>
<li>constraint on development right now</li>
</ul></li>
<li>CVDB: couldn’t agree more — mobile skills are in short supply</li>
</ul>
<h3 id="tools_for_analytics_loyalty_crm">tools for analytics & loyalty/crm</h3>
<ul>
<li>looking at how data can be analysed</li>
<li>wanting to drive revenue per user</li>
<li>wanting to get the right tools in place to complete the feedback loop</li>
<li>CVDB: iris solutions company
<ul>
<li>built the backend themselves</li>
<li>?? <a href="http://www.iris.co.uk/">http://www.iris.co.uk/</a></li>
</ul></li>
<li>JR: “build it in the cloud, but just don’t tell IT”</li>
<li>RE: <a href="http://www.tableausoftware.com/" title="Business Intelligence and Analytics | Tableau Software">tableau</a>, <a href="http://bigquery.bimeanalytics.com/">BIME</a>, etc. working on top of Google Big Query
<ul>
<li>now a lot cheaper</li>
</ul></li>
</ul>
<h3 id="after_the_panel_discussion">After the panel discussion</h3>
<p>As often happens with Mobile Monday, the discussion after the panel was richer than the panel itself. Some discussion points that came up when I was talking to people afterwards included:</p>
<ul>
<li>How do you balance keeping data on the device and in the cloud, to deal with intermittent network availability?</li>
<li>Will the banks get clobbered by more agile personal finance companies that don’t have to worry about so many regulations?</li>
<li>Why has it taken Google since 2008 to move from basic App Engine web apps to a full cloud platform?</li>
<li>How will Google make more money from Cloud Computing than from Ads? There’s a big market, but the price is dropping…</li>
<li>…and on a completely different note, several people were interested in setting up <a href="https://www.codeclub.org.uk/">Code Clubs</a> in their local primary schools, but were stretched for time — perhaps they could work together and contribute part-time?</li>
</ul>
Adam Cohen-Rosehttp://www.blogger.com/profile/12286496556944495325noreply@blogger.com0tag:blogger.com,1999:blog-6382212051821902995.post-3245947706815284332013-11-28T22:25:00.000+00:002013-12-03T09:47:16.657+00:00Handheld Conference 2013<p>An amazing conference, in a beautiful venue, with fantastic speakers and extra entertainment as bonus! <a href="https://twitter.com/craiginwales">Craig Lockwood</a> created something magnificent today — and then told us there won’t be another Handheld next year! Let’s hope he’s just changing focus rather than stopping organising conferences.</p>
<p>Handheld this year was two conferences in one — <a href="/2013/11/handheld-conference-2013-port80-fringe.html">the previous night's mini event</a> and the much larger full day event. The main conference was focused mainly on responsive web design — and the implications that brings to the design process and to the implementation of the sites. <a href="/2012/11/handheld-conference-2012.html">Last year</a> was a mix of both native and web experiences, and though we lost the native side, the web side was very strong — with speakers being the authorities in their areas (the people who wrote <em>the</em> books that everyone should read).</p>
<p>Some highlights before you dive in to my notes below:
<ul>
<li>Hearing <a href="#icon_design_process">icon design tips from Jon Hicks</a>, the designer of the Firefox logo, Skype emoticons and many other big name logos</li>
<li>Learning about improving business participation in the design process from <a href="#how_to_call_your_client_an_idiot_without_getting_fired">Andy Clarke</a> & <a href="#the_business_of_responsive_web_design">Mark Boulton</a>: mobile and responsive design has big impacts on the design process that extend not just to the artifacts (comps, wireframes, etc) but also on the communication and interaction between the business, the designers and the developers.</li>
<li>"measure your success in decades" — <a href="#the_long_web">Jeremy Keith on web design</a></li>
<li>"XML is like violence: if it doesn't get you what you want, you’re not using enough of it" — <a href="">Graham Lee</a></li>
<li>and, of course, Ling Valentine of <a href="http://www.lingscars.com/">Ling's Cars</a> (if you haven't seen her website before, you must look now!), <a href="#when_responsive_sites_work_as_well_as_a_chocolate_iphone">appearing on stage as a Dalek!</a></li>
</ul>
</p>
<p>If you like your information visual, Luke Murphy from Ubelly wrote up some <a href="http://www.ubelly.com/2013/11/sketching-at-handheld-2013/">beautiful sketchnotes of the main conference</a>.</p>
<h3 id="intro_guess_who">intro + guess who</h3>
<p>Syd Lawrence <a href="https://twitter.com/sydlawrence">@sydlawrence</a>, We Make Awesome Sh</p>
<ul>
<li>over 1,000 people in audience</li>
<li>rickrolled the audience using twilio, node & pusher!</li>
<li>everybody sent SMSs in with their seat column number</li>
<li>then made calls back to 8 people in each quarter of the audience — playing 4-channel audio across the auditorium</li>
<li>(unfortunately all our lanyards had been mixed up and only one person received the rickrolling call… but it was a nice idea)</li>
</ul>
<h3 id="the_long_web">The Long Web</h3>
<p>Jeremy Keith <a href="https://twitter.com/adactio">@adactio</a></p>
<ul>
<li>1907: Francis O’Neill, chief of police in chicago, noted down 1001 Irish tunes - The Dance Music of Ireland (“the book”)</li>
<li>1991: ABC musical format invented
<ul>
<li>text file, metadata at top, notes at the bottom</li>
</ul></li>
<li>mid-90s: Jeremy launched <a href="http://thesession.org">http://thesession.org</a>
<ul>
<li>started by self-publishing a song a week</li>
<li>but soon needed other people to contribute tunes</li>
<li>2001: allowed other people to submit tunes in ABC — Jeremy would then convert to sheet music & sound files</li>
</ul></li>
<li>site then languished for 10 years — still being used but Jeremy had no time to improve it</li>
<li>finally got around to rebuilding the site in 2012</li>
<li>interesting to see what had changed in web development in a decade</li>
<li>biggest change: environment is no longer a desktop/laptop computer</li>
<li>open device labs
<ul>
<li>Jason Grigsby tried to set one up properly in Portland with lawyers, insurance, etc. but got slowed by red tape</li>
<li>Jeremy just started with a tweet inviting people in to the Clearleft offices to test - then people started donating devices</li>
</ul></li>
<li>mobile first: mobile forces you to prioritise</li>
<li>can also think about content first (or task first)</li>
<li>Jeremy likes to start URL first
<ul>
<li>forget screens completely</li>
<li>think about structure of URLs</li>
<li>almost like doing an API design</li>
</ul></li>
<li>don’t think about the layout first — instead think about the individual pieces of content (pattern primer)
<ul>
<li>forces you to be very modular in your CSS</li>
<li>all the pieces must be able to work in any bit of your page</li>
</ul></li>
<li>if you’re thinking content first: then navigation comes second</li>
<li>thesession.org does navigation by having navigation at bottom of the page — revealed with a simple hyperlink to the bottom (with a hyperlink back to top under the nav)
<ul>
<li>(capable browsers with more space have CSS to move it to the top)</li>
</ul></li>
<li>the logo is progressively enhanced too
<ul>
<li>full CSS support shows stitching, shadows, etc</li>
<li>less support means that the text & colour is still there but the details go away</li>
<li>error handling model — browser will just ignore stuff it doesn’t understand</li>
</ul></li>
<li>other progressive enhancements
<ul>
<li>escalators (enhanced stairs)</li>
<li>moving walkways (enhanced floor)</li>
<li>electric toothbrush (enhanced toothbrush…)</li>
<li>these rely on electricity to enhance but would still work without (kind of…)</li>
</ul></li>
<li>use javascript but don’t rely on it</li>
<li>Jake Archibald (<a href="https://twitter.com/jaffathecake">@jaffathecake</a>): every user is a non-javascript user while the page is loading</li>
<li>Andy Hume: progressive enhancement more about dealing with things failing rather than things not available</li>
<li>don’t merge the stack levels — use javascript to enhance the HTML, not replace it</li>
<li>on thesession.org have an ABC to sheet music form
<ul>
<li>by default submits a form that returns a GIF</li>
<li>with javascript, uses a JS lib to turn ABC into inline SVG</li>
</ul></li>
<li>similarly sparklines: previously used Google static charts
<ul>
<li>but google have deprecated the service and will be <a href="https://developers.google.com/chart/image/">shutting it down in 2015</a></li>
</ul></li>
<li>instead generating sparklines using SVG with contained javascript
<ul>
<li>same SVG file, with different query parameters for data</li>
<li>could also put CSS (including media queries) in the SVG</li>
</ul></li>
<li>but SVG sparklines were slowing down the page load
<ul>
<li>so used conditional loading</li>
</ul></li>
<li>watch out for script loading in middle of page
<ul>
<li>especially third parties</li>
<li>the loading of your page stops until that script has finished loading</li>
<li>if it’s a third party script, you’re now dependent on a third party server to finish loading your page</li>
<li>e.g. if it’s twitter and the page is loaded from China, then your page will never finish loading… (twitter is blocked)</li>
</ul></li>
<li>“measure your success in decades”
<ul>
<li>the inventor of CSS put a bet on to say that HTML would be around for 50 years</li>
<li>he’s recently upped his bet to 500 years</li>
</ul></li>
<li><a href="http://futurefriend.ly">http://futurefriend.ly</a> — the best way to work on future devices is to be backwards-compatible</li>
</ul>
<h3 id="bruce_lawson_on_guitar">Bruce Lawson on guitar</h3>
<p>Bruce Lawson (<a href="https://twitter.com/brucel">@brucel</a>) usually has a speaking role as Opera’s developer advocate, but today he taught us about HTML through song! The first, “like a rounded corner”, bemoaned the life of a CSS developer struggling with making his site lovely for iPhones:</p>
<iframe src="//player.vimeo.com/video/80760578" style="max-width: 100%;" width="500" height="281" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe> <p><a href="http://vimeo.com/80760578">Rounded Corner - Handheld 2013</a> from <a href="http://vimeo.com/besquare">Besquare</a> on <a href="https://vimeo.com">Vimeo</a>.</p>
<p>…the second was an ode to HTML5 to the tune of Living Doll (let's hope the video goes up for this soon too!):</p>
<ul>
<li>it’s so much better than five…</li>
<li>never completing, flash defeating, living standard :-)</li>
</ul>
<iframe src="//player.vimeo.com/video/80816443" style="max-width: 100%;" width="500" height="281" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe> <p><a href="http://vimeo.com/80816443">Living Standard - Handheld 2013</a> from <a href="http://vimeo.com/besquare">Besquare</a> on <a href="https://vimeo.com">Vimeo</a>.</p>
<h3 id="icon_design_process">Icon Design Process</h3>
<p>Jon Hicks <a href="https://twitter.com/hicksdesign">@hicksdesign</a></p>
<p><em><a href="http://www.hicksdesign.co.uk/journal/branding-firefox">Jon was co-designer of the Firefox logo</a></em></p>
<ul>
<li>single icon files -> sprite sheets -> icon fonts</li>
<li>less http requests, small size, scalable for different resolutions & sizes</li>
<li>accessibility issues
<ul>
<li>can use unicode private use area to prevent reading out</li>
<li>but might also need to add an invisible span if no other indication on the page</li>
</ul></li>
<li>can use opentype ligatures to replace whole words with icons</li>
<li>colour?
<ul>
<li>Apple have created an emoji font with 128px square PNGs — works but not scalable</li>
<li>BBC Weather use different glyphs that they colour individually — when combined they make a colour image</li>
<li>can do the same with a company logo</li>
<li>Microsoft Windows 8 emoji set uses layered characters with colour information built-in — means they are completely scalable — and translates automatically from Apple emoji font</li>
</ul></li>
<li>fonts available online, e.g. <a href="http://pictos.cc/">pictos</a>: 324 interface icons</li>
<li>discovery phase: usually start with 16px grid but consider an odd-numbered grid for some cases (e.g. arrows)</li>
<li>two kinds of icons: models (iconic, real-world) & symbolic (learnt)</li>
<li>follow conventions — use what people know already
<ul>
<li>use google image search</li>
<li>or <a href="http://thenounproject.com/">the noun project</a>: with a tag search</li>
</ul></li>
<li>don’t forget local knowledge
<ul>
<li>owl in East is stupidity</li>
<li>bowing in Japan needs hands clasped in front — otherwise it means “I want to die”!</li>
</ul></li>
<li>boxes and arrows survey of filled vs outlined
<ul>
<li>found that iconic, realworld icons were recognised faster than symbolic, but outline/filled made not much difference</li>
</ul></li>
<li>differentiation: padlock, handbag, 20kg weight
<ul>
<li>think about adding subtle differences</li>
</ul></li>
<li>tools & styles:
<ul>
<li>decide size, output format</li>
<li>see all icons in context together</li>
<li>balance can change depending on context — you might want to move the icon up or down to align with the rest of the icons or text</li>
</ul></li>
<li>outputting a font
<ul>
<li>need to convert any rounded corners, expanded strokes etc</li>
<li>reduce anchor points as much as possible — reduces file size</li>
<li>easier to do this in Illustrator rather than Sketch</li>
<li>end up with a folder of SVG icons</li>
<li>then use <a href="http://fontcustom.com/">font custom</a> command line</li>
<li><a href="http://georiot.co/VrO">glyphs app</a> (expensive but worth it)</li>
<li>github did <a href="https://github.com/blog/1135-the-making-of-octicons">a blog post on settings</a></li>
</ul></li>
<li>access icon on page:
<ul>
<li>data-icon attribute</li>
<li>class=”icon-blah”</li>
<li>use <code>aria-hidden="true"</code> to help with screen readers</li>
</ul></li>
<li>alternatives to icon fonts:
<ul>
<li>all icons in an SVG file — with LESS or SASS to calculate the resulting CSS</li>
<li>makes it easy to adjust</li>
</ul></li>
<li><a href="http://georiot.co/SJl">webcode app</a>
<ul>
<li>lets you code in CSS or SVG or canvas (JS)</li>
<li>but canvas is larger file size</li>
</ul></li>
<li>further reading:
<ul>
<li>Brian Suda: <a href="http://www.fivesimplesteps.com/products/creating-symbol-fonts">Creating Symbol Fonts</a></li>
<li>Jon Hicks: <a href="http://www.fivesimplesteps.com/products/the-icon-handbook">Icon Handbook</a></li>
</ul></li>
</ul>
<h3 id="an_open_letter_to_the_industry_from_an_8_11_year_old">an open letter to the industry from an 8 & 11 year old</h3>
<p>Again, a brilliant intervention — <a href="http://vimeo.com/80718034">video and transcript available on Vimeo</a> (or listen below):</p>
<iframe src="//player.vimeo.com/video/80718034" style="max-width: 100%;" width="500" height="281" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe> <p><a href="http://vimeo.com/80718034">An Open Letter - Handheld 2013</a> from <a href="http://vimeo.com/besquare">Besquare</a> on <a href="https://vimeo.com">Vimeo</a>.</p>
<h3 id="the_business_of_responsive_web_design">The Business of Responsive Web Design</h3>
<p>Mark Boulton <a href="https://twitter.com/markboulton">@markboulton</a></p>
<ul>
<li>redesigning the CERN web site
<ul>
<li>“next year we’re likely to make an announcement which will fundamentally change our understanding of the universe — and we want your help to make it”…</li>
<li>people wanted to know updates</li>
<li>from different perspectives — from particle physicists to random public
<ul>
<li>scientists want words and specifics</li>
<li>general public still want updates but need gentler explanations & pretty pictures — the pictures don’t need to mean anything or even be related to the content</li>
<li>teachers & students want updates with things to do, lesson plans etc</li>
</ul></li>
<li>same updates need three different perspectives</li>
<li>but then you need structured content and a whole new CMS & editorial process…</li>
</ul></li>
<li>in news, story is no longer headline, subhead, image & caption</li>
<li>now it’s a seed with lots of links together</li>
<li>“meta data is the new art direction” <a href="https://twitter.com/studip101">@studip101</a></li>
<li>in old-style advertising, agencies would win an account, not a project
<ul>
<li>take time to understand our issues, to get to know us</li>
<li>accounts involve more risk, but greater rewards and closer communication</li>
</ul></li>
<li>house of cards & netflix:
<ul>
<li>kevin spacey said we don’t want a pilot</li>
<li>want a longer view on development of the series, without the restriction of cramming everything in to the first episode</li>
<li>only netflix said yes…</li>
</ul></li>
<li>sometimes useful to let the client beat you up a bit for a while until they wear themselves out
<ul>
<li>an aspect of working on an account not a project</li>
<li>painful in the short term, but leads to better relationship & understanding</li>
</ul></li>
<li>if your process is to gradually improve fidelity over time, where is “the design”?
<ul>
<li>it’s not really there any more…</li>
<li>no big reveal, no final document</li>
</ul></li>
<li>marginal gains — fix small percentages all over the place
<ul>
<li>but you need to look across the whole system</li>
<li>e.g. cycling teams take their bedding with them to ensure a good night’s sleep</li>
<li>if you’re struggling with a particular CSS you may want to look elsewhere in the system for a small gain</li>
</ul></li>
<li>we’re breaking new ground at the moment — so it’s all hard</li>
<li>but we’re leaving a legacy for the future</li>
</ul>
<h3 id="carefully_everywhere">carefully everywhere</h3>
<p>Brendan Dawes <a href="https://twitter.com/brendandawes">@brendandawes</a></p>
<ul>
<li><p>title comes from an e.e.cummings poem:</p>
<p><em>as when the heart of this flower imagines</em> <br />
<em>the snow carefully everywhere descending</em></p></li>
<li><p>film posters are data viz</p>
<ul>
<li>the story of the film —> an iconic image</li>
</ul></li>
<li>symbolize and summarize
<ul>
<li>e.g. Ridley Scott selling Alien: “jaws in space”</li>
</ul></li>
<li>photoshop like elvis
<ul>
<li>originally leather jacket, streamlined, designed for compositing large images</li>
<li>now it’s like fat elvis on the toilet…</li>
</ul></li>
<li>making tools for playing with graphics</li>
<li>making dynamic logos
<ul>
<li>flocking points with trails avoiding words (almost)</li>
<li>word made of springs with collision avoidance from several circles</li>
</ul></li>
<li>you can represent everything with numbers</li>
<li>and then you can transpose those numbers into other systems</li>
<li>flash was great as it was self-contained (and didn’t need to check it ran in lots of browsers…)
<ul>
<li><em>ed: we’re still waiting for good tools for interactive web design</em></li>
</ul></li>
<li>building an app called Kennedy
<ul>
<li>captures the now: weather, current headline, etc</li>
<li>you own your data — can export to visualize yourself</li>
</ul></li>
<li>happiness machine:
<ul>
<li>finds people saying they’re happy on twitter</li>
<li>prints out their tweet on a receipt</li>
<li>receipts are much more personal than larger piece of paper</li>
</ul></li>
<li>french new wave cinema came about ‘cos there was a 16mm camera that you could hold in your hand
<ul>
<li>new camera angles, new scenarios</li>
</ul></li>
<li>using sound to animate & extrude a 3D object
<ul>
<li>can then print it out</li>
</ul></li>
<li>data waffles: 3D printed 3D graphs</li>
</ul>
<h3 id="when_responsive_sites_work_as_well_as_a_chocolate_iphone">When responsive sites work as well as a chocolate iPhone</h3>
<p>Ling Valentine <a href="https://twitter.com/lingscars">@lingscars</a>, Ling’s Cars</p>
<p>Pushed onto stage in a Dalek costume by Andy Clarke & Jon Hicks!</p>
<p><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_K5ZBzpYdaW5cZ69MaXy3_kVn1TIAkzP6EBVgRXuCOtp-DYJxawF8WxjqacyS2r2l8Y1Fw7UM-GPyD1YL_jsJcn7Co3m3C2YaqCXgUJvdlmNa4LJspqSZcQJQgqvGLQwWfRapvyT34GA/s1600/dalek-ling.jpg" imageanchor="1" ><img border="0" alt="Dalek Ling!" width="100%" style="max-width: 740px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJtlgUhEkpYaywjuk4Kh3Afc-sdcb6oMVFkNIlr7Vcs8CMbPCrvPudyjWzE17_kWA-EUHgUYLExaT7xWyXY_kBX5G9ujzVAVy8i8aKIB7L8gaURjoV63ZS1P0j7WsuX3OXub1R5uLLti4/s1600/dalek-ling-small.jpg" /></a></p>
<p>Ling then proceeded to tell us that responsive design just doesn’t cut it.</p>
<ul>
<li>it’s a mobile phone not a TARDIS</li>
<li><a href="http://www.lingscars.com/">Ling's Cars website</a> makes it enjoyable to read lots of information!</li>
<li>buying a car is one of the biggest decisions you can make — a car lease is a 1-3 year commitment</li>
<li>good quality video, pictures, etc requires lots of bandwidth</li>
<li>most car dealers have even given up on the web — they just say call us now or visit us in the flashy showroom
<ul><li>Ling relies just on her web site</li></ul>
</li>
<li>but it’s really important to satisfy all the people who start on their smartphones</li>
<li>start by building up trust with them — let them see the enjoyable information and encourage them to visit the main website with more time</li>
<li>mobile site is attention grabbing — <i>different</i> from main web site</li>
<li>first link is a free car!
<ul>
<li>send me a PDF via email</li>
<li>and a link to remind them to check the full website later</li>
</ul></li>
<li>various games to get people to interact — then get them to start reading car deals</li>
</ul>
<p><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgE6EO87XSt708Yunjd4BNJKU26ntUkQQTwRscvpZcy_hU1Gj6rf7u2Y08wgEDvJ1dZZK3Wuvp-Lz-Z4mUD0BT9LdpOePyJfru6mxADOZKdDoZ8ZXWSAF0SA7ud7l2qTU6xzEcIRfiLvj4/s1600/ling-no-responsive.jpg" imageanchor="1" ><img alt="Just say no to responsive design!" border="0" width="100%" style="max-width: 740px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhR7zpngh6LozsTdb7z1PTSz3QMbQs__nGg-LmLck-8cKgf-ljefwrrCpXamlDt65LPQ-wkH3IkNrYmCnofKlKacGVNWyQPfNum8T5la-jrB5buSpeBKB7Tx5__WTusQwwbkMq6VRyx4tQ/s1600/ling-no-responsive-small.jpg" /></a></p>
<h3 id="crafting_your_toolset">Crafting your Toolset</h3>
<p>Eddie Machado <a href="https://twitter.com/eddiemachado">@eddiemachado</a></p>
<ul>
<li>created <a href="http://themble.com/bones/">bones</a> (a starter theme for wordpress)</li>
<li>Craig asked Eddie to build the Handheld 2013 site and use it as a case study for building a response site</li>
<li>start with a design persona
<ul>
<li><a href="http://aarronwalter.com/design-personas">http://aarronwalter.com/design-personas</a></li>
<li>visual lexicon</li>
<li>don’t forget personality traits & voice</li>
</ul></li>
<li>sketch everything and share it as much as possible
<ul>
<li>don’t hold out for a great reveal</li>
<li>things move much faster if you communicate</li>
</ul></li>
<li>mock up little elements
<ul>
<li><a href="http://georiot.co/2iJM">Sketch app</a> is good for this</li>
</ul></li>
<li>establishing a colour theme
<ul>
<li>work out complementary colours: <a href="http://sassme.arc90.com">http://sassme.arc90.com</a></li>
</ul></li>
<li>sass structure
<ul>
<li>partials — grid, mixins, etc</li>
<li>modules — components</li>
<li>breakpoints — different sizes & non-media queries</li>
</ul></li>
<li>icons
<ul>
<li>icon fonts from <a href="http://icomoon.io">http://icomoon.io</a></li>
<li>picking up icon using class on a span</li>
<li>SASS lets you create an array of subclasses with a for loop</li>
<li>let’s you create named classes with their unicode references easily</li>
</ul></li>
<li>using grids from <a href="https://gridsetapp.com/">gridset</a></li>
<li>autoplay videos don’t work on touch devices
<ul>
<li>so used plain images for mobile</li>
<li>included video sources but in a div not a video element</li>
<li>on non-touch (desktop) devices, swapped out the div for a video element using javascript</li>
</ul></li>
<li>checking page size using <a href="http://mobitest.akamai.com/">http://mobitest.akamai.com/</a>
<ul>
<li>also use <a href="http://tools.pingdom.com/fpt">http://tools.pingdom.com/fpt</a></li>
</ul></li>
<li>use a similar technique for background images on mobile
<ul>
<li>leave them out by default</li>
<li>add them in using javascript</li>
</ul></li>
</ul>
<h3 id="codename_prometheus">Codename Prometheus</h3>
<p>Aral Balkan <a href="https://twitter.com/aralbalkan">@aralbalkan</a></p>
<p><a href="http://indiephone.eu">http://indiephone.eu</a></p>
<ul>
<li>top 50 web properties are closed silos other than wikipedia</li>
<li>indie OS + indie Cloud + indie Phone</li>
<li>will be crowdfunding in 2014</li>
<li>planning to ship in 2016</li>
</ul>
<h3 id="how_to_call_your_client_an_idiot_without_getting_fired">How to call your client an idiot without getting fired</h3>
<p>Andy Clarke <a href="https://twitter.com/malarkey">@malarkey</a></p>
<ul>
<li>client participation is currently broken — how can we fix it?</li>
<li>the challenges of responsive design are not in design & implementation</li>
<li>many problems stem from the workflow
<ul>
<li>not something you can easily control</li>
</ul></li>
<li>pre-planning stage
<ul>
<li>content audit, information architecture, etc</li>
<li>user stories, personas, scenarios</li>
<li>screen blueprints, storyboards</li>
</ul></li>
<li>but the tools can limit creative experimentation
<ul>
<li>e.g. wireframes shown to & signed off by client even before they get anywhere near design studio</li>
<li>want to avoid setting expectations in the minds of the client</li>
<li>but the wireframe layout gets ingrained in the client’s mind — so difficult to move away from them</li>
<li>big problem if you need to cater for different screens</li>
<li>e.g. start a new claim / edit an existing claim works side by side, but doesn’t fit on mobile — lose the second item below the bottom of the screen</li>
</ul></li>
<li>try to move from documentation to better communication
<ul>
<li>a written description can leave the door option</li>
</ul></li>
<li>visual design:
<ul>
<li>static visual assets (comps) being used as currency</li>
<li>exchanged as specs, blueprints, QA tools</li>
</ul></li>
<li>but these should not be used in place of communication…</li>
<li>it’s impossible to write a functional specification that reflects responsive design
<ul>
<li>especially when technology moves so quickly</li>
</ul></li>
<li>need to do open-ended planning
<ul>
<li>admit that things can change</li>
</ul></li>
<li>but combine graphics tools with code
<ul>
<li>design for the medium, using the medium</li>
<li>use tools like <a href="http://hammerformac.com/">http://hammerformac.com/</a> and <a href="http://vanamco.com/ghostlab/">http://vanamco.com/ghostlab/</a></li>
</ul></li>
<li>go from testing to prototyping, all with the client in the room</li>
<li>but having the client sitting over your shoulder can make a lot of people uncomfortable</li>
<li>many customers still expect to receive static comps as design deliverables
<ul>
<li>are pleasantly surprised when told they’ll receive code</li>
</ul></li>
<li>designers & developers need to work much more closely together — and understand each other’s constraints and aesthetics</li>
<li>static comps can’t demonstrate:
<ul>
<li>liquid layouts</li>
<li>flexible font styling</li>
<li>native forms</li>
</ul></li>
<li>can do atmosphere
<ul>
<li>typography</li>
<li>colour</li>
<li>texture — decorative elements, etc</li>
<li><em>ed.: this is kind of the same as Jeremy’s pattern primer</em></li>
</ul></li>
<li>Andy might start with photoshop for atmosphere, then go to pencil sketches and code examples
<ul>
<li>results can be a little soulless</li>
<li>but nothing stopping going back to photoshop to add detail</li>
</ul></li>
<li>clients love to be involved; to be part of the process
<ul>
<li>sometimes suggestions can add real value</li>
<li>other times they might not… it’s ok to tell them!</li>
</ul></li>
<li>rules
<ul>
<li>never ever share a picture of a web site and just ask for thoughts</li>
<li>don’t do a big reveal after weeks & weeks of waiting — keep client involved all the way through</li>
</ul></li>
<li>try to work physically alongside
<ul>
<li>if not, have daily Skype calls and a shared DropBox</li>
<li>even then, the client gets scared sometimes: “it’s not going to look like that is it?”</li>
</ul></li>
<li>have banned unstructured feedback!
<ul>
<li>don’t accept any feedback via email or phone unless it’s part of a structured feedback session</li>
<li>ask for specific feedback — typography, colours, styles, layout, etc</li>
</ul></li>
<li>don’t underestimate the value of the design input
<ul>
<li>not about ego, but respect for the work</li>
<li>just because the client is paying, doesn’t mean they get to have everything they want</li>
</ul></li>
<li>can set rules about how to receive constructive feedback</li>
<li>take the time to explain the design thinking behind the outputs — clients are then far less likely to want to make changes just to make a mark</li>
<li>host feedback workshops — and use them to get to know the client better</li>
<li>another rule: only people who turn up to design workshops can comment or criticise the designs
<ul>
<li>this includes the CEO :-)</li>
</ul></li>
<li>it’s ok to say that client’s ideas are stupid…</li>
</ul>
<h3 id="ten_commandments_of_modern_web_design">Ten Commandments of Modern Web Design</h3>
<p>Jeffrey Zeldman <a href="https://twitter.com/zeldman">@zeldman</a></p>
<ol>
<li>thou shalt entertain
<ul>
<li><a href="http://panic.com/">Panic’s web site</a> — they’re just apps in dull categories but they have a personality — and therefore a following</li>
<li>a list apart: geeky articles — but have an in-house illustrator</li>
<li>you don’t have to be an “illustrator” to draw — just try it yourself</li>
<li>old flickr used to welcome you in different languages — light touch, but subtly reinforces global reach of photography</li>
</ul></li>
<li>test everything (including assumptions)
<ul>
<li>use Adobe Edge, <a href="http://viljamis.com/blog/2012/remote-preview/">Remote Preview</a> or <a href="http://vanamco.com/ghostlab/">Ghostlab</a></li>
<li>can’t choose breakpoints based on specific screen sizes</li>
<li>recommendation: choose types of devices</li>
</ul></li>
<li>thou shalt iterate
<ul>
<li>milton glaser: what is graphic design? “I move things around until they look right”</li>
<li>the web is always iterating</li>
<li>positioning sharing links on A List Apart:
<ul>
<li>tried to guide people to read down to the bottom before sharing — people stopped sharing</li>
<li>put teeny sharing labels at the top — lots of sharing</li>
</ul></li>
</ul></li>
<li>thou shalt ship
<ul>
<li>if you can’t delegate at the pixel level, you’ll never ship</li>
<li>even if it’s not perfect — you must ship</li>
</ul></li>
<li>engage thy community
<ul>
<li>instagram stumbled when they upset their community by changing their licensing</li>
<li>monotype featuring independent designers on fonts.com — humanising the big company</li>
<li>a list apart: letting people opt-in to showing tweets on blog — until twitter changed their API and it stopped working</li>
</ul></li>
<li>love thy user as thyself
<ul>
<li>think about use case compassionately</li>
<li>don’t make assumptions about amount of content</li>
<li>but do make assumptions about priority</li>
</ul></li>
<li>thou shalt experiment (I think)
<ul>
<li>can play on your own personal site</li>
<li>zeldman.com: trying out content first with big type and no extraneous distractions</li>
<li>followed by 37signals, Medium, USA Today, New York Times, etc</li>
<li>ask how you can take things away from the page?</li>
</ul></li>
<li>thou shalt make magic
<ul>
<li>instagram uploaded pictures in the background while you were still typing the comments</li>
<li>it worked magically fast</li>
</ul></li>
<li>thou shalt prioritise
<ul>
<li><a href="http://m.wikihow.com/Prioritize">how to prioritise</a></li>
<li><a href="http://alistapart.com/article/kick-ass-kickoff-meetings">kick ass kickoff meetings</a></li>
</ul></li>
<li>to thine own self be true
<ul>
<li>hay net — used to be need hay / have hay</li>
<li>but then added lots of extra guff and completely lost the simplicity of the main form</li>
</ul></li>
</ol>
<p>…and this is not religion — it’s only design!</p>
<h3 id="finale">Finale</h3>
<p><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGckCZYcLHWKJplbfnXP4TvkYwZsLn0XKN2_94-ueMWrAQRmuKB5G1AulDBW0cNJnuQsqkxxJD2YBh8x8Kk5GYi550Mm5hr7RtEhSqS3JhtfnIPMSktV7JzbN-MpTGk9T3_RIyRPL6D0M/s1600/male-voice-choir.jpg" imageanchor="1" ><img alt="Welsh Male voice choir" border="0" width="100%" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjoi1HZMkhk9fEg0me5EDVs-YheDq88bQHjrWWV0oiDV9rlj28P5O4HuDZablt_CMMMpLzrYXVtPLoJEHjEJthrj3O8sMlbEG_trpvToEM88W1As6shqqyx3Xz_oxHa3s-r8sSy2Z529pU/s1600/male-voice-choir-small.jpg" /></a><br/>
…singing We’ll Keep A Welcome in the Vales — When You Come Home Again to Wales</p>
<iframe src="//player.vimeo.com/video/80743196" style="max-width: 100%;" width="500" height="281" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe> <p><a href="http://vimeo.com/80743196">Welsh Veterans Male Choir - Handheld 2013</a> from <a href="http://vimeo.com/besquare">Besquare</a> on <a href="https://vimeo.com">Vimeo</a>.</p>Adam Cohen-Rosehttp://www.blogger.com/profile/12286496556944495325noreply@blogger.com0Butetown, Cardiff, UK51.464996705843973 -3.163568973541259851.463760205843975 -3.1660904735412596 51.46623320584397 -3.16104747354126tag:blogger.com,1999:blog-6382212051821902995.post-68901100320774586022013-11-28T13:57:00.000+00:002013-11-28T13:57:37.832+00:00Handheld Conference 2013: port80 fringe event<p><a href="/2012/11/handheld-conference-2012.html">Last year’s Handheld Conference</a> was a great event, with several of the sessions winning awards as the best talks of the year.</p>
<p>This year, it’s got bigger and even comes with a fringe event the night before, in collaboration with <a href="http://www.port80events.co.uk/">Port80 events</a>.</p>
<p>I’ll be blogging the main event sessions later, but here’s my notes from the Handheld mini/port80 event.</p>
<h3 id="the_ethics_of_making_software">The ethics of making software</h3>
<p>Graham Lee <a href="https://twitter.com/secboffin">@secboffin</a></p>
<ul>
<li>XML is like violence: if it doesn’t get you what you want, you’re not using enough of it</li>
<li>EULA: “we make no warranty that on this software” => this sh*t doesn’t work — and we’re not going to tell you until after you’ve bought it</li>
<li>we’re in an industry that wants to be grown-up — we get to choose the moral direction as well as the technical direction</li>
<li>we do have responsibility — raising awareness is the first step</li>
</ul>
<h3 id="modifying_treasure_island">Modifying Treasure Island</h3>
<p>Alyson Fielding <a href="https://twitter.com/alysonf">@alysonf</a></p>
<ul>
<li>what happens if you put technology into a physical book (without a screen)?</li>
<li>making an enchanted object</li>
<li>lilypad arduino works well with books: it uses needle & conductive thread rather than wire & solder so it’s gentler on the book</li>
<li>“the library of lost books”
<ul>
<li>each rescued book is being sent to a different artist to be given a new lease of life</li>
</ul></li>
<li>wanted to hide the technology so it feels like magic</li>
<li>triggering audio in a gesture controlled physical book</li>
<li>what happens if you get a book talking to a phone
<ul>
<li>hide arduino in the spine</li>
<li>zigbee to talk to phone (via Redpark cable)</li>
<li>battery to power it (mainly zigbee…)</li>
<li>accelerometer to detect position</li>
</ul></li>
<li>initial story: book speaks what position it’s in
<ul>
<li>can also tweet…</li>
</ul></li>
<li>further stories: recognising more complex 3D gestures, e.g. a hug</li>
<li>connected with a story engine
<ul>
<li>telling a story based on user interaction</li>
<li>crucially: also respond when the user does something different</li>
</ul></li>
</ul>
<h3 id="why_don8217t_things_just_work_any_more">Why don’t things just work any more?</h3>
<p>Barry Scott <a href="https://twitter.com/bazscott">@bazscott</a></p>
<ul>
<li>fixing things:
<ul>
<li>easy bug reporting — value the people who report bugs</li>
<li>prioritise fixes</li>
</ul></li>
<li>crippled behaviour:
<ul>
<li>flash, linkjacking, doorslams</li>
<li>watch user behaviour — and listen to them</li>
</ul></li>
<li>bastards:
<ul>
<li>sample newspaper website: “the only way I can monetise the site is by getting people to download the app, so I don’t care about showing the content”…</li>
<li>shortsighted, brand will wither, people won’t come back</li>
<li>advertising cigarettes & gambling to kids (or any kind of advertising to 3 year olds…)</li>
</ul></li>
<li>times higher education survey on link rot
<ul>
<li>99% of web pages change in a year</li>
<li>70% of links from 12 years of Harvard Legal are broken</li>
</ul></li>
</ul>
<h3 id="nodecopter">Nodecopter</h3>
<p>Andrew Nesbitt <a href="https://twitter.com/teabass">@teabass</a></p>
<ul>
<li>invented by Felix Geisendörfer in 2012</li>
<li>Parrot AR Drone 2.0</li>
<li>runs busybox linux</li>
<li>node.js module: <code>npm install ar-drone</code></li>
<li>watch out for going out of range
<ul>
<li>the drone will just continue going…</li>
</ul></li>
<li>andrew created a node module to pick up serial input from xbox controller — used to control AR drone</li>
<li>then picked up front-facing camera and displayed on a web page</li>
<li>running both scripts at the same time allows you a first-person control of the drone</li>
<li>make it dance to dubstep:
<ul>
<li>using dance.js to pick up drops in an mp3 from the HTML5 audio API</li>
</ul></li>
<li>face detection from front-facing video
<ul>
<li>using OpenCV on video from the video in the browser</li>
</ul></li>
<li>lots of other examples on nodecopter.com</li>
<li>substack contributes a lot of stuff
<ul>
<li>including virus-copter</li>
<li>scans wifi for other drones — ssh’s to them </li>
</ul></li>
<li>if you attach a phone you can theoretically control the drone from anywhere in the world
<ul>
<li>but you come under the same laws as cruise missiles…</li>
</ul></li>
<li>voxel-drone is a simulated drone inside voxel, a minecraft clone in javascript & webgl
<ul>
<li>but it doesn’t have momentum…</li>
<li>voxel-drone stops instantly</li>
<li>the real drone takes about 2 metres to stop from full speed</li>
</ul></li>
<li>why?
<ul>
<li>teaching programming via engaging javascript</li>
<li>did a coderdojo for 12-15 year old kids</li>
<li>chasing parents around, ballet moves</li>
<li>making controllers from tin foil and makeymakeys</li>
</ul></li>
<li>upcoming events: probably one every month in the UK in the new year</li>
</ul>
Adam Cohen-Rosehttp://www.blogger.com/profile/12286496556944495325noreply@blogger.com0Butetown, Cardiff, UK51.464903129946372 -3.163504600524902351.463666629946374 -3.1660261005249022 51.466139629946369 -3.1609831005249025tag:blogger.com,1999:blog-6382212051821902995.post-37516012907678555642013-11-10T15:45:00.000+00:002013-11-10T15:45:07.026+00:00MomoLondon: MWC2014 Stand Competition Live Final<p>10 companies competing to win a place on the UKTI stand at Mobile World Congress 2014 and press & media activity to go with it. <a href="https://connect.innovateuk.org/web/ictktn">ICT KTN</a>, <a href="http://www.mobilemonday.org.uk">Mobile Monday London</a>, <a href="http://www.ukti.gov.uk/">UKTI</a> and <a href="http://www.cambridgewireless.co.uk/">Cambridge Wireless</a> all work together to whittle down the competitors to a shortlist of 10, all competing for five places on the stand.</p>
<p>All the companies this year were remarkably different — in their approach, their development stage and their presentation styles.</p>
<p>In the audience vote, I went for Changify, but the five who were selected were PeachInc, 5 Tiles, 23 Snaps, Capito and Viewranger.</p>
<p>There’s also an official blog post with pictures <a href="http://www.mobilemonday.org.uk/2013/11/coverage-of-ictktn-live-final-to-win.html">on the Mobile Monday London blog</a>.</p>
<h3 id="red_glasses">Red Glasses</h3>
<p><em>Adam Martin</em>, Founder</p>
<p><a href="http://MyEarthApp.com">http://MyEarthApp.com</a> <a href="https://twitter.com/RedGlassesApps">@RedGlassesApps</a></p>
<ul>
<li>embedding rich content into 3D objects</li>
<li>have built a native 3D engine for iPad that deals with data</li>
<li>also built two sample apps:
<ol>
<li>visualization of magnified Earth heights</li>
<li>showing videos on a 3D globe</li>
</ol></li>
<li>aim to partner with media & content organisations</li>
<li>have built bespoke apps for clients for last 15 years</li>
<li>want to expand to a white-label product</li>
<li>other demos:
<ul>
<li>showing travel time from a point across the globe</li>
<li>luxury retail, where purchasing from</li>
</ul></li>
</ul>
<h3 id="changify_design_for_social_change">Changify: Design for Social Change</h3>
<p><em>Priya Prakash</em>, Founder</p>
<p><a href="http://www.changify.org">http://www.changify.org</a> <a href="https://twitter.com/Changify">@Changify</a></p>
<ul>
<li>basic idea:
<ol>
<li>spot & share ideas for problems</li>
<li>get support from friends & neighbours</li>
<li>ideas get backed by brands & biz</li>
<li>earn credits for making the change</li>
</ol></li>
<li>partnering with Clear Channel to make a digital bus stop
<ul>
<li>crowdsourcing local opinion by voting on screen</li>
<li>touch & NFC</li>
</ul></li>
<li>council get realtime data of reports</li>
<li>running a 3 month trial with Guardian Data at Elephand & Castle</li>
<li>working with councils & local businesses</li>
<li><a href="http://changify.org">http://changify.org</a> has been available for 6 months</li>
<li>also accessible via SMS</li>
</ul>
<h3 id="coveritas">Coveritas</h3>
<p><em>Sean Redmond</em>, CEO</p>
<p><a href="http://www.coveritas.com">http://www.coveritas.com</a> <a href="https://twitter.com/Coveritas">@Coveritas</a></p>
<ul>
<li>based in Bletchley Park</li>
<li>founding team did functional verification of hardware verification</li>
<li>have applied same system to software functional testing</li>
<li>specialise in machine to machine interoperability</li>
<li>uses randomisation & rules (constraints) to generate end to end use case tests
<ul>
<li>3GP took 9,000 hours of test engineering</li>
</ul></li>
<li>looking to partner with domain experts in M2M standards testing</li>
<li>customers are those companies with massive test labs for M2M interoperability</li>
<li>have an annual time-based license model</li>
</ul>
<h3 id="spatialbuzz">SpatialBuzz</h3>
<p><em>Leon Hardwick</em>, Director Global Sales & Marketing; <em>Andrew Blake</em>, CTO</p>
<p><a href="http://www.spatialbuzz.com">http://www.spatialbuzz.com</a> <a href="https://twitter.com/SpatialBuzz">@SpatialBuzz</a></p>
<ul>
<li>cloud-based customer experience management for mobile operators</li>
<li>delivering info on status and capability of network</li>
<li>give the operator an idea of how customers are reacting</li>
<li>can also provide an early warning to operator of issues</li>
<li>mix together operator outage & planned works with crowd-sourced input</li>
<li>can cater for any service delivered geographically</li>
<li>deployed with Telefonica UK & Germany, also Tesco Mobile</li>
<li>benefits seen:
<ul>
<li>reduction in calls</li>
<li>reduction in response times</li>
<li>improving customer satisfaction</li>
</ul></li>
</ul>
<h3 id="peachinc">PeachInc</h3>
<p><em>Dr Daniel Morris</em></p>
<p><a href="http://www.peachinc.com">http://www.peachinc.com</a> <a href="https://twitter.com/PeachInc">@PeachInc</a></p>
<ul>
<li>mobile ticketing using the “MorrisCode” — 2D barcode
<ul>
<li>patented format</li>
</ul></li>
<li>optimised to be read from electronic displays</li>
<li>at the moment PeachInc are the only people who can read them</li>
<li>displays well on small screens</li>
<li>stores a 16 digit number</li>
<li>have built a suite of apps
<ul>
<li>can receive tickets via SMS (even on iPhone)</li>
</ul></li>
<li>also make hardware</li>
<li>will be integrated into a </li>
<li>biggest customer so far Saudi Professional football league</li>
<li>versus QR codes:
<ul>
<li>reads faster and more successfully</li>
<li>reads at 20 frames a second with most mobile cameras</li>
<li>5,000 people at an event with 100% success rate</li>
<li>60,000 football matches in Saudi Arabia with no problems</li>
</ul></li>
</ul>
<h3 id="5_tiles">5-Tiles</h3>
<p><em>Michal Kubacki</em>, Inventor & CEO; <em>Piotr Pieczynski</em>, CFO</p>
<p><a href="http://www.5-tiles.com">http://www.5-tiles.com</a> <a href="https://twitter.com/fivetiles">@fivetiles</a></p>
<ul>
<li>keyboard for Android</li>
<li>business model based on app sales & licensing deals</li>
<li>works well for smartwatches (with a touch screen)
<ul>
<li>takes a small amount of screen space</li>
<li>have a demo on i’m watch Android smartwatch</li>
</ul></li>
<li>looking to port to Windows & iOS</li>
<li>also getting keyboard tested by RNIB</li>
<li>currently have 100s of users on Android
<ul>
<li>and 4,000 downloads of the training app</li>
</ul></li>
<li>takes about 30-45 minutes to learn the combinations</li>
<li>working to make the learning curve lower all the time</li>
</ul>
<h3 id="23snaps">23snaps</h3>
<p><em>Meaghan Fitzgerald</em>, CMO; <em>Ivailo Jordanoc</em>, Co-Founder</p>
<p><a href="http://www.23snaps.com">http://www.23snaps.com</a> <a href="https://twitter.com/23Snaps">@23Snaps</a></p>
<ul>
<li>mobile-first private social network for families</li>
<li>spans across different generations</li>
<li>also organise photos by date & location</li>
<li>500K registered users</li>
<li>posting one photo every second</li>
<li>make money by selling photo print products</li>
<li>have users in 179 countries</li>
<li>going to be launching in Brazilian Portuguese</li>
<li>content owned by creators</li>
<li>also provide a one-click export of all content</li>
<li>wanting to meet consumer electronics, mobile networks, etc</li>
<li>don’t want advertising next to family photos</li>
<li>may go for other monetization such as premium features</li>
</ul>
<p>Available <a href="http://georiot.co/1O6p">for iPhone</a>, <a href="https://play.google.com/store/apps/details?id=com.snaps23.android">Android</a>, <a href="http://apps.microsoft.com/windows/en-gb/app/23snaps/8d8b50ab-fc02-49c5-a648-06b8fd586f9f">Windows 8</a>, email, web and printed books!</p>
<h3 id="capito_systems">Capito Systems</h3>
<p><em>Tony Ballardie</em>, CEO</p>
<p><a href="http://www.capitosystems.com">http://www.capitosystems.com</a> <a href="https://twitter.com/CapitoSystems">@CapitoSystems</a></p>
<ul>
<li>speech assistant technology specifically for mobile commerce</li>
<li>about to sign first customer</li>
<li>language variations, background noise?
<ul>
<li>have focussed on language understanding rather than speech recognition</li>
</ul></li>
<li>aiming to license to mobile commerce companies</li>
<li>have built support tools to enable customers to build up a speech corpus of domain language</li>
</ul>
<h3 id="viewranger">Viewranger</h3>
<p><em>Ben Howard</em>, Marketing & Sales Exec; <em>Craig Wareham</em>, CEO & Co-Founder</p>
<p><a href="http://www.viewranger.com">http://www.viewranger.com</a> <a href="https://twitter.com/viewranger">@viewranger</a></p>
<ul>
<li>digital mobile platform for outdoor activities</li>
<li>interest-based social network</li>
<li>publishing platform</li>
<li>trail guide marketplace</li>
<li>over 2 million app downloads</li>
<li>used by over 100 search & rescue teams in UK, Ireland, USA, Canada, Germany, Ukraine</li>
<li>work with 22 mapping agencies & trail guides from 400 brands
<ul>
<li>including CAMRA :-)</li>
</ul></li>
<li>wanting to engage with handset OEMs & wearable manufacturers</li>
<li>earn revenue through:
<ul>
<li>premium in-app data & services (maps & guides)</li>
<li>premium services & analytics for brands</li>
<li>syndication of content</li>
<li>could go for advertising in the future (have steered away so far to keep UX well)</li>
</ul></li>
<li>main competitors are still dedicated devices</li>
<li>there are sport-based apps that seem to be fragmenting the need</li>
</ul>
<p>Available for <a href="http://georiot.co/pYe">iPhone & iPad</a>, <a href="https://play.google.com/store/apps/details?id=com.augmentra.viewranger.android">Android</a> and <a href="http://store.ovi.com/content/26345">Nokia</a></p>
<h3 id="ubiapps_nquiring_minds">UBIAPPS (Nquiring Minds)</h3>
<p><em>Nick Allot</em>, CEO</p>
<p><a href="http://www.ubiapps.com">http://www.ubiapps.com</a> <a href="https://twitter.com/nallott">@nallott</a></p>
<ul>
<li>secure end to end framework for managing apps both online & offline</li>
<li>server management + enterprise-grade security is proprietary</li>
<li>protocol is open-source (JSON-RPC over HTTP)</li>
<li>all nodes are two-way — can manage apps and IoT devices using the same system</li>
<li>easy & quick to integrate on any device</li>
<li>looking to work with system integrators</li>
<li>seen most interest so far from asset tracking systems</li>
</ul>
<hr/>
<h3 id="announcements">Announcements</h3>
<ul>
<li>Vision Mobile Developer Economics Survey
<ul>
<li><a href="http://visionmobile.com/DE1Q14MoMoLon">http://visionmobile.com/DE1Q14MoMoLon</a></li>
</ul></li>
<li>IDEALondon offering desks, mentoring & support for start-ups and SMEs working on new products & services
<ul>
<li>apply at <a href="http://idea-london.com">http://idea-london.com</a></li>
</ul></li>
</ul>
Adam Cohen-Rosehttp://www.blogger.com/profile/12286496556944495325noreply@blogger.com0tag:blogger.com,1999:blog-6382212051821902995.post-90174270992839828862013-10-29T10:58:00.000+00:002013-10-30T22:33:23.275+00:00Droidcon 2013<p>I went to Droidcon UK last week and my brain is still catching up… So many new ideas (and good ones too!).</p>
<p>I’ve put together <a href="http://blog.cohen-rose.org/search/label/droidcon2013">several posts from Droidcon 2013</a> — this one gathers all the short notes that I took that didn’t deserve a full post of their own. They’re still worth checking out though!</p>
<p>A big thank you to the organisers and the contributors who made it all possible, especially Thibaut Rouffineau for whom this is his last Droidcon as organiser.</p>
<h3 id="cupboard_sqlite_access">Cupboard SQLite access</h3>
<p><a href="https://bitbucket.org/qbusict/cupboard/wiki/GettingStarted">https://bitbucket.org/qbusict/cupboard/wiki/GettingStarted</a></p>
<ul>
<li>easier design than ORMlite</li>
<li>works better with Android framework</li>
<li>doesn’t require a custom activity</li>
</ul>
<h3 id="testfairy">testfairy</h3>
<p><a href="http://www.testfairy.com/">http://www.testfairy.com/</a></p>
<ul>
<li>send your APK to them, they instrument it and return it to you</li>
<li>or you can ask them to sign it themselves and manage the testers for you</li>
<li>results include one frame per second video of app UI, synced to logs and any exceptions</li>
</ul>
<h3 id="would_you_code_blindfolded">would you code blindfolded?</h3>
<p><em>Gonçalo Silva</em>, Novoda <a href="https://twitter.com/gnorsilva">@gnorsilva</a></p>
<ul>
<li>Pretotype — most cost effective prototype
<ul>
<li>e.g. using wooden blocks wrapped with paper to test mobile device ideas — use in real world situations — <a href="http://www.computerhistory.org/revolution/mobile-computing/18/321/1648">as used by Jeff Hawkins</a> to test the PalmPilot</li>
</ul></li>
<li><a href="http://www.lighttable.com/">Light Table IDE</a> — animate your code with live test results</li>
<li>estimations have a very limited lifetime
<ul>
<li>valid up to a month, maybe two</li>
<li>more of a gut feeling rather than a specific time</li>
<li>just to help you and guide you, doesn’t tell you when you’ll be complete</li>
<li>don’t adjust your estimates — look at the performance in retrospectives</li>
<li>make estimates based on difficulty, not time</li>
<li>anything bigger than a 4 should be broken down into smaller pieces</li>
</ul></li>
</ul>
<h3 id="android_script">android script</h3>
<p><a href="http://androidscript.org/">http://androidscript.org/</a></p>
<ul>
<li>Free app on <a href="https://play.google.com/store/apps/details?id=com.smartphoneremote.androidscriptfree">google play</a></li>
<li>or <a href="https://play.google.com/store/apps/details?id=com.smartphoneremote.ioioscript">£0.65 version available</a> with SmartWatch, IOIO and LEGO Mindstorms integration</li>
</ul>
<h3 id="productising_a_modern_android_device">productising a modern Android Device</h3>
<p><em>Craig Arnush</em>, <a href="http://www.vertu.com">Vertu</a></p>
<p>Vertu sell hand-made Android phones for £7,000+…</p>
<ul>
<li>made a changes to Android to allow secret alert + new vertu key
<ul>
<li>secret alert makes the phone pretend to be dead (including the home button)</li>
<li>modified phone window manager</li>
</ul></li>
<li>added own analytics (couldn’t rely on Google etc, as wanted security)</li>
<li>have an internal Vertu API
<ul>
<li>if interested, get in touch</li>
</ul></li>
<li>tools: use <a href="http://opengrok.github.io/OpenGrok/">OpenGrok</a></li>
</ul>
<h3 id="tesco_hudl">Tesco hudl</h3>
<p><a href="http://novoda.com">Novoda</a> were showing off the hudl — a cheap Android tablet sold by Tesco.</p>
<p>Apparently Novoda were involved at a fairly deep level in the project, which explains why it’s actually pretty good!</p>
<h3 id="demo_camp">demo camp</h3>
<p>Each presenter had a couple of minutes to show off their app or service — the entries were judges by a panel of venture capitalists offering investment.</p>
<h4 id="amateur_football_management">amateur football management</h4>
<ul>
<li>http://football-tracker.com</li>
<li>manage leagues & players</li>
</ul>
<h4 id="5_tiles_keyboard">5-tiles keyboard</h4>
<p><a href="http://etaoisystems.com/">http://etaoisystems.com/</a></p>
<p><a href="https://play.google.com/store/apps/details?id=touchKeyboard.five&hl=en">Download on Google Play</a></p>
<ul>
<li>normal users reaching 40wpm — almost twice as a normal keyboard</li>
<li>speed freaks reaching 100wpm</li>
<li>works on small devices — ported to I’m Watch smartwatch: immediately useable</li>
</ul>
<h4 id="apiomat">apiomat</h4>
<p><a href="http://www.apiomat.com/">http://www.apiomat.com/</a></p>
<ul>
<li>easy to create APIs</li>
<li>graphical UI to create basic database w/relations</li>
<li>also does push notifications</li>
<li>auto-generates code for iOS, Android, PHP, Python, etc</li>
</ul>
<h4 id="scoopt">scoopt</h4>
<p><a href="http://scoopt.com/">http://scoopt.com/</a></p>
<ul>
<li>fashion facebook</li>
<li>retailer with fashion leads</li>
</ul>
<h4 id="indoors">indoo.rs</h4>
<p><a href="http://indoo.rs/">http://indoo.rs/</a></p>
<ul>
<li>got 2-5m just using wi-fi in business design centre (on Android)</li>
<li>iOS can’t use wi-fi positioning as Apple don’t provide wi-fi signal strength</li>
<li>6 patents</li>
<li>support crowd-sourced mapping</li>
<li>€100/mth for access to SDK</li>
</ul>
<h4 id="apponsor">apponsor</h4>
<p><a href="http://apponsor.com/">http://apponsor.com/</a></p>
<ul>
<li>in-app sponsorship by signing up to newsletter</li>
<li>automatically fetches user name and (verified) email address from device</li>
<li>requires read context, read local account + internet permissions</li>
</ul>
<h4 id="pogo_from_activ8rlives">pogo from Activ8rlives</h4>
<p><a href="http://www.activ8rlives.com/">http://www.activ8rlives.com/</a></p>
<ul>
<li>import healthcare data from devices that require USB</li>
<li>patients no longer have PCs to upload their data and don’t have the latest Android or iPhone devices to pick up Bluetooth LE or </li>
<li>instead have created a hardware box that converts USB into audio jack so can be picked up by an app on even legacy devices</li>
<li><a href="http://www.indiegogo.com/projects/pogo-software-development-kit">indiegogo campaign</a></li>
</ul>
<h4 id="genymotion">genymotion</h4>
<p><a href="http://www.genymotion.com/">http://www.genymotion.com/</a></p>
<ul>
<li>native Android emulation for app testing & presentation</li>
<li>integrates with laptop camera & fake location services</li>
<li>introducing pro version next month</li>
</ul>
<h4 id="capturatalk">CapturaTalk</h4>
<p><a href="http://www.capturatalk.com/">http://www.capturatalk.com/</a></p>
<ul>
<li>assistive services for students, esp. disabled & dyslexic
<ul>
<li>also useful for those with English as a second language</li>
</ul></li>
<li>OCR text into an editable format</li>
<li>can get word definitions, including easily confusable words</li>
<li>being sold to schools</li>
</ul>
<h4 id="nobu_byod">NOBU BYOD</h4>
<ul>
<li>remote android workspace for any device</li>
<li>provides easily securable data for enterprise</li>
<li>uses multi-user android servers</li>
<li>have iOS client + HTML5 client</li>
<li>can be run inside a data centre</li>
</ul>
<p>NOBU won the demo camp top prize.</p>Adam Cohen-Rosehttp://www.blogger.com/profile/12286496556944495325noreply@blogger.com2tag:blogger.com,1999:blog-6382212051821902995.post-59629617510626018992013-10-29T10:34:00.003+00:002013-10-29T10:58:21.108+00:00Droidcon 2013: App to App — design & surface local APIs<p><em>Ty Smith</em>, Twitter (ex-Evernote) <a href="https://twitter.com/tsmith">@tsmith</a></p>
<ul>
<li>e.g. Samsung Note S Note app — locally synced with S Note grouping in built-in Evernote</li>
<li>tapping on a note in Evernote, opens it in S Note; then back button goes back to Evernote</li>
</ul>
<h4 id="intents">intents</h4>
<ul>
<li>when sharing content to another activity, need to provide URI permission</li>
<li>when offering edit, you shouldn’t send your original file
<ul>
<li>the third party might crash, corrupt, etc</li>
</ul></li>
<li>also can’t rely on setResult</li>
<li>user might hit back and think their changes will be saved</li>
<li>set last modified — when activity returns can check to see if changed — then offer user to save if they want</li>
</ul>
<h4 id="content_providers">content providers</h4>
<ul>
<li>can provide temporary permissions to access provider in an intent</li>
<li>can pass through file handles</li>
</ul>
<h4 id="account_manager">account manager</h4>
<ul>
<li>see an example in the open source github app</li>
<li>can request an authenticated token</li>
<li>makes accounts visible to user in a standard place</li>
<li>can do OAuth1 or 2</li>
<li>has method to refresh OAuth2 token automatically</li>
</ul>
<h4 id="sync_adapter">sync adapter</h4>
<ul>
<li>does a lot of management for you automatically (network, battery)</li>
<li>again, can expose to third parties</li>
<li>can be scheduled & started with cloud messaging</li>
<li>requires content provider & account manager</li>
<li><strong>but</strong> watch out for all the syncs coming at once
<ul>
<li>especially as networks often send out heartbeats on the hour every hour</li>
<li>devices wake up and think: I might as well sync now…</li>
<li>Evernote received DDoS load spikes…</li>
</ul></li>
<li>so add a jitter to the sync period (random 1hr -> 1hr5min)</li>
<li>also add a “wait until” in the sync adapter — do your own checking</li>
</ul>
<h4 id="bound_service">bound service</h4>
<ul>
<li>much stronger contract than others</li>
<li>other apps need to include your AIDL source code</li>
<li>example: plugins for DashClock</li>
</ul>
<h4 id="tips">tips</h4>
<ul>
<li>testing is hard
<ul>
<li>use mock integrations</li>
<li>hard to debug integrations</li>
</ul></li>
<li>add analytics to the lower level components so you know what’s going on
<ul>
<li>might want to consider rate limiting</li>
</ul></li>
<li>use crash reporting (plug for crashlytics, now owned by twitter)</li>
</ul>
Adam Cohen-Rosehttp://www.blogger.com/profile/12286496556944495325noreply@blogger.com0tag:blogger.com,1999:blog-6382212051821902995.post-3298619012194891752013-10-29T10:29:00.003+00:002013-10-29T10:58:21.100+00:00Droidcon 2013: Awesomeness Checklist<p><em>Taylor Ling</em>, <a href="http://AndroidUIUX.com">http://AndroidUIUX.com</a></p>
<ul>
<li>attention to detail</li>
</ul>
<h4 id="animations">animations</h4>
<ul>
<li>find balance between subtle & noticeable</li>
<li>should provide information</li>
<li>make sure to use standard animations</li>
<li>e.g. don’t change root screen exit — otherwise users don’t know what’s happened (why was that different?)</li>
</ul>
<h4 id="feedback">feedback</h4>
<ul>
<li>microinteractions: dan saffer</li>
<li>visual feedback — show highlighted touch area when pressed down (and ensure that the areas are big enough)</li>
<li>watch out for dialogs — and make sure there’s no ambiguous buttons</li>
<li>e.g. preventing screenshots — at least the user why you have done so</li>
<li>need to make the rules of the app visible</li>
<li>for side menus, it’s important to push the current view into the background when the menu appears
<ul>
<li>make it darker / blurred</li>
</ul></li>
</ul>
<h4 id="help">help</h4>
<ul>
<li>quick tutorial: introduction of the <em>value</em> of the app</li>
<li><strong>not</strong> how to use the app</li>
<li>have a help section (offline if possible)</li>
</ul>
Adam Cohen-Rosehttp://www.blogger.com/profile/12286496556944495325noreply@blogger.com0tag:blogger.com,1999:blog-6382212051821902995.post-46683797812715364472013-10-29T10:28:00.002+00:002013-10-29T11:09:10.962+00:00Droidcon 2013: Responsive Design for Android<p><em>Juhani Lehtimäki</em>, Smashing Android UI</p>
<p>Presentation <a href="http://tinyurl.com/droidcon-responsive">available online</a></p>
<ul>
<li>alternative to master/detail — grid view
<ul>
<li>works the same way with adapters</li>
<li>can adjust number of columns in values to adjust on screen size</li>
<li>use it as an easy way to extend the UI without a huge redesign</li>
<li>also useful for inspiring designers to take the design further</li>
</ul></li>
<li>need to figure out where the relayout/break points are?
<ul>
<li>need to talk about what is the screen size for this layout to work</li>
<li>don’t need to talk about tablets or phones</li>
</ul></li>
<li>juhani likes to do the large screen first
<ul>
<li>makes you think about whole picture if there would be enough space</li>
</ul></li>
<li>android design in action from google
<ul>
<li>different layers of design:</li>
<li>information design — all you</li>
<li>interaction design — all holo/android
<ul>
<li>100% chance users use other Android apps</li>
<li>tiny chance they use other platforms</li>
<li>optimise for user experience, not app consistency across platforms </li>
</ul></li>
<li>visual design — mixed</li>
</ul></li>
<li>use the default components!
<ul>
<li>but don’t components that are not needed for the app</li>
</ul></li>
<li>action bar gives you lots of things for free
<ul>
<li>adjusts for screen space automatically</li>
<li>components work across lots of devices — tested!</li>
<li>also hold down item gives tooltip</li>
</ul></li>
<li>best app for design on android right now: <a href="https://play.google.com/store/apps/details?id=ch.bitspin.timely&hl=en_GB">timely alarm clock</a>
<ul>
<li>and follows all android guidelines!</li>
</ul></li>
<li>can fade out the action bar when content scrolls up</li>
<li>use Android Asset Studio to show how 9 patch graphics work
<ul>
<li>designers can check online</li>
</ul></li>
<li>use fragments from support package even when targetting 4+</li>
<li>decouple front end from backend
<ul>
<li><a href="https://github.com/greenrobot/EventBus">Greenrobot Event Bus</a></li>
<li><a href="https://github.com/square/otto">Square Otto</a></li>
<li>data manager -> bus -> fragment</li>
</ul></li>
<li>when fragment starts it queries for data by id
<ul>
<li>fragment should ask for it</li>
<li>manager should respond to bus with id when ready</li>
<li>fragment subscribes when it’s around and unsubscribes when it goes away</li>
<li>so fragment can then request data when it’s told that id is ready</li>
</ul></li>
<li><a href="http://jimulabs.com">http://jimulabs.com</a> — lets you change layouts on the fly</li>
<li>make sure your design team <strong>uses</strong> android devices
<ul>
<li>at least for a couple of weeks!</li>
</ul></li>
<li>use standard components and follow guidelines
<ul>
<li>won’t just cost in coding — think about all the testing!</li>
</ul></li>
<li>think scalable from the first wireframe</li>
</ul>Adam Cohen-Rosehttp://www.blogger.com/profile/12286496556944495325noreply@blogger.com0tag:blogger.com,1999:blog-6382212051821902995.post-83939995916110030452013-10-29T10:28:00.001+00:002013-10-29T11:13:02.613+00:00Droidcon 2013: Conquering concurrency — bringing the reactive extensions to the Android platform<p><em>Matthias Käppler</em>, Soundcloud <a href="https://twitter.com/mttkay">@mttkay</a></p>
<p>Matt has written <a href="http://mttkay.github.io/blog/2013/08/25/functional-reactive-programming-on-android-with-rxjava">his own blog post</a> to accompany his talk.</p>
<ul>
<li>this talk is about functional reactive programming</li>
<li>but without talking about monads or other mathematical terms</li>
<li>example: a list view with data from the server
<ul>
<li>lots of concurrency</li>
<li>callbacks, broadcast receivers, notifications all over the place</li>
</ul></li>
<li>wanted a single event handling model with natural concurrency</li>
<li>problem with imperative programming is shared state across whole app</li>
<li>doesn’t work with multiple threads and concurrency</li>
<li>programming style should reflect the event-based, network-dependent world that apps live in</li>
<li>AsyncTask has changed several times in its implementation
<ul>
<li>since ICS it uses a single-threaded executor</li>
<li>prone to leaking Context since you have to manage references yourself</li>
<li>also has no error handling built-in</li>
<li>can’t have long-running tasks that depend on each other</li>
</ul></li>
<li>event buses (otto, green robot) also have downsides:
<ul>
<li>designed around shared global state</li>
<li>still no ability to chain tasks</li>
<li>no built-in error handling</li>
</ul></li>
</ul>
<h4 id="rxjava">RxJava</h4>
<ul>
<li><a href="http://github.com/netflix/rxjava">RxJava</a>
<ul>
<li>actually a port of .net Rx extensions invented at Microsoft 5 years ago for Windows Phone</li>
</ul></li>
<li>Observable<T> ::onNext(T) ::onCompleted ::onError(Throwable)</li>
<li>subscribeOn(scheduledThread) / observeOn(scheduledThread)</li>
<li>have lots of useful schedulers e.g. observer on main Android thread</li>
<li>also have map and mapMany to compose observables</li>
</ul>
<h4 id="how_to_use_it">how to use it</h4>
<ul>
<li>soundcloud built android extensions</li>
<li><a href="http://gihub.com/soundcloud/rxjava">http://gihub.com/soundcloud/rxjava</a></li>
<li>dumb fragments</li>
<li>service objects implement business objects</li>
<li>custom operators for paging content in list views etc</li>
<li>AndroidObservables.fromFragment
<ul>
<li>guarantees that it won’t leak but will maintain connection to a rotated activity</li>
</ul></li>
<li><p>e.g.
<pre>
<code>
fetchModels(request) {
return fetchResponse(request).mapMany((response) -> {
return mapResponse(request, response);
})
}
</code></pre></p></li>
<li><p>simple uniform event model</p></li>
<li>unit tests don’t need to run background threads</li>
<li>apply it in a focussed way</li>
<li>don’t replace callbacks — used in service layer for API requests</li>
<li>use proguard!</li>
</ul>
<h4 id="downsides">downsides</h4>
<ul>
<li>java 6 anonymous classes are very verbose</li>
<li>deep call stacks in debugging</li>
<li>slight increase in GC activity (but didn’t have any noticeable performance impact)</li>
<li>learning curve
<ul>
<li>but can use similar things for objective-c and server side (finagle & twitter futures) so can share knowledge</li>
</ul></li>
</ul>
<h4 id="references">references</h4>
<ul>
<li><a href="http://rx.codeplex.com">http://rx.codeplex.com</a></li>
<li><a href="http://www.reactivemanifesto.org">http://www.reactivemanifesto.org</a></li>
<li><a href="http://paulstovell.com/blog/reactive-programming">http://paulstovell.com/blog/reactive-programming</a></li>
</ul>Adam Cohen-Rosehttp://www.blogger.com/profile/12286496556944495325noreply@blogger.com0tag:blogger.com,1999:blog-6382212051821902995.post-27893220478348574162013-10-29T10:23:00.000+00:002013-10-29T10:58:21.098+00:00Droidcon 2013: Teaching Your Client Android Design; or, Ridding the World of iPhoneys<p><em>Kenton Price</em>, Little Fluffy Toys <a href="http://www.littlefluffytoys.mobi">http://www.littlefluffytoys.mobi</a></p>
<p>Presentation <a href="http://j.mp/1fZRL0x">available online</a></p>
<h4 id="summly">Summly</h4>
<ul>
<li>Android has algorithm on client as Android screens come in different sizes</li>
<li>insisted that wanted back button in app</li>
<li>got google developer advocate support to say no</li>
<li>also added various improvements, several of which </li>
</ul>
<h4 id="bbc_weather">BBC Weather</h4>
<ul>
<li>again received an iPhone design from the agency</li>
<li>identified areas that should be more Android-y</li>
<li>added additional Android features
<ul>
<li>NFC support — share locations over NFC</li>
<li>lock screen widget, daydream mode, dashclock integration</li>
</ul></li>
<li>don’t need to shout about these integrations, as early adopters will do it for you</li>
<li>first release: got slated on play store as there was no landscape mode
<ul>
<li>tablet users will review you (no easy way to exclude…)</li>
<li>upset users are far more likely to leave reviews</li>
<li>designers hadn’t included landscape as it was not seen as a big use case</li>
</ul></li>
<li>about > version code > tap 7 times > easter egg :-)</li>
<li>reviews: “BBC does it better on Android for once”
<ul>
<li>made design Android native</li>
<li>then added nice Android features</li>
</ul></li>
<li>even the BBC were surprised about what could be done</li>
</ul>
<h4 id="play_store_beta_management">Play Store beta management</h4>
<ul>
<li>assign a Google Plus community to different (alpha/beta/etc)</li>
<li>accept/reject membership</li>
<li>LFT used to use HockeyApp, but this is much better</li>
</ul>
<h4 id="how_to">how to</h4>
<ul>
<li>get the product manager on board</li>
<li>get graphic designers on board</li>
<li>compare to best-of-breed</li>
<li>get the ActionBar absolutely right</li>
</ul>
<h4 id="qa">Q&A</h4>
<ul>
<li>some designers feel that they haven’t designed it if there’s still native components visible
<ul>
<li>a lots of designers got burned by the change from iOS 6 to 7</li>
<li><em>maybe they’ve learned their lesson now!</em></li>
</ul></li>
<li>supporting older Android
<ul>
<li>support 240x320 as the smallest, but was difficult to work around lack of bucket design sizes (3+)</li>
<li>couldn’t test across everything</li>
<li>used ActionBarSherlock</li>
<li>lots of graceful degradation</li>
</ul></li>
</ul>
Adam Cohen-Rosehttp://www.blogger.com/profile/12286496556944495325noreply@blogger.com0tag:blogger.com,1999:blog-6382212051821902995.post-943143029920644592013-10-29T10:21:00.000+00:002013-10-29T10:58:21.118+00:00Droidcon 2013: Ship Faster With Open Source from Square<p><em>Pierre-Yves Ricau</em>, Square <a href="https://twitter.com/piwai">@piwai</a></p>
<p>Sample project: <a href="http://github.com/pyricau/shipfaster">http://github.com/pyricau/shipfaster</a></p>
<ul>
<li>look out for talk later at devoxx about how square got rid of fragments</li>
<li>debug panel in app, slides from right
<ul>
<li>lets you adjust the settings</li>
</ul></li>
</ul>
<h4 id="dagger_dependency_injection">dagger dependency injection</h4>
<p><a href="https://github.com/square/dagger">https://github.com/square/dagger</a></p>
<ul>
<li>create object graph in application</li>
<li>injection happens in activity <code>onCreate</code> (prob. base class)</li>
<li>can switch between modules when create graph (e.g. using build settings)</li>
<li>resolves dependencies at compile time as it’s annotation based
<ul>
<li>don’t get errors at run time</li>
<li>doesn’t use reflection so faster</li>
</ul></li>
<li>also generates dot files so can view dependency graph</li>
</ul>
<h4 id="otto">otto</h4>
<p><a href="https://github.com/square/otto">https://github.com/square/otto</a></p>
<ul>
<li>(the bus driver in the Simpsons…)</li>
<li>broadcasts are not type safe and fragile</li>
<li>define event classes</li>
<li>the bus then calls the event methods for all subscribers</li>
<li>also provides an event logger</li>
<li>events are called synchronously</li>
</ul>
<h4 id="dagger_otto_together">dagger & otto together</h4>
<ul>
<li>use a custom annotation with dagger bindings</li>
<li>can then add subscription/unsubscription easily</li>
</ul>
<h4 id="robolectric">robolectric</h4>
<p><a href="http://robolectric.org/">http://robolectric.org/</a></p>
<ul>
<li>main developer now at square…</li>
</ul>
<h4 id="retrofit_rest_client">retrofit REST client</h4>
<p><a href="https://github.com/square/retrofit">https://github.com/square/retrofit</a></p>
<ul>
<li>define an interface for API</li>
<li>methods take a callback method</li>
<li>callback will happen on UI thread</li>
<li>suggestion: use otto bus to fire events on return</li>
<li>create a RestAdapter and plug it in using dagger</li>
<li>has a log level to show you all headers</li>
<li>also works with protocol buffers</li>
<li>async by default, but can also do sync if you want to do multiple serialized calls from a background thread</li>
<li>can use underneath robospice</li>
</ul>
<h4 id="picasso">picasso</h4>
<p><a href="https://github.com/square/picasso">https://github.com/square/picasso</a></p>
<ul>
<li>image loader from URLs</li>
<li>placeholder & error images</li>
<li>resize dimensions</li>
<li>don’t need to deal with http or caching at all!</li>
<li>has debug indicator corners on images:
<ul>
<li>green from memory</li>
<li>yellow from filesystem</li>
<li>red from network</li>
</ul></li>
<li>can apply transforms to images</li>
<li>handles large images well</li>
<li>adjusts threads for downloading & encoding according to network status (wifi, 3G)</li>
<li>but may not respect cache expiry headers… (poss only when not used with OkHttp)</li>
</ul>
<h4 id="okhttp">OkHttp</h4>
<p><a href="https://github.com/square/okhttp">https://github.com/square/okhttp</a></p>
<ul>
<li>Android has switched from Apache HttpClient to URLConnection</li>
<li>HttpClient no longer maintained in Android :-(</li>
<li>OkHttp now part of AOSP!</li>
<li>create a client and retrieve an HttpURLConnection</li>
<li>used by retrofit and picasso by default</li>
</ul>
<h4 id="more_info_available">more info available</h4>
<ul>
<li><a href="http://square.github.io">http://square.github.io</a></li>
<li><a href="http://piwai.info">http://piwai.info</a></li>
</ul>
Adam Cohen-Rosehttp://www.blogger.com/profile/12286496556944495325noreply@blogger.com0tag:blogger.com,1999:blog-6382212051821902995.post-44881994176138098092013-10-29T10:19:00.000+00:002013-10-29T10:58:21.103+00:00Droidcon 2013: Gradle for Android<p><em>Hans Dockter</em>, CEO Gradleware & Founder of Gradle <a href="https://twitter.com/hansd">@hansd</a></p>
<p><a href="http://gradle.org">http://gradle.org</a></p>
<p><a href="http://tools.android.com/tech-docs/new-build-system">http://tools.android.com/tech-docs/new-build-system</a></p>
<h4 id="buildtypes">buildTypes</h4>
<ul>
<li>automatically picks up different source & resource directories</li>
<li>can add code specific (e.g. setting constants)</li>
<li>can adjust settings across multiple tasks</li>
<li>automatically creates new tasks (e.g. packageTest, packageStaging)</li>
<li>allows different dependencies for different types</li>
</ul>
<h4 id="productflavors">productFlavors</h4>
<ul>
<li>just like build types, but another axis</li>
<li>can alter package name</li>
<li>extends tasks further (e.g. installFreeTest, installPaidStaging)</li>
<li>configure different things than buildTypes (not proguard, etc)</li>
</ul>
<h4 id="flavorgroups">flavorGroups</h4>
<ul>
<li>allows unlimited extension</li>
<li>e.g. ARM/intel</li>
<li>tasks allow you to run groups of things — e.g. test all debug builds</li>
</ul>
<h4 id="other_features">other features</h4>
<ul>
<li>gradle wrapper
<ul>
<li>allows specifying the version of gradle in source control</li>
</ul></li>
<li>additional plugins
<ul>
<li><a href="https://www.manymo.com/">manymo</a> — devices in the cloud
<ul>
<li>has gradle plugin to run tests against selections of their devices</li>
</ul></li>
</ul></li>
<li>has a rich model & deep API that allows additional scripts in build
<ul>
<li>e.g. real-time warning if a test runs for longer than 20ms</li>
</ul></li>
<li>can combine with wrapper to have your own custom gradle installation
<ul>
<li>put scripts in .init of gradle installation to apply to all builds</li>
</ul></li>
<li>Android Studio picking up gradle built types
<ul>
<li>so can switch and see effects in the visual designer</li>
</ul></li>
<li>in future want to specify virtual devices in gradle
<ul>
<li>so IDE just executes gradle</li>
<li>IDE has less to do :-)</li>
</ul></li>
</ul>
Adam Cohen-Rosehttp://www.blogger.com/profile/12286496556944495325noreply@blogger.com0tag:blogger.com,1999:blog-6382212051821902995.post-89026805856608079732013-10-29T09:46:00.001+00:002013-10-29T10:58:21.114+00:00Droidcon 2013: Crafting Unique, Delightful Apps<em>Dan Lew</em> <a href="https://twitter.com/danlew42">@danlew42</a> & <em>Chris Arvin</em> <a href="https://twitter.com/meinhyperspeed">@meinhyperspeed</a>, Expedia<br />
<ul>
<li>created a sample app to show ideas: <a href="http://goo.gl/XCyLWl">http://goo.gl/XCyLWl</a></li>
<li>default holo vs customized UI</li>
<li>finding interesting ways to interact</li>
<li>holo is great for developers, but need to extend it to add character</li>
<li>designer should build on how android looks, feels & works
<ul>
<li>e.g. cards, vertically sliding content</li>
</ul>
</li>
<li><strong>build from user’s prior Android experience</strong>
<ul>
<li><em>i.e. don’t put brand consistency ahead of platform consistency</em></li>
</ul>
</li>
</ul>
<h4 id="animations">
animations</h4>
<ul>
<li>android apps move: so should your mockups!</li>
<li>really important for communication as a designer</li>
<li>tools for designers: after effects, html/css + transforms, quartz composer (but steep learning curve)</li>
<li>generally requires a little bit of coding knowledge but no too much</li>
<li>animations gives lots of visual clues
<ul>
<li>e.g. expanding an item in a list to go to detail</li>
</ul>
</li>
</ul>
<h4 id="working_together">working together</h4>
<ul>
<li>developer first reaction is generally: how am I going to do this?</li>
<li>takes a few minutes to start to get to grips — it will take more work…</li>
<li>first need to really understand what the designer is going for</li>
<li>interesting UI = a lot more development</li>
<li>work on the big stuff first — usually the animation
<ul>
<li>makes sure that the view hierarchy is right</li>
<li>need to think a few steps ahead</li>
</ul>
</li>
<li>need to ensure that animation performs
<ul>
<li>use translations rather than layout changes</li>
<li>use GPU overlay to help with effects and performance</li>
</ul>
</li>
<li>communicate:
<ul>
<li>what’s going to be a challenge?</li>
<li>what can we make easier?</li>
<li>what do we have to cut entirely?</li>
<li>come up with 5-10 different options</li>
</ul>
</li>
<li>e.g. rounded corners done with 9 patch as quick fix</li>
</ul>
<h4 id="polishing">
polishing</h4>
<ul>
<li>developers often get it close enough but not quite right</li>
<li>designer needs to communicate effectively</li>
<li>communicate in dps not pixels</li>
<li>adjust from what’s already in the app rather from mockups</li>
<li>use relative measurements not absolutes</li>
<li>annotate real screenshots</li>
<li>e.g. make fonts 2dp smaller here, add 4dp padding there</li>
<li>little play things:
<ul>
<li>e.g. expedia wait screen shows plane window with sky going past</li>
<li>rotating phone adjusts horizon; can close and open window</li>
</ul>
</li>
</ul>
<h4 id="engaging_ui">
engaging UI</h4>
<ul>
<li>really relying on images can set the tone of your app</li>
<li>hotel detail done with parallax layers
<ul>
<li>encourages users to engage with the app</li>
<li>scrolling up and down enlarges areas</li>
</ul>
</li>
</ul>
<h4 id="qa">
Q&A</h4>
<ul>
<li>when designing, how far do you go for different densities?
<ul>
<li>simple design, start with single device</li>
<li>complex design, might want to ensure it works in a couple of densities</li>
<li>key is landscape: make sure it’s not totally different — don’t want to lose the user</li>
<li>but don’t avoid doing cool things in portrait just ‘cos you can’t do it in landscape</li>
</ul>
</li>
<li>working in dps
<ul>
<li>set the resolution in photoshop</li>
<li>or set the file to the full resolution</li>
<li>preview on device: <a href="http://georiot.co/1exN">skala preview</a> or similar</li>
</ul>
</li>
<li>development environment
<ul>
<li>gradle -> hockeyapp</li>
<li>still using eclipse — android studio not quite stable enough yet</li>
</ul>
</li>
<li>pivotal labs experimenting with developer/designer pairing</li>
</ul>
Adam Cohen-Rosehttp://www.blogger.com/profile/12286496556944495325noreply@blogger.com0tag:blogger.com,1999:blog-6382212051821902995.post-22598529335939213282013-10-29T09:38:00.000+00:002013-10-29T10:58:21.096+00:00Droidcon 2013: Phones in Space<p><em>Chris Bridges</em>, Surrey Space Centre, <a href="https://twitter.com/DrChrisBridges">@DrChrisBridges</a></p>
<p><a href="http://www.sstl.co.uk/Missions/STRaND-1--Launched-2013/STRaND-1/STRaND-1--Smartphone-nanosatellite">STRaND-1 Nanosatellite</a></p>
<h4 id="space_is_old_tech">space is old tech!</h4>
<ul>
<li>catch-22 with electronics in space: if it hasn’t flown, we can’t fly it</li>
<li>most electronics in space are 10-20 years old</li>
<li>they are larger: 90nm features</li>
<li>30nm of modern fabs may have trouble in space — we think they will be knocked out by single event effects</li>
<li>largest particle coming out of the sun is an ion proton at just under 90nm</li>
<li>but foundries that make 90nm chips are soon going to be decomissioned</li>
<li>so need to start testing effects on smaller chips soon!</li>
<li>also, newer components, especially mobile are smaller and much more powerful</li>
<li>if we’re worried about reliability, could duct tape three phones together and get more power than the entire ISS</li>
<li>also useful for medical purposes — investigate how tech behaves in radiation situations</li>
</ul>
<h4 id="hardening_phones">hardening phones</h4>
<ul>
<li>components also get shaken to 30-40G when rocket goes up</li>
<li>used 3D printed brackets (chins) to hold pieces together</li>
<li>control satellite attitude with magnetic coils</li>
<li>had to harden the phone & connections
<ul>
<li>extract out the button connections & stick the trackball in place</li>
<li>need to remove any electrolytic components — they pop in space</li>
<li>also some plastics degrade in space</li>
</ul></li>
<li>controlled from Digi-Wi9C: low power linux single board computer</li>
<li>put programs into solid state flash memory (PIC-24) that is not affected by space radiation</li>
<li>also needed to check out timings: satellite works at about 8-40MHz; Digi-Wi9C at 150MHz</li>
<li>android apps had to be instrumented so that they could be monitored and controlled: added heartbeat monitors to check if apps were still alive</li>
<li>wanted to have a software lab in space</li>
<li>had to check how the hardware behaved without convection
<ul>
<li>saw that battery voltage reporting flipped a sign when temperature went below zero</li>
</ul></li>
<li>destroyed about 12 phones in radiation… cobalt-60 ionising radiation</li>
<li>tested satellite for equivalent of 6 years of radiation</li>
<li>have a camera that looks at the screen
<ul>
<li>useful if usb connection fails</li>
<li>can connect over wi-fi</li>
<li>or else fall back to taking a picture of the screen</li>
</ul></li>
</ul>
<h4 id="your_apps_in_space">your apps in space</h4>
<ul>
<li>had an app competition for software on facebook</li>
<li>can you scream in space?
<ul>
<li>does the vibration from the speaker reach the microphone?</li>
<li>don’t know yet…</li>
</ul></li>
<li>antenna communicates at 9Kb/s back to Earth</li>
<li>went up into low earth orbit in 25th February</li>
<li>SSC groundstation</li>
<li>amateur satellite trackers around the world really important and integrated — 10 people around the world
<ul>
<li>gmail > gdocs > SQL databases > plotting</li>
<li>can get a groundstation in a single USB stick</li>
<li>just need a bit of wire for the antenna</li>
</ul></li>
<li>when it’s first released, the satellite tumbles uncontrolled — need to use coils to place it in controlled orbit</li>
<li>strand-1 status on web site</li>
<li>testing charging the phone — have done it 9 times now</li>
<li>will soon be testing apps…</li>
<li>code available on s-android on google code</li>
<li>satellites normally take years to build: STRaND-1 built in 3-4 months in lunch breaks and evenings</li>
<li>NASA taking it forward</li>
<li>UniS doing STRaND-2
<ul>
<li>want to have two satellites docking & undocking in space</li>
</ul></li>
</ul>
Adam Cohen-Rosehttp://www.blogger.com/profile/12286496556944495325noreply@blogger.com0tag:blogger.com,1999:blog-6382212051821902995.post-51682873691598186552013-10-29T09:35:00.003+00:002013-10-29T10:58:21.106+00:00Droidcon 2013: Authentication for Droids<p><em>Tim Messerschmidt</em>, PayPal <a href="https://twitter.com/SeraAndroid">@SeraAndroid</a></p>
<iframe src="http://www.slideshare.net/slideshow/embed_code/27534924?rel=0" width="427" height="356" frameborder="0" marginwidth="0" marginheight="0" scrolling="no" style="border:1px solid #CCC;border-width:1px 1px 0;margin-bottom:5px" allowfullscreen> </iframe>
<p>Presentation <a href="https://www.slideshare.net/PayPal/authentication-for-droids">available on slideshare</a></p>
<h4 id="oauth2_client_libs">OAuth2 client libs</h4>
<ul>
<li>scribe <a href="https://github.com/fernandezpablo85/scribe-java">https://github.com/fernandezpablo85/scribe-java</a></li>
<li><p>postmanlib: another layer on top of scribe</p>
<ul>
<li><a href="http://github.com/fedepaol/PostmanLib--Rings-Twice--Android">http://github.com/fedepaol/PostmanLib—Rings-Twice—Android</a></li>
</ul></li>
<li><p><a href="http://hueniverse.com/2012/07/oauth-2-0-and-the-road-to-hell/">OAuth 2 & the road to hell…</a></p>
<ul>
<li>the lead author and editor left the working group and withdrew from the specification as he felt could no longer be associated with the standard</li>
</ul></li>
<li><a href="homakov.blogspot.de/2013/03/oauth1-oauth2-oauth.html">OAuth 2 attack surface everywhere</a>
<ul>
<li>need to have proper security on server side</li>
</ul></li>
</ul>
<h4 id="identity">Identity</h4>
<h5 id="openid">OpenID</h5>
<ul>
<li>developed 2005</li>
<li>2012: discovered you can hijack it</li>
<li>considered dead :-(</li>
</ul>
<h5 id="browserid_persona">BrowserID & Persona</h5>
<ul>
<li>from Mozilla</li>
<li>great idea, but nobody really uses it apart from them…</li>
</ul>
<h5 id="openid_connect">OpenID Connect</h5>
<ul>
<li>layer on top of OAuth2</li>
<li><a href="http://openid.net/connect">http://openid.net/connect</a></li>
<li>still a draft but looks really good</li>
<li>has a whole section on session management (i.e. stop allowing that app)</li>
</ul>
<h4 id="providers">Providers</h4>
<ul>
<li>80-90% via Google, Facebook & Twitter</li>
<li>all have their own SDKs that handle the OAuth for you</li>
<li>PayPal added a new identity provider
<ul>
<li>provides verified information</li>
</ul></li>
<li>needs to be best practice to show which information will be shared at each time</li>
<li>Blue Inc 2011: <a href="http://www.shop.org/sites/default/files/janrain_-_consumer_perceptions_of_online_registration_social_sign_in_0.pdf">Consumer Perceptions of Online Registration and Social Sign-In</a>
<ul>
<li><strong>45% admit to leaving a website instead of resetting their password or answering security questions</strong></li>
<li>66% think that social sign-in is desirable alternative</li>
</ul></li>
</ul>
<h4 id="qa">Q&A</h4>
<ul>
<li>on mobile, app can fake a web view and capture identity
<ul>
<li>this is why facebook goes via app</li>
</ul></li>
<li>think about different social providers for different countries
<ul>
<li>e.g. baidu for China, yandex for Russia</li>
</ul></li>
<li>see also Google Authenticator libraries for two factor auth</li>
</ul>
Adam Cohen-Rosehttp://www.blogger.com/profile/12286496556944495325noreply@blogger.com0