产品经理要懂的技术理论基础概要

HTML5可成为Web移动应用的解决方案,但能否胜任呢?

2011/08/11 · HTML5 ·
HTML5

本文转载自雷锋网。

HTML5在改变着开发商开发移动Web程序的方式。但是,其却不能成为移动业务发展的终结。如果是的话,那么就不会存在“我应该为自己的服务开发本地应用还是Web应用?”这样的发问——Web应用会赢的。在pinch/zoom(一家为全球大牌开发移动应用的开发商),一直在研究怎么执行
HTML5语言并提出了一个有趣的问题“HTML能成为解决方案,但它能否胜任呢?”

简洁的回答是可以。但不如许多开发商想象得那么容易。

Brian Fling,
pinch/zoom的开发商及一本写移动程序发展的畅销书作者,尝试回答这个问题。在pinch/zoom
的博客Swipe的一个帖子里,Fling讨论了“一个HTML5移动程序的支解”及开发商需要什么来开始他们的开发,陷阱是什么及为什么HTML5如此的难?

HTML5很像HTML,只是更加的先进。Fling说“如果你懂得HTML,你就会在一小时内明白HTML5新颖的地方在哪里。”但是,他说,没有了JavasCript及CSS,HTML5几乎什么也不是。设备探测,离线数据,JavasCript工具,测试,调制及主题都是需要用已有的工具解决的问题。

图片 1

其中一个最大的挑战是开发商需要完全理解Java语言。那是从基本的代码开始往上走起。Fling说很多开发商如果没有了如
Prototype, MooTools,
jQuery或是Scriptaculous这样的框架帮助,他们就不会编写Java描述语言。如果一个程序有的仅是功能及主题,这并不是很大的问题。但是程序的数据需求及支持多种设备的需求要用HTML5的代码编写的话,那就代表着如果开发商不知道要怎么用
Java描述语言,要故障检测一个Web程序会是非常困难的。

Fling把需要建立HTML5程序的Java描述语言堆分成三块–合成描述语言,核心语言及设备语言。

接下来的是CSS语言。Fling把CSS语言和车的制造,倒模,内观制造及细节考察作了类比。

“Java描述语言肯定也会影响我们的思维,但是他们是潜伏的。”Fling写道。“我们需要它,但作为一个高端设备的粉丝,我可以告诉你–这种在后台的力量不能代表使用它会是强大的体验。”

“HTML能成为解决方案,但它能否胜任呢?”Fling的回答是肯定的,但是给出了以下警告:

  • 预备其需时。要料想到它可能比你以往的其他项目更耗时间。
  • 合理预算。这可不是一个网站,会让你花费多很多。
  • 确认你有合适的人才在你的团队里。如果解决这些问题对于世界上数一数二每天都在操作的专家来说都是困难的,预备好它对你们的团队来说也会是困难的。
  • 不存在“工具”。你需要自己建立工具。
  • 要考虑你所有的可能的选择。一个对待科技非常教条的方法就是一定要花不必花的钱。在移动业务里没有正误。对你顾客所需要的要持开放态度。

 

赞 收藏
评论

图片 2

HTML5未来发展趋势,html5发展趋势

HTML5是什么?
狭义的HTML5
HTML5草案的前身名为 Web Applications
1.0,于2004年被WHATWG提出,于2007年被W3C接纳,并成立了新的 HTML
工作团队。2013年5月6日, HTML
5.1正式草案公布。该规范定义了第五次重大版本,第一次要修订万维网的核心语言:超文本标记语言(HTML)。在这个版本中,新功能不断推出,以帮助Web应用程序的作者,努力提高新元素互操作性。

图片 3

最近几年web前端开发领域最热的话题当属HTML5,HTML5从根本上改变了开发商开发web应用的方式,从桌面浏览器到移动应用,这种语言和标准都正在影响并将继续影响着各种操作平台。
在移动领域,大家争论不休的一个问题就是开发Web应用还是原生应用?而随着HTML5标准的发展,两者之间的差异已经逐渐变得模糊,今天各大媒体都争相报道与HTML5有关的东西,那么,HTML5未来的发展趋势到底是什么?下面我来说说我的观点以及我所看到的一些我觉得比较认同的观点。
  1) 移动优先   前天,appMobi获选ReadWriterWeb2012最具前途的的公司,作为一家初创公司,这个奖公司首先专注于在移动平台上如何实现HTML
