http://www.flashdevelop.org/downloads/documents/Library_AS3_Frameworks_AIR.zip

請盡情享用～

TRAILER Arduino: The Documentary (available on HD) from gnd on Vimeo.

經過了  Basic Stamp -> Pic Chip -> Ardunio, 整個歷程，對學習Physical Computing的人來說，Ardunio 終於是個方便好用容易上手的一項發明。 這塊晶片可以說燃起了全世界不是電機背景的創意學生的熱情，我想這部紀錄片應該很有啓發性，期待能夠看到完成版本。

ＰＳ，很多熱心的朋友正在翻譯成中文！加油！

人與環境密不可分, 環境更是被媒體所左右. 我們每天穿的看到的聽到的, 摸到的,知道的,很多都是由媒體傳播而來。

吃飯, 聚餐, 辦party, 宴客, 買禮物, 買衣服, 旅遊, 唱歌, 爬山, 交友, 登山, 結婚 … 生活中的總總, 抉擇, 成與不成在一個點,點與點的機會在於傳播, visual communication / commercial advertising　做的好的，不只可以塑造品牌形象，更可以昇華成生活形態。

從媒體步入數位後，每一個小環節都可以是很大的轉捩點，這些環節有些在無形中發生，不知不覺的變成了新的革命，我用我的觀察方法，用動態的角度分析 成: 主動，被動，互動，亂動.

以下淺見：

被動

路上的招牌, 報紙上的廣告, 很多不是我想要看到的資訊, 在傳統的資訊夾帶的資訊上強迫接受, 像是我沒有小孩也不需要紙尿布, 打開電視或報紙,還是得無意看到, 我不喜歡選舉, 可是公車看版, 路上旗幟, 還是得看到候選人們互像吐槽, 這種強迫的接受資訊, 算是被動. 一般都是傳統的產業, 大部分在媒體上都是不透過電腦的.

傳統的被動的方式往往比較像是一種宣達, 或是演講(Speech) 藝術家/作者 可以很明確的將自己的想法傳達給觀眾, 所以觀眾與作者的身分/立場非常明顯.

主動

