GoogleTV web 設計教學

19 11 月

Powen Ko

Uncategorized

off

柯博文要介紹如何設計googleTV web , 請注意以下的設計基本需求

請把按鈕和文字大小加大～
The “selected” item or item with the mouse over it is clearly highlighted
控制切換畫面用 D-pad up/down/left/right 鍵，建議看一下 httpss://mike-hostetler.com/jquery-keyboard-navigation-plugin 用 jquery 來設定控制的東西
加上處理中的訊息，當你在切換、處理影片時
用暗一點的背景和少一點的顏色當背景

畫面大小

1280×720 resolution. 建議寬度是 1152×648.
1920×1080 resolution. 建議寬度是 1728×972.
如果你只有設計 720p 解析度， Google TV 在1080p 會調整到放大到合適大小。

加快網路速度的設計，請看

httpss://code.google.com/speed/

GoogleTV 是用 Chrome Browser

請多用 HTML5 features. 並且可用 CSS 3 transformations,把資料存在 local data storage,應用程式有暫存 , 新的 form field 格式, media tags (audio & video), 等等..可以參考
httpss://www.html5rocks.com/ 看更多有關的 HTML5 and its use in Google Chrome.
ps: 如果要用此文章，請註明是柯博文老師寫的 httpss://www.powenko.com

遙控器和鍵盤控制javascript code

window.onload = function() {

  document.onkeydown=function(e){

    if (!e) e=window.event;

    switch(e.keyCode) {

      case 37:
        alert("Left arrow");
        break;

      case 38:
        alert("Up arrow");
        break;

      case 39:
        alert("Right arrow");
        break;

      case 40:
        alert("Down arrow");
        break;

      case 13:
        alert("Enter/select");
        break;
    }
  }
}
多媒體的按鍵是 Key codes:

Play/Pause: 179
Stop: 178
Next: 176
Previous: 177

CSS3

字型使用 CSS3's @font-face, 可以讀取 s TrueType (.ttf) and OpenType (.otf) 的字型:
@font-face
{
  font-family: Bonzai;
  src: "Bonzai.ttf";
}

.font-demo-css {
  font-family: 'Bonzai', sans-serif;
  font-size: 36px;
}

Auto-zoom 放大

<meta name="gtv-autozoom" content="on" />
<meta name="gtv-autozoom" content="off" />

取得螢幕大小 javascript code

function init() {

  var w = screen.width;
  var h = screen.height;

  var bw = window.innerWidth;
  var bh = window.innerHeight;

  var wRatio = bw/w;
  var hRatio = bh/h;
  var ratio = (wRatio + hRatio) / 2;

  document.getElementsByTagName('body')[0].style.zoom = ratio;
}
如何在desktop 和 googletv 下只有一個html 網頁，但可以跑二個系統

Desktop users browse example.com/great-vid with the corresponding stylesheet

<link rel="stylesheet" href="my-existing-css.css" type="text/css" media="screen" />

TV users browse the same URL, example.com/great-vid, but with TV stylesheet

<link rel="stylesheet" href="tv.css" type="text/css" media="tv" />
For example:

電腦版
```
example.com/great-vid
```
電視版
```
example.com/great-vid&media=tv
```
加上 rel=”canonical” to consolidate indexing and ranking signals to the original version
TV version of page at example.com/great-vid&media=tv contains
```
<link rel="canonical" href="example.com/great-vid" />
```
還有一個方法判斷用戶是用哪個browser, 查 Mozilla/5.0 (X11; U; Linux i686; en-US) AppleWebKit/533.4 (KHTML, like Gecko) Chrome/5.0.375.127 Large Screen Safari/533.4 GoogleTV/161242

Flash 支援

Google TV 支援 Adobe Flash Player 10.1 Beta. 詳細請看Adobe's Flash TV web site 
httpss://tv.flash.com/
影像格式

H.264 Video Playback

The hardware in the Google TV supports a maximum of two H.264 decoders and
thus has a limit of two decompressor instances. If a site tries to create a third
decompressor instance, Google TV will shut down the least recently used of
the two existing instances. In order to operate correctly on the Google TV,
your site should be designed such that it never needs more than two instances.

柯博文 googleTV web 設計課程
如果你想要進入，並學習googleTV web 
設計，在台北 四天白天的課程共24小時12000台幣,
北京, 深圳 四天白天的課程共24小時 2400人民幣，
歡迎主動寫email到 support@looptek.com
如果人數超過10 便會開課。