壹電視全視窗 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。

iPad Ready? iPad Only?

My fellow Web Developers, I know it’s exciting to work with new devices and experimenting with new interactions, like multi-touch. I also acknowledge that sometimes it’s best to have a special look-and-feel that fit the device. But this time Apple is deliberately hurting the open web.

Yes, you must have heard the phrase “iPhone is the new IE6”; back then I think Apple was doing a great job bringing the web as-we-know-it (kind of) to the mobile, and the cost to develop a separate iPhone website is justify because it’s mobile – a distinct device. Yet, for iPad it’s a completely different story:

  • No matter how Apple marketed it, the device is an 1024×768 tablet, with enough screen size to fit regular web.
  • Even if I want to build a specific website for iPhone/iPad, their devices doesn’t use open standard like CSS @media-query to identify themselves their device does do that, but not yet adopt by most developers. In fact, the way noteworthy companies doing the identification (e.g. Google’s GMail) is by detecting UA string. I couldn’t stop imaging the string iPhone or iPad would one day present in every mobile browser, just like the string Mozilla did. The <meta viewpoint> spec was also poorly designed – Apple should be more careful if they intend to establish a new de-facto standard.
  • For all the things above, I could just make excuses for them, like I did with iPhone Safari: it’s one of it’s kind, and Apple is focusing on delivering the best user experience they could give (like we all do) – but not for this: the flashy shrine of iPad-ready websites. Apple is purposely asking web content providers to build websites for it’s garden – and guess what, the garden is walled due to constraint above.

Web is the first platform without a vendor. Nobody want to market a term they cannot trademark; every vendor of the market-leading browsers – from NCSA Mosaic, Microsoft Internet Explorer, to Apple iPad/iPhone Safari now, want to make World Wide Web their own from simply replace the terminology*, break the content standard, to moving open content to their closed garden.

Let’s defend that, first by giving your iPhone/iPad ready website an independent universal-accessible address, then demand browser vendors provide feasible standard to address their device capacities. No more UA string hacking please.

* Little-known early history of WWW; Back then, NCSA promotes their Mosaic browser without even mentioning the term “WWW”. This gesture prompted Sir Tim Berners-Lee to fund W3C to ensure the openness of the Web. More stories can be found on his book “Weaving the Web.”