5的简单易用和无处不在。
  从如今层出不穷的移动应用就知道,在这个智能手机和将平板电脑大爆炸的时代,移动优先已成趋势,不管是开发什么,都以移动为主。
  如上文所说,此前一直困扰移动领域的问题就是开发Web应用还是原生应用。而如今,我们看见一些大型企业如《金融时报》在冲着HTM
L5进军移动市场过程中,从App
Store撤掉iPad原生应用而开发Web应用,同样表现出色。
  许多游戏开发商也将在移动Web应用中扮演中重要角色,移动Web应用优先的趋势将会持续到移动设备统治信息处理领域。其实用户根本不在乎你用什么工具开发了什么应用,不管是Web应用还是原生应用,只要好用就可以了。
  2) 游戏开发者领衔“主演”   其实移动游戏开发商是从HTML5获益最多的一方,他们可利用这个平台逃脱付费游戏须向苹果支付的30%提成。在某种程度上,游戏就是移动平台销量最好的应用,也是吸引人们购买移动设备的一个重要因素。
  许多游戏开发商都被Facebook或者Zynga推动着发展,而未来的Facebook应用生态系统是基于HTML5的,尽管在HTML
5平台开发出游戏非常困难,但游戏开发商却都愿意那么做。通过PhoneGap及appmobi的XDK将Web应用游戏打包整合到原生应用中也是一种方式,Facebook差不多就这么干的——基于Web应用及浏览器,但却将之打包整合进原生应用。
  3) 响应式设计&自动变化的屏幕尺寸   在HTML
5真的改变移动开发平台之前,必须要迈出重要一步,那就是“响应式设计”,也就是屏幕可以根据内容而自动调整大小。
  响应式设计最好的一个例子就是今年上线的BostonGlobe.com(观看视频),其屏幕能够根据任何内容而调整尺寸大小,在访问过其开发商Filament
Group后才了解到,响应式设计也并非易事,一些基本概念设计必须从头开始,比如处理媒体库的RespondJS,而且处理来自第三方的图片和广告也是恼人的问题。
  要想做好响应式设计,就必须洞悉内容与屏幕之间的反馈关系,一家来自硅谷的响应式设计公司ZURB称,其实在过去的16年中,开发商就意识到响应式设计就要完全离开“流”,转而注重内容是如何在网页和移动设备中被处理的,这一过程还在继续,HTML
5会让它最终成为可能。
  4 )设备访问   消除Web应用与原生应用界限的最大障碍就是浏览器访问移动设备基本特性的能力,比如照相机,通讯录,日历,加速器等,利用HTML5实现此能力方面,上文中提到的appMobi算是行业翘楚,在感恩节后开源了所有API。Mozilla也一直在努力通过移动浏览器Fennec来将强设备访问能力。
  对许多移动开发商来说,提高设备访问能力是HTML5最令人激动的革新,这意味着Web应用能够登陆移动设备而无需做任何PhoneGap式打包,游戏开发商当然最开心,因为某些特性对他们来说是封锁的,比如能整合到游戏中的加速器。
  这就开启了另一个可能的世界,比如能与云更好地整合(这有利于应用内购买,消息推送等)并提高游戏可玩性,有了HTML5这个平台,开发商可以不再依赖于Java语言,CSS3,HTML及其它程序语言。
  5) 离线缓存   这个概念相当新潮,离线情况下,app也能照常运作,算是HTML
5充满魔力的一面,今年最好的离线缓存例子就是亚马逊Kindle的云阅读器,可以通过Firefox6以上版本,Chrome11以上版本,Safari5以上版本及iOS4以上版本浏览器将内容同步到所有Kindle系列设备,并能记忆用户在kindle图书馆的一切。

图片 4

  亚马逊就这么实现了离线使用Web应用,许多专家人声称原生应用的末日即将到来,因为Web应用的使用变得简单,无摩擦,适用于任何一个平台或者无需平台。当然Mozilla的触角也伸到了这里,实际上,Mozilla想涉足任何一个HTML
