HTML5 and the new challenge of "open"

Today we are talking about some changes in the world of development and what it means to open technologies.

The web is the platform!

World Connection Density

World Connection Density map by Chris Harrison

The internet is a wonderful thing. It connects us world-wide, 24/7 and it makes it possible to bring software that solves issues to the world and make it easy to upgrade the software when needed without the end user being the wiser about it.

Open technologies made the web what it is

web source code

From the very start the technologies of the web were open, easy to learn and simple to build - all you needed was a text editor and a bit of time to read up on HTML and later on CSS and JavaScript.

Text technology for a multimedia world

Iron man interfaces

The problem with the web technologies of old is that they were made for a world of linked documents with simple search forms, not for what we use them now. Good text is still the most important thing, but it gets much more engaging when you also bring some video and sound into the play - and talking of playing, interaction is very important.

Simulated interactive experiences

YUI widgets simulating a data table and a tab control

On the web of old we had no choice but to hack and work around the limitations of the web. We used frames to make the web seemingly faster, we used DHTML to make things richer in terms of interaction and we used Ajax to load content on demand.

Lock-out frustration

Bike lock blocking a place where you could lock a bike

The problem even back then was that we always had to battle native apps which had much cooler features and simpler interfaces. The reason was that they are not bound by the same security concerns the web is.

Enter the world of devices

Android eats Apple

Photo by Laihiuyeung Ryanne

Nowadays we don't surf the web on big grey boxes but the internet is on our laptops, netbooks, mobile phones and tablets. If you were to believe the marketing around it and the sales figures then this is the future and there is no need at all to support the desktop any longer.

Enter the world of app stores

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

Mall

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.

Shopping malls kill stores

Looted shop in London

The issue however with shopping malls and big supermarkets is that they kill small stores. The ones you need when you look for a special product. Instead of getting this product you will actually be forced to buy another, newer one and discard the old one. This is good for the company selling the products, but does it always make sense for you?

App stores are new and cool innovation?

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

zombies in a mall

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!

Android market

To a degree, this is already happening on some App stores already. 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.

How about we use the web and apps?

It seems greedy and shortsighted to me to try to offer apps and stick to one single point where you can get them. Why not use the web to advertise your app? You can have the web page and notify people that there is an app available at the same time.

Browsers competing on app features

Browser wars

Illustration by shoze (Galit Weisberg)

The new browser war right now is fought over features of HTML5 and other new tech in the open rather than behind closed doors. This is great!

Flexibility is the key

Boston Globe

The new Boston Globe page

The fun thing about that approach is that if you use open web technologies, you can do that. You can detect what you use to surf the site and give people the best experience they can have.

HTML5 and CSS3 already helps with that

Financial Times App

FT web app - more successful than iPhone app

The work on HTML5 already gives us a lot more things in the browser than we had before and we have a good chance to create real in-browser applications.

CSS Animation

This example shows how simple it is to create an animation with CSS. Notice that the main annoyance really is that there is a lot of repetition to support different browser prefixes.

CSS3 Dashboard

The CSS3 dashboard is a great overview of all the possible things in CSS these days. The source code is available on GitHub.

New form elements

HTML5 forms got a lot of new elements to use. The main benefit of these new elements is that on mobile devices they trigger different input keyboards and thus make it much easier to enter content.

The Meter, Progress and Output elements allow for simple multi step forms.

File APIs

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

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

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.

Canvas

Canvas allows you to paint in the browser, with a very simple API and with a dynamic coordinate system.

WebGL

WebGL is the big new thing for a lot of people. It brings 3D gaming to the web.

three.js by Mr. Doob

Screenshot of Three.js

Three.js is a JavaScript library that makes it much easier for not-3D developers to start with WebGL. Check out the demos on the page - there are many cool examples.

WebGL Water

This is one of the winners of the Mozilla Demo Scene competition. It is fully featured simulation of water - complete with reflections, ripples and proper gravity simulation.

WebGL Skin

This is an impressive demo of simulating skin in WebGL - check the different discolourations and hair stubbles.

Old school storage

Cookie monster

Photo by Dan Cederholm

In the past all we could do to store content on the user's computer for re-use or for keeping the state of an application was using cookies.

Local Storage

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.

Offline

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.

History API

GitHub using the history API

GitHub is a great example of using the history API - click on files and folders to see that the interface loads and changes and the URL changes accordingly. All without reloading the whole page

d3.js

Screenshot of D3

SVG is Scalable Vector graphics, a W3C standard based on XML to paint in the browser. SVG images can easily be interactive. D3 is a library to turn data in your pages (like tables) into highly interactive graphs and charts.

Evolution of the web

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.

More lock-outs

Tin opening ring broke off

HTML5 and other open, free standards have information how you could use cool new things devices offer us - cameras, accelerometer, compass, orientation, touch interfaces. The issue is that on a lot of hardware devices only native code is allowed to access them.

Patent madness

Pat on the back machine

Pat on the back machine, United States Patent 4608967 by Piro, Ralph R, published 09/02/1986

A lot of this is not tied to technical issues - it is about patents. Right now a lot of hardware vendors spend a lot of time suing each other and crying foul that they steal from another.

Going native!

Wigwam

Photo by library of congress

This leads to a lot of developers to give in and write native code for certain devices instead of trying to build apps on open standards that can be re-used and converted to native code.

DRY

Dry dessert

Photo by Chris M

This means, however that you need to write your code for different devices and you have to maintain different versions. From a marketing perspective, this can make sense. From a software perspective it is more or less a nightmare.

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.

Web APIs

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.

Open Web Apps / Web intents

Open web applications are a proposal by Mozilla to allow apps to be deployed on the web and installed in your browser and reach into your desktop or your mobile device. These apps will be synced across these devices. Google is also on board with "web intents".

Boot to Gecko

Boot to Gecko

Boot to Gecko is a project to provide an alternative way to boot up mobile devices and tablets directly into the open web engine of Firefox.

Fullscreen APIs

Fullscreen

Soon Firefox will have the ability to make HTML elements full-screen which means you can build full applications that will allow the user to focus on them without being distracted by the browser chrome.

How can you help?

Help station in the London underground

Photo by Mark Hillary

Well, we need your help to keep the web open and not get locked in. So please use as many of the open technologies that you can and build beautiful things. If you are a developer and you want to be part of this - check out the products mentioned above and give us your feedback.

Thanks!