2013年11月19日 星期二

Chrome Developer Tools - Settings > Overrides > Emulation 模擬瀏覽器 改的更好用了!

現在開發網站常常需要測試在不同裝置上不同瀏覽器的長相
我一直都很依賴 Chrome Developer Tools > Settings > Overrides  > Emulation (模擬 User Agent 的功能)

目前正式板的 Chrome



現在的位置在





讓我們來看看 Chrome Canary 測試板裡面的改變
我第一次找的時候花了點時間,跟大家分享一下



Settings 的位置換了,不在右下角




打開 Overrides 會告訴你 Emulation (模擬功能) 已經換到 Console 的 Drawer 當中




勾起來後,關掉 Settings 點開齒輪旁邊的這個符號,也就是 Drawer 的位置




 你會看到正下方出現了三個 tab




點到 Emulation Tab 就可以看到嶄新的 User Agent 功能了!



支援的種類更多了,甚至支援到最新的 Nexus 5 了呢!






2013年10月28日 星期一

如何將 Google Drive 內的影片檔嵌上字幕

首先,你要把你要嵌入的字幕檔 (.srt, .sub) 下載到你的電腦中
目前只支援上述兩種字幕格式,檔案不能超過2MB


Google Drive 中,影音檔 (.avi, .mp4, .mkv) 點選右鍵 Manage caption tracks... (管理字幕軌)

點選 Add new captions or transcript (新增說明文字或字幕)


點選檔案跟你要選擇的語系


點下 upload (上傳)


確認有找到 Caption Tracks (字幕軌) 的話 ,就會出現下面的畫面


當你直接點開影音檔的時候,是無法讀取字幕檔的,請點選右下角的 open 或是直接點選檔案另開視窗



點下播放後,字幕就跑出來啦!!



要附註說明的是,如果你下載該影片檔 (.avi, .mp4, .mkv) ,字幕檔(.srt)是不會跟著一起下載的喔!(字幕播放只限線上的影音播放。)

Google Drive on iOS 無支援此功能


字幕檔可以上傳多種語系



播放時右下角就可以選擇你要 英文還是中文



右下角的 options 點開後你還可以編輯字幕跟背景的顏色,還可以設定快捷鍵喔!



其他參考資料
https://support.google.com/drive/answer/1372218?hl=zh-Hant


2013年9月15日 星期日

如何將 Canon 相機(SX260) GPS log 轉成 GPX

推薦一個免費軟體 GPS Babel
http://www.gpsbabel.org/download.html

GPX是個很好用的格式,不管是匯入 Google Map 或是 世界迷霧(Fog of World) 中都很好用
這軟體不只可以轉換成GPX,還有非常多種通用的GPX格式


Canon SX230 HS, SX260 HS, SX280 HS 都有GPS紀錄的功能
紀錄的 log 檔案格式是這樣的





開啟 GPS Babel,按照下面的設定:
選擇 NMEA 0183 ,Input 的 log檔案,Output 選 GPX XML





再來點選 Options (這點很重要),勾起最後一項 (ignore_fix=1)





完美的 GPX 格式




2013年4月10日 星期三

搜狐 sohu.com - 加入會員太麻煩?"自動加入"

看到落落長的輸入會員資料的頁面,你是不是就想跑了呢?

如果自動幫使用者加入,再吸引使用者修改資料也是個好辦法呢!


剛剛在看文章的時候,意外發現搜狐聰明的作法
因為朋友轉貼看到有興趣的文章
http://yule.sohu.com/20130410/n372240876.shtml

讀著讀著,看到一個頁籤「我來說兩句」



點下後看到一個投票




把投票關掉後下面出現一個註冊成功?
左上角已經有了會員編號,右上角也有信件跟訊息了?



當我納悶的點進去發現
已經有給我一個臨時的 email 了,好奇的點進去 [修改資料]



必填欄位不算多,稍微修改一下資料就正式成為搜狐的會員了
好一個聰明的方法阿!




搜狐還是有正式的註冊頁面


不過上面這個方法真是快速增加會員的好方法阿!


2013年2月6日 星期三

WebConf 2013 參加心得




幾年前,我開始積極參加各大開發者相關的研討會
主要都是好友(過去的好同事) 高見龍 推薦跟介紹的
COSCUPOSDC.TWJSDC.TW...等,總是搶票搶得很兇

我從原本在台下傻楞楞地,什麼都聽不懂,到現在可以運用聽到新知跟技術結合在工作上,
我已經感到滿足了。

但見龍不一樣。

前年(或是大前年?),見龍在噗浪上許了願望,想從聽眾變成講者,他成功了!
去年,我又看到了一句話:「不如自己辦一場吧!」,所以 Webconf 2013 就誕生了!

更令我佩服的是他跟朋友想 "跨界" 的野心跟企圖!

圖片出自:http://www.webconf.tw/

我本身從一開始MIS修電腦,系統、資料庫管理,網頁程式撰寫,
轉行產品研發企劃,再轉 到目前的前端工程師。

Web領域,除了視覺設計之外,已經累積了不少經驗。
也因為這些經驗我參與過了 UiGatheringHPXIxDA....等舉辦的活動。

如果你也跟我一樣同時會參與過這些盛會
你應該會發現 Developer 跟 Designer 的聚會的氛圍是大大不同的!
但兩邊分享新知的熱情是完全相同的!

Webconf 2013 做到了!橋樑搭起來了!

我在會場看到很多厲害的 Developer 在聽到講者分享到UX 相關經驗跟知識時
那種彷彿豁然開朗的眼神,就像我第一次接觸到 UX 時的驚喜感受!

如果這樣的場合,可以更多的網站企劃來聽
放下工作上對 Designer 跟 Developer 的敵對狀態
感受一下這種熱情,一定會更棒!

這次,感謝見龍的邀請,我在 twitter 跟 facebook 即時做了重點筆記跟分享
所以比較沒有完整的筆記可供分享
下面整理出我節錄跟轉推自高手的分享經典重點


報到:

開頭 Keynote - Ruddy Lee 非常的風趣,經驗豐富的他句句都是經典:



接著我去聽了 BBD


一邊聽演講,我一邊注意其他會議廳的節錄的重點:




下午場,Richard 的分享獲得廣大的迴響,傳說中的irc第四會議室裡面討論更熱烈呢!






來到第二天的議程
第二天我幾乎一直在轉錄 Kyle Lin 的重點節錄
(平板電腦要打字紀錄真的太慢,我應該弄台MBA)
(Kyle 你要跟我收版稅嗎> <~ 我...我可以提供歐美影集相關經驗給你參考....)











最後:WebConf 2013 在龍哥 live coding 抽獎程式中結束




讓我們期待 WebConf 2014 吧!



最後,我附上這個多人共筆的
Word版:超強懶人包
Excel版:懶人包
光從這點就可以看到雲端的應用已經達到另一個境界了!



2013年2月5日 星期二

所謂的 Pinterest 佈局式網站





最近看到一些文章介紹  "瀑布式佈局"、"瀑布流排版"、"流瀑式佈局"
出現的其實就是長得像 Pinterest 的網站
接著就有些 blog 把這樣的網頁排版翻譯成 Waterfall Layout


Pinterest 是 Responsive Web Design 經典好作品

但,我長期看過這麼多國外文章跟網站
不禁疑惑起來,我怎麼從沒見過有人用 "Waterfall" 這個詞介紹 Pinterest ?

找了 Google、StackOverflow、Quora...等
Pinterest-likePinterest-stylePinterest-kind 是最常見的形容方式。

再來就是結合CSS的一些形容方式
Pinterest Style Columns LayoutMulti-Columns Layout、...等。

再努力的翻了一個下午的文章
Masonry LayoutDynamic Grid Layout 似乎才是更準確來形容 Pinterest 設計的英文名稱。


上面幾種都是找到 Pinterest 排版,你可用到的關鍵詞,規則也都雷同:

1. 按照瀏覽器的大小,先水平排列想要呈現區塊數量,橫向填滿頁面寬度
2. 垂直滾動頁面,新的資料區塊再從下方持續載入進來


而我想說得只是,你可以用中文敘述一種排版設計,讓人好理解

但,寫文章前請先做功課,不要自以為是的,把中文直接翻譯回去英文來解釋,ex: waterfall。

請找到正確的英文名稱,這是學習網頁設計的才應該有的態度!



2013年2月1日 星期五

進階 HTML&CSS - 課程3:Complex Selectors

閱讀文章要學會整理文章重點,才能好好吸收!
課程來自: http://learn.shayhowe.com/advanced-html-css/
整理方式:Google Docs

小小心得:selector種類越來越多,適用的瀏覽器也不同,瞭解有哪些基礎跟不同用法的 selector,未來使用更能活用。


2013年1月31日 星期四

進階 HTML&CSS - 課程2:Detailed Positioning

閱讀文章要學會整理文章重點,才能好好吸收!
課程來自: http://learn.shayhowe.com/advanced-html-css/
整理方式:Google Docs

小小心得:熟悉基礎CSS觀念很重要,float大家愛用,版面配置用起來最常出問題的也正是float,配合 position 的定義,我們更該小心使用跟注意!


http://learn.shayhowe.com/advanced-html-css/

進階 HTML&CSS - 課程1:Performance & Organization

閱讀文章要學會整理文章重點,才能好好吸收!
課程來自: http://learn.shayhowe.com/advanced-html-css/
整理方式:Google Docs

2013年1月30日 星期三

HPX Life 26 重點筆記與心得


圖片來源:http://www.tecmark.co.uk/user-experience-design-uxd/

講者:李毓修
講題:展望2013年使用者經驗設計的發展
http://www.hpx-party.com/archives/8814



下面轉貼一些我用iPad做的筆記跟圖片 (從來沒有這樣赤裸裸的公開筆記本阿!)
記憶力有限,中間有幾段有缺或是誤解的部份,之後會再補充跟修正

------------------- 補上講師提供的簡報  20130203 -------------------
謝謝講師在 UX Murmur 上的補充跟說明
我把更正寫在下面
http://www.facebook.com/uxmurmur/posts/329191137185949

------------------- 補上講師提供的簡報  20130131 -------------------




講者先是說到自己:永遠在設定目標、永遠在跑,不斷地思考自己在做什麼。



2013年的開始新的現象,經過各式各樣的組織(UiGathering、HPX、IxDA)這麼多年的推動,大家漸漸開始了解什麼是UX,越來越多人知道UX,越來越多人從事跟UX相關的工作,也越來越多人的職稱前面都加上了UX,UX已經達到一定的成熟度了!

這樣就夠了嗎?

P.S.這張投影片,忍不住想要稍微指正一下...是 104.com.tw 不是 104.com (身為忠誠的員工...)



接著講者提到了目前業界會面臨的問題,漸漸發展成三種趨勢




但因為UX的影響,我們的團隊工作型態已經跟以往大不相同
漸漸演變成這樣的專業分工


iPad 筆記圖片不清楚我找到了 阿修的版本。圖片出處:http://www.slideshare.net/lis186  slide 13



如果現在公司要 Cost Down?這樣的團隊你們覺得誰會優先被裁掉
台下紛紛發出聲音:
1. UX Designer (有點不確定,因為我聽到第三個的時候打擊很大)
2. UX 研究員
3. 前端工程師

但,其實,可能是產品企劃 (特別是沒有來聽HPX的產品企劃)





接著講者開始提到他今天想要傳達給大家的幾個重點


Back to Basic



以使用者為中心出發,我們要有宏觀的思考、實驗精神、打破藩籬跨界合作。
瞭解問題本身

講者舉了兩個顧問公司當例子,麥肯錫跟BCG Boston:
麥肯錫:收集大量的問題,足夠的資訊,才開始找問題的根本。
BCG Boston:其實我們收集不完全部問題,所以從瞭解"行為"為出發點,從自己本身開始出發去解決問題。

------------------ 講者 更正我的筆記 20130203 ------------------
演說中提到麥肯錫以及BCG對問題的解決方式其實並不是這麼決定,應該說在解決問題的思考過程中,我們不應該只偏重在歸納法,必要的時候演譯法(也就是用假說做出發)也應該被考慮使用。


Sensitivity



再來提到『敏感度』。

敏感度是需要長時間累積的,看得東西不夠多,無法拓展視野 !
(聽到這邊實在太有感觸,我常常覺得工作上合作的某些企劃沒有世界觀,東西看得太少,看一個想學一個,不然就是永遠都是 「我要跟Yxxxx網站一樣」、「我這邊要跟Gxxxxx網站一樣」)

老闆叫你N+1設計不是問題,重點是你有沒有了解這些東西的優點跟缺點在哪?知不知道設計原理?借用不是問題,有借要有還。要懂得借力使力的道理。


Fit-n-Finish

精緻度跟合度。
APPLE效應促成一個可怕的現象,每個老闆都想學賈伯斯,卻統統變成假伯斯(這句是我講:P),魔鬼藏在細節裡,但你的目標都還不明確,怎麼去在乎細節?產品的成熟度不夠,架構還不清楚,那小小的 1 pixel不是當下該去注意的東西。

這時候講者做了一個照片推理的實驗,大夥猜得很開心,很多看似很篤定的答案都出現了,但其實大家都過度重視 "細節",過度相信 "細節",卻不問線索是否足夠!


Facilitation

領導力。(我忘記講者中文翻什麼了)
引導力

設計師的角色要怎麼當,設計的目的在什麼?
引發 "共創" 的過程很重要,必要的話拉著你的團隊成員跟著一起!
講者提到了自己跟工程師合作的經驗,將同理心的想法跟工程師一起分享,團隊一起達成想要達成的目標,這對 UX Designer來講是很重要的事情。

引申出來的議題是 Product Manager跟 UX Designer 的角色責任到底是什麼?
簡單來說就是 Why 跟 How
Product Manager 要讓團隊知道我們為什麼要做這樣的產品,目的到底是什麼
UX Designer 要讓團隊知道我們該如何達成我們目的!


Leadership



那三個三角形我印象深刻
再來講到管理層面,所謂的策略管理
把自己看大,才能做大,台灣產業很多人停留在中間的三角形就覺得夠了
但自己的影響力其實並沒有這麼小
用全面宏觀的方式找到產品的 feature,再去拓展很重要
AARRR方法是很好的方式
最後一個R應該是「客戶的成長如何為公司帶來收入」




企業品牌的依靠的是這三樣
要時時把這些東西放在心裡




使用者的演化是一個持續性演化的過程
講者的例子很棒:慈禧太后是第一個接觸到電燈泡的人,卻因為害怕,阻礙了後續的科技發展。
(反省:那我們自己呢?使用者又怎麼想呢?)

最後,兩個重點

Small Win
設計師不要小看自己的價值
創意不是多唸兩本書就能擁有的
逐步的建立信心,團隊的凝聚力
不要小看你帶給他們小小地歡樂,那都是團隊進步的動力

Action
行動,中國人顧"全"的思維  (我就在這個時候想到了李小龍)
講者引述了論語.字罕
「可與共學,未可與適道
可與適道,未可與立
可與立,未可與權。」

翻譯:
可以一起學習,未必可以志同道合(走相同的路);
可以志同道合,未必可以一起立業;
可以一起立業,未必可以一起通權達變。


結語: 2013年 我其誰


最後我附上:
Be Water My Friend
讓我們像水一樣訓練2013年的自己吧!





------------------------------------------------------------------------------------------------------

Q&A時間:先貼上紀錄.....但其實我忘記一半了
因為有一些問題邏輯怪怪的






最後我要說一下我喜歡講者最後正面的能量
不帶有任何宗教的色彩,是一種想法的改變

