用CSS 3繪製小叮噹

+小叮噹網址+

大家可以點上面的網址進去看看，這是一個純粹用CSS 3技術繪製出來的小叮噹
CSS 3是Cascading Style Sheets level 3的縮寫，用來做網頁的排版，3是目前最新的技術

用Chrome開的狀況：

這時候就可以看到有些瀏覽器做的不是很好歐，像是IE 8之前的系列，全部都是方形orz
Opera的沒有陰影，Safari、Firefox、Chrome都還滿正常的～

大家也來測測自己使用的瀏覽器，支援程度到哪邊吧

適應各種裝置的Web Site

大家應該都知道「手機版網頁」吧

「手機版網頁」在台灣，感覺是一個可有可無的東西
做出來，沒有app優；沒有做，在手機上看官方網站又痛苦到不行
於是當老闆說：給我做一個「手機版網頁」出來～
只好摸摸鼻子，調個縮小版的網頁交差

其實手機版網頁，也可以是很酷的東西，大家可以看看國外做的一些範例
（底圖是PC版網頁、左前小圖是手機版網頁）

其實「手機版網頁」不是簡單的把尺寸比例縮小就算了，其實他有幾個要點：

Site Map

最重要的是要把整個site map以最簡單清楚的方式，呈現在這小小的畫面當中

資料的呈現與架構夠清楚，使用者才容易找到想要的資訊，這版本的網站才真正有用

縮小元素

每個元素之間的距離、字體的大小、圖的大小（可能要準備不同尺寸的圖）等

都是環環相扣的元件，其中一個沒有考慮就去做，會讓人覺得：

「嗯，好像是手機版的，但又不太像？」

當成App來開發

或許難以想像，但是可以參考我們之前的文章：Web app.

其實現在iOS跟Android上面的browser都已經支援到HTML5了，把網站當app開發其實是有可能的，而且這個尺寸剛好就是一個app的尺寸阿！！！

所以這也是你可以試試看在mobile device上面，用HTML5來寫一個Web app.的大好時機

UI設計、UX設計、都可以趁這時候玩一玩

大家也可以try看看JQuery手機版：JQuery mobile，讓你的手機版網頁像app一樣華麗

嗯，其實只是想要大家不要小看了手機版網頁而已XD

via http://line25.com/articles/showcase-of-outstanding-responsive-web-designs

Flipboard被踢出中國門外

http://unwire.hk/2011/05/16/ios-flipboard-blocked-in-china/software/ipad-app/
在上面的網址看到Flipboard被踢出中國門外，一點也不意外
身在台灣應該很能想像他們為何被踢出去，無非是不想給用國外的social資訊（facebook, twitter）
底下是Flipboard總裁的twitter發言：

via: http://tctechcrunch.files.wordpress.com/2011/05/screen-shot-2011-05-15-at-1-33-15-am.png

身為國外的人，無法理解為何進入不了中國的大門
所以這些任門的軟體，很多都會被擋在門外
對他們來說是吃了鱉，但是對我們來說，是一個很大的機會

我們熟悉中文，文化也稍有了解
只要再多加一些注意力，去觀察大陸那邊的東西，其實有很多東西可以去大陸試試看

idea On1這邊也有另一個團隊是要往大陸發展，並且已經做了一陣子
有些經驗，並且也有很多很酷的方向等著被實現
有興趣進攻大陸市場，並且有以下其中一項專長的人可以跟我聯絡:)

• 會寫iPhone app
• 會寫Android app
• 會寫Web service
• 會UI Design/Digital Artist

別錯過機會了唷;)

Parallax Scrolling Effects

Parallax - 視差

這是一個透過位移的不同，產生前後景的錯覺方式
之前有看過一些JQuery的Plug-ins有這樣做，但今天看到更多驚人的東西

其中一個最令我驚奇的是這個：
http://benthebodyguard.com/

他跳脫了一般使用Parallax的方式，變成一個鳥瞰故事的感覺

這是說明網站主題的主角，看起來很有個性

