2011年6月30日 星期四

Google+新手入門

[重要]
G+已開放給所有Google Account用戶啦~
沒有的快去G+官網開一個吧!
(Developer: 部分API已開放,不過好像沒人做出啥來...)

[定義]
Google+ / G+ / Google Circle其實就是「很像Facebook但不是Facebook」的社交服務...xkcd這篇漫畫完全是神吐糟:


p.s.1 因為中文的版面不好用我是用英文版...
p.s.2 Google+目前沒有invitation,不過有人說有密技 [密技需有已登入的Google Account及不斷Reload,詳細]
p.s.2.1 不知是系統超負載還是補起來,暫時沒人撞中(回報是被redirect了)...失敗的朋友請在沒那麼繁忙的時間再試
p.s.2.2 不過無論如何請先看完下面的注意事項...
p.s.3 現在只要login google account再上google+就可以開了~(4/7/2011)  Invitation還是要的,不過是神出鬼沒地限時開放在Homepage右邊Column的最下方(14/7/2011)



[注意事項]
1. Google Profile內的一切會被預設為公開 (Everyone on the web)敏感資料如地址電話請先移除
2. 如果要link Picasa (Google Photos),某些權限會被Circle內的人看到,請先把任何形式的分享移除
(是可以不link,不過光是連結升級2048x2048以下的圖片不計使用空間就很吸引…[其他優惠及注意事項])
3. 未清好profile前最好不要設為可搜尋
4. Add/Invite基本上是依靠GMail contacts,如用新account玩請注意 (29/6/2011 8:00pm update: 好像如果有link twitter會去爬你的followings了)
5. 會有和Facebook/Buzz相像的notification email,如果不想再收到Google+的email可以 unsubscribe

[Browser]
需Google Profile支援的Browser-IE7出局。
如無Admin權限請改用Chrome Frame的Non-admin版本 [官方介紹]

[取得Google+]
正式公開了。進去官網開通就好。
還是要Invitation,見本文開頭。(17/7/2011)
現在不用邀請了,登入google account再上google+就可以開了~ (4/7/2011)
和Wave相似的是目前本服務是邀請制,不過一個人得到邀請後他的邀請量是無限制...所以Invitation是限時開放
HOWTO: 如果有Invitation開放,在Circle Tab Add friend的時候會有個 Footer提示Invite,那樣就可以Invite剛才選的朋友或是自己加contact
自己來: 去plus.google.com加入已登入的Google Account 到Invitation queue


***queue和發invitation目前關閉中,不過有人說有密技 :密技需有已登入的Google Account及不斷Reload,詳細在此-要Reload是因為Google+系統Loading太大...

[使用]
真的很Facebook...
  • Home: 也就是newsfeed,不過google+叫Stream...上面的post可以like (+1)、可以comment、可以Share (Reshare),人名那行的箭頭有extended menu: report、mute、block ,Homepage也可以換circle(外加Incoming和notification)和看到friend suggestion,還有hangout (live cam)
  • Photos: 看自己和他人的Picasa相簿
  • Profile: 個人Profile
  • Circle: Friend list及他們身在的Circle,預設四個;加人、踢人、block人也是在這裡綜合處理
  • (新) Game: 關於Game的一切-遊戲列表及朋友的遊戲feed update也可在這裡看到,絕對不會被煩到。
[Posting]

Post方面和Facebook相近: link、geo location、photos、video
Link方面如果是圖檔會直接顯示,Youtube是embed video+description text (十分plurk...)
Share掣上可以決定post是public、公開給全部circle/extended circle (friend of friend)/某個circle/某個朋友/只有自己 (近乎是plurk的小圈圈)、 和要不要用email傳給沒google+的朋友
不過那一欄是可以塞email,而且是多於一個...可以當成隱密notification用?
p.s. 要入完拍enter或是click確認加入顯示範圍...(和delicious入tag很像的,不同的是沒入到不會顯示)
Post完之後可以決定要不要disable comment、reshare,delete edit

[Profile]
和Facebook十分像,click Edit之後再click各項可以inline edit和選私隱度-預設是"Everyone on the web"(公開給網上所有人),必改

[Friend]
基本來源為GMail Contacts,所以Buzz的問題一樣有: 那張List會有不能Add Friend的人在...
不過Google+這次總算有解: 在Circle -> Add Friend那個tab內是有個"remove"可以把click起了的contact一次remove (可以multiple)
有選人Remove就可以click
 (29/6/2011 8:00pm update: 好像如果有profile link twitter會去爬你的followings了,如果對方也有加twitter到profile就會顯示)

另外也有人提供了FB搬家大法 (或Outlook或任何可以export CSV的mail client,統稱CSV搬家大法)

之後的就是把Friend加進Circle等對方加回等訊息相通(另文)

[Notification]
一樣有得控制,都在Google+ Settings內...不過Notification mail可以對post作各種操作,太煩的post可以直接mute/email追thread,比facebook的方便也不像buzz的失控-而且buzz的grouping功能照樣保留,十分方便 (只要是用GMail + client support grouping)
FB般的Notification menu可以在toolbar人名旁邊的紅色數字鍵找到

[未確認]
相的tagging, youtube link的處理方式

至於Game之類的G+ App(?)可在Game找到。不過API沒開放

[app]
Android: 有App,全球Market應該已可下載
iOS: 有App,不過沒有了Reshare Orz


[展望]
初步使用感想


Socialmedia - google+ and facebook (modern browser, pls)
如果想找個一般人無法進去的領地玩玩 Google+也許不錯...(用了三個月仍是這樣覺得)
p.s. +1會變成+N好讚...

2011年6月22日 星期三

[Browser戰報] Firefox 5 Release

在別的Browser在集氣的時候Firefox 5 Release了 (灑花),自動更新可以抓到~

幾個重要的Change
  • CSS3 Animation - 簡單來說是Safari有甚麼他就有甚麼~不過3D Transformation還是沒有orz
  • Memory - 大改善。Leak少了很多
  • HTTP - 不再Send Keep-Alive,可能有某些東西會broken....
其他改動都在Canvas和WebGL方面。另外setTimeout和setInterval有變動不過一般情況下不影響 [詳細變更]

碎碎念: FF4作為一個major release 真是有夠短命的...

[Crazy JS/CSS] pdf.js, jsmad, HTML turntables

[前言]
Crazy JS/CSS是新系列,專門討論一些很瘋狂或很實用的JS/CSS App/Demo/Library/Polyfill/...
總之目的只有一個: "Blow your mind"
Here we go.

[正文]
今天和人討論順手撿出來寫一下以免自己失憶-

pdf.js

作者的Blog post
Mozilla的人做的免plugin HTML5 PDF Reader,目前開始了一個月-基本功能大概要3個月完成,現在的prototype只有一些圖片顯示。技術基本是HTML5 canvas為骨幹,所以SVG和text selection都會麻煩-不過圖片或不規則的東西會很好處理。

jsmad

Project Home(我都會以為是mad.js...)
因為html5 audio作的太bug(電風扇那邊得來的經驗)或是mozilla死也不支援有patent的傢伙,所以在web播個mp3是有夠難的-因此有受不了的強者用Audio Data API+Web Audio API做了mp3 player (MAD)。目前只支援firefox或chrome,其他應該沒那麼快有,不過夠用了。

The Wheels Of Steel: An Ode To Turntables (in HTML)

作者的Blog post
比較重CSS的東西,舊式唱盤桌重現還要有cover和Mixer,看完之後你會覺得很威很強大orz

2011年6月20日 星期一

Dogfan - HTML5+CSS3的「 お父さん扇風機 」

這是將日本軟銀廣告出現過的「 お父さん扇風機 」(爸爸風扇)用HTML5+CSS3再現的小玩意。

[連結]
DogFan @ heroku
玩法很簡單: 接電再按下面的control XD
基本功能有這些:
  • 電力發動: 所以要接插頭開風扇 (點一下插頭就會接電、再點斷電)
  • お父さん: 把風扇開起來就會聽到牠的叫聲喔~
  • 三段變速: 可以改變風扇的速度,3最快1最慢。另有Slider可以細調
目前只support webkit系的Safari和Chrome-完美版是Mac的Safari,Chrome是轉速有差,Mobile版不論是Chrome或Safari都只有主要動畫及接電效果沒問題
下一個會支援的是FF5,應該在FF 5 release前會完成。IE 9就別問我了,大方向是知道但沒library輔助會很痛苦...

[Source]
本Project有Opensource放在github上喔:DogFan的github

授權是MIT。自行轉host或改造前請讀Readme。

[技術細節]
本文的重點。

風扇組成 - absolute positioning + multiple background,因為是我自己切圖+@evenwu作的psd整理得非常不錯所以我是用了最懶的方法切-就是不做trimming只用show/hide去生png  ̄▽ ̄,變成這部分沒甚麼特別的...
唯一要注意的是為了避免rotateZ block了插頭所以扇葉有加pointer-events:none去預防,不過android的chrome好像不太理會?


扇葉轉動 - CSS3 animation on CSS3 transformation。主要是用rotateZ+linear timing function去轉,所以是用animation duration去控制轉一圈的時間-duration愈短風扇轉的愈快...不過有趣的是就算是webkit轉速看起來也有微妙的不同
  • Chrome 11 (Desktop/Mac) - 轉的比Desktop Safari 5快一點 (就是因為這樣才決定用Range Slider)
  • Chrome (Flyer) - 轉的比Desktop Safari更快,快至我懷疑是有偷格...
  • Chrome (G1) - 明顯有lag所以轉不動或是逆走orz
p.s.1 在某些frequency下會有好像Zoetrope的定格效果...
p.s.2 transform-origin不是50% 50%, 有一點offset...
p.s.3 我有懷疑過是floating point problem,因為我是只用三格keyframe就做完整個animation...


神秘的震動效果 - 條件請自行發掘 XD。那個只是同時更改兩個background的background-position (用common來分),數字是亂填但效果很不錯 XD。和風扇一樣的是用duration控制速度,不過因為不配合風扇的轉速去變速不自然及震太快太傷眼所以用了一個mapping function+DOM style interface去設定duration


