亮点解读,Mobile做HTML5活动接受的五个优瑕疵

用jQuery Mobile做HTML5移动应用的三个优缺点

2013/03/30 · HTML5 · 来源: 伯乐在线     · HTML5

英文原文:Niall O’Higgins,编译:伯乐在线——唐尤华

在过去大约一个月的时间里,我一直在使用JQuery Mobile为一个健身培训网站开发基于HTML5的手机/平板前端应用。我之前曾经写过Android和iOS应用程序(分别用Java和Objective-C),因此只要编写一段基础代码就可以在主流平台上运行并能够快速地用HTML和JavaScript迭代,这样的许诺十分诱人。

JQuery Mobile & HTML5

使用HTML5和JavaSript构建一个手机应用,你需要写很多JavaScript代码。然而,带有触摸屏的设备的UI控制和处理与标准的Web应用程序非常不同。因此,你会想要使用现成的手机HTML5/JavaScrip框架(除非你有很多的时间并且打算将所有东西重新构建)。现在有很多现成的框架可供选择:jQTouch、 Sencha Touch 等等。

我成为JQuery的粉丝已经很多年了,尤其欣赏它的至简哲学以及出色的核心特性和插件以及社区的贡献。正是由于有JQuery,我才能够接受使用JavaScript开发。所以,当听到 Chris McDonough(Pyramid Python Web 框架的作者)发布JQuery的好消息时,我知道我应该去试一试。

 

JQuery Mobile 和 HTML5 的 3个优点

1. 上手迅速并支持快速迭代:在一个星期多一点的时间里,通过阅读JQuery Mobile文档以及O’Reilly出版的JQuery Mobile书籍,我完成了一个可以工作的app初步版本。在此之前我没有HTML5 / JQuery Mobile开发经验。与Android和iOS相比,使用JQuery Mobile和HTML5构建你的UI和逻辑会比在原生系统下构建快得多。

译注:原生系统:原装的操作系统,例如Android原生系统是Google发布未经修改的系统。在本文中,原生应用指直接用系统提供的API开发的程序,与JQuery Mobile开发的程序相对应。

我发现Apple的Builder接口的学习曲线十分陡峭,同样学习令人费解的Android布局系统也很耗时间。此外,要使用原生代码将一个list view连接到远程的数据源并具有漂亮的外观是十分复杂的(在Android上是ListView, 在iOS上是UITableView)我能够通过已经掌握的JavaScript和HTML/CSS知识快速地实现同样的功能,无需学习新的adapter,delegate等等抽象概念,只要编写JQuery代码就可以做到。

2.避免麻烦的应用商店审批过程以及调试、构建带来的痛苦:为手机开发应用,尤其是iOS系统的手机,最痛苦的过程莫过于通过Apple应用商店的审批。想要让一个原生应用程序发布给iOS用户,你需要等待一个相当长的过程(需要好几天,甚至可能是好几周)。不仅在第一次发布程序时要经历磨难,以后的每一次升级也是如此。这使得QA和发布流程变得复杂,还会增加额外的时间。由于JQuery Mobile应用程序仅仅是一种web应用程序,因此它继承了所有web环境的优点:当用户加载你的网站时,他们就马上“升级”到最新的版本。可以马上修复bug和添加新的特性。即使是在Android系统——应用市场的要求比起Apple环境要宽松得多,在用户不知不觉中完成产品升级也是一件很好的事情。

进一步的好处是,发布beta或测试版本会更加容易。只要告诉用户用浏览器打开你的网址就可以了!不需要考虑iOS令人抓狂的DRM,也不需要理会Android必须的APK。

3.支持跨平台和跨设备开发:一个巨大的好处是,我的应用程序马上可以在Android和IOS上工作,同样也可以在其他平台上工作。作为一个独立开发者,为不同的平台维护基础代码是一项巨大的工作。为单个手机平台编写高质量的手机应用需要全职工作,为每个平台重复做类似的事情需要大量的资源。应用程序能够在Android和IOS设备上同时工作对我来说是一个巨大收获。

