revista imasters #6

72
o_futuro_é_agora R$24,00 Nós fazemos a Internet no Brasil Maio 2013 / Ano 02 / Edição 06 design de interação Interfaces conceituais, interações reais presença digital Os novos diálogos na era da economia da atenção review Construindo apps para Firefox OS - uma nova experiência

Upload: imasters-redacao

Post on 26-Mar-2016

260 views

Category:

Documents


23 download

DESCRIPTION

O futuro é agora Revista iMasters n.6, Ano 2

TRANSCRIPT

Page 1: Revista iMasters #6

o_futuro_é_agora

R$2

4,00

N

ós fa

zem

os a

Inte

rnet

no

Bra

sil

Mai

o 20

13 /

Ano

02

/ E

diçã

o 06

design de interação

Interfaces conceituais,

interações reais

presença digital

Os novos diálogos na era da economia da

atenção

review

Construindo apps para Firefox

OS - uma nova experiência

Page 2: Revista iMasters #6
Page 3: Revista iMasters #6

Expediente

TIAGO BAETA Publisher

LUIS LEÃO Editor

RINA NORONHA (MTB 2759-ES) Editora/Jornalista Responsável

EDU AGNI Projeto Gráfico / Diagramação

NATHÁLIA TOREZANI Revisão

COLABORADORES Alexandre Borba, Alexandre Gaigalas, Ana Erthal, André Alves Garzia, Bernard de Luna, Camila Porto Camargo, Cezar Taurion, Edu Agni, Gilberto Sudré, João Batista Neto, Kemel Zaidan, Lina Lopes, Lucia Freitas, Luli Radfahrer, Mauro Pichiliani, Pedro Gravena, Reinaldo Ferraz, Vinicius Depizzol, Wagner Marcelo.

ESkENAZI INDúSTRIA GRÁfICA Gráfica

GRUpO ImASTERS Organização

> 1000 exemplares

> ISSN 1981-0288

Alameda Santos, 2395 - 1º andar Cerqueira César, São Paulo/SP CEP: 01419-101 - Brasil

www.imasters.com.br/revista [email protected] Twitter: @iMasters Facebook: /PortaliMasters

Os artigos assinados são de responsabilidade dos autores e não refletem necessariamente a opinião da revista. É proibida a reprodução total ou parcial de textos, fotos e ilustrações, por qualquer meio, sem prévia autorização dos artistas ou do editor da revista.

Page 4: Revista iMasters #6
Page 5: Revista iMasters #6

Editorial Você já se perguntou qual poderá ser a pró-xima revolução tecnológica e como ela vai in-fluenciar as nossas vidas? Tirando todas as es-peculações sobre a dominação das máquinas, o que acho muito importante nessa discussão é que há uma interação entre nós, usuários, e esses aparatos tecnológicos, que por sua vez utilizam metáforas/ideias/conceitos do nosso cotidiano para facilitar o seu uso. Independen-temente da nova tecnologia que surgir, ficam as dúvidas: como vamos utilizá-la? É para tocar ou para falar? Funciona sem fio? Como liga/desliga?

Se pensarmos na história da evolução da com-putação, saímos de uma fase em que tínha-mos uma figura de um computador/assisten-te pessoal, com interface de entrada e saída (além dos “acessórios”) e estamos caminhan-do para aparatos tecnológicos cada vez mais transparentes, em que tudo é acessório. Além disso, temos “a nuvem”: um lugar que ninguém sabe onde é e que armazena todas as nossas informações. Nesse contexto, o dispositivo é apenas um intermediário da nuvem, que traduz o dado em uma interface.

Ainda estamos na fase na qual qualquer dis-positivo que possuir computação embarcada tem um “i” (leia como “ai”) na frente do nome: iRelógio, iTomada, iTelefone, iMeuDeus! E isso não faz o menor sentido: você não vai chamar um relógio de computador ou de qualquer

outro nome que não seja relógio, mesmo que com ele consiga acender a luz, abrir a porta ou lembrar-se daquele compromisso importante. Esses objetos continuam com a sua caracte-rística, mas com muito mais tecnologia. São acessórios de um mundo conectado!

O que importa ainda é que pouca coisa mu-dou, mas continuamos apertando botões (vir-tuais) e sua mão continua sendo o principal instrumento de controle desses dispositivos.

Baseado nisso, quero levantar aqui uma dis-cussão para pensarmos no futuro (das interfa-ces): convidar você, leitor, para refletir a forma como estamos acostumados a utilizar tecnolo-gia sobre o ponto de vista da usabilidade (da máquina de escrever, da tela touch e até dos vestíveis), dos novos desafios que surgem, até onde é interessante sairmos de uma zona de conforto para aderir a dispositivos nunca antes possíveis e como essa grande rede mundial de pessoas irá reagir frente a esses novos para-digmas.

Luis Leão é desenvolvedor web que encontrou em APIs e hardware aberto novas formas de integrar a web com o mundo [email protected]

Page 6: Revista iMasters #6

6 > Sumário

22 :: Capa > O futuro é agora

64 :: Design de Interação Interfaces conceitu-ais, interações reais

20 :: Presença Digital Os novos diálogos na era da economia da atenção

62 :: Review Construindo apps para Firefox OS

Page 7: Revista iMasters #6

A iMasters é uma revista de Tecnologia/Web aberta a novas ideias. Para colaborar envie o seu material por e-mail <[email protected]>

08 :: Entrevista > Maujor: O Dinossauro da CSS

16 :: Criatividade Tecnológica > Interfaces vestíveis

26 :: Código Livre > Informações e dicas sobre projetos Open Source

28 :: Desenvolvimento > Respect: um microframework de respeito

30 :: Por dentro da W3C > O futuro do HTML5: HTML5.1

32 :: Opinião > Cloud Computing

34 :: Open Data > Dados Abertos: utilizando SQL para pequenas análises de dados

40 :: +Interatividade > O cachorro, o Leap Motion e a velocidade do vento

42 :: Hardware > Trabalhando com protótipos

44 :: Comunidade > Synbio: tijolinhos para construir aplicações interessantes

48 :: Encontro 7Masters

58 :: Social Media > Otimização de mídias sociais: conteúdo otimizado e compartilhado

60 :: Conexão Vale do Silício > Sobre Aviões no ar e oportunidades

68 :: iMasters Box

7

Page 8: Revista iMasters #6

8 > Entrevista > Maujor

Maurício Samy Silva

O Dinossauro da CSSQuem trabalha com desenvolvimento web, em especial os front-ends, com certeza já ouviu falar de Maujor, o Maurício Samy Silva. Sim, porque ele é certamente mais conhecido pelo apelido que o consagrou no meio como o Dinossauro da CSS.

Autor de diversos livros, Maujor é um obstinado divulgador dos Padrões Web. Nesta entrevista, ele explica como começou a trabalhar com desenvolvimento de sites, dá sua opinião sobre alguns temas muito discutidos na área e declara que sua maior inspiração é compartilhar conhecimentos.

Por @RinaPri

Com a colaboração de @bernarddeluna e @eduagni

Page 9: Revista iMasters #6

9

Page 10: Revista iMasters #6

10 > Entrevista > Maujor

“Eu não arriscaria um palpite sobre o que virá no futuro. Parece-me que tudo será possível”

Revista imasters: Você é engenheiro por forma-ção, já foi professor de matemática. Como chegou na área de desenvolvimento Front-End? E o que te chamou a atenção para o tema de padrões web?

maujor: Sim, sou formado em Engenharia Civil pelo Instituto Militar de Engenharia (IME/RJ) e con-cluí a graduação em 1973, no posto de capitão. Em 1976, aprovado em um concurso para magis-tério do Exército, comecei a dar aulas de Geome-tria Descritiva e depois Matemática para alunos do Colégio Militar do Rio de Janeiro. Minha carreira militar foi toda exercida no magistério. Paralele-mente às minhas atividades de magistério militar, eu exerci a engenharia civil em uma empresa de projetos e fiscalização de obras de instalações co-merciais e industriais.

Minha rígida formação militar, aliada à minha fasci-nação pelas ciências exatas, moldaram minha con-duta e raciocínio extremamente cartesiano, criando uma necessidade quase compulsiva de manter meu cérebro em constante atividade, encarando e vencendo desafios. Com esse perfil, quando surgiu o primeiro computador pessoal no Brasil, adquiri um e não mais parei.

Em 1988, juntamente com alguns amigos de Co-pacabana, participei da fundação de um Clube de Pesca de Praia, e um tempo depois sentimos a necessidade de ter um site do Clube. A sugestão imediatamente acendeu uma luz de alerta no meu cérebro que me dizia que seria um bom desafio criar um site para o Abissal Clube de Pesca. E foi assim que tudo começou. Comecei a pesquisar na Internet sobre como criar um site. Descobri o FrontPage e o site foi criado e hospedado em um servidor gratuito, o que era muito comum naquela época.

Sabe aquelas crianças que ganham um carrinho com controle remoto, ficam fascinadas, brincam por três dias sem parar e enjoam? A maioria de-las abandona o brinquedo, enquanto algumas se fecham no quarto e, às escondidas, desmontam o carrinho para ver o que tem dentro e o que os faz funcionar. Eu, com meus quase 70 anos ainda sou

a criança que desmonta o brinquedo. Comecei a investigar o FrontPage para descobrir o que fazia o site “aparecer” em toda sua grandiosidade na tela do computador. Foi meu primeiro contato com o código fonte e a HTML.

Descobrir que todo aquele colorido e formatação que era visto na tela tinha sido criado com linhas e mais linhas de texto foi motivo de uma euforia in-tensa. Era uma fonte valiosa e grandiosa de estudo.

Minhas pesquisas subsequentes, durante dois anos, me levaram ao site do W3C, a conhecer as CSS, e a constatar que no Brasil, àquela época, essa tecnologia era usada somente para estilizar e retirar sublinhado de links.

Durante quase três anos estudei, importei livros, pesquisei, pratiquei, criei muita coisa com HTML e CSS, e no final adquiri um conhecimento avançado sobre CSS. Constatar que no Brasil ainda se usa-vam tabelas em detrimento da dupla HTML e CSS para construir layouts web me levou a questionar sobre o valor que meu conhecimento tinha se ele ficava restrito ao meu HD.

Em 2003, já aposentado, com filhos criados e rea-lizado profissionalmente, minha experiência de 30 anos de magistério falou mais e resolvi criar o site maujor.com, cuja proposta inicial era divulgar e en-sinar como criar sites com CSS. O site acabou se tornando uma referência nacional e até hoje tenho um carinho muito especial por ele e pelo Blog do Maujor (maujor.com/blog), que foi criado depois.

Minha proposta hoje é a mesma que eu tinha em 2003, ou seja, ensinar desenvolvimento front-end para iniciantes. O assunto é que se tornou um pou-co mais ambicioso, pois não está restrito somente às CSS, abrangendo outras tecnologias do W3C, os chamados Padrões Web.

Rim: Você sempre impulsionou a adoção do CSS no Brasil, acompanhando o crescimento dessa lin-guagem e da comunidade. Como você resume a evolução da CSS nos últimos nove anos?

Page 11: Revista iMasters #6

11

maujor: Se voltarmos nove anos atrás estare-mos em 2004, quando meu site completava seu primeiro ano de vida. Me lembro muito bem que àquela época layouts com tabelas dominavam o desenvolvimento front-end no Brasil, assim como os navegadores IE5.5 e IE6 dominavam o merca-do de navegadores.

Eric Meyer era o nosso maior mestre, o verdadei-ro guru mundial das CSS. Seu livro “Eric Meyer on CSS” era um clássico e ele começava o livro ensi-nando como transformar um layout em tabelas em um layout CSS, mostrando as regras CSS capa-zes de destacar as tabelas e células de um layout existente, com a finalidade de visualizar a estrutura do site e facilitar sua migração para as CSS. Hoje, essa é uma funcionalidade nativa na maioria das ferramentas de desenvolvimento incorporadas aos navegadores e que se destinam a destacar não so-mente tabelas, mas qualquer elemento da marca-ção com uso de cores personalizáveis.

No Brasil, foi por volta de 2007 que as CSS co-meçaram a ser usadas em larga escala. De lá para cá, evoluímos de um começo com folhas de esti-los recheadas de hacks CSS para fazer as coisas funcionarem no IE6 até os fantásticos efeitos de sombreamento, gradientes, transformações, ani-mações etc. que, aliados aos polyfils que proliferam aos borbotões, colocou à disposição dos desen-volvedores todas aquelas funcionalidades.

Em 2009, com o navegador IE7 predominando no mercado brasileiro e a consequente saída do IE6, foi decretada a morte definitiva do então fa-migerado “box model” quebrado. Foi um pequeno primeiro passo em direção a navegadores Internet Explorer mais aderentes aos padrões web, como é o atual IE10.

A seguir, a chegada das CSS3, com suas funcio-nalidades sendo implementadas com uso de pre-

fixos proprietários, e as CSS já consolidadas no Brasil, o desenvolvimento de interfaces fantásticas com uso das CSS tornou-se uma verdadeira febre entre desenvolvedores.

Especificações do W3C em fases que mal tinham saído do status de rascunho de trabalho começa-ram a ser implementadas em um navegador ou ou-tro com uso dos perniciosos (ou utilíssimos?) prefi-xos proprietários. Começou e estamos (re)vivendo uma velada guerra dos navegadores.

Resumindo, posso afirmar que saímos de um mun-do cheio de “hacks” para um navegador e entra-mos em um mundo repleto de prefixos proprietários para vários navegadores.

Eu pergunto: isso é bom ou é ruim? Minha con-vicção é que a resposta pode ser “muito bom” ou “muito ruim”, dependendo do balanço final dos prós e contras da implementação dos prefixos pro-prietários. E você? Já parou para refletir sobre essa questão? Ou usa indiscriminadamente prefixos e polyfils sem medir consequências?

Rim: O que você acredita que será possível fazer com CSS em alguns anos, que ainda não conse-guimos hoje?

maujor: No início da década passada duas pre-missas relacionadas ao desenvolvimento front-end transfomaram-se em verdadeiros dogmas e foram repetidas até a exaustão em blogs e matérias espe-cializadas por todos os autores envolvidos com os padrões web.

Uma dessas premissas era: “O futuro da web é a XHTML, uma linguagem HTML baseada na XML”. A outra era “Linguagem (X)HTML para marcação, CSS para estilização (posicionamento, cores, ta-manhos, fundos, etc.) e JavaScript para comporta-mento”. Eram as famosas três camadas do desen-volvimento front-end.

Foto: acervo pessoal - Maujor Foto: acervo pessoal - Maujor

Page 12: Revista iMasters #6

Em 2009, o W3C decretou o fim do Grupo de Trabalho para desenvolvimento da XHTML2, após Tim-Berners Lee ter admitido que a tentativa de transformar a linguagem de marcação HTML em uma linguagem compatível com a XML tinha falha-do porque os navegadores não aderiram à nova tecnologia. Todos os esforços a partir de então se voltariam para o desenvolvimento da HTML, com o W3C juntando-se ao Grupo WHATWG no desenvolvimento da HTML5. Caia uma das pre-missas: a XHTML já não era mais a linguagem de marcação do futuro.

As funcionalidades das CSS3, desde os seus pri-meiros rascunhos de trabalho, já apontavam para uma tremenda ingerência na camada de compor-tamento. E hoje é comum falar-se em CSS substi-tuindo Flash. Caiu mais uma premissa, CSS não é mais somente para estilizar.

No futuro, de concreto, para citar apenas algu-mas delas, posso antever o uso das funcionali-dades já em fase de estudos no W3C, relacio-nadas à criação de layouts complexos com os Módulos para Grids, Regiões e novas funciona-lidades de posicionamento.

Além disso, a criação de efeitos, filtros e máscaras; o uso dos chamados seletores avançados do nível 4; a definição de variáveis para propriedades e valores CSS em substituição aos atuais pré-processadores, tais como LESS e SASS. As funcionalidades para design responsivo, cujo primeiro passo já foi dado com o lançamento do Rascunho de Trabalho do W3C para o Módulo “CSS Device Adaptation”, em setembro de 2011, e do Módulo “Media Queries Level 4”, em dezembro de 2012. Também a criação de efeitos em imagens e a possibilidade de se servir imagens de acordo com o dispositivo do usuário.

Essas são, repito, funcionalidades já em estudo no W3C e, baseado em tudo que tenho lido, eu não

arriscaria um palpite sobre o que virá no futuro. Pa-rece-me que tudo será possível. Resta apenas saber se os fabricantes de navegadores estão dispostos a implementar o que está sendo criado no papel.

Rim: O que você considera mais difícil de aprender hoje na escrita CSS para quem está iniciando?

maujor: Dentre as funcionalidades das CSS3 que eu considero menos fáceis de aprender estão os gradientes e as funcionalidades previstas nos mó-dulos para criação de layouts.

Dito isso, quem está começando precisa entender que em CSS nada é colocado em desuso ou fica obsoleto, nem propriedades, nem valores e nem e principalmente a sintaxe CSS. Se você resolver es-tudar CSS1, nada do que aprender será descarta-do ou deixará de funcionar quando você conhecer CSS3 e desenvolver com seu uso. A sintaxe CSS é extremamente simples e se resume a uma só linha:

Declarando um seletor e a ele aplicando proprie-dades CSS e um dos seus possíveis valores, você manipula toda a estilização, o posicionamento a criação de layout.

Se você não conhece nada de CSS, meu conselho é começar com as CSS2. Esse primeiro dia de es-tudo e prática vai lhe dar uma pequena amostra do que as CSS são capazes, e mais do que isso, vai motivá-lo a aprofundar os estudos.

Com somente um dia de estudo você aprende algumas poucas propriedades, seus valores pos-síveis e como inserir uma folha de estilos em um documento HTML. Com isso, você já terá condi-ções de definir cores de fundo e de textos, tama-

12 > Entrevista Maujor

seletor { propriedade1: valorA; propriedade2: valorB; ... }

Foto: acervo pessoal - Maujor Foto: acervo pessoal - Maujor

Page 13: Revista iMasters #6

nhos e tipos de fontes, criar bordas, efeitos em links e algumas outras possibilidades de estilizar. Com um pouco mais de estudo e nenhum esforço ex-tra você vai conhecer os fundamentos das CSS, tornando-se familiarizado com propriedades e va-lores CSS, sempre complementando a teoria com a prática. Até aqui, tudo vai fluir e acontecer com muita facilidade e sem transtornos.

A primeira dificuldade que você irá encontrar é com relação às funcionalidades de posicionamen-to de elementos na página. Essas funcionalidades são a chave para criação de layouts. Dedique tempo, estudo e muita prática para entender po-sicionamento relativo, absoluto e principalmente flutuação de elementos.

Vencido isso, você deverá estar em condições de criar layouts fixos de duas, três ou mais colunas. Continue com layouts fluidos, que não são difíceis de aprender. Você está pronto para as CSS3 e ago-ra os desafios são maiores e mais complicados, contudo o grau de dificuldade do aprendizado é bem menor do que aquele exigido para aprender uma linguagem de programação.

Rim: Nos últimos dois anos muito tem se falado so-bre a importância do CSS para múltiplos dispositi-vos através da utilização de “media-queries”. Como você vê isso? Acredita que seja uma solução que veio para ficar ou paliativa?

maujor: Acredito que veio para ficar e não é sem méritos que “media-queries” é um dos três pilares de sustentação do desenvolvimento web respon-sivo, ao lado de layouts fluidos e mídias flexíveis. Atualmente, em se tratando de desenvolvimento web, não há mais sentido em se criar um site ou aplicação não responsiva, o que torna “media--queries” indispensável, devendo ser uma das fun-cionalidades muito bem estudadas e entendidas por desenvolvedores.

