http://telasocial.com/p/d/get-ted-pt-br/

Permalink | Leave a comment  »

http://taboca.github.com/TagVisor/

Permalink | Leave a comment  »

TabocaTelaSocialTimelinefor2years-3.pdf Download this file

This is a 2 year timeline taken from our blog site. It’s here and it serves as a mark so we can better move on ( as in betterness [1] ) and we can explain our history to investors ( everyone that is interested in the project and not only the folks using money but also whoever supports with code, time and attention, feedbak, or even listening/watching us .) February 14 is the date of our first blog post and not the actual initial date.

Phase Zero started in 2009 with an idea. I remember a few meetings with my friend Chris ( Hofmann @ Mozilla ) and our brainstorming activities about these and other related ideas. At the time I had a lot of ideas and demos and some early prototypes using Mozilla XULRunner technology so that was seed for discussions and growth. I also presented this project when I was invited to a Mozilla event in Chile, among with other contributions to Mozilla.

It’s difficult to measure when the project was really born but I remember clearly the initial case, or wish. I wanted to have a LED-based panel to display messages, in english language, at the location where I studied Computer Science — ICMC in Brazil. This was my alumni wish and it came out this way because I love english language and I always wanted something where students could explore their visual space ( think the university physical state ) and to help others to learn. And learning via doing and learning yet having fun is something I am truly passionate and will continue to work every next day in my life. So this was phase zero and I am proud that it started with an use case in a school and it had to do with learning and languages and that it was towards the idea of cultural exchange.

Phase one was 2010 and 2011 and many contributed with the project. From folks I hired to many others that accepted these challenges. Their names appear in many of the events in the past two year attachment document. This is now our 3rd year and we have a lot to achieve and to learn.

Some of the key areas for 2012 are:

• Better position as a system and project to allow participants to have a voice at their local communities; TelaSocial has to be stronger as a tool for participation;

• Better position as a system and project to allow participants to interact in new ways so they can have fun while learning and improving their social environments; TelaSocial has to be stronger as a tool for education; 

And we plan to achieve this with ( yet to be polished and revisited ) some actions:

• Enter in communities, beyond universities ( which was our original scenario), to disrupt their environment in positive ways. And to connect people with cultures from other countries or local catalysts willing to help them to learn and to have a voice;

• Provide and interaction framework for creative development; We believe that everyone can be an author and that they can learn via doing, via providing a guide and an example and framework to others. We believe that an input, from a user, can be available to others as a map to follow, and that a creation should be acessible and shared;

• Continue to develop relationships with universities, government, and private organizations; help them to create participatory experiences at their locations and prepare them to the days that are yet to come where every single public space can be a place with honest ( as in transparent ) discussions and where creative input contributes to the locality in first place then to remote social environment.

[1] http://hbr.org/product/betterness-economics-for-humans/an/11135-PDF-ENG

Permalink | Leave a comment  »

See the full gallery on Posterous

Permalink | Leave a comment  »

Este vídeo representa resultados iniciais do projeto de experimentação e testes com interfaces de interação. A ideia deste projeto é uma solução de baixo custo que permite um mínimo de interação do usuário — no caso trata-se do movimento com a mão para direita ou para a esquerda. A tecnologia, prototipada com auxílio de Fiozera(.com) em parceria com TelaSocial/Taboca Labs, foi elaborada para fins educacionais e para testes. Esta conta com uso de emissores de infra-vermelho e um projeto baseado no Arduino com código aberto. O projeto foi elaborado como parte de protótipos e interfaces de toque em trabalho conjunto com o grupo de comunicação da Fundação PTI ( Fundação Parque Tecnológico de Itaipu ) e também se relaciona com projeto anterior do uso da tecnologia TelaSocial no Latinoware 2011 [3]. Para maiores informações sobre o protótipo consulte:

[1] http://blog.telasocial.com/experimentacao-com-interacao-e-toque

[2] http://www.fiozera.com.br/blog/?p=213

