DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> WEB網站前端 >> 關於網頁技巧 >> Web Apps的絕佳案例:Web Apps的特性
Web Apps的絕佳案例:Web Apps的特性
編輯:關於網頁技巧     

很多人向我問起學習HTML5技術的權威入門資料,我總是毫不猶豫地推薦由Google推出的HTML5rocks,這個網站就像一個寶庫,包含經典的教程、文章、Demo和代碼。近日 Chrome小組又推出了一個很酷的Web App電子書,講述了Chrome開發人員對Web Apps的思考和最佳實踐,推薦每個關注Web Apps的開發者閱讀。Web AppTrend為方便國內開發者浏覽,將全文進行翻譯。

注:這本書就是一個Web Apps的絕佳案例,據開發小組的人介紹, 該電子書Web App使用了很多CSS3 特性例如 box-shadow, opacity, multiple backgrounds以做出豐富的交互體驗,用到了AppCache和其他URL重寫技術,沒有用到一行服務端代碼;使用了HTML5 history API來保持應用狀態。

以下為第一章內容,清楚闡述了很多人非常困惑的Web Apps概念問題。

從今天起,我們將逐步發布《Web應用領域指南》,敬請期待。

人們對應用的需求是非常強烈的,它無處不在!這個綜合性的指南將提供給你一些構建現代web應用所需的技術以及慣例的介紹。這一領域指南旨在幫助你在web應用中創建良好的用戶體驗。無論你是初次構建web應用,還是在尋找提升已有應用的方法,這一指南都能幫到你!

祝福你所有的努力。

未來向著應用邁進吧!

Web Apps的變革

HTML5讓開發者能打破以往構建web應用時所受的限制

還在不久以前,web只是用來做“搜索”的;它主要的功能就是提供信息。要執行任務,用戶要購買並安裝軟件到他們的電腦桌面。了解你的web apps的關鍵是了解技術是如何影響了web apps的變革,現在,即使web apps不能比桌面應用提供更多,但它至少可以做得和桌面應用一樣多了。

異步web apps已經改變了用戶的交互

早期的web頁面內容是靜態的,現在一切都發生了根本的改變。頁面是動態加載或改變的,而不是一次性展現所有內容。

新的語言標准提供了更豐富的用戶體驗

在現代浏覽器沒有支持HTML5之前,構建web應用所需要的特性是變化的,並且常常需要使用像Flash、ActiveX這樣的插件或 Java。新的開放平台標准,比如CSS3, HTML5以及JavaScript確保開發者能擁有足夠的工具和性能構建比以往更漂亮的交互性更強的web應用。

Figure 1.1 – 新技術加強了我們的能力!

Web Apps的未來

你應該在你的web apps中使用可用的一切技術

Web app的批評者很快指出了一個主要的缺點——web app的用戶需要聯網才能完成任務。假如網絡不是隨時隨地都有的話,用戶是不能完全依賴web應用來完成他們的工作的。至少這樣的假設是成立的。

Web apps的未來發展如何取決於它是否有足夠的靈活性——既擁有在web上完成任務的一切優點,又能在離線的時候完成這些任務。支持離線應用現在已經是可以實現的了——HTML5提供了例如應用緩存和客戶端存儲(比如,本地存儲,索引數據庫)等性能,這樣你的應用就能在沒有網絡聯接的時候也可以工作了。

雲能比桌面給用戶提供更多

雲提供商提供了一個平台,在這個平台上,服務器端的功能可以被托管和共享。使用托管在雲端的web應用程序,用戶可以和他人協作或者在自己的不同設備間進行協作,將數據保存在安全的服務器上。沒有沉重的開銷成本,web應用可以只消耗桌面應用程序的成本的一小部分。

Figure 1.2 – 完全發揮你的設備潛能!

Web Apps的特性

Web apps可以和電子表格,文檔編輯器一樣復雜,也可以和待做事項管理器一樣簡單。不管它是什麼,它都必須完成某些事情。

Web App重新定義了“上網”的含義;web已經成了網站和應用的混合。下面是用來區分web apps和網站的三點要素:

1.一個提供了很好的用戶體驗,讓用戶能很容易地完成任務,並利用了設備本地的一些性能。

2.一個web應用提供了豐富的視覺體驗,又不會分散人的注意力;它注重美學,使用和本地應用一樣的設計模式,又不失易用性。

3.一個web應用非常注重用戶的交互、參與和完成任務,而不是讓他們僅僅浏覽網頁。應用程序是自包含的(self-contained),也即用戶不用導航到其他站點或者應用來完成任務。

Figure 1.3 – 小一點,大一點,簡單點,復雜點? 只要做點什麼就好!

確認Web Apps清單

如果你對這些問題的回答都是YES的話,那麼你面前的就是一個web應用了

它是否是自包含的,不用將我重定向到一個完全不同的應用去完成我需要做的?

我是否可以在使用它的時候進行交互、參與並完成一些事情?

它是否有豐富的用戶界面,界面看起來非常美觀,並且基本占滿了可用的窗口?

它是否使用和本地應用一樣的模式,比如按鈕、對話框或者其他元素?

它是否可以離線工作?

它是否應用了設備的某些功能,比如GPS的定位數據和動作傳感器的數據?

傳統的網站的導航元素和鏈接是否被隱藏起來了?

這個應用設計的時候是否是參照客戶端架構模型?

本文編譯自ling,原文地址。

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved