HTML5 初体验

Here is my understanding of html5 and its potentials - that open
various possibilities for our brand-new product html5 client.

These slides shared by Ricardo summarized the best:
http://slides.html5rocks.com/#slide1

 

Demo from Mozilla:

https://demos.mozilla.org/en-US/

 

From Apple:

http://www.apple.com/html5/

for this "longer version" shared by Corey:
http://diveintohtml5.org/

So I will reuse the key items from the slides, along with my thoughts,
highlighting what's possibly useful to our needs:


1. Offline / Storage

html5 has a SQL DB built in (SQLite), so we can create our own
DBs/tables within the browser.

As pointed out by Ricardo, we can store user searches in his/her local
storage for offline use, and, offload (some of) the server's load to
browser side!

Other potentials:

# Cache product "web app" (html pages, medias files, data…) for offline use
# Further explore the client side's CPU/Mem/storage to "distribute"
some loads from server - for example, it's possible to do the browser
side usage stats, tracking user activities, do some level of
calculation of the stats before sending to server, so server doesn't
have to do all kinds of calculation just base on raw logs


2. Realtime / Communication

JS is now "multi-threaded", and can initiate TCP socket level
connections, also trigger neat desktop notification slide down like
Growl (http://growl.info/) does.

Potentials:

# The current "type-and-instant-search" (fake, we are sending a lot of
HTTP requests to server) could be implemented in a more elegant way by
using one single socket connection to server to "stream" data back &
forth
# We can use a Javascript thread in the background which maintains a
persistent connection to the server - reminds you something? Yes,
Apple's "Push Notification" - we can push/broadcast/notify users of
anything, including pushing evil ads ;-)


3. File / Hardware Access

# Geolocation
we no longer need to worry about Google Map API denying us, no longer
need to write our own code to get lat/lng by tower/GPS/IP, it just
works elegantly

# Device Orientation
our web app _knows_ the device's orientation! We can adjust for the best layout

# Speech Input
a simple html tag generates a "speech to text" feature, we should let
our users just "speak to change location", "speak to search
something", or even better, just say: "search pizza around me
(geolocation detection!)", "search kfc around Menlo Park"

# Semantic tags / Microdata
extremely useful for us to mark up People/Organization/Events/Reviews
with semantic microdata, our RingPages will be marked up with truly
meaningful tags instead of the good old div/h1/span


4. … and many others to enrich the web experience!

Audio / Video / Canvas (2D/3D) / SVG / CSS3
(typographic/transitions/transforms/animations)… with all these
goodies in hand, you can deliver a web app with great experience like
never before:

# delivering tutorials in audio/video (not thru flash/special plugins
but natively supported by the browser)
# why not allow user to say: "tell me how to use product's Don't
Disturb feature", and the "speech to text" feature converts it into
text that server side can parse, then push back the right video
tutorial?
# why not build our app looks like a real phone in 3D? So users can
get a better feel or trying something "real", and what about we
deliver the "app phone" Nexus One look if Google/HTC pays? Then
iSomething if Apple wants us to brand their hot/new product?!
# with CSS3, designer could use stunning typographic/transforms,
creating great looking pages for our app, and with the sweet
transitions/animations to make our app feel really good…


5. BUT - I don't see the possibility of accessing user's local files
(not the local storage created by our app), so _no way_ to do things
like reading contacts from local address book.


Technically, there's no difficulty to develop a html5 client, it's not
a big difference from the current html4/xhtml stuffs. So it's more of
a designing thing -

How can we take advantage of all these neat features in html5 to
create a stunning product web app, which brings values/pleasures to
their lives.