[3] http://blog.telasocial.com/telasocial-latinoware-2011

Permalink | Leave a comment  »

Scenario 1: Repurposing a feed:

Cached and Resized Images

This use case refers to a client ( web social kiosk ) that wants to display a number of pictures associated with a given feed — think a flickr feed with URLs to some images. The client app wants to display smaller version for each of the images ( so that it fits to a TV screen ) and it also does not want to reload the images from the network for every feed request initiated by the client. It only needs the resized images or new fetched and resized images when a new URL is found in the remote feed.

The proposed architecture is a means to repurpose remote feeds and it's done via the mediator using a local channel ( a localhost URL for the feed and pointers to local images.)  In this case, a configuration rule script should define associated operation to the feed as the following example shows: 

{
  "channel":"flickrresized",
  "timer": "30000",
  "function":"cacheandresize",
  "url":"http://api.flickr.com/services/feeds/photos_public.gne?tags=flower&lang=pt-br&format="
}

Permalink | Leave a comment  »

Geral — Receita :
 
* Account no Github
* Colocar chave pública ( a partir das chaves criadas ) no github ( account settings )
* Criar um repositório com o GIT ( ter GIT no seu computador ), repositório local
* Criar um repositório no github.com 
* Associar o seu repositório local com o que você criou no GitHub.com
* Identificar a URL tipo pública do seu repositório, no github https://taboca@github.com/taboca/TestEducational.git e colocar em um novo projeto no build.phonegap.com 
* gerar

No linux, se for Ubuntu

apt-get install git-core

Identifique a aplicação exemplo do PhoneGap ( PhoneGap-start )
página abaixo:

Uma vez que tem o git instalado, faça um git clone do endereço do github:
Você pode utilizar o endereço, acima, HTTP ou Git Read Only: copiar tudo

git clone <endereço completo tipo https:// ou git:// . Observe que abaixo eu utilizei o protocolo git://

O repositório será baixado. Depois edite o arquivo config.xml e coloque o nome da sua aplicação dentro.

Okay, guarde isto. É somente um diretório com os exemplos.

Volte para o GIT e crie um novo repositório, crie um público de início, mais fácil.

Complete:

Siga os passos abaixo que o github.com irá lhe informar como criar um novo repositório local no seu computador. Observe que isto tudo é um novo diretório que não é relacionado com o diretório que fizemos anteriormente. O que foi feito anteriormente é do tipo “reserve”. Ou seja, volte um diretório ou ache um outro local no seu computador local e siga as instruções abaixo:

A última linha vai dar problema — git push -u origin master. Isto é porque você pode ainda não ter a chave pública no github. Se este for o caso, então volte para o seu shell e faça a chave:

A chave será instalada em algum local no computador conforme indicado pelo programa ssh-keygen ( ou outro se você estiver utilizando outro ). Copiar o conteúdo da chave para o GIthub.com  ( dá pública “.pub” ):

O campo para copiar, no github.com, fica em Account -> Settings

Tentar executar o último comando:

Se subir é porque funcionou. Daí agora vamos copiar aqueles arquivos ( baixados do repositório Getting Started no passo anterior inicial ) para o seu novo repositório local. Faça cd no outro diretório ( phoegap-start ) e apague o sub-diretório .git que é um sub-diretório escondido:

