Maio 2013 / Ano 02 / Edio 06

Ns fazemos a Internet no Brasil

o_futuro__agora
Interfaces conceituais, interaes reais
design de interao

Construindo apps para Firefox OS - uma nova experincia

presena digital

review

R$24,00

Os novos dilogos na era da economia da ateno

Expediente
TIAGO BAETA Publisher LUIS LEO Editor RINA NORONHA (MTB 2759-ES) Editora/Jornalista Responsvel EDU AGNI Projeto Grfico / Diagramao NATHLIA TOREZANI Reviso COLABORADORES Alexandre Borba, Alexandre Gaigalas, Ana Erthal, Andr Alves Garzia, Bernard de Luna, Camila Porto Camargo, Cezar Taurion, Edu Agni, Gilberto Sudr, Joo Batista Neto, Kemel Zaidan, Lina Lopes, Lucia Freitas, Luli Radfahrer, Mauro Pichiliani, Pedro Gravena, Reinaldo Ferraz, Vinicius Depizzol, Wagner Marcelo. Eskenazi Indstria Grfica Grfica Grupo imasters Organizao > 1000 exemplares > ISSN 1981-0288 Alameda Santos, 2395 - 1 andar Cerqueira Csar, So Paulo/SP CEP: 01419-101 - Brasil www.imasters.com.br/revista redacao@imasters.com.br Twitter: @iMasters Facebook: /PortaliMasters Os artigos assinados so de responsabilidade dos autores e no refletem necessariamente a opinio da revista. proibida a reproduo total ou parcial de textos, fotos e ilustraes, por qualquer meio, sem prvia autorizao dos artistas ou do editor da revista.

Editorial
Voc j se perguntou qual poder ser a prxima revoluo tecnolgica e como ela vai influenciar as nossas vidas? Tirando todas as especulaes sobre a dominao das mquinas, o que acho muito importante nessa discusso que h uma interao entre ns, usurios, e esses aparatos tecnolgicos, que por sua vez utilizam metforas/ideias/conceitos do nosso cotidiano para facilitar o seu uso. Independentemente da nova tecnologia que surgir, ficam as dvidas: como vamos utiliz-la? para tocar ou para falar? Funciona sem fio? Como liga/desliga? Se pensarmos na histria da evoluo da computao, samos de uma fase em que tnhamos uma figura de um computador/assistente pessoal, com interface de entrada e sada (alm dos acessrios) e estamos caminhando para aparatos tecnolgicos cada vez mais transparentes, em que tudo acessrio. Alm disso, temos a nuvem: um lugar que ningum sabe onde e que armazena todas as nossas informaes. Nesse contexto, o dispositivo apenas um intermedirio da nuvem, que traduz o dado em uma interface. Ainda estamos na fase na qual qualquer dispositivo que possuir computao embarcada tem um i (leia como ai) na frente do nome: iRelgio, iTomada, iTelefone, iMeuDeus! E isso no faz o menor sentido: voc no vai chamar um relgio de computador ou de qualquer outro nome que no seja relgio, mesmo que com ele consiga acender a luz, abrir a porta ou lembrar-se daquele compromisso importante. Esses objetos continuam com a sua caracterstica, mas com muito mais tecnologia. So acessrios de um mundo conectado! O que importa ainda que pouca coisa mudou, mas continuamos apertando botes (virtuais) e sua mo continua sendo o principal instrumento de controle desses dispositivos. Baseado nisso, quero levantar aqui uma discusso 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 mquina de escrever, da tela touch e at dos vestveis), dos novos desafios que surgem, at onde interessante sairmos de uma zona de conforto para aderir a dispositivos nunca antes possveis e como essa grande rede mundial de pessoas ir reagir frente a esses novos paradigmas.

Luis Leo 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 > Sumrio

22 :: Capa > O futuro agora

20 :: Presena Digital Os novos dilogos na era da economia da ateno

62 :: Review Construindo apps para Firefox OS

64 :: Design de Interao Interfaces conceituais, interaes reais

08 :: Entrevista > Maujor: O Dinossauro da CSS 16 :: Criatividade Tecnolgica > Interfaces vestveis 26 :: Cdigo Livre > Informaes 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 :: Opinio > Cloud Computing 34 :: Open Data > Dados Abertos: utilizando SQL para pequenas anlises de dados 40 :: +Interatividade > O cachorro, o Leap Motion e a velocidade do vento 42 :: Hardware > Trabalhando com prottipos 44 :: Comunidade > Synbio: tijolinhos para construir aplicaes interessantes 48 :: Encontro 7Masters 58 :: Social Media > Otimizao de mdias sociais: contedo otimizado e compartilhado 60 :: Conexo Vale do Silcio > Sobre Avies 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

Maurcio Samy Silva

O Dinossauro da CSS
Quem trabalha com desenvolvimento web, em especial os front-ends, com certeza j ouviu falar de Maujor, o Maurcio 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 Padres Web. Nesta entrevista, ele explica como comeou a trabalhar com desenvolvimento de sites, d sua opinio sobre alguns temas muito discutidos na rea e declara que sua maior inspirao compartilhar conhecimentos.
Por @RinaPri Com a colaborao de @bernarddeluna e @eduagni

10 > Entrevista > Maujor

Revista iMasters: Voc engenheiro por formao, j foi professor de matemtica. Como chegou na rea de desenvolvimento Front-End? E o que te chamou a ateno para o tema de padres web? Maujor: Sim, sou formado em Engenharia Civil pelo Instituto Militar de Engenharia (IME/RJ) e conclu a graduao em 1973, no posto de capito. Em 1976, aprovado em um concurso para magistrio do Exrcito, comecei a dar aulas de Geometria Descritiva e depois Matemtica para alunos do Colgio Militar do Rio de Janeiro. Minha carreira militar foi toda exercida no magistrio. Paralelemente s minhas atividades de magistrio militar, eu exerci a engenharia civil em uma empresa de projetos e fiscalizao de obras de instalaes comerciais e industriais. Minha rgida formao militar, aliada minha fascinao pelas cincias exatas, moldaram minha conduta e raciocnio extremamente cartesiano, criando uma necessidade quase compulsiva de manter meu crebro em constante atividade, encarando e vencendo desafios. Com esse perfil, quando surgiu o primeiro computador pessoal no Brasil, adquiri um e no mais parei. Em 1988, juntamente com alguns amigos de Copacabana, participei da fundao de um Clube de Pesca de Praia, e um tempo depois sentimos a necessidade de ter um site do Clube. A sugesto imediatamente acendeu uma luz de alerta no meu crebro que me dizia que seria um bom desafio criar um site para o Abissal Clube de Pesca. E foi assim que tudo comeou. 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 crianas que ganham um carrinho com controle remoto, ficam fascinadas, brincam por trs 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 criana 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 cdigo fonte e a HTML. Descobrir que todo aquele colorido e formatao 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 trs anos estudei, importei livros, pesquisei, pratiquei, criei muita coisa com HTML e CSS, e no final adquiri um conhecimento avanado 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 experincia de 30 anos de magistrio 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 referncia 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 no est restrito somente s CSS, abrangendo outras tecnologias do W3C, os chamados Padres Web. RiM: Voc sempre impulsionou a adoo do CSS no Brasil, acompanhando o crescimento dessa linguagem e da comunidade. Como voc resume a evoluo da CSS nos ltimos nove anos?

Eu no arriscaria um palpite sobre o que vir no futuro. Parece-me que tudo ser possvel

11

Foto: acervo pessoal - Maujor

Foto: acervo pessoal - Maujor

Maujor: Se voltarmos nove anos atrs 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 clssico e ele comeava o livro ensinando como transformar um layout em tabelas em um layout CSS, mostrando as regras CSS capazes de destacar as tabelas e clulas de um layout existente, com a finalidade de visualizar a estrutura do site e facilitar sua migrao para as CSS. Hoje, essa uma funcionalidade nativa na maioria das ferramentas de desenvolvimento incorporadas aos navegadores e que se destinam a destacar no somente tabelas, mas qualquer elemento da marcao com uso de cores personalizveis. No Brasil, foi por volta de 2007 que as CSS comearam a ser usadas em larga escala. De l para c, evolumos de um comeo com folhas de estilos recheadas de hacks CSS para fazer as coisas funcionarem no IE6 at os fantsticos efeitos de sombreamento, gradientes, transformaes, animaes etc. que, aliados aos polyfils que proliferam aos borbotes, colocou disposio dos desenvolvedores todas aquelas funcionalidades. Em 2009, com o navegador IE7 predominando no mercado brasileiro e a consequente sada do IE6, foi decretada a morte definitiva do ento famigerado box model quebrado. Foi um pequeno primeiro passo em direo a navegadores Internet Explorer mais aderentes aos padres web, como o atual IE10. A seguir, a chegada das CSS3, com suas funcionalidades sendo implementadas com uso de pre-

fixos proprietrios, e as CSS j consolidadas no Brasil, o desenvolvimento de interfaces fantsticas com uso das CSS tornou-se uma verdadeira febre entre desenvolvedores. Especificaes do W3C em fases que mal tinham sado do status de rascunho de trabalho comearam a ser implementadas em um navegador ou outro com uso dos perniciosos (ou utilssimos?) prefixos proprietrios. Comeou e estamos (re)vivendo uma velada guerra dos navegadores. Resumindo, posso afirmar que samos de um mundo cheio de hacks para um navegador e entramos em um mundo repleto de prefixos proprietrios para vrios navegadores. Eu pergunto: isso bom ou ruim? Minha convico que a resposta pode ser muito bom ou muito ruim, dependendo do balano final dos prs e contras da implementao dos prefixos proprietrios. E voc? J parou para refletir sobre essa questo? Ou usa indiscriminadamente prefixos e polyfils sem medir consequncias? RiM: O que voc acredita que ser possvel fazer com CSS em alguns anos, que ainda no conseguimos hoje? Maujor: No incio da dcada passada duas premissas relacionadas ao desenvolvimento front-end transfomaram-se em verdadeiros dogmas e foram repetidas at a exausto em blogs e matrias especializadas por todos os autores envolvidos com os padres web. Uma dessas premissas era: O futuro da web a XHTML, uma linguagem HTML baseada na XML. A outra era Linguagem (X)HTML para marcao, CSS para estilizao (posicionamento, cores, tamanhos, fundos, etc.) e JavaScript para comportamento. Eram as famosas trs camadas do desenvolvimento front-end.

12 > Entrevista Maujor

Foto: acervo pessoal - Maujor

Foto: acervo pessoal - Maujor

Em 2009, o W3C decretou o fim do Grupo de Trabalho para desenvolvimento da XHTML2, aps Tim-Berners Lee ter admitido que a tentativa de transformar a linguagem de marcao HTML em uma linguagem compatvel com a XML tinha falhado porque os navegadores no aderiram nova tecnologia. Todos os esforos a partir de ento 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 no era mais a linguagem de marcao do futuro. As funcionalidades das CSS3, desde os seus primeiros rascunhos de trabalho, j apontavam para uma tremenda ingerncia na camada de comportamento. E hoje comum falar-se em CSS substituindo Flash. Caiu mais uma premissa, CSS no mais somente para estilizar. No futuro, de concreto, para citar apenas algu mas delas, posso antever o uso das funcionali dades j em fase de estudos no W3C, relacionadas criao de layouts complexos com os Mdulos para Grids, Regies e novas funciona lidades de posicionamento. Alm disso, a criao de efeitos, filtros e mscaras; o uso dos chamados seletores avanados do nvel 4; a definio de variveis para propriedades e valores CSS em substituio aos atuais pr-processadores, tais como LESS e SASS. As funcionalidades para design responsivo, cujo primeiro passo j foi dado com o lanamento do Rascunho de Trabalho do W3C para o Mdulo CSS Device Adaptation, em setembro de 2011, e do Mdulo Media Queries Level 4, em dezembro de 2012. Tambm a criao de efeitos em imagens e a possibilidade de se servir imagens de acordo com o dispositivo do usurio. Essas so, repito, funcionalidades j em estudo no W3C e, baseado em tudo que tenho lido, eu no

arriscaria um palpite sobre o que vir no futuro. Parece-me que tudo ser possvel. Resta apenas saber se os fabricantes de navegadores esto dispostos a implementar o que est sendo criado no papel. RiM: O que voc considera mais difcil de aprender hoje na escrita CSS para quem est iniciando? Maujor: Dentre as funcionalidades das CSS3 que eu considero menos fceis de aprender esto os gradientes e as funcionalidades previstas nos mdulos para criao de layouts. Dito isso, quem est comeando 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:
seletor { propriedade1: valorA; propriedade2: valorB; ... }

Declarando um seletor e a ele aplicando propriedades CSS e um dos seus possveis valores, voc manipula toda a estilizao, o posicionamento a criao de layout. Se voc no conhece nada de CSS, meu conselho comear com as CSS2. Esse primeiro dia de estudo e prtica vai lhe dar uma pequena amostra do que as CSS so 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 possveis e como inserir uma folha de estilos em um documento HTML. Com isso, voc j ter condies de definir cores de fundo e de textos, tama-

13

