revista imasters #6 by imasters [revista-6-web.pdf] (72 pages)

7/27/2019 Revista iMasters #6 by Imasters [Revista-6-Web.pdf] (72 Pages)

1/72

o_futuro__agora

R$24,0

0

NsfazemosaInternetno

Brasil

Maio20

13

/

Ano02

/

Edio06

design de interao

Interfacesconceituais,

interaes reais

presena digital

Os novosdilogos na erada economia da

ateno

review

Construindoapps para FirefoxOS - uma nova

experincia


2/72


3/72

Expediente

TIAGO BAETA

Publisher

LUIS LEO

Editor

RINA NORONHA(MTB 2759-ES)

Editora/Jornalista Responsvel

EDU AGNI

Projeto Grco / 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, PedroGravena, Reinaldo Ferraz, Vinicius Depizzol, WagnerMarcelo.

ESkENAZI INDSTRIA GRfICA

Grca

GRUpO ImASTERS

Organizao

> 1000 exemplares

> ISSN 1981-0288

Alameda Santos, 2395 - 1 andarCerqueira Csar, So Paulo/SP

CEP: 01419-101 - Brasil

www.imasters.com.br/[email protected]

Twitter: @iMastersFacebook: /PortaliMasters

Os artigos assinados so deresponsabilidade dos autores e no

reetem necessariamente a opinioda revista. proibida a reproduototal ou parcial de textos, fotos eilustraes, por qualquer meio, sem

prvia autorizao dos artistas ou

do editor da revista.


4/72


5/72

Editorial

Voc j se perguntou qual poder ser a pr-xima revoluo tecnolgica e como ela vai in-uenciar as nossas vidas? Tirando todas as es-peculaes 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 vezutilizam metforas/ideias/conceitos do nossocotidiano para facilitar o seu uso. Independen-temente da nova tecnologia que surgir, camas dvidas: como vamos utiliz-la? paratocar ou para falar? Funciona sem o? Comoliga/desliga?

Se pensarmos na histria da evoluo da com-putao, samos de uma fase em que tnha-

mos uma gura de um computador/assisten-

te pessoal, com interface de entrada e sada(alm dos acessrios) e estamos caminhan-do para aparatos tecnolgicos cada vez maistransparentes, em que tudo acessrio. Almdisso, temos a nuvem: um lugar que ningumsabe 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 dis-

positivo que possuir computao embarcadatem um i (leia como ai) na frente do nome:

iRelgio, iTomada, iTelefone, iMeuDeus! E issono faz o menor sentido: voc no vai chamarum relgio de computador ou de qualquer

outro nome que no seja relgio, mesmo quecom ele consiga acender a luz, abrir a porta oulembrar-se daquele compromisso importante.Esses objetos continuam com a sua caracte-rstica, mas com muito mais tecnologia. Soacessrios de um mundo conectado!

O que importa ainda que pouca coisa mu-dou, mas continuamos apertando botes (vir-tuais) e sua mo continua sendo o principalinstrumento de controle desses dispositivos.

Baseado nisso, quero levantar aqui uma dis-

cusso para pensarmos no futuro (das interfa-ces): convidar voc, leitor, para reetir a formacomo estamos acostumados a utilizar tecnolo-gia sobre o ponto de vista da usabilidade (da

mquina de escrever, da tela touch e at dosvestveis), dos novos desaos que surgem, atonde interessante sairmos de uma zona de

conforto para aderir a dispositivos nunca antespossveis e como essa grande rede mundial depessoas ir reagir frente a esses novos para-digmas.

Luis Leo desenvolvedorweb que encontrou em APIse hardware aberto novas

formas de integrar a webcom o mundo [email protected]


6/72

6 > Sumrio

22 :: Capa > O futuro agora

64 :: Design de Interao

Interfaces conceitu-ais, interaes reais

20 :: Presena DigitalOs novos dilogosna era da economiada ateno

62 :: Review

Construindo appspara Firefox OS


7/72

A iMasters uma revista de Tecnologia/Web aberta a novas ideias.Para colaborar envie o seu material por e-mail

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

7


8/72

8 > Entrevista > Maujor

Maurcio Samy Silva

O Dinossauro da CSSQuem trabalha com desenvolvimento web, em especial os

front-ends, com certeza j ouviu falar de Maujor, o MaurcioSamy Silva. Sim, porque ele certamente mais conhecido peloapelido que o consagrou no meio como o Dinossauro da CSS.

Autor de diversos livros, Maujor um obstinado divulgadordos Padres Web. Nesta entrevista, ele explica comocomeou a trabalhar com desenvolvimento de sites, d suaopinio sobre alguns temas muito discutidos na rea edeclara que sua maior inspirao compartilhar conhecimentos.

Por @RinaPri

Com a colaborao de@bernarddeluna e @eduagni


9/72

9


10/72


Eu no arriscaria um palpite sobre o que vir

no futuro. Parece-me que tudo ser possvel

Revista imasters:Voc engenheiro por forma-

o, 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 Civilpelo Instituto Militar de Engenharia (IME/RJ) e con-clu a graduao em 1973, no posto de capito.Em 1976, aprovado em um concurso para magis-trio do Exrcito, comecei a dar aulas de Geome-tria Descritiva e depois Matemtica para alunos doColgio Militar do Rio de Janeiro. Minha carreiramilitar foi toda exercida no magistrio. Paralele-mente s minhas atividades de magistrio militar,eu exerci a engenharia civil em uma empresa de

projetos e scalizao de obras de instalaes co-merciais e industriais.

Minha rgida formao militar, aliada minha fasci-nao pelas cincias exatas, moldaram minha con-duta e raciocnio extremamente cartesiano, criandouma necessidade quase compulsiva de mantermeu crebro em constante atividade, encarando evencendo desaos. Com esse perl, quando surgiuo primeiro computador pessoal no Brasil, adquirium e no mais parei.

Em 1988, juntamente com alguns amigos de Co-pacabana, participei da fundao de um Clube dePesca de Praia, e um tempo depois sentimos anecessidade de ter um site do Clube. A sugestoimediatamente acendeu uma luz de alerta no meucrebro que me dizia que seria um bom desao criarum site para o Abissal Clube de Pesca. E foi assimque tudo comeou. Comecei a pesquisar na Internetsobre como criar um site. Descobri o FrontPage e osite foi criado e hospedado em um servidor gratuito,o que era muito comum naquela poca.

Sabe aquelas crianas que ganham um carrinhocom controle remoto, cam fascinadas, brincampor trs dias sem parar e enjoam? A maioria de-las abandona o brinquedo, enquanto algumas sefecham no quarto e, s escondidas, desmontam ocarrinho para ver o que tem dentro e o que os fazfuncionar. Eu, com meus quase 70 anos ainda sou

a criana que desmonta o brinquedo. Comecei ainvestigar o FrontPage para descobrir o que fazia osite aparecer em toda sua grandiosidade na tela

do computador. Foi meu primeiro contato com ocdigo fonte e a HTML.

Descobrir que todo aquele colorido e formataoque era visto na tela tinha sido criado com linhase mais linhas de texto foi motivo de uma euforia in-

tensa. Era uma fonte valiosa e grandiosa de estudo.

Minhas pesquisas subsequentes, durante dois

anos, me levaram ao site do W3C, a conhecer asCSS, 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 eCSS, e no nal adquiri um conhecimento avanadosobre CSS. Constatar que no Brasil ainda se usa-vam tabelas em detrimento da dupla HTML e CSSpara construir layouts web me levou a questionarsobre o valor que meu conhecimento tinha se elecava restrito ao meu HD.

Em 2003, j aposentado, com lhos criados e rea-

lizado prossionalmente, minha experincia de 30anos de magistrio falou mais e resolvi criar o sitemaujor.com, cuja proposta inicial era divulgar e en-sinar como criar sites com CSS. O site acabou setornando uma referncia nacional e at hoje tenhoum carinho muito especial por ele e pelo Blog doMaujor (aujor.co/blog), que foi criado depois.

Minha proposta hoje a mesma que eu tinha em

2003, ou seja, ensinar desenvolvimento front-end

para iniciantes. O assunto que se tornou um pou-co mais ambicioso, pois no est restrito somentes CSS, abrangendo outras tecnologias do W3C,os chamados Padres Web.

Rim:Voc sempre impulsionou a adoo do CSSno Brasil, acompanhando o crescimento dessa lin-guagem e da comunidade. Como voc resume aevoluo da CSS nos ltimos nove anos?


11/72

11

maujor: Se voltarmos nove anos atrs estare-

mos em 2004, quando meu site completava seuprimeiro ano de vida. Me lembro muito bem quequela poca layouts com tabelas dominavam odesenvolvimento front-end no Brasil, assim comoos navegadores IE5.5 e IE6 dominavam o merca-do de navegadores.

Eric Meyer era o nosso maior mestre, o verdadei-ro guru mundial das CSS. Seu livro Eric Meyer onCSS era um clssico e ele comeava o livro ensi-nando como transformar um layout em tabelas emum layout CSS, mostrando as regras CSS capa-

zes de destacar as tabelas e clulas de um layoutexistente, com a nalidade de visualizar a estruturado site e facilitar sua migrao para as CSS. Hoje,essa uma funcionalidade nativa na maioria dasferramentas de desenvolvimento incorporadas aosnavegadores e que se destinam a destacar no so-mente tabelas, mas qualquer elemento da marca-o com uso de cores personalizveis.

No Brasil, foi por volta de 2007 que as CSS co-mearam a ser usadas em larga escala. De l parac, evolumos de um comeo com folhas de esti-los recheadas de hacks CSS para fazer as coisasfuncionarem no IE6 at os fantsticos efeitos desombreamento, gradientes, transformaes, ani-maes etc. que, aliados aos polyls que proliferamaos borbotes, colocou disposio dos desen-volvedores todas aquelas funcionalidades.

Em 2009, com o navegador IE7 predominandono mercado brasileiro e a consequente sada doIE6, foi decretada a morte denitiva do ento fa-migerado box model quebrado. Foi um pequenoprimeiro passo em direo a navegadores InternetExplorer mais aderentes aos padres web, como o atual IE10.

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

xos proprietrios, e as CSS j consolidadas no