透過搜尋引擎, 關鍵字廣告, 通過訂閱主動給我們訊息的電子報 / RSS FEED, 我們有興趣的,或相關的, 自己送上門來, 算是主動. 主動媒體, 還有一個特點,就是數位媒體漸漸的分身, 以往的單一網站概念 (就是大家一定要到某個網址,才可以獲得資訊, 在主動媒體像是 YouTube, Blog (RSS) 漸漸的把內容以分散的方式外放, 造成更好的流傳效果.

互動

以往媒體給我們的, 我們只能接受, 互動就是所謂的相互作用, 現在像是 Blog, YouTube, 甚至一些新聞網站, 我們可以評分, 可以留言, 可以接受回饋的媒介, 就是互動.

互動的方式往往比較像是一種遊戲, 或是溝通(communication), 藝術家/作者 只把話講一半, 另一半交給觀眾去發揮, 觀眾與作者的身分/立場模糊. 藝術家/作者 也就沒有辦法很完全的把作品理念傳達, 尤其如果作品又流於類似軟體/程式功能展示, 變成了科技之下的魔術表演, 藝術價值反而就降低了, 這也很有可能是互動藝術十年還是無法正式進入主流藝術的原因.

亂動

以往以上的三種動態,很多都是獨立,或伴參雜著隨著發生,並沒有說新的(互動)就一定比舊的(被動)好, 而亂動的歸類, 則是科技在更進步之後開始有一些整合的現象, 想是 Facebook, 他整合了 twitter(微網誌) / blog / group (fans) / flickr(picasa) 網路相簿 / Game 等等, 加上手持裝置, 把上述的三種動態混合, 形成亂動的局面, 但卻也發生了各種機能上模糊的混淆,伴隨來更多的隱私權, 資訊氾濫的問題…

以上,正在製做精美的互動簡報(未完成), 有興趣的人可以到這邊來看.

http://www.bravenewcode.com/products/wptouch/

在紐約的朋友們不要錯過了。

November 22, 2009–April 26, 2010

MoMA Page

Making Of

在 pc 上面的 screen shot（ｘｐ）,實在比 mac 遜色很多, 今天發現了 Jing

他可以區域選取照相範圍, 還可以在相片上面寫 note, 畫箭頭跟框框, 並可以即時上傳網站或是 blog, 是一個相當好用的工具.

相信很多人也都在癮科技看到了,

多少人想要做的互動玩具, 這又多了一隻

台灣的學生和業者在動畫、遊戲及設計等領域頻頻得獎，一方面顯示的是台灣的創意正不斷爆發，另一方面，則預告了台灣產業轉型的契機。擅於代工的台灣憑藉著在製造端磨練出來的紀律、能力，以及在國際產業鍊裡頭找到的獨特位置，正努力地尋求「後製造時代」經濟發展的突破機會，那就是進入以創意為核心的美學新經濟。而從前端的人才養成、後端的產業舞台來看，台灣都可以說是蓄勢待發、揚帆正啟；如何將學校訓練出來的充沛人才與產業的需求做最適切的結合，如何將得獎的能量轉化成為經營的能量，將是台灣經濟能否順利打造下一個亮點的關鍵。

html5

這是一 位developer做的demo, 利用javascript(processing.js)跟canvas加上<audio>(有音樂哩, 不是用flash播的唷)tag做出來的particle engine. 根據作者表示, 這demo是視覺化tweeter上面的tweets stream

作者網站: http://9elements.com/io/?p=153

Demo: http://9elements.com/io/projects/html5/canvas/

ps. 小小缺憾 IE6/7的朋友們還看不到…

Etienne De Crecy Live 2007 Transmusicales de Rennes from Clement bournat on Vimeo.

APW 最後一天,大家可能只知道 Cold Play 這個天團, 不過!

天團完以後的這個 etienne de crecy 可是之前被評為十大絢麗舞台之一的法國電音DJ, 所以請大家保持提力撐當最後～

要改 WP? 其實不難, 以下是訣竅:

運用版型元件拼出主要頁面,

附屬元件輔助完成頁面功能.

共用串接樣式劃分定位板型,

裝附加元件增加部落格能力.

-

-

-

images from : http://www.webdesignerwall.com/tutorials/building-custom-wordpress-theme/ （好文）

設計定位（簡單的改法改這裡就好）

style.css

前面這些會影響到在 theme 選擇的時候的界面

/*
THEME NAME: MyCoolTheme
THEME URI: http://www.website.com/
DESCRIPTION: A clean and elegant Sandbox theme for WordPress based on the classic font – Helvetica Neue. Features a color options page, automatically pulled post thumbnail images(no need for custom fields).
VERSION: 1.0.9
AUTHOR: John Doe
AUTHOR URI: http://www.johndoe.com/
TAGS: simple, two column, widget ready, gravatar support, theme options, magazine, right sidebar, fixed width, helvetica, yellow.
.
This work is released under GNU General Public License, version 2 (GPL).

http://www.gnu.org/licenses/old-licenses/gpl-2.0.html

Please leave the footer links in tact. THANKS!
.
*/

screenshot.png -> 則可以改預覽圖示

版型元件 （這些檔都不完整,所有頁面都 share 這些版型元素）

header.php – 頁頭

generate css,javascript 位置, Logo, Top Banner 等等
利用 bloginfo 弄出header需要的資料
<?php bloginfo(‘name’); ?>

sidebar.php – 功能 bar (widget 可以放的地方)

根據編號生出 sidebar
<?php if ( !function_exists(‘dynamic_sidebar’)
|| !dynamic_sidebar(1) ) : ?>
<?php endif; ?>

footer.php – 頁尾 （credit, 版權聲明等等）

主要頁面 （這些頁面是完整的, 由版型元件組合而成）

index.php – 首頁

single.php – 單筆完整 post 內容頁面 （包括 comments ）

archive.php – 日期頁面（多筆）

page.php – Page 頁面

search.php – 搜尋結果頁面

custem.php – 自定頁面 (admin>Page 裡面可選板型）

前面加上<?php /* Template Name: testTemplate */ ?>在 wp-admin 會自動變出 testTemplate 版型以供選擇

附屬元件 （部分頁面 / 元件 會需要以下元素）

archives.php – 過去月份的 List

links.php – generate admin 裡面的 links

comments.php – generate comment form 與顯示 comments

functions.php – 可呼叫的 function 在這

有幾個 sidebar 可在此控制
<?php register_sidebars( $number, $args ); ?>

重要資訊

XAMPP

xampp mysql
username: root
password:”"

wp-config.php example:

define(‘DB_NAME’, ‘wordpress’);

/** MySQL database username */
define(‘DB_USER’, ‘root’);

/** MySQL database password 內定空白，這邊的設定可以到　ｐｈｐＭｙＡｄｍｉｎ　裡面的　ｍｙｓｑｌ＞ｕｓｒ裡面去改，ＭＤ５加密，可以去找網站加密倒貼回去　*/
define(‘DB_PASSWORD’, ”);

/** MySQL hostname */
define(‘DB_HOST’, ‘localhost’);

/** Database Charset to use in creating database tables. */
define(‘DB_CHARSET’, ‘utf8′);

/** The Database Collate type. Don’t change this if in doubt. */
define(‘DB_COLLATE’, ”);

Template Tag 參考 http://codex.wordpress.org/Template_Tags

Dynamic Content swf 放法:

1.swfobject.js 放到 theme/yourTheme/js

2.在 header.php 裡面

<header>

<script type=”text/javascript” src=”<?php bloginfo(‘template_url’); ?>/js/swfobject.js”></script>

</header>

3.embed swf:

<script type=”text/javascript”>
var flashvars = {};
flashvars.aboutText = “<?php the_title(); ?>“;
var params = {};
params.menu = “false”;
params.wmode = “transparent”;
var attributes = {};
attributes.id = “myDynamicContent”;
attributes.name = “myDynamicContent”;
swfobject.embedSWF(“<?php bloginfo(‘template_url’); ?>/swf/logo.swf” ,”logo“, “300″, “400″, “9.0.0″, “expressInstall.swf”, flashvars, params, attributes);
</script>

這裡是真正ｆｌａｓｈ會輸出的地方(div id要相同)

<div id= “logo“>
flash content will replace this.
</div>

4.swf 接收 flashvars （php generated）

var params:Object = LoaderInfo(this.root.loaderInfo).parameters;

for (var keys:* in params) {
trace(key,String(params[keys]));
}

把 wp 的 function return 當作 xml 用

header.php (for example, embed 方法如上):

flashvars.aboutText = ‘<?php $menu = wp_page_menu(‘echo=0′);
echo str_replace(array(“\r”, “\n”, “\t”), ”, $menu); ?>’;

in fla:

var params:Object = LoaderInfo(this.root.loaderInfo).parameters;
var t:String;

for (var keys:* in params) {
t+=String(params[keys]);
}
var wpData:XML = XML(t);
trace(wpData..a.length());

for (var i:* in wpData..a) {
trace(wpData..a[i] , wpData..@href[i]
}

Turn WP to a regular website (page based)

in Setting > Reading

把 Page 放到 Admin 的最前面(方便使用)

http://reciprocity.be/cms-menu/

安裝 樣板 plugin

http://pods.uproot.us/

http://flutter.freshout.us/

http://www.whypad.com/posts/supple-forms-a-wordpress-cms-plugin/566/

iphone 到處寫

http://iphone.wordpress.org/

此外一些有用的資訊在第二頁（按下面）

廢話不多說,OOP(物件導向)也是一堆規則堆成的一種語法,用這些規則可以達到你想要叫電腦做的事, 但並不代表用了規則就做的漂亮.

在OOP規則的世界, 輸贏可以有很多方面, 基本上是如何拼奏這些規則, 達到

1. 讓共同開發的人都能互相了解,分工合作

2. 可以重複使用又易於修改

以上兩樣基準, 由不同的狀況用途, 經過邏輯的推演歸納, 會產生某些特別拼湊的OOP規則,就成了所謂的 Design Pattern了.

Design Pattern 的用意是在解決問題, MVC是眾多 Design Patterns 的一種, 目的在解決的問題就是避免 Model / View 之間偶合的情形.並且利用一些 interface 的寫法讓 開發者之間可以互相了解.

一般flash presentation 網站對Model幾乎只讀取而不改變的情形,所以很自然的就會把 Controller 跟 Model 寫在一起.不過卻會造成 Model 更改不易的情形.

之前在 Flash Coder New York (FCNY) 的 email 討論裡面, 有一堆人提到 MVC 是如何的複雜無用, 其實沒錯, MVC 確實讓人在寫 code 上多了很多程序, 不過這些程序主要也是為了減少 model / view 的耦合現象, 讓開發過後的元件可以重複使用, that’s all AS3 OOP programing about.不然直接寫再 Flash IDE 的 Frame 上面就好, 何必還要寫一堆 as.

之前看了一陣子 PureMVC framework. 覺得好像很複雜, 很多次看一下就放棄了, 這次我選擇不看, 我直接用, 發現其實並不難, 而且讓整個開發變得很清楚明瞭.(但是還是要多寫很多Code…)

以上是 pureMVC 的官方架構示意圖,看起很嚇人,已經到了有 infovis 美感的地步.

以下是我只管使用面的簡單版

PureMVC 的內部架構用了不少很厲害的 patterns, 想要看懂並不容易, 所以不要去管他的架構. 用了就懂了. 以下是一些心得

1. M(proxy), V(mediator), C(command) 都要照他的用法 extends + implements 該元件的相關 classes.

M -> extends Proxy implements IProxy

V -> extends Mediator implements IMediator

C -> extends SimpleCommand implements ICommand (microCommand 我還不知道是幹嘛用的)

以上都需要命名

2. Mediator + Proxy:

以上MV者都只是個 framework 的溝通管道, 就像拼圖裡面凹凹凸凸的連結部份, 你可以在裡面輕鬆的包個你想要的物件, 這個做法主要是不管你之前的 M/V 用什麼怪寫法或怪名字, 用這個包起來之後就可以跟其他的元件接軌

3. Command

3.1.與 Notification 配對執行.
3.2.經由 retriveProxy / retriveMediator 用名字的字串, 取得 Mediator / Proxy, 可裡面的 method, 並且溝通兩者, 所以 M(Proxy),V(Mediator) 不會直接溝通

4. Notification

用來執行 Command,  Command, Notification 這兩者容易讓人搞混,基本上 Command 是 class, 裡面有 execute, 用來執行一些任務, Notification 則只是一個字串, 像是指令一樣會去執行 Command
這兩者分開的好處是可以讓不同的 Notification 可以執行相同的 Command.
很多案例都是把 Notification 定義放在 Application Facade 裡面, 我則認為有分開的 Class 用 const 管理這些字串比較好.

5. 發送 Notification

Proxy, Mediator, Command 都可以發送 sendNotification(Notification字串, 跟隨發送的資訊物件);

6. 反應 Notification (這是最重要的部份)
執行指令的方法有兩種:

6.1.Notification -> registerCommand -> Command.execute();
在 Application facade, initialize 的時候:
registerCommand(Notification, CommandClass); // Notification字串與 CommandClass 的配對

6.2.Notification -> listNotificationInterests -> handleNotification(notification:INotification)
在Mediator 裡面:
透過 framework 的寫法 extends+implements, 會有一個 override method 要去填: listNotificationInterests, 回傳Notification 字串陣列
如果有以上陣列被執行的話,handleNotification 會被執行

以下是狀況演練

View 觸發事件

1.interface event 不改變 model ( 或是 view 自己解決就可以）

2.interface event 直接改變 model + view,由 command 發出 notification (state 改變, 像是 sound on / off 之類的, model 不需要load 東西)

3.interface event 改變 Model 但是不發出 notification 由 Command.retriveMediator 呼叫 Mediator 裡面的 function 更改 view, (比較複雜的改變)

4.interface event 改變 Model (load 一些東西） 之後又改變 View. 可以想像 load data 進來的過程,view 要等待 model 讀完才能繼續進行

Model 改變

1.Model 更新改變 view (假想讀取預設的 user 內定值改變 view / DeepLinking)

2.interface event without changing model （像是 menu 開關等等, 視覺上面無傷大雅的改變, 盡量少用, 最好把 state 都還是存在 model 裡面）

由以上的演練可以得知,

Notification -> Command
這類大概都是會牽扯到 Model 的

Notification -> Mediator.listNotificationInterests
這類就是只去更改 View

Notification 規範的越有系統越好, 尤其不要搞混以上兩者

所以像是 view 4 範例, 可以分成 UPDATE_MODEL,之後要改變 View （步驟 7 sendNotification )之後 change view 的過程可以共用另一個 Notification (UPDATE_VIEW)去呼叫, 這樣的話舊可以共用 Notification 而不會寫了一堆.

可以由的控制方式分作:

多重控制的 view

(由多個source 去控制一個 view, source 可能是其他的 view or model）所有元件透過同一個 notification 更新 view

單一控制的 view

(一對一的控制, 像是由 scroll bar 控制內容）這種情形可以就直接不用任何 notification 直接 view 裡面解決就可以

改變 model 的 view update.

這種情形最好繞到 model, 由 model(proxy) 透過 sendNotification 去更改 view. 這樣一來 控制端的 view 跟  model 都可以利用同一個 notification 去更改被多元控制的 view

由用途可以分作

System

GUI (Graphic User Interface)

View

PS:
這篇不錯 : http://flash.tutsplus.com/tutorials/workflow/understanding-the-puremvc-open-source-framework/

http://moxie-tw.com.tw/xxtralab/projects_2009.htm

友人 D 把多點互動玩得很不錯~