Contudo, quero registrar que, no começo do mês de abril, Ian Storm Taylor publicou um texto bem interessante contestando o valor de media que-ries e sugerindo uma funcionalidade que denomi-nou de “element querie”, destinada ao uso códi-go modular em design responsivo. Recomendo a leitura em bit.ly/14RNW8r.

Rim: Dentro da complexidade da CSS para criar estruturas, existem muitos atributos e técnicas que estão surgindo para diagramação, entre elas o “Template Layout Module” (w3.org/TR/css3-layout/) e o “Flexible Box Layout Module” (w3.org/

13

TR/css3-flexbox/). Como você vê esses módulos emergentes? Isso vai inibir, de alguma forma, a utilização de float e inline-block para diagramação?

maujor: Vejo com bastante otimismo não somente os Módulos citados como todos os Módulos desti-nados à criação de layouts e posicionamento. Sem dúvida eles irão facilitar, e muito, o trabalho de cria-ção de layouts, mas acredito que a propriedade flo-at e o valor inline-block continuarão sendo usados e tendo sua utilidade.

Rim: Muito se fala sobre a substituição da anima-ção em Flash pela CSS, muito por causa do CSS transition e animation, e mais ainda com a apos-ta da CSS4 com CSS shaders. Você realmente acredita que haverá essa substituição? A CSS é a melhor linguagem para evoluir dentro desse ambiente de animação?

maujor: As CSS isoladamente não substituirão o Flash e nem são a melhor linguagem para subs-tituir animações.

São algumas das tecnologias da chamada Open Web, ou Padrões Web Abertos, que quando combinadas permitem ao desenvolvedor criar vá-rios efeitos e interfaces interativas, que historica-mente eram projetadas com uso do Flash. Dentre tais tecnologias eu destaco HTML5, CSS3, SVG, WebGL e JavaScript.

Por exemplo: os novos elementos video e audio da HTML5 permitem que filmes e áudio sejam incor-porados em uma aplicação web sem necessidade do uso de plugins para fazê-los funcionar. E assim é com outros efeitos do Flash que já são possíveis de se reproduzir com uso daquelas tecnologias.

Acredito que o movimento é em direção a uma web aberta, e em consequência livre de padrões proprie-tários. Assim, é coerente que eu acredite também na substituição do Flash por tecnologias abertas.

Essa é a minha visão. Contudo, a Internet está repleta de artigos e matérias que discutem o assunto CSS versus Flash. As opiniões são divergentes e não há um consenso sobre o assunto. Na maioria das vezes a discussão acaba se transformando no confronto tecnologias proprietárias versus padrões abertos.

Remy Sharp, um consagrado autor inglês, escre-veu um artigo a respeito desse assunto que de-monstra muito bem quão polêmico isso é. A área de comentários foi fechada pelo autor, três meses depois da publicação, devido à grande confusão gerada. Leia em: bit.ly/cODapZ.

Page 14: Revista iMasters #6

Rim: Nos anos 2000 era difícil trabalhar com fra-meworks e códigos de terceiros padronizados. Hoje em dia está bastante fácil e até cômodo encontrar frameworks que agilizem e automatizem o seu tra-balho de desenvolvimento. Como você vê a utiliza-ção de Grids prontos e Frameworks em geral?

maujor: Vejo com reservas, mas não descarto seu uso.

É incrível a quantidade de frameworks e bibliote-cas à disposição dos desenvolvedores. E, não é somente a diversificação de assuntos, mas tam-bém a sobreposição de mesmos assuntos. A restrição que faço ao uso de frameworks e biblio-tecas diz respeito ao superdimensionamento dos meios de desenvolvimento.

Tornou-se comum, pois é “bastante fácil e até cô-modo” encontrar um framework que agilize e auto-matize o trabalho de desenvolvimento e adotar essa solução sem avaliar as consequências do seu uso. Na prática, não é raro encontrar sites importando a biblioteca jQuery somente para fazer funcionar um menu dropdown. Com mínimo esforço alguém po-derá obter efeitos de alto impacto visual sem saber absolutamente nada da linguagem JavaScript.

Em resumo: usar frameworks ou bibliotecas para desenvolver é uma decisão que exige um estudo apurado, envolvendo não somente facilidade e agilização do processo, mas também desempe-mho, performance, pertinência e características gerais da interface.

Rim: Você é conhecido por todos carinhosamente como “Dinossauro da CSS”. Você é uma pessoa que inspira os outros. Quem, ou o que, te inspira?

maujor: Na verdade não existe um quem me inspi-ra, mas certamente existe um o que. Eu comecei na área web com o objetivo de vencer um desafio que

eu mesmo me propus. Acumulei conhecimentos que julgava muito valiosos para deixar guardado no meu HD e resolvi compartilhar os conhecimentos.

O “professor” que existe em minha alma continua olhando para os meus leitores e para aqueles que seguem o meu trabalho como alunos ávidos por conhecimentos. Certamente o que me inspira é o compartilhar conhecimentos.

Rim: O que você acha da proposta do Schema.org, uma iniciativa dos principais mecanismos de busca para melhorar a semântica dos conteúdos na web? Mesmo não sendo uma iniciativa da W3C, é valido que os desenvolvedores implemen-tem em seus projetos?

maujor: Permita-me uma explicação bem sim-ples e sem entrar em considerações técnicas sobre microdata.

A HTML5 deu forte ênfase à marcação semântica. Os elementos da linguagem têm sua semântica bem definida e retratam com precisão a natureza dos conteúdos.

Microdata é um mecanismo destinado a fornecer informações semânticas adicionais sobre o con-teúdo. Esse mecanismo usa pares atributo/valor para adicionar semântica. É um mecanismo que extende a HTML5.

Conteúdos lidos por humanos são interpretados dentro de um contexto e entendidos sem proble-mas, mas máquinas não são capazes de interpretar conteúdos. Por exemplo; para um humano a frase “a manga da camisa é verde” não deixa dúvidas, contudo uma máquina não saberá se a referida manga é uma fruta ou não. Esse simples exemplo ilustra a necessidade de se “dizer” para mecanis-mos de busca (máquinas) que manga não é fruta. Para se “dizer” isso usamos microdata, que é uma especificação do W3C.

14 > Entrevista > Maujor