Vá para o seu ( diretório local recem criado, seu projeto e copie o conteúdo do phonegap-start para ele.

Adicione os arquivos formalmente no repositório local e faça commit:

Envie para o remoto, seu repositório:

De volta no github.com, clicar em continuar:

O que irá lhe mostrar a página e endereços git:// https:// do seu projeto:

Idenfique a linha URL do repositório: faça copy and paste.

Volte para o build.phonegap.com, criar nova app e coloque a linha lá. Mas ajuste caso a linha acima for como a minha que tem taboca@. Isso está assim porque eu estava logado no Github. Se sim, tire o seuusuario@:

Clicar criar:

Quando os códigos QR estiverem na página você poderá instalar tirando uma foto no celular se você tem aplicação de QRCode.

Permalink | Leave a comment  »

Esta é uma nota técnica em relação as telas de toque que apresenta soluções que existem no mundo e no final uma proposta de um caso de uso para o TelaSocial.

As telas de toque são sistemas que geralmente vão acoplados em painéis tipo TV ou telões. Atualmente,  os tabletes e smartphones possuem telas de toque do tipo multitouch,  que permitem novos tipos de experiências, tais como o movimento de "esticar" uma figura. O vídeo abaixo mostra um exemplo com uma tela multitouch com suporte via software no Windows,  e uma aplicação de desenho, que aceita vários pontos de toque ao mesmo tempo:

Visão geral das tecnologias

Telas sensíveis ao toque capacitivas

É a tecnologia encontrada em notebooks modernos, smartphones ou tabletes e é chamado em inglês capacitive touch screen. Neste caso, um sistema calcula a posição do toque porque o corpo humano carrega eletricidade alterando a capacitância na película que conduz eletricidade instalada na frente do painel. Esta tecnologia permite a identificação de vários pontos ( telas de múltiplos toques ao mesmo tempo ) mas não recebe sinal se o ponto de contato não conduzir eletricidade, ou seja, um usuário com uma luva ou um dedo engordurado pode ter uma experiência prejudicada ( não vai funcionar ).

Telas sensíveis ao toque resistivas

Dispositivos antigos, como os primeiros palm, utilizavam desta tecnologia. Basicamente, existem duas películas que estão separadas por um espaço. Quando um objeto físico pressiona um ponto, as camadas se tocam, e então ocorrem medições, uma para o eixo X, e a outra para o eixo Y. Com este tipo de tecnologia, é difícil medir vários pontos. O ponto positivo é que pode-se pressionar com qualquer objeto.

Tecnologia infra-vermelho

Esta é uma das tecnologias mais antigas e tem um funcionamento bom para toque simples ou multi-toque. Existem vários sensores que são colocados ao longo do frame ( aparato físico como uma moldura de quadro ) do painel e também emissores de luz infra-vermelho. Por se tratar de uma matrix, uma vez que o dedo ( ou qualquer objeto ) faz o bloqueio da luz, sabe-se então a posição do elemento por estes sensores terem sido fisicamente colocados nos eixos X e Y do frame.

Busca de Novas Soluções e Casos de Uso

As tecnologias acima são as mais tradicionais, porém, existem várias outras. A Samsung, por exemplo, tem um aparelho de TV moderno, que traz uma tecnologia chamada PixelSense [3], que é baseada na ideia de sensores óticos. Assim, estes estão implantados no nível dos pixels da TV, o que lhe permite não somente capturar a posição de objetos como também suas imagens.

Algumas ideias relacionadas com este tipo de solução podem ser encontradas em projetos que fazem uso de webcams para detectar onde o dedo tocou em uma tela de acrílico ou outros materiais.

Alguns projetos se baseiam em TIR ( total internal reflection ) [4] e simplesmente fazem a detecção do dedo uma vez que este desvia parte da luz que passa pelo material de acrílico. Este esquema é referido como FTIR ( Frustrated Total Internal Reflection ) [5].

Caso de Uso: Intervenção Individual vs Social

É importante observar que atualmente o sistema TelaSocial oferece interação mas através de meios indiretos, via Web, utilizando-se de feeds ( canais como RSS, Atom, JSON etc ). No entanto, existem casos que pedem interação física dos usuários nas telas. Neste sentido ocorre a busca pelo entendimento do que é uma experiência híbrida com interação via toque, para provavelmente um ou poucos humanos, e ainda a continuidade da interação remota, indireta, via web. É importante ainda observar que o usuário, quando fisicamente tocando na tela, está bloqueando a visão dela.

A figura abaixo mostra o caso A, com interação remota indireta, versus um cenário B onde um único usuário foi fisicamente para a frente da tela.

O caso de uso pode ser válido em alguns ambientes e deve ser medido para se entender os benefícios da experiência.

Proposta Áreas Sensíveis ( Hot Areas )

Uma proposta de implementação deste caso de uso trata-se de um modelo híbrido, ou seja, que o sistema fique em modo "piloto automático", e quando um usuário colocar o dedo em algumas áreas da tela, a experiência fica temporariamente controlada. Isso pode ser uma experiência de interação limitada que depende do tipo de conteúdo, ou seja, não seria uma navegação livre na web. De fato acabaria sendo uma experiência individual que é compatível com o tema geral do painel — o painel faz a governança das áreas "clicáveis".

Visão geral do frame de captura de "hot areas" de interação. Imagine uma grande tela que tem uma área em baixo que apresenta a imagem de um botão.

See the full gallery on Posterous

Proposta Projeto Implementação:

Painel de Baixo Custo de Toque — hot áreas

As fuguras abaixo apresentam a visão inicial do sistema e como que a comunicação com o TelaSocial será feita. Um frame, estrutura do tamanho da TV, deverá ser colocado na frente do painel e deverá conter sensores e emissores de luz infra-vermelho. A mão do usuário deverá cortar os feixes de luz permitindo que o sistema eletrônico possa informar o sistema no PC ( Linux ) que deverá oferecer a informação via sockets. 

See the full gallery on Posterous

Referências

Este artigo é continuação do artigo Interação Parte 1.

[1] http://en.wikipedia.org/wiki/Touchscreen

[2] http://www.gizmodo.com.br/conteudo/giz-explica-magica-por-tras-das-telas-sens...

[3] http://www.slashgear.com/samsung-pixelsense-lcd-multitouch-displays-hit-mass-...

[4] http://en.wikipedia.org/wiki/Total_Internal_Reflection

[5] http://lowres.ch/ftir/

Permalink | Leave a comment  »

First version prototype 0.1:  

The Mediator [1] is a NodeJS-based application that works to support TelaSocial run-time environment. The Mediator was initially created to keep a means to serve remote feeds ( content avaialable via RSS, Atom, and more ) using a middleware server. The original code was created as a solution to allow multiple clients to to load feed content from external sites. The network scenario was the following:

• a) 12 web-based kiosks installed with access to a specific subnet without full internet access
• b) Another server, available in the same subnet, was able to access content from the internet.

