aplicações web tv no meo
TRANSCRIPT
![Page 1: Aplicações Web TV no Meo](https://reader035.vdocuments.site/reader035/viewer/2022081800/5568a4c1d8b42a4c378b474e/html5/thumbnails/1.jpg)
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
![Page 2: Aplicações Web TV no Meo](https://reader035.vdocuments.site/reader035/viewer/2022081800/5568a4c1d8b42a4c378b474e/html5/thumbnails/2.jpg)
Plataforma do Meo
![Page 3: Aplicações Web TV no Meo](https://reader035.vdocuments.site/reader035/viewer/2022081800/5568a4c1d8b42a4c378b474e/html5/thumbnails/3.jpg)
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
![Page 4: Aplicações Web TV no Meo](https://reader035.vdocuments.site/reader035/viewer/2022081800/5568a4c1d8b42a4c378b474e/html5/thumbnails/4.jpg)
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
![Page 5: Aplicações Web TV no Meo](https://reader035.vdocuments.site/reader035/viewer/2022081800/5568a4c1d8b42a4c378b474e/html5/thumbnails/5.jpg)
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)
![Page 6: Aplicações Web TV no Meo](https://reader035.vdocuments.site/reader035/viewer/2022081800/5568a4c1d8b42a4c378b474e/html5/thumbnails/6.jpg)
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
![Page 7: Aplicações Web TV no Meo](https://reader035.vdocuments.site/reader035/viewer/2022081800/5568a4c1d8b42a4c378b474e/html5/thumbnails/7.jpg)
Input
• O input é feito unicamente através de um telecomando
<body onkeypress="onRemoteEvent(window.event.keyCode)"> </body>
function onRemoteEvent(keyChar) { switch (keyChar) { case 0x30: …. } }
![Page 8: Aplicações Web TV no Meo](https://reader035.vdocuments.site/reader035/viewer/2022081800/5568a4c1d8b42a4c378b474e/html5/thumbnails/8.jpg)
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
![Page 9: Aplicações Web TV no Meo](https://reader035.vdocuments.site/reader035/viewer/2022081800/5568a4c1d8b42a4c378b474e/html5/thumbnails/9.jpg)
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
![Page 10: Aplicações Web TV no Meo](https://reader035.vdocuments.site/reader035/viewer/2022081800/5568a4c1d8b42a4c378b474e/html5/thumbnails/10.jpg)
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);
}
![Page 11: Aplicações Web TV no Meo](https://reader035.vdocuments.site/reader035/viewer/2022081800/5568a4c1d8b42a4c378b474e/html5/thumbnails/11.jpg)
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
![Page 12: Aplicações Web TV no Meo](https://reader035.vdocuments.site/reader035/viewer/2022081800/5568a4c1d8b42a4c378b474e/html5/thumbnails/12.jpg)
Especial para o Concurso
• EPG • http://services.sapo.pt/Metadata/Service/EPG
• GetChannelByDateInterval • GetChannelDetail • GetChannelList • GetChannelListByDateInterval • GetMeoChannelListByCommercialOfferId • GetMeoCommercialOffers • GetProgramById • GetProgramListByChannelDateInterval
![Page 13: Aplicações Web TV no Meo](https://reader035.vdocuments.site/reader035/viewer/2022081800/5568a4c1d8b42a4c378b474e/html5/thumbnails/13.jpg)
![Page 14: Aplicações Web TV no Meo](https://reader035.vdocuments.site/reader035/viewer/2022081800/5568a4c1d8b42a4c378b474e/html5/thumbnails/14.jpg)
![Page 15: Aplicações Web TV no Meo](https://reader035.vdocuments.site/reader035/viewer/2022081800/5568a4c1d8b42a4c378b474e/html5/thumbnails/15.jpg)
Q&A
![Page 16: Aplicações Web TV no Meo](https://reader035.vdocuments.site/reader035/viewer/2022081800/5568a4c1d8b42a4c378b474e/html5/thumbnails/16.jpg)
Obrigado