Brasil, o desenvolvimento de interfaces fantsticascom uso das CSS tornou-se uma verdadeira febreentre desenvolvedores.

Especicaes do W3C em fases que mal tinhamsado do status de rascunho de trabalho comea-ram a ser implementadas em um navegador ou ou-tro com uso dos perniciosos (ou utilssimos?) pre-xos proprietrios. Comeou e estamos (re)vivendouma velada guerra dos navegadores.

Resumindo, posso armar que samos de um mun-do cheio de hacks para um navegador e entra-mos em um mundo repleto de prexos proprietriospara vrios navegadores.

Eu pergunto: isso bom ou ruim? Minha con-vico que a resposta pode ser muito bom oumuito ruim, dependendo do balano nal dosprs e contras da implementao dos prexos pro-prietrios. E voc? J parou para reetir sobre essaquesto? Ou usa indiscriminadamente prexos epolyls sem medir consequncias?

Rim: O que voc acredita que ser possvel fazer

com CSS em alguns anos, que ainda no conse-guimos hoje?

maujor: No incio da dcada passada duas pre-missas relacionadas ao desenvolvimento front-endtransfomaram-se em verdadeiros dogmas e foramrepetidas at a exausto em blogs e matrias espe-cializadas por todos os autores envolvidos com ospadres 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, ta-manhos, fundos, etc.) e JavaScript para comporta-mento. Eram as famosas trs camadas do desen-volvimento front-end.


12/72

Em 2009, o W3C decretou o m do Grupo deTrabalho para desenvolvimento da XHTML2, apsTim-Berners Lee ter admitido que a tentativa de

transformar a linguagem de marcao HTML emuma linguagem compatvel com a XML tinha falha-do porque os navegadores no aderiram novatecnologia. Todos os esforos a partir de entose voltariam para o desenvolvimento da HTML,com o W3C juntando-se ao Grupo WHATWG nodesenvolvimento da HTML5. Caia uma das pre-missas: a XHTML j no era mais a linguagem demarcao do futuro.

As funcionalidades das CSS3, desde os seus pri-meiros rascunhos de trabalho, j apontavam parauma tremenda ingerncia na camada de compor-tamento. E hoje comum falar-se em CSS substi-tuindo 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, relacio-nadas criao de layouts complexos com osMdulos para Grids, Regies e novas funciona-lidades de posicionamento.

Alm disso, a criao de efeitos, ltros e mscaras; ouso dos chamados seletores avanados do nvel 4;a denio de variveis para propriedades e valoresCSS em substituio aos atuais pr-processadores,tais como LESS e SASS. As funcionalidades paradesign responsivo, cujo primeiro passo j foi dadocom o lanamento do Rascunho de Trabalho doW3C para o Mdulo CSS Device Adaptation, emsetembro de 2011, e do Mdulo Media Queries

Level 4, em dezembro de 2012. Tambm a criaode efeitos em imagens e a possibilidade de se servirimagens de acordo com o dispositivo do usurio.

Essas so, repito, funcionalidades j em estudo noW3C e, baseado em tudo que tenho lido, eu no

arriscaria um palpite sobre o que vir no futuro. Pa-rece-me que tudo ser possvel. Resta apenas saberse os fabricantes de navegadores esto dispostos aimplementar o que est sendo criado no papel.

Rim: O que voc considera mais difcil de aprenderhoje na escrita CSS para quem est iniciando?

maujor: Dentre as funcionalidades das CSS3 queeu considero menos fceis de aprender esto osgradientes e as funcionalidades previstas nos m-dulos para criao de layouts.

Dito isso, quem est comeando precisa entender

que em CSS nada colocado em desuso ou caobsoleto, nem propriedades, nem valores e nem e

principalmente a sintaxe CSS. Se voc resolver es-tudar CSS1, nada do que aprender ser descarta-do ou deixar de funcionar quando voc conhecerCSS3 e desenvolver com seu uso. A sintaxe CSS extremamente simples e se resume a uma s linha:

Declarando um seletor e a ele aplicando proprie-dades CSS e um dos seus possveis valores, vocmanipula toda a estilizao, o posicionamento acriao de layout.

Se voc no conhece nada de CSS, meu conselho comear com as CSS2. Esse primeiro dia de es-tudo e prtica vai lhe dar uma pequena amostra doque as CSS so capazes, e mais do que isso, vaimotiv-lo a aprofundar os estudos.

Com somente um dia de estudo voc aprende

algumas poucas propriedades, seus valores pos-sveis e como inserir uma folha de estilos em umdocumento HTML. Com isso, voc j ter condi-es de denir cores de fundo e de textos, tama-

12 > Entrevista Maujor

seletor { propriedade1:valorA;

propriedade2:valorB; ... }


13/72

nhos e tipos de fontes, criar bordas, efeitos em linkse algumas outras possibilidades de estilizar. Comum pouco mais de estudo e nenhum esforo ex-

tra voc vai conhecer os fundamentos das CSS,tornando-se familiarizado com propriedades e va-lores CSS, sempre complementando a teoria coma prtica. At aqui, tudo vai uir e acontecer commuita facilidade e sem transtornos.

A primeira diculdade que voc ir encontrar com relao s funcionalidades de posicionamen-to de elementos na pgina. Essas funcionalidadesso a chave para criao de layouts. Dediquetempo, estudo e muita prtica para entender po-sicionamento relativo, absoluto e principalmente

utuao de elementos.

Vencido isso, voc dever estar em condies decriar layouts xos de duas, trs ou mais colunas.Continue com layouts uidos, que no so difceisde aprender. Voc est pronto para as CSS3 e ago-ra os desaos so maiores e mais complicados,contudo o grau de diculdade do aprendizado bem menor do que aquele exigido para aprenderuma linguagem de programao.

Rim: Nos ltimos dois anos muito tem se falado so-

bre a importncia do CSS para mltiplos dispositi-vos atravs da utilizao de media-queries. Comovoc v isso? Acredita que seja uma soluo queveio para car ou paliativa?

maujor:Acredito que veio para car e no semmritos que media-queries um dos trs pilaresde sustentao do desenvolvimento web respon-

sivo, ao lado de layouts uidos e mdias exveis.Atualmente, em se tratando de desenvolvimento

web, no h mais sentido em se criar um site ouaplicao no responsiva, o que torna media--queries indispensvel, devendo ser uma das fun-cionalidades muito bem estudadas e entendidaspor desenvolvedores.

Contudo, quero registrar que, no comeo do msde abril, Ian Storm Taylor publicou um texto beminteressante contestando o valor de media que-ries e sugerindo uma funcionalidade que denomi-nou de element querie, destinada ao uso cdi-go modular em design responsivo. Recomendo aleitura em bit.ly/14RNW8r.

Rim: Dentro da complexidade da CSS para criar

estruturas, existem muitos atributos e tcnicasque esto surgindo para diagramao, entre elaso Template Layout Module (w3.org/TR/css3-layout/) e o Flexible Box Layout Module (w3.org/

13

TR/css3-exbox/). Como voc v esses mdulosemergentes? Isso vai inibir, de alguma forma, autilizao de oat e inline-block para diagramao?

maujor:Vejo com bastante otimismo no somenteos Mdulos citados como todos os Mdulos desti-nados criao de layouts e posicionamento. Semdvida eles iro facilitar, e muito, o trabalho de cria-o de layouts, mas acredito que a propriedade o-at e o valor inline-block continuaro sendo usadose tendo sua utilidade.

Rim: Muito se fala sobre a substituio da anima-

o em Flash pela CSS, muito por causa do CSStransition e animation, e mais ainda com a apos-

ta da CSS4 com CSS shaders. Voc realmenteacredita que haver essa substituio? A CSS a melhor linguagem para evoluir dentro desseambiente de animao?

maujor:As CSS isoladamente no substituiro o

Flash e nem so a melhor linguagem para subs-tituir animaes.

So algumas das tecnologias da chamada OpenWeb, ou Padres Web Abertos, que quandocombinadas permitem ao desenvolvedor criar v-rios efeitos e interfaces interativas, que historica-mente eram projetadas com uso do Flash. Dentretais tecnologias eu destaco HTML5, CSS3, SVG,WebGL e JavaScript.

Por exemplo: os novos elementos video e audio da

HTML5 permitem que lmes e udio sejam incor-porados em uma aplicao web sem necessidadedo uso de plugins para faz-los funcionar. E assim com outros efeitos do Flash que j so possveis dese reproduzir com uso daquelas tecnologias.

Acredito que o movimento em direo a uma web

aberta, e em consequncia livre de padres proprie-trios. Assim, coerente que eu acredite tambm nasubstituio do Flash por tecnologias abertas.

Essa a minha viso. Contudo, a Internet est repletade artigos e matrias que discutem o assunto CSSversus Flash. As opinies so divergentes e no hum consenso sobre o assunto. Na maioria das vezesa discusso acaba se transformando no confrontotecnologias proprietrias versus padres abertos.

Remy Sharp, um consagrado autor ingls, escre-veu um artigo a respeito desse assunto que de-monstra muito bem quo polmico isso . A reade comentrios foi fechada pelo autor, trs mesesdepois da publicao, devido grande confusogerada. Leia em: bit.ly/cODapZ.


14/72

Rim: Nos anos 2000 era difcil trabalhar com fra-meworks e cdigos de terceiros padronizados. Hojeem dia est bastante fcil e at cmodo encontrar

frameworks que agilizem e automatizem o seu tra-balho de desenvolvimento. Como voc v a utiliza-o de Grids prontos e Frameworks em geral?

maujor: Vejo com reservas, mas no descartoseu uso.

incrvel a quantidade de frameworks e bibliote-cas disposio dos desenvolvedores. E, no somente a diversicao de assuntos, mas tam-bm a sobreposio de mesmos assuntos. Arestrio que fao ao uso de frameworks e biblio-

tecas diz respeito ao superdimensionamento dosmeios de desenvolvimento.

Tornou-se comum, pois bastante fcil e at c-modo encontrar um framework que agilize e auto-matize o trabalho de desenvolvimento e adotar essa

soluo sem avaliar as consequncias do seu uso.Na prtica, no raro encontrar sites importando abiblioteca jQuery somente para fazer funcionar ummenu dropdown. Com mnimo esforo algum po-der obter efeitos de alto impacto visual sem saberabsolutamente nada da linguagem JavaScript.