5能渗透的领域,从Mozilla的移动蓝图,可以了解更多。
  6) 开发工具的成熟
  在今年八月份,Brian Fling曾写过一篇博文叫HTML5
Web应用开发剖析,提出了几点建议供从事HTML 5应用的开发者参考:
  要耐心,HTML5项目可能比开发其他任何项目好是都要长
  做好预算,这不像建网站那么简单,可能会耗费你大量资金
  找对开发者,你要记住,这对许多经验丰富的专家来说都非常难的事,那么你的团队也会觉得困难,所以一定要找对人,找到正确的方向
  要自食其力,你要知道,开发HTML 5项目,许多工具都要自制,不是现成的
  在技术界,按部就班的教条风格在这里行不通,会花掉许多不必要的资金,在移动领域,没有对与错,只有是否适合,一切以用户体验为重。

图片 5

  在工具方面,除了appMobi提供的工具以外,还有Sencha及Appcelerator提供的框架及IDE供应用开发商们使用,虽然这些工具现在算不上成熟,也不如Android和iOS上的开发商框架及工具那般简单强大,但至少它们在演进,将会变得越来越好用。
  总结   HTML
5的其它功能,如表单和新标准还在快速演进,而随着标准化工作的进行,HTML
5有可能变回HTML。HTML
5开发领域的领军人物包括Sencha,Adobe,Appcelerator,appMobi及Facebook,亚马逊,Google三大巨头。
  不管你是想开发出新型视频应用的开发商如Brightcover还是想开发新型音频应用的开发商如Soundcloud,不论是桌面应用还是移动应用,HTML
5都是创新的主旋律。

HTML5是什么?
狭义的HTML5 HTML5草案的前身名为 Web Applications
1.0,于2004年被WHATWG提出,于2007年被W3C接纳,并…

当我们打开一个网页或App时,这背后都运用了那些技术来让这个网页和 App
的内容呈现在浏览器和手机上?

驱动这些动作背后的技术名词都是什么,各自有着怎样的优缺点,彼此间是如何协作和运转的,以及产品经理如何合理地评估技术能力和开发难度?

-这中间涉及到多,技术知识,前端包括 HTML,CSS,JavaScript,jQuery 以及
Bootstrap ,后端包括 HTTP 服务器,后端编程语言,数据库以及 Cookie 和
Session;

移动开发分为原生,混合式,HTML5,以及不同的移动端技术选择在功能和开发成本上的比较。

下面我们就一一揭示下这些内容:

图片 6

 

网站架构:

现在的网站基本都是MVC(Model View
Controller)架构,就是业务模型(model)-用户界面(view)-控制器(controller)。这三个层次共同组建了一个网站。如图:

 

图片 7

MVC说明

业务模型(model)指的是数据和业务规则,就是在数据库中存储这些数据,并处理这些数据间的逻辑。

用户界面(view)就是呈现在用户眼前的这些界面,标题在什么位置,用什么字体,右下角要放个什么图片,之类的。

控制器(controller)处理用户交互,从界面(view)读取数据,向业务模型(model)发送数据。

前端工程师,一般负责VC的部分;后端工程师,则负责M的部分。但各个公司对前端和后端的工作划分并不完全一致,有些工作前后端都可以做。

前后端的划分,可以简单地理解为凡是运行在用户设备上的技术都可以称为前端技术(
比如 HTML / CSS / JS,甚至移动设备的 Obj-C / Swift
);而后端的作用就是负责将这些东西封装在 HTTP
的数据包中然后通过网络传送到前端。当然除了这些前端文件,后端还有一个更重要的职能,即保存和提供用户数据,比如移动端常见的
JSON 就是目前最流行的在后端和前端之间传输的一个文件格式。

 

图片 8

前端与后端是如何配合的?如上图,以 Web
端为例,在浏览器输入一个网址后,浏览器向服务器发送了一个 HTTP
请求;服务器通过一个 HTTP
响应,把显示这个网页所需要的资源传回给了浏览器。而需要在浏览器中执行的技术,HTML
/ CSS / Javascript
等就叫做前端;需要在服务器端执行的、通常我们看不到技术就叫做后端。

 

