網頁

2011年7月31日 星期日

電子書所需具備的吸引力

文:俊誠 

要吸引人改變閱讀習慣從傳統紙本書轉而使用電子書,我認為需具備以下幾點特色:
1.易於攜帶的硬體電子書工具(EX.平版電腦、智慧型行動電話、ipad)
2.電池使用續航力,能否在無充電的環境充電(EX.備用電池、太陽能充電、接觸充電)
3.淺顯易用的閱讀器,用來載入電子書籍的軟體
4.豐富生動,吸引目光的電子書內容(可以聽到聲音、看到影片、甚至聞到氣味、有觸感-聽說已經有發明家認真研究中了)
5.容易取得、更新電子書的管道
6.簡單容易的付費流程和售後服務
其中最能吸引我的誘因,我想是豐富的閱讀內容,如果我在看一本有關花草的電子書,能同時聞到花草的味道,聽到蟲鳴鳥叫,體驗紙本書籍不一樣的閱讀經驗,那有什麼理由不使用電子書呢?

2011年7月25日 星期一

淺談傳統書與電子書趨勢

文:Anny

電子書閱讀器的竄出,加上蘋果電腦iPad熱潮,讓電子書的呈現有了很大的轉變,從一開始單色的電子紙到現在彩色電子紙,似乎都還在與平板電腦苦力的較勁中,電子紙的優點,比較不傷眼以及省電的優勢,無形中已經被平板電腦的各項好用功能給淹沒了,但是電子書最終會以哪種方式被閱讀者完全接受,應該還是會留給閱讀者來評斷。
傳統書電子化,已經不只是電子書方式呈現而已,趣味納入了閱讀經驗之中,傳統書籍業者找到了另一條電子化與傳統書籍結合的方式,除了我們熟知的QR Code結合在書籍上以外,還有研發商運用了新技術「Augmented Reality」(增強現實技術,簡稱「AR」)只要把鏡頭對準書籍的內頁,屏幕上即可看見配合圖書內容的聲音與動畫,若移動書本,立體動畫亦隨着改變角度。新技術可應用於配備了鏡頭的智能手機和平板電腦中,只要安裝了專用軟件,電腦可自動讀取信息,在顯示屏展示立體動畫及播放聲音,真的是很棒的突破,只是不知道製作成本如何就是了?
AR技術詳細圖片資訊如下連結:http://news.sina.com.hk/news/3/1/1/2384760/1.html
電子書趨勢銳不可檔,美國蘋果公司(Apple)2011/7/7日宣布,蘋果應用商店(App Store)的應用程式下載數已經突破150億。
全球最大網路零售書店Amazon於2011/5/19日宣布,Kindle電子書的銷售量已超越實體的印刷書籍。目前Amazon提供超過95萬種電子書,有超過79萬種電子書的售價低於9.99美元(約台幣288元)。
DIGITIMES研究中心主任兼資深分析師簡佩萍表示,2011年下半年Tablet的3大競爭關鍵,在於:1.觸控面板供應量,尤其是玻璃式觸控面板供給量轉進薄膜式觸控的進度;2.機體厚度將在0.9公分以下;3.價格不排除進一步下探300美元以下。而機體厚度絕對是產品能否獲得青睞而勝出的重要關鍵。
百家爭鳴的時代似乎已開始整合,閱讀將進入另一個時代,您!準備好了嗎?
更多電子書訊息:http://www.utrust.com.tw/dispPageBox/WHITESTYLEA_CT.aspx?ddsPageID=SERVICE&dbid=3357913791

2011年7月17日 星期日

網路消費紅利點數應用篇

文:Anny

