網頁

2011年3月28日 星期一

D0002雲端服務 CDN Host

文: Canboo T.

CDN Host,是幫一些JavaScript Framework函式庫做異地Host服務,讓網路瀏覽者透過CDN(Content Delivery Network)抓取欲使用到的JavaScript Framework的速度(如JQuery Framework、YUI Framework)不會因所在地而影響到存取速度。
比如說,貴公司的網站主機擺放在美國,而網站使用到JQuery Framework 1.5.1的檔案,可能會因為使用者為了要存取這隻js而影響到整個頁面的存取速度。為了因應這種狀況,使用CDN Host會是一個不錯的解決方式,換個角度來說,這是另外一種雲端服務吧!
目前Google有幫一些熱門的JavaScript Framework做了Host服務,至於有哪些Framework請連結到Google Libraries API進行觀看:http://code.google.com/intl/zh-TW/apis/libraries/















Google Libraries API官網有對使用方式做一個說明,引入方式可分為兩種,一種就是直接存取雲端的實體位置,網路上的文件通常是稱為「靜態引入」,以引入JQuery 1.4.2檔案為例,引入的語法為:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
另外一種引入方式就是透過Google的API進行存取,通常是稱為「動態引入」,要使用動態引入時,必需要先引入Google API,語法為
<script type="text/javascript" src="https://www.google.com/jsapi?keyINSERT-YOUR-KEY"></script>
其中INSERT-YOUR-KEY必須要換成自己所申請的Google Key(若沒有請至http://code.google.com/apis/loader/signup.html進行申請),在引入好後就可以開始進行動態引入:
<script type="text/javascript" language="javascript">
google.load("chrome-frame", "1.0.2");
google.load("dojo", "1.6.0");
google.load("ext-core", "3.1.0");
google.load("jquery", "1.5.1");
google.load("jqueryui", "1.8.11");
google.load("mootools", "1.3.1");
google.load("prototype", "1.7.0.0");
google.load("scriptaculous", "1.8.3");
google.load("swfobject", "2.2");
google.load("yui", "3.3.0");
google.load("webfont", "1.0.19");
</script>
動態引入的參數為(Library名稱,版本)。
最後,該說說用CDN Host有什麼好處,在本文一開始所提到的存取速度,其實是一個比較易顯的好處,經筆者實際測試,如果網站伺服器速度快的話,使用Google CDN可能會感覺不出來差異或是會慢一點,不過在瀏覽器上面有一個技術叫做「快取」,如果使用者在某個網站載入過您所要載入的js檔案,那使用者在瀏覽您的網站就不會再次的載入這個檔案,也就是會節省掉不少存取頁面的時間。
此外,減少主機存放空間及網路流量也是好處之一,以JQuery為例,完整檔案一個也是上百KB,壓縮過後的min版本也是要20多KB,如果有上百個瀏覽者進行存取,昂貴的頻寬也就會被佔用掉,若此類檔案擺在Google家,有人幫你管控該類檔案的gzipped相關快取、壓縮技術,又省自家主機頻寬,可是多美好的一回事。
最後還可以說的好處就是技術人員在說的,更改引入檔案版本可是更為便利!

2011年3月20日 星期日

ASP.Net程式語言跨入AIR技術Part.2

上次提到的範例”向世界問好”(也就是Hello World)的程式,程式碼如下:
Html程式部分:
<html >
<head>
<title>Hello, World!</title>
</head>
<body>
           <h1>Hello, World!</h1>
</body>
</html>
除了html程式外尚須要一個XML程式,程式如下
<?xml version="1.0" encoding="utf-8"?>
<application xmlns="http://ns.adobe.com/air/application/1.0">
           <id>com.dmci.air.HelloWorld</id>
           <filename>Hello World</filename>
           <version>1.0</version>
           <initialWindow>
                     <content>HelloWorld.html</content>
                     <visible>true</visible>
           </initialWindow>
</application>
下面來說明上述程式的作用:
1.<id>com.dmci.air.HelloWorld</id>這一行表示id是程式的唯一AIR標識,建議使用類似這樣的語法:com.dmci.air.HelloWorld。可以是虛構的值,但是一定要是唯一且有意義的值,最大長度為255字元。
2.<filename>Hello World</filename>這行表示程式的名稱,使用者會看到它,出現在關於選單、捷徑名稱、開始選單等位置。
3.<version>1.0</version>這一行為版本宣告,是虛構的值,主要用來識別程式的版本,只要能識別不同版本都OK。
4.<initialWindow></initialWindow>這中間所包含的值為設置程式主視窗的內容和外觀。
5. <content>HelloWorld.html</content>這個就是主要內容基本HTML檔案的名稱。
6. <visible>true</visible>這是表示使否顯示程式給使用者看,預設值為false,所以有必要加這一行來顯示執行結果。
程式寫好後要測試,可以用簡單的命令AIR Debug Launcher(adl)來測試,語法為adl ApplicationXMLFile.xml,執行後能看到結果畫面表示程式是OK的,測試完畢如果要發佈程式,必須要創建一個憑證給程式,然後打包程式成安裝檔案,這樣使用者拿到檔案後就可以直接安裝使用了,這部分就下次在談囉!(待續…)

2011年3月13日 星期日

U Web網站快捷建置服務行銷策略

如果把產品比喻做木材,那行銷策略可用來比喻作讓木材燃的更旺火種,產品化的過程,產品本身就有很多功課要做,以行銷的立場來看,這是產品企劃的工作重點。
  • 產品企劃


完成了產品的企劃工作,當中的4C、4P~5~6P可以在很多地方搜尋到,在此不再贅述,簡單來說都是為了條列企劃力的簡稱罷了。銷售過程中所需要的工具、作業程序,也需要大量的企劃力從中輔佐,這是行銷企劃的工作。
  • 行銷企劃



行銷企劃工作中最為重要的就是行銷策略的擬定,一個企業要能永續經營,銷售力是不可缺的重要因素,如何應用最佳的行銷策略,關係到銷售力的增減,用錢砸,好方法,但不是所有企業都有足夠的子彈可用,因此網路行銷,這個成長最快速,費用最低廉的媒體工具成了大部分行銷企劃人員的最愛。
新媒體,這是目前眾所矚目的新興產業,新媒體泛指利用電腦(計算及資訊處理)及網路(傳播及交換)等新科技,對傳統媒體之形式、內容及類型所產生的質變。也稱第四媒體,區別於傳統媒體報刊、廣播、電視媒體。
新媒體一詞可以從產業區分、人機介面、藝術運動、及其多媒體形式來詮釋,不同的詮釋是由於不同領域的觀點(產業、科技、藝術、及傳媒)的出發點之不同。
所謂的「舊媒體」所包涵的產業範圍,指的是印刷的報紙雜誌,電子的廣播電視。相較之下,新媒體所指的產業範圍不如舊媒體明確。
(資料來源:維基百科)
如何善用四個螢幕(電腦顯示器、行動電話、電視、遊戲機)?一直是所有媒體人玩創意搞噱頭的工作重點之一,UTRUST團隊的新興產品”U Web網站快捷建置服務”的行銷策略,善用網路行銷及實體DM的策略進行大數法則的行銷。
信諾科技之所以命名為信諾,就是希望能以服務誠信優質承諾為原則為企業製作出專業且好用的網站,只需簡單的透過管理後台,就能在網路上自在遨遊。
U Web也取得智慧財產權商標註冊權,在在都證明了我們優質產品化的決心,只要您需要一個專業的團隊來製作您的網站,不想再一頁一頁更新您的網站,重視分析數據及企劃力,”U Web網站快捷建置服務”將會是您最佳的選擇。





服務專線:02-27813033#310 (朱小姐)

2011年3月6日 星期日

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

最近在製做信諾科技電子書介面時需要解決有關Flex存取圖檔的問題,剛好遇到需要跟資料庫進行串連的應用需求;一般的做法可能是直接把圖檔存成獨立檔案,然後再將其路徑寫入資料庫,待下次需要時,先從資料庫讀取路徑後再進行實際載入的動作。雖然這種方式的實做不難,但一想到每次都要分成兩段式來處理,其實蠻不直觀的,如果能夠直接將圖檔資料存入資料庫,然後直接做讀取、寫入的話,豈不是更加方便?當然如果是直接把binary二進位的圖存入資料庫,雖然可行但顯然不怎麼實用,那若是能夠把圖檔當成文字模式來處理呢?又能讓檔案存取的步驟簡化?於是我找到了Base64
什麼是Base64?根據維基百科的定義是這麼寫的:「Base64是一種使用64(26)位置計數法。它使用2的最大次方來代表僅可打印的ASCII 字符。」,意思是Base64使用了字元A-Za-z0-962個字元來表示開始的變量,而最後結束的兩個代表數值的符號則視不同系統而有所差異(例如windows系統以’=’結尾)。簡單地說,就是我們可以將Base64拿來做為一種資料格式轉換模式,比如把binary二進位的數據以Base64編碼方式,轉譯成ASCII字元符號的表示方式,以字串格式的資料型態來做應用。
所以運用base64編碼工具基本上應該可以達到我的需求,而且Flex也提供了相關的類別工具。操作的原理跟步驟很
簡單,首先把Bitmap Data的圖檔資料格式轉換成by nary資料型態,然後應用Base64Encoder類別的encode Bytes()方法,進行base64編碼,即可以二進位的binary資料轉換成base64編碼的字串資料型態了。
在範例中的圖檔資料的轉換,主要是由getImageBase64String()函式處理:
private function getImageBase64String(disp:BitmapData):String{
         var imgEnc:PNGEncoder = new PNGEncoder();
         var bitmapData:BitmapData = new BitmapData(disp.width, disp.height, true, 0);
         bitmapData.draw(disp);
         var bytes:ByteArray = imgEnc.encode(bitmapData);
         var b64encoder:Base64Encoder = new Base64Encoder();
         b64encoder.encodeBytes(bytes);                                    
         var imageString:String = b64encoder.flush();
         return imageString;
}












上述函式中,因為處理的圖檔格式為.PNG,所以我們宣告了一個PNGEncoder類別物件,並呼叫該物件的encode()函式做Bitmap Databinary資料型的轉換,而且新建一個Bitmap Data複本資料當做被轉換的對象,避免資料來源受到影響。接下來宣告一個Base64Encoder類別的編碼物件,使用encode Bytes()函式將轉換好的二進位binary資料編碼成base64格式的內容,然後呼叫flush()函式將編碼物件的內容資料寫入一個字串變數裏頭,最後將該字串結果回傳給函式的呼叫者。
範例圖示:點選左方不同圖案即可出現對應的base64編碼文字字串
是不是非常輕鬆簡單呢?Base64成就了另一種解決圖、文轉換加密的解決方案。
其應用範圍包括:
1.            網路傳輸
2.            簡單的加密
3.            資料型態的轉換

範例   程式原

2011年2月28日 星期一

人人都可以是去背大師(Alpha Channel)


我想每個人一定都會碰上以下狀況:
這張照片中的前景事物是自己超愛的,可是背景或是背景色怎麼看都不順眼,這時候如果自己也能使用繪圖軟體去背該有多好呢?總不能老是去麻煩別人吧!
那我們就來以”Photoshop”做示範,可能很多人都已經會使用其中的魔術棒或是path,那麼我們就再進階一些,今天我們就使用色版的觀念來做出專業的去背,也就是傳說中的『Alpha Channel』。
Step 1先在photoshop中開啟檔案﹝原圖﹞
 














Step 2接著到色版視窗中,選取對比較為強烈的色版複製色版,為“藍 拷貝”(對比強烈會因著圖片有所不同,總之就是選擇對比最強烈的色版)
 














Step 3在此範例中,有大面積須調整的部分,我們可以先使用【影像】>【影像】>【調整】>【亮度/對比】工具調整,再來我們要使用【加亮工具】與【加深工具】做細部調整
 














Step 4要注意所有細節的部分,直到如圖所示,即完成調整(讓整個色版只保留外框清楚)
 














Step 5接著我們先點選RGB色版,回到正常模式,然後按住ctrl並點選【藍 拷貝】色版,即會出現選取範圍。這邊要注意的是我們所要的範圍是黑色的部分,因此我們要再做一次反轉的動作,讓選取的範圍成為黑色範圍,如圖所示,即完成動作
 














Step 6接著我們回到圖層視窗,將背景點兩下,將其改為圖層0 (圖層為背景時,無法刪除背景)
 














Step 7再來我們要點選視窗下方的【增加圖層遮色片】,我們會發現圖層0右方新增了一個遮色片圖示,圖層0背景也會變成透明背景
 














Step 8此時,我們已經完成去背囉!如果你想要在後面加上背景或是背景色,也是非常容易喔!
 














再也不用因為背景干擾到自己喜歡的主題圖片了。



2011年2月20日 星期日

2011台北書展展後花絮

身為科技公司的一員,加上公司離世貿只有用走路就可以到的距離,遇到每年都很夯的書展,怎麼可以不請公假去走馬看花、嗅嗅新的訊息呢?(重點絕對不是請公假XD)
受邀主題國-不丹
今年的受邀主題國是號稱「世界上最快樂的國家」-不丹,相關訊息大家查閱網址:http://www.tibe.org.tw/new/index.php?lan=ch&fun=1&subfun=2就很清楚啦!我就不再重複了。
由於此次的書展的主題是「閱讀,幸福進行式」,所以因應「不丹:幸福的國度」主題國活動,現場還策劃了「幸福主題館」,可以看到「國家幸福指數」(GN排行榜前廿名的國家,包括瑞典、丹麥、芬蘭、澳洲、法國、義大利等的幸福政策和推薦選書,算是還蠻用心規劃的。
數位典藏與數位學習
但是進入展場後第一個吸引我們的目光卻是國科會的「數位典藏與數位學習」,因為公司一直有在承接數位典藏的專案,所以一定要給他留意一下的啦!
這次展出的數位典藏內容,都有一個共同特色:行動短片,可以用QR Code就輕鬆將典藏成果帶著走,想對QR Code有更多認識的,可以查閱維基百科網址:http://zh.wikipedia.org/wiki/QR%E7%A2%BC
另外,現場還有許多與華語文教材相關的軟體應用,像下圖這個就是書法學習軟體,不過跟拿毛筆的感覺還是差很多,只能說可以模擬描紅本做做認識筆劃練習!












數位主題館
當然,在大家都想搶下電子書市場這塊大餅的戰國時代,我們一定要認真地給他好好看看「數位主題館」。
簡單地說,若將電子書的市場以閱讀的載體來區分的話,可以分成電子墨水路線(AmazonKindle閱讀器為代表)、平板電腦路線(目前只能以最夯的iPad為代表,接下來期待其他大廠)與智慧型手機三種。










※剛好拍到一張三者都有的,太讚了
對於開發軟體的我們公司來說,重點當然是放在觀察後兩者的相關出版,尤其電子雜誌是目前電子書出版品較大宗的類型(教育類以外),呈現的方式也較多元,所以此行的期待焦點都在這上面,只是……逛了半天,都沒有驚艷感,還不如出門前在iPad上觀看的「男人幫」。
個人唯一覺得值得介紹的只有潑墨數位出版的app網址:http://puomo.com/pages/pubs,感覺有發揮數位編輯與行銷之能事,尤其是他們為「縱貫線」樂團出版的作品,是結合演唱會DVDCD和寫真集三位一體的歷程記錄,內容相當吸引人啊!我覺得他們能搶先一步讓數位出版的觸角延伸至音樂市場,感覺途無量啦!













知名部落客傅瑞德是這家數位出版的一員
此外,他們也有幫北京時尚集團設計製作了中國版Cosmopolitan雜誌網址:http://puomo.com/cosmopolitan(台灣的「柯夢波丹」,大陸稱為「時尚伊人」)的iPad版本,閱讀上考量的使用者介面也設計得很好,有免費試閱,大家可以去下載。
總之,此行發現就是不管準備好了沒,大家都要先出來搶市場的狀況,所以我們也要加把勁了,GO GO GO

2011年2月13日 星期日

數位閱讀風潮觀察 - 分眾服務不只是內容分眾

2010/12/27舉辦的「電子書論壇《隨身‧行動》數位閱讀市場關鍵報告(http://www.managertoday.com.tw/edm/ebook/join.html)」中,知名作家王文華提出了一個很有趣的觀察,他認為:
網路殺掉的是大眾化……
這可以解釋為何網路普及後,衰退最多的是報紙,然後是雜誌。
越來越多的人,習慣打開電腦、直接上入口網站挑喜歡看的新聞類別讀取新聞,而不再甘於買整份的報紙但只看其中幾頁感興趣的內容,這浪費的不只是金錢、還有寶貴時間。
音樂市場也呈現類似現象,除非有強烈個人偏好、具珍藏價值或是歷久彌新的經典專輯,不然具備基本數位設備操作能力的人,多會選擇下載或購買喜好的單曲,然後花一點時間整理成個人化的音樂庫。
網路跟數位媒體技術的成熟與普及,會慢慢殺掉大鍋飯式的產品與服務,所以分眾服務的能力,我認為確實是未來要投入數位內容產業的企業需要不斷聚焦與培養的能力。
傳統的閱讀,是由文字、圖片構成內容,加上排版的巧思、紙質的質感及油墨的味道形成閱讀者的閱讀經驗。那數位閱讀的閱讀經驗從何構成?相較於傳統紙本閱讀,數位媒體有更豐富的元素可以應用,除了影音圖文的內容組合變化,另一個常為人所忽略的是「表現手法」。
包含文字捲動、內容切換、影片播放、主題跳躍等,都可以有全然不同的表現手法,同樣一組數位內容,以不同的手法可以組合出完全不同閱讀經驗的電子書。
我一直在想,未來總有一天,當數位內容產業越趨分工與成熟,內容發想及創作者,類似傳統出版業的作者或編劇,將不會再直接授權給單一的出版社來作出版,而是以分開授權的方式,依各家出版社的技術專長、創意特色,將內容作不同的編排、設計與出版。
用比較具體的例子來說明,未來或許某知名插畫家的新作,不會再僅是由單一出版社作單一的出版,而會有大塊版、遠流版、城邦版可供選擇與購買,各家出版社各展所長,針對目標客群作特色的設計、服務與定價。
記得在某一期的數位時代看過歐萊禮的主管說過一句話
未來每一家出版社都會是一家軟體公司
我想會不會歐萊禮也看到了這個遠景,未來的出版社不只要提供內容的出版,對於內容的「被閱讀方式」,也需要有自己的一套想法及「服務能力」。
大型的出版集團如城邦,這個趨勢會是一個新的挑戰也是機會。然而對於小型出版社而言,確實不容易有能力完成這樣的準備,所以可以想像的,未來與小型出版社一同合作、專門提供數位出版技術支援的軟體服務公司也會出現。這中間包括了內容數位化服務的提供者與使用者介面/平台技術服務的提供者。
所謂的分眾服務,將不再只是內容的分眾,閱讀介面與表現形式,也會是一個重要的分眾決勝點。目前如軟體巨擘 Adobe Digital Publishing Suite)、WoodWing( Digital Magazine Tools for iPad) 已經開始提供強大的數位出版平台可供數位編輯團隊產出豐富多樣的數位內容,然而要更深度的實現編輯團隊的創意設計,終究還是需要從閱讀平台的基礎技術作掌握,而這已接近創辦一家軟體公司、長期投入研發的難度。
對於閱讀平台的實務開發經驗,後續再陸續撰文分享。