HTML 5:足以改變我們未來生活的十項提示

51cto發表於2015-07-15

  HTML5代表著Web發展的未來方向。無論大家身為開發人員還是高階使用者,關於這一Web程式設計新基礎的種種態勢都值得各位高度關注。

(Image: HTML5 logo and wordmark by W3C. Licensed under CC BY 3.0 via Wikimedia Commons.)

  如果大家還沒有意識到,那我們先要強調一句——Web世界已經徹底改變了。時至今日,網路銀行、實時視訊聊天以及短視訊共享已經成為Web領域的立足根基,而接下來還將有更多極具突破性的趨勢及成果不斷湧現。正因為如此,這一根基才需要迎接進一步升級。

  超文字標記語言(簡稱HTML)正是瀏覽器所使用的語言。作為原本立足於面向文件的標準通用標記語言(簡稱SGML)的衍生產物,HTML在其早期的四個版本中只需要滿足最初學術性使用者對於Web功能的需求。但隨著使用者對於各類功能的進一步渴望——從安全加密傳輸到視訊媒體——API、SDK、外掛庫以及外部應用程式全部被融入到了HTML當中,從而在最大程度上迎合個人及企業使用者對Web提出的要求。因此2004年,Web超文字應用技術工作組(簡稱WHATWG)開始著手構建一套新的HTML版本,這就是HTML 5。

  2014年10月28日,全球資訊網聯盟(簡稱W3C)——此前曾聯手WHATWG共同開發出相關標準——釋出了作為穩定推薦版本的HTML 5方案,換言之這套方案已經“徹底完成”。現在我們已經能夠立足於自身系統,充分享受由HTML 5所帶來的種種便利。

  但這些便利具體包括什麼呢?實際效果可能取決於大家到底身為開發人員抑或是普通使用者。對於開發人員而言,HTML 5能夠顯著簡化大家的日常工作——相較於HTML 4.1及以下版本而言,這是因為後者包含大量我們早已棄之不用的外掛及額外內容。這絕對是件好事,不過從短期角度出發,我們仍然需要考量其它一些後續問題。

  對使用者來說,日常生活則會得到簡化,這是因為由上述外掛所帶來的安全漏洞及相容性問題將不復存在,因此我們再也用不著為了正常瀏覽網路內容而積累豐富的安全經驗。此外,瀏覽器的使用體驗也將被擴充到更多裝置平臺之上,這將使得桌面裝置與移動裝置擁有更為統一的觀看感受。誰不喜歡這樣呢,對吧?

  值得著重強調的是,HTML 5是一套尚處於早期發展階段的標準。這意味著其前進道路上還將迎來多次飛躍,並將沿途帶來諸多驚喜。正是考慮到這一點,我們認為它能夠切實幫助整個業界以新的方式完成Web頁面的構建工作。

  如果大家本身正是HTML 5程式設計人員,那麼前面提到的內容對您來說肯定屬於陳詞濫調了——而且大家當然也會希望能從我們這得到點更加新鮮有料的訊息。希望各位能在評論欄中闡述您的體會與規劃,相信這一切都將成為HTML 5向HTML 5.1進化的重要資訊依託(這一升級將從明年正式開始)。好了,閒言少敘,我們們馬上進入正題。

  HTML5是一種新型語言