更进一步,尤其是对于运行Android各种分支的设备,它们大小和形状各异,想要让你的应用程序在各种各样屏幕分辨率的手机上看起来都不错,这是真正的挑战。对于要求严格的Android开发者来说,按照屏幕大小进行设屏幕分割(从完全最小化到最大进行缩放)会需要很多开发时间。由于浏览器会在每个设备上以相同的方式呈现,关于这个方面你不必有任何担心。

 澳门新葡亰平台官网 1

 

JQuery Mobile 和 HTML5 的3个缺点

澳门新葡亰平台官网,1.比原生程序运行慢:在我看来最大的缺点是,即使是在最新的Android和iOS硬件上(双核Tegra 2 Android手机,双核iPad2平板),JQuery Mobile应用程序都会明显慢

于原生程序。尤其是在Android上,浏览器比起iOS更慢且bug更多(虽然谷歌是专注web领域的公司)。我没有在更早的Android设备上测试我的程序,也许根本就不能运行(例如Android G1)。我相信在未来的12-24个月,硬件速度会很快得到提升(例如,四核设备2011年马上就要上市),性能也许很快就不会成为问题。但是今天,它确实是一个缺点。如果你只专注于iOS,你大可以期待一下浏览器的性能,至少它在这方面是可靠的(不像Android,黑莓等等)

2.古怪(跨浏览器、跨平台开发):JQuery Mobile现在仍是beta版本,因此我遇到了很多bug。也就是说,JQuery团队还在积极地回复GitHub上提出的问题。我认为其中最大的一个问题是各种浏览器在不同的手机平台上古怪的表现。这个问题一直为人诟病。应用程序可能看上去有些古怪——虽然我认为JQuery Mobile团队在widget和主题上做得很棒,但的确和原生程序看起来有显著的不同。这个问题到底对用户有多大影响不得而知,但是这一点需要引起注意。

3. 有限的能力 vs 原生程序:很明显,运行在浏览器上的JavaScript不能完全地访问设备的很多特性。一个典型的例子就是摄像头。然而,类似PhoneGap这样的工具能够帮助解决很多常见问题。实际上,我已经开始将我的应用程序通过PhoneGap将几个版本部署到iOS和Android上,使用的是原生Facebook绑定,效果令我映像深刻。我会在未来的博客中写一些使用PhoneGap的经验。

 

总结

总的说来,我认为使用JQuery Mobile和HTML5作为手机应用开发平台是可行的。然而,这并不适用于(至少到目前为止)所有类型的应用程序。对于简单的内容显示和数据输入类型的应用程序(相对的是需要丰富多媒体/游戏程序),它是对原生程序一个有力的增强。我对自己的应用程序使用新平台的结果感到高兴——不再需要同时为Android和iOS维护我的健身跟踪软件。

在接下来的1-2年中,随着硬件变得越来越快,手机设备越来越多样化,我相信HTML5 (JQuery Mobile, PhoneGap, 等等)在手机应用开发中会成为更加重要的技术。

 

英文原文:Niall O’Higgins,编译:伯乐在线——唐尤华

【如需转载,请在正文中标注并保留原文链接、译文链接和译者等信息,谢谢合作!】

 

赞 收藏 评论

基于HTML5的电信网管3D机房监控应用

2014/02/24 · HTML5 · HTML5

原文出处: xhload3d的博客   

先上段视频,不是在玩游戏哦,是规规矩矩的电信网管企业应用,嗯,全键盘的漫游3D机房:
[youku id=”XNjc2NDQxNDM2″]
澳门新葡亰平台官网 2
随着PC端支持HTML5浏览器的普及,加上主流移动终端Android和iOS都已支持HTML5技术,新一代的电信网管应用几乎一致性的首选HTML5,当然Flex和Silverlight的遗留系统依然存活着,如果不考虑移动终端,不考虑将来维护人员难找,不考虑需要承载成千上万的网元数量,不考虑公司员工的职业生涯前途,哪怕其各自父母adobe和ms都已弃之,其实Flex和Silverlight作为企业应用方案技术上还是可以的,还是能存活很多很多年。