nhos e tipos de fontes, criar bordas, efeitos em links e algumas outras possibilidades de estilizar. Com um pouco mais de estudo e nenhum esforo extra voc vai conhecer os fundamentos das CSS, tornando-se familiarizado com propriedades e valores CSS, sempre complementando a teoria com a prtica. At aqui, tudo vai fluir e acontecer com muita facilidade e sem transtornos. A primeira dificuldade que voc ir encontrar com relao s funcionalidades de posicionamento de elementos na pgina. Essas funcionalidades so a chave para criao de layouts. Dedique tempo, estudo e muita prtica para entender posicionamento relativo, absoluto e principalmente flutuao de elementos. Vencido isso, voc dever estar em condies de criar layouts fixos de duas, trs ou mais colunas. Continue com layouts fluidos, que no so difceis de aprender. Voc est pronto para as CSS3 e agora os desafios so maiores e mais complicados, contudo o grau de dificuldade do aprendizado bem menor do que aquele exigido para aprender uma linguagem de programao. RiM: Nos ltimos dois anos muito tem se falado sobre a importncia do CSS para mltiplos dispositivos atravs da utilizao de media-queries. Como voc v isso? Acredita que seja uma soluo que veio para ficar ou paliativa? Maujor: Acredito que veio para ficar e no sem mritos que media-queries um dos trs pilares de sustentao do desenvolvimento web responsivo, ao lado de layouts fluidos e mdias flexveis. Atualmente, em se tratando de desenvolvimento web, no h mais sentido em se criar um site ou aplicao no responsiva, o que torna media-queries indispensvel, devendo ser uma das funcionalidades muito bem estudadas e entendidas por desenvolvedores. Contudo, quero registrar que, no comeo do ms 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 cdigo modular em design responsivo. Recomendo a leitura em bit.ly/14RNW8r. RiM: Dentro da complexidade da CSS para criar estruturas, existem muitos atributos e tcnicas que esto surgindo para diagramao, entre elas o Template Layout Module (w3.org/TR/css3layout/) e o Flexible Box Layout Module (w3.org/

TR/css3-flexbox/). Como voc v esses mdulos emergentes? Isso vai inibir, de alguma forma, a utilizao de float e inline-block para diagramao? Maujor: Vejo com bastante otimismo no somente os Mdulos citados como todos os Mdulos destinados criao de layouts e posicionamento. Sem dvida eles iro facilitar, e muito, o trabalho de criao de layouts, mas acredito que a propriedade float e o valor inline-block continuaro sendo usados e tendo sua utilidade. RiM: Muito se fala sobre a substituio da animao 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 substituio? A CSS a melhor linguagem para evoluir dentro desse ambiente de animao? Maujor: As CSS isoladamente no substituiro o Flash e nem so a melhor linguagem para substituir animaes. So algumas das tecnologias da chamada Open Web, ou Padres Web Abertos, que quando combinadas permitem ao desenvolvedor criar vrios 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 aplicao web sem necessidade do uso de plugins para faz-los funcionar. E assim com outros efeitos do Flash que j so possveis de se reproduzir com uso daquelas tecnologias. Acredito que o movimento em direo a uma web aberta, e em consequncia livre de padres proprietrios. Assim, coerente que eu acredite tambm na substituio do Flash por tecnologias abertas. Essa a minha viso. Contudo, a Internet est repleta de artigos e matrias que discutem o assunto CSS versus Flash. As opinies so divergentes e no h um consenso sobre o assunto. Na maioria das vezes a discusso acaba se transformando no confronto tecnologias proprietrias versus padres abertos. Remy Sharp, um consagrado autor ingls, escreveu um artigo a respeito desse assunto que demonstra muito bem quo polmico isso . A rea de comentrios foi fechada pelo autor, trs meses depois da publicao, devido grande confuso gerada. Leia em: bit.ly/cODaPZ.

14 > Entrevista > Maujor

RiM: Nos anos 2000 era difcil trabalhar com frameworks e cdigos de terceiros padronizados. Hoje em dia est bastante fcil e at cmodo encontrar frameworks que agilizem e automatizem o seu trabalho de desenvolvimento. Como voc v a utilizao de Grids prontos e Frameworks em geral? Maujor: Vejo com reservas, mas no descarto seu uso. incrvel a quantidade de frameworks e bibliotecas disposio dos desenvolvedores. E, no somente a diversificao de assuntos, mas tambm a sobreposio de mesmos assuntos. A restrio que fao ao uso de frameworks e bibliotecas diz respeito ao superdimensionamento dos meios de desenvolvimento. Tornou-se comum, pois bastante fcil e at cmodo encontrar um framework que agilize e automatize o trabalho de desenvolvimento e adotar essa soluo sem avaliar as consequncias do seu uso. Na prtica, no raro encontrar sites importando a biblioteca jQuery somente para fazer funcionar um menu dropdown. Com mnimo esforo algum poder obter efeitos de alto impacto visual sem saber absolutamente nada da linguagem JavaScript. Em resumo: usar frameworks ou bibliotecas para desenvolver uma deciso que exige um estudo apurado, envolvendo no somente facilidade e agilizao do processo, mas tambm desempemho, performance, pertinncia e caractersticas 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 no existe um quem me inspira, mas certamente existe um o que. Eu comecei na rea web com o objetivo de vencer um desafio que

eu mesmo me propus. Acumulei conhecimentos que julgava muito valiosos para deixar guardado no meu HD e resolvi compartilhar os conhecimentos. O professor que existe em minha alma continua olhando para os meus leitores e para aqueles que seguem o meu trabalho como alunos vidos por conhecimentos. Certamente o que me inspira o compartilhar conhecimentos. RiM: O que voc acha da proposta do Schema. org, uma iniciativa dos principais mecanismos de busca para melhorar a semntica dos contedos na web? Mesmo no sendo uma iniciativa da W3C, valido que os desenvolvedores implementem em seus projetos? Maujor: Permita-me uma explicao bem simples e sem entrar em consideraes tcnicas sobre microdata. A HTML5 deu forte nfase marcao semntica. Os elementos da linguagem tm sua semntica bem definida e retratam com preciso a natureza dos contedos. Microdata um mecanismo destinado a fornecer informaes semnticas adicionais sobre o contedo. Esse mecanismo usa pares atributo/valor para adicionar semntica. um mecanismo que extende a HTML5. Contedos lidos por humanos so interpretados dentro de um contexto e entendidos sem problemas, mas mquinas no so capazes de interpretar contedos. Por exemplo; para um humano a frase a manga da camisa verde no deixa dvidas, contudo uma mquina no saber se a referida manga uma fruta ou no. Esse simples exemplo ilustra a necessidade de se dizer para mecanismos de busca (mquinas) que manga no fruta. Para se dizer isso usamos microdata, que uma especificao do W3C.