HTML5 Is A New Language
From HTML to HTML4.2, every iteration of HTML was based on SGML, a document description language developed by IBM in the 1960s. While the language evolved and grew, it had a consistent basis. That's no longer the case. HTML5 is a whole new language that's not based on SGML. For Web users this will have no impact at all -- most have never heard of SGML and wouldn't know what to do with HTML if it bit them on the hand. For developers, though, it means that a lot of the 'muscle memory' regarding common tags and features will have to be re-learned. That's not necessarily a bad thing, but it is something to keep in mind as you're thinking about schedules and deadlines.
The good news is that HTML5 is backward-compatible with earlier versions of HTML, so code developed last year should continue to make pages appear this year. That's great for continuity, but we know from experience that some organizations will use this to be lazy. Don't do that: Move beyond cut-and-paste and develop your new HTML5 code from scratch. You'll be glad you did.
(Image: Dreftymac via Wikimedia Commons, CC BY-SA 2.5, modified by Curtis Franklin, Jr., for InformationWeek)

  從HTML到HTML 4.2,HTML的每一次迭代都以SGML為基礎——也就是由IBM公司在上世紀六十年代開發出的這款文件描述語言。儘管HTML一直在不斷髮展演進,但其最為根本的出發點始終保持不變。然而如今這一情況得到了扭轉。HTML 5是一種全新語言,不再立足於SGML。對於Web使用者來說,這不會對他們的正常使用產生任何影響——大部分普通使用者可能根本沒聽說過SGML,也不知道以此為基礎會對HTML產生怎樣的影響。不過對於開發人員而言,這意味著多年來在常用標籤以及功能領域建立起的“肌肉記憶”需要再次更新甚至從頭學習。這倒並不一定是件壞事,不過請各位記住,我們必須要在最後期限之前完成適應與學習,否則就會被歷史的洪流所吞沒。

  好訊息是,HTML 5仍然能夠向下相容其它早期HTML版本,因此去年才剛剛開始的程式碼編寫工作仍然能夠在今年提供正常的頁面顯示效果。這種延續性確實值得稱道,不過根據經驗,我們可以想見會有不少企業由於懶得升級而繼續停滯不前。千萬別這麼做:不要再依賴於剪下加貼上了,請從頭開始重新開發新的HTML 5程式碼。事實最終會證明,這才是最明智的應對之道。

  我們需要一款新的瀏覽器

