壹電視全視窗 bookmarklet

昨天壹電視開播,內容的部份我想要一段時間才知道是不是如他們的宣傳。

技術的部份,前端使用的是商業授權版的 JW Player,後端是用 RTSP 通訊協定實作隨選視訊和 Live 廣播。前者我也買過用在演示實驗網站,但是伺服器端沒有找到什麼 FLOSS 解決方案或是買的起的商用軟體(架的起來放在學網裡給各個學校計劃也不錯,但是架不起來orz)。

畫面比較不滿意的地方是只能用全螢幕或是畫面上的小小螢幕,而且 Flash Player 全螢幕如果失去 focus 就會消失。所以我做了一個簡單的 bookmarklet 把畫面放大到全視窗,可以把電視開到另一個視窗放到想要的任意大小。

» 壹電視全視窗

跟其他 bookmarklet 一樣,把連結拖到書籤,開壹電視網頁然後點一下即可。已知問題是切換標準/高畫質的按鈕會失效,想要看高畫質要先切換再改成全視窗。

Responsive Web Design

Ethan MarcotteResponsive Web Design布丁爸爸說這是 2010 上半年最重要的文章之一

內文主要是在闡述一個重要的 Idea:「Responsive Web Design」。隨著 Web 從 PC 螢幕移動到各式各樣的裝置,為每個裝置設計不同的網站版本(iPad 版、iPhone 版、手機版)是個 viable 但是不 scalable 的解決方法。作者認為,網站開發時如同「Responsive Architecture」的概念一樣,讓環境去適應使用者的存在 -- 像是自動調節室內溫度、將窗戶霧化以保護隱私等。網站設計不應該是平面出版的電子化,存在於固定的版面、文字大小、圖文配置;設計應該要自然的適應不同的裝置,自動調整版面的 flow,甚至是互動 UI 的大小等等

實作的細節,作者花了後半的篇幅在介紹 CSS media query。Media Query 是以前 CSS 2 的 media type 延伸,不同的是它不只是一組預先設定好的媒體(螢幕、紙本、點字、語音…),它可以讓開發者自行設定 CSS 規則適用的裝置類型、寬度等等。文章內提供了具體的範例,展示了使用 Media Query,作者可以指定當裝置的螢幕寬度小於多少、或是介於多少時,網頁可以隨之切換欄數、圖片寬度、圖文配置等等。

我自己把文章印了出來(地球對不起 > <),認真讀了一遍,滿有收穫的。雖然 CSS media query 是早就知道的東西,但是不了解前面的設計哲學與意義就不會有動機去玩它(現在就超有動機的哈)。作者的文筆讓人耳目一新,闡述概念的方式相當的生動,可以拿來練英文(真的)。

有個研伸的問題,作者也有簡略提到。CSS media query 解決了排版適應裝置畫面的問題,但如果開發者希望在不同裝置呈現不同的內容,甚至不同的互動時,多版本網站還是解法。如果只是幾行字,或許可以用 display 屬性開關切換掉,但總不會 Facebook 套了另一份 CSS 就變成 Facebook for touch devices 吧 :P。