So the Mediator app was placed in b) server and it used a rules configuration [2] file to fetch remote content ( RSS, Atom, etc ) and keep it locally in the server. When a given client app, a kiosk, requested data, then it served from the disk via HTTP.

Proposal to update 0.2:

In the above scenario the application was running in a separated server. For 0.2, the ideia is to run this application in the same computer that runs TelaSocial client — so it will work as a run-time engine to support the client app. It will maintain persistent information about remote channels and also can be used as a means modify and perform some configuration in each client. The following features are planned to the release 0.2:

• Cache and Proxy Component: we continue to keep the channel concept, which means we maintain a cycle of fetches from the Web, using HTTP, specifically for RSS, Atom and other data formats, and we maintain in the local disk ( persistence of feeds ) however we want to do a better job related to how to keep the logs. As an example we want to know if the remote feed was available and we may also think about alternate actions in case a certain feed is not available. We maintain the idea of the rules configuration [2] file;

• Cache and Proxy Component: Functional Resize HTTP Image component: we need to design a solution to be able to use the Mediator as a proxy tool to retrieve images to the client. So, for example, when the client requests a given image, it may decide to go via this component so the image is adequate to the client;
• UI to access logs: we neep some sort of UI to see what is going on in terms of all the files served and also loaded from the network;
• Client Process component: Today this functional aspect is covered by a Python code. We are considering bringing this function to the actual NodeJS-based code, the Mediator component. So to check if the client software ( TelaSocial XULRunner-based app ) is running and its memory footprint usage and we may act depending on conditions, for example, if the process is dead ( which also is our solution for first time boot ) or when memory usage goes higher of certain amount;
• Log for process management: log everything, how many crashes, system boots, and more if there is more important things to log;

