當前位置:首頁 » 網頁前端 » web的開發流程圖
擴展閱讀
webinf下怎麼引入js 2023-08-31 21:54:13
堡壘機怎麼打開web 2023-08-31 21:54:11

web的開發流程圖

發布時間: 2022-07-16 21:22:34

A. 我是做web前端的,要實寫一個流程圖,不會寫,沒思路,求指教

如果這個流程圖是固定的,也就是說是不會隨著數據,改變位置的話,那就做五行七列的格子,然後往格子里加東西應該就可以了。像那個藍色四個角,你可以在這個包裹電話的小盒子里,定位四個小正方形,定位到四個角上。
例外那個每個圖標樣式都是固定的上圖下文,上圖帶四個小正方形的交互,並且大部分帶箭頭,可以寫公共樣式。像那些線,如果嫌麻煩,可以用圖片代替,定位上去。

B. web開發流程圖 一般用什麼軟體

1. Codepen
Codepen應該是全世界最受歡迎的開發環境之一了。CSS技巧的作者Chris Coyier是Codepen的聯合創始人之一,這也就是為什麼這款app看起來那麼豪華。除了視覺上的優秀效果,它可以生動地展現預覽,當你修改了代碼,就可以看到效果,使你能夠更容易地找出變化。

Codepen用於CSS的預處理器包括SCSS、SASS,LESS和Stylus,用於JS的有CoffeeScript和LiveScript,用於HTML的包括Haml、Markdown、Slim和Jade。另外,它還包含了8個可用的內置的JS庫。Codepen中合作和私人的「pens」需要付費使用。【前往Codepen】

2. JSFiddle
JSFiddle可以說是成就了開發環境的流行,它是第一個也是最出名的平台。JSFiddle有超過30個可以立即使用的JavaScript庫,你還可以輕松的添加外部文件。在預處理方面,它有用於CSS的SCSS、用於JS的CoffeeScript以及用於HTML的簡單Vanilla。

如果你在與其他開發者合作,我強烈建議你使用JSFiddle。在所有的開發環境中,JSFiddle的協作特性是同類型應用中最好的,而且區別於Codepen的是,它的這個特性是操作簡單並且免費的。

但JSFiddle沒有的是預覽功能,你需要手動刷新頁面。和其它開發平台相比,JSFiddle確實也比較慢。另外,JSFiddle還有一個不足就是它的執行鍵不是很靈敏,有時需要多點擊幾次才能夠執行代碼。【前往JSFiddle】

3. JS Bin
JS Bin是由JavaScript開發大師Remy Sharp創建的,他擁有一家專注於JavaScript和HTML5的web開發公司。JS Bin的JS預處理器包括CoffeeScript、TypeScript、Traceur、JSX以及可供使用的超過40個的JS庫。你同樣可以添加外部文件,但是必須在編輯器上手動操作。而用於CSS的預處理器,它提供了LESS。

JS Bin和以前開發平台的區別在於它允許你把文件下載到你的電腦上,這對於開發者,尤其是在離線狀態下調試代碼的程序員來說,是一個很不錯的特點。你還可以創建私人的Bin空間,不過你需要對此付費。另外,JS Bin不支持協作功能。【前往JS Bin】

4. CSSDeck
CSSDeck已經存在一些年了,但它的影響力好像不是很大。不過,由於它的簡潔性,它還是值得關注的。如果你不需要其它平台里那些復雜的功能,那CSSDeck就應該是你的選擇。

CSSDeck的預處理器包括用於HTML的HAML、Markdown、Slim和Jade,用於CSS的LESS、Stylus、SASS和SCSS,以及用於JS的CoffeeScript。它還有幾個可用的CSS和javascript庫,對於沒有的庫,你只需要將其手動地添加到庫的列表中就可以使用了。

CSSDeck雖然很簡潔,但它有一個讓我很吃驚的特性,就是它支持用戶改變字體大小,這是一個簡單卻實用的功能。所以說,如果你在尋找有很多很炫的功能的開發平台,CSSDeck可能不適合你。它的簡潔性讓你更專注於最重要的事情,這也是它最大的特點。【前往CSSDeck】

5. Dabblet
當我還在使用十六進制顏色代碼的時候,Dabblet的特性讓我驚訝了,它的顏色預覽居然顯示在代碼旁,這是我第一次見到這樣的設置。雖然我不確定這是否是一個有用的特性,但是它的整潔性還是給我留下了很深的印象。

現在,Dabblet最棒的地方在於它允許用戶以5個不同的視角進行預覽,分別是CSS編輯器和效果,HTML編輯器和效果,CSS和HTML的編輯器和效果,JavaScript及運行結果,全部綜合效果。這些功能在絕大部分的開發環境中都沒有。

