aplicações web tv no meo
TRANSCRIPT
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
Q&A
Obrigado