| 8月13日消息，谷歌開發(fā)技術(shù)推廣部大眾化區(qū)主管欒躍在2013年中國(guó)互聯(lián)網(wǎng)大會(huì)上分享了谷歌的開放技術(shù)，力圖幫助開發(fā)者用開放性的技術(shù)來(lái)推動(dòng)互聯(lián)網(wǎng)創(chuàng)新，包括在中國(guó)的互聯(lián)網(wǎng)創(chuàng)新。
欒躍表示，互聯(lián)網(wǎng)的成功是基于非常開放性的技術(shù)、開放性的環(huán)境，讓所有的企業(yè)展開競(jìng)爭(zhēng)。同時(shí)業(yè)界的發(fā)展已經(jīng)完成了過(guò)去二十年的老式的，甚至可以說(shuō)是已經(jīng)過(guò)時(shí)的軟件開發(fā)的模式，就是開發(fā)軟件，C++語(yǔ)言，印個(gè)光碟，賣個(gè)光碟，靠這樣的方法去盈利，已經(jīng)從這樣的模式轉(zhuǎn)換到在瀏覽器里面基于瀏覽器的應(yīng)用開發(fā)。
欒躍介紹說(shuō)，在推動(dòng)開源的開放性的技術(shù)，開發(fā)瀏覽器的技術(shù)，包括在中國(guó)也是我們互聯(lián)網(wǎng)整個(gè)業(yè)界應(yīng)該努力的方向。這有利于減少壟斷，減少某一個(gè)公司或者幾個(gè)公司對(duì)整個(gè)業(yè)界的壟斷性的管理和控制，非常有利于公平的競(jìng)爭(zhēng)，能夠刺激大量的創(chuàng)新。所以過(guò)去是在這樣的環(huán)境下互聯(lián)網(wǎng)能夠達(dá)到今天這樣的環(huán)境，未來(lái)也是這樣的一個(gè)理念來(lái)發(fā)展。
2013互聯(lián)網(wǎng)大會(huì)于8月13日至15日在北京召開，騰訊科技作為本屆互聯(lián)網(wǎng)大會(huì)的官方戰(zhàn)略合作門戶和官方指定合作新聞中心，在現(xiàn)場(chǎng)進(jìn)行全方位的視頻和圖文直播。并特設(shè)立2個(gè)現(xiàn)場(chǎng)專訪間，力邀業(yè)界專家與企業(yè)代表共同探討產(chǎn)業(yè)現(xiàn)狀，指點(diǎn)未來(lái)趨勢(shì)。
作為大會(huì)官方微博合作伙伴，騰訊微博(http://t.qq.com/)上發(fā)起了#向CEO提問(wèn)#的活動(dòng)，所有網(wǎng)友都可以提前向您關(guān)注的互聯(lián)網(wǎng)行業(yè)CEO提問(wèn)。其中部分問(wèn)題將被選中，在互聯(lián)網(wǎng)大會(huì)現(xiàn)場(chǎng)提出，并得到嘉賓的正面解答。
以下為欒越演講實(shí)錄：
欒躍：各位來(lái)賓，大家下午好，感謝互聯(lián)網(wǎng)大會(huì)有機(jī)會(huì)讓谷歌公司在這兒跟大家分享，在全球的業(yè)界我們用開放性的技術(shù)在全球推廣，全球的開發(fā)者和企業(yè)們做了各種的創(chuàng)新。今天我的話題就是圍繞著這個(gè)，用開放性的技術(shù)來(lái)推動(dòng)互聯(lián)網(wǎng)創(chuàng)新，包括在中國(guó)的互聯(lián)網(wǎng)創(chuàng)新。
開始之前感謝大會(huì)的主辦方給我們這個(gè)機(jī)會(huì)跟大家做分享，我的話題圍繞著從互聯(lián)網(wǎng)的應(yīng)用、目前的商業(yè)機(jī)會(huì)給大家?guī)?lái)了很多創(chuàng)新的機(jī)遇，是處在什么樣的領(lǐng)域，以及目前在國(guó)際上很多新型的開放性的技術(shù)，特別是可以幫助在中國(guó)做互聯(lián)網(wǎng)應(yīng)用創(chuàng)新的，不屬于某一家公司在壟斷、管理的技術(shù)，而且完全是開放性的技術(shù)。在中國(guó)應(yīng)該把這個(gè)作為做技術(shù)創(chuàng)新主要的瞄準(zhǔn)方向。
這邊列出來(lái)的技術(shù)我給大家做一個(gè)分享，最后給大家提一下我們?cè)谌澜绶秶畠?nèi)，給開發(fā)者和企業(yè)提供的創(chuàng)新技術(shù)的資源。
首先講一下互聯(lián)網(wǎng)能夠發(fā)展到今天在世界范圍之內(nèi)非常蓬勃發(fā)展，達(dá)到這樣的狀態(tài)了解互聯(lián)網(wǎng)歷史的肯定非常清楚，它的成功是在于一個(gè)非常開放性的技術(shù)、開放性的環(huán)境，讓所有的企業(yè)能夠在上面競(jìng)爭(zhēng)。同時(shí)業(yè)界的發(fā)展已經(jīng)完成了過(guò)去二十年的老式的，甚至可以說(shuō)是已經(jīng)過(guò)時(shí)的軟件開發(fā)的模式，就是開發(fā)軟件，C++語(yǔ)言，印個(gè)光碟，賣個(gè)光碟，靠這樣的方法去盈利，已經(jīng)從這樣的模式轉(zhuǎn)換到在瀏覽器里面基于瀏覽器的應(yīng)用開發(fā)。
互聯(lián)網(wǎng)到今天是由于開放性的緩和，開放性的與國(guó)際組織制訂的各方面的開放性的技術(shù)，讓整個(gè)業(yè)界有機(jī)會(huì)在上面進(jìn)行公平、開放性的創(chuàng)新，達(dá)到了過(guò)去互聯(lián)網(wǎng)過(guò)去發(fā)展的蓬勃發(fā)展。在將來(lái)互聯(lián)網(wǎng)在未來(lái)的創(chuàng)新，也只能是靠這樣的技術(shù)去進(jìn)行進(jìn)一步的創(chuàng)新的催化。在中國(guó)同樣也是類似的情況。所以在推動(dòng)開源的開放性的技術(shù)，開發(fā)瀏覽器的技術(shù)，包括在中國(guó)也是我們互聯(lián)網(wǎng)整個(gè)業(yè)界應(yīng)該努力的方向。
使用開放云的技術(shù)就非常多了，有利于減少壟斷，減少某一個(gè)公司或者幾個(gè)公司對(duì)整個(gè)業(yè)界的壟斷性的管理和控制，非常有利于公平的競(jìng)爭(zhēng)，能夠刺激大量的創(chuàng)新。所以過(guò)去是在這樣的環(huán)境下互聯(lián)網(wǎng)能夠達(dá)到今天這樣的環(huán)境，未來(lái)也是這樣的一個(gè)理念來(lái)發(fā)展。
重載如果我們大家來(lái)推動(dòng)使用開放性的技術(shù)，跟國(guó)際接軌標(biāo)準(zhǔn)的技術(shù)，用那些來(lái)做創(chuàng)新的話，在很大程度上會(huì)幫助中國(guó)的開發(fā)者，把我們的創(chuàng)新帶上世界。如果我們用的技術(shù)跟世界是接軌的，當(dāng)我們的創(chuàng)新走向世界的話，也容易在世界范圍之內(nèi)被接受，這也是非常重要的。
基于我剛剛講的話題，我們來(lái)看一下基于瀏覽器的應(yīng)用開發(fā)給大家做應(yīng)用開發(fā)會(huì)帶來(lái)什么東西，你會(huì)注意到我講到的技術(shù)不是谷歌公司的技術(shù)全是W3C組織公開開源的技術(shù)。首先是瀏覽器網(wǎng)頁(yè)的渲染技術(shù)，大家知道HTML5。里面加上大量的渲染技術(shù)也能夠幫助我們?cè)诨ヂ?lián)網(wǎng)上帶來(lái)很多的創(chuàng)新。CSS、SVW、WebGL這些全是開放、開源性的技術(shù)，節(jié)大家未來(lái)的創(chuàng)新帶來(lái)很多的機(jī)會(huì)。
新型圖像的壓縮技術(shù)、圖像的顯示技術(shù)，和新型的多媒體技術(shù)，在座的對(duì)這些可能不是很了解，在今年5月份谷歌公司在美國(guó)舊金山面向全世界所進(jìn)行的開發(fā)技術(shù)推廣大會(huì)，這個(gè)大會(huì)做了詳細(xì)的介紹，比如WebP、VP9、WebM等等。
新型多媒體實(shí)時(shí)通訊技術(shù)，不知道互聯(lián)網(wǎng)應(yīng)用開發(fā)，各位開發(fā)者和企業(yè)們有多少應(yīng)用到這些技術(shù)的，其實(shí)這些技術(shù)是非常強(qiáng)大的，WebRTC是實(shí)時(shí)通訊的技術(shù)，可以讓我們做很多有意思的開發(fā)。
最后是現(xiàn)代化瀏覽器，現(xiàn)代化的名稱是什么意思呢？這個(gè)瀏覽器必須要支持W3C組織、國(guó)際公開標(biāo)準(zhǔn)組織所制訂的標(biāo)準(zhǔn)，能夠在瀏覽器里面顯示應(yīng)用的。距離來(lái)說(shuō)像谷歌的Chrome，還有火狐的瀏覽器，支持這些現(xiàn)代化的瀏覽器是我們很好的開發(fā)平臺(tái)。谷歌公司在這方面做了大量的工作，比如Chrome里面有很多工具可以讓我們的開發(fā)效率有很高。
接下來(lái)講一下互聯(lián)網(wǎng)的網(wǎng)頁(yè)設(shè)計(jì)跟渲染技術(shù)，特別是在座的很多包括企業(yè)負(fù)責(zé)業(yè)務(wù)項(xiàng)目，對(duì)技術(shù)不是很了解的，可以有機(jī)會(huì)了解一下。在網(wǎng)頁(yè)的設(shè)計(jì)、網(wǎng)絡(luò)應(yīng)用開發(fā)的渲染技術(shù)，首先就是HTML5，它是國(guó)際上最先被W3C組織標(biāo)準(zhǔn)化的互聯(lián)網(wǎng)基于瀏覽器的技術(shù)之一，可以給大家提供各種二維、三維的圖像顯示、演示。里面最關(guān)鍵有三個(gè)技術(shù)，一個(gè)是畫布技術(shù)，第二個(gè)矢量圖，第三個(gè)是像素層面的渲染技術(shù)。
這邊看一些這些技術(shù)的演示，舉例來(lái)說(shuō)你設(shè)計(jì)一個(gè)網(wǎng)頁(yè)可以很方便地在網(wǎng)頁(yè)上做到像這樣動(dòng)態(tài)動(dòng)畫的效果，以前要用代碼或JAVA來(lái)寫很困難，但是現(xiàn)在HTML5的技術(shù)上在網(wǎng)頁(yè)的創(chuàng)新上有機(jī)會(huì)做到這樣的效果，這是非常重要的技術(shù)。
還有比方說(shuō)像素層面的渲染，這是在瀏覽器里面做到的，可是在瀏覽器的網(wǎng)頁(yè)上可以做到選一個(gè)比，比如說(shuō)挑一個(gè)顏色，然后在上面畫畫。以前是必須要開發(fā)一個(gè)客戶端的軟件，就像我剛才講的老的模式必須要把軟件刻在光盤上，把光盤賣給客戶?；蛘哒f(shuō)一個(gè)很大的軟件包你放在網(wǎng)上讓大家去買?，F(xiàn)在可以在瀏覽器上做到像素層面，比如我可以把透明度做改變，可以做半透明的，就是說(shuō)整個(gè)顯示屏上，整個(gè)顯示屏都可以讓這個(gè)技術(shù)分別進(jìn)行每個(gè)像素顯示屏的顯示點(diǎn)的渲染，是非常細(xì)密的技術(shù)，可以看到用這樣的技術(shù)來(lái)進(jìn)行創(chuàng)新前景是非常大的。
舉例來(lái)說(shuō)三尺矢量圖的技術(shù)，可以在頁(yè)面上看上去像圖畫一樣的東西，可以用鼠標(biāo)來(lái)進(jìn)行控制，看起來(lái)像一張照片，其實(shí)不是照片，是可以互動(dòng)的。怎么樣在頁(yè)面上的設(shè)計(jì)做到這個(gè)呢？你用這些開放性的技術(shù)就可以很方便地做到。而且你做這樣的開發(fā)不依靠和依賴任何公司，也不需要任何公司特別的技術(shù)。用這些開發(fā)性的技術(shù)在瀏覽器里面，在Chrome瀏覽器里面都可以做到這樣的顯示和效果，這個(gè)是非常有創(chuàng)意的技術(shù)，我們大家可以來(lái)使用。
再舉個(gè)例子這張看起來(lái)像照片，但是我告訴你這不是照片，我用我的筆記本上的鼠標(biāo)可以控制，可以能在里面走，像個(gè)游戲的環(huán)境。但是這整個(gè)又是在網(wǎng)頁(yè)里面。
這邊是簡(jiǎn)單的演示，但是這樣一類的應(yīng)用去創(chuàng)新，帶來(lái)創(chuàng)新的機(jī)會(huì)是無(wú)限多的。比方說(shuō)可以開公司專門做這樣的設(shè)計(jì)去創(chuàng)業(yè)，專門給很多酒店、旅館讓客戶看里面的環(huán)境，這個(gè)不用多說(shuō)大家都可以想象得到。用這樣的技術(shù)做創(chuàng)新，它的機(jī)會(huì)是巨大的。
舉例來(lái)說(shuō)這個(gè)還可以做什么呢？比如谷歌的搜索量，這是谷歌的地球，這是在美國(guó)、歐洲、中國(guó)，中國(guó)可以看到用谷歌搜索最多的還是北上廣城市，非常方便地可以用選的技術(shù)在網(wǎng)頁(yè)上做到互動(dòng)的應(yīng)用。這樣一類把數(shù)據(jù)進(jìn)行顯示，也就是說(shuō)大量數(shù)據(jù)可視化是非常好的理念。現(xiàn)在國(guó)內(nèi)有很多炒作我們大數(shù)據(jù)的理念，如果不能進(jìn)行可視化就是虛的東西。我們?cè)趺礃涌梢园褦?shù)據(jù)開發(fā)出來(lái)讓人能夠理解的應(yīng)用，這是非常重要的概念。
大家看這個(gè)三菱鏡，簡(jiǎn)單的網(wǎng)頁(yè)可以開發(fā)出這種東西，像素的層面邊上是模糊的等等，可以做到非常好的效果。
你說(shuō)這樣的技術(shù)具體有什么用呢？我這邊有一個(gè)網(wǎng)頁(yè)，我搜索一下可以看一下。這看起來(lái)是照片，但是不是照片，它在動(dòng)。看起來(lái)是在動(dòng)的也許是錄像，它不是錄像，我可以證明不是我的錄像我用筆記本的專項(xiàng)可以轉(zhuǎn)動(dòng)輪子，可以開動(dòng)車子。這樣的一個(gè)實(shí)體三維的動(dòng)畫，它的金屬的表面、所進(jìn)行的渲染、輪胎上橡膠全部在計(jì)算機(jī)上可以做出來(lái)，這樣的應(yīng)用創(chuàng)新的機(jī)會(huì)是巨大的。中國(guó)有無(wú)數(shù)多的企業(yè)、無(wú)數(shù)多的產(chǎn)品，這些產(chǎn)品需要向客戶去進(jìn)行介紹，如果把各種產(chǎn)品用三維的技術(shù)給顯示出來(lái)，讓客戶可以在網(wǎng)頁(yè)上進(jìn)行動(dòng)態(tài)式的觀察，給整個(gè)業(yè)界帶來(lái)創(chuàng)新的機(jī)會(huì)是巨大的，所以這是一個(gè)非常重要的理念。這個(gè)是另外一個(gè)用WebGL顯示的，可以用運(yùn)算方式在網(wǎng)頁(yè)上達(dá)到這樣的效果，非常厲害。
還有更有意思的是怎么樣把進(jìn)行渲染的圖像可以做到動(dòng)態(tài)，這是很多幾年前就有的，叫BODY。這個(gè)人可以用鼠標(biāo)進(jìn)行控制，然后轉(zhuǎn)過(guò)來(lái)等等。這樣三維實(shí)體的東西，這個(gè)東西還可以根據(jù)你所需要的進(jìn)行數(shù)字分析、變化。比方說(shuō)這個(gè)人只看肌肉，只看骨頭、內(nèi)臟、神經(jīng)，這樣一類的應(yīng)用可以想想其實(shí)是對(duì)做產(chǎn)品的分解、產(chǎn)品在網(wǎng)絡(luò)上進(jìn)行展示演示，這一類的創(chuàng)新是天文數(shù)字，是巨大的。希望中國(guó)的開發(fā)者和中國(guó)的互聯(lián)網(wǎng)業(yè)界可以想到用這樣的技術(shù)，怎么樣可以進(jìn)一步把互聯(lián)網(wǎng)上的創(chuàng)新做到更好。
我就暫停講到這兒。
網(wǎng)絡(luò)的網(wǎng)頁(yè)渲染技術(shù)，除了我講到的除了WebGL技術(shù)之外，現(xiàn)在還有最近這一兩年發(fā)展比較快的一個(gè)技術(shù)，就是第三個(gè)版本的CSS，看到的最新標(biāo)記是CSS3。這里面加上了圖像現(xiàn)實(shí)的過(guò)濾器，比如對(duì)區(qū)域、整個(gè)照片進(jìn)行過(guò)濾，這個(gè)功能是很多的。譬如說(shuō)可以對(duì)整個(gè)照片進(jìn)行模糊處理、合并等等，還可以在照片上打上燈光，這些是利用代碼對(duì)網(wǎng)頁(yè)上的圖像進(jìn)行處理。舉例來(lái)說(shuō)這個(gè)照片，我用一行代碼，就是CSS的代碼立馬可以達(dá)到這樣的效果。可以不用事先做PS的處理，用CSS3就可以達(dá)到這樣的效果，非常強(qiáng)大的。
另外還可以把這個(gè)效果把兩種不同的效果合并起來(lái)，兩種照片前面藍(lán)色的去掉，后面加上黃色，一行代碼可以達(dá)到這樣的效果。前面是把藍(lán)色的去掉，后面是加上黃色的，同樣的代碼倒過(guò)來(lái)達(dá)到的效果是不一樣的，靈活性是非常好的。你們想象的東西都可以用這樣的技術(shù)做出來(lái)，是非常厲害的技術(shù)。
自定義的過(guò)濾器還可以達(dá)到什么呢？可以把一個(gè)網(wǎng)頁(yè)當(dāng)作平面來(lái)對(duì)待，把平面當(dāng)成做三維開發(fā)所做的紋理的片子來(lái)處理，把整個(gè)網(wǎng)頁(yè)做成一個(gè)頁(yè)面。比如這樣的一張網(wǎng)頁(yè)用CSS3的過(guò)濾器的代碼加上頂點(diǎn)，整個(gè)網(wǎng)頁(yè)像變成單行的紙一樣，把紙做成這樣的效果，甚至是動(dòng)畫。以前光靠HTML的代碼是絕對(duì)做不到這樣的效果，這是非常厲害的技術(shù)。
這邊我們看一個(gè)演示，是來(lái)自美國(guó)的國(guó)家地理雜志用了WebGL跟CSS過(guò)濾器的技術(shù)，他們有一個(gè)網(wǎng)頁(yè)是描述在美國(guó)的加州國(guó)家公園里面有一棵巨大的樹，樹的名字叫總統(tǒng)樹，在森林里面有這樣一個(gè)巨人，這是在網(wǎng)頁(yè)上介紹的。如果用一個(gè)網(wǎng)頁(yè)描述這個(gè)書巨大你會(huì)怎么做呢？以往是照一個(gè)照片，旁邊放一個(gè)人，然后比較一下，這會(huì)顯示出人很小，樹很大。但是沒有辦法顯示樹的高，我給你們看一下國(guó)家地理雜志是怎么做的。比如這張照片卷過(guò)來(lái)，這張照片是從淡色模糊的變成彩色的照片。最主要的是這個(gè)效果，把這個(gè)樹巨大的照片來(lái)顯示樹大，就通過(guò)剛剛講到的CSS3過(guò)濾器和WebGL，把照片拆成很多片，然后在網(wǎng)頁(yè)上利用動(dòng)畫把很多照片疊加起來(lái)，疊加起來(lái)以后做動(dòng)畫的處理，讓你感覺到樹非常高。你們看到照片來(lái)了，把一個(gè)巨大的照片分成很多小塊塊，然后小塊塊疊起來(lái)，然后從上到下把照片疊起來(lái)，最后一直到底部，下面放一個(gè)。讓你感覺到這個(gè)樹這么高、這么大，這樣的效果光靠網(wǎng)頁(yè)上一張照片是沒有辦法達(dá)到這樣效果的，用網(wǎng)上放錄像介紹一棵樹，可能沒有興趣和時(shí)間去看錄像，利用這樣的效果，利用CSS和WebGL的功能可以做到很有創(chuàng)意的開發(fā)。
除此之外在國(guó)家地理雜志上還有這樣的照片，當(dāng)剛剛在網(wǎng)頁(yè)上出現(xiàn)的是淡色的，然后顏色慢慢出現(xiàn)，都有一些特技的效果。這邊舉一個(gè)例子來(lái)說(shuō)，這邊網(wǎng)頁(yè)是介紹樹，我只看這個(gè)樹的樹干，或者只看樹葉，這種是動(dòng)態(tài)式的。當(dāng)然這不算很高新的技術(shù)。最有意思的是這個(gè)，當(dāng)我按了右下角回車鍵之后，一個(gè)紙卷過(guò)來(lái)像樹葉翻過(guò)來(lái)的效果，我沒有看到任何雜志是采用這樣的效果。用WebGL、CSS技術(shù)聯(lián)合起來(lái)，就可以開發(fā)出類似這樣的效果，這是過(guò)去沒有辦法做到的，現(xiàn)在可以在自己的網(wǎng)頁(yè)上加入這樣創(chuàng)新的應(yīng)用。
第二個(gè)我給大家講一下全世界正在推廣的全新開源的圖像壓縮技術(shù)，叫做WebP。開源的技術(shù)不受任何一家公司控制，圖像技術(shù)包括的圖像編碼、顯示、譯碼，最大的優(yōu)勢(shì)是降低了圖像存儲(chǔ)和傳輸?shù)呢?fù)載，讓網(wǎng)頁(yè)顯示速度更快、更絢麗。
目前網(wǎng)頁(yè)上用圖像的人越來(lái)越多了，這邊有統(tǒng)計(jì)，比如在普通的網(wǎng)頁(yè)上代碼是200K，圖像已經(jīng)達(dá)到800K，是代碼負(fù)載的4倍。在移動(dòng)設(shè)備商圖像的數(shù)量百分比更大，現(xiàn)在網(wǎng)頁(yè)上用超過(guò)500可到1個(gè)M的使用量在不斷上升。很多網(wǎng)站在網(wǎng)頁(yè)上的顯示速度非常慢，中國(guó)很多的網(wǎng)頁(yè)都是帶有這個(gè)問(wèn)題的。我們?cè)趺唇鉀Q這個(gè)問(wèn)題呢？WebP就可以解決這個(gè)問(wèn)題，開源技術(shù)可以讓圖像做更好的壓縮，可以提供有損、無(wú)損的壓縮，可以提供透明的功能，還有提供動(dòng)畫的功能，大大幫你降低應(yīng)用、游戲、下載的網(wǎng)絡(luò)使用負(fù)載，這很重要。同時(shí)讓顯示做到更好。
這邊有簡(jiǎn)單的壓縮的圖像比較，大家都知道用JPG，這兩張照片是WebP，是下面綠色的，上面紅色的是JPG，這是在國(guó)際上衡量圖像的精度跟傳輸?shù)呢?fù)載對(duì)比度，紅色的是JPG，只要我在某一個(gè)圖像顯示的質(zhì)量上，紅色的JPG所要到的負(fù)載都要比WebP要大。當(dāng)圖像質(zhì)量非常高的時(shí)候，90%的時(shí)候紅色的JPG所用的負(fù)載文檔的大小要超出WebGL幾乎近一倍。當(dāng)兩個(gè)圖像顯示效果差不多的時(shí)候如果用WebP最新的開放性的技術(shù)可以讓圖像壓縮得很小，這是一個(gè)很重要的理念。這邊有一個(gè)簡(jiǎn)單的比較演示，JPG跟WebP，用眼睛看效果看不出區(qū)別，但是看文檔的大小，WebP只有400多K，JPG有600K，WebP比JPG降低了30%以上。
剛剛是壓縮的，如果跟沒有壓縮的呢，無(wú)損耗的是這樣的，這兩張沒有損耗的圖片看起來(lái)是差不多的，但是JPG比WebP要大近30%以上，所以可以看出來(lái)WebP的優(yōu)勢(shì)是非常明確的。
這邊舉個(gè)簡(jiǎn)單的使用案例，在美國(guó)有個(gè)eBay，跟中國(guó)的淘寶是差不多的。他們用了WebP以后，在0.7的時(shí)候網(wǎng)頁(yè)上的照片幾乎掉完了，可以用JPG顯示速度就非常慢。中國(guó)有大量的網(wǎng)站，游戲網(wǎng)站、視頻網(wǎng)站主頁(yè)上全部是圖畫。而這樣的網(wǎng)站都用這樣圖畫來(lái)演示的話，如果用JPG的話顯示速度非常慢，可是用了WebP速度會(huì)大大提高。這個(gè)優(yōu)勢(shì)是非常明確的。WebP比用JPG的數(shù)量要降低了近1/3這是非常明確的優(yōu)勢(shì)。
移動(dòng)平臺(tái)上的優(yōu)勢(shì)更明顯了，如果手機(jī)上的應(yīng)用開發(fā)圖像顯示是用WebP的話，可以降低50%的流量，可以幫助客戶省錢，省流量。也可以幫助自己的應(yīng)用在別人的手機(jī)上，打開的時(shí)候顯示速度會(huì)快，使用的經(jīng)歷更流暢。
谷歌自己大量的產(chǎn)品、網(wǎng)上的業(yè)務(wù)全部往WebP轉(zhuǎn)了，有圖片顯示全部用WebP。以后全球這樣的技術(shù)會(huì)使用越來(lái)越多。
接下來(lái)講一個(gè)新的音頻技術(shù)，它的英文全稱是叫做Web Audio API，Web Audio API包括了好幾種功能，比如合成人工的聲音。同時(shí)你如果有已有的聲音可以用代碼做三維處理。同時(shí)內(nèi)核里面包含了路由器的功能，支持各種音響的效果，這邊給你們看一個(gè)演示。根據(jù)網(wǎng)絡(luò)的連接來(lái)試試看，這邊首先用英文的。你看很簡(jiǎn)單的代碼后面加上一個(gè)麥克風(fēng)，我這個(gè)筆記本的麥克風(fēng)說(shuō)話，他可以把我的說(shuō)話錄下來(lái)。這是非常明顯的語(yǔ)音識(shí)別，就是英文我說(shuō)了話以后立馬錄上，然后變成文字。然后用中文來(lái)做，中國(guó)互聯(lián)網(wǎng)大會(huì)。你們可以看到這個(gè)技術(shù)其實(shí)是很明顯的。如果如果把語(yǔ)音的識(shí)別加入到網(wǎng)頁(yè)上可以做大量的創(chuàng)新。
這邊還可以直接進(jìn)行翻譯，這個(gè)API里面自己開發(fā)一個(gè)翻譯器，通過(guò)API把數(shù)據(jù)流所得到的語(yǔ)音識(shí)別的設(shè)計(jì)流可以進(jìn)行再次的處理。比如說(shuō)是英文的，還是我剛剛說(shuō)的話。你說(shuō)把這個(gè)立即變成中文，通過(guò)進(jìn)行翻譯的API可以不可以做到這個(gè)？沒有問(wèn)題。我這邊選擇說(shuō)中文，說(shuō)英文會(huì)不會(huì)出現(xiàn)中文。這個(gè)是非常簡(jiǎn)單的應(yīng)用，你們可以看到類似的，可以幫助我們做各種多語(yǔ)言的開發(fā)，在應(yīng)用上可以做到很多酷的東西。
谷歌公司本身在搜索上都加入了這樣的功能，比方說(shuō)這是一個(gè)中文的網(wǎng)站，我可以對(duì)它說(shuō)話。北京天氣預(yù)報(bào)，谷歌的搜索會(huì)立即根據(jù)我所說(shuō)的話把它變成相應(yīng)的信息，在我們的搜索頁(yè)面上體現(xiàn)出來(lái)。我還可以說(shuō)北京國(guó)際會(huì)議中心圖片，谷歌的搜索非常厲害，不用打字，我只要對(duì)它說(shuō)話就可以做到。怎么達(dá)到這個(gè)效果呢？其實(shí)就是我剛剛講到的Web Audio API的技術(shù)。
這邊看一下怎么樣人工來(lái)處理、人工生成聲音，這是一個(gè)網(wǎng)頁(yè)，國(guó)際上一個(gè)開發(fā)者做的。一個(gè)電子的鼓，我可以在上面打鼓，還可以放事先編好的一套聲音的效果。這個(gè)效果不是一個(gè)錄音，我可以立即對(duì)它進(jìn)行速度的改變，或者說(shuō)把速度變慢。或者我可以選不同的樂(lè)器，這個(gè)就是Web Audio API強(qiáng)大的功能，可以讓你做大量創(chuàng)新的服務(wù)，非常厲害。
下面講一下新的視頻的解碼技術(shù)，非常重要的WebM，在開源的技術(shù)上跟很多國(guó)際公司聯(lián)合起來(lái)開發(fā)的技術(shù)，叫做VP9。是讓你做到高清晰視頻顯示，同時(shí)讓負(fù)載大大降低的技術(shù)。它包含了各種的解碼和壓縮的技術(shù)，之外還加上了專門的音頻，用了開源的音頻技術(shù)，這個(gè)Vorbis和Opus是音頻技術(shù)。同時(shí)用開源的技術(shù)把視頻流包裝起來(lái)拿來(lái)做使用。
這邊看一下簡(jiǎn)單的比較，VP9的優(yōu)勢(shì)是第一次開源的，完全沒有版稅，是免費(fèi)使用的。比質(zhì)量最好的高清視頻，現(xiàn)在在世界上用的最多的是H.264，這是被大家認(rèn)為最好的高清視頻，但是跟VP9相比還是差那么一點(diǎn)。等一下看我們看視頻的比較，這兩個(gè)照片在放視頻的時(shí)候所做的截屏，在數(shù)據(jù)流達(dá)到的速度在200多K的效果之下，VP9在左邊和右邊的H.264可以看到，H.264明顯差很多，臉上一塊一塊的斑可以看到，VP9有非常精細(xì)的效果。這邊是解碼的，如果H.264顯示到最高的沒有壓縮的高質(zhì)量的情況下跟VP9比是怎么樣的呢？這個(gè)是左邊、右邊看起來(lái)都很清晰，但是可以看一下用H.264的負(fù)載，右邊的尺寸要大很多，這邊不停地向我舉牌子。
VP9的優(yōu)勢(shì)是很大的，這邊用國(guó)際上衡量視頻質(zhì)量的圖表，可以看一下在任何負(fù)載的情況下紅色的線是VP9，質(zhì)量都要高。如果衡量相比，在同樣的質(zhì)量情況下，H.264的質(zhì)量就要低，在同樣數(shù)據(jù)率的情況下，所以優(yōu)勢(shì)是非常明顯。在YouTube上全世界范圍內(nèi)很多人把視頻用VP9的形式發(fā)布了。
簡(jiǎn)單總結(jié)一下把視頻用VP9來(lái)發(fā)布可以提高視頻的質(zhì)量，可以節(jié)省屏寬最多達(dá)到50%，這個(gè)優(yōu)勢(shì)是非常明顯的。接下來(lái)有一位老總是來(lái)自PPTV的陶闖(微博)，原來(lái)還是在微軟的老朋友。像PPTV這樣的企業(yè)，陶總回去應(yīng)該用這個(gè)。
最后講一下我們多媒體的實(shí)時(shí)通訊技術(shù)，叫WebRTC，可以進(jìn)行多種數(shù)據(jù)的船順，是國(guó)際上多個(gè)標(biāo)準(zhǔn)做的技術(shù)，支持音頻、數(shù)據(jù)、任意數(shù)據(jù)兩點(diǎn)之間的實(shí)時(shí)通訊?？梢园ㄓ螒蛟趦?nèi)的應(yīng)用來(lái)使用。主要有幾個(gè)功能，第一是多媒體數(shù)據(jù)流，第二點(diǎn)點(diǎn)對(duì)點(diǎn)設(shè)備的多媒體數(shù)據(jù)的傳輸。
這邊一張頁(yè)面，他說(shuō)要用你筆記本上的照相機(jī)，我說(shuō)沒有問(wèn)題，他就開始拍照。這是利用照相機(jī)上的數(shù)據(jù)流立即顯示在網(wǎng)頁(yè)上，通過(guò)頁(yè)面上的應(yīng)用跟后面的服務(wù)端聯(lián)合起來(lái)達(dá)到這樣的效果。可能你會(huì)說(shuō)這有什么稀奇，這只是一個(gè)照片。你可以看到這樣的效果，同樣的照片、同樣的數(shù)據(jù)流可以加上代碼，可以進(jìn)行處理。可以根據(jù)深度、濃度的情況加上字母，可以達(dá)到這樣的效果，這是非常炫、非?？岬奶幚?。你可以用類似的功能做開發(fā)。
這邊是另外一個(gè)技術(shù)，也是同樣的。我進(jìn)行了拍照以后，我剛剛講到可以用過(guò)濾器可以來(lái)處理，我可以變成單色的，可以拍照。數(shù)據(jù)量點(diǎn)之間設(shè)兩個(gè)不同的應(yīng)用，我可以改成不同的顏色倒過(guò)來(lái)，也可以變成模糊的，照成這樣的效果，你可以在這方面做創(chuàng)新的機(jī)會(huì)就非常多了。
國(guó)際上有沒有人拿這個(gè)東西做東西呢？有，我給你們看一個(gè)。首先這是一個(gè)游戲，它利用我的筆記本電腦，我人在里面動(dòng)，有一個(gè)十字的頭，用照相機(jī)照著我的頭。天象有好多勢(shì)頭，天上的流行飛過(guò)來(lái)。我可以通過(guò)照相機(jī)的頭來(lái)躲避石頭。但是你們可以看出來(lái)這樣一類的應(yīng)用通過(guò)數(shù)據(jù)流做開發(fā)，機(jī)會(huì)是非常多的。
另外一個(gè)例子，國(guó)際上的開發(fā)者就我剛剛講到的CSS3的過(guò)濾器所進(jìn)行的開發(fā)，然后用我的客戶端設(shè)備開發(fā)的話，我可以說(shuō)普通的照片可以變成這樣的效果，可以變成左右、倒過(guò)來(lái)的，可以變成不同形式的。拍照的效果立即可以在網(wǎng)上，你可以給你的客戶提供這樣的效果，可以選擇有很多可以方式來(lái)進(jìn)行處理。這樣一類的技術(shù)給我們進(jìn)行創(chuàng)新是非常大的創(chuàng)新機(jī)會(huì)。
因?yàn)闀r(shí)間關(guān)系，我這邊就不講了，在Chrome里面做開發(fā)，本來(lái)想做一些演示，特別是想拿一些網(wǎng)頁(yè)做分析。在Chrome瀏覽器中間你可以用來(lái)進(jìn)行分析，你的網(wǎng)頁(yè)運(yùn)營(yíng)的時(shí)間，對(duì)資料的損耗、對(duì)資源的損耗，對(duì)你的速度分析，網(wǎng)頁(yè)被調(diào)動(dòng)速度的分析，對(duì)內(nèi)存儲(chǔ)的分析，所有的這些在Chrome瀏覽器的工具里面都可以做到。
最后跳過(guò)去講最后一個(gè)話題，在中國(guó)可以做到創(chuàng)新，可以學(xué)會(huì)國(guó)際上拿很多公開公正的數(shù)據(jù)，不是屬于任何個(gè)人的，也不帶有隱私的數(shù)據(jù)。比如說(shuō)天氣預(yù)報(bào)、船的位置、車的位置，我們可以用它來(lái)進(jìn)行大量的應(yīng)用開發(fā)。不光是幫助老百姓帶來(lái)方便，也可以帶來(lái)工具，給企業(yè)、決策部門帶來(lái)工具，這是開發(fā)者具有的非常大的創(chuàng)新機(jī)會(huì)。
這邊看一下國(guó)際上大家所做的類似開發(fā)，這張地圖是國(guó)際上的開發(fā)者用的谷歌地圖開發(fā)的全球的傳染病病例實(shí)時(shí)的地圖。比方說(shuō)中國(guó)北京地區(qū)就有人生病，8月10號(hào)、8月8號(hào)、8.7號(hào)三個(gè)病例出現(xiàn)了，全世界有很多。所有的中國(guó)人都首先會(huì)想到，包括你本人去國(guó)外旅行，你首先看一下這個(gè)地方有沒有傳染病，要不然過(guò)去是送命的，這樣的應(yīng)用對(duì)老百姓的幫助是極大的。最關(guān)鍵的理念是用國(guó)際上公開的公共數(shù)據(jù)，比方說(shuō)國(guó)際衛(wèi)生組織和中國(guó)報(bào)刊上發(fā)布的信息，可以做到這樣的應(yīng)用，和谷歌地圖聯(lián)合起來(lái)做這樣的應(yīng)用。這樣的應(yīng)用開發(fā)機(jī)會(huì)是巨多的。
另外像美國(guó)的人口普查，這是在美國(guó)的紐約洲，別的公司做的開發(fā)，任意點(diǎn)開某一個(gè)縣會(huì)告訴你人口的增長(zhǎng)量，每個(gè)地區(qū)的百分比是多少。這樣分析一個(gè)地區(qū)的人口，也可以幫助企業(yè)去分析群體，在中國(guó)每個(gè)地區(qū)的分布，這才是真正的大數(shù)據(jù)的應(yīng)用，我們做的應(yīng)該是類似的東西，為我們業(yè)界帶來(lái)真正實(shí)際應(yīng)用的開發(fā)。
像在美國(guó)加州大家對(duì)天氣比較感興趣，或者對(duì)環(huán)境保護(hù)比較注重，美國(guó)的加州政府公布了很多氣溫的消息。他們就開發(fā)了網(wǎng)頁(yè)，利用谷歌的技術(shù)可以顯示整個(gè)加州地區(qū)氣溫的變化。這樣一類的信息非常好地可視化，可以幫助政府的決策機(jī)構(gòu)在決定哪里要減排放，哪里要進(jìn)行投資，哪里要進(jìn)行生態(tài)環(huán)境的保護(hù)，其實(shí)是非常重要的。我們中國(guó)還缺少類似這樣的應(yīng)用，希望大家可以看到這些可以為中國(guó)去多做一些開發(fā)的應(yīng)用。谷歌地圖剛剛講到了，國(guó)際上的開發(fā)者們用了谷歌地圖開發(fā)了美國(guó)的風(fēng)速圖，利用刮風(fēng)的信息把全美國(guó)的刮風(fēng)信息顯示出來(lái)，當(dāng)直升飛機(jī)去救火的時(shí)候可以知道在哪個(gè)方向去撒水，這個(gè)可以幫助政府在很多情況下有很大的幫助作用。
這個(gè)是利用谷歌地圖新型的矢量技術(shù)的顯示，顯示美國(guó)的沃爾瑪。這一群開發(fā)者好事，覺得美國(guó)的沃爾瑪自從60年代開始到處都是，把小商場(chǎng)都?xì)⒌袅耍莻€(gè)壟斷性的，就做了這樣一個(gè)宣傳。在中國(guó)也是類似的，遍地開商場(chǎng)。這是一個(gè)非常好的動(dòng)態(tài)歷史來(lái)描述沃爾瑪在全美國(guó)的發(fā)展歷史，右下角有年份，到九十年代發(fā)展到美國(guó)西部去。這樣一類的信息的數(shù)據(jù)處理對(duì)于我們的創(chuàng)新其實(shí)是很重要的，我們應(yīng)該學(xué)習(xí)類似的理念，用類似的信息去開發(fā)出很多類似的信息來(lái)。
航班，利用谷歌地圖做的自動(dòng)化的航班地圖，在國(guó)際上用這樣的技術(shù)做了類似的開發(fā)，在互聯(lián)網(wǎng)上可以查到我們的平臺(tái)節(jié)給家提供創(chuàng)新的技術(shù)。
最后講一下谷歌開發(fā)者的資源，包括在全球和中國(guó)提供的資源，這個(gè)網(wǎng)站非常容易記，開發(fā)者Developers.Google.com，我剛剛提的技術(shù)都向全世界進(jìn)行開發(fā)做宣傳，大量分享視頻技術(shù)的課程，有實(shí)況人在里面講課，可以在里面對(duì)話，在網(wǎng)上做視頻的方式跟大家進(jìn)行交流。在中國(guó)、全世界開發(fā)谷歌開發(fā)者社區(qū)，在過(guò)去6個(gè)月中間舉辦了2000多場(chǎng)的分享活動(dòng)。在中國(guó)也有巨大的這樣的社區(qū)。
歡迎你們來(lái)參加我們?nèi)珖?guó)GDC的大家庭！我們?cè)谥袊?guó)已經(jīng)有15個(gè)城市，包括在新疆、烏魯木齊，接下來(lái)還有近10多個(gè)城市都派著隊(duì)要成立，不知道你們有多少是來(lái)自于北京或全國(guó)各地的如你們城市還沒有谷歌社區(qū)，希望你們來(lái)聯(lián)系我。要想學(xué)習(xí)最新的技術(shù)就去參加這樣的社區(qū)，保持你跟世界接軌，保持你跟最新的技術(shù)保持連接。
簡(jiǎn)單總結(jié)，我就不多說(shuō)了，就是說(shuō)我們大家一起來(lái)盡量推動(dòng)和使用開源的技術(shù)、開放的技術(shù)，把中國(guó)的互聯(lián)網(wǎng)創(chuàng)新帶到下一步新的階梯，謝謝大家！向陶總抱歉，占用你的時(shí)間了。
|
.png){kind=small}
浙公網(wǎng)安備 33038102330897號(hào)