Revista iMasters #06 - Maio by iMasters Redação

Maio 2013 / Ano 02 / Edição 06 Nós fazemos a Internet no Brasil

o_futuro_é_agora review

design de interação

Construindo apps para Firefox OS - uma nova experiência

Interfaces conceituais, interações reais

R$24,00

presença digital

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

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 redacao@imasters.com.br 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.

Editorial Você já se perguntou qual poderá ser a próxima revolução tecnológica e como ela vai influenciar as nossas vidas? Tirando todas as especulaçõ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. Independentemente 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 computação, saímos de uma fase em que tínhamos uma figura de um computador/assistente pessoal, com interface de entrada e saída (além dos “acessórios”) e estamos caminhando 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 dispositivo 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 característica, mas com muito mais tecnologia. São acessórios de um mundo conectado! O que importa ainda é que pouca coisa mudou, mas continuamos apertando botões (virtuais) e sua mão continua sendo o principal instrumento de controle desses dispositivos. Baseado nisso, quero levantar aqui uma discussão para pensarmos no futuro (das interfaces): convidar você, leitor, para refletir a forma como estamos acostumados a utilizar tecnologia 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 paradigmas.

Luis Leão é desenvolvedor web que encontrou em APIs e hardware aberto novas formas de integrar a web com o mundo real. www.luisleao.com.br redacao@imasters.com.br

6 > Sumário

22 :: Capa > O futuro é agora

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

62 :: Review Construindo apps para Firefox OS

64 :: Design de Interação Interfaces conceituais, interações reais

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

A iMasters é uma revista de Tecnologia/Web aberta a novas ideias. Para colaborar envie o seu material por e-mail <revista@imasters.com.br>

8 > Entrevista > Maujor

Maurício Samy Silva

O Dinossauro da CSS Quem 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

10 > Entrevista > Maujor

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 concluí a graduação em 1973, no posto de capitão. Em 1976, aprovado em um concurso para magistério do Exército, comecei a dar aulas de Geometria Descritiva e depois Matemática para alunos do Colégio Militar do Rio de Janeiro. Minha carreira militar foi toda exercida no magistério. Paralelemente à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 comerciais e industriais. Minha rígida formação militar, aliada à minha fascinação pelas ciências exatas, moldaram minha conduta 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 Copacabana, 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 delas 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 intensa. 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 usavam 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 realizado 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 ensinar 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 pouco 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 linguagem e da comunidade. Como você resume a evolução da CSS nos últimos nove anos?

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

Foto: acervo pessoal - Maujor

Maujor: Se voltarmos nove anos atrás estaremos 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 mercado de navegadores. Eric Meyer era o nosso maior mestre, o verdadeiro guru mundial das CSS. Seu livro “Eric Meyer on CSS” era um clássico e ele começava o livro ensinando como transformar um layout em tabelas em um layout CSS, mostrando as regras CSS capazes 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 somente tabelas, mas qualquer elemento da marcação com uso de cores personalizáveis. No Brasil, foi por volta de 2007 que as CSS começaram a ser usadas em larga escala. De lá para cá, evoluímos de um começo com folhas de estilos recheadas de hacks CSS para fazer as coisas funcionarem no IE6 até os fantásticos efeitos de sombreamento, gradientes, transformações, animações etc. que, aliados aos polyfils que proliferam aos borbotões, colocou à disposição dos desenvolvedores 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 famigerado “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 funcionalidades sendo implementadas com uso de pre-

Foto: acervo pessoal - Maujor

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çaram a ser implementadas em um navegador ou outro com uso dos perniciosos (ou utilíssimos?) prefixos proprietários. Começou e estamos (re)vivendo uma velada guerra dos navegadores. Resumindo, posso afirmar que saímos de um mundo cheio de “hacks” para um navegador e entramos em um mundo repleto de prefixos proprietários para vários navegadores. Eu pergunto: isso é bom ou é ruim? Minha convicçã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 proprietá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 conseguimos hoje? Maujor: No início da década passada duas premissas relacionadas ao desenvolvimento front-end transfomaram-se em verdadeiros dogmas e foram repetidas até a exaustão em blogs e matérias especializadas 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, tamanhos, fundos, etc.) e JavaScript para comportamento”. Eram as famosas três camadas do desenvolvimento front-end.

12 > Entrevista Maujor

Foto: acervo pessoal - Maujor

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 falhado 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 premissas: a XHTML já não era mais a linguagem de marcação do futuro.

arriscaria um palpite sobre o que virá no futuro. Parece-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.

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

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 estudar CSS1, nada do que aprender será descartado 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:

No futuro, de concreto, para citar apenas algumas delas, posso antever o uso das funcionalidades já em fase de estudos no W3C, relacionadas à criação de layouts complexos com os Módulos para Grids, Regiões e novas funcionalidades 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

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.

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

