HTML5 应用介绍


HTML5 应用介绍 方向:互联网移动、平板多点触控、 WebApps 产品:跨媒体交互网络图书馆 主讲简介 ideaTouch 寿险核心业务系统研发负责人 面向下一代移动网络应用, HTML5及其相关新技术的评论博客 创始人 Blogger 范永国 点滴网络 ideaTouch 新一代应用 更友好、更安全、更智慧 Any Device Anywhere Anytime 技术标准 初具成熟 外围支持 全部就绪 开发门槛 相对较低 开发人员 磨拳擦掌 为什么HTML5? JavascriptCSS3 Ajax “它将弥补上一代 HTML的不足,具体说,是实现 Flash, Silverlight, JavaFX 所能实现的功能。” Web技术回顾 年份 里程碑 备注 1991 HTML 非官方发布 1994 HTML 2 1996 CSS + Javascript 1997 HTML 3.2 1998 CSS2 1999 HTML 4.01 10年生命力,发展几乎停滞了 10年 2000 XHTML 1 特性与 HTML 4一致,要求 XML语法规范。视网页为文档 2001~ XHTML 2 兼容性原因,一直未被最终发布 2002 DIV+CSS 网页布局 2004 HTML (WHATWG) Web Hypertext Applications Technology Working Group 浏览器厂商主导 2005 AJAX 2007~2009 HTML 5 Draft 基于 WHATWG成果 2010 HTML 5 主流浏览器广泛支持。崭新阶段,跨越式发展 ... Web 1.0 Web 2.0 Web 3.0 代码模样? 能做什么? 哪些亮点? 技术架构? 怎么学? 能做什么? • 有趣小应用 • LOGO 3DCube 3DBox Blob PageFlip More... • Video CanvasI CanvasII Google Gravity • Timeline Reader • Games • 黑帮战争 • Pirates Love Daisies! • Gmail, Google Docs • 网络图书馆 有趣的 Logo (Canvas) http://ipader.com/blog/wp-content/uploads/2010/09/coollogo.html?t=ideaTouch 操作自如的 Cube
One face
Up, down, left, right
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
New forms of navigation are fun.
Rotating 3D cube
http://www.paulrhayes.com/experiments/cube-3d/ http://www.paulrhayes.com/experiments/cube/multiCubes.html Multi-Cube Video & Canvas
.... function explode(x, y){ for(var i=0; i tile.force){ tile.force = force; var radians = Math.atan2(ydiff, xdiff); tile.moveX = Math.cos(radians); tile.moveY = Math.sin(radians); tile.moveRotation = 0.5-Math.random(); } } tiles.sort(zindexSort); processFrame(); } .... http://craftymind.com/factory/html5video/CanvasVideo.html 美联社时间轴网站应用 http://html5.labs.ap.org/ 图书馆应用演示 (PC版 ) 图书馆应用演示 (iPad版 ) iPad 图书馆应用演示 (iPhone版 ) iPhone 如果一种技术很有趣、又很实用? 创意无处不在 哪些亮点? (1/2) • HTML5应用 • 标准:主流软件厂商全力推动 • 开放:源码开放,开发者资源共享更容易 • 方便:几乎等同于本地应用交互体验,但不用任何安装 • 安全:最大限度保护本地资源 • 有趣:闪客,趣味小游戏,3D互动,只要想得着 Postel’s Law: “Be conservative in what you send; be liberal in what you accept.” 伯斯塔尔法则: “发送时要保守;接收时要开放 ” 哪些亮点? (2/2) • 主要特性 • 应用: Web Application (离线)+ WebWorker • 存储: LocalStorage + IndexexDB + FileReader • 通讯: WebSocket + Geolocation (地理位置) • 多媒体: Video/Audio + Canvas + Web GL(3D) • 表单元素: email,url,password,search, date, tel etc. 应用 • 离线 • 保证离线状态下的 Web应用正常使用 • 应用相关资源文件会被缓存至本地 • 多任务 • 刷屏不影响待执行任务运行 • 窗口级任务管理 1. 设置一个配置文件 reader.manifest CACHE MANIFEST #JS files lib/jquery/jquery-1.4.3.js module/reader/reader.js #CSS files themes/reader/reader.css #Image files NETWORK: # 不需缓存的动态网络资源 2. 应用入口 html文件需要设置如下 : 3. Apache .htaccess 加mimeType AddType text/cache-manifest manifest 离线应用支持步骤: 1. 窗口层级动态装载 JS importScripts("jquery-1.4.3.js"); 2. 启动一个 worker var worker = new Worker('reader.js'); 3. message事件监听 addEventListener("message", messageHandler, true); 4. 调度入口 document.getElementById("resourceButton").onclick = function() { worker.postMessage("loadResource"); } 5. 停止 Worker worker.terminate(); 多任务步聚: 存储 • LocalStorage/SessionStorage • SessionStorage: 用于运行时数据临时存储 • localStorage: 用于应用高速数据存取,加快运行速度 • WebSQL • 需要 SQL数据库开发经验 • 该标准已被 IndexedDB替代 • 文件 API • 获得本地文件句柄 • 在 HTML5内自由读取文件内容 1. 对话级,浏览器关闭后不复存在 // save sessionStorage[‘data’] = {“test”:”sessonStorage”}; // get var data = sessionStorage[‘data1’] 2. 浏览器级,浏览器关闭后仍存在 // save localStorage[‘data2’] = {‘test”:”localStorage’}; // get var data = sessionStorage[‘data2’] function prepareDatabase(ready, error) { return openDatabase('documents', '1.0', 'Offline document storage', 5*1024*1024, function (db) { db.changeVersion('', '1.0', function (t) { t.executeSql('CREATE TABLE docids (id, name)'); }, error); }); } db.readTransaction(function (t) { t.executeSql('SELECT title, author FROM docs WHERE id=?', [id], function (t, data) { report(data.rows[0].title, data.rows[0].author); }); }); var file = document.getElementById('file').files[0]; var reader = new FileReader(); reader.readAsText(readFile, "UTF-16"); 通讯 • WebSocket • 即时通信 • 服务器推送服务 • Geolocation • Google Map最佳搭档 • 移动终端必选特性 navigator.geolocation.getCurrentPosition(locateMap, errorHandle); .... locateMap = function(position){ var latlng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude); var myOptions = { zoom: 15, center: latlng, mapTypeControl: false, navigationControlOptions:{ style: google.maps.NavigationControlStyle.SMALL }, mapTypeId: google.maps.MapTypeId.ROADMAP }; var map = new google.maps.Map(document.getElementById("mapcanvas"), myOptions); } 位置定位基本示例 http://html5demos.com/geo 1. 建立连接 url = "ws://localhost:8080/echo"; w = new WebSocket(url); 2. open, message, close基本响应 w.onopen = function() { log("open"); w.send("thank you for accepting this websocket request"); } w.onmessage = function(e) { log(e.data);} w.onclose = function(e) { log("closed"); } 3. 向已建立的 socket通道发送信息 document.getElementById("sendButton").onclick = function() { w.send (document.getElementById("inputMessage").value); } WebSoket使用基本步骤 技术架构 (1/3) HTML5 Based Apps (HTML5 + CSS3 + Javascript) ‣ 交互体验 ‣ 统一认证 (OAuth) ‣ 跨终端 (PC, iOS, Android and HTML5-based devices) ‣ 用户数据 ‣ 智能搜索 ‣ MVC = JS Objects + HTML5/CSS3 + Events Cloud Services (Java, C#) ‣ 复杂计算 (Search, Rule/Calculation Engine) ‣ 安全服务 ‣ 跨平台 ‣ 数据中心 ‣ 搜索推荐 ‣ MVC = Objects + Remote Clients + ESB ‣ ... JSON/ATOM/RSS WebService etc.. 架构案例-网络图书馆 (2/3) Category Feature Remark WebApp HTML5, CSS3, Ajax, File Reader, SQLite WebApp jQuery, JQueryMobile, WebApp JSON/OPDS/Epub Standard WebApp Touch Devices BackServices Jackrabbit, Hibernate, Servlet BackServices Word Converter, Epub Parser, PDF Parser BackServices OAuth, Mail BackServices JSON/OPDS/Epub Standard Technical Features 架构案例-网络图书馆 (3/3) Feature Item Web App Back System Non-Functional Object Model √ (Json) √ (Hibernate) Non-Functional Persistence (Database) √ (SQLite) √ (Mysql)Non-Functional Independent Application/Services √ √ Functional User Interaction √ (Bookshelf, Reader) Open API Functional Document Management Partial (SQLite) √ (Jackrabbit) Functional Document Convertion epub, html epub, word, blog, pdf txt, html Functional OPDS (开放的图书馆目录服务 ) × √ Functional Search (book, media, blog and internet resources) User data Level Internet Level Functional User/Authorization Management OAuth √ Functional 智能推荐 × √ OS OS Windows, Mac OS, Android, iOS, HTML5 based OS Unix, Linux, Windows, Mac OS Hardware Devices PC, Android Mobile/Slate, iPhone/iPad, HTML5 based Devices NA Web App vs. Back System 技术框架 (2/2) • 主流框架 - jQuery, ExtJS, GWT, Prototype, - DWR - Dojo - Sprout Core (桌面应用 ) • 移动框架 - Sencha Touch, JQueryMobile, PhoneGap 示例 • Sample 1 - Elements • Sample 2 - Form Elements • Sample 3 - File API • Sample 4 - Typical Programming • 项目小技巧分享 Sample 1 - Elements

Page title

Page subtitle

....
Copyright © 2009.

Title

Content...

Title

Content...
Sample 2 - Form Elements(1/2)