網路交易越來越成熟,信用卡的普及,讓消費變得更容易,荷包也因此大失血,是否有什麼可以省回來一點的東西呢?您猜對了,就是紅利點數。
但是,紅利點數究竟可以怎麼用?各家銀行企劃人員真的費盡心思,和各遊樂景點、消費餐廳、便利商店、甚至是非營利事業單位合作,讓紅利點數變得更好用。
雖然不是很愛看電影,但是,變形金剛3實在是不能不看,雖然票價超貴,拿出省錢辦法,就是透過信用卡線上訂票系統 http://www.ezding.com.tw/index.jsp,利用點數折扣票價可以省很大,原本2張票價要花840元的電影票,現在只需要花費600元(包含40元的訂票手續費喔!)是不是真的很划算呢?
紅利點數太少,什麼都無法兌換的時候又可以怎麼應用呢?7-11的ibon的信用卡區備有利用紅利點數兌換商品的功能(約300點可兌換1瓶寶特瓶飲料),可以幫您省下不少現金的支出,有的銀行可以兌換7-11現金折價券,千萬不要以為少少的紅利就忘了使用而浪費了;而今天,又讓我發現了可以善用紅利點數又可做愛心的好方法,就是將它捐出去,剩下不到300點,連一瓶飲料都換不到"冏",那就做愛心呀!累積更多人的少少愛心,讓各財團法人、社團法人可以應用累積的紅利換取物資,這可是很不錯的方法喔!更何況好心會有好報的,現在開始計畫你的紅利點數使用方法吧!

2011年7月11日 星期一

【翻書】Google時代一定要會的整理術

作者:梅瑞爾‧馬丁

出版社:天下文化
出版日期:2010/11/30

1. 作者簡介
老實說,會翻看這本書,除了「整理術」這個關鍵字外,真的只是因為封面上印著Google,雖然我沒有到資訊焦慮症的程度,但不得不承認Google的Logo有著強大的號召力,幸運的是這本書的作者梅爾瑞還真的是Google的前資訊長,而且這位前資訊長的背景也相當傳奇,因為他本身是失讀症患者(即閱讀障礙),卻在這樣的困擾中,理出了一套適合自己的整理方法,進而選擇攻讀認知科學博士,研究人腦的奧妙,還真是「三折肱而成良醫」,酷斃了!

2. 內容重點介紹
以書名來猜測內容,這一本講「整理」的書應該會像一般談論整理術的書籍一樣,列出一堆通則(我記得之前也翻過《佐藤可士和的超級整理術》,日本人真的很擅長有條不紊、分門別類的「收納」方式,像是筆記本、檔案夾、書櫃等各式各樣的工具,而且會將運用在實體空間的整理術,也實行在整理資訊與思考上,不知道這樣講是不是倒果為因了XD,據一位設計師朋友的說法,他看了之後大受啟發,影響了他的辦公環境安排,可是我的書桌還是一團mess,所以才會特別留意「整理術」),但應該是因為失讀症與攻讀認知學所帶來的影響,作者在談整理方法之前,特別在從心理需求的角度出發,花了近三分之一的篇幅在分享如何妥善利用大腦,於是整本書有別於「商管」類的SOP風格,反倒像是科普書。
全書分成三大部,第一部主要是教我們探索思考模式,因為人腦的記憶可以分成長期記憶和短期記憶兩種,作者闡述如果我們想要終結腦袋老是渾沌不清的情況,就必須把不需要記得的事情快速丟到雲端,將腦袋的空間留給較為重要的事。如果不對資訊做分類,盡往短期記憶塞,就會像電腦的暫存記憶體不足一樣,人腦也會出現多工緩衝,無法存進更有用的東西,無法有效率地運作。(這個提醒,又讓我想到之前翻過《工作,分析了再做》,也是很MBA地在教讀者如何分析工作,但能不能內化吸收,也是看個人造詣啦~)
第二部則是本書的菁華所在,作者透過情境,向讀者介紹可利用Google搜尋、Google RSS Reader、Gmail、Google日曆、Apple MobileMe、Dropbox、Google 文件等工具,減低人腦所需要強記的份量,讓這些雲端服務搭配手機或者電腦,可以隨時提醒我們,達到事半功倍的效果。有趣的是,Google搜尋竟然有很多密技,例如:只要在字或詞之前加上減號(-)就能排除掉對某個詞的搜尋結果,讓人增長了網路常識啊!
除了實用的工具外,我覺得第三部的重點「降低每天的情境轉換,以增強專注及效率」,也是很好的工作習慣提醒,大家應該都會有一樣的經驗:一通突然來的電話,打斷了原本正在專心進行的工作,掛掉電話後,常會空白一段時間才能再度進入狀況,而這中間可能造成寫錯Code、填錯數字、思考不連貫的機會大增,這個就是「情境轉換」造成的成本。(看到這,我對於之前都大剌剌地打擾工程師感到非常不好意思…冏)

