Enviar búsqueda
Cargar
Android 4-app
•
Descargar como PPTX, PDF
•
2 recomendaciones
•
789 vistas
L
lydiafly
Seguir
Educación
Tecnología
Diseño
Denunciar
Compartir
Denunciar
Compartir
1 de 53
Descargar ahora
Recomendados
一步一步开发Html5 mobile apps
一步一步开发Html5 mobile apps
Adam Lu
Html5移动网站开发实践
Html5移动网站开发实践
Web Zhao
HTML CSS JavaScript 行動應用程式解決方案
HTML CSS JavaScript 行動應用程式解決方案
Ian Chen
Koubei banquet 27
Koubei banquet 27
Koubei UED
Web设计 5 “动感新势力”(css3 html5 以及 web_gl)
Web设计 5 “动感新势力”(css3 html5 以及 web_gl)
ziggear
20141212 html5 及微軟跨平台佈局 long
20141212 html5 及微軟跨平台佈局 long
Meng-Ru (Raymond) Tsai
Mobile web開發架構與入門
Mobile web開發架構與入門
Chi-wen Sun
Web 开发漫谈 —— 前端篇
Web 开发漫谈 —— 前端篇
尚斌 杨
Recomendados
一步一步开发Html5 mobile apps
一步一步开发Html5 mobile apps
Adam Lu
Html5移动网站开发实践
Html5移动网站开发实践
Web Zhao
HTML CSS JavaScript 行動應用程式解決方案
HTML CSS JavaScript 行動應用程式解決方案
Ian Chen
Koubei banquet 27
Koubei banquet 27
Koubei UED
Web设计 5 “动感新势力”(css3 html5 以及 web_gl)
Web设计 5 “动感新势力”(css3 html5 以及 web_gl)
ziggear
20141212 html5 及微軟跨平台佈局 long
20141212 html5 及微軟跨平台佈局 long
Meng-Ru (Raymond) Tsai
Mobile web開發架構與入門
Mobile web開發架構與入門
Chi-wen Sun
Web 开发漫谈 —— 前端篇
Web 开发漫谈 —— 前端篇
尚斌 杨
coServ & RWD
coServ & RWD
翊嘉 陳
淘宝前端开发关键词
淘宝前端开发关键词
jay li
CardKit & DOMO UI - 移动时代技术与设计的十字路口
CardKit & DOMO UI - 移动时代技术与设计的十字路口
Dexter Yang
WoT Frotend 的設計與實作
WoT Frotend 的設計與實作
julie huang
单页面开发遇到的一些问题
单页面开发遇到的一些问题
Zhi Zhong
美团前端架构简介
美团前端架构简介
pan weizeng
開放原始碼 Ch3.1 mobile - oss - oss行動領域-1 (ver1.0)
開放原始碼 Ch3.1 mobile - oss - oss行動領域-1 (ver1.0)
My own sweet home!
Responsive Web UI Design
Responsive Web UI Design
jay li
Html5
Html5
cazhfe
HTML5 生态系统和应用架构模型
HTML5 生态系统和应用架构模型
Tom Fan
Html5和css3入门
Html5和css3入门
Xiujun Ma
淘宝移动端Web开发最佳实践
淘宝移动端Web开发最佳实践
Du Yamin
淘宝移动端Web开发最佳实践
淘宝移动端Web开发最佳实践
jay li
淘宝移动端Web开发实践
淘宝移动端Web开发实践
完颜 小卓
[2008]网站重构 -who am i
[2008]网站重构 -who am i
Twinsen Liang
HTML5概览
HTML5概览
Adam Lu
6 rexsee:会html就会android
6 rexsee:会html就会android
36Kr.com
Appcan平台介绍
Appcan平台介绍
36Kr.com
《淘宝客户端 for Android》项目实战
《淘宝客户端 for Android》项目实战
完颜 小卓
Appcan移动应用开发平台介绍120409
Appcan移动应用开发平台介绍120409
zhengyiwuxian
前端開發學習簡介
前端開發學習簡介
peterju
浏览器渲染与web前端开发
浏览器渲染与web前端开发
Duoyi Wu
Más contenido relacionado
La actualidad más candente
coServ & RWD
coServ & RWD
翊嘉 陳
淘宝前端开发关键词
淘宝前端开发关键词
jay li
CardKit & DOMO UI - 移动时代技术与设计的十字路口
CardKit & DOMO UI - 移动时代技术与设计的十字路口
Dexter Yang
WoT Frotend 的設計與實作
WoT Frotend 的設計與實作
julie huang
单页面开发遇到的一些问题
单页面开发遇到的一些问题
Zhi Zhong
美团前端架构简介
美团前端架构简介
pan weizeng
La actualidad más candente
(6)
coServ & RWD
coServ & RWD
淘宝前端开发关键词
淘宝前端开发关键词
CardKit & DOMO UI - 移动时代技术与设计的十字路口
CardKit & DOMO UI - 移动时代技术与设计的十字路口
WoT Frotend 的設計與實作
WoT Frotend 的設計與實作
单页面开发遇到的一些问题
单页面开发遇到的一些问题
美团前端架构简介
美团前端架构简介
Similar a Android 4-app
開放原始碼 Ch3.1 mobile - oss - oss行動領域-1 (ver1.0)
開放原始碼 Ch3.1 mobile - oss - oss行動領域-1 (ver1.0)
My own sweet home!
Responsive Web UI Design
Responsive Web UI Design
jay li
Html5
Html5
cazhfe
HTML5 生态系统和应用架构模型
HTML5 生态系统和应用架构模型
Tom Fan
Html5和css3入门
Html5和css3入门
Xiujun Ma
淘宝移动端Web开发最佳实践
淘宝移动端Web开发最佳实践
Du Yamin
淘宝移动端Web开发最佳实践
淘宝移动端Web开发最佳实践
jay li
淘宝移动端Web开发实践
淘宝移动端Web开发实践
完颜 小卓
[2008]网站重构 -who am i
[2008]网站重构 -who am i
Twinsen Liang
HTML5概览
HTML5概览
Adam Lu
6 rexsee:会html就会android
6 rexsee:会html就会android
36Kr.com
Appcan平台介绍
Appcan平台介绍
36Kr.com
《淘宝客户端 for Android》项目实战
《淘宝客户端 for Android》项目实战
完颜 小卓
Appcan移动应用开发平台介绍120409
Appcan移动应用开发平台介绍120409
zhengyiwuxian
前端開發學習簡介
前端開發學習簡介
peterju
浏览器渲染与web前端开发
浏览器渲染与web前端开发
Duoyi Wu
Appcan介绍自己的应用开发平台
Appcan介绍自己的应用开发平台
MOBINODE
移动互联网时代的Mobile app设计和开发
移动互联网时代的Mobile app设计和开发
fangdeng
移动Web开发框架jqm探讨
移动Web开发框架jqm探讨
newker
ASP.NET Core 3.0 新功能
ASP.NET Core 3.0 新功能
Edward Kuo
Similar a Android 4-app
(20)
開放原始碼 Ch3.1 mobile - oss - oss行動領域-1 (ver1.0)
開放原始碼 Ch3.1 mobile - oss - oss行動領域-1 (ver1.0)
Responsive Web UI Design
Responsive Web UI Design
Html5
Html5
HTML5 生态系统和应用架构模型
HTML5 生态系统和应用架构模型
Html5和css3入门
Html5和css3入门
淘宝移动端Web开发最佳实践
淘宝移动端Web开发最佳实践
淘宝移动端Web开发最佳实践
淘宝移动端Web开发最佳实践
淘宝移动端Web开发实践
淘宝移动端Web开发实践
[2008]网站重构 -who am i
[2008]网站重构 -who am i
HTML5概览
HTML5概览
6 rexsee:会html就会android
6 rexsee:会html就会android
Appcan平台介绍
Appcan平台介绍
《淘宝客户端 for Android》项目实战
《淘宝客户端 for Android》项目实战
Appcan移动应用开发平台介绍120409
Appcan移动应用开发平台介绍120409
前端開發學習簡介
前端開發學習簡介
浏览器渲染与web前端开发
浏览器渲染与web前端开发
Appcan介绍自己的应用开发平台
Appcan介绍自己的应用开发平台
移动互联网时代的Mobile app设计和开发
移动互联网时代的Mobile app设计和开发
移动Web开发框架jqm探讨
移动Web开发框架jqm探讨
ASP.NET Core 3.0 新功能
ASP.NET Core 3.0 新功能
Último
日本九州齿科大学毕业证制作🚩定制本科卒业证书🚩哪里可以购买假美国西南基督复临安息日会大学成绩单
日本九州齿科大学毕业证制作🚩定制本科卒业证书🚩哪里可以购买假美国西南基督复临安息日会大学成绩单
jakepaige317
Grade 6 Lesson 7 Environment Protection.pptx
Grade 6 Lesson 7 Environment Protection.pptx
PriscilleXu
布莱德福德大学毕业证制作/英国本科学历如何认证/购买一个假的香港中文大学专业进修学院硕士学位证书
布莱德福德大学毕业证制作/英国本科学历如何认证/购买一个假的香港中文大学专业进修学院硕士学位证书
kathrynalvarez364
我了解到黑客在某些领域拥有卓越的技术能力,特别是在处理系统漏洞方面。在当前的情境下,如果我想要改变我的毕业成绩,他们的帮助或许是我唯一可行的选择。【微 t...
我了解到黑客在某些领域拥有卓越的技术能力,特别是在处理系统漏洞方面。在当前的情境下,如果我想要改变我的毕业成绩,他们的帮助或许是我唯一可行的选择。【微 t...
黑客 接单【TG/微信qoqoqdqd】
未毕业在线购买日本熊本县立大学学位记🏆学习成绩单电子版定制🏆克隆爱尔兰大学文凭🏆CFA证书定制
未毕业在线购买日本熊本县立大学学位记🏆学习成绩单电子版定制🏆克隆爱尔兰大学文凭🏆CFA证书定制
gravestomas0
澳洲圣母大学毕业证制作/加拿大硕士学历代办/购买一个假的中央警察大学硕士学位证书
澳洲圣母大学毕业证制作/加拿大硕士学历代办/购买一个假的中央警察大学硕士学位证书
kathrynalvarez364
JAWAPAN BUKU AKTIVITI BAHASA CINA TAHUN 3.pptx
JAWAPAN BUKU AKTIVITI BAHASA CINA TAHUN 3.pptx
CHANSUITNEEMoe
加急代办一个日本鹿儿岛纯心女子大学学位记🌈学习成绩单电子版定制🌈仿制荷兰大学毕业证🌈日语JLPT证书定制
加急代办一个日本鹿儿岛纯心女子大学学位记🌈学习成绩单电子版定制🌈仿制荷兰大学毕业证🌈日语JLPT证书定制
bairnshajjes
003 DSKP KSSR SEMAKAN 2017 BAHASA CINA TAHUN 3.pdf
003 DSKP KSSR SEMAKAN 2017 BAHASA CINA TAHUN 3.pdf
shanshanhui1
哪里可以购买日本神奈川县立保健福祉大学学位记/录取通知书可以制作吗/补办马来西亚大学文凭/CIA证书定制
哪里可以购买日本神奈川县立保健福祉大学学位记/录取通知书可以制作吗/补办马来西亚大学文凭/CIA证书定制
kathrynalvarez364
Último
(10)
日本九州齿科大学毕业证制作🚩定制本科卒业证书🚩哪里可以购买假美国西南基督复临安息日会大学成绩单
日本九州齿科大学毕业证制作🚩定制本科卒业证书🚩哪里可以购买假美国西南基督复临安息日会大学成绩单
Grade 6 Lesson 7 Environment Protection.pptx
Grade 6 Lesson 7 Environment Protection.pptx
布莱德福德大学毕业证制作/英国本科学历如何认证/购买一个假的香港中文大学专业进修学院硕士学位证书
布莱德福德大学毕业证制作/英国本科学历如何认证/购买一个假的香港中文大学专业进修学院硕士学位证书
我了解到黑客在某些领域拥有卓越的技术能力,特别是在处理系统漏洞方面。在当前的情境下,如果我想要改变我的毕业成绩,他们的帮助或许是我唯一可行的选择。【微 t...
我了解到黑客在某些领域拥有卓越的技术能力,特别是在处理系统漏洞方面。在当前的情境下,如果我想要改变我的毕业成绩,他们的帮助或许是我唯一可行的选择。【微 t...
未毕业在线购买日本熊本县立大学学位记🏆学习成绩单电子版定制🏆克隆爱尔兰大学文凭🏆CFA证书定制
未毕业在线购买日本熊本县立大学学位记🏆学习成绩单电子版定制🏆克隆爱尔兰大学文凭🏆CFA证书定制
澳洲圣母大学毕业证制作/加拿大硕士学历代办/购买一个假的中央警察大学硕士学位证书
澳洲圣母大学毕业证制作/加拿大硕士学历代办/购买一个假的中央警察大学硕士学位证书
JAWAPAN BUKU AKTIVITI BAHASA CINA TAHUN 3.pptx
JAWAPAN BUKU AKTIVITI BAHASA CINA TAHUN 3.pptx
加急代办一个日本鹿儿岛纯心女子大学学位记🌈学习成绩单电子版定制🌈仿制荷兰大学毕业证🌈日语JLPT证书定制
加急代办一个日本鹿儿岛纯心女子大学学位记🌈学习成绩单电子版定制🌈仿制荷兰大学毕业证🌈日语JLPT证书定制
003 DSKP KSSR SEMAKAN 2017 BAHASA CINA TAHUN 3.pdf
003 DSKP KSSR SEMAKAN 2017 BAHASA CINA TAHUN 3.pdf
哪里可以购买日本神奈川县立保健福祉大学学位记/录取通知书可以制作吗/补办马来西亚大学文凭/CIA证书定制
哪里可以购买日本神奈川县立保健福祉大学学位记/录取通知书可以制作吗/补办马来西亚大学文凭/CIA证书定制
Android 4-app
1.
淘宝客户端 for Android
项目实战 TaobaoUED Mobile Web Team 王卓[SMbey0nd]
2.
手机淘宝网 iPhone/Android版 #1
上线 m.taobao.com
3.
Android来了
4.
• Android:Google &
OpenSource • vs. iOS • 市场份额:17.2% 3 SRAIW (Gartner) • 国内现状:OMS MTK & 国产设备 • 未来趋势:…
5.
项目简介
6.
7.
8.
9.
技术框架
10.
技术框架 Native App+Web App
合体!
11.
技术框架 Web App 的优势: •
成本 • 更新 • 扩展和复用
12.
技术框架 Native App 的优势: •
功能 • 表现 • 速度和性能
13.
技术框架 扬长避短!
14.
TIPS 前端开发火花集
15.
Android Webkit Browser
16.
Android Webkit Browser •
支持的主要技术特性: HTML5: • localStorage (Android 2.1) • Geolocation (Android 2.1) • Canvas • Video/Audio • Forms(Android 2.0 incomplete) • … http://www.quirksmode.org/webkit.html http://html5test.com/
17.
Android Webkit Browser •
支持的主要技术特性: CSS3: • Selector • Border • Background • Text effects • Transition/Transform/Animation • Media queries • … http://www.quirksmode.org/webkit.html
18.
Android Webkit Browser •
支持的主要技术特性: JavaScript: • Touch Events • ontouchstart/ontouchmove/ontouchend • Multitouch Events/Gestures (incomplete) • 设备API(Android 2.2) • navigator.connection.type • navigator.onLine • navigator.isApplicationInstalled • … http://www.quirksmode.org/mobile/tableTouch.html
19.
Let’s Goooooo!
20.
宽度自适应布局 • 目的: –
兼容不同分辨率设备 • 320x480/360x640/480x800/480x854 – 屏幕旋转适应 • Orientation • 做法: – 百分比宽度 – max-width/min-width
21.
宽度自适应布局
22.
CSS2.1/3选择器 • 目的:拒绝冗余Class,提高灵活性 –
E[attr=val] – E>F – E~F – E+F – E:last-child – E:disabled – …
23.
告别 :hover • 触屏没有鼠标,无需设置悬停色 •
关于点击焦点: – Android不支持设置焦点高亮色和伪类 – iPhone支持: • –webkit-tap-highlight-color • :active伪类
24.
告别 :hover
25.
迎接inline-block • 目的:告别float和轻浮 • 适用场合:
– 各种同向横排 • 不适用场合: – 反向停靠 – 无法接受水平空隙
26.
迎接inline-block
27.
图形模拟 • 目的:减少图片 –
模拟圆形: -webkit-border-radius – 模拟三角: border-top:10px solid transparent; border-bottom:10px solid transparent; border-right:10px solid #ccc;
28.
图形模拟
29.
优化select • 隐藏边框和背景 –
select{background:transparent;} • 增加下拉图片 • 扩大点击区域 – label{display:block;}
30.
优化select
31.
实用CSS组合 #1 • 轻松实现漂亮按钮和tab:
• -webkit-border-radius • -webkit-box-shadow • -webkit-gradient • text-shadow • Multiple backgrounds
32.
实用CSS组合 #2 • 轻松实现漂亮弹出层:
• -webkit-border-radius • -webkit-box-shadow • opacity
33.
CSS动画 • 简单的弹出层动画:
.ani-pop{-webkit-animation:twc-popup .5s ease-in-out 0;} @-webkit-keyframes twc-popup{ 0%{-webkit-transform:scale(1) rotate(0);opacity:0;} 50%{-webkit-transform:scale(1.2) rotate(0);opacity:.5;} 100%{-webkit-transform:scale(1) rotate(0);opacity:1;} } • 低配置机器资源消耗较大,尽量不用:(
34.
JS框架/类库的选择 • 框架/类库: –
YUI2/3 – Kissy – Sencha – jQuery – jQuery Mobile • Native模拟: – jQTouch – iUI – iWebkit – …
35.
Orientation屏幕旋转检测 • 事件 –
Android:window.resize – iOS:onorientationchange • 取值 – window.orientation • case 0 : //portrait(normal) • case 90(-90): //landscape • 动作 – Body.landscape
36.
去除超链接焦点框 • 给a的ontouchstart设置return false;
– 快速响应 – 兼容Android/iOS
37.
touch/gestures事件 • 支持度
– Android不支持多点触摸和手势 – iOS全支持 • touch和gestures介绍 – ontouchstart/ontouchmove/ontouchend – gesturestart/gesturechange/gestureend – touches/targetTouches/changedTouches – http://2.ly/ccay • 应用 – ScrollLayer组件[Beta] http://2.ly/cca6 http://www.smbey0nd.com/2010/07/10/touching-and-gesturing-on-the-iphone/
38.
Native + Web
双向通信 (合体过程)
39.
合体简介 • WebView
– Webkit在SDK中封装而成的一个组件,用来显示网络 内容 – Java和JavaScript通过WebView的接口进行通信
40.
Native调用Web • 监听超链接
– <a href=“http://a.com/?b”>监听b参数</a> • loadUrl方法 – webview.loadUrl("javascript:foo()");
41.
Web调用Native • addJavascriptInterface方法
– addJavascriptInterface(Object obj,String interfaceName) //将一个java对象绑定到一个javascript对象中 – Native:webview. addJavascriptInterface (this, “GoAction”); – Web:Javascript:window.GoAction.htmlFinsh(); • 善后处理 – 通过标识判断页面是否在Native环境中 <meta content="true" name="twcClient" id="twcClient" />
42.
合体实例 #1 • 加速加载
(Web调用Native) – WebView的页面资源加载检测缺陷 – 页面onDomReady后马上调用Java函数通知Native
43.
合体实例 #2 • 调用系统功能
– 分享给好友(Native调用Web)
44.
Android Webkit的缺陷和BUGs •
HTML5语义化标记 • Placeholder属性 • 不支持动画GIF和svg • position:fixed不支持(Android 1.6-) /不完善(Android 2.1-) • 不支持-webkit-tap-highlight-color • 不支持图片圆角和控件圆角(Android 1.6-) • 部分机型 Scroll/touch事件的BUG(HTC Hero/HTC Legend) – http://2.ly/cg8d • 缺少说明文档和官方支持
45.
前端成就 (吹NB)
46.
前端成就 – 用户体验优化 •
CSS3应用 – 24张 20KB • 全自适应布局 – 320+ • 按需加载和异步优化 • ScrollLayer组件 • 兼容性 – iPhone & other Webkit…
47.
技术应用展望
48.
技术应用展望 •
HTML5语义化标记 • Media Queries • Video/Audio/Upload • SVG/Canvas • Flash • localStorage/Geolocation • Native+Web的深入融合和优化
49.
50.
致敬 salute to chencheng
51.
"People should basically
shut up and do as I tell them. I know better. " via @PPK
52.
By 王卓 [SMbey0nd]
http://www.SMbey0nd.com TaobaoU3D http://twitter.com/SMbey0nd M l e W Team obi eb
53.
bye 拜拜
Descargar ahora