You'll Need A New Browser
Remember when we said that HTML5 is backward-compatible? That's true. What's not true is that browsers built for HTML4 are forward-compatible with HTML5. If your organization has standardized on an earlier version of a particular browser (and yes, all you groups that insist on an old version of Internet Explorer, we're looking at you), then HTML5 is the clarion call notifying you that it's time to upgrade.
The current versions of all major browsers support HTML5. They're also safer and more reliable than the older versions. Start planning now.
(Image: geralt via Pixabay)

  還記得我們剛剛提到過的HTML 5向下相容能力吧?這種相容能力的確存在,但需要注意的是,面向HTML 4以及更早版本打造的瀏覽器方案將無法與HTML 5順利對接。如果大家所在的企業一直將某套早期特定瀏覽器版本作為標準(沒錯,那些仍然在堅持使用IE瀏覽器早期版本的朋友,批評的就是你),那麼HTML 5已經發出了衝鋒的號角——是時候馬上動手推動升級工作了。

  目前的各大主流瀏覽器版本都支援HTML 5。它們在安全水平與可靠性方面也要比早期版本好得多。所以馬上作出規劃,別再坐以待斃啦!

  新的瀏覽器折衷途徑

New Browser Workaround
OK, so if you (or your CIO) are going to be really stubborn about the whole 'new browser' thing, there's a kludgy way to get around the requirement. You can define HTML5 code as block elements in your older HTML code and insert HTML5 elements there. It will work, and might even work well. But you won't feel good about yourself.
If there's some legitimate reason that you absolutely cannot upgrade to a current browser then this could work, unless...
You're stuck on a version of Internet Explorer prior to IE8. Then you have a problem, because Microsoft didn't allow you to define unknown code in a style. There's a Javascript workaround (search on 'HTML5' and 'the shiv') but you're starting to stack kludge on kludge and we know how well that tends to work out, don't we?
(Image: geralt via Pixabay)

  好的,如果您(或者您所在企業的CIO)對於採用“全新瀏覽器”始終保持固執的態度,那麼我們們也可以通過折衷的辦法加以解決。大家可以在早期HTML程式碼當中將HTML 5程式碼定義為塊元素,並將HTML 5元素插入其中。這確實能夠奏效,甚至效果還相當不錯。但我敢肯定,大家自己對此不會太滿意。

  只要有合理的原因作為依託,大家完全可以通過以上方式暫解燃眉之急——無需升級即可擁抱HTML 5,簡直機智!除非……

  大家仍然堅持使用IE 8之前的陳舊瀏覽器版本。在這種情況下,各位一定會遇到麻煩,因為微軟公司並不允許我們在樣式當中定義未知程式碼。在這種情況下,JavaScript也能夠起到折衷的作用(大家在搜尋引擎中輸入‘HTML 5’再加上‘the siv’即可),但這無疑會讓問題更為複雜,而且我們都知道最終會帶來怎樣的結果——對吧?

  視訊播放更加輕鬆

Video Is A Lot Easier
Making video happen in HTML4 is something of a pain. It's not that no one knows how to do it. It's that there are several possible methods, none of which come from the language itself. It's all about the plug-in. This has worked, most of the time, but all of us have seen the various sad-face computer icons that tell us one plug-in or another has crashed, needs to be updated, or isn't available.
HTML5 avoids all of that because video is a media type defined within the language itself. Want to include a video on your page? It's as simple in HTML5 as including a static image is in HTML4. If you've ever spent time wrestling with the inclusion code for a custom video player, you'll likely weep with joy the first time you write a video page in HTML5. And for users, those cute cat videos became much more reliable.
Now, there are still a few wrinkles: Not all browsers offer identical support for all video media types. In general, though, if you stick with the new WebM video format you should be fine.
(Image: geralt via Pixabay)

  在HTML 4上實現視訊播放實在令人有些抓狂。這並不是說大家不知道該如何解決,但最糟糕的是僅有的幾種可能性解決辦法沒有一樣能夠依靠語言本身來完成。換言之,所有工作都得依託於外掛。雖然在大多數情況下,我們最終也能得到預期的效果,但相信每位朋友——無論是開發人員還是普通使用者——都曾在瀏覽器上看到由視訊引發的沮喪小臉圖示,這代表著某款外掛出了問題、需要更新或者暫時不可用。

  HTML 5能夠避免上述所有問題,因為現在視訊能夠作為媒體型別在語言內部直接加以定義。打算在自己的頁面當中引入一段視訊?在HTML 5中完成這項工作,其難度跟在HTML 4中插入一幅靜態圖片差不多。如果大家曾經花過大量時間研究如何向可定製視訊播放器裡新增程式碼,那麼如今輕鬆易行的HTML 5視訊頁面編寫方式絕對能讓您長出一口惡氣。而對於普通使用者來說,這些可愛的短視訊內容也將擁有更為穩定的播放效果。

  現在HTML 5面對的幾個主要問題是:並不是所有瀏覽器都能夠為任何視訊媒體型別提供支援。不過總體而言,只要大家堅持使用新的WebM視訊格式,那麼整個開發流程應該不會遇到任何阻礙。

  動畫已被包含於其中

Animation Is Included
How many of you remember having to learn Flash in order to do cool animated effects on your Web page? If you didn't learn Flash, you worked with a designer who inserted blocks of magical mystery code into your otherwise very solid page. Those days are over, and pretty much everyone (including Adobe) seems happy about it.
HTML5 includes all the features you need to build animation into your page. You can even do advanced 3D animation without having to resort to any external code. That's very cool. It's also far more secure and reliable than earlier methods, and we all know that we love security and reliability almost as much as we love a dancing carrot that comes to show us which button we should choose next.
Another benefit: You no longer have to think about which device your page will display on. Any browser that supports HTML5 on any device will show your nifty animation just fine.
(Image: ClkerFreeVectorImages via Pixabay)

  不知道還有多少朋友記得自己為了在Web頁面當中加入酷炫的動畫效果而被迫學習Flash?如果大家沒有接觸過Flash,那就必須得跟專門的設計人員進行配合——後者會在原本穩定的頁面當中加入大段神祕程式碼,而這有可能引發各類潛在問題。不過痛苦的時光已經過去,如今幾乎每個人(包括Adobe公司在內)都對HTML 5的新能力感到振奮。

  HTML 5當中包含有我們在頁面內建立動畫效果時所需要的全部功能。大家甚至可以在無需引入任何外部程式碼的前提下實現複雜的3D動畫,這一點非常值得稱道。此外,與早先的實現方式相比,如今的內建功能也把安全性與可靠性水平推向了新的高度。很顯然,對於每一位開發人員來說,安全性與可靠性都跟開發成果的自身品質緊密相關。

  另一大進步:我們用不著再考慮自己的頁面會顯示在哪些裝置之上了。任何一款支援HTML 5的瀏覽器都能在全部裝置上正常顯示各位精心設計出的動畫效果。

  視訊通話全面來臨

Video Calling Is Coming
Animation is very cool, but browser-based video calling and collaboration through a protocol called WebRTC (Web Real-Time Communications) could be a serious game changer. While not strictly a part of the HTML5 protocol, HTML5 browsers have the capability to take advantage of WebRTC in a serious way.
Imagine building a video-conferencing feature for your Web site with three lines of code. You can do that with WebRTC. It's seriously cool. It's also fairly new, so some issues are still being resolved. One of them has been a security flaw that compromised some VPNs. Another is the fact that WebRTC is a point-to-point system -- the calls don't have to go through a central server. That's great for reducing data center overhead, but the effect on overall network traffic isn't yet known. It could be trivial, or it could blow previous network planning models out of the water.
The issues will almost certainly be resolved because WebRTC seems just too darned useful to ignore. Add it to your HTML5 coding repertoire, and collaboration and customer support could both shift into a much higher gear.
(Image: PublicDomainPictures via Pixabay)

  動畫效果當然很酷,不過基於瀏覽器的視訊通話與協作模式如今亦可通過名為WebRTC(即Web實時通訊)的協議得到實現——這幾乎從根本上改變了遊戲規則。儘管並不嚴格隸屬於HTML 5協議範疇,但HTML 5瀏覽器確實能夠發揮WebRTC所帶來的功能優勢。

  想象一下,只需要三行程式碼即可為自己的網站帶來視訊會議功能——這是多麼令人振奮的目標。不是做夢,現在我們已經可以通過WebRTC實現這一點。不過由於尚處於早期發展階段,WebRTC仍然存在幾個尚未解決的問題。首先就是其中的一項安全漏洞有可能影響到某些VPN。另外就是,WebRTC實際上是一套點到點系統——其呼叫不一定需要經由中央伺服器。雖然這樣的設計能夠有效降低資料中心的實際負荷,但卻有可能給全域性網路流量帶來難以控制的影響。這要麼會帶來大量小型資料流,要麼會讓未考慮到此類狀況的網路規劃模型面臨沉重的傳輸負擔。

  但這個問題幾乎肯定能夠得到解決,因為WebRTC極具現實意義,業界根本不可能忽略其核心價值之上的這一點點瑕疵。將其引入HTML 5程式碼庫,協作與客戶支援工作將成為Web開發當中毫不費力即可完成的任務。

  古董級語言仍能正常起效

Old Languages Still Work ...
... and you'll still need them. From Javascript to Python, there are tools that you'll still need to use for getting into databases, figuring out complex actions and processes, and manipulating devices in the real world. They all still work with HTML5 and you'll be glad they do. Now, you'll want to carefully check the tags around their inclusion because they almost certainly have changed, but you'll be able to make it all work.
The same isn't true for a lot of the browser plug-ins and add-ons you've used in the past, especially those that deal with rich media. The odds are good that HTML5 deals with all your media types natively, so you can jettison a lot of the included blocks you've come to know and loathe.
(Image: geralt via Pixabay)

  .……而且我們也需要這樣的結果。從JavaScript到Python,我們仍然需要使用這些工具來接入資料庫、完成複雜的操作與處理流程、並對現實世界中的裝置進行操控。它們也依舊能與HTML 5順暢協作,從而繼續為廣大開發人員及普通使用者效力。現在,我們需要對與這些語言相關的標籤進行認真核對——因為大部分標籤都在HTML 5當中經過了修改。但歸根結底,它們仍然有效。

  不過大部分瀏覽器外掛以及我們過去已經習慣的外部工具就沒那麼好運了,特別是那些負責處理富媒體物件的方案。好訊息是,HTML 5如今單靠自身就能實現全部媒體型別的原生處理,因此大家也將因此節約下可觀的時間與精力。

  裝置平臺差異仍然不容忽視

http://s1.51cto.com/wyfs02/M01/6F/B3/wKiom1Wlu6zh0Y2jAAAnZcLAFEs977.jpg

  如果能夠宣佈HTML 5已然解決了由不同螢幕尺寸以及功能差異所帶來的各類問題,我們當然會為之振奮——但遺憾的是,實際情況並非如此。雖然我們已經能夠以前所未有的方式在不同裝置之間順暢往來,但開發人員仍然無法保證自己在桌上型電腦螢幕上設計出的頁面成果同樣能在智慧手機上擁有良好表現。不同瀏覽器與裝置平臺之間存在著巨大差異,特別是在HTML 5相容水平方面。頁面將依舊需要查詢瀏覽器及裝置型別,而後再載入對應的方案及版本。對不起,現實就是這麼殘酷……

  HTML5全面針對移動裝置

HTML5 Is All About Mobile
With everything said about the fact that you still have to care about which device is used to view a page, HTML5 is a language that acknowledges the fact that the world is moving to mobile. With HTML5, you don't treat mobile devices as strange second-class citizens -- you write dynamic code that assumes that some sort of mobile screen is where your page will display.
The good news is that everything you build into the page, from video to animation, to dynamically sized elements, should display well, even if there are occasional oddities in how sizes display on some devices.
The takeaway? Don't discard your fleet of test devices just yet, but don't assume that your big 27-inch monitor is representative of how everyone will be viewing your page. As Steve Martin famously said, 'Let's get small.'
(Image: YS-Park via Pixabay)

  前面剛剛提到,我們仍然需要認真思考使用者在檢視頁面時實際使用的裝置型別。而作為老牌語言家族的新成員,HTML 5當然也很清楚如今世界正逐步向移動平臺傾斜。有了HTML 5,大家用不著再將移動裝置當成是被全面閹割過的二等公民——我們完全可以編寫動態程式碼,並使其在相當一部分移動裝置的螢幕之上得到正常顯示。

  好訊息是,我們向頁面當中新增的全部要素,從視訊到動畫再到動態尺寸元素,在理論上都能夠得到良好顯示——即使某些裝置上的顯示尺寸偶爾有些奇怪。

  那麼最終結論是什麼?別忙著拋棄自己的裝置測試流程,也別想當然地認為每個人都會像我們們自己一樣,在27寸顯示器上檢視Web頁面。正如Steve Martin的經典語錄,“讓我們從小處著手。”

  HTML5相當複雜,但這是件好事

HTML5 Is Complicated And That's Good
Compared to HTML4, or even Flash, HTML5 can be complicated and seem non-intuitive. That's good, because it means HTML5 has the power and functions to be the sort of page-description language your organization needs for complex, powerful browser-based applications. That's really the right way to think about it -- as an application language rather than merely a page-description language.
There are hundreds of facilities available online to help you learn HTML5, and plenty of professional education organizations ready to help. Start now -- HTML5 defines the future of the Web as thoroughly as it defines the pages of your site.
Are you already using HTML5? Have you begun to learn the language? We'd love to hear about your experiences. Tell us what you think, and share thoughts on its strengths and weaknesses, in the comments section below.
(Image: geralt via Pixabay)

  相較於HTML 4甚至是Flash,HTML 5都顯得有些複雜甚至不易親近。但這是件好事,因為這意味著HTML 5擁有充足的力量與功能,足以成為企業客戶在構建基於瀏覽器的複雜而強大的應用程式時所需依靠的頁面描述語言。這才是看待HTML 5的正確方式——它更像是一種應用程式語言,而非單純的頁面描述語言。

  目前網路上有成百上千個相關站點,能夠幫助大家學習HTML 5的對應知識,另有大量專業培訓機構也為我們準備了理想的教程方案。從現在開始,HTML 5開始定義Web的未來發展方向,正如HTML當初定義網站頁面之時一樣。

  大家是否已經準備好迎接HTML 5的降臨了?您是否已經開始學習這一新型語言?希望各位能在評論欄中談談自己的情況。您的所見所想,包括您對於HTML 5的評價——無論好壞——都將極具參考價值。

  原文標題:HTML5: 10 Tips That Will Change Your Life

相關文章