3. 結語
總之,關於整理術的結論就是,沒有任何的整理方法適用所有人,因此,每個人都要試著自己去找出合適自己的方法,作者僅是提供他的經驗和好用的工具供讀者自行運用。但這位Google的前資訊長介紹的軟體工具對於已經習於使用網路、智慧型手機等雲端服務工具的朋友,可能會覺得不是什麼新聞,不過對想理解如何順利使用網路工具來增進工作效率的朋友,這本書應該是不錯的入門。

4. 延伸閱讀
  • 好用軟體:Evernote(無所不在的筆記工具)
  • 好文分享:我如何完成一篇部落格文章?方法、流程與工具:準備篇
  • 相關引用:
[博客來] Google時代對於整理的思維與工具,你有更多好的選擇!
試讀:《Google時代一定要會的整理術!》
雲端時代的整理術,讀「Google時代一定要會的整理術!」後感

5. 《Google時代一定要會的整理術》 
目錄
序文失讀症男孩如何成為Google資訊長
第一部先認識自己
第1章 雞尾酒會與玉米片—人腦探索之旅
第2章暑假、郊區與工廠轉變─在混亂世界設法做好整理
第3章賽車、籃球短褲、歌劇─正視我們的個人限制
第4章去爬山,還是待在躺椅上納涼?─目標明確的重要

第二部全新整理術
第5章拋開泰勒風格與活頁收納夾─搜尋為何如此重要
第6章法國巴黎?還是德州巴黎?─如何成為搜尋達人
第7章彩色筆與過濾器─確保資訊留下來
第8章萬用手冊還是電子工具?─何時用紙?何時不用?
第9章 不只是傳送與收信─讓電郵信箱成為可供搜尋的個人檔案庫
第10章 感謝你的分享─為什麼行事曆該放到雲端上?
第11章瀏覽器、作業系統與超炫的標籤─管理文件及網頁內容

第三部克服大小挑戰
第12章避免用腦過度─如何保持專注,盡可能不分心
第13章在沙灘上查看電子郵件─整合工作與生活
第14章應付突如其來的事件
第15章全部兜在一塊
後記把腦子關掉,只管滑雪就對了!
附錄:我們的最愛

2011年7月4日 星期一

好站報報

文:Vainer
20110705100256133.jpg
Yes Yes Y'all
一個提供線上MTV、音樂的播放頻道─提供Artists上傳合法的個人音樂、MTV創作。
正如網站的功能很單純一樣(播MTV),網站的UI設計同樣顯得簡潔但是卻不陽春,整個版面可視為兩層式結構,上層是四個主題頁籤按鈕,用來切換不同的網頁主題,下層則是主題內容的呈現以及相關的操作工具。以最主要的Channel Y主題為例,看起來就像個放大的、精緻的youtube播放面板,釋放出更多的空間給影片內容來表現,上方的標題列整合了影片名稱、播放控制bar、播放進度,以及seeker等功能,另外也可以使用鍵盤的空白鍵及左右方鍵來控制影片播放。影片選單則被整合到下方浮動式、可橫向捲動的圖片清單面板裏頭,當滑鼠靠近時才會滑出顯示,平時則僅顯示局部的功能選項,包括選單檢視分類、隨機播放,影片解析度、靜音及全螢幕等項目。圓角風格的細節設計(包括字型、按鈕)也提升了整個UI界面的一致性、精緻感以及親和力。

2011年6月19日 星期日

網頁傳遞SWF參數的方法

文:Vainer
一般網頁內嵌SWF的做法通常有兩種,第一種是使用標籤<Object>來包裹整個flash物件內容,第二種則是使用swfObject物件,實體化後再載入flash動畫。所以,底下的範例分別針對這兩種版型的網頁,探討究竟可以用什麼樣的方法,在網頁中將參數傳遞給SWF,相對的,我們也實做了一個AS 3.0版本的Flash動畫程式(Flash Builder 4開發),展示Actionscript程式如何接收網頁傳遞的參數值。

一、 網頁傳遞SWF參數的實做方法
1.1.網址參數 – 直接將參數設定值加在SWF的網址後面基本寫法是以問號開頭,其後跟著鄰接”參數名稱=值”形式參數設定值,不同的參數則用符號”&”來區隔。這種寫法的優點是簡單、直觀,但缺乏彈性、保密性。