它也有不足,第一,Dabblet缺乏HTML和CSS的預處理器,這是令人困惑的。第二,它沒有內置的JavaScript庫,不過你可以通過手動插入JavaScript庫來解決。第三,它的每個板塊大小是固定的,無法作出調整,這和以前傳統的調試平台是一樣的。第四,它缺少一個用於演示其他用戶作品的板塊。【前往Dabblet】

6. Liveweave
Liveweave是一個擁有很多功能的開發平台,比如可以關閉的實時預覽。你也可以為了保護視力,開啟夜間模式,將所有界面都變暗。Liveweave提供了20多個JavaScript庫,甚至還支持SVG。其內置的標尺使測量更加精確,更符合美學標准。

它還有一個吸引我眼球的地方,就是它的協作功能。如果你過去曾經使用過Teamviewer,你會發現它們是相似的。你需要做的事只是點擊協作鏈接,你就可以分享來自於你到weave的鏈接了。

你甚至可以下載你的weave文件,並把它保存為單獨的HTML文件或者保存為包含獨立HTML、CSS和JS文件的zip壓縮包。對了,Liveweave還有一個內置的Lorem Ipsum生成器。 【前往Liveweave】

結語
當然,每一個平台和工具都有它自己的特性,都會對你有所幫助

C. 一個完整的web項目開發流程

1 需求確定

通過各種方法確定系統的功能與性能。

功能:注冊、登錄、查詢、搜索。。。

性能:可同時支持N個並發訪問,並且響應時間不低於M毫秒。。。

方法:

會議

詢問

頭腦風暴

原型-界面原型、業務原型。。。

本階段是項目開發的最重要的階段。

在WEB項目中,通常界面設計會在本階段進行。

2 分析與設計

1 架構分析與設計

邏輯結構:

3層架構、多層架構。。。

MVC。。。

Model1或Model2

。。。

物理架構:

web伺服器的分布

資料庫伺服器的分布

。。。

技術解決方法的確定:

Java/.net

Open Source/商業

。。。

2 業務邏輯分析

根據需求分析業務邏輯:

有哪些人使用本系統

他們會使用本系統做什麼

通常他們使用本系統的步驟是怎麼樣的

會有哪些明顯的類來支撐本系統的運行

會有哪些不同的提示會反饋給用戶

。。。

本階段與需求的確定密切相關,通常在確定需求的時候就會進行相關的分析。

3 業務邏輯設計

根據需求的分析來確定具體的類

確定類的屬性

確定類的介面(方法)

確定類之間的關系

確定用戶操作流程在設計上的反映

進行資料庫的設計

注意:不同的項目步驟可能不盡相同

4 界面設計

設計系統的界面風格:

顏色、style

設計系統的具體「模擬」界面:

能夠從頭到尾

方便進行需求的確定

方便JSP程序員進行開發

。。。

3 開發環境搭建

開發工具的確定:

eclipse、Myeclipse。。。

配置管理工具的確定

測試工具的確定

文件伺服器/配置伺服器等的確定

。。。

4 開發-測試-開發-測試

按照設計進行開發

迅速開發原型

進行迭代開發

提早進行測試:

單元測試

黑盒測試

白盒測試

性能測試

易用性測試

。。。

5 編寫文檔

D. 應該如何製作web流程圖

一、設計的任務:設計是一種審美活動,成功的設計作品一般都很藝術化。但藝術只是設計的手段,而並非設計的任務。設計的任務是要實現設計者的意圖,而並非創造美。 網頁設計的任務,是指設計者要表現的主題和要實現的功能。站點的性質不同,設計的任務也不同。從形式上,可以將站點分為以下三類。 第一類是資訊類站點,像新浪、網易、搜狐等門戶網站。這類站點將為訪問者提供大量的信息,而且訪問量較大。因此需注意頁面的分割、結構的合理、頁面的優化、界面的親和等問題。 第二類是資訊和形象相結合的網站,像一些較大的公司、國內的高校等。這類網站在設計上要求較高,既要保證資訊類網站的上述要求,同時又要突出企業、單位的形象。然而就現狀上來看,這類網站有粗製濫造的嫌疑。 第三類則是形象類網站,比如一些中小型的公司或單位。這類網站一般較小,有的則有幾頁,需要實現的功能也較為簡單,網頁設計的主要任務是突出企業形象。這類網站對設計者的美工水平要求較高。 當然,這只是從整體上來看,具體情況還要具體分析。不同的站點還要區別對待。別忘了最重要的一點,那就是客戶的要求,它也屬於設計的任務。