Foto por Horácio Soares (http://flic.kr/p/4gYf2x)

Page 15: Revista iMasters #6

Para fornecer a informação semântica para as má-quinas, a sintaxe microdata remete a máquina para um URL no qual está explicada a semântica do conteúdo marcado. Será que existe um URL expli-cando a semântica para a palavra “manga”?

Os principais mecanismos de busca, liderados pelo Google, implementaram o que foi denominado de “Rich Snippets”, uma ferramenta destinada a for-necer URLs para explicar semântica e ser usada com microdata, microformats e RDFa. Em 2011, o Google abandonou o projeto em favor do Schema.org, que seria focado somente em microdata.

Então, Schema.org nada mais é que um serviço on-line que fornece URLs destinadas a explicar a se-mântica de conteúdos com uso de microdata. É um serviço que extende a HTML5. Qualquer companhia pode criar seu URL, com explicação de semântica personalizada para ser usada com microdata.

Portanto acho válido e recomendo o uso do serviço prestado por Schema.org.

Rim: Seus livros ajudam a guiar milhares de brasi-leiros pelo desenvolvimento front-end, mas de onde nasceu a ideia de escrevê-los? Qual a sua inspiração?

maujor: No ano de 2005, com meu site já era razo-avelmente conhecido na comunidade de desenvol-vimento. Eu comecei a receber vários e-mails solici-tando que transformasse os tutoriais do site em um livro. Respondia a esses pedidos agradecendo pela ideia e argumentando que não me sentia confortá-

15

vel em transformar um conteúdo disponível gratui-tamente no site em um livro pago.

Não queria me afastar da proposta inicial, de com-partilhar conhecimentos usando o site, e até hoje penso da mesma forma. Foi a época do nascimen-to dos blogs e naquele mesmo ano criei o Blog do Maujor, como uma forma de ter mais um canal de comunicação com meus leitores.

Contudo, a ideia de escrever um livro, nascida das sugestões dos meus leitores, começou a provocar meu cérebro que se alimenta de desafios. Passei um ano com a ideia de escrever um livro na cabe-ça e em novembro de 2007 foi lançado o “Cons-truindo sites com CSS e (X)HTML”. A expectativa era muito grande e a aceitação foi muito maior do que a esperada. O livro foi um sucesso tão gran-de que eu não parei mais de escrever, e esse ano pretendo lançar meu décimo-primeiro livro, sobre Design Responsivo. </>

Livros publicados pelo Maujor

Page 16: Revista iMasters #6

16 > Criatividade Tecnológica

Interfaces vestíveisPor @senhoritalina

Mas o que vem a ser essa tal interface e por que discuti-la aqui? Buscando o auxílio de um dicionário qualquer, nos

deparamos com uma definição que nos interessa: interface é

a mediação entre máquina e homem via uma relação

semântica, a metáfora. Diante de um computador, quase não há dúvidas de como utilizá-lo,

a área de trabalho se chama desktop, e nela normalmente

fica o desenho de uma lixeira e de arquivos ou pastas - ou seja, praticamente igual a qualquer

escritório anterior ao uso generalizado do computador.

Steve Jobs chegou ao céu e viu aquele azul lindo com nuvens claras, aquele gramado muito verde e exclamou: “F***, estou no Windows!”. Comentários irônicos da Internet à parte, a força desse gracejo está na familiaridade que o usuário de um compu-tador tem com as interfaces gráficas mais utilizadas e com os seus grandes empresários.

A interface está ligada a um aprendizado, possui alguma familiaridade para, no mínimo, gerar um interesse para si. No entanto, também institui mu-danças em sua própria estrutura. E, ao fim, uma boa interface é aquela que se torna invisível devido à sua facilidade de uso. Alguém por aí faz questão de que o símbolo do botão de atalho para salvar um documento deixe de ser um disquete, mesmo quando hoje se usa um pendrive?

É claro que a interface e suas metáforas não são um privilégio apenas do computador, estão pre-sentes em todas as outras máquinas, dispositivos e invenções humanas, como óculos, cadeira, livro, carro, autofalante, relógio, celular etc. A cada in-venção, mantém-se uma relação semântica com a tecnologia anterior e implementa-se uma nova. A primeira metáfora é o corpo humano. Um desa-fio aos designers: de quantas maneiras é possível fazer óculos ou uma cadeira? Ao final, as pessoas vão preferir usar os óculos ou a cadeira que forem confortáveis, em que não se notam as horas de uso, ou seja, que sejam “invisíveis” ou “transpa-rentes”. Estas são as características que se espe-ram também de máquinas mais complexas, como telefones e câmeras: levar o dispositivo à orelha ou ao olho, apertar o botão e esperar. Algumas interfaces são tão bem-sucedidas em transformar seus controles em algo intuitivo para o usuário que seus comandos somem, sendo completamente assimilados. Por vezes, a “usabilidade” é tão gran-de que há aparelhos telefônicos para deficientes auditivos e cegos que conseguem fotografar, ape-sar da falta de visão.

Page 17: Revista iMasters #6

Segundo o teórico e escritor Steven Johnson (reco-mendo muito a leitura de seu livro Cultura da Interfa-ce, Editora Zahar, 2001), câmeras fotográficas são máquinas de processos mecânicos que mostram representações como produto final, já um compu-tador depende do seu poder de se autorepresentar para o usuário, de transformar todos os pulsos elé-tricos e seus algoritmos matemáticos em algo que faça sentido ao interator. Por isso, um computador seria uma máquina simbólica. Creio que esse pen-samento resume bem a importância de discutir o assunto interface aqui. Contudo, optamos por um recorte muito específico de interfaces, as vestíveis, conhecidas também como “wearable computers”.

Integração entre corpo e tecnologia Boa parte das pessoas conhece e fez uso de al-gum dispositivo eletrônico anexado ao corpo. Pa-gers, bipers, walktalkies, walkmans, tamagotchis, celulares ou relógios. Esses aparelhos são bons exemplos para uma noção de wearable computers, ou interfaces vestíveis. No entanto, um computador vestível, da forma como vamos tratar neste ensaio, é capaz de ir além de um display de informações sobre as horas ou mensagens de texto ou barulhi-nhos de “tenho fome”. É uma interface integrada ao corpo capaz de processar dados recebidos e gerar informação, banco de dados e rede. Além disso, essas vestimentas estão aptas a “incorpo-rar” o processo de comunicação de forma direta e instantânea.

Para facilitar, vamos estabelecer pequenas catego-rias de interfaces vestíveis: as mobiles, as têxteis e as implantadas. As primeiras possuem um grande espectro na evolução dos wearable computers e utilizam, como referente de uso, dispositivos como relógios e óculos. As segundas são os propriamen-

te vestíveis, como uma camiseta-básica-inteligente, em que a tecnologia está no tecido, ou o tecido contém dentro de si os dispositivos tecnológicos, (que ainda por cima têm de ser resistentes à lava-gem!). Já as terceiras, como diz o nome, são im-plantadas no corpo, como os ciborgues, na ficção científica.

A primeira linha de vestíveis disponíveis no mercado está interessada em medir sua qualidade de vida, como o Sensor Nike+ para ser usado durante a sua corrida, ou o UP da Jawbone, uma espécie de re-lógio de pulso que registra seus dados 24h - além das atividades físicas, monitora seu sono, o que come ou bebe, e bipa quando você está inativo por muito tempo. No caso, o tamagotchi é você. Além deles, há o Myo, que é capaz de medir a atividade elétrica dos músculos e processar esse dado para controlar outros dispositivos, como seu computa-dor ou videogame.

Este último é um pouco mais inovador do ponto de vista da interface, mas não tanto quanto o projeto Sixthsense que o pesquisador Pranav Mistry de-senvolve no MIT. Mistry começou sua pesquisa há uma década, justamente interessado na interface por gestos. Seu objetivo inicial era levar os objetos físicos para o mundo digital: escrever post-its e ra-pidamente essas informações estarem sincroniza-das com seu computador, ou colocar seu bilhete de avião sobre o computador e ele reconhecer e passar as informações do voo, por exemplo. Foi quando ele percebeu que as pessoas não estão interessadas em computação, mas em informa-ção. Então, Mistry propôs o Sixthsense pensando o contrário, em que você pode levar seu mundo digital para onde você for e usar qualquer superfície física como interface.

Consiste basicamente em uma câmera pendurada no pescoço e um projetor. A câmera identifica os movimentos dos seus dedos, ou os objetos que

17

Google Glass (imagem: http://bit.ly/17BRzPc) Myo - gesture control (imagem: http://bit.ly/17BSWgL)

Page 18: Revista iMasters #6

você está carregando, e gera a interface projetada em qualquer superfície, seja uma parede, sua mão, uma folha de papel. Essa projeção pode conter in-formações sobre o livro que você está segurando, como suas últimas críticas, ou informações sobre o tempo atualizadas, quando se está diante delas lendo o jornal, por exemplo. O dispositivo ainda permite que se manipule, além dos objetos, os pró-prios dados da projeção, sendo possível escolher mais informações sobre o tempo, ou jogar pong no chão do metrô. Segundo ele, o Sixthsense foi fei-to para nos ajudar a nos manter mais conectados com nossa humanidade e com o mundo real, a não ficarmos fixos na cadeira, como máquinas diante de uma máquina.

Sixthsense personifica dois conceitos muito impor-tantes para as interfaces mais inovadoras e mesmo futurísticas, quais sejam, realidade aumentada e vi-são computacional. Computer Vision ou computa-ção visual, como ficou a tradução do termo no Bra-sil, está ligada a pesquisas e estudos que tornam o computador capaz de processar uma informação a partir de uma câmera, como se ele fosse capaz de enxergar, comparar e identificar informações vi-suais e, então, processar escolhas. Já a chamada Augmented Reality adiciona gráficos, sons e outras informações processadas digitalmente ao mundo físico, usando uma tela como suporte dessa “ex-pansão”.

Outro pesquisador interessado na realidade au-mentada que essas interfaces são capazes de gerar é Steve Mann, um pesquisador, inventor e atualmente professor na Universidade de Toronto. Ele tem se dedicado, há mais de 35 anos, a pro-jetar, construir e usar wearables computers com visão computacional. Em sua “vida aumentada”, como tem chamado o fato de usar suas próprias invenções há anos, Mann passou por experiências muito curiosas usando seus aparatos. Em uma delas, quando um carro bateu na sua casa, ele foi conversar com o motorista, que deu ré e passou

por cima do seu pé e o derrubou no chão, que-brando seu sistema de visão, o EyeTape, parecido com um óculos. O motorista fugiu. Mas, apesar de o aparelho estar danificado, foi possível recuperar as imagens do sistema em que havia a placa do carro do fugitivo.

Outro episódio, recente e polêmico, aconteceu na França, no ano passado. Segundo seu rela-to, foi intimidado fisicamente pelos funcionários do McDonald´s da Champs Elyssés. Mann anda com uma documentação médica afirmando que o EyeTap (em sua quarta geração) é preso de modo especial a sua cabeça e necessita de ferramentas para retirá-lo. Ou seja, parece um óculos, mas não tem a mesma “usabilidade”, tampouco a mesma função. Mas, nessa loja do McDonald´s, é proibido filmar ou fotografar. Ele apresentou o documento, quando um funcionário tentou arrancar-lhe os ócu-los. Ainda assim, segundo Mann, eles destruíram o documento. Para quem quiser acompanhar melhor a discussão, acesse o blog do pesquisador (citado ao final do texto). Além dessas histórias, é possível acompanhar o pensamento de Steve Mann sobre o impacto, a importância e o uso de pequenos sis-temas de vigilância pessoal.

Além do Eye Tap, o Google Glass também é um óculos. Contudo, é mais próximo de um assistente pessoal do que os dispositivos de Mann, ou os de Mistry. Seu grande mérito está na popularização desse tipo de tecnologia e de como ela pode pro-cessar as informações importantes, as memórias afetivas de modo muito próximo de como de fato vemos o mundo sem necessariamente sairmos dele para tirar uma foto ou compartilhá-la.

Passando para a próxima categoria, as interfaces literalmente vestíveis, é possível encontrar jaquetas com sistemas de iluminação, como a Light Jacket, lançada pela Triumph, ou painel de leds integrados, como a Jacket Antics do Studio subTela. Quem

18 > Criatividade Tecnológica

Audio Tooth Implant (imagem: http://bit.ly/17BVgV5)Sensor Nike+ (imagem: http://bit.ly/17BRFpY)

Page 19: Revista iMasters #6

Lina Lopes é graduada no curso superior de audiovisual da universidade de São Paulo (ECA/USP), está cursando engenharia da computação (FIAP) e se especializando em iluminação e design (IPOG). Pesquisa a relação entre corpo, espaço cênico, linguagem da fotografia, do vídeo e das artes&tecnologias. - [email protected]

19

mais tem se apropriado das possibilidades dos têx-teis são os fashionistas e performers da arte e tec-nologia. Principalmente depois do lançamento do LilyPad, uma versão de arduíno feita para costura, com sensores muito pequenos e linhas e tecidos com capacidade condutiva. Ainda está sub-utiliza-do no mercado brasileiro toda a real potência que esse kit faça-você-mesmo pode possibilitar.

E, por último, chegou a vez dos implantados, da pele para dentro do corpo. O Wireless Tattoo Elec-tronics, como ficou conhecido, é o trabalho de pesquisa do Bioengenheiro Todd Coleman. Esses circuitos eletrônicos são como tatuagens de chi-clete, totalmente flexíveis, que se adequam ao mo-vimento da pele. Foram inicialmente criados para monitorar a atividade cerebral, mas Coleman apos-ta também em seu potencial social e de diversão em interações próximas à telepatia.

Mais ousado e além da nossa realidade de produ-ção (segundo os próprios idealizadores) é o projeto--conceito MIBEC, de James Auger e Jimmy Loize-au. É um implante dentário que visa a revolucionar a comunicação pessoal. Seria como receber uma mensagem ou telefonema diretamente dentro da sua cabeça por meio da ressonância do osso da sua mandíbula para o seu ouvido interno. Imagine um indivíduo andando com isso na Av. Paulista, su-jeito a todas as interferências eletromagnéticas da região. Ele literalmente ouviria vozes na sua cabe-ça. E bluetooth rapidamente seria considerado uma dor de dente.

Afinal, o que todas essas interfaces, independen-temente das suas categorizações, têm em comum é a absorção da tecnologia junto ao corpo para manter um fluxo constante de informação ao longo

Steve Mann (imagem: http://bit.ly/SJ10O)

do tempo, de modo a agilizar a comunicação e as tomadas de decisão. Seria como uma extensão do pensamento humano auxiliado por essas interfa-ces, um cérebro expandido. Curiosamente, nosso texto começou falando do corpo como metáfora para as primeiras invenções e aparatos tecnológi-cos e agora, no desenrolar do argumento, esses dispositivos querem voltar ao corpo. Os desafios são os mesmos de antes do ponto de vista do de-sign de interface: a transparência da tecnologia é o grande parâmetro de sua usabilidade. Para isso, devem contar com desenvolvimento em biomimé-tica, portabilidade e alimentação por baterias de duração quase infinita, ou que se utilizem de fontes renováveis. Ainda veremos muitas mudanças nos óculos e nas cadeiras que estão por vir. </>

Page 20: Revista iMasters #6

20 > Presença Digital

Antigamente, quando havia menos barulho nas ci-dades e mais árvores e mais pássaros, você podia ouvir durante a tarde o canto animado de um bem--te-vi, ou dos complexos acordes de uma sabiá. Hoje, o som abafado das ruas, veículos passando, pessoas conversando, sirenes, televisões e o fami-gerado fone de ouvido tornaram um canto de pas-sarinho indiscriminado. Dizemos apenas “tem um pássaro cantando”, mas não fazemos ideia de que espécie ele seja, desaprendemos ao longo do tem-po a conhecer e identificar seus cantos.

Este artigo não é sobre pássaros, embora eu goste muito deles soltos por aí. Mas foi necessário es-crever esse prólogo para que você entenda que, por desconhecimento da identificação correta dos termos, assim como acontece com os pássaros, vamos usar a palavra diálogo para dar conta de uma variedade de discursos com estratégias muito diversificadas nesse jogo que é a comunicação.

Toda vez que aparece um novo meio de comuni-cação - e essas ferramentas cada vez mais estão vinculadas à tecnologia - os olhos do mercado se voltam violentamente para ele, em busca de novas formas de diálogo com a audiência. São tentativas de se fazer presente, de constar na lista dos pri-meiros adeptos, de chamar a atenção do público. Mesmo que isso conduza a estratégias fracassa-das, como os investimentos que muitas marcas fizeram no Second Life. Como não conhecemos exatamente os efeitos daquele novo meio, não po-demos prever a eficácia da comunicação.

McLuhan dizia que a simples sucessão das mídias “não conduz a nada a não ser à mudança”, ou seja, quando aparecem novas formas de comunicar, as mídias antigas são naturalmente conduzidas a uma adaptação de seus diálogos, o que acaba por forjar sua linguagem. Como a televisão: ela se apropriou

inicialmente da linguagem do rádio até criar sua própria e agora, com a Internet, ela vem se recon-figurando cada vez mais para interagir e explorar o potencial dos novos meios digitais.

Há uma enorme diversidade de formas de diálogo na rede hoje: múltiplas oportunidades de utiliza-ção, centenas de canais na televisão, milhares de revistas nas bancas, milhões de blogs na Internet, e o consumo simultâneo das mídias. Esse caos do excesso de informação conduz a um cenário de in-certezas em que permanece a questão: como cha-mar a atenção para uma mensagem se os modelos estão quebrados?

Conquistar a atenção das pessoas é tão importante que se tornou um modelo de economia e, conse-quentemente, muitas empresas precisaram mudar a forma como operavam seus departamentos de comunicação e marketing e repensar nas maneiras de dialogar, questionando-se sobre como criar um diálogo mais direto e definir os arquétipos de uma clientela tão plural em identidades.

Talvez seja mais fácil começar usando exemplos que todos conhecem de marcas que não dialoga-ram em tempo suficiente, como a Dell e a United Airlines. Elas aprenderam com o caso “Dell Hell/Idea Storm” e “United Breaks Guitars” que o silên-cio não é uma opção na rede.

O conteúdo corporativo não pode mais ser sim-plesmente replicado na Internet. Ele deve ter uma linguagem própria, estruturada de acordo com a audiência e que seja capaz de promover efetiva-mente o diálogo. Como no caso da Lego, que usou um discurso eficiente e adaptado ao seu auditó-rio e ganhou notoriedade. O menino Luka Apps, de 7 anos, havia economizado para comprar um kit de bonecos, perdeu um deles num passeio ao

Os novos diálogos na era da economia da atenção

Page 21: Revista iMasters #6

21

shopping e foi orientado pelo pai a escrever para a fabricante de brinquedos. Considerando a fan-tasia correspondente a sua idade, a resposta que lhe foi enviada fugiu completamente dos padrões dos diálogos institucionais. Primeiramente, porque a pessoa que lhe escreve diz ter consultado um dos “líderes” da coleção de bonecos para saber se poderia enviar outro, uma vez que o gerente de atendimento ao cliente não poderia fazê-lo, já que a responsabilidade era do menino. E o “líder”, além de consentir, dá uma série de conselhos de con-duta para Luka. Depois, porque o diálogo envolveu uma pessoa do outro lado de Luka, o “Richard”, representando um departamento, e não por um “Departamento”. Essa história já rodou o mundo, e a Lego conquistou respeito pela sua atitude.

Nem todas as empresas estão prontas para man-terem diálogos com todos os seus clientes, isso requer investimentos e abertura. Muito menos num nível tão personalizado, como fez a Lego. Mas a autonomia de pensamento e ação dada aos con-sumidores vem pressionando as empresas para buscarem por meios adequados em que se possa cultivar o diálogo.

Foi o que aconteceu com a maionese Hellmann’s, que mudou o discurso de comunicação para sa-lientar os aspectos saudáveis do produto. Para isso, foi criado um comercial na televisão e uma wiki receitas: a Recepedia.com. A enciclopédia de receitas foi criada pela Unilever e é mantida por seus mais de três mil consumidores cadastrados com seis mil receitas compartilhadas em outras redes todos os dias, criando uma inteligência as-sociada. Não é a marca que diz o que se deve consumir, mas sim os consumidores.

Isso indica que talvez não seja necessário aderir a todas as novidades em termos de relacionamento

que a Internet propõe. O que parece obter melhor resultado é a escolha, entre as possibilidades, do meio que melhor dialoga com a audiência, ou de um diálogo complementar que se sustente em vá-rios meios. Foi essa a estratégia do Ponto Frio no famoso twitter do Pinguim, a simpática figura que anuncia seus produtos e enquetes enquanto brinca com a sugestão de almoço e sai correndo do tra-balho para ir à natação. O diálogo se desloca da tradição institucional e é mantido de forma casual, irreverente, apropriada à linguagem do meio.

Como podemos ver, nesses e em outras centenas de exemplos, as empresas querem - e precisam - marcar seus territórios na rede na era da econo-mia da atenção. A diferença é como utilizam cada meio para comunicar seus interesses. Cada situa-ção exige uma linguagem, e a pluralidade do digital conduz automaticamente a mensagem a outros meios. O que faz com que as empresas alcancem a atenção de suas audiências parece não residir na adesão aos novos meios, mas sim na potência em encontrar a melhor forma de diálogo usando a di-versidade dos novos meios.

Para finalizar, vamos usar novamente a analogia dos pássaros: você não precisa de um viveiro com muitas espécies e cantos distintos para ser ouvido. Provavelmente isso seria uma algazarra. Você precisa apenas de um Tiê-Sangue com um gorjear melodioso e trissilábico, que as pessoas possam repetir. </>

Ana Erthal é jornalista e mestre pela UERJ na linha de Novas Tecnologias em Comunicação. Atualmente é professora da ESPM, UNESA, UCAM, INFNET e iMasters PRO. É pesquisadora pelo CAEPM e consultora da Fundação Roberto Marinho.

Por @anaerthal

Page 22: Revista iMasters #6

22 > Capa

o_futuro_é_agora

Por @lufreitas, para @iMasters

Page 23: Revista iMasters #6

Então aconteceu o SXSW - South by Southwest, evento que fala sobre tendências e futuro, que aconteceu em março, nos EUA. O encerramen-to ficou por conta de Bruce Sterling, escritor de ficção científica norte-americano, que observou que os computadores morreram. (Você pode ouvir a gravação aqui http://bit.ly/ZslHYF).

Em seu discurso, Sterling mostrou que a “dis-rupção pela disrupção” em que vivemos esva-zia os sentidos e não leva a nada – ele alin-hava imagens fortes com a ebulição de hoje. Ao comparar nossos avanços com a civilização que simplesmente saiu de sua cidade cuida-dosamente montada no cânion, lugar perfeito, ele fez uma parábola que mostrava o quanto a mania de deixar para trás o que veio antes deixa, simplesmente, espaços vazios. Na se-quência, decretou várias mortes, além do com-putador: dos blogs, da literatura, dos livros.

Sim, é exatamente isso que você está lendo: os computadores não deram as caras nas falas do SXSW 2013, e Sterling decretou a morte deles. Depois dos smartphones, chegam o Google Glass e (talvez) o relógio da Apple. E cada vez mais o que se vê nos livros dos cyberpunks, a turma de Sterling, tornam-se mais concretos no nosso dia a dia: um computador “para ve-stir”, interfaces que se integram totalmente ao ser humano e afins.

Conversar sobre como as interfaces estão evo-luindo com Luli Radfahrer, PhD em comunicação digital (USP-SP), é certeza de ser transportado, na velocidade do pensamento dele, a outros horizontes e muita reflexão. “Acho que há uma

Bruce Sterling no SXSW - fonte: http://flic.kr/p/e66uVp

confusão entre invisível e desaparecer”, diz Luli. “A gente não sabe quantas vezes por dia usa a energia elétrica, mas sem ela paramos. Dizer que o computador vai morrer é uma frase de efeito de um homem que já errou. Sterling sem-pre lembra o seu erro de previsão sobre a Wiki-pedia – que dizia fadada ao fracasso”, lembra.

O que acontece é que o gadget cria linguagem, explica Luli. Com isso, surgem novas palavras (como slide, pinch e press, que surgiram com o iPhone) e muda o jeito como vemos e experi-mentamos o mundo. A interface é isto: um jeito de experimentar, de acessar informação.

Luli continua: “Boa parte das coisas que usamos são interfaces: livros, música, filme e videogames, por exemplo. Sim, esses objetos tendem a de-saparecer. O computador, entretanto, deve ficar invisível. Funcionar de outro jeito. (...) Falta é algo inteligente como a gente. Temos, hoje, pequenas inteligências. Ainda falta o eletrônico que aprende”.

Segundo André Passamani e Cris Dias, da Mu-tato, que estiveram lá no SXSW e ouviram Ster-ling ao vivo, o que nos levará à frente é exata-mente a experiência e a conversa. “O modelo será fazer barato e compacto, em geral. Mas a

23

Page 24: Revista iMasters #6

regra não é absoluta, tem que saber o que está fazendo”, disse Cris.

Quem tem 40 ou 50 anos viveu grandes mu-danças. Além do fax, que todo mundo tinha no escritório na década de 90, já trocaram a coleção de CDs por HDs lotados de música e hoje fazem backup de arquivos na nuvem. “Hoje a gente vai só com o iPad, compra note-book novo, instala Chrome e Dropbox e está pronto para trabalhar”, diz André.

André e Cris reforçam que a história toda é como se projeta a interface: “a grande história é um algoritmo que permita uma conexão mais inteli-gente entre as redes, aprovações, likes, curtidas”. Ideia que Luli também tem sobre a evolução da interface: “é mais uma questão de software, algo mais inteligente que permita misturar, por exem-plo, busca com bookmarks”, diz o professor.

Nas palavras de Luli: “Tecnologia é como um ônibus, as novidades entram e todo mundo se ajeita. De vez em quando um desce, como o fax ou o zip drive. Se vem um como o iPhone, é como se entrasse um grandão”.

O que está faltando, na opinião dos três espe-cialistas em mercado digital, é a interface que vai permitir digitalizar a vida como nós, humanos, a percebemos. Porque se a tecnologia mais valio-sa é a memória, como lembra André Passamani, todos vivemos a ressaca da hiperconexão.

Falta, ainda, segundo Luli, a função fática. Afi-nal, para os humanos, tudo é linguagem – e

essa é uma das grandes vantagens cognitivas do ser humano. “Nós compreendemos a lin-guagem natural, isso ainda é impossível com os eletrônicos”, explica.

Com a visualização de dados, que o Google Glass permitirá à medida que os aplicativos aparecerem, provavelmente as dicas chegarão na hora exata. E, claro, cada novo gadget vai precisar de tempo para amadurecer e se trans-formar na interface “do futuro”.

Com tudo isso, tanto André Passamani como Cris Dias concordam. E eles acrescentam: “O Sterling acerta quando diz que estamos vicia-dos na disrupção. E o grande barato está na conexão”. André lembra, inclusive, da frase do próprio Sterling que ele traduziu e tatuou: “Custa caro ser humano”.

Cris Dias acrescenta: “tudo isso só faz sentido se juntar pessoas, senão, é spam. A geração da minha filha poderá ter mais views no YouTube do que a Xuxa tem de audiência”.

Com a palavra, Sterling, nas últimas frases de sua fala, em tradução livre: “vá além do fator uau! Ninguém tem as mãos limpas. Nós matamos. Nós criamos o caos, a disrupção e esvaziamos os sentidos. O século XX morreu. Nós matamos o passado com o que fizemos. Nós temos que comer o que matamos. É o jeito digno e cora-joso de incorporar o passado a nós mesmos. Assim, podemos usar esse passado para formar novas coisas. E a fênix poderá surgir”. </>

Luli Radfahrer na Campus Party Brasil 2013 - foto: Cristiano Sant’Anna/indicefoto - http://flic.kr/p/dQYeEg

24 > Capa

Page 25: Revista iMasters #6
Page 26: Revista iMasters #6

Informações e dicas sobre projetos Open Source

26 > Código Livre

Alê Borba é Gerente de TI e Comunidades do iMasters, e desenvolve projetos como o 7Masters, Dojos e outros.

Por @ale_borba

Web2CanvasEsse aplicativo foi construído, inicialmente, no Hackathon do Sebrae, na Campus Par-ty #6, onde o desafio era criar um aplicativo que empregasse a metodologia canvas para desenho do modelo de negócios. Totalmen-te web e tendo como tecnologia por trás o web2py, um framework web em Python, esse aplicativo evoluiu muito e hoje se destaca como um dos únicos na área. Para contribuir, você pode acessar seu código fonte no link: http://bit.ly/17vwgp8, e o aplicativo pode ser utilizado no link: http://bit.ly/17vwhmj.

BottleÉ um micro framework Python, rápido, sim-ples e leve para web. É distribuído de forma simples, como um módulo single file, e não possui nenhuma dependência que não seja as da Standard Library. Fazer uma API RES-Tful e/ou qualquer outro sistema web simples ou até mesmo complexo é uma tarefa bastan-te simples se utilizarmos o Bottle. Para saber mais do projeto, acesse http://bottlepy.org

ownCloudÉ um app escrito em PHP para armazenamen-to de arquivos, sincronização e compartilha-mento. Mas é possível, também, sincronizar contatos e agenda. Como é uma aplicação open source, você pode baixá-lo e instalá-lo em qualquer computador/servidor que quiser. Dessa forma, você sabe exatamente onde os seus dados estão armazenados. Essa alter-

nativa open source ao Dropbox pode ser en-contrada em http://owncloud.org/

FreeNASÉ uma plataforma para Storage, baseada no FreeBSD, simples, rápida e estável. Além de uma comunidade internacional compro-metida de desenvolvedores e usuários, ela conta com muitas facilidades e funcionalida-des que a deixam bem à frente das outras. O FreeNAS suporta compartilhamento atra-vés de sistemas Windows, Apple e unix-like, suporta RAID e, desde as suas últimas ver-sões, ele incluiu o ZFS, que permite controle de storages de alta capacidade. Para saber mais, acesse http://www.freenas.org/

ArakoonÉ uma store open source, baseada em cha-ve-valor, que garante consistência acima de tudo e é voltada especificamente para pe-quenos projetos e que não necessitem de muita segurança. Funciona muito bem para updates atêmicos e consistência através das réplicas. Não procure o Arakoon se você re-almente precisa de muita escalabilidade. Mais informações em http://arakoon.org </>

Page 27: Revista iMasters #6
Page 28: Revista iMasters #6

28 > Desenvolvimento

um microframework de respeitoPor @alganet

Sem dúvida o componente mais famoso do Res-pect é o Respect\Validation, feito para validar qual-quer informação e, se houver uma falha, indicá-la de forma clara. O Exemplo 1 valida se uma string tem de 1 a 15 caracteres, somente letras, números e o caractere “_”. Esse é o formato de um nome de usuário do Twitter.

Exemplo 1: Validando um nome de usuário do Twitter

<?phpuse Respect\Validation\Rules;$usernameValido = new Rules\AllOf(, new Rules\String new Rules\Alnum(“_”), new Rules\Length(0, 15));$usernameValido-> validate(‘phprespect’); //true$usernameValido-> validate(‘Foo#bar’); //false

<?phpuse Respect\Validation\Validator as v;$usernameValido = v::string()-> alnum(“_”)->length(0, 15);$usernameValido-> validate(‘phprespect’); //true$usernameValido-> validate(‘Foo#bar’); //false

Era difícil imaginar, lá em 2010, que um modesto projeto PHP brasileiro no GitHub, sem nenhuma empresa por trás e sem nenhum programador dedicado 100% para desenvolvê-lo, ganharia milhares de usuários e dezenas de contribuidores de diversos países.

O nome Respect veio de uma das preocupações iniciais do projeto: não apenas respeitar standards e patterns mas tornar o uso deles uma experiência agradável, e não um inferno particular.

O Respect é conhecido tanto por sua flexibilidade quanto por sua elegância, e o mesmo validador de cima pode ser escrito como no Exemplo 2.

Exemplo 2: Validando um nome de usuário do Twitter usando a API fluida

Há mais do que o Validation pra usar. O Respect é uma sólida caixa de ferramentas para qualquer programador PHP. Existem ferramentas para ma-nipular bancos de dados, validar vários tipos de informações diferentes, configurar componentes, criar APIs e páginas, testar e automatizar aplica-ções. Muitas outras ferramentas do projeto estão em desenvolvimento.

Page 29: Revista iMasters #6

29

Exemplo 3: Obtendo dados de tabelas de um banco de dados já existente usando o Respect\Relational

<?phpuse Respect\Relational\Mapper;// Pode ser SQLite, MySQL, PostgreSQL ou qualquer driver PDO.$banco = new PDO(‘sqlite:db.sq3’);$mapeador = new Mapper($banco);// Todos os comentários do artigo com id=5 em uma única SQL$comentarios = $mapeador->comments-> articles[5]->fetchAll();

O Respect veio para que você não tenha que es-colher apenas um framework e seguir com ele pra sempre. Frameworks são como trilhos (alguns tem até esse nome!), e se você percebe que foi no sen-tido errado ou se o projeto muda de direção não há muito que fazer. O Respect é uma espécie de microframework e esquiva disso tornando decisões grandes em pequenas.

Você pode usar o Respect desde o começo de um projeto ou adotá-lo depois, sem gambiarras. Pode usar ele sozinho ou com outras ferramentas ou pode usar somente uma parte dele. Tudo é pro-jetado para ser extremamente reutilizável e fácil de manter.

Exemplo 4: Criando uma rota pro caminho /users/algumacoisa na URI com Respect\Rest.

<?php

use Respect\Rest\Router;$roteador = new Router;$roteador->get(‘/users/*’,

function($screenName) { echo “User {$screenName}”; });

Para quem deseja utilizar o Respect com outra so-lução, existem pontos de integração com ferramen-tas bastante populares:

• O Respect Bundle para o Laravel disponibiliza os componentes de validação (Respect\Valida-tion), bancos de dados (Respect\Relational) e Configuração (Respect\Config).

• O próprio componente Respect\Validation já possui integração nativa pra aproveitar valida-dores do Zend Framework 1 e 2 ou Symfony 2.

• Há um Bundle para o Symfony2 em desenvol-vimento que permitirá utilizar o mecanismo de Annotations com o Respect\Validation.

Qualidade também é algo que Respect também procura. Os componentes são todos testados desde o começo do desenvolvimento e miram em 100% de cobertura de código.

Se há uma coisa que o Respect mostra é que a comunidade brasileira está preparada para produzir software tão bem quanto qualquer outra comunida-de estrangeira.

Conheça mais do Respect • respect.li

• twitter.com/phprespect

• github.com/Respect

• Exemplos: github.com/Respect/samples

• Benchmarks: bit.ly/XJ3abk

• Respect Bundle para Laravel: bit.ly/XJ3iaO

• Respect\ValidationBundle para Symfony: bit.ly/XJ3rLk

Conheça outros microframeworks similares ao Respect em microphp.org. </>

Alexandre Gaigalas é Desenvolvedor no Yahoo! Brasil e fã da web. http://about.me/alganet

Page 30: Revista iMasters #6

30 > Por dentro da W3C

O futuro do HTML5: HTML 5.1Por @reinaldoferraz

O HTML5 está a poucos passos de se tornar

recomendação do W3C. Seu atual status, em abril de

2013, era de documentação “W3C Candidate

Recommendation” (www.w3.org/TR/html5/). Já estamos familiarizados

com a grande parte das novidades que o HTML5

trouxe em relação a novos elementos, atributos e APIs

para a evolução da web. Mas que tal dar uma olhada

no futuro? O que esperar para as próximas versões

do HTML e quais são as ideias e sugestões de novos

elementos propostos?

HTML 5.1 Nightlywww.w3.org/html/wg/drafts/html/master/

Essa especificação é a continuação do HTML5, com revisões da linguagem criada pelo W3C. Nessa versão, novos elementos continuam sen-do adicionados baseados em pesquisas sobre as práticas de criação predominantes. Uma atenção especial continua a ser dada à definição de crité-rios de conformidade claros para os agentes do usuário, em um esforço para melhorar a interope-rabilidade e garantir a evolução da Web. Em abril de 2013, o HTML5.1 estava em “W3C Editor’s Draft”, ou seja, ainda é um documento que vai passar por revisões.

Existem poucas diferenças ao fazer uma compara-ção direta dessa edição com a documentação atual do HTML5, mas algumas novidades anunciadas e publicadas nesse draft animaram a comunidade de desenvolvimento. Importante reforçar que, como esse documento ainda é um esboço, essas novi-dades ainda podem sofrer alterações.

Um elemento para chamar de main www.w3.org/html/wg/drafts/html/master/grouping-content.html#the-main-element

No final de 2012, o grupo de trabalho de HTML do W3C iniciou um trabalho para incluir um novo elemento na documentação do padrão. Durante muito tempo, discutiu-se bastante sobre novos elementos semânticos do HTML5 (article, header, footer, aside etc.), mas não existia um elemento principal para agrupá-los. Quando surgia a necessidade de colocar o conteúdo principal

Page 31: Revista iMasters #6

em um container, o desenvolvedor utilizava um elemento div para agrupar esse conteúdo. O objetivo dessa inclusão é dar cada vez mais significado aos elementos da página.

Pois bem, agora um elemento com esse objetivo está sendo discutido e colocado na documenta-ção. O elemento main representa o elemento prin-cipal do corpo de um documento ou aplicação. Só deve existir um elemento main na página, e ele não deve ser posicionado dentro de outros elementos como article, section, nav, etc.

<main> <h1>Skates</h1> <p>O Skate é uma boa forma de divertir crianças</p> <article> <h2>Longboards</h2> <p>Longboard é um tipo de skate com uma distância maior entre eixos e rodas.</p> <p>...</p> <p>...</p> </article></main>

A documentação também aconselha os autores de páginas a utilizar ARIA role=”main” no elemento principal até que os agentes de usuário implemen-tem essa função de forma desejada. Importante lembrar que o atributo role foi publicado como re-comendação do W3C em março de 2013 (www.w3.org/TR/role-attribute/).

<main role=”main”> ...</main>

Tabelas classificáveiswww.w3.org/html/wg/drafts/html/master/tabular-data.html#table-sorting-model

O atributo sortable é um atributo booleano em ele-

mentos de tabelas. Quando presente, indica que o

agente de usuário deve permitir ordenar a coluna

ou linha de uma tabela. Por exemplo, para fazer

uma coluna classificável em uma tabela com um

thead, a coluna deve ter um elemento th. Já no

caso de tabelas sem thead, a coluna deve ter o elemento th no primeiro elemento de tr da tabela, quando esse elemento tr não está dentro de um tfoot. Essa técnica só funcionará se a linha ou co-luna não for separada com colspan e rowspan.

Será possível utilizar dentro do atributo sortable o valor reversed, para definir a direção da classifica-ção da tabela quando necessário.

E o que mais pode vir para as próximas versões?O grupo de trabalho do HTML está em constante discussão e recebe diversas sugestões para se-rem incluídas na linguagem de marcação das pró-ximas versões do HTML. É possível ter uma ideia de algumas propostas no documento propostas de Atributos e Elementos para o HTmL (www.w3.org/html/wg/next/markup/). Existem diversas sugestões de novos elementos e atributos, desde um elemento para reconhecimento de voz até mes-mo um atributo para identificar o download de um arquivo dentro de um elemento de âncora.

Vale lembrar que tudo que foi comentado neste ar-tigo está sujeito a mudanças na documentação e até o momento não foi implementado por nenhum agente de usuário. Tudo isso é parte do constante trabalho do W3C de garantir a evolução da web de forma livre, aberta e contando com a participação da comunidade, não só para a solução de bugs, mas sugerindo novas funcionalidades para essa lin-guagem de marcação.

Você também pode acompanhar as novidades da evolução da linguagem de marcação pela página do HTmL Working Group: www.w3.org/html/wg/ </>

Reinaldo Ferraz é especialista em desenvolvimento web do W3C Brasil. Formado em Desenho e Computação Gráfica e pós graduado em Design de Hipermídia pela Universidade Anhembi Morumbi, em São Paulo. Trabalha há mais de 12 anos com desenvolvimento web. Coordenador do Prêmio Nacional de Acessibilidade na Web e do Grupo de Trabalho em Acessibilidade na Web e representante do W3C Brasil em plenárias técnicas do W3C.No Twitter é @reinaldoferraz

31

Page 32: Revista iMasters #6

32 > Opinião

Cloud ComputingMuitas das novas tecnologias são baseadas em computação em nuvem e conec-tividade constante. Quais são os problemas e desafios que são gerados com es-sas tecnologias e até que ponto privacidade e segurança estão sendo discutidos?

Cezar Taurion - New Technologies Manager/Technical Evangelist da IBM

Toda mudança de paradigma acarreta descon-fianças e receios. Segurança é um deles. Embora se fale muito nos riscos de segurança em nuvens, existem alguns aspectos positivos que merecem atenção. Um deles é que, no modelo de compu-tação em nuvem, o conteúdo de desktops, note-books e tablets estará na nuvem, e não nos dispo-sitivos. Ora, como as estatísticas apontam que 1/3 dos problemas de violação de segurança devem-se ao uso de informações obtidas em laptops rouba-dos, o fato de as informações estarem nas nuvens e não mais nos seus HDs é bastante positivo.

Outros aspectos positivos decorrentes de uso de nuvens, sob a ótica de segurança, são que os upgrades de software que corrigem brechas de segurança são feitos automaticamente, além da uniformidade dos padrões de segurança, pois to-dos passam a ter os mesmos padrões. No modelo atual, uma grande parcela dos usuários não atua-liza seus softwares adequadamente, deixando os bugs que permitem vulnerabilidades ainda ativos, e os usuários também podem ter mais ou menos re-cursos de segurança ativos em seus PCs e laptops.

Além disso, muitos data centers de empresas de pequeno a médio porte (e mesmo de grande porte) não têm bons procedimentos e nem políticas de se-gurança implementados tal como nuvens ofertadas por provedores de alto nível, não só procedimentos e recursos sofisticados e auditados, mas também um staff técnico com uma expertise acumulada que a maiorias das empresas jamais teria. Na minha opinião, em breve, um dos principais argumentos de venda das nuvens será exatamente a seguran-ça: “quer mais segurança? Venha para nuvem!”.

Luli Radfahrer - professor de Comunicação Digital da ECA-USP

A resposta é difícil, já que varia conforme o serviço e o tipo de dado. Um serviço que armazene senhas ou dados contábeis precisa ser muito mais confiá-vel do que um que armazene tuitadas ou fotos de pés e pratos de comida como o Instagram. Como em qualquer fornecedor, é preciso fazer uma boa pesquisa para não entrar em uma fria. Mas em ge-ral é mais simples e seguro do que armazenar es-ses dados em casa ou - muito pior - em notebooks carregados por aí. Se o serviço é bom, o acesso aos dados só tende a melhorá-lo. Pense nas reco-mendações de livros na Amazon ou de filmes no Netflix como bons exemplos.

Mas colocar um material na nuvem não garante sua segurança - conforme o caso, pode deixá-lo ainda mais desprotegido. Muitas pessoas têm o mau há-bito de armazenar suas senhas em browsers, defi-nir termos óbvios ou compartilhá-los abertamente. É muito difícil que um hacker invada um grande servidor de uma empresa cujo modelo de negócios se baseia em segurança. Mas é muito mais fácil descobrir o nome de usuário e senha de alguém e, através desses dados, entrar na conta.

Gilberto Sudré - Professor, Consultor e Pesquisador nas áreas de Segurança da Informação e Computação Forense

A computação em nuvem apresenta muitas vanta-gens, especialmente em relação a economia e fle-xibilidade que ela pode proporcionar na infraestru-tura de TI. Apesar das vantagens, também existem questões que devem ser avaliadas com cuidado antes de se embarcar nesta solução. Grandes de-safios estão presentes para quem já usa ou está pensando em utilizar esta tecnologia, a começar

Page 33: Revista iMasters #6

33

pelas ameaças a segurança e privacidade dos da-dos armazenados na nuvem. Outra questão é o marco legal para este uso. Perguntas sobre a juris-dição aplicável aos dados armazenados na nuvem em servidores localizados no exterior ainda preci-sam ser mais bem esclarecidas.

João Batista Neto - Desenvolvedor Web na iMasters

Penso que o maior problema seja garantir a integri-dade e a segurança da informação; da mesma for-ma, também há o desafio de convencer o usuário de que sua informação estará segura.

Apesar de ser cada vez mais comum utilizarmos Software como Serviço, Plataforma como Serviço ou Infraestrutura como Serviço, cloud ainda é uma tecnologia em desenvolvimento. Muitos trabalhos têm sido elaborados no sentido de garantir a priva-cidade e segurança da informação do usuário, mas um longo caminho ainda precisa ser percorrido, tanto no desenvolvimento da tecnologia, quanto nas discussões sobre privacidade e segurança.

Entre as iniciativas que estão sendo feitas nesse sentido, o Departamento do Comércio norte ame-ricano (U.S. Department of Commerce), através do NIST (National Institute of Standards and Techno-logy), elaborou um documento chamado “Orienta-ções sobre segurança e privacidade em Computa-ção em nuvem pública” com o objetivo de orientar as organizações e governos sobre segurança e privacidade em cloud.

Wagner Marcelo - Sócio da Intellecta, Coordenador de Startups na PUC-SP e Fundador do Startups Evolution.

Com a disponibilização cada vez maior de dados na chamada nuvem, existem dezenas de oportu-nidades e desafios que não estão somente na ar-mazenagem, mas sim em como eles poderão ser tratados, pois através do conceito de Big Data o que for coletado pode gerar informações relevantes para governos, empresas e usuários.

Hoje governos municipais, estaduais e até alguns setores do federal estão adotando o armazena-mento em nuvem, contratando grandes corpo-rações estrangeiras sem se preocuparem com a segurança do acesso a essas informações que podem ser realizadas de forma privilegiada por go-vernos de outros países.

O problema é reflexo da falta de investimento da indústria de software em novas tecnologias de im-pacto, pois o risco para os investidores é alto. O Brasil tem um perfil de follower, com raras exce-ções, mas muito se gasta em pesquisas que não rendem grande frutos, sendo que o motivo é sem-pre o mesmo, falta investidor para escalar, falta cul-tura que incentive a criação de tecnologias disrupti-vas e falta a aproximação das universidades junto a indústria e governo.

Se analisarmos o atual cenário, o Governo vem fo-mentando a pesquisa, de certa forma, através de alguns órgãos como a FINEP, FAPESP entre outros, mas o grande gargalo está em conseguir escalar e dar relevância ao que está sendo desenvolvido pela academia e pelas empresas.

Kemel Zaidan - Jornalista, nerd, artista, programador. É community manager no iMasters e membro ativo da comunidade de software livre.

Computação em nuvem significa que seus dados (e de seus parceiros!) estarão potencialmente expos-tos a qualquer um com acesso à Internet.

Neste caso, a primeira coisa a se fazer é definir o que vai para a nuvem. Informações que só têm va-lor para a própria empresa podem ser hospedadas em uma nuvem pública. Para dados relativamente sensíveis, a nuvem privada tende a ser uma solução melhor, desde que as devidas precauções sejam tomadas. Já dados sigilosos e altamente valiosos devem ficar mais bem protegidos e permanecer “dentro de casa”, onde a possibilidade de controle sobre eles é maior.

O fácil acesso a informações é algo muito sedutor na computação em nuvem, mas faz com que seja necessário redobrar a atenção com alguns aspec-tos de segurança, especialmente políticas de aces-so, bases de dados, e atualizações de software. Vulnerabilidades de segurança precisam ser corri-gidas com muito mais agilidade do que quando o servidor estava disponível apenas para a rede inter-na da sua empresa, e criptografia, tanto na trans-missão dos dados quanto em seu armazenamento, passa a ser um tema de fundamental importância.

A conectividade é uma realidade que chegou para ficar e quem não estiver preparado para enfrentar os desafios impostos por ela corre o risco de ficar, literalmente, isolado. </>

Page 34: Revista iMasters #6

34 > Open Data

Dados Abertos: utilizando SQL para pequenas análises de dadosPor @netojoaobatista

Mais do que uma tradução, este artigo se trata, na verdade, de uma adaptação. No artigo ori-ginal, Using SQL for Lightweight Data Analysis (http://bit.ly/11AjYAe), escrito por Rufus Pollock, foram utilizados dados sobre despesas de Londres em janeiro de 2013. Na tentativa de contextualizar o assunto, vou usar aqui dados disponibilizados pelo Governo Brasileiro sobre o PAC (Programa de Ace-leração do Crescimento).

Este artigo introduz o uso da SQL para pequenas análises de dados, através da análise de pequenos conjuntos de dados abertos para responder a se-guinte questão: quem foram os maiores beneficia-dos com as obras do PAC em 2012?

Durante o artigo, além da SQL (e SQLite), ilustrare-mos como localizar, filtrar e carregar dados tabu-lares em uma base de dados relacional, para que possam ser facilmente manipulados.

Localizando os dadosA primeira coisa que precisamos fazer é localizar os dados online. Vamos começar com uma busca, por exemplo: “dados obras do PAC”. Essa busca nos levará, rapidamente, ao dados.gov.br, mais especificamente, à página Obras do PAC - Pro-grama de Aceleração do Crescimento / Obras do PAC em CSV referentes ao 6º balanço - 12/2012 (http://bit.ly/11TS2Jo).

Page 35: Revista iMasters #6

35

Preparando os dadosNo artigo original, o autor descreve os passos ne-cessários para limpar o arquivo CSV, removendo linhas ou colunas vazias, linhas em branco no final do arquivo, etc.

No nosso conjunto de dados, esse tipo de problema não ocorre, porém, temos um problema de conjunto de caracteres. O arquivo CSV utiliza um formato AS-CII estendido em vez de UTF-8. Para resolver esse problema, podemos usar o utilitário iconv (http://bit.ly/ZCcdfn) para fazer a conversão:

iconv -f 857// -t UTF-8 pac_2012_12.csv >pac_2012_12.utf8.csv

# isso carregará nosso arquivo CSV em uma nova tabela chamada “pac”# dentro de uma nova base SQLite chamada pac.sqlitecsv2sqlite.py pac_2012_12.csv pac.sqlite pac

$ sqlite3 pac.sqliteSQLite version 3.7.13 2012-06-11 02:05:22Enter “.help” for instructionsEnter SQL statements terminated with a “;”sqlite>

sqlite> SELECT ‘sig_uf’, SUM(‘investimento_total’)...> FROM ‘pac’...> GROUP BY ‘sig_uf’...> ORDER BY SUM(‘investimento_total’) DESC...> LIMIT 20;

sed -i “s_\(..\)/\(..\)/\(....\)_\3-\2-\1_g” pac_2012_12.utf8.csv

A linha acima fará a leitura do arquivo pac_2012_12.csv, converterá o conjunto de caracteres e salvará o conteúdo novamente em pac_2012_12.csv.

Outro detalhe que precisamos ajustar, é a questão da data. No Brasil, utilizamos o formato dd/mm/yyyy. Já na base de dados, precisamos utilizar o formato yyyy-mm-dd. Isso pode ser facilmente re-solvido com o seguinte:

A linha acima fará a conversão de todas as ocor-rências do padrão dd/mm/yyyy e converterá para yyyy-mm-dd. Caso você esteja trabalhando com algum conjunto de dados que, além dos pon-tos descritos aqui, ainda tenha linhas com metada-dos, linhas ou colunas em branco, não deixe de ler o artigo original para saber como lidar com eles.

Analizando dados em uma base de dados relacionalNosso objetivo é trabalhar com os maiores bene-ficiados e quais são as áreas à que o dinheiro é destinado. Para um pequeno conjunto de dados, poderíamos utilizar uma planilha eletrônica. Entre-tanto, vamos seguir um caminho um pouco diferen-te e utilizar uma abordagem mais apropriada, com uma base de dados relacional.

Utilizaremos o SQLite, um banco de dados relacio-

nal, open-source, que apesar de leve, é bem com-pleto para nosso propósito.

Carregando os dados no SQLiteAgora que já temos o conjunto de dados, preci-samos carregá-lo no SQLite. Para isso, pode-mos utilizar um pequeno script python chamado csv2sqlite. Como o nome sugere, ele carrega o conteúdo de um arquivo CSV em uma base SQLi-te. O código completo está no apêndice abaixo, mas você pode fazer download a partir desse gist: http://bit.ly/101Io3o. Uma vez baixado, você pode utilizá-lo assim:

Nota: Caso você esteja trabalhando com Windows e as ferramentas head, tail, sed, iconv e o python, utilizadas neste artigo e no original não estejam disponíveis no seu ambiente, você poderá fazer o download da base de dados pac.sqlite.

Análise IVamos até o shell do sqlite executar algumas instruções SQL:

Dependendo da versão do sqlite, é possível que você precise executar sqlite em vez de sqlite3. Agora que estamos dentro do shell do sqlite, vamos executar uma instrução simples:

Page 36: Revista iMasters #6

Como isso funciona? Bom, o ponto chave aqui é o GROUP BY. O que ele faz é agrupar todas as linhas com o mesmo valor na coluna sig_uf. Podemos utilizar o SELECT para dizer quais campos ou resultados de funções que quere-mos na listagem dos resultados. No caso acima, nós apenas selecionamos o sig_uf e a soma de todo o investimento_total das linhas que pos-suem o mesmo valor no sig_uf. Feito isso, limita-mos o resultado em apenas vinte linhas e, final-mente, ordenamos do maior valor para o menor valor. O resultado dessa consulta segue abaixo:

Uf Investimento

SP 171740111838.0

RJ 49473735257.08

MG 41298926989.44

PR 28724574100.32

RS 27157499074.68

BA 24401562534.44

DF 16320196665.42

GO 15073583842.54

PE 13666131507.18

SC 13633033294.1

CE 13033312986.18

PA 12473700610.37

MA 9472695230.34002

AM 8926094516.68

ES 7630901437.12

MT 6906802672.1

RN 6465137159.22

MS 6189088362.3

SE 5934839614.14

PB 5509364605.14001

Podemos utilizar outras funções também, por ex-emplo, quais são as cinco áreas mais beneficiadas e qual é o investimento médio feito nessas áreas?

36 > Open Data

sqlite> SELECT ‘dsc_orgao’,SUM(‘investimento_total’), AVG(‘investimento_total’)...> FROM ‘pac’...> GROUP BY ‘dsc_orgao’...> ORDER BY SUM(‘investimento_total’) DESC...> LIMIT 5;

Orgão Investimento Total Investimento médio

Ministério das Cidades

490643623250.721 39456664.5155385

Fundação Nacional da Saúde

7962934548.78002 510509.972354149

Ministério da Educação

3594551103.33999 305659.10742687

Ministério da Cultura

775253231.56 1076740.59938889

Ministério da Saúde

768838158.779999 49058.0754709035

Isso nos dá uma boa noção de como são distribuí-dos os recursos; se existem, por exemplo, vários itens recebendo pequenas quantidades, ou poucos itens recebendo grandes quantidades.

O que vimos aqui, é que a maior parte dos recur-sos são utilizados pelo Ministério das Cidades, cuja atribuição é a de “planejamento urbano, políticas fundiárias e imobiliárias, (que incluem zoneamento, regularização da posse ou propriedade, código de obras) requalificação de áreas centrais, prevenção a riscos de desmoronamento de encostas, recu-peração de áreas ambientalmente degradadas são atribuições municipais”.

Análise II - FiltragemAgora que sabemos que a maior parte dos recursos são utilizados pelo Ministério das Cidades, podemos ir um pouco mais a fundo: quais são os estados mais beneficiados pelo Ministério das Cidades?

sqlite> SELECT ‘sig_uf’, SUM(‘investimento_total’)...> FROM ‘pac’...> WHERE ‘dsc_orgao’ = “Ministério das Cidades”...> GROUP BY ‘sig_uf’...> ORDER BY SUM(‘investimento_ total’) DESC...> LIMIT 5;

Page 37: Revista iMasters #6

37

sqlite> SELECT ‘dsc_orgao’, SUM(‘investimento_total’)...> FROM ‘pac’...> WHERE ‘dsc_orgao’ LIKE “%Saúde”...> GROUP BY ‘dsc_orgao’...> ORDER BY SUM(‘investimento_total’) DESC;

SELECT‘sig_uf’ AS ‘UF’,‘dsc_titulo’ AS ‘Obra’,“R$ “ || MAX(‘investimento_total’) AS ‘Investimento Total’,(‘val_lat’ || “,” || ‘val_long’) AS ‘Coordenadas’FROM ‘pac’WHERE ‘investimento_total’ != “” AND ‘val_lat’ != “” AND ‘val_long’ != “”GROUP BY ‘sig_uf’ORDER BY ‘sig_uf’;

sqlite> .headers onsqlite> .mode csvsqlite> .output top20-obras.csvsqlite> SELECT...> ‘sig_uf’ AS ‘UF’,...> ‘dsc_titulo’ AS ‘Obra’,...> “R$ ” || MAX(‘investimento_total’) AS ‘Investimento Total’,...> (‘val_lat’ || “,” || ‘val_long’) AS ‘Coordenadas’...> FROM ‘pac’...> WHERE ‘investimento_total’ != “” AND ‘val_lat’ != “” AND ‘val_long’ != “”...> GROUP BY ‘sig_uf’...> ORDER BY ‘sig_uf’;

Orgão Investimento

Fundação Nacional da Saúde 7962934548.78002

Ministério da Saúde 768838158.779999

Uf Investimento

SP 171158656371.58

RJ 49089877209.84

MG 40175377781.16

PR 27928207915.2

RS 26717924226.26

Ou, então, quanto dos recursos do PAC são gastos com saúde, seja através do Ministério da Saúde, ou através da Fundação Nacional da Saúde?

Aqui utilizamos o WHERE para restringir os resulta-dos à apenas aos órgãos que possuem Saúde em seu nome, como é o caso da Fundação Nacional da Saúde (Funasa) e do Ministério da Saúde.

Podemos, ainda, saber quais são os estados mais beneficiados pelo Ministério da Saúde:

sqlite> SELECT ‘sig_uf’, SUM(‘investimento_total’)...> FROM ‘pac’...> WHERE ‘dsc_orgao’ LIKE “%Saúde”...> GROUP BY ‘sig_uf’...> ORDER BY SUM(‘investimento_total’) DESC...> LIMIT 5;

Uf Investimento

PA 785712631.78

CE 746274322.939999

MG 722866871.88

PB 618124738.899999

BA 546496245.64

Visualização gráficaUma informação muito especial que temos nesse conjunto de dados do PAC, é a latitude e longitude de onde os recursos estão sendo empregados. Essa informação é especialmente interessante, quando utilizamos alguma ferramenta de plotagem de mapas, como é o caso do Google Maps Engine (mapsengine.google.com)

A primeira coisa que precisamos fazer, é transfor-mar os dados em alguma informação que quere-mos no mapa. Por exemplo, quais são as 20 obras que mais receberam recursos?

Após encontrar a informação que desejamos, pre-cisaremos exportá-la para CSV. Isso pode ser feito através do próprio SQLite, por exemplo:

Page 38: Revista iMasters #6

38 > Open Data

• A primeira linha, .headers on, diz para o SQLite que queremos os cabeçalhos no arquivo CSV;

• A segunda linha, .mode csv, diz para o SQLite que queremos que o resultado seja no formato CSV;

• A terceira linha, .output top20-obras.csv, diz para o SQLite que, em vez de mostrar os re-sultados na tela, ele deve salvar em disco, no arquivo top20-obras.csv;

• A quarta linha é a informação que desejamos obter dos dados.

Com o arquivo top20-obras.csv, vamos até o Google Maps Engine e vamos fazer o upload do arquivo. Para isso, vamos clicar na pastinha que fica ao lado do botão Add Layer:

Após clicar no botão, uma tela será exibida para a escolha do arquivo. Assim que selecionamos o arquivo top20-obras.csv, a seguinte tela é exibida:

Nessa tela, devemos selecionar o item Coordena-das. É onde o Google Maps Engine irá colocar os

pins. Após selecionar a coluna Coordenadas e cli-car no botão Continue, uma nova tela será exibida:

Nessa tela devemos escolher a coluna Obra, que será utilizada para o título dos pins no mapa. Agora é só clicar no botão Finish e pronto, o resultado será semelhante ao abaixo:

Se clicarmos em algum dos pins, veremos algo se-melhante ao abaixo:

Page 39: Revista iMasters #6

Veja os dados no Google Maps Engine através do endereço http://bit.ly/ZRkIQ6.

ResultadosComo podemos ver, obter informações de pequenos conjuntos de dados é, de certa forma, bastante simples. Tudo o que precisamos, são algumas perguntas. Sobre nossa pergunta inicial, descobrimos que o estado de São Paulo é o que recebeu a maior quantidade de recursos. Descob-rimos também que a maior parte dos recursos do PAC são utilizados em obras do Ministério das Ci-dades. Além disso, descobrimos que os maiores investimentos na área da saúde são destinados ao estado do Pará. Por fim, conseguimos plotar um mapa com um conjunto de informações obtidas através dos dados, utilizando as coordenadas ge-ográficas para identificar as obras.

Isso tudo foi feito utilizando um conjunto sim-ples de dados, com apenas uma tabela. Alguns conjuntos de dados são mais complexos, muitas vezes distribuídos em várias tabelas. É claro que as consultas vão ficando mais complexas, con-forme o volume de dados e a quantidade de tab-elas, mas é possível extrair informação de várias tabelas ao mesmo tempo, apenas cruzando in-formações entre elas.

ApêndiceSaiba mais como lidar com dados:

• Mais sobre CSV – Comma Separated Variables: http://bit.ly/ZUxobV

• Extensão para o Google Chrome que permite a visualização de arquivos CSV: http://bit.ly/12Rn8Bt

• Você também pode brincar com SQL online, uti-lizando o SQLFiddle: http://sqlfiddle.com

a. Ou até uma implementação do SQLite em Javascript: http://bit.ly/z9gSbz

• Existe diversos recursos online para aprender SQL, por exemplo (em inglês):

b. A Gentle Introduction to SQL using SQLite by Toby Thibodeaux - http://bit.ly/fU3L4U

c. Introducing SQL for Lightweight Data Ma-nipulation by Tim McNamara - http://bit.ly/p4UB87

d. Command Line Shell For SQLite by D. Richard Hipp et al. - http://sqlite.org/sqlite.html </>

39

João Batista Neto é engenheiro de aplicações e trabalha com ambiente web desde 2000 em diversas linguagens, como Java e PHP, dedicando esforços ao desenvolvimento de bibliotecas reutilizáveis para a comunidade. Especialista em integração de sistemas, possui várias bibliotecas reutilizáveis publicadas como open-source para a comunidade, como biblioteca

Cielo, PayPal, ECT (Correios), BuscaPé, Lomadee, Twitter, Facebook entre várias outras. É administrador do Fórum iMasters e iMasters Code, onde compartilha conhecimento com a comunidade de desenvolvedores. Também é autor de artigos no Portal iMasters e de cursos no iMasters PRO.

Page 40: Revista iMasters #6

40 > +Interatividade

O cachorro, o Leap Motion e a velocidade do ventoPor @pedrogravena

Porque o cachorro lambe o saco? Porque ele pode :P

Eu tenho um amigo que sempre lembra dessa pia-dinha ridícula quando algum cliente reprova algo sem sentido. Afinal ele reprova porque ele conse-gue, porque ele pode reprovar, ué.

Piadinhas ridículas à parte, quero contar uma expe-riência de “porque eu posso” que venho passando, relacionadas a criação de novas tecnologias.

Há algum tempo eu comprei uma pulseira da Nike, a Fuel Band.

Ela quantifica todos os seus movimentos.

Em verdade, no começo, não vi muita função naquilo.

Mas hoje, uso todos os dias.

Sabe por quê?

Porque eu posso! :P

Explico: é uma tecnologia bem bacana, mas sem nenhuma explicação racional. Ela mede seus mo-vimentos e te devolve uma valor em “fuels”. Esses fuels não tem relação nenhuma com alguma medi-da conhecida.

Não são metros.

Não são calorias.

Não são quilômetros/hora.

São Fuels.

Mas eu viciei nesses malditos fuels. Sabe por quê?

Simplesmente porque eles existem.

E agora posso medi-los.

Fico querendo bater sempre minha meta do dia. Meta de calorias? De metros? De força? Não de Fuels.

Mas por quê? Porque eu posso.

Bobo né. Pois é.

Mas é uma verdade cada vez mais presente na nossa vida.

Existem hoje uma série de tecnologias “eu posso” e que, na minha opinião, são sempre muito válidas.

Será que você vai usar o Leap Motion?

Vai.

Sabe por quê? Porque você pode. Pode controlar a interface sem tocar nela.

Mas não é mais prático usar o teclado? Às vezes.

Mas quem se importa?

Será que você vai usar o MYO?

Vai, sabe por quê? Porque você pode. Pode con-trolar a interface sem tocar nela, usando uma pul-seira.

Mas não é mais prático o Leap Motion? Às vezes.

Page 41: Revista iMasters #6

41

Mas quem se importa?

Mas será que você vai continuar usando o teclado?

Vai. Sabe por quê? Porque você pode.

E, ao final, você vai acabar se convencendo, um dia, mesmo quando você puder ditar um texto e a Siri ou o Google Translate transcreverem, de que o teclado “é mais prático, às vezes”.

Enfim, o que quero dizer com isso tudo? Que vive-mos na era das invenções. E que sempre podem surgir novas tecnologias, que façam desde seu car-ro ler as suas redes sociais, até o seu iPhone medir a velocidade do vento.

E você pode ou inventar, ou usar tudo isso.

Sabe por quê?

Bom, a essa altura você já sabe :P

Para saber mais:

• Leap Motion: https://www.leapmotion.com/

• MYO: https://getmyo.com/

• Carro com redes sociais: http://bit.ly/ZPK8xq

• iPhone e velocidade do vento, artigo na GizMag: http://bit.ly/103SjHk </>

Leap Motion (www.leapmotion.com)

Pedro Gravena é Diretor de Criação Digital da Wieden+Kennedy São Paulo, já foi arquiteto, músico, artísta plástico, e está estudando para ser um inventor frustrado. Conheça mais em @pedrogravena e pedrogravena.posterous.com

Page 42: Revista iMasters #6

42 > Hardware

Trabalhando com protótiposPor @pichiliani

Neste artigo vou falar um pouco, sob o ponto de vista do desenvolvimento, como é trabalhar com protótipos de hardware. Quem trabalha com pes-quisa ou desenvolvimento de novas tecnologias pode se deparar com protótipos e provas de con-ceitos de produtos e saber trabalhar com este re-curso pode ser muito útil nestas situações.

Geralmente, protótipos de hardware são criados por departamentos de pesquisa e desenvolvimento identificados pela sigla R&D (Research and Development). Também é muito comum que empresas de startups ou mesmo o pessoal que gosta de colocar a mão na massa (a comunidade DIY – Do It Yourself) crie protótipos ou versões muito simplificadas e cruas de dispositivos para a avaliação e testes.

É importante destacar que este tipo de protótipo não é disponibilizado para o público em geral, pois se tra-ta de algo que ainda está no estágio inicial de desen-volvimento. E não estamos falando de imagens ou cenários conceituais aqui: me refiro a protótipos que efetivamente existem e que estão sendo utilizados em laboratórios com um fim específico.

Em alguns casos, as empresas acabam mostrando estes protótipos para divulgação na mídia, o que acaba gerando alvoroço em usuários early adop-ters ou mesmo pessoas que se empolgam com o protótipo. Nos tempos atuais, com novidades como o Google Glass, o Oculus VR, o Leap Motion ou mesmo a braçadeira MYO, fica cada vez mais evidente que os protótipos despertam curiosidade e contribuem para a geração de expectativas mui-tas vezes irreais. Destaco que estes protótipos, ou pelo menos as ideias e inovações por trás deles, geralmente são apresentadas à comunidade cientí-fica e acadêmica anos antes dos protótipos serem concebidos e certamente muito à frente do que a imprensa especializada publica.

Mão na massaVou comentar algumas experiências que tive com alguns protótipos de hardware relacionado a pes-quisas que desenvolvi. Espero que este relato possa ajudar a guiar ou mesmo incentivar outras pessoas a querer trabalhar com pesquisa e desen-volvimento, em participar com software, envolven-do protótipos de hardware.

O primeiro protótipo de hardware que tive a oportu-nidade de trabalhar foi em 2010, graças a um con-curso para estudantes ligado à conferência acadê-mica UIST 2010. O protótipo em questão era um

Page 43: Revista iMasters #6

43

teclado da área de pesquisa da Microsoft que pos-suía duas características interessantes: todas as teclas possuíam um pequeno visor OLED e a parte de cima do teclado continha uma região sensível a toque. Veja o vídeo de divulgação do concurso para ter uma ideia http://youtu.be/n0MEhKk9xg4

Neste caso, enviei uma proposta para desenvolver uma ferramenta que auxiliava a edição de vídeo, depois de conversar com o colega Maestro Billy. A minha proposta foi aprovada, eu recebi o teclado (o único enviado para a América do Sul) e criei um pro-tótipo – veja aqui http://youtu.be/vcuzkcpX2eQ. Fui até Nova York participar da conferência e tam-bém do concurso que distribuiu alguns prêmios em diversas categorias (infelizmente não consegue ga-nhar em nenhuma delas).

Apesar de ficar muito empolgado quando recebi o protótipo, tive diversos problemas para o desen-volvimento. Não havia escolha de plataforma ou linguagem de programação (apenas C# com uma aplicação WPF), sem documentação, sem suporte, em garantia, códigos de erro e situações inespe-radas e com um receio de quebrar o equipamen-to. Sem contar a necessidade de assinar um NDA, aquele documento que me impedia de abrir, divulgar ou mesmo tornar público o protótipo. Mas, levando tudo em consideração foi uma ótima experiência.

Em 2012 voltei a participar do concurso UIST, porém desta vez o hardware foi um pequeno touchpad que reconhece com grande precisão cinco dedos. Este protótipo foi disponibilizado pela empresa Synaptics, recebeu o nome de Jedey e também fornece dados de pressão para os cinco dedos reconhecidos (con-fira: http://youtu.be/raQmKH1xY_Y). De acordo com o fabricante, este é um dispositivo que possi-velmente vai ser colocado nas próximas gerações de notebooks.

Segui o mesmo procedimento: enviei a proposta e assim que ela foi aceita recebi o protótipo para desenvolver uma aplicação que deforma objetos 3D (apenas o mesh, sem textura) de acordo com a pressão aplicada sobre cada um dos pontos de contato - http://youtu.be/9BI3gSjNytk.

Além dessas experiências, também já cheguei a trabalhar com outros protótipos e já escrevi sobre eles no iMasters: CUDA (http://bit.ly/17tamLz), o capacete neural EPOC (http://bit.ly/ZYZkay), um kit Phidgets (http://www.phidgets.com/) e o Ras-pberry PI (http://bit.ly/X6fiZZ).

Mais recentemente conseguir obter um tablet pro-tótipo da Intel (codinome Penwell) para avaliações e desenvolvimento de aplicações colaborativas

em tempo real, um dos tópicos que estou pes-quisando. Sem entrar muito em detalhes, este dispositivo possui algumas características muito interessantes e é importante destacar a iniciativa da Intel em disponibilizar para a comunidade cien-tífica protótipos para auxiliar o desenvolvimento de novas tecnologias ou mesmo para empregá--los em pesquisa de produtos que podem chegar ao público, que nunca vão sair dos laboratórios ou que vão apenas ser utilizados como estudo de caso em alguma publicação acadêmica.

Gostou da ideia? Como disse no começo, alguns profissionais de desenvolvimento acabam colocando a mão em protótipos de hardware antes de eles chegarem ao grande público ou mesmo antes da imprensa rece-ber alguma versão para publicação de conteúdo. Alguns leitores podem pensar que para ter acesso a certos protótipos é preciso “apenas” de uma boa dose de sorte ou mesmo excelentes contatos. Ape-sar de estes dois fatores serem importantes, muitas empresas estão à procura de novas aplicações ou mesmo diferente usos para seus protótipos e neste ponto é que os desenvolvedores podem enxergar uma excelente oportunidade.

Em outras palavras: você quer ter a oportunidade de trabalhar com um protótipo de tecnologia, em especial um hardware, antes de ele ser lançando para o público? Então tenha uma boa ideia do que você faria com ele se ele estivesse em suas mãos. Mas não só isso: mostre que você sabe como fazer, possui os recursos para tanto e que tal abordagem vai agregar valor ao protótipo. E não se esqueça de que a empresa que disponibilizou o protótipo sempre vai querer algum tipo de contra partida: um relatório técnico, uma apresentação ou algum tipo de demonstração do que foi desenvolvido. </>

Mauro Pichiliani é bacharel em Ciência da Computação, Mestre e doutorando em computação pelo ITA (Instituto Tecnológico de Aeronáutica). Trabalha há mais de 10 anos utilizando diversos bancos de dados e ferramentas de programação. @pichiliani / [email protected]

Page 44: Revista iMasters #6

44 > Comunidade

Synbio: tijolinhos para construir aplicações interessantesA comunidade da USP-SP reúne pesquisadores e graduandos para melhorar o ambiente tecnológico do Brasil.

Por @lufreitas para iMasters

Page 45: Revista iMasters #6

Você imagina que existe uma biologia sintética? Pois existe. Aliás, só existe por conta da Tecnolo-gia da Informação, que permite aos biólogos ter a capacidade de sequenciar genomas, compartilhar informações e criar padrões. A partir das muitas descobertas da biologia molecular, da Lei de Moore (aquela que diz que os chips dobram em capacida-de a cada dois anos), do mapeamento do genoma, e da aplicação dos conhecimentos da engenharia surgiu a biologia sintética.

A biologia sintética é a mistura de muitas discipli-nas e conhecimentos, é difundida aqui no Brasil por uma pequena comunidade de São Paulo, o Synbio Brasil. Liderados pelo Dr. Andrés Ochoa e com o apoio de vários professores da USP, essa iniciativa estudantil reúne cerca de 20 alunos há dois anos para criar projetos e produtos que podem melhorar o meio ambiente e facilitar a vida de todo mundo.

O Synbio Brasil reúne pesquisadores e estudantes de seis núcleos da USP: Matemática, Física, Quími-ca, Biologia e Escola Politécnica. São 20 pessoas que usam seus conhecimentos para criar projetos e produtos de biologia sintética.

Entenda: é algo como os transgênicos, organismos geneticamente manipulados. O doutor Andrés ex-plica: “É desenvolver organismos sintéticos, cria-dos a partir de partes padrão, os BioBricks, com uma finalidade específica”. De quebra, eles apro-veitam para usar os conhecimentos da engenharia e estabelecer um método produtivo que seja viável no mercado e ajude ao meio ambiente.

Esses produtos podem ser feitos em bactérias, fungos ou plantas. A prática é regulada, no Bra-sil, pelas normas da CNTBio (Comissão Nacional Técnica de Biossegurança) e só pode ser realiza-

45

da em laboratórios credenciados. “Criamos enge-nharia genética no laboratório. Isso teoricamente é relativamente simples, mas muito complexo na prática. Fazer funcionar é algo que exige muitos padrões”, conta Andrés.

O que eles fazem é criar padrões, segmentar as partes da produção e estabelecer os protocolos para usar o DNA em cada entorno (bactéria, fun-go ou planta). Pior: os componentes genéticos, por aqui, custam pequenas fortunas. “Cada pedacinho custa cerca de R$ 1.000 quando mandados sinte-tizar comercialmente. Para criar um circuito de ge-nes, você pode precisar de três a 20”, diz Andrés.

A ideia desse grupo é espalhar a cultura pelas ou-tras universidades brasileiras, incentivar a pesqui-sa séria de biologia sintética e participar do iGEM, competição internacional que quer criar uma rede de dados biológicos.

Um exemplo interessante da aplicação desse co-nhecimento: hoje é muito caro testar as bebidas alcoólicas para adulteração por metanol. É preciso colher a amostra, ter uma máquina cara no labora-tório, levar as amostras, testar e depois voltar. Os alunos Pedro Medeiro e Otto Heringer propuseram um projeto para criar uma bactéria que tenha um sensor especial para metanol na bebida. Assim, a fiscalização seria rápida, eficiente e mais barata.

Sem TI não há biologia possívelO interessante é que essa comunidade está or-ganizando o conhecimento usando os parâmetros open source que tantas vezes utilizamos para de-senvolver ou aperfeiçoar programas. “Isso faz com que a gente avance mais rápido e que todos pos-

Synbios - biologia, TI, open source e crowdsourcing unidos para projetos e produtos de biologia sintética

Page 46: Revista iMasters #6

sam começar mais à frente”, conta Andrés. Eles usam o iGEM, a BioBricks Foundation e uma wiki, a Registry Parts, para registrar material e trocar genes e informação.

Além da proximidade com open source, eles tam-bém programam. O próprio Andrés desenvolve có-digos simples em Perl ou Phyton. Sem contar que, graças à abundância de dados publicados na rede, eles agora saem dos modelos computacionais para a bancada do laboratório.

“Com muita informação ao alcance, nós formula-mos as perguntas a partir dos dados. Podemos fazer a pergunta primeiro no computador, desen-volver hipóteses e depois ir para a bancada para ver se funciona mesmo”, explica Andrés.

A partir do crowdsourcing, os biólogos conseguem resolver essas questões sem chegar perto da ban-cada de laboratório. Só computadores e cérebros em todo o mundo trabalhando juntos. Sim, você entendeu: eles estão usando as teorias de Jane McGonigal (vale a pena assistir à sua palestra no TED 2010 sobre como usar os games para cons-truir um mundo melhor).

E como essa comunidade não deixa nenhuma boa invenção sem uso, no site Fold It, por exemplo, ela convoca os internautas para encontrar soluções para proteínas. Se você, programador, não sabe, as proteínas são moléculas hipercomplexas, pro-duzidas segundo códigos muito específicos e, pra complicar, de acordo com uma posição espacial muito específica.

A realidade brasileiraAqui no Brasil, nada disso estaria acontecendo, conta Andrés, sem o apoio da sua coordenadora de doutorado, a doutora Marie Anne Van Sluys, e de outros professores da USP. Os coordenadores dos laboratórios oferecem, além do espaço, rea-gentes fundamentais para a pesquisa.

Claro que, com um processo pouco conhecido, os integrantes do clube enfrentam muitas dificuldades financeiras. Mas já há financiamento do governo (via FAPESP, o órgão financiador de pesquisas acadêmi-cas) e de grandes empresas. Sim, são as multinacio-nais, como Braskem, Monsanto, Syngenta e Bayer, entre outras, que têm interesse nessa pesquisa.

A grande questão para o grupo é mesmo a co-municação. “O iGEM nos incentiva à “human practice”, comunicar a ciência para o público. Somos a única comunidade em português que divulga essa pesquisa”.

Lá fora, conta Andrés, já surgem até startups dedi-cadas a produzir esses organismos. Enquanto isso, os integrantes do Synbio Brasil comemoram suas conquistas:

• participação do iGEM 2012, com um projeto que se tornou projeto de TCC de um dos par-ticipantes.

• projeto para desenvolver moléculas de proteção contra a luz UV em astrobiologia.

• o projeto do próprio Andrés, que é expressar genes em locais específicos de uma planta. Para isso, ele está desenvolvendo uma platafor-ma que permitirá localizar rapidamente qual é o biobrick necessário.

Conheça mais sobre o trabalho do Synbio aces-sando o site http://synbiobrasil.org/ </>

“Sem o desenvolvimento de TI jamais conseguiríamos trabalhar. A ideia futura é criar um app para o organismo”, diz Andrés.

46 > Comunidade

Page 47: Revista iMasters #6
Page 48: Revista iMasters #6

Plack - Super-Bonder para a Web

Eden Cardim - 7masters perl

Plack é uma implementação em Perl da especifi-cação PSGI. Ela foi criada para resolver o proble-ma das múltiplas interfaces de implantação de aplicações web em servidores. O PSGI é baseado no Rack (Ruby) e no WSGI (Python), agregando as melhores features dessas duas especificações.

Arquitetura

O Plack possui diversos componentes que podem ser combinados para construir uma stack completa e autônoma para a web.

1. Handlers: adaptadores para diversos servido-

48 > Encontro 7Masters

res web e interfaces de gateway, como Apache 1 e 2, nginx, CGI, FastCGI e um servidor web autônomo implementado pelo próprio Plack. São esses componentes que vão executar a aplicação propriamente dita e realizar coisas como pre-fork e load balancing.

2. Loaders: componentes que carregam a apli-cação em conjunto com um Handler. A for-ma como a aplicação é carregada pode ter bastante impacto na execução da aplicação, como por exemplo, carregar as bibliotecas an-tes dos forks acontecerem, para se aproveitar do copy-on-write e diminuir a assinatura de memória. Outros casos também incluem carre-gamento sob demanda, que é útil para desen-volvimento, além do gerenciamento de sinais para recarregamento graceful.

3. Aplicações .psgi: o PSGI define um formato para as aplicações, que devem ser escritas em Perl.

4. Executores: utilitários para uso em linha de co-mando que controlam os diversos aspectos da execução da aplicação. O Plack implementa um executor que se chama plackup e é tipicamen-te usado em desenvolvimento para “subir” uma versão light da aplicação.

5. Construtor de Aplicações: o Plack permite que você combine componentes de forma arbitrária usando a semântica fornecida pelo builder:

Page 49: Revista iMasters #6

O 7Masters - Encontro iMasters de Especialistas, acontece todos os meses, na última quarta-feira de cada mês, no iMasters Lab. São 7 profissionais que apresentam assuntos inovadores e diferentes em lightning talks de sete minutos.

O tema é definido pela equipe iMasters, mas você pode dar sua sugestão. Escreva para [email protected] e opine, sugira um tema ou o nome de um profissional para participar.

Aqui você confere uma seleção dos últimos 7Masters. E pode se preparar para os próximos – ainda este ano falaremos sobre Django, Zend, Redes & Servidores, Android, Usabilidade, Inovação e FOI (otimização para front end). Acompanhe as datas em setemasters.imasters.com.br.

49

6. middlewares: são componentes intermediá-rios entre a web e as aplicações e cuidam de coisas como compressão/descompressão de conteúdo, caching e manipulação de headers. Existem centenas disponíveis no CPAN implen-tando as mais diversas funcionalidades.

7. frameworks: Catalyst; Dancer; Mojo; CGI::Application; Jifty.

8. Testers: o Plack possui uma série de emuladores de requisições que são úteis para realizar testes. Dessa forma, tanto o cliente HTTP, quanto o ser-vidor são executados e se comunicam dentro do mesmo processo, o que elimina o overhead de criar um par requisição/resposta em HTTP.

9. Servers: servidores autônomos de HTTP.

a. Starman: servidor com pre-forking de alta performance, serve até 7000 requisições por segundo com uma única CPU.

b. Twiggy: servidor assíncrono, útil para execu-ção em ambientes sem fork, serve até 4000 requisições por segundo numa única CPU.

Two Step Verificationbuilder { mount ‘/app1’ => Plack::App::Foo -> new; mount ‘/app2’ => Plack::App::Bar -> new;}

Erick Belluci Tedeschi - 7masters pHp

Muitas pessoas acham que suas informações pes-soais guardadas em sites de e-commerce, jogos, redes sociais, etc não irão vazar para “terceiros” mal intencionados. Essas pessoas estão engana-das, seus dados já vazaram! Em 2012, por exem-plo, vazaram mais de 6 milhões de credenciais de acesso da rede social LinkedIn. Assim como vaza-ram também de outros serviços largamente utiliza-dos, como PlayStation Network, Hotmail etc.

Isso acontece por conta de falhas de segurança que permitem o roubo dessas informações de usuários. Uma credencial roubada e utilizada indevidamente por um atacante pode se tornar um pesadelo para a vítima. O que se tem feito para minimizar o impac-to da utilização de contas roubadas por crackers é o uso de mais um fator de autenticação com o

Page 50: Revista iMasters #6

50 > Encontro 7Masters

objetivo de reforçar a segurança na hora do login.

Os fatores de autenticação são divididos em três grupos:

1. Aquilo que você sabe (algo que você memoriza) • Senha (método mais utilizado): frase, nome,

número, data, algo aleatório que é “secreto” para o usuário.

• PIN (Personal Indentification Number): comu-mente utilizado em ATMs e bloqueio de celula-res. É um número secreto para o usuário.

• Padrão de Desbloqueio e Picture Password: utilizado no Android e no Windows 8, respec-tivamente. Somente o usuário que consegue reproduzir o padrão ou a sequência solicitada tem acesso ao dispositivo.

2. Aquilo que você tem (objeto físico) • Token: aqueles chaveiros que possuem um

display com uma senha, utilizado normal-mente para acesso a VPN e em transações de Internet Banking.

• Smart Card (certificado digital): utilizados nos cartões de crédito/débito, SIM cards, alguns crachás mais sofisticados. Guarda, em seu in-terior, informações criptográficas acessadas apenas através de leitor específico em conjunto com uma senha/PIN.

• RFID (Radio-Frequency Identification): crachás, chaveiros, cartão de estacionamento, o “Sem Parar”, produtos em supermercados (normal-mente os produtos mais caros!) etc. Dispositivo que identifica “unicamente” o seu portador.

3. Aquilo que você éBiometria (bio[vida] + metria[medida]) - Caracterís-tica física ou comportamental que identifica unica-mente um indivíduo.

• Fingerprint (impressão digital): utilizada em

empresas para acesso a lugares restritos, pelo Detran para confirmar presença do aluno nas autoescolas etc. A leitura é feita através dos pequenos sulcos localizados na pele das pontas dos dedos.

• Voiceprint: as cordas vocais emitem o som em uma frequência específica para cada pessoa. A identificação é feita através de gravação de uma amostra e comparada com uma gravação “ori-ginal”. Observação: o aplicativo Shazam utiliza um algoritmo de identificação semelhante para identificar as músicas.

• Reconhecimento de íris (globo ocular): a íris é a parte do olho que define a cor (castanho, azul, verde). Vista em um microscópio, ela apresenta um tipo de textura que é diferente em cada pes-soa e é quase impossível de se repetir.

Alguns desses fatores de autenticação são mais indicados para acesso físico e outros para acesso lógico e/ou na Web.

No caso de sites, o que está sendo mais utilizado é o token combinado com uma senha. Alguns serviços que já estão utilizando isso são: Gmail, Facebook (via SMS), Yahoo!, DropBox, Amazon, entre outros.

Adicionando mais um fator de autenticação de SMS Para incluir um fator de autenticação visando com-plementar a segurança de um sistema já em uso, pode-se colocar um passo (step) a mais, após o login do usuário. Por exemplo, enviar um SMS para um número de celular previamente cadastrado. Dessa forma, o sistema fica esperando o usuário digitar o token enviado para o seu celular, gerado randomicamente com uma entropia forte. O siste-ma guarda na sessão o token que foi enviado para o celular para que possa ser comparado quando o usuário digitar. O usuário só terá acesso ao sistema se digitar exatamente como enviado.

Obviamente, é preciso implementar mecanismos de contingência, caso o SMS demore ou o núme-ro de celular não seja mais da pessoa. Lembrando que o mecanismo de contingência não pode ser uma forma de burlar a autenticação de dois fatores!

Page 51: Revista iMasters #6

51

Perl na Bioinformática

felipe Leprevost - 7masters perl

Desde seus primeiros anos, o Perl tem se mostra-do extremamente eficiente nos mais diferentes ce-nários. Para muitos, as aplicações mais evidentes têm sido aquelas em que o uso da linguagem foi responsável por “salvar” e integrar grandes proje-tos, como a web na década de 90. Porém, a lin-guagem tem adquirido espaço em diferentes áreas do conhecimento, e a bioinformática se tornou um notável exemplo.

No momento em que laboratórios de pesquisa co-meçaram a utilizar cada vez mais sistemas com-putacionais para gerar dados baseados em ex-perimentos biológicos, criou-se a necessidade de novas ferramentas que pudessem auxiliar no ma-nuseio dessas informações e, como muitos desses dados são gerados em forma textual, uma lingua-gem poderosa no manuseio de texto se tornou uma das principais ferramentas da rotina de processa-mento e análise de dados. A bioinformática é uma área multidisciplinar que une duas diferentes áreas do conhecimento - a biologia (especialmente a bio-logia molecular) e a computação. Os especialistas que se dedicam a ela têm como preocupação ela-borar novas estratégias de análise de dados, assim como desenvolver novos softwares para auxiliar no processamento desses dados, que, não raramen-te, são gerados em grandes quantidades.

Nesse sentido, o Perl tem sido extremamente im-portante para a área, pois é uma linguagem que possui diversas características únicas. De forma geral, é uma linguagem de fácil aprendizado e simples de ser executada, além de possuir diver-

sos módulos específicos para as áreas científicas, como o BioPerl.

Além das facilidades que a própria linguagem pos-sui, há toda a comunidade de desenvolvedores que estimula a troca de experiências e conhecimentos através de diferentes meios, desde listas de dis-cussões até plataformas sociais para revisão de novos módulos. Tudo isso faz do Perl uma grande linguagem e, consequentemente, uma excelente ferramenta para outras áreas do conhecimento, es-pecialmente quando se deseja fazer ciência.

Seja um Perl core hacker

Breno Oliveira – 7masters perl

Existem muitos rituais de passagem em desenvol-vimento de software. Começamos pequeno, com um simples “Alô, Mundo”, mas ganhamos confian-ça rápido e, quando nos damos conta, já estamos criando nosso próprio sistema de templates ou fra-mework web. Lá no final da lista, quase que como um sonho inalcançável de glória definitiva, está o santo graal de todo programador: contribuir com o código fonte da própria linguagem.

Ao longo dos anos, uma série de mitos sobre como se tornar um core hacker de Perl foram surgindo: era preciso saber C, ter conhecimentos avançados de Perl, dominar todas as entranhas do código fonte ou mesmo ser indicado por um core hacker atual.

Tudo mentira.

Page 52: Revista iMasters #6

52 > Encontro 7Masters

A verdade é que você não precisa ser um ninja com o poder dos nove cortes ou saber um aperto de mão secreto para ajudar no core do Perl. De fato, mais de 65% dos tíquetes abertos são de seve-ridade baixa, muitos dos quais exigem pouco ou nenhum conhecimento de Perl, muito menos de outra linguagem. Problemas simples, como docu-mentação incompleta ou com pequenos erros de formatação, testes sem descrição, ou mesmo cria-ção de commit hooks no repositório central, podem ser facilmente atacados por iniciantes e fazem toda a diferença para o projeto.

O processo é tão simples que cabe em um pa-rágrafo: clone o repositório em git://perl5.git.perl.org/perl.git ou no mirror do Github; abra o arqui-vo Porting/todo.pod ou acesse http://tiny.cc/perl5 para achar uma tarefa simples e rápida para atacar; crie um branch, faça suas mudanças, teste e envie para [email protected] com uma descrição em in-glês. Pronto. Se o patch for aceito, seu nome estará imortalizado na próxima versão do Perl 5!

Pode parecer pouco, mas o tempo que você gas-ta resolvendo esses probleminhas é o tempo que um desenvolvedor experiente do core pode gastar com bugs mais urgentes ou novas features. Sem falar que é uma ótima forma de perder o medo e ir conhecendo melhor o código. E aí, tá esperando o quê? Contamos com você!

Blah blah Java blah blah Cloud

Como toda tecnologia nova e que traz benefícios concretos, a Computação em Nuvem parece criar uma divisão em dois grandes grupos: aqueles que usam de qualquer argumento para utilizar a nuvem, e aqueles que buscam qualquer razão para desqualificar o uso dessa nova plataforma. As pesquisas mostram que entre as preocupa-ções mais citadas por empresas e especialistas está o medo de ficar preso a um fornecedor de cloud. A liberdade de escolher seu fornecedor, e mais importante, a liberdade de poder escolher novamente -- ou seja trocar para outro fornece-dor, caso não esteja satisfeito -- é uma garantia muito valorizada pelos profissionais. Ficar limitado a um único fornecedor ou ter seus dados presos a um ambiente de nuvem, ou ainda ficar restrito à um ambiente de desenvolvimento específico são preocupações reais, que prejudicam a capacidade de empresas e desenvolvedores de terem controle sob suas próprias escolhas.

Desde sua criação, o principal objetivo da tecno-logia Java tem sido evitar que desenvolvedores e aplicações fiquem presos a um único fornecedor. Todo o ecosystema Java é voltado para gerar op-ção e concorrencia. Desde os bytecodes Java, a arquitetura da máquina virtual, a clara separação entre a definição das APIs e sua implementação, o próprio processo de padronização de Java, o Java Community Process (JCP). A tecnologia Java sem-pre buscou fornecer portabilidade: a capacidade de desenvolvedores e empresas de escolher entre multiplos fornecedores.

E quando se fala em portabilidade de Java, ime-diatamente pensamos na capacidade de executar aplicações em múltiplas plataformas, como por exemplo, Windows, MacOS, Linux. Mas a portabi-lidade de Java vai além: a portabilidade no tempo. Combinando a padronização das interfaces, com um foco forte na compatibilidade binária entre versões e a chamada compatibilidade retroativa, o ecosystema Java tem um foco constante em garantir que bibliotecas e aplicações escritos em versões anteriores de Java continuem rodando nas versões mais novas da plataforma. Essa capacida-de é que permite que o código Java seja portável “no tempo”, ou seja, que as suas aplicações e, prin-cipalmente, o seu conhecimento, estejam prontos para serem reaproveitados em novas plataformas. Bruno f. Souza “Javaman” – 7masters Java

Page 53: Revista iMasters #6

53

Como por exemplo, as novas plataformas de com-putação em nuvem.

E as principais plataformas de computação em nuvem que surgiram nos ultimos anos suportam a plataforma Java, garantindo que milhões de de-senvolvedores estejam já capacitados a disponibi-lizar suas aplicações nessa nova plataforma. Ape-nas para citar algumas, é possível utilizar as suas bibliotecas, aplicações e o seu conhecimento em Java nos diversos ambientes da plataforma núme-ro um em cloud do planeta, a Amazon AWS. Java está disponível nas soluções de plataforma como serviço do Heroku, da Cloudbees, da VMWare e um sem número de outros provedores. Java é ob-viamente o carro chefe do ambiente corporativo de cloud da Oracle. Como forma de aumentar ain-da mais sua liberdade, as plataformas open sour-ce são uma excelente pedida. Também é possível utilizar Java nos ambientes padronizados e open source do RedHat OpenShift, e na plataforma de nuvem descentralizada e internacional, também baseado em open source da JElastic. Java tam-bém é um componente importante na plataforma open source Eucalyptus, que permite a criação de nuvens privadas e híbridas. Isso sem falar nos gi-gantes Google, que mesmo em uma solução me-nos baseada nos padrões Java, é capaz de exe-cutar gigantescas aplicações Java existentes sem grandes modificações, e também na plataforma Azure da Microsoft, que é suporta suas aplicações Java sem qualquer modificação.

E a portabilidade de Java tem ajudado muitas ou-tras tecnologias e linguagens. Dado que a máquina virtual Java é capaz de executar centenas de lin-guagens, incluindo todas as mais populares como Ruby, Python, Scala, Groovy e Closures, a platafor-ma Java permite que projetos nessas linguagens também se tornem independentes dos diversos provedores de nuvem existentes, ampliando e po-tencializando o uso das novas linguagens nas po-derosas plataforma de de nuvem.

E quanto ao receio de ficar preso a ambientes de desenvolvimento, a Plataforma Java mais uma vez vem ao auxílio do desenvolvedor. Algumas das melhores e mais poderosas ferramentas de desenvolvimento Java são open source, indepen-dentes desses fornecedores e se integram com todas as plataformas de nuvem. Mais do que

isso, suportam também qualquer outra lingua-gem. De soluções de integração e deployment contínuo, como Jenkins; passando por repositó-rios de bibliotecas como o Nexus, ferramentas de análise de código e qualidade, como Sonar, e uma enorme variedade de ferramentas de teste como nosso bom e conhecido JMeter e o pode-roso Selenium. Ter esse grupo de ferramentas à sua disposição, de forma independente de forne-cedores, é uma garantia da sua liberdade.

Nesse momento, onde a computação em nuvem está abrindo horizontes para novos tipos de apli-cações e possibilitando a criação de novas em-presas e startups, a tecnologia Java está ao lado do desenvolvedor e da sua liberdade de escolha. Ao ajudar a eliminar o maior risco da adoção da computação em nuvem, a plataforma Java é sua importante aliada, não importa qual linguagem você tenha escolhido para seu projeto.

Pensando o desenvolvimento de software

Ivo Nascimento – 7masters pHp

Franqueza, reflexão e análise da diferença entre simplismo e simplório são os três pontos que esta palestra aborda quando digo que vamos “pensar o desenvolvimento de software”.

A franqueza é o pilar base dessa reflexão. Onde o profissional mostra sua maturidade e permite que seus pares também amadureçam.

Page 54: Revista iMasters #6

54 > Encontro 7Masters

Um ambiente onde existe franqueza é aquele onde os profissionais se sentem seguros para dizer “Não sei”, por exemplo.

Os melhores ambientes de trabalho por que passei tinham essa caracteristica e as empresas e profissio-nais que praticam e incentivam a franqueza são mais felizes com relação ao seu trabalho e resultados.

Existindo a franqueza podemos pensar melhor so-bre conhecimento e para melhor abordagem eu o dividi em três tópicos acumulativos.

Conhecimento técnico: Aquele que todos bus-camos para nos tornar um melhor analistas de sistemas e realizar a tarefa de programação da melhor maneira.

Quando se detem somente conhecimento técnico (não me refiro a todos ele) você é um ótimo técnico.

Conhecimentos humanos: São as habilidades que tornam você um profissional que entende a re-quisição e ajuda o processo de reconhimento e de-finição de uma necessidade. Quando somados aos conhecimentos técnicos, tornam um profissional habilitados a lidar com situações mais complexas e tranformam a programação em uma das partes do trabalho e não a única parte.

Conhecimento do domínio de negócio: Se você é um profissional que detem conhecimento técnico e tem conhecimento humano, é natural que você desenvolva esse tipo de conhecimento pois se en-volve muito mais com as questões de negócio e com os problemas reais da empresa.

Os problemas passam a não mais chegar até você como um documento de requisitos, mas como um pedido direto por email, telefone ou pessoalmente. Isso por que as pessoas te procuram para conver-sar por que você ajuda a identificar e mapear os problemas e as soluções.

O simplório e o simplismo estão envolvidos tanto na visão dos problemas, quanto nas soluções. Pensar a diferença entre os dois é constatar que ser sim-ples é não fazer aquilo que não é necessário e ser simplista é ignorar aquilo que deve ser feito.

Building com Phing

Anderson Casimiro – 7masters pHp

Salve, meus caros! Vou apresentar, para quem já não conhece, uma ferramenta de build feita em - e para - PHP. Você pode estar se perguntando: “Build? PHP é uma linguagem de script, então, pra que build?” ou mesmo: “O que é Build?”. Pois é, meu caro, quando precisamos automatizar tarefas entram as ferramentas de build, ou buildtools. Den-tre as mais famosas estão o Make e o Ant. E para o nosso PHP temos o Phing (http://phing.info). Vou tentar passar bem rápido o conceito sobre building com o Phing em 7 parágrafos.

Uma execução de build nada mais é do que a execução em sequência de diversas tarefas pré--determinadas - sendo que se uma falhar, a exe-cução não continua. Aí você pode pensar: “Ah, mas isso posso fazer via PHP mesmo; em um script”. Sim, pode. Mas pense em cada deta-lhe que isso pode ter, qual a complexidade que essas tarefas podem tomar, além de executar a tomada de decisão de continuar ou não a execu-ção e ainda atribuir dependências entre tarefas? O Phing já resolve esses problemas e é extensí-vel, ou seja, você pode criar tarefas novas para sua execução. É possível utilizá-lo como paco-te phar ou mesmo obtê-lo via composer [phing/phing] - idealmente o instalamos via PEAR:

pear channel-discover pear.phing.info pear install phing/phing

Page 55: Revista iMasters #6

build.xml

<?xml version=”1.0” encoding=”UTF-8”?><project name=”7masters-1” default=”start”> <target name=”start” depends=”compo ser,update,dirs”/> <target name=”composer”> <available file=”composer.phar” property=”composer.exists”/> <echo msg=”${composer. exists}”/> <if> <not> <isset property=”composer. exists”/> </not> <then> <php expression=”file_ put_contents(‘composer. phar’,file_get_ contents(‘https:// getcomposer.org/ installer’))” /> <exec command=”php composer.phar”/> <composer command=”install”/> </then> </if> </target> <target name=”update”> <composer command=”update”/> </target> <target name=”dirs”> <mkdir dir=”application/ library” />

55

Assim como seu (distante) parente Ant, que atua para Java, o Phing utiliza XML para sua configu-ração. Basicamente declaramos um Projeto; den-tro dele, Alvos (que agrupam tarefas e definem dependências) e dentro deles, Tarefas - tudo via tags XML. No exemplo a seguir (figura 1), pode-mos identificar cada um desses elementos - “echo” no caso é uma tarefa. Por padrão, descrevemos a execução em um arquivo build.xml, mas podemos quebrá-lo em mais arquivos para organizar melhor e/ou usar dependências específicas, mantendo o inicial sem dependências.

são habilitadas caso as dependências para cada uma delas esteja disponível. PHPUnit (com Code Coverage), Git, Requests HTTP, Lint, Amazon, SVN... Só para começar!

Vou dar um exemplo: vamos começar um projeto do zero. Sempre usamos a mesma estrutura de diretórios, sem um framework, mas no mínimo já queremos colocar um monolog para funcionar. As figuras 2 e 3 mostram como fazemos isso já usan-do o composer (considerando que o composer es-teja disponível na sua raíz).

build.xml

<?xml version=”1.0” encoding=”UTF-8”?><project name=”7masters-1” default=”start”> <target name=”start” depends=”step- a,step-b,step-c”/> <target name=”step-a”> <echo msg=”Este é o Projeto ${phing.project.name}”/> </target> <target name=”step-b”> <echo msg=”Nunca chegaremos ao Passo C :D”/> <php expression=”11/0” returnProperty=”erro” level=”error”/> <fail if=”erro” msg=”Você está vendo esta pois há um erro”/> <echo msg=”você não verá essa mensagem” /> </target> <target name=”step-c”> <echo msg=”O Phing parou a execução do build”/> </target></project>

Sim, dependências. O Phing, por padrão, já tem tarefas que vão agilizar seu dia a dia - desde ope-rações de filesystem, prompt para entrada de da-dos de usuário (via linha de comando!), estruturas condicionais (sim, no XML mesmo), execução de comandos shell ou PHP. Além disso, ele permite que você crie novas tarefas via PHP, ou embutindo código PHP no próprio XML. Como se não bastas-se, o Phing conta com várias tarefas opcionais, que

Page 56: Revista iMasters #6

<mkdir dir=”tests” /> <mkdir dir=”web/style” /> <mkdir dir=”web/script” /> <mkdir dir=”web/media” /> </target></project>

composer.json

{ “name”:”7maters”, “require”:{ “php”:”5.3.*”, “monolog/monolog”:”1.5.*” }}

56 > Encontro 7Masters

“Ok, automatiza tarefas. O que mais isso pode fa-zer?” Já ouviu falar de Integração Contínua? É uma atividade vinda de metodologias ágeis que visa in-tegrar o código de um projeto, vindo de diversas fontes (desenvolvedores fazendo commit e push, por exemplo) e integrá-lo de maneira segura e con-tínua. Como “segura”? Realizando testes de ma-neira automática a cada nova entrada de código e certificando que o branch específico do projeto ou um servidor de testes somente tenha código tes-tado. Testado como? PHPUnit, CodeSniffer, PMD, PHPCPD, PDepend... Se você ficou com uma in-terrogação na cabeça para qualquer um dos itens que citei, aconselho que abra o google e pesquise por cada um deles - seu conhecimento agradece. Imagine que cada nova porção de código passe automaticamente por cada um desses testes para, só então, ser integrada com o código existente.

Mas não para por aí. Pense na infinidade de ma-neiras de automatizar o deploy de suas aplicações minificando os ativos CSS e Javascript, limpando caches e atualizando o banco de dados sem pre-cisar se matar. Com um email de confirmação no fim do processo ainda! Pense em como seu tra-balho de testar tudo localmente pode ficar melhor, se executar tudo de maneira uniforme. Ou mesmo fazendo uma execução de instalação para o time de infraestrutura, dando prompts para customizar a configuração de uma aplicação - inclusive para

a Amazon. Ahh, para que tudo isso aconteça você deve idealmente estar na raíz do projeto, onde está o build.xml, e entrar com um comando um pouco extenso:

phing

O Projeto é muito bem documentado e estável. Tem com controle de bugs e versionamento, um time bacana desenvolvendo e bastante gente usan-do - inclusive Symfony e Zend Framework.

Procure conhecer ferramentas de build e as boas práticas no seu uso, para, então, tirar o melhor pro-veito dessa ferramenta. Contribua com o projeto: Phing é um programa modular; esteja livre para criar novas funcionalidades - na maior parte dos ca-sos o time de desenvolvimento ficará feliz em incluí--las no projeto. Este que vos escreve é um usuário assíduo da ferramenta e está muito contente com os resultados. Good Phinging!

(em 7 parágrafos, não disse? :P) </>

Page 57: Revista iMasters #6
Page 58: Revista iMasters #6

58 > Social Media

Otimização de mídias sociais: conteúdo otimizado e compartilhado

Por @camilapc

Page 59: Revista iMasters #6

59

Para alguns está mais do que claro que “conteúdo é rei”. A frase é clássica em várias situações. En-tretanto, nem sempre apenas produzir conteúdo é o suficiente. Quando pensamos em SEO, produzir conteúdo é um dos pilares de toda uma estratégia de otimização. Por que aparecer bem posiciona-do é importante? Já sabemos que quanto melhor seu posicionamento nos resultados de pesquisa, maiores são as chances de gerar tráfego para seu site, bem como melhor é o posicionamento da sua empresa como a mais adequada para responder às dúvidas de quem visita seu site.

Contudo, as mídias sociais já detêm uma grande parcela do tempo online das pessoas. A partir des-se fato, só produzir conteúdo não é o suficiente. Se antes da explosão das mídias sociais ter um bom posicionamento nos resultados de pesquisa já era uma grande conquista, hoje isso não basta. É nesse ponto que a otimização DE mídias sociais e PARA mídias sociais ganha cada vez mais rele-vância. Nesse contexto, a frase de Erik Qualman - “Empresas não têm mais a opção de onde ou se estarão nas mídias sociais. A questão é como fazer isso bem” - cabe perfeitamente no momento em que vivemos.

A Social Media Optimization é um grande comple-mento para o SEO tradicional, algo como o Batman e Robin da Internet, apesar de ser difícil saber quem é o coadjuvante nesse cenário. Podemos abordar a otimização DE mídias sociais sobre o ponto de vista do SEO: palavras-chave inseridas em des-crições de fotos no Facebook, otimização de fan pages, descrições no Twitter, otimização de títulos em vídeos no YouTube. Enfim, uma miríade de op-ções e estratégias podem e devem ser inseridas para otimizar os canais da sua empresa. Por quê? Em qualquer mídia social que sua empresa esteja inserida, a caixa de busca está lá. De Facebook a Google+, buscar na Internet já se tornou parte do hábito de navegação. Por isso, otimizar para que seu conteúdo seja encontrado, tanto dentro do ca-nal em questão, quanto no Google, é importante.

Também podemos abordar a Social Media Optimi-zation como otimização PARA mídias sociais. Essa otimização consiste, em primeiro plano, facilitar o máximo possível para que o seu conteúdo se espa-lhe. Uma forma simples de fazer isso é utilizar bo-tões de compartilhamento, integração com widgets e plug-ins sociais. Porém, apenas inserir um punha-do de botões de compartilhamento em seu site não é o suficiente e, o pior, eles podem prejudicar suas estratégias. Quanto mais botões, mais tempo seu site pode demorar a carregar. Dessa forma, o tem-po de carregamento das páginas aumenta e pode prejudicar suas estratégias de SEO. Sendo assim, o primeiro passo para otimizar seu site para as mídias

sociais é a escolha dos botões mais utilizados. Ava-lie em sua ferramenta de web analytics qual mídia social traz mais tráfego para seu site e invista nos botões correspondentes.

Além de deixar seu conteúdo compartilhável, é importante entender que “conteúdo é rei”, mas conteúdo relevante é muito mais. Por esse motivo, produzir conteúdo apenas para os buscadores é uma parte de sua estratégia. Com a utilização cres-cente das mídias sociais, é muito importante que seu conteúdo seja compartilhado. A partir disso, sua empresa se posiciona no mercado, cria engaja-mento, proximidade com os clientes e mais tráfego para seu site, por exemplo. Portanto, se sua loja online vende móveis, é provável que a maioria das pessoas não se interesse em compartilhar apenas um sofá de dois lugares. Porém, se formos além e buscarmos alternativas para o tal conteúdo rele-vante, uma forma de ter seu conteúdo mais com-partilhado seria simples: dicas de como manter um sofá limpo ou como criar almofadas para decorar seu sofá novo. Esse conteúdo pode ser feito como texto, infográfico, vídeo, entrevista com profissio-nais da área. Ainda é possível, por exemplo, usar a realidade aumentada para que o comprador simule como o sofá ficaria em sua sala e compartilhe com seus amigos no Facebook, pedindo opiniões. Ape-nas algumas alternativas. Em linhas gerais, a regra é: crie razões para que as pessoas queiram com-partilhar seu conteúdo.

É importante que os profissionais tenham a cultu-ra da otimização e do compartilhamento. Produzir conteúdo com técnicas de SEO é fundamental. Mas quem está conseguindo se sobressair no mercado é quem utiliza tanto as técnicas de SEO, quanto as técnicas de SMO. Em primeiro lugar, produzindo conteúdo com técnicas de otimização, mas, também, técnicas de viralização. Mídias so-ciais e buscadores não são mundos descolados. O caminho de uma pessoa até fechar uma com-pra pode começar no Google, passar por uma fan page, cair em um blog, visitar seu site e, depois de uma semana, acessar novamente um blog, en-trar em sua loja e comprar. Por isso, integração é a palavra-chave. Que tal inseri-la na otimização da sua comunicação? </>

Camila Porto Camargo é formada em Comunicação Institucional na UTFPR. Ministra os curso “Facebook para Empresas”, “Facebook, SMO e Estratégias de Conteúdo”, e “Estratégias de Venda no Facebook”. Também é colunista no E-commerce Brasil e no TechTudo, além de palestrante em diversos eventos como: I Semana de Marketing Digital ESPM, I Simpósio Sul-Brasileiro de Marketing Digital, 2º Mídia FAG e II Encontro de Profissionais de Marketing do Pernambuco.

Page 60: Revista iMasters #6

60 > Conexão Vale do Silício

Sobre aviões no ar e oportunidadesPor @vdepizzol

Vinicius Depizzol é designer de interface, e partiu com passagem só de ida de Vitória/ES para São Francisco/CA, em 2012, para trabalhar na Xamarin, uma start-up que está mudando a forma de criar apps multi-plataforma.

Mês passado peguei um vôo com meus cole-gas de trabalho até Austin, no Texas, para parti-cipar de uma conferência de desenvolvedores, organizada pela empresa na qual trabalho. Nos dias seguintes, apresentaríamos diversas novi-dades nas ferramentas para criação de apps para iOS e Android que a empresa possui, para mais de 600 pessoas, além de diversas pales-tras sobre como focar na experiência do usuá-rio e interação mobile.

Como ia voar de United, baixei o aplicativo deles na App Store. Depois disso eu passei um bom tempo me perguntando como que uma empre-sa tão grande podia dar conta de tantos aviões no ar, mas não conseguia fazer um aplicativo de celular que prestasse.

De alguma forma eu me limitei a poucos servi-ços web e apps, e tinha certo tempo que não sofria com interfaces ruins e mal pensadas. Mas daí lembrei que experiências como o che-ck-in da United não são exceção (muito pelo contrário!): empresas grandes com soluções quadradas ainda são maioria e podemos vê-las em qualquer canto.

Felizmente esses tipos de problemas — que empresas grandes não dão conta (quem diria!) — são os que muitas start-ups correm atrás para tentar resolver. Elas dificilmente chegam com algo totalmente novo; como têm a oportu-nidade de pensar em como resolver o proble-ma do zero, elas simplesmente tentam oferecer algo simples que funcione bem. Será que é pe-dir demais? :-)

Exemplos de projetos que podem ser chama-dos de inovadores mesmo tendo entrado em mercados existentes não faltam. Quando o

Dropbox foi lançado, já existiam dezenas de soluções que prometiam armazenamento onli-ne. Um mercado que parecia saturado estava, na verdade, cheio de concorrentes meia-boca e clientes insatisfeitos.

O Airbnb (que surgiu com três colchões inflá-veis e um grupo de amigos tentando resolver o problema de hotéis lotados durante eventos em São Francisco) é hoje maior do que muita rede hoteleira ao redor do mundo.

O Facebook mesmo surgiu depois que mui-ta rede social já estava fazendo sucesso. E o Google e o iPod e o Uber, e a lista não acaba.

Até mesmo a plataforma BoicotaSP, que não substitui o Procon nem o Reclame Aqui, mas complementa listando lugares em São Paulo que exploram demais seus consumidores, é um bom exemplo de como sempre existe es-paço para resolver problemas.

Em todos os cantos onde existem problemas há ideias e soluções esperando para serem ocorridas. Quanto maior o número de proble-mas, maior o número de oportunidades.

(Talvez não dê para concorrer com uma com-panhia aérea. Mas tudo bem, uma coisa de cada vez). </>

Page 61: Revista iMasters #6

61

Page 62: Revista iMasters #6

62 > Review

Construindoapps paraFirefox OSuma nova

experiênciaPor @soapdog

O ano é 2013, o mercado de dispositivos móveis está super aquecido e em vias de esquentar ainda mais com a vinda do novo Firefox OS que, com seus apps baseados em HTML5, traz as liberdades e facilidades da web para o mundo móvel.

Mas o que é um app para Firefox OS? Um aplica-tivo feito para Firefox OS é uma coleção de HTML/CSS/Javascript tal qual uma página web. Porém, além disso, ele possui um arquivo de manifesto que o descreve e é utilizado pelo sistema (e pelo marke-tplace) para cadastrar e apresentar seu app. Esse manifesto é um arquivo do tipo JSON que inclui in-formações, como nome e descrição do app e per-missões de acesso ao hardware, que ele precisa para funcionar. Um exemplo de manifesto simples segue abaixo:

{ “name”: “Meu App”, “description”: “Minha descrição”, “launch_path”: “/”, “icons”: { “128”: “/img/icon-128.png” }, “developer”: { “name”: “Meu nome ou organização”, “url”: “http://sua-pagina-aqui.org” }}

Esse manifesto normalmente fica em um arquivo chamado manifest.webapp, ao lado do index.html. Ao entrar no Firefox Marketplace e escolher a op-ção “instalar um aplicativo”, o sistema lê esse mani-festo e o adiciona ao telefone.

Tipos de aplicativosO Firefox OS possui três tipos de aplicativos: hos-pedados, privilegiados e certificados. O primeiro fica no seu servidor e, ao utilizar técnicas do HTML5, como appCache e localStorage, pode ser disponibilizado para acesso offline. É o mais fácil de se fazer e possibilita que qualquer página com design responsivo se torne um app.

O app privilegiado é, na verdade, um arquivo zip com HTML/CSS/JS verificado pelo Marketplace e disponibilizado a partir de um servidor seguro. Ele possui maior acesso ao hardware e os arquivos fi-cam no aparelho. Já o app certificado é destinado somente a Mozilla e seus parceiros.

Page 63: Revista iMasters #6

63

Acesso ao HardwareA Mozilla está padronizando junto aos órgãos com-petentes uma série de APIs que são coletivamente chamadas de Web APIs. Com acesso ao hardware via Javascript, elas permitem o uso de ferramen-tas como o acelerômetro, a câmera, os contatos etc. Essas APIs estão em diferentes graus de im-plementação e padronização, e podem ser vistas em https://wiki.mozilla.org/WebApI. Utilizadas de forma correta e com as devidas permissões no manifesto, o seu aplicativo web tem acesso a fun-cionalidades que, anteriormente, eram restritas a aplicativos nativos.

Simulando o Firefox OSSabe-se que um aplicativo para Firefox OS é con-struído com tecnologias web, definido por um manifesto e que as Web API proporcionam acesso ao hardware. Tudo que é necessário para desen-volver e testar seus aplicativos são uma instalação recente do Firefox e um complemento “Firefox OS Simulator” instalado (http://bit.ly/15fqiCu). Ao ativá-lo, o Firefox inicializa em outra janela um simulador do Firefox OS com todas as funcionali-dades. Basta adicionar o manifesto do seu aplica-tivo ao simulador para que o complemento seja instalado e testado.

Você pode também ligar um servidor web local e abrir seu aplicativo do simulador. As Web APIs pos-suem rotinas para que você não precise utilizar o Firefox Marketplace para instalar apps. Seu apli-cativo pode ser uma página web que oferece um botão de instalação. Muito diferente e muito mais livre que as demais plataformas.

ConclusãoEste foi um breve review para deixar um gostinho de novidade e de liberdade em todos os leitores e desenvolvedores front-end. O Firefox OS possui as facilidades da web e o poder das plataformas móveis. Com suas habilidades de HTML/CSS/JS, você pode sair na frente construindo apps para a nova plataforma e disponibilizá-las tanto no Firefox Marketplace quanto no seu próprio servidor.

O “Developer Hub” do Firefox OS está em http://bit.ly/15folGn. Nele, você consegue mais

informações sobre as APIs, a publicação de apps e outras documentações em geral.

O Firefox OS é totalmente aberto e tanto o código do sistema operacional quanto os apps que vêm incluídos nele estão disponíveis no GitHub em https://github.com/mozilla-b2g/gaia.

A página da comunidade Mozilla no Brasil é bastante ativa, e suas listas de e-mail estão sem-pre prontas para ajudar. Basta nos visitar em http://mozillabrasil.org.br/. Nossa comunidade está sempre aberta a novos membros e nossas listas de e-mail são uma ótima fonte de novidades sobre o OS e novas tecnologias web em geral. A comunidade é distribuída por todo o Brasil com membros desde o Acre ao Sul, e participa de even-tos o ano todo. Fique de olho nas notícias no nosso site e não perca as próximas oportunidades de fazer workshops e participar de palestras sobre o Firefox OS.

A capacidade de criar apps multiplataforma com tecnologias web já existe. Lanço um desafio: de-pois de construir seu primeiro app assim, tente pro-gramar de outra maneira. </>

Andre Alves Garzia tem 32 anos e mora em Niterói, RJ. Ele programa web apps, cozinha macarrão e escreve ficção científica nas horas vagas. Atualmente se dedica à criação de apps móveis com HTML5 e à divulgação do Firefox OS. http://andregarzia.com / @soapdog

Page 64: Revista iMasters #6

Interfaces conceituais, interações reais

64 > Artigo > Design de Interação

Por @eduagni

No ano de 2012 pesquisei muitos pro-jetos ligados a interfaces interativas e conceituais, para produzir novas dis-cussões sobre o futuro da tecnologia em minhas palestras. O interessante foi que essas pesquisas me levaram não só às interfaces conceituais, mas a al-gumas propostas de interação que não imaginávamos nem mesmo no plano das ideias conceituais. Porém, elas já são bem reais nos dias de hoje e po-dem significar grandes soluções de de-sign não só para o mercado, mas para as pessoas de fato. Por isso quero tra-zer aqui alguns dos meus achados so-bre interfaces conceituais e design para pessoas e coisas reais.

Page 65: Revista iMasters #6

Push Pop Press - pushpoppress.com

Interfaces conceituais

Uma das coisas para a qual comecei a dar mais atenção no ano passado foram as propostas vistas em interfaces conceituais, que tentam indagar como serão as interações das pessoas com as coisas em um futuro não tão distante. Esse é o caso dos ví-deos A day made of glass (youtu.be/6Cf7IL_eZ38) produzidos pela Corning, que chamaram minha atenção não por eu acreditar que o futuro será ba-seado em interfaces touch screen (afinal, já temos interações baseadas em movimento e até em ondas cerebrais), mas pelo foco direcionado à ubiquidade e à internet das coisas.

Outro conceito bem interessante é o de transformar coisas triviais do nosso cotidiano em interfaces que criem novas experiências com o ambiente, sem alterar as suas características físicas. Um exemplo disso pode ser visto na janela-conceito desenvolvida pelo departamento de design emocional da Toyota (Windows to the World - ow.ly/hVBMx), que promo-ve um novo tipo de interação do passageiro com o mundo no exterior do carro.

E já que estamos discutindo como serão as coisas no futuro, algo muito especulado hoje é o futuro dos livros e dos materiais impressos. Atualmente, ainda que de uma forma limitada, as tablets já se torna-ram os livros da nova geração. Digo limitada, pois as possibilidades de interação ainda são bastante restritas e pouco exploradas na maioria dos livros di-gitais, e muitas vezes não passam de uma evolução direta dos impressos. Mas claro, existem pessoas propondo algumas revoluções na forma de interagir com os livros, e um desses indivíduos é Mike Matias com o seu Push Pop Press (pushpoppress.com), adquirido pelo Facebook há um tempo. Além de Mike, a IDEO também andou apontando boas di-reções nas possibilidades com os livros digitais, propondo três conceitos diferentes, nomeados de Nelson, Coupland e Alice (ow.ly/hVDQI). Também temos propostas já concretas e inovadoras que não exploram tanto as interações sociais ou multi-mídias, mas sim uma forma mais intensa de leitura e estudo, como podemos ver no projeto LiquidText (liquidtext.net), que utiliza interfaces multitouch para ajudar as pessoas a fazerem uma leitura mais profunda e crítica de textos.

Mas existem algumas interfaces que apesar de pa-recerem conceitos futuristas, já são bem reais. É o caso da interface touchscreen desenvolvida pela Tactus Technology (ow.ly/hVE8v), que possui bo-tões físicos que podem emergir para fora do que parece um vidro plano, para em seguida desapare-cem quando não forem mais necessários. Entre ou-tras coisas, isso poderia ajudar bastante a diminuir a curva de aprendizado das interfaces baseadas em toque para pessoas mais velhas. Interessante, não?

A day made of glass - youtu.be/6Cf7IL_eZ38

65

Page 66: Revista iMasters #6

Os profissionais que trabalham com experiência do usuário conhecem uma série de técnicas e meto-dologias para estimular, facilitar e resolver proble-mas na interação das pessoas com as coisas. Mas e quando o problema de um indivíduo está justa-mente na dificuldade em interagir com outras pes-soas? Essa é a dificuldade das pessoas portadoras de Autismo, um público com características que a maioria dos designers de interação (e a sociedade em geral) desconhecem.

O autista mais do que qualquer outra pessoa ne-cessita de ajuda para interagir com o mundo, e foi pensando nisso que a designer Lingjing Yin criou o Touch-Play (ow.ly/hVF2R), projeto que busca uti-lizar a tecnologia para permitir que crianças com Síndrome de Espectro Autista tenham condições de jogar, explorar e expressar suas emoções e sen-timentos. O projeto teve a colaboração do designer de interação Mark Mckeague na sua concepção, e foi vencedor do Technology Strategy Board Award for Independent Living (2011).

Ao invés de pensar em auxiliar as interações, va-mos pensar na possibilidade de inventarmos as nossas próprias interações e interfaces. Como seria se pudéssemos transformar qualquer coisa que encontrarmos pela frente em uma interface? Essa é exatamente a proposta do Makey Makey (www.makeymakey.com), uma placa baseada em Arduino e acompanhada de clipes jacaré e cabo USB, que nos permite criar um touchpad utilizando qualquer tipo de material que seja ca-paz de conduzir um mínimo de energia elétrica, como bananas ou massinha, e com isso criar, por exemplo, um controle de videogame.

Bom, talvez você não esteja interessado em criar interfaces, mas sim em reconfigurar interfaces exis-

tentes, ou definir uma forma mais natural de reali-zar as interações entre dispositivos, ou até mesmo conectar aleatoriamente diferentes dispositivos formando uma só interface. Pois já existem muitas ideias nesse sentido, no papel ou fora dele.

No plano conceitual, o designer e engenheiro Ishac Bertran criou um pequeno vídeo imaginando como seria uma transferência de arquivos entre um iPho-ne e um Macbook (ow.ly/hVG8L), através de uma interação mais manipulável e intuitiva fisicamente, com um simples “arrastar e soltar” de um gadget para o outro.

Saindo do conceitual e entrando no plano das coi-sas que já saíram do papel encontramos o Pinch (youtu.be/jRGLkj-psCc), uma interface que co-necta as telas de vários smartphones ou tablets simultaneamente. Basicamente, um usuário pode vincular duas telas diferentes ao colocar os dedos em forma de pinça sobre elas. Essas telas podem ser alinhadas livremente, na vertical e na horizon-tal, e as imagens podem ser compensadas mesmo com as telas desalinhadas. Esta tecnologia está atualmente em desenvolvimento por um grupo de pesquisa da Universidade de Tecnologia de Tóquio, e vem sendo apresentada em algumas conferên-cias para incentivar os desenvolvedores a criarem aplicativos para esta nova interface. </>

Future of the Book for IDEO - ow.ly/hVDQI

Makey Makey - www.makeymakey.com

66 > Artigo > Design de Interação

Design para pessoas e coisas reais

Edu Agni é UX Designer no iMasters, trabalha há nove anos com projetos nas áreas de usabilidade, interface, interação, criação e web standards. Também é curador da área de design da Campus Party Brasil e professor dos cursos de Direção de Arte da SAIBADESIGN.www.uxdesign.blog.br / @eduagni

Page 67: Revista iMasters #6
Page 68: Revista iMasters #6

Framework open source de componentes de interface que nasceu em 2009. Você pode estar perguntando porque de-veria investir seu tempo no Alloy, ao invés de usar o jQuery, com seu gigantesco ecossistema de plugins. O caso é que a mani-pulação de DOM é só o topo do iceberg quando estamos lidando com aplicações modernas e de alta escalabilidade. Você prova-velmente vai utilizar uma biblio-teca para templates, outra para carregamento modular, outra para estruturação MVC, outra para componentes de UI (como jQueryUI/ExtJS) etc. O Alloy vem com todas essas coisas juntas. Então não tem confusão entre bibliotecas, só uma API uniforme que deixa sua vida mais fácil. É construído com base no YUI3, um projeto da Yahoo! e é man-tido pelos engenheiros da Liferay.

http://alloyui.com/

O MultiSwitch é uma extensão simples para Google Chrome, porém muito útil quando você precisa simplesmente alternar entre o localhost e ambientes de testes, customizando o título de cada ambiente.

http://bit.ly/i5HQu4

O Pylons fornece uma imple-mentação orientada a objetos de MVC, porém “terceirizando” um pouco o serviço. Na camada de modelo, é possível trabalhar com models como o storage engine do Google App Engine (BigTa-ble), CouchDB ou o ORM/DAL SQL Alchemy. Para a camada de views, fornece suporte a sis-temas de template como Mako, Genshi e Jinja2. De certa forma, o Pylons é um “controlador inte-grado com outras ferramentas”.

http://www.pylonsproject.org/

Alloy UIMultiSwitch Pylons

iMasters Box

68 > iMasters Box

Page 69: Revista iMasters #6

É um software open source gra-tuito para IDE, desenvolvido em Java, com suporte a CSS, HTML, JavaScript, ScriptDoc, XML e tex-to comum, embora também seja possível configurá-lo para supor-tar PHP,Ruby on Rails,Adobe AIR e Bibliotecas AJAX. É baseado no Eclipse. O Aptana Studio é dis-tribuído em multiplataforma, ou seja, pode ser rodado em Windo-ws, Linux e Mac OS X. Também é possível se integrar ao Eclipse através de um plugin. Uma funcio-nalidade bastante interessante do Aptana é seu assistente de códi-go. Ele funciona como um quadro branco, estilo pop-up, que sugere como você pode preencher com o código. Ele tem integração com Git e permite personalização da IDE, entre outras características.

http://www.aptana.com/

O Twisted é uma engine de rede escrita em Python que suporta inúmeros protocolos, incluindo HTTP, NNTP, IMAP, SSH, IRC, FTP e mais. Contém um servidor web, vários clientes de chat, ser-vidores de mail, é composto de inúmeros sub-projetos e interfa-ceira com diversos reactors que você pode escolher. Ele tem uma extension em C para falar com epoll, usa o PyKQueue para falar com kqueue, o próprio python sabe falar com select e poll, e usa o toolkit Win32 do python para usar IOCP.

http://twistedmatrix.com/

Webservice para consulta de CPF/CNPJ na Serasa. Existem vários tipos de consultas para análise de crédito que permitem a automação de back-office.

Ambiente de testes: http://bit.ly/10bxdvT

Ambiente de produção: http://bit.ly/10bxfnp

http://www.consultacpf.com/

Aptana StudioTwisted API ConsultaCPF

O iMasters Box é um agregador de serviços voltado para desenvolvedores web, que reúne ferramentas úteis para esses profissionais e que já estão disponibilizadas na rede. Aqui na Revista, vamos selecionar sempre algumas das ferramentas mais interessantes para você. Conheça mais o iMasters Box em http://imasters.com.br/box e participe! Sua sugestão de ferramenta pode vir parar também na Revista!

69

Page 70: Revista iMasters #6
Page 71: Revista iMasters #6
Page 72: Revista iMasters #6