Tuesday, December 2, 2008




             Aplicações Web+TV no Meo
                                  > Bernardo Cardoso <...
Plataforma do Meo
Browser XHTML

•  Standards Suportados pelo Browser Mediaroom
  •    X-HTML 1.0 Strict
  •    CSS1.0, CSS 2.1
  •    ECMAS...
Add-ons
•  Scaled Video, Mosaicos, PIPs, Windows Media

<a id=quot;tvquot; class=quot;tilequot; href=quot;tune:1quot; acce...
Resoluções

•  Browser suporta basicamente 640x480 (4:3) e
   854x480 (16:9) e faz uma adaptação “best fit”


            ...
Resoluções
•  A informação do modo do cliente vai numa
   header
 Modo do cliente         Header 
 SD
4:3
                ...
Input
•  O input é feito unicamente através de um
   telecomando

   <body onkeypress=quot;onRemoteEvent(window.event.keyC...
Dicas para o Browser

•  Verificar que todas as páginas são XHTML válido
   •  http://validator.w3.org/

•  Usar posiciona...
Dicas para o Browser

•  Em ECMAScript não iterar no DOM
   repetidamente, guardar referências para os
   objectos encontr...
Dicas para o Browser
<object id=quot;loadAreaquot; type=quot;text/htmlquot; data=“dados.html”>
</object>


domElement.styl...
Dicas para TV

•  As televisões CRT, Plasmas e LCDs fazem overscan e
   cortam parte da imagem, deixar margem de segurança...
Especial para o Concurso

•  EPG
  •  http://services.sapo.pt/Metadata/Service/EPG

  •    GetChannelByDateInterval
  •   ...
Q&A
Obrigado
Aplicações Web TV no Meo
Aplicações Web TV no Meo
Próximos SlideShares
Carregando em…5
×

Aplicações Web TV no Meo

2.279 visualizações

Publicada em

Publicada em: Tecnologia
0 comentários
0 gostaram
Estatísticas
Notas
  • Seja o primeiro a comentar

  • Seja a primeira pessoa a gostar disto

Sem downloads
Visualizações
Visualizações totais
2.279
No SlideShare
0
A partir de incorporações
0
Número de incorporações
136
Ações
Compartilhamentos
0
Downloads
20
Comentários
0
Gostaram
0
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

Aplicações Web TV no Meo

  1. 1. 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.
  2. 2. Plataforma do Meo
  3. 3. 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
  4. 4. 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
  5. 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. 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. 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. 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. 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. 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. 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
  12. 12. Especial para o Concurso •  EPG •  http://services.sapo.pt/Metadata/Service/EPG •  GetChannelByDateInterval •  GetChannelDetail •  GetChannelList •  GetChannelListByDateInterval •  GetMeoChannelListByCommercialOfferId •  GetMeoCommercialOffers •  GetProgramById •  GetProgramListByChannelDateInterval
  13. 13. Q&A
  14. 14. Obrigado

×