主角從陰影走出來說明一些故事，順便讓你理解它們在做些什麼

這是其中一個事件，用以說明你需要他們的服務

點進去網站就可以很快看到這些畫面，這些畫面不用Flash完成，只是很簡單的css跟js技巧

這技巧雖然算是比較特別的，但一般網站用法都差不多

直到看到這個網站，令我感到很訝異，因為他找出了別的玩法，很酷

還有其他範例，大家可以看看國外都怎麼玩的，很有趣唷:)

via http://line25.com/articles/showcase-of-parallax-scrolling-effects-in-web-design

Web app.

相關文章：http://chinese.engadget.com/2011/05/13/chrome-os-is-base-on-broswer-experience/

最近剛開完的趴體Google I/O，上面的連結有相關的報導
Taker今天想談的是一個已經準備很久，未來將很有機會大放異彩的Web app
其實在好幾年之前，HTML的開發就朝著Web app的方向在走
不過到底什麼是Web app呢？

假想你正在用的Browser（IE/Firefox/Chrome/Safari/Opera等）就是OS（Windows/MacOS等）
你正在使用的網頁（如Gmail/Google Doc/Google Calendar等）就是應用程式（Outlook/Office等）
其實就是概念的延伸，把所有的東西都往網路上丟
你不在需要下載安裝應用程式，資料也全部都在網路上
最後你的電腦只是一個連上網路的Browser，應用程式就是一個一個的Web app的url書籤

Web app的好處在哪呢？
第一個是資料隨手可得，只要有網路、有Browser，你就可以打開文件處理你的工作
甚至沒網路的時候可以離線運作，直到有網路的地方，會自動把檔案做同步
所以在家裡用電腦做、在捷運上用手機做、在蘋果電用他們的電腦做、在公司用公司的電腦做
你都不用煩惱隨身碟剩幾G、檔案放哪裡、檔案是不是最新的問題

再來就是跨平台，跟上面概念很像，因為只要有Browser，就可以使用
所以不管是Windows、MacOS、還是iPhone、Android，通通可以用

甚至像昨天好友愛群在粉絲團po的連結：http://www.ro.me/
就是用HTML5的技術來實作的，大家還沒玩過的可以玩一下

從這個例子可以發現，Web app可以做到的程度，其實已經快跟現在電腦安裝的軟體不相上下了
所以下次去光華組一台「只是打打文件、上上網」的電腦，恐怕配備要很高了XD

--

idea On1持續尋找會寫iPhone app/Android app/Web service/UI digital designer & artist
歡迎聯絡:)

Read It Later - app推薦

http://readitlaterlist.com/

這是Taker很愛用的一個app，非常的簡單，並且抓到我的需求

他的需求缺口在於：
書籤不夠用，有一堆好網站你想慢慢逛，卻總是沒時間
或者你把它加入書籤堆裡了，卻從來沒有一天會去書籤堆裡面把它翻開來閱讀
不知道大家有沒有跟Taker一樣的困擾，這些都是我曾經遇過的，直到發現了這個app

其實他不只是app，app只是他的一個接口，用以方便取用這個服務
他整個服務可以透過電腦、iPhone、iPad、Android等
只要有網路，就可以取用他

那這個服務大概要怎麼用呢？Taker簡單的介紹一下
一開始你要先註冊一個帳號，就是官網的右上方：http://readitlaterlist.com/

有帳號以後就可以開始使用了，Taker是去下載他的Chrome外掛：ChromeItLater
一樣在官網右上方有一堆Browser跟Mobile裝置可以選擇，找個適合你用的外掛吧

當Taker裝好ChromeItLater之後，看到喜歡的網頁，當下卻沒時間去閱讀他，我就按下ChromeItLater的按鈕

當然第一次使用，要先登入才可以使用，當然這些他都會自己問你，不用擔心找不到
之後就爽爽按就可以加入囉

加入成功以後，出現一個ok的圖示，表示加到帳號裡啦

