簡介網站架構 (Front-End)


一般來說,我們瀏覽的網站都會分為前端以及後端

何謂前端?何謂後端?  其實到現在快2017還是存在一點界定的爭議。
但我們通常會以程式功能來區別前後端,前端後端適當的整合才能架構出優良使用者體驗的網站。


前端工程(Front-End)
簡單來說,我們瀏覽的所有網站,不分大小,使用者(Client)端肉眼可見的全都稱為"前端"。
前端設計需要兼顧美感與實用,隨著近年來行動裝置的竄起,如何相容於不同裝置也成為一個重要課題。
優秀的前端工程師寫的程式通常會相容於各大瀏覽器以及行動裝置,並同時兼顧美感和實用。

常見程式語言:HTML、CSS、JavaScript
常見框架:jQuery、BootStrap、AngularJS、Nodejs


何謂HTML?
傳統且古老的前端語言,前端工程師必備的語言能力。
在各大網站都不難發現採用HTML寫前端的網頁,至今已發展到HTML5。
以前無名小站寫部落格常用的超連結功能不知道還記得嗎?

<a href="www.davidh83110.com">David's HomePage</a>

寫這一段語法如下面所示,就會變成文字超連結,這就是HTML,相信大家都不覺得陌生。

David's HomePage


HTML的架構?

其實並沒有限制我們怎麼寫,有些人喜歡把<head>、<body>都寫出來才寫程式
其實你連<html>都不用寫,網頁就可以正常呈現了,所以說用法其實滿free的。

但是對開發者來說,沒有規範卻是一件令人困擾的事,所以我們需要W3C制定的規範。
W3C大家應該不陌生,就是World Wide Web Consortium,簡稱W3C,中文翻譯為全球資訊網協會。
雖然說HTML沒有強制規定大家要怎麼寫,但是有一個全球統一的標準架構來參考還是比較ok的。



那為什麼我要照著W3C的標準來開發?

1.瀏覽器的支援度很高
    W3C的用意其實就是為了整合跨瀏覽器支援的問題,才有這一套制度規範,如果完全符合W3C的規範寫出來的網頁,通常在各大瀏覽器(FireFox、Chrome、Opera、Safari...)的呈現都是一樣的。

2.方便維護及管理
    全球統一標準,當然容易維護跟管理,同時也利於下一個接手的人修改程式碼,不至於完全看不懂。

3.利於SEO
    所謂SEO就是搜尋的優先度,google SEO可以提供使用者管理console,並告知網站哪邊需要改進可以有利於SEO,搜尋排名才會更前面,W3C就是個很重要的依據。

所以照著W3C的標準來開發前端,是很重要的技術。



JavaScript?
這個詞大家應該不太陌生,JavaScript是網頁動態呈現很重要的依據。
前面提到的HTML/CSS開發出來的網頁我們稱為"靜態頁",因為他不會動。
那網站很多動畫,甚至有照片可以從右邊跑到左邊還放大,這些效果是如何控制的呢?
就是利用JS來製作的,所以一個優美的前端網頁,是絕對少不了JS的。

前段簡介就先舉以上兩個常用的技術來說明,但其實現在的發展很多元。
像是我架blog所使用的jekyll就是一種BootStrap,這是一種HTML模板,用來架設個人網站可以說是非常合適,因為架構固定,層層分離,維護起來非常方便。

但JS也常被駭客拿來當成入侵的工具,像是XSS攻擊就是一個利用JS控制元素偷取cookies的最佳例子。


前段的介紹,最後舉個例子。
拿Google來說,我們對瀏覽器按F12或是右鍵->檢查就會跑出一個console

或是直接對網頁點右鍵->檢查原始碼,這些就是所謂的前端程式碼囉
就是因為這些程式碼,我們才能看到google這個網頁。

那你會問說,我把它全部copy下來,我不就也有google了?
對啊,沒有錯。但你只是有它的介面,並沒有辦法copy到功能哦。
為什麼呢?因為功能是後端程式碼在做的事,接下來就來介紹後端工程。