E. 如何開發Web應用程序

Web應用程序的開發過程
現在特徵已經弄清楚了,我們就可以開始定義開發一個web應用程序的整個過程了。當然,這依賴於工程的大小,過程中的某些步驟可能很小,在你的腦海里就能完成這種工作,但把事情整個的了解一下總是有好處的。同時還有一點很重要的你要明白,這篇文章並不會對每個步驟進行深層次的描述。
步驟一:分析
開發一個web應用的第一步是分析你的需求。你此時應該定義出一個盡量周全的你的應用應該提供的功能清單。如果是你為一個客戶做這些工作,你需要明白他們想要什麼(要確保你們對方都知道對方在說些什麼)。從你們的討論中,你能總結出需求和軟體規格。你即使是為自己開發,我也建議你把希望這個web應用能夠做的功能寫下來。
步驟二:設計
一旦你弄清楚了這個web應用需要做哪些事情,你就可以開始設計了。這個步驟通常會反反復復進行很多次,每一次都把設計細化一些。你第一要做的是畫出頁面流程圖(畫在紙上,或使用軟體工具,憑各自所好吧。我喜歡用紙,這樣我可以做更快速的改變)。頁面流程圖通常是很抽象的黑白繪畫,畫出你將要實現的web應用的樣子(你可以加一些色彩,但盡量保持簡單)。

這個步驟能夠讓你知道你的應用最終會是個什麼樣子。跟37signals倡導的相反,我建議使用一些詞語描述,適度細化。當我想到一個很好的想法時,或想到事情該如何做時,我會把它標注到紙上(例如,當點擊這個按鈕時應該使另外一個元素改變或隱藏,我會把這寫在流程圖上)。
當你對做出的草圖滿意後,你可以開始製作實體模型了。
實體模型仍然是些圖案,但有色彩和細節。最終的實體模型看起來應該像你將要實現的web應用的一個截屏圖。如果你為一個客戶開發,他會看看這些東西,並給你他的認可。然而,很多人都喜歡跳過這一步(大多數都是非設計人員),他們喜歡直接奔向網頁原型。
原型是用HTML開發出來,使用CSS渲染(有時也是有Javascript)。頁面布局要做出來,鏈接能夠點,顏色,字體,字體大小要設定好(如果你做了實體模型,這個會很容易)。這一步非常的重要,因為這里所有的東西都能用於你最終的應用中。如果允許的話,在你的原型上做一些可用性測試,從長期的效果來看,這能使你避免大量的失誤。
在這個步驟的最後,你基本上就知道了你的web應用是如何組織到一起的了。登錄頁面有些什麼,用戶如何從主頁轉向到各個頁面。
步驟三:實現 選擇一個框架
現在我們已經知道了要去開發什麼東西,那就要把它做出來。這一部分的工作很多,你大部分的時間都要花在這個上面。你第一個要做的決定是如何著手,採用什麼樣的技術,什麼框架。你有很多選擇的餘地,你需要選出一個適合你的。下面是一個最常用的框架的列表:
ASP.NET
PHP 上的任何一個流程的框架
Python with Django
Ruby on Rails
沒有一個明確的標准說哪個框架最好。它們都各有不同,每個都有自己的長處。最重要的是你要知道它們任何一個都能讓你開發出好用的web應用。
開發
一旦你知道了如何去開發,那就要甩開臂膀開幹了。這個開發工作可以看作有很多塊,但說到底,這都是標準的編程活動了。在後台,你要創建類,對象,服 務,過程,以及持久層來把這些對象保存到資料庫中。後台是整個應用的核心,對任何應用來說,它跟普通的編程沒有什麼區別。接著是前台的開發,你現在編寫的代碼才是真正給用戶使用的操作界面。你把後台的程序和原型界面集成到一起,把系統各部分集成到一起。你還可以把你在開發過程中想到的一些很炫的小功能用 JavaScript實現。
再說一次,有很多種途徑可以實現後台程序。建議你去讀一讀跟你選擇的框架相關的資料,弄清楚如何實現這一部分的工作。通常,這些知識會跟面向對象編程有關,但有些框架正在慢慢的向領域驅動設計發展。
步驟四:打磨拋光
現在應用程序已經開發出來,各個獨立的模塊也集成到了一起。你需要通過測試來確保你在步驟一中定義的需求和軟體規格是否被實現(這個問題在你開發的整個過程中都要記在腦中)。你要確保那些愚蠢的用戶不能通過試圖做一些你還沒有實現的操作而把你的應用弄壞(參考 白盒 和 黑盒測試)。你同時還要確保你的程序能夠在各種瀏覽器里(希望不是IE6)都能正確的運行。
現在也是你做一些小的調整,改進你的應用程序給人的感覺的時候,讓它趨於完美。
步驟五:發布和後續工作
這最後一步(但不是就此完結)是發布你的應用,讓用戶能夠真正使用它(如果這個應用是個公眾開發的應用,別忘了做新聞宣傳)。如果你願意,先發布一 個Beta版,這樣只有一小部分用戶能夠發現你的應用里的大問題(因為你的程序里肯定會有bug),他們會幫助你改進程序的質量。不要忙著增加功能,要專注於把你目前的程序變的穩固。
當經過了beta階段,你的程序已經變得十分的穩固,聽取用戶反饋的意見,自己試用一下自己的應用,你可以開始思考如何使應用變的更好。找出不和諧的地方,消除掉。以後每次的迭代都要經過上面所說的五個步驟,但就像我最初說的,你現在已經有了一個可以運行的應用程序,你很容易直接在心裡完成這些步驟,直接奔向在代碼里測試你的功能。
恭喜,你已經自豪的成為一個web應用程序的作者了。