Web 前端的运行逻辑示例

假设我们要访问 Google,从我们在浏览器输入 Google.com
到最后这个页面出现在眼前,这其中涉及许多前端的技术反应和代码组合,总体而言可以简化为两步:

1、 浏览器向 Google 的服务器发送了一个请求。

2、 服务器收到了一个 HTTP
响应,这个响应中就包含了执行这个命令所需要的所有资源(注:可以通过
Chrome 浏览器的开发者工具来进一步观察 HTTP 协议的运行情况;下图为 Google
的 HTTP 协议运行情况)。

 

图片 9

上图这个界面看起来很复杂,但对于非程序员而言,HTTP
协议运行情况只要关注其中的几个关键部分:第一列,即资源的
URL;第四列是这个资源的类型。在第一个请求和后续的请求之间有一根蓝线,即进度条。而
HTTP 协议中运行的项目越少,浏览器加载的速度越快。图中 Google
就处理得很好,只有 10 个左右的请求。

 

前端主要语言

1)Html:全称HyperText Markup
Language,是一组标签和文本的组合,是搭建网页的基础语言。文档写起来并不复杂,但是功能很强大,而且什么平台都能用,什么电脑都能用。它已经包含了网页常见的元素,实际上在
Web
早期的很长一段时期内,网页都是这个样子。后来随着使用网络的人群越来越广泛,在
HTML3.0 中引入了对网页样式的定义;

2)CSS:要想网页更精美更酷炫,就需要用到CSS语言了。CSS能够对网页中对象的位置排版进行像素级的精确控制,支持几乎所有的字体字号样式,拥有对网页对象和模型样式编辑的能力,并能够进行初步交互设计,是目前基于文本展示最优秀的表现设计语言。带样式的
HTML
也拥有一个缺点,它需要为每个标题和文字都设定样式,工作量非常庞大,CSS
就是在这样的情况下诞生了。CSS又称叠层样式表,简言之是一种用来表现 HTML
文件样式的样式设计语言。CSS
能够对网页中的对象的位置排版进行像素级的精确控制,实现基础的静态的交互设计;而CSS
目前的最新版本 CSS3 能够真正做到网页表现与内容分离。

3)Javascript:如果想要网页有更酷炫的交互,就要用到Javascript。它是通过嵌入到html中来实现自身功能,主要用于添加交互行为,可以在多平台下运行(如Windows、Linux、Mac、Android、iOS等),还可以控制cookies,等等吧。差
不多在 CSS
诞生的同一时间,大家开始觉得这样静态的网页似乎略显无聊,能不能给网页加入一些可以动起来的元素?比如点击一个按钮之后变个颜色。当时网景公司的工程师
Brendan Eich
就给他们自家的浏览器引入了这种实现动态效果的脚本语言,这就是
Javascript(简称 JS)的诞生。所以通俗来说,Javascript 就是用来给 HTML
网页增加动态功能,实现更炫酷的交互。

4)jQuery:这是一个时下最流行的Javascript库,主要面向查询(Query)。简单理解,就是javascript里面那些需要用一行行代码实现的体力活,在jQuery里面可以直接打包成模块,调取对应的接口使用,解放了开发者更多的时间。这种模块化的使用方式让开发者可以很快就开发出酷炫的页面。jQuery
使用户能更方便地处理 HTML ,它能够使用户的 HTML 页面保持代码和 HTML
内容分离,通过 jQuery ,可以不用在 HTML 里面插入一堆 JS
来调用命令,只需要定义 ID 即可。此外,由 Twitter 设计师 Mark Otto 和
Jacob Thornton 合作开发的 Bootstrap 也是一个受欢迎的前端框架。

5)Bootstrap:Bootstrap也是对Javascript进行封装,它在jQuery的基础上进行更加人性化的完善,其实就是更方便了。它有很多现成的组件,比如导航栏、下拉菜单、按钮,都定义好了样式和交互,直接成套拿来用就行了。

 

如何评估前端的能力?从初阶到高阶分别为:

•只会基本的HTML/CSS, 可以将设计图转化为HTML/CSS, 俗称切图

相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注

*
*
Website