• XSpect簡介(一個AOP觀念實作的框架)

    講者資料:小岡 投影片:XSpect 專案github位置:在此 這是10/17在cocoaHead聚會裡由講者所分享的一個他自己所寫的framework 因為他是在今日議程的最後一個講者,有些部份講的較為快速、簡短 有很多投影片也跳過去未說,在當下聽時只能大略聽到一個概念。 較引起我注意的地方,是他所提到的AOP的觀念與應用 也因為對他所說的AOP的觀念以及相關應對、程式設計方式感到蠻有趣的 這部份在會議結束後也花蠻多時間在研究該講者的code以及相關概念的研究 這是講者對AOP的解釋: 如果我要敘述 AOP 在幹嘛,或是說他的目的的話。我會說 AOP 是在用另一種方式去封裝變化,達到原本 OOP 做不到的事。這個變化就是 crosscutting concerns。 crosscutting concerns 就是為了一個邏輯,而散布在四處的程式碼。 AOP 就是要把他們全部包裝在一起。 下面的是其他網頁對於AOP的解釋 AOP全名Aspect-Oriented Programming,我們先來看看XXX-Oriented的意義,通常翻譯「XXX導向」,也就是以XXX為中心,例如中文中「客戶導向」就是以客 戶為中心,而「物件導向」(OOP:Object-Oriented Programming)就是以物件為中心的程式設計。 自然的,Aspect-Oriented Programming,就是「Aspect導向程式設計」,也就是以Aspect為中心的程式設計,但什麼是Aspect?中文直譯通常是「方面」,但這個名詞容易使人混淆。 牛津字典中的英英解釋對Aspect是:particular part or feature of sth being considerd. 所以Aspect在英文中不只有「方面」的意思,還有部份(part)的意思。中文中稱「就這個方面來說」,通常指的是「就這個角度來說」或…

    Continue Reading…: XSpect簡介(一個AOP觀念實作的框架)

  • ,

    AIR記憶體監控工具 – Scout

    記憶體監控相關工具 Scout是一款針對用以監控記憶體狀態的程式,它不但可以監控電腦上面的swf的記憶體狀況,也可以監看使用air開發,運行在手機上的app的記憶體和gpu使用狀況。 在Scout之前,了解swf的記憶體使用狀況有幾個方式 內建的Profile功能 Profile可以監控現有的FLASH裡每一個CLASS占的記憶體比例,預設的設定會忽略AS內建的類別。如果要打開的話,可以選擇選單列裡的Window=>Preferences=>Flash Builder=>Profiler=>Exclusion Filter或是Inclusion Filters去排除或增加要觀察的class種類。 這個工具若是用按的方式執行,則只能針對FLEX本身的專案來做觀察。如果專案架構是外部的SWF檔案,則可以先切換到Profile工作模式(如圖:),然後選擇上方選單列的Profile=>Profile External Application=>New,去選擇要觀察的SWF檔案。 有關這個工具的介紹請見: Flex記憶體監控程式-Profile windows的工作管理員 監控執行緒的執行狀況,缺點是無法仔細的了解是那一個Class造成memory leak。 Hi-ReS-Stats  (https://github.com/mrdoob/Hi-ReS-Stats) 很常被見到的一個外掛程式碼,可以簡單的使用 來觀察FPS的運行速度、記憶體的使用狀況是否正常。嵌入後會在畫面上多出如下圖這樣的資訊欄位 Scout  (http://gaming.adobe.com/technologies/scout/) 最後就是今天要介紹的Adobe Scout工具,Adobe開發這個,主要是為了當開發者在使用Adobe AIR開發手機APP時,能夠更精準的掌握SWF運行的狀況以及GPU的狀況。因此Adobe官方便提供了這一項免費工具,讓APP開發者可以更仔細的監控效能的狀況。 Scout的優點 上面介紹了這麼多的工具,那麼Scout的優勢為何呢? 仔細(Details) Scout可以提供詳細、階層性的資訊,讓開發者一目了然自己的程式的GPU資訊及記憶體使用狀況。 除了Profile的記憶體監控功能外,Scout還可以提供GPU運算的相關數字及報表。 在上面所列的其他三項工具,只有Hi-ReS-Stats有顯示FPS,可以讓開發者了解FPS速度是否正常,可觀察何時影格速度會變慢,並檢查是否有什麼動畫讓畫面停住了。其餘的都只能單純的監控程式使用的記憶體狀況,而無法了解到動畫處理的記憶體使用狀況。 在flash裡,動畫的運算、圖形處理等,在很多時候其實是造成畫面Lag的主要元兇,因此,或許很多時後我們會發現動畫不知為何播放速度變慢了,但是觀察Profile,記憶體的使用狀況卻很正常,這時很可能便是GPU Memory不足。 有關要如何做才能提高動畫的效能,相關議題可以參考下面這篇文章: http://claire-chang.com/1063-提升Flash效能的幾個注意事項 可擴展性(Extensible) Adobe有提供相關的API,當原本Scout提供的資訊無法滿足需求時,開發者可以在ActionScript裡面寫程式,去自行丟出想觀察的額外資訊,並且只要幾行程式碼就可以做到。(請參見Telemetry類別) 跨平台(Cross-platform) 可在Mac及Windows上運行,並能讓開發者開發Andriod及iOS APP時更容易觀察其效能狀況。…

    Continue Reading…: AIR記憶體監控工具 – Scout

  • iOS 7 轉換指南

    參考資料:   iOS 7 UI Transition Guide、關於iOS7,設計師需要瞭解的十件事 PDF檔下載:  TransitionGuide IOS7的設計要點 依從:UI應要能很幫助使用者了解如何去操作、與內容互動,但不能搶走內容的鋒頭。它著重強調了怎樣使設計更好地支持內容,而不是反過來壓制內容。 清楚:字體在各種大小下都應清晰易讀,並應巧妙的利用圖示及裝飾,去突顯重點。 深度:巧妙運用手勢及視覺階層以利使用者了解、快速操作。 可以看看蘋果是怎樣在iOS7內置的日曆應用當中貫徹這一點的。新的日曆應用在界面上極大的簡化了,去除了一切不必要的設計元素,並使用了乾乾淨淨的白色背景,完全以內容為中心。 根據「依從」原則,apple建議開發者不要使用擬真。介面的設計應該是圍繞著內容而存在,不應奪走內容的光芒。因此,官方建議盡量避免使用3D質感的按鈕、漸變、光暈、陰影等擬物化的設計,因為他們認為這樣的設計會奪去使用者對內容的焦點。但雖然圖示要輕量化,最小點擊區域44px的規則依然不變,因為用戶不能點擊小於44px的界面元素。 關於移除擬物化風格的設計方式,可以參考iOS7內置的Game Center、日曆和Podcast應用。 另外,關於深度,iOS7最吸引人的設計之一就是系統界面當中由加速計驅動的3D效果。隨著設備在物理空間當中的移動,圖標與背景圖片會展示出視差效應。這是iOS7三大設計主題當中的第三點的典型示例: 深度:視覺外觀的層次以及逼真的動畫效果可以傳達出界面的活力,使界面更容易被理解,並提升用戶的愉悅度。 自然,蘋果也希望應用設計師們採用相同的方式,通過半透明及動畫效果來展示界面和元素之間的層級關係。這是應用設計理念的一次重大飛躍,而且隨著iOS7的發布和普及,這些效果很快就會成為用戶期望當中的一部分。 在iOS7設計規範當中,蘋果建議,在iOS7框架下重新設計應用的最佳方式,就是剝離你已有的界面,將應用的核心功能呈現出來,重新確認它們之間的相關性。 一旦你確認好功能方面的核心要素,就需要通過iOS7的設計主題將界面和交互模式重新構建起來。舉個簡單的例子,蘋果的指南針應用採用了最小化和功能優先的設計方式,通過重新設計過的、更注重細節的形式來展示關鍵信息。 iOS7的應用界面通過大量的呼吸空間來確保可讀性和易用性。在官方的設計規範中,蘋果明確指出,他們希望設計師們通過留白傳達出平靜和穩定的感覺,使應用看上去更加專注和高效。 檢視現在的APP 在升級APP至iOS7之前,先檢查幾個項目: 是否有開啟AutoLayout功能 因為IOS7裡的文字大小可讓使用者任意調整,所以IOS7是一個好時機去開啟使用AutoLayout,因為這可以幫助開發者自動去調整物件的相對位置。也可以更容易的讓APP同時可支援IOS6及IOS7 是否也要支援IOS6? 使用者往往喜歡很快的更新到最新版本。若是因為其他商業因素需要同時支援IOS6及IOS7,則需要做更多的調校 分辨自己的API是屬於那一種類型 (1) 完全使用內建的UI介面:確認新的視覺效果是否是自己想要呈現給使用者的,並確定一些手勢等操作可正確運作 (2) 完全使用自己的UI介面:檢查原有的設計是否可以滿足ios7的使用者要求,如果可以,那便可只改很少的東西。如果不行,則需要整個重新去思考、調整,來適應現有的架構。 (3) 混合使用:是否需要做大改變取決於過去自定義元素是如何與原有元素結合,應確保功能及外表皆良好,並可與新的內建介面完美整合。 確定項目範圍 必做 更新ICON:在IOS7裡iphone和ipod需要120*120的圖示、ipad則需要152*152的。在IOS7的ICON在設計上不應使用光圈及陰影。Icon的size需求如下表 讓APP的背景包含狀態列的地方…

    Continue Reading…: iOS 7 轉換指南

  • Flat Design 座談會筆記

    講師介紹 Amy Megumi Kuo http://happyux.hpx.tw/conf/ch/ux-usa-tibco-amy-kuo/ 從政大畢業之後就到美國工作。原本是在做汽車面版設計,後來轉到手機和軟體的介面設計。 因為開發裝置的不同,在開發限制上會有所不同。 例如汽車的裝置在設計上,由於許多的按鍵仍然會是實體按鍵,但是手機與軟體則是完全要設計在畫面上。 會造成在設計方針上很大的不同 Flat design 的基本原則 首先要先介紹Flat這個詞 flat (N) 平面 skeuomorphism 擬真,在過去而言,對user來說還不熟悉,所以會用擬真的設計,希望讓使用者第一次接觸就知道如何使用。 flat design較有名的是microsoft和apple還有google。 在這邊比較了一下google的設計與ios的設計上的差異 google的原則 icon盡量簡單 每個icon都需面向前面,不可有角度 陰影簡單且同光源方向(左上) 推薦使用的顏色 不可用太多效果 apple的iOS human interface guide line 所有的事情都要以content為主 所有以清楚展現text為主 深度的意思是透過不同的層級讓使用者了解要表達的內容 從ios6到7要注意的設計要點,最大差別是『把所有的東西都以展現內容為主』 content要全螢幕,東西要做成透明的,讓user可以看的到背景內容 要redesign使用者的介面,用深度去表達不同的內容種類 所有的button要沒有border 在ios7裡,font…

    Continue Reading…: Flat Design 座談會筆記

  • IOS6與IOS7的不同處整理

    1. View會和狀態列重疊(壓在其之下) 2. 按鈕沒有邊框 3. tab bar變為半透明 4. 狀態列的顏色不會與導覽列分開 5. tintColor的影響顏色範圍改變,導覽列與tab bar的顏色不會受到tint Color的影響 ps:經測試,在ios7對於Segmented Control的tintColor,如果使用Global tint,一開始時的框線顏色不會變,但點過後顏色會改變。此時必須去各別設定該元件的tint color才會完整變更顏色 6. tab bar的圖示有按下狀態及非按下狀態 7. 文字樣式明顯不同(即使是相同的設定) 8. 預設會是全螢幕畫面 9. 狀態列的高度不再會影響到整體畫面高度(整體畫面會在狀態列之下) 10. NSBundle Class改變(Chia-Hsin分享) ios7的pathForResource (NSBundle Class)方法有調整過, 例,Local/iphone/page/01/01.jpg, ios7之前用: folder = Local fileName = iphone/page/01/01.jpg…

    Continue Reading…: IOS6與IOS7的不同處整理

  • UIWebView練習作業

    作業目標:http://www.youtube.com/watch?v=azplcMbuoQ4&feature=youtu.be 練習檔案:homework0831 先介紹一下UIWebView UIWebView的資料來源主要有三者: 本機上的HTML字串 本機上的資料 + MIME type 遠端的URL 這邊有中文的介紹:http://www.inside.com.tw/2010/03/14/cs193p-lecture-12 作業練習開始 首先我先拉出storyboard 然後我練習使用程式去產生UINavigationController,這是在AppDelegate.m裡 然後ViewController.h裡在viewDidLoad時初始化一些頁面數值 實作按鈕按下時的動作 接下來做WebViewController.m裡的內容, 在這邊我弄了一個下載進度的物件叫作UIActivityIndicatorView 這部份首先要先在- (void)viewDidLoad裡初始化載入效果 然後加上下面兩段程式碼 然後在實做UIWebView的Delegate去設定載入畫面 [UIApplication sharedApplication].networkActivityIndicatorVisible這個是在上方指示列的圈圈圖示 遇到問題(高手幫忙看3Q) 然後其實接下來這一點問題我弄了非常久~ 就是,在從上一頁傳來網址時, 也會執行到 -(BOOL) webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType 所以會必須去判斷現在是使用者點擊的link,或是是從上頁傳來的指令 為了這個需求,我用了幾個方式,但都有問題,包括現在的其實也有,但因為實在搞太久~ 所以就先這樣@@等老師公布他的作法後再來補修正 我總用試了這些方式 使用一個BOOL去判別,只有第一次loading頁面時不做跳頁呼叫,然後當webViewDidFinishLoad時將BOOL改為NO 問題點:有某些頁面會有js檔案,當頁面全部載入完成後,執行js後,就又會再第二次讀取網路資料,此時頁面就會莫名的突然回到第一頁然後顯示網址。(例如:我的部落格http://claire-chang.com)…

    Continue Reading…: UIWebView練習作業

  • hasEventListener()與willTrigger()區別

    承上一篇介紹Event事件流的基本概念 AS3的事件傳遞機制(Event、dispatchEvent及addEventListener) 再來介紹相關的檢查函數。 hasEventListener()方法: 檢查 EventDispatcher 對象是否為有註冊這個事件的監聽器。 willTrigger()方法: 檢查是否用此 EventDispatcher 對象或其父容器是否有註冊這個事件的監聽器 hasEventListener() 與 willTrigger()的區別是:hasEventListener() 只檢查它所屬的對象 而 willTrigger() 檢查對象以及對象的父容器是否有註冊這個事件(不管capture的值)。 假如像下面這樣的物件階層來說 今天我們對stage註冊事件 則檢查box的willTrigger及hasEventListener 的結果為 true false 而若我們對box註冊事件 則檢查box的willTrigger及hasEventListener 的結果為 true true 而若我們對box註冊事件 則檢查stage的willTrigger及hasEventListener 的結果為 false false 代表box不在stage完整可能有的事件流的動線裡。

    Continue Reading…: hasEventListener()與willTrigger()區別

  • Flex記憶體監控程式-Profile

    Flash Builder裡面大家最廣泛用來監控記憶體使用狀況的工具應該就是Profile了 Profile位於執行鈕的右邊,如下圖: 這邊提供幾個可能你按下Profile結果卻無法正常執行的一些討論串 Flex Builder – Profiler – Can’t run profiler 這個討論串有給一些嘗試的除錯方法 更改port號碼 是否SWF本身有錯誤?PreloadSwf 應位於本地端 換一個瀏覽器! (Preferences/General/Web Browser)也許 Firefox無法支援(我有遇過開不了的問題,我自己是換一個瀏覽器就解決了PS: 原本是firefox換成IE) 指定的瀏覽器是否有安裝debug版本Player? 設定mm.cfg檔案的值 (請看這邊 http://jpauclair.net/2010/02/10/mmcfg-treasure/) 設定開啟瀏覽器的地方在Window>Preference>General>Web Brower Profile的設定則在這邊(兩個enable的選項要記得勾選),port之類的更改也在此區更改 接下來,請選擇工作區 切到Profile模式之後,如果我們想觀看外部SWF的記憶體使用狀況, 可以按Profile>Profile External Application,一樣可以進入觀查模式 在執行Profile時,左上的欄位可選擇要觀察的物件, 在profile視窗裡,可以設定中斷點,然後用右上的去控制繼續執行、暫停等等 在Memory Usage可以顯示現在所耗的記憶體的狀況 Live Objects裡觀察現在在記憶體內的物件以及它的值 如果還想開其他的頁籤,也可以由Window=>Show…

    Continue Reading…: Flex記憶體監控程式-Profile

  • 我的第一款APP企劃

    畫面繪製工具: Balsamiq Mockups 參考規範: iPhone-HIG(人機界面指南) 企劃圖片下載: APP開發 名稱:94愛吃 類別:生產力應用程式 分類:美食 簡介: 想揪三五好友去吃某間超好吃的餐廳時,卻總是忘了餐廳的詳細資訊嗎? 想找一間適合談公事的餐廳,卻又一時想不起究竟那裡適合嗎? 這一款APP可以幫助你記錄曾吃過的餐廳,以及想吃卻還未去吃的餐廳。 也可以以地圖的方式,去告訴你這附近有那些你吃過的餐廳可以去吃。更能提供你最新、最酷的焦點餐廳情報。 如果你是美食愛好者,那不能錯過這一款APP唷! 畫面截圖 因為是第一款APP,不知道這樣會不會觸犯到APP的上架條款 應用程式涉及了裸體、暴力、中傷他人 違反商標法 功能過於簡單或與iOS內建功能動覆 使用未開放的API 應用程式Bug、當機且無任何警告訊息 違反HIG(Human Interface Guide)使用者介面 軟體功能與描述不符,或是描述提到第三方的名詞,如:Android/BlackBerry 簽證檔需設定為Distribution(iOS Dev Center中設定) 希望有經驗的人可以給我一些建議,謝謝大家!  

    Continue Reading…: 我的第一款APP企劃

  • IPhone元件介紹

    表格視圖,文字視圖和Web視圖 狀態欄:狀態欄顯示與使用者裝置相關的重要資訊,包括電話信號強度,當前網路連接和電量資訊。 導覽欄:導覽欄位於應用程式螢幕的上邊緣,在狀態欄之下。導覽欄通常會顯示當前視圖的標題,包含導覽控制元件,並在適當的情況下也可以包含作用於視圖內容的控制元件。 工具欄:如果您的應用程式為使用者提供了一系列可在當前上下文中執行的動作,那麼您可以為使用者提供一個工具欄。工具欄的外觀要力爭與應用程式中的其它欄目的外觀保持一致。例如,如果您使用半透明的工具欄,就不要將它與不透明的導覽欄一起使用。此外,請避免在同一方向的不同螢幕中改變工具欄的顏色或半透明效果。 標籤欄:標籤欄使使用能夠在應用程式的不同模式或不同視圖之間進行轉換,並且使用者應該能夠從應用程式的任何地方進入這些模式。 在應用程式螢幕中使用視圖和控制元件 表格視圖:裡面包含許多元素,並可以使用表格視圖實現常用的使用者操作。如:選項列表;導覽層次資訊;查看按概念分組的資訊 有幾個表格操作元素: 展開指示符:當這個元素出現時,使用者知道他們可以點選這一行中的任意位置來查看下一級的資訊,或是與當前列表項相關的選項。 當選中一行後會顯示另一個列表時,應使用展開指示符。不要使用展開指示符來顯示某個列表項的詳細資訊;這種情況下應使用詳細資訊展開按鈕。 詳細資訊展開按鈕:使用者可以通過點選該元素來查看某個列表項的詳細資訊。在表格視圖中,可以在某一行中使用詳細資訊展開按鈕,來顯示與該列表項相關的詳細資訊。請注意,與展開指示符不同,詳細資訊展開按鈕所執行的動作可以獨立於行的選擇動作。 刪除按鈕:使用者通過點選該元素可以刪除對應的列表項。 刪除控制按鈕:使用者通過點選該元素可以顯示或隱藏每個列表項的“刪除”按鈕。 行插入按鈕:使用者通過點選該元素可以向列表中新增一行。 行排序控制元件:當該元素出現時,使用者可以拖動一行到列表中的另一位置上。 選定符號:該元素出現在列表項的右側,表明該項當前被選中。 開關控制元件 文字視圖 Web視圖:Web視圖是應用程式螢幕上可以顯示豐富的HTML內容的一片區域。除了顯示web內容之外,web視圖還提供了一些元素來支援使用者瀏覽開放的網頁。雖然您可以選擇向使用提供網頁瀏覽功能,但是最好避免讓您建立的應用程式看起來像是一個小型web瀏覽器。 應用程式控制元件 活動指示器:活動指示器表示有一項持續時間未知的任務或過程正在進行當中。(請參考UIActivityIndicatorView類) 日期時間選擇器:日期時間選擇器為使用提供了一種簡單的選擇特定日期或時間的方式。(請參考UIDatePicker類) 詳細資訊展開按鈕:詳細資訊展開按鈕提供了關於某一項的額外資訊或更詳細的資訊。(參考UIButton類) 資訊按鈕(參考UIButton類) 標籤:標籤是一種大小可變的靜態文字。(參考UILabel類) 頁面指示符號(參考UIPageControl類) 選擇器:選擇器是日期時間選擇器的通用版本,如果您需要顯示特別多數量的值,則您應該用表格視圖將這些值列出,而不是用選擇器。 這是因為表格視圖俱有更高的高度,能夠更快速地進行滾動。(參考UIPickerView類) 進度視圖:進度視圖顯示俱有確定持續時間的任務或過程的進度。如果您需要顯示未知持續時間的任 務的進度,請使用活動指示器。(參考UIProgressView類) 圓角矩形按鈕:圓角矩形按鈕是一種多功能的按鈕,您可以在視圖中使用它來執行一個動作。(參考UIButton類) 搜尋欄:搜尋欄是一片接收使用者輸入的文字的區域,您的應用程式可以以搜尋欄中的文字為輸入進行搜尋。(參考UISearchBar類) 分段控制元件:分段控制元件是處在一條直線上的各段的集合,其中的每一段都相當於一個按鈕,可以顯示不同的視圖。(參考UISegmentedControl類) 滑塊:滑塊允許使用者在允許的值的範圍內對一個值或一個過程進行調整。當使用者拖拉滑塊時,相應的值或過程也不斷被更新。(參考UISlider類) 文字框:文字框是一個接收使用者輸入的圓角矩形的區域。當使用者點選文字框時,會出現一個鍵盤;當使用者點選鍵盤上的Return鍵時,文字框會以應用程式指定的方式處理使用者的輸入資訊。(參考UITextField類) 用於工具欄和導覽欄的標準按鈕 有關這些按鈕的符號名稱和可用性的資訊請參考UIBarButtonSystemItem的文件。

    Continue Reading…: IPhone元件介紹


17年資歷女工程師,專精於動畫、影像辨識以及即時串流程式開發。經常組織活動,邀請優秀的女性分享她們的技術專長,並在眾多場合分享自己的技術知識,也活躍於非營利組織,辦理活動來支持特殊兒及其家庭。期待用技術改變世界。