Aplicações Web TV no Meo

Portugal Telecom Inovação, S.A.

Tuesday, December 2, 2008

> Bernardo Cardoso < IAD3 – Televisão digital e serviços IPTV

Aplicações Web+TV no Meo

Plataforma do Meo

Browser XHTML

•  Standards Suportados pelo Browser Mediaroom •  X-HTML 1.0 Strict •  CSS1.0, CSS 2.1 •  ECMAScript (Javascript) •  DOM1, DOM2 •  AJAX (XMLHTTPRequest) •  Cookies (por sessão, não são persistentes)

•  Formatos de Imagem Suportados •  GIF89a, JPEG, PNG (1 bit de transparência, não suporta

alpha channel)

•  Não Suportado •  Plug-ins, Java, ActiveX, Flash ou Silverlight

Add-ons •  Scaled Video, Mosaicos, PIPs, Windows Media

<a id="tv" class="tile" href="tune:1" accesskey="1"> <object class="tv" type="video/x-ms-iptv"> <param name="url" value="tune:1" /> <param name="ispip" value="0" /> <img src="tv.png" class="tvpng"/> </object> </a>

•  url •  tune:<canal> •  mms://windowsmediaserver/file.wmv •  http://servidorweb/file.wmv

Resoluções

•  Browser suporta basicamente 640x480 (4:3) e 854x480 (16:9) e faz uma adaptação “best fit”

Clienteem4:3

Clienteem16:9

640x480(4:3)

748x480(14:9)

854x480(16:9)

Resoluções •  A informação do modo do cliente vai numa

header

•  A adaptação é feita com CSS •  <html style="width:854px; height: 480px;">

•  <html class="tvWide"> •  .tvWide { width: 854px; height: 480px; }

•  window.external.pageColor = hexValue | colorString;

Modo do cliente Header

SD4:3 UA‐WindowPixels:640x480

SD16:9 UA‐WindowPixels:854x480

720p UA‐WindowPixels:854x480

1080i UA‐WindowPixels:854x480

Input

•  O input é feito unicamente através de um telecomando

<body onkeypress="onRemoteEvent(window.event.keyCode)"> </body>

function onRemoteEvent(keyChar) { switch (keyChar) { case 0x30: …. } }

Dicas para o Browser

•  Verificar que todas as páginas são XHTML válido •  http://validator.w3.org/

•  Usar posicionamento fixed ou absolute sempre que possível

•  Não incluir informação de estilos em cada elemento e tentar consolidar os atributos das classes

•  Colocar os estilos e atributos em ficheiros .css

•  Usar poucas imagens e só quando absolutamente necessário, não usar uma imagem grande quando um padrão funcionar igualmente bem

Dicas para o Browser

•  Em ECMAScript não iterar no DOM repetidamente, guardar referências para os objectos encontrados em variáveis sempre que possível

•  Usar CSS e não ECMAScript para rollovers

•  Evitar ao máximo animações nas transições

•  Colocar o ECMAScript em ficheiros .js

•  Criar ECMAScript o mais reduzido e eficiente possível

Dicas para o Browser <object id="loadArea" type="text/html" data=“dados.html”> </object>

domElement.style = "font: 12px; background-color: blue"; domElement.setAttribute("style", "font: 12px; background-color: blue");

domElement.style.fontSize = "12px"; domElement.style.backgroundColor = "blue";

domElement.class = "read";

.innerText; .innerHTML

function AppendText(element, textToAdd) {

var p = document.createElement("p"); p.appendChild(document.createTextNode(textToAdd + " ")); element.appendChild(p);

}

Dicas para TV

•  As televisões CRT, Plasmas e LCDs fazem overscan e cortam parte da imagem, deixar margem de segurança

•  A TV vê-se a alguma distância, usar texto o maior possível, evitar tamanhos inferiores a 16/18

•  Evitar linhas de apenas 1 pixel, em CRTs causam flicker

•  As cores na TV resultam diferente do que no PC, testar em várias TVs

•  Usar cores bem contrastadas para melhorar a legibilidade

•  Verificar que os itens são facilmente acessíveis com um telecomando

Especial para o Concurso

•  EPG •  http://services.sapo.pt/Metadata/Service/EPG

•  GetChannelByDateInterval •  GetChannelDetail •  GetChannelList •  GetChannelListByDateInterval •  GetMeoChannelListByCommercialOfferId •  GetMeoCommercialOffers •  GetProgramById •  GetProgramListByChannelDateInterval

Obrigado

Aplicações Web TV no Meo

Technology

Transcript of Aplicações Web TV no Meo