約莫三個多月前就在想系統說明頁該怎麼呈現，到前一陣子才有一個大概的雛型，
最近結案時間越來越近，人力卻被抽的越來越少，導致時間卡的越來越緊，
但是又不想把這雛型放棄不做，轉而讓使用者下載操作手冊，所以昨天決定一股作氣把他完成，
從：photoshop圖片繪製→HTML、CSS編排→jquery撰寫→教學內容撰寫→說明圖片擷取→配色→到最後突然才想要加上的圖片錨點功能，
歷經兩天，約略27.532小時的工作時數，終於完成了。
功能面是以一般廣告輪播的方式組合而成，也就是X方向一個移動動畫，Y方向一個動畫，
最後配合圖片拖曳的方式，製作圖片錨點的功能。
直接看結果：
老王賣瓜，自認為讚。
2011年3月22日 星期二
2011年3月14日 星期一
jQuery_仿ASP.NET-Menu控制項的選單
上星期五承認ASP.NET-Menu控制項通過不了無障礙A+的事實以後，決定用jQuery來寫一個。
需求是：
1. 通過無障礙A+機器檢測。
2. 仿ASP.NET選單多階層式選單。
3. 依不同權限顯示不同表單(目前分登入與未登入兩種)。
4. 按tab鈕可以檢索完成整個選單。
---------------------------------------------------------------
作法：
1. 有一個很奇妙的問題是，雖然ASP.NET的選單沒辦法通過無障礙的檢測，但其實他可以使用滑鼠及鍵盤操作，卻因為事件過不了，而用JavaScript方式做出的選單卻一定會通過。原因是什麼？說到底，如果用JS做出的選單在HTML上面並不會出現類似onMouseover等事件，甚至可以說他就是一個單純的div、lu、li、a標簽，對於一個只有這些標籤的網頁，不通過機器檢測也很難。所以第一項可以略過不看，先用JS做出選單後，再補足鍵盤操作即可。
2. 接下來進到重點，利用jQuery來製作一個仿ASP.NET的選單。
A. 定出要放選單的位置(參考)
B. 建構選單的HTML架構：
首先，以一個選單div(紅框)包住母選單之ulli(綠框)，再在選單DIV內加入子選單div(紫框)與子選單ulli(藍框)，看下圖應該可以很清楚架構。
C. 整理HTML：依上面的架構，會有一個母選單，與多個子選單，只需要接續建置出來就可以了。建置各項子母選單連接時，取的ID名稱是另一個重點；以下圖來說，內容包含建立的母選單與第一個子選單區塊，可以觀察母選單中，第一個有子選單的項目是『測繪成果資料供應』這個項目，而他超連接的內容是『#divList5』，必須與第一個子選單div的id相同。原因是這樣在任何事件取得該a標籤時，就可以抓到對應的子選單名稱。
D. 程式碼流程：
甲. 利用CSS將所有的子選單以隱藏方式呈現。
乙. 當滑鼠移到任何母選單項目時確認子選單都消失。
丙. 若在href屬性抓取到相對應的ID，讓相對應的子選單出現。
丁. 當滑鼠移出整個區塊選單時，確認子選單都消失。
主要程式碼如下：
F. 美觀：當然如果有人可以或是自己就可以，你可以對選單做很多的美化工作，或是用個不錯的動畫效果。
3. 下一個重點，通常選單會隨著權限來做變化，這邊我的想法很簡單，因為應該有權限的頁面都已經用ASP.NET的機制鎖在登入頁之後，所以即便我的CSS與JS在瀏覽器上失效，使用者看到不應該出現的項目，點選後也無法進入；所以這邊我的作法就是單純的把他隱藏起來，判斷帳號角色屬於可見的權限時，才將其顯示。而一次全顯示與全隱藏抓取的方法是藉由css方式。以下圖來說，就是在要登入才顯示的選項加上hideMenuRole的CSS。
4. 完成了滑鼠控制以後，必須要加上鍵盤控制才能說是基本的無障礙，所以加上focus與blur事件，讓滑鼠移上與移下所產生的效過，都可以藉由focus執行。另一個重點是按tab鍵必須要依序巡覽整個選單，所以在母選單都加上tabindex屬性，並且在子選單也加上相對應的tabindex。比如說tabindex=2的母項上有子選單，則在子選單上面都加上tabindex=2之屬性，依此類推。
最後檢視一下在各個瀏覽器上的執行情況(以下為ie6、ie8、chrome10.0.648.127及firefox3.6.13)：
執行影片(滑鼠操作→登入後選單改變→利用鍵盤TAB鍵操作)
需求是：
1. 通過無障礙A+機器檢測。
2. 仿ASP.NET選單多階層式選單。
3. 依不同權限顯示不同表單(目前分登入與未登入兩種)。
4. 按tab鈕可以檢索完成整個選單。
---------------------------------------------------------------
作法：
1. 有一個很奇妙的問題是，雖然ASP.NET的選單沒辦法通過無障礙的檢測，但其實他可以使用滑鼠及鍵盤操作，卻因為事件過不了，而用JavaScript方式做出的選單卻一定會通過。原因是什麼？說到底，如果用JS做出的選單在HTML上面並不會出現類似onMouseover等事件，甚至可以說他就是一個單純的div、lu、li、a標簽，對於一個只有這些標籤的網頁，不通過機器檢測也很難。所以第一項可以略過不看，先用JS做出選單後，再補足鍵盤操作即可。
2. 接下來進到重點，利用jQuery來製作一個仿ASP.NET的選單。
A. 定出要放選單的位置(參考)
B. 建構選單的HTML架構：
首先，以一個選單div(紅框)包住母選單之ulli(綠框)，再在選單DIV內加入子選單div(紫框)與子選單ulli(藍框)，看下圖應該可以很清楚架構。
C. 整理HTML：依上面的架構，會有一個母選單，與多個子選單，只需要接續建置出來就可以了。建置各項子母選單連接時，取的ID名稱是另一個重點；以下圖來說，內容包含建立的母選單與第一個子選單區塊，可以觀察母選單中，第一個有子選單的項目是『測繪成果資料供應』這個項目，而他超連接的內容是『#divList5』，必須與第一個子選單div的id相同。原因是這樣在任何事件取得該a標籤時，就可以抓到對應的子選單名稱。
D. 程式碼流程：
甲. 利用CSS將所有的子選單以隱藏方式呈現。
乙. 當滑鼠移到任何母選單項目時確認子選單都消失。
丙. 若在href屬性抓取到相對應的ID，讓相對應的子選單出現。
丁. 當滑鼠移出整個區塊選單時，確認子選單都消失。
主要程式碼如下：
F. 美觀：當然如果有人可以或是自己就可以，你可以對選單做很多的美化工作，或是用個不錯的動畫效果。
3. 下一個重點，通常選單會隨著權限來做變化，這邊我的想法很簡單，因為應該有權限的頁面都已經用ASP.NET的機制鎖在登入頁之後，所以即便我的CSS與JS在瀏覽器上失效，使用者看到不應該出現的項目，點選後也無法進入；所以這邊我的作法就是單純的把他隱藏起來，判斷帳號角色屬於可見的權限時，才將其顯示。而一次全顯示與全隱藏抓取的方法是藉由css方式。以下圖來說，就是在要登入才顯示的選項加上hideMenuRole的CSS。
4. 完成了滑鼠控制以後，必須要加上鍵盤控制才能說是基本的無障礙，所以加上focus與blur事件，讓滑鼠移上與移下所產生的效過，都可以藉由focus執行。另一個重點是按tab鍵必須要依序巡覽整個選單，所以在母選單都加上tabindex屬性，並且在子選單也加上相對應的tabindex。比如說tabindex=2的母項上有子選單，則在子選單上面都加上tabindex=2之屬性，依此類推。
最後檢視一下在各個瀏覽器上的執行情況(以下為ie6、ie8、chrome10.0.648.127及firefox3.6.13)：
執行影片(滑鼠操作→登入後選單改變→利用鍵盤TAB鍵操作)
2011年3月12日 星期六
魔獸啟示錄
a. 夾頭四人幫：遊戲一個人玩不錯，與朋友一起玩更讚，工作亦然。能夠個人成長固然重要，但團隊合作才是我們坐在同一區塊共事的最大誘惑，而合作的第一步是實際地、盡力地幫忙。
b. 奧妮克悉亞前：團隊信任來自於別人的能力，信任的累積來自於一次次的合作，足夠的信任與了解，才能蓄積更大的能量。當每個人心中，默默的希望為什麼王不能一個人打就好？為什麼案子不能一個人做就好？就表示現在的模式失敗了。
c. 狼與鼠：狼人怕老鼠？笑話，但是再卑微的人(員工)都值得了解。
d. 聚鼠成死：微小的力量，聚起來也是洪水猛獸。
e. 箱後觀景：處處都有觀察者，微小的改變就可以觸動人心。有一個機緣讓自己思考了，想到了應該改變的方向，說出了改革的話語，自然會有人觀察您做出的改變，而失望往往來自於一次次的謊言。
f. 狼與羊：每個人底限不同，何必天天試探界線？盡力、狼與羊也可以共處。人生、工作上的期限，能力內的趕快完成，可以獲得更多的滿足。
g. 領航者：選擇拿著韁繩，就必須扛下相對的責任。而責任不光是馬車上的貨物，更多的是馬車上的人們。您可以不視這些人為夥伴，但您不可以忽視所作所為對於車上人的影響。
h. 翻車自省：酒駕的人在路邊後悔，對方家屬說：『還好人還安全，請你改掉這不好的習慣』，當下『好』，三個月後他又酒駕了。員工離職的老闆在辦公椅上思考，離職者說：『有很多東西可以改。』，老闆說：『好』，半年後又有人一樣的原因離職了。說很容易，事情有些難有些簡單，連簡單的都不做，就是沒誠意；一值用'謊言'的人更沒誠意。
i. 鎂光燈：眾所注目很好，但低調也很好。
j. 危險不自知：話語會讓人身處危險，實話要講不講在於自己，但當大家都不講，就只能停在原地。好吧~~危險很近。
k. 靈活胖子：看見別人胖，沒看見別人靈活，優缺都該看。
l. 救救那些人：能力範圍內，讓身處的環境變好是件善事。
b. 奧妮克悉亞前：團隊信任來自於別人的能力，信任的累積來自於一次次的合作，足夠的信任與了解，才能蓄積更大的能量。當每個人心中，默默的希望為什麼王不能一個人打就好？為什麼案子不能一個人做就好？就表示現在的模式失敗了。
c. 狼與鼠：狼人怕老鼠？笑話，但是再卑微的人(員工)都值得了解。
d. 聚鼠成死：微小的力量，聚起來也是洪水猛獸。
e. 箱後觀景：處處都有觀察者，微小的改變就可以觸動人心。有一個機緣讓自己思考了，想到了應該改變的方向，說出了改革的話語，自然會有人觀察您做出的改變，而失望往往來自於一次次的謊言。
f. 狼與羊：每個人底限不同，何必天天試探界線？盡力、狼與羊也可以共處。人生、工作上的期限，能力內的趕快完成，可以獲得更多的滿足。
g. 領航者：選擇拿著韁繩，就必須扛下相對的責任。而責任不光是馬車上的貨物，更多的是馬車上的人們。您可以不視這些人為夥伴，但您不可以忽視所作所為對於車上人的影響。
h. 翻車自省：酒駕的人在路邊後悔，對方家屬說：『還好人還安全，請你改掉這不好的習慣』，當下『好』，三個月後他又酒駕了。員工離職的老闆在辦公椅上思考，離職者說：『有很多東西可以改。』，老闆說：『好』，半年後又有人一樣的原因離職了。說很容易，事情有些難有些簡單，連簡單的都不做，就是沒誠意；一值用'謊言'的人更沒誠意。
i. 鎂光燈：眾所注目很好，但低調也很好。
j. 危險不自知：話語會讓人身處危險，實話要講不講在於自己，但當大家都不講，就只能停在原地。好吧~~危險很近。
k. 靈活胖子：看見別人胖，沒看見別人靈活，優缺都該看。
l. 救救那些人：能力範圍內，讓身處的環境變好是件善事。
2011年3月11日 星期五
asp.net_Menu控制項若要過無障礙A+請先測試再使用
手頭上的案子需要通過無障礙(A+等級)檢測，前天突然覺得檢測的時機到了，
跟同事要了FreeGo 3.1.1版，點擊兩下，輸入網址，按下開始....
第一次跑完，總計5000+個錯誤，先將一些alt標記上去後，還有3894個錯誤。
3894？什麼東西可以有3894個錯誤.....
看似很恐怖，仔細一看全部的原因都在一項，
「H209002 確保事件的啟發不要求一定得使用滑鼠」，這是什麼意思？
其實就是除了滑鼠以外要可以用鍵盤操作，他判斷的標準是：
1. 輸出的HTML內有onmousedown，就必須有onkeydown
2. 輸出的HTML內有onmouseup，就必須有onkeyup
3. 輸出的HTML內有onclick，就必須有onkeypress
3. 輸出的HTML內有onmouseover，就必須有onfocus
3. 輸出的HTML內有onmouseout，就必須有onblur
瞭解他的原因以後....真是對3894個錯誤完全沒有頭緒。
-------------------------------------------
找了一下資料發現，因為我的menu選單使用asp.net內建的menu控制項，
而Menu控制項在輸出到HTML時，會產生onmouseover、onmouseout、onkeyup三個事件，
所以必須要加入對應的三個事件才可以通過程式的檢測。
所以我當時的想法是：
1. 一定可以加入這些很一般的事情。
2. 如果不可以，我就用jquery把他加上去。
事實證明，我失敗了 XD
首先，第一個想法：
A. Menu控制項若用Attributes.add("onfocus","")的方式加入事件，只能加到最外層，也就是Menu自己，下面的子層不會改變。
B. 若是使用樣版的方式，雖然可以把類似menulist使用label等控制項取代掉，但去觀察產出的HTML，onmouseover等事件其實是加在tr裡面，所以即便在樣版的label上加了onfocus等事件，還是無用。
接下來，第二個想法：
A. jquery等javascript皆可以正確的將onfocus事件加上去，但是HTML一開始輸出後，即便利用JS動態的加上這些事件，操作起來也都有效果，但輸出的HTML並不會隨之改變，也就是說那些動態的東西，監測程式也無法監測到，所以無效。
所以本篇只有一個重點，就是你要過無障礙A+，而你有用ASPNET的Menu，經過我兩天的測試，我認為無法通過，所以後來只好選擇用jquery手工打造Menu了。(也可能可以，但是我沒找到方法)
跟同事要了FreeGo 3.1.1版，點擊兩下，輸入網址，按下開始....
第一次跑完，總計5000+個錯誤，先將一些alt標記上去後，還有3894個錯誤。
3894？什麼東西可以有3894個錯誤.....
看似很恐怖，仔細一看全部的原因都在一項，
「H209002 確保事件的啟發不要求一定得使用滑鼠」，這是什麼意思？
其實就是除了滑鼠以外要可以用鍵盤操作，他判斷的標準是：
1. 輸出的HTML內有onmousedown，就必須有onkeydown
2. 輸出的HTML內有onmouseup，就必須有onkeyup
3. 輸出的HTML內有onclick，就必須有onkeypress
3. 輸出的HTML內有onmouseover，就必須有onfocus
3. 輸出的HTML內有onmouseout，就必須有onblur
瞭解他的原因以後....真是對3894個錯誤完全沒有頭緒。
-------------------------------------------
找了一下資料發現，因為我的menu選單使用asp.net內建的menu控制項，
而Menu控制項在輸出到HTML時，會產生onmouseover、onmouseout、onkeyup三個事件，
所以必須要加入對應的三個事件才可以通過程式的檢測。
所以我當時的想法是：
1. 一定可以加入這些很一般的事情。
2. 如果不可以，我就用jquery把他加上去。
事實證明，我失敗了 XD
首先，第一個想法：
A. Menu控制項若用Attributes.add("onfocus","")的方式加入事件，只能加到最外層，也就是Menu自己，下面的子層不會改變。
B. 若是使用樣版的方式，雖然可以把類似menulist使用label等控制項取代掉，但去觀察產出的HTML，onmouseover等事件其實是加在tr裡面，所以即便在樣版的label上加了onfocus等事件，還是無用。
接下來，第二個想法：
A. jquery等javascript皆可以正確的將onfocus事件加上去，但是HTML一開始輸出後，即便利用JS動態的加上這些事件，操作起來也都有效果，但輸出的HTML並不會隨之改變，也就是說那些動態的東西，監測程式也無法監測到，所以無效。
所以本篇只有一個重點，就是你要過無障礙A+，而你有用ASPNET的Menu，經過我兩天的測試，我認為無法通過，所以後來只好選擇用jquery手工打造Menu了。(也可能可以，但是我沒找到方法)