There is a lot of noise being made about HTML5 as the new web technology to use and markets for apps as the best way to sell products and distribute applications to our end users. In reality there is not much new about it - all we are doing is treating the web as a distribution and sharing platform and browsers as the software to run our applications on. In this talk Christian Heilmann of Mozilla shows how in the near future application installation and in-app payments can happen on the most distributed market there is - the internet and through your browser. You will see how the technologies we build web sites in got an upgrade to allow us to build light-weight and focused applications that allow our end users to reach their goals faster and in a more re-usable fashion than with traditional ecommerce. Browsers and hardware are becoming more powerful each day, it is time to use that power in a sensible manner.

1. Presentation: The web and browsers as the platform - exciting opportunities in new web technology
The web and browsers as the platform
Exciting opportunities in new web technology
Today I want to show some new technologies and ideas you can use to make your ecommerce offerings more interesting and take
advantage of the great new features modern hardware offers us.
Misquoting

2. A lot of people quote Darwin as "survival of the fittest". The more interesting quote, however is: "It is not the strongest of the species
that survive, nor the most intelligent, but the ones most responsive to change." - today I will talk about some of those changes in web
technology you might not be aware of.
Forget the web - it is all about apps

4. In recent times the web has not made many headlines. Instead people seem to be spending their time and money on apps for their
smartphones and tablets.
Smartphones for everybody?
Photo by Beatrice Murch
The big issue I have with this argument is that not everybody has a smart phone. And not everybody wants one. There is a lot to be
said for the web as it is.
Checking in on app stores

5. Apple App Store
With every cool device comes a cool app store where you can buy or get free apps with a single click directly to your device. You can
also get music, videos and games and many other things.
Going to one place is amazing

6. Photo by "momentcaptured1"
This is what shopping malls are about. You find everything in one place and you spend only a fraction of the time you need to get
everything you want.
App stores as innovation?

7. Download.com in 1996
If you think about it, this is nothing new. In the past we had sites like download.com, tucows.com and later on for free software
freshmeat.net, sourceforge.com and a few others to download programs from.
After the Zombie attack

8. Photo by David Fulmer
If you look at those web sites now, they do look a bit like a shopping mall after a Zombie attack. Things are outdated, all over the shop
and frankly nobody dares to go there any longer. A lot of the bespoke software we had in the past was for tasks we now use the web
for.
Go find that app!

9. Android Market
To a degree, this is already happening on some App stores. It becomes harder and harder to find good applications. A lot of them are
shoddily put together and don't use the device you use them on to its full extend. Getting your app found is the new SEO and there is
already a booming market for fake reviews.
Using existing infrastructure

10. Folding at home
Folding at home is an initiative by Stanford university to crowdsource analysis of protein folding - one of the causes of Alzheimer. By
using people's computers it is now the biggest supercomputer on earth.
We can do the same with the web. People have powerful mobiles, tables and laptops. We should use them when we can.
Outside can be messy, but fun

11. Photo on the daily squee
I think it is ridiculous to limit ourselves to target app stores and closed systems. Remember Myspace? Remember when everyone told
you a Facebook app is all you ever need?
Outside is huge!

12. World Connection Density map by Chris
Harrison
The web is huge. You can reach people world-wide, 24-7 and they can find your product and solve their problems with it.
Native vs. web - Playmobil vs. Lego

13. Photos by "kruemel2010" and "Buck"
The whole native vs web debate always reminds me of Playmobil vs. Lego. As a kid this was a big thing. Some kids had cool cars from
Playmobil that would survive a fall and ships that really swam. My Lego cars lost parts and the ships always took in water. However,
when I wanted to turn my ship into a plane, I could do that whilst the Playmobil kids had to pester their parents to get a plane. I guess
this was partly what made me a developer, not a buyer.
What about syncing?

14. My different Android devices
I own four Android devices. I played Angry Birds and Cut the Rope on all of them. Guess what? I always needed to start from scratch.
Not fun. On the web it is much easier to sync things. Years of version controlling helped us with that.
Financial Times - web > native

15. FT web app - more successful than iPhone
app
The FT lately showed that doing a web app can be more successful than a native iPad app.
Making flexible rigid is easy…

16. phonegap.com
Nothing for example stops you from building something with HTML5 and JS and then use a tool like phonegap to turn it into an iPhone
and Android app. The other way around is harder.
The now!

17. HTML5 Logo
Instead of being scared and leaving the web for closed environments it makes sense to use the web and especially its strengths and
new features.
Some "new" tech on the web
Flexible layouts with Mediaqueries
Native animation with CSS
Dynamic painting with Canvas / SVG

