iT邦幫忙

第 11 屆 iT 邦幫忙鐵人賽

DAY 2
0

網站工程

架設一個網站的工程(這邊講的是網站架設工程,不包含網頁視覺設計)主要分成兩大區塊:前端與後端。

前端工程負責網頁的門面,看得到的文字、顏色、連結、分頁連結、下拉選單、外部連結、文字輸入、甚至動畫技術等,都是前端工程的部分。網頁視覺設計師將設計稿給前端工程師,前端工程師把視覺畫面變成一個可供瀏覽、互動、增減內容的網站(比方說部落格)。

後端工程是使用瀏覽器瀏覽網頁的人(簡稱"使用者")看不到的那部分,像是伺服器處理、資料庫、應用程序等。

Web前端基礎技術

最基礎的前端技術就是HTML、CSS、Javascript。HTML建構了網站的內容與結構,CSS妝點網站的樣式,Javascript可以做到網站的互動。用機器人來比喻的話,HTML作出了骨架,CSS是它的皮膚、衣服,Javascript讓機器人可以跟人互動。

image alt

單單用HTML、CSS就可以做出一個很美的靜態網站(單純瀏覽內容,無法互動),CSS美化網站的強大度可以看 CSS Zen Garden,參考一個靜態網站的不同風格設計。一些企業宣傳網站可能靜態網站就夠用,可是在網路資訊越來越蓬勃發展的情況下,網頁的互動性不可或缺,所以學習Javascript也是必須的。

而樣式框架Bootstrap則能讓網頁視覺架設更便利,我們用CSS調整網頁的樣式,Bootstrp就是樣式框架,是可以套用整個模板。除了Bootstrap官網本身的基礎模板,目前網路上也有很多不同風格模板可供下載使用。

Bootstrap模板除了風格套用之外,也可以拿來做RWD網頁,去適應各種不同螢幕大小的顯示器。點下圖可以看該模板的下載頁面,可以選擇看不同顯示器的套版樣式。

這麼方便?那可不可以都用樣式框架套就好了?

過份依賴樣式框架是危險的。當客戶需要細部修改時,前端工程師必須有能力用CSS指令去蓋掉原本的Bootsrap樣式。

Web前端進階技術

隨著網路使用的需求越來越多樣,網站已經不再停留於過往只有內容(HTML)、美觀(CSS)還有簡單的互動功能(Javascrip),網站的功能越來越包羅萬象,必須有更多的技術介入。比如JS的函式庫Jquery ;JS框架,最常見的是Vue.js、Angular.js、React.js ;還有加快網站效率的Ajax ;學習webpack時,必須認識Node.js這款跨後端的技術(webpack是在它上面運作的);還有Git版本控制,來管理團隊開發過程專案的檔案更新及備份。

但我目前也還無法講清楚技術內容在幹嘛...因為還沒有學到那(羞)。

網頁前端工程的技術需求,是隨著當代的網路需求來衡量的,也意味著前端工程師必須不斷的更新自己的技能,注意技術的演進,否則被時代淘汰可是很容易就發生的事。(真是讓人 崩潰 充滿鬥志呢)

關於更多的前端學習內容,也可以參考六角學院的 前端學習地圖

前端也要會設計嗎?

前端工程師不一定要會設計,專案裡的設計師跟前端工程師通常是兩個不同的職位,但如果你是一個會設計的前端工程師,當然是加分的。

雖然不需要包到設計的技術,但前端工程師作為網頁設計師跟後端工程師的中介,當一個團隊進行專案協作時,前端工程師實現網頁視覺設計師的視覺稿,同時也要能在後端工程師生出API時,跟後端工程師溝通,進行串接API等工作。所以也不能完全沒有概念,否則在溝通撞牆會增加彼此大多工作量。

總而言之,在自學的路上,技術是可以一直學下去的,單看自己想朝什麼方向鑽研。保持求知欲,才能在前端的路上越走越前面囉。

  • 有任何錯誤或描述不夠精準之處,歡迎指教,非常感謝。

上一篇
Day1 前端自學心得-萬事起頭難
下一篇
Day3 推薦的前端學習資源
系列文
從門外漢到前端新手30

尚未有邦友留言

立即登入留言