但我作为程序员可是要考虑自己的职业生涯的,可能有人喜欢成为能维护CORBA或IBM大机那样的稀有物种得到高薪,我还是喜欢朝气蓬勃的技术氛围,我喜欢每天上Hacker News都能见到讨论我从事的技术的新鲜事,我喜欢有搞通用组件有Sencha和Kendoui可选择,搞图表有Highcharts可选择,搞2D拓扑和3D机房有Hightopo可选择,搞移动应用有JQuery Mobile可选择,每周末到徐家汇公园那个照的到太阳看得见湖色几乎成为我私人定制的木凳,打开平板好好通读这一周Web前端发送的一切新鲜事,是的我有JavaScript Weekly、HTML5 Weekly和Modern Web Observer可选择,我很庆幸自己活在这个HTML5时代,可以用一门javascript语言技术玩通用组件,玩Chart,玩拓扑,完3D,是的还可以玩后台NodeWeekly,再说了不成为稀缺动物,就玩HTML5不也照样拿高薪,有选择的条件下何苦让自己成为恐龙古董。

回到今天正题,随着去年后半年来IE11和Android浏览器支持WebGL之后,WebGL技术在我接触的行业领域已成燎原之势。什么?还得考虑支持OA老系统的IE678,Chrome Frame插件早就可以让IE678910跑WebGL了,更不用说HTML5的2D的Canvas。什么?性能问题,可看看HT for Web 跑数万网元的操作体验视频。

[youku id=”XNjc2NDc3ODgw”]

什么?兼容性问题,这些问题就交给各种框架来解决,HTML5的3D引擎非常多threejs是知名度较高的,但较臃肿大好几百k的包,什么功能都触及但都做不深入,动画引擎像玩具,做游戏引擎又缺碰撞检测,这点上不及后起之秀babylonjs,最早吸引我的是注意的是介绍babylonjs的这段话 I am a real fan of 3D development. Since I was 16, I spent all my spare time creating 3d engines with various technologies (DirectX, OpenGL, Silverlight 5, pure software, etc.). 这段话老让我郁闷的回忆自己16岁在干吗?

我喜欢babylonjs主要因为他专注游戏引擎的定位,同样企业应用我选择Hightopo的HT for Web 3D引擎,毕竟企业应用和游戏功能、性能、渲染效果等方面考虑的是不一样的,没有一个引擎能解决所有行业的所有问题,干活还得找最对口的工具,Hightopo的3D引擎包很小,核心3D引擎只有几十k,融合通用组件和2D的整体包也才200多k,另外HT的整体开发模式用同一个数据模型驱动了通用组件、2D拓扑组件包括3D引擎的组件,对于我做企业应用的Tree、Table这些和图形的联动是很重要的事情,这点做游戏的同学可能体会不到我们这些还得面对一大堆业务表格整体CURD同学的痛苦,另外Hightopo也具备必要的游戏引擎功能,例如全键盘导航操作功能,支持Mobile的Touch交互功能,基本的Collisions Detection碰撞检测。最后Hightopo毕竟专注电信行业,知道电信网管需要什么模块库,他能知道我等每天面对ODF/DDF/MDF/Shelf/Card/Port这些电信业务模型的痛苦点。见此视频

[youku id=”XNjc2NDUyNjY0″]

使用Hightopo还有很重要的一点就是HT提供了基于HTML5的可视化设计器,无需借助3ds max和maya这样的专业3D设计工具,直接HT 3D Designer通过页面就能进行3D建模,而动态的数据部分通过API的方式驱动生成模型和实时更新即可,最近的这些项目我们团队不需要美工都能完全由我们程序员自己搞定,当然要做漂亮贴图部分还是需要美工ps的帮助。
澳门新葡亰平台官网 3
就像电信OSS和BSS越来越难清晰定界一样,2D和3D的应用也会如此,越来越模糊,一个系统将2D和3D融合是必然趋势,你中有我我中有你,也许将来我这个文章标题会让人觉得搞笑,机房监控当然要有3D功能了,何必强调3D,没有3D还算是机房监控吗,好比今天的手机,不能上网还算手机吗?