18. 3D interfaces with WebGL
Local and offline storage
File APIs
Video
A big annoyance to me is that not many web products really use the technology we have - there are awesome things possible in
modern browsers. You can use those when and if they are available.
Mediaqueries for flexibility
The new Boston Globe page
Using open web technology means you can be flexible. Upgrades are easy, and your app can easily adapt to the needs of the user.
The Boston Globe is a great example of that. By cleverly employing mediaqueries the same site can be seen across a lot of devices.
Madmanimation a CSS3 animation

19. CSS3 allows you to do animations without Flash. Madmanimation is a demo for the animatable CSS animation tool. It show how you
can turn a list of small images with a description of the scenes into a very complex CSS3 animation. This is progressive enhancement
like it should be done.
Evolution of the web Canvas/SVG

20. Using Canvas and SVG you can do amazing interactive things. To celebrate the birthday of Chrome, Google released this wonderful
timeline animation of how the web evolved. It uses SVG and is a great example of an interactive dashboard.
WebGL Skin
This is an impressive demo of simulating skin in WebGL - check the different discolourations and hair stubbles.
Pepetz.com using WebGL

21. Pepetz.com is a great example how you can use new technology in a seamless way. The 2D product images turn into 3D models
without needing any videos. The user can directly interact with them.
Local Storage
Cookies are bad for you
Local Storage and Session Storage
Simple key/value store
5MB of data across browsers
Local Storage (persistent) and Session Storage (deleted when the tab is closed) are a very simple way to store content on the user's
machine without having to go through the pains of cookies.</P< footer>

22. Offline
Store parts of the page offline
Really good for apps (store state)
Simple manifest implementation
Offline storage makes sure that our apps give a real native app feeling. If a user gets disconnected it shouldn't be the end of the world.
File APIs
Client side file conversion
Packing before uploading
Drag and drop from the desktop
File APIs
Client side file conversion
Packing before uploading
Drag and drop from the desktop
…
The new file APIs allow us to read and create files from the system easier than by going via a server. You can for example convert files
before uploading them and allowing people to get their offline documents easier into an online system than with old-school file upload
forms.
Motivational poster using File APIs

23. This Mozilla demo shows how you can drop an image into the browser, annotate it and upload the solution as an image to different
social sharing sites.
HTML5 video
Native browser controls
Style-able
Rich API
Video is one of the big break-through technologies for HTML5. As video elements are just like any other element in the page it makes it
very easy to deliver engaging and interesting video solutions. The native browser controls makes it also much easier to make video
more accessible for example to keyboard users.
Syncing HTML5 video

24. This demo shows how easy it is to sync page content with video in HTML5. Notice that the JavaScript is very simple and by using data-
attributes on the HTML I can maintain the syncing without any JS knowledge. There is also a simple library available to do this called
Popcorn.
This Shell

25. This shell is a clever use of a free video effect script. The video gets exploded into several squares and your task is to put it together as
a puzzle whilst the song is playing. If you succeed, you can download the song for free, if not, you can still watch the video.
The future?
Photo by Thomas Duchnicki
The future for open web applications is to build platforms that are as exciting as the native ones. For this, we are working on some very
cool things.
Using the web to break the lock
Web intents
Boot to Gecko
Open web apps
Web API
Browser ID
Fullscreen / Notifications / Context Menus

26. Some things are not available to web applications on hardware like phones and tablets. That is not fair and we are working hard on
making this possible.
Breaking the browser mould
Firefox with native toolbars
In order to keep the open web the alternative of choice for app development we need to free the browser as the platform to allow us to
access hardware and do the same cool things we can do with native apps. There are a few things brewing there and we would love to
get your feedback. One of them is allowing the site to change the browser toolbars.
Web APIs
Defining access for web services to:
o Dialer, SMS

27. o Address Book
o Clock, Calculator
o Camera
o Gallery
o Settings
o Games
o Maps
Web APIs are something Mozilla and a few others are working on - a standard to allow JavaScript access to things that we need to
have if we want to have a standards based mobile web.
An open framework of apps
Another thing we are working on is a framework for apps that would allow you to tell people about your app from your web site, have
full-screen applications that could be launched in the browser and from the desktop or on mobiles, and a synced experience across
these devices.
Let's play!

28. Photo by Mike McCune
Chris Heilmann
@codepo8
http://wait-till-i.com
Slides: http://icant.co.uk/talks/xinnovate
Time to go and play with some of the things you saw today.

29. Written by Chris Heilmann (@codepo8) based on DZSlides by Paul Rouget (@paulrouget) and Antony Ricaud (@rik24d)