插頭接合 - jQuery+CSS3 Transition on background-position,jQuery做event handler去轉插頭(還有風扇)的state而trigger transition (最簡單是加class)。用transition做而非animation的主因是我要保留最後的background-position + 效果很簡單懶的用keyframe...compatibility並不在考慮之列 (FF4淚目)


插頭垂下 - 目前只有Desktop browser才會正確Play的CSS3 Animation,因為涉及keyframe轉換timing function加上一開始有改state而試了fill-mode,所以一堆mobile browser不是不會處理就是錯亂了 XD
話說做來是想看的人意識到那是可以點的東西,不過因為是一載入即Play+Playtime短所以不太看到而變成考驗browser能力的東西orz


お父さん - HTML5 Audio。HTML本身已有audio的tag和source,不過沒control和autoplay(和隱形沒兩樣)。聲音是用js播放,不過在iOS上似乎不出來...(可能因為聲音太短,有人提過此事)


Slider - 這個是用HTML5 的Range Input去做。因為一開始是在Desktop上做所以value會在mouse up的一剎那處理。另外為了配合上面的數字(slider左至右: 小至大,但和轉速相反)所以value得要做成負數、min/max的值要反轉放(但step要是正數)、handler也得要用Math.abs去處理value,不過event handler用.val()就可以拿到slider的值倒是很方便。(jQuery rocks!)


和Java port相比這個的技術其實很簡單...而且很好改(如果有用compass.app會更好),時間其實用了去想animation和風扇行為要怎樣才自然-實作只用了3天,除了第一天外其餘都是工餘時間做的...(第一天還有一半時間去和heroku打交道,剩下的在切圖,風扇轉也只是用css去作)

[特別鳴謝]
  • @sillyleo, 風扇圖的原型的作者
  • @evenwu, 巨大版風扇+PSD檔的作者 (很偉大的任人惡搞)
  • @hlb, 音效提供
-以及Twitter(以及plurk)上提供意見的各位 m(_ _)m

2011年6月10日 星期五

Google另一個歡樂的Doodle: Les Paul結他

這個Doodle本來是昨天紀念結他之父Les Paul 96歲生日而作的結他Doodle,因為可以用mouse和鍵盤彈而大受歡迎,於是和Google Doodle食鬼一樣有permalink,而且還加了錄音和play-by-link的功能~

[Link]
Google Doodle : Les Paul Guitar
* 用iGoogle的人要再按一下傳統首頁才看到       已經會redirect到下面的連結了

Google Doodle : Les Paul Guitar (Permalink)
真正的permalink

[結他教學]
How To Play Guitar On The Les Paul Google Doodle (LESSONS)

[關於錄音]
1. 打開上面的結他連結(任一)
2. 看到結他之後按中間的黑色鍵可以用鍵盤彈+開始錄chord (銀色的status bar會有Recording字樣,黑鍵上的紅燈會亮起)
3. 彈完再按一次黑鍵會停止錄音,之後小等一下銀色的status bar裡會有一個可以autoplay的短網址
4. 這個短網址可以給別人,進入這個網址結他自己就會autoplay剛才的錄音

Enjoy, happy Friday :D

(OT: 技術上這個是用canvas和png sprites做UI、flash做聲音操作的小玩意)
(13/6: 更新連結)

2011年6月7日 星期二

[Browser戰報] 全民狂奔

[IE]
前兩天的Computex 2011發佈會指出Win 8確認會以webapp為重心(還出了video),MIX 11 Demo IE 10才爆出加了一堆東西:
- CSS3 gradient
- CSS3 multiple column
- CSS3 flexible box
- CSS3 Grid layout
- strict mode
(那個魚缸進化版真的很威...)

[Safari]
Lion即將在7月上市,Safari升級至5.1,已有Developer版可下載 - 可以跑WebGL quake
不過我最關心的是來不來的及加入CSS Region...
(看起來Safari好像走IE的舊路,不妙)

[Opera]
1. Opera 11.50 Beta
2. 他們做< input type="color" > (color picker)了啦...
3. Dragonfly有remote debugging console, webkit努力中,mozilla..好像沒有動作

[Firefox]
更新很多...(部分在Aurora 6...)
HTML5
-  < progress >
- 3D youtube (w/Nvidia) , via WebM (official post)
- CSS Animations
- Canvas Update
- Javascript Memory
- Networking
- WebSocket and more
Browser
- Mozilla在兩周前出了Update,建議現有從Beta升級到FF 4的用戶升級Firefox 5 beta (Mac & Win也有)
- Firefox 出了新的dev channel: Aurora, version 6
- Mozilla的Nightly則是到了version 7
(Aurora和Nightly的分別看firefox channel官網就知道了: nightly > aurora > beta > release )

[Chrome]
- Google IO太多新API...比較觸目的是HTML5 WoW Demo過的強化File API和Web Audio
- Google dev的版號好像到了14
- Nightly: Developer Tool可以take JS memory snapshot了...[official post]


[小結]
除了Safari外幾乎是全部browser版號狂奔啊...不過大家不管那個platform都狂追Spec,好事?