6 九 2010, 10:34上午
mobile
by

发表点儿看法吧

[分享主题]移动开发初探

 

Point

  • Why Mobile.
  • We Are In Trouble
  • Good News
  • Native app vasus web app
  • HTML5

image

手机经历了这些年代

  • The Brick Era (砖块时代)
  • The Candy Bar Era
  • The Feature Phone Era
  • The Smartphone Era
  • The Touch Era

image

我们一直在期待手机互联网的到来,可是一直没有到来,为什么呢.

  • 硬件的限制
  • 糟糕的浏览器
  • 昂贵的流量

imageimageimage image

移动互联网的种种障碍.

  • 硬件(机器)种类繁多
  • 糟糕的浏览器支持(<1%支持css2)
  • 各种各样的尺寸
  • 多种操作系统
  • 昂贵的流量

数据来源 Oreilly <<Mobile Design and Development>>

 

 

 

Good News

imageimage

越来越好.

  • 智能机越来发越多
  • 各平台的浏览器都基于webkit(平台开始统一)

今日欧美imageimage

现象.

  • 移动用户数量 > 移动网页 > 桌面平台网页
  • 英美用户有大量的时间花在mobile上

We Must Take Actionimageimage

mobile上的选择.

  • Native App (iphone sdk,android sdk, meego sdk,symbian sdk,webOs,bad)
  • Web App(html5,example:街旁)
  • Hybird(phone gap,flash lite)

 

imageimageimage 什么时候用native app.

  • 性能要求
  • 离线模式
  • 可以找寻(大概指在mobile桌面上可以找到,这个webkit已经支持了)
  • 用到手机的某种特性(电话,摄像,录音)
  • 支付(芯片支持)

 

 

Mobile Webimage

什么时候用mobile Website.

  • 访问地理信息
  • 离线缓存和存储
  • 触摸和手势操作
  • 方便部署
  • 跨平台

image image image

image  
现状

  • 有90%的desktop browser通过了 acid css2的测试
  • 极少的mobile browser通过了 acid css2

Progressive Enhacement是我们必须的选择

 

 

image imageimageimage image 对于多种对样的环境,我们必须探测我们的mobile web的宿主

  image image

 

 

 image image

 

 

 image

 

 

 

 

HTML5,新的挑战image image   

 

 

Canvasimage
image

 

Offline data storage
image

 

CSS2 
image

 

CSS3
image

 

Selectors (http://www.css3.info/)

Multiple background images
image 

 

Rounded corners

-webkit-border-bottom-left-radius
-webkit-border-bottom-right-radius
-webkit-border-top-left-radius
-webkit-border-top-right-radius

 

Border images

-webkit-border-image: url("border.png") 20 14 round stretch;

   image

 

border-width: 0 12px;
-webkit-border-image: url(whiteButton.png) 0 12 0 12 stretch stretch;

image

Gradients

Masks

<img src="penny.png" style="-webkit-mask-box-image: url(heart.png);">’

image

 

Defining the Viewport

<meta name="viewport" content="width=device-width">

<meta name="viewport" content="initial-scale=1.0">

<meta name="viewport" content="initial-scale=1.0, user-scalable=no">

 

Full-Screen Mode

<meta name="apple-mobile-web-app-capable" content="yes" />

 

 

Changing the Status Bar Appearance

<meta name="apple-mobile-web-app-status-bar-style" content="black" />

*name

*e-mail

web site

给点儿指导意见:


 
  • 我在说

  • 我在看

  • 新文章

  • 文章归档