Em resumo: usar frameworks ou bibliotecas paradesenvolver uma deciso que exige um estudoapurado, envolvendo no somente facilidade eagilizao do processo, mas tambm desempe-mho, performance, pertinncia e caractersticasgerais da interface.

Rim:Voc conhecido por todos carinhosamentecomo Dinossauro da CSS. Voc uma pessoaque inspira os outros. Quem, ou o que, te inspira?

maujor: Na verdade no existe um quem me inspi-ra, mas certamente existe um o que. Eu comecei narea web com o objetivo de vencer um desao que

eu mesmo me propus. Acumulei conhecimentosque julgava muito valiosos para deixar guardado nomeu HD e resolvi compartilhar os conhecimentos.

O professor que existe em minha alma continuaolhando para os meus leitores e para aqueles que

seguem o meu trabalho como alunos vidos porconhecimentos. Certamente o que me inspira ocompartilhar conhecimentos.

Rim: O que voc acha da proposta do Schema.org, uma iniciativa dos principais mecanismos debusca para melhorar a semntica dos contedosna web? Mesmo no sendo uma iniciativa daW3C, valido que os desenvolvedores implemen-

tem em seus projetos?maujor: Permita-me uma explicao bem sim-ples e sem entrar em consideraes tcnicassobre microdata.

A HTML5 deu forte nfase marcao semntica.Os elementos da linguagem tm sua semnticabem denida e retratam com preciso a naturezados contedos.

Microdata um mecanismo destinado a fornecerinformaes semnticas adicionais sobre o con-

tedo. Esse mecanismo usa pares atributo/valorpara adicionar semntica. um mecanismo queextende a HTML5.

Contedos lidos por humanos so interpretados

dentro de um contexto e entendidos sem proble-mas, mas mquinas no so capazes de interpretarcontedos. Por exemplo; para um humano a frasea manga da camisa verde no deixa dvidas,contudo uma mquina no saber se a referidamanga uma fruta ou no. Esse simples exemploilustra a necessidade de se dizer para mecanis-

mos de busca (mquinas) que manga no fruta.Para se dizer isso usamos microdata, que umaespecicao do W3C.



15/72

Para fornecer a informao semntica para as m-quinas, a sintaxe microdata remete a mquina paraum URL no qual est explicada a semntica docontedo marcado. Ser que existe um URL expli-cando a semntica para a palavra manga?

Os principais mecanismos de busca, liderados peloGoogle, implementaram o que foi denominado deRich Snippets, uma ferramenta destinada a for-necer URLs para explicar semntica e ser usadacom microdata, microformats e RDFa. Em 2011, oGoogle abandonou o projeto em favor do Schema.org, que seria focado somente em microdata.

Ento, Schema.org nada mais que um servio on-line que fornece URLs destinadas a explicar a se-mntica de contedos com uso de microdata. um

servio que extende a HTML5. Qualquer companhiapode criar seu URL, com explicao de semnticapersonalizada para ser usada com microdata.

Portanto acho vlido e recomendo o uso do servioprestado por Schema.org.

Rim: Seus livros ajudam a guiar milhares de brasi-leiros pelo desenvolvimento front-end, mas de onde

nasceu a ideia de escrev-los? Qual a sua inspirao?

maujor: No ano de 2005, com meu site j era razo-avelmente conhecido na comunidade de desenvol-

vimento. Eu comecei a receber vrios e-mails solici-tando que transformasse os tutoriais do site em um

livro. Respondia a esses pedidos agradecendo pelaideia e argumentando que no me sentia confort-

15

vel em transformar um contedo disponvel gratui-tamente no site em um livro pago.

No queria me afastar da proposta inicial, de com-partilhar conhecimentos usando o site, e at hoje

penso da mesma forma. Foi a poca do nascimen-to dos blogs e naquele mesmo ano criei o Blog doMaujor, como uma forma de ter mais um canal decomunicao com meus leitores.

Contudo, a ideia de escrever um livro, nascida dassugestes dos meus leitores, comeou a provocarmeu crebro que se alimenta de desaos. Passeium ano com a ideia de escrever um livro na cabe-a e em novembro de 2007 foi lanado o Cons-

truindo sites com CSS e (X)HTML. A expectativaera muito grande e a aceitao foi muito maior do

que a esperada. O livro foi um sucesso to gran-de que eu no parei mais de escrever, e esse anopretendo lanar meu dcimo-primeiro livro, sobreDesign Responsivo.


16/72

16 > Criatividade Tecnolgica

Interfaces vestveisPor @senhoritalina

Mas o que vem a ser essa talinterface e por que discuti-laaqui? Buscando o auxlio deum dicionrio qualquer, nos

deparamos com uma defnio

que nos interessa: interface a mediao entre mquina

e homem via uma relaosemntica, a metfora. Diante

de um computador, quase noh dvidas de como utiliz-lo,

a rea de trabalho se chamadesktop, e nela normalmente

fca o desenho de uma lixeira e

de arquivos ou pastas - ou seja,praticamente igual a qualquer

escritrio anterior ao usogeneralizado do computador.

Steve Jobs chegou ao cu e viu aquele azul lindocom nuvens claras, aquele gramado muito verde eexclamou: F***, estou no Windows!. Comentrios

irnicos da Internet parte, a fora desse gracejoest na familiaridade que o usurio de um compu-tador tem com as interfaces grcas mais utilizadase com os seus grandes empresrios.

A interface est ligada a um aprendizado, possuialguma familiaridade para, no mnimo, gerar uminteresse para si. No entanto, tambm institui mu-danas em sua prpria estrutura. E, ao m, umaboa 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 salvarum documento deixe de ser um disquete, mesmoquando hoje se usa um pendrive?

claro que a interface e suas metforas no soum privilgio apenas do computador, esto pre-sentes em todas as outras mquinas, dispositivos

e invenes humanas, como culos, cadeira, livro,carro, autofalante, relgio, celular etc. A cada in-veno, mantm-se uma relao semntica coma tecnologia anterior e implementa-se uma nova.

A primeira metfora o corpo humano. Um desa-

o aos designers: de quantas maneiras possvelfazer culos ou uma cadeira? Ao nal, as pessoasvo preferir usar os culos ou a cadeira que foremconfortveis, em que no se notam as horas deuso, ou seja, que sejam invisveis ou transpa-rentes. Estas so as caractersticas que se espe-ram tambm de mquinas mais complexas, comotelefones e cmeras: levar o dispositivo orelhaou ao olho, apertar o boto e esperar. Algumasinterfaces so to bem-sucedidas em transformarseus controles em algo intuitivo para o usurio queseus comandos somem, sendo completamente

assimilados. Por vezes, a usabilidade to gran-de que h aparelhos telefnicos para decientesauditivos e cegos que conseguem fotografar, ape-sar da falta de viso.


17/72

Segundo o terico e escritor Steven Johnson (reco-mendo muito a leitura de seu livro Cultura da Interfa-

ce, Editora Zahar, 2001), cmeras fotogrcas somquinas de processos mecnicos que mostramrepresentaes como produto nal, j um compu-tador depende do seu poder de se autorepresentar

para o usurio, de transformar todos os pulsos el-

tricos e seus algoritmos matemticos em algo quefaa sentido ao interator. Por isso, um computadorseria uma mquina simblica. Creio que esse pen-samento resume bem a importncia de discutir oassunto interface aqui. Contudo, optamos por umrecorte muito especco de interfaces, as vestveis,conhecidas tambm como wearable computers.

Integrao entre corpoe tecnologiaBoa parte das pessoas conhece e fez uso de al-gum dispositivo eletrnico anexado ao corpo. Pa-gers, bipers, walktalkies, walkmans, tamagotchis,celulares ou relgios. Esses aparelhos so bonsexemplos 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 informaessobre as horas ou mensagens de texto ou barulhi-nhos de tenho fome. uma interface integradaao corpo capaz de processar dados recebidos egerar informao, banco de dados e rede. Almdisso, essas vestimentas esto aptas a incorpo-rar o processo de comunicao de forma direta einstantnea.

Para facilitar, vamos estabelecer pequenas catego-rias de interfaces vestveis: as mobiles, as txteis eas implantadas. As primeiras possuem um grandeespectro na evoluo dos wearable computers eutilizam, como referente de uso, dispositivos comorelgios e culos. As segundas so os propriamen-

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 lava-gem!). J as terceiras, como diz o nome, so im-plantadas no corpo, como os ciborgues, na cocientca.

A primeira linha de vestveis disponveis no mercadoest interessada em medir sua qualidade de vida,

como o Sensor Nike+ para ser usado durante a suacorrida, ou o UP da Jawbone, uma espcie de re-lgio de pulso que registra seus dados 24h - almdas atividades fsicas, monitora seu sono, o que

come ou bebe, e bipa quando voc est inativo pormuito tempo. No caso, o tamagotchi voc. Almdeles, h o Myo, que capaz de medir a atividadeeltrica dos msculos e processar esse dado paracontrolar outros dispositivos, como seu computa-dor ou videogame.

Este ltimo um pouco mais inovador do ponto devista da interface, mas no tanto quanto o projetoSixthsense que o pesquisador Pranav Mistry de-senvolve no MIT. Mistry comeou sua pesquisa huma dcada, justamente interessado na interface

por gestos. Seu objetivo inicial era levar os objetosfsicos para o mundo digital: escrever post-its e ra-pidamente essas informaes estarem sincroniza-das com seu computador, ou colocar seu bilhetede avio sobre o computador e ele reconhecer epassar as informaes do voo, por exemplo. Foiquando ele percebeu que as pessoas no estointeressadas em computao, mas em informa-o. Ento, Mistry props o Sixthsense pensandoo contrrio, em que voc pode levar seu mundodigital para onde voc for e usar qualquer superfciefsica como interface.

Consiste basicamente em uma cmera penduradano pescoo e um projetor. A cmera identica osmovimentos dos seus dedos, ou os objetos que

17


18/72

voc est carregando, e gera a interface projetadaem qualquer superfcie, seja uma parede, sua mo,uma folha de papel. Essa projeo pode conter in-