当然Flex、Silverlight还有很多采用Activex的C++引擎也都可以在Web上跑3D的引擎可以支持,但谁能忽视mobile呢,这些年大家受够了Web开发千奇百怪的大杂烩解决方案,每次到运营商客户运维终端看到古老的IE里面跑着各种插件糅合的脆弱系统,各种OA厂家还自鸣得意的支持IE678,还有不少人拿着facebook从html5迁移到native说事,其一那都是过去式了,其二那不是企业应用,Mark Zuckerberg需要的东西和做企业应用的你我是不一样的东西,下一个时代的企业应用技术必将是清清爽爽的HTML5!

当然3D不是电信网管的专注,以下是我们另一个部门做的太阳能发电、燃气和智能家居行业的3D监控系统应用供参考:

[youku id=”XNjc2NDUzNzA4″]

澳门新葡亰平台官网 4 澳门新葡亰平台官网 5 澳门新葡亰平台官网 6

赞 收藏 评论

澳门新葡亰平台官网 7

Bootstrap 4重大更新,亮点解读

2015/08/25 · 基础技术 · 3 评论 · bootstrap

原文出处: CSDN/lowtech   

8月19日对Bootstrap来说是个特别的日子——不仅是项目四周年纪念日,也是经过了一年密集开发之后发布Bootstrap 4内测版的日子。Bootstrap 4是一次重大更新,几乎涉及每行代码。

关于作者:唐尤华

澳门新葡亰平台官网 8

做自己喜欢的,编程、喝茶、看世界 个人主页 · 我的文章 · 18 ·     

澳门新葡亰平台官网 9

新增功能

澳门新葡亰平台官网 10

Bootstrap 4中有太多重大的更新,本文不能面面俱到,下面是一些颇受关注的亮点:

  • 从Less迁移到Sass: 现在,Bootstrap已加入Sass的大家庭中。得益于Libsass,Bootstrap的编译速度比以前更快;
  • 改进网格系统:新增一个网格层适配移动设备,并整顿语义混合。
  • 支持选择弹性盒模型(flexbox):这是项划时代的功能——只要修改一个Boolean变量,就可以利用flexbox的优势快速布局。
  • 废弃了wells、thumbnails和panels,使用cards代替:Cards是个全新概念,但使用起来与wells、thumbnails及panels很像,且更方便。
  • 将所有HTML重置样式表整合到Reboot中:在用不了Normalize.css的地方可以用Reboot了,它提供了更多选项。例如box-sizing: border-box、margin tweaks等都存放在一个单独的 Sass 文件中。
  • 新的自定义选项:不再像上个版本一样,将渐变、淡入淡出、阴影等效果分放在单独的样式表中。而是将所有选项都移到一个Sass变量中。想要给全局或考虑不到的角落定义一个默认效果?很简单,只要更新变量值,然后重新编译就可以了。
  • 不再支持IE8,使用rem和em单位:放弃对IE8的支持意味着开发者可以放心地利用CSS的优点,不必研究css hack技巧或回退机制了。使用rem和em代替px单位,更适合做响应式布局,控制组件大小。如果要支持IE8,只能继续用Bootstrap 3。
  • 重写所有JavaScript插件:为了利用JavaScript的新特性,Bootstrap 4用ES6重写了所有插件。现在提供UMD支持、泛型拆解方法、选项类型检查等特性。
  • 改进工具提示和popovers自动定位:这部分要感谢Tether工具的帮助。
  • 改进文档:所有文档以Markdown格式重写,添加了一些方便的插件组织示例和代码片段,文档使用起来会更方便,搜索的优化工作也在进行中。
  • 更多变化:支持自定义窗体控件、空白和填充类,此外还包括新的实用程序类等。

以上更新只是冰山一角, v4版共有1100多次commits和 12万行代码更新,这些更新可以在v4-alpha文档 中查看。

本文由澳门新葡亰平台官网发布于web前端,转载请注明出处:亮点解读,Mobile做HTML5活动接受的五个优瑕疵

TAG标签:
Ctrl+D 将本页面保存为书签,全面了解最新资讯,方便快捷。