 |
| 響應式網頁設計的確是不簡單的問題 |
*本文是CS50x的中文學習筆記，是原課程的筆記補充，建議先上完課，看完原課程筆記，再閱讀本文。
哈囉，文組們，我們終於到最後一週啦。這一週主要是分流，你可以選擇網站開發、手機應用程式，或是遊戲。我本身對於網站開發比較有興趣，因為網站的應用面很廣，不管是用Windows系統、macOS系統、Linux系統、Android系統、iOS系統，都會使用到網站。本週課程內容不多，教授David回顧了之前的學習，然後談了資訊安全的重要性，但是講得不深，跳過也沒差，主軸還是放在分流後的教學影片。如果你也是選擇網站開發的話，就跟著我一起動手做吧。
網站開發工程師分為前端及後端兩大領域，在較有規模的大公司，前端領域的工作可能又分UI/UX設計師，以及專精於JavaScript的前端工程師。UI設計師負責使用者介面，主要是視覺上的工作；UX設計師負責使用者經驗之設計，安排網站上的內容規劃；至於前端工程師則是負責網站上所有動態及互動效果。
UI/UX設計師專精的領域除了Illustrator、Photoshop等繪圖軟體，HTML、CSS也是必學的項目。然而，如果你的目標是擔任前端工程師，除了要學JavaScript以及前端框架，HTML、CSS也是必學的哦（畢竟公司不一定會聘專任的UI/UX設計師）。
假設目標是後端工程師，自然就是要學習後端常用的程式語言、網站應用框架、及資料庫，不過我們已經在第6週、第7週分別學了Python、SQL，接著就只剩下網站應用框架。所以要學的項目也不至於太多。
因此，在網站開發課程裡，總共有底下項目需要學習：
- HTML、CSS、Bootsrap、JavaScript（HTML DOM）、第一份作業
- Flask、資料庫、第二份作業
在第8週的學習筆記，我將會依照上述分成2篇文章。在第一份作業裡，你必須需要學會最基本的HTML、CSS、JavaScript。如果你跟著課程上到現在，已經學會了C語言，那麼你就已經會JavaScript的核心概念了，只差一些特別用法以及常用函數要記住。
至於HTML、CSS的學習重點是什麼，我認為可以把響應式網頁設計（Responsive web design）的設計理念及基礎原理搞清楚。因為網頁設計者必須考慮到使用者可能用各種平台，如電腦、平版、手機來瀏覽你的網頁，他們甚至使用的瀏覽器也不同。網頁設計者得設法讓網頁能夠在不同平台、瀏覽器上都能夠正常顯示，初學者先搞懂怎麼使用Bootstrap就好了。至於要如何寫出更符合HTML5風格的網頁，或者要怎麼使用CSS讓網頁更加美觀，反而是相對枝微末節的事，有興趣的話可以再繼續專研。
另外你可能注意到，我並沒有談到HTTP、TCP/IP、DNS等，而這些在助教的影片裡都有提及。我個人是認為以作業為主軸，把核心概念先學起來。基礎知識部分可以回頭慢慢補齊。
前置工作
1. 下載Visual Studio Code程式碼編輯器
如果你在第6週學習Python時，下載了Anaconda，裡頭就包含了VS Code。這是微軟開發的編輯器，個人是覺得用起來挺順手的，重點是免費。
2. 下載不同的瀏覽器
目前最常用的瀏覽器有 Firefox、Chrome、Opera、Safari、Internet Explorer 與 Micrososft Edge。為什麼要有不同的瀏覽器呢，因為你的網頁在不同的瀏覽器上，可能會長得不一樣。些許差別沒關係，就怕跑版。
當然啦，如果只是要先把作業交出去，可以先下載 Chrome就好了。Chrome上有一個外掛叫Responsive Web Design Tester，建議裝上去，這個外掛可以另開新網頁模擬不同平台的網頁畫面。例如你原本在桌上型電腦上看得好好的，可能用手機閱覽，版面就不太對了。
3. 版本控制系統
這次作業用不到，但是強烈建議要學起來。版本控制系統，類似Google雲端硬碟，可以讓團隊共同編輯程式碼， Git 是最常見的版本控制工具，GitHub則是最常用的程式碼分享服務。
MDN及W3SCHOOL
網頁呈現的基本概念
網頁呈現的流程：
- 在瀏覽器上輸入網址，接收HTML、CSS、JavaScript訊息
- 瀏覽器將HTML轉成文件物件模型（DOM, Document Object Model），文件物件模型有著一個樹狀結構，每個標記語言中的元素、屬性，以及文字片段都會是這個樹狀結構裡的節點。
HTML
HTML （HyperText Markup Language），是一種標記語言（markup language），用來告訴瀏覽器資訊如何呈現，目前最新版本是2017年發佈的HTML 5.2。建議大家使用Visual Studio Code，然後在Extensions下載HTML CSS Support套件，在使用上會更加便利。HTML學習時間非常短，認真學習的話，最多不會超過6小時就可以掌握。
CSS及Bootstrap
CSS（Cascading Style Sheets），是用來讓HTML變得更漂亮的樣式表語言，學習CSS可以看W3SCHOOL，CSS非常簡單，尤其如果你使用VS Code編輯，都能夠自動帶入，也不怕打錯字。Bootstrap是前端框架，目的是做響應式網頁設計（核心精神看這裡）。CSS及Bootstrap的學習時間要比較長一點，因為資料量比較龐大，但是一般來說有3個工作天的話，應該就能掌握核心觀念，我建議Bootstrap參考W3SCHOOL教學。
JavaScript
在網頁上使用JavaScript，相關程式碼可能會長得像是下面這樣，只要先記得document這個字就好了：
document.addEventListener("DOMContentLoaded", function() { // to do });
最後，雖然我建議你學VS Code，但是如果你一時覺得不太習慣，也沒關係，你可以先使用CodePen，在CodePen可以讓實驗HTML、CSS、JavaScript的功能，作用就像是cs50沙盒。這裡是我按照MDN的教程內容，練習的JavaScript小遊戲，放在CodePen上，各位可以參考看看。
作業
第1份作業的重點是：
- 必須至少要有4頁不同的html，其中一頁是index.html
- 每頁要互相連結在一起
- 使用至少10個HTML tags，除了<html>、<head>、<body>、<title>以外
- 某一些tag (例如 <p>)要多使用幾次。
- 使用Bootstrap前端框架
- 至少要有一個CSS檔叫styles.css，裡頭至少有5個選擇器，至少5個不同的CSS樣式
- 使用至少1個以上的JavaScript語法
- 必須具有響應式網頁設計（Responsive Web Design）
Happy Coding!!!