formaes sobre o livro que voc est segurando,como suas ltimas crticas, ou informaes sobreo tempo atualizadas, quando se est diante delas

lendo o jornal, por exemplo. O dispositivo aindapermite que se manipule, alm dos objetos, os pr-

prios dados da projeo, sendo possvel escolhermais informaes sobre o tempo, ou jogar pong nocho do metr. Segundo ele, o Sixthsense foi fei-to para nos ajudar a nos manter mais conectadoscom nossa humanidade e com o mundo real, a nocarmos xos na cadeira, como mquinas diantede uma mquina.

Sixthsense personica dois conceitos muito impor-tantes para as interfaces mais inovadoras e mesmofutursticas, quais sejam, realidade aumentada e vi-so computacional. Computer Vision ou computa-o visual, como cou a traduo do termo no Bra-sil, est ligada a pesquisas e estudos que tornamo computador capaz de processar uma informaoa partir de uma cmera, como se ele fosse capazde enxergar, comparar e identicar informaes vi-suais e, ento, processar escolhas. J a chamada

Augmented Reality adiciona grcos, sons e outrasinformaes processadas digitalmente ao mundofsico, usando uma tela como suporte dessa ex-panso.

Outro pesquisador interessado na realidade au-

mentada que essas interfaces so capazes degerar Steve Mann, um pesquisador, inventor eatualmente professor na Universidade de Toronto.Ele tem se dedicado, h mais de 35 anos, a pro-

jetar, construir e usar wearables computers comviso computacional. Em sua vida aumentada,como tem chamado o fato de usar suas prpriasinvenes h anos, Mann passou por experinciasmuito curiosas usando seus aparatos. Em umadelas, quando um carro bateu na sua casa, ele foiconversar com o motorista, que deu r e passou

por cima do seu p e o derrubou no cho, que-brando seu sistema de viso, o EyeTape, parecidocom um culos. O motorista fugiu. Mas, apesar de

o aparelho estar danicado, foi possvel recuperaras imagens do sistema em que havia a placa docarro do fugitivo.

Outro episdio, recente e polmico, aconteceuna Frana, no ano passado. Segundo seu rela-to, foi intimidado sicamente pelos funcionriosdo McDonalds da Champs Elysss. Mann andacom uma documentao mdica armando que oEyeTap (em sua quarta gerao) preso de modoespecial a sua cabea e necessita de ferramentaspara retir-lo. Ou seja, parece um culos, mas no

tem a mesma usabilidade, tampouco a mesmafuno. Mas, nessa loja do McDonalds, proibidolmar ou fotografar. Ele apresentou o documento,quando um funcionrio tentou arrancar-lhe os cu-los. Ainda assim, segundo Mann, eles destruram odocumento. Para quem quiser acompanhar melhora discusso, acesse o blog do pesquisador (citadoao nal do texto). Alm dessas histrias, possvelacompanhar o pensamento de Steve Mann sobreo impacto, a importncia e o uso de pequenos sis-temas de vigilncia pessoal.

Alm do Eye Tap, o Google Glass tambm umculos. Contudo, mais prximo de um assistentepessoal do que os dispositivos de Mann, ou os de

Mistry. Seu grande mrito est na popularizaodesse tipo de tecnologia e de como ela pode pro-cessar as informaes importantes, as memriasafetivas de modo muito prximo de como de fatovemos o mundo sem necessariamente sairmosdele para tirar uma foto ou compartilh-la.

Passando para a prxima categoria, as interfacesliteralmente vestveis, possvel encontrar jaquetascom sistemas de iluminao, como a Light Jacket,lanada pela Triumph, ou painel de leds integrados,como a Jacket Antics do Studio subTela. Quem

18 > Criatividade Tecnolgica


19/72

Lina Lopes graduada no curso superior deaudiovisual 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, espaocnico, linguagem da fotograa, do vdeo e dasartes&tecnologias. [email protected]

19

mais tem se apropriado das possibilidades dos tx-teis so os fashionistas e performers da arte e tec-nologia. Principalmente depois do lanamento doLilyPad, uma verso de arduno feita para costura,com sensores muito pequenos e linhas e tecidoscom capacidade condutiva. Ainda est sub-utiliza-do no mercado brasileiro toda a real potncia queesse kit faa-voc-mesmo pode possibilitar.

E, por ltimo, chegou a vez dos implantados, dapele para dentro do corpo. O Wireless Tattoo Elec-tronics, como cou conhecido, o trabalho depesquisa do Bioengenheiro Todd Coleman. Essescircuitos eletrnicos so como tatuagens de chi-clete, totalmente exveis, que se adequam ao mo-vimento da pele. Foram inicialmente criados paramonitorar a atividade cerebral, mas Coleman apos-ta tambm em seu potencial social e de diversoem interaes prximas telepatia.

Mais ousado e alm da nossa realidade de produ-

o (segundo os prprios idealizadores) o projeto-

-conceito MIBEC, de James Auger e Jimmy Loize-au. um implante dentrio que visa a revolucionara comunicao pessoal. Seria como receber umamensagem ou telefonema diretamente dentro dasua cabea por meio da ressonncia do osso dasua mandbula para o seu ouvido interno. Imagineum indivduo andando com isso na Av. Paulista, su-

jeito a todas as interferncias eletromagnticas daregio. Ele literalmente ouviria vozes na sua cabe-a. E bluetooth rapidamente seria considerado umador de dente.

Anal, o que todas essas interfaces, independen-temente das suas categorizaes, tm em comum a absoro da tecnologia junto ao corpo paramanter um uxo constante de informao ao longo

do tempo, de modo a agilizar a comunicao e astomadas de deciso. Seria como uma extenso dopensamento humano auxiliado por essas interfa-

ces, um crebro expandido. Curiosamente, nossotexto comeou falando do corpo como metforapara as primeiras invenes e aparatos tecnolgi-cos e agora, no desenrolar do argumento, essesdispositivos querem voltar ao corpo. Os desaosso os mesmos de antes do ponto de vista do de-

sign de interface: a transparncia da tecnologia

o grande parmetro de sua usabilidade. Para isso,devem contar com desenvolvimento em biomim-tica, portabilidade e alimentao por baterias dedurao quase innita, ou que se utilizem de fontesrenovveis. Ainda veremos muitas mudanas nosculos e nas cadeiras que esto por vir.


20/72

20 > Presena Digital

Antigamente, quando havia menos barulho nas ci-dades e mais rvores e mais pssaros, voc podiaouvir 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 fami-gerado fone de ouvido tornaram um canto de pas-sarinho indiscriminado. Dizemos apenas tem umpssaro cantando, mas no fazemos ideia de queespcie ele seja, desaprendemos ao longo do tem-

po a conhecer e identicar seus cantos.

Este artigo no sobre pssaros, embora eu gostemuito deles soltos por a. Mas foi necessrio es-crever esse prlogo para que voc entenda que,por desconhecimento da identicao correta dostermos, assim como acontece com os pssaros,vamos usar a palavra dilogo para dar conta deuma variedade de discursos com estratgias muitodiversicadas nesse jogo que a comunicao.

Toda vez que aparece um novo meio de comuni-cao - e essas ferramentas cada vez mais estovinculadas tecnologia - os olhos do mercado sevoltam violentamente para ele, em busca de novasformas de dilogo com a audincia. So tentativasde se fazer presente, de constar na lista dos pri-meiros adeptos, de chamar a ateno do pblico.Mesmo que isso conduza a estratgias fracassa-das, como os investimentos que muitas marcaszeram no Second Life. Como no conhecemosexatamente os efeitos daquele novo meio, no po-demos prever a eccia 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, asmdias antigas so naturalmente conduzidas a umaadaptao de seus dilogos, o que acaba por forjarsua linguagem. Como a televiso: ela se apropriou

inicialmente da linguagem do rdio at criar suaprpria e agora, com a Internet, ela vem se recon-gurando cada vez mais para interagir e explorar opotencial dos novos meios digitais.

H uma enorme diversidade de formas de dilogona rede hoje: mltiplas oportunidades de utiliza-o, centenas de canais na televiso, milhares derevistas nas bancas, milhes de blogs na Internet,e o consumo simultneo das mdias. Esse caos doexcesso de informao conduz a um cenrio de in-certezas em que permanece a questo: como cha-mar a ateno para uma mensagem se os modelosesto quebrados?

Conquistar a ateno das pessoas to importanteque se tornou um modelo de economia e, conse-quentemente, muitas empresas precisaram mudara forma como operavam seus departamentos decomunicao e marketing e repensar nas maneirasde dialogar, questionando-se sobre como criar umdilogo mais direto e denir os arqutipos de umaclientela to plural em identidades.

Talvez seja mais fcil comear usando exemplosque todos conhecem de marcas que no dialoga-ram em tempo suciente, como a Dell e a United

Airlines. Elas aprenderam com o caso Dell Hell/Idea Storm e United Breaks Guitars que o siln-cio no uma opo na rede.

O contedo corporativo no pode mais ser sim-plesmente replicado na Internet. Ele deve ter umalinguagem prpria, estruturada de acordo com aaudincia e que seja capaz de promover efetiva-

mente o dilogo. Como no caso da Lego, que usouum discurso eciente e adaptado ao seu audit-rio e ganhou notoriedade. O menino Luka Apps,de 7 anos, havia economizado para comprar umkit de bonecos, perdeu um deles num passeio ao

Os novos dilogos na era da economia da ateno


21/72

21

shopping e foi orientado pelo pai a escrever paraa fabricante de brinquedos. Considerando a fan-tasia correspondente a sua idade, a resposta quelhe foi enviada fugiu completamente dos padresdos dilogos institucionais. Primeiramente, porquea pessoa que lhe escreve diz ter consultado umdos lderes da coleo de bonecos para saberse poderia enviar outro, uma vez que o gerente deatendimento ao cliente no poderia faz-lo, j quea responsabilidade era do menino. E o lder, alm

de consentir, d uma srie de conselhos de con-duta para Luka. Depois, porque o dilogo envolveuuma pessoa do outro lado de Luka, o Richard,representando um departamento, e no por umDepartamento. Essa histria j rodou o mundo, ea Lego conquistou respeito pela sua atitude.