‧Object標籤的寫法示範 - sendFlashvars_Object_1.html (注意紅色文字部份)
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title> Send variables to SWF with Flashvars in Object tag </title>
</head>
<body>
<object id="FlashObj" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=10,0,0,0" 
classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="800" align="middle" height="600">
<param name="allowScriptAccess" value="sameDomain" />
<param name="allowFullScreen" value="false" />
<param name="movie" value="FlashvarsTemplate.swf?myName=Masie&mySex=Male&myAge=48" />
<param name="quality" value="high" />
<param name="bgcolor" value="#cccccc" />
<embed src="FlashvarsTemplate.swf?myName=Masie&mySex=Male&myAge=48" width="800" height="600" />
</object>
</body>
</html>

‧swfobject的寫法示範 - sendFlashvars_SwfObject_1.html 
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Send variables to SWF with Flashvars in SwfObject</title>
<script type="text/javascript" src="swfobject.js"></script>
<script type="text/javascript">
var flashVars = {};
var params = {};
var attributes = {};
swfobject.embedSWF("FlashvarsTemplate.swf? myName=Masie&mySex=Male&myAge=48", "flashDiv", "800", "600", "9.0.0", false, flashVars, params, attributes);
</script>
</head>
<body>
<div id="flashDiv"> Here is show flash animation.</div>
</body>
</html>

1.2. FlashVars - 使用FlashVars參數或者FlashVars物件變數來傳遞參數值- Object標籤式類型的網頁,可以新增一個子標籤<Param name=”FlashVars” …/>,把參數內容 放進裏頭,同時也在子標籤<embed>裏頭定義相對的FlashVars的屬性及內容。
- swfObject物件類型的網頁,則是宣告一個flashVars物件變數,並且定義flashVars的屬性及屬性內容,最後把flashVars物件當作swfObject的embedSWF函式的參數之一。這樣的寫法無疑地具有更大的應用彈性,首先它對於網頁的其他內容影響最小,其次它可以在SWF實體化前,進行參數的動態設定,甚至我們還可以引用其他的網頁參數、外部文件檔、動態網路服務程式等資料類型,提供更廣泛、動態性、保密性的整合應用。

‧Object標籤的寫法示範- sendFlashvars_Object_2.html 
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Send variables to SWF with Flashvars in Object tag</title>
</head>
<body>
<object id="FlashObj" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=10,0,0,0" 
classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="800" align="middle" height="600">
<param name="allowScriptAccess" value="sameDomain" />
<param name="allowFullScreen" value="false" />
<param name="movie" value="FlashvarsTemplate.swf" />
<param name="FlashVars" value="myName=Peter&mySex=Male&myAge=80" />
<param name="quality" value="high" />
<param name="bgcolor" value="#cccccc" />
<embed src="FlashvarsTemplate.swf" width="800" height="600" FlashVars="myName=Peter&mySex=Male&myAge=80" />
</object>
</body>
</html>

