Layout vertical
Estou no meio do desenvolvimento de um novo layout para o projeto Janelas Virtuais do ICMC – USP.
Janelas Virtuais é como se chama o projeto TelaSocial no ICMC, onde sou um contribuidor bolsista neste projeto através do Programa Aprender com Cultura e Extensão da USP.
O TelaSocial é um projeto open source baseado na infra-estrutura Mozilla (powered by Mozilla) desenvolvido pelo Laboratório Taboca.
Este projeto utiliza TVs modernas (LCD ou LED) colocadas em espaços abertos como comunidades, escolas, aeroportos ou mesmo em lojas, visando a interatividade das pessoas que freqüentam aquele lugar com a Tela. Utilizamos recursos como Twitter, Flickr, RSS de notícias, vídeos, e a partir de tecnologias Web aliadas com padrões abertos (W3C) mostramos esse conteúdo, atualizado dinamicamente, nas telas.
No ICMC – USP existem duas Telas dessas espalhadas pelo Instituto e este post tem como intenção mostrar o novo layout que estou projetando para o Janelas Virtuais. Seguem abaixo imagens de como ele está ficando:
Aba 1
Aba 2
Aba 3
Como pode ser visto, o layout é vertical. Esta verticalização será ainda uma nova experiência no Instituto, assim teremos que inventar um suporte para colocar a TV na vertical (sim, giraremos uma TV de 52”). Porém, o projeto TelaSocial já usou uma versão de tela na vertical, colocarei o vídeo dela aqui para vocês verem a TV na vertical e entenderem como funciona o projeto:
(O vídeo mostra o TelaSocial no FISL – Maior evento de código aberto do Brasil)
Voltando ao layout em questão, nada nele é uma imagem, ele foi desenvolvido apenas com tecnologias Web como Javascript, CSS (e CSS 3), XHTML e DOM. Ressalto que não foram utilizadas tabelas para modelar o layout, ou seja, foi usado o padrão Tableless.
O código está disponível aqui (ainda é não é a versão final):
Apresentando o layout:
- 3 abas – provavelmente ainda iremos mudar o nome delas
- Uma linha do tempo que atravessa a tela em aproximadamente 15 segundos, a linha do tempo atualiza o que está no painel dependendo da localização da bolinha na tela. Por exemplo, se a bolinha estiver abaixo da parte Flickr a parte painel mostrará as fotos do Flickr, se estiver abaixo do Eventos, o painel mostrará os eventos que estão acontecendo e ainda acontecerão no ICMC.
- Uma área que chamo de “painel” (a parte maior), que é onde será apresentada as informações respectivas às abas.
- Como podemos ver, na imagem de legenda “Aba 2”, um widget que captura as palestras de um RSS está sendo apresentado. Esse widget se ajusta automaticamente às dimensões do painel onde decido inserir, e o conteúdo é carregado e atualizado dinamicamente. (não colocarei o código desse widget aqui, pois ele está sofrendo grandes alterações ainda – e esse não é o objetivo desse post).
- Uma área de Destaques, que mostrará em tempo integral coisas como vídeos, imagens ou até mesmo tweets que quisermos destacar.
- Uma área para o widget “clock” no canto inferior esquerdo da Tela.
- Uma área para frases que abordam um tema social e reflexivo no canto inferior direito (em letras brancas).
- Uma área para mostrar o nome do projeto (Janelas Virtuais) – porém, ainda vamos mudar essa parte e em vez de textos, colocaremos os logotipos do Janelas Virtuais e do ICMC.
I hope you like it. 😀
Rafael Sartori 