Tableless

Busca Menu

Desenvolvendo apps para SmartTVs com HTML, CSS e Ajax

Seja o primeiro a comentar por

Hoje em dia, as Smart TVs estão cada vez mais presentes no dia a dia. E muito por isso, gosto de pesquisar e aprender formas de programar sua interface e até criar apps que rodassem em seu ambiente. Nessas pesquisas, descobri que é fácil e simples o desenvolvimento para Smart TV, veja só:

Para criar apps para Smart TV você usará em primeiro lugar HTML, CSS e Ajax/JavaScript.

O modelo que vou usar será o da Samsung (que é a TV que mais tem suporte para o desenvolvimento). Você usará Eclipse para criação de suas apps e baixará o SDK no próprio site da Samsung Developers.

A instalação do SDK e dos emuladores para Smart TVs é bem fácil, mas você precisa ter a máquina virtual Java em seu PC.

Iniciando

Execute o Eclipse como administrador para facilitar a execução do emulador quando você rodar o app..

imagem0

quando o Eclipse estiver aberto você irá em File > New > Project para criar um novo projeto.

imagem00

Ai então você vai selecionar a opção de “Samsung Smart TV JavaScript App Project” porque essa opção permite que você crie apps com Ajax(Javacript) para o comportamento de sua app e CSS + HTML para interface.

imagem 03

Em seguida dê nome para sua app, e escolha a resolução da tela.

imagem04

Pronto, se conseguiu fazer tudo direitinho você já pode começar a desenvolver sua app, no lado esquerdo você irá se deparar com as seguintes pastas, essas pastas são responsáveis pela organização do conteúdo de sua app, as mais importantes são “app” e “index.html”.

imagem05

Na pasta “app” ficam as pastas “stylesheets” e “javascript” com os arquivos “Main.css” e “Main.js” respectivamente. Em Main.css fica o conteúdo de CSS da app (responsável pelo estilo da app) e em Main.js fica o desenvolvimento lógico (programação) do comportamento da app, onde você usa Ajax para definir as ações da app, e em “index.html” fica os componentes em html para você dar vida a sua app. Na pasta icon é onde você armazena os ícones usados.

imagem06

Então vamos a nossa demo básica: dê um duplo clique em “index.html”. Insira seu código HTML nesse local. Vamos dar um “Hello World” apenas, somente para que vocês peguem noção.

imagem07

então nesse trecho insira o seguinte código:

imagem007

<div id="label">
  <h1>Olá, esse é meu 1º artigo no Tableless!!</h1>
</div>

Então você vai dar um duplo clique no arquivo Main.css para estilizar a escrita, e inserir o seguinte trecho:

#texto{
  width: 500px;
  heightt: 300px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -150px;
  margin-left: -250px;
  color: #fff;
}

(você usa a #label para pegar os elementos html e manipula-los com CSS)

imagem008

10º Feito isso agora você irá salvar e executar, com o botão direito você clica na pasta raiz do projeto e segue em “Samsung Smart TV SDK” e depois em “Run”.

imagem10

11º Irá levar um tempo se for a primeira vez, mas ao terminar você verá essa tela:

imagem11

Agora você pode usar sua imaginação e criar a App que desejar apenas com HTML, CSS e Ajax, no próximo tutorial irei introduzir como usar Ajax no desenvolvimento da App.

Publicado no dia