2011年11月29日 星期二

AR 的標誌圖卡製作

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

Marker's Generator Online

Processing + RFID

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


2011年11月20日 星期日

利用 xcode 學習 Objective-C

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

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

2011年11月11日 星期五

一些 iPhone App 開發的課程

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

文化大學推廣部『iPhone應用軟體開發班』, 30小時,約九仟元,這是屬於基礎入門的課。
  1. 開發環境介紹 
  2. Objective C 基礎#1 
  3. Objective C 基礎#2 
  4. 開發者帳號、申請憑證上架 App Store 
  5. iOS程式設計基礎 
  6. 使用者介面設計#1 
  7. 使用者介面設計#2 
  8. iOS程式設計基礎 
  9. 多媒體 
  10. 觸碰與手勢

資策會『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:語法基礎
  1. C語法基礎復習
    • C語言的指標和記憶體管理的關連性 - pointer
    • C語言常用的結構 - Struct
  2. Objective-C 語法基礎
    • 物件導向觀念 - 類別與物件
    • Objective-C 如何表現類別 - 自定類別
    • 與其他物件導向語言表示法的不同 Java,
    • C++,C# 
  3. Storyboard & View
    • iOS 簡介 - 從 C 的 main function 到 iOS
    • App 
    • 泛用程式架構 - Model View Controller 
    • 基本事件處理 - Target-Action Event 
    • 基本常用類別 - NSSet, NSArray,NSDictionary 
    • Block 
  4. Controller
    • 如何傳遞訊息給物件 - 訊息傳遞 
    • Objective-C 的存取子的特色 - getter & setter
    • 如何新增沒有原始碼的 Class 上的 method  Category 
    • 物件與物件之間非同步交換資料 Protocol &  Delegate
    • 通用存取觀查實體變數的方式 Key-Value  Coding & Observing
    • 多執行緒相關 NSThread, NSTimer 
    • 中央控管非同步通知服務 - NSNot fication 
    • 快速比較物件 - NSPredicate 
    • 如何利用多核增進效能 
    • GCD - Grand Central Dispatch 
  5. Access File
    • File System 
    • Property List 
    • File Manager 
Level 2:功能元件
  1. 複習Objective-C重要的課題
    • Memory Management
    • Delegate
    • Block
  2. iOS UIKit
    • 程式架構基礎 - MVC Design Pattern
    • 呈現畫面原理 - View
    • 程式邏輯控制 - Controller
    • 簡單儲存資料 - Read & Write Property List
    • 容器式 Controller
    • 畫面拖拉,捲動,放大縮小 - UISrollView
    • 呈現大量列表資料 - UITableView,UIPickerView
    • 更多 UI
    • 多工與背景執行介紹
    • 標準iPad應用程式介面
  3. 內建裝置
    • 振動
    • 多媒體播放器 
    • 地圖資訊應用 - 地標樣式,座標轉換,相關委任方法
    • 定位資訊
  4. Internet
    • iOS 與 HTML Javascript 互動
    • HTTP 介紹
    • Objective-C在HTTP上應用 
    • Ajax簡介 - Javascript, XML, JSON 
    • 深入解析 XML
  5. 進階 Core Data 應用
    • 兩張 table 間關係設定與物件
Level 3:iOS 遊戲程式設計
  1. Part 1
    • 基礎繪圖元件:OpenGL ES
    • 基礎輸入元件:Input Events
    • 基礎遊戲元件:Bounding Box
    • 基礎輸出元件:User Defaults
  2. Part 2
    • 基礎繪圖元件:OpenGL Texture 
    • 基礎繪圖元件:Compressed Texture
    • 基礎遊戲元件:Sprite
    • 基礎遊戲元件:Animated Sprite
    • 基礎音效元件:AVFoundation
  3. Part 3
    • 基礎腳本語言:Lua
    • 進階音效元件:OpenAL
    • 基礎社交元件:Game Center
    • 基礎商務元件:In-App Purchase
  4. Part 4
    • 進階腳本語言:Luabind
    • 進階腳本語言:Game Components
    • 進階遊戲元件:State Machine
    • 進階遊戲元件:User Interface 
  5. Part 5
    • 進階遊戲架構:Component-based Architecture
    • 進階物理引擎:Box2D
Level 4:雲端應用
  1. 實務技術
    • GCD 與 Block 深入探討 - 生命周期,記憶體管理
    • UIScrollView 延申 - 組合多個 Page
  2. Web 互動實務
    • URL Escape issue
    • Coding issue - Regular Expression
    • Chart API - jQuery Flot
    • HTML5 手勢 - 移動,縮放,旋轉
  3. Social Network 互動
    • Facebook API
    • Plurk API
  4. 雲端免費空間
    • 一般資料 - Drop Box API
    • 影音資料 - Youtube API
    • 縮址 - bitly API
  5. AR擴增實境應用
  6. Code Data進階應用
    • Table Relationship
