移动Web开发调研

背景

在移动互联网浪潮下,移动设备普及,对配置需要考虑移动端设备可访问性。Web作为最贴近用户的配置手段,面向从PC端传统页面,向移动端页面的转型。

概念

PC Web: 面向传统PC电脑的浏览器开发的Web人机交互界面。

移动Web:面向移动设备的浏览器开发的Web人机交互界面。移动设备包括:手机、Pad等移动设备。

移动APP:面向移动设备开发的APP软件,直接运行于移动设备的系统上。不同于移动Web,其不需要借助中间软件运行。

Web APP: 以浏览器为入口,实现 App 的 Web 化,当浏览器能良好的发挥HTML5的技术特性,将会带来应用体验新的变革。和移动Web属于一个概念。

http://www.geekpark.net/topics/157633

我们有必要了解移动Web和移动APP各自的特点,才能弄清移动Web的定位。

移动APP

优点:

1、 移动APP具有更好的用户体验和交互操作。

2、 可以充分发挥设备硬件操作系统的特性。

缺点:

1、 开发周期长,维护成本高,调试困难。

2、 平台间移植困难,存在版本兼容性风险。

移动Web

优点:

1、 开发效率高,成本低。

2、 跨平台,一次开发,到处运行。

3、 无需安装和更新。

缺点:

1、 无法发挥本地硬件和操作系统的特性。

2、 难以实现复杂的用户界面效果。

从对比中可以发现,移动Web不能发挥设备硬件的功能,其适合传统的Web站点建立移动Web版本。

技术调研

HTML5

HTML5 是 HTML 标准的最新演进版本。 这个术语代表了两个不同的概念:

它是一个新的 HTML 语言版本包含了新的元素,属性和行为,同时包含了一系列可以被用来让 Web 站点和应用更加多样化,功能更强大的技术。 这套技术往往被称作 HTML5 和它的朋友们,通常简称为 HTML5。

功能分为以下大类:

  • 语义:能够让你更恰当地描述你的内容是什么。
  • 连通性:能够让你和服务器之间通过创新的新技术方法进行通信。
  • 离线 & 存储:能够让网页在客户端本地存储数据以及更高效地离线运行。
  • 多媒体:使 video 和 audio 成为了在所有 Web 中的一等公民。
  • 2D/3D 绘图 & 效果:提供了一个更加分化范围的呈现选择。
  • 性能 & 集成:提供了非常显著的性能优化和更有效的计算机硬件使用。
  • 设备访问 Device Access:能够处理各种输入和输出设备。
  • 样式设计: 让作者们来创作更加复杂的主题吧!

每个类中详细功能见下面URL,与CPE Web相关的功能包括(语义、绘图、样式设计)

https://developer.mozilla.org/zh-CN/docs/Web/Guide/HTML/HTML5

HTML5名声现在很大,但是实际上就是增加了一些新的功能和特性。 但是架不住广告铺天盖地,别人总跟你提,但是真正懂了人不是很多,这样HTML5沦为了一个营销手段。即使我们的设备只能用到很少一部分,但是如果用了,别人就会觉得很高大上。

移动设备的大量使用,HTML5规范和Webkit内核的推动,使得HTML5和移动Web开发绑定在一起,HTML5确实能提高移动端的体验(例如音视频、定位、Canvas), 但是实际上HTML5对象不区分PC和移动端。

目前主流的PC和移动端浏览器对HTML5功能有不同程度的支持。

PC上几款主流浏览器跑分:

http://html5test.com/

移动浏览器支持情况,可以访问下面网站查询:

http://mobilehtml5.org/

响应式设计

响应式Web设计这种方案:一个网站能够兼容多种移动设备屏幕尺寸,而不是为每种屏幕尺寸做一个特定的版本。这个概念可以说是为移动互联网而生的。

http://www.cnblogs.com/powertoolsteam/archive/2012/06/01/2529886.html

优点:

1、 因为无需为不同的设备维护不同的网站,这种方式节省了时间和金钱。

2、 响应式设计无需考虑用户代理的检测。

缺点:

1、 要考虑更多的分辨率,交互和场景,对设计师和PM的能力要求更高,页面考虑东西更多,设计时间也会变得更长。

2、 因为内容必须在客户端使用Javascript进行调整,所以要求变化的内容要尽可能的最少。UI发挥空间更小。

适用场景:

