# 動畫互動網頁程式入門 | 資源整理

此文件為 (https://hahow.in/cr/monoame-webdesign1) 線上課程內容與資源與範例檔案整理(持續新增中)。
包含區塊：
* [課程勘誤與補充　　 ](#課程勘誤與補充): 延伸的問答資料記錄/ 錯誤更正
* [推薦自學書籍　　　 ](#推薦自學書籍): 會持續新增設計/程式相關我讀過很推薦的書籍
* [相關社群　　　　　 ](#相關社群): 各種網頁討論社群，多交流討論進步越快
* [課程使用API與圖片 ](#課程使用API與圖片): 課程專屬資料與連結
* [相關js庫與資源　　 ](#相關js庫與資源): 一些常用CDN與資源
* [單元完成報到區　　](#單元完成報到區): 完成單元Project來貼文回覆，就會出現在FB作品統整網站
* [查找筆記　　　　　](https://hackmd.io/bhLYsyZxRPKKOdZ_AZTAJQ): 功能查找

討論問題專區：[動畫互動網頁FB社團](https://www.facebook.com/groups/600360513469667/)
作品整理網站：[FB作品統整](http://2017.awiclass.monoame.com)
課程理念：[從不只是一門線上課程，而是一場推動進化的豪賭](https://www.facebook.com/notes/%E5%90%B3%E5%93%B2%E5%AE%87/%E5%BE%9E%E4%B8%8D%E5%8F%AA%E6%98%AF%E4%B8%80%E9%96%80%E7%B7%9A%E4%B8%8A%E8%AA%B2%E7%A8%8B%E8%80%8C%E6%98%AF%E4%B8%80%E5%A0%B4%E6%8E%A8%E5%8B%95%E9%80%B2%E5%8C%96%E7%9A%84%E8%B1%AA%E8%B3%AD/1293711693980784)
###### 預計學習時數: 課程觀看+練習建議預留的時間
###### 每個單元開始前請記得查看講義

### 2.基礎前期規劃 (第2章)
> 講解網頁的規劃、結構與主體
> 預計學習時數: 1hr
* 2-3 網站專案開發流程
* 2-4 網站主題名稱logo
* 2-5 網站瀏覽結構樹規劃
* 2-6 網站排版規劃與分類
* 2-7 網站視覺配色概念與資源

### 3.本機與Codepen環境架設 (第3章)
> 使用Sublime作為編輯環境，初步嘗試建立網頁，與使用線上Codepen平台製作網站，設定常用快速鍵
> 預計學習時數: 1hr
* 3-1 sublime 操作與瀏覽器預覽網頁
* 3-2 伺服器瀏覽與原理講解
* 3-3 平台介紹/註冊與基礎設定 - 使用Codepen
* 3-4 實際使用sublime中快速鍵

### 4.基礎HTML/CSS (第4章)
> 講解網頁基礎html結構與css更改顏色與外觀
> 預計學習時數: 8hr
* 4-1 html 中元素&排列的概念
* 4-2 html 中結構&層級的概念
* 4-3 \<project 0> 簡易版本自我介紹
* 4-4 css 直接調整外觀與顏色框線
* 4-5 css 分開撰寫 - class&id概念
* 4-6 css 顯示方式 display block/inline
* 4-7 css 元素位置 - 相對 / 絕對定位
* 4-8 css 內間隔/外間隔(padding/margin)
* 4-9 css 字體變化與span-在文章段落中製作變化
* 4-10 <i class="fa fa-file"></i> \<project 1> html / css 大整合-製作獨特名片網頁
* <i class="fa fa-file"></i> \<homework 1> 功課說明-製作自己的技能網頁

### 5.系統性管理開發 (第5章)
> 使用sass與jade作為前處理語言，學習使用模組開發。
> 預計學習時數: 5hr
* 5-1 html 縮寫模組-Emmet 介紹
* 5-2 html 樣板語言-jade(pug) (課程主要使用)
* 5-3 css 樣板語言-sass (課程主要使用)
* 5-4 sass - 變數概念管理色彩&內容
* 5-5 sass - 動態產生模組mixin概念
* 5-6 sass - 常用mixin與累積資源
* 5-7 html參考資料轉換jade
* 5-8 <i class="fa fa-file"></i> \<project 2> 實作網頁品牌視覺指導套色

### 6.素材前期準備 (第6章)
> 使用Illustrator規劃網頁使用圖像並匯出檔案
> 預計學習時數: 1.5hr
* 6-1 如何在以拉中製作icon/圖像
* 6-2 如何輸出圖片jpeg/png/svg
* 6-3 將圖片上傳到imgur影像網站
* 6-4 管理網頁色彩 (guideline/sass/js)

### 7.前端基礎動畫互動 (第7章)
> 使用css與svg製作互動與滑鼠效果
> 預計學習時數: 10hr
* 7-1 html attr 與自定義屬性名稱
* 7-2 css 綜合定位運用 absolute / relative
* 7-3 css 加入基礎滑鼠互動 :hover / :active
* 7-4 css 動畫基礎 transition-duration/delay
* 7-5 css 製作影格動畫 animation/keyframes
* 7-6 css 動畫速度曲線 fillmode/speed curve
* 7-7 SVG - 繪製 向量網頁圖片/logo
* 7-8 SVG - 讓你的LOGO或圖像動起來
* 7-9 <i class="fa fa-file"></i> \<project 3> 動態互動天氣盒子

### 8.前端進階程式js (第8章)

> 開始使用js，學習變數以及迴圈的概念，處理動畫與資料性的網站
> 預計學習時數: 10hr
* 8-1 引言
* 8-2 Jquery 動態改變css外觀/ html內容
* 8-3 Jquery 初階滑鼠事件 - click/hover
* 8-4 Jquery 變數概念- 儲存修改與判斷
* 8-5 json 物件陣列概念 & for 遍歷
* 8-6 Jquery 切換class/css應用-手機demo
* 8-7 Jquery / json 動態產生購物車清單
* 8-8 Jquery ajax - 非同步載入與應用介紹
* 8-9 Jquery ajax - 實作導入資料代辦清單
* 8-10 <i class="fa fa-file"></i> \<project 4> 實作購物車-動態新增購買物品與結算

### 9.RWD原理與應用 (第9章)
> 學習RWD的css斷點原理，並學習Bootstrap的網格系統
> 預計學習時數: 10hr
* 9-1 內容流與概念說明
* 9-2 指定比例尺寸% 與max-width/min-width
* 9-3 重新排版的原理-特定條件css-media query
* 9-4 實作手機版面-模仿fb帳號頁面桌面/手機板變化
* 9-5 懶人工具- bootstrap 原理與結構講解
* 9-6 bootstrap 基礎案例與原理熟悉
* 9-7 bootstrap 格線系統原理與RWD應用
* 9-8 bootstrap 應用技巧 padding型規劃
* 9-9 <i class="fa fa-file"></i> \<project 5> 結合skrollr製作捲動式網頁

### 10.網頁視覺設計 (第10章)

> 網站視覺美感的分析，以及從零開始製作網站規劃稿，處理色彩/元件/頁面
> 預計學習時數: 12hr
* 10-1 概念-版面規劃概念與網格系統 (AI/SKETCH/紙筆)
* 10-2 概念-與頁面結構/跳轉方式規劃
* 10-3 概念-樣式 顏色規劃
* 10-4 概念-微互動元素動畫 反應規劃
* 10-5 案例-從元素建構而上的設計
* 10-6 案例-從頁面整體切分而下的設計
* 10-7 案例-從設計轉換程式網頁的常用技巧
* 10-8 <i class="fa fa-file"></i> \<project 6> Yellow Studio 設計工作室網頁

### 11.前端框架Vue.js (第11章)

> 快速建立資料型網站，練習hahow/博客來等常見頁面，學會載入外部資料做使用
> 預計學習時數: 12hr
* 11-1 為什麼要用資料導向做網頁 (回顧js)
* 11-2 將變數代入模板中
* 11-3 v-for 列舉元素應用
* 11-4 v-model 使用者輸入雙向綁定
* 11-5 v-if / v-show 條件渲染與資料的後處理-實作博客來
* 11-6 v-on / method 建立js事件
* 11-7 與AJAX的對接 動態載入資訊
* 11-8 綜合案例-使用hahow課程資料
* 11-9 <i class="fa fa-file"></i> \<project 7> 互動錄音播放鋼琴

### 12.購買伺服器部署/網域 (第12章)

> 分析伺服器優缺，示範常見購買流程，安裝sublime sftp快速上傳工具，以及安裝自己電腦的sass/jade編譯器
> 預計學習時數: 2hr
* 12-1 如何匯出codepen 與網站結構
* 12-2 現成主機與網址DNS設置
* 12-3 linux主機設置與安裝apache
* 12-4 使用filezilla軟體連線與上傳
* 12-5 使用sublime sftp進行同步
* 12-6 使用Prepros在電腦上動態編譯sass/jade
* 12-7 網站上線GA追蹤與og(用在fb)顯示設定

### 13.破除障礙與後續發展 (第13章)

> 講解如何更好的使用Chrome的開發者工具，以及講解後續學習路徑 前端與後端的規劃與趨勢。
> 預計學習時數: 1hr
* 13-1 問題解決的技巧-Chrome Dev tools
* 13-2 如何規劃自己的未來學習路程 (前端/動畫)

## 課程勘誤與補充　　
:::warning
重要-如果連結到 https://awiclass.monoame.com 網址的api或是圖片沒有辦法使用，請將使用網址更新為 https://awiclass.monoame.com 即可
:::
* __CH3-4 - Codepen環境架設 - 實際使用sublime中快速鍵__
* Sublime快速鍵更改完之後記得按右上角「Save all settings 儲存」
* 縮排/退回 建議使用tab / shift+tab 取代ctrl+[]

* __CH4-5 - 基礎HTML/CSS - css 分開撰寫 - class&id概念__
* 兩者在css裡面用途一樣 不過 id需要獨一無二 ，在JS中也作為抓取那個元素的辨識方式，class通常拿來放可以重複使用的css，id建議是留給程式開發/網頁規劃使用

* __CH4-6 - css的階層關係__
* css的層級關係，會依照使用的選擇器而有不同的權重。如果發生蓋不掉的情況，可以試著算算看兩個者的權重比較，比如hover的css如果被class的css蓋掉，有可能是因為寫在前面或是另一個基礎設定的css用了更複雜層級的選擇器選擇。

* __CH5-2 - 系統性管理開發 - html樣板語言-jade(pug)__
* Jade-html縮寫語法更名成Pug，在選單中一樣可以找到，影片中仍會講"Jade"，所以請自行轉換
* 在本機編譯sass/jade的環境架設請參考 __「CH12-6 - 購買伺服器部署/網域-使用Prepros在電腦上動態編譯sass/jade」__ 部分

* __CH6-3 - 素材前期準備 - 將圖片上傳到imgur影像網站__
* 重要提醒-Imgur流量滿額會Codepen無法顯示圖片，若Imgur圖床無法顯示： 可以上傳到google雲端硬碟，用相同方式複製圖片網址即可使用

* __CH6-5 - 管理網頁色彩 (guideline/sass/js)__
* 註解的快捷鍵不為ctrl+L，而是ctrl+/

* __CH7-2 - 前端基礎動畫互動 - css 綜合定位運用 absolute / relative__
* 原先寫在css .button的background-color:white，建議改寫在.phone裡面，這樣白色的底部才會一起圓角化

* __CH8-7 - 前端進階程式js - jquery / json 動態產生購物車清單__
* 在刪除按鈕的部分，課堂講解部分有錯誤，傳進去參數應該要是id，解決方式已錄製在 前端進階程式js - \<project 4> 實作購物車-動態新增購買物品與結算中囉！

* __CH8-8 - 前端進階程式js - Jquery ajax - 非同步載入與應用介紹__
* 如果遭遇資料無法載入的情況，請將pen網址列中的https更改為http，因為我寫的API是http，更改完即可順利載入
* 如果還是無法，因為現在codepen強制使用https，請將api網址中的 https://awiclass.monoame.com/.... 改為https版本 https://awiclass.monoame.com/

* __CH9-3 - 元素置中方式__
* 放置中央總共有三種方式：
* 1.使用inline/inline-block方式置中：用於文字 圖片或元素並列
* 2.使用block元素置中：調整margin 一般div或元素預設是這種
* 3.使用絕對置中：需要很彈性的放位置（因為它可以調整%數方便）

* 詳情參考這份範例：http://codepen.io/frank890417/pen/mRxyyv?editors=1100

* __CH11 - 前端框架Vue.js（版本間差異語法說明）__
* 使用1.xx版本，記得引用正確的cdn版本，有一些屬性像是{{{}}}在Vue.js 2.0裡面拿掉了，變成特殊屬性v-html=變數，且屬性裡面也必須使用v-bind:attr，不能夠內插代換在屬性內。
* Vue2.0寫法補充：
* 【v-html】{{{三個大括號}}}停用了，要用v-html http://codepen.io/steward379/pen/ZLMPNq
* 【v-for】2.0 寫法 取出物件在前 id在後 li(v-for='(fruit,id) in fruits') http://codepen.io/frank890417/pen/bgmXNR
* 【v-model】css style 要用 v-bind:style ，class 要用 v-bind:class 並另構物件。取值跟二同。 http://codepen.io/steward379/pen/YNJLrG

## 推薦自學書籍　　　
* 網頁架構規劃：[Infortmation Architecture 100](http://www.books.com.tw/products/0010618801)
> 對於網頁專案規劃/結構講解很棒的實用工具書。
* 網格系統：[網格系統—字型編排原則](http://www.books.com.tw/products/0010414307)
> 對於設計平面/網頁重要的視覺切分法則，不厚但都是精華。

## 相關社群　　　　　
* [Front-End Developers Taiwan](https://www.facebook.com/groups/f2e.tw/)
* [高雄前端社群](https://www.facebook.com/groups/358503154261390/)
* [Vue.js 台灣](https://www.facebook.com/groups/vuejs.tw/)
* [Vue.js 讀書會](https://www.facebook.com/groups/616281401885574/?fref=ts)

## 課程使用API與圖片　

### API
* 公告資料: http://www.monoame.com/awi_class/api/command.php?type=get&name=notifydata
* 待辦清單資料： https://awiclass.monoame.com/api/command.php?type=get&name=tododata
* Hahow資料: https://awiclass.monoame.com/api/command.php?type=get&name=hahowdata
* 動態鋼琴譜面資料：
* 龍貓： https://awiclass.monoame.com/api/command.php?type=get&name=music_dodoro
* 小星星： https://awiclass.monoame.com/api/command.php?type=get&name=music_star

### 圖片
* Yellow Studio貓咪方向圖: https://awiclass.monoame.com/catpic/
* Yellow Studio網頁邊界: https://awiclass.monoame.com/img/margin/
* Yellow Studio網頁icon: https://awiclass.monoame.com/img/webpic/

### 音檔
* 一些特效音檔: https://awiclass.monoame.com/ballsound/
* 動態鋼琴音檔: https://awiclass.monoame.com/pianosound/set/

## 相關js庫與資源　　　
### 設計
* 配色資源: http://colorhunt.co/
* Icon 資源: https://thenounproject.com/

### CSS
* FontAwesome CDN: https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css
* Google Font: https://fonts.google.com/
### JS
* Jquery CDN: https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.js
* Vue CDN 1.x: https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.28/vue.js
* Vue CDN 2.x: https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.10/vue.js
* Skrollr CDN: https://cdnjs.cloudflare.com/ajax/libs/skrollr/0.6.30/skrollr.min.js
### SEO
* 常用meta/og資料產生: http://webcodetools.com/open-graph-generator/
* FB分享資訊抓取: https://developers.facebook.com/tools/debug/
* Google analysis:
### 靈感
* 各種設計 Pinterest https://www.pinterest.com/
* 動態/介面設計 dribbble https://dribbble.com/
* 超強大網頁 awwward http://www.awwwards.com/
### 一些不錯的線上教學資源
* JavaScript 30 days https://javascript30.com/
> 免費的30個小JS Project，訓練實作能力並且使用純js
* W3school http://www.w3schools.com/
## 單元完成報到區
Project集合繳交區： 2017.awiclass.monoame.com