F. web前端項目開發流程

前端前景是很不錯的,像前端這樣的專業還是一線城市比較好,師資力量跟得上、就業的薪資也是可觀的,學習前端可以按照路線圖的順序,

0基礎學習前端是沒有問題的,關鍵是找到靠譜的前端培訓機構,你可以深度了解機構的口碑情況,問問周圍知道這家機構的人,除了口碑再了解機構的以下幾方面:

1. 師資力量雄厚

要想有1+1>2的實際效果,很關鍵的一點是師資隊伍,你接下來無論是找個工作還是工作中出任哪些的人物角色,都越來越愛你本身的技術專業前端技術性,也許的技術專業前端技術性則絕大多數來自你的技術專業前端教師,一個好的前端培訓機構必須具備雄厚的師資力量。

2. 就業保障完善

實現1+1>2效果的關鍵在於能夠為你提供良好的發展平台,即能夠為你提供良好的就業保障,讓學員能夠學到實在實在的知識,並向前端學員提供一對一的就業指導,確保學員找到自己的心理工作。

3. 學費性價比高

一個好的前端培訓機構肯定能給你帶來1+1>2的效果,如果你在一個由專業的前端教師領導並由前端培訓機構自己提供的平台上工作,你將獲得比以往更多的投資。

希望你早日學有所成。

G. 開發一個WEB項目的流程是怎樣的

  1. 首先了解項目需求,形成項目需求文檔

  2. 根據web項目未來的運行方式和場景選擇web運行伺服器,資料庫以及開發語言,還有支持的瀏覽器最低版本

  3. 小型的web項目最好邊開發邊和用戶交流,以盡可能滿足用戶需求

  4. 大型的web項目最好能將需求讓用戶確認,便於未來需求修改時評估修改成本或以合適理由拒絕修改

  5. 小型組網測試。小范圍內測試web項目的功能和交互方式。

  6. 壓力測試。如果web項目的使用人數將來會非常大,可能要找工具對該項目進行壓力測試。

  7. 試運行。試運行也可和前期測試相結合。

  8. 正式上線。

  9. 後期維護。

H. java開發一個簡單的web網頁的具體流程是什麼

web網頁的主要流程就是 從請求到響應,從jsp頁面的參數傳遞到後台的 控制層(action)再調用相應的服務層(service)進行處理,其中可能會用到數據層(),將處理後的結果響應給頁面,或是跳轉

I. 開發一個web 項目的大概流程

1.
首先了解項目需求,形成項目需求文檔
2.
根據web項目未來的運行方式和場景選擇web運行伺服器,資料庫以及開發語言,還有支持的瀏覽器最低版本
3.
小型的web項目最好邊開發邊和用戶交流,以盡可能滿足用戶需求
4.
大型的web項目最好能將需求讓用戶確認,便於未來需求修改時評估修改成本或以合適理由拒絕修改
5.
小型組網測試。小范圍內測試web項目的功能和交互方式。
6.
壓力測試。如果web項目的使用人數將來會非常大,可能要找工具對該項目進行壓力測試。
7.
試運行。試運行也可和前期測試相結合。
8.
正式上線。
9.
後期維護。

J. 請教公司里web開發的流程

首先策劃出文案,然後設計出效果,通過後製作切圖做頁面,前後台可以同時做,套頁面應該是把任憑做的html靜態頁與程序員開發的後台綁定起來