[1] https://github.com/taboca/TelaSocial-Mediator

[2] https://github.com/taboca/TelaSocial-Mediator/blob/master/config.json

[3] TelaSocial - Powered by Mozilla kiosk www.telasocial.com

Permalink | Leave a comment  »

* Documentação básica, passos, de como instalar a infra básica para desenvolvimento de aplicações em Arduino
* Documentação básica, exemplo de aplicação em Arduino para piscar LEDs
* Documentação básica, de infra para comunicação entre Arduino e Android via MicroBridge
* Documentação básica, de exemplo de aplicação no Android ligando e desligando um LED no Arduino via MicroBridge
* Documentação básica, com exemplo de aplicação via ADK com Arduino

See the full gallery on Posterous

Permalink | Leave a comment  »

TabocaTelaSocialDocAndroidSDKeEclipse.pdf Download this file

Versão HTML em http://www.telasocial.com/p/d/android-basico.html e disponibilizado em Creative Commons 3.0 Atribuição.

Permalink | Leave a comment  »

TabocaTelaSocialPositionTelasocialDistro(5).pdf Download this file

São Carlos, 16 de Dezembro de 2011 — Posição: Linux Customizer - Build Master for TelaSocial

Permalink | Leave a comment  »

Permalink | Leave a comment  »

TabocaTelaSocialProjetoTechnologyEvangelistContestMaster.pdf Download this file

Permalink | Leave a comment  »

TabocaTelaSocialPositioninteractionopencvcamgestures(2).pdf Download this file

Se você é um programador Web com conhecimentos e interesse em C++ e computação gráfica — oportunidade de projeto open-source para repositório / projeto TelaSocial. Trata-se de aplicação para captura de movimentos e que deverá gerar eventos para controlar vários aspectos, relacionados com animação e coreografia de eventos, na experiência do TelaSocial.

Permalink | Leave a comment  »

Nos dias 19, 20 e 21 de Outubro de 2011,  a tecnologia do TelaSocial esteve presente em mais um evento de porte internacional. Desta vez, a solução do TelaSocial teve o papel de dar suporte para a  comunicação da Latinoware, evento que acontece no Parque Tecnológico Itaipu, em Foz do Iguaçu, no Paraná.

Os mais de 4000 participantes puderam conferir uma experiência em 12 terminais que foram instalados na frente de várias salas no espaço do evento. O objetivo inicial foi de apresentação da grade de programação. Porém, em um evento de porte internacional como este, a grade de programação pode sofrer mudanças baseadas em diversos fatores, como a logística de voos de chegada de palestrantes. Neste sentido, a grade  passa a ser fundamental, uma vez que a versão em papel pode ficar atrasada. Outros recursos, como os alertas e a repercussão da rede social, também foram inseridos nos terminais para que os participantes pudessem conferir em tempo real os principais acontecimentos.

Vídeo "Making Of" Versão

Dentro do evento, cada espaço de salas possuía um terminal. O investimento realizado pelo Parque Tecnológico de Itaipu viabilizou alterações no layout e em novos módulos do software possibilitando ainda a adição de um novo componente, chamado de Mediador.

              Figura 1: disposição das telas na entrada das salas de palestras.

O Mediador é uma camada de informações que trabalha em um ambiente servidor. Essa camada fica responsável por conferir atualizações de feeds e RSS baixando-as para seu ambiente local e, posteriormente, replicando para todas as instalações “clientes”. Desta forma, problemas de conexão com a internet não irão causar falhas na atualização nos terminais, pois os mesmos receberão informações diretamente do servidor. No caso do evento, como o seu atual sistema de controle de conteúdos, não estava disponível em formato RSS; algumas das atualizações foram adicionadas diretamente no Mediador pela equipe de suporte do TelaSocial para a organização do evento. Este componente mediador, que recebia as informações da equipe, foi responsável pela manutenção e fornecimento dos dados para os  vários terminais. Isso também evita que o sistema de informação fique engessado, caso o feed ou RSS tenha algum problema durante o evento.