譯智教育訓練中心,有完整的一系列課程,每系列約 30 小時,約

先修班 iPhone /iPad App 開發先修: C 語言程式設計
  1. Introduction
    • iPhone 軟體開發架構介紹
    • Xcode 開發環境建立與使用介紹
  2. C 語言程式設計
    • 資料型別與運算式
    • 變數
    • 決策
    • 迴圈控制
    • 函式
    • 陣列
    • 指標
    • 使用者自訂資料型別
  3. 程式實作
    • 數值計算實作
    • 迴圈及流程控制實作
    • 小型專案實作
第一課 iPhone /iPad App 開發初階:Objective-C 程式設計
  1. Introduction
    • Xcode 開發環境建立與使用介紹
    • iPhone 專案介紹與應用
    • 從Xcode 到iPhone
  2. Objective C 物件導向程式設計
    • 物件導向程式設計概論
    • 類別、物件、方法與訊息
    • 封裝與繼承
    • Objective C 的基本語法
    • 資料型別
    • Objective C 特有資料型別
    • 代理與協定介紹
    • iPhone 程式設計模型介紹
    • iPhone 的記憶體管理模式介紹
  3. The Foundation Framework
    • Foundation Framework 簡介
    • 檔案管理
    • 2012 年 iPhone/iPad APP 開發課程
第二課 iPhone /iPad App 開發入門:iOS 軟體與使用者介面設計
  1. iOS 程式設計基礎
    • iOS 軟體架構
    • Xcode 開發環境介紹
    • Objective-C 語言簡介(*複習)
    • 我的第一個iOS 程式
    • 使用者介面簡介
    • MVC 設計模式(Model-View-Controller)
    • iOS 定位技術與LBS 簡介
    • 我的第二個iOS 程式 - Google Map
    • 自定地圖圖標
  2. 使用者介面設計
    • 使用者介面綜觀
    • 基本介面設計(一般按鈕、標籤、開關、滑軌等)
    • ViewController
    • TableView
    • 導覽列(Navigation Controller)
    • Tab Bar Controller
    • UIScrollView 運用--捲動、放大、縮小
    • UIImage 運用
    • NSTimer 使用
    • NSThread 使用
    • 轉場動畫與效果實作
  3. 實作
    • 學習結合使用者介面以及圖檔處理
    • 實作在iPhone/iPad 上的相片瀏覽程式
第三課 iPhone /iPad App 開發進階:網路與多媒體
  1. 實機偵錯、憑證作業與App Store 付費機制
    • 憑證申請作業。
    • 實機偵錯方法。
    • 上架送審與注意事項。
    • App Store 付費機制簡介。
  2. 網路應用篇
    • 網路狀態檢查
    • 與特定Server 的連線狀態檢查
    • iOS 的 HTTP Get 使用
    • iOS 的 HTTP Post 使用
    • UIWebView 運用
    • UIWebView 與 App 功能的互動
    • UIWebView 與 Javascript 的互動。
    • App 中播放 Youtube 影片。
    • XML 簡介
    • XML Parser 使用
    • 網路功能綜合運用--RSS Reader 實作
    • JSON 簡介
    • Plurk API 使用
    • Facebook API 使用
  3. 多媒體功能篇
    • 音效播放與震動
    • 錄音功能、音樂播放功能
    • 錄音與放音混合運用功能
    • iOS 多工簡介
    • 背景多工播放音樂
    • App 內影片播放
    • 遠端串流音樂播放
    • 遠端串流影片播放
    • 拍照/錄影功能運用
    • 從相簿中存取影片、照片

2011年11月10日 星期四

MySQL 資料庫的備份及還原

利用 phpMyAdmin 操作

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

(2) 步驟二

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

(2) 步驟二

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

在網頁中套用照片顯示的特效

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

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

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

1. 採用單純的 Javascript 技術
2. 使用 JQuery 技術
3. 使用 Flash 技術
 4. 使用 HTML5 等技術
 更多的資料,未來會持續性地加以補充。

遊戲產業大變天啦

資料來源: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 程式代碼內。

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

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

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


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

測試程式的張貼

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

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



不知道效果如何?

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



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

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

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

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




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

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

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


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


(4) 如下示範


預祝順利!

2011年11月4日 星期五

Javascript的照片特效

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

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

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











檔案下載:這裡
參考來源:早期是由 zcool 網站發現,但該網站也是轉貼自其他來源,已不詳


2011年11月1日 星期二

開始網誌

B418實驗室的資料,包含實驗室內的原創記錄或筆記,也包含從網路上擷取轉貼的相關資訊,主要在供實驗室成員學習之用。