嗯，然後呢？
好用的地方現在才要開始，Taker已經把登入後的Read it later加入最愛，點擊他馬上就到所有加過的連結列表

以後都不用怕啦，沒時間看的文章，下次週末再花點時間點開read it later，再來慢慢看吧
看過的文章，按一下旁邊的勾勾就可以確認「已經閱讀」，link就會消掉囉

怕加過的link太多找不到，他還提供了搜尋的服務，跟排序的服務，而且都是免費的

---

以為到這邊就沒了嗎？不不不，讓我們來看看iPad版，itunes下載連結如下：
http://itunes.apple.com/us/app/read-it-later-pro/id309601447?mt=8

打開app以後的畫面

進場畫面真乾淨，Taker很愛

再來就可以看到，跟剛剛網站一樣的列表了

注意左上方，有一個Download，因為iPad有很大的機會只有wiki沒有3g

為了預防在外面沒有網路就看不到文章的窘境，Read it later很貼心的讓你在開app的時候，自動下載這些web page

點文章進去以後，就可以看到原始文章啦
他很貼心的自己切換到一個「T」的模式，就是只有讀取文字跟圖片而已，做最簡單的文章顯示
也可以按一下中間的T切換到完整網頁，不過下載速度就差很多囉，而且Taker覺得「T」模式還滿好閱讀的

基本配備share都有，一樣看完按勾勾確認閱讀
有付費版本跟免費版，大家可以先裝免費版的用用看囉，基本上用免費版的，這整個服務都是免錢的啦

這樣的概念，簡單的應用，正式我們想走的方向
有興趣的夥伴，歡迎加入Idea On1，這邊已經有幾個人迫不及待了:)

好app推薦：Google Translate

Google Translate: http://itunes.apple.com/us/app/google-translate/id414706506?mt=8
price: free
platform: iPhone only

大家有用過iPhone上的翻譯app嗎？Taker自己用過幾個，剛好今天在外面就需要用到iPhone來查一下單字，於是抓了幾個翻譯的app來用用（原本抓的沒有繁體字  囧rz）


今天抓了iTranslate跟Google Translate，兩個都是4+1/2顆星的評價，我覺得非常厲害

簡單的說一下iTranslate：
他的輸入/輸出翻譯結果的介面都很大，方便閱讀；而且翻譯結果內容滿紮實的，不錯
有一堆in app purchase的東西（就是可以增強app功能，需要在app裡面付費的選項）
譬如高音質真人發音，或者speech recognition等，大部分好像都要1.99，加一加可不是很便宜

圖片來源：http://itunes.apple.com/us/app/itranslate-free-translator/id288113403?mt=8

他的缺點就是，其他的選項都在左下角的star裡面，如果常常需要取用，就要一直點進去，點出來查字、再點進去、再出來查字......很麻煩

再來介紹我很愛的Google Translate，今天一用就愛上：
優點：

• 輸入/輸出介面大
• 翻譯結果不用說，官方google translate，內容紮實，也可以整段翻譯
• 最棒的是，他的附加功能，都列在結果的右側，如favorite、full screen、speak
• history會直接列在下方

來源網站：http://itunes.apple.com/us/app/google-translate/id414706506?mt=8

介面可以說十分簡單，非常容易上手

打打字就查到結果，最方便的是我可以在不用做任何事，就可以看到剛剛我查詢的結果（history），對於查了馬上就忘記的Taker，真是十分的貼心

不用重複去查同一個單字，而且全部列出，非常容易去檢閱

另外還可以把覺得重要的翻譯star起來，按底下的star就可以檢閱，這些東西都存在手機裡，沒網路的時候應該也可以使用
這個app唯一的缺點大概是icon太醜XD（誤）


好app推薦，其實也就是我們的case study
今天推薦一個好用的翻譯app，期望我們也可以做出很不錯的好app

有iPhone/Android app撰寫經驗者，Digital Art Designer，歡迎跟我聯繫:)
可以回留言/上facebook粉絲團跟我打聲招呼，thx！