Aplicações Web+TV no Meo

Tuesday, December 2, 2008

Aplicações Web+TV no Meo
> Bernardo Cardoso <
IAD3 – Televisão digital e serviços IPTV

Portugal Telecom Inovação, S.A.

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=quot;tvquot; class=quot;tilequot; href=quot;tune:1quot; accesskey=quot;1quot;>
<object class=quot;tvquot; type=quot;video/x-ms-iptvquot;>
<param name=quot;urlquot; value=quot;tune:1quot; />
<param name=quot;ispipquot; value=quot;0quot; />
<img src=quot;tv.pngquot; class=quot;tvpngquot;/>
</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”

640x480  748x480  854x480 
(4:3)  (14:9)  (16:9) 

Cliente em 4:3 

Cliente em 16:9

Resoluções
•  A informação do modo do cliente vai numa
header
Modo do cliente Header
SD 4:3  UA‐WindowPixels: 640x480 
SD 16:9  UA‐WindowPixels: 854x480 
720p  UA‐WindowPixels: 854x480 
1080i  UA‐WindowPixels: 854x480 

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

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

•  window.external.pageColor = hexValue | colorString;

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

<body onkeypress=quot;onRemoteEvent(window.event.keyCode)quot;>
</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


•  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 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

Aplicações Web+TV no Meo

Recommandé

Recommandé

Contenu connexe

En vedette

En vedette (20)

Similaire à Aplicações Web+TV no Meo

Similaire à Aplicações Web+TV no Meo (20)

Plus de codebits

Plus de codebits (20)

Aplicações Web+TV no Meo