Nem todas as empresas esto prontas para man-terem dilogos com todos os seus clientes, issorequer investimentos e abertura. Muito menos numnvel to personalizado, como fez a Lego. Mas aautonomia de pensamento e ao dada aos con-sumidores vem pressionando as empresas para

buscarem por meios adequados em que se possacultivar o dilogo.

Foi o que aconteceu com a maionese Hellmanns,que mudou o discurso de comunicao para sa-lientar os aspectos saudveis do produto. Paraisso, foi criado um comercial na televiso e umawiki receitas: a Recepedia.com. A enciclopdia dereceitas foi criada pela Unilever e mantida porseus mais de trs mil consumidores cadastradoscom seis mil receitas compartilhadas em outrasredes todos os dias, criando uma inteligncia as-sociada. No a marca que diz o que se deveconsumir, mas sim os consumidores.

Isso indica que talvez no seja necessrio aderir atodas as novidades em termos de relacionamento

que a Internet prope. O que parece obter melhorresultado a escolha, entre as possibilidades, domeio que melhor dialoga com a audincia, ou deum dilogo complementar que se sustente em v-rios meios. Foi essa a estratgia do Ponto Frio nofamoso twitter do Pinguim, a simptica gura queanuncia seus produtos e enquetes enquanto brincacom a sugesto de almoo e sai correndo do tra-balho para ir natao. O dilogo se desloca datradio institucional e mantido de forma casual,

irreverente, apropriada linguagem do meio.

Como podemos ver, nesses e em outras centenasde exemplos, as empresas querem - e precisam -marcar seus territrios na rede na era da econo-mia da ateno. A diferena como utilizam cadameio para comunicar seus interesses. Cada situa-o exige uma linguagem, e a pluralidade do digitalconduz automaticamente a mensagem a outrosmeios. O que faz com que as empresas alcancema ateno de suas audincias parece no residir naadeso aos novos meios, mas sim na potncia emencontrar a melhor forma de dilogo usando a di-

versidade dos novos meios.

Para nalizar, vamos usar novamente a analogiados pssaros: voc no precisa de um viveirocom muitas espcies e cantos distintos para serouvido. Provavelmente isso seria uma algazarra.

Voc precisa apenas de um Ti-Sangue com umgorjear melodioso e trissilbico, que as pessoaspossam repetir.

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

Por @anaerthal


22/72

22 > Capa

o_futuro__agora

Por @lufreitas, para @iMasters


23/72

