這篇文章中，結構化過程的插圖可以幫助你運用簡化的方法更加節省時間更加有效的建立你的web開發程序。
下載 Woork Papers N1幻燈片 你需要知道的開發Web應用程序的結構化過程
工序的主要階段
一般的web應用程序開發流程分為五個主要的階段：
1、明確需求
2、設計
3、執行
4、測試
5、發行
規劃與跟蹤監測是一個「跨階段」的跟隨開發發展的過程，定義一個在項目執行期間你需要跟蹤監測的項目計劃活動名單，並且每項活動需要定義一套行之有效的信息報告來進行跟蹤監測，例如：
- 擁有者
- 持續的時間
- 所耗
- …
看一看這些前一段我所寫的文章，怎樣使用Excel或者Google製表軟件設計製作項目實施計劃：
How to organize a project plan 怎樣組織項目規劃
Excel Gantt chart template Excel圖表設計繪製模板
Implement a project plan and manage activities with Google Spreadsheets 使用google電子錶格實施並靈活管理項目規劃
1. 需求定義
在這第一階段你必須確定範圍和Web應用程序的需求，在你的應用程序中必須做的，主要特點和技術要求：
範圍
為了確定Web應用程序的範圍,足以編製一份明確說明適用功能的詳細清單。目前重要的不是「如何」實現他們，而是「什麼」需要實現！
需求
需求分析需求分析是一個開發過程的關鍵組成部分。在這一步中你需要估計潛在流量，選擇一個服務器端語言（ PHP， ASP， Coldfusion …),數據庫，選擇一個托管服務…這裡需要非常注意不要高估 /低估預期！準確的平衡的預估時間，成本和目標之間每件事情！
2. 設計
在需求定義階段，你需要明確的規劃「設計」你的應用。在這個階段，可以按照以下步驟：
設計：應用圖
應用圖包含對應用有意義的和必要的結構信息：頁面（用區塊表示）和他們之間的主要關聯。你的應用圖可以像這樣：
通過這種方式，您擁有了有關一些「位置」 （頁）和「路徑」 （關係頁）的圖，您可以非常容易的遵循它，逐頁，以執行應用程序的下一階段。運用這種方式，可以節省大量的時間，並明確什麼是你需要執行的。
設計：數據庫
Ok,現在到了設計數據庫的時候了。一個簡單的實現方法是使用實體關係（ER）模型 。一般來說，你可以俺咋好下面的順序：定義第一個表確定第一個表，而不是屬性和關係的表格。您的ER模型將是這樣的：
1:1表示集的關係（在這種情況下，例如1用戶只能分派1的任務， 1個用戶只生活在一個城市） 。欲瞭解更多有關這一主題的內容，來看看我的舊文章：
Define the entities-relationships model 定義實體關係模型
A correct approach to define relationships between database tables 正確對待，以定義數據庫表格關係
10 Useful articles about Database design 十篇有用的數據庫設計文章
設計：頁面結構
下一步工作是設計大體的頁面結構，用名稱命名確定所有的主要部分 (例如 #header, #navbar, #mainContent, #sidebar).
設計：服務端語言
使用面向對象的開發方法進行開發，你可以定義類，函數和所有你所需要的，記住… 那不是「執行」只是下一階段實施的「指南」.
設計：JS 框架
這一步選擇JavaScript 框架(jQuery, Scriptaculous, MooTools…), 通過確定主要的特點和所需實施的效果（拖放，動畫效果… ）編製簡單的關於在一個或多個網頁中有關聯的每一個具體功能應用圖的列表。
次點設計階段已完成。讓我們實施吧！
3. 實施
Ok.. 現在是真正的挑戰的開始，因為「執行」才是實現應用。您可以劃分這一階段為以下幾個步驟:
執行：數據庫
創建一個新數據庫，寫SQL代碼定義表，屬性和關係。看看下面的，過去我致力於一些有關此主題的文章的鏈接，以獲取更多信息：
How to use PHP and SQL to create DB tables and relationships 怎樣使用PHP創建DB表和關係
Create tables and relationships with SQL 使用SQL創建表和關係
執行：HTML
使用在設計階段定義的頁面結構實施 HTML 代碼：
程序代碼
此時添加所有在設計階段定義的所需要的HTML元素。例如，如果mainContent部分包含一個標題，文字和文章的標籤後，添加這些內容：
This is the moment to add all HTML elements you need in sections identified during Design phase. For example if the sections mainContent contains a post with a title, a text body and post tags, add these elements:
程序代碼
實施：CSS
當主體結構已經準備就緒，開始編寫CSS代碼添加樣式。如果您需要一些如何撰寫更好的CSS代碼建議，請看看這些文章：
CSS coding: semantic approach in naming convention CSS編碼：語義的方法命名慣例
Useful guidelines to improve CSS coding and maintainability 有益的改善的CSS編碼和可維護性的指南
實施：服務器端語言
實施應用類，應用功能,DB互動，查詢，以及一切需要服務器端的實現的交互。
實施：JavaScript
使用在設計階段選擇的框架（ jQuery ， Scriptaculous ， MooTools …)來實施Ajax的功能（拖放，動畫效果… ）
4. 測試
在這一階段需要「強調」的是。你的應用程序能在各種條件下執行（例如使用不同的瀏覽器） 。您的目標是在最後釋放前檢測和修復所有的應用程序錯誤。
請記住，這一過程需要有條理，需要極大的耐心！試驗的每個頁面和每個功能（在這種情況下還可以幫助理順應用圖） 。如果您測試過程中發現一個bug ，修復它修改代碼並繼續進行最後的代碼審核（一個不可告人的測試）。
5. 發佈
最後你準備好發佈了！在測試文件夾中發佈並做最後的測試，假如一切都OK的話，那就進行最後的發佈吧。
在Scribd上，閱讀與下載此篇文章
下載 Woork Papers N1幻燈片 你需要知道的開發Web應用程序的結構化過程
英文原文：Structured process you must know to develop a web application
文章提供 BAYSTARS DESIGN網頁設計公司
沒有留言:
張貼留言