【協作檢校】Google Chrome Web App開發指南第一章

這個貼是為了提供一個主題，幫助新譯者在一箇中等專案中利用例項在深入細緻地討論，如何改進文章翻譯，提升文章的可讀性，此外這個經典的電子書可以幫助譯者構建Web App（也就是我們WebAppTrend主要關注領域）的知識體系，希望大家對文章的每個單詞、短語、句子的譯文表達提出自己的最佳翻譯建議。

Field guide to Web Application

The demand for apps is strong, and it’s coming from everywhere! This comprehensive guide provides an introduction to many of the skills and best practices you need to build modern web apps. This field guide is designed to help you create great user experiences in your web apps. Whether you’re building your first web app, or are just looking for ways to improve existing experiences, there’s something here for you!

Best wishes and good luck in all your endeavors. Appward, to the Future!

原書前言

人們對apps的需求是如此強勁，現在apps被廣泛用於各行各業的諸多領域！這個綜合性的指南將提供給你一些構建現代Web Apps所需的若干技巧以及最佳實踐。該指南旨在幫助你建立具有良好使用者體驗的Web App。無論你是初次開發Web應用，還是在尋找改進之前應用的方法，這一指南都能幫到你！ 祝您早日成功！向著應用時代邁進吧!

KNOW YOUR APPS Evolution of Web Apps

Not long ago, the web was for ‘surfing’; its main purpose was to provide information. To perform set tasks, users bought and installed software onto their desktop. Key to knowing your web apps is understanding how technologies have shaped the evolution of web apps; web apps are now offering as much, if not more than the desktop application.

Web Apps的變革 HTML5讓開發者能打破以往構建Web應用時所受的限制 不久之前，Web只是用來做“網上衝浪”；它主要的功能就是提供資訊。如要完成特定的任務，人們需購買並在桌面上安裝客戶端軟體。所以，理解全新Web Apps設計開發理念的關鍵是瞭解技術是如何影響了Web Apps的變革；如今，或許不能超越，但Web Apps已可與桌面應用相聘美。

Asynchronous web apps have transformed user interaction

Things have fundamentally changed since the early days of the web, when web page content was static. Today, page’s load or change dynamically, rather than performing an entire round-trip of all content.

非同步Web Apps已經改變了使用者互動方式 早期的Web頁面內容是靜態的，後來一切都發生了根本的改變。現在，頁面動態載入或改變，而不是一次性展現所有內容。

New language standards provide richer user experience

Prior to HTML5 support in modern browsers, the features needed to build web applications was inconsistent, and often required the use of plug-ins like Flash, ActiveX or Java. New open web platform standards like CSS3, HTML5, and JavaScript ensure that developers have the tools and features they need to build more beautiful and interactive web apps than ever before.

新的語言標準提供了更豐富的使用者體驗 在現代瀏覽器沒有支援HTML5之前，構建Web應用所需要的特性變化不定，並且常常需要使用像Flash、ActiveX這樣的外掛或 Java。而新的開放平臺標準，如CSS3, HTML5以及JavaScript提供了足夠的工具和特性，開發者可以構建比以往更漂亮、互動更強的Web應用。

The Future of Web Apps

Critics of the web app are quick to point out one of the main drawbacks - web application users must have an internet connection to get stuff done. Given that the web is not accessible all the time and everywhere, users cannot be fully reliant on web applications to do their work. Or at least, that has been the assumption.

IT IS UP TO YOU TO MAKE SURE YOUR WEB APPS USE THE TECHNOLOGIES AVAILABLE.

The future of web apps is about flexibility - having all the benefits of performing tasks over the web, while also being able to perform those tasks offline. Offline support is already possible - HTML5 offers features like application cache and client-side storage (e.g., local storage, indexed databases) so that your application can run even without a network connection.

Web Apps的未來 你應該在你的Web Apps中使用一切可用的技術 批評者在Web App發展之初就指出了它的主要缺點——使用者需要聯網才能操作。因為網路不是隨時隨地都有，所以使用者是不能完全依賴Web應用來完成他們的工作的。

The cloud offers users more than a desktop The cloud provides a platform on which server side functionality can be hosted and shared. Using web apps hosted in the cloud, users can collaborate with others and themselves across multiple devices, saving data in secured servers. Without heavy overhead costs, web apps can be distributed at a fraction of the cost of desktop applications.

雲會提供比桌面更多的能力

雲提供商提供了一個平臺，在這個平臺上，可以託管和共享伺服器端功能。使用託管在雲端的Web應用，使用者可以（和他人協作）在自己的不同裝置間進行協作，並將資料儲存在安全的伺服器上。這樣省掉不小的開銷成本，Web應用的開發成本只是桌面應用的一小部分。

Properties of Web Apps

Web applications are redefining what it means to be ‘on the web’; the web is becoming an equal mix of web sites and web applications. Here are three main factors that distinguish web apps from web sites:

Web App正在重新定義“上網”的含義；Web已經成為網站和應用的混合。下面是用來區分Web Apps和網站的三點要素： WEB APPLICATIONS CAN BE AS COMPLEX AS SPREADSHEETS, DOCUMENT EDITORS OR AS SIMPLE AS TO-DO LIST MANAGER. WHATEVER IT IS, IT SHOULD DO SOMETHING!

Web Apps可以和電子表格，文件編輯器一樣複雜，也可以和To-do List一樣簡單。不管它是什麼，它都可以完成某項事務

1.A web application providers a great user experience, making it easy for users to complete their tasks and takes advantage of the device’s native capabilities.

1.Web Apps提供良好的使用者體驗，讓使用者能很容易地完成任務，並充分利用裝置效能。

2.A web application provides rich visual experiences that will delight the eye without distracting the mind; it puts a premium on aesthetics and uses similar design paradigms as native applications without sacrificing usability.

2.Web Apps提供了豐富的視覺體驗，吸引眼球而又不會分散注意力；它注重美學，使用和本地應用一樣的設計模式，又不失易用性。 3.A web application has a tight focus encouraging people to interact, engage, and accomplish something, rather than passively view content. The application is self-contained, allowing the user to complete their tasks without navigating to other sites or apps. 3.Web應用非常注重使用者的互動、參與和完成任務，而不是讓他們僅僅瀏覽網頁。是獨立自足的（self-contained），使用者不用導航到其他站點或者應用來完成任務。

Checklist for Identifying Web Apps

Is it mostly self-contained, without redirecting me to a completely different experience to complete what I set out to do?

Can I interact, engage and accomplish something by using the application?

Does it have a rich user interface that looks nice, and takes advantage of the full size of the window available to it?

Does it use the same paradigms as native applications for buttons, dialogs and other components?

Does it work offline?

Is it using the capabilities of the device it’s running on, for example location data through the GPS and motion sensors?

Are traditional website navigation elements and links hidden from view?

Is the app designed around a primarily client-side architecture model?

Web Apps的特徵列表 • 它是否是獨立的，完成當前任務不需要連結到另一個完全不同的使用環境？ • 使用它是否可通過互動、參與並完成特定任務？ • 它是否具有良好的使用者介面，看起來非常美觀，並且佔據全屏？ • 它是否使用和本地應用一樣的介面模型，比如按鈕、對話方塊或者其他元素？ • 它是否可以離線工作？ • 它是否應用了裝置的某些功能，比如使用到來自GPS的定位和動作感測器的資料？ • 是否隱藏了傳統的網站導航欄和導向連結？ • 應用是否是參照客戶端架構模型設計？

原文連結：http://www.html5rocks.com/webappfieldguide/