Grow your CSS skills. Land your dream job.

[W3Conf] Tomomi Imura: “Mobile Web: Real Life Examples of HTML5 for Mobile”

Published by Chris Coyier

Tomomi Imura (@girlie_mac) works on the Open Web at Nokia and talked about real life use cases for HTML5 on mobile devices.

These are my notes from her presentation at W3Conf in San Francisco as part of this live blog series.

The changes in mobile devices over the last 10 years has been astounding. The best "smartphone" in 2003 had 104MHz processors and 4MB RAM. Phones these days are several orders of magnitude better.

Sessile is a zoological term (opposite of "mobile", "fixed in one place").

Major use cases for mobile devices: Reading, playing games, taking pictures, locating, paying, listening/watching media, note taking, chat, translating, and more.

How can HTML5 help us with some of these activities?

Making a call:

<a href="tel:5555555555">

Locating:

navigation.geolocation.getCurrentPosition(success, fail)

You can change layouts on mobile devices in CSS with media queries

@media only screen
  and (min-width: 700px) {

}

The publishing industry can benefit from this, as well as advanced grid layouts.

The gaming industry can benefit from HTML5 tech like canvas, touch events, audio APIs, animations and transforms, and web sockets.

About a year ago the W3C created the "Core Mobile Web Platform" Community Group. The mission was to accelerate the adoption of the mobile web as a modern platform for development. Tons of huge companies are working together on this, despite being industry competitors. The goal was to get agreement on core features and create performance tests.

This community group has created some open source example applications that are available on GitHub like a camera app.

Just HTML5 and vanilla JavaScript powering this app.

HTML5 way to capture an image from the device camera itself:

<input type="file" accept="image/*"  capture="camera">

That camera icon (in the middle on the bottom of the screenshot) is literally just that <input> manipulated with CSS.

This isn't WebRTC. It's HTML Media Capture and it's much easier. Browser support is pretty decent already. This particular example is Android 3+, Chrome 18+, Safari 6+, Firefox 10+, Blackberry 10+.

Once a file is seleted this way, you can access it immediately through JavaScript.

localFile = input.files[0];
reader = new FileReader();
...

Note: I have some related example code here.

Once you have the image data, you can draw the image to a <canvas>. Once it's on a canvas, you can manipulate it like you could anything else on a <canvas>. Using some math fanciness, you could loop over and manipulate each of the pixels. Manipulations could be like a "filter", like Instagram does. (Kinda takes some of the magic away from Instagram, doesn't it?)

This kind of thing is pretty slow though. On the wishlist would be hardware acceleration for canvas, faster GPUs, 32-bit manipulation, and background workers.

To convert this manipulated image back to a "real" file, you have to convert it back to a "blob".

var blob = canvas.toBlob() /* Slightly more to it... */

Only Firefox supports this but you can polyfill it. You can even display the image data then as an image src once it's a blob. <img src="blob:XXXXX">.

In the demo photos app, it makes sense to save the photos locally as well as sending them to the server. It makes good sense to use IndexedDB for the local saving. Like all of this IndexedDB has spotty browser support. It's particularly bad here though, because the APIs are very different.

For the server-sending, you can create a new FormData() object (you don't need an actual form) then attach the photo as data, then POST it up to the server Ajax-style. You can display the progress of the update easily because you get a callback function that gets passed a number representing how complete the upload is.

CORS is useful here too (we learned about that in Brad's talk) because we can send it to any server not just our own domain. Note: a common use case would be like Amazon S3.

Event-binding in this app makes us of pointer events. Not the CSS property, but the JavaScript ones. There was a talk about this yesterday but I missed it =(.

This app also makes use of tons more HTML5 stuff: History API (popstate, changing URLs), screen orientation API, CSS transitions and transforms, web fonts, the hidden attribute (just like display: none, but with an HTML attribute), data-* attributes.

PhoneGap can "fill the cap" for apps that need these features but are running on devices that doen't support them.

Comments

  1. Barack Odumbo
    Permalink to comment#

    Good doesn’t come around, but evil does.

  2. Joe Oviedo
    Permalink to comment#

    Wow. The future is here, literally. But wait for me, I am learning as fast as I can.

  3. Permalink to comment#

    The camera capture doesn’t seem to work in chrome. Just shows the standard file uploader and function.

    Am I missing something?

  4. Oh my. I had no idea that using tel as a href prefix was even possible.

    Mind blown :D

  5. Miro
    Permalink to comment#

    This particular example is Android 3+, Chrome 18+, Safari 6+, Firefox 10+, Blackberry 10+.
    Funny thing, you can’t get any of them to Nokia Lumia (900). and Internet Explorer isn’t that good with HTML

  6. An actual search I found in my logs: http://isharefil.es/N98k Somebody looking to save camera data to a remote location, presumably to spy on others.

This comment thread is closed. If you have important information to share, you can always contact me.

*May or may not contain any actual "CSS" or "Tricks".