手机网站mobile web程序开发

rain

移动设备的快速发展给用户带来了很大的便利。用户使用Android、iPhone和其它移动设备很容易接入互联网。最近的一项研究表明，超过6300万的用户使用移动设备访问不同的移动网站，这个数据预计到明年年底会达到2亿左右。由于人数在不断增长，所以设计师和开发者要及时追踪移动用户访问的移动网站，了解移动网站发展的最新动态。

开发者和设计师不需要学习新的技术来开发移动网站，他们只需要以一个全新的视角来设计移动网站，这就是移动web开发的好处。在这篇文章中，简单的总结了一些重要的移动Web开发指南。

1.  初始分析
分析用户的关注点非常重要。首先分析你的网站中哪些页面是主要的，那些页面的访问量最大，这将有助于你设计移动网站中的网页分布。其次一定要查找用户正在使用的关键字，因为用户往往通过它们到达你的网站。这些分析结果将对移动开发起到重要的作用。
2.  用户特征
和桌面用户比起来，移动用户必然会有不同的需求。在开发和设计移动网站时，一定要考虑用户特征。如果你的目标用户是年轻人，要确保他们在开车、购物或参加其它活动时都能够非常容易的访问你的网站。所以分析用户特征在移动网站的开发中也很重要。
3.  少使用图像
事实上，在移动网站上使用图像是无益的，所以不建议大量使用图像。原因如下：

• 移动用户使用的网络连接通常比较缓慢，它们很难下载大量的图像，如果图像很大，也需要很长时间来加载。所以，尽量避免使用图像。
• 每个图像都需要一个新的HTTP链接，这个链接会使网页的加载速度更慢。
• 在开发过程中，由于设备的分辨率不同，图像的尺寸大小就会不同，所以添加大量图像会增加额外的工作量。
  

如果真的需要在网站上使用图像，一定要使用CSS Sprite。CSS Sprite能适时提高加载速度。

4.  不依赖JavaScript

由于移动设备的浏览器不能很好的支持JavaScript，所以不能依赖JavaScript开发移动网站。但是如果在未来几年内，Apple、Android和Blackberry等系统有完美支持JavaScript的可能性，那么这个问题就能得到解决。

5.  避免弹出下拉列表
避免在移动网站中弹出下拉列表。下拉列表仅适用于桌面的网站，因为用户可以将光标移动到任何选项卡以查看下拉列表。下拉列表可以使用，但是不建议在移动网站上使用。

6.  压缩JavaScript和CSS代码，优化下载速度

正如前面提到的，不要依赖JavaScript。如果必须使用JavaScript，那么建议将JavaScript和CSS代码进行压缩。JavaScript和CSS的压缩工具使用起来也很简单。

7.  水平和垂直布局
近期，我们看到很多移动网站既支持水平布局又支持垂直布局。这两种布局在iPhone和Android平台上运用的很好，但不是对所有的智能手机都适用。在开发移动网站时，应该设计单一方向的布局格式。也就是说只允许用户在单一的方向以滚动形式来查看内容。默认情况下，单一的方向应该是垂直的，因为这是用户期望的自然形式。如果页面有正在使用的图像，它们也应该支持垂直滚动。在移动设备中不建议同时使用垂直和水平布局。

8.  了解移动设备功能
开发移动网站的一个很好的方法是了解移动设备最流行的功能。然后，你可以将这些功能融合到你开发的网站中，这将会是你网站的一个亮点。

9.  提供常规网站链接

移动网站所包含的信息是非常有限的，如果想容纳更多的信息，可以在移动网站主页上提供一些常规网站的链接。

10.  网站的速度在开发移动网站时，网站速度是要优先考虑的。你的网站应该快速的传送网站的内容。如果你想做到这一点，就要尽量避免使用JavaScript和Flash。移动Web最重要的指导方针是要注重网站的功能和速度。

rain

三大移动Web开发框架哪个适合你？

经常浏览Developer.com的读者也许注意到了这点：我最近特别关注JavaScript驱动的移动应用开发解决方案，先后撰文介绍了众多的相关话题，包括jQuery Mobile、jQTouch、Sencha Touch和PhoneGap。我得承认，要搞清楚这一批前沿技术并非易事，于是我这回概述一下这些主要的移动开发解决方案的主要特性和优点(51CTO注：PhoneGap未作介绍，欲了解更多PhoneGap内容请移步51CTO专题：跨平台移动web中间件PhoneGap开发入门)。但愿这篇概述多少可以帮你确定哪一种解决方案最适合你项目的具体要求。

jQuery Mobile适合你吗?

差不多二十年来，处理跨浏览器的HTML和CSS不一致问题一直让许多开发人员颇为苦恼。而Ajax的出现更是加剧了这些问题，因为开发人员现在要处理新的问题：无数与JavaScript有关的浏览器不兼容问题和异常现象。后来出现了jQuery：由于可以对基本的JavaScript任务进行强大的抽象处理，jQuery大大减轻了编写复杂的跨浏览器代码方面的压力。难怪jQuery一下子火了起来。

眼下移动应用开发人员面临可能更艰巨的挑战，这不仅是由于要处理各种各样的移动浏览器不兼容问题，还由于需要设计合理布局，以便适合移动设备所固有的各种外观尺寸和有限资源。这时候，jQuery Mobile应运而生，它自诩是“一种针对触摸而优化的Web框架，面向智能手机和平板电脑”，可以充分发挥jQuery和jQuery UI(51CTO注：查看jQuery UI实例http://jqueryui.com/)的优势。

虽然jQuery Mobile目前仍是测试版(第二个测试版在去年8月3日宣布发布)，但已经支持数量多得惊人的移动平台，包括安卓、黑莓、iOS和Windows Mobile等其他平台。同样出色的是，它还支持众多的窗口组件：由于jQuery Mobile对渐进增强(progressive enhancement)很重视，开发人员可以利用这些窗口组件，轻松创建统一的、跨移动设备的界面。务必将演示程序(51CTO注：查看演示程序地址http://jquerymobile.com/demos/1.0b2/#/demos/1.0b2/)装入到众多不同的设备上(包括你的桌面浏览器)，领略一下界面是如何变化以适合目标设备的。

此外，务必从桌面浏览器里面来查看演示程序的源代码;连刚入门的jQuery用户也会注意到该程序的代码很注重全面隔离页面布局和JavaScript驱动的功能。你会看到，整个应用程序都在一个文档里面，每个“页面”及其组成部分使用与自定义属性有关的DIV来定义。比如说：

• <div id="home" target="_blank">
•    <h1>WJGilmore, LLC</h1>
• </div>
• <div>   
•    <p>Check back regularly for the latest information about Jason's books!</p>      
• </div>
• <div>
•    <h1>Copyright © 2011 W.J. Gilmore, LLC</h1>
• </div>
• /div>
  

jQuery Mobile的主要特性

虽然使用jQuery Mobile的理由有多个，但是下面三个理由显得尤为突出：

• jQuery开发人员使用jQuery Mobile时会觉得驾轻就熟，那是由于两者使用共享的代码库。
• 如果目标用户群并不局限于使用某一种设备，关注跨平台兼容性这个优点很理想。
• 社区和企业的广泛参与促使像Dreamweaver CS 5.5这些广受欢迎的开发产品和像非常出色的Photo Swipe这一批值得关注的插件内置了对jQuery Mobile的支持。
  

rain

jQTouch适合你吗?

那边厢，jQuery Mobile力求提供在众多移动设备上兼容的功能;这边厢，jQTouch项目而是将大部分精力投入到了支持基于WebKit的浏览器(Chrome和Safari)的设备上。因而，jQTouch应该与旨在部署到iPhone和安卓设备上的Web应用程序结合使用。支持针对WebKit而优化的动画以及旨在与移动设备的式样融为一体的多个主题。

要熟悉jQTouch的功能，最容易的办法就是通过你的移动设备或WebKit浏览器，仔细研究演示网站(51CTO注：演示网站地址http://jqtouch.com/preview/demos/main/#home)。我尤其建议查看演示程序的源代码;你会看到，与jQuery Mobile一样， jQTouch“页面”也使用一系列DIV元素和相关属性来组装，设计人员对这种方法应该会很熟悉。

jQTouch的主要特性

虽然使用jQTouch的理由有多个，但是下面两个理由显得尤为突出：

• 虽然jQTouch同样基于jQuery，但是其侧重点主要是为基于WebKit的浏览器提供经过优化的支持。因而，如果你打算一心锁定使用基于iOS或安卓的设备的用户，那么jQTouch可能比较合适。
• 与jQuery Mobile一样，jQTouch也采用了以HTML和CSS为中心的方法来开发页面，使用JavaScript专门致力于添加事件、动画及其他功能。如果你在与设计人员合作，或者开发人员不是特别精通JavaScript，在想方设法逐步熟悉移动Web开发，那么这种方法就很吸引人。
  

rain

Sencha Touch适合你吗?

较之与jQuery Mobile和jQTouch，Sencha Touch学起来难度相对比较复杂，不过有弊也有利：虽然比较复杂，但是带来了强大的功能。作为Sencha公司的一款双许可证(商业版和GPL/FLOSS版)产品，Sencha Touch采用了与上述的几种移动开发框架全然不同的方法，原因在于布局和界面窗口组件是使用出色的JavaScript库构建而成的，而该JavaScript库恰好拥有丰富的实用特性，比如离线支持、独特布局和轻松制作主题的功能。

此外，Sencha Touch采取了从极其全面的角度来应对应用程序开发所固有的挑战，原因在于它支持可以完全直接开发MVC驱动的应用程序。为了形象地说明开发Sencha Touch应用程序与开发jQuery Mobile / jQTouch应用程序之间的反差到底有多明显，不妨将jQuery Mobile/jQTouch演示程序里面的源代码与用于仅仅创建和启动视口的下列Sencha Touch代码作一比较：

• Ext.regApplication({
•   name: 'App',
•   defaultUrl: 'Index/index',
•   launch: function()
•   {
•     this.viewport = new App.views.Viewport();
•   },
• });
  

虽然这种方法对相对不熟悉JavaScript的新手来说可能难度很大，不过我还是建议花点时间尝试一下Sencha Touch，因为直观的语法、编写清晰的文档以及众多的配套实例对于你尽快上手会大有帮助。

Sencha Touch的主要特性

虽然使用Sencha Touch的理由有多个，但是下面三个理由显得尤为突出：

• 原生的MVC架构致力于为面向框架的开发人员消除紧张，他们可能在为如何合理地组织和管理JavaScript代码而苦恼。
• Sencha开发人员已付出了很大的努力，在Sencha网站(51CTO注：Sencha网站地址http://www.sencha.com/)上发布了众多的教程和演示应用程序。
• 对于之前熟悉窗口组件工具包(想一想Swing和GTK+)的开发人员来说，窗口组件的布局和组织方面采用JavaScript驱动的方法自然很熟悉。
  

读者最后总是问我应该选择哪一种框架。回答总是一样：这得看情况。毫无疑问，Sencha Touch是这种开发框架当中功能最丰富的，不过有时候学起来比较困难。话虽如此，如果你的目的仅仅是为现有的应用程序提供对用户友好的移动界面，那么jQuery Mobile或jQTouch可能会提供一条阻力最小的道路。如果你给移动应用程序设的目标比较高，那么Sencha Touch极有可能完全值得你为此投入时间。