Figura 2: representação da arquitetura do Mediador

O sistema de alertas em tempo real, além da sua utilização primária para avisos de atrasos, cancelamentos e imprevistos, auxiliou na resolução de uma das maiores dificuldades encontradas na Latinoware: a agenda de eventos paralelos. Esta agenda, ao contrário da grade principal, não ficou totalmente completa e fechada desde o início da Latinoware. Assim, muitas alterações ocorrem na ordem desses eventos paralelos durante os dias de programação. Além de usar o espaço destinado à agenda secundária, foi possível notificar os participantes sobre essas alterações utilizando o campo de alertas, impedindo, assim, que as pessoas ficassem sem saber o que estava acontecendo no evento. Empresas que estavam expondo seus produtos e serviços no local também utilizaram o sistema de alertas como meio de divulgação de suas promoções.

Outro recurso do TelaSocial que estava em ação na Latinoware era o componente de redes sociais. Esse módulo monitorava as hashtags “Latinoware2011” e “Latinoware” no Twitter, trazendo todos os tuítes que possuíam esta marcação para as telas dispostas dentro do evento, aproximando os ambientes físicos dos ambientes virtuais, mostrando para quem estava fisicamente presente no evento qual a repercussão das atrações da Latinoware na web.

O suporte técnico da equipe TelaSocial foi prestado localmente durante todo o evento. O suporte técnico, neste caso, elaborou atualizações em novos recursos e também contava com rádios para comunicação rápida, utilizados, inclusive, para adicionar conteúdos repassados pela equipe de organização, quando necessário.

A experiência do uso do TelaSocial como veículo de comunicação foi extremamente proveitosa. O trabalho realizado com um grande número de telas mostrou que o TelaSocial pode ser usado como um meio de comunicação dinâmico e adaptável à diversos eventos. O projeto dos painéis na Latinoware teve a preocupação de deixar todo o investimento, quanto a mudanças em código e novos módulos, disponível para a comunidade, excetuando-se as marcas e nomes de produtos. O código-fonte está disponível sob os termos da licença “MPL 1.1/GPL 2.0/LGPL 2.1”, no endereço https://github.com/taboca/TelaSocial-Mediator.

Permalink | Leave a comment  »

w3c-submitted-pt-br.pdf Download this file

Um Modelo Baseado em Padrões Web para Apresentação de Conteúdo Interativo em Ambientes Sociais

Paper e projeto apresentado na programação da 3ª Conferência W3C Brasil [1] organizada por W3C e Nic.br.  

Resumo

A crescente disponibilidade de painéis digitais oferece novas oportunidades com relação as soluções de apresentação de conteúdo nos ambientes físicos nas comunidades. Com as melhorias de conectividade na Internet e a constante evolução das tecnologias que dão suporte aos padrões Web, novos desafios de interação usuário-computador podem ser explorados. Nesse contexto, o projeto aborda as possibilidades de uso de padrões e tecnologias Web, como infra-estrutura para uma experiência de comunicação e interação em ambientes físicos. Propõe-se um modelo de programação que seja aberto, distribuído, e que reflete a natureza dinâmica da Web, em contraposição ao modelo centralizado de programação tradicional, como da televisão. O projeto aborda novas oportunidades de comunicação que relacionam eventos de informações da Web, visando benefícios aos usuários nas comunidades.

[1] http://conferenciaweb.w3c.br/programacao

Permalink | Leave a comment  »

See the full gallery on Posterous

Permalink | Leave a comment  »

See the full gallery on Posterous

Permalink | Leave a comment  »

See the full gallery on Posterous

Permalink | Leave a comment  »