Ento aconteceu o SXSW - South by Southwest, evento que fala sobretendncias e futuro, que aconteceu em maro, nos EUA. O encerramen-to fcou por conta de Bruce Sterling, escritor de fco cientfca norte-americano, que observou que os computadores morreram. (Voc podeouvir a gravao aquihttp://bit.ly/ZslHYF).

Em seu discurso, Sterling mostrou que a dis-rupo pela disrupo em que vivemos esva-zia os sentidos e no leva a nada ele alin-

hava imagens fortes com a ebulio de hoje.Ao comparar nossos avanos com a civilizaoque simplesmente saiu de sua cidade cuida-dosamente 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 se-quncia, decretou vrias mortes, alm do com-putador: dos blogs, da literatura, dos livros.

Sim, exatamente isso que voc est lendo: os

computadores no deram as caras nas falas doSXSW 2013, e Sterling decretou a morte deles.Depois dos smartphones, chegam o GoogleGlass e (talvez) o relgio da Apple. E cada vezmais o que se v nos livros dos cyberpunks,a turma de Sterling, tornam-se mais concretosno nosso dia a dia: um computador para ve-stir, interfaces que se integram totalmente aoser humano e ans.

Conversar sobre como as interfaces esto evo-

luindo com Luli Radfahrer, PhD em comunicaodigital (USP-SP), certeza de ser transportado,na velocidade do pensamento dele, a outroshorizontes e muita reexo. Acho que h uma

confuso entre invisvel e desaparecer, diz Luli.A gente no sabe quantas vezes por dia usaa energia eltrica, mas sem ela paramos. Dizer

que o computador vai morrer uma frase deefeito de um homem que j errou. Sterling sem-pre lembra o seu erro de previso sobre a Wiki-pedia que dizia fadada ao fracasso, lembra.

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

Luli continua: Boa parte das coisas que usamosso interfaces: livros, msica, lme e videogames,por exemplo. Sim, esses objetos tendem a de-saparecer. O computador, entretanto, deve carinvisvel. Funcionar de outro jeito. (...) Falta algointeligente como a gente. Temos, hoje, pequenasinteligncias. Ainda falta o eletrnico que aprende.

Segundo Andr Passamani e Cris Dias, da Mu-

tato, que estiveram l no SXSW e ouviram Ster-ling ao vivo, o que nos levar frente exata-mente a experincia e a conversa. O modeloser fazer barato e compacto, em geral. Mas a

23


24/72

regra no absoluta, tem que saber o que estfazendo, disse Cris.

Quem tem 40 ou 50 anos viveu grandes mu-danas. Alm do fax, que todo mundo tinhano escritrio na dcada de 90, j trocaram acoleo de CDs por HDs lotados de msicae hoje fazem backup de arquivos na nuvem.Hoje a gente vai s com o iPad, compra note-book novo, instala Chrome e Dropbox e estpronto para trabalhar, diz Andr.

Andr e Cris reforam que a histria toda como

se projeta a interface: a grande histria umalgoritmo que permita uma conexo mais inteli-gente entre as redes, aprovaes, likes, curtidas.Ideia que Luli tambm tem sobre a evoluo da

interface: mais uma questo de software, algomais inteligente que permita misturar, por exem-plo, busca com bookmarks, diz o professor.

Nas palavras de Luli: Tecnologia como umnibus, as novidades entram e todo mundo seajeita. 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 espe-cialistas em mercado digital, a interface que vaipermitir digitalizar a vida como ns, humanos, apercebemos. Porque se a tecnologia mais valio-sa a memria, como lembra Andr Passamani,todos vivemos a ressaca da hiperconexo.

Falta, ainda, segundo Luli, a funo ftica. A-

nal, para os humanos, tudo linguagem e

essa uma das grandes vantagens cognitivasdo ser humano. Ns compreendemos a lin-guagem natural, isso ainda impossvel com os

eletrnicos, explica.

Com a visualizao de dados, que o GoogleGlass permitir medida que os aplicativosaparecerem, provavelmente as dicas chegarona hora exata. E, claro, cada novo gadget vaiprecisar de tempo para amadurecer e se trans-formar na interface do futuro.

Com tudo isso, tanto Andr Passamani como

Cris Dias concordam. E eles acrescentam: OSterling acerta quando diz que estamos vicia-dos na disrupo. E o grande barato est naconexo. Andr lembra, inclusive, da frase doprprio Sterling que ele traduziu e tatuou: Custacaro ser humano.

Cris Dias acrescenta: tudo isso s faz sentidose juntar pessoas, seno, spam. A gerao daminha lha poder ter mais views no YouTube doque a Xuxa tem de audincia.

Com a palavra, Sterling, nas ltimas frases desua fala, em traduo livre: v alm do fator uau!Ningum tem as mos limpas. Ns matamos.Ns criamos o caos, a disrupo e esvaziamosos sentidos. O sculo XX morreu. Ns matamoso passado com o que zemos. Ns temos quecomer o que matamos. o jeito digno e cora-joso de incorporar o passado a ns mesmos.Assim, podemos usar esse passado para formar

novas coisas. E a fnix poder surgir.

24 > Capa


25/72


26/72

Informaes e dicas sobre

projetos Open Source

26 > Cdigo Livre

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

Por @ale_borba

Web2CanvasEsse aplicativo foi construdo, inicialmente,no Hackathon do Sebrae, na Campus Par-ty #6, onde o desao era criar um aplicativoque empregasse a metodologia canvas paradesenho do modelo de negcios. Totalmen-te web e tendo como tecnologia por trs oweb2py, um framework web em Python, esseaplicativo evoluiu muito e hoje se destacacomo um dos nicos na rea. Para contribuir,voc pode acessar seu cdigo fonte no link:htt://bit.ly/17vwgp8, e o aplicativo podeser utilizado no link: htt://bit.ly/17vwhj.

Bottle um micro framework Python, rpido, sim-ples e leve para web. distribudo de formasimples, como um mdulo single le, e nopossui nenhuma dependncia que no sejaas da Standard Library. Fazer uma API RES-Tful e/ou qualquer outro sistema web simples

ou at mesmo complexo uma tarefa bastan-te simples se utilizarmos o Bottle. Para sabermais do projeto, acesse htt://bottley.org

ownCloud um app escrito em PHP para armazenamen-to de arquivos, sincronizao e compartilha-mento. Mas possvel, tambm, sincronizarcontatos e agenda. Como uma aplicao

open source, voc pode baix-lo e instal-loem qualquer computador/servidor que quiser.Dessa forma, voc sabe exatamente onde osseus dados esto armazenados. Essa alter-

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

FreeNAS uma plataforma para Storage, baseadano FreeBSD, simples, rpida e estvel. Almde uma comunidade internacional compro-metida de desenvolvedores e usurios, ela

conta com muitas facilidades e funcionalida-des que a deixam bem frente das outras.O FreeNAS suporta compartilhamento atra-

vs de sistemas Windows, Apple e unix-like,suporta RAID e, desde as suas ltimas ver-ses, ele incluiu o ZFS, que permite controlede storages de alta capacidade. Para sabermais, acesse htt://www.reenas.org/

Arakoon uma store open source, baseada em cha-ve-valor, que garante consistncia acima de

tudo e voltada especicamente para pe-quenos projetos e que no necessitem demuita segurana. Funciona muito bem paraupdates atmicos e consistncia atravs dasrplicas. No procure o Arakoon se voc re-almente precisa de muita escalabilidade. Maisinformaes em htt://araoon.org


27/72


28/72

28 > Desenvolvimento

um microframeworkde respeito

Por @alganet

Sem dvida o componente mais famoso do Res-pect o Respect\Validation, feito para validar qual-quer informao e, se houver uma falha, indic-la

de forma clara. O Exemplo 1 valida se uma stringtem de 1 a 15 caracteres, somente letras, nmerose o caractere _. Esse o formato de um nome deusurio do Twitter.

Exemplo 1: Validando um nomede usurio do Twitter


29/72

29

Exemplo 3: Obtendo dadosde tabelas de um banco de

dados j existente usando oRespect\Relational


30/72

30 > Por dentro da W3C

O futuro do HTML5: HTML 5.1Por @reinaldoferraz

O HTML5 est a poucospassos de se tornar

recomendao do W3C. Seuatual status, em abril de

2013, era de documentaoW3C Candidate

Recommendation(www.w3.org/TR/html5/).

J estamos familiarizadoscom a grande parte dasnovidades que o HTML5

trouxe em relao a novoselementos, atributos e APIs

para a evoluo da web.Mas que tal dar uma olhada

no futuro? O que esperarpara as prximas verses

do HTML e quais so asideias e sugestes de novos

elementos propostos?

HTML 5.1 Nightlywww.w3.org/htl/wg/drats/htl/aster/

Essa especicao a continuao do HTML5,com revises da linguagem criada pelo W3C.

Nessa verso, novos elementos continuam sen-do adicionados baseados em pesquisas sobre as

prticas de criao predominantes. Uma ateno

especial continua a ser dada denio de crit-

rios de conformidade claros para os agentes dousurio, em um esforo para melhorar a interope-

rabilidade e garantir a evoluo da Web. Em abril

de 2013, o HTML5.1 estava em W3C Editors

Draft, ou seja, ainda um documento que vaipassar por revises.

Existem poucas diferenas ao fazer uma compara-

o direta dessa edio com a documentao atual

do HTML5, mas algumas novidades anunciadas epublicadas nesse draft animaram a comunidade de

desenvolvimento. Importante reforar que, comoesse documento ainda um esboo, essas novi-

dades ainda podem sofrer alteraes.

Um elemento para chamarde mainwww.w3.org/htl/wg/drats/htl/aster/

grouing-content.htl#the-ain-eleent

No nal de 2012, o grupo de trabalho de HTMLdo 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 umelemento principal para agrup-los. Quando surgia

a necessidade de colocar o contedo principal


31/72

em um container, o desenvolvedor utilizava umelemento div para agrupar esse contedo. Oobjetivo dessa incluso dar cada vez mais

signicado aos elementos da pgina.

Pois bem, agora um elemento com esse objetivoest sendo discutido e colocado na documenta-o. O elemento main representa o elemento prin-cipal do corpo de um documento ou aplicao. Sdeve existir um elemento main na pgina, e ele nodeve ser posicionado dentro de outros elementoscomo article, section, nav, etc.

Skates

O Skate uma boa forma de

divertir crianas

Longboards

Longboard um tipo deskate com uma distncia

maior entre eixos e rodas.

...

...

A documentao tambm aconselha os autores depginas a utilizar ARIA role=main no elementoprincipal at que os agentes de usurio implemen-tem essa funo de forma desejada. Importantelembrar que o atributo role foi publicado como re-comendao do W3C em maro de 2013 (www.w3.org/TR/role-attribute/).

...

Tabelas classifcveiswww.w3.org/htl/wg/drats/htl/aster/

tabular-data.htl#table-sorting-odel

O atributo sortable um atributo booleano em ele-

mentos de tabelas. Quando presente, indica que o

agente de usurio deve permitir ordenar a colunaou linha de uma tabela. Por exemplo, para fazer

uma coluna classicvel em uma tabela com um

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

caso de tabelas sem thead, a coluna deve ter oelemento 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 co-luna no for separada com colspan e rowspan.

Ser possvel utilizar dentro do atributo sortable o

valor reversed, para denir a direo da classica-o da tabela quando necessrio.

E o que mais pode vir para asprximas verses?

O grupo de trabalho do HTML est em constantediscusso e recebe diversas sugestes para se-rem includas na linguagem de marcao das pr-ximas verses do HTML. possvel ter uma ideiade algumas propostas no documento proostasde Atributos e Eleentos ara o HTmL (www.

w3.org/html/wg/next/markup/). Existem diversassugestes de novos elementos e atributos, desdeum elemento para reconhecimento de voz at mes-mo um atributo para identicar o download de umarquivo dentro de um elemento de ncora.

Vale lembrar que tudo que foi comentado neste ar-tigo est sujeito a mudanas na documentao eat o momento no foi implementado por nenhum

agente de usurio. Tudo isso parte do constantetrabalho do W3C de garantir a evoluo da web deforma livre, aberta e contando com a participaoda comunidade, no s para a soluo de bugs,mas sugerindo novas funcionalidades para essa lin-guagem de marcao.

Voc tambm pode acompanhar as novidades daevoluo da linguagem de marcao pela pgina doHTmL Woring Grou: www.w3.org/htl/wg/

Reinaldo Ferraz especialista em desenvolvimentoweb do W3C Brasil. Formado em Desenho eComputao Grca e ps graduado em Design deHipermdia pela Universidade Anhembi Morumbi,em So Paulo. Trabalha h mais de 12 anos com

desenvolvimento web. Coordenador do PrmioNacional de Acessibilidade na Web e do Grupo deTrabalho em Acessibilidade na Web e representantedo W3C Brasil em plenrias tcnicas do W3C.NoTwitter @reinaldoferraz

31


32/72

32 > Opinio

Cloud ComputingMuitas das novas tecnologias so baseadas em computao em nuvem e conec-tividade constante. Quais so os problemas e desaos que so gerados com es-sas tecnologias e at que ponto privacidade e segurana esto sendo discutidos?

Cezar Taurion - New TechnologiesManager/Technical Evangelist da IBM

Toda mudana de paradigma acarreta descon-anas e receios. Segurana um deles. Emborase fale muito nos riscos de segurana em nuvens,existem alguns aspectos positivos que merecemateno. Um deles que, no modelo de compu-tao em nuvem, o contedo de desktops, note-books e tablets estar na nuvem, e no nos dispo-sitivos. Ora, como as estatsticas apontam que 1/3

dos problemas de violao de segurana devem-seao uso de informaes obtidas em laptops rouba-

dos, o fato de as informaes estarem nas nuvens

e no mais nos seus HDs bastante positivo.

Outros aspectos positivos decorrentes de uso denuvens, sob a tica de segurana, so que osupgrades de software que corrigem brechas desegurana so feitos automaticamente, alm dauniformidade dos padres de segurana, pois to-dos passam a ter os mesmos padres. No modeloatual, uma grande parcela dos usurios no atua-liza seus softwares adequadamente, deixando os

bugs que permitem vulnerabilidades ainda ativos, eos usurios tambm podem ter mais ou menos re-

cursos de segurana ativos em seus PCs e laptops.

Alm disso, muitos data centers de empresas depequeno a mdio porte (e mesmo de grande porte)no tm bons procedimentos e nem polticas de se-gurana implementados tal como nuvens ofertadaspor provedores de alto nvel, no s procedimentose recursos sosticados e auditados, mas tambmum staff tcnico com uma expertise acumulada quea maiorias das empresas jamais teria. Na minhaopinio, em breve, um dos principais argumentosde venda das nuvens ser exatamente a seguran-a: quer mais segurana? Venha para nuvem!.

Luli Radfahrer - professor deComunicao Digital da ECA-USP

A resposta difcil, j que varia conforme o servioe o tipo de dado. Um servio que armazene senhasou dados contbeis precisa ser muito mais con-vel do que um que armazene tuitadas ou fotos deps e pratos de comida como o Instagram. Comoem qualquer fornecedor, preciso fazer uma boapesquisa para no entrar em uma fria. Mas em ge-ral mais simples e seguro do que armazenar es-ses dados em casa ou - muito pior - em notebookscarregados por a. Se o servio bom, o acessoaos dados s tende a melhor-lo. Pense nas reco-mendaes de livros na Amazon ou de lmes noNetix como bons exemplos.

Mas colocar um material na nuvem no garante suasegurana - conforme o caso, pode deix-lo aindamais desprotegido. Muitas pessoas tm o mau h-bito de armazenar suas senhas em browsers, de-nir termos bvios ou compartilh-los abertamente. muito difcil que um hacker invada um grandeservidor de uma empresa cujo modelo de negcios

se baseia em segurana. Mas muito mais fcildescobrir o nome de usurio e senha de algum e,atravs desses dados, entrar na conta.

Gilberto Sudr - Professor, Consultor ePesquisador nas reas de Segurana daInformao e Computao Forense

A computao em nuvem apresenta muitas vanta-gens, especialmente em relao a economia e e-xibilidade que ela pode proporcionar na infraestru-

tura de TI. Apesar das vantagens, tambm existemquestes que devem ser avaliadas com cuidadoantes de se embarcar nesta soluo. Grandes de-saos esto presentes para quem j usa ou estpensando em utilizar esta tecnologia, a comear


33/72

33

pelas ameaas a segurana e privacidade dos da-dos armazenados na nuvem. Outra questo omarco legal para este uso. Perguntas sobre a juris-

dio aplicvel aos dados armazenados na nuvemem servidores localizados no exterior ainda preci-sam ser mais bem esclarecidas.

Joo Batista Neto - DesenvolvedorWeb na iMasters

Penso que o maior problema seja garantir a integri-dade e a segurana da informao; da mesma for-ma, tambm h o desao de convencer o usuriode que sua informao estar segura.

Apesar de ser cada vez mais comum utilizarmosSoftware como Servio, Plataforma como Servioou Infraestrutura como Servio, cloud ainda umatecnologia em desenvolvimento. Muitos trabalhostm sido elaborados no sentido de garantir a priva-cidade e segurana da informao do usurio, masum longo caminho ainda precisa ser percorrido,tanto no desenvolvimento da tecnologia, quantonas discusses sobre privacidade e segurana.

Entre as iniciativas que esto sendo feitas nesse

sentido, o Departamento do Comrcio norte ame-ricano (U.S. Department of Commerce), atravs doNIST (National Institute of Standards and Techno-logy), elaborou um documento chamado Orienta-es sobre segurana e privacidade em Computa-o em nuvem pblica com o objetivo de orientaras organizaes e governos sobre segurana eprivacidade em cloud.

Wagner Marcelo - Scio da Intellecta,Coordenador de Startups na PUC-SP eFundador do Startups Evolution.

Com a disponibilizao cada vez maior de dadosna chamada nuvem, existem dezenas de oportu-nidades e desaos que no esto somente na ar-mazenagem, mas sim em como eles podero sertratados, pois atravs do conceito de Big Data oque for coletado pode gerar informaes relevantespara governos, empresas e usurios.

Hoje governos municipais, estaduais e at algunssetores do federal esto adotando o armazena-

mento em nuvem, contratando grandes corpo-raes estrangeiras sem se preocuparem com asegurana do acesso a essas informaes quepodem ser realizadas de forma privilegiada por go-vernos de outros pases.

O problema reexo da falta de investimento daindstria de software em novas tecnologias de im-pacto, pois o risco para os investidores alto. O

Brasil tem um perl de follower, com raras exce-es, mas muito se gasta em pesquisas que norendem grande frutos, sendo que o motivo sem-pre o mesmo, falta investidor para escalar, falta cul-tura que incentive a criao de tecnologias disrupti-vas e falta a aproximao das universidades junto a

indstria e governo.

Se analisarmos o atual cenrio, o Governo vem fo-mentando a pesquisa, de certa forma, atravs dealguns rgos como a FINEP, FAPESP entre outros,mas o grande gargalo est em conseguir escalar edar relevncia ao que est sendo desenvolvido pelaacademia e pelas empresas.

Kemel Zaidan - Jornalista, nerd, artista,programador. community managerno iMasters e membro ativo dacomunidade de software livre.

Computao em nuvem signica que seus dados (ede seus parceiros!) estaro potencialmente expos-tos a qualquer um com acesso Internet.

Neste caso, a primeira coisa a se fazer denir oque vai para a nuvem. Informaes que s tm va-lor para a prpria empresa podem ser hospedadas

em uma nuvem pblica. Para dados relativamentesensveis, a nuvem privada tende a ser uma soluo

melhor, desde que as devidas precaues sejamtomadas. J dados sigilosos e altamente valiososdevem car mais bem protegidos e permanecerdentro de casa, onde a possibilidade de controlesobre eles maior.

O fcil acesso a informaes algo muito sedutorna computao em nuvem, mas faz com que sejanecessrio redobrar a ateno com alguns aspec-tos de segurana, especialmente polticas de aces-so, bases de dados, e atualizaes de software.

Vulnerabilidades de segurana precisam ser corri-gidas com muito mais agilidade do que quando oservidor estava disponvel apenas para a rede inter-

na da sua empresa, e criptograa, tanto na trans-misso dos dados quanto em seu armazenamento,

passa a ser um tema de fundamental importncia.

A conectividade uma realidade que chegou paracar e quem no estiver preparado para enfrentaros desaos impostos por ela corre o risco de car,literalmente, isolado.


34/72

34 > Open Data

Dados Abertos: utilizando SQL

para pequenas anlises de dadosPor @netojoaobatista

Mais do que uma traduo, este artigo se trata,na verdade, de uma adaptao. No artigo ori-ginal, Using SQL for Lightweight Data Analysis(htt://bit.ly/11AjYAe), escrito por Rufus Pollock,foram utilizados dados sobre despesas de Londres

em janeiro de 2013. Na tentativa de contextualizar oassunto, vou usar aqui dados disponibilizados pelo

Governo Brasileiro sobre o PAC (Programa de Ace-lerao do Crescimento).

Este artigo introduz o uso da SQL para pequenasanlises de dados, atravs da anlise de pequenos

conjuntos de dados abertos para responder a se-guinte questo: quem foram os maiores benecia-dos com as obras do PAC em 2012?

Durante o artigo, alm da SQL (e SQLite), ilustrare-mos como localizar, ltrar e carregar dados tabu-lares em uma base de dados relacional, para que

possam ser facilmente manipulados.

Localizando os dadosA primeira coisa que precisamos fazer localizaros dados online. Vamos comear com uma busca,por exemplo: dados obras do PAC. Essa buscanos levar, rapidamente, ao dados.gov.br, maisespecicamente, pgina Obras do PAC - Pro-grama de Acelerao do Crescimento / Obras doPAC em CSV referentes ao 6 balano - 12/2012(htt://bit.ly/11TS2Jo).


35/72

35

Preparando os dadosNo artigo original, o autor descreve os passos ne-

cessrios para limpar o arquivo CSV, removendolinhas ou colunas vazias, linhas em branco no naldo arquivo, etc.

No nosso conjunto de dados, esse tipo de problemano ocorre, porm, temos um problema de conjuntode caracteres. O arquivo CSV utiliza um formato AS-CII estendido em vez de UTF-8. Para resolver esseproblema, podemos usar o utilitrio iconv (htt://bit.ly/ZCcdn) para fazer a converso:

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

# isso carregar nosso arquivo CSV emuma nova tabela chamada pac

# dentro de uma nova base SQLitechamada pac.sqlite

csv2sqlite.py pac_2012_12.csv

pac.sqlite pac

$ sqlite3 pac.sqlite

SQLite version 3.7.13 2012-06-11 02:05:22

Enter .help for instructionsEnter SQL statements terminated with a ;

sqlite>

sqlite> SELECT sig_uf,SUM(investimento_total)

...> FROM pac

...> GROUP BY sig_uf

...> ORDER BY SUM(investimento_total) DESC

...> LIMIT 20;

sed -i s_$..$/$..$/$....$_\3-\2-

\1_g pac_2012_12.utf8.csv

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

Outro detalhe que precisamos ajustar, a questoda data. No Brasil, utilizamos o formato dd/mm/yyyy. J na base de dados, precisamos utilizar oformato yyyy-mm-dd. Isso pode ser facilmente re-

solvido com o seguinte:

A linha acima far a converso de todas as ocor-rncias do padro dd/mm/yyyy e converterpara yyyy-mm-dd. Caso voc esteja trabalhandocom algum conjunto de dados que, alm dos pon-tos descritos aqui, ainda tenha linhas com metada-dos, linhas ou colunas em branco, no deixe de lero artigo original para saber como lidar com eles.

Analizando dados em umabase de dados relacionalNosso objetivo trabalhar com os maiores bene-ciados e quais so as reas que o dinheiro destinado. Para um pequeno conjunto de dados,poderamos utilizar uma planilha eletrnica. Entre-tanto, vamos seguir um caminho um pouco diferen-

te e utilizar uma abordagem mais apropriada, comuma base de dados relacional.

Utilizaremos o SQLite, um banco de dados relacio-

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

Carregando os dados no SQLiteAgora que j temos o conjunto de dados, preci-samos carreg-lo no SQLite. Para isso, pode-mos utilizar um pequeno script python chamadocsv2sqlite. Como o nome sugere, ele carrega ocontedo de um arquivo CSV em uma base SQLi-te. O cdigo completo est no apndice abaixo,mas voc pode fazer download a partir desse gist:htt://bit.ly/101Io3o. Uma vez baixado, vocpode utiliz-lo assim:

Nota: Caso voc esteja trabalhando com Windowse as ferramentas head, tail, sed, iconv e o python,utilizadas neste artigo e no original no estejam

disponveis no seu ambiente, voc poder fazer odownload da base de dados pac.sqlite.

Anlise IVamos at o shell do sql ite executar algumasinstrues SQL:

Dependendo da verso do sqlite, possvelque voc precise executar sqlite em vez desqlite3. Agora que estamos dentro do shell dosqlite, vamos executar uma instruo simples:


36/72

Como isso funciona? Bom, o ponto chave aqui o GROUP BY. O que ele faz agrupar todasas linhas com o mesmo valor na coluna sig_uf.

Podemos utilizar o SELECT para dizer quaiscampos ou resultados de funes que quere-mos na listagem dos resultados. No caso acima,ns apenas selecionamos o sig_uf e a soma detodo o investimento_total das linhas que pos-suem o mesmo valor no sig_uf. Feito isso, limita-mos o resultado em apenas vinte linhas e, final-

mente, ordenamos do maior valor para o menor

valor. O resultado dessa consulta segue abaixo:

Uf Investiento

SP 171740111838.0

RJ 49473735257.08

MG 41298926989.44

PR 28724574100.32

RS 27157499074.68

BA 24401562534.44

DF 16320196665.42

GO 15073583842.54

PE 13666131507.18

SC 13633033294.1

CE 13033312986.18

PA 12473700610.37

MA 9472695230.34002

AM 8926094516.68

ES 7630901437.12

MT 6906802672.1

RN 6465137159.22

MS 6189088362.3

SE 5934839614.14

PB 5509364605.14001

Podemos utilizar outras funes tambm, por ex-

emplo, quais so as cinco reas mais beneciadas

e qual o investimento mdio feito nessas reas?

36 > Open Data

sqlite> SELECTdsc_orgao,SUM(investimento_total),

AVG(investimento_total)

...> FROM pac

...> GROUP BY dsc_orgao


...> LIMIT 5;

Orgo Investiento Total Investiento mdio

Ministrio das

Cidades490643623250.721 39456664.5155385

FundaoNacional daSade

7962934548.78002 510509.972354149

Ministrio da

Educao3594551103.33999 305659.10742687

Ministrio da

Cultura775253231.56 1076740.59938889

Ministrio da

Sade768838158.779999 49058.0754709035

Isso nos d uma boa noo de como so distribu-dos os recursos; se existem, por exemplo, vriositens recebendo pequenas quantidades, ou poucositens recebendo grandes quantidades.

O que vimos aqui, que a maior parte dos recur-sos so utilizados pelo Ministrio das Cidades, cujaatribuio a de planejamento urbano, polticasfundirias e imobilirias, (que incluem zoneamento,regularizao da posse ou propriedade, cdigo deobras) requalicao de reas centrais, prevenoa riscos de desmoronamento de encostas, recu-perao de reas ambientalmente degradadas soatribuies municipais.

Anlise II - FiltragemAgora que sabemos que a maior parte dos recursosso utilizados pelo Ministrio das Cidades, podemos

ir um pouco mais a fundo: quais so os estados maisbeneciados pelo Ministrio das Cidades?


...> FROM pac

...> WHERE dsc_orgao = Ministrio

das Cidades


...> ORDER BY SUM(investimento_

total) DESC...> LIMIT 5;


37/72

37

sqlite> SELECT dsc_orgao,SUM(investimento_total)

...> FROM pac

...> WHERE dsc_orgao LIKE %Sade

...> GROUP BY dsc_orgao

...> ORDER BY SUM(investimento_total) DESC;

SELECT

sig_uf AS UF,

dsc_titulo AS Obra,

R$ || MAX(investimento_total) AS

Investimento Total,

(val_lat || , || val_long) ASCoordenadas

FROM pac

WHERE investimento_total != AND

val_lat != AND val_long !=

GROUP BY sig_uf

ORDER BY sig_uf;

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 !=


...> ORDER BY sig_uf;

Orgo Investiento

Fundao Nacional da Sade 7962934548.78002

Ministrio da Sade 768838158.779999

Uf Investiento

SP 171158656371.58

RJ 49089877209.84

MG 40175377781.16

PR 27928207915.2

RS 26717924226.26

Ou, ento, quanto dos recursos do PAC so gastoscom sade, seja atravs do Ministrio da Sade, ouatravs da Fundao Nacional da Sade?

Aqui utilizamos o WHERE para restringir os resulta-dos apenas aos rgos que possuem Sade emseu nome, como o caso da Fundao Nacionalda Sade (Funasa) e do Ministrio da Sade.

Podemos, ainda, saber quais so os estados mais

beneciados pelo Ministrio da Sade:


...> FROM pac

...> WHERE dsc_orgao LIKE %Sade



...> LIMIT 5;

Uf Investiento

PA 785712631.78

CE 746274322.939999

MG 722866871.88

PB 618124738.899999

BA 546496245.64

Visualizao grfca

Uma informao muito especial que temos nesseconjunto de dados do PAC, a latitude e longitudede onde os recursos esto sendo empregados.Essa informao especialmente interessante,quando utilizamos alguma ferramenta de plotagemde mapas, como o caso do Google Maps Engine(asengine.google.co)

A primeira coisa que precisamos fazer, transfor-mar os dados em alguma informao que quere-mos no mapa. Por exemplo, quais so as 20 obrasque mais receberam recursos?

Aps encontrar a informao que desejamos, pre-cisaremos export-la para CSV. Isso pode ser feitoatravs do prprio SQLite, por exemplo:


38/72

38 > Open Data

A primeira linha, .headers on, diz para o SQLiteque queremos os cabealhos no arquivo CSV;

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

A terceira linha, .output top20-obras.csv, dizpara o SQLite que, em vez de mostrar os re-

sultados na tela, ele deve salvar em disco, noarquivo top20-obras.csv;

A quarta linha a informao que desejamosobter dos dados.

Com o arquivo top20-obras.csv, vamos ato Google Maps Engine e vamos fazer o upload do

arquivo. Para isso, vamos clicar na pastinha queca ao lado do boto Add Layer:

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:

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

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

Nessa tela devemos escolher a coluna Obra, queser utilizada para o ttulo dos pins no mapa. Agora s clicar no boto Finish e pronto, o resultadoser semelhante ao abaixo:

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


39/72

Veja os dados no Google Maps Engine atravs doendereo htt://bit.ly/ZRkIQ6.

ResultadosComo podemos ver, obter informaes de

pequenos conjuntos de dados , de certa forma,bastante simples. Tudo o que precisamos, soalgumas perguntas. Sobre nossa pergunta inicial,descobrimos que o estado de So Paulo o querecebeu a maior quantidade de recursos. Descob-rimos tambm que a maior parte dos recursos doPAC so utilizados em obras do Ministrio das Ci-

dades. Alm disso, descobrimos que os maiores

investimentos na rea da sade so destinados aoestado do Par. Por m, conseguimos plotar ummapa com um conjunto de informaes obtidasatravs dos dados, utilizando as coordenadas ge-ogrcas para identicar as obras.

Isso tudo foi feito utilizando um conjunto sim-ples de dados, com apenas uma tabela. Algunsconjuntos de dados so mais complexos, muitasvezes distribudos em vrias tabelas. claro queas consultas vo cando mais complexas, con-forme o volume de dados e a quantidade de tab-

elas, mas possvel extrair informao de vriastabelas ao mesmo tempo, apenas cruzando in-formaes entre elas.

ApndiceSaiba mais como lidar com dados:

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

Extenso para o Google Chrome que permitea visualizao de arquivos CSV: htt://bit.ly/12Rn8Bt

Voc tambm pode brincar com SQL online, uti-lizando o SQLFiddle: http://sqlddle.com

a. Ou at uma implementao do SQLite emJavascript: htt://bit.ly/z9gSbz

Existe diversos recursos online para aprenderSQL, por exemplo (em ingls):

b. A Gentle Introduction to SQL using SQLite byToby Thibodeaux - htt://bit.ly/U3L4U

c. Introducing SQL for Lightweight Data Ma-nipulation by Tim McNamara - htt://bit.ly/4UB87

d. Command Line Shell For SQLite by D. RichardHipp et al. - htt://sqlite.org/sqlite.htl

39

Joo Batista Neto engenheiro de aplicaes etrabalha com ambiente web desde 2000 em diversas

linguagens, como Java e PHP, dedicando esforosao desenvolvimento de bibliotecas reutilizveis para acomunidade. Especialista em integrao de sistemas,possui vrias bibliotecas reutilizveis publicadas comoopen-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 compartilhaconhecimento com a comunidade de desenvolvedores.Tambm autor de artigos no Portal iMasters e decursos no iMasters PRO.


40/72

40 > +Interatividade

O cachorro, o Leap Motion

e a velocidade do ventoPor @pedrogravena

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

Eu tenho um amigo que sempre lembra dessa pia-dinha ridcula quando algum cliente reprova algosem sentido. Anal ele reprova porque ele conse-gue, porque ele pode reprovar, u.

Piadinhas ridculas parte, quero contar uma expe-rincia 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 quantica todos os seus movimentos.

Em verdade, no comeo, no vi muita funo naquilo.

Mas hoje, uso todos os dias.

Sabe por qu?

Porque eu posso! :P

Explico: uma tecnologia bem bacana, mas semnenhuma explicao racional. Ela mede seus mo-vimentos e te devolve uma valor em fuels. Essesfuels no tem relao nenhuma com alguma medi-da conhecida.

No so metros.

No so calorias.

No so quilmetros/hora.

So Fuels.

Mas eu viciei nesses malditos fuels. Sabe por qu?

Simplesmente porque eles existem.

E agora posso medi-los.

Fico querendo bater sempre minha meta do dia. Metade calorias? De metros? De fora? No de Fuels.

Mas por qu? Porque eu posso.

Bobo n. Pois .

Mas uma verdade cada vez mais presente nanossa vida.

Existem hoje uma srie de tecnologias eu possoe que, na minha opinio, so sempre muito vlidas.

Ser que voc vai usar o Leap Motion?

Vai.

Sabe por qu? Porque voc pode. Pode controlar ainterface 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 con-

trolar a interface sem tocar nela, usando uma pul-seira.

Mas no mais prtico o Leap Motion? s vezes.


41/72

41

Mas quem se importa?

Mas ser que voc vai continuar usando o teclado?

Vai. Sabe por qu? Porque voc pode.

E, ao nal, voc vai acabar se convencendo, um

dia, mesmo quando voc puder ditar um texto e aSiri ou o Google Translate transcreverem, de que oteclado mais prtico, s vezes.

Enm, o que quero dizer com isso tudo? Que vive-mos na era das invenes. E que sempre podemsurgir novas tecnologias, que faam desde seu car-ro ler as suas redes sociais, at o seu iPhone medira 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: htts://www.leaotion.co/

MYO: htts://getyo.co/

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

iPhone e velocidade do vento, artigo na GizMag:htt://bit.ly/103SjH

Pedro Gravena Diretor de Criao Digital daWieden+Kennedy So Paulo, j foi arquiteto,msico, artsta plstico, e est estudando para serum inventor frustrado. Conhea mais em@pedrogravena epedrogravena.posterous.com


42/72

42 > Hardware

Trabalhando

com prottiposPor @pichiliani

Neste artigo vou falar um pouco, sob o ponto devista do desenvolvimento, como trabalhar comprottipos de hardware. Quem trabalha com pes-

quisa ou desenvolvimento de novas tecnologiaspode se deparar com prottipos e provas de con-ceitos de produtos e saber trabalhar com este re-curso pode ser muito til nestas situaes.

Geralmente, prottipos de hardware so criadospor departamentos de pesquisa e desenvolvimento

identicados pela sigla R&D (Research andDevelopment). Tambm muito comum queempresas de startups ou mesmo o pessoal que

gosta de colocar a mo na massa (a comunidadeDIY Do It Yourself) crie prottipos ou versesmuito simplicadas e cruas de dispositivos para aavaliao e testes.

importante destacar que este tipo de prottipo no disponibilizado para o pblico em geral, pois se tra-ta de algo que ainda est no estgio inicial de desen-volvimento. E no estamos falando de imagens oucenrios conceituais aqui: me rero a prottipos queefetivamente existem e que esto sendo utilizados

em laboratrios com um m especco.

Em alguns casos, as empresas acabam mostrandoestes prottipos para divulgao na mdia, o que

acaba gerando alvoroo em usurios early adop-ters ou mesmo pessoas que se empolgam como prottipo. Nos tempos atuais, com novidadescomo o Google Glass, o Oculus VR, o Leap Motionou mesmo a braadeira MYO, ca cada vez maisevidente que os prottipos despertam curiosidadee contribuem para a gerao de expectativas mui-tas vezes irreais. Destaco que estes prottipos, oupelo menos as ideias e inovaes por trs deles,

geralmente so apresentadas comunidade cient-ca e acadmica anos antes dos prottipos seremconcebidos e certamente muito frente do que a

imprensa especializada publica.

Mo na massaVou comentar algumas experincias que tive comalguns prottipos de hardware relacionado a pes-quisas que desenvolvi. Espero que este relatopossa ajudar a guiar ou mesmo incentivar outraspessoas a querer trabalhar com pesquisa e desen-volvimento, em participar com software, envolven-do prottipos de hardware.

O primeiro prottipo de hardware que tive a

revista imasters #6 by imasters [revista-6-web.pdf] (72 pages)

Documents