Declarando um seletor e a ele aplicando propriedades 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 estudo 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 possí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-

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 extra você vai conhecer os fundamentos das CSS, tornando-se familiarizado com propriedades e valores 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 posicionamento 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 posicionamento 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 agora 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 sobre a importância do CSS para múltiplos dispositivos 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 responsivo, 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 funcionalidades muito bem estudadas e entendidas por desenvolvedores.

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 destinados à 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 float 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 aposta 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 substituir 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 historicamente 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 incorporados 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 proprietários. Assim, é coerente que eu acredite também na substituição do Flash por tecnologias abertas.

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 queries e sugerindo uma funcionalidade que denominou de “element querie”, destinada ao uso código modular em design responsivo. Recomendo a leitura em bit.ly/14RNW8r.

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.

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/css3layout/) e o “Flexible Box Layout Module” (w3.org/

Remy Sharp, um consagrado autor inglês, escreveu um artigo a respeito desse assunto que demonstra 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.

14 > Entrevista > Maujor

RiM: Nos anos 2000 era difícil trabalhar com frameworks 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 trabalho 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 bibliotecas à disposição dos desenvolvedores. E, não é somente a diversificação de assuntos, mas também a sobreposição de mesmos assuntos. A restrição que faço ao uso de frameworks e bibliotecas 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 automatize 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 poderá 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 desempemho, 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 inspira, mas certamente existe um o que. Eu comecei na área web com o objetivo de vencer um desafio que

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

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 implementem em seus projetos? Maujor: Permita-me uma explicação bem simples 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 conteú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 problemas, 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 mecanismos de busca (máquinas) que manga não é fruta. Para se “dizer” isso usamos microdata, que é uma especificação do W3C.

Livros publicados pelo Maujor

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 explicando 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 fornecer 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 online que fornece URLs destinadas a explicar a semâ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 brasileiros 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 razoavelmente conhecido na comunidade de desenvolvimento. Eu comecei a receber vários e-mails solicitando que transformasse os tutoriais do site em um livro. Respondia a esses pedidos agradecendo pela ideia e argumentando que não me sentia confortá-

vel em transformar um conteúdo disponível gratuitamente no site em um livro pago. Não queria me afastar da proposta inicial, de compartilhar conhecimentos usando o site, e até hoje penso da mesma forma. Foi a época do nascimento 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 “Construindo 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 grande que eu não parei mais de escrever, e esse ano pretendo lançar meu décimo-primeiro livro, sobre Design Responsivo. </>

16 > Criatividade Tecnológica

Interfaces vestíveis Por @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 computador 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 mudanç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 presentes em todas as outras máquinas, dispositivos e invenções humanas, como óculos, cadeira, livro, carro, autofalante, relógio, celular etc. A cada invençã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 desafio 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 “transparentes”. Estas são as características que se esperam 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 grande que há aparelhos telefônicos para deficientes auditivos e cegos que conseguem fotografar, apesar da falta de visão.

Google Glass (imagem: http://bit.ly/17BRzPc)

Segundo o teórico e escritor Steven Johnson (recomendo muito a leitura de seu livro Cultura da Interface, Editora Zahar, 2001), câmeras fotográficas são máquinas de processos mecânicos que mostram representações como produto final, já um computador 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 pensamento 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 algum dispositivo eletrônico anexado ao corpo. Pagers, 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 barulhinhos 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 “incorporar” o processo de comunicação de forma direta e instantânea. Para facilitar, vamos estabelecer pequenas categorias 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-

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

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 à lavagem!). Já as terceiras, como diz o nome, são implantadas 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 reló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 computador 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 desenvolve 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 rapidamente essas informações estarem sincronizadas 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

18 > Criatividade Tecnológica

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 informaçõ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 feito 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 importantes para as interfaces mais inovadoras e mesmo futurísticas, quais sejam, realidade aumentada e visão computacional. Computer Vision ou computação visual, como ficou a tradução do termo no Brasil, 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 visuais 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 “expansão”. Outro pesquisador interessado na realidade aumentada 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 projetar, 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

Sensor Nike+ (imagem: http://bit.ly/17BRFpY)

por cima do seu pé e o derrubou no chão, quebrando 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 relato, 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 óculos. 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 sistemas 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 processar 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

Audio Tooth Implant (imagem: http://bit.ly/17BVgV5)

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

mais tem se apropriado das possibilidades dos têxteis são os fashionistas e performers da arte e tecnologia. 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-utilizado 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 Electronics, como ficou conhecido, é o trabalho de pesquisa do Bioengenheiro Todd Coleman. Esses circuitos eletrônicos são como tatuagens de chiclete, totalmente flexíveis, que se adequam ao movimento da pele. Foram inicialmente criados para monitorar a atividade cerebral, mas Coleman aposta 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 Loizeau. É 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, sujeito 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, independentemente 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

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 interfaces, um cérebro expandido. Curiosamente, nosso texto começou falando do corpo como metáfora para as primeiras invenções e aparatos tecnológicos 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 design 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. </>

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. - lina@blab.art.br

20 > Presença Digital

Os novos diálogos na era da economia da atenção Antigamente, quando havia menos barulho nas cidades 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 famigerado fone de ouvido tornaram um canto de passarinho indiscriminado. Dizemos apenas “tem um pássaro cantando”, mas não fazemos ideia de que espécie ele seja, desaprendemos ao longo do tempo 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 escrever 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 comunicaçã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 primeiros adeptos, de chamar a atenção do público. Mesmo que isso conduza a estratégias fracassadas, como os investimentos que muitas marcas fizeram no Second Life. Como não conhecemos exatamente os efeitos daquele novo meio, não podemos 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 reconfigurando 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 incertezas em que permanece a questão: como chamar 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, consequentemente, 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 dialogaram 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êncio não é uma opção na rede. O conteúdo corporativo não pode mais ser simplesmente replicado na Internet. Ele deve ter uma linguagem própria, estruturada de acordo com a audiência e que seja capaz de promover efetivamente 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

Por @anaerthal

shopping e foi orientado pelo pai a escrever para a fabricante de brinquedos. Considerando a fantasia 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 conduta 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 manterem 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 consumidores 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 salientar 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 associada. 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 trabalho 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 economia 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 diversidade 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.

22 > Capa

o_futuro_ĂŠ_agora

Por @lufreitas, para @iMasters

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

Então aconteceu o SXSW - South by Southwest, evento que fala sobre tendências e futuro, que aconteceu em março, nos EUA. O encerramento ficou por conta de Bruce Sterling, escritor de ficção científica norteamericano, que observou que os computadores morreram. (Você pode ouvir a gravação aqui http://bit.ly/ZslHYF). Em seu discurso, Sterling mostrou que a “disrupção pela disrupção” em que vivemos esvazia os sentidos e não leva a nada – ele alinhava imagens fortes com a ebulição de hoje. Ao comparar nossos avanços com a civilização que simplesmente saiu de sua cidade cuidadosamente 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 sequência, decretou várias mortes, além do computador: 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 vestir”, interfaces que se integram totalmente ao ser humano e afins. Conversar sobre como as interfaces estão evoluindo 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

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 sempre lembra o seu erro de previsão sobre a Wikipedia – 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 experimentamos 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 desaparecer. 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 Mutato, que estiveram lá no SXSW e ouviram Sterling ao vivo, o que nos levará à frente é exatamente a experiência e a conversa. “O modelo será fazer barato e compacto, em geral. Mas a

24 > Capa

regra não é absoluta, tem que saber o que está fazendo”, disse Cris. Quem tem 40 ou 50 anos viveu grandes mudanç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 notebook 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 inteligente 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 exemplo, 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 especialistas em mercado digital, é a interface que vai permitir digitalizar a vida como nós, humanos, a percebemos. Porque se a tecnologia mais valiosa é a memória, como lembra André Passamani, todos vivemos a ressaca da hiperconexão. Falta, ainda, segundo Luli, a função fática. Afinal, para os humanos, tudo é linguagem – e

essa é uma das grandes vantagens cognitivas do ser humano. “Nós compreendemos a linguagem 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 transformar na interface “do futuro”. Com tudo isso, tanto André Passamani como Cris Dias concordam. E eles acrescentam: “O Sterling acerta quando diz que estamos viciados 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 corajoso 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

26 > Código Livre

Informações e dicas sobre projetos Open Source Por @ale_borba

Web2Canvas Esse aplicativo foi construído, inicialmente, no Hackathon do Sebrae, na Campus Party #6, onde o desafio era criar um aplicativo que empregasse a metodologia canvas para desenho do modelo de negócios. Totalmente 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, simples 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 RESTful e/ou qualquer outro sistema web simples ou até mesmo complexo é uma tarefa bastante simples se utilizarmos o Bottle. Para saber mais do projeto, acesse http://bottlepy.org

ownCloud É um app escrito em PHP para armazenamento de arquivos, sincronização e compartilhamento. 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 encontrada em http://owncloud.org/

FreeNAS É uma plataforma para Storage, baseada no FreeBSD, simples, rápida e estável. Além de uma comunidade internacional comprometida de desenvolvedores e usuários, ela conta com muitas facilidades e funcionalidades que a deixam bem à frente das outras. O FreeNAS suporta compartilhamento através de sistemas Windows, Apple e unix-like, suporta RAID e, desde as suas últimas versõ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 chave-valor, que garante consistência acima de tudo e é voltada especificamente para pequenos 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ê realmente precisa de muita escalabilidade. Mais informações em http://arakoon.org </>

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

28 > Desenvolvimento

Sem dúvida o componente mais famoso do Respect é o Respect\Validation, feito para validar qualquer 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

um microframework de respeito Por @alganet

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.

<?php use 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

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

Há mais do que o Validation pra usar. O Respect é uma sólida caixa de ferramentas para qualquer programador PHP. Existem ferramentas para manipular 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.

Exemplo 3: Obtendo dados de tabelas de um banco de dados já existente usando o Respect\Relational <?php use 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 escolher 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 sentido 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.

•• O Respect Bundle para o Laravel disponibiliza os componentes de validação (Respect\Validation), bancos de dados (Respect\Relational) e Configuração (Respect\Config). •• O próprio componente Respect\Validation já possui integração nativa pra aproveitar validadores do Zend Framework 1 e 2 ou Symfony 2. •• Há um Bundle para o Symfony2 em desenvolvimento 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 comunidade estrangeira.

Conheça mais do Respect •• respect.li

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 é projetado para ser extremamente reutilizável e fácil de manter.

•• twitter.com/phprespect

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

•• Respect Bundle para Laravel: bit.ly/XJ3iaO

•• github.com/Respect •• Exemplos: github.com/Respect/samples •• Benchmarks: bit.ly/XJ3abk

•• Respect\ValidationBundle para Symfony: bit.ly/XJ3rLk Conheça outros microframeworks similares ao Respect em microphp.org. </>

<?php use Respect\Rest\Router; $roteador = new Router; $roteador->get(‘/users/*’, function($screenName) { echo “User {$screenName}”; });

Para quem deseja utilizar o Respect com outra solução, existem pontos de integração com ferramentas bastante populares:

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

30 > Por dentro da W3C

O futuro do HTML5: HTML 5.1 Por @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 Nightly

www.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 sendo 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 interoperabilidade 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 novidades 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

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 principal 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 implementem essa função de forma desejada. Importante lembrar que o atributo role foi publicado como recomendação do W3C em março de 2013 (www. w3.org/TR/role-attribute/).

Tabelas classificáveis

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 coluna 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 serem 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é mesmo um atributo para identificar o download de um arquivo dentro de um elemento de âncora. Vale lembrar que tudo que foi comentado neste artigo 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 linguagem 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/ </>

www.w3.org/html/wg/drafts/html/master/ tabular-data.html#table-sorting-model O atributo sortable é um atributo booleano em elementos 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

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

32 > Opinião

Cloud Computing Muitas das novas tecnologias são baseadas em computação em nuvem e conectividade constante. Quais são os problemas e desafios que são gerados com essas tecnologias e até que ponto privacidade e segurança estão sendo discutidos?

Cezar Taurion - New Technologies Manager/Technical Evangelist da IBM

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

Toda mudança de paradigma acarreta desconfianç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 computação em nuvem, o conteúdo de desktops, notebooks e tablets estará na nuvem, e não nos dispositivos. 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 roubados, o fato de as informações estarem nas nuvens e não mais nos seus HDs é bastante positivo.

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 geral é mais simples e seguro do que armazenar esses 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 recomendações de livros na Amazon ou de filmes no Netflix como bons exemplos.

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 todos passam a ter os mesmos padrões. No modelo atual, uma grande parcela dos usuários não atualiza seus softwares adequadamente, deixando os bugs que permitem vulnerabilidades ainda ativos, e os usuários também podem ter mais ou menos recursos de segurança ativos em seus PCs e laptops.

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, definir 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.

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 seguranç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!”.

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 vantagens, especialmente em relação a economia e flexibilidade que ela pode proporcionar na infraestrutura de TI. Apesar das vantagens, também existem questões que devem ser avaliadas com cuidado antes de se embarcar nesta solução. Grandes desafios estão presentes para quem já usa ou está pensando em utilizar esta tecnologia, a começar

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

João Batista Neto - Desenvolvedor Web na iMasters Penso que o maior problema seja garantir a integridade e a segurança da informação; da mesma forma, 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 privacidade 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 americano (U.S. Department of Commerce), através do NIST (National Institute of Standards and Technology), 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 oportunidades e desafios que não estão somente na armazenagem, 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 armazenamento em nuvem, contratando grandes corporações estrangeiras sem se preocuparem com a segurança do acesso a essas informações que podem ser realizadas de forma privilegiada por governos de outros países.

O problema é reflexo da falta de investimento da indústria de software em novas tecnologias de impacto, 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 é sempre o mesmo, falta investidor para escalar, falta cultura que incentive a criação de tecnologias disruptivas e falta a aproximação das universidades junto a indústria e governo. Se analisarmos o atual cenário, o Governo vem fomentando 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 expostos 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 valor 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 aspectos de segurança, especialmente políticas de acesso, bases de dados, e atualizações de software. Vulnerabilidades de segurança precisam ser corrigidas com muito mais agilidade do que quando o servidor estava disponível apenas para a rede interna da sua empresa, e criptografia, tanto na transmissã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. </>

34 > Open Data

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

Mais do que uma tradução, este artigo se trata, na verdade, de uma adaptação. No artigo original, 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 Aceleraçã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 seguinte questão: quem foram os maiores beneficiados com as obras do PAC em 2012?

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

Localizando os dados A 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 - Programa de Aceleração do Crescimento / Obras do PAC em CSV referentes ao 6º balanço - 12/2012 (http://bit.ly/11TS2Jo).

Preparando os dados No artigo original, o autor descreve os passos necessá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 ASCII 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

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 resolvido com o seguinte: sed -i “s_$..$/$..$/$....$_\3-\2\1_g” pac_2012_12.utf8.csv

A linha acima fará a conversão de todas as ocorrê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 pontos descritos aqui, ainda tenha linhas com metadados, 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 relacional Nosso objetivo é trabalhar com os maiores beneficiados e quais são as áreas à que o dinheiro é destinado. Para um pequeno conjunto de dados, poderíamos utilizar uma planilha eletrônica. Entretanto, vamos seguir um caminho um pouco diferente 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 completo para nosso propósito.

Carregando os dados no SQLite Agora que já temos o conjunto de dados, precisamos carregá-lo no SQLite. Para isso, podemos utilizar um pequeno script python chamado csv2sqlite. Como o nome sugere, ele carrega o conteúdo de um arquivo CSV em uma base SQLite. 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: # isso carregará nosso arquivo CSV em uma nova tabela chamada “pac” # dentro de uma nova base SQLite chamada pac.sqlite csv2sqlite.py pac_2012_12.csv pac.sqlite pac

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 I Vamos até o shell do sqlite executar algumas instruções SQL: $ sqlite3 pac.sqlite SQLite version 3.7.13 2012-06-11 02:05:22 Enter “.help” for instructions Enter SQL statements terminated with a “;” sqlite>

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: sqlite> SELECT ‘sig_uf’, SUM(‘investimento_total’) ...> FROM ‘pac’ ...> GROUP BY ‘sig_uf’ ...> ORDER BY SUM(‘investimento_total’) DESC ...> LIMIT 20;

36 > Open Data

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 queremos 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 possuem o mesmo valor no sig_uf. Feito isso, limitamos o resultado em apenas vinte linhas e, finalmente, ordenamos do maior valor para o menor valor. O resultado dessa consulta segue abaixo:

Investimento

171740111838.0

49473735257.08

41298926989.44

28724574100.32

27157499074.68

24401562534.44

16320196665.42

15073583842.54

13666131507.18

13633033294.1

13033312986.18

12473700610.37

9472695230.34002

8926094516.68

7630901437.12

6906802672.1

6465137159.22

6189088362.3

5934839614.14

5509364605.14001

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

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 recursos 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, recuperação de áreas ambientalmente degradadas são atribuições municipais”.

Análise II - Filtragem Agora 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;

Investimento

618124738.899999

171158656371.58

546496245.64

49089877209.84

40175377781.16

27928207915.2

26717924226.26

Visualização gráfica

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? 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;

Orgão

Investimento

Fundação Nacional da Saúde

7962934548.78002

Ministério da Saúde

768838158.779999

Aqui utilizamos o WHERE para restringir os resultados à 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;

Investimento

785712631.78

746274322.939999

722866871.88

Uma 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, é transformar os dados em alguma informação que queremos no mapa. Por exemplo, quais são as 20 obras que mais receberam recursos?

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’;

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

sqlite> .headers on sqlite> .mode csv sqlite> .output top20-obras.csv sqlite> 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’;

38 > Open Data

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

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

•• 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 resultados 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 Coordenadas. É onde o Google Maps Engine irá colocar os

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 semelhante ao abaixo:

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

Apêndice Saiba mais como lidar com dados:

Resultados Como 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. Descobrimos também que a maior parte dos recursos do PAC são utilizados em obras do Ministério das Cidades. 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 geográficas para identificar as obras. Isso tudo foi feito utilizando um conjunto simples 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, conforme o volume de dados e a quantidade de tabelas, mas é possível extrair informação de várias tabelas ao mesmo tempo, apenas cruzando informações entre elas.

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

•• 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, utilizando 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 Manipulation by Tim McNamara - http://bit.ly/ p4UB87 d. Command Line Shell For SQLite by D. Richard Hipp et al. - http://sqlite.org/sqlite.html </>

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.

40 > +Interatividade

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

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

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

Eu tenho um amigo que sempre lembra dessa piadinha ridícula quando algum cliente reprova algo sem sentido. Afinal ele reprova porque ele consegue, porque ele pode reprovar, ué.

Simplesmente porque eles existem.

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

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.

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

Bobo né. Pois é.

Ela quantifica todos os seus movimentos.

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

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

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

Mas hoje, uso todos os dias. Será que você vai usar o Leap Motion? Sabe por quê? Vai. Porque eu posso! :P Explico: é uma tecnologia bem bacana, mas sem nenhuma explicação racional. Ela mede seus movimentos e te devolve uma valor em “fuels”. Esses fuels não tem relação nenhuma com alguma medida conhecida. Não são metros. Não são calorias.

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?

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

Vai, sabe por quê? Porque você pode. Pode controlar a interface sem tocar nela, usando uma pulseira.

São Fuels.

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

Leap Motion (www.leapmotion.com)

Mas quem se importa?

Para saber mais:

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

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

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

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

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

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

Enfim, o que quero dizer com isso tudo? Que vivemos na era das invenções. E que sempre podem surgir novas tecnologias, que façam desde seu carro 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

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

42 > Hardware

Neste artigo vou falar um pouco, sob o ponto de vista do desenvolvimento, como é trabalhar com protótipos de hardware. Quem trabalha com pesquisa ou desenvolvimento de novas tecnologias pode se deparar com protótipos e provas de conceitos de produtos e saber trabalhar com este recurso 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 trata de algo que ainda está no estágio inicial de desenvolvimento. 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 adopters 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 muitas 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 massa

Trabalhando com protótipos Por @pichiliani

Vou comentar algumas experiências que tive com alguns protótipos de hardware relacionado a pesquisas que desenvolvi. Espero que este relato possa ajudar a guiar ou mesmo incentivar outras pessoas a querer trabalhar com pesquisa e desenvolvimento, em participar com software, envolvendo protótipos de hardware. O primeiro protótipo de hardware que tive a oportunidade de trabalhar foi em 2010, graças a um concurso para estudantes ligado à conferência acadêmica UIST 2010. O protótipo em questão era um

teclado da área de pesquisa da Microsoft que possuí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 protótipo – veja aqui http://youtu.be/vcuzKcPX2eQ. Fui até Nova York participar da conferência e também do concurso que distribuiu alguns prêmios em diversas categorias (infelizmente não consegue ganhar em nenhuma delas). Apesar de ficar muito empolgado quando recebi o protótipo, tive diversos problemas para o desenvolvimento. 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 inesperadas e com um receio de quebrar o equipamento. 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 (confira: http://youtu.be/raQmKH1xY_Y). De acordo com o fabricante, este é um dispositivo que possivelmente 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 Raspberry PI (http://bit.ly/X6FiZZ). Mais recentemente conseguir obter um tablet protótipo da Intel (codinome Penwell) para avaliações e desenvolvimento de aplicações colaborativas

em tempo real, um dos tópicos que estou pesquisando. 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 cientí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 receber 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. Apesar 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 / pichiliani@gmail.com

44 > Comunidade

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

Você imagina que existe uma biologia sintética? Pois existe. Aliás, só existe por conta da Tecnologia 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 capacidade 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 disciplinas 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ímica, 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 explica: “É desenvolver organismos sintéticos, criados a partir de partes padrão, os BioBricks, com uma finalidade específica”. De quebra, eles aproveitam 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 Brasil, pelas normas da CNTBio (Comissão Nacional Técnica de Biossegurança) e só pode ser realiza-

da em laboratórios credenciados. “Criamos engenharia 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, fungo ou planta). Pior: os componentes genéticos, por aqui, custam pequenas fortunas. “Cada pedacinho custa cerca de R$ 1.000 quando mandados sintetizar comercialmente. Para criar um circuito de genes, você pode precisar de três a 20”, diz Andrés. A ideia desse grupo é espalhar a cultura pelas outras universidades brasileiras, incentivar a pesquisa 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 conhecimento: hoje é muito caro testar as bebidas alcoólicas para adulteração por metanol. É preciso colher a amostra, ter uma máquina cara no laborató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ível O interessante é que essa comunidade está organizando o conhecimento usando os parâmetros open source que tantas vezes utilizamos para desenvolver 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

46 > Comunidade

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 també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 formulamos as perguntas a partir dos dados. Podemos fazer a pergunta primeiro no computador, desenvolver 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 bancada 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 construir 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, produzidas segundo códigos muito específicos e, pra complicar, de acordo com uma posição espacial muito específica.

A realidade brasileira Aqui 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, reagentes 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êmicas) e de grandes empresas. Sim, são as multinacionais, como Braskem, Monsanto, Syngenta e Bayer, entre outras, que têm interesse nessa pesquisa.

A grande questão para o grupo é mesmo a comunicaçã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 dedicadas 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 participantes. •• 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 plataforma que permitirá localizar rapidamente qual é o biobrick necessário. Conheça mais sobre o trabalho do Synbio acessando 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.

48 > Encontro 7Masters

Plack - Super-Bonder para a Web

Eden Cardim - 7Masters Perl Plack é uma implementação em Perl da especificação PSGI. Ela foi criada para resolver o problema 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-

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 aplicação em conjunto com um Handler. A forma como a aplicação é carregada pode ter bastante impacto na execução da aplicação, como por exemplo, carregar as bibliotecas antes dos forks acontecerem, para se aproveitar do copy-on-write e diminuir a assinatura de memória. Outros casos também incluem carregamento sob demanda, que é útil para desenvolvimento, 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 comando que controlam os diversos aspectos da execução da aplicação. O Plack implementa um executor que se chama plackup e é tipicamente 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:

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 setemasters@imasters. com.br 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.

Two Step Verification

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

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 implentando as mais diversas funcionalidades. 7. Frameworks: Catalyst; CGI::Application; Jifty.

Dancer;

Mojo;

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

Erick Belluci Tedeschi - 7Masters PHP Muitas pessoas acham que suas informações pessoais guardadas em sites de e-commerce, jogos, redes sociais, etc não irão vazar para “terceiros” mal intencionados. Essas pessoas estão enganadas, seus dados já vazaram! Em 2012, por exemplo, vazaram mais de 6 milhões de credenciais de acesso da rede social LinkedIn. Assim como vazaram também de outros serviços largamente utilizados, 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 impacto da utilização de contas roubadas por crackers é o uso de mais um fator de autenticação com o

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): comumente utilizado em ATMs e bloqueio de celulares. É um número secreto para o usuário. •• Padrão de Desbloqueio e Picture Password: utilizado no Android e no Windows 8, respectivamente. 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 normalmente 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 interior, 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 (normalmente os produtos mais caros!) etc. Dispositivo que identifica “unicamente” o seu portador.

3. Aquilo que você é Biometria (bio[vida] + metria[medida]) - Característica física ou comportamental que identifica unicamente 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 “original”. 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 pessoa 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 complementar 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 sistema 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úmero 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!

Perl na Bioinformática

sos módulos específicos para as áreas científicas, como o BioPerl. Além das facilidades que a própria linguagem possui, há toda a comunidade de desenvolvedores que estimula a troca de experiências e conhecimentos através de diferentes meios, desde listas de discussõ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, especialmente quando se deseja fazer ciência.

Felipe Leprevost - 7Masters Perl Desde seus primeiros anos, o Perl tem se mostrado extremamente eficiente nos mais diferentes cená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 projetos, como a web na década de 90. Porém, a linguagem 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 começaram a utilizar cada vez mais sistemas computacionais para gerar dados baseados em experimentos biológicos, criou-se a necessidade de novas ferramentas que pudessem auxiliar no manuseio dessas informações e, como muitos desses dados são gerados em forma textual, uma linguagem poderosa no manuseio de texto se tornou uma das principais ferramentas da rotina de processamento e análise de dados. A bioinformática é uma área multidisciplinar que une duas diferentes áreas do conhecimento - a biologia (especialmente a biologia molecular) e a computação. Os especialistas que se dedicam a ela têm como preocupação elaborar novas estratégias de análise de dados, assim como desenvolver novos softwares para auxiliar no processamento desses dados, que, não raramente, são gerados em grandes quantidades. Nesse sentido, o Perl tem sido extremamente importante 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-

Seja um Perl core hacker

Breno Oliveira – 7Masters Perl Existem muitos rituais de passagem em desenvolvimento 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 framework 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.

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 severidade baixa, muitos dos quais exigem pouco ou nenhum conhecimento de Perl, muito menos de outra linguagem. Problemas simples, como documentaçã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 parágrafo: clone o repositório em git://perl5.git.perl. org/perl.git ou no mirror do Github; abra o arquivo 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 perlbug@perl.org com uma descrição em inglê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ê gasta 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

Bruno F. Souza “Javaman” – 7Masters Java

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 fornecedor, 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 tecnologia 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 sempre buscou fornecer portabilidade: a capacidade de desenvolvedores e empresas de escolher entre multiplos fornecedores. E quando se fala em portabilidade de Java, imediatamente pensamos na capacidade de executar aplicações em múltiplas plataformas, como por exemplo, Windows, MacOS, Linux. Mas a portabilidade 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 capacidade é que permite que o código Java seja portável “no tempo”, ou seja, que as suas aplicações e, principalmente, o seu conhecimento, estejam prontos para serem reaproveitados em novas plataformas.

Como por exemplo, as novas plataformas de computaçã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 desenvolvedores estejam já capacitados a disponibilizar suas aplicações nessa nova plataforma. Apenas para citar algumas, é possível utilizar as suas bibliotecas, aplicações e o seu conhecimento em Java nos diversos ambientes da plataforma número 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 é obviamente o carro chefe do ambiente corporativo de cloud da Oracle. Como forma de aumentar ainda mais sua liberdade, as plataformas open source 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 também é um componente importante na plataforma open source Eucalyptus, que permite a criação de nuvens privadas e híbridas. Isso sem falar nos gigantes Google, que mesmo em uma solução menos baseada nos padrões Java, é capaz de executar 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 outras tecnologias e linguagens. Dado que a máquina virtual Java é capaz de executar centenas de linguagens, incluindo todas as mais populares como Ruby, Python, Scala, Groovy e Closures, a plataforma Java permite que projetos nessas linguagens também se tornem independentes dos diversos provedores de nuvem existentes, ampliando e potencializando o uso das novas linguagens nas poderosas 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, independentes desses fornecedores e se integram com todas as plataformas de nuvem. Mais do que

isso, suportam também qualquer outra linguagem. 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 poderoso Selenium. Ter esse grupo de ferramentas à sua disposição, de forma independente de fornecedores, é uma garantia da sua liberdade. Nesse momento, onde a computação em nuvem está abrindo horizontes para novos tipos de aplicações e possibilitando a criação de novas empresas 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.

54 > Encontro 7Masters

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

Building com Phing

Os melhores ambientes de trabalho por que passei tinham essa caracteristica e as empresas e profissionais que praticam e incentivam a franqueza são mais felizes com relação ao seu trabalho e resultados. Existindo a franqueza podemos pensar melhor sobre conhecimento e para melhor abordagem eu o dividi em três tópicos acumulativos. Conhecimento técnico: Aquele que todos buscamos 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 requisição e ajuda o processo de reconhimento e definiçã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 envolve 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 conversar 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 simples é não fazer aquilo que não é necessário e ser simplista é ignorar aquilo que deve ser feito.

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. Dentre 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 execuçã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 detalhe 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 pacote phar ou mesmo obtê-lo via composer [phing/ phing] - idealmente o instalamos via PEAR: pear channel-discover pear.phing.info pear install phing/phing

Assim como seu (distante) parente Ant, que atua para Java, o Phing utiliza XML para sua configuração. Basicamente declaramos um Projeto; dentro dele, Alvos (que agrupam tarefas e definem dependências) e dentro deles, Tarefas - tudo via tags XML. No exemplo a seguir (figura 1), podemos 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á usando o composer (considerando que o composer esteja 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>

<?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” />

Sim, dependências. O Phing, por padrão, já tem tarefas que vão agilizar seu dia a dia - desde operações de filesystem, prompt para entrada de dados 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 bastasse, o Phing conta com várias tarefas opcionais, que

56 > Encontro 7Masters

dir=”tests” /> dir=”web/style” /> dir=”web/script” /> dir=”web/media” />

composer.json {

}

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

“Ok, automatiza tarefas. O que mais isso pode fazer?” Já ouviu falar de Integração Contínua? É uma atividade vinda de metodologias ágeis que visa integrar o código de um projeto, vindo de diversas fontes (desenvolvedores fazendo commit e push, por exemplo) e integrá-lo de maneira segura e contínua. Como “segura”? Realizando testes de maneira 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 testado. Testado como? PHPUnit, CodeSniffer, PMD, PHPCPD, PDepend... Se você ficou com uma interrogaçã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 maneiras de automatizar o deploy de suas aplicações minificando os ativos CSS e Javascript, limpando caches e atualizando o banco de dados sem precisar se matar. Com um email de confirmação no fim do processo ainda! Pense em como seu trabalho 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 usando - inclusive Symfony e Zend Framework. Procure conhecer ferramentas de build e as boas práticas no seu uso, para, então, tirar o melhor proveito dessa ferramenta. Contribua com o projeto: Phing é um programa modular; esteja livre para criar novas funcionalidades - na maior parte dos casos 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) </>

58 > Social Media

Por @camilapc

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

Para alguns está mais do que claro que “conteúdo é rei”. A frase é clássica em várias situações. Entretanto, 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 posicionado é 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 desse 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 relevâ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 complemento 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 descriçõ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 canal em questão, quanto no Google, é importante. Também podemos abordar a Social Media Optimization 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 espalhe. Uma forma simples de fazer isso é utilizar botões de compartilhamento, integração com widgets e plug-ins sociais. Porém, apenas inserir um punhado 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 tempo 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. Avalie 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 crescente das mídias sociais, é muito importante que seu conteúdo seja compartilhado. A partir disso, sua empresa se posiciona no mercado, cria engajamento, 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 relevante, uma forma de ter seu conteúdo mais compartilhado 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 profissionais 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. Apenas algumas alternativas. Em linhas gerais, a regra é: crie razões para que as pessoas queiram compartilhar seu conteúdo. É importante que os profissionais tenham a cultura 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 sociais e buscadores não são mundos descolados. O caminho de uma pessoa até fechar uma compra 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, entrar 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.

60 > Conexão Vale do Silício

Sobre aviões no ar e oportunidades Por @vdepizzol

Mês passado peguei um vôo com meus colegas de trabalho até Austin, no Texas, para participar de uma conferência de desenvolvedores, organizada pela empresa na qual trabalho. Nos dias seguintes, apresentaríamos diversas novidades nas ferramentas para criação de apps para iOS e Android que a empresa possui, para mais de 600 pessoas, além de diversas palestras 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 empresa 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 check-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 oportunidade de pensar em como resolver o problema do zero, elas simplesmente tentam oferecer algo simples que funcione bem. Será que é pedir demais? :-) Exemplos de projetos que podem ser chamados 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 online. 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 muita 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 espaç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 problemas, maior o número de oportunidades. (Talvez não dê para concorrer com uma companhia aérea. Mas tudo bem, uma coisa de cada vez). </>

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.

62 > Review

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 aplicativo 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 marketplace) para cadastrar e apresentar seu app. Esse manifesto é um arquivo do tipo JSON que inclui informações, como nome e descrição do app e permissõ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 manifesto e o adiciona ao telefone.

Construindo apps para Firefox OS uma nova experiência Por @soapdog

Tipos de aplicativos O Firefox OS possui três tipos de aplicativos: hospedados, 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 ficam no aparelho. Já o app certificado é destinado somente a Mozilla e seus parceiros.

Acesso ao Hardware A Mozilla está padronizando junto aos órgãos competentes uma série de APIs que são coletivamente chamadas de Web APIs. Com acesso ao hardware via Javascript, elas permitem o uso de ferramentas como o acelerômetro, a câmera, os contatos etc. Essas APIs estão em diferentes graus de implementaçã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 funcionalidades que, anteriormente, eram restritas a aplicativos nativos.

Simulando o Firefox OS Sabe-se que um aplicativo para Firefox OS é construído com tecnologias web, definido por um manifesto e que as Web API proporcionam acesso ao hardware. Tudo que é necessário para desenvolver 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 funcionalidades. Basta adicionar o manifesto do seu aplicativo ao simulador para que o complemento seja instalado e testado.

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 sempre 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 eventos 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: depois de construir seu primeiro app assim, tente programar de outra maneira. </>

Você pode também ligar um servidor web local e abrir seu aplicativo do simulador. As Web APIs possuem rotinas para que você não precise utilizar o Firefox Marketplace para instalar apps. Seu aplicativo 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ão Este 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

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

64 > Artigo > Design de Interação

Interfaces conceituais, interações reais Por @eduagni No ano de 2012 pesquisei muitos projetos ligados a interfaces interativas e conceituais, para produzir novas discussõ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 algumas 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 podem significar grandes soluções de design não só para o mercado, mas para as pessoas de fato. Por isso quero trazer aqui alguns dos meus achados sobre interfaces conceituais e design para pessoas e coisas reais.

Interfaces conceituais

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

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á baseado 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 promove um novo tipo de interação do passageiro com o mundo no exterior do carro.

Push Pop Press - pushpoppress.com

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 tornaram 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 digitais, 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 direçõ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 multimí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 parecerem conceitos futuristas, já são bem reais. É o caso da interface touchscreen desenvolvida pela Tactus Technology (ow.ly/hVE8v), que possui botões físicos que podem emergir para fora do que parece um vidro plano, para em seguida desaparecem quando não forem mais necessários. Entre outras coisas, isso poderia ajudar bastante a diminuir a curva de aprendizado das interfaces baseadas em toque para pessoas mais velhas. Interessante, não?

66 > Artigo > Design de Interação

Design para pessoas e coisas reais Os profissionais que trabalham com experiência do usuário conhecem uma série de técnicas e metodologias para estimular, facilitar e resolver problemas na interação das pessoas com as coisas. Mas e quando o problema de um indivíduo está justamente na dificuldade em interagir com outras pessoas? 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 necessita 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 utilizar 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 sentimentos. 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, vamos 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 capaz 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-

Makey Makey - www.makeymakey.com

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

tentes, ou definir uma forma mais natural de realizar 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 iPhone 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 coisas que já saíram do papel encontramos o Pinch (youtu.be/jRGLkj-PsCc), uma interface que conecta 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 horizontal, 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ências para incentivar os desenvolvedores a criarem aplicativos para esta nova interface. </>

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

68 > iMasters Box

iMasters Box MultiSwitch

Alloy UI

Pylons

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.

Framework open source de componentes de interface que nasceu em 2009. Você pode estar perguntando porque deveria investir seu tempo no Alloy, ao invés de usar o jQuery, com seu gigantesco ecossistema de plugins. O caso é que a manipulação de DOM é só o topo do iceberg quando estamos lidando com aplicações modernas e de alta escalabilidade. Você provavelmente vai utilizar uma biblioteca 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 é mantido pelos engenheiros da Liferay.

O Pylons fornece uma implementaçã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 (BigTable), CouchDB ou o ORM/DAL SQL Alchemy. Para a camada de views, fornece suporte a sistemas de template como Mako, Genshi e Jinja2. De certa forma, o Pylons é um “controlador integrado com outras ferramentas”.

http://bit.ly/i5HQu4

http://alloyui.com/

http://www.pylonsproject.org/

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!

Twisted

Aptana Studio

API ConsultaCPF

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, servidores de mail, é composto de inúmeros sub-projetos e interfaceira 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.

É um software open source gratuito para IDE, desenvolvido em Java, com suporte a CSS, HTML, JavaScript, ScriptDoc, XML e texto comum, embora também seja possível configurá-lo para suportar PHP,Ruby on Rails,Adobe AIR e Bibliotecas AJAX. É baseado no Eclipse. O Aptana Studio é distribuído em multiplataforma, ou seja, pode ser rodado em Windows, Linux e Mac OS X. Também é possível se integrar ao Eclipse através de um plugin. Uma funcionalidade bastante interessante do Aptana é seu assistente de código. 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.

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.

http://twistedmatrix.com/

http://www.aptana.com/

Ambiente de testes: http://bit.ly/10bxdvT Ambiente de produção: http://bit.ly/10bxfnp http://www.consultacpf.com/