B418: 11月 2011

2011年11月29日星期二

AR 的標誌圖卡製作

這個網站提供直接經由網路製作 AR 的圖卡，也含有 source 可學習。不過，現階段先試試看能不能順利製作所需的圖卡資料為主。

Marker's Generator Online

Processing + RFID

近期準備試驗 RFID 的功能，主要也是想要能夠和 Arduino 或 Processing 的互動結合。先找了幾個網站，找機會試試。

2011年11月20日星期日

利用 xcode 學習 Objective-C

一份很不錯的學習資料『Becom an Xcoder』也有正體中文的譯本，很值得參考！

BecomeAnXcoderTC.pdf PDF 版
BecomeAnXcoderTC_pages.zip Pages 原始檔

(以上資料來源: http://blog.lifestyle.idv.tw/2007/06/become-xcoder-12.html)

而原文作者也有推出新版的內容，可在此參考
http://www.cocoalab.com/?q=becomeanxcoder

2011年11月11日星期五

一些 iPhone App 開發的課程

參考一些坊間的iPhone App的課，針對課程內容整理如下：

文化大學推廣部『iPhone應用軟體開發班』， 30小時，約九仟元，這是屬於基礎入門的課。

開發環境介紹
Objective C 基礎#1
Objective C 基礎#2
開發者帳號、申請憑證上架 App Store
iOS程式設計基礎
使用者介面設計#1
使用者介面設計#2
iOS程式設計基礎
多媒體
觸碰與手勢

資策會『iOS5 Tech Workshop』，6個小時的研討課程。這是針對 Xcode 4.2 及 iOS SDK5 的新功能教學，主要提供給有經驗且想快速了解新功能與新語法的開發人員。例如：什麼是ARC語法？Xib檔怎麼不見了？如何將舊的專案轉換成新的語法？還有甚麼新功能？有什麼新的UI元件？

From the Ground Up

Empty Application + Storyboard 演示

Objective-C

ARC記憶體管理
NSOrderedSet
JSON Serialization

Storyboard

Segue
New way for IBOutlet & IBAction
Construct App

Controller

Present/Dismiss View Controller
Prepare For Segue - more segues
Navigation Controller
TabBar Controller
UIPageViewController
Background - Lock & Home

View

Stepper
Table View
UIAlertView
Scroll View in WebView

Xcode Settings

Compiler
Device Requirement

資策會的『iPhone 應用軟體開發』，主要區分為四個梯次，每梯次約 30 小時，一萬五仟元。

Level 1：語法基礎

C語法基礎復習

C語言的指標和記憶體管理的關連性 - pointer
C語言常用的結構 - Struct

Objective-C 語法基礎

物件導向觀念 - 類別與物件
Objective-C 如何表現類別 - 自定類別
與其他物件導向語言表示法的不同 Java,
C++，C#

Storyboard & View

iOS 簡介 - 從 C 的 main function 到 iOS
App
泛用程式架構 - Model View Controller
基本事件處理 - Target-Action Event
基本常用類別 - NSSet, NSArray，NSDictionary
Block

Controller

如何傳遞訊息給物件 - 訊息傳遞
Objective-C 的存取子的特色 - getter & setter
如何新增沒有原始碼的 Class 上的 method 　Category
物件與物件之間非同步交換資料 Protocol & 　Delegate
通用存取觀查實體變數的方式 Key-Value 　Coding & Observing
多執行緒相關 NSThread, NSTimer
中央控管非同步通知服務 - NSNot fication
快速比較物件 - NSPredicate
如何利用多核增進效能
GCD - Grand Central Dispatch

Access File

File System
Property List
File Manager

Level 2：功能元件

複習Objective-C重要的課題

Memory Management
Delegate
Block

iOS UIKit

程式架構基礎 - MVC Design Pattern
呈現畫面原理 - View
程式邏輯控制 - Controller
簡單儲存資料 - Read & Write Property List
容器式 Controller
畫面拖拉,捲動,放大縮小 - UISrollView
呈現大量列表資料 - UITableView,UIPickerView
更多 UI
多工與背景執行介紹
標準iPad應用程式介面

內建裝置

振動
多媒體播放器
地圖資訊應用 - 地標樣式,座標轉換,相關委任方法
定位資訊

Internet

iOS 與 HTML Javascript 互動
HTTP 介紹
Objective-C在HTTP上應用
Ajax簡介 - Javascript, XML, JSON
深入解析 XML

進階 Core Data 應用

兩張 table 間關係設定與物件

Level 3：iOS 遊戲程式設計

Part 1

基礎繪圖元件：OpenGL ES
基礎輸入元件：Input Events
基礎遊戲元件：Bounding Box
基礎輸出元件：User Defaults

Part 2

基礎繪圖元件：OpenGL Texture
基礎繪圖元件：Compressed Texture
基礎遊戲元件：Sprite
基礎遊戲元件：Animated Sprite
基礎音效元件：AVFoundation

Part 3

基礎腳本語言：Lua
進階音效元件：OpenAL
基礎社交元件：Game Center
基礎商務元件：In-App Purchase

Part 4

進階腳本語言：Luabind
進階腳本語言：Game Components
進階遊戲元件：State Machine
進階遊戲元件：User Interface

Part 5

進階遊戲架構：Component-based Architecture
進階物理引擎：Box2D

Level 4：雲端應用

實務技術

GCD 與 Block 深入探討 - 生命周期，記憶體管理
UIScrollView 延申 - 組合多個 Page

Web 互動實務

URL Escape issue
Coding issue - Regular Expression
Chart API - jQuery Flot
HTML5 手勢 - 移動，縮放，旋轉

Social Network 互動

Facebook API
Plurk API

雲端免費空間

一般資料 - Drop Box API
影音資料 - Youtube API
縮址 - bitly API

AR擴增實境應用
Code Data進階應用

Table Relationship

譯智教育訓練中心，有完整的一系列課程，每系列約 30 小時，約

先修班 iPhone /iPad App 開發先修： C 語言程式設計

Introduction

iPhone 軟體開發架構介紹
Xcode 開發環境建立與使用介紹

C 語言程式設計

資料型別與運算式
變數
決策
迴圈控制
函式
陣列
指標
使用者自訂資料型別

程式實作

數值計算實作
迴圈及流程控制實作
小型專案實作

第一課 iPhone /iPad App 開發初階：Objective-C 程式設計

Introduction

Xcode 開發環境建立與使用介紹
iPhone 專案介紹與應用
從Xcode 到iPhone

Objective C 物件導向程式設計

物件導向程式設計概論
類別、物件、方法與訊息
封裝與繼承
Objective C 的基本語法
資料型別
Objective C 特有資料型別
代理與協定介紹
iPhone 程式設計模型介紹
iPhone 的記憶體管理模式介紹

The Foundation Framework

Foundation Framework 簡介
檔案管理
2012 年 iPhone/iPad APP 開發課程

第二課 iPhone /iPad App 開發入門：iOS 軟體與使用者介面設計

iOS 程式設計基礎

iOS 軟體架構
Xcode 開發環境介紹
Objective-C 語言簡介(*複習)
我的第一個iOS 程式
使用者介面簡介
MVC 設計模式(Model-View-Controller)
iOS 定位技術與LBS 簡介
我的第二個iOS 程式 - Google Map
自定地圖圖標

使用者介面設計

使用者介面綜觀
基本介面設計(一般按鈕、標籤、開關、滑軌等）
ViewController
TableView
導覽列(Navigation Controller)
Tab Bar Controller
UIScrollView 運用--捲動、放大、縮小
UIImage 運用
NSTimer 使用
NSThread 使用
轉場動畫與效果實作

實作

學習結合使用者介面以及圖檔處理
實作在iPhone/iPad 上的相片瀏覽程式

第三課 iPhone /iPad App 開發進階：網路與多媒體

實機偵錯、憑證作業與App Store 付費機制

憑證申請作業。
實機偵錯方法。
上架送審與注意事項。
App Store 付費機制簡介。

網路應用篇

網路狀態檢查
與特定Server 的連線狀態檢查
iOS 的 HTTP Get 使用
iOS 的 HTTP Post 使用
UIWebView 運用
UIWebView 與 App 功能的互動
UIWebView 與 Javascript 的互動。
App 中播放 Youtube 影片。
XML 簡介
XML Parser 使用
網路功能綜合運用--RSS Reader 實作
JSON 簡介
Plurk API 使用
Facebook API 使用

多媒體功能篇

音效播放與震動
錄音功能、音樂播放功能
錄音與放音混合運用功能
iOS 多工簡介
背景多工播放音樂
App 內影片播放
遠端串流音樂播放
遠端串流影片播放
拍照/錄影功能運用
從相簿中存取影片、照片

2011年11月10日星期四

MySQL 資料庫的備份及還原

利用 phpMyAdmin 操作

1. 資料庫的備份 (輸出) 作業
(1) 步驟一

(2) 步驟二

(3) 步驟三：將 class.sql 檔案保存，此即為資料庫的備份檔案
2. 資料庫還原 (載入、匯入) 作業
(1) 步驟一

(2) 步驟二

(3) 步驟三：檢查資料確定已匯入

在網頁設計領域中，照片的顯示方式一直都有新的突破，從早期簡單的圖片，自行製作網頁，到一些軟體協助產生相簿的網頁，到目前流行採用雲端的相簿連結方式，讓網頁設計人員需要經常涉獵不同的方法，以配合當時的.....流行或習慣。

以下介紹的是利用完成度較高，且彈性又大的一些方法，主要是採用已經完成的部份程式，結合到自己的網頁，這樣做的好處是可以維持原本美工設計的風格，也不會隨雲端系統的改換而出現無法控制的廣告或版面不合等狀況，非常適合網頁設計人員使用。

主要的技術大致有 Javascript、JQuery、Flash及HTML5，挑出幾個具有代表性的資源。

1. 採用單純的 Javascript 技術

10款讓你震撼的圖片展示js代碼展示與下載

2. 使用 JQuery 技術

超過10個 jQuery 相簿、圖庫與秀圖外掛

3. 使用 Flash 技術

flash photo galleries

4. 使用 HTML5 等技術

Photo Gallery for Your HTML5 Website

更多的資料，未來會持續性地加以補充。

遊戲產業大變天啦

資料來源：http://blog.flurry.com/bid/77424/Is-it-Game-Over-for-Nintendo-DS-and-Sony-PSP

原文很長，不過只要看其中的圖就夠清楚啦！智慧型手機 (含iPhone、iPad及Android陣營) 的遊戲成長已經大幅壓過任天堂及Sony PSP的掌上型遊戲機了。

2011年11月8日星期二

書籍翻頁之網頁製作 - Flash Page Flip

這裡介紹一款書籍翻頁效果的網頁，來自 http://www.flashpageflip.com/ 網站。其中的免費版本既方便又實用 (而且我覺得比專業版好太多了)，效果不錯，製作方式也非常簡單，可在 http://www.flashpageflip.com/FreeFPF.asp

解說前先參考它的完成範例：

(1) 官方網站提供的範例
(2) 測試練習製作的範例
(有時似乎要再按一次 Reload 重整才會顯現？！)

在開始製作前，最好先確認要製成的尺寸大小，且是僅就書籍的部份。例如想要的書面大小是寬368、高450的解析度，即單一頁面是 368x450，而攤開後的頁面則是 736x450 的解析度，所以各個頁面的尺寸就以這個大小來準備。

(1) 封面頁為單一頁面，368x450
(2) 攤開後其實為兩頁，若需要全幅的畫面，則應採用 736x450 的圖，裁切成兩張獨立的圖。
(3) 之後每個攤開的頁面均依此類推
(4) 封底頁為單一頁面，368x450

全幅的說明如下圖所示：

原本尺寸為 736x450 的一張圖檔

裁切成兩張 368x450 的圖，各別存檔

有這樣的觀念後，製作便簡單了，分別把各頁面的圖檔整理好，最好加上有規律的檔名。接著，把網頁相關檔案取出，而所有的圖檔置於 pages 資料夾內。

xml 裡的 Pages.xml 檔案是設定各頁面對應的圖檔。特別注意第一列有解析度的設定。

如此便完成了翻書網頁的製作。

此一免費版本其實還提供了以 .swf 檔案做為書頁的功能，因此於 flash 製作時必須先指定寬高，注意為單頁的尺寸，故無法用全幅的方式做 flash 動畫，不過官方網站的範例，巧妙地利用左圖、右flash的方式，製作出一個效果頗佳的頁面。同時該範例也有目錄頁，亦為使用 flash 各別製作，不過原始的 flash 檔案有附在壓縮檔內，可以參考。

提供的翻頁範例是全畫面的，如果想要限制在指定的區域內，加入 div 圖層有效。但上下的選項按鈕及官方商標文字則會保留。

參考範例如：限定在網頁某區域內的範例

還有它的範例網頁編碼並非是 utf-8，需要修改或重新編寫。其它尚有插入 flv 影片及 mp3 聲音的功能，在此省略，歡迎自行試驗。

網路上也有非常詳細的解說可以參考，列舉一二如下：

2011年11月7日星期一

初步測試 ARToolkit in Processing

如題，本是要學習如何將 ARToolkit 掛到 Processing 裡測試，之後發現的都是改寫後的 library。在此先簡單記錄一下測試之結果：

1. 在此下載 SimpleARToolKit2.0.zip 的程式，裡頭有附三個簡單的範例，有助於學習。
2. 在此取得 MultiARToolKit 的程式，它可以讀取多個圖卡來顯示，實用。

測試初期不太順，原因包括抓不到 library，還有 OutofMemory 的問題，處理的方式有：
(1) copy 2 file to \processing-1.5.1\modes\java\libraries (JARToolKit.dll, SimpleARToolKit.jar)
(2) OutofMemory 的問題，由這裡取得解決 http://www.douban.com/group/topic/9531554/。做法是在 draw() 函式最後面加上 System.gc(); 強制重整記憶體。

最後再改寫程式，終於都成功了，功能上已符合我所需要的初步需求。只是很多問題胡裡胡塗地解決，所以在此備忘記錄，待日後釐清再補寫教學文章了。

找到一些網路文章，應該都有不錯的學習資料：

(1) ARToolkit in Processing (該作者有不少篇關於 AR 的資料)
(2) MultiARToolKit 作者的部落格 (裡頭也有不少篇關於 AR 的資料)
(3) 鯨男的 SimpleARToolkit (有作者一番辛苦解決問題過程的心得)
(4) http://wn.com/Artoolkit_Processing (針對 Artoolkit 在 Processing 的資料及許多影片)

在 Processing 裡使用 Webcam

要在 Processing 中連接 Webcam 寫程式，可以使用 JMyron (WebCamXtra) 這一套程式庫，這也是 Processing 官方網站裡有介紹的 library。

官方網站在此：http://webcamxtra.sourceforge.net/

在 Processing 內的使用方式如下：

1. 先下載所需的程式。

2. 解壓後，要注意各別的檔案要做不同的處理，檔案『HowToInstall.txt』裡寫得很清楚，本文接下來也會各別提到。

3. 將 JMyron 資料夾覆製到 Processing/library 裡，不過這是舊版 Processing 1.2 的用法；若是使用 Processing 1.5.1 版本，要置於 Processing\modes\java\libraries 才行。

4. 將 Extra DLLs 資料夾的檔案覆製到系統資料夾，如 C:\windows\System32 裡，或是 Processing 的根目錄裡。

6. 範例的資料夾『JMyron Examples』擺哪兒都行。

7. 重新執行 Processing 即可使用 JMyron library 寫程式了，建議先執行『JMyron Examples』裡的檔案來測試。最簡單的為『Myron_simpleCamera』裡的範例，可用來測試否安裝成功及 Webcam 是否有作用。

8. 可以修改程式裡的數值，測試一下自己的 Webcam 能夠支援的解析度，早期為 320x240，目前較好的 Webcam 似乎也只能到 640x480 的解析度。

其他的範例都不錯，以下為各個範例的擷圖，看了這些範例，也許更能激起不少寫程式的點子呢。

開始準備寫 Processing 程式

Processing 的程式易學易用，首先要下載它的主程式，解壓縮之後便可執行。

1. 到 Processing 的官方網站 Processing.org 選擇檔案下載。

2. 約 86MB 的檔案 (目前最新版是 1.5.1) 下載後，解壓縮，置於任何資料夾都可以。

3. 執行其中的執行檔 Processing.exe 即可開始程式編寫並執行。

2011年11月6日星期日

魔術鏡子初步實驗

實作魔術鏡子的效果，很符合需求。

大人的科學 - POV

在日文雜誌《大人的科學》其中有一期附贈的玩具，應用在字幕的顯示上有個專有名詞稱為『POV』

紅線長卷

印象中曾在網路影片看到這樣的點子，趁著在學習 Processing 程式時，便依這個點子，實際寫了出來，還蠻好玩的。

Wii 搖桿的測試

重新張貼早期練習 Arduino + Wiichuck 搖桿 + Processing 的範例，不過因為都沒有留下記錄，現在看看，還有點想不出來是怎麼做成的了。

三軸加速器初體驗

早期練習三軸加速器感應的影片，由此得到的想法是希望能將它裝置在一般意想不到的物品上，讓它可以具有如同 Wii 控制器的效果，當然，這才是第一步而已。

擴增實境初步實驗

第一次實驗擴增實境時拍的影片，不過沒有留下任何操作上的記錄，由影片中來看，應該是使用 Processing 語言加套件來完成的吧！

2011年11月5日星期六

如何在網頁中加入FB的推文『讚』

目前為測試頁，隨即刪除.....

要在文章裡加上 Facebook 的『讚』推文，只要簡單的幾個步驟即可完成：

(1) 確認要推文的網址
(2) 到 FB 網頁裡輸入以取得程式碼
(3) 將程式碼貼到本文的HTML裡即可

先就此基本的操作解說如下：

1. 先確認好要提供『送出讚』的網頁網址，當然必須是網路上合法能連得到的網址，千萬不要貼出去的是『http://localhost/myweb/』這樣的測試網址呀。

2. 到 Facebook 的 Plugins 頁面，https://developers.facebook.com/docs/plugins/ ，選擇想要的功能。

3. 輸入網址及設定

4. 取得程式代碼，複製全部

5. 貼到文章裡要顯示的地方，注意是 HTML。

以上就算完成了，不過除此之外，它仍有更多的功能可以使用。用Google 搜尋『在網頁中加入FB推文讚』等就會列出許多，在此便不一一細說，大致上要先分清楚自己想要的功能是哪一種：

(1) 本文提到的是單一網頁，或是部落格內的某一篇文章。所以有幾篇文章，就要自行重貼幾次，很多網站也有提到。

(2) 如果是要對某一站內全部的網頁都自動加上各別的推文鈕，可以利用後端的程式來產生，將每一個頁面的網址置於 FB 程式代碼內。

如何在部落格上放Facebook的「讚」來推薦文章？

(3) 如果是使用外面的部落格平台，則需依各部落格提供的語法，在特定的位置加上代碼，但只需一次即可。

[Pixnet] [密技] 在Blog文章中加入FB 推文『讚』按鈕威力升級最終版-一次搞定無須在每篇設定了！
[WordPress] [Blogger] 為你的網誌加入Facebook推文按鈕（Like Button）

(4) 如果要指定送到FB塗鴨牆的文字、圖片和內容，則需再 FB 上的 Step 2 裡設定更多的參數，如 og:title 和 og:image 等。

如何安裝Facebook Like按鈕在自己的網站上，讓網友們「讚」一下？

(5) 如果是還要送到朋友的塗鴨牆，則要做的設定就更多了。

FB 讚按鈕

最後，直接就用這篇文章來做測試吧……

測試程式的張貼

程式總是又臭又長，貼在部落格上佔篇幅很大，但也不能只是下載，有時仍是直接觀看比較方便，所以想到可以利用div限定顯示的寬高，其中加上 overflow:auto 的 CSS 設定便能產生捲軸，還有就是必須再加上 HTML 的 pre 標籤，以保留原本的格式。本以為是很方便的做法，結果測試後完全不行。

之後，改測試 iframe 的方式，內部的程式則由伺服器端來產生，以下測試看看：

不知道效果如何？

圖片特效教學 (10js-2)

《Javascript 的圖形特效》一文中的第二種特效如下：

預覽網址：http://study.welcome.idv.tw/b418mm/photo_js/10js/2/

它的效果為一張張圖片緊接著 zoom-in 或 zoom-out。設定上很簡單，只要指定圖檔名及標題即可，如下：

完成！

圖片特效教學 (10js-1)

《Javascript 的圖形特效》一文中的第一種特效如下：

預覽網址：http://study.welcome.idv.tw/b418mm/photo_js/10js/1/

此為採用單純的 javascript 所製作出的特效，且所有顯示的圖片均集中寫在 html 部份，很容易更換為自己想要的圖片。步驟為：

(1) 先準備好數張圖片 (下圖為原先展示的範例圖檔，要區分出有5個不是)

(2) 修改編頁中圖片的部分

(3) 如果想要包覆在自己指定的圖層 div 中亦可

(4) 如下示範

預祝順利！

2011年11月4日星期五

Javascript的照片特效

這算是非常古老的一組資料，年代來源已不可考，用Google搜尋『10款讓你震撼的圖片展示js代碼』，也是滿坑滿谷的複製轉貼內容。

不過就這幾款的效果而言，仍然很有特色，最主要在於它是利用純粹javascript寫成，而且將圖檔定義與程式有效分離的做法，很值得做為入門的學習。要學習的倒不是它的程式如何寫成，而是如何將該效果引用到自己的網頁上。

以下貼上它的預覽圖片，點取下方連結亦可直接查看預覽頁面：