About some little projects

Mudando o Blog

Pessoal, mudei o blog para meu próprio domínio: http://rafaelsart.com

Ou seja, agora podemos acessar o blog em http://blog.rafaelsart.com, mudei também o layout!

Espero vocês lá! ;D

Hope you enjoy! 😀

Creativity

A few months ago I found on the internet a really good site. His name is TED and his motto is “Ideas worth spreading”.

I learned a lot from his talks and so I’m sharing with you putting one here that I enjoyed on education and creativity.

The talker is Ken Robinson. According to Wikipedia Sir Ken Robinson is an author, speaker, and international advisor on education in the arts to government, non-profits, education, and arts bodies. He was Director of The Arts in Schools Project (1985–89), Professor of Arts Education at the University of Warnick (1989–2001), and was knighted in 2003 for services to education.

https://ted.com/talks/view/id/66

To watch with subtitles click play, then just choose your language on the bottom of video player above.

Hope you enjoy! 😀

Os esboços a seguir (desenhados no Paint) mostram novas ideias que pretendo colocar no projeto Janelas Virtuais do ICMC – USP.

Esboço 1 ~ Janelas Virtuais


Esboço 2 ~ Janelas Virtuais

A ideia principal desse layout é a possibilidade de as pessoas pararem na frente da tela e conseguirem mexer no conteúdo a partir de um mouse, touchpad ou tocando na tela, no caso de ser uma TV TouchScreen.

Será possível então parar por uns instantes a timeline, selecionar uma imagem ou um vídeo para ver em tela cheia (no espaço Widget Respectivo), clicar em uma das abas (Eventos, Rede Social … ) e ter mais tempo para ver seu conteúdo.

Pontos relevantes:

  • Logotipos: Logotipo do Janelas Virtuais, do ICMC, da USP e do projeto inicial TelaSocial.
  • Frase: ficaria na parte de cima da Tela. Poderia ser trocada pelo Twitter e normalmente traria alguma ideia social.
  • Relógio.
  • Painel: área onde será mostrado o widget (de Eventos, Rede Social …) em questão.
  • Destaques: uma aba que pode ser ativada/”encolhida” pelo clique do mouse. Ela poderá mostrar informações importantes que o ICMC desejar passar ou ainda, top fotos/vídeos/tweets da tela.
  • Timeline: ocupando pouco espaço na tela; o widget mostrado no painel depende da posição dela.
  • Abas: Podem ser ativadas/encolhidas com o clique. No caso da abas como Eventos, Rede Social e Notícias: clicando nela a timeline voltaria pra posição dela; clicando em abas como Vídeos e Imagens/Fotos: a aba subiria possibilitando a escolha de um vídeo (ou foto) em uma lista, como mostrado no esboço 2.

Fiz esses desenhos na expectativa de iniciar um brainstorming com o grupo de trabalho do Janelas Virtuais, TelaSocial e agora disponibilizando no blog com todos vocês que estão vendo isso. Ou seja, seria legal receber sugestões e críticas de vocês! Isso que fiz é só um esboço (senão seria mais detalhado e com efeitos), o que será colocado na tela vai depender das opiniões que nos mandarem.

I hope you like it. 😀

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):

https://github.com/taboca/TelaSocial/blob/master/xulrunner/base/chrome/tagvisor/content/visor/org/icmc-rafael/maintest/main.js

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. 😀

Alternativos

Este é o primeiro post da categoria “Alternative”, e vou usá-lo para explicar o que vai ter aqui.

Nessa categoria irei colocar alguns passatempos que acho legal guardar. Espero conservar esse blog por um bom tempo, então criei esssa parte para se diferenciar da “Computing” (onde serão colocados trabalhos voltados à computação).

That’s all.

I hope you like it! 😀

Olá mundo!

Estou criando este blog para postar alguns pequenos projetos que faço ou contribuo.

Na maioria das vezes imagino que colocarei projetos relacionados à computação, principalmente à Web. Mas, estarei postando também coisas que vêm à mente e que muitas vezes nem fazem sentido.

Ou seja, esse é um repositório onde colocarei coisas que faço por gostar ou simplesmente porque fazem parte de mim.

That’s all.

I hope you like it. 😀