5min 微知識：CSS3, JQuery, HTML5 及網站小技法
很多朋友在升級到 Yosemite(OSX10.10)的時候，
可能都是採用直接在現上下載，自動從前一版升級，
或許是因為這樣，
網路上有蠻多人反應升級後，Yosemite 的 WiFi 連線經常變的不穩定，
時不時的就斷線一下下，
非得要先中斷連線後，重新連線，才會正常，
過沒多久，就會又來一次，實在是很惱人 ><~~
如果你也有這個困擾，
先不急著砍掉重練，畢竟大費周章的來個『乾淨的安裝』實在太耗時了，
也不見得問題就會解決，
下面提供一個解決方案倒是可以試試看喔
有一些朋友最近將他們的 Macbook pro 升級了 Yosemite(OSX 10.10)，
但陸陸續續發現，
經常開機才沒多久，也沒有開啟多少應用程式，
卻老是感覺 Mac 有點動作遲緩頓頓的，
打開活動監視器，
看到記憶體使用量都居然快滿檔了 ><~
如果你也有碰到這種現象，
不妨試試看重置 SMC，重置後還蠻多人的Mac就恢復正常的多了喔
終於，Mac使用者們等到了OSX升級為Yosemite了，
iOS也順利升到8.02了，
這兩個系統在升級後，最讓大家喜愛的，莫過於是在手機等行動裝置與電腦之間，能更無縫的融合在一起 ^^
像是 Handoff 讓工作不間斷，
又或是可以直接在Mac上接打一般電話、簡訊等，
當然還有就是 Airdrop 也可以讓手機與電腦之間輕鬆的交換檔案！
不過這幾天很多朋友有發現，
在Mac上，開啟了Airdrop之後，很快的就可以在 Airdrop 視窗裡看到iPhone，
可是到了iPhone端，卻怎麼都看不到 Mac
不管是經營官方網站，或是寫部落格，
所有的作者們無不希望，寫完之後，
很快的就被 Google(或Bing)收錄，讓所有讀者在搜尋時可以曝光。
所以總有很多朋友會問說，
那麼要如何知道Google到底收錄了沒呢？
下面有一個簡單的方法，
很快就可以知道網站裡的新文章有沒有出現在Google的檢索頁面了囉
在個人隱私不斷發生外露曝光的現在，
很多朋友都希望在手機或行動裝置上，所傳送的訊息、影片能夠在看完之後自動銷毀，
所以之前 Snapchat 這種閱後即焚(burn after reading)的App相當受到歡迎 :)
不過你知道嗎？
在iPhone(或iPad)升級到iOS 8之後，
所有 iOS 裝置的發送的訊息，也都內建了這種讀取後，兩分鐘就會自動消除的功能囉 ^^
如果你還沒有體驗這個新功能，那麼我們來設定一下，趕快啟用這個功能吧
Mac OSX 系統中，
有內建一個好用的便條紙的小工具(Stickies)，
不管有什麼大事小事，或是臨時記個電話什麼的，非常方便。
不過一旦事情記多了，這些資料最好是備份起來，
如果哪天你的Mac出了意外，或是換新Mac時，只要把備份檔叫出來就可以了 :)
那麼這個便條紙的資料都存在什麼地方呢
雖然 Apple 的iPhone系列手機，
總是標榜著易學易用，讓誰都能輕鬆上手，
不過，依這麼些年的經驗，
我們都知道，只要是資訊產品，幾乎沒有不鬧脾氣的不是嗎？
所以經常聽到有朋友抱怨說他的 iPhone突然自動關機，
或是突然變成了黑畫面，怎麼滑也沒有反應，
神經緊張的一點的朋友，就馬上要往維修店面跑，
不然就是到處在網路上詢問。
當然，如果手機故障，送去專業的維修站是最好的決定，
不過在送修之前，我們倒是可以這麼自行檢測一下，
說不定只是虛驚一場
如果你的網址像是的網站一樣，
網址最前面不是以 www 開頭，
而是屬於Sub-Domain(子域名)的話，
有時候會有一些困擾，
就是搜尋引擎在檢索時，
或是有些網友不小心會習慣性的打錯，
在網址的前面加上了www，
以這個網站為例，就會變成了 www. 這樣。
雖然一般來說，瀏覽是不會有什麼問題，
都可以正常連線，
但若是網站中有大量的JS功能(JQuery等)，
就很有可能會發生問題。
那麼要如何把有加上www進來的網址，
全部自動改成去掉www呢
對於 Apple iPhone, iPad 等裝置的使用者來說，
iCloud, Siri, iTunes, App Store 等服務絕對不陌生，幾乎每一秒鐘都伴隨在我們身邊，
當然，隨著Apple的各項服務越來越多，對這些服務的依賴也就越來越深，
倘若哪天突然有一兩個服務無法連線或使用，都會渾身不自在，
然後就像患了強迫症一樣，
反覆的點擊那些不能正常運作的服務，看看到底恢復了沒？
突然間 Facetime不能連線了，
iMessage無法發話了、iCloud上不去了、iTunes Match音樂不見了，
最難過的就是 Siri 突然不理人了
在 Mac OSX 裡面，
如果要搜尋電腦硬碟裡的資料、文件或圖片、多媒體等檔案時，
當然都會使用OSX內建的好用搜尋功能：Spotlight，
只要點一下桌面上方功能表上的放大鏡，就可以直接進行搜尋，非常方便。
不過這個系統內建的 Spotlight，可不是僅僅有搜尋的功能而已喔，
除了幫你找檔案或資料以外，
他還可以直接就讓你預覽檔案的內容，
以便進一步的確認是否就是你翻箱倒櫃找的資料呢如有任何問題，歡迎。
30天學好英文的故事。
框選或點兩下字幕可以直接查字典喔！
Yahoo奇摩字典
The Free Dictionary
Google Search
vi.不及物動詞
vt.及物動詞
prep.介係詞
It seems that since the arrival of the smartphone in 2007, we've seen the arrival of a new problem, a uniquely 21st-century problem. While the world has gotten a lot more connected, people have become more disconnected, losing the art of conversation and real human interaction.
似乎自從2007年智慧型手機的降臨以來，我們已目睹一個新問題的到來，一個特殊的二十一世紀問題。雖然世界變得更加連結起來，人們卻變得越來越失聯，失去了對話及真正人際互動的藝術。
The problem? Ignoring the person in front of you in favor of your smartphone. Just about everyone does it.
問題出在哪呢？忽略你面前的人，站在你的智慧型手機那邊。大概就是所有人都這麼做。
But if these behaviors has become such a big issue, why weren't we talking about it? Well, probably because there wasn't a word for it until now.
但如果這些行為已經成為這麼一件大事，為什麼我們沒在談論它呢？這個嘛，也許因為沒有一個形容它的字，直到現在才有。
I don't know if you know what phubbing is.
我不曉得你們是否知道「低頭」是什麼。
That phubbing is...
「低頭」是...
Phubbing—a term you may not have heard of.
低頭－－一個你也許沒聽過的詞彙。
Phub-bing.
Almost varying degrees of phubbing...
幾乎有不同程度的低頭現象...
You've just been phubbed.
你才剛被「低頭」了。
Ok, stop! Take a step back. Where do words like this even come from? Where did this one come from?
好的，停止!退個一步。像這樣的字到底從哪來的？這一個字打哪來的呢？
Well, on an otherwise unremarkable day in May 2012, a group of people gathered at the University of Sydney, Australia. Amongst the group was a lexicologist, a phonetician, a debating champion, a poet, several authors, and a cruciverbalist—that's a professional crossword maker. Their mission was to create a word that would get people to put their phones down, and get talking to each other again. And so, with a room full of brilliant minds, the search for word to describe ignoring others in favor of your phone began.
嗯，在2012年五月一個除了這件事以外，一切都很普通的一天，一群人聚集在澳洲雪梨大學。在那團隊之中有一名詞彙學家、一名語音學家、一位辯論冠軍、一位詩人、幾個作家，還有一個填字遊戲專家－－那是專業的填字遊戲出題者。他們的任務是要創造出一個可以讓人們放下手機，再次和彼此說話的字。所以，帶著一屋子滿滿的聰明腦袋，找尋形容「忽略他人、站在你的手機那邊」的字開始了。
Phubbing. And he's a phubber. And would you stop phubbing me?
低頭。他是個低頭族。你可以不要再對我低頭了嗎？
The word was released into the wild the following day, seeded into social conversations, and championed by a new movement known simply as "Stop Phubbing."
這個字在隔天被釋出到外頭、播種在社交對話中、並被一個單單以「停止低頭」為人所知的全新運動所擁護。
From its country of origin it spread, first, through the English-speaking world, then Brazil, and right through South and Central America. Europe was next, followed by Southeast and Central Asia. Within a year, over 180 countries were using it.
從它的原產國開始傳佈，第一，穿過英語系國家、然後巴西、接著直直傳過中南美。歐洲是下一站，接著是東南亞和中亞。在一年內，超過180個國家都在用它。
Phubbing: The war against anti-social phone use.
低頭：打擊反社交手機使用的戰爭。
Why the "Stop Phubbing" campaign is going viral?
為什麼「停止低頭」運動流行起來？
Phubbing can be "phatal."
低頭可以是致命的(註一)。
Are you a phubber?
你是低頭族嗎？
The backlash against phubbing.
對抗低頭的反對聲浪。
Ignoring the person in front of you in favor of your phone was now a behavior with a name, and a behavior being questioned right around the globe, all because of a single word, a single word born in a university hall at the bottom of the world.
忽略面前的人、站在你的手機那邊現在是一個有名字的行為了，也是一個就在世界各處被質疑的行為，全都因為一個字，一個在世界盡頭的大學講堂內誕生的字。
Language is always changing. Update your dictionary.
語言永遠在改變。更新你的辭典。
註一：此處是取 ph 發音和 f 一樣的特色，將原本是 fatal（致命的）單字變成 phatal，以和 phubbing 押頭韻。
The problem? Ignoring the person in front of you in favor of your smartphone.
問題出在哪呢？忽略你面前的人，站在你的智慧型手機那邊。
Yahoo奇摩字典
The Free Dictionary
Google Search
登入使用學習功能
使用Email登入
YOUTUBELEARN播放器使用小提示
建議開啟YouTube實驗中的HTML5影片播放功能
建議在電腦上使用Google Chrome、FireFox、Safari或IE9.0以上版本的瀏覽器觀賞以獲得更好的視覺效果及較快的載入速度。
單句重覆、上一句、下一句：顧名思義，以句子為單位重覆播放，單句重覆鍵顯示橘色時為重覆播放狀態；顯示灰色時為正常播放狀態。按上一句鍵、下一句鍵時就會自動重覆播放該句。
收錄佳句：點擊可增減想收藏的句子。
中、英文字幕開關：中、英文字幕按鍵為綠色為開啟，灰色為關閉。鼓勵大家搞懂每一句的內容以後，關上字幕聽聽看，會發現自己好像在聽中文說故事一樣，會很有成就感喔！
收錄單字：用滑鼠框選英文單字可以收藏不會的單字。
如果您覺得本篇短片很有趣或很喜歡，在短片結束時有分享連結，可以分享給朋友一同欣賞，一起看YouTube學英文!
或是您有收錄很優秀的句子時，也可以分享佳句給大家，一同看佳句學英文!接續前一篇介紹 的文章，
本篇介紹的是去年九月份
活動的照片上傳作法。
有做過上傳表單的人一定對瀏覽器提供的預設上傳元件有一些意見，
它的外觀光用 CSS 來設定樣式也救不了，而且上傳圖片沒有前端預覽很不直覺。
幸好可以搭配&label&元素改變表單元素外觀，以及新的 FileReader API 以在上傳前預覽圖片。
實際的範例請先看底下的 fiddle：
想知道這是怎麼做的嗎？不囉嗦，以下馬上開始介紹&#8230;&#8230;
如何不用 Javascript 自訂上傳元件外觀
會用 Javascript 的人大多會先想到，只要把原本的上傳元件藏起來，
再從自訂上傳鈕的
內呼叫上傳元件的
但這招在 IE10 實測時發現，選完圖後居然點下表單的送出鈕沒反應！
（送出鈕同樣也是在自訂按鈕的
仔細追蹤後發現此行為被當作不安全的動作而被擋下來了！
因為 IE10 可能認為透過程式（而非人為的
）而編輯過的表單資料不安全。
這部分的行為在網路上沒有找到正式說明文件，但根據 ，
上傳元件的
以及表單的
兩者都是透過程式去驅動時就會被 IE 擋下來，
只有透過程式驅動其中一種，或是使用原生表單元件功能的話就不會有此問題。
哇～！那這下不剉賽了？難道真的要換回原生醜醜的表單元件嗎（掩面）。
還好 中有一個很貼心的小設計&#8230;&#8230;那就是。
它的作用除了說明表單元件的用途以外，更可增加元件的點擊範圍！
最常見的地方是搭配小不拉幾的
讓使用者在選取選項時不必艱難地對準小小的按鈕，可以直接點對應的
文字來選取。
也有同樣的效果！
簡單來說只要把原本的
再透過 CSS 把對應它的
自訂成想要的按鈕外觀，
一個自訂外觀的上傳元件就完成了！完全不需用到 Javascript！
這是 HTML 的部分：
屬性用來指定對應的表單元件
，如果不用
的話就必須把表單元件包在
標籤之內。
以下是對應的 CSS：很簡單對吧？
上傳前的照片預覽
照片上傳之前有一個重要的功能－預覽 ，
使用者透過預覽可以確認自己選的圖看起來如何，
甚至做一些簡單的調整。
這個功能如果可以在瀏覽器本機端就完成是最好不過了，
省去上傳等待半天又來回修改換圖的麻煩。
透過 HTML5 的
API （註 1）要做照片預覽現在非常容易，
將檔案載入即可：
的作用是將本機的圖片檔案讀進瀏覽器中，
並將圖片資料轉換為 Base64 編碼的 Data URL（註 2）。
事件中讀進檔案轉換為 URL，
並且在 reader 的
事件中將轉換完成的圖片 URL（ ）
塞給目標圖片的（
屬性即可。
拖曳改變圖片裁切位置
為了統一上傳圖片的大小，我想在上傳前就把預先裁切至適當比例，
最簡單的作法可以直接把裁切範圍鎖定在中間，
但考慮不同構圖方式只切中間可能會把重點切掉影響呈現效果，
決定還是讓使用者在上傳前可以橫向拖曳圖片，
以調整至最適合的裁切位置。
不想把功能和程式做得太複雜，所以經過討論這次只支援橫向拖曳，
利用 JQuery UI Draggable（註 3） 的限制移動功能，可以防止圖片被拖到外太空去，
這個功能有兩個屬性可以設定：
可以把拖曳限制在 x 軸或 y 軸上
可以把拖曳限制在指定元素的範圍之內
所以我們只需要將圖片依比例縮至符合外框大小，再依圖片和外框比例判斷要限制在哪一軸，
並且做出一個大小剛好不會讓圖片被拖出界的元素即可，如下圖的淺藍色範圍：
簡單來說，假設圖片的寬高比例比外框寬，就會限制成橫向拖曳，
因此我們就需要一個高度和圖片一樣，寬度比圖片長一些的 containment 元素。
要如何算出它的寬度呢？如果上傳的照片寬度為 w，而外框寬度為 m，
整張圖片的可拖曳寬度就是
，以此作為 containment 元素的寬度，
就可以將拖曳範圍恰恰限縮在不會超界的範圍。上面這段是用來啟動 Draggable 的程式，
想知道如何把圖片縮放至適當比例請參考
詳細計算元素寬高、比例、初始位置的邏輯詳見
本文就不多加詳述。
處理照片旋轉
最麻煩的問題來了，現在的智慧型手機大多有陀螺儀，
大家可以用任何角度，愛怎麼拍就怎麼拍，
轉置角度的資訊會存在照片裡。
秀圖軟體就會依照轉置資訊把圖轉正。
聽起來好像很簡單，
但目前要在前端去處理轉置資訊需要透過第三方函式庫解析圖片裡的 EXIF 資料，
再判斷八種不同的轉置角度來決定轉正的方式。
在這個範例中引用的是 ，有簡單的介紹和展示，
運用這個函式庫就可以讀進圖片並解析其 EXIF 中的 Orientation 資訊：再依照不同的 Orientation 值做對應的圖片旋轉，
Orientation 的值共有八種，這在
上有詳細的解說，
八種值其中四種包含了鏡像翻轉，在大部分的情況下不需考慮鏡像翻轉，
沒有旋轉的情況也不需要處理，所以只要判斷 8、3、6三個值即可。
期待簡易的新標準
目前針對 HTML5 標準的草案中，
有一個針對圖片旋轉作處理的 CSS 特性
我在寫這篇文章的時候只有 Firefox 支援這個實驗性的特性，
它的作用除了自行指定圖片的旋轉角度、翻轉方式以外，這行 CSS 設定即可讓圖片依據 EXIF 中的資訊進行旋轉及翻轉。
期待它能成為新的 HTML5 標準吧！
One more thing&#8230;再加個假掰光暈動畫
最後教大家用 CSS 的影格動畫（keyframe animation）做一個超搶眼的光暈閃爍動畫，
把它放在要強調的按鈕後面，讓網站的使用者想不看到你的按鈕都沒辦法：如果你對這段 CSS 的長相和它的作用感到疑惑，底下就稍微解釋一下運作原理：
區塊中定義動畫進度百分之幾時需要漸變的屬性目標值，
瀏覽器會根據時間動畫長度、時間函式（timing function）、
以及目前動畫播放的進度，算出一個介於中間的值。
以閃爍的動畫來說，只需要讓
屬性從 1 漸變成 0，再從 0 漸變成 1 即可，
選擇器中的
作為動畫的影格設定，
假設 20 秒作為動畫長度，時間函式設為線性（Linear），
那麼在剛開始播放第 0 秒的時候，等於是
會是 1，也就是完全不透明，
第 10 秒時，播放進度到達 50%，
漸變為 0，完全變成透明了，
那麼在第 15 秒的時候呢？15 秒對 20 秒來說是 75%，等於 50% 到 100% 的半路上，
的值是 0.5，呈現出半透明的效果，以此類推。
以上就是這個動畫運算的基本原理。
附帶一提最後的
設定可以讓動畫無限循環播放。
關於 CSS 動畫更多詳細的說明、範例和各瀏覽器支援度請參考 MDN 的 文件。
至於光暈的背景如果不想用圖片的話，可以參考本範例利用 CSS 的
很驚訝原來這些功能都能在網頁上運作嗎？你也試著來做做看吧！
註 1： 是 HTML5 的新 API，讓瀏覽器得以讀取客戶端電腦的檔案。
註 2：也是 URL 的一種標準規範，可將完整檔案資料直接嵌入URL中。
註 3： 是 套件中用來處理元素拖放的擴充套件。
我要分享此篇文章
【引用來源】：
謀智台客最新文章