论坛 产品库 视频 专题 CIO俱乐部 Windows8 实验室 CMO俱乐部 案例

谷歌栾跃:畅游互联网HTML5的动感海洋

发布时间:2013-08-13 16:52:00 来源:比特网 作者:tyrael
关键字:HTML5 谷歌 互联网大会 移动信息化

  8月13日,一年一度,第十二届2013中国互联网大会今日在北京国际会议中心开幕。围绕“共建良好生态环境,服务美好网络生活”的大会主题,来自工信部的领导,三大运营商负责人,非互联网从业者微软张亚勤、苏宁孙为民、京东赵国庆,互联网大佬张朝阳、周鸿祎等,都将齐聚一堂,就当前最热门话题,进行碰撞。

  在下午的2013思想者--国际互联网高峰论坛上,谷歌大中华区主管栾跃同现场所有与会者分享了一个有灵魂的动感互联网世界。通过HTML5的普及,通过立体矢量建模构成世界观,并通过在CSS样式中载入SVG、WebGL象素的渲染技术让世界生动起来。当然,谷歌对于开发者来讲,这些全是开放开源技术,给我们未来的创新带来很多机会。

  以下是演讲实录:

  金错刀:谢谢贺乐赋先生的精彩演讲,刚才贺先生的演讲屏幕上的点评相对比较少,估计有部分同学没有带同传。刚才贺先生演讲提到过几点,说现在其实移动、社交、大数据、云正在成为改变互联网,改变我们现在的四个很重要的推动能量,而且他也提到一个点,叫下一个关键的转折点就在现在。的确是这样。其实我们知道微软过去是一家软件公司,现在其实也在向互联网转型。

  当然,现在越来越多互联网公司也在遭遇移动互联网的挑战,而且移动互联网的玩法跟互联网的打法又很不一样。所以说,简单的就这几年的时间,我们的互联网公司也变成传统企业了。所以,改变、创新是我们向来的主题。

  我们接下来有请另外一位美国互联网公司的巨头谷歌,我们接下来会进入一个“黄金30分”的环节,有请谷歌开发技术推广部大中华区主管栾跃先生,在今年的“黄金30分”谷歌将展示公共数据在环保、救灾、医疗上的精彩应用,而且他们会提出一个很重要的话题,用开放型的技术引领创新,我们掌声有请!

  栾跃:各位来宾,大家下午好,感谢互联网大会,有机会让谷歌公司在这儿跟大家分享在全球的业界我们用开放型的技术在业界推广,全球的开发者们和企业们做了各种的创新。所以,今天我的话题就是围绕这个,用开放型的技术来推动我们互联网的创新,包括在中国做互联网创新。开始之前我感谢大会的主办方给我们这个机会在这儿跟大家做分享。

  我的话题围绕从互联网的应用,目前商业的机会给我们带来很多创新的机遇,是处在什么样的领域的?以及目前在国际上很多新型的开放型的技术,特别是可以帮助在我们中国做互联网应用创新的,它不属于某一家任何公司所垄断,所管理的这样的技术,完全是开放性的技术,我觉得在中国大家应该把这个作为我们做技术创新的一个主要的瞄准的方向。所以,这边所列出来的这些技术我跟大家做一个分享,最后提一下我们在全世界范围之内给开发者和企业所提供的各种创新的技术的资源。

  首先,互联网能够达到今天这样蓬勃发展的状态,你们了解互联网历史的可能应该非常清楚,它的成功在于一个非常开放型的技术,开放型的环境,让所有的企业能够在上面竞争。同时,业界的发展已经完成了过去20年的老式的,甚至可以说已经过时的软件开发的模式,就是开发软件,C++语言,卖光碟,靠那样的方法盈利,已经完全从那样转换到大家在互联网上,基于浏览器的应用做开发。

  互联网由于是一个完全开放性的环境,与国际的公开标准组织所推动制定的各方面的开放型技术,让整个业界在这方面进行公平的开放型的创新,达到过去互联网的蓬勃发展。将来互联网的创新也只能靠这样的技术进行进一步的创新的催化,在中国同样也是类似的情况。所以,在推动开源的开放型的技术,开发基于浏览器的运用,是我们在未来,包括在中国也是我们互联网整个业界应该努力的方向。

  使用开放型技术的好处非常多,简单来讲,它有利于减少垄断,减少某一个公司,或者几个公司对整个业界的垄断性的管理和控制。非常有利于公平的竞争,刺激大量的创新,过去互联网的环境下能够达到这样一个程度,未来也可以。在中国开放跟国际标准接轨的技术,用那些来创新,在很多程度上会帮助我们中国的开发者把我们的创新带向世界。如果我们所用的技术跟世界是接轨的,当我们的创新走向世界也容易在事业范围之内被接受,这个也是非常重要的。

  所以,基于刚刚我讲的这个话题我们看一下基于浏览器的应用开发,给我们大家做应用开发可以带来什么东西?我这边讲到所有的技术其实不是谷歌公司的技术,不像前面讲的是某一个公司的技术,我这边讲的全是W3C组织,国际上公开的开源的技术。首先是互联网的网页的渲染技术和设计技术,HTML5我们在北京,在国内都做了大量的推广,CSS里面加上了大量的渲染技术,也能够帮助我们在互联网页面的开发商带来很多的机会。SVG、WebGL象素的渲染技术,这些全是开放开源性的技术,给我们未来的创新带来很多机会。新型的图象的压缩技术,图象的显示技术,谷歌IO强调创新,必须在公开的环境里头,才能够给所有人带来利益。IO大会在今年给大家做了详细的介绍,WebP、VP9视频、WebM等技术。新型的多媒体数据实时通讯技术,其实这些技术是非常强大的,实时的通信技术可以让我们做很多非常有意思的开发。

  所谓的现代化浏览器什么意思呢?就是它必须支持W3C国际标准组织制定的这些技术的标准,能够在浏览器显示这些应用的。距离来说,包括像谷歌的浏览器大家都用很多,它支持这些技术的,这些渲染化的浏览器是我们很好的开发平台。谷歌在这方面做了大量的投资,比如Chrome浏览器有大量的工具。

  接下来介绍一下互联网网页的设计跟渲染技术。在网页的设计,网络的应用的开放的渲染技术,首先就是HTML5,它是国际上最先被W3C标准化的技术,它可以给大家提供二纬的,三维的演示,包括三个技术,一个就是画布技术,第二个就是矢量图,还有在象素层面的技术。这边看一些这方面的技术的演示,距离来说,你现在设计一个网页,可以很方便在网页上做到像这样的动态的动画的效果。以前你要用HTML5代码,或者用JAVAScript写是非常困难,可是HTML5可以任我们在网页的创新上达到这样的效果。这是在浏览器里头,可是在浏览器的网页上我可以选一个,挑一个颜色,在这个上面画画。以前是必须开发一个客户端的软件,刻在光盘上,把光盘卖给客户,现在在浏览器的页面里头可以做到象素层面的,你怎么知道是象素层面呢?比如我可以挑一个颜色,把透明度做改变,上面画的颜色是半透明的。也就是整个显示屏可以对每一个画面进行显示点的渲染。所以,用这样的技术进行创新,它的前景是非常大。

  举例来说,三维的矢量图SVG可以在页面上看上去像图画一样的东西,可以用路标进行控制,进行拽动。怎么在页面上的设计做到这个呢?用SVG这些技术都可以很方便的做到这些,而且做这样的开发部依靠和依赖任何公司,用这些技术在浏览器里面都可以完全可以做到这样的显示和做到这样的效果,所以这个是非常有创意的技术。

  再举个例子来说,这张看起来像照片,但是不是照片,用笔记本上面的鼠标里边走,可以控制,可以在像一个环境,但是整个又在一个网页里面,这样一类应用给我们带来创新的机会是无限多的。比如你可以开一个公司,专门做这样的设计创业,可以让客户看里头虚拟的环境等等。用这样的技术进行创新,它的机会是巨大的。非常方便可以用渲染的技术在网页上做互动的应用,把数据进行这样的显示,也就是大量的数据进行可视化是非常重要的一个创新的理念。现在中国就是大量炒作我们所谓的大数据的应用,其实大数据,如果不能把大量的数据进行这样的可视化,完全是空洞的,虚拟的东西,怎么样把大数据开发出来,开发成让人们看得懂,容易理解的应用,这是非常重要的。

  另外就是三棱镜里面的各种颜色,简单的用WebGL可以开发出这种东西,边上是模糊的,有不同的颜色,可以作为这样的效果。这有什么用呢?我这边有一个网页,大家看一下,看起来是照片,但是不是照片,看起来它在动,像录像,但是不是录像,我可以用鼠标转动这个车子,这样一个实体的三维的动画,轮胎上橡胶的效果全部在计算机上可以做到,这样一类的应用,其实创新的机会是最大的。中国有无数多的企业,有无数多的产品,这些产品需要向客户进行介绍,如果把这种产品用这样三维的技术显示出来,让客户在网页上进行动态式的观察,给整个业界带来创新的机会是巨大的。所以,这个是一个非常重要的理念。

  这个是另外一个用WebGL进行渲染的技术,这是你们看到水中有几个海蜇在里面流动,它也不是照片,也不是录像,完全靠着计算机运作的方式,可以在网页上做到这样的效果,非常厉害。更有意思的是怎么样把进行渲染的图象仍可以做到动态的,这个是一个很有名的很多年前就有的叫做谷歌body,谷歌几个工人把它做了开发,现在被这个公司买去了,叫做THE THINKERS,这样三维的实体的东西,还可以根据你所需要的进行数字的分析,进行变化。比如说这个人,我可以说,我只看他的肌肉,只看他的骨头,只看他的内脏,只看他的神经。这样一类的应用其实是对做产品的分解,产品在网络上进行展示演示,这一类的开发数字是巨大的。所以,我希望中国的开发者们和中国互联网的业界们应该想到利用这样的技术,怎么样把我们产品在互联网上的创新做的更好。

  网络的网页渲染,除了刚才讲的现在还有最近这一两年发展比较快的技术,就是第三个版本的CSS3,它现在里面加上了很多新的图象显示的渲染技术的过滤器,比如对区域,对整张照片进行过滤,比如把各种照片进行模糊的处理,进行合并等等。还可以在照片上打上一个灯光,各种东西是利用代码对网页上的图象进行处理。举个例子,这张照片,Android的LOGO,用一行代码,模糊就可以立即达到这样的效果,在网页上你显示的东西,可以不用事先做各种PS的处理,就可以用CSS的代码加上过滤器的代码做到这样效果。另外,还可以把两种不同效果合并起来,同样一张照片,一行代码就可以达到这样的效果。而且,当两个过滤器前后,前面把蓝色的去掉,后面加上黄色的,如果把这两个倒过来,达到的结果是不一样的。所以,创新的灵活度是非常大的,在这方面进行创新,你们可以想象到的东西都可以利用这样的技术做起来,是非常厉害的技术。

  自定义的过滤器可以把整个网页当成一个平面对待,把这个平面当成一个做三维开发的所做的纹理的帖子来处理,还可以进行特别的处理,把整个网页做成一个页面,一片东西来处理。举个例子,这样一张网页,用CSS3的过滤器代码,加上各种顶点,整张网页就像变成一张单行的纸一样,达到这种效果。

  这边看一个演示,来自美国的《国家地理杂志》,用了WebGL跟过滤器的技术,描述美国加州国际公约里头有一棵巨大的树,加“总统树”,如果让你设计一个网页设计这棵树,描述这棵树巨大,这张照片可以体现出人跟树相比,树显得非常粗,人很小,但是没有办法显示出这棵树的高。给大家看一下《国家地理杂志》怎么做?这个照片从模糊的变成一个彩色的照片,最主要的是它把这棵树巨大的照片显示这棵树大,就是例如CSS3过滤器,利用WebGL,把整个照片拆成很多片,然后利用动画把整个照片叠加起来,然后做一个动画的处理,给你的感觉是这棵树非常高。你们看到,它照片来了,把一张巨大的照片分成许多小的块块,然后把小的块块叠起来,一直到底部,上面放一个人,给你感觉这棵树这么高,这么大。这样的效果,光靠网页上一张简单的照片没有办法达到这个效果,你网上放一个录像,很多客户可能也没有时间看一个录像,利用CSS3和WebGL的功能可以达到这样的开发。同时,在《国家地理杂志》上面,当我在网页上出现的时候是淡色的,然后慢慢的出现。

  我这边介绍这棵树,我可以说,只看这棵树的树干,或者树叶,当然不是很高新的技术,大家看右下角,我按回车键,一张图卷过来,就像书翻过来的效果。用CSS的技术和WebGL技术联合起来就可以达到这样的效果,所以是非常有意思的。

  第二个讲一下现在全世界我们正在推广的全世界开源的图象压缩技术,它的技术包括图象的编码,图象的显示和译码,它的最大的优势是大大的降低图象储存和传输的负载,让图象在网页页面的显示上更快,更加绚丽。目前,网页上图象越来越多,这边有一些简单的统计,比方说在一个普通的网页上,代码是200K,图象已经达到800K,是代码负载的4倍。在移动设备上,图象的数量百分比更大,而且网页上超过500K到一兆的图象使用在不断的上升,所以这给很多网站在网页显示上的速度就会显得非常慢,其实中国的很多网页都是带有这样的问题。

  我们怎么解决这样的问题呢?WebP这个最新的技术就帮助我们解决这个问题,开源技术可以让更加优化的图象做更好的压缩,可以提供有损无损的压缩,还可以提供动画的,大大的帮助你降低你的应用,你的游,它的网络使用的负载,这边有一个简单的压缩的图象的比较,这两张照片,一个是WebP的,上面是JPG的,这张图表是国际上衡量它的精度和传输的负载的一个对比度。红色的是JPG,只要我在某一个图象显示的质量的位置上,红色的JPG所要用到的负载都比绿色的WebP要大,特别是当图象的质量非常高的时候个,90%的时候,红色的JPG所用的负载的文档的大小要超出WebP近乎近一倍,至少40%以上。

  所以,你们可以看出来,当两个图象显示效果差不多,如果你用WebP这个技术,可以让你的图象压缩的很小。这有一个对比的效果,JPG和WebP,WebP的尺寸只有400多K,JPG有600多K,这对我们页面调用的更快,使用效果更流畅是非常重要的技术。如果你讲的是有压缩的,跟没压缩的图象比是怎么回事呢?无损耗的图象就是PNG的图象,但是PNG的大小比WebP大近30%以上。所以,你们可以看出来WebP的优势是非常明确的。

  举个例子,在美国有一个eBay,跟中国的淘宝差不多,他们用了WebP以后,当一个网页用WebP在0.7的时候,它的网页上的照片几乎都掉完了,可是用JPG照片的现实速度就是非常慢。所以,中国有大量的网站,游戏网站,视频网站,主业上全都是图画,这样的网站都用这样的图画显示,如果用JPG你的网页显示速度就会非常慢,但是用WebP显示速度就会非常高。相比较之下,WebP比用JPG的数量降低近1/3,这是一个非常明显的优势。在移动平台这个优势更加明显,如果手机上的应用开发,你图象的显示用WebP,可以降低近50%的流量,帮助客户可以省钱,也可以帮助你自己的应用在别人的手机上,他打开的时候显示速度会更快,使用的更流畅。谷歌自己大量的产品,网上业务都往WebP转了,大家应该关注这样的技术,以后在全球范围之内,这样的技术会使用越来越多。

  还有声音的API,在开源的API包括各种功能,比如可以用客户服务端的机器上麦克风的输入和各种人工的声音做到这个,同时你已有的声音可以用代码进行混合,进行各种处理。同时包含了大量路由器的功能,支持各种音响的效果等等,在这里给大家看一个简单的演示。根据我们网络的连接,我们试试看,很简单的代码,加上一个麦克风,我用笔记本上的麦克风说话,它可以立即录下来,非常明显的语音识别。英文我说了话以后,它把它录下来,而且变成文字。这个技术是很明显的,如果把语音的识别加入到你们网页上可以有大量的创新。这边还可以进行直接的翻译,API你自己开发一个翻译器,通过API把数据流从笔记本,或者任何设备商所得到语音的涉及流进行再次的处理。然后你说我把这个立即变成中文,通过进行翻译的API没有问题,然后说英文,看它会不会出现中文。这个是非常简单的应用,你们可以看得出类似的,可以帮助我们做各种多语言的开发,在应用上可以做到很多酷的东西。谷歌公司在搜索上都加入了这样的功能,比如这是一个中文的网站,我可以对它说话,“北京天气预报”谷歌的搜索会立即跟着我所说的话把它变成相应的信息,在我们的页面上体现出来。我还可以说“北京国际会议中心图片”,谷歌的搜索非常厉害,不用打字,只要对它说话就可以达到这个效果。怎么达到这个效果?其实就是用我刚刚讲的API的技术。

  然后怎么人工处理,人工生成声音,比如这是一个网页,一个电子的鼓,然后还可以放事先编好的一套效果,这个效果不是一个录音,可以立即对它进行速度的改变,或者说把它的速度变慢,或者可以选不同的乐器,这个就是API强大的功能,可以让你做大量的创新的服务。

  下面我讲一下新的视频的解码技术,非常重要,叫做WebM,在开源的技术上我们跟国际上联合起来开发的一个开源技术叫做VP9,可以让你做到高清晰视频显示,同时又让负载大大降低的一个技术。它包含各种的解码和压缩的技术,之外还有加上了专门的音频,用了开源的音频的技术,Vorbis和Opus五是开源的技术。给大家看一个简单的比较,VP9的优势是完全开源的,没有版税,免费使用的,比质量最好的高清的视频,大家知道现在业界上用的最多的就是H.264,可是它跟VP9相比还是差一点。这张照片,在两个视频放的时候,在数据流达到的速度,大概200多的效果之下,VP9在左边和右边的H.264你们可以看到,视频显示的效果H.264明显要差很多,左边的VP9,碗边上的光亮,非常精细的。如果说H.264显示到高质量的情况下是怎么样的?这个是左边右边看起来都很清晰,但是你们可以看一下,用H.264的负载,它的应用边的尺寸要大很多。

  所以,你们看到VP9的优势很大,用国际上衡量视频质量的图表,任何负载情况下,红色是VP9,它的质量非常高,如果在同样的质量情况下,H.264质量就要低,在同样数据率的情况下,所以它的优势非常明显,在Youtube上很多人用VP9发布视频,可以节省你的屏宽,最多达到近50%,所以这个优势是非常明显的。我知道我们今天在座的接下来有一位老总有一位是来自中国PPTV的陶闯,像PPTV这样的企业,陶总您回去应该用这个。

  最后讲一下多媒体的实时通信技术,它可以让我们进行各种数据的传输,它是国际上公开组织标准所做的开源技术,支持音频、视频、任意数据粮店之间的实时通信,包括游戏在内的各种应用,充分使用它。它主要包括三个方面的功能,第一个是多媒体数据留,第二个是点对点之间的数据传输,第三就是任何数据的传输。这边看一下简单的演示,比如这边一张页面,我说开始,他说要用我笔记本上的照相机,我说没问题,它就开始拍照了,这是非常明显的利用照相机上的数据六立即把它显示到网页上,通过网页上这个应用跟后面的业务端联合起来就达到这样的效果。你说有什么稀奇,这是一张照片。给大家看这样一个照片,同样的照片,同样的数据量可以进行处理,可以根据象素的深度、浓度的变化,用不同的英文字母来代替,就可以达到这样的效果,非常酷的图象的处理,你就可以用这样类似的功能进行创新的开发。这边是另外一个技术,也是同样的,我进行了拍照以后,我刚刚讲到可以用过滤器进行处理,我可以把它变成单色的,可以拍个照,数据两点之间是两个不同的应用,可以把颜色倒过来,可以变成模糊的,你可以在这方面做创新的机会。

  国际上有没有人拿这个东西做呢?有,给大家看一个,首先这个是一个游戏,利用我的笔记本的电脑,我这个人在这边动,它有一个“十”字的头,有照相机自动对着我,我玩游戏的时候,好像有很多石头在飞,我就可以通过照相机的头进行躲避。这样一类的应用,通过这样的数据流做这样的开发机会非常多。

  另外一个例子,国际上的开发者,用CSS3的过滤器所进行的开发,让他用我客户端的设备进行开发,我可以说普通的照片可以变成这样的效果,可以变成左右的,可以变成倒过来的,变成不同形式的,可以倒过来,一二三拍个照,拍了照片效果,立即可以在网上,比方你可以给你的客户提供这样的效果,它其实里面有很多,我可以选择所有的用CSS3进行过滤器的处理,有没有看到五花八门的过滤效果是无数多的。这样一类的技术给我们非常大的创新的机会。

  在Chrome浏览器里面做新开发工具,本来想给你们演示,但是因为时间到了,我这边就不讲了,跳过去讲一下,在Chrome浏览器,你可以用它进行分析网页被调动速度的分析,对内储存的分析,非常方便。最后,我讲最后一个话题,就是最后一张,告诉大家在中国我们可以做到创新,可以学到国际上很多拿公开的公众数据,不是属于任何个人的,也不带有隐私的数据,比如天气预报,刮风,船的位置,车子的位置,跟隐私没有关系,我们可以用它进行大量的应用开发,这样的应用开发出来,不光是帮助老百姓大众带来大量生活的方便,也可以给我们企业带来很多工具,给政府决策机构带来很多工具,这是对我们在座的开发者有非常大的创新的机会。这样的应用开发的机会是巨多的,大家可以考虑做这样的应用的开发。另外,像美国的人口普查,美国的纽约州别的公司做的开发,点开某一个县,就知道某一个地区人口的百分比是多少,分析一个地区的人口,可以帮助企业分析它的客户的群体,这个才是真正的大数据的应用,我们应该做的是类似这样的东西,为我们业界带来真正的实际应用的开发。

  另外就是利用国际上公开的信息,像在美国加州,大家对天气比较感兴趣或者对环境保护比较注重,这边就是美国的加州政府公布了很多气温的消息,我们中国缺少类似这样的应用。这个也是比较有意思的,利用谷歌地图里边的一个新型的矢量技术的显示,显示美国最大的尔玛商城,这是一些开发者好事,他们觉得美国的沃尔玛自从60年代开始在美国遍地都是,把很多小的商场杀掉了,所以他们在网上做了这个宣传。当然,沃尔玛好或者坏咱们不评比了,但是目前中国的情况也是这样的。这个可以看到非常好的一个动态的历史,描述沃尔玛商城在美国发展的历史。这样一类的信息的数据的处理对我们的创新其实是很重要的,我们应该学习类似的理念,利用类似的信息在中国开发出很多类似的信息来。这是我们的一个网站,我们大量的开放技术都在上面做开放,如果大家记不住我们这个名字,可以告诉大家,“中国郭德刚”非常容易记,我们会秩序对开源技术的学习,我们在中国已经有15个城市成立了,包括在新疆乌鲁木齐,接下来十多个城市都排着队等着成立,如果你们的城市还没有谷歌社区希望你们来联系我。这是谷歌的社区在过去6个月在全国举办了近100场技术分享大会。

  总结一下,我们大家应该一起尽量推动和使用开源的技术,开放的技术,把中国互联网的创新待到下一步新的解体,谢谢大家!向陶总抱歉,占用你的时间了。

404 Not Found

404 Not Found


nginx/1.12.2

比特观察

比特微信账号
比特微信账号

微信扫一扫
关注Chinabyte

返回首页 长微博 返回顶部