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.

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” 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=\"width:854px; height: 480px;\"> •  <html class=\"tvWide\"> •  .tvWide { width: 854px; height: 480px; } •  window.external.pageColor = hexValue | colorString;

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

Q&A

Obrigado

Aplicações Web TV no Meo

0 comments

Notes on slide 1

Favorites, Groups & Events