Mobile Web(preview version)
39
-
Upload
yu-wei-shang -
Category
Technology
-
view
352 -
download
2
Transcript of Mobile Web(preview version)
2
START
3
Mobile Web給行動裝置瀏覽的網頁
4
目前有兩種實作方式
5
(1)
6
Responsive Web Site
7
Responsive Web Site看起來像這樣…
8
Responsive Web Site使用Media Query讓網頁隨著瀏覽器畫面寬度提供相對應 CSS版型 (內容 )
9
Responsive Web SiteCSS3 Media Query
@media (min-width: 768px) and (max-width: 979px) { .row { margin-left: -20px; *zoom: 1; }
}
@media (max-width: 480px) { .nav-collapse { -webkit-transform: translate3d(0, 0, 0); } .page-header h1 small { display: block; line-height: 20px; }
}
10
Responsive Web Site畫面寬度分水嶺
11
適用於資訊型網站ex:新聞、部落格、照片分享‧‧‧
Responsive Web Site
12
(2)
13
OptimizedWeb Site
14
Optimized Web Sites針對行動裝置客製出來的網站
15
Optimized Web Sitestw.m.yahoo.com m.facebook.com
16
Optimized Web Sites適合功能型網站：銷售資料蒐尋Web Apps…
Desktop & Tablet Web Site
Mobile Web Site
17
Optimized Web Sites
當然也能用於資訊型網站
18
Mobile APP
19
App的平台
20
簡報內容不包含App平台選擇
21
目前也是兩種實作方式
22
(1)
23
Native Apps
24
Native Apps使用不同平台原生語言的應用程式。Objective CC#、 Visual BasicJava…
25
Native Apps適用類型：銷售、財金應用軟體 (工具 )遊戲企業 Apps….
26
Native Apps
提供最佳的使用者體驗
27
Native Apps
前提是有好的UX設計
28
(2)
29
Hybrid Apps
30
Hybrid Apps
使用WebView元件瀏覽網頁並可包成App
31
Hybrid Apps
Write Once Run Everywhere
iOS, Android, Blackberry, Windows Phone, Palm WebOS, Bada and Symbian
32
Hybrid Apps
也有可能
Hybrid AppsWrite Once, Debug
Everywhere
手機瀏覽器版本可能不同支援度也不同
34
Hybrid Apps如果UI設計最先是針對 iOS
35
Hybrid AppsAndroid使用者可能會用的不習慣
36
Native vs Hybrid哪個比較好
37
38
Facebook的 App轉變
HTML5 Native
39
Part IEnd
