ICMP共構平台切版
===
>此為留職停薪前的工作交接文件之一
>[name=Alan Lin] [time=2020 05 30][color=#337ab7]

壹、切版所需技能
---
### 一、軟體技能
- [ ] Adobe illustrator (向量)
- [ ] Adobe Photoshop (點陣)
- [ ] Adobe XD 或 Sketch (UI 排版軟體 像scss一樣可設定變數 模組化)
- [ ] Chrome 開發者工具
- [ ] VS Code

**VS Code 插件**
>**Bracket Pair Colorizer**
>幫你把一樣的括號用同樣的顏色，不要括號用不一樣的顏色。讓使用者容易分辨。
https://marketplace.visualstudio.com/items?itemName=CoenraadS.bracket-pair-colorizer
>**Path Intellisense**
幫你快速找檔案路徑 autocomplete
https://marketplace.visualstudio.com/items?itemName=christian-kohler.path-intellisense
>**Bookmarks**
可以標一個書籤在你的code指定的位子。 之後就可以在你的scrollbar 看到藍色的提示。
https://marketplace.visualstudio.com/items?itemName=alefragnani.Bookmarks

### 二、網頁技能
- [ ] HTML
- [ ] CSS Animation
- [ ] SCSS
- [ ] jQuery
- [ ] git版控

>語法支援檢測
https://caniuse.com/
>HTML語法表
https://www.w3schools.com/
>Emmet
https://docs.emmet.io/cheat-sheet/
>30天掌握Sass語法
https://ithelp.ithome.com.tw/articles/10126703
>Git入門指南
https://backlog.com/git-tutorial/tw/

### 三、無障礙網頁規範

>無障礙網頁開發規範2.0版
https://www.youtube.com/watch?v=9pC2hNMMfoQ
>無障礙資料上稿注意事項
https://docs.google.com/document/d/1pjQgavyCp_I5DX3pEMJj_HRPQTLPljoxlVdZ1dJ1mwA/edit
---

貳、切版步驟
---
### 一、先把設計檔裡的圖片元素先切出來。
XD Sketch 左下 Export
Photoshop 切片工具
### 二、拉首頁模組 客制html先寫好。
### 三、找相近類似的現成樣式去改。
**去公司伺服器 git_repository資料夾找 (需用git軟體下載)**
模組列表： [4.0 模組盤點_2018](https://docs.google.com/spreadsheets/d/1AF6YRalE_kJNZnhRfWln3zWUZpZW-yt3HJXy2P6BD1o/edit)
模組結構： 每個模組 class name下會有hd ct ft 　

<div class="模組類型　模組名稱">
    <div class="in">
        <div class="hd">/*模組主標題 或是 搜尋開關按鈕*/
        </div>
        <div class="ct">/*模組主要內容*/
        </div>
        <div class="ft">/*更多 上下一則*/
        </div>
    </div>
</div>

**產生css主要四支SCSS**
==cp.scss== CP頁限定
==global.scss== 全部的樣式 (模組scss會先引入，page_開頭的scss，再引入global.scss)
==page.scss== 內頁限定
==print.scss== 預覽列印

> 本機端需安裝 [Fire.app](http://fireapp.kkbox.com/) 才能產生css

**global.scss裡主要變數設定的兩支SCSS**
==_base-function.scss== % 函式
==_base-variable.scss== $ 設定值

**個人新增常用兩支SCSS**
==_Architecture.scss== 後臺 首頁模組 預覽限定
==_index.scss== 首頁限定 (區分CP頁的整合式網頁)

**不在共構母版裡但常用js**
==taipeiExtendNav.js== 錨點滑動 源自北市府官網

**個人新增js**
==forNCC.js== 自訂js去解決無障礙檢測問題
==RWDtable.js== 表格抓th生data-title 搭配 class="RWDtable"
>範例網站：[中油油價表](https://www.cpc.com.tw/historyprice.aspx?n=2890)

==addActive.js== 做一開始載入動畫
>範例網站：[花博公園](https://www.expopark.taipei/Default.aspx)

==theme.js== 改色　用字級大小的JS去改的
>範例網站：[水試所](https://www.tfrin.gov.tw/)

### 四、做好的樣式檔　上傳至　jtool/版型管理/SASS Source。
==Images== 圖片
==Js== javascript
==Sass== 樣式
==Architecture.json== 產生頭尾的html
以上四個壓縮成一包zip上傳 (注意mac iOS系統會產生 ._開頭的隱藏檔 )

### 五、更新樣式檔 jtool/WebService測試(建立站台)/網站管理/更新樣式

1. 如果有更新json 需進後臺按地球發布
1. 清暫存
---

參、注意事項
---
### 一、共構目前存在的問題。

1. 不同網站模組標題 h2標籤 不正確。
2. area-form.search hd a 搜尋標題是英文字且不能點擊。
3. RSS按鈕 更多按鈕需帶出標題。
3. 每頁筆數旁邊" go "改成" 執行"
4. 相關影片的icon 仍然是相關圖片的icon