jQuery筆記(1)--append()

append()方法是將字串資料、元素或物件依附在選定的wrapped set，範例:
$("#block").append("Hello!!");
上述作用為將字串Hello!!放在id為block的元素內容後面。

$("#block").append($("a.Hlink"));
上述作用為將具有類別名稱為Hlink的‹a›‹/a›資料(tag及文字所有內容)放在id為block的元素內容後面。

重點:當目的地(#block)有多個的時候，append source的元素將停留原地，並以複本附加於各目的地元素內容後。若目的地(#block)只有一個時，append source的元素將直接移動至目的地元素內容後。

appendTo(target):將選定的wrapped set依附在指定的targer(字串或元素)內容後。
$("‹p›test‹/p›").appendTo("#block p");
上述作用為將‹p›test‹/p›內容上在id為block元素裡p元素內容後面。

$("#flower").appendTo("#block p");
上述作用為將id為flower的元素內容，放在id為block元素裡p元素內容後面。
重點:目的地的多個或單個，決定source是移動或複製。

prepend(),prependTo(),insertAfter(),after(),insertBefore(),before()運作方式類似!!

實用的「專案管理之工具應用」課程

9月26日(六)上完台大嚴慶齡工業研究中心所開辦的「專案管理之工具應用」課程。在專注於各種專案管理工具學習操作與演練的同時，個人有下列心得:

1. 專案的成果是需要一個團隊合作來完成。面對Project的每個issue，每個人都有各自的Solution想法。在集眾人之智、討論、整合意見達成共識的目的下，"工具"的應用就扮演具體而實質的功效。簡單而言，工具除了幫助尋求問題的解答之外，也是協助團隊進行"溝通"的好方法!!
2. 了解各個專案管理工具的功能，並在特定的目的下善加利用。例如Decision Tree主要的功能在於透過評估或蒐集所得事件發生機率、收益與成本等數據資料並計算所得，藉以在多種方案下進行最佳選擇，這就是Decision Tree的決策功能。但你無法要求它提供過程中其它因素的影響分析。
3. 在使用"工具"之前，對於數據資料的蒐集是非常重要的。網路發達的環境，對於資訊的取得通常以"google一下"的方式。然而往往忽略了PMBOK裡最基本的重點---依據"組織過程資產"與"專家判斷"工具。雖說"組織過程資產"端視服務的公司是否有從事知識管理，建立PMIS之類豐富的專案Lessons Learned。但從事專案管理的過程中，要時時把握住PMI所強調的核心理念。
4. 箭線圖(ADM)結合Time Flow，強調置高點的宏觀檢視。記得當時在上PMBOK的時程管理，對於ADM通常只Focus在結點、箭線、虛箭線的圖示含意與任務關聯，然而這次課堂上，將ADM結合時間對照的觀念，強調Diagram、任務期間長度與時間軸三者相呼應的要求，如此透過ADM能宏觀整個專案任務在依存關係與時程展現上更加明確具體。

最後很高興後兩堂課所講授的品質管理其中6個管理工具，老師要我們使用海報、便利貼、繪圖筆等傳統工具來完成6個Diagram。透過小組brainstorm、溝通、整合後，按照講義的step by step要求一步一步扎實進行，實作成牆壁上的六大張海報圖，讓工具的應用與操作更加深刻。

收到日本寄來的OCUP UML認證證書了!!

9月19日(六)於台大嚴慶齡工業研究中心上完課回到家裡，便收到由日本寄來的OCUP UML認證證書快遞。從通過考試到收到證書，共計三週又四天。對於該證書的樣式及內容一直心存好奇，網路上搜尋到的資料無法完整一窺全貌。利用這個機會來跟大家一步步介紹圖說吧!!

剛收到由日本Tokyo快遞寄來的UML證書

內含恭賀問候文、證書正本及個人ID卡的透明資料夾

OMG發給的個人認證ID卡

UML Professional Fundamental證書正本

QFD展開範例

9月6日參加為期一個月由台大嚴慶齡工業研究中心所開辦的『專案管理工具之應用』課程，第一堂課介紹QFD及範例實作。Case Study為"Design an excellent recreation bicycle"。做為Product Analysis的tool，將customer的expectation translate to specification，definition Product Scope。蒐集聆聽顧客的需求並轉化成產品研發需求。QFD也稱為"house of quality"。

藉由專家的interview、group discussion、media research及user訪談後，QFD展開如下表:

讓PNG去背效果也能在IE6正常顯示

網頁上所插入產品之類的圖片，若是沒有去背的話，則會有"貼膏藥"的塊狀感。單純的去背處理最好是在同頁面背景色的情況下處理，才能降低鋸齒邊的明顯度。

在IE7問世後，網頁設計人員紛感欣慰的是對PNG透明背景的支援。然而IE6市佔率存在的事實與客戶IE6相容的要求下，仍可能要準備GIF圖檔給IE6使用。

要解決PNG去背效果在IE6正常顯示，要使用微軟IE專用的濾鏡語法:

‹style type="text/css"›
.bgPhoto { filter:progid:DXImageTransform.Microsoft.AlphaImageLoader (src='system_stop_ok.png', sizingMethod='image');width:365px;height:157px;}
‹/style›

‹body›‹div class="bgPhoto"›‹/div›‹/body›


在‹div class="bgPhoto"›‹/div›容器裡會呈現一張寬365px、高157px的PNG圖，而且在IE6、IE7上均能正常顯示已有的去背效果(要PNG圖本身已做好去背才行)，FireFox則是以正常的CSS語法即可!!

語法說明如下:

1. sizingMethod有crop、image、scale三種。image是預設值，也就是頁面PNG圖片會依照原本Size顯示。如果使用scale的話，圖片則會依照div容器的尺寸縮放；如果用crop且圖片尺寸比DIV還大的話，圖片超出DIV的部分則會被切掉，局部顯示。
2. filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/sample.png', sizingMethod='scale',enabled=FALSE);
   enabled則為效果的開關，如果值是false或1，就等於整個濾鏡效果都停用。
3. 使用AlphaImageLoader的做法，無論是寫在CSS還是HTML中，其圖片路徑一律皆採用HMTL檔案位置與圖片的相對路徑來寫(非CSS檔案與圖檔的相對路徑關係哦!!)，否則會找不到圖片。

非關CSS的IE8問題

客戶對於網站的瀏覽器支援要求含蓋IE6、IE7、IE8及FireFox最新版(目前是3.5.2)，近日在緊鑼密鼓的測試階段中，針對四個瀏覽器在CSS解讀差異所造成的跑版進行調整修改。然而在順暢的調整完畫面中卻發現我的IE8所呈現的完美畫面卻在同事的電腦裡"跑版"。在求證第三者後，發現唯獨只有一人的IE8所呈現的畫面有問題。時值農曆7月不會是卡到陰吧?!

在檢視每個安裝IE8同事的OS版本後發現，相同作業環境、相同IE8版本，卻有不同瀏覽結果。最初懷疑是否為IE8測試版UPDATE成IE8正式版所造成的問題。因此GOOGLE後注意到IE8"相容性檢視"功能，有些網站無法在 IE8 中正確顯示或正常運作，則啟用"相容性檢視"功能，果然恢復正常。

安裝IE8後，在iecompat.dll檔案裡會有一份Domain列表，表示在列表中的網站預設啟動"相容性檢視"，也因此在工具列上該功能無法做開/關設定，icon自動消失。而IE8的"相容性檢視"，就是採取IE7標準模式來讀取網頁，因為網頁符合IE7標準模式，此時在IE8自然會顯示正常。

參考文章:
1. 微軟技術支援服務(http://support.microsoft.com/kb/956197/TW/)
2. 小鎮遊跡點點村 (http://www.dotblogs.com.tw/littlebtc/archive/2009/04/11/ie8-modes-2.aspx)

我跟老婆陪著瑄寶，一家三口進京趕考!!

8/29(六)天氣晴朗，我跟老婆陪著瑄寶，一家三口進京趕考，前往台中市"台中公園"參加第十一屆中華經典會考。

早上7:30準時於五股國小校門口集合，與五股國小同學及家長一同搭車前往台中公園。在老婆日以繼夜的要求與陪讀下，實力堅強的瑄寶共報名7科應考，分別為"三字經"、"弟子規"、"孝經"、"千字文"、"朱子治家格言"、"禮運大同篇"及"道之宗旨"。

口試過程可不像一些小孩因背誦不熟靠考試官提示蒙混過關，三歲八個月的瑄寶那真材實料、驚人的記憶力可讓口試老師驚訝而稱讚不已，做父母的我也給它小小地驕傲起來，七科均順利過關!!

考完試，行程安排前往新竹寶山鄉總體營造社區參觀，並實作黑糖饅頭及DIY公仔，自己玩得比小孩高興。之後前往寶二水庫郊遊走走，一覽水庫風光，四週環境乾乾淨淨空氣清新感覺還不錯!!

一天的行程直到晚上7:30回五股，過了充實歡樂的親子美好時光。

順利通過OCUP UML認證考試

雖說目前的工作主要是做Web UI設計，但身處於系統整合服務公司，Project Team為軟體開發，因此對於軟體開發的Methodology也極為感興趣，認識與了解軟體開發流程中SA及SD的R&R以及相關工具這也是理所當然。在一股求知慾的驅動下買了” UML系統分析與設計- An object-oriented approach”一書研讀，書中生活化的敘述與深入淺出的介紹，透過工作實務上的比對聯想，讓我很快地理解與吸收，也值得推薦給想要對SA及SD有所認識的人。

正如書名所提，在軟體開發的各個階段，UML均提供不同的功能與相關圖形的產出。工作實務上也常聽到交付Use Case Diagram、Activity Diagram、Class Diagram、Sequence diagram….等圖，書裡分別也做了介紹。在得知OMG 有張OCUP UML認證後，也吸引我更深入去了解，並藉由認證考試驗收學習成效。因此在看完本書之後，又去購買『OCUP/UML初級認證攻略』一書研讀。

在自修看完兩本書後，考量專案即將進入上線前緊鑼密鼓的測試階段，屆時加班晚回家，K書的時間會變少，因此Booking了8月25日(二)早上十點於復興南路資策會考試。該天上午提前1小時報到，櫃台工作人員表示要等考場準備好才能進入，大約9:40告知可以準備進入考試。84題花了50分鐘答完，按下End Exam後成績結果”PASS”，順利通過考試。據說兩週後證書會從日本寄送抵達，期待中啊……

通過認證只是證明達到該門技術所要求的基本門檻標準，工作實務上的應用才能更精進、更上一層樓!!

頁面含有Anchor tag在Firefox瀏覽時會有問題

當網頁內容豐富而讓頁面拉得很長時，為求use friendly，設計人員會以Anchor tag來加速回到所指定的內容處，然而最近在實作時碰到下列問題:
若在FireFox瀏覽器上點選link到Anchor處，在頁面移動時，會讓頁面區塊部分被遮蓋住形成跑版。
這是因為Anchor所處外部容器在CSS定義上有overflow:hidden的宣告，因此在執行link連結到Anchor時，該容器會上移到上一層容器之外，造成上方部分區塊超出範圍而形成遮蓋的缺陷。因此，在CSS定義上要針對Firefox修改overflow宣告以解決此一問題!!

收到Microsoft SQL Server 2005證照了!!

還記得6/22(一)一如往常外出準備上班，卻瞞著老婆來到資策會10:00報到準備考70-431 Microsoft SQL Server 2005認證考。憑藉著對DB的濃厚興趣與強烈求知慾，上班時若完成手上工作便利用時間看微軟官方推薦的電子書，並且按照各章節範例實際操作。因軟體開發專案屬性，擔任DBA的同事就成了我請教對象。除了兩本教課書外，並到Microsoft SQL官網下載影音教材，網路上也廣泛搜尋各方考照心得文章並蒐集了一些考古題。

自從2008年9月底考上PMP後，運用專案管理手法養成了"目標設定"與"讀書計畫"，一旦Go/No Go評估確認執行後，讀書時程規畫、階段Milestone設定、讀書計畫的落實執行與成效追蹤，自然而然一氣呵成，基於吸收新知與興趣為出發點，加上達成目標---"通過考試取得認證"的效益，讀書雖累但卻也甘之如飴啊!!

雖說已有充分準備但仍舊缺乏信心，相信這是大家都有過的經驗。因此也就沒有事先告知老婆(懷著點欺騙的罪惡感)，到了資策會報到填寫資料後進入考場，在盯著電腦螢幕時而緊張、時而輕鬆的情境也似不陌生，考完送出後等待成績公布時聽著硬碟嘎嘎叫的幾秒鐘腦袋一片空白，就期待Congratulation這個字浮現在眼前。其實考完之際約略知道應該可以Pass，只是高分通過或低空掠過的差別。最後如預期的Congratulation斗大的字出現，心情頓時飄飄然如卸下一塊大石般輕鬆愉悅，就是一個字---爽!!

其實，通過考試取得認證只是代表著你通過門檻擁有該領域初步的知識與技能，後續還需靠工作實務培養進階的能力。


7/16(四)證書寄到，7/17晚上慢慢地將它放入訂製的證照框內，靜靜地欣賞著.......

美國微軟公司寄過來的證照外觀

SQL 2005證照

成功的專案經理(PM)應具備良好人際關係處理手腕

近日閱讀專案管理大師James P.Lewis所寫的"Project Leadership"一書，開宗明義強調身為PM，"人際關係"的處理決定專案的成敗，若是缺乏有效與人互動的能力，即使精通專案管理各項工具，最後只不過是成為精確記錄失敗結果。

曾經見識過一位PM與服務一年多的客戶在會議上相敬如賓，顏面神經緊繃的陌生、冷漠關係。也體會過專案團隊與客戶間談笑風生的良好溝通氣氛。漸漸體會到PMI對於成功的專案要滿足Sponsor與Stakeholder的需求與期望的含意。人際關係為PM重要的修練，它是專案管理的基礎工程。PM花80%的時間從事"溝通"，無非是希望解決問題，滿足相關利害關係人的需求與期望。互動技巧與情感的培養有助於達到溝通的目的，這也是我近日計畫努力養成的自我成長課題。

客戶的主觀、片面要求往往令人啼笑皆非，哭笑不得，在彼此拉鋸的過程，"以客為尊"、"和氣生財"仍為大前提進行溝通協調，致力創造雙贏的局面是努力的目標。在網頁設計的服務上，必須時時提醒自己最終是在服務客戶，不是在藝術創作，必須以滿足客戶的需求為主，藝術的成分就留給有眼光的客戶。時時檢視自己是否過於主觀，常懷包容與接納能帶來另一番體驗!!

終於在做自己的"本業"了!!

2008年2月有幸轉戰IT產業做專案，新工作主要負責"維護網頁"的完整性。為什麼完整性需要維護?就是因為Prototype 在交付PG崁入程式碼後，發生"跑版"(為何會發生在此暫且不提!!)。Layout及視覺表現全由CSS來定義，我就得修改CSS檔案來調整版面，並且符合客戶支援跨瀏覽器的要求。

工作頗具挑戰卻也蠻勝任，然而這樣就做了一年多調整修正畫面的工作，實際上有點無聊。期間倒也充分利用時間準備證照考試，除了有數張證照帶來的實質效益之外，也算是增添工作及生活上的一些精彩。

上個月終於能藉由支援其他兩個專案的機會，再次從事屬於自己"網頁設計"的本業。支援的期間雖然有壓力，但整顆心是活躍、充滿動力的狀態，在支援之前便提前完成另一張微軟認證考試，順利PASS，全心全力構思滿意的Prototype。