Foto por Horcio Soares (http://flic.kr/p/4gYf2x)

15

Livros publicados pelo Maujor

Para fornecer a informao semntica para as mquinas, a sintaxe microdata remete a mquina para um URL no qual est explicada a semntica do contedo marcado. Ser que existe um URL explicando a semntica 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 semntica 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. Ento, Schema.org nada mais que um servio online que fornece URLs destinadas a explicar a semntica de contedos com uso de microdata. um servio que extende a HTML5. Qualquer companhia pode criar seu URL, com explicao de semntica personalizada para ser usada com microdata. Portanto acho vlido e recomendo o uso do servio 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 inspirao? Maujor: No ano de 2005, com meu site j era razoavelmente conhecido na comunidade de desenvolvimento. Eu comecei a receber vrios e-mails solicitando que transformasse os tutoriais do site em um livro. Respondia a esses pedidos agradecendo pela ideia e argumentando que no me sentia confort-

vel em transformar um contedo disponvel gratuitamente no site em um livro pago. No 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 comunicao com meus leitores. Contudo, a ideia de escrever um livro, nascida das sugestes dos meus leitores, comeou a provocar meu crebro que se alimenta de desafios. Passei um ano com a ideia de escrever um livro na cabea e em novembro de 2007 foi lanado o Construindo sites com CSS e (X)HTML. A expectativa era muito grande e a aceitao foi muito maior do que a esperada. O livro foi um sucesso to grande que eu no parei mais de escrever, e esse ano pretendo lanar meu dcimo-primeiro livro, sobre Design Responsivo. </>

16 > Criatividade Tecnolgica

Interfaces vestveis
Por @senhoritalina

Mas o que vem a ser essa tal interface e por que discuti-la aqui? Buscando o auxlio de um dicionrio qualquer, nos deparamos com uma definio que nos interessa: interface a mediao entre mquina e homem via uma relao semntica, a metfora. Diante de um computador, quase no h dvidas 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 escritrio anterior ao uso generalizado do computador.

Steve Jobs chegou ao cu e viu aquele azul lindo com nuvens claras, aquele gramado muito verde e exclamou: F***, estou no Windows!. Comentrios irnicos da Internet parte, a fora desse gracejo est na familiaridade que o usurio de um computador tem com as interfaces grficas mais utilizadas e com os seus grandes empresrios. A interface est ligada a um aprendizado, possui alguma familiaridade para, no mnimo, gerar um interesse para si. No entanto, tambm institui mudanas em sua prpria estrutura. E, ao fim, uma boa interface aquela que se torna invisvel devido sua facilidade de uso. Algum por a faz questo de que o smbolo do boto de atalho para salvar um documento deixe de ser um disquete, mesmo quando hoje se usa um pendrive? claro que a interface e suas metforas no so um privilgio apenas do computador, esto presentes em todas as outras mquinas, dispositivos e invenes humanas, como culos, cadeira, livro, carro, autofalante, relgio, celular etc. A cada inveno, mantm-se uma relao semntica com a tecnologia anterior e implementa-se uma nova. A primeira metfora o corpo humano. Um desafio aos designers: de quantas maneiras possvel fazer culos ou uma cadeira? Ao final, as pessoas vo preferir usar os culos ou a cadeira que forem confortveis, em que no se notam as horas de uso, ou seja, que sejam invisveis ou transparentes. Estas so as caractersticas que se esperam tambm de mquinas mais complexas, como telefones e cmeras: levar o dispositivo orelha ou ao olho, apertar o boto e esperar. Algumas interfaces so to bem-sucedidas em transformar seus controles em algo intuitivo para o usurio que seus comandos somem, sendo completamente assimilados. Por vezes, a usabilidade to grande que h aparelhos telefnicos para deficientes auditivos e cegos que conseguem fotografar, apesar da falta de viso.

17

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

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

Segundo o terico e escritor Steven Johnson (recomendo muito a leitura de seu livro Cultura da Interface, Editora Zahar, 2001), cmeras fotogrficas so mquinas de processos mecnicos que mostram representaes como produto final, j um computador depende do seu poder de se autorepresentar para o usurio, de transformar todos os pulsos eltricos e seus algoritmos matemticos em algo que faa sentido ao interator. Por isso, um computador seria uma mquina simblica. Creio que esse pensamento resume bem a importncia de discutir o assunto interface aqui. Contudo, optamos por um recorte muito especfico de interfaces, as vestveis, conhecidas tambm como wearable computers.

te vestveis, como uma camiseta-bsica-inteligente, em que a tecnologia est no tecido, ou o tecido contm dentro de si os dispositivos tecnolgicos, (que ainda por cima tm de ser resistentes lavagem!). J as terceiras, como diz o nome, so implantadas no corpo, como os ciborgues, na fico cientfica. A primeira linha de vestveis disponveis 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 espcie de relgio de pulso que registra seus dados 24h - alm das atividades fsicas, monitora seu sono, o que come ou bebe, e bipa quando voc est inativo por muito tempo. No caso, o tamagotchi voc. Alm deles, h o Myo, que capaz de medir a atividade eltrica dos msculos 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 no tanto quanto o projeto Sixthsense que o pesquisador Pranav Mistry desenvolve no MIT. Mistry comeou sua pesquisa h uma dcada, justamente interessado na interface por gestos. Seu objetivo inicial era levar os objetos fsicos para o mundo digital: escrever post-its e rapidamente essas informaes estarem sincronizadas com seu computador, ou colocar seu bilhete de avio sobre o computador e ele reconhecer e passar as informaes do voo, por exemplo. Foi quando ele percebeu que as pessoas no esto interessadas em computao, mas em informao. Ento, Mistry props o Sixthsense pensando o contrrio, em que voc pode levar seu mundo digital para onde voc for e usar qualquer superfcie fsica como interface. Consiste basicamente em uma cmera pendurada no pescoo e um projetor. A cmera identifica os movimentos dos seus dedos, ou os objetos que

Integrao entre corpo e tecnologia

Boa parte das pessoas conhece e fez uso de algum dispositivo eletrnico anexado ao corpo. Pagers, bipers, walktalkies, walkmans, tamagotchis, celulares ou relgios. Esses aparelhos so bons exemplos para uma noo de wearable computers, ou interfaces vestveis. No entanto, um computador vestvel, da forma como vamos tratar neste ensaio, capaz de ir alm de um display de informaes sobre as horas ou mensagens de texto ou barulhinhos de tenho fome. uma interface integrada ao corpo capaz de processar dados recebidos e gerar informao, banco de dados e rede. Alm disso, essas vestimentas esto aptas a incorporar o processo de comunicao de forma direta e instantnea. Para facilitar, vamos estabelecer pequenas categorias de interfaces vestveis: as mobiles, as txteis e as implantadas. As primeiras possuem um grande espectro na evoluo dos wearable computers e utilizam, como referente de uso, dispositivos como relgios e culos. As segundas so os propriamen-

18 > Criatividade Tecnolgica

voc est carregando, e gera a interface projetada em qualquer superfcie, seja uma parede, sua mo, uma folha de papel. Essa projeo pode conter informaes sobre o livro que voc est segurando, como suas ltimas crticas, ou informaes sobre o tempo atualizadas, quando se est diante delas lendo o jornal, por exemplo. O dispositivo ainda permite que se manipule, alm dos objetos, os prprios dados da projeo, sendo possvel escolher mais informaes sobre o tempo, ou jogar pong no cho 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 no ficarmos fixos na cadeira, como mquinas diante de uma mquina. Sixthsense personifica dois conceitos muito importantes para as interfaces mais inovadoras e mesmo futursticas, quais sejam, realidade aumentada e viso computacional. Computer Vision ou computao visual, como ficou a traduo do termo no Brasil, est ligada a pesquisas e estudos que tornam o computador capaz de processar uma informao a partir de uma cmera, como se ele fosse capaz de enxergar, comparar e identificar informaes visuais e, ento, processar escolhas. J a chamada Augmented Reality adiciona grficos, sons e outras informaes processadas digitalmente ao mundo fsico, usando uma tela como suporte dessa expanso. Outro pesquisador interessado na realidade aumentada que essas interfaces so 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 viso computacional. Em sua vida aumentada, como tem chamado o fato de usar suas prprias invenes h anos, Mann passou por experincias muito curiosas usando seus aparatos. Em uma delas, quando um carro bateu na sua casa, ele foi conversar com o motorista, que deu r e passou

por cima do seu p e o derrubou no cho, quebrando seu sistema de viso, o EyeTape, parecido com um culos. O motorista fugiu. Mas, apesar de o aparelho estar danificado, foi possvel recuperar as imagens do sistema em que havia a placa do carro do fugitivo. Outro episdio, recente e polmico, aconteceu na Frana, no ano passado. Segundo seu relato, foi intimidado fisicamente pelos funcionrios do McDonalds da Champs Elysss. Mann anda com uma documentao mdica afirmando que o EyeTap (em sua quarta gerao) preso de modo especial a sua cabea e necessita de ferramentas para retir-lo. Ou seja, parece um culos, mas no tem a mesma usabilidade, tampouco a mesma funo. Mas, nessa loja do McDonalds, proibido filmar ou fotografar. Ele apresentou o documento, quando um funcionrio tentou arrancar-lhe os culos. Ainda assim, segundo Mann, eles destruram o documento. Para quem quiser acompanhar melhor a discusso, acesse o blog do pesquisador (citado ao final do texto). Alm dessas histrias, possvel acompanhar o pensamento de Steve Mann sobre o impacto, a importncia e o uso de pequenos sistemas de vigilncia pessoal. Alm do Eye Tap, o Google Glass tambm um culos. Contudo, mais prximo de um assistente pessoal do que os dispositivos de Mann, ou os de Mistry. Seu grande mrito est na popularizao desse tipo de tecnologia e de como ela pode processar as informaes importantes, as memrias afetivas de modo muito prximo de como de fato vemos o mundo sem necessariamente sairmos dele para tirar uma foto ou compartilh-la. Passando para a prxima categoria, as interfaces literalmente vestveis, possvel encontrar jaquetas com sistemas de iluminao, como a Light Jacket, lanada pela Triumph, ou painel de leds integrados, como a Jacket Antics do Studio subTela. Quem

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

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

19

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

mais tem se apropriado das possibilidades dos txteis so os fashionistas e performers da arte e tecnologia. Principalmente depois do lanamento do LilyPad, uma verso de arduno feita para costura, com sensores muito pequenos e linhas e tecidos com capacidade condutiva. Ainda est sub-utilizado no mercado brasileiro toda a real potncia que esse kit faa-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 eletrnicos so como tatuagens de chiclete, totalmente flexveis, que se adequam ao movimento da pele. Foram inicialmente criados para monitorar a atividade cerebral, mas Coleman aposta tambm em seu potencial social e de diverso em interaes prximas telepatia. Mais ousado e alm da nossa realidade de produo (segundo os prprios idealizadores) o projeto-conceito MIBEC, de James Auger e Jimmy Loizeau. um implante dentrio que visa a revolucionar a comunicao pessoal. Seria como receber uma mensagem ou telefonema diretamente dentro da sua cabea por meio da ressonncia do osso da sua mandbula para o seu ouvido interno. Imagine um indivduo andando com isso na Av. Paulista, sujeito a todas as interferncias eletromagnticas da regio. Ele literalmente ouviria vozes na sua cabea. E bluetooth rapidamente seria considerado uma dor de dente. Afinal, o que todas essas interfaces, independentemente das suas categorizaes, tm em comum a absoro da tecnologia junto ao corpo para manter um fluxo constante de informao ao longo

do tempo, de modo a agilizar a comunicao e as tomadas de deciso. Seria como uma extenso do pensamento humano auxiliado por essas interfaces, um crebro expandido. Curiosamente, nosso texto comeou falando do corpo como metfora para as primeiras invenes e aparatos tecnolgicos e agora, no desenrolar do argumento, esses dispositivos querem voltar ao corpo. Os desafios so os mesmos de antes do ponto de vista do design de interface: a transparncia da tecnologia o grande parmetro de sua usabilidade. Para isso, devem contar com desenvolvimento em biomimtica, portabilidade e alimentao por baterias de durao quase infinita, ou que se utilizem de fontes renovveis. Ainda veremos muitas mudanas nos culos e nas cadeiras que esto por vir. </>

Lina Lopes graduada no curso superior de audiovisual da universidade de So Paulo (ECA/ USP), est cursando engenharia da computao (FIAP) e se especializando em iluminao e design (IPOG). Pesquisa a relao entre corpo, espao cnico, linguagem da fotografia, do vdeo e das artes&tecnologias. - lina@blab.art.br

20 > Presena Digital

Os novos dilogos na era da economia da ateno

Antigamente, quando havia menos barulho nas cidades e mais rvores e mais pssaros, 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, veculos passando, pessoas conversando, sirenes, televises e o famigerado fone de ouvido tornaram um canto de passarinho indiscriminado. Dizemos apenas tem um pssaro cantando, mas no fazemos ideia de que espcie ele seja, desaprendemos ao longo do tempo a conhecer e identificar seus cantos. Este artigo no sobre pssaros, embora eu goste muito deles soltos por a. Mas foi necessrio escrever esse prlogo para que voc entenda que, por desconhecimento da identificao correta dos termos, assim como acontece com os pssaros, vamos usar a palavra dilogo para dar conta de uma variedade de discursos com estratgias muito diversificadas nesse jogo que a comunicao. Toda vez que aparece um novo meio de comunicao - e essas ferramentas cada vez mais esto vinculadas tecnologia - os olhos do mercado se voltam violentamente para ele, em busca de novas formas de dilogo com a audincia. So tentativas de se fazer presente, de constar na lista dos primeiros adeptos, de chamar a ateno do pblico. Mesmo que isso conduza a estratgias fracassadas, como os investimentos que muitas marcas fizeram no Second Life. Como no conhecemos exatamente os efeitos daquele novo meio, no podemos prever a eficcia da comunicao. McLuhan dizia que a simples sucesso das mdias no conduz a nada a no ser mudana, ou seja, quando aparecem novas formas de comunicar, as mdias antigas so naturalmente conduzidas a uma adaptao de seus dilogos, o que acaba por forjar sua linguagem. Como a televiso: ela se apropriou inicialmente da linguagem do rdio at criar sua prpria 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 dilogo na rede hoje: mltiplas oportunidades de utilizao, centenas de canais na televiso, milhares de revistas nas bancas, milhes de blogs na Internet, e o consumo simultneo das mdias. Esse caos do excesso de informao conduz a um cenrio de incertezas em que permanece a questo: como chamar a ateno para uma mensagem se os modelos esto quebrados? Conquistar a ateno das pessoas to importante que se tornou um modelo de economia e, consequentemente, muitas empresas precisaram mudar a forma como operavam seus departamentos de comunicao e marketing e repensar nas maneiras de dialogar, questionando-se sobre como criar um dilogo mais direto e definir os arqutipos de uma clientela to plural em identidades. Talvez seja mais fcil comear usando exemplos que todos conhecem de marcas que no 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 silncio no uma opo na rede. O contedo corporativo no pode mais ser simplesmente replicado na Internet. Ele deve ter uma linguagem prpria, estruturada de acordo com a audincia e que seja capaz de promover efetivamente o dilogo. Como no caso da Lego, que usou um discurso eficiente e adaptado ao seu auditrio e ganhou notoriedade. O menino Luka Apps, de 7 anos, havia economizado para comprar um kit de bonecos, perdeu um deles num passeio ao

21

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 padres dos dilogos institucionais. Primeiramente, porque a pessoa que lhe escreve diz ter consultado um dos lderes da coleo de bonecos para saber se poderia enviar outro, uma vez que o gerente de atendimento ao cliente no poderia faz-lo, j que a responsabilidade era do menino. E o lder, alm de consentir, d uma srie de conselhos de conduta para Luka. Depois, porque o dilogo envolveu uma pessoa do outro lado de Luka, o Richard, representando um departamento, e no por um Departamento. Essa histria j rodou o mundo, e a Lego conquistou respeito pela sua atitude. Nem todas as empresas esto prontas para manterem dilogos com todos os seus clientes, isso requer investimentos e abertura. Muito menos num nvel to personalizado, como fez a Lego. Mas a autonomia de pensamento e ao dada aos consumidores vem pressionando as empresas para buscarem por meios adequados em que se possa cultivar o dilogo. Foi o que aconteceu com a maionese Hellmanns, que mudou o discurso de comunicao para salientar os aspectos saudveis do produto. Para isso, foi criado um comercial na televiso e uma wiki receitas: a Recepedia.com. A enciclopdia de receitas foi criada pela Unilever e mantida por seus mais de trs mil consumidores cadastrados com seis mil receitas compartilhadas em outras redes todos os dias, criando uma inteligncia associada. No a marca que diz o que se deve consumir, mas sim os consumidores. Isso indica que talvez no seja necessrio aderir a todas as novidades em termos de relacionamento

que a Internet prope. O que parece obter melhor resultado a escolha, entre as possibilidades, do meio que melhor dialoga com a audincia, ou de um dilogo complementar que se sustente em vrios meios. Foi essa a estratgia do Ponto Frio no famoso twitter do Pinguim, a simptica figura que anuncia seus produtos e enquetes enquanto brinca com a sugesto de almoo e sai correndo do trabalho para ir natao. O dilogo se desloca da tradio 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 territrios na rede na era da economia da ateno. A diferena como utilizam cada meio para comunicar seus interesses. Cada situao exige uma linguagem, e a pluralidade do digital conduz automaticamente a mensagem a outros meios. O que faz com que as empresas alcancem a ateno de suas audincias parece no residir na adeso aos novos meios, mas sim na potncia em encontrar a melhor forma de dilogo usando a diversidade dos novos meios. Para finalizar, vamos usar novamente a analogia dos pssaros: voc no precisa de um viveiro com muitas espcies e cantos distintos para ser ouvido. Provavelmente isso seria uma algazarra. Voc precisa apenas de um Ti-Sangue com um gorjear melodioso e trissilbico, que as pessoas possam repetir. </>

Ana Erthal jornalista e mestre pela UERJ na linha de Novas Tecnologias em Comunicao. Atualmente professora da ESPM, UNESA, UCAM, INFNET e iMasters PRO. pesquisadora pelo CAEPM e consultora da Fundao Roberto Marinho.

22 > Capa

o_futuro__agora

Por @lufreitas, para @iMasters

23

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

Ento aconteceu o SXSW - South by Southwest, evento que fala sobre tendncias e futuro, que aconteceu em maro, nos EUA. O encerramento ficou por conta de Bruce Sterling, escritor de fico cientfica norteamericano, que observou que os computadores morreram. (Voc pode ouvir a gravao aqui http://bit.ly/ZslHYF).
Em seu discurso, Sterling mostrou que a disrupo pela disrupo em que vivemos esvazia os sentidos e no leva a nada ele alinhava imagens fortes com a ebulio de hoje. Ao comparar nossos avanos com a civilizao que simplesmente saiu de sua cidade cuidadosamente montada no cnion, lugar perfeito, ele fez uma parbola que mostrava o quanto a mania de deixar para trs o que veio antes deixa, simplesmente, espaos vazios. Na sequncia, decretou vrias mortes, alm do computador: dos blogs, da literatura, dos livros. Sim, exatamente isso que voc est lendo: os computadores no deram as caras nas falas do SXSW 2013, e Sterling decretou a morte deles. Depois dos smartphones, chegam o Google Glass e (talvez) o relgio 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 esto evoluindo com Luli Radfahrer, PhD em comunicao digital (USP-SP), certeza de ser transportado, na velocidade do pensamento dele, a outros horizontes e muita reflexo. Acho que h uma confuso entre invisvel e desaparecer, diz Luli. A gente no sabe quantas vezes por dia usa a energia eltrica, 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 previso 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 informao. Luli continua: Boa parte das coisas que usamos so interfaces: livros, msica, filme e videogames, por exemplo. Sim, esses objetos tendem a desaparecer. O computador, entretanto, deve ficar invisvel. Funcionar de outro jeito. (...) Falta algo inteligente como a gente. Temos, hoje, pequenas inteligncias. Ainda falta o eletrnico 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 experincia e a conversa. O modelo ser fazer barato e compacto, em geral. Mas a

24 > Capa

regra no absoluta, tem que saber o que est fazendo, disse Cris. Quem tem 40 ou 50 anos viveu grandes mudanas. Alm do fax, que todo mundo tinha no escritrio na dcada de 90, j trocaram a coleo de CDs por HDs lotados de msica 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 reforam que a histria toda como se projeta a interface: a grande histria um algoritmo que permita uma conexo mais inteligente entre as redes, aprovaes, likes, curtidas. Ideia que Luli tambm tem sobre a evoluo da interface: mais uma questo 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 grando. O que est faltando, na opinio dos trs especialistas em mercado digital, a interface que vai permitir digitalizar a vida como ns, humanos, a percebemos. Porque se a tecnologia mais valiosa a memria, como lembra Andr Passamani, todos vivemos a ressaca da hiperconexo. Falta, ainda, segundo Luli, a funo ftica. Afinal, para os humanos, tudo linguagem e

essa uma das grandes vantagens cognitivas do ser humano. Ns compreendemos a linguagem natural, isso ainda impossvel com os eletrnicos, explica. Com a visualizao de dados, que o Google Glass permitir medida que os aplicativos aparecerem, provavelmente as dicas chegaro 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 disrupo. E o grande barato est na conexo. Andr lembra, inclusive, da frase do prprio Sterling que ele traduziu e tatuou: Custa caro ser humano. Cris Dias acrescenta: tudo isso s faz sentido se juntar pessoas, seno, spam. A gerao da minha filha poder ter mais views no YouTube do que a Xuxa tem de audincia. Com a palavra, Sterling, nas ltimas frases de sua fala, em traduo livre: v alm do fator uau! Ningum tem as mos limpas. Ns matamos. Ns criamos o caos, a disrupo e esvaziamos os sentidos. O sculo XX morreu. Ns matamos o passado com o que fizemos. Ns temos que comer o que matamos. o jeito digno e corajoso de incorporar o passado a ns mesmos. Assim, podemos usar esse passado para formar novas coisas. E a fnix poder surgir. </>

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

26 > Cdigo Livre

Informaes e dicas sobre projetos Open Source

Por @ale_borba

Web2Canvas
Esse aplicativo foi construdo, 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 negcios. Totalmente web e tendo como tecnologia por trs 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 cdigo fonte no link: http://bit.ly/17vwgP8, e o aplicativo pode ser utilizado no link: http://bit.ly/17vwhmj.

nativa open source ao Dropbox pode ser encontrada em http://owncloud.org/

FreeNAS
uma plataforma para Storage, baseada no FreeBSD, simples, rpida e estvel. Alm de uma comunidade internacional comprometida de desenvolvedores e usurios, ela conta com muitas facilidades e funcionalidades que a deixam bem frente das outras. O FreeNAS suporta compartilhamento atravs de sistemas Windows, Apple e unix-like, suporta RAID e, desde as suas ltimas verses, ele incluiu o ZFS, que permite controle de storages de alta capacidade. Para saber mais, acesse http://www.freenas.org/

Bottle
um micro framework Python, rpido, simples e leve para web. distribudo de forma simples, como um mdulo single file, e no possui nenhuma dependncia que no 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

Arakoon
uma store open source, baseada em chave-valor, que garante consistncia acima de tudo e voltada especificamente para pequenos projetos e que no necessitem de muita segurana. Funciona muito bem para updates atmicos e consistncia atravs das rplicas. No procure o Arakoon se voc realmente precisa de muita escalabilidade. Mais informaes em http://arakoon.org </>

ownCloud
um app escrito em PHP para armazenamento de arquivos, sincronizao e compartilhamento. Mas possvel, tambm, sincronizar contatos e agenda. Como uma aplicao open source, voc pode baix-lo e instal-lo em qualquer computador/servidor que quiser. Dessa forma, voc sabe exatamente onde os seus dados esto armazenados. Essa alter-

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

28 > Desenvolvimento

Sem dvida o componente mais famoso do Respect o Respect\Validation, feito para validar qualquer informao 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, nmeros e o caractere _. Esse o formato de um nome de usurio do Twitter.

Exemplo 1: Validando um nome de usurio do Twitter

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

um microframework de respeito
Por @alganet

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

Era difcil imaginar, l em 2010, que um modesto projeto PHP brasileiro no GitHub, sem nenhuma empresa por trs e sem nenhum programador dedicado 100% para desenvolvlo, ganharia milhares de usurios e dezenas de contribuidores de diversos pases. O nome Respect veio de uma das preocupaes iniciais do projeto: no apenas respeitar standards e patterns mas tornar o uso deles uma experincia agradvel, e no um inferno particular.

Exemplo 2: Validando um nome de usurio 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 slida caixa de ferramentas para qualquer programador PHP. Existem ferramentas para manipular bancos de dados, validar vrios tipos de informaes diferentes, configurar componentes, criar APIs e pginas, testar e automatizar aplicaes. Muitas outras ferramentas do projeto esto em desenvolvimento.

29

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 comentrios do artigo com id=5 em uma nica SQL $comentarios = $mapeador->comments-> articles[5]->fetchAll();

O Respect Bundle para o Laravel disponibiliza os componentes de validao (Respect\Validation), bancos de dados (Respect\Relational) e Configurao (Respect\Config). O prprio componente Respect\Validation j possui integrao 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 tambm algo que Respect tambm procura. Os componentes so todos testados desde o comeo do desenvolvimento e miram em 100% de cobertura de cdigo. Se h uma coisa que o Respect mostra que a comunidade brasileira est preparada para produzir software to bem quanto qualquer outra comunidade estrangeira.

O Respect veio para que voc no tenha que escolher apenas um framework e seguir com ele pra sempre. Frameworks so como trilhos (alguns tem at esse nome!), e se voc percebe que foi no sentido errado ou se o projeto muda de direo no h muito que fazer. O Respect uma espcie de microframework e esquiva disso tornando decises grandes em pequenas. Voc pode usar o Respect desde o comeo 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 reutilizvel e fcil de manter.

Conhea mais do Respect

respect.li twitter.com/phprespect github.com/Respect Exemplos: github.com/Respect/samples Benchmarks: bit.ly/XJ3abk Respect Bundle para Laravel: bit.ly/XJ3iaO Respect\ValidationBundle para Symfony: bit.ly/XJ3rLk Conhea outros microframeworks similares ao Respect em microphp.org. </>

Exemplo 4: Criando uma rota pro caminho /users/ algumacoisa na URI com Respect\Rest.
<?php use Respect\Rest\Router; $roteador = new Router; $roteador->get(/users/*, function($screenName) { echo User {$screenName}; });

Para quem deseja utilizar o Respect com outra soluo, existem pontos de integrao 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 recomendao do W3C. Seu atual status, em abril de 2013, era de documentao W3C Candidate Recommendation (www.w3.org/TR/html5/). J estamos familiarizados com a grande parte das novidades que o HTML5 trouxe em relao a novos elementos, atributos e APIs para a evoluo da web. Mas que tal dar uma olhada no futuro? O que esperar para as prximas verses do HTML e quais so as ideias e sugestes de novos elementos propostos?

HTML 5.1 Nightly

www.w3.org/html/wg/drafts/html/master/ Essa especificao a continuao do HTML5, com revises da linguagem criada pelo W3C. Nessa verso, novos elementos continuam sendo adicionados baseados em pesquisas sobre as prticas de criao predominantes. Uma ateno especial continua a ser dada definio de critrios de conformidade claros para os agentes do usurio, em um esforo para melhorar a interoperabilidade e garantir a evoluo da Web. Em abril de 2013, o HTML5.1 estava em W3C Editors Draft, ou seja, ainda um documento que vai passar por revises. Existem poucas diferenas ao fazer uma comparao direta dessa edio com a documentao atual do HTML5, mas algumas novidades anunciadas e publicadas nesse draft animaram a comunidade de desenvolvimento. Importante reforar que, como esse documento ainda um esboo, essas novidades ainda podem sofrer alteraes.

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 documentao do padro. Durante muito tempo, discutiu-se bastante sobre novos elementos semnticos do HTML5 (article, header, footer, aside etc.), mas no existia um elemento principal para agrup-los. Quando surgia a necessidade de colocar o contedo principal

31

em um container, o desenvolvedor utilizava um elemento div para agrupar esse contedo. O objetivo dessa incluso dar cada vez mais significado aos elementos da pgina. Pois bem, agora um elemento com esse objetivo est sendo discutido e colocado na documentao. O elemento main representa o elemento principal do corpo de um documento ou aplicao. S deve existir um elemento main na pgina, e ele no deve ser posicionado dentro de outros elementos como article, section, nav, etc.
<main> <h1>Skates</h1> <p>O Skate uma boa forma de divertir crianas</p> <article> <h2>Longboards</h2> <p>Longboard um tipo de skate com uma distncia maior entre eixos e rodas.</p> <p>...</p> <p>...</p> </article> </main>

caso de tabelas sem thead, a coluna deve ter o elemento th no primeiro elemento de tr da tabela, quando esse elemento tr no est dentro de um tfoot. Essa tcnica s funcionar se a linha ou coluna no for separada com colspan e rowspan. Ser possvel utilizar dentro do atributo sortable o valor reversed, para definir a direo da classificao da tabela quando necessrio.

E o que mais pode vir para as prximas verses?

O grupo de trabalho do HTML est em constante discusso e recebe diversas sugestes para serem includas na linguagem de marcao das prximas verses do HTML. possvel 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 sugestes 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 mudanas na documentao e at o momento no foi implementado por nenhum agente de usurio. Tudo isso parte do constante trabalho do W3C de garantir a evoluo da web de forma livre, aberta e contando com a participao da comunidade, no s para a soluo de bugs, mas sugerindo novas funcionalidades para essa linguagem de marcao. Voc tambm pode acompanhar as novidades da evoluo da linguagem de marcao pela pgina do HTML Working Group: www.w3.org/html/wg/ </>

A documentao tambm aconselha os autores de pginas a utilizar ARIA role=main no elemento principal at que os agentes de usurio implementem essa funo de forma desejada. Importante lembrar que o atributo role foi publicado como recomendao do W3C em maro de 2013 (www. w3.org/TR/role-attribute/).

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

Tabelas classificveis

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 usurio deve permitir ordenar a coluna ou linha de uma tabela. Por exemplo, para fazer uma coluna classificvel 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 Computao Grfica e ps graduado em Design de Hipermdia pela Universidade Anhembi Morumbi, em So Paulo. Trabalha h mais de 12 anos com desenvolvimento web. Coordenador do Prmio Nacional de Acessibilidade na Web e do Grupo de Trabalho em Acessibilidade na Web e representante do W3C Brasil em plenrias tcnicas do W3C.No Twitter @reinaldoferraz

32 > Opinio

Cloud Computing
Muitas das novas tecnologias so baseadas em computao em nuvem e conectividade constante. Quais so os problemas e desafios que so gerados com essas tecnologias e at que ponto privacidade e segurana esto sendo discutidos?

Cezar Taurion - New Technologies Manager/Technical Evangelist da IBM

Toda mudana de paradigma acarreta desconfianas e receios. Segurana um deles. Embora se fale muito nos riscos de segurana em nuvens, existem alguns aspectos positivos que merecem ateno. Um deles que, no modelo de computao em nuvem, o contedo de desktops, notebooks e tablets estar na nuvem, e no nos dispositivos. Ora, como as estatsticas apontam que 1/3 dos problemas de violao de segurana devem-se ao uso de informaes obtidas em laptops roubados, o fato de as informaes estarem nas nuvens e no mais nos seus HDs bastante positivo. Outros aspectos positivos decorrentes de uso de nuvens, sob a tica de segurana, so que os upgrades de software que corrigem brechas de segurana so feitos automaticamente, alm da uniformidade dos padres de segurana, pois todos passam a ter os mesmos padres. No modelo atual, uma grande parcela dos usurios no atualiza seus softwares adequadamente, deixando os bugs que permitem vulnerabilidades ainda ativos, e os usurios tambm podem ter mais ou menos recursos de segurana ativos em seus PCs e laptops. Alm disso, muitos data centers de empresas de pequeno a mdio porte (e mesmo de grande porte) no tm bons procedimentos e nem polticas de segurana implementados tal como nuvens ofertadas por provedores de alto nvel, no s procedimentos e recursos sofisticados e auditados, mas tambm um staff tcnico com uma expertise acumulada que a maiorias das empresas jamais teria. Na minha opinio, em breve, um dos principais argumentos de venda das nuvens ser exatamente a segurana: quer mais segurana? Venha para nuvem!.

Luli Radfahrer - professor de Comunicao Digital da ECA-USP

A resposta difcil, j que varia conforme o servio e o tipo de dado. Um servio que armazene senhas ou dados contbeis precisa ser muito mais confivel do que um que armazene tuitadas ou fotos de ps e pratos de comida como o Instagram. Como em qualquer fornecedor, preciso fazer uma boa pesquisa para no 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 servio bom, o acesso aos dados s tende a melhor-lo. Pense nas recomendaes de livros na Amazon ou de filmes no Netflix como bons exemplos. Mas colocar um material na nuvem no garante sua segurana - conforme o caso, pode deix-lo ainda mais desprotegido. Muitas pessoas tm o mau hbito de armazenar suas senhas em browsers, definir termos bvios ou compartilh-los abertamente. muito difcil que um hacker invada um grande servidor de uma empresa cujo modelo de negcios se baseia em segurana. Mas muito mais fcil descobrir onome de usurio e senha de algum e, atravs desses dados, entrar na conta.

Gilberto Sudr - Professor, Consultor e Pesquisador nas reas de Segurana da Informao e Computao Forense
A computao em nuvem apresenta muitas vantagens, especialmente em relao a economia e flexibilidade que ela pode proporcionar na infraestrutura de TI. Apesar das vantagens, tambm existem questes que devem ser avaliadas com cuidado antes de se embarcar nesta soluo. Grandes desafios esto presentes para quem j usa ou est pensando em utilizar esta tecnologia, a comear

33

pelas ameaas a segurana e privacidade dos dados armazenados na nuvem. Outra questo o marco legal para este uso. Perguntas sobre a jurisdio aplicvel aos dados armazenados na nuvem em servidores localizados no exterior ainda precisam ser mais bem esclarecidas.

Joo Batista Neto - Desenvolvedor Web na iMasters

Penso que o maior problema seja garantir a integridade e a segurana da informao; da mesma forma, tambm h o desafio de convencer o usurio de que sua informao estar segura. Apesar de ser cada vez mais comum utilizarmos Software como Servio, Plataforma como Servio ou Infraestrutura como Servio, cloud ainda uma tecnologia em desenvolvimento. Muitos trabalhos tm sido elaborados no sentido de garantir a privacidade e segurana da informao do usurio, mas um longo caminho ainda precisa ser percorrido, tanto no desenvolvimento da tecnologia, quanto nas discusses sobre privacidade e segurana. Entre as iniciativas que esto sendo feitas nesse sentido, o Departamento do Comrcio norte americano (U.S. Department of Commerce), atravs do NIST (National Institute of Standards and Technology), elaborou um documento chamado Orientaes sobre segurana e privacidade em Computao em nuvem pblica com o objetivo de orientar as organizaes e governos sobre segurana e privacidade em cloud.

O problema reflexo da falta de investimento da indstria de software em novas tecnologias de impacto, pois o risco para os investidores alto. O Brasil tem um perfil de follower, com raras excees, mas muito se gasta em pesquisas que no rendem grande frutos, sendo que o motivo sempre o mesmo, falta investidor para escalar, falta cultura que incentive a criao de tecnologias disruptivas e falta a aproximao das universidades junto a indstria e governo. Se analisarmos o atual cenrio, o Governo vem fomentando a pesquisa, de certa forma, atravs de alguns rgos como a FINEP, FAPESP entre outros, mas o grande gargalo est em conseguir escalar e dar relevncia 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.
Computao em nuvem significa que seus dados (e de seus parceiros!) estaro potencialmente expostos a qualquer um com acesso Internet. Neste caso, a primeira coisa a se fazer definir o que vai para a nuvem. Informaes que s tm valor para a prpria empresa podem ser hospedadas em uma nuvem pblica. Para dados relativamente sensveis, a nuvem privada tende a ser uma soluo melhor, desde que as devidas precaues 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 fcil acesso a informaes algo muito sedutor na computao em nuvem, mas faz com que seja necessrio redobrar a ateno com alguns aspectos de segurana, especialmente polticas de acesso, bases de dados, e atualizaes de software. Vulnerabilidades de segurana precisam ser corrigidas com muito mais agilidade do que quando o servidor estava disponvel apenas para a rede interna da sua empresa, e criptografia, tanto na transmisso dos dados quanto em seu armazenamento, passa a ser um tema de fundamental importncia. A conectividade uma realidade que chegou para ficar e quem no estiver preparado para enfrentar os desafios impostos por ela corre o risco de ficar, literalmente, isolado. </>

Wagner Marcelo - Scio da Intellecta, Coordenador de Startups na PUC-SP e Fundador do Startups Evolution.
Com a disponibilizao cada vez maior de dados na chamada nuvem, existem dezenas de oportunidades e desafios que no esto somente na armazenagem, mas sim em como eles podero ser tratados, pois atravs do conceito de Big Data o que for coletado pode gerar informaes relevantes para governos, empresas e usurios. Hoje governos municipais, estaduais e at alguns setores do federal esto adotando o armazenamento em nuvem, contratando grandes corporaes estrangeiras sem se preocuparem com a segurana do acesso a essas informaes que podem ser realizadas de forma privilegiada por governos de outros pases.

34 > Open Data

Dados Abertos: utilizando SQL para pequenas anlises de dados

Por @netojoaobatista

Mais do que uma traduo, este artigo se trata, na verdade, de uma adaptao. 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 Acelerao do Crescimento). Este artigo introduz o uso daSQLpara pequenas anlises de dados, atravs da anlise de pequenos conjuntos de dados abertos para responder a seguinte questo: quem foram os maiores beneficiados com as obras do PAC em 2012?

Durante o artigo, alm 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 comear com uma busca, por exemplo: dados obras do PAC. Essa busca nos levar, rapidamente, ao dados.gov.br, mais especificamente, pgina Obras do PAC - Programa de Acelerao do Crescimento / Obras do PAC em CSV referentes ao 6 balano - 12/2012 (http://bit.ly/11TS2Jo).

35

Preparando os dados
No artigo original, o autor descreve os passos necessrios 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 no ocorre, porm, 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 utilitrioiconv(http:// bit.ly/ZCcdfn) para fazer a converso:
iconv -f 857// -t UTF-8 pac_2012_12.csv >pac_2012_12.utf8.csv

nal, open-source, que apesar de leve, bem completo para nosso propsito.

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 contedo de um arquivo CSV em uma base SQLite. O cdigo completo est no apndice abaixo, mas voc pode fazerdownload 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

A linha acima far a leitura do arquivo pac_2012_12. csv, converter o conjunto de caracteres e salvar o contedo novamente em pac_2012_12.csv. Outro detalhe que precisamos ajustar, a questo 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

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

Anlise I
Vamos at o shell do sqlite executar algumas instrues 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>

A linha acima far a converso de todas as ocorrncias do padro dd/mm/yyyy e converter para yyyy-mm-dd. Caso voc esteja trabalhando com algum conjunto de dados que, alm dos pontos descritos aqui, ainda tenha linhas com metadados, linhas ou colunas em branco, no 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 so as reas que o dinheiro destinado. Para um pequeno conjunto de dados, poderamos utilizar uma planilha eletrnica. 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-

Dependendo da verso do sqlite, possvel que voc precise executar sqlite em vez de sqlite3. Agora que estamos dentro do shell do sqlite, vamos executar uma instruo 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 funes que quere mos na listagem dos resultados. No caso acima, ns 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, limita mos o resultado em apenas vinte linhas e, finalmente, ordenamos do maior valor para o menor valor. O resultado dessa consulta segue abaixo:

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

Orgo Ministrio das Cidades Fundao Nacional da Sade Ministrio da Educao Ministrio da Cultura Ministrio da Sade

Investimento Total 490643623250.721

Investimento Mdio 39456664.5155385

UF SP RJ MG PR RS BA DF GO PE SC CE PA MA AM ES MT RN MS SE PB

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

7962934548.78002

510509.972354149

3594551103.33999 775253231.56 768838158.779999

305659.10742687 1076740.59938889 49058.0754709035

Isso nos d uma boa noo de como so distribudos os recursos; se existem, por exemplo, vrios itens recebendo pequenas quantidades, ou poucos itens recebendo grandes quantidades. O que vimos aqui, que a maior parte dos recursos so utilizados peloMinistrio das Cidades, cuja atribuio a de planejamento urbano, polticas fundirias e imobilirias, (que incluem zoneamento, regularizao da posse ou propriedade, cdigo de obras) requalificao de reas centrais, preveno a riscos de desmoronamento de encostas, recuperao de reas ambientalmente degradadas so atribuies municipais.

Anlise II - Filtragem
Agora que sabemos que a maior parte dos recursos so utilizados pelo Ministrio das Cidades, podemos ir um pouco mais a fundo: quais so os estados mais beneficiados pelo Ministrio das Cidades?
sqlite> SELECT sig_uf, SUM(investimento_total) ...> FROM pac ...> WHERE dsc_orgao = Ministrio das Cidades ...> GROUP BY sig_uf ...> ORDER BY SUM(investimento_ total) DESC ...> LIMIT 5;

Podemos utilizar outras funes tambm, por exemplo, quais so as cinco reas mais beneficiadas e qual o investimento mdio feito nessas reas?

37

UF SP RJ MG PR RS

Investimento 171158656371.58 49089877209.84 40175377781.16 27928207915.2 26717924226.26

PB BA

618124738.899999 546496245.64

Visualizao grfica
Uma informao muito especial que temos nesse conjunto de dados do PAC, a latitude e longitude de onde os recursos esto sendo empregados. Essa informao especialmente interessante, quando utilizamos alguma ferramenta de plotagem de mapas, como o caso doGoogle Maps Engine (mapsengine.google.com) A primeira coisa que precisamos fazer, transformar os dados em alguma informao que queremos no mapa. Por exemplo, quais so as 20 obras que mais receberam recursos?

Ou, ento, quanto dos recursos do PAC so gastos com sade, seja atravs do Ministrio da Sade, ou atravs da Fundao Nacional da Sade?
sqlite> SELECT dsc_orgao, SUM(investimento_total) ...> FROM pac ...> WHERE dsc_orgao LIKE %Sade ...> GROUP BY dsc_orgao ...> ORDER BY SUM(investimento_total) DESC;

Orgo Fundao Nacional da Sade Ministrio da Sade

Investimento 7962934548.78002 768838158.779999

Aqui utilizamos o WHERE para restringir os resultados apenas aos rgos que possuemSadeem seu nome, como o caso daFundao Nacional da Sade(Funasa) e doMinistrio da Sade. Podemos, ainda, saber quais so os estados mais beneficiados pelo Ministrio da Sade:
sqlite> SELECT sig_uf, SUM(investimento_total) ...> FROM pac ...> WHERE dsc_orgao LIKE %Sade ...> GROUP BY sig_uf ...> ORDER BY SUM(investimento_total) DESC ...> LIMIT 5;

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;

Aps encontrar a informao que desejamos, precisaremos export-la para CSV. Isso pode ser feito atravs do prprio SQLite, por exemplo:

UF PA CE MG

Investimento 785712631.78 746274322.939999 722866871.88

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 cabealhos no arquivo CSV; A segunda linha, .mode csv, diz para o SQLite que queremos que o resultado seja no formato CSV; A terceira linha, .output top20-obras.csv, diz para o SQLite que, em vez de mostrar os resultados na tela, ele deve salvar em disco, no arquivo top20-obras.csv; A quarta linha a informao que desejamos obter dos dados. Com o arquivo top20-obras.csv, vamos at oGoogle Maps Enginee vamos fazer o upload do arquivo. Para isso, vamos clicar na pastinha que fica ao lado do boto Add Layer:

pins. Aps selecionar a coluna Coordenadas e clicar no boto Continue, uma nova tela ser exibida:

Nessa tela devemos escolher a coluna Obra, que ser utilizada para o ttulo dospinsno mapa. Agora s clicar no boto Finish e pronto, o resultado ser semelhante ao abaixo:

Aps clicar no boto, uma tela ser exibida para a escolha do arquivo. Assim que selecionamos o arquivo top20-obras.csv, a seguinte tela exibida:

Se clicarmos em algum dos pins, veremos algo semelhante ao abaixo:

Nessa tela, devemos selecionar o item Coordenadas. onde o Google Maps Engine ir colocar os

39

Veja os dados no Google Maps Engine atravs do endereo http://bit.ly/ZRKIQ6.

Apndice
Saiba mais como lidar com dados: Mais sobreCSV Comma Separated Variables: http://bit.ly/ZUxobV Extenso para o Google Chrome que permite a visualizao de arquivos CSV: http://bit. ly/12Rn8Bt Voc tambm pode brincar com SQL online, utilizando oSQLFiddle: http://sqlfiddle.com a. Ou at umaimplementao do SQLite em Javascript: http://bit.ly/z9gSbz Existe diversos recursos online para aprender SQL, por exemplo (em ingls): 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 </>

Resultados
Como podemos ver, obter informaes de pequenos conjuntos de dados , de certa forma, bastante simples. Tudo o que precisamos, so algumas perguntas. Sobre nossa pergunta inicial, descobrimos que o estado de So Paulo o que recebeu a maior quantidade de recursos. Descobrimos tambm que a maior parte dos recursos do PAC so utilizados em obras do Ministrio das Cidades. Alm disso, descobrimos que os maiores investimentos na rea da sade so destinados ao estado do Par. Por fim, conseguimos plotar um mapa com um conjunto de informaes obtidas atravs dos dados, utilizando as coordenadas geogrficas para identificar as obras. Isso tudo foi feito utilizando um conjunto simples de dados, com apenas uma tabela. Alguns conjuntos de dados so mais complexos, muitas vezes distribudos em vrias tabelas. claro que as consultas vo ficando mais complexas, conforme o volume de dados e a quantidade de tabelas, mas possvel extrair informao de vrias tabelas ao mesmo tempo, apenas cruzando informaes entre elas.

Joo Batista Neto engenheiro de aplicaes e trabalha com ambiente web desde 2000 em diversas linguagens, como Java e PHP, dedicando esforos ao desenvolvimento de bibliotecas reutilizveis para a comunidade. Especialista em integrao de sistemas, possui vrias bibliotecas reutilizveis publicadas como open-source para a comunidade, como biblioteca

Cielo, PayPal, ECT (Correios), BuscaP, Lomadee, Twitter, Facebook entre vrias outras. administrador do Frum iMasters e iMasters Code, onde compartilha conhecimento com a comunidade de desenvolvedores. Tambm 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 Eu tenho um amigo que sempre lembra dessa piadinha ridcula quando algum cliente reprova algo sem sentido. Afinal ele reprova porque ele consegue, porque ele pode reprovar, u. Piadinhas ridculas parte, quero contar uma experincia de porque eu posso que venho passando, relacionadas a criao de novas tecnologias. H algum tempo eu comprei uma pulseira da Nike, a Fuel Band. Ela quantifica todos os seus movimentos. Em verdade, no comeo, no vi muita funo naquilo. Mas hoje, uso todos os dias.

Mas eu viciei nesses malditos fuels. Sabe por qu? Simplesmente porque eles existem. E agora posso medi-los. Fico querendo bater sempre minha meta do dia. Meta de calorias? De metros? De fora? No de Fuels. Mas por qu? Porque eu posso. Bobo n. Pois . Mas uma verdade cada vez mais presente na nossa vida. Existem hoje uma srie de tecnologias eu posso e que, na minha opinio, so sempre muito vlidas. Ser que voc vai usar o Leap Motion?

Sabe por qu? Vai. Porque eu posso! :P Explico: uma tecnologia bem bacana, mas sem nenhuma explicao racional. Ela mede seus movimentos e te devolve uma valor em fuels. Esses fuels no tem relao nenhuma com alguma medida conhecida. No so metros. No so calorias. No so quilmetros/hora. So Fuels. Sabe por qu? Porque voc pode. Pode controlar a interface sem tocar nela. Mas no mais prtico usar o teclado? s vezes. Mas quem se importa? Ser que voc vai usar o MYO? Vai, sabe por qu? Porque voc pode. Pode controlar a interface sem tocar nela, usando uma pulseira. Mas no mais prtico o Leap Motion? s vezes.

41

Leap Motion (www.leapmotion.com)

Mas quem se importa? Mas ser que voc vai continuar usando o teclado? Vai. Sabe por qu? Porque voc pode. E, ao final, voc vai acabar se convencendo, um dia, mesmo quando voc puder ditar um texto e a Siri ou o Google Translate transcreverem, de que o teclado mais prtico, s vezes. Enfim, o que quero dizer com isso tudo? Que vivemos na era das invenes. E que sempre podem surgir novas tecnologias, que faam 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

Para saber mais: Leap Motion: https://www.leapmotion.com/ MYO: https://getmyo.com/ Carro com redes sociais: http://bit.ly/ZPK8xq iPhone e velocidade do vento, artigo na GizMag: http://bit.ly/103SjHk </>

Pedro Gravena Diretor de Criao Digital da Wieden+Kennedy So Paulo, j foi arquiteto, msico, artsta plstico, e est estudando para ser um inventor frustrado. Conhea 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 prottipos de hardware. Quem trabalha com pesquisa ou desenvolvimento de novas tecnologias pode se deparar com prottipos e provas de conceitos de produtos e saber trabalhar com este recurso pode ser muito til nestas situaes. Geralmente, prottipos de hardware so criados por departamentos de pesquisa e desenvolvimento identificados pela sigla R&D (Research and Development). Tambm muito comum que empresas de startups ou mesmo o pessoal que gosta de colocar a mo na massa (a comunidade DIY Do It Yourself) crie prottipos ou verses muito simplificadas e cruas de dispositivos para a avaliao e testes. importante destacar que este tipo de prottipo no disponibilizado para o pblico em geral, pois se trata de algo que ainda est no estgio inicial de desenvolvimento. E no estamos falando de imagens ou cenrios conceituais aqui: me refiro a prottipos que efetivamente existem e que esto sendo utilizados em laboratrios com um fim especfico. Em alguns casos, as empresas acabam mostrando estes prottipos para divulgao na mdia, o que acaba gerando alvoroo em usurios early adopters ou mesmo pessoas que se empolgam com o prottipo. Nos tempos atuais, com novidades como o Google Glass, o Oculus VR, o Leap Motion ou mesmo a braadeira MYO, fica cada vez mais evidente que os prottipos despertam curiosidade e contribuem para a gerao de expectativas muitas vezes irreais. Destaco que estes prottipos, ou pelo menos as ideias e inovaes por trs deles, geralmente so apresentadas comunidade cientfica e acadmica anos antes dos prottipos serem concebidos e certamente muito frente do que a imprensa especializada publica.

Mo na massa
Vou comentar algumas experincias que tive com alguns prottipos 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 prottipos de hardware. O primeiro prottipo de hardware que tive a oportunidade de trabalhar foi em 2010, graas a um concurso para estudantes ligado conferncia acadmica UIST 2010. O prottipo em questo era um

Trabalhando com prottipos

Por @pichiliani

43

teclado da rea de pesquisa da Microsoft que possua duas caractersticas interessantes: todas as teclas possuam um pequeno visor OLED e a parte de cima do teclado continha uma regio sensvel a toque. Veja o vdeo de divulgao do concurso para ter uma ideia http://youtu.be/n0MEhKk9xg4 Neste caso, enviei uma proposta para desenvolver uma ferramenta que auxiliava a edio de vdeo, depois de conversar com o colega Maestro Billy. A minha proposta foi aprovada, eu recebi o teclado (o nico enviado para a Amrica do Sul) e criei um prottipo veja aqui http://youtu.be/vcuzKcPX2eQ. Fui at Nova York participar da conferncia e tambm do concurso que distribuiu alguns prmios em diversas categorias (infelizmente no consegue ganhar em nenhuma delas). Apesar de ficar muito empolgado quando recebi o prottipo, tive diversos problemas para o desenvolvimento. No havia escolha de plataforma ou linguagem de programao (apenas C# com uma aplicao WPF), sem documentao, sem suporte, em garantia, cdigos de erro e situaes 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 pblico o prottipo. Mas, levando tudo em considerao foi uma tima experincia. Em 2012 voltei a participar do concurso UIST, porm desta vez o hardware foi um pequeno touchpad que reconhece com grande preciso cinco dedos. Este prottipo foi disponibilizado pela empresa Synaptics, recebeu o nome de Jedey e tambm fornece dados de presso 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 prximas geraes de notebooks. Segui o mesmo procedimento: enviei a proposta e assim que ela foi aceita recebi o prottipo para desenvolver uma aplicao que deforma objetos 3D (apenas o mesh, sem textura) de acordo com a presso aplicada sobre cada um dos pontos de contato - http://youtu.be/9BI3gSjNytk. Alm dessas experincias, tambm j cheguei a trabalhar com outros prottipos 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 prottipo da Intel (codinome Penwell) para avaliaes e desenvolvimento de aplicaes colaborativas

em tempo real, um dos tpicos que estou pesquisando. Sem entrar muito em detalhes, este dispositivo possui algumas caractersticas muito interessantes e importante destacar a iniciativa da Intel em disponibilizar para a comunidade cientfica prottipos para auxiliar o desenvolvimento de novas tecnologias ou mesmo para empreg-los em pesquisa de produtos que podem chegar ao pblico, que nunca vo sair dos laboratrios ou que vo apenas ser utilizados como estudo de caso em alguma publicao acadmica.

Gostou da ideia?
Como disse no comeo, alguns profissionais de desenvolvimento acabam colocando a mo em prottipos de hardware antes de eles chegarem ao grande pblico ou mesmo antes da imprensa receber alguma verso para publicao de contedo. Alguns leitores podem pensar que para ter acesso a certos prottipos preciso apenas de uma boa dose de sorte ou mesmo excelentes contatos. Apesar de estes dois fatores serem importantes, muitas empresas esto procura de novas aplicaes ou mesmo diferente usos para seus prottipos e neste ponto que os desenvolvedores podem enxergar uma excelente oportunidade. Em outras palavras: voc quer ter a oportunidade de trabalhar com um prottipo de tecnologia, em especial um hardware, antes de ele ser lanando para o pblico? Ento tenha uma boa ideia do que voc faria com ele se ele estivesse em suas mos. Mas no s isso: mostre que voc sabe como fazer, possui os recursos para tanto e que tal abordagem vai agregar valor ao prottipo. E no se esquea de que a empresa que disponibilizou o prottipo sempre vai querer algum tipo de contra partida: um relatrio tcnico, uma apresentao ou algum tipo de demonstrao do que foi desenvolvido. </>

Mauro Pichiliani bacharel em Cincia da Computao, Mestre e doutorando em computao pelo ITA (Instituto Tecnolgico de Aeronutica). Trabalha h mais de 10 anos utilizando diversos bancos de dados e ferramentas de programao. @pichiliani / pichiliani@gmail.com

44 > Comunidade

Synbio: tijolinhos para construir aplicaes interessantes

A comunidade da USP-SP rene pesquisadores e graduandos para melhorar o ambiente tecnolgico do Brasil.
Por @lufreitas para iMasters

45

Voc imagina que existe uma biologia sinttica? Pois existe. Alis, s existe por conta da Tecnologia da Informao, que permite aos bilogos ter a capacidade de sequenciar genomas, compartilhar informaes e criar padres. 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 aplicao dos conhecimentos da engenharia surgiu a biologia sinttica. A biologia sinttica a mistura de muitas disciplinas e conhecimentos, difundida aqui no Brasil por uma pequena comunidade de So Paulo, o Synbio Brasil. Liderados pelo Dr. Andrs Ochoa e com o apoio de vrios professores da USP, essa iniciativa estudantil rene 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 rene pesquisadores e estudantes de seis ncleos da USP: Matemtica, Fsica, Qumica, Biologia e Escola Politcnica. So 20 pessoas que usam seus conhecimentos para criar projetos e produtos de biologia sinttica. Entenda: algo como os transgnicos, organismos geneticamente manipulados. O doutor Andrs explica: desenvolver organismos sintticos, criados a partir de partes padro, os BioBricks, com uma finalidade especfica. De quebra, eles aproveitam para usar os conhecimentos da engenharia e estabelecer um mtodo produtivo que seja vivel no mercado e ajude ao meio ambiente. Esses produtos podem ser feitos em bactrias, fungos ou plantas. A prtica regulada, no Brasil, pelas normas da CNTBio (Comisso Nacional Tcnica de Biossegurana) e s pode ser realiza-

da em laboratrios credenciados. Criamos engenharia gentica no laboratrio. Isso teoricamente relativamente simples, mas muito complexo na prtica. Fazer funcionar algo que exige muitos padres, conta Andrs. O que eles fazem criar padres, segmentar as partes da produo e estabelecer os protocolos para usar o DNA em cada entorno (bactria, fungo ou planta). Pior: os componentes genticos, 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 trs a 20, diz Andrs. A ideia desse grupo espalhar a cultura pelas outras universidades brasileiras, incentivar a pesquisa sria de biologia sinttica e participar do iGEM, competio internacional que quer criar uma rede de dados biolgicos. Um exemplo interessante da aplicao desse conhecimento: hoje muito caro testar as bebidas alcolicas para adulterao por metanol. preciso colher a amostra, ter uma mquina cara no laboratrio, levar as amostras, testar e depois voltar. Os alunos Pedro Medeiro e Otto Heringer propuseram um projeto para criar uma bactria que tenha um sensor especial para metanol na bebida. Assim, a fiscalizao seria rpida, eficiente e mais barata.

Sem TI no h biologia possvel

O interessante que essa comunidade est organizando o conhecimento usando os parmetros open source que tantas vezes utilizamos para desenvolver ou aperfeioar programas. Isso faz com que a gente avance mais rpido e que todos pos-

Synbios - biologia, TI, open source e crowdsourcing unidos para projetos e produtos de biologia sinttica

46 > Comunidade

sam comear mais frente, conta Andrs. Eles usam o iGEM, a BioBricks Foundation e uma wiki, a Registry Parts, para registrar material e trocar genes e informao. Alm da proximidade com open source, eles tambm programam. O prprio Andrs desenvolve cdigos simples em Perl ou Phyton. Sem contar que, graas abundncia de dados publicados na rede, eles agora saem dos modelos computacionais para a bancada do laboratrio. Com muita informao ao alcance, ns formulamos as perguntas a partir dos dados. Podemos fazer a pergunta primeiro no computador, desenvolver hipteses e depois ir para a bancada para ver se funciona mesmo, explica Andrs. A partir do crowdsourcing, os bilogos conseguem resolver essas questes sem chegar perto da bancada de laboratrio. S computadores e crebros em todo o mundo trabalhando juntos. Sim, voc entendeu: eles esto 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 no deixa nenhuma boa inveno sem uso, no site Fold It, por exemplo, ela convoca os internautas para encontrar solues para protenas. Se voc, programador, no sabe, as protenas so molculas hipercomplexas, produzidas segundo cdigos muito especficos e, pra complicar, de acordo com uma posio espacial muito especfica.

A grande questo para o grupo mesmo a comunicao. O iGEM nos incentiva human practice, comunicar a cincia para o pblico. Somos a nica comunidade em portugus que divulga essa pesquisa. L fora, conta Andrs, j surgem at startups dedicadas a produzir esses organismos. Enquanto isso, os integrantes do Synbio Brasil comemoram suas conquistas: participao do iGEM 2012, com um projeto que se tornou projeto de TCC de um dos participantes. projeto para desenvolver molculas de proteo contra a luz UV em astrobiologia. o projeto do prprio Andrs, que expressar genes em locais especficos de uma planta. Para isso, ele est desenvolvendo uma plataforma que permitir localizar rapidamente qual o biobrick necessrio. Conhea mais sobre o trabalho do Synbio acessando o site http://synbiobrasil.org/ </>

A realidade brasileira
Aqui no Brasil, nada disso estaria acontecendo, conta Andrs, sem o apoio da sua coordenadora de doutorado, a doutora Marie Anne Van Sluys, e de outros professores da USP. Os coordenadores dos laboratrios oferecem, alm do espao, 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 rgo financiador de pesquisas acadmicas) e de grandes empresas. Sim, so as multinacionais, como Braskem, Monsanto, Syngenta e Bayer, entre outras, que tm interesse nessa pesquisa.

Sem o desenvolvimento de TI jamais conseguiramos trabalhar. A ideia futura criar um app para o organismo, diz Andrs.

48 > Encontro 7Masters

Plack - Super-Bonder para a Web

res web e interfaces de gateway, como Apache 1 e 2, nginx, CGI, FastCGI e um servidor web autnomo implementado pelo prprio Plack. So esses componentes que vo executar a aplicao propriamente dita e realizar coisas como pre-fork e load balancing. 2. Loaders: componentes que carregam a aplicao em conjunto com um Handler. A forma como a aplicao carregada pode ter bastante impacto na execuo da aplicao, como por exemplo, carregar as bibliotecas antes dos forks acontecerem, para se aproveitar do copy-on-write e diminuir a assinatura de memria. Outros casos tambm incluem carregamento sob demanda, que til para desenvolvimento, alm do gerenciamento de sinais para recarregamento graceful. 3. Aplicaes .psgi: o PSGI define um formato para as aplicaes, que devem ser escritas em Perl. 4. Executores: utilitrios para uso em linha de comando que controlam os diversos aspectos da execuo da aplicao. O Plack implementa um executor que se chama plackup e tipicamente usado em desenvolvimento para subir uma verso light da aplicao. 5. Construtor de Aplicaes: o Plack permite que voc combine componentes de forma arbitrria usando a semntica fornecida pelo builder:

Eden Cardim - 7Masters Perl Plack uma implementao em Perl da especificao PSGI. Ela foi criada para resolver o problema das mltiplas interfaces de implantao de aplicaes web em servidores. O PSGI baseado no Rack (Ruby) e no WSGI (Python), agregando as melhores features dessas duas especificaes.

Arquitetura
O Plack possui diversos componentes que podem ser combinados para construir uma stack completa e autnoma para a web. 1. Handlers: adaptadores para diversos servido-

49

O 7Masters - Encontro iMasters de Especialistas, acontece todos os meses, na ltima quarta-feira de cada ms, no iMasters Lab. So 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 sugesto. Escreva para setemasters@imasters. com.br e opine, sugira um tema ou o nome de um profissional para participar. Aqui voc confere uma seleo dos ltimos 7Masters. E pode se preparar para os prximos ainda este ano falaremos sobre Django, Zend, Redes & Servidores, Android, Usabilidade, Inovao e FOI (otimizao para front end). Acompanhe as datas em setemasters.imasters.com.br.

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

Two Step Verification

6. Middlewares: so componentes intermedirios entre a web e as aplicaes e cuidam de coisas como compresso/descompresso de contedo, caching e manipulao de headers. Existem centenas disponveis no CPAN implentando as mais diversas funcionalidades. 7. Frameworks: Catalyst; CGI::Application; Jifty. Dancer; Mojo; Erick Belluci Tedeschi - 7Masters PHP Muitas pessoas acham que suas informaes pessoais guardadas em sites de e-commerce, jogos, redes sociais, etc no iro vazar para terceiros mal intencionados. Essas pessoas esto enganadas, seus dados j vazaram! Em 2012, por exemplo, vazaram mais de 6 milhes de credenciais de acesso da rede social LinkedIn. Assim como vazaram tambm de outros servios largamente utilizados, como PlayStation Network, Hotmail etc. Isso acontece por conta de falhas de segurana que permitem o roubo dessas informaes de usurios. Uma credencial roubada e utilizada indevidamente por um atacante pode se tornar um pesadelo para a vtima. O que se tem feito para minimizar o impacto da utilizao de contas roubadas por crackers o uso de mais um fator de autenticao com o

8. Testers: o Plack possui uma srie de emuladores de requisies que so teis para realizar testes. Dessa forma, tanto o cliente HTTP, quanto o servidor so executados e se comunicam dentro do mesmo processo, o que elimina o overhead de criar um par requisio/resposta em HTTP. 9. Servers: servidores autnomos de HTTP. a. Starman: servidor com pre-forking de alta performance, serve at 7000 requisies por segundo com uma nica CPU. b. Twiggy: servidor assncrono, til para execuo em ambientes sem fork, serve at 4000 requisies por segundo numa nica CPU.

50 > Encontro 7Masters

objetivo de reforar a segurana na hora do login. Os fatores de autenticao so divididos em trs grupos:

1. Aquilo que voc sabe (algo que voc memoriza)

Senha (mtodo mais utilizado): frase, nome, nmero, data, algo aleatrio que secreto para o usurio. PIN (Personal Indentification Number): comumente utilizado em ATMs e bloqueio de celulares. um nmero secreto para o usurio. Padro de Desbloqueio e Picture Password: utilizado no Android e no Windows 8, respectivamente. Somente o usurio que consegue reproduzir o padro ou a sequncia solicitada tem acesso ao dispositivo.

empresas para acesso a lugares restritos, pelo Detran para confirmar presena do aluno nas autoescolas etc. A leitura feita atravs dos pequenos sulcos localizados na pele das pontas dos dedos. Voiceprint: as cordas vocais emitem o som em uma frequncia especfica para cada pessoa. A identificao feita atravs de gravao de uma amostra e comparada com uma gravao original. Observao: o aplicativo Shazam utiliza um algoritmo de identificao semelhante para identificar as msicas. Reconhecimento de ris (globo ocular): a ris a parte do olho que define a cor (castanho, azul, verde). Vista em um microscpio, ela apresenta um tipo de textura que diferente em cada pessoa e quase impossvel de se repetir. Alguns desses fatores de autenticao so mais indicados para acesso fsico e outros para acesso lgico e/ou na Web. No caso de sites, o que est sendo mais utilizado o token combinado com uma senha. Alguns servios que j esto utilizando isso so: Gmail, Facebook (via SMS), Yahoo!, DropBox, Amazon, entre outros.

2. Aquilo que voc tem (objeto fsico)

Token: aqueles chaveiros que possuem um display com uma senha, utilizado normal mente para acesso a VPN e em transaes de Internet Banking. Smart Card (certificado digital): utilizados nos cartes de crdito/dbito, SIM cards, alguns crachs mais sofisticados. Guarda, em seu interior, informaes criptogrficas acessadas apenas atravs de leitor especfico em conjunto com uma senha/PIN. RFID (Radio-Frequency Identification): crachs, chaveiros, carto de estacionamento, o Sem Parar, produtos em supermercados (normalmente os produtos mais caros!) etc. Dispositivo que identifica unicamente o seu portador.

Adicionando mais um fator de autenticao de SMS

Para incluir um fator de autenticao visando complementar a segurana de um sistema j em uso, pode-se colocar um passo (step) a mais, aps o login do usurio. Por exemplo, enviar um SMS para um nmero de celular previamente cadastrado. Dessa forma, o sistema fica esperando o usurio digitar o token enviado para o seu celular, gerado randomicamente com uma entropia forte. O sistema guarda na sesso o token que foi enviado para o celular para que possa ser comparado quando o usurio digitar. O usurio s ter acesso ao sistema se digitar exatamente como enviado. Obviamente, preciso implementar mecanismos de contingncia, caso o SMS demore ou o nmero de celular no seja mais da pessoa. Lembrando que o mecanismo de contingncia no pode ser uma forma de burlar a autenticao de dois fatores!

3. Aquilo que voc

Biometria (bio[vida] + metria[medida]) - Caracterstica fsica ou comportamental que identifica unicamente um indivduo. Fingerprint (impresso digital): utilizada em

51

Perl na Bioinformtica

sos mdulos especficos para as reas cientficas, como o BioPerl. Alm das facilidades que a prpria linguagem possui, h toda a comunidade de desenvolvedores que estimula a troca de experincias e conhecimentos atravs de diferentes meios, desde listas de discusses at plataformas sociais para reviso de novos mdulos. Tudo isso faz do Perl uma grande linguagem e, consequentemente, uma excelente ferramenta para outras reas do conhecimento, especialmente quando se deseja fazer cincia.

Felipe Leprevost - 7Masters Perl Desde seus primeiros anos, o Perl tem se mostrado extremamente eficiente nos mais diferentes cenrios. Para muitos, as aplicaes mais evidentes tm sido aquelas em que o uso da linguagem foi responsvel por salvar e integrar grandes projetos, como a web na dcada de 90. Porm, a linguagem tem adquirido espao em diferentes reas do conhecimento, e a bioinformtica se tornou um notvel exemplo. No momento em que laboratrios de pesquisa comearam a utilizar cada vez mais sistemas computacionais para gerar dados baseados em experimentos biolgicos, criou-se a necessidade de novas ferramentas que pudessem auxiliar no manuseio dessas informaes e, como muitos desses dados so gerados em forma textual, uma linguagem poderosa no manuseio de texto se tornou uma das principais ferramentas da rotina de processamento e anlise de dados. A bioinformtica uma rea multidisciplinar que une duas diferentes reas do conhecimento - a biologia (especialmente a biologia molecular) e a computao. Os especialistas que se dedicam a ela tm como preocupao elaborar novas estratgias de anlise de dados, assim como desenvolver novos softwares para auxiliar no processamento desses dados, que, no raramente, so gerados em grandes quantidades. Nesse sentido, o Perl tem sido extremamente importante para a rea, pois uma linguagem que possui diversas caractersticas nicas. De forma geral, uma linguagem de fcil aprendizado e simples de ser executada, alm de possuir diver-

Seja um Perl core hacker

Breno Oliveira 7Masters Perl Existem muitos rituais de passagem em desenvolvimento de software. Comeamos pequeno, com um simples Al, Mundo, mas ganhamos confiana rpido e, quando nos damos conta, j estamos criando nosso prprio sistema de templates ou framework web. L no final da lista, quase que como um sonho inalcanvel de glria definitiva, est o santo graal de todo programador: contribuir com o cdigo fonte da prpria linguagem. Ao longo dos anos, uma srie de mitos sobre como se tornar um core hacker de Perl foram surgindo: era preciso saber C, ter conhecimentos avanados de Perl, dominar todas as entranhas do cdigo fonte ou mesmo ser indicado por um core hacker atual. Tudo mentira.

52 > Encontro 7Masters

A verdade que voc no precisa ser um ninja com o poder dos nove cortes ou saber um aperto de mo secreto para ajudar no core do Perl. De fato, mais de 65% dos tquetes abertos so de severidade baixa, muitos dos quais exigem pouco ou nenhum conhecimento de Perl, muito menos de outra linguagem. Problemas simples, como documentao incompleta ou com pequenos erros de formatao, testes sem descrio, ou mesmo criao de commit hooks no repositrio central, podem ser facilmente atacados por iniciantes e fazem toda a diferena para o projeto. O processo to simples que cabe em um pargrafo: clone o repositrio 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 rpida para atacar; crie um branch, faa suas mudanas, teste e envie para perlbug@perl.org com uma descrio em ingls. Pronto. Se o patch for aceito, seu nome estar imortalizado na prxima verso 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 cdigo. E a, t esperando o qu? Contamos com voc!

Como toda tecnologia nova e que traz benefcios concretos, a Computao em Nuvem parece criar uma diviso em dois grandes grupos: aqueles que usam de qualquer argumento para utilizar a nuvem, e aqueles que buscam qualquer razo para desqualificar o uso dessa nova plataforma. As pesquisas mostram que entre as preocupaes 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 no 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 especfico so preocupaes reais, que prejudicam a capacidade de empresas e desenvolvedores de terem controle sob suas prprias escolhas. Desde sua criao, o principal objetivo da tecnologia Java tem sido evitar que desenvolvedores e aplicaes fiquem presos a um nico fornecedor. Todo o ecosystema Java voltado para gerar opo e concorrencia. Desde os bytecodes Java, a arquitetura da mquina virtual, a clara separao entre a definio das APIs e sua implementao, o prprio processo de padronizao 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 aplicaes em mltiplas plataformas, como por exemplo, Windows, MacOS, Linux. Mas a portabilidade de Java vai alm: a portabilidade no tempo. Combinando a padronizao das interfaces, com um foco forte na compatibilidade binria entre verses e a chamada compatibilidade retroativa, o ecosystema Java tem um foco constante em garantir que bibliotecas e aplicaes escritos em verses anteriores de Java continuem rodando nas verses mais novas da plataforma. Essa capacidade que permite que o cdigo Java seja portvel no tempo, ou seja, que as suas aplicaes e, principalmente, o seu conhecimento, estejam prontos para serem reaproveitados em novas plataformas.

Blah blah Java blah blah Cloud

Bruno F. Souza Javaman 7Masters Java

53

Como por exemplo, as novas plataformas de computao em nuvem. E as principais plataformas de computao em nuvem que surgiram nos ultimos anos suportam a plataforma Java, garantindo que milhes de desenvolvedores estejam j capacitados a disponibilizar suas aplicaes nessa nova plataforma. Apenas para citar algumas, possvel utilizar as suas bibliotecas, aplicaes e o seu conhecimento em Java nos diversos ambientes da plataforma nmero um em cloud do planeta, a Amazon AWS. Java est disponvel nas solues de plataforma como servio do Heroku, da Cloudbees, da VMWare e um sem nmero 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 so uma excelente pedida. Tambm possvel utilizar Java nos ambientes padronizados e open source do RedHat OpenShift, e na plataforma de nuvem descentralizada e internacional, tambm baseado em open source da JElastic. Java tambm um componente importante na plataforma open source Eucalyptus, que permite a criao de nuvens privadas e hbridas. Isso sem falar nos gigantes Google, que mesmo em uma soluo menos baseada nos padres Java, capaz de executar gigantescas aplicaes Java existentes sem grandes modificaes, e tambm na plataforma Azure da Microsoft, que suporta suas aplicaes Java sem qualquer modificao. E a portabilidade de Java tem ajudado muitas outras tecnologias e linguagens. Dado que a mquina 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 tambm 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 auxlio do desenvolvedor. Algumas das melhores e mais poderosas ferramentas de desenvolvimento Java so open source, independentes desses fornecedores e se integram com todas as plataformas de nuvem. Mais do que

isso, suportam tambm qualquer outra linguagem. De solues de integrao e deployment contnuo, como Jenkins; passando por repositrios de bibliotecas como o Nexus, ferramentas de anlise de cdigo 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 disposio, de forma independente de fornecedores, uma garantia da sua liberdade. Nesse momento, onde a computao em nuvem est abrindo horizontes para novos tipos de aplicaes e possibilitando a criao 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 adoo da computao em nuvem, a plataforma Java sua importante aliada, no importa qual linguagem voc tenha escolhido para seu projeto.

Pensando o desenvolvimento de software

Ivo Nascimento 7Masters PHP Franqueza, reflexo e anlise da diferena entre simplismo e simplrio so os trs pontos que esta palestra aborda quando digo que vamos pensar o desenvolvimento de software. A franqueza o pilar base dessa reflexo. Onde o profissional mostra sua maturidade e permite que seus pares tambm amaduream.

54 > Encontro 7Masters

Um ambiente onde existe franqueza aquele onde os profissionais se sentem seguros para dizer No sei, por exemplo. Os melhores ambientes de trabalho por que passei tinham essa caracteristica e as empresas e profissionais que praticam e incentivam a franqueza so mais felizes com relao ao seu trabalho e resultados. Existindo a franqueza podemos pensar melhor sobre conhecimento e para melhor abordagem eu o dividi em trs tpicos acumulativos. Conhecimento tcnico: Aquele que todos buscamos para nos tornar um melhor analistas de sistemas e realizar a tarefa de programao da melhor maneira. Quando se detem somente conhecimento tcnico (no me refiro a todos ele) voc um timo tcnico. Conhecimentos humanos: So as habilidades que tornam voc um profissional que entende a requisio e ajuda o processo de reconhimento e definio de uma necessidade. Quando somados aos conhecimentos tcnicos, tornam um profissional habilitados a lidar com situaes mais complexas e tranformam a programao em uma das partes do trabalho e no a nica parte. Conhecimento do domnio de negcio: Se voc um profissional que detem conhecimento tcnico e tem conhecimento humano, natural que voc desenvolva esse tipo de conhecimento pois se envolve muito mais com as questes de negcio e com os problemas reais da empresa. Os problemas passam a no 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 solues. O simplrio e o simplismo esto envolvidos tanto na viso dos problemas, quanto nas solues. Pensar a diferena entre os dois constatar que ser simples no fazer aquilo que no necessrio e ser simplista ignorar aquilo que deve ser feito.

Building com Phing

Anderson Casimiro 7Masters PHP Salve, meus caros! Vou apresentar, para quem j no conhece, uma ferramenta de build feita em e para - PHP. Voc pode estar se perguntando: Build? PHP uma linguagem de script, ento, 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 esto o Make e o Ant. E para o nosso PHP temos o Phing (http://phing.info). Vou tentar passar bem rpido o conceito sobre building com o Phing em 7 pargrafos. Uma execuo de build nada mais do que a execuo em sequncia de diversas tarefas pr-determinadas - sendo que se uma falhar, a execuo no 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, alm de executar a tomada de deciso de continuar ou no a execuo e ainda atribuir dependncias entre tarefas? O Phing j resolve esses problemas e extensvel, ou seja, voc pode criar tarefas novas para sua execuo. possvel 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

55

Assim como seu (distante) parente Ant, que atua para Java, o Phing utiliza XML para sua configurao. Basicamente declaramos um Projeto; dentro dele, Alvos (que agrupam tarefas e definem dependncias) 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 padro, descrevemos a execuo em um arquivo build.xml, mas podemos quebr-lo em mais arquivos para organizar melhor e/ou usar dependncias especficas, mantendo o inicial sem dependncias.
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 no ver essa mensagem /> </target> <target name=step-c> <echo msg=O Phing parou a execuo do build/> </target> </project>

so habilitadas caso as dependncias para cada uma delas esteja disponvel. PHPUnit (com Code Coverage), Git, Requests HTTP, Lint, Amazon, SVN... S para comear! Vou dar um exemplo: vamos comear um projeto do zero. Sempre usamos a mesma estrutura de diretrios, sem um framework, mas no mnimo 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 disponvel na sua raz).
build.xml <?xml version=1.0 encoding=UTF-8?> <project name=7masters-1 default=start> <target name=start depends=compo ser,update,dirs/> <target name=composer> <available file=composer.phar property=composer.exists/> <echo msg=${composer. exists}/> <if> <not> <isset property=composer. exists/> </not> <then> <php expression=file_ put_contents(composer. phar,file_get_ contents(https:// getcomposer.org/ installer)) /> <exec command=php composer.phar/> <composer command=install/> </then> </if> </target> <target name=update> <composer command=update/> </target> <target name=dirs> <mkdir dir=application/ library />

Sim, dependncias. O Phing, por padro, j tem tarefas que vo agilizar seu dia a dia - desde operaes de filesystem, prompt para entrada de dados de usurio (via linha de comando!), estruturas condicionais (sim, no XML mesmo), execuo de comandos shell ou PHP. Alm disso, ele permite que voc crie novas tarefas via PHP, ou embutindo cdigo PHP no prprio XML. Como se no bastasse, o Phing conta com vrias tarefas opcionais, que

56 > Encontro 7Masters

<mkdir <mkdir <mkdir <mkdir </target> </project>

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

a Amazon. Ahh, para que tudo isso acontea voc deve idealmente estar na raz do projeto, onde est o build.xml, e entrar com um comando um pouco extenso:
phing

composer.json { name:7maters, require:{ php:5.3.*, monolog/monolog:1.5.* }

O Projeto muito bem documentado e estvel. 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 prticas no seu uso, para, ento, 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 usurio assduo da ferramenta e est muito contente com os resultados. Good Phinging! (em 7 pargrafos, no disse? :P) </>

Ok, automatiza tarefas. O que mais isso pode fazer? J ouviu falar de Integrao Contnua? uma atividade vinda de metodologias geis que visa integrar o cdigo de um projeto, vindo de diversas fontes (desenvolvedores fazendo commit e push, por exemplo) e integr-lo de maneira segura e contnua. Como segura? Realizando testes de maneira automtica a cada nova entrada de cdigo e certificando que o branch especfico do projeto ou um servidor de testes somente tenha cdigo testado. Testado como? PHPUnit, CodeSniffer, PMD, PHPCPD, PDepend... Se voc ficou com uma interrogao na cabea 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 poro de cdigo passe automaticamente por cada um desses testes para, s ento, ser integrada com o cdigo existente. Mas no para por a. Pense na infinidade de maneiras de automatizar o deploy de suas aplicaes minificando os ativos CSS e Javascript, limpando caches e atualizando o banco de dados sem precisar se matar. Com um email de confirmao 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 execuo de instalao para o time de infraestrutura, dando prompts para customizar a configurao de uma aplicao - inclusive para

58 > Social Media

Por @camilapc

Otimizao de mdias sociais: contedo otimizado e compartilhado

59

Para alguns est mais do que claro que contedo rei. A frase clssica em vrias situaes. Entretanto, nem sempre apenas produzir contedo o suficiente. Quando pensamos em SEO, produzir contedo um dos pilares de toda uma estratgia de otimizao. Por que aparecer bem posicionado importante? J sabemos que quanto melhor seu posicionamento nos resultados de pesquisa, maiores so as chances de gerar trfego para seu site, bem como melhor o posicionamento da sua empresa como a mais adequada para responder s dvidas de quem visita seu site. Contudo, as mdias sociais j detm uma grande parcela do tempo online das pessoas. A partir desse fato, s produzir contedo no o suficiente. Se antes da exploso das mdias sociais ter um bom posicionamento nos resultados de pesquisa j era uma grande conquista, hoje isso no basta. nesse ponto que a otimizao DE mdias sociais e PARA mdias sociais ganha cada vez mais relevncia. Nesse contexto, a frase de Erik Qualman - Empresas no tm mais a opo de onde ou se estaro nas mdias sociais. A questo 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 difcil saber quem o coadjuvante nesse cenrio. Podemos abordar a otimizao DE mdias sociais sobre o ponto de vista do SEO: palavras-chave inseridas em descries de fotos no Facebook, otimizao de fan pages, descries no Twitter, otimizao de ttulos em vdeos no YouTube. Enfim, uma mirade de opes e estratgias podem e devem ser inseridas para otimizar os canais da sua empresa. Por qu? Em qualquer mdia social que sua empresa esteja inserida, a caixa de busca est l. De Facebook a Google+, buscar na Internet j se tornou parte do hbito de navegao. Por isso, otimizar para que seu contedo seja encontrado, tanto dentro do canal em questo, quanto no Google, importante. Tambm podemos abordar a Social Media Optimization como otimizao PARA mdias sociais. Essa otimizao consiste, em primeiro plano, facilitar o mximo possvel para que o seu contedo se espalhe. Uma forma simples de fazer isso utilizar botes de compartilhamento, integrao com widgets e plug-ins sociais. Porm, apenas inserir um punhado de botes de compartilhamento em seu site no o suficiente e, o pior, eles podem prejudicar suas estratgias. Quanto mais botes, mais tempo seu site pode demorar a carregar. Dessa forma, o tempo de carregamento das pginas aumenta e pode prejudicar suas estratgias de SEO. Sendo assim, o primeiro passo para otimizar seu site para as mdias

sociais a escolha dos botes mais utilizados. Avalie em sua ferramenta de web analytics qual mdia social traz mais trfego para seu site e invista nos botes correspondentes. Alm de deixar seu contedo compartilhvel, importante entender que contedo rei, mas contedo relevante muito mais. Por esse motivo, produzir contedo apenas para os buscadores uma parte de sua estratgia. Com a utilizao crescente das mdias sociais, muito importante que seu contedo seja compartilhado. A partir disso, sua empresa se posiciona no mercado, cria engajamento, proximidade com os clientes e mais trfego para seu site, por exemplo. Portanto, se sua loja online vende mveis, provvel que a maioria das pessoas no se interesse em compartilhar apenas um sof de dois lugares. Porm, se formos alm e buscarmos alternativas para o tal contedo relevante, uma forma de ter seu contedo mais compartilhado seria simples: dicas de como manter um sof limpo ou como criar almofadas para decorar seu sof novo. Esse contedo pode ser feito como texto, infogrfico, vdeo, entrevista com profissionais da rea. Ainda possvel, 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 opinies. Apenas algumas alternativas. Em linhas gerais, a regra : crie razes para que as pessoas queiram compartilhar seu contedo. importante que os profissionais tenham a cultura da otimizao e do compartilhamento. Produzir contedo com tcnicas de SEO fundamental. Mas quem est conseguindo se sobressair no mercado quem utiliza tanto as tcnicas de SEO, quanto as tcnicas de SMO. Em primeiro lugar, produzindo contedo com tcnicas de otimizao, mas, tambm, tcnicas de viralizao. Mdias sociais e buscadores no so mundos descolados. O caminho de uma pessoa at fechar uma compra pode comear 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, integrao a palavra-chave. Que tal inseri-la na otimizao da sua comunicao? </>

Camila Porto Camargo formada em Comunicao Institucional na UTFPR. Ministra os curso Facebook para Empresas, Facebook, SMO e Estratgias de Contedo, e Estratgias de Venda no Facebook. Tambm colunista no E-commerce Brasil e no TechTudo, alm de palestrante em diversos eventos como: I Semana de Marketing Digital ESPM, I Simpsio Sul-Brasileiro de Marketing Digital, 2 Mdia FAG e II Encontro de Profissionais de Marketing do Pernambuco.

60 > Conexo Vale do Silcio

Sobre avies no ar e oportunidades

Por @vdepizzol

Ms passado peguei um vo com meus colegas de trabalho at Austin, no Texas, para participar de uma conferncia de desenvolvedores, organizada pela empresa na qual trabalho. Nos dias seguintes, apresentaramos diversas novidades nas ferramentas para criao de apps para iOS e Android que a empresa possui, para mais de 600 pessoas, alm de diversas palestras sobre como focar na experincia do usurio e interao 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 to grande podia dar conta de tantos avies no ar, mas no conseguia fazer um aplicativo de celular que prestasse. De alguma forma eu me limitei a poucos servios web e apps, e tinha certo tempo que no sofria com interfaces ruins e mal pensadas. Mas da lembrei que experincias como o check-in da United no so exceo (muito pelo contrrio!): empresas grandes com solues quadradas ainda so maioria e podemos v-las em qualquer canto. Felizmente esses tipos de problemas que empresas grandes no do conta (quem diria!) so os que muitas start-ups correm atrs para tentar resolver. Elas dificilmente chegam com algo totalmente novo; como tm 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 no faltam. Quando o

Dropbox foi lanado, j existiam dezenas de solues 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 trs colches inflveis e um grupo de amigos tentando resolver o problema de hotis lotados durante eventos em So 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 no acaba. At mesmo a plataforma BoicotaSP, que no substitui o Procon nem o Reclame Aqui, mas complementa listando lugares em So Paulo que exploram demais seus consumidores, um bom exemplo de como sempre existe espao para resolver problemas. Em todos os cantos onde existem problemas h ideias e solues esperando para serem ocorridas. Quanto maior o nmero de problemas, maior o nmero de oportunidades. (Talvez no d para concorrer com uma companhia area. Mas tudo bem, uma coisa de cada vez). </>

Vinicius Depizzol designer de interface, e partiu com passagem s de ida de Vitria/ES para So Francisco/CA, em 2012, para trabalhar na Xamarin, uma start-up que est mudando a forma de criar apps multi-plataforma.

61

62 > Review

O ano 2013, o mercado de dispositivos mveis 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 mvel. Mas o que um app para Firefox OS? Um aplicativo feito para Firefox OS uma coleo de HTML/ CSS/Javascript tal qual uma pgina web. Porm, alm 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 informaes, como nome e descrio do app e permisses de acesso ao hardware, que ele precisa para funcionar. Um exemplo de manifesto simples segue abaixo:

name: Meu App, description: Minha descrio, launch_path: /, icons: { 128: /img/icon-128.png }, developer: { name: Meu nome ou organizao, 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 opo instalar um aplicativo, o sistema l esse manifesto e o adiciona ao telefone.

Construindo apps para Firefox OS

uma nova experincia
Por @soapdog

Tipos de aplicativos
O Firefox OS possui trs tipos de aplicativos: hospedados, privilegiados e certificados. O primeiro fica no seu servidor e, ao utilizar tcnicas do HTML5, como appCache e localStorage, pode ser disponibilizado para acesso offline. o mais fcil de se fazer e possibilita que qualquer pgina 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.

63

Acesso ao Hardware
A Mozilla est padronizando junto aos rgos competentes uma srie de APIs que so coletivamente chamadas de Web APIs. Com acesso ao hardware via Javascript, elas permitem o uso de ferramentas como o acelermetro, a cmera, os contatos etc. Essas APIs esto em diferentes graus de implementao e padronizao, e podem ser vistas em https://wiki.mozilla.org/WebAPI. Utilizadas de forma correta e com as devidas permisses no manifesto, o seu aplicativo web tem acesso a funcionalidades que, anteriormente, eram restritas a aplicativos nativos.

informaes sobre as APIs, a publicao de apps e outras documentaes em geral. O Firefox OS totalmente aberto e tanto o cdigo do sistema operacional quanto os apps que vm includos nele esto disponveis no GitHub em https://github.com/mozilla-b2g/gaia. A pgina da comunidade Mozilla no Brasil bastante ativa, e suas listas de e-mail esto 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 so uma tima fonte de novidades sobre o OS e novas tecnologias web em geral. A comunidade distribuda por todo o Brasil com membros desde o Acre ao Sul, e participa de eventos o ano todo. Fique de olho nas notcias no nosso site e no perca as prximas oportunidades de fazer workshops e participar de palestras sobre o Firefox OS. A capacidade de criar apps multiplataforma com tecnologias web j existe. Lano um desafio: depois de construir seu primeiro app assim, tente programar de outra maneira. </>

Simulando o Firefox OS
Sabe-se que um aplicativo para Firefox OS construdo com tecnologias web, definido por um manifesto e que as Web API proporcionam acesso ao hardware. Tudo que necessrio para desenvolver e testar seus aplicativos so uma instalao 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. Voc pode tambm ligar um servidor web local e abrir seu aplicativo do simulador. As Web APIs possuem rotinas para que voc no precise utilizar o Firefox Marketplace para instalar apps. Seu aplicativo pode ser uma pgina web que oferece um boto de instalao. Muito diferente e muito mais livre que as demais plataformas.

Concluso
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 mveis. 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 prprio 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 Niteri, RJ. Ele programa web apps, cozinha macarro e escreve fico cientfica nas horas vagas. Atualmente se dedica criao de apps mveis com HTML5 e divulgao do Firefox OS. http://andregarzia.com / @soapdog

64 > Artigo > Design de Interao

Interfaces conceituais, interaes reais

Por @eduagni No ano de 2012 pesquisei muitos projetos ligados a interfaces interativas e conceituais, para produzir novas discusses sobre o futuro da tecnologia em minhas palestras. O interessante foi que essas pesquisas me levaram no s s interfaces conceituais, mas a algumas propostas de interao que no imaginvamos nem mesmo no plano das ideias conceituais. Porm, elas j so bem reais nos dias de hoje e podem significar grandes solues de design no 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.

65

Interfaces conceituais

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

Uma das coisas para a qual comecei a dar mais ateno no ano passado foram as propostas vistas em interfaces conceituais, que tentam indagar como sero as interaes das pessoas com as coisas em um futuro no to distante. Esse o caso dos vdeos A day made of glass (youtu.be/6Cf7IL_eZ38) produzidos pela Corning, que chamaram minha ateno no por eu acreditar que o futuro ser baseado em interfaces touch screen (afinal, j temos interaes 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 experincias com o ambiente, sem alterar as suas caractersticas fsicas. 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 interao do passageiro com o mundo no exterior do carro.

E j que estamos discutindo como sero 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 gerao. Digo limitada, pois as possibilidades de interao ainda so bastante restritas e pouco exploradas na maioria dos livros digitais, e muitas vezes no passam de uma evoluo direta dos impressos. Mas claro, existem pessoas propondo algumas revolues na forma de interagir com os livros, e um desses indivduos Mike Matias com o seu Push Pop Press (pushpoppress.com), adquirido pelo Facebook h um tempo. Alm de Mike, a IDEO tambm andou apontando boas direes nas possibilidades com os livros digitais, propondo trs conceitos diferentes, nomeados de Nelson, Coupland e Alice (ow.ly/hVDQI). Tambm temos propostas j concretas e inovadoras que no exploram tanto as interaes sociais ou multimdias, 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 crtica de textos. Mas existem algumas interfaces que apesar de parecerem conceitos futuristas, j so bem reais. o caso da interface touchscreen desenvolvida pela Tactus Technology (ow.ly/hVE8v), que possui botes fsicos que podem emergir para fora do que parece um vidro plano, para em seguida desaparecem quando no forem mais necessrios. Entre outras coisas, isso poderia ajudar bastante a diminuir a curva de aprendizado das interfaces baseadas em toque para pessoas mais velhas. Interessante, no?

Push Pop Press - pushpoppress.com

66 > Artigo > Design de Interao

Design para pessoas e coisas reais

Os profissionais que trabalham com experincia do usurio conhecem uma srie de tcnicas e metodologias para estimular, facilitar e resolver problemas na interao das pessoas com as coisas. Mas e quando o problema de um indivduo est justamente na dificuldade em interagir com outras pessoas? Essa a dificuldade das pessoas portadoras de Autismo, um pblico com caractersticas que a maioria dos designers de interao (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 crianas com Sndrome de Espectro Autista tenham condies de jogar, explorar e expressar suas emoes e sentimentos. O projeto teve a colaborao do designer de interao Mark Mckeague na sua concepo, e foi vencedor do Technology Strategy Board Award for Independent Living (2011). Ao invs de pensar em auxiliar as interaes, vamos pensar na possibilidade de inventarmos as nossas prprias interaes e interfaces. Como seria se pudssemos 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 mnimo de energia eltrica, como bananas ou massinha, e com isso criar, por exemplo, um controle de videogame. Bom, talvez voc no esteja interessado em criar interfaces, mas sim em reconfigurar interfaces exis-

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

tentes, ou definir uma forma mais natural de realizar as interaes 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 vdeo imaginando como seria uma transferncia de arquivos entre um iPhone e um Macbook (ow.ly/hVG8L), atravs de uma interao mais manipulvel 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 saram do papel encontramos o Pinch (youtu.be/jRGLkj-PsCc), uma interface que conecta as telas de vrios smartphones ou tablets simultaneamente. Basicamente, um usurio pode vincular duas telas diferentes ao colocar os dedos em forma de pina 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 Tquio, e vem sendo apresentada em algumas conferncias para incentivar os desenvolvedores a criarem aplicativos para esta nova interface. </>

Makey Makey - www.makeymakey.com

Edu Agni UX Designer no iMasters, trabalha h nove anos com projetos nas reas de usabilidade, interface, interao, criao e web standards. Tambm curador da rea de design da Campus Party Brasil e professor dos cursos de Direo de Arte da SAIBADESIGN. www.uxdesign.blog.br / @eduagni

68 > iMasters Box

iMasters Box
MultiSwitch Alloy UI Pylons

O MultiSwitch uma extenso simples para Google Chrome, porm muito til quando voc precisa simplesmente alternar entre o localhost e ambientes de testes, customizando o ttulo de cada ambiente. http://bit.ly/i5HQu4

Framework open source de componentes de interface que nasceu em 2009. Voc pode estar perguntando porque deveria investir seu tempo no Alloy, ao invs de usar o jQuery, com seu gigantesco ecossistema de plugins. O caso que a manipulao de DOM s o topo do iceberg quando estamos lidando com aplicaes modernas e de alta escalabilidade. Voc provavelmente vai utilizar uma biblioteca para templates, outra para carregamento modular, outra para estruturao MVC, outra para componentes de UI (como jQueryUI/ExtJS) etc. O Alloy vem com todas essas coisas juntas. Ento no tem confuso entre bibliotecas, s uma API uniforme que deixa sua vida mais fcil. construdo com base no YUI3, um projeto da Yahoo! e mantido pelos engenheiros da Liferay. http://alloyui.com/

O Pylons fornece uma implementao orientada a objetos de MVC, porm terceirizando um pouco o servio. Na camada de modelo, possvel 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://www.pylonsproject.org/

69

O iMasters Box um agregador de servios voltado para desenvolvedores web, que rene ferramentas teis para esses profissionais e que j esto disponibilizadas na rede. Aqui na Revista, vamos selecionar sempre algumas das ferramentas mais interessantes para voc. Conhea mais o iMasters Box em http://imasters.com.br/box e participe! Sua sugesto de ferramenta pode vir parar tambm na Revista!

Twisted

Aptana Studio

API ConsultaCPF

O Twisted uma engine de rede escrita em Python que suporta inmeros protocolos, incluindo HTTP, NNTP, IMAP, SSH, IRC, FTP e mais. Contm um servidor web, vrios clientes de chat, servidores de mail, composto de inmeros 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 prprio python sabe falar com select e poll, e usa o toolkit Win32 do python para usar IOCP. http://twistedmatrix.com/

um software open source gratuito para IDE, desenvolvido em Java, com suporte a CSS, HTML, JavaScript, ScriptDoc, XML e texto comum, embora tambm seja possvel configur-lo para suportar PHP,Ruby on Rails,Adobe AIR e Bibliotecas AJAX. baseado no Eclipse. O Aptana Studio distribudo em multiplataforma, ou seja, pode ser rodado em Windows, Linux e Mac OS X. Tambm possvel se integrar ao Eclipse atravs de um plugin. Uma funcionalidade bastante interessante do Aptana seu assistente de cdigo. Ele funciona como um quadro branco, estilo pop-up, que sugere como voc pode preencher com o cdigo. Ele tem integrao com Git e permite personalizao da IDE, entre outras caractersticas. http://www.aptana.com/

Webservice para consulta de CPF/CNPJ na Serasa. Existem vrios tipos de consultas para anlise de crdito que permitem a automao de back-office. Ambiente de testes: http://bit.ly/10bxdvT Ambiente de produo: http://bit.ly/10bxfnp http://www.consultacpf.com/