測試網頁品質工具

網頁速度  for  Google
https://testmysite.thinkwithgoogle.com/

網頁優化  for  Google
https://developers.google.com/speed/pagespeed/insights/

語法檢查
https://validator.w3.org/

優化檢查 for chrome
http://yslow.org/faq/

Flash to html5

1.Swiffy
https://developers.google.com/swiffy/

2. .Net Online
http://www.flash-to-html5.net/

3. ToolKit to CreateJS (Adobe Flash CS6 plug-in，只有WIN能安裝)
http://godpig.com/blog/?p=3326

4. Adobe Edge
(無法匯入FLA或SWF檔案)

安裝NetBeans

推薦  9 個最好用的 JavaScript 開發工具

http://buzzorange.com/techorange/2015/03/03/9-javascript-ide-editor/

NetBeans官網

https://netbeans.org/

SE JDK

http://www.oracle.com/technetwork/java/javase/downloads/index.html

邏輯性的CSS─SASS

SassMeister(http://sassmeister.com/)是SASS編譯CSS的線上編譯網站，免像 Atom一樣安裝，也支援版本控制的Github。

假設我們要將300多個CSS的寬度和左邊位置做同樣的處理，就可以使用SASS來撰寫規則程式。


@function width($w) {
@return $w *2;
}

=> 是將寬度都乘以兩倍。


@function left($l) {
  @if ($l >= 50%) {
    @return $l *2 - 100%;
  } @else {
    @return $l *2;
  }
}

=> 作為兩個判斷式，假使左邊位置超過50%，就乘以2減掉100%，否則乘以2。

完整程式如下：

@function width($w) {
@return $w *2;
}

@function left($l) {
  @if ($l >= 50%) {
    @return $l *2 - 100%;
  } @else {
    @return $l *2;
  }
}

.link-0101{
 background: url("no.png") no-repeat;
 position:absolute;
 width:width(50%);
 height: 100%;
 top:0;
 left:left(70%);
 z-index: 999;
 cursor:pointer;
 border: 1px solid red;
 opacity: 0;
 filter: alpha(opacity=0);
}

編譯出的CSS：

.link-0101 {
  background: url("no.png") no-repeat;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 40%;
  z-index: 999;
  cursor: pointer;
  border: 1px solid red;
  opacity: 0;
  filter: alpha(opacity=0);
}

如下圖所示範：

募資網站，創新點子

有關著名的募資網站，可以參考最新的點子，加入自己的作品元素...參考看看！

KickStart
http://www.kickstart.org/success-stories/?gclid=CNP45orX1cYCFYQrvQodgcMGpg

Indiegogo
https://www.indiegogo.com/

點名時間
http://www.demohour.com/projects/latest

Pozible
http://www.pozible.com/

學習方法上的謬誤

 最近在思考一件事情，

 過去我花了五萬多元去電腦補習班，

 每年約花兩萬在購買專業書籍，

 但是經過五年發現自己技術一直停在原地。

 進而開始反省造成這樣結果的原因...

 過去一直認為花大錢才能學到最好的東西，

 最近改變了這個想法...

 越是值錢的東西越是趨近免費，

 因為其實他們只要靠一人一元的廣告收入，

 取得是量的費用，而不是在一人身上A很多錢。

 昨天我終於發現了致命的關鍵，

 就是我老公告訴我看Ted18分鐘學習法。

 相較於書籍或補習上課，書本的知識不過是從英文翻譯成中文的二手資料，

 為什麼我們要花大錢去買二手資料，

 而不透過實在價格的方式取得第一手資料呢？

 要用贊助的想法去取得真正好的東西...

 我想，觀眾的眼睛是雪亮的~!!

 以下有幾個學習管道，可以參考看看：

 資策會程式設計線上課程：http://www.tibame.com/q?pg=oocourses_all&tg=OOCourseAll-listCourses&cmp=R22.0_12&cx=22.20000

 使用者經驗設計線上課程：https://www.facebook.com/l.php?u=https%3A%2F%2Fwww.interaction-design.org%2Fcourses%2F&h=sAQFhgSFE

 國外的知名大學遠距課程(有簡體字幕)：

https://www.coursera.org/learn/marketing-analytics

 全球趨勢線上影片TED18(有中文字幕)：

https://www.ted.com/talks?language=zh-tw

版本控制

GITHUB

版本控制GIT當中，最知名的就是GITHUB社群了。GITHUB是一個共享虛擬主機的服務，可以用來存放GIT的程式碼。它最成功的地方除了存放程式碼之外，還提供了資訊編輯的功能，讓我們可以在上面直接建立資訊頁面、Wiki功能等等。而且GITHUB也支援許多社群的機制，如我們可以針對程式碼進行留言、貢獻度統計以及追蹤用戶、軟體庫、組織等等。

下雪範例：
https://github.com/loktar00/JQuery-Snowfall

(右下角有一個「Download ZIP」的按鈕，可以下載整包程式碼，再進行整理修改成自己的函式庫。)

雲端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++都算是。

下載網頁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/

zAccordion

http://www.armagost.com/zaccordion/

HTML6 & CSS4

HTML6 (把表單form加入標籤)
http://html6spec.com/

CSS4 (感覺把SASS和LESS加進去)
http://davidwalsh.name/css4-preview

測試你的瀏覽器是否支援~
http://davidwalsh.name/css4-preview

這樣IE8不知道會有怎麼樣的結果...

一般電腦上傳圖片的方式也可以同樣抓取手機裡的圖片

http://www.plupload.com/examples/

jQuery圖表測試

http://at1968.com/lynn/debar/

網頁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

一晃眼兩個月就過去了...

一晃眼暑假就過去了...(雖然我已經沒有暑假= =+)

RUN了兩個月之後，一直PO別人的東西覺得好虛喔...

於是又變心改了標題，想了想，就叫作「Script」部落格吧！

不管是JavaScript(jQuery)、VBScript, ActionScript, Adobe Script... 等

都用心閱讀過再放在這個部落格的內文中。

希望這樣的變革可以帶來懶惰自己程式的蛻變~加油囉~!

八月二十一日-動態測試

http://at1968.com/lynn/autonav/

八月十九日-CSS3好用工具

http://www.jqueryrain.com/?http://git.blivesta.com/rippler/

八月十八日-CSS3好用工具與範例

http://ecd.tencent.com/css3/tools.html

日常事物的精神病理學

跟這本書密切相關的設計領域是工業設計(industrial design)、互動設計(interaction design)，以及體驗設計(experience design)。這些領域都沒有很清楚的界限，不過它們的著眼點是不同的。工業設計師強調形態與材質，互動設計師強調易理解性與易用性(usability)，體驗設計師強調情感上的影響。簡單的說：

工業設計：用創造及發展概念和規格來優化產品或系統的功能、價值及外觀，使得使用者和製造商能互惠互利的一種專業服務(摘自美國工業設計協會網站)。

互動設計：重點在於人如何與科技互動。目標是提高人們對可能的操作方式，產品正在做什麼，以及剛剛發生什麼事的認識。互動設計仰賴心理學、設計、藝術及情感的原理來設計正確、愉快的經驗。

體驗設計：在設計產品、程序、服務、工藝、活動和環境的實務工作中，強調整體經驗的品質和享受。

─節錄自「設計的心理學」P31-32

八月十五日-好用工具

http://codecanyon.net/item/formify/full_screen_preview/8552608?ref=jqueryrain