‧swfobject的寫法示範 - sendFlashvars_SwfObject_2.html 
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"> 
<title>Send variables to SWF with Flashvars in SwfObject</title>
<script type="text/javascript" src="swfobject.js"></script>
<script type="text/javascript">
var flashVars = {};
flashVars.myName = "Mary";
flashVars.mySex = "Female";
flashVars.myAge = 18;
var params = {};
var attributes = {};
swfobject.embedSWF("FlashvarsTemplate.swf", "flashDiv", "800", "600", "9.0.0", false, flashVars, params, attributes);
</script>
</head>
<body><div id="flashDiv"> Here is show flash animation.</div> </body>
</html>
二、 Actionscript 接收網頁傳遞參數的方法
AS 3.0的程式語法中提供了新的loaderInfo類別物件,可以用來幫助我們取得網頁傳遞的參數內容。在範例程式FlashvarsTemplate.mxml 中,我們宣告了三個文字輸入欄位,當做網頁參數內容的容器。當動畫被加入舞台畫面時,觸發事件監聽器addToStageHandler()函式時,函式第一行程式指令 var params:Object = LoaderInfo(this.root.loaderInfo).parameters,即利用了loaderInfo的屬性parameters來取得所有的網頁參數值內容,然後接著利用條件判斷式檢查,尋找對應的參數myName、mySex、myAge,如果找到了就把參數內容放進對應的文字欄位裏。
<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
xmlns:s="library://ns.adobe.com/flex/spark" 
xmlns:mx="library://ns.adobe.com/flex/mx" 
fontSize="24" minWidth="800" minHeight="600"
creationComplete="initApp(event)">
<fx:Declarations>
<!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations> 
<fx:Script>
<![CDATA[ 
import flash.display.LoaderInfo;
import flash.events.Event; 
import mx.events.FlexEvent; 
private function initApp(e:FlexEvent):void{
this.addEventListener(Event.ADDED_TO_STAGE,addToStageHandler); 
private function addToStageHandler(e:Event):void{ 
//parser flashvars from html
var params:Object = LoaderInfo(this.root.loaderInfo).parameters;
if(params.myName){
myName.text = params.myName;
}
if(params.mySex){
mySex.text = params.mySex;
}
if(params.myAge){
myAge.text = params.myAge;
this.removeEventListener(Event.ADDED_TO_STAGE,addToStageHandler); 
]]>
</fx:Script> 
<s:Group top="10" left="10">
<s:layout>
<s:VerticalLayout horizontalAlign="left" gap="15"/>
</s:layout>
<s:Label text="網頁所傳遞的參數內容:" />
<s:HGroup>
<s:Label text="姓名 :" />
<s:TextInput id="myName" /> 
</s:HGroup>
<s:HGroup>
<s:Label text="性別 :" />
<s:TextInput id="mySex" /> 
</s:HGroup>
<s:HGroup>
<s:Label text="年齡 :" />
<s:TextInput id="myAge" /> 
</s:HGroup> 
</s:Group> 
</s:Application>

三、參考範例檔說明與下載
● sendFlashvars_Object_1.html,使用Object標籤內嵌SWF的網頁範例1
● sendFlashvars_Object_2.html,使用Object標籤內嵌SWF的網頁範例2
● sendFlashvars_SwfObject_1.html,使用swfObject物件內嵌SWF的網頁範例1
● sendFlashvars_SwfObject_2.html,使用swfObject物件內嵌SWF的網頁範例2
● FlashvarsTemplate.mxml,讀取網頁參數的Flash動畫檔,使用Flash Builder 4工具開發

Download:http://www.utrust.com.tw/dispGetFile/Get.aspx?FileLocation=Files%5c&FileName=505.zip

2011年6月7日 星期二

U Web 網站靜態網頁編輯與基礎CSS應用(下) – 靜態網頁影像編輯

文:Polly L .

U Web除了內容上稿區,更提供靜態網頁編輯區,使用者可以選擇純文字、Word等模式貼上內容,如果我們想要有樣式上的變化,必須進入HTML做原始碼編輯!
我們要介紹基礎的HTML編輯方式與CSS應用,主要分為【表格】與【影像】兩種,今天接著介紹影像的部分。
【Img】編輯:
U Web靜態網頁編輯中有一個很好用的影像編輯區 ( 圖B1 )
在插入圖片後,我們可以做一些基本的設定,讓影像編輯上可以有變化,我們稍後來比對一下前後的比對。
先進入上方影像編輯區做一些微調的設定看看會變成如何呢?點選進入【影像屬性】,我們先選擇【影像資訊】
1. 我們可以先設定影像來源與替代文字的說明 ( 如:信諾科技)。
2. 再來是寬度與高度的設定,依需要的大小來設定即可,(非必填)。
3. 邊框,依需求可填入數字1,2,3….等數字,(非必填)。
4. 水平距離,是指與左右的距離,垂直距離是指與上下的距離。
5. 對齊,可選擇置右或是置左對齊。
接下來我們就來看看設定前後所呈現的效果囉!!呈現效果 (圖B2)
一般在U Web中我們會先將列表或內容頁中的圖片尺寸統一化,另外靜態頁部分的縮圖建議也維持影像的尺寸與排列的統一,否則網頁易顯得較雜亂而不易閱讀喔,記住這些小技巧,編輯的網頁內容將會更豐富且完美。

2011年5月29日 星期日

免費線上申請註冊商標輕鬆搞定

文:Anny

仿間很多在協助一般企業申請註冊商標和專利的公司,專利因為牽涉較多需要注意的事項和各國規範不同,所以要自己處理較有難度,但是如果是要申請企業識別、品牌商標只需準備以下資料,線上填寫表單就可以完成了喔!
現在就來告訴大家如何輕鬆線上申請註冊商標。

申請前準備資料:
  1. 註冊商標圖檔:掃描電子檔5*5 cm (分彩色或黑白:視申請需求)
  2. 帳號註冊憑證:掃描電子檔(例如:公司大、小章)
  3. 代表人英文姓名
申請步驟簡要說明:
  1. 登入智慧財產權e網通網址:https://tiponet.tipo.gov.tw/wps/portal/tiponet
  2. 加入會員(以公司名義) 上傳憑證檔案(公司大、小章)
    上傳憑證後就可用”電子申請”方式線上申請商標
  3. 登入會員後點選”案件申請”電子申請
  4. 填寫完資料後點選下一步
  5. 細填商標註冊申請書,重點在於指定使用商品/服務類別及名稱
  6. 線上送件
  7. 列印憑據後付款
    無電子憑證(工商憑證、自然人憑證) 付款方式有三種:a.填寫繳費申請書b.郵政劃撥c.ATM轉帳
    我個人覺得郵政劃撥最簡單,只需將「收文文號」、「申請案號」、「規費金額」、「申請人名稱」、「聯絡電話」,註明為電子申請送件寫在備註欄,不用再寄送。
  8. 如果採用b、c方式付款必須寄出收據(掛號)
    款項依據申請的商品/服務類別不同價格不同(1類約2,700元)
    地址:臺北市大安區辛亥路2段185號3樓
    收件單位:智慧財產局
  9. 取得「商標核准審定書」
    2個月內要付款完成(1-3年1,000元、1-10年2,500元)
  10. 商標註冊證取得整個過程時間(約6-12個月不等)
    也可打電話去智財局提供申請案號找到審查人員窗口詢問進度
    智慧財產局審查點電話:02-23767575
商標申請費用:
  1. 申請費:2,700 (1類)
  2. 審查費:1,000 (1-3年/1項)、2,500 (1-10年/1項)
查詢申請進度簡要說明:
  1. 登入智慧財產權e網通網址:https://tiponet.tipo.gov.tw/wps/portal/tiponet
  2. 登入會員
  3. 點選”一般功能”下拉選單的”進度查詢
  4. 選擇”商標案件進度查詢
  5. 輸入”申請案號
  6. 即可看到申請進度
商標上的TM和O R有什麼不同呢?
TM是TRADEMARK的縮寫,美國等國的商標通常加註TM,但並不一定是指已註冊商標。而R是REGISTER的縮寫,用在商標上是指註冊商標的意思,我國商標法實施條例規定,使用註冊商標,可以在商品、商品包裝、說明書或者其他附著物上標明"註冊商標"或者註冊標記。註冊標記包括(註外加○)和(R外加○)。使用註冊標記,應當標註在商標的右上角或者右下角。

U Web商標註冊通過/商標註冊證
為自己企業識別及品牌logo加上一個R吧!申請過程一點都不難,只需依照下述說明就可輕鬆完成,省下委託商標申請單位的服務費約6,500-10,000元呢/1類,還不包含審查費喔!
信諾科技U Web網站快捷建置服務的品牌logo就已經註冊通過了,家上了一個R和圈圈,有了身分識別的感覺。
20110530102013230.jpg
2011年1月20日正式通過U Web商標註冊申請,識別上多了一個R。
商標註冊證:
20110530102156151.jpg

2011年5月22日 星期日

我最喜歡的網路服務-Dropbox

文:俊誠
網路上的免費資源種類非常多,如分享軟體、電子郵件、即時通軟體,都是網路免費服務所涵蓋的範圍。
近年來我最喜歡的是Dropbox,原因是它具有檔案儲存及同步,檔案共享、線上備份等等服務。
20110523102728833.jpg
檔案儲存及同步
  • 2GB 免費線上儲存空間。
  • 同步檔案。
  • 當偵測到新增檔案或是檔案內容有更動時會自動同步。
  • 檔案可以續傳,傳輸中斷的地方會接續而不會重頭再來。
  • 可以設定上傳/下載頻寬,不會佔滿你的網路頻寬。
檔案共享
  • 共享資料允許多人使用特定資料夾。
  • 你可以即時看到別人對檔案的更動。
  • "Public" 資料夾可以公開連結你的檔案給其他人。
  • 控制誰有權存取共享資料夾
  • 相簿資夾料夾自動產生共享的相簿。
線上備份
  • 自動備份使用者檔案。
  • 30天期限的回復記錄,付費帳號還可以有無限期的回復可選。
手機存取
iPhone apps能提供以下服務:
  • 隨處存取你的Dropbox 。
  • 在iPhone 或iPod Touch 觀看你的檔案。
  • 下載檔案後可以離線觀看。
  • 用手機照相及拍影片再同步到Dropbox 。
  • 下載檔案保持最新狀態。
Dropbox真的是帶給我們新的體驗,只有要Dropbox的連結,出差也不需帶檔案在身上,不必再用USB隨身碟在電腦之間傳檔了,不再用複雜的備份程式了,它也能取代其他的FTP, NAS等網路檔案共享方式。

2011年5月15日 星期日

電子書製作淺談Base64編碼之應用(下)

文:Vanier

上次我們談到了如何將二進位的BitmapData點陣圖資料,轉換成base64編碼的文字資料格式表示,所以接著我們就來看看,要如何將base64編碼的字串資料轉換回正常的點陣圖,並且顯示到舞台畫面上。沿用前篇範例的資料內容,先將四張小圖的base64編碼資料存成四個文字檔 – smile.txt、angry.txt、cry.txt、happy.txt,程式的內容包括載入這些文字檔案,然後將載入內容轉換成Binary Code的BitmpaData,最後再將結果顯示在舞台上面。
主要的轉換動作是放在主程式區Base64Test.mxml裏頭,主要是運用Base64Decoder類別的decode()方法函式進行編碼文字的解譯動作,其次引用toByteArray()方法函式,取得該資料的二進位資料值內容
            publicfunctionloadBitmapBase64String(url:String):void{        
                varloader:URLLoader = newURLLoader();
                vardataFormat:String = URLLoaderDataFormat.TEXT;              
                loader.dataFormat = dataFormat;
                configureListeners(loader);
                varrequest:URLRequest = newURLRequest(url);
                try{
                    loader.load(request);
                } catch(error:Error) {
                    trace("Error loading requested document: "+ url);
                }          
            }

            privatefunctioncompleteHandler(event:Event):void{           
                varloader:URLLoader = URLLoader(event.target);
                configureListeners(loader,false);

                   varbyteArr:ByteArray;
                varbase64Dec:Base64Decoder = newBase64Decoder();             
                base64Dec.decode(loader.data);             
                byteArr = base64Dec.toByteArray();
                byteArr.position = 0;

                sampleBoard.drawBase64String(byteArr);
            }
完成文字資料的內容轉換之後,我們獲得了一份ByteArray型態的資料內容,所以接下來的任務就是如何利用二進位格式的資料內容,更進一步轉換成可以顯示的物件資料,而這部份的作業是放在類別PresentBoard.as當中:
        publicfunctiondrawBase64String(data:ByteArray):void{           
            varimage:Image = newImage();
            image.source = data;           
            vartestImage:Image = newImage();
            testImage.width = destBitmap.width;
            testImage.height = destBitmap.height;              
            testImage.addEventListener(Event.COMPLETE,onImagePreLoaded);            
              testImage.load(data);
        }  

        privatefunctiononImagePreLoaded(e:Event):void{                       
            e.target.removeEventListener(Event.COMPLETE,onImagePreLoaded);
            //
            varimg:Image = e.target asImage;         
            vartmpBD:BitmapData =  newBitmapData(img.width,img.height)
            varmatrix:Matrix = newMatrix();        
            tmpBD.draw(img,matrix,null,BlendMode.DARKEN,null,true);
            //
            destBitmap.source = newBitmap(tmpBD);         
        }  

如上面的實做程式碼,首先我們是利用Image物件以load()方式,載入剛剛取得的ByteArray內容,然後再將載入的資料存到一個BitmapData物件當中,並且把它放到指定的Image容器當中,每次選取不同的文字檔案,即可顯示不同的圖形畫面。
範例圖示:點選下拉選單中的檔案名稱,即可載入base64編碼文字內容並且顯示成原來的點陣圖
檔名:base64Sample2Source.zip

2011年5月9日 星期一

義大遊樂世界官方網站設計理念說明及實作畫面展示 Part.2


網站架構與規劃說明 – 雙軸線導覽
主題樂園的相關資訊或活動,會有很大的比例跟「地理定位」有關,如餐飲商店或特洛伊城堡可能有最新的表演節目、優惠方案或設施更新,除了在主網站的公告訊息區可看到全部的最新資訊外,應該還可以在使用者以「地圖導覽模式」查詢時,直接在該主題區看到這些訊息。
這即是「雙軸線」導覽的模式,也是常被提到的「多維網站架構」,適合應用於本案,僅需細部修正DISP 平台的上稿系統,即可達到本目的,規劃示意如下:
20110509125458063.jpg
雙軸線導覽實作範例:從主題專區或導覽地圖,都可查詢到天旋地轉的資訊
20110509125707767.jpg
功能元素 – 網站介面採駕駛艙模式設計
情境型的網站常因為營造氛圍的需求,需佔用到頁首的黃金區域,造成使用者閱讀網頁的不便。
20110509125846688.jpg
對於這個兩難的情況,常用的解決方式是採用「駕駛艙操作模式」的介面設計,以互動「面版」的模式,避免使用者需拖拉網頁才能看到需要的資訊。
Element 功能元素 – 技術面解決方案
為了達到互動的效果,網頁常需要用到Flash 的RIA 技術,然而全Flash 的網站,無論在開發成本及後續擴充維護上,都需要投入很大的資源,並不實用,最新的常用解決方案為混搭技術的使用,採用Flash 與Ajax 等技術混搭設計,兼顧互動性及網頁維護上的靈活性。
瀏覽者情境的導入
進入網站前,先以Welcome 動畫,帶領瀏覽者穿越時光隧道,脫離現實生活,進入一個魔幻現實的新場域…..
20110509130018110.jpg
20110509130030313.jpg
操作介面功能設計說明
網站主導覽版面以3D空間的方式設計,引領網友進入一個脫離現實生活的情境與心情。明確切割為A、B、C、D 四區,如下圖所示。
20110509130200657.jpg
 A 區採用Widget 的面版模式設計信息公告面版,上稿者可自由選擇不同類型的面版,如CF播放、圖文式、純文字式…,並設定其內容,透過自動上下架的模式呈現於本區。本區具有「便利貼」的意象,使用者可自由拖拉、上下切換面版,放大檢視有興趣的訊息,兼具趣味性及實用性。
Widget 面版模式概念示意
20110509130504188.jpg
20110509130555782.jpg
B 區提供「主題切換」的功能,讓網站經營者可以在單一頁面中,容納多主題的內容。切換主題時,整個情境設計及公告內容也會隨之變換。一方面解決龐雜資訊歸類的問題,一方面增加使用者操作互動的樂趣。
20110509130633345.jpg
切換到「夜世界」主題範例
20110509130707032.jpg
C 區為World Map 互動式園區地圖導覽,於後詳述。
D 區提供「附屬功能/快速連結」的功能,舉例而言,可將下拉導覽列或是近期主推、常用的功能集中於本區。
以下為下拉導覽列範例:
20110509130812407.jpg
採用內視窗技術延伸內容呈現模式說明
對於一般性網站資訊的查詢,如園區資訊、最新公告…..,如果能以不換頁的模式呈現,一方面可將使用者維持在目前的情境,一方面也可節省主機頻寬資源及便利使用者閱讀(不需向下拖拉)。
目前最新且穩定的模式為採用內視窗技術達成以上的效益,其於本案的實作範例如下圖所示:
20110509130924188.jpg
20110509130949860.jpg
World Map 設計理念說明
關於本網站的第二條導覽軸線World Map ,在介面及互動形式上,主要堅持直觀容易上手的原則,透過視覺化的操作介面,亦可以直接突顯園區各主題區的定位與特色,不會造成見樹不見林或見林不見樹的弊端,特別適用於主題樂園園區資訊的呈現。其實作畫面如下:
全區地圖式導覽
20110509131603845.jpg
快速移動導覽視窗及縮放
20110509131619157.jpg
預覽設施資訊/右方導覽列可快速分區查詢或用關鍵字查詢
20110509131638548.jpg
點選特定設施後,以內視窗呈現詳細資訊
20110509131703845.jpg
主題式的導覽動線實作
除了透過World Map 地圖式查詢外,本網站在動線設計上,也提供主題式的分類查詢,先以三大主題城區為分類,以不同的進場動畫及設計風格,帶領使用者進入該城區的氛圍,再於各城區以遊樂設施、餐飲商店、主題表演及最新消息四大分類,幫助瀏覽者清楚而快速掌握各區的詳細資訊。
網站實作畫面如下:
進場情境動畫:
20110509132246032.jpg
各區主題首頁
20110509132307423.jpg
遊樂設施分層查詢例
20110509132349048.jpg
完成所有規畫後的結果,呈現在義大遊樂世界官方網站/http://www.edathemepark.com.tw