Enviar búsqueda
Cargar
Html5 mobile web app浅谈
•
Descargar como PPTX, PDF
•
3 recomendaciones
•
719 vistas
sankyu Tang
Seguir
Tecnología
Diseño
Denunciar
Compartir
Denunciar
Compartir
1 de 28
Descargar ahora
Recomendados
COMO TRANSPORTAR LA CERAMICA
COMO TRANSPORTAR LA CERAMICA
mpenuela
Windows Mobile Widget 開發
Windows Mobile Widget 開發
Chui-Wen Chiu
Html5移动web应用开发(PhoneGap)
Html5移动web应用开发(PhoneGap)
amd6400
Html5移动web应用开发(PhoneGap)
Html5移动web应用开发(PhoneGap)
amd6400
Android 4-app
Android 4-app
lydiafly
HTML5移动WEB应用程序开发(PhoneGap)
HTML5移动WEB应用程序开发(PhoneGap)
amd6400
HTML5移动应用开发分享会(PhoneGap)
HTML5移动应用开发分享会(PhoneGap)
amd6400
Ajax Transportation Methods
Ajax Transportation Methods
yiditushe
Recomendados
COMO TRANSPORTAR LA CERAMICA
COMO TRANSPORTAR LA CERAMICA
mpenuela
Windows Mobile Widget 開發
Windows Mobile Widget 開發
Chui-Wen Chiu
Html5移动web应用开发(PhoneGap)
Html5移动web应用开发(PhoneGap)
amd6400
Html5移动web应用开发(PhoneGap)
Html5移动web应用开发(PhoneGap)
amd6400
Android 4-app
Android 4-app
lydiafly
HTML5移动WEB应用程序开发(PhoneGap)
HTML5移动WEB应用程序开发(PhoneGap)
amd6400
HTML5移动应用开发分享会(PhoneGap)
HTML5移动应用开发分享会(PhoneGap)
amd6400
Ajax Transportation Methods
Ajax Transportation Methods
yiditushe
TBAD F2E 2010 review
TBAD F2E 2010 review
leneli
移动互联网时代的Mobile app设计和开发
移动互联网时代的Mobile app设计和开发
fangdeng
非常靠谱 Html 5
非常靠谱 Html 5
Tony Deng
HTML5概览
HTML5概览
Adam Lu
Jsp讲义
Jsp讲义
yiditushe
移动互联网时代的Mobile app设计和开发
移动互联网时代的Mobile app设计和开发
完颜 小卓
Real time web实时信息流推送
Real time web实时信息流推送
yongboy
Real-Time Web实时信息流推送
Real-Time Web实时信息流推送
yongboy
Using google appengine_final
Using google appengine_final
Wei Sun
一步一步开发Html5 mobile apps
一步一步开发Html5 mobile apps
Adam Lu
Html5
Html5
cazhfe
2014南部創新應用工具研討會 快速開發行動 app
2014南部創新應用工具研討會 快速開發行動 app
益祥 許
Using google appengine_1027
Using google appengine_1027
Wei Sun
Using google appengine (2)
Using google appengine (2)
Wei Sun
Node Web开发实战
Node Web开发实战
fengmk2
Html5 history api
Html5 history api
景智 張
揭秘Html5和Css3
揭秘Html5和Css3
Adam Lu
揭秘Html5和Css3 ---- 鲁超伍
揭秘Html5和Css3 ---- 鲁超伍
裕波 周
Html5css3 go.yeefe.com
Html5css3 go.yeefe.com
tellyeefe
Exam 98-375 HTML5 Application Development Fundamentals
Exam 98-375 HTML5 Application Development Fundamentals
Chieh Lin
Más contenido relacionado
Similar a Html5 mobile web app浅谈
TBAD F2E 2010 review
TBAD F2E 2010 review
leneli
移动互联网时代的Mobile app设计和开发
移动互联网时代的Mobile app设计和开发
fangdeng
非常靠谱 Html 5
非常靠谱 Html 5
Tony Deng
HTML5概览
HTML5概览
Adam Lu
Jsp讲义
Jsp讲义
yiditushe
移动互联网时代的Mobile app设计和开发
移动互联网时代的Mobile app设计和开发
完颜 小卓
Real time web实时信息流推送
Real time web实时信息流推送
yongboy
Real-Time Web实时信息流推送
Real-Time Web实时信息流推送
yongboy
Using google appengine_final
Using google appengine_final
Wei Sun
一步一步开发Html5 mobile apps
一步一步开发Html5 mobile apps
Adam Lu
Html5
Html5
cazhfe
2014南部創新應用工具研討會 快速開發行動 app
2014南部創新應用工具研討會 快速開發行動 app
益祥 許
Using google appengine_1027
Using google appengine_1027
Wei Sun
Using google appengine (2)
Using google appengine (2)
Wei Sun
Node Web开发实战
Node Web开发实战
fengmk2
Html5 history api
Html5 history api
景智 張
揭秘Html5和Css3
揭秘Html5和Css3
Adam Lu
揭秘Html5和Css3 ---- 鲁超伍
揭秘Html5和Css3 ---- 鲁超伍
裕波 周
Html5css3 go.yeefe.com
Html5css3 go.yeefe.com
tellyeefe
Exam 98-375 HTML5 Application Development Fundamentals
Exam 98-375 HTML5 Application Development Fundamentals
Chieh Lin
Similar a Html5 mobile web app浅谈
(20)
TBAD F2E 2010 review
TBAD F2E 2010 review
移动互联网时代的Mobile app设计和开发
移动互联网时代的Mobile app设计和开发
非常靠谱 Html 5
非常靠谱 Html 5
HTML5概览
HTML5概览
Jsp讲义
Jsp讲义
移动互联网时代的Mobile app设计和开发
移动互联网时代的Mobile app设计和开发
Real time web实时信息流推送
Real time web实时信息流推送
Real-Time Web实时信息流推送
Real-Time Web实时信息流推送
Using google appengine_final
Using google appengine_final
一步一步开发Html5 mobile apps
一步一步开发Html5 mobile apps
Html5
Html5
2014南部創新應用工具研討會 快速開發行動 app
2014南部創新應用工具研討會 快速開發行動 app
Using google appengine_1027
Using google appengine_1027
Using google appengine (2)
Using google appengine (2)
Node Web开发实战
Node Web开发实战
Html5 history api
Html5 history api
揭秘Html5和Css3
揭秘Html5和Css3
揭秘Html5和Css3 ---- 鲁超伍
揭秘Html5和Css3 ---- 鲁超伍
Html5css3 go.yeefe.com
Html5css3 go.yeefe.com
Exam 98-375 HTML5 Application Development Fundamentals
Exam 98-375 HTML5 Application Development Fundamentals
Html5 mobile web app浅谈
1.
HTML5 Mobile Web
App浅谈 @三桥sankyu http://weibotouch.sinaapp.com/
2.
WeiboTouch(Mobile Web实践) HTML5在Mobile
Web的可行性 移动Web的未来 移动Web的过去与现在 1 4 3 3 2 主要内容
3.
4.
图片为主
5.
JS代码满天飞
6.
代码和样式分离
7.
浏览器兼容问题
8.
AJAX
9.
语义文档
10.
减少图片
11.
更高效API 第
2 页
12.
WAP时代 第 3
页 Symbian WindowCE WindowMobile MTK WML HTML XHTML WAP浏览器 UC浏览器 Opera Mini 平台 语言 代表
13.
移动Web时代 第 4
页 iOS Safari Android Browser BlackBerry Webkit WebOS Palm HTML(5) CSS(3) JavaScript Android iOS BlackBerry 平台 语言 代表
14.
Mobile Native App
UI 第 5 页
15.
16.
不受网络速度的限制,节省带宽成本;
17.
可访问本地硬件设备和资源;
18.
19.
维护成本高、调试困难;
20.
21.
跨平台应用,UI统一
22.
调试、发布方便;一次编写,云端运行
23.
24.
25.
iOSMobile Safari
26.
BlackBerry Webkit
27.
Symbian S60 Web Browser
for S60
28.
29.
触摸屏、缩放
30.
单核、双核CPU
31.
内存大
32.
GPRS、EDGE、CDMA、3G
33.
支持WiFi
34.
对HTML5和CSS3支持良好
35.
36.
第 10 页
设置viewport,适应移动设备的显示宽度 <meta name="viewport" content="user-scalable=no,width=device-width,initial-scale=1" /> user-scalable – 用户是否可以手动缩放;width – 定义viewport宽度(默认为980像素) ,例子中值为device-width是指设置为设备显示宽度;height – viewport的高度;initial-scale – 初始的缩放比例 (范围从 0 到10);minimum-scale – 允许用户缩放到的最小比例;maximum-scale – 允许用户缩放到的最大比例;
37.
第 11 页
隐藏safari导航栏以及工具栏 <meta name=”apple-mobile-web-app-capable” content=”yes” /> Web App启动画面 <link rel=”apple-touch-startup-image” href=”Startup.png” /> 设置iPhone主屏幕Icon <link rel="apple-touch-icon-precomposed" href="icon.png" />
38.
页面代码更生动 第 12
页 HTML5新元素标签 有含义的元素标签 更合理的页面代码 header、footer、article、section、aside……
39.
40.
Native Mobile App
UI
41.
减少页面渲染的频率或次数
42.
43.
Google+ Web App
第 15 页
44.
随时随地定位你的位置 第 16
页 GeoLocation API能够获取用户当前位置。 成熟的HTML5规范 支持大部分现代浏览器 多种数据源获取位置信息 适合在移动设备Web应用程序中使用
45.
46.
依赖无线网络的场地
47.
定位差别大
48.
网络速度慢
49.
依赖于网络提供商的介入设备
50.
定位精确
51.
需要额外设备支持
52.
53.
第 19 页
重复请求当前地理位置: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Geolocation API地理定位</title> <script type="text/javascript"> navigator.geolocation.getCurrentPosition(function(pos){ console.log("当前地理位置的纬度:"+pos.coords.latitude); console.log("当前地理位置的经度:"+pos.coords.longitude); console.log("当前经纬度的精度:"+pos.coords.accuracy); }); var watchID = navigator.geolocation.watchPosition(function(pos){ console.log("当前位置变化的纬度:"+pos.coords.latitude); console.log("当前位置变化的经度:"+pos.coords.longitude); console.log("当前位置变化经纬度的精度:"+pos.coords.accuracy); navigator.geolocation.clearWatch(watchID); },function(){ console.log("error"); }) </script> </head> <body> </body> </html>
54.
55.
多图片背景
56.
57.
linear、ease
58.
ease-in、ease-out
59.
ease-in-out变形和动画Transform Animations 阴影
shadow
60.
移动JS框架 第 21
页 and more
61.
三大主流移动JS框架对比 第 22
页 基于jQuery 页面驱动 更像WebPage应用 跨平台,支持多达7种平台 支持HTML5部分特性 跨平台,继承Ext风格 丰富的UI组件 酷似Native 原生App JS类库庞大 渲染速度慢 UI定制复杂 采用Ajax UI库少
62.
63.
CSS3
64.
支持Chrome、Safari
65.
66.
什么开发工具? 第 25
页
67.
68.
一种Web的延续,一种全新视觉设计
69.
Native App +
Web App模式结合
70.
Descargar ahora