O documento fornece diretrizes para o desenvolvimento de aplicações web para a plataforma Meo, incluindo padrões suportados pelo navegador, formatos de imagem, recursos adicionais, resoluções, entrada do usuário e dicas de desempenho. Também fornece detalhes sobre a API EPG e serviços relacionados.
5. 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
6. 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;
7. 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:
….
}
}
8. 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
9. 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
10. Dicas para o Browser
<object id=quot;loadAreaquot; type=quot;text/htmlquot; data=“dados.html”>
</object>
domElement.style = quot;font: 12px; background-color: bluequot;;
domElement.setAttribute(quot;stylequot;, quot;font: 12px; background-color: bluequot;);
domElement.style.fontSize = quot;12pxquot;;
domElement.style.backgroundColor = quot;bluequot;;
domElement.class = quot;readquot;;
.innerText; .innerHTML
function AppendText(element, textToAdd)
{
var p = document.createElement(quot;pquot;);
p.appendChild(document.createTextNode(textToAdd + quot; quot;));
element.appendChild(p);
}
11. 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