那些以文档为中心的网站,他们在不同的设备上的主要用途都不会改变,比如一个产品页面,对于这种网站响应式的设计就非常的适合。

不适用场景:

因为UI发挥空间小等因素,这种响应式设计不适合界面元素和交互等更加复杂的网页,比如淘宝。

参考:

https://developer.mozilla.org/zh-CN/docs/Web_Development/Mobile/Responsive_design

http://www.rbt.cn/html/xiangyingshi/37235.html

移动Web框架

移动Web开发,涉及的基本概念,可以稳步积累。 如果要做移动Web,下面介绍了一些网络推荐的开源框架,可以快速搭建移动Web界面。

1、 jQuery Mobile

jQuery发布的针对手机和平板设备、经过触控优化的Web框架。它基于jQuery,在不同移动设备平台上可提供统一的用户界面。该框架基于渐近增强技术,并利用HTML5和CSS3特性。

2、 Sencha Touch

它是一款HTML5移动应用框架。通过它可以创建Web应用,在外观和感觉上与Apple iOS 和Google Android本地应用十分相像。它利用HTML5发布音频/视频,进行本地存储;利用CSS3提供圆角、背景渐变、阴影等广泛使用的样式。

3、 Ionic

Ionic提供了一个免费且开源的移动优化HTML,CSS和JS组件库,来构建高交互性应用。基于Sass构建和AngularJS 优化。

Ionic既是一个CSS框架也是一个Javascript UI库。许多组件需要Javascript才能产生神奇的效果,尽管通常组件不需要编码,通过框架扩展可以很容易地使用,比如我们的AngularIonic扩展。

4、 Amaze UI

Amaze UI 采用业内先进的 Mobile first 理念,从小屏逐步扩展到大屏,最终实现所有屏幕适配,适应移动互联潮流。Amaze UI 含近 20 个 CSS 组件、10 个 JS 组件,更有 17 款包含近 60 个主题的 Web 组件,可快速构建界面出色、体验优秀的跨屏页面,大幅度提升你的开发效率。Amaze UI 非常注重性能,基于轻量的 Zepto.js 开发,并使用 CSS3 来做动画交互,平滑、高效,更适合移动设备,让你的 Web 应用可以高速载入。

5、 Weex

2016年4月21日,阿里巴巴在Qcon大会上宣布开源跨平台移动开发工具Weex,Weex能够完美兼顾性能与动态性,让移动开发者通过简捷的前端语法写出Native级别的性能体验,并支持iOS、安卓、YunOS及Web等多端部署。