每天的睡前,想三個快樂的事情、想感謝的人、想感謝的事物....等。
因為我們每天工作面臨太多爭吵抱怨埋怨,太多負面的情緒在身上
就算你想的只是很小的事情,可能只是在捷運上看到有人讓位給老婆婆
但這些微小正面的能量都會在無形之中影響著我們的、幫助著我們!



2013年1月17日 星期四

來談談 z-index


作者:Philip Walton
文章:What No One Told You About Z-Index
http://philipwalton.com/articles/what-no-one-told-you-about-z-index/



看到這篇文章寫得很好,決定用來節錄一下重點

每當 web developer 想要移動HTML上面的元素的前後順序時,第一個直覺都是改變 z-index 數字的大小,但其實 z-index 並沒有想像中這麼簡單。

這個作者請你做了一個實驗,下面是一個簡單的區塊堆疊應用

Check out this Pen!
你要如何讓紅色的區塊被壓到最下面,但你不能

  • 不能改變 HTML 結構
  • 不能修改 z-index 大小
  • 不能修改 position 的值

想到結果了嗎?

Check out this Pen!

你猜對了嗎? 作者只加了一段CSS

div:first-child {
  opacity: .99;
}


如果你感到非常疑惑,不要氣餒,因為作者告訴你:W3C的 z-index 規則 其實真的很複雜!


堆疊的規則

當 z-index 跟 position 屬性沒有共同存在的時候,元素堆疊的規則可以說是簡單的,就是HTML堆疊的先後。

當 position 屬性存在的時候,任何有 position 的元素會顯示在,沒有position的元素前面 (意思是除 static 之外的 position 屬性,relative、absulute....)

當z-index 跟 position 共同存在的時候,這規則就難了,我把作者整理的順序放在下面

由後往前排序是這樣:
  1. The stacking context's root element
    堆疊內容的 root 元素
  2. Positioned elements (and their children) with negative z-index values (higher values are stacked in front of lower values; elements with the same value are stacked according to appearance in the HTML)
    有 position 屬性的元素(包含子元素) + 負數的 z-index 值 (數字越大越前面)
  3. Non-positioned elements (ordered by appearance in the HTML)
    沒有 position 屬性的元素
  4. Positioned elements (and their children) with a z-index value of auto (ordered by appearance in the HTML)
    有 position 屬性的元素(包含子元素) + z-index:auto 
  5. Positioned elements (and their children) with positive z-index values (higher values are stacked in front of lower values; elements with the same value are stacked according to appearance in the HTML)
    有 position 屬性的元素 + 正數 z-index 值(數字越大越前面)


最後,作者說明了上面的例子,整體的順序到底是怎麼改變的

原本的順序是這樣的:
<div><!-- 1 -->
  <span class="red"><!-- 6 --></span>
</div>
<div><!-- 2 -->
  <span class="green"><!-- 4 --><span>
</div>
<div><!-- 3 -->
  <span class="blue"><!-- 5 --></span>
</div>
經過修改後的順序變成這樣:
<div><!-- 1 -->
  <span class="red"><!-- 1.1 --></span>
</div>
<div><!-- 2 -->
  <span class="green"><!-- 4 --><span>
</div>
<div><!-- 3 -->
  <span class="blue"><!-- 5 --></span>
</div>
原本CSS的寫法,我們只有兩層的堆疊內容,root 跟 span.red
當我們在 span.red 的父層 div 設定了透明度 opacity:.99 (div:first-child { opacity: .99; })
我們讓原本的堆疊變成了三層
第一個 div 跟他的子元素都不會吃到 .red 的 z-index 跟 position
他們變成沒有 position 跟 z-index 的元素了
他們的堆疊順序變成按照原本的 HTML 的結構來計算
所以作者用 1 跟 1.1來代表他們後來變成的順序


感謝這位作者,我看完這篇文章頭都昏了,但也終於弄懂 z-index 的層級判別方式

請不再在隨便相信文章裡面寫「這是 z-index 的 bug」了!