2014年12月10日 星期三
雲端IDE編譯器
雲端 IDE 編譯器 【走到哪裡Coding到哪裡】
http://www.inside.com.tw/2014/12/09/best-online-ides-let-you-code-anywhere
註解：什麼是IDE？
整合開發環境(Inegrated Development Environment)是一種輔助程式開發人員開發軟體的應用軟體。IDE通常包括語言編輯器、自動建立工具、除錯器等等。
像開發IOS App(Objective-C)的Xcode，開發Android App(Java)的JBuilder，開發PHP的NetBeans，開發JS的jEdit，開發網頁的Notepad++都算是。
2014年11月12日 星期三
下載網頁SWF檔案套件~:D
Chrome 下載 swf 檔案外掛 (只能用Chrome安裝)
https://chrome.google.com/webstore/detail/sothink-flash-downloader/biceobciobbhhkplgocbaigojbnepcoi/related?hl=tw
FireFox 下載 swf 檔案外掛 (只能用FireFox安裝)
https://addons.mozilla.org/zh-tw/firefox/addon/download-flash-and-video/
2014年10月17日 星期五
HTML6 & CSS4
HTML6 (把表單form加入標籤)
http://html6spec.com/
CSS4 (感覺把SASS和LESS加進去)
http://davidwalsh.name/css4-preview
測試你的瀏覽器是否支援~
http://davidwalsh.name/css4-preview
這樣IE8不知道會有怎麼樣的結果...
2014年9月24日 星期三
2014年9月17日 星期三
網頁APP v.s. 原生APP
網頁APP可以由DW PhoneGap與FLASH轉IOS或Android APP，但缺點是不能直接連資料庫。
1. PhoneGap轉IOS APP
http://funiphone.pixnet.net/blog/post/39098223-%E3%80%90app%E9%96%8B%E7%99%BC%E6%8A%80%E8%A1%93%E3%80%91%E5%8E%9F%E7%94%9F%E9%96%8B%E7%99%BC%E4%BB%A5%E5%A4%96%E5%8F%A6%E4%B8%80%E7%A8%AE%E6%80%9D%E7%B6%AD%EF%BC%9Apho
2. PhoneGap轉Android APP
http://evacyl52201.pixnet.net/blog/post/31859413-%E3%80%90%E6%95%99%E5%AD%B8%E3%80%91dreamwever-%2B-phonegap-android-app%E7%99%BC%E4%BD%88%E7%AF%87
3. FLASH轉IOS或Android APP
http://www.adobe.com/inspire/2012/12/ios-apps-flash-cs6.html
也可以參考奶綠茶的blog...
https://play.google.com/store/apps/details?id=air.com.milkmidi.book2013samples
2014年8月27日 星期三
一晃眼兩個月就過去了...
一晃眼暑假就過去了...(雖然我已經沒有暑假= =+)
RUN了兩個月之後，一直PO別人的東西覺得好虛喔...
於是又變心改了標題，想了想，就叫作「Script」部落格吧！
不管是JavaScript(jQuery)、VBScript, ActionScript, Adobe Script... 等
都用心閱讀過再放在這個部落格的內文中。
希望這樣的變革可以帶來懶惰自己程式的蛻變~加油囉~!
2014年8月20日 星期三
2014年8月18日 星期一
日常事物的精神病理學
跟這本書密切相關的設計領域是工業設計(industrial design)、互動設計(interaction design)，以及體驗設計(experience design)。這些領域都沒有很清楚的界限，不過它們的著眼點是不同的。工業設計師強調形態與材質，互動設計師強調易理解性與易用性(usability)，體驗設計師強調情感上的影響。簡單的說：
工業設計：用創造及發展概念和規格來優化產品或系統的功能、價值及外觀，使得使用者和製造商能互惠互利的一種專業服務(摘自美國工業設計協會網站)。
互動設計：重點在於人如何與科技互動。目標是提高人們對可能的操作方式，產品正在做什麼，以及剛剛發生什麼事的認識。互動設計仰賴心理學、設計、藝術及情感的原理來設計正確、愉快的經驗。
體驗設計：在設計產品、程序、服務、工藝、活動和環境的實務工作中，強調整體經驗的品質和享受。
─節錄自「設計的心理學」P31-32
2014年8月15日 星期五
2014年8月13日 星期三
2014年8月12日 星期二
2014年8月11日 星期一
2014年8月8日 星期五
判斷手機而轉址的方法
關於判斷手機版而轉址，有兩種方式：
1) 有導頁
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var ismobile=navigator.userAgent.match(/J2ME|Opera Mini|SonyEricsson|Nokia|iPhone|iPod|BB10|PlayBook|android|webOS|BlackBerry|Windows Phone|Windows CE/i) != null;
if (ismobile) {
var redirect = confirm('您的手機適合手機版網頁，是否要轉到手機版網頁呢？');
if (redirect)
window.location = '你的網址';
}
});
</script>
2) 沒有導頁
<script type="text/javascript">
(function(a,b){if(/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows ce|xda|xiino/i.test(a)||/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(a.substr(0,4)))window.location=b})(navigator.userAgent||navigator.vendor||window.opera,'你的網址');
</script>
GreenSock範例
GreenSock包含TweenLite、TweenMax、TimelineLite、TimelineMax，
這四個類別庫有什麼不一樣？
TweenMax包含全部的資料庫，TimelineMax加上時間軸的概念。
向下移動
http://at1968.com/lynn/greensock/TweenLite/
向下移動+放大+透明度
http://at1968.com/lynn/greensock/TweenMax/
時間軸+向下移動
http://at1968.com/lynn/greensock/TimelineLite/
時間軸+向下移動+放大+透明度
http://at1968.com/lynn/greensock/TimelineMax/
2014年8月7日 星期四
2014年8月6日 星期三
2014年7月30日 星期三
2014年7月17日 星期四
什麼是使用者導向設計？
「簡單易用或許是無形的，但沒有它卻是萬萬不行。」─IBM
我發現大家，尤其是開發者的圈子裡，對使用性最普遍的迷思是：使用性是一種主觀的感覺。這些人認為使用性可以依照他們的主觀判定，與使用者無關，而且最好直接跟著大老闆的風向球走，有誰在乎紅配綠會影響閱讀興這類的事情呢？所以，當你試著在團體或企業裡導入使用者導向設計時，你可能會遭受一些阻礙與挑戰。
或許你覺得自己是團體裡唯一在乎使用者經驗的人，每次你跟同事們談起良好的介面設計有多重要時，他們總是不當一回事。的確，這是一條漫長又寂寞的路，但還是有些方法可以為你的理念發聲並降低批評的聲浪。其中之一就是教育你的團隊或組織這樣的設計方式有什麼價值。要這樣做，你就得了解甚麼是使用者導向設計，更重要的是：甚麼不是使用者導向設計。
使用者導向設計(UCD)不等於使用性(Usability)
我知道把這兩個名詞混在一起會造成你們的困擾。使用性一開始屬於人因學(humman factors)的範疇，研究人與產品之間的互動關係。實務上，使用性可以應用到各種產品，無論是烤麵包機、大門手把，甚至是它的包裝。
人機互動(Human computer interaction，HCI)源自於使用性，但聚焦在人與電子產品之間的互動關係。
使用者導向設計(User-centered design，UCD)則是從人機互動衍生而來的設計方法。基本上，它可以幫忙開發者和設計者們做出符合使用者需求的應用程式。
我們可以這麼說：實踐使用者導向設計可以確保你的應用程式擁有良好的使用性，因為這本來就是一體的！把使用者放在開發流程裡，自然就可以免除許多設計上的不確定性，並擄獲使用者的心。
另一個主題是使用者經驗(User experience，UX)，通常是指產品整體的使用體驗。除了功能面之外，還包括使用起來愉悅的程度和令人著迷的感受，因此使用經驗一詞所涵蓋的範圍會比較軟體本身還要大。落實使用者導向設計也可以提升應用程式的使用體驗。
UCD不是主觀的
使用性及其所有的基礎理論都是由科學所建構而成。它基於人因學、心理學、人類學等各領域的知識，絕對不是主觀認定或自由心證的。
使用者導向設計必須證明其設計決策是有效的，任何設計決策都應該來自觀察和傾聽，而非一時興起的念頭或個人偏好，這點與主觀認定的看法正好相反。使用者導向設計一但做得好，使用者自然就會對應用程式產生好感。
我們常聽到：「數字會說話」。使用者導向設計是依據數據和資料來支持設計決策的。其中一個方法就是使用性測試(詳見第9章)。另外，藉由直接觀察使用者並做出統計，也是可以避免主觀假設的偏誤。這些資訊都提供了更可靠的基礎，作為軟體開發的參考。
UCD不只是美學設計
這可能使人們對使用者導向設計最常見的迷思了。這些人(大部分是我們開發者)認為使用者導向設計就是美學設計。當然，應用程式的視覺設計也是很重要，但並不是一切。
使用者導向的思維不僅是思考如何讓東西看起來好看而已，也不只是做出絢麗的動畫及流暢的轉場效果；使用者導向設主要是要確保應用程式能滿足使用者的需求。一個外型好看的產品，搞不好實際使用起來是一場夢靨。
但是反過來說，良好的視覺設計的確是使用者導向設計重要的一環。使用性測試可以幫助我們揪出那些不合理的使用介面(UI)。也就是說，要讓產品成功，使用者介面是很重要的，但並不是一切。
UCD不會白費金錢和時間
執行使用，者導向設計步是一件容易的事，因此需要花費大量的時間反思和觀察。老實講，如果你用開發的時間去思考設計問題，你可能會覺得開發進度毫無進展；甚至當你從使用性研究中發現了設計上的問題，因此得放棄先前的程式碼，這時候更是會讓人感覺進度在倒退！
使用者導向設計就是要了解使用者對產品有什麼意見。有時候我們不想聽到他們的批評，或自認為早就知道使用者在想想什麼。接受回饋也意味著接受抱怨，沒有人樂意聽到別人說自己的產品有多麼糟糕。當某人在給予建議時，可能會說出「這個應用程式沒有什麼價值」之類的話。
為了躲避這些批評，開發者經常對使用者視而不見，不讓他們發表意見；於是我們只專注在寫程式，希望與程式不相干的事情可以船到橋頭自然直。
以上這些想法我都能理解。身為開發者，我們必須熟悉的工具及知識越來越多，因應時代而改變的新技術、新軟體架構如雨後春筍出現。這一分鐘才剛弄懂一套複雜的API(應用程式介面)，下一分鐘可能有看到部落格文章說這個技術已死，將會有一個全新的API取代它。
每個程式開發者都知道，在這一行必須不斷學習新知，並投許多時間和資源，才能跟上日新月異的技術。這些外在的挑戰使得開發者被迫沉淨再技術的世界，隔絕那些讓他們分新的事務，像是使用性測試。
使用性價值的推廣者Billy Hollis認為這一層隔閡對開發者帶來很大的挑戰。他暗示開發者設全再使用性領域失去了領導地位，因為他們無法再學習新技術和了解使用者之間取得平衡，最後只能選擇其中一種。所以，大部分的開發者都只能得到程式碼，他們只想把時間花在學習新的API上，Hollis說：
開發者圈子裡面的人都非常熱愛專研程式技術，以致對於其他的事情不感興趣。我想這也是造成開發和設計之間隔閡的原因之一。
使用者導向並不是非A即B的概念，你可以一方面追尋新技術，另一方面又將使用者的回饋納入流程中，不是只有使用者經驗的專家才能運用這些實用的設計準則。
Hollis用學習滑雪做比喻：
當你去滑雪的時候，我想你不會期待自己學習奧運選手的滑雪動作。你只能學著如何安全抵達上底，不要跌到就很好了。
我們必須要打破「不寫程式就表示進度停滯」的心態，接受「花心思在使用者身上」本來就是開發流程的一部分，就如同吸引新技術或寫程式一樣必須且重要。有一些開發者花很多時間決定要使用那一種軟體架構，卻不花時間思考如何提供使用者更有價值的東西；他們似乎假設他們點子的價值是無庸置疑的。
事實上，如果好好地執行使用者導向設計，是可以節省時間的。如果能夠確認使用者的需求，就不會白費成本或走冤枉路。請注意，如果無法滿足使用者的期待而必須重新開發應用程式，其實反而更浪費時間。
我認為暫時跳脫程式，可以幫助你思考新的道路。先放鍵盤和滑鼠，休息一下，做個使用者調查或使用性測試，你將會用不同的角度來看待問題。當你在度回來寫程式時，會更有想法，並更清楚需要改進的方向。
你也許想做使用者研究，但經費上不允許。畢竟，時間就是金錢，把時間花在寫程式以外的事情乍聽之下是不符合經濟效益的。
本書討論範圍並不包含使用者導向設計投資報酬率(ROI)的驗證，但是我鼓裡你們把使用者導向設計當作避免「浪費」金錢的方法。修復產品的錯誤和支援使用者克服操作上的困難，一樣要耗費不少成本。
Arnold Lund在interactives雜誌上曾提到：
把使用性測試當作軟體品質管理的一部分，並且證明他可以降低將來程式錯誤所造成的成本花費。這些成本包含軟體導入的支援成本，以及導入的維修成本。
如果你無法說服主管擁抱使用者設計所大來的效益，可以考慮用另一種財務的角度來看，例如使用者導向設計可以避免其他的花費。
UCD不是程式錯誤報告
你可能認為你早就在做使用者導向設計了，因此你做了程式錯誤的回饋機制。
這的確值得讚許，並且應該持續下去，但千萬別把錯誤報告誤當使用者研究。你可以持續關注使用者回報的錯誤訊息，但這無法讓你得到他們最根本的需求。
假設使用者回報一筆功能無法正常運作的問題，你可能馬上就一頭栽進程式碼、尋找修復的方法，企圖盡快地解決他。
如果你沒有試著問使用者：「發生這個問題時，他想要完成目標是什麼？」那麼你就沒有辦法獲得有意義的啟發，進而從根本上改善你的程式。
探索並詢問使用者一些非關程式錯誤的問題，可能會發現使用者想要用你原本沒想過的方式來使用軟體。這時候你就可以思考如何改良功能，讓操作流程更清楚、更好用，甚至可以激發出新的點子，讓你的應用程式更多價值。
以我的例子來講，我曾經自作聰明設計一個自動化的錯誤回報信件，信件裡面包含了錯誤發生時的一切技術細節及錯誤訊息。每當使用者發生程式錯誤時，這封信件就會自動產生，並寄到我信箱，我完全不用浪費任何時間根使用者溝通。現在想起來，真是一個天大的錯誤！
有一個使用者每天都要送出紀錄，程式就會發生錯誤。我收到錯誤回報後，花了好幾個小時檢查程式碼，試著找出與法或成是邏輯上的問題。我看遍了所有資料庫的連結，甚至還檢查資料庫本身。後來實在束手無策，於是只好打點話給那位使用者，問她做了什麼操作以致造成錯誤，結果真像終於大白；原來她在填寫某一表單的欄位時，輸入了無效字元。
的確，這不應該發生的事。當使用者可能會輸入這些特殊字元時，我應該要從程式上做出一些限制，但真正令我感到驚訝的是：她竟然想用一般的意見欄位，填寫重要的醫療資料。
跟她溝通後，我才知道要建立更多的輸入欄位，才能滿足使用者的需求。由此看來，自動產生的錯誤報告並不能夠完整表達出問題的全貌，如果只單純把錯誤修復了，而錯失了與使用者對化的機會，我無法察覺這個新的使用者需求，使用者恐怕繼續使用一般的意見欄填寫重要的醫藥資訊。
因此，完整的使用者回饋不應該只是錯誤訊息的回報。錯誤報告應該被是為設計策略的其種輔助資訊而已。
UCD不會模糊焦點
你是否曾在聽取使用者需求時，馬上就神游到技術方案裡？
- 該做成網頁好呢？還是直接連結資料？
- 這個系統可以建立在公司的入口網站上嗎？
- 該使用那一種程式語言呢？
- 應該可以在產品上建立一些模組吧？
- 有機會把它做成行動裝置的應用程式嗎？
這些技術性的思考都沒有錯，但其切入點和客戶需求無關，因為我們還不了解他們的需求！使用者導向設計始終關注客戶最核心的需求，讓開發者獲得最有義意的資訊，避免為了技術而使用技術。
就算真的有技術上的障礙要克服，開發者也一定能夠在一開始就找到真正合適的技術解決方案。使用者導向設計先從需求出發，在尋ˋ襖技術解決方案。這種目的導向的方式可以幫助我們依循正確的程序完成開發任務。我們會在第4章詳細探討。
現在我們知道關注使用性並不是多餘的工作。事實上，他反而能夠幫助我們聚焦在正確的問題上，避免做白工。使用者導向設計的流程會讓你保持正確的心態，問對的問題，並挑戰任何先入為主的觀念。
以下是幾個非技術面的問題，提供你作為一開始思考的線索：
- 使用者需求為何？這是一個技術可以解決的問題嗎？還是一個程序或政治問題？又或者是工作流程、教育訓練等其他的問題？
- 為什麼使用者對這個訊息感到困惑？使用者如何詮釋此訊息？我應該用不同的方式解釋它嗎？
- 為什麼使用者會在這兩個畫面之間迷路？
- 為什麼使用者沒有看到這個警告？只是因為忽略了嗎？如果是，為什麼？
- 為什麼使用者會用錯誤的方法完成操作？有更好的介面設計讓操作更順利嗎？
使用者研究最基本的課題就是問為什麼。使用者導向設計讓我們開始關心使用者及他們的行為；這樣的開發架構可以協助我們找出對使用者需求最有效的回應方式。
結合使用性、使用者導向設計及使用者經驗，你將以一個更完整的程序來開發應用程式。這需要專注、決心、甚至一點點的犧牲；然而今日市場競爭如此激烈，如果忽略這些做法的話，對你及你的使用者來說都是一種傷害。
2014年7月16日 星期三
什麼是Node.js
Node.js是一個開放原始碼(Open Source)的應用程式框架(Application Framework)，採用了效能極佳的Google V8 Javascript引擎(Google/Chromium瀏覽器內建的javaScript引擎)。自2009年公開發表以來，Node.js即備受世界各地軟體開發者矚目，才短短幾年的發展，一躍成為當今最紅的新星技術之一，在2011年12月更一度榮登Github關注排行的第一名，超過了Rubyon on rails，潛力不容小覷。
Node.js之所以這麼紅，並非空穴來風，主要雲因是Node.js選擇了有許多開發人員的JavaScript語言為基礎。要知道，拜網際網路World Wide Web的盛行所賜，無論軟體業界、非軟體業、業餘開發者亦是學生，在今天多多少少都懂得如何使用javaScript，全世界的使用者數量相當可觀且難以估計。這也是為什麼，有這麼多人在關注Node.js這項新技術。你也可以看到各家國際知名公司，如谷歌(Google)、微軟(Mircosoft)和雅虎(Yahoo)，都投入Node.js的發展。
另一個走紅原因，就是JavaScript的事件驅動(Event-driven)特性，意外的能在網站後端應用產生極大的效益和功用，不但簡化了即時應用(如：聊天室、資料即時更新、社群訊息推送等)的實作，效能更是相當優異。這讓全世界掀起社群風的各類網站服務，無論原本用什麼語言開發，紛紛採用和研究Node.js，甚至視Node.js為最佳解決方案。
在過去，JavaScript只不過是一個跑在瀏覽器上的腳本語言(Script Language)，能力相當有限，頂多是制一些網頁上的元素、簡單的邏輯、設計使用者介面、動化和瀏覽動線。更由於瀏覽器的安全保護因素，JavaScript語言幾乎完全沒有機會與系統接軌，操作低階的系統功能(如：檔案存取I/O)，更不用說進行硬體控制。因此，一直許多人戲稱JavaScript是個玩具語言，若不是近年來前端使用者介面設計議題抬頭，JavaScript可能至今都不會有太多人重視。
不過，Node.js提供了JavaScript使用者新的機會，讓JavaScript程式不再綁手綁腳的只能跑在瀏覽器上或只能開發前端應用程式，而是可以獨立執行，並開發伺服器上的後端應用，更進一步運行於桌面系統和崁入式系統。
簡單來說，Node.js除了讓JavaScript引擎獨立，不在需要已靠瀏覽器運行外，也設計了一系列機制和APIs，擴充了許多JavaScript語言沒有的強大功能，諸如模組機制(Module)、檔案系統存取(File System)、網路存取(Socket)和程序控制(Process)等。Node.js讓javaScript從此脫胎換骨，令開發者完全可以開始運用JavaScript開發各類用途的應用程式。
節錄自：不一樣的Node.js
2014年7月15日 星期二
電子商務網站的設計技術分析 - 圖像原則
圖像原則
1. 圖像性質風格前後要一致。
2. 陰影方像表現方式要一致。
3.同樣指示圖片大小要一致。
4. 圖像的排列順利要有秩序。
5. 謹慎使用濾鏡和動態效果。
天貓網站圖像型與CSS的關係，應符合幾項呢？
同樣的分類方式，好像用一個板切出來，相同中有不同，不同中又有相同，比較不會單調。
參考資料：http://vr.theatre.ntu.edu.tw/fineart/chap16/chap16-04.htm
七月十五日 - Google Material Design
有點扁平外加一點擬真設計，是目前流行的介面設計。
有一定的規則可尋，可以檢視看看！
網址：http://www.ui.cn/Material/index.html
:last 與 :last-child 的差別
: fisrt / :last 是從整組元素取出最初與最後的元素；
: fisrt-child / :last-child 是以父元素為基準，分別每個父元素下層的最初與最後的子元素。
換句話說，只要同時存在多個父元素，就會取出同等數量的最初/最後的子元素。
一定學會jQuery的36堂關鍵課程 第二章
利用階層指定元素的選擇器
(1) 取出某個元素底下的元素
$('#eva a').css(...);
(2) 取得某個元素最親近一層的元素
$('#eva > a').css(...);
(3) 取得某一個元素的下一個元素
$('#eva + li').css(...);
(4) 取得某個元素之後的所有元素
$('#eva ~ li').css(...);
依照出現順序取得目標元素
(1) 取出最初/最後的元素
$('#eva > li:first').css(...);
$('#eva > li:last').css(...);
(2) 取出偶數編號或奇數編號元素
$('#eva li:even').css(...);
$('#eva li:odd').css(...);
(3) 取出第n個元素
$('#eva > li:eq(2)').css(...);
(4) 取出第n個元素之前/之後的元素
$('#eva > li:lt(2)').css(...);
$('#eva > li:gt(2)').css(...);
利用子元素與字元作為篩選元素的條件
(1) 取出下層裡含有特定字元的元素
$('li:contains("xml")').css(...);
(2) 篩選擁有/空白內容的元素
$('td:empty').css(...);
(3) 以吻合特定選擇器的子元素作為篩選目標元素的條件
$('p:has(cite)).css(...);
專門取得子元素的篩選器
(1) 取得開頭或結尾的子元素
$('ul li:first-child').css(...);
$('ul li:last-child').css(...);
(2) 每隔n個取出子元素
$('ul > li:nth-child(3n)').css(...);
(3) 取得唯一的子元素
$('p img:only-child').css(...);
利用屬性值篩選目標元素
(1) 以擁有特定屬性為條件篩選目標元素
$('a[target]').css(...);
(2) 以特定屬性是否等於/不等於某值為篩選元素條件
$('a[target="_blank"]').css(...);
(3) 篩選屬性值部分一致的元素
a. 以屬性值開頭符合某字串為條件篩選目標元素(開頭一致)
$('[屬性名稱^=值]').css(...);
b. 以屬性值開頭符合某字串為條件篩選目標元素(結尾一致)
$('[屬性名稱$=值]').css(...);
c. 以屬性值含有某字串為條件篩選目標元素(部分一致)
$('[屬性名稱*=值]').css(...);
(4) 同時使用多個屬性篩選器
$('a[target^="http:/"][target]').css(...);
其他篩選器
(1) 只篩選標題的篩選器
$(':header').css(...);
$('a:not([target])').css(...);
(3) 取出特定的表單
a. 所有的表單元素(<input>、<textarea>、<button>、<select>元素)
$(':input').css(...);
b. 文字框
$(':text').css(...);
c. 密碼輸入框
$(':password').css(...);
d. 單選按鈕
$(':radio').css(...);
e. 勾選框
$(':checkbox').css(...);
f. 檔案勾選框
$(':file').css(...);
g. 送出按鈕
$(':submit').css(...);
h. 圖片按鈕
$(':image').css(...);
i. 重設按鈕
$(':reset').css(...);
j. 所有的按鈕(<button>、<input type="button">元素)
$(':button').css(...);
k. 隱藏的欄位以及未顯示於螢幕上的元素
$(':hidden').css(...);
(4) 篩選出應存取的元素
a. 表單元素呈現有效的的狀態下
$(':enabled').css(...);
b. 表單元素呈現無效的狀態下
$(':disabled').css(...);
c. 選單按鈕或勾選框被勾選的狀態下
$(':checked').css(...);
d. 選取框被選取的狀態下
$(':selected').css(...);
e. 元素處於隱藏的狀態下
$(':hidden').css(...);
f. 元素處於顯示的狀態下
$(':visible').css(...);
g. 元素位於動態之中的狀態下
$(':animated').css(...);
2014年7月14日 星期一
電子商務網站的設計技術分析 - 文字原則
文字原則
1. 一個畫面，文字種類字型不要超過三種。
2. 一段文字，要注意字距與行距的字體大小和空白比例。
- 字句每一行最好25到35個中文字。
- 字型大小一般為12px，不要寫於10px。
- 行距的大小以1.5倍行距較佳。
3. 重點字形樣式必須一致，以增加好的可讀性。
4. 文字的超連結互動，必須符合一致性。
5. 大小寫必須有分別，也注意是否方便閱讀。
6. 初學者先撇開具有意義的歷史文字。
7. 網頁字形工具：google font & adobe font。
天貓網站字型與CSS的關係，應符合幾項呢？
1. body設定字型大小與字型類別為font:12px/1.5 tahoma,arial。
2. font-family：除了基本字型Arial，天貓再每一層樓置入不一樣的天貓自家的字型，這一些字型屬於CSS3的用法，不同於一般網站的基本字型。
3. font-size：字型大小方面，使用12~18px的字級。
4. 多以文字代替圖片，以增加下載的速度。
5. 英文字型和中文字型大小差了一點級數，天貓網站讓英文字型大一點，使得和中文字型看起來是一樣的，算是一般的做法。
6. line-height：字體行距多為1.5倍行距，較多的空白增加可讀性。
一定學會jQuery的36堂關鍵課程 第一章
替超連結設計進階的樣式
虛擬類別
link(尚未連結)
visited(已連結)
hover(滑鼠移入)
active(已點選)
* 請務必以 link -> visited -> hover -> active的順序指定，
一旦順序有誤就無法正確套用樣式。
提供常用數學功能的Math物件
abs(計算絕對值)
pow(計算次方值)
ceil(進行小數點的四捨五入計算)
floor(進行小數點的無條件捨去計算)
sqrt(計算平方根)
2014年7月11日 星期五
2014年7月10日 星期四
七月十日-驚人的hover
會互動的hover，太驚人了，可以想像未來繽紛的世界。
出處：http://tholman.com/giflinks/?utm_content=buffercf9a5&utm_medium=social&utm_source=plus.google.com&utm_campaign=buffer
2014年7月9日 星期三
2014年7月3日 星期四
2014年4月15日 星期二
電腦輔助設計研究的目的
我想了想對於自己的期望在於：設計設計師的設計。
希望研發一些小套件達到改尺寸、改設定、改數字，就可以套用，包括：
1. 瀏覽器可以閱讀的動態小套件。(ex:自己研發 Script小套件)
2. 雲端文書軟體的輔助圖表工具。(ex: 雲端圖表 or 谷歌分析)
3. Adobe網頁軟體的輔助設計工具。 (ex: Adobe設計軟體外掛)
達到電腦輔助設計 ( Computer Aided Art & Designer ) 的目標。
訂閱：
意見 (Atom)