对于移动开发者来说,Weex主要解决了频繁发版和多端研发两大痛点,同时解决了前端语言性能差和显示效果受限的问题。开发者可通过Weex官网申请内测。(http://alibaba.github.io/weex/)

开发者只需要在自己的APP中嵌入Weex的SDK,就可以通过撰写HTML/CSS/JavaScript来开发Native级别的Weex界面。Weex界面的生成码其实就是一段很小的JS,可以像发布网页一样轻松部署在服务端,然后在APP中请求执行。

与 现有的开源跨平台移动开放项目如Facebook的React Native和微软的Cordova相比,Weex更加轻量,体积小巧。因为基于web conponent标准,使得开发更加简洁标准,方便上手。Native组件和API都可以横向扩展,方便根据业务灵活定制。Weex渲染层具备优异的性 能表现,能够跨平台实现一致的布局效果和实现。对于前端开发来说,Weex能够实现组件化开发、自动化数据绑定,并拥抱Web标准。

http://www.cnblogs.com/onetwo/p/5724919.html

http://www.envicloud.cn/pages/news/216.html

http://www.oschina.net/p/weex

时间: 12-23

移动Web开发调研的相关文章

高性能WEB开发:重排与重绘

DOM编程可能最耗时的地方,重排和重绘. 1.什么是重排和重绘 浏览器下载完页面中的所有组件--HTML标记.JavaScript.CSS.图片之后会解析生成两个内部数据结构--DOM树和渲染树. DOM树表示页面结构,渲染树表示DOM节点如何显示.DOM树中的每一个需要显示的节点在渲染树种至少存在一个对应的节点(隐藏的DOM元素disply值为none 在渲染树中没有对应的节点).渲染树中的节点被称为"帧"或"盒",符合CSS模型的定义,理解页面元素为一个具有填充

[Java Web]2\Web开发中的一些架构

1.企业开发架构: 企业平台开发大量采用B/S开发模式,不管采用何种动态Web实现手段,其操作形式都是一样的,其核心操作的大部分都是围绕着数据库进行的.但是如果使用编程语言进行数据库开发,要涉及很多诸如事务.安全等操作问题,所以现在开发往往要通过中间件进行过渡,即,程序运行在中间件上,并通过中间件进行操作系统的操作,而具体一些相关的处理,如事务.安全等完全由中间件来负责,这样程序员只要完成具体的功能开发即可. 2.Java EE架构: Java EE 是在 Java SE 的基础上构建的,.NE

七日Python之路--第十二天(Django Web 开发指南)

<Django Web 开发指南>.貌似使用Django1.0版本,基本内容差不多,细读无妨.地址:http://www.jb51.net/books/76079.html (一)第一部分 入门 (1)内置数字工厂函数 int(12.34)会创建一个新的值为12的整数对象,而float(12)则会返回12.0. (2)其他序列操作符 连接(+),复制(*),以及检查是否是成员(in, not in) '**'.join('**')   或  '***%s***%d' % (str, int)

Java Web开发基础(3)-JSTL

在DRP项目中接触到了JSTL标签库,对我这样的比較懒的人来说,第一感觉就是"惊艳". JSTL标签库的使用.能够消除大量复杂.繁复的工作.工作量降低的不是一点半点.是降低了一大半.不论什么工具的引入,都会使我们的工作变的简单.可是问题是我们工作能够变的简单,可是我们不能让自己的大脑变的简单.所以,我们不是简单的会用就能够.我们还须要了解这个工具是怎样工作的.怎样为我们提供便利的.ok.以下进入正题,我们从问题開始-- JSP脚本带来的问题 不知道看到这几个子,各位有什么想法?反正我认

给大家分享web开发新手修改hosts文件实现本地域名访问的正确方法

1.如何正确修改hosts文件: 一般打开hosts文件里面都会有个示例,按照其格式修改即可 比如以下内容: # For example: # # 102.54.94.97 rhino.acme.com # source server # 38.25.63.10 x.acme.com # x client host 即代表打开rhino.acme.com这个网址将解析到102.54.94.97,ip地址与网址间至少有一空格,当然建议通过按Table键来编辑,即美观又不容易编写失误;这也就是通过解

java web开发阅读笔记:第一章

学习该书前所用推荐书籍<名师讲坛-java开发实战经典> 一web开发前奏 1.1网页发展 首先搞懂. 1.HTTP:超级文本传输协议,是一种通讯协议. 通过这个网络协议WW浏览器与WWW服务器之间的通讯进行规定,并且通过这个协议我们可以浏览网页,通过网页从客户端写入信息,从服务端得到信息.而通常的HTTP消息包括"客户端->服务端"与"服务端->客户端"的消息传送,图解HTTP协议的功能: 是在客户端通过浏览器根据HTTP协议中向服务器端发

Java Web开发中MVC设计模式简介

一.有关Java Web与MVC设计模式 学习过基本Java Web开发的人都已经了解了如何编写基本的Servlet,如何编写jsp及如何更新浏览器中显示的内容.但是我们之前自己编写的应用一般存在无条理性,对于一个小型的网站这样的编写没有任何问题,但是一但我们需要编写大型的web工程的话,我们现有的编写模式会造成web应用的可扩展性较差,而且一但出现问题不能准确的定位出问题出在哪里. Java是一门应用设计模式比较广泛的语言.目前主流提出的23种设计模式均可在Java语言编写的程序中所应用.目前

web开发中比较常用的html标签

作为一名web开发人员,总结了一下经常用到的html标签,如下:<html> <head> <!--meta头标签 表示页面三秒后跳转到新浪页面--> <meta charset="utf-8" http-equiv="refresh" content="3;url=http://www.sina.com"/> <title></title> </head> &l

Java Web开发模式

一 Java Web开发模式的变迁 1 最初的Java web服务器端编程技术是Servlet,利用Servlet就可以开发出一个Web应用程序. 2 为了解决Servlet缺陷,SUN推出了JSP技术.但是开发人员又走向了另一个极端就是完全放弃了Servlet. 在JSP页面混合使用HTML标记和java代码编写的脚本元素标记来开发Web程序.采用这种方法虽然可以编写JSP页面变得简单,直观,然而,他只适合于业务流程简单,系统规模较小的应用系统. 如果系统较大的话,就会出现两个严重的缺点: 1