I just spent a weekend in a resort in Mallorca. I was invited by an IT consultancy from Frankfurt to join them at their off-site and give a two hour (re)introduction to HTML5.
The audience and the challenge
The consultancy is very successful in what they do and are very much a Java / native code shop. Their clients are insurance companies, banks and the like which means the topic of HTML5 came up only peripherally in their discussions. With more and more clients looking for iPad apps and other demands for cross-platform solutions they wanted to know more about HTML5, what is possible and what can be done.
This sounded like a great opportunity to go out of my comfort zone and see how good my skills as an advocate for web technology are. Ever the optimist, I also considered this a great opportunity to inspire in a field in which IT is used to make a difference to the lives of a lot of people. So I said yes.
Without any preparation (there was no time), without knowing who the audience will be (turns out it was the whole company, including non-technical employees and some contractors) and being asked to deliver the talk in German I found myself in front of a room with about 70 people, set up my computer (which failed to do so the first time, it will go to the farm of old computers soon), happily realised that the WIFI worked and went right into it.
What I’ve done
Seeing that it was more or less an open 2.5 hours show and tell with questions from the audience I have no notes. So here is a list of the things I showed and mentioned which had quite some impact and the techniques how I presented them.
Laying the groundwork
I started by explaining the need for HTML5 (document to app transition) and that with a unified and defined HTML parser, we finally have a level playing field across browsers. I explained that a face to face comparison of HTML5 apps and native apps is not fair as the performance of browsers and webviews is hindered in many cases by hardware and the OS. Which means that browers can not use the same resources native code can which of course is a difference in performance. That said, web apps can be more nimble and update much easier than native ones.
In the spirit of pre-emptive writing I also took the Mark Zuckerberg quote from TechCrunch disrupt a few weeks ago and explained that he didn’t say that HTML5 was a mistake but that the way they approached it was. I also pointed out his quote stating that Facebook’s number of mobile web users are more than the ones of Android and iOS combined.
I think the most impactful part of the presentation was that I didn’t prepare any slides but used the browser to show everything to the audience. I used Mozilla Thimble to show live code and the immediate impact of my changes. I used the developer tools in Firefox and Chrome to show how to change a live site and try out some of the new technology in existing pages instead of showing demos that are impressive but don’t apply to the audience.
All in all my aim was to show that HTML5 is an interesting thing to bet on as it is part of the web ecosystem. This means instead of starting with code I showed:
- Collaborative editing using online editors
- GitHub as a place to get code, meet other developers and submit fixes
- Developer tools of browsers to show that now we can test and fix things outside of a code first, deploy, find bug development cycle
- MDN as a resource for demos and documentation
- Browserstack.com to test on browsers and operating system you don’t have
The technology demos were simple, but I got lots of good feedback on them as I kept them relevant.
- Introducing HTML5 form elements and showing that simply adding a
numberattribute and a
- Adding a
videoelement in the page, playing it with a right-click, adding the
controlsattribute to add controls and adding a CSS transformation (rotation for example) to prove that video is just another page element in a HTML5 world.
- Showing a simple example on how to use MediaQueries to do responsive designs and showing the Responsive Mode in the Firefox developer tools
- Showing how to progressively enhance a simple HTML document using some CSS transitions to make it look much more engaging.
- Showing the simplicity of local storage (using the 123done task list example) and explaining how AppCache and manifest files can turn a web page into a locally cached app.
- Showing how easy it is to plot something in the page using Canvas and explaining that canvas using drag and drop can also allow for image cropping and thumbnail generation.
- Showing that file uploaders can be much more convenient for the end users these days with the Flickr image uploader as an example
- Showing how to make a video interact with web content using Mozilla Popcorn – explaining that this could be used for interactive training materials
Near future gazing
As requested by the audience I also showcased some of the near-future parts of web tech:
- The toycam demo explaining that it uses WebRTC which can be used to get video input and manipulate it using WebGL live in the browser. I also pointed out that WebRTC is not limited to that but could be used for all kind of other data streaming tasks
- Firefox OS, how it is architected and why we do it
- Explaining Persona and how it allows you to simply verify users on the web without having to ask for a username and password
- Showing off the Banabread demo and explaining how it was done by converting C++ code using Emscripten
- Showing the Mozilla App store preview and how an HTML5 app can be installed natively and run from the Application folder and full-screen
All in all I have to say this was thoroughly enjoyable and I got out of it with a sense of satisfaction of having narrowed the gap between the webdesign world and the world of corporate IT a bit more. Give it a go, too, I am sure you’ll enjoy it.
About Chris Heilmann
Evangelist for HTML5 and open web. Let's fix this!