網頁

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中我們會先將列表或內容頁中的圖片尺寸統一化,另外靜態頁部分的縮圖建議也維持影像的尺寸與排列的統一,否則網頁易顯得較雜亂而不易閱讀喔,記住這些小技巧,編輯的網頁內容將會更豐富且完美。