HTML5 移动开发框架

     <p style="padding-bottom:0px;text-indent:2em;margin:5px 0px 10px;padding-left:0px;padding-right:0px;padding-top:0px;"><span style="line-height:24px;font-family:Verdana,Simsun,sans-serif;color:#000000;">在过去的两年里，触屏设备飞速增长。iOS和Android设备让开发者和设计师开始重新思考他们的网页应用，以提供更好的触屏体验。</span></p>    <p style="padding-bottom:0px;text-indent:2em;margin:5px 0px 10px;padding-left:0px;padding-right:0px;padding-top:0px;"><span style="line-height:24px;font-family:Verdana,Simsun,sans-serif;color:#000000;"><img style="padding-bottom:0px;border-right-width:0px;margin:0px;padding-left:0px;padding-right:0px;max-width:600px;border-top-width:0px;border-bottom-width:0px;border-left-width:0px;padding-top:0px;" alt="HTML5 移动开发框架 " src="https://simg.open-open.com/show/a31703c32b016a349ff8562dc5ac4c75.jpg" width="500" height="271" /><br style="padding-bottom:0px;margin:0px;padding-left:0px;padding-right:0px;padding-top:0px;" /> 移动Web应用相对于本地的App有很多优势，虽然也有很多设计和开发上的挑战。这里列出了一系列有用的框架来帮助基于HTML的webapp开发。他们支持大部分流行的智能手机和平板。<br style="padding-bottom:0px;margin:0px;padding-left:0px;padding-right:0px;padding-top:0px;" /> <br style="padding-bottom:0px;margin:0px;padding-left:0px;padding-right:0px;padding-top:0px;" /> 1. <span style="padding-bottom:0px;margin:0px;padding-left:0px;outline-width:0px;padding-right:0px;color:#3e62a6;padding-top:0px;">Lungo.js</span>：HTML5 移动开发框架<br style="padding-bottom:0px;margin:0px;padding-left:0px;padding-right:0px;padding-top:0px;" /> <img style="padding-bottom:0px;border-right-width:0px;margin:0px;padding-left:0px;padding-right:0px;max-width:600px;border-top-width:0px;border-bottom-width:0px;border-left-width:0px;padding-top:0px;" alt="HTML5 移动开发框架 " src="https://simg.open-open.com/show/c14a1a7db778f1f781a9a87dd74f33fe.jpg" width="500" height="266" /></span></p>    <p style="padding-bottom:0px;text-indent:2em;margin:5px 0px 10px;padding-left:0px;padding-right:0px;padding-top:0px;"><span style="line-height:24px;font-family:Verdana,Simsun,sans-serif;color:#000000;">Lungo.js 是第一个应用HTML5和CSS3特性的移动开发框架。它可以帮助开发者创建iOS，Android，Blackberry和WebOS平台的应用。<br style="padding-bottom:0px;margin:0px;padding-left:0px;padding-right:0px;padding-top:0px;" /> <br style="padding-bottom:0px;margin:0px;padding-left:0px;padding-right:0px;padding-top:0px;" /> Lungo.js 不需要任何web服务器的支持就能帮助用户实现HTML5的功能，例如WebSQL, Geolocation，History，Device orientation等等。<br style="padding-bottom:0px;margin:0px;padding-left:0px;padding-right:0px;padding-top:0px;" /> <br style="padding-bottom:0px;margin:0px;padding-left:0px;padding-right:0px;padding-top:0px;" /> 2. <span style="padding-bottom:0px;margin:0px;padding-left:0px;outline-width:0px;padding-right:0px;color:#3e62a6;padding-top:0px;">JO</span>：一个简单的HTML5 App框架</span></p>    <p style="padding-bottom:0px;text-indent:2em;margin:5px 0px 10px;padding-left:0px;padding-right:0px;padding-top:0px;"><span style="line-height:24px;font-family:Verdana,Simsun,sans-serif;color:#000000;"><img style="padding-bottom:0px;border-right-width:0px;margin:0px;padding-left:0px;padding-right:0px;max-width:600px;border-top-width:0px;border-bottom-width:0px;border-left-width:0px;padding-top:0px;" alt="HTML5 移动开发框架 " src="https://simg.open-open.com/show/050e16338ed8a4dda105e82d837418ad.jpg" width="500" height="336" /><br style="padding-bottom:0px;margin:0px;padding-left:0px;padding-right:0px;padding-top:0px;" /> JO可以帮助你创建类似本地应用的Web App。JO是一个开源的免费框架，可以和PhoneGap一起使用。<br style="padding-bottom:0px;margin:0px;padding-left:0px;padding-right:0px;padding-top:0px;" /> <br style="padding-bottom:0px;margin:0px;padding-left:0px;padding-right:0px;padding-top:0px;" /> 3. <span style="padding-bottom:0px;margin:0px;padding-left:0px;outline-width:0px;padding-right:0px;color:#3e62a6;padding-top:0px;">Joshfire</span>：跨设备的开发框架</span></p>    <p style="padding-bottom:0px;text-indent:2em;margin:5px 0px 10px;padding-left:0px;padding-right:0px;padding-top:0px;"><span style="line-height:24px;font-family:Verdana,Simsun,sans-serif;color:#000000;"><img style="padding-bottom:0px;border-right-width:0px;margin:0px;padding-left:0px;padding-right:0px;max-width:600px;border-top-width:0px;border-bottom-width:0px;border-left-width:0px;padding-top:0px;" alt="HTML5 移动开发框架 " src="https://simg.open-open.com/show/e391983be87425876342b906581109bf.jpg" width="500" height="259" /><br style="padding-bottom:0px;margin:0px;padding-left:0px;padding-right:0px;padding-top:0px;" /> Joshfire是一个开源的跨设备开发框架，帮助开发者创建可以在多种设备上运行的web app。它使用HTML5和JavaScript，并且允许开发者快速整合本地应用和特定的web应用。<br style="padding-bottom:0px;margin:0px;padding-left:0px;padding-right:0px;padding-top:0px;" /> <br style="padding-bottom:0px;margin:0px;padding-left:0px;padding-right:0px;padding-top:0px;" /> Joshfire可以让你的应用接受键盘，鼠标，触摸屏，遥控器等设备的输入。Joshfire支持Node.JS。<br style="padding-bottom:0px;margin:0px;padding-left:0px;padding-right:0px;padding-top:0px;" /> <br style="padding-bottom:0px;margin:0px;padding-left:0px;padding-right:0px;padding-top:0px;" /> 4. <span style="padding-bottom:0px;margin:0px;padding-left:0px;outline-width:0px;padding-right:0px;color:#3e62a6;padding-top:0px;">Sencha Touch</span>：基于HTML5的移动网页开发框架</span></p>    <p style="padding-bottom:0px;text-indent:2em;margin:5px 0px 10px;padding-left:0px;padding-right:0px;padding-top:0px;"><span style="line-height:24px;font-family:Verdana,Simsun,sans-serif;color:#000000;"><img style="padding-bottom:0px;border-right-width:0px;margin:0px;padding-left:0px;padding-right:0px;max-width:600px;border-top-width:0px;border-bottom-width:0px;border-left-width:0px;padding-top:0px;" alt="HTML5 移动开发框架 " src="https://simg.open-open.com/show/19560bb5db6224eb46e8d8ce72c65f0c.jpg" width="500" height="278" /><br style="padding-bottom:0px;margin:0px;padding-left:0px;padding-right:0px;padding-top:0px;" /> Sencha touch可以让开发者创建类似本地应用体验的web app。Shencha是第一个使用HTML5，CSS和JavaScript并且支持音频/视频，本地存储，圆角，渐变背景以及阴影的开发框架。<br style="padding-bottom:0px;margin:0px;padding-left:0px;padding-right:0px;padding-top:0px;" /> <br style="padding-bottom:0px;margin:0px;padding-left:0px;padding-right:0px;padding-top:0px;" /> 5. <span style="padding-bottom:0px;margin:0px;padding-left:0px;outline-width:0px;padding-right:0px;color:#3e62a6;padding-top:0px;">Baker</span>：HTML5 电子书框架</span></p>    <p style="padding-bottom:0px;text-indent:2em;margin:5px 0px 10px;padding-left:0px;padding-right:0px;padding-top:0px;"><span style="line-height:24px;font-family:Verdana,Simsun,sans-serif;color:#000000;"><img style="padding-bottom:0px;border-right-width:0px;margin:0px;padding-left:0px;padding-right:0px;max-width:600px;border-top-width:0px;border-bottom-width:0px;border-left-width:0px;padding-top:0px;" alt="HTML5 移动开发框架 " src="https://simg.open-open.com/show/c9118a1934183dfc90fb0dc7aa2c55df.jpg" width="500" height="290" /><br style="padding-bottom:0px;margin:0px;padding-left:0px;padding-right:0px;padding-top:0px;" /> Baker是用来在iPad或者iPhone平台上发布交互式的电子书或者电子杂志的HTML5电子书框架。.<br style="padding-bottom:0px;margin:0px;padding-left:0px;padding-right:0px;padding-top:0px;" /> <br style="padding-bottom:0px;margin:0px;padding-left:0px;padding-right:0px;padding-top:0px;" /> 6. <span style="padding-bottom:0px;margin:0px;padding-left:0px;outline-width:0px;padding-right:0px;color:#3e62a6;padding-top:0px;">Touchy Boilerplate</span></span></p>    <p style="padding-bottom:0px;text-indent:2em;margin:5px 0px 10px;padding-left:0px;padding-right:0px;padding-top:0px;"><span style="line-height:24px;font-family:Verdana,Simsun,sans-serif;color:#000000;"><img style="padding-bottom:0px;border-right-width:0px;margin:0px;padding-left:0px;padding-right:0px;max-width:600px;border-top-width:0px;border-bottom-width:0px;border-left-width:0px;padding-top:0px;" alt="HTML5 移动开发框架 " src="https://simg.open-open.com/show/d10e459e9835bd962dfee2232ae12d3b.jpg" width="480" height="272" /><br style="padding-bottom:0px;margin:0px;padding-left:0px;padding-right:0px;padding-top:0px;" /> Touchy Boilerplate 是一个用来创建移动web app，包括HTML模板，Meta tag等的工具。Touchy可以支持动态页面导航，固定页头，滚动内容，浏览历史记录等功能。Touchy使用jQuery或者 Zepto.JS。<br style="padding-bottom:0px;margin:0px;padding-left:0px;padding-right:0px;padding-top:0px;" /> <br style="padding-bottom:0px;margin:0px;padding-left:0px;padding-right:0px;padding-top:0px;" /> 7. <span style="padding-bottom:0px;margin:0px;padding-left:0px;outline-width:0px;padding-right:0px;color:#3e62a6;padding-top:0px;">Ripple</span>：让移动开发测试更容易</span></p>    <p style="padding-bottom:0px;text-indent:2em;margin:5px 0px 10px;padding-left:0px;padding-right:0px;padding-top:0px;"><span style="line-height:24px;font-family:Verdana,Simsun,sans-serif;color:#000000;"><img style="padding-bottom:0px;border-right-width:0px;margin:0px;padding-left:0px;padding-right:0px;max-width:600px;border-top-width:0px;border-bottom-width:0px;border-left-width:0px;padding-top:0px;" alt="HTML5 移动开发框架 " src="https://simg.open-open.com/show/3537065ced9b0cb467caae6cf23b52de.jpg" width="500" height="309" /><br style="padding-bottom:0px;margin:0px;padding-left:0px;padding-right:0px;padding-top:0px;" /> 在不同的平台上测试移动应用是一件令人头疼的事情。Ripple可以帮助你在不同的平台商测试并且调试你的HTML5移动应用。Ripple是一个chrome的扩展。它可以模拟每个设备的详细信息，例如user_Agent，Geolocation等等。<br style="padding-bottom:0px;margin:0px;padding-left:0px;padding-right:0px;padding-top:0px;" /> <br style="padding-bottom:0px;margin:0px;padding-left:0px;padding-right:0px;padding-top:0px;" /> 8. <span style="padding-bottom:0px;margin:0px;padding-left:0px;outline-width:0px;padding-right:0px;color:#3e62a6;padding-top:0px;">RestKit</span></span></p>    <p style="padding-bottom:0px;text-indent:2em;margin:5px 0px 10px;padding-left:0px;padding-right:0px;padding-top:0px;"><span style="line-height:24px;font-family:Verdana,Simsun,sans-serif;color:#000000;"><img style="padding-bottom:0px;border-right-width:0px;margin:0px;padding-left:0px;padding-right:0px;max-width:600px;border-top-width:0px;border-bottom-width:0px;border-left-width:0px;padding-top:0px;" alt="HTML5 移动开发框架 " src="https://simg.open-open.com/show/249dea50f4ac0b2174636a6c9b34e60c.jpg" width="500" height="186" /><br style="padding-bottom:0px;margin:0px;padding-left:0px;padding-right:0px;padding-top:0px;" /> Restkit是一个objective-c的开发框架，目的是简化并加快与Restful的web service交互。它提供了一个简洁的HTTP request/response API和一个强大的对象映射系统。<br style="padding-bottom:0px;margin:0px;padding-left:0px;padding-right:0px;padding-top:0px;" /> <br style="padding-bottom:0px;margin:0px;padding-left:0px;padding-right:0px;padding-top:0px;" /> 9. <span style="padding-bottom:0px;margin:0px;padding-left:0px;outline-width:0px;padding-right:0px;color:#3e62a6;padding-top:0px;">HTML5 兼容性表格</span></span></p>    <p style="padding-bottom:0px;text-indent:2em;margin:5px 0px 10px;padding-left:0px;padding-right:0px;padding-top:0px;"><span style="line-height:24px;font-family:Verdana,Simsun,sans-serif;color:#000000;"><img style="padding-bottom:0px;border-right-width:0px;margin:0px;padding-left:0px;padding-right:0px;max-width:600px;border-top-width:0px;border-bottom-width:0px;border-left-width:0px;padding-top:0px;" alt="HTML5 移动开发框架 " src="https://simg.open-open.com/show/5bbc51e256a8dee9e10a5539961cbab3.jpg" width="499" height="282" /><br style="padding-bottom:0px;margin:0px;padding-left:0px;padding-right:0px;padding-top:0px;" /> Mobile HTML5是一个表格，显示了不同设备/平台对HTML5特性的支持情况。包括Safari, Android, Blackberry, IE，Opera，Firefox，webOS和Symbian。<br style="padding-bottom:0px;margin:0px;padding-left:0px;padding-right:0px;padding-top:0px;" /> <br style="padding-bottom:0px;margin:0px;padding-left:0px;padding-right:0px;padding-top:0px;" /> 10. <span style="padding-bottom:0px;margin:0px;padding-left:0px;outline-width:0px;padding-right:0px;color:#3e62a6;padding-top:0px;">MobileESP</span>：检测你的移动网页访问者</span></p>    <p style="padding-bottom:0px;text-indent:2em;margin:5px 0px 10px;padding-left:0px;padding-right:0px;padding-top:0px;"><span style="line-height:24px;font-family:Verdana,Simsun,sans-serif;color:#000000;"><img style="padding-bottom:0px;border-right-width:0px;margin:0px;padding-left:0px;padding-right:0px;max-width:600px;border-top-width:0px;border-bottom-width:0px;border-left-width:0px;padding-top:0px;" alt="HTML5 移动开发框架 " src="https://simg.open-open.com/show/42fe82d6a988c7d109d4b4d7a6a8f75e.jpg" width="500" height="250" /><br style="padding-bottom:0px;margin:0px;padding-left:0px;padding-right:0px;padding-top:0px;" /> MobileESP项目提供了一套简单、轻量级的API让网站的开发者检测访客是不是使用移动设备，或者使用的是哪种移动设备。<br style="padding-bottom:0px;margin:0px;padding-left:0px;padding-right:0px;padding-top:0px;" /> <br style="padding-bottom:0px;margin:0px;padding-left:0px;padding-right:0px;padding-top:0px;" /> 11. <span style="padding-bottom:0px;margin:0px;padding-left:0px;outline-width:0px;padding-right:0px;color:#3e62a6;padding-top:0px;">Tiggr</span></span></p>    <p style="padding-bottom:0px;text-indent:2em;margin:5px 0px 10px;padding-left:0px;padding-right:0px;padding-top:0px;"><span style="line-height:24px;font-family:Verdana,Simsun,sans-serif;color:#000000;"><img style="padding-bottom:0px;border-right-width:0px;margin:0px;padding-left:0px;padding-right:0px;max-width:600px;border-top-width:0px;border-bottom-width:0px;border-left-width:0px;padding-top:0px;" alt="HTML5 移动开发框架 " src="https://simg.open-open.com/show/26fc119d6a6cb2158c67a24d9bbf7261.jpg" width="500" height="222" /><br style="padding-bottom:0px;margin:0px;padding-left:0px;padding-right:0px;padding-top:0px;" /> Tiggr是一个移动一个用创建工具，可以让你快速创建移动应用。你不需要写代码就能创建丰富的移动应用。</span></p>    <p style="padding-bottom:0px;text-indent:2em;margin:5px 0px 10px;padding-left:0px;padding-right:0px;padding-top:0px;"><span style="line-height:24px;font-family:Verdana,Simsun,sans-serif;color:#000000;"> </span></p>    <p style="padding-bottom:0px;text-indent:2em;margin:5px 0px 10px;padding-left:0px;padding-right:0px;padding-top:0px;"><span style="line-height:24px;font-family:Verdana,Simsun,sans-serif;color:#000000;"><a style="padding-bottom:0px;margin:0px;padding-left:0px;outline-width:0px;padding-right:0px;color:#3e62a6;padding-top:0px;" href="/misc/goto?guid=4958199107691520226" target="_blank">英文原文链接</a></span></p>