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.
分享到:
相关推荐
响应式Web开发项目教程(HTML5+CSS3+Bootstrap)第2版 第1章 HTML5+CSS3初体验 课后练习
web入门初体验,适合刚刚开始学习html的小伙伴!
Boot入门初体验是一门针对初学者准备的课程,讲解了如何一步一步进入Spring?Boot开发,课程采用循序渐进的方式,一个知识点一个知识点的讲解和学习,让初学者不知不觉的掌握各种开发技能,课程包含了主流框架搭建、...
通过Dreamweaver.CS3学习HTML+DIV+CSS教学PPT第1章__网页设计初体验
Adobe公司出品的多媒体处理软件产品线较多,涵盖了音视频编辑、图像处理、平面设计、影视后期等领域。这篇文章主要介绍了Adobe Html5 Extension开发初体验图文教程,非常不错,需要的朋友参考下吧
React Native (简称RN)是Facebook于2015年4月开源的跨平台移动应用开发框架,目前...RN使用Javascript语言,类似于HTML的JSX,以及CSS来开发移动应用;着力于提高多平台开发的开发效率 —— Learn once, write anywhere.
文档对象模型——Document Object Model DOM可以视为一种API的应用 将文件视为一个文件对象,...HTML DOM 定义了访问和操作HTML文档的标准方法。 HTML DOM 把 HTML 文档呈现为带有元素、属性和文本的树结构(节点树)。
AMUI专注于现代浏览器(支持HTML5),不再为过时的浏览器耗费资源,为更有价值的用户提高更好的体验。5、本地化支持相比国外的前端框架,Amaze UI专注解决中文排版优化问题,根据操作系统调整字体,实现最佳中文排版...
CreateJS初体验项目一上线就迫不及待的想跟大家分享做这个项目,算是一个新的尝试,觉得很有意思,在处理类似这种动画效果的h5的时候可以用CreateJS来解决,这里在加载优化上也做了'极致'的优化。 CreateJS是基于...
响应式Web开发项目教程(HTML5+CSS3+Bootstrap)第2版 第1章 HTML5+CSS3初体验 例1-5 对象阴影
机器学习 深度学习 pytorch tensorflow 贝叶斯 神经网络 算法
响应式Web开发项目教程(HTML5+CSS3+Bootstrap)第2版 第1章 HTML5+CSS3初体验 项目1-2 许愿墙
响应式Web开发项目教程(HTML5+CSS3+Bootstrap)第2版 第1章 HTML5+CSS3初体验 例1-7 CSS3径向渐变
响应式Web开发项目教程(HTML5+CSS3+Bootstrap)第2版 第1章 HTML5+CSS3初体验 项目1-1 三栏布局页面
响应式Web开发项目教程(HTML5+CSS3+Bootstrap)第2版 第1章 HTML5+CSS3初体验 例1-6 CSS3线性渐变
响应式Web开发项目教程(HTML5+CSS3+Bootstrap)第2版 第1章 HTML5+CSS3初体验 例1-3 CSS3圆角边框
响应式Web开发项目教程(HTML5+CSS3+Bootstrap)第2版 第1章 HTML5+CSS3初体验 例1-4 CSS3特殊边框效果
鉴于市场上用户的手机型号、种类、屏幕分辨率等参差不齐,传统方式根据主流系统分别开发相应的系统耗时又耗力,为了高效开发并节约开发项目成本,本文采用Android+HTML5相结合的方式进行移动端Web系统的设计研发工作...
开发小程序所需的基本技能 关于小程序的介绍和使用场景这里不作...如果你是一名没有任何基础的小程序爱好者,我建议你先去系统学习HTML、CSS、JS、JSON、XML再来学习小程序。 注意:小程序不是BS架构,它是一个