重新解第四題花了大概八九個小時，這次比較不趕時間，所以重新檢視一下題目的要求及改善解題方式，雖然PDO及自訂函式己經幫忙省了不少功夫，但是第四題有很多畫面需要刻，雖然第一題也很多畫面要刻，但大多可以用複製貼上來完成，第四題的畫面差異比較大，所以刻畫面的部份浪費了不少時間，這部份的工作也沒有什麼好的解決方式，所以最終要靠PHP的部份來省時間。

這次比較大的突破是在選單的部份，由於選單除了要呈現大分類和中分類之外，還要統計各類別的商品數，之前的做法是在秀出選單時再各別去撈商品數出來，這個做法除了sql語法麻煩之外，有幾個選單就要去資料表query幾次的做法，其實效能很差，現在改善的做法是在選單的table加一個count欄位，然後寫一個函式去更新各類別的商品數，接下來就是在有任何影響到商品增減的動作上執行一次這個函式來同步計數的變化就可以了，這樣在做選單時只要一次存取就可以完成選單功能了；不過目前題目的設計上還是存在著問題，由於後台是可以刪除分類的，這會造成己經有分類紀錄的商品找不到對應的分類，也會造成統計上的錯誤，目前無解，除非題目做出修正。

另外在購物車的部份，之前大概花了三十多行在做登入狀態及購物車是否有商品的判斷，現在也換了一個做法，把購物車的陣列改成key-value的型態來分別儲存商品序號(key)及數量(value)，同時也把購物車的判斷流程單獨包成一個函式，這樣一來整個程式碼少了一半，而且也簡潔許多，至於存儲的部份，之前使用兩個陣列來儲存商品及數量，現在改成只要一個陣列就夠了，資料表也少了一欄。

修改後的做法

修改前的做法

後台的部份，原本最麻煩的分類及商品部份是做成兩個檔案來呈現，但看示意圖怎麼看都覺得應該是同一畫面的東西，所以索性改成在一個檔案中分為上下兩個功能的方式來呈現，這樣也少了一個跳頁的處理，同時也可以共用相同的js函式，比如刪除資料的功能，只要傳入資料表名及序號，就可以透過ajax功能去刪除對應的資料，類似的處理方式也可以減少不少js程式碼的工作。

最後是刻畫面的問題，目前能稍微加快作業的方式就是儘可能先把需要刻畫面的部份都先刻好，同時也把檔案都準備好，第四題我用上了二十多個檔案，這樣象購物車和後台訂票詳情的地方畫面都類似，就可以先用複製的方式先做好，然後再統一來處理程式碼的部份，這樣在解題上會比較順手一些。

雖然只是照進度把題目練習完了，不過今天完成的解題模式大概就是之後的定案了，在不使用framework的狀況下，利用pdo及自訂函式來協助解題，的確可以減少打字上的錯誤，同時也增加了效率和安全性；在每一個項目的解法上，目前也大致都定形了，沒有什麼新的做法可以研究了，之後應該就是照著這套模式把題目練熟就可以了。

簡單說一下目前的解題策略及順序：

1. 先建立PDO的連線物件，
2. 接著撰寫四到五個自訂函式，包括了新增/修改/刪除/取用資料等常用的動作，
3. 建立前後台的所有功能頁面基本HTML語法
4. 逐項功能製作及建資料表
5. 微調及測試

之後的安排就是每天100題學科的練習及每周兩題術科的複習，看來是妥妥的了。

這周的進度是第一，二題的練習，上周原本應該是三四題，結果只練了第三題，這周如果時間夠，要把第四題的進度補上。

這次解第一題，延續上周使用PDO的方式，實際用下來，除了仍然要手動打sql語法這點之外，整體對解題來說是有不小的幫助，至少不會像以前那樣常發生括號裏要放的變數打錯字或忘了放之類的，不過這次解題上幫助最大的應該是函式的代入，這是很早就想嘗試的做法，但是之前一直沒有時間好好的來研究，今天試了一下，果然很棒；原理就是把一些常用的資料庫操作包成函式來處理，其實PDO本身有提供前置語法的做法可以達到和函式相同的功能，不過那塊我還不是很清楚，再加上，我的需求會用到陣列的代入，目前找不到PDO有類似的用法，所以還是採用函式的方式來處理。

我目前做的函式有四個分別是刪除資料(delData($table,$seq)) / 新增資料(newData($table,$data)) / 修改資料(upData($table,$seq,$data)) / 整表取出(allData($table))，參數中的$data是陣列的資料，因此我在函式中會用迴圈的方式去取出陣列資料，再組合成需要的sql語句來送出，比如delData的內容；

function delData($table,$seq){
  global $pdo;
  $pdo->query("DELETE FROM ".$table." WHERE seq='".$seq."';");
}

這樣的做法，讓我省掉不少檢查sql語句的時間，只需要把參數代入就好了，目前還是有些地方是使用完整的語句，比如分頁的部份不是很麻煩，特別去寫一個函式好象也沒有省多少時間，所以類似這樣的情境我還在考慮要不要換成函式，比如計算資料表的總筆數這件事，做一個函式的確可以省不少時間，但是因為在題目中只有分頁會使用到這個功能，而分頁做到後來基本上都是直接複製貼上到所有需要分頁的功能去的，這樣算起來似乎弄個函式也不一定會省時間，不過就長期來看，這樣的做法還是很有幫助的。

最近因為工作上的需要，花了點時間研究一下Canvas的使用，目前許多工作職缺強調HTML5的，大多指的是對Canvas或video這類新標籤的熟悉，Canvas是一個畫布系統，採點陣圖的方式來呈現，搭配javascript後，除了簡單的平面圖形之外，也可以拿來做成動畫或遊戲。

我的練習是從做一個網頁小畫家開始的，一開始的功能還算簡單，畫畫線條，改改顏色什麼的都還不難，後來想到選顏色這件事是否能直接用Canvas來做一個時，花了我不少時間，一開始採用計算顏色然後畫出來的方式，感覺顏色怪怪的，研究後發現無法單畫一個點，內建函式提供的指令中沒有單獨畫一個點的功能，至少是兩點一線或是矩形，後來一路研究下去，發現要直接去操作Canvas的象素單位陣列，這牽涉到Canvas的原理是把一張畫布上的每個點的色彩資訊以一維陣列的方式展開的，為了製作這個陣列，我得把原本用來算色盤的HSL色系再改成RGB的色系再寫回去陣列才可以，所以我又花了時間研究色彩系統的轉換公式，最後是stackoverflow上找現成的來套用，做出來的成果如下圖，差異在於色彩的準確度上，使用畫線的方式來製作的色盤因為計算出來的hsl數值存在著一些誤差，在函式的自行進位後有許多相鄰坐標的顏色其實是同一色，所以看起來漸層模糊比較嚴重，而使用轉換公式再轉回rgb後，色彩的數值範圍變大，因此重覆的色彩數值減少，色盤看起來的顏色就比較飽滿一些。

色盤差異

後面有時間會再繼續研究一些比較實務的操作，象是圖表的製作或是小遊戲的製作。

這周主要目標的第三和第四題的重新練習，不過因為最近開始在研究一些新的框架和技術，所以除了先前的解法外，也打算試試用新的語法來解題，PDO是最先想到的改變，PDO是目前PHP官方推薦的資料庫連線方式，除了安全性的強化之外，最主要的改進就是對於多種資料庫的相容，以往如果要連接不同的資料庫，就得使用不同的資料庫語法，mysql的話是一連串mysqli_XXX的函式，PostgreSQL的話就是一堆pg_XXX的函式，如果將來有可能更換資料庫的話，那整個程式的語法都得改，PDO的功能就是整合連接資料庫的介面，只需要一套語法，就可以對應各種資料庫了。

之前一直沒有碰PDO是因為對物件導向的操作有點恐懼，不過最近在接觸的東西幾乎都是物件導向了，無法再逃避了，所以利用解題的機會直接就拿來使用了，由於PDO只有資料庫連接的部份算是使用了物件導向，其它的部份並沒有需要也跟著改成物件導向，所以其實我只花了半小時了解一下怎麼連接資料庫和撈資料後就上手了，解題不需要利用到預處理的機制，所以那塊我就先跳過了，這樣使用下來其實也和之前使用mysqli_的方式沒有太大差異。

使用心得上，我覺得對比之前的做法，PDO的一些函式用法的確簡化了一些程式的撰寫，整個結構也不會太亂，甚至因為可以少打一些符號和指令，我反而覺得在解題上使用PDO還比較快一些，比如之前在做分頁時，如果要計算總筆數，我會一行式的指令來寫；

$total=mysqli_num_rows(mysqli_query($link,”SELECT  * FROM post”))[0];

改成PDO之後的語法會變成;

$total=$pdo->query(“SELECT * FROM post”)->rowCount();

sql語法的部份並沒有什麼不同，但是在函式的應用上，從原本的一個包一個的語法變成直接用物件來取用，習慣之後其實縮短了不少打字時間，另外，像是PDO滿鼓勵直接用fetchALL()的方式把撈出來的資料丟到陣列去處理，雖然原本也是有mysqli_fetch_all()這樣的用法，但是一般坊間的書或課程很少有提這種用法，以我今天在解第三題的首頁動畫部份來說，如果是傳統的方式，我在海報主圖和按鈕的地方要分別去撈兩次一樣的資料，這其實滿消耗資料庫資源的，我今天的解法就改成直接fetchAll()到一個陣列後，直接在兩個地方把陣列的內容拿來使用就可以了，不用擔心資料指標的問題。

至於第三題的解題心得部份，因為這陣子在接觸canvas的操作，所以對jQuery的使用有些新的心得，因此在做動畫的部份，我也改了做法，原本是利用函式直接在DOM中找到元素再做字串處理再丟去放動畫，這樣其實要了解不少DOM的尋找，字串的取代技巧等等，我的新做法是直接把DOM的id和對應的動畫做成兩個陣列放在script區域中，這樣就不太需要去管DOM的部份，專心在陣列的操作上就可以了，程式架構就簡化不少，不過今天還是有遇到一個比較卡關的問題，就是jQuery的animate()這個動畫函式只能操作數值型的屬性，非數值型的屬性是起不了作用的，比如顏色；另外也發現一個字型的問題，當字型被縮到系統預設字型大小時，似乎就無法再縮小了，比如我想做一個字型由50px縮小到0px的動畫，然後發現字型到了12px時就停住了，等動畫跑到0px時字就直接消失，雖然這點小問題對解題成果來說不是什麼會扣分的要素，不過我倒是花了快一小時在研究這個問題，最後能用的解法就是使用CSS原生的動畫方式來解決。

接下來的幾周練習，我都會開始把一些新的做法直接帶入乙級的解題中，試試看能不能找到更快速的解法來

今天嘗試著重新解第一題時，發現無法在四小時內全解完，雖然及格應該是沒問題了，但這成了一個警訊，結訓後的這兩個月，我練打程式碼的時間的確少了很多，速度和應變上慢了不少，距離學科試大概還有七周時間，術科考試暫抓十周時間，扣掉工作的日子，一周大概剩四天可以準備，再扣兩天用來淮備上課要用的東西，實際可以用來備考的時間剩下一周兩天左右，想想不提早規劃一下，等到應考前一個月再來操心肯定來不及了。

目前算了一下日期，暫時的規劃如下：

1.每周練兩個題目一至二次，比如這周練一，二題，下周練三，四題，一題要大概四小時，一天練兩題就要八九個小時去了；

2.每天學科一百至兩百題，如果自己的學科系統來不及完成，就先用士商的線上試題系統來練習，一天兩百題大概也要一小時左右的時間；先做循序的題目練習，把一千兩百題都練上一兩次，等考前兩周再開始混合作答，一樣每天一至兩百題的量。

目前每周還會利用時間去解全國競賽的題目，所以時間算是排滿滿的了，充實。

這幾天在試解2014年第13屆全國身障技能競賽的網頁設計題目，這題目是我收集的三屆題目中算比較有難度的，全國競賽通常會有現場30% 的題目變化，我並不知道當年的30%變化是什麼，只能就目前從競賽網站下載的資料來做解題；

這題要做的是一個旅遊資訊網站，主要的難度第一個是檔案匯入及整理的工作，這部份一般的網頁設計程式教學並不一定會教到，由於題目是賽前一個月公佈的，所以如果賽前知道會有這個內容，預做準備的話也還算可以從容應對；首頁動畫的部份，當年的題目大多是要求做一個flash動畫出來，但這時代flash已經確認退流行了，所以這部份我改用jQuery來做動畫；最麻煩的是篩選資料的功能部份，這一頁中除了資料的撈取條件外，還有一堆的CSS要處理，版面的安排需要從無到有自建構出來，而左方的排名部份會使用到比較麻煩的sql語法，我在解題上也幾乎能用的技巧都用上了。

首頁動畫

資料匯入存在著一些陷阱，由於題目提供的檔案格式及編碼並不是當今通用的規範，所以花了點時間研究資料檔案的問題，再加上，資料的欄位格式其實也很怪，像是類別這個欄位有用逗號分開的，也有用斜線分開的，到底那一種才是正確的格式令人疑惑，而這問題到了篩選資料時也變成麻煩的問題，比如同樣一個type，有的資料前面有加了一個空白，這在做比較時會變成兩個不同的類別，所以得在撈取資料時再去處理一下空白的問題，另外，資料中有些欄位資料是有單引號或雙引號的，這在程式或sql語法的判讀上會造成問題，也得處理。

資料匯入

篩選資料的功能主要是在版面安排上會花費比較多的時間，由於題目並沒有要求得在1024×768的範圍內來做，所以這邊我採用的是全版面及RWD的方式來處理，不過我也只是做到能看的程度而已，畫面尺寸變化太大時還是會有版面跑掉的狀況。

景點篩選

話說Google接下來要把所有的非SSL加密網站的排序分數調降，最近也的確發現自己的網站就算下了關鍵字還是很容易被放到第二頁去，所以就花了點時間研究一下，利用sugarhost本身提供的免費SSL認證把網站做了升級，等未來有錢再去買比較好的。

先前放在blogger的網誌則是自動都升級為https了，最大的差異就是多了一個綠色的鎖頭，看起來比較高級一些，這個網址還可以使用兩年半，希望兩年半的時間足夠我賺點錢。

網頁設計乙級術科解題網

這一個月主要在忙著找工作及利用閒餘時間把這個解題網站做完，目前算是完成0.1版，把概略的解題想法及原始碼都放上網站了，接下來會再利用時間研究更精進的解題方式，並完善文字及圖說的內容。

最近也在導師的安排下接觸了一些和推廣乙級證照有關的工作機會，如果其它工作還是沒什麼消息，那麼接下來這一年就打算往教育方面的工作來嘗試看看。

最近開始在整理術科解題的詳細說明撰寫上，不過在程式碼片段的嵌入上一直存在問題，暫時先用截圖的方式來處理，但這會造成網頁的流量太大的問題，這兩天在研究git時，發現github上有個gist的功能，這個功能基本上就是讓你可以建立任何的文字片段，然後用一段javascript碼嵌入你的文字片段，如果你嵌入的是程式碼，那麼程式碼片段中會自動有文字高亮的效果，今天試用了一下，感覺不錯，由於嵌入後會是一段帶有class及id的完整HTML碼，所以也可以自己設一些css來美化整個程式碼片段旳內容，這樣就大大的降低了我解題網頁製作的複雜度，而且gist的速度也不慢。

gist和截圖程式碼的差異

昨天晚上花了點工夫把第一個版本的解題成果都上傳到github去，順便熟悉一下git的指令，然後果然發生一些狀況；

第一個狀況是第三題的影片檔當初轉檔的格式錯誤，所以檔案很大，整個專案快300mb就這樣被我傳上去了，後來改了格式，而且也把原始資料加入忽略清單，重新push後發現專案更大，原來是我忘了版控系統的最重要精神就是保留一切的修改紀錄，所以雖然我在本機上置換檔案，但是在版本紀錄中還是有我原本的檔案在，解決方式在git中很簡單，就是把隱蔵目錄.git砍掉，同時也把github上的專案刪除後重建，這樣再重新push後就是新專案的大小了。

第二個狀況是github在開新專案時，可以選擇要不要先初始化並建立一個readme.md檔，如果我選擇了初始化，就會push不上去，如果不初始化，照它給的引導說明就可以push上去，這原因合理，因為我在github上有了一個readme.md檔，但本地端沒有，所以兩邊版本內容不同的狀況下會無法push，所以我先做了一次pull想把readme.md拉下來做合併，結果拉不下來，上網google了不少資料都沒找到符合我狀況的解答，雖然用 push -f 強推上去也是可以的，但這樣就把會readme.md這個檔給蓋掉，花了兩個小時才找到原因，而且這個解決方式還是git在pull不下來時就有給了，只是我當時懶得去細讀英文的說明；這個狀況是因為git較新的版本不允許沒有同主支的分支做合併，而我在github上開的新專案和我本地端剛建立的新版控目錄都是獨立的新master，所以git認為這應該是兩個不同專案而且沒有關聯的東西，不應該合併；解決方式是在pull時，加上 –allow-unrelated-histories 這個參數，這樣就可以把沒有關聯的兩個分支合併在一起，之後再push上去就可以了成了。

把專案放上github後，之後要做本地端的練習或更新就簡單許多了，不然之前每練習完一次就要備份一次目錄，浪費不少空間，現在改成git來管理後，只要在每次有較大變動時做一次commit，就可以建立起一個版本，而且只會紀錄有變動的部份，也可以利用分支的方式來管理一些多元解法的動作，不再需要用多個版本或註解片段的方式來管理。

我的github網站

快一個月了，丟出去的履歷表都沒消息，哈哈哈，說年齡不重要的那幾個人資給我出來說話啊～～～。

目前的打算是先領幾個月的失業輔助，把一些作品做出來，然後試試接案來做，接案做不起來就隨便去打零工先撐著也是可以，其實不怕沒工作，只是有點不甘心學了那麼多，卻沒有地方可以發揮而已。

在找工作的過程中，看到不少工作的條件要求都有加上git這個項目，其實我在去年自己準備高普考時就有在使用git了，那時只有在自己的本機電腦上使用，我的作業環境就是找一些C語言的考古題拿來練習，練習完後commit上去，就沒有了，所以那時完全沒感受到git和以前使用的subversion有什麼不同，而且當時一個題目就開一個子目錄來放，解完也很少修改，所以也稱不上有版本控制；雖然很多人都說git不用買書，指令很簡單，但以我過往工作上使用過不少版控軟體的經驗來說，如果只是當成備份或同步資料來看，那的確是簡單，但如果要牽涉到專案開發流程的管理的，那就很多學問在裏面了，所以我幾年前就有買了一本書來看：

我的基本操作都是從這本書來的，這本書的內容也算是豐富，介紹了不少git相關的工具，尤其在遠端的部份說了不少，當時我覺得收獲不少，可是總覺得那裏怪怪的；後來上職訓課程時，我一度想在課程期間來使用git管控上課的內容，省得每天要備份進度，後來在架遠端目錄時發現卡住了，有些無法理解的地方存在，就暫停這個想法；之後的課程資料我是用google driver來存放每日的進度內容，google driver有個小功能，如果你上傳的是同名的檔案的話，可以選擇存為不同的版本，就是你還是只看到一個檔案，但可以在右邊的選項中看到不同的版本，這也算是一種版本控制。

結訓後找不到工作，但看到很多對git的要求，所以在逛天瓏書局時就順手再買了一本新的git的書：

這本書的內容比起前一本要深入許多，其中有不少冷知識的章節是在解釋一些git背後的原理，對於計概有一些基礎的人來說，看完這些冷知識，大概對git的實體運作就比較可以全盤掌握了，這本書的內容解答了我之前心中一些疑問，像是儲存空間的運用，分支及合併的機制等等。

看完書，打算接下來的作品及練習都用git來做管理，所以先在本機確認git還在，然後上github查了一下自己的帳號還在不在，想帳號和密碼花了點時間，確認帳號還在之後發現自己是三年前開的github帳號，然後只上傳一個檔案之後就沒了，想想也是，這三年發生了不少事，個人電腦還經歷了一次ssd毀損重灌的悲劇，所以之前裝在本機的github客戶端也不見了，anyway，接下來希望好好的跟git混熟，以後的程式碼會以放在github來公開，而不是放在部落格或google driver．