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

O ladO B da tecnOlOgia criatividade e inOvaçãO alternativas

R$2

4,00

N

ós fa

zem

os a

Inte

rnet

no

Bra

sil

Feve

reiro

201

3 /

Ano

02

/ E

diçã

o 05

entrevistanada é acessível O suficiente que nãO pOssa melhOrar

pela web aforadeep WeB e O ladO OBscurO dO ser humanO

desenvolvimentoum guia para Otimizar as suas aplicações WeB

expediente

TIAGO BAETA Publisher

LUIS LEÃO Editor

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

EDU AGNI Projeto Gráfico / Diagramação

NATHÁLIA TOREZANI Revisão

COLABORADORES Adriana Pedrosa, Alê Borba, Bernard de Luna, Equipe Blab, Bruno Pulis, Clécio Bachini, Davidson Fellipe, Diego Ivo, Edu Agni, Fabiano Pereira, Fernando Bass, Horácio Soares, Hugo Cisneiros, Iliana Grinstein, Italo Lelis de Vietro, João Neto, Lina Lopes, Marcela Dani-otti, Marcio Paulo Mello Martins, Lucia Freitas, Ofelquis Gimenes, Pedro Gravena, Plínio Balduíno, Ramon Bispo, Reinaldo Ferraz, Richard Duchatsch Johansen, Sergio Nascimento (Elvis Detona), Vinicius Depizzol.

ESkENAZI INDúSTRIA GRÁfICA Gráfica

GRUpO ImASTERS Organização

> 1000 exemplares

> ISSN 1981-0288

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

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

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

editOrial

Foi com muita felicidade que aceitei o desafio de ser o editor desta nova etapa da Revista iMasters. Não é de hoje que tenho o desejo de poder escrever sobre os assuntos e experimentos que têm circulado pela mi-nha carreira e, nesse sentido, espero poder corresponder ao convite.

Você, leitor, deve estar se perguntando: quem é esse cara? Desde sem-pre, me interesso pelo desenvolvimento de projetos que envolvam intera-tividade, tecnologia, redes sociais, hardware e o que mais você imaginar que conecte o mundo real ao virtual. Nesse último ano, trabalhei em São Paulo, buscando aprender coisas novas e vivendo o mercado publicitá-rio, no que você poderia chamar de marketing experimental: prototipan-do ideias para serem utilizadas pelas marcas.

Aprendi aqui uma lição fundamental: que a mensagem/ideia é muito mais importante que o meio ou a tecnologia em que ela está inserida. E isso me conforta, pois sempre acreditei que tecnologia boa é aquela que ninguém sabe que existe. Um ótimo exemplo é que você não precisa explicar como funciona um forno microondas, mas precisa saber quanto tempo é necessário para esquentar uma pizza gelada – e isso não quer dizer que não existe tecnologia aplicada. Ou seja, quanto mais natural e menos imposto for o uso dessa tecnologia (qualquer que seja), melhor.

Hoje, mais do que nunca, a tecnologia permitiu aproximar marcas e con-sumidores, e a experimentação de produtos e serviços cria um novo modelo de relacionamento entre eles, muito além do “xingar muito no Twitter”. Marcas criam plataformas e serviços que complementam seus produtos, e agora vemos uma nova onda de APIs e dados que podem gerar novos subprodutos (quando não criam novos modelos de negó-cio). Se você desenvolve para alguma plataforma de rede social ou já consumiu algum tipo de aplicativo, sabe o que isso significa.

É isso que pretendo levar a você, leitor da Revista iMasters: experiên-cia, interatividade e como é possível incluir tecnologia e inovação nos seus projetos.

Mais uma vez, agradeço pelo convite para estar à frente desse projeto, e peço o seu feedback, sempre, na certeza de que sempre podemos fazer melhor.

Luis Leão é desenvolvedor web que encontrou em APIs e hardware aberto novas formas de integrar a web com o mundo real.

[email protected]

44 ::

6 > Sumário

20 :: capa > O lado B da tecnologia

front-end Como otimizar aplicações web

08 :: entrevista Acessibilidade web, com Horácio Soares

66 :: pela web afora Deep Web e o lado obscuro do ser humano

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

14 :: +interatividade > If ( ignorância == benção) return false;

16 :: marketing digital > Um mundo “novo” para o marketing: Big Data

18 :: padrões Web > Por dentro da W3C Brasil

26 :: criatividade tecnológica > Festival das luzes na era da interatividade

30 :: Opinião > Frameworks para Front-End

32 :: segurança > Confiança, certificados digitais e autenticação

40 :: comunidade > Busão Hacker: da internet para as ruas

42 :: código livre > Informações e dicas sobre projetos open source

50 :: 7masters: encontro imasters de especialistas

56 :: user experience > O design de interface a favor do Front-End

59 :: conexão vale do silício > O Vale do Silício é um estado mental

60 :: seO > 8 dicas, tendências e previsões para SEO

64 :: review > MariaMole: um ambiente brazuca para Arduino

70 :: imasters Box

nada é acessível O suficiente que nãO pOssa melhOrar

Por <Rina Noronha>

8 > Entrevista > Acessibilidade > Horácio Soares

“No Brasil falta vontade política em fazer valer as leis e temos escassez de mão de obra capacitada para projetar, desenvolver, testar e auditar acessibilidade”

Acessibilidade web não é nenhum assunto novo. No entanto, ainda assim encontramos um grande nú-mero de páginas que não são aces-síveis e, pior ainda, um número de profissionais que não sabe, não quer ou não se importa com o assunto.

A mudança já caminha mais rapida-mente, em comparação com anos atrás, mas ainda são passos peque-nos, que precisam ser fortalecidos.

Horácio Soares é especialista em acessibilidade web, design, ex-periência do usuário, usabilidade e Web Standards, trabalha com

acessibilidade web há mais de uma década. É fundador e consultor da Acesso Digital e da Interativa, além de fazer parte do Conselho Consul-tivo do Instituto Intranet Portal, do GT de Acessibilidade na Web do W3C Brasil e da equipe julgadora Prêmio Nacional de Acessibilidade - Todos@web. Nessa entrevista ex-clusiva, ele fala um pouco sobre o status do assunto no Brasil, onde estamos e o que precisamos fazer para chegar “lá” – em uma web real e verdadeiramente acessível.

Revista imasters: Como você começou a tra-balhar com acessibilidade web?

Horácio Soares: Meu primeiro contato com o termo acessibilidade foi em 2001, quando participei da resposta de um edital de licitação para construção de um sistema web para uma empresa do governo. Um dos itens do edital exigia que a solução fosse acessível para defi-cientes visuais.

Na época eu não sabia exatamente o que re-presentava a palavra acessibilidade e muito menos o que precisaria ser feito para desenvol-ver um site acessível. Também não tinha a me-nor idéia de como, nem com que tipo de tecno-logia, alguém com deficiência poderia acessar o conteúdo das páginas de um site.

Acabamos ganhando a licitação e fui um dos responsáveis por desenvolver a solução aces-sível da interface do sistema. Tive que apren-der na marra e acabei me apaixonando pelo tema. Na verdade, fui mordido pelo mosquito da acessibilidade e descobri que seus efeitos são irreversíveis.

Rim: Nesse tempo de mercado, o que mais te assusta? E o que mais te da orgulho?

HS: Me assusta ver que empresas de grande porte que ainda ignoram a acessibilidade e sua importância. A mensagem é clara, elas não es-tão preocupadas em atender e fornecer servi-ços para essa “minoria”.

É a velha cultura da reatividade, afinal, mudar para que, se estão ganhando... “Por que pre-cisamos oferecer serviços com mais qualidade se a demanda é bem maior que a oferta? Quan-do a concorrência crescer nos preocupamos com isso...”.

Ignoram que, quando a concorrência avançar, já poderá ser tarde. Que qualidade não é cus-to, mas sim investimento e que é bem mais barato manter um cliente do que que conquis-tar um novo.

Ignoram que dentro de diferentes contextos, todos nós somos usuários diretos de acessibili-dade e não apenas as pessoas com deficiência.

Mas me dá muito orgulho em ver que parte

cada vez mais significativa de nossos desig-ners/desenvolvedores, mesmo lutando com tudo e todos, se qualificaram em acessibilidade e, quando podem, implementam suas técnicas em seus projetos digitais, mesmo sem seus clientes e gestores se darem conta.

Rim: Qual o estado atual da acessibilidade no Brasil? Ja é possível considerar que nossa web é acessível? Por quê?

HS: A acessibilidade no Brasil ainda é bem in-cipiente, principalmente se considerarmos os serviços oferecidos pela internet.

Para se ter uma ideia do tamanho do problema, o W3C Brasil realizou, em 2010 e 2011, uma avaliação automática dos sites do Governo Brasileiro com domínio .gov. Foram aplicados testes automáticos de HTML, CSS e acessibi-lidade. O resultado foi preocupante pois, em 2010, apenas 2,5% dos sites do Governo não apresentavam erros nas avaliações. Já em 2011, esse número dobrou para 5%, mas ain-da é muito pouco, considerando-se que a va-lidação automática só é capaz de realizar uma pequena parte dos testes de acessibilidade e padrões web.

Infelizmente, ainda estamos longe de uma web brasileira verdadeiramente inclusiva e democrática.

Rim: Acessibilidade web é uma só, indepen-dentemente do tipo de pagina? (Portais de no-ticia, blog, E-commerce, etc)

HS: Dependendo dos tipos conteúdos (textos, Imagens, links, vídeos, áudios, tabelas, formu-lários,...), das tecnologias utilizadas e das in-terações de cada página, as técnicas podem ser diferentes, mas a acessibilidade web será sempre uma só.

Todos os conteúdos/serviços devem estar acessíveis, com acesso facilitado, da forma mais intuitiva e com menor esforço, para o maior número possível de usuários, indepen-dente de suas culturas, experiências, deficiên-cias, sistemas e dispositivos utilizados.

Rim: Qual é o grande paradigma hoje em unir usabilidade, acessibilidade e padrões web?

HS: Uma boa acessibilidade vai além de sim-

plesmente permitir o acesso a serviços e con-teúdos. Por exemplo, minha amiga Lêda Spel-ta, que é cega, faz compras mensalmente em um supermercado virtual. Sua compra já está cadastrada, mas para adicionar e retirar alguns produtos e realizar o pagamento, leva em torno de duas horas. Algo que um vidente (uma pes-soa sem deficiência visual, que vê totalmente) com a mesma experiência que ela não leva-ria mais do que 20 minutos. O site parece ser acessível, mas na verdade só está “acessável”.

Nessa caso, para o supermercado virtual ser acessível de verdade, além do usuário con-seguir realizar a compra (efetividade), precisa realizar as tarefas com facilidade e rapidez (eficiência), e no dispositivo e sistema que desejar (portabilidade).

É preciso entender que não basta aplicar téc-nicas de acessibilidade e de padrões web, é preciso garantir a acessibilidade através da validação com usuários e com melhoria con-tínua. Nada é acessível o suficiente que não possa melhorar.

Rim: Qual é o principal pecado dos sites brasi-leiros em termos de acessibilidade?

HS: São muitas as heresias que prejudicam a acessibilidade web, mas classifico como sen-do o pecado capital dos sites brasileiros a falta de foco. Isso mesmo, os projetos são desen-volvidos sem se saber ao certo quais são os objetivos e metas, quem são os beneficiados e suas necessidades e os quais são problemas que realmente precisam ser resolvidos.

Como esperar que um projeto web seja aces-sível se não se sabe quais problemas ele irá

resolver e menos ainda quem é seu público- alvo? Impossível...

Identificar corretamente o alvo significa ter que investir tempo e dinheiro em coisas aparente-mente abstratas, mesmo antes de começar a colocar a mão na massa. Os projetos vivem na cultura da pressa, onde todos estão sobre-carregados e sempre atrasados, muitas vezes correndo atrás do próprio rabo. Tudo é “pra ontem” e “não há tempo a perder com pes-quisa, estratégia, design, testes etc”. Para so-breviver a prazos e cronogramas impossíveis, os projetos são movidos a dose cavalares de ASAP (as soon as possible – ou, em bom por-tuguês, o quanto antes). Mas como qualquer droga pesada, tem efeitos colaterais devasta-dores, como a falta de qualidade, muito retra-balho, insatisfação dos clientes, aumento da taxa de churn*, desgaste da imagem da em-presa, queda do lucro etc.

Assim, mesmo em projetos onde a acessibilida-de faz parte da lista de requisitos obrigatórios, primeiro desenvolvem o site, para só depois im-plantar a acessibilidade. É como construir um prédio e depois quebrar tudo para adaptar uma rampa para cadeirantes. O resultado sempre será caro e a acessibilidade duvidosa... Uma maquiagem para inglês ver.

Rim: Muito se fala que as empresas/os chefes nao deixam que os sites sejam mais acessíveis por conta da falta de verba e tempo para de-senvolver os projetos, mas até onde isso é re-almente um culpado, e até onde a culpa é do desenvolvedor/designer, por não fazer uso dos padrões web e, consequentemente, criar pági-nas que nao são acessíveis?

* Taxa do churn é a proporção dos clientes que deixam o fornecedor durante um ano. [http://wikipedia.qwika.com/en2pt/Churn_rate]


HS: Certamente os maiores culpados são as empresas/chefes que já estão totalmente vicia-dos a trabalhar contra o relógio. Porém, mesmo correndo o risco de uma cara feia, os desen-volvedores/designers têm o dever de alertar os responsáveis que esse tipo de postura certa-mente causará problemas na qualidade dos projetos, além de poderem ser processados por falta de acessibilidade.

É sempre muito difícil mudar a cultura, princi-palmente dentro de empresas estabelecidas e que mantém uma boa taxa de crescimento e lucratividade. Mas antes que seja tarde demais, esses profissionais podem tentar convencer seus chefes e clientes aplicando testes A/B, onde possam facilmente comparar os resulta-dos de um projeto original “A”, com um outro dentro dos padrões “B”. Ou ainda, os gesto-res podem ser sensibilizados ao verem uma pequena gravação com testes de usabilidade com usuários utilizando o principal produto/ser-viço da empresa.

Dentro do possível, é preciso sempre tentar in-cluir as técnicas de acessibilidade, usabilidade e padrões web em seus projetos.

Rim: Quais tem sido os maiores desafios para uma web acessível no Brasil?

HS: São grandes as dificuldades, mas pode-mos listar três grandes desafios/barreiras que precisam ser vencidos/superados para uma web mais acessível no Brasil:

A. Conhecimento: as empresas, seus execu-tivos e profissionais precisam saber o que realmente é acessibilidade web, sua impor-tância, leis, estatísticas, normas, público alvo, custos e benefícios.

B. Capacitação: após serem conscientizados, os profissionais Web precisam de treina-mento para conhecerem as técnicas de de-senvolvimento, validação e manutenção de sites acessíveis.

C. Cultura: o terceiro e maior desafio é mudar a cultura dentro das corporações. É preciso que as empresas incluam em suas normas, padrões e processos a cultura da acessibili-dade Web, caso contrário, todo investimen-to se tornará inútil, volátil.

Rim: O que tem sido feito, na esfera governa-mental, para que a web seja mais acessível? E no plano privado?

HS: Pouco tem sido feito, em ambos planos. As empresas/instituições ainda “enxergam” a acessibilidade web como um patinho feito, que só serve para aumentar os custos do proje-to, limitar a criatividade e o design e atrasar o desenvolvimento. Consideram “um preço mui-to alto para atender um número pequeno de pessoas e que não fazem parte de meu públi-co alvo”. Certamente não leram o ótimo artigo “Acessibilidade web: 7 mitos e um equívoco”, da Lêda Spelta (http://bit.ly/11qOoR)

Ainda são poucos, mas a boa notícia é que existem empresas, instituições, universidades e profissionais que realmente se preocupam com a acessibilidade e começam a fazer diferença.

Um bom exemplo é o Prêmio Nacional de Acessibilidade na Web - todos@web, uma ini-ciativa do W3C Escritório Brasil, lançado em 2012 e que será repetido em 2013. O prêmio

“Dentro de diferentes contextos, todos nós somos usuários diretos de acessibilidade e não apenas as pessoas com deficiência”

tem como objetivo promover nacionalmen-te a acessibilidade na web, para conscienti-zar desenvolvedores e homenagear pesso-as, empresas e ações em prol do acesso de pessoas com deficiências na web. Veja mais http://premio.w3c.br/

Muito ainda precisa ser feito, mas um passo importante foi a criação do Decreto Lei 6.949, de 2009. Ele promulgou a Convenção Interna-cional da ONU sobre os Direitos das Pesso-as com Deficiência (Nova York, 30 de março de 2007), que passou a ter força de lei. Mais abrangente do que o Decreto Lei 5.296, ele de-termina que todas as empresas e instituições, de administração pública ou privada, devem assegurar o acesso a informação e a comuni-cação a todas as pessoas com deficiência e, a elas, devem ser oferecidas as mesmas opor-tunidades oferecidas aos demais. Leia o artigo “Análise de Acessibilidade dos Sites Oficiais dos Três Principais Candidatos à Presidência do Brasil”, onde este decreto é comentado, http://bit.ly/bQCmaQ

A partir daí, empresas estatais e privadas po-dem ser processadas pelo Ministério Público por falta de acessibilidade. Só para ter uma ideia, em 2011 e 2012 nossa consultoria aten-deu cinco grandes empresas privadas que es-tavam com processo devido a isso.

Rim: Com relação a outros países, como esta-mos? Muito atrasados, acompanhando bem o ritmo mundial, na frente?

HS: O mundo está atrasado, mesmo em na-ções mais desenvolvidos as mudanças são len-tas. O Brasil segue o caminho de países como Estados Unidos, Inglaterra, Portugal, Australia, entre outros, com adoção de leis nacionais so-bre a acessibilidade web para empresas esta-tais e privadas.

O lado negativo é que no Brasil falta vontade política em fazer valer as leis e temos escassez de mão de obra capacitada para projetar, de-senvolver, testar e auditar acessibilidade.

Rim: Como é possível pensar acessibilidade web “fora da caixa”? Como fazer diferente?

HS: Apesar de parecer óbvio, não projetamos a “experiência do usuário”; na verdade, proje-


tamos para a sua experiência. Essa pequena mudança de paradigma faz toda a diferença na criação e desenvolvimento de sites que aten-dam de verdade as necessidades das pessoas. Precisamos focar mais nas pessoas e menos nas tecnologias.

As pessoas acreditam que acessibilidade é sem-pre direcionada para pessoas com deficiência, mas ela não só pode como deve ser pensada para atender melhor todas as pessoas.

Rim: Quais são os desafios relacionados a acessibilidade nos dispositivos móveis e qual sua avaliação sobre a nova funcionali-dade de assistentes pessoais (Siri e Google Now)? O que poderia tornar dispositivos mó-veis mais acessíveis?

HS: O curioso com relação à acessibilidade em dispositivos móveis é que as dificuldades apresentadas por pessoas com deficiência ao utilizarem computadores do tipo desktop são muito semelhantes às apresentadas por todos nós em dispositivos móveis. Portanto, somos todos usuários diretos de acessibilidade quan-to estamos usando dispositivos móveis, em movimento, com apenas uma das mãos, com baixa precisão, sem feedback, luz direta, baixo contraste e resolução reduzida, assim como o tamanho das letras, campos de formulário, links e botões.

Por isso mesmo, as técnicas e os problemas de acessibilidade são muito parecidos em disposi-tivos móveis e em desktop.

Algo que pode ajudar a melhorar a acessibilida-de dos sistemas e sites para dispositivos mó-veis é o uso da técnica “Mobile First”. Ao invés de adaptar os conteúdos e serviços do desktop para o Mobile, a ideia dessa técnica é fazer exatamente o contrário: começar pela versão móvel, incluindo na interface apenas o que real-mente é relevante e prioridade para os usuários, para depois projetar a versão para desktop. Como resultado, obtemos uma versão móvel otimizada para atender às especificações e ne-cessidades dos pequenos dispositivos, e uma versão desktop mais leve e objetiva, impregna-da pela simplicidade do dispositivo menor.

Com relação ao uso do Siri e o Google Now,

“Não projetamos a experiência do usuário; na verdade, projetamos para a sua experiência”

não sou usuário e nem fiz testes com ambos, mas acredito que podem ser bem úteis para todas as pessoas, com e sem deficiência, em diferentes contextos.

Rim: Games hoje são utilizados não só como entretenimento, mas também como plataforma de educação (ensino de lógica, por exemplo). Como a acessibilidade é tratada nesse merca-do? Ela existe? Como funciona?

HS: Esse é um grande e promissor mercado. Hoje, com o uso das técnicas de acessibilida-de propostas pela WAI/ARIA (Accessible Rich Internet Applications) do W3C (http://www.w3.org/WAI/intro/aria.php), já é possível de-senvolver conteúdo dinâmico e interfaces inte-rativas bem acessíveis com Ajax, HTML, JavaS-cript, e tecnologias relacionadas.

Falta melhorar o suporte dos navegadores e tec-nologias assistivas, mas tanto os leitores de telas quanto os navegadores têm evoluído bastante nos últimos anos, meses e, sinceramente, estou muito otimista com o futuro dessas tecnologias.

Rim: Você é professor, como trata o assunto acessibilidade em sala de aula? Como é a res-posta/entendimento dos alunos?

HS: Tentando um misto entre conscientização, paixão, técnica e perseverança. Sei que abra-çar essa causa não é uma tarefa fácil, por isso, preciso fazer com que os alunos sejam picados pelo mosquito da acessibilidade, exatamente como fui. E, além das técnicas, precisam de ar-gumentos fortes sobre as vantagens da acessi-bilidade e por que ela não deve ser tratada pelas empresas como uma obrigação social e legisla-tiva, mas sim como uma vantagem competitiva.

Rim: Qual é o papel das universidades em rela-ção à acessibilidade? Existe pesquisa?

HS: Um papel de extrema importância, mas certamente poderiam ser mais ativos e com resultados mais eficazes para acessibilidade digital. Um caminho seria incluir a cadeira de acessibilidade web nos cursos de graduação em Tecnologia da Informação, Sistemas de In-formação, Design, Web Design e afins.

Esses profissionais não só precisam sair das universidades conscientizados da importân-

cia da acessibilidade, mas preparados para o desenvolvimento de projetos acessíveis. Por exemplo, os desenvolvedores saem de seus cursos especialistas em algoritmo, lógica, as principais linguagens de programação e tec-nologias, mas desconhecem por completo as necessidades de seus usuários com diferentes experiências e habilidades. A boa notícia é que isso já começou a mudar, principalmente nos cursos de pós-graduação Latu e Stricto Sensu, onde o tema tem sido cada vez mais pesqui-sado. </>

Horácio e MAC (arquivo pessoal)

if ( ignOrancia == BençãO ) return false;Por <Pedro Gravena>

14 > Coluna > +Interatividade

Nos últimos 2 anos, tenho passado por uma lavagem cerebral intensa para aprender pro-gramação. Sei que um publicitário não tinha nada que se meter com isso :) mas acredito que saber uma linguagem e lógica de progra-mação é ainda mais importante do que apren-der uma segunda língua.

Minha ideia era simples: aprender a progra-mar melhor para sair da ignorância. Tropeços à parte, tenho conseguido andar até que bem.

Estava muito feliz em saber um Java basicão, quando recebi a visita de um cara, no mínimo inspirador, que me fez mudar um pouco a vi-são do meu objetivo.

Explico: normalmente fico olhando pessoas que fazem design com códigos, ou traquita-nas incríveis. Acompanho o trabalho do Mr. Doob, ou do pessoal do Google Creative Labs e fico invejando como eles são capazes de re-alizar coisas incríveis e eu não.

É claro que coloco toda a culpa nos códigos, afinal eles sabem programar e eu não.

Quando eu deixar de ser ignorante, eles vão ver só!

Mas dessa vez foi diferente. Recebi a visita do Mick Ebeling, um cara/empresa que veio mostrar o trabalho da sua produtora, e tam-bém falar sobre o Eye Writer. O trabalho da produtora é incrível! Para quem gosta de mo-tion graphics, basta citar que fizeram a aber-tura do filme do “007-Quantum of Solace” e a peça mais copiada da história, depois de Star Wars, a abertura do filme “Mais Estranho do que a Ficção”.

Tudo muito incrível e bem feito, até que che-gou a hora de mostrar o Eye Writer. Quando ele abriu o keynote imediatamente mudou de expressão, estampava orgulho nos olhos e na fala. Não dava pra ficar indiferente enquanto ele mostrava um óculos meio tosco e barato, que lê o movimento da retina e transforma em letras, uma traquitana feita para ajudar um amigo grafiteiro que ficou tetraplégico.

Tudo muito incrível, a história, a geringonça, tudo. Tão incrível que virou uma palestra no TEDx.

Fiquei tão intrigado com o entusiasmo do cara que perguntei a quanto tempo ele programava (afinal quando eu aprender a programar gosta-ria de fazer algo assim, arduino, geringonças, etc). Fiquei bem surpreso quando ele respon-deu: “não sei fazer uma linha de código”.

Mas como?

Ele fala com tanta propriedade sobre o projeto aberto do Eye Writer, sobre como está rece-bendo contribuições e melhorando o projeto inicial, como montou uma comunidade de de-senvolveres para melhorar as funcionalidades.

Como?! Será que aquele orgulho no olhar era só um artifício de um vendedor?

Acostumado com as farsas da propaganda e com pessoas que levam créditos por outras, pensei: “pronto tá aí mais um cara que não fez nada e está rodando o mundo fazendo palestras e levando o crédito pelo trabalho dos outros”.

Perguntei, então, como ele desenvolveu a ideia. Digo, a partir da ideia, como ele fez para juntar tecnologias e colocar tudo funcio-

nando? Afinal, todos sabemos que da ideia ao protótipo há um longo caminho, que sempre passa por um desenvolvedor.

Veio a primeira resposta:

- Ele estava tão aficionado em fazer algo para ajudar, que conseguiu convencer dois programadores a se mudarem para sua casa. Eles estavam morando lá e traba-lhando na garagem.

Antes que eu pudesse fazer mais alguma pergunta, veio a se-gunda resposta:

- Ele só consegui porque não tinha a mínima ideia do que estava fa-zendo, que se ele tivesse ideia do quanto seria complicado e de toda tecnologia que seria envolvida, não teria nem começado.

E fechou com uma frase conheci-da, mas mudando uma palavra:

“Naivety is a Bliss!” - Como se diz Naivety em português?

A palavra é inocência. E a fra-se faz muito mais sentido com essa palavra.

Depois desse encontro, entendi que só devo continuar apren-dendo a programar se mantiver a minha inocência em relação ao assunto. Afinal eu não preciso continuar ignorante em programa-ção, preciso continuar ingênuo. A ingenuidade é que te faz ter a “falta de noção” para fazer. </>

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

TED, ou acesse: http://new.theebelinggroup.com

um mundO “nOvO” para O

marketing digital:Por <Marcela Daniotti>

16 > Artigo > Marketing Digital

Falar sobre novidade em Internet é pleonasmo e ao mesmo tempo perigoso. Muitos conceitos já existentes e praticados ganham roupa nova ao serem batizados com termos tecnológicos e BAM!, a revolução se instaura. Mesmo assim, vale a pena colocar definição + cases e enfati-zar o que já era feito no passado, mas que ago-ra virou disciplina e tópico de muita discussão. Muitos de vocês já devem ter se deparado com a expressão big data. Vamos dissecar?

O termo Big Data refere-se ao volume absurdo de informações que é produzido e consumido na era em que vivemos e na impossibilidade de processar essas informações com as ferramen-tas convencionais.

Trazendo isso para o mundo corporativo, ima-gine a dificuldade que empresas têm em extrair, armazenar, processar e então, o mais impor-tante, visualizar esse volume crítico de informa-ções a fim de obter insights valiosos?

Vamos trazer essa realidade para o nosso mun-do? Podemos dizer, sem sombra de dúvida, que um dos “culpados” pelo altíssimo volume de informações produzidas e consumidas hoje é o marketing digital, que exponencializou o número de touch points entre consumidores e marcas/empresas.

Seria lindo se não fosse trágico, pois:

� 91% de profissionais de marketing seniors acreditam que marcas de sucesso fazem bom uso de Big Data para suas decisões de marketing, mas...

� 39% dizem que os dados na empresa onde trabalham são coletados sem frequência certa ou não “suficientemente real-time”

� 51% dizem que a falta de compartilhamento dos dados de clientes dentro da sua própria organização é uma barreira para medir efeti-vamente o ROI de marketing

� Grandes empresas são muito menos pro-pensas a coletar novas formas de dados digitais como dados móveis (19%) do que para reunir dados tradicionais sobre os clien-tes, como informações demográficas (74%) e comportamentais (54%)

� 85% das grandes empresas já estão usan-do contas de redes sociais (por exemplo, sobre as contas da marca Facebook, Twit-ter, Google, Foursquare) como uma ferra-menta de marketing

� 65% dos profissionais de marketing, ao comparar a eficácia do marketing entre dife-rentes meios digitais, Big Data é “um grande desafio” para o seu negócio.

Bigdata

O desafio e ao mesmo a promessa das no-vas tecnologias que prometem lidar com este grande volume de informações é permitir que os profissionais de marketing tomem melhores decisões em todos os níveis, sejam varejistas, fabricantes, prestadores de serviços ou até mesmo governos e ONGs.

Falando em Governo... que tal um exemplo bem recente de como as tecnologias que ma-nipulam Big Data podem prosperar?

Obama, o Presidente DigitalSe nas penúltimas eleições presidenciais nos Estados Unidos, Obama revolucionou, nas últi-mas ele abalou as estruturas do mundo digital. Ao fazer uso de Big Data, Obama colocou seus cientistas de dados para trabalhar e sua equipe montou um banco de dados gigantesco com colunas e colunas de informação sobre elei-tores. Em poucas palavras, o processamento dos dados estimou como cada grupo reagiria a cada tipo de abordagem e, ao colocar as ações em prática, os esforços eram medidos e viravam mais dados, que eram reinseridos no banco de dados e permitiam a obtenção de in-sights mais e mais inteligentes. Um verdadeiro Big Brother Eleitoral, como a própria equipe en-volvida carinhosamente apelidou.

Os dados vieram de campanhas passadas, empresas especializadas (como Experian e Acxiom), redes sociais, assinantes do apli-cativo Obama for America e etc. Um volume gigantesco de dados, chegando a 4gb pro-cessados por segundo, 8,5 bilhões de requisi-ções ao banco de dados e 180 tb de armaze-namento em três data centers.

Quer mais um exemplo de aplicação desta tec-nologia? Ok, vamos lá.

Cidades Inteligentes: Projeto Cidade 2020Com o objetivo de desenvolver um novo mode-lo de cidade inteligente sustentável, ecológica e economicamente por meio da análise da deman-da real dos cidadãos aliada às oportunidades de comunicação oferecidas pela internet e cada vez mais numerosos dispositivos conectados à rede, o projeto pretende atender as necessidades de usuários com serviços públicos aprimorados.

Além de integrar diferentes âmbitos e tecnolo-gias, o principal atrativo e diferencial do projeto é que a análise de dados obtidos em grande escala do comportamento urbano do cidadão, mediante a integração dos grandes dados di-gitais para aprimorar e definir os serviços ofe-recidos. A coleta destas informações sobre os cidadãos em termos de uso de transporte, energia, meio-ambiente e comunicação será utilizada para retroalimentar as tecnologias e os serviços desenvolvidos e assim permitirão ajus-tar os serviços interativos acessíveis oferecidos para as necessidades reais.

Além disso, já existem projetos mais ambicio-sos de aproveitar as informações de cidades inteligentes para gerar receita proveniente de anunciantes. Imagine o seguinte: e se uma te-lecom cruzar dados demográficos e de geolo-calização de seus assinantes e oferecer para empresas que desejam saber onde seu público alvo circula na cidade, a fim de escolher o me-lhor ponto para uma loja?

Respeitando a dualidade universal mais famo-sa, a tecnologia de Big Data é clamada pelo bem e crucificada pela “mal”. O problema, neste caso, é a preocupação com privacida-de. Enquanto o projeto de cidades inteligentes conserva a identidade do indivíduo e se importa somente com dados coletivos, a campanha de Obama utilizou os insights conquistados para ações one on one.

Nos últimos anos, legisladores e reguladores têm manifestado preocupações crescentes sobre o volume de dados que as empresas estão coletando, como essa informação é uti-lizada, se o dado coletado é vendido, e se os consumidores são avisados sobre as práticas dessas empresas.

Penso assim: é uma escolha do indivíduo forne-cer informações. Outro dia ouvi um amigo dizer: “não ligo para o modo como as redes sociais fazem uso dos dados pessoais. Não estou em nenhuma delas mesmo”.

Interconectividade: ônus e bônus. Cabe a nós escolher. </>

Marcela Daniotti é profissional de marketing online focada em conteúdo digital. Graduada em Publicidade e Propaganda pela Faculdade Cásper Líbero e especializada em Gestão de Marketing pela Fundação Getúlio Vargas.

pOr dentrO dO W3c Brasil

Por <Reinaldo Ferraz>

O World Wide Web Consortium (W3C) ater-rissou em terras brasileiras em outubro de 2007. Há quase seis anos, o primeiro escri-tório da América Latina atua com princípios muito claros: trabalhar por uma Web para todos, em qualquer dispositivo, em qualquer lugar, segura e confiável!

Trazer um escritório do W3C para o Brasil foi uma iniciativa do Comitê Gestor da Internet no Brasil (CGI.br) e do Núcleo de informação e Co-ordenação do Ponto BR (NIC.br) para que a co-munidade brasileira não seja apenas adotadora de padrões Web. O Brasil pode contribuir para o desenvolvimento da Web participando ativa-mente dos fóruns de discussões do W3C. Nós queremos que a realidade brasileira faça parte das discussões de padrões internacionais.

Mesmo acompanhando as discussões de al-cance mundial sobre grande parte dos pa-drões, o W3C Brasil dá atenção especial a de-terminados temas:

Open Web platform

Esse é o conjunto de tecnologias abertas cria-da para o desenvolvimento da Web. Entre eles, estão nossos conhecidos do cotidiano, como HTML, CSS, SVG, Web APIs etc. A utilização da Open Web Platform permite que qualquer pessoa possa implementar um componente de software da Web sem a necessidade de quais-quer aprovações ou ter que pagar qualquer taxa de licença. O W3C Brasil tem feito um grande trabalho de conscientização da comunidade da importância do uso de padrões abertos.

Dados abertos

Possibilita que dados públicos na Web estejam disponíveis em formato aberto, padronizados e compreensíveis por máquina. Com esses da-dos, outras pessoas podem fazer uso dessas informações e criar aplicações mesclando os dados das mais diversas fontes. Temos traba-lhado bastante para disseminar a cultura de da-dos abertos no Brasil e no mundo.

Acessibilidade na Web

Permitir que a Web seja acessada por qualquer pessoa, independentemente de alguma deficiên-cia, é fundamental para o maior princípio do W3C: uma Web para todos. A tecnologia trouxe auto-nomia para as pessoas com deficiência e por isso a acessibilidade na Web é tão importante.

W3C Brasil em 2013

Desde 2007, o W3C Brasil promove e partici-pa de ações e projetos para fomentar o uso e o desenvolvimento dos padrões. Dos diversos projetos que temos planejados para 2013, pos-so destacar alguns deles de grande importân-cia nacional e internacional.

Conferência WWW2013

A maior conferência mundial sobre a World Wide Web acontecerá no Brasil, de 13 a 17 de maio de 2013. O Rio de Janeiro foi a cidade escolhida para sediar esse grande encontro com os maiores nomes da Web mundial. Tim

18 > Coluna > Padrões Web

Berners-Lee, Jeff Jarvis, Luis von Ahn e Jon Kleinberg são apenas alguns dos palestrantes confirmados para esse evento, que tem como um dos organizadores o W3C Brasil. Acesse http://www2013.org/.

Conferência Web W3C Brasil

Também em 2013 acontecerá a 5ª edição da Conferência Web W3C Brasil, prevista para outubro. Uma conferência que reunirá a co-munidade Web brasileira para a discussão e o fomento do uso e desenvolvimento de pa-drões para uma Web livre e aberta. Acesse http://conferenciaweb.w3c.br/.

prêmio Nacional de Acessibilidade na Web

A segunda edição do Prêmio Nacional de Aces-sibilidade na Web foi lançado em janeiro de 2013 e estará com inscrições abertas em breve. Serão premiadas pessoas que fizeram grandes ações em favor da acessibilidade na Web, tecnologias assistivas, websites e aplicações que sigam pa-drões de acessibilidade e não criem barreiras de acesso para pessoas com deficiência. Acesse http://premio.w3c.br/.

Open Data Conference in Latin America and the Caribbean 2013

A Conferência sobre Dados Abertos na Améri-ca Latina e Caribe ocorrerá em junho de 2013, em Montevidéu, Uruguai. No âmbito do projeto Open Data for Development in Latin America and the Caribbean (OD4D), o W3C Brasil rea-lizará a conferência em parceria com a Comis-são Econômica para América Latina e Caribe (CEPAL), o Centro Internacional de Pesquisa e Desenvolvimento do Canadá (IDRC), o Banco Mundial, a Fundação Omidyar e o Governo do Uruguai. Reunirá grandes nomes engajados na discussão sobre dados abertos e abordará temas como o impacto dos dados abertos na sociedade, a importância dos dados abertos governamentais, o desenvolvimento econômi-

co e como assegurar a sustentabilidade e a escalabilidade dos projetos desenvolvidos com dados abertos. Acesse http:// www.od4d.org.

Ações do Dia Internacional das pesso-as com Deficiência

Todo dia 3 de dezembro, dia esse proclamado pela ONU como o Dia Internacional das Pes-soas com Deficiência, o W3C Brasil promove ações para a conscientização sobre a impor-tância da acessibilidade na Web. Em 2012, deixamos nossa página toda escura e fizemos uma ação espetacular de cenografia na mão do memorial da América Latina, em São Paulo (o vídeo está disponível na página do W3C Brasil em http://www.w3c.br/ ou diretamente pelo YouTube em http://youtu.be/mWuZfDnor2c).

Você também pode participar do W3C

Uma forma de participação são as listas de dis-cussão do W3C (http://lists.w3.org/). Grande parte dessas listas é pública e aceita participa-ções e contribuições da comunidade. Algumas delas, especialmente as relacionadas a Grupos de Trabalho, são restritas a membros (mais um dos grandes benefícios de se filiar ao W3C - http://www.w3c.br/filiese). Você também pode participar de traduções, revisões de pa-drões testes etc., tudo isso de forma aberta e li-vre. Esta a é a grande vantagem do W3C: permi-tir que todos possam contribuir para que a Web seja efetivamente de todos e para todos. </>

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

20 > Capa

O ladO B da tecnOlOgia criatividade e inOvaçãO alternativas

Lado B é uma expressão que surgiu com os antigos discos de vinil, onde os artistas apro-veitavam a pausa que havia para virar o disco para expor um outro lado do seu trabalho que não era aquele com maior

potencial de vendas, mas o lado mais experimental e alter-nativo. Esse outro lado podia não ter interesses comerciais e, por isso mesmo, era mais autêntico e representava me-lhor a essência do artista.

Por <Blab>

móveis, I Lv Yr GIF (http://www.desvirtual.com/i-lv-yr-gif-webapp/), que permite com-posições visuais interativas através de antigos GIFs animados. Com isso, temos que o de-senvolvimento de aplicativos não se restringe apenas aos engenheiros da computação, sen-do uma área das mais cobiçadas pelos artistas contemporâneos. Além do mais, o I Lv Yr GIF é um aplicativo é open source, o que demonstra que nem toda obra de arte precisa custar uma fortuna e pode, sim, ser gratuita – no universo digital a gratuidade é mais uma condição para a sua existência do que um princípio, pois dentro de mídias de massa dependemos de sua popu-larização para que o aplicativo permaneça vivo.

Do analógico para o digital, não existem mais lados, é mais uma questão sobre conter ou não conter informação, além de ser uma infor-mação que pode ser maleável, diferentemente do conteúdo analógico ao qual não podemos manipular. Mas, a grosso modo, nem porque deixamos de utilizar as mídias analógicas como principal meio de propagação, que o lado B se perdeu, aliás nem o velho vinil se perdeu, ele está mais vivo do que anos atrás. Mas, e se o chip tivesse um lado B? Qual lado do universo digital você estaria escutando? Será que você está encarando o universo digital como se fos-se um disco de vinil, com dígitos imutáveis, ou você está escutando o lado B do universo digi-tal e acessando o seu lado mais maleável?

Arte

Nossa cultura é inteiramente permeada por meios digitais e, no entanto, sem um lado B, sem um comparativo, não há crítica. Vílem Flusser, em seu livro A filosofia da caixa preta, usa como metáfora a câmera fotográfica para apontar a forma como usufruímos dos meios tecnológicos. Sabemos apertar um botão para tirar uma foto, no entanto, essa automatização nos afasta de todo o processo de como o sis-tema funciona.

A arte lida com os meios de seu tempo, e os artistas midiáticos de hoje representam o que há de mais avançado na arte. A atual tecno-logia não foi inicialmente desenvolvida para a atividade artística, porém são estes os respon-sáveis pelo desenvolvimento que vai além da dimensão técnica, desprogramando suas fun-ções e deixando a nú sua lógica. E isso faz com que muitos artistas estejam bem na frente de algumas empresas de tecnologia. A turma que pensa em desenvolvimento tecnológico pensa em padrões e tudo que possa agilizar a vida, claro, mas com isso acabam se arriscando mui-to pouco, e é aí que a arte entra, sujeita a errar e a ver coisas novas.

Giselle Beiguelman, midiartista, curadora e pes-quisadora, criou um aplicativo para dispositivos

22 > Capa

O Arduino, por exemplo, hardware livre que revolucionou a cena digital, é open source, ou seja, toda informação sobre seu desenvolvi-mento está disponível e você pode construir o seu próprio e ainda por cima comercializá-lo. Nem por isso seus desenvolvedores deixam de faturar, pois muita gente acaba comprando o Arduino produzido pelos próprios desenvol-vedores. Assim, eles faturam com as vendas e também se beneficiam com a expansão do número de usuários. Veja aqui alguns projetos bacanas que foram feitos com Arduíno no ano passado http://bit.ly/10cgmbk

A grande diferença entre a criação e a inovação é que a criação envolve a idéia, e a inovação envolve a aplicação de uma idéia. Até então, o papel do artista era o da criação e, após a ce-lebração de uma obra de arte, criam-se inúme-ras formas de utilização da idéia ali criada. Hoje o que vemos é o oposto: engenheiros e afins criando tecnologias, as quais artistas se ocu-pam de sua aplicação. Se a arte se contamina pela tecnologia, por que não deixar a tecnologia se permear pela arte?

Cadu Lacerda, artista multimeios do Rio de Ja-neiro, criou uma série de pinturas que se ba-seiam nas imagens obtidas por um algoritmo que ele mesmo criou utilizando uma ferramenta de código aberto que facilita o uso de determi-nadas linguagens de programação para desig-ners e artistas, tornando suas criações interati-vas e generativas, a Processing. Depois do seu surgimento, a arte e o design nunca mais foram os mesmos - http://processing.org/

Para a criação da série intitulada “Parasimétrica – Algoritmo das Cores”, Cadu utilizou o software para designar uma cor para cada letra, substi-tuiu as letras de um poema por pixels coloridos e os transferiu para a tela, originando a obra. Pode parecer estranho uma tela sem nenhum

tipo de interatividade participando de inúmeras exposições de Arte Digital, mas a função bási-ca que ele usou com este software para pintar o quadro exemplifica com a mais pura clareza o que o universo digital está constantemente fazendo: traduzir. Uma quantidade enorme de zeros e uns pode ser traduzida como letras que formam os textos que você lê no seu computa-dor. Em obras interativas, a posição cartesiana do seu mouse é traduzida como o ponto de ori-gem para algum outro acontecimento.

Muitas vezes é na simplicidade que se encontra o complexo. O trabalho de Cadu Lacerda aca-bou evoluindo para um aplicativo para iPhone – você aponta a câmera para uma imagem e o processo reverso se dá, os números obtidos pelas cores em RGB são substituídos por le-tras, e assim podemos ler o texto “existente” em cada imagem.

Futuro no passado

Muitas vezes a inovação vem de peças já ul-trapassadas, e é nessa releitura que surgem as ideias mais mirabolantes. O midiartista Mateus Knelsen desenvolveu, em 2012, um workshop ao estilo DYI, faça você mesmo, na Freguesia do Ó em São Paulo, onde os inscritos eram convidados a construir seu próprio carinho de rolimã e acoplar pequenos transmissores de si-nal de rádio e TV; ao descerem a ladeira, eles transmitiam estes sinais às TVs e rádios locais. Confira em http://labmovel.net/

A releitura do passado só é possível devido ao grande avanço tecnológico atual, que nos permite, por exemplo, transformar uma fita K7 em um minicomputador, devido a uma tecno-logia que é cada vez mais potente, porém em menores escalas. O Raspberry Pi, computador

Projeto utilizando Arduino (Polar Plotter - http://ow.ly/hUJTW)

Workshop de Mateus Knelsen

que surgiu em 2012 do tamanho de um cartão de crédito, é o auge da tecnologia hoje e quem mais esta aproveitando disto é o lado B. Vale a pena ler este artigo que mostra 10 criações com Raspberry Pi e como um mini-PC pode ser incrível: http://ow.ly/hdUyX

Muita coisa nova pode surgir do passado, mas nem tudo que vemos de inovador é tão novo assim. Os filmes 3D estereoscópicos que assis-timos com os óculos ganharam enorme credibi-lidade com o filme Avatar, de James Cameron, mas eles existem desde 1915; só que agora, com a tecnologia digital, ganharam força nova-mente. Outra grande cartada do passado são as holografias, que estão fazendo sucesso em shows onde antigos músicos, digamos já “ex-tintos”, voltam de suas tumbas através de ima-gens holográficas que interagem com a banda real. Esse é um efeito que era muito usado por antigos mágicos e se chamava phantasmago-ria, e não eram holografias, mas um jogo de es-pelhos muito bem feito.

Lixo eletrônico

Por isso não jogue fora o passado, aliás, não jogue nada fora! O lixo eletrônico pode ser va-liosíssimo nas mãos de pessoas como as do Metareciclagem (rede.metareciclagem.org), que começaram recebendo computadores usados para serem concertados e doados em projetos sociais. O grupo amadureceu e hoje se envolve em diversas ações de desconstrução para reconstrução da tecnologia como propos-ta de transformação social. Na página inicial do site você é recebido com todo o bom humor

que jamais se esperaria de um grupo que se envolve com desenvolvimento tecnológico e políticas sociais.

O lado mais humano dentro dos hackerspaces

Mais do que por produtos, o lado B é for-mado por pessoas. Parece que a galera des-colada esta invadindo o espaço dos nerds. Radamés Ajna lidera já há alguns anos o ha-ckerspace do SESC Pompéia, em São Paulo (http://hackzilian.com). Muito jovem para tanto conhecimento, ele não tem medo de compartilhar livremente tudo que sabe para quem estiver disposto a aprender. Em uma época onde a informação vale muito, os ha-ckerspaces funcionam ao oposto disto.

Um hackerspace, como o nome já diz, é um lo-cal onde hackers, curiosos que gostam de fuçar coisas, se encontram fisicamente. É um movi-mento internacional que vem crescendo todos os dias, com grupos e mais grupos surgindo, com o intuito de compartilhar seus conhecimen-tos construindo uma comunidade de gente es-perta capazes de superar qualquer desafio.

Esses grupos existem, mais do que pelo encon-tro físico, por uma vasta lista de comunidades que compartilham na rede tutoriais e códigos sobre tudo que diz respeito a este universo, en-voltos, é claro, sobre a bandeira do software li-vre. São inúmeros sites que podem te ensinar a fazer qualquer tipo de coisa, aparentemente de uma sofisticada tecnologia, mas que pode ser

Imagem: Parasimétrica – Algoritmo das Cores

construída com objetos que estão à nossa volta.

Ao compreendermos como escrever nossos próprios softwares ou construir nossas pró-prias máquinas, compreendemos mais o mun-do à nossa volta e podemos nos expressar melhor de uma maneira que rompe com os limites que as grandes instituições e corpora-ções estão nos impondo.

A Casa de Cultura Digital, em São Paulo, é quase uma vila de hackerspaces – como a sede do Garoa Hacker Club – engajadíssimos e em um constante clima de festa. Um dos projetos mais interessantes que surgiu lá é o Ônibus Hacker, isso mesmo, um ônibus todo hackeado e cheio de hackers viajando pelo Brasil compartilhando conhecimento. O proje-to foi financiado através de crowdfunding, ou seja, por pessoas físicas interessadas na ini-ciativa e engajado pelo site Catarse.

Outro projeto surgiu quando decidiram comprar uma Makerbot, impressora que imprime peças em 3D, para construir sua própria máquina de pinball e perceberam que a impressora poderia ser bem melhor. Daí fizeram a impressora impri-mir outra impressora 3D, ainda mais avançada.

A Casa de Cultura Digital ainda abriga o Meme-Lab (memelab.com.br), onde trabalham o VJ Pixel e a produtora Andressa Viana, que têm a pilha de produzir tanto um evento como um software – a questão é realizar. Um dia decidi-ram que queriam criar seu próprio software de Realidade Aumentada e reuniram quem mais estava a fim de se envolver, fuçaram um pouco e criaram o Jandig, software que já participou de vários festivais de cultura digital, mostrando o que um grupo de pessoas ousadas é capaz.

Mas o desenvolvimento de gambiarras, aquele jeitinho brasileiro de improvisar soluções, não se

restringe ao eixo Rio-São Paulo. O grupo Gam-biologia (gambiologia.net/blog), de Belo Hori-zonte, marca presença na cena com sua cultura pop tupiniquim. E em festivais e encontros de cultura digital podemos ouvir toda uma série de sotaques baianos e pernambucanos discutindo códigos e calando muito carioca e paulista.

Os que frequentam o universo do desenvolvi-mento tecnológico formam uma cena cada vez mais variada e animada. Entre eles está Mar-celo Castilha, músico da banda Improvisado. Ele vira o disco da cena eletrônica noturna e toca jazz em uma das festas mais descoladas de São Paulo; durante o dia ele revira o dis-co novamente e se introduz na cena hacker: já conduziu o hackerspace do SESC Belenzinho e já foi visto usando tupperwares como distorce-dores de som, criando e modificando músicas com um resultado harmônico. Mais um pouco e vamos ter o lado C da tecnologia!

Conclusão

Podemos virar o disco, ou unir os lados. Se-gundo Arlindo Machado, o segredo é a conver-gência – quanto mais individualizamos os cam-pos de atividade, menos produtivos somos, enquanto a hibridização gera possibilidades e melhores soluções. Compartilhar é a chave do negócio e, sem as comunidades que disponi-bilizam livremente a informação na rede, nada disso seria possível.

Olhar para o outro lado é estar livre de padrões, criar com as próprias mãos e ver que é possí-vel alcançar seus objetivos por diferentes cami-nhos. Sem medo de errar, somos capazes de improvisar e de onde menos esperamos é que surgem as ideias mais bacanas. O lado B é que aqui a gente faz samba, e esse é o nosso ritmo, uma incorporação de diversos gêneros com um resultado singular. </>

24 > Capa

Texto: Blab - Adriana Pedrosa e Iliana GrinsteinFotos: cedidas

O Blab é um coletivo voltado para tecnologias audiovisuais e interativas, que reúne designers, programadores, videomakers, músicos, surfistas e ex-modelos para projetos imersivos extrasensoriais.

festival das luzes na era da interatividadePor <Lina Lopes>

26 > Criatividade Tecnológica

Tomei de empréstimo para estas divaga-ções o tema de um dos tópicos aborda-dos na Conferência do Festival da Luzes de Lyon 2012, organizado pela LUCI As-sociation e Prefeitura de Lyon, a que tive a oportunidade de assistir. Mais informações no site da LUCI em http://bit.ly/V5q3kN

Fiat Lux. Deus criou a luz e o homem criou a iluminação artificial, com a qual dominou a noite, afugentou os perigos e foi para a ba-lada. Dizem que, desde 1850, os lionenses saem às ruas para admirar a atmosfera lumi-nosa que a cidade ganha, sempre no dia 8 de dezembro.

Inicialmente, essa iluminação era criada com velas acesas e dispostas nas janelas das casas de Lyon em homenagem e agradeci-mento à Virgem Maria por ela ter salvado a cidade da peste. Essa, pelo menos, é a his-

tória contada sobre o mais antigo e famoso festival das luzes, “La Fête des Lumiéres”, em Lyon, França. O que sempre me leva a pensar em como as possibilidades tecnoló-gicas de iluminação mudaram muito nestes 150 anos de história.

Da parafina ao LED, passamos por ilumina-ção a gás, luminárias de querosene, lâmpa-das a arco voltaico, lâmpadas elétricas incan-descentes e fluorescentes, neon, fibra ótica, light flex, refletores cênicos, moving heads, e assim por diante - isso sem contar o advento do cinema e seus desdobramentos digitais, como a projeção mapeada (videomapping). Um festival das luzes discute tudo isso, já que é, de fato, uma relação íntima entre as tecnologias de luz disponíveis, a arquitetura, o espaço público e a arte.

Et Si - Daniel Knipper Production GL EvetnsAudiovisuel (c) Muriel ChauletFete des Lumieres

Para ampliar nosso entendimento dessas re-lações, voltemos à balada, ou melhor, à ilu-minação pública. Ela é fruto de um processo de urbanização crescente a partir do século XIX, que ampliou o convívio em espaços pú-blicos noite adentro, gerando uma noção de segurança aos cidadãos. O que um festival das luzes dilata nesse contexto é a celebra-ção conjunta dos conhecimentos científicos, responsáveis pela história humana, aplicados à imaginação e ao lúdico. Eu, pessoalmente, considero essa tarefa uma arte.

Dentre as obras que gostaria de destacar, pela união que fizeram entre o estético e a solu-ção engenhosa pela sua simplicidade, está a “Et Si?”. Nela, as imagens luminosas, que ti-nham suas referências no universo das gran-des pinturas, estavam sobre as fachadas de edifícios que faziam parte do patrimônio da cidade, como o Palácio da Justiça, a Cate-dral de Saint-Jean e a Basílica de Fourvière (erguida em homenagem à Virgem Maria). Dessa forma, a dimensão espacial chama-va a atenção ao longo do canal. Pensei se estaria diante do maior videomapping que já tinha visto.

Para minha surpresa, a solução tecnológi-ca da obra era bem menos onerosa do que

eu esperaria, uma vez que, do lado opos-to do canal, havia uma dúzia de refletores cênicos com lâmpadas de alta potência da família dos elipsoidais (na verdade, de-viam ser do tipo seguidores). Esse refle-tor possui a capacidade de utilizar gobos, uma espécie de filtro físico que possui ima-gens fixas e, dessa forma, diminui o custo da produção. As imagens, assim, muda-vam dinamicamente e acompanhavam um videomapping (sim, havia uma parte mape-ada, mas bem menor). A imersão dada pela projeção em todas aquelas fachadas, pelo reflexo na água e ainda com uma combi-nação entre luzes e videomapping, foi mais que garantida.

Outra obra que gostaria de citar é “Highlights” – não imagino melhor nome para descrevê--la, esta sim um videomapping monumental. Trata-se de um vídeo de aproximadamente sete minutos que se estende por três facha-das distintas que cercam a Place des Ter-reaux. O vídeo foi feito com bailarinos que, em determinados momentos, são projetados como pilastra dos edifícios e, em outros, aparecem desenhando as fachadas com luz de lanterna. Nota para a sincronização dos moving lights, refletores eletrônicos que pos-

sibilitam o movimento do facho de luz pelo espaço, que entram em cena para acompa-nhar o videomapping com luzes coloridas, ou para fazer parte da narrativa.

Para não se perder entre as inúmeras obras do festival de Lyon, foi criado um app (http://bit.ly/142imc8), no qual constavam pequenas curadorias de caminhos propos-tos ao longo da cidade para visualizar as in-tervenções luminosas (eram cerca de 60 pro-jetos). As rotas do app contavam com mapas e, se conectadas à internet 3G, eram capa-zes de orientar o usuário pelo festival. Além disso, era possível compartilhar as próprias fotos do festival, votar nas mais interessan-tes, e na iluminação que mais agradou, tudo por meio do aplicativo. Não tive oportunida-de de usar as opções que necessitavam de Internet - vai ficar para o próximo ano.

E o que isso tem a ver com a era da interatividade?E assim, meio sem querer e timidamente, este texto adentra ao tema: interatividade. Primeiro, vamos definir o que tratamos como interatividade. Da mesma forma que tomei de

empréstimo o título, peguei emprestado tam-bém o conceito geral da série de palestras com a participação do artista Miguel Chevalier (www.miguel-chevalier.com), que tratou a interatividade como um modo de encorajar a participação e a apropriação da obra por parte do espectador.

O conceito não é novo para um usuário mais avançado da Internet e dos videogames. Contudo, o suporte digital das novas tecnolo-gias permite ampliar a ideia de interatividade para espaços cada vez mais diversificados. Entre as obras presentes no festival, pude perceber o uso generalizado de câmeras de detecção de profundidade, como a kinect. Ela emprega uma técnica que não é nova e consiste em usar iluminação infravermelha e uma câmera sensível a essa iluminação para detectar um corpo no espaço. O que a kinect fez foi criar uma ferramenta estável e acessí-vel com esse conhecimento e ampliar para uma detecção 3D do seu objeto. Esse siste-ma de computação visual é tão aperfeiçoado e tangível que a opção por seu uso, atual-mente de maneira massiva, em obras ditas interativas não é nenhuma surpresa. Basica-mente, essa tecnologia foi usada no festival para permitir ao espectador usar seu corpo para interferir nas projeções. Lembro-me

28 > Artigo > Criatividade Tecnológica

Highlights, le fil lumière - Skertzò (c) Fabrice Dimier/Fete des Lumieres

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

especificamente do “LABO#6”, uma experi-ência de estudantes de arte e design, e da obra “Murs Sensibles”, na fachada da Alian-ça Francesa de Lyon. Creio que havia mais uma obra, o “Eclat-Fresque Interactive”, que não consegui ver. Todas elas apontam para a expectativa de o festival se alinhar com essa questão contemporânea de engajamento do seu público, tornando-o coautor e provocan-do uma experiência cada vez mais afetiva.

Quem acompanhou o Intercon 2012, organi-zado pelo iMasters, pode ver na Arena Cria-tividade, eu e o parceiro Luis Leão demons-trando o uso da kinect. Mudamos as cores da iluminação lateral do evento de acordo com o movimento horizontal da mão (da esquerda para a direita) em frente à câmera. Para quem quiser ainda dar uma conferida nas experiên-cias que fizemos com a iluminação do Inter-con e possibilidades interativas, deixo o link: http://bit.ly/Y6ArJf

É claro que sistemas de computação visual que rastreiam o corpo no espaço não são a única forma de se fazer interatividade. Ainda temos outra possibilidade da qual o Festival talvez se aproprie nos próximos anos, como a internet das coisas. Usar twitters, instagra-

ms e outras redes sociais, ou mais ferramen-tas da rede para modificar e interagir com as obras, é uma possibilidade real hoje em dia. Outra novidade à qual vale ficar atento é o “hue”, que a Philips lançou em outubro (http://bit.ly/S7g7Xc), um sistema de ilumi-nação wireless em que o usuário é capaz de, a partir de seu sistema (iphone/ipad ou android), controlar a intensidade e a cor das lâmpadas instaladas. Não vejo a hora de en-contrar uma dessas lâmpadas na balada. </>

<!DOCTYPE html><html lang=”en”> <head> <meta charset=”utf-8”> <title>Bootstrap</title> <meta

name=”viewport” content=”width=device-width, initial-scale=1.0”> <meta name=”description” con-

tent=””> <meta name=”author” content=””>  <link href=”assets/css/bootstrap.

css” rel=”stylesheet”> <link href=”assets/css/bootstrap-responsive.css” rel=”stylesheet”> <link

href=”assets/css/docs.css” rel=”stylesheet”> <link href=”assets/js/google-code-prettify/prettify.

css” rel=”stylesheet”>    <link

rel=”apple-touch-icon-precomposed”

sizes=”144x144”

href=”assets/ico/apple-touch-icon-144-precom-

posed.png”> <link rel=”apple-touch-icon-precomposed” sizes=”114x114” href=”assets/ico/apple-touch-

icon-114-precomposed.png”> <link rel=”apple-touch-icon-precomposed” sizes=”72x72” href=”assets/ico/

30 > Opinião

fra

meW

Or

ks

par

a f

rO

nt-

end Após o surgimento do Bootstrap (de-

senvolvido no Twitter), vários outros fra-meworks têm surgido. Isso representa um avanço na padronização e o acesso mais fácil a webstandards ou pode ser uma ar-madilha quando você precisa desenvolver multi-plataforma e com a preocupação

com acessibilidade? Por quê?

Quando este termo de CSS Frameworks surgiu, havia sim um certo receio do uso, pois não se enxergava o verdadeiro potencial que os Framewors poderiam proporcionar. Para quem era acostumado a “fazer na mão”, houve um certo receio de seu uso. Em alguns casos ele pode não se aplicar, dependendo da complexidade dos layouts. Hoje eles estão mais “maduros” com algumas melhorias em acessibilidade e responsivo. Mas eles ainda tem muito a evoluir, porém, há casos de frameworks modificados derivados do Bootstrap (Twitter), que estão fazendo melhorias além da versão standard do mesmo, afim de suprir estas deficiências. No mesmo ritmo da Biblioteca jQuery, eles estão também deixando o legado de suporte a navegadores antigos e ficando mais leves e também com técnicas de OOCSS (Object Oriented CSS), que fazem o uso inteligente do CSS. Existem também uma variedade de frameworks conhecidos como o Fondation (Zurb Fondation), Semantic Grid (Semantic.gs), 960.gs e entre outros. <Richard Duchatsch Johansen> é front-end Developer na empresa Eventials.com e membro do GT de Acessibilidade

do W3C Brasil

Eu imagino que as duas coisas. O Twitter Bootstrap e seus congêneres não afetam diretamente na padronização e no acesso aos web standards, pois o papel deles, na verdade, consiste em ajudar a tornar o desenvolvimento para web mais prático, versátil e rápido. Em contrapartida, sabendo que esses frameworks procuram cobrir a maior parte dos elementos que usamos no dia a dia, padronizações proprietárias nascem naturalmente, o que é interessante para o estudo de quem está começando. Digo “proprietárias” porque as decisões partem das equipes que criaram e mantêm os projetos, o que muitas vezes dão margem para resultados inconsistentes e que não agradam a maioria. É preciso cuidado para decidir quando usar (ou não usar) esses frameworks.

<Ramon Bispo> é Designer e Desenvolvedor

O surgimento de frameworks de desen-volvimento só veio para somar e ajudar na padronização da web, mas para ter um projeto com o mínimo de acessibilidade, precisamos de mais que isso. Frameworks como html5boilerplate, fondation, sass compass... ajudam e muito a produtivida-de no frontend, mas precisamos aplicar de forma correta (pensando em acessibilidade). A forma correta é, além de ter um código com semântica, aplicar WAI ARIA (Web Ac-cessibility Initiative - Accessible Rich Inter-net Applications - http://www.w3.org/WAI/intro/aria.php) em todos os projetos. WAI ARIA seria o “framework” de acessibilidade, estende a semântica do documento para fornecer esclarecimentos adicionais sobre o estado da interface e como interagir com ele. Mas voltando, a pergunta inicial, não é uma armadilha o sur-gimento dos frameworks. Para se desenvolver algo multplataforma e acessivel, além de “seguir fielmente os frameworks”, de-vemos aplicar as diretrizes de acessiblidade / semantica. <Sergio Nascimento> (aka Elvis Detona) é frontEnd De-veloper na agencia Tribo Inte-ractive e um dos organizadores do frontInSampa

É fato que têm surgido al-guns frameworks interessantes, e com eles vem o crescimento do envolvimento da comunidade frontend com o mundo open source, trazendo um ar bem mais colaborativo. Esses frameworks acabam criando ou ajudando a definir padroniza-ções de código, uma boa documentação centralizada, e muitas vezes bem alinha-dos com os padrões web e de acessi-bilidade, mas cabe ao desenvolvedor refletir sobre os impactos que ele trará a performance, curva de aprendizado da equipe e custo de manutenção, den-tre boas opções no mercado podemos destacar: Twitter Bootstrap, Skeleton,

Zurb Foundation.<Davidson fellipe> é front-end Engineer

na Globo.com e BrazilJ-foundation

Acredito que seja um avanço em questões estruturais da interface, mas em questões de webstandards penso que não ajuda em muita coisa. Quanto a questão de acessibi-lidade deixa um pouco a deseja não utiliza algumas das tecnologias da W3C como, por exemplo, WAI-ARIA e são poucas as empresas que tem o zelo da “Web de to-dos para todos”. A utilização de um fra-mework pode ajudar como também atra-palhar e deixar o desenvolvimento de um produto bem caótico, tudo depende de como será implementado e a acessibilida-de e da mesma forma deve ser pensada deste o começo do projeto, ela não deve ser vendido como uma “feature” a mais,

mas sim como cumprimento dos webs-tandards e das leis sancionadas pelo Governo Federal nesse quesito. <Bruno pulis> é Web Developer

na 3bits Estúdio Interativo e participante ativo dos gro-pos “Acessibilidade Digi-

tal” e “frontend Brasil”

De modo geral, todos os frameworks base-ados no Twitter Bootstrap são bons. Essa popularização é boa por que os bootstraps ajudam na padronização do código usa-do no projeto, sugerindo a criação de um CSS reutilizável e também oferecem um grid system responsivo, isso facilita mui-to no desenvolvimento multi-plataforma não atrapalhando em nenhum momento a acessibilidade, mas também não torna uma página mais acessível, com um bootstrap fazer páginas mais acessíveis continua sen-do uma responsabilidade do desenvolvedor. <Ofelquis Gimenes> é Desenvolvedor front-end freelancer.

Confiança, CertifiCados digitais e autentiCação

32 > Artigo > Segurança

Confiança x Autenticação

A diferença fundamental entre autenticação e confiança está na confirmação de algo. Enquanto que na autenticação duvidamos até que se prove a veracidade, na confiança acreditamos até que algum evento prove que estamos errados. Para usuários, o coneito de autenticação segue o mesmo princípio. Ele se identifica com seu nome, email etc. e, através de alguma das três formas descritas, confirmamos sua identidade:

1. Através de algo que ele é: a biometria é, talvez, um dos métodos mais eficientes e seguros para se confirmar uma identidade. Impressão digital, DNA etc., são padrões com os quais o usuário nasce. É extremamente difícil falsificar esse tipo de padrão, mas também é relativamente caro e complexo utilizar esse tipo de autenticação em algumas aplicações

2. Através de algo que ele saiba: essa é, provavelmente, uma das formas mais comumente utili-zadas em uma aplicação. Quando solicitamos ao usuário uma senha, nome do primeiro pro-fessor, nome do bichinho de estimação etc., estamos pedindo algo que o usuário sabe e, teoricamente, apenas ele sabe.

3. Através de algo que ele tenha: essa formatem sido cada vez mais utilizada por aplicações nas quais a autenticidade da informação é fundamental. É o caso, por exemplo, de internet banking, em que um Token ou um certificado digital é fornecido ao usuário. Quando utilizamos essa forma de autenticação, estamos usando algo que o usuário tem.

É comum, em uma aplicação, termos um formulário no qual o usuário informa um identificador (nome de usuário, email etc.) e uma senha. Chamamos essa senha de autenticador de identida-de e, com ela, através de consulta em uma base de dados, verificamos se determinada senha pertence à determinada identidade. A grande pergunta que fica é: “A informação provida pelo usuário é autêntica?”

Uma vez que não temos como confirmar se foi, de fato, o dono da credencial que a utilizou, penso nessa verificação como confiança, e não como autenticação. O usuário pode ter perdido a senha, pode ter sido roubado, N coisas podem ter acontecido, inclusive ter emprestado a senha para alguém. Se outra pessoa, em vez do dono, estiver utilizando essa identidade, mesmo que o par “identidade e senha” seja válido, ele não é autêntico.

Certificado digital

O certificado digital é um arquivo que contém diversas informações sobre a identidade de alguém ou alguma coisa. Além de dados como nome (do indivíduo, da empresa ou de uma máquina), ci-dade, estado (UF), país etc., o certificado digital funciona como uma espécie de contrato, no qual uma autoridade certificadora assina o certificado, afirmando que os dados daquele certificado pertencem àquela identidade.

Cada certificado digital possui um par de chaves criptográficas assimétricas - uma pública, que é enviada para o destinatário, e uma privada, que é de posse e responsabilidade exclusiva do dono do certificado.

Por <João Neto>

Quando uma comunicação é estabelecida, por exemplo, entre Fulano e Beltrano, Fulano recebe de Beltrano sua chave pública, utiliza sua chave privada para criptografar a informação para a chave pública de Beltrano e envia a mensagem. Como Fulano utilizou sua chave privada para criptografar para a chave pública de Beltrano, mesmo que a mensagem seja interceptada, apenas a chave privada de Beltrano poderá ser utilizada para descriptografar a mensagem de Fulano.

Essa abordagem é utilizada na autenticação digital de forma geral. Podemos utilizar um certifica-do digital para criptografar dados enviados entre cliente e servidor, para assinar digitalmente um documento, comprovando a leitura e a aceitação, para autenticação de usuários, para afirmar que os dados contidos em uma nota fiscal eletrônica são verdadeiros etc.

Para o propósito deste artigo, vamos usar um cenário hipotético de uma aplicação rodando em localhost. Essa aplicação chama-se example.localhost, e vamos fazer esse nome resolver para o IP 127.0.0.1. O primeiro passo é criar o certificado da CA.

Nota: Pressupõe-se, nos passos abaixo, que a máquina onde serão executados já possui opens-sl, Apache httpd, mod_ssl e php com a extensão openssl.

CA – Autoridade certificadora

1. Criaremos um diretório de forma que seja inacessível publicamente. Nesse diretório, criaremos as chaves e os certificados.

2. Dentro desse diretório, criaremos um diretório para o certificado da CA. Assim que criado, entramos nele diretório e utilizamos openssl para gerar a chave (vai solicitar a senha da chave):

3. Utilizamos a chave para gerar uma requisição de assinatura (CSR) e o certificado da CA:

$ mkdir ~/certs

$ mkdir ~/certs/ca$ cd ~/certs/ca$ opensslgenrsa -des3 -out ca.key 4096Generating RSA private key, 4096 bit long modulus..........................................................................................................++.....................................................................++e is 65537 (0x10001)Enter pass phrase for ca.key:Verifying - Enter pass phrase for ca.key

$ opensslreq -new -x509 -days 365 -key ca.key -out ca.crtEnter pass phrase for ca.key:You are about to be asked to enter information that will be incorporated into your certificate request.What you are about to enter is what is called a Distinguished Name or a DN.There are quite a few fields but you can leave some blankFor some fields there will be a default value,If you enter ‘.’, the field will be left blank.-----Country Name (2 letter code) [XX]:BRState or Province Name (full name) []:Sao Paulo

Certificado do servidor

1. Criamos um diretório para o certificado do servidor de forma que seja inacessível publicamente. Da mesma forma que fizemos para a CA, vamos gerar a chave:

2. Com a chave, vamos gerar uma requisição de assinatura (CSR) para o servidor:

$ mkdir ~/certs/server$ cd ~/certs/server$ $ opensslgenrsa -des3 -out server.key 4096Generating RSA private key, 4096 bit long modulus...................................................................................++..............................................................................................................................................................++e is 65537 (0x10001)Enter pass phrase for server.key:Verifying - Enter pass phrase for server.key:

$ opensslreq -new -key server.key -out server.csrEnter pass phrase for server.key:You are about to be asked to enter information that will be incorporated into your certificate request.What you are about to enter is what is called a Distinguished Name or a DN.There are quite a few fields but you can leave some blankFor some fields there will be a default value,If you enter ‘.’, the field will be left blank.-----Country Name (2 letter code) [XX]:BRState or Province Name (full name) []:Sao PauloLocality Name (eg, city) [Default City]:Sao PauloOrganization Name (eg, company) [Default Company Ltd]:iMastersOrganizational Unit Name (eg, section) []:devCommon Name (eg, your name or your server’s hostname) []:example. localhostEmail Address []:[email protected]

Please enter the following ‘extra’ attributesto be sent with your certificate requestA challenge password []:An optional company name []:


Locality Name (eg, city) [Default City]:Sao PauloOrganization Name (eg, company) [Default Company Ltd]:iMastersOrganizational Unit Name (eg, section) []:devCommon Name (eg, your name or your server’s hostname) []:Minha CAEmail Address []:neto.joaobatista@localhost

Nota: perceba que, ao contrário do certificado da CA, utilizamos o nome do servi-dor em Common Name. Se não existir um nome de domínio, então o Ip do servidor deverá ser utilizado.

3. Usamos o certificado da CA, que criamos anteriormente, para assinar a requisição de assi-natura do servidor:

Nesse instante temos: Chave privada da CA, Certificado da CA, Chave privada do servidor, Re-quisição de assinatura de certificado do servidor e Certificado do servidor assinado pela CA. Precisamos configurar o servidor:

1. Adicionamos a linha 127.0.0.1 example.localhost ao arquivo hosts (/etc/hosts). Isso garantirá a resolução do nome example.localhost para o IP 127.0.0.1:

2. Criamos do DocumentRoot, onde serviremos nossa aplicação:

3. Criamos um VirtualHost para nosso example.localhost:

Nota: O conteúdo de /etc/httpd/conf.d/example.conf segue abaixo:

$ openssl x509 -req -days 365 -in ~/certs/server/server.csr -CA ~/ certs/ca/ca.crt -CAkey ~/certs/ca/ca.key -set_serial 01 -out ~/ certs/server/server.crtSignature oksubject=/C=BR/ST=Sao Paulo/L=Sao Paulo/O=iMasters/OU=dev/CN=example. localhost/[email protected] CA Private KeyEnter pass phrase for /home/neto/certs/ca/ca.key:

$ sed -i ‘1 i 127.0.0.1 example.localhost’ /etc/hosts

$ mkdir /var/www/html/example /var/www/html/example/public

$ vi /etc/httpd/conf.d/example.conf

NameVirtualHost 127.0.0.1:443

<Directory “/var/www/html/example”> Options -IndexesAllowOverride All Order allow,deny Allow from all</Directory>

<VirtualHost 127.0.0.1:443>SSLEngine ONSSLCertificateFile /home/neto/certs/server/server.crtSSLCertificateKeyFile /home/neto/certs/server/server.keySSLCACertificateFile /home/neto/certs/ca/ca.crt

[email protected] /var/www/html/example/publicErrorLog /var/www/html/example/error_logServerName example.localhost:443LogLevel warnServerSignature On</VirtualHost>

Após reiniciar o serviço httpd, já teremos acesso ao nosso example.localhost utilizando SSL. Um detalhe interessante é que, como nossa CA não é reconhecida pelo navegador, veremos uma tela como a abaixo:

Como podemos ver, voltamos àquela questão de confiança. Como o navegador (no caso, Firefox), não reconhece a CA, ele não consegue dizer se aquele certificado é autêntico. Isso pode ser um problema se estivermos trabalhando em um ambiente web, mas em um ambiente controlado, como de uma intranet, essa situação não é problemática, e basta adicionar o certificado da CA na lista de expedidores confiáveis do browser.

Configurando a aplicação

1. O primeiro passo para configurar a aplicação é fazer o servidor solicitar o certificado do usu-ário. Para isso, criaremos um arquivo .htaccess no diretório /var/www/html/example, com o seguinte conteúdo:

A primeira linha diz que o certificado é opcional. Se estivermos, por exemplo, em uma área ad-ministrativa da aplicação, podemos utilizar require em vez de optional. O require exigirá que o usuário tenha um certificado e, se não tiver, o servidor não permitirá acesso.

A segunda linha diz que o servidor deve verificar certificado do client e verificar a CA que o expe-diu. Isso é especialmente interessante, pois configuramos anteriormente o certificado da CA no nosso VirtualHost, ou seja, se o certificado do usuário não for expedido por uma CA em que o servidor confia, o servidor não permitirá acesso ao usuário.

SSLVerifyClient optionalSSLVerifyDepth 1SSLOptions +StdEnvVars


A terceira linha vai pedir para o servidor definir as variáveis de ambiente com alguns dados do cer-tificado. Essas variáveis estarão na super global $_SERVER, com o prefixo SSL_CLIENT_*. Vamos utilizar esses dados para autenticar o usuário.

Por uma questão de espaço, não vou demonstrar todo o código da aplicação de exemplo aqui, contudo, ela está disponível no Github e pode ser obtida através do seguinte:

Ao clonar o repositório, a seguinte estrutura será criada:

Da mesma forma que utilizamos openssl para gerar os certificados da CA e do servidor, utilizare-mos as funções openssl_* do PHP para gerar as chaves, as requisições de assinatura de certifica-do e os certificados do cliente. Abaixo, a descrição das funções utilizadas:

openssl_pkey_new

A função openssl_pkey_new será utilizada para a geração das chaves. Ela é equivalente ao seguinte:

openssl_csr_new

A função openssl_csr_new será utilizada para gerar a requisição do certificado. Ela é equiva-lente ao seguinte:

openssl_csr_sign

A função openssl_csr_sign será utilizada para assinar uma requisição de assinatura de certificado utilizando uma chave. Ela é equivalente ao seguinte:

$ git clone git://github.com/netojoaobatista/example.git$ composer.phar install

$ cd ./example$ find ../.htaccess./composer.json./error_log./public./public/login.html./public/login.php./public/register.html./public/register.php./public/index.php./src./src/neto./src/neto/openssl./src/neto/openssl/CertificateSigningRequest.php./src/neto/openssl/Certificate.php./src/neto/openssl/CertificateKey.php./src/neto/openssl/OpenSSLInfrastructure.php./src/neto/Registration.php

openssl genrsa -des3 -out client.key 4096

openssl genrsa -des3 -out client.key 4096

openssl x509 -req -days 365 -in client.csr -CA ca.crt -CAkey ca.key -set_serial 01 -out client.crt

Sempre que o usuário acessar a aplicação, verificaremos a existência de um certificado:

Conclusão

Apesar de mais burocrático, a utilização de um certificado digital de cliente para autenticação adicionará uma camada de segurança à aplicação. Podemos, inclusive, chamar essa camada extra de autenticação em dois passos. Primeiro verificamos o certificado digital, sua validade (para uma política de renovação de credenciais) e, então, solicitamos ao usuário suas creden-ciais (nome e senha).

Uma vez autenticado no sistema, todas as ações do usuário podem ser assinadas; por exemplo, se a aplicação tratar de documentos que precisam ser aprovados pelo presidente da empresa, ele pode utilizar seu certificado digital para assinar o documento, evitando a impressão do documento e o tempo necessário para trafegar esse documento até sua sala.

Além disso, o uso de certificados digitais permite que os usuários da aplicação utilizem seus cer-tificados para criptografar dados confidenciais. Por exemplo, essa medida foi utilizada pelo novo Mega para armazenar os arquivos dos usuários. Uma vez que a chave é assimétrica, apenas o dono da chave privada pode descriptografar um arquivo armazenado no servidor. Como o serviço Mega não possui essas chaves, eles podem alegar que não conhecem o conteúdo armazenado em seus servidores, isentando-se da responsabilidade e de acusações de pirataria. </>


if (!isset($_SERVER[‘SSL_CLIENT_M_SERIAL’]) || !isset($_SERVER[‘SSL_CLIENT_V_END’]) || !isset($_SERVER[‘SSL_CLIENT_VERIFY’]) || $_SERVER[‘SSL_CLIENT_VERIFY’] !== ‘SUCCESS’ || !isset($_SERVER[‘SSL_CLIENT_I_DN’]) || $_SERVER[‘SSL_CLIENT_V_REMAIN’] <= 0) {

//usuário não possui um certificado da aplicação //redirecionamos o usuário para o formulário de registro.} else { //usuário possui um certificado da aplicação //utilizaremos as variáveis SSL_CLIENT_M_SERIAL e SSL_CLIENT_I_DN para //identificar o usuário na aplicação, verificar a validade do //certificado e, se o processo de autenticação for bem sucedido, //autorizamos o acesso.}

João Neto é engenheiro de aplicações e trabalha com ambiente web desde 2000 em diversas linguagens, como Java e PHP, dedicando esforços ao desenvolvimento de bibliotecas reutilizáveis para a comunidade. Especialista em integração de sistemas, possui várias bibliotecas reutilizáveis publicadas como open-source para a comunidade, como biblioteca Cielo, PayPal, ECT (Correios), BuscaPé, Lomadee, Twitter, Facebook entre várias outras. É administrador do fórum iMasters e iMasters Code, onde compartilha conhecimento com a comunidade de desenvolvedores. Também é autor de cursos no iMasters PRO.

Busão HaCker da internet para as ruas

40 > Comunidade

Por <Lucia Freitas> para iMasters

Há dois anos, surgiu a chamada no Catarse para o financiamento do Busão Hacker (conheça no http://onibushacker.org). Quinhentas pessoas colocaram a mão no bolso e puseram o Ônibus Hacker nas ruas do Brasil (e do mundo).

Em junho, ele fará dois anos – com festa, no que depender da comunidade. Dos quinhentos iniciais, uma centena está na lista de discussão do ônibus, no Google Groups. Segundo Daniela B. Silva, uma das idealizadoras do projeto, “tudo no Ônibus Hacker aconteceu e acontece de forma muito orgânica. Quem se interessa pela proposta vai chegando junto, é simples assim”.

Desse grupo saem os vinte que colaboram para resolver todas as questões do Busão. De siste-mas de transmissão a dinheiro, são essas pes-soas que se reúnem aos domingos ou feriados – em torno de um churrasco com cerveja, porque todo mundo tem que se divertir – para trabalhar.

A comunidade tem as discussões normais de um grupo diverso, em que cada um pensa de um jeito. O resultado concreto do esforço são as invasões hacker, que começaram pelo Fes-tival de Cultura Digital, no Rio de Janeiro, em 2011, e não pararam mais. Já são mais de 10 invasões, cada uma do seu jeito.

Não, não tem carona de graça. Quem entra no Ônibus Hacker precisa colaborar. Na pré-pro-dução (que dá um trabalho enorme), nas ofici-nas, no evento. Tudo começa com uma “Cha-mada Aberta” (que é publicada no site), quando

os interessados em participar preenchem um formulário no qual pedem para entrar e dizem o que vão fazer.

Apesar de o nome hacker remeter à tecnolo-gia, não é só isso que entra. “O importante é operar na lógica do faça você mesmo e com-partilhar o que sabe”, conta Daniela. “Já teve de programador a cantora; do pessoal da Voo-doo Hop a gente de governo viajando com o Busão”, completa.

Descobrir como financiarA magia da colaboração começou com uma ideia solta que virou realidade – e comunidade – que entrega energia e conhecimento para fazer o Ônibus acontecer. Mais que isso, eles ainda estão descobrindo como se pagar.

Nos eventos, todas as oficinas e eventos são gratuitos. E, para não ficar presa aos convites, a comunidade ainda está inventando a história de “como se bancar”. Até hoje, o dinheiro para o Ônibus veio de eventos dos quais participou. “Tivemos que ir descobrindo como e quanto cobrar, porque não sabíamos”, diz Daniela.

Depois das primeiras tentativas, o coletivo che-gou a um jeito: custo por quilômetro. No custo, além da diária do motorista, combustível e ma-nutenção (porque um ônibus velho exige manu-tenção constante), entram alimentação, ajuda

de custo e hospedagem da tropa embarcada e um cachê para o próprio ônibus. A ideia é criar condições para que o Busão Hacker tenha também autonomia para decidir seu destino.

Além disso, outros modelos, como “Adote um Km” e autofinanciamento por quem quer em-barcar já estão no mapa futuro.

Entenda o Ônibus Hacker e a comunidadeO Busão Hacker é um laboratório sobre quatro rodas no qual hackers de todas as áreas de co-nhecimento embarcam por um desejo comum: ocupar cidades brasileiras com ações políticas. Por política, entendemos toda apropriação tec-nológica, toda gambiarra, todo questionamento e exercício de direitos. Por ação, entendemos a prática, o faça você mesmo uma antena de rádio, um projeto de lei, uma escola.

Nessa lógica, o download de um torrent é uma ação política tão potente quanto a construção de aplicativos a partir de dados abertos. E, en-contros com esses, num busão, contam com o aditivo do caminho entre uma cidade e ou-tra, quando ideias diversas se conectam e um orçamento público pode se tornar um lambe--lambe ou um grafite nos muros.

Desde então, já aconteceram dez invasões ha-

cker por 100 pessoas de redes e áreas diversas, com um público que chega a dez mil pessoas.

Uma coleção ambulante de históriasConversar com a Daniela é uma oportunidade para escutar histórias divertidíssimas sobre o Busão. Um exemplo: fizeram uma invasão ha-cker em Ciudad del Este, no Paraguai. E, claro, compraram um monte de coisa por lá. Da caixa de som portátil com microfone, para usar em eventos, ao kit de walkie talkies (que começou com quatro e foi expandido para seis). Os bu-sônicos (como às vezes se intitulam) se diver-tem acima de tudo.

Em janeiro, a turma se reuniu (sem o ônibus), no espaço da Ashoka, dentro da Campus Party Brasil 2013. Foi só o começo do ano. Depois disso, muitas outras invasões virão, com certeza.

Quer participar também? Assine o RSS do site (http://onibushacker.org), entre na lista de discussão e embarque nessa aventura. Todos são bem-vindos. </>

Ônibus Hacker

Daniel Varga e Bruna Trevisan montando a antena da TV Ônibus Hacker Pedro Belasco consertando a embreagem do ônibus

infOrmações e dicas sOBre prOjetOs Open sOurcePor <Alê Borba>

42 > Coluna > Código Livre

Dojo FeedbackProjeto desenvolvido pela equipe da Digital Cube, utilizando Python, que visa a eliminar os postits usados para as retrospectivas de Coding Dojos. Você acessa a URL do projeto dojofeedback.heroku.com - lá você cadastra seu Coding Dojo e ele lhe dá duas URLs: uma para as pessoas cadastrarem os seus pontos positivos e negativos e o outro para ver todos os comentários, separados em positivo e nega-tivo, em uma espécie de quadro.

Power PolygonÉ uma ferramenta baseada em Javascript para criar apresentações em HTML5. O projeto foi inicialmente criado por Felipe N. de Moura e hoje está sob as asas da BrazilJS Foundation. Ele possui vários temas e transições utilizando HTML5, CSS3 e Javascript e tem o uso bas-tante intuitivo. Peca apenas pelo fato de, mes-mo sendo um projeto que roda no navegador, não possui versão online e tem que ser instala-do localmente. Mas é um projeto que promete muito! Para saber mais: https://github.com/braziljs/power-polygon

PostmonUma API, open source, desenvolvida usando Python, para consultas de endereços pos-tais do Brasil. A API usa um script que busca as informações nos Correios e entrega para o cliente em formato JSON. O Roadmap do projeto conta com uma série de outras melho-rias e novas features, vale a pena acompanhar: postmon.com.br

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

Super TrunfoEsse jogo foi criado para incentivar a trans-parência e colaboração em cima dos dados abertos, mostrando o que é possível fazer com as informações cedidas pelo governo brasilei-ro, seguindo as definições do W3C. Desde a Lei da Transparência (131/2009) em 2010, o Brasil vem se destacando quanto à obrigação dos Estados a documentarem sua contabilida-de na internet. Dessa forma, o jogo foi criado, consumindo através de um webservice, os dados abertos do primeiro turno das eleições de 2012. https://github.com/transparencia/super-trunfo

Seu LixoSite criado durante o Desarrollando América Latina 2012 com a intenção de agregar os da-dos abertos sobre lixo, possibilitando inferir in-formações importantes sobre um dos princípais problemas mundiais: o lixo. Os destinos do lixo de cada cidade revelam as diretrizes de plane-jamento urbano adotado por cada município e como a comunidade está consciente ou não para alternativas ecologicamente mais corre-tas. O site foi baseado em dados do IBGE e são datados do ano 2000. Não há dados mais recentes sobre o tema. Vale pedir para a pre-feitura da sua cidade dados sobre o lixo gera-do, é direito do cidadão! Ainda assim, mesmo com a pequena quantidade de dados sobre lixo, podemos inferir informações relevantes... www.seulixo.com </>

Como otimizar

apliCações weB

44 > Artigo > Front-end

As aplicações web estão cada vez mais robustas,

muitas delas recebem milhões de usuários por

dia. Mas será que elas realmente aguentam essa quantidade de requisições mantendo a qualidade de

seus serviços?

Nosso objetivo aqui é aprender a otimizar nossas

aplicações front-end para que o usuário tenha a

melhor experiência possível.

Por <Italo Lelis de Vietro>

Configurando nosso servidor

Gzip

É um software para compressão e descom-pressão de arquivos. Ele é altamente utiliza-do em websites para aumentar a performan-ce. Sites que utilizam o Gzip podem ser até 80% mais rápidos.

Como configuramos nossos servidores para utilizar o Gzip? Muito simples, basta informarmos ao .htaccess que queremos utilizá-lo. Exemplo:

Configurando o cache

Muitas vezes, pensamos que o browser do cliente irá fazer o cache automático de nos-sa aplicação, mas precisamos informá-lo de como fazer o cache da maneira correta. Para isso, utilizamos os recursos do respon-se headers.

<IfModulemod_filter.c> AddOutputFilterByType DEFLATE application/atom+xml \ application/javascript \ application/json \ application/rss+xml \ application/vnd.ms-fontobject \ application/x-font-ttf \ application/xhtml+xml \ application/xml \ font/opentype \ image/svg+xml \ image/x-icon \ text/CSS \ text/html \ text/plain \ text/x-component \ text/xml</IfModule>

ETags

� A Etag é um mecanismo para identifi-cação de um componente em cache. Em outras palavras, um componente é identificado por uma string única, e o browser pode verificar se ela foi modifi-cada ou não;

� O problema das Etags é que elas são ge-radas para um único servidor, sendo invi-ável validá-la em outro servidor;

� A melhor solução então é cancelar o uso da Etag; dessa forma, o browser não irá verificar o componente. Isso traz uma performance significativa para o website.

Invalide o cache

� Invalidar o cache também é uma ótima estratégia para alteração de conteúdo;

� Podemos utilizar uma estratégia de versio-namento de componentes (CSS, js); as-sim, o servidor saberá quando um arquivo foi alterado e precisa ser recarregado;

� Utilize helpers server-side para o versio-namento dos arquivos.

Defina o tempo de cache para cada tipo de arquivo

� O famoso Expires dos servidores é uma das melhores soluções para controle de cache;

# FileETag None is not enough for every server.<IfModulemod_headers.c> Header unset ETag</IfModule># Since we’re sending far-future expires, we don’t need ETags for static content.FileETag None


� Utilizamos diversos “tempos” diferentes para cada tipo de arquivo, por exemplo, arquivos como imagem podem ter um ca-che menor que um javascript.

Reduzindo as requisições

Reduzir a quantidade de requisições que a aplicação faz para nossos servidores é uma ótima solução para otimizarmos o carrega-mento da página, mas precisamos entender como fazer isso.

� Um browser pode carregar até três arqui-vos em paralelo para cada servidor;

� Deixe os arquivos estáticos em servido-res CDN com subdomínios; dessa forma, o browser poderá carregar três arquivos para cada subdomínio em paralelo;

<IfModulemod_expires.c>ExpiresActive on# Favicon (cannot be renamed)ExpiresByType image/x-icon “access plus 1 week”# Media: images, video, audioExpiresByType image/gif “access plus 1 month”ExpiresByType image/png “access plus 1 month”ExpiresByType image/jpeg “access plus 1 month”ExpiresByType video/ogg “access plus 1 month”ExpiresByType audio/ogg “access plus 1 month”ExpiresByType video/mp4 “access plus 1 month”ExpiresByType video/webm “access plus 1 month”# CSS and JavaScriptExpiresByType text/CSS “access plus 1 year”ExpiresByType application/ javascript “access plus 1 year”</IfModule>

� Exemplo: um website com nove js sendo

carregados no mesmo servidor irá carre-

gar três deles paralelamente, depois mais

três, e mais três. Já com o CDN com três

subdomínios, ele poderá carregar os nove

em paralelo.

Minificar e unificar js e CSS

Essa estratégia é considerada uma das me-

lhores para obtermos uma boa performan-

ce. O problema é que a maioria dos desen-

volvedores não a utiliza. Vamos entender

como funciona:

Ferramentas para comprimir arquivos

� YUI Compressor - Ferramenta do Yahoo! que promete ser a mais segura e eficiente de todas;

� Packer - Comprime JS pela web;

� JSCompress.com - Usa JSMin ou Packer para reduzir o tamanho dos arquivos;

� CSS Compressor - Comprime arquivos CSS;

� Easy YUI compressor - Versão visual do YUI compressor.

Ferramentas para unificar arquivos

Normalmente, essas ferramentas são execu-tadas em tempo de execução, comprimem e unificam os arquivos, e logo em seguida armazenam os arquivos gerados em cache.

� Minify - Ferramenta em PHP que utiliza a biblioteca YUI compressor;

� Zend_Minify - API do Zend Framework para YUI compressor;

� Easy Minify - API do Easy Framework para YUI compressor;

� YUI compressor for .net. - Biblioteca para .NET;

� Ant - Biblioteca para Java.

Otimização de imagens

As imagens são os maiores responsáveis pela baixa performance de websites e apli-cações. Felizmente, existem formas de con-tornar esse problema:

� Não coloque imagens maiores do que o necessário;

� Comprima as imagens;

� Use os formatos corretos para cada ocasião;

� Defina o tamanho e a largura da imagem no HTML;

� Use Sprites onde possível.

CSS Sprite

Sprite é uma imagem que contém outras imagens dentro dela, e nós podemos pegá--las através do CSS e manipulá-las de di-versas formas. Com Sprites, diminuem-se significativamente as requisições para o ser-vidor, e as imagens são manipuladas pelo CSS através da posição no arquivo. Veja algumas ferramentas para compressão de imagens e criação de sprites:

� Caesium - Promete comprimir imagens em até 90%;

� Smush.it™ - Compressor de imagens do Yahoo!;

� Data URI Sprites - Gerador de sprites ba-seado na web;

� Spritr - Gera código CSS para sprites;

� SmartSprites - Gerador de sprites para desktop.

Boas práticas

Organização do HTML

� Arquivos CSS no topo do documento –

Isso irá evitar que páginas sejam carrega-das sem o seu estilo, evitando problemas de “flickering” nas páginas;

� Arquivos js no final do arquivo – O carre-gamento de javascript é algo bloqueante, então, se nós o colocarmos no inicio da página, nosso cliente ficará esperando o carregamento do js, levando mais tempo para a execução;

� Deixe os arquivos de mesmo tipo próxi-mos – Uma forma de otimizar o carrega-mento é entender como o interpretador do browser funciona; no caso de arquivos do mesmo tipo próximos um do outro, será mais rápido do que intercalá-los;

� Crie arquivos CSS e js externos;

� Evite duplicação de scripts;

� Quebre os componentes em vários subdominios;

� Diminiua o uso de iFrames – iFrames exi-gem novas requisições com sub-requi-sições, deixando a página consideravel-mente lenta;

� Mantenha seus componentes abaixo de 25 KB.

Otimização de CSS

� Use CSS sprites;

� Coloque os arquivos no topo do documento;

� Use arquivos externos (evite inline e tag style);

� Prefira <link> em vez de @import – Uti-lizando <link>, você pode aproveitar o paralelismo dos navegadores; com o @import, não.

� Evite expressões no CSS

Carregamento modular js

Utilizamos o carregamento modular do js quando precisamos de mais performance e organização. Através do carregamento modular, podemos carregar apenas os ar-quivos, as funções ou as classes específicas que iremos usar. Para isso, podemos utilizar o Require JS.

Vantagens:

� Carregamento otimizado - não precisa-mos carregar tudo;

� Podemos carregar apenas uma função ou classe;

� Integrado com NodeJs;

� Jquery incorporado;

� UglifyJS para comprimir e unificar todos os js requeridos.

O Require JS trabalha de forma simples, apenas uma função chamada “require(“file”, function)”. O grande diferencial é que o arquivo será carregado somente quando você precisar.

{background-color: expression( (new Date().getHours()%2 ? “#00000” : “#FFFFF”))}

require([“jquery”, “jquery.alpha”, “jquery.beta”], function($) { //the jquery.alpha.js and jquery.beta.js plugins have been loaded. $(function() { $(‘body’).alpha().beta(); });});


HTML5 boilerplate

O HTML5 boilerplate é um conjunto de boas práticas para você iniciar o seu projeto otimi-zado em HTML5. Com ele, você tem um ar-quivo .htaccess totalmente configurado para trabalhar da melhor maneira possível. Além disso, contamos com:

� Suporte cross-browser;

� Compatibilidade com browsers legados;

� Estrutura padrão de um documento HTML5 otimizado;

� Estrutura padrão para criação de plug-ins js;

� Estutura padrão para CSS cross-browser.

Ferramentas de diagnóstico

Com as ferramentas de diagnóstico, podemos saber como está o fluxo de nossas aplicações, além de sabermos exatamente quais arquivos ou recursos estão deixando o site lento. Aqui vai uma lista dos mais populares:

� Chrome DeveloperTools - Para fazer debug do js, análise de recursos e elementos;

� WebPagetest - Executa diversas valida-ções e testes de performance, além de falar o que seria ideal fazer para resolver os problemas;

� Firebug – Para debugação do js, análise de recursos e elementos;

� GzipTest – Verifica se determinado domí-nio usa compressão GZIP;

� HTTP Analysis Tools – Diversas ferramen-tas de análise, como compressão, cachê e invalid caches;

� Page Speed – Verifica se sua aplicação segue as diretrizes de um site otimizado.

Conclusão

Essas são algumas das estratégias utiliza-das para otimizarmos nossas aplicações, e todas estão disponíveis com mais detalhes no Yahoo! Developers (developer.yahoo.com/performance/rules.html). </>

Italo Lelis de Vietro trabalha com desenvolvimento há cerca de 5 anos, já trabalhou com tecnologias como VB6, VB.NET, C#, Java, Javascript, PHP entre outras. Atualmente cursa o último período de Análise de Desenvolvimento de Sistemas e possui uma agência de desenvolvimento web chamada Lellys Informática, onde trabalha com PHP, HTML5, CSS3 e jQuery.

50 > 7Masters

7Masters Acessibilidade

Acessibilidade Como Compliance Clécio Bachini

Há um tempo, sempre que se falava de aces-sibilidade na web, a pergunta mais comum e inconsequente que se ouvia era: “Quanto isto vai custar a mais para o meu projeto?”. Cansei de ouvir isso, mesmo tentando argumentar que, quando colocado no processo de produção e principalmente planejado na etapa de Arquitetu-ra de Informação, o “custo” é mínimo.

Sempre tentei explicar que acessibilidade au-menta o público potencial do site em até 25%, que melhora a semântica e o SEO – pois temos que ”explicar” pra máquina, no caso o leitor de tela, o que cada objeto quer dizer e qual sua fun-ção. Que melhora a usabilidade para todos. Que todos somos usuários com limitações potenciais quando, por exemplo, caímos de mau jeito no futebol e chegamos para trabalhar na segunda--feira com o braço engessado. Tentava explicar que em uma tela pequena todos têm dificuldade para tocar e enxergar.

Nada disso derretia o coração frio do cara da criação. Cheguei a ouvir “que se dane o cegui-nho”. Até que, num almoço com Horácio Soa-

res, o papa da acessibilidade web no Brasil, con-versamos sobre suas frustrações: “Só somos chamados quando a ministério público já bateu na porta das empresas”. Neste momento fez-se a luz. “Horácio, existe lei que obrigue acessibili-dade?” E ele me mostrou todas elas.

E então acessibilidade web deixou de ser carida-de, assistência social. Neste momento passou a ser compliance. Segundo a wikipedia, complian-ce é o conjunto de disciplinas para fazer cumprir as normas legais e regulamentares, a política e a diretriz estabelecida para o negócio e para as atividades da instituição ou empresa, bem como evitar, detectar e tratar qualquer desvio ou in-conformidade que possa ocorrer. Ou seja, não é acessível, está fora da lei.

Sendo assim, agora não batemos mais no marketing ou na TI, batemos no jurídico. Acessi-bilidade web é lei. Dá multa pesada. O ministério público está preparado. E não importa quantos usuários há com dificuldades de acesso ao site: acessibilidade é para todos. Um ou um milhão.

Quer saber mais? Acesse o vídeo http://ow.ly/hIsvG

Todos os meses realizamos, no iMasters Lab o 7masters, Encontro iMasters de Espe-cialistas. Temos sempre 7 profissionais de peso fazendo lightning talks, apresentações rápidas e de conteúdo inovador, dentro do tema definido. O 7Masters foi lançado no início de 2012 e já falou sobre banco de dados, wordpress, python, rails, php, .net, entre outras tecnologias.

Você confere aqui 7 das cerca de 70 apresentações que já passaram no 7Masters. Você pode ver todos os vídeos em setemasters.imasters.com.br

7Masters Java

Clojure Plínio Balduino

Clojure é um dialeto LISP que gera código biná-rio 100% compatível com Java. Na prática, isso significa que você pode ter todas as vantagens de uma linguagem funcional, além de aprovei-tar todas as bibliotecas Java que sua empresa já utiliza, sem ter que mudar a estrutura e os servidores que já estão consolidados hoje. É possível também utilizar bibliotecas feitas em Clojure dentro de sua aplicação Java, como é o caso do Expectations, ferramenta de testes criada pelo Jay Fields.

Caso você queira iniciar um projeto do zero, você também pode usar o Immutant, que é um servidor de aplicações para Clojure feito nos moldes do JBoss AS.

Embora muito se fale sobre o ganho de produti-vidade e de expressividade que o uso de lingua-gens funcionais traz, pouco é mostrado sobre como isso se aplica no mundo real.

Neste talk, apresento algumas empresas conhe-cidas que estão utilizando Clojure e demonstra os ganhos obtidos em facilidade de manuten-

ção, legibilidade e aprendizado em um dos pro-jetos dos quais ele participou recentemente.

Esse projeto tem um servidor, feito em Java e Google Guice, que faz a comunicação entre os 200 dispositivos móveis espalhados pelo país e o banco de dados. Esse servidor cresceu além do planejado, conforme foram incorporados outros projetos, e a classe responsável pela dis-tribuição dos serviços passou de 1.200 linhas de código, o que se tornou um fardo para dar manutenção. Sem contar o fato de que, apesar de ter uma boa cobertura de testes funcionais e de integração, praticamente não existem testes unitários para a aplicação.

Em pouco tempo a equipe aprendeu o suficien-te de Clojure para que fosse possível iniciar a migração. Se na versão Java havia 400 linhas apenas para subir a aplicação, na versão Cloju-re passou-se a ter 800 linhas para a aplicação inteira. Cada serviço passou a ser uma função pequena, simples e testável, e o código em alguns pontos ficou até mais legível do que a versão original.

Gostou da ideia? Veja a apresentação completa, em vídeo, no site do 7Masters: http://ow.ly/hyhCt

52 > Encontros > 7Masters

7Masters WordPress

Wordpress + Varnish = Desempenho Hugo Cisneiros

Diferentemente de servir itens estáticos, os sistemas dinâmicos usam bastante memória e processamento para montar páginas, e isso sempre foi um problema. Com o WordPress não é diferente: cada usuário que acessa o site gasta recursos preciosos do servidor, via PHP.

O Varnish é um software de código aberto que serve como uma camada intermediária entre o usuário e o servidor Web. Ele funciona fazendo “cache” do conteúdo dinâmico – gerado pelo WordPress – transformando-o em uma “pági-na estática” em memória, e então mandando para o usuário.

Nessa camada de cache, a maioria das requisi-ções são servidas diretamente dela, e por isso o site não perde desempenho ao ter quantida-des grandes de requisições ao mesmo tempo. Por exemplo, se eu configuro o Varnish para fazer cache por 30 segundos de uma página com 500 acessos por segundo, o WordPress só vai gerar a página apenas uma vez a cada 30 segundos, servindo um total de 15 mil requi-sições de clientes com apenas uma operação dinâmica do WordPress.

Em um teste simples em uma mesma máquina desktop comum, acessando localmente com 50 usuários simultâneos na página principal pa-drão do WordPress nos mostra ganos de de-sempenho assustadores. Sem Varnish, foram servidas 932 páginas em 217 segundos (4,29 requisições por segundo). Com Varnish o nú-mero subiu para 10 mil páginas em 1.6 segun-dos (6242,42) requisições por segundo.

Aplicando um cache de vários minutos em um WordPress o faria trabalhar muito pouco, mas suas páginas iriam ficar “desatualizadas” duran-te esses minutos. A solução seria programar o WordPress para conversar com o Varnish e reti-rar do cache as páginas que forem atualizadas.

Por exemplo, se um artigo novo foi publicado, na próxima requisição o Varnish buscaria a página principal novamente com os artigos mais atuais.

Isto pode ser feito através de ações do Wor-dPress (hooks), que então se conectam ao Varnish via TCP e mandam certos comandos - BAN e PURGE - que invalidam itens de cache baseados em uma URL. Duas referências para se fazer isso são: o plugin wp-varnish e a docu-mentação de API Hooks do WordPress.

Mesmo assim, existem algumas funcionalida-des que complicam o cache de todo um site: cookies, autenticação, query strings aleatórias e dados sempre dinâmicos. Nestes casos não há uma regra fácil para se usar, pois cada usuário tem que receber respostas diferentes. Nestes casos, é importante construir uma configuração mais cuidadosa e utilizar técnicas como ESI, que gera apenas pedaços da página dinamicamente.

Veja o vídeo da apresentação: http://ow.ly/hyhHk

7Masters .NET

Cubo de LEDs com Netduino Marcio Paulo Mello Martins

Netduino é uma criação da empresa americana Secret Labs, que consiste em um microcontro-lador com uma interface MicroUSB, 6 entradas analógicas para a conexão de sensores e outros tipos de componentes, e 14 saídas digitais para envio de sinal a componentes e circuitos digitais.

O Netduino utiliza o .NET Microframework como plataforma para a execução de códigos escritos em linguagens comuns do .NET, o que o torna muito atrativo para desenvolvedores ha-bituados ao .NET Framework.

O que é o .NET Microframework? É uma versão muito reduzida do .NET Framework, com ape-nas aproximadamente 300 KB de tamanho. Foi criado para instalação em dispositivos embar-

cados e pode rodar sem sistema operacional. O Projeto é Open Source, e está disponível em http://netmf.codeplex.com.

Cubo de LEDs Um cubo de LEDs é um circuito digital com propósito decorativo, onde uma es-trutura em forma de cubo montada com LEDs é acionada por um microcontrolador, no nosso caso, o Netduino. Através de código escrito em C#, o Netduino pode enviar um sinal positivo (5 volts) para entrar em uma coluna e outro para abrir a o canal negativo para uma camada, fa-zendo com que, pela estrutura do cubo, um único led seja aceso de cada vez.

Assim, pelo sucessivo acender e apagar de leds em sequência, temos a sensação de uma animação tridimensional no cubo.

Conclusão O Netduino é uma alternativa muito interessante para aquele que já conhece o Visu-al Studio e programa em C# ou VB.NET, e quer iniciar na eletrônica digital. Mesmo quem já tem bastante experiência com circuitos digitais pode usar o Netduino para controlar as funções de processamento de sistemas eletrônicos, mesmo conhecendo pouco sobre linguagens .NET, já que o .NET Microframework é bem re-duzido e bem mais simples de aprender.

Gostou? Confira a palestra aqui: http://ow.ly/hyi5J

7Masters Mobile

[iOS] Contornando as resoluções dos devi-ces de maneira simples Fernando Bass

Hoje para trabalhar com iOS, temos que nos preocupar com as resoluções de telas dos apa-relhos – temos basicamente 4 resoluções de telas para iPhone e iPad. Para trabalhar com os diferentes tipos de resoluções e deixar nossos aplicativos com uma boa aparência, temos que preparar os ícones e as imagens que são exibi-dos para que possam atender a resolução sem

perder a qualidade de imagem.

Isso é bem simples de resolver: as imagens retina possuem o dobro do tamanho das ima-gens normais de sua aplicação, então se você tem uma imagem 100x100px, a imagem para tela retina deve ter 200x200px. Para adicioná--las em sua aplicação, basta nomeá-las com a notação @2x para imagens retina. Então ficaria assim: a imagem não retina se chamaria minha_imagem.png e a imagem retina deve ficar [email protected]. É muito importante que as imagens possuam o mesmo nome alterando apenas o @2x no final, para que o iOS possa diferenciar qual imagem ele deve carregar de acordo com o aparelho.

Outra coisa importante é que, com o surgimento do iPad, em alguns casos é preciso deixar a apli-cacão pronta para rodar tanto no iPad quanto no iPhone. Para diferenciar as imagens de acordo com o aparelho devemos colocar uma notação ~iPad e ~iPhone nas imagens, assim elas serão carregadas de maneira correta. Ou seja, para iPad o nome deve ser minha_imagem~iPad.png, e para iPhone minha_imagem~iPhone.png. No caso dessas imagens terem uma ver-são retina, basta adicionar o @2x ao nome da imagem e ficaria minha_imagem@2x~iPad.png e minha_imagem@2x~iPhone.png.

O mais importante é que para carregar essas imagens, no código é preciso indicar apenas o nome da imagem, sem a indicação se ela é reti-na ou para qual device ela foi feita. Deve ficar as-sim: [UIImage imageNamed:@”minha_imagem”]

Com o lançamento do iPhone 5, temos uma tela de 4 polegadas, com resolução de 640x1136. Porém, isso não influencia na hora de carregar as imagens, você deve proceder da mesma forma, utilizando o @2x para imagens retina. O iPad mini possui uma tela de 7.9 polegadas, mas a resolução é a mesma do iPad normal, 768x1024, então não há alterações na maneira de carregar suas imagens nesse device.

Não deixe de conferir o vídeo http://ow.ly/hyj50

7Masters Acessibilidade

Usuários idoso na Web Reinaldo Ferraz

Quando falamos em acessibilidade na Web, normalmente a primeira coisa que nos vem a mente é: acesso de pessoas com deficiência na Web. Porém se considerarmos que daqui 20 ou 30 anos nós mesmos poderemos ter dificul-dade para enxergar devido a problemas de vi-são como miopia, catarata e glaucoma ou mes-mo ter problemas em escutar e se locomover, esse cenário passa a fazer parte da nossa vida.

Segundo dados da ONU, em 2040 o número de pessoas com mais de 65 anos representa-rá mais de 14% da população mundial. Porém, o número de pessoas com mais de 65 anos conectada a internet vem aumentando a cada ano, segundo os dados do Comitê Gestor da Internet no Brasil. Eu estarei nessa estatística e a Web deverá ser acessível para mim também.

Mas será que adotamos diretrizes de acessi-bilidade considerando nós mesmos no futuro? Temos que tomar muito cuidado porque se não cuidarmos das páginas desenvolvidas hoje, poderemos no futuro ser vítimas de páginas cheias de barreiras e inacessíveis construídas por nós mesmos.

Por isso as diretrizes para acessibilidade, as WCAG (Web Content Accessibility Guidelines), são de extrema importância. Algumas delas be-neficiam muito o acesso de pessoas idosas na Web, como por exemplo:

� Possibilitar que o usuário possa aumentar o tamanho da fonte do seu site

� Utilizar unidades relativas (e não absolutas) dentro do CSS

� Não utilizar somente a cor para trans-mitir informações

� Tornar todo o conteúdo acessível via teclado

� Tornar o foco dos elementos (formulários e links) sempre visíveis.

Quando trabalhamos a acessibilidade na Web estamos considerando o acesso não só de pessoas com deficiência, mas promovendo que a Web seja efetivamente um ambiente in-clusivo para todas as pessoas.

Veja a apresentação aqui http://ow.ly/hyjUp

7Masters UX

Design Emocional e a Experiência Digital Edu Agni

Quero trazer para o centro da discussão o Design Emocional, um tema que venho explo-rando bastante em meu trabalho, principalmente pelo fato de considerar que a grande maioria dos profissionais limitam as discussões sobre UX a questões como usabilidade e arquitetura de in-formação, em detrimento de outros elementos que compõem a experiência do usuário.

O Design Emocional propõe uma maneira dife-rente de enxergar a experiência com os produ-tos, considerando que o mundo do consumidor não é regido por tanta razão, mas sim influen-ciado por desejos subconscientes, explorações sensoriais, estímulos, instintos e outras aspira-ções emocionais. Dessa forma, o impacto vis-ceral causado pela forma e o valor simbólico agregado as relações sociais ganham maior relevância do que a simples facilidade de uso.

Nesta apresentação, procuro utilizar a tríade da experiência digital (projetar para pessoas, com-partilhar boas histórias e estimular os sentidos) para traçar um paralelo entre as três questões de uma avaliação rápida de UX ( usabilidade, utilidade e desejo) e os três níveis de design propostos por Donald Norman (visceral, com-portamental e reflexivo).

Veja os slides da palestra: http://ow.ly/hpA5k

</>

54 > Encontros > 7Masters

o verdadeiro design de interfaCe a favor do desenvolvedor front-end

56 > Artigo > User Experience

fonte: www.ian-thomas.net/design-utilities-wireframing-template/

Quando eu explico para as pessoas que um bom wireframe é mais que o suficiente para o desenvolvedor front-end, vulgo HTMLer ou im-plementador, começar a codificar, muitos web-designers até entendem o fluxo, mas simples-mente nunca o praticam. Depois de algumas observações, percebi os motivos óbvios:

pessoas metódicas: eu sou uma pessoa me-tódica e sei como isso é. Pessoas metódicas (dependendo do grau) até conseguem sair da caixa, mas não gostam, nem se sentem à von-tade; por isso, preferem esperar o design com-pleto para então começar o seu trabalho.

Desorganização: pessoas desorganizadas com o seu CSS não conseguem pensar em como estruturá-lo, de forma que depois te-nham que mexer novamente e o adaptarem a qualquer mudança. Assim sendo, precisam do layout finalizado para minimizar a chance de re-fazer a implementação de algo.

preguiça: o pior aliado de um desenvolvedor qualquer profissão é a preguiça. A ideia de

deixar tudo até os 47 do segundo tempo é um câncer que cada vez mais corrói sua pro-dutividade e qualidade profissional e pessoal. Muitas vezes, o desenvolvedor acredita vee-mentemente que é melhor ganhar uns dias, enquanto o designer prepara o layout, para só depois começar a trabalhar. Com um pouco mais de visão, ele aprontaria o que desse antes e, enquanto o designer estivesse preparando o layout final, o desenvolvedor poderia pensar em formas de melhorar o código, experimentar algo novo, propor uma funcionalidade diferente para a equipe etc.

Surpresa!O mais interessante disso tudo é que esse não é o principal motivo para o não desenvolvimen-to estrutural do HTML e do CSS. O principal motivo é que, quase em sua totalidade, o de-sign da interface só é pensado ou levado a sé-rio no momento em que o designer faz o layout final. Muito se fala sobre wireframes, softwares,

Por <Bernard de Luna>

artigos, blogs e livros sobre AI, mas, na práti-ca, o mercado em sua maioria (me refiro mais a agências web) ainda continua com o seu fluxo medroso e antigo.

modelo tradicional: é bem simples, cada eta-pa finalizada dá origem ao começo da etapa seguinte. O processo é demorado, e um profis-sional depende do término do outro.

modelo avançado: o modelo necessita de uma documentação bastante definida no pro-tótipo para que a etapa de codificação possa ser iniciada. Mais de um profissional pode atuar ao mesmo tempo no projeto. Com a interação e a arquitetura definidas, ainda pode ser inicia-da uma terceira etapa simultânea, que é a do desenvolvimento do sistema, ou programação.

funcionamento em SCRUm: muitas empre-sas aqui no Brasil e no exterior já trabalham com metodologias ágeis; a mais famosa atu-almente é o SCRUM. O projeto é dividido em sprints; assim, temos que aproveitar a sprint 1 para prever, mapear e arquitetar o que será fei-to na sprint 2. Paralelamente a isso, temos que codificar o que será trabalhado na sprint atual e corrigir erros e melhorias das sprints atual e an-terior. Com um número de designers para aten-der esse fluxo, ele seria excelente, porém não é a realidade da maioria das empresas de desen-volvimento web, muitas vezes prejudicando o trabalho do design ou o sobrecarregando.

Crítica pessoal: pelos livros que eu li, cursos e treinamentos em Scrum de que participei pela Petrobras, além da prática, tenho certeza de que quem inventou e divulgou o SCRUM para empresas de desenvolvimento, em nenhum momento, parou para estudar o processo de design de interfaces e sua importância para o produto e empresa.

O outro lado da moeda, o design centrado no desenvolvedorQuando buscamos informações sobre design, achamos muitas informações sobre design centrado no usuário. Caso você não esteja ain-

da totalmente confiante disso, vale a pena ler estes artigos de grandes nomes da web:

� Robson Santos - A necessidade do design centrado no usuário (http://bit.ly/10Qp8N1).

� Amy Hillman - Pioneering a User Experience (UX) Process (http://bit.ly/10Qp2Vx).

� Frederick Van Amstel - Design centrado no usuário da web (http://bit.ly/ABkTy).

O problema disso tudo é a grande difusão desse conceito em que o designer se concen-tra apenas no usuário e esquece que alguém terá que transformar isso em algo usável. De que adianta fazer um produto magnífico para o usuário se devido a ele a empresa terá que comprar uma máquina, do Japão, por US$ 2 milhões, que não cabe na área atual da fá-brica, e ainda necessita de treinamento para mais de 800 empregados? O designer tem que levar isso em conta em qualquer ambien-te, mas quando o produto é online poucos se concentram nisso.

Uma dica para ajudar o front-end na parte téc-nica é preparar o PSD de forma profissional, seguindo algumas regras, como:

� Dar nomes intuitivos às layers;

� Organizar conceitualmente as layers em pastas;

� Colorir conceitualmente pastas também é interessante;

� Dar flattern nas layers em que foram utiliza-dos efeitos em máscaras; isso facilita e mui-to na hora de o desenvolvedor cortar;

� Todo ícone utilizado deve ser guardado numa pasta e enviado no mesmo zip que o PSD; assim, o desenvolvedor não precisa pegar ícone por ícone e ir cortando;

� Padronizar o espaçamento - isso não só é bom para o conforto da tela e aproximação de objetos baseados em Gestalt, como tam-bém facilita a medição para o CSS;

58 > Artigo > User Experience

Bernard de Luna é Coordenador de Produto da Estante Virtual, palestrante sobre Front-end e Design Funcional e especialista em Sexy Web Projects. www.bernarddeluna.com

� Se utilizar fontes que não são do sistema, enviá-las junto com o zip;

� Criar uma pasta ou outro PSD com o hover (interações); isso ajuda muito na hora de o usuário criar o CSS e até mesmo influencia no HTML (dependendo do caso);

� Caso tenha um background grande bem trabalhado ou que se repita, envie-o junto com o zip;

� Criar um pdf ou qualquer outro tipo de docu-mento, informando as cores usadas (hexa-decimal), fontes usadas nos elementos h1, h2, h3, hn, p, li etc., espaçamentos padroni-zados, largura de colunas.

Existem outras dicas na apresentação que fiz junto com o Victor Montalvão, no 15º EDTED, com o título Oficina de Planeja-mento de corte, o seu layout virando código (http://slidesha.re/aGIjLq)

Na práticaEntendemos que a baixa fidelidade é a melhor forma de começar o seu wireframe, pois é nela que você vai trabalhar e contrapor suas ideias. Porém, acredito que após isso, ainda antes do layout, você pode tratar esse wireframe de for-ma detalhada, e este, então, ser apresentado para a equipe e para o seu cliente. Um wirefra-me de alta fidelidade ou até mesmo um Interfa-ce Design antes do Context Design permitem o trabalho simultâneo de desenvolvimento front--end e back-end. Um exemplo disso:

Com uma interface definida, você consegue captar a semântica de cada item, além de es-truturar da melhor forma o seu HTML para que seja flexível e limpo ao mesmo tempo, com classes genéricas e reaproveitáveis. O progra-mador, por sua vez, já saberá os campos que serão utilizados e preenchidos pelo cliente. Tudo bem mais ágil e econômico não?

Seu HTML fica facilmente definido, inclusive o CSS estrutural pode ser feito deixando os estilos de cores e as fontes para uma segunda etapa.

ConclusãoÉ evidente que não é da noite para o dia que uma equipe chega a essa maturidade, mas é algo a ser sempre perseguido, inclusive inova-do. Se criar algo novo na sua equipe ou empre-sa, me conte por e-mail, ok? </>

O vale dO silíciO é um estadO mentalPor <Vinicius Depizzol>

Steve Blank, um empreendedor que aterrissou no sul da baía de São Francisco no final dos anos 70 durante o boom das empresas dali, disse certa vez talvez a melhor definição do vale que ele viu crescer. “O Vale do Silício é mais um estado mental do que uma localização física”.

Não há fronteiras nem placas que apontem para onde ele começa ou termina. É um emba-çado de cidades, que do alto se parecem com qualquer outro subúrbio americano, e não exis-tem grandes monumentos nem visitas guiadas pelas empresas que o tornaram famoso.

Se você der um close-up, no entanto, vai pro-vavelmente começar a notar algumas poucas diferenças. Jaquetas e crachás da Apple ou do Github acompanhando seus donos na rua, pes-soas acessando o TechCrunch enquanto espe-ram o trem chegar ou um ônibus todo bran-co que cruza a esquina, só com as inscrições “GBUS TO MTV” — o Google Bus, que carrega seus funcionários lá para Mountain View.

Mas não são esses detalhes que fazem do vale o que ele de fato é. E nem os outdoors da Mo-zilla que dão as boas-vindas no aeroporto. O que define o Vale do Silício são as pessoas e as suas interações ali.

Com muita gente altamente capacitada, com uma mentalidade aberta, trabalhando num rit-mo maluco e decidida a mudar o mundo, é fácil imaginar quão importantes são as intera-ções pessoais e profissionais. Também, pude-ra. Elas fazem com que ideias surjam, projetos sejam lançados no prazo e, principalmente,

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

59 > Coluna > Conexão Vale do Silício

permitem que todo o tempo seja, na verdade, um grande aprendizado.

Mas isso não é, nem de longe, exclusividade do Vale do Silício, se considerarmos que quase 80% dos investimentos americanos em start--ups de 2011 não foram para a Califórnia (veja aqui http://bit.ly/y6YJEW). E que Londres tem o seu SiliconRoundabout, Berlim já é chamada de Vale do Silício europeu, e Nova Iorque conta com sua SiliconAlley. No Brasil mesmo existe uma disputa para ver quem fica com o título de “Vale do Silício brasileiro” - com Recife, Rio, São Paulo, Porto Alegre, Florianópolis e São José dos Campos na lista.

A verdade é que o nome mesmo não importa. O Vale do Silício, como um estado mental, não depende de rótulos, e não acontece só nesse canto ensolarado da Califórnia.

Gente inteligente e boas ideias existem em to-dos os lugares: não é preciso estar no Vale do Silício para interagir com pessoas sagazes, tra-balhar duro, mudar o mundo e fazer tudo isso ser um grande aprendizado. </>

8 dicas, tendências e previsões para seOPor <Diego Ivo>

Já estamos no final do primeiro trimestre do ano, mas acredito que ainda há tempo para refletir um pouco e fazer algumas “pre-visões” de SEO para 2013. Pensar no que aconteceu no último ano e se planejar para o futuro próximo – ou re-planejar, se for o caso. Apresento, aqui, um misto de previ-sões, dicas e uma recapitulação do que já aprendemos até aqui.

Otimizar site para funcionar em plataformas móveisO crescimento de sites em mobile é algo inevitável e não pode ser ignorado. Dado o grande crescimento e desenvolvimento do mercado de smartphones e tablets no Brasil, trabalhar os sites para que eles se tornem acessíveis e mais dinâmicos para o usuário será fundamental para a manuten-ção no mercado. Além disso, o algoritmo do Google já está configurado para entender sites mobile, o que estrategicamente pode melhorar o seu posicionamento geral nos resultados de buscas.

Otimizar para busca localCom o uptade Google Venice, ativo desde maio de 2012, o Google está conseguindo identificar e analisar de forma mais eficiente informações geograficamente específicas. Dessa forma, há resultados cada vez mais geolocalizados, então a pesquisa usando

uma keyword de head tail encontra resul-tados locais sem trabalhar com a long tail. Isso traz mudanças de comportamento dos pequenos sites e também dos grandes no mercado digital.

Os sites maiores devem estar preparados para uma significativa perda de tráfego; para que eles continuem bem posicionados tam-bém nas buscas locais, devem efetuar al-gumas alterações. E os sites menores, que competiam no mercado com sites muito grandes, têm a oportunidade de utilizar a ge-olocalização para obter vantagem, atingindo os consumidores locais.

Desenvolver conteúdo multimídiaÉ inquestionável a importância do conteúdo em SEO. Contudo, haverá uma mudança a respeito de qual conteúdo é o ideal para que o seu site esteja bem posicionado em 2013. Até então, havia a preocupação em utilizar muitos textos com repetição de palavras--chave em negritvo e imagens otimizadas.

Tal conceito muda, dando espaço ao conte-údo multimídia. Imagens que sejam funda-mentais para o entendimento do conteúdo, slides, podcast e, sobretudo, vídeos, pela grande facilidade de produção com que vêm se desenvolvendo, deverão ser utilizados para enriquecer o conteúdo do site.

Algo que também vale ser ressaltado é a o

60 > Artigo > SEO

HTML5, que está em constante avanço e tem sido cada vez mais utilizado, devido à prefe-rência dos usuários por explorar conteúdo mais dinâmico e interessante, que pode apro-veitar diversos recursos do HTML5. A junção das possibilidades do HTML5 permite a ex-ploração do conteúdo multimídia e possibilita experiências de navegação inovadoras.

Com essas dicas, seu site ficará facilmente indexável pelos buscadores. E atenção: quem não se adaptar às novas tendências de conteúdo e à navegação está fadado a perder visitas.

Atenção a arquitetura da informação, campo semântico e schema.orgA arquitetura da informação em um site re-quer atenção especial, o que não tem acon-tecido em muitos sites no Brasil. Para que o site se fortaleça, é necessário mantê-lo atualizado, dinâmico e bem organizado; para isso, é importante priorizar a AI.

Falando do site como um todo, há uma tendência desde o final de 2011, mas que ganhará força agora em 2013, da interpre-tação do campo semântico para o Google avaliar a relevância do site. Já não basta ter uma única página sobre o conteúdo ou tra-balhar em cima de uma palavra chave para ficar bem posicionado nos resultados. Isso porque o algoritmo do Google está redu-zindo o peso da relevância de link building. Não que tais links deixem de ser importan-tes, mas o Google está analisando o con-junto de conteúdo das páginas do site. E é pelo conjunto de conteúdo que você fará com que o Google atribua autoridade sobre um assunto ao seu site.

Um critério de posicionamento será a au-toridade sobre um assunto, a disponibili-zação de um acervo informativo sobre um tema ao usuário.

Se você tem um site pequeno, foque em um nicho e em desenvolver conteúdo de head tails, mas também em conteúdo amplo de long tail. Dessa forma, você terá autoridade pelo conteúdo, não só pelo Para sites gran-des, uma possibilidade para alavancar o po-

62 > Artigo > Métricas

Diego Ivo é CEO da Conversion e trabalha com SEO há mais de cinco anos. Toda a sua formação é autodidata, não gosta de burocracia, adora criar estratégias de marketing de conversões e, no tempo livre, está com os amigos ou lendo um bom livro. [email protected]

sicionamento nos sites de busca é optar por, em vez de escrever um artigo somente sobre um determinado assunto, criar hotsites den-tro do seu próprio site. Isso porque o Google está dando mais importância aos diretórios individualmente, em relação ao todo do site, determinando assim que um site pode ser especialista em determinado tema, apesar de o site não ser muito bom como um todo.

A arquitetura da informação e o domínio de campo semântico estão intimamente relacio-nados, e a sua boa utilização ajudará muito no estabelecimento de uma boa posição nos rankings em 2013.

Na parte semântica do código na arquitetura do site, o schema.org se tornará muito impor-tante, visto que o Google tem usado cada vez mais esses dados. Sendo assim, para você aparecer com rich snippet, é crucial essa im-plementação, que tornará o seu site adianta-do no cenário brasileiro, aumentará os aces-sos e o posicionará melhor nos rankings.

Nesse contexto, trabalhar com schema.org, Google+ e Google Places se torna importan-te em função dos resultados locais.

Dê tag nos seus autores com o Rel=authorNo Brasil, não há ainda muita preocupação de vincular a autoria de um artigo a um perfil no Google+, todavia, essa prática tende a se estabelecer e a provocar uma grande revolu-ção. Isso porque o Google está transferindo autoridade da qualidade do artigo para o au-tor, o que tende a substituir o link building, mas para isso o seu autor deve ter autorida-de no assunto.

Com o uso do rel=author, haverá uma valori-zação dos autores, já que pessoas que pro-duzem bons conteúdos serão mais cobiçadas pelos sites, porque os conteúdos delas ficam melhor posicionados nos sites de busca.

Faça link buildingO link building vem perdendo força nos últi-mos anos, mas isso não quer dizer que ele vá parar de existir. Já havia uma tendência do Google em valorizar mais o autor e o cam-po semântico do site. A quantidade de link building perde importância e se torna cada vez mais importante a qualidade de cada link recebido, porque não são todos os site que conseguem estabelecer links relevantes.

Sendo assim, com a combinação de um bom e relevante link building, a dominação de um campo semântico, desenvolvimento de conteúdo multimídia, a disponibilização de um site mobile, uma boa arquitetura da in-formação, a otimização de páginas no sche-ma.org e, se for o caso, a otimização local, seu ranking estará garantido em 2013.

E que 2013 seja um grande ano para todos nós! </>

Por <Luis Leão>

64 > Review

um amBiente de desenvOlvimentO Brazuca para arduinO

mariamOle O mais legal de a plataforma Arduino ser open--source (e open-hardware também) é que mui-tos desenvolvedores podem contribuir com a plataforma, criando tutoriais, desenvolvendo protótipos e até mesmo criando programas que a complementem.

Alex Porto, desenvolvedor brasileiro, lançou uma IDE (ambiente de desenvolvimento inte-grado) mais completa que a padrão, com pos-sibilidade de múltiplos projetos, com ajustes nas opções de compilação e conexão com vá-rias portas seriais simultaneamente.

InstalaçãoO processo de instalação é bem simples, e você precisa apenas indicar qual o caminho do arquivo arduino.exe. Depois de instalado, é necessário criar um “workspace”, no qual seus projetos serão inseridos (é simplesmente uma pasta no seu disco).

UtilizaçãoAo criar um projeto, você tem 3 opções:

� Criar um firmware do zero (mas ele já inicia com o exemplo “blink” do Arduino);

� Importar um dos exemplos do Arduino (mas ele não considera os exemplos das bibliote-cas, apenas carrega a pasta “examples” da instalação do Arduino);

� Importar de um projeto já existente feito na IDE do Arduino.

Qualquer que seja a opção, ele vai montar uma estrutura de pastas (o fonte e o build), além do arquivo que contém as configurações do projeto.

Eu fiquei um pouco perdido quando importei um sketch que utilizava a biblioteca “Servo” do Arduino (que inclusive vem no download da IDE), e o programa não fez importação automá-tica da biblioteca. Isso significa que, se você já possui um projeto utilizando algumas bibliote-cas, será necessário refazer a importação das bibliotecas individualmente.

Prós � Múltiplas portas seriais (isso ajuda inclusive

na hora de testar/debugar alguma função do seu programa);

� Ambiente de desenvolvimento profissional. Para cada projeto, você pode definir um mo-delo de Arduino específico (isso é ótimo se considerar que você vai prototipar sempre com a mesma estrutura);

� Você pode ter mais de uma pasta de biblio-tecas e não é obrigado a criar a estrutura Ar-duino/libraries na pasta de documentos. Para isso, basta inserir a lista de pastas separadas por “;” nas preferências do aplicativo.

Contras � Não é 100% independente da IDE do Ardui-

no (existem algumas dependências de com-pilador e bibliotecas, e você precisa informar o caminho do executável);

� Poderia ter uma forma de fechar facilmente os arquivos abertos (hoje você precisa usar o mouse para fazer isso);

� Faltam comandos de build, gravação e abertura da porta serial em cada projeto utilizando o botão auxiliar do mouse. Você

precisa ativar o projeto primeiro para execu-tar esses comandos.

Conclusão

Ainda não consegui testar outras IDEs, como o Atmel Studio e os plugins para Eclipse para fazer um comparativo mais detalhado, mas, in-dependentemente disso, acredito que há muito trabalho para tornar o MariaMole um ambiente de desenvolvimento totalmente estável.

Para os usuários que são “escovadores de bits” e que querem melhorar questões de desempenho de firmware, ela é a alternativa para personalizar os parâmetros de compila-ção do seu projeto.

Quando o aplicativo estiver mais estável e em mais de uma plataforma, com certeza que-ro usar! Então, se você é desenvolvedor e/ou pode contribuir de alguma forma com o projeto, entre em contato com o Alex Porto e veja como pode ajudar no projeto! Foi uma ótima iniciativa e espero poder falar de mais projetos assim. </>

Luis Leão é desenvolvedor web que encontrou em APIs e hardware aberto novas formas de integrar a web com o mundo real.

deep WeB e O ladO OBscurO dO ser humanO

66 > Artigo > Pela web afora

Nossas vidas e atitudes em sociedade são pautadas, normalmente, por dois filtros: o primeiro deles é o filtro legal, ou seja, o universo das leis que regem um país e que definem o que é lícito ou ilícito dentro de determinado contex-to social. O outro diz respeito aos valores éticos e morais que cada indivíduo recebe, desde o berço. Tais valores, apesar de não estarem formalizados em forma de lei, são muito representativos de tudo aquilo que se faz a si mesmo e ao outro (sendo que, aqui, o “outro” é a representação da própria socieda-de), norteiam condutas e garantem uma sociedade mais ou menos digna, de acordo com a forma como se encara o respeito ao próximo.

O que aconteceria se tais valorem não fos-sem vigentes? Qual seria a conduta huma-na sem os filtros comportamentais, sem a noção de responsabilidade? O que cada um faria, caso não prestasse contas (na esfera legal ou da consciência individual), de seus atos e de sua conduta, frente a uma sociedade inteira?

Há quem diga que seria o caos. Outros, defensores da corrente de pensamento anárquica, lutam por uma sociedade as-sim, pois acham que o homem não preci-sa de mecanismos de controle. Segundo essa corrente, cada um de nós saberia, por natureza, respeitar o espaço do outro, sem a necessidade de um estado que re-preenda ou de correntes morais que cas-trem. Será que é tão simples assim?

A deep webSe na vida “real” ainda não foi possível constatar se tal teoria funcionaria de fato,

na vida digital temos um exemplo do que acontece ao homem que conta com a total liberdade, sem dispositivos de repreensão: a deep web.

Trata-se de uma parte (consideravel-mente grande) da Internet que, sim-plesmente, não “existe” para os me-canismos de busca por um simples motivo: em sua concepção, as páginas receberam a tag <meta name=”robots” content=”noindex,nofollow”>, que tem dupla função: faz com que os robôs dos mecanismos de busca não visualizem de-terminadas páginas (algo útil, por exemplo, quando o site está recebendo ajustes e ainda não está pronto para ser visualiza-do por todos) e também impede que os mesmos robôs sigam os links desses si-tes. Eis a receita do anonimato. Assim, curiosamente, os conteúdos só ficam acessíveis para quem tiver os links diretos, o que acontecerá somente se o dono do site resolver divulgar seus links em locais específicos da web.

Por <Fabiano Pereira>

Garantia de anonimato para quem navegaQuando navegamos na Internet, deixa-mos rastros por todos os lados: cookies, históricos públicos, históricos no servidor/provedor de serviços e outros mais espe-cíficos. Assim, na superfície - na navega-ção tradicional - o anonimato é uma ilusão, pois bastam alguns conhecimentos bási-cos para rastrear a navegação de quem quer que seja. A Polícia Federal já utiliza recursos de rastreamento e consegue “pe-gar no pulo” alguns pedófilos desavisados. Uma página ser protegida da indexação dos mecanismos de busca não garante o anonimato de quem navega.

Para que o usuário fique totalmente anônimo, existe um browser específico, chamado Tor (https://www.torproject.org). Partindo da premissa de uma Internet totalmente livre, o browser oferece anonimato absoluto, sendo ferramenta essencial de quem de-seja ficar oculto em suas navegações pela deep web.

Por incrível que pareça, é simples assim: basta usar o antivírus no talo, uma máqui-na virtual que permita simular outro com-putador dentro de seu sistema principal, garantindo mais segurança para os seus dados, o Tor, e pronto: é só mergulhar no pântano lamacento da deep web.

O que encontro na deep web?O caminho comum, depois de instalar a máquina virtual, colocar o antivírus no modo paranóico e instalar o Tor, é aces-sar a Hidden Wiki, espécie de Wikipedia do caos: desde os previsíveis documentos secretos dos governos, tutoriais de inva-são de sistemas dos mais variados tipos,

senhas de usuários incautos (de serviços populares como o Facebook) até links para grupos de estupradores, pedófilos, cani-bais e usuários de drogas. Tudo de forma natural e convivendo, harmoniosamente (se é que tal termo cabe aqui), com os de-mais conteúdos.

Todos os acessos da deep web passam por aqui, é uma espécie de Google do submundo. Sem filtros, nem pudores, você acha tudo o que a doentia mente humana é capaz de conceber, de atos hediondos e macabros a anúncios de assassinos ofe-recendo seus serviços e de gente que se oferece para ser violentada. E quanto mais se explora, mais bizarro é.

Infográfico: mergulhando na deep web

https://www.torproject.org/download/download-easy.html.en







68 > Artigo > Pela web afora

1. Wikileaks

Julian Assange é o mentor do Wikileaks (http://wikileaks.org), site que tem o ob-jetivo de pesquisar documentos secretos de governos de todo mundo (sendo que tal busca se dá, mais facilmente, via deep web) e publicá-los, para o desespero de muita gente poderosa.Assim como a por-nografia (de maneira geral), o Wikileaks é um dos únicos sites que fazem a ponte en-tre a deep web e a “parte visível” da web, já que é normalmente indexado pelos me-canismos de busca. Não por acaso, Julian Assange está com prisão decretada em diversos países e corre risco de ser preso (ou assassinado) a qualquer momento.

2. Google

O Google é o principal canal de pesquisas de qualquer assunto na Internet. Na ver-dade, há quem dispense a barra de ende-reços do navegador e digite qualquer en-dereço de web somente pelo mecanismo de busca. Muito do sucesso do Google se deve à mudança de paradigma de estabe-lecer a relevância de determinado site: o PageRank é um algoritmo de busca que define a relevância não só pela densidade de palavras-chave existentes, mas, sobre-tudo, pelo número de links que apontam para determinado site. Quanto mais links, maior a importância. Por isso, sites da deep web não aparecem, pois são ocultos aos olhos do gigante das buscas.

3. Governos

Os governos compartilham documentos secretos na Internet através de dois ca-nais distintos: um deles é a utilização de redes privadas, ou fechadas, que volta e meia são invadidas por hackers militantes habilidosos, que o fazem por motivações

filosóficas e políticas. A outra forma é a uti-lização do mesmo atributo descrito aqui, que torna as páginas ocultas aos olhos dos mecanismos de busca.

Tanto uma forma como a outra fazem a alegria de sites como o Wikileaks, que, no nível subterrâneo da deep web, torna esses documentos públicos, para a web que se vê na superfície. Há quem afirme já ter encontrado documentos muito mais reveladores no ambiente da deep web, que nem mesmo o Wikileaks teria cora-gem de publicar.

4. Hackers

A deep web é o habitat natural da maio-ria dos hackers, uma vez que já estão ha-bituados a navegar em total anonimato. Hackers são, normalmente, movidos por questões políticas e conceituais, utilizando seus conhecimentos para derrubar gover-nos, desmoralizar empresas de conduta desleal (dentro dos princípios hackers) ou simplesmente para se divertirem, testando habilidades e conhecimentos profundos de Internet e segurança em rede.

Muito do combustível que alimenta sites como Wikileaks é oferecido graças ao tra-balho habilidoso e dedicado dos hackers que, diferentemente dos crackers, não fazem por dinheiro, mas sim por amor a determinadas causas (e o fim das grandes corporações online e de governos corrup-tos são causas caras para tal grupo).

5. Pornografia

A pornografia da superfície move milhões de dólares e é a maior responsável pelos picos de tráfego da Internet. Há, porém, o pornô ilegal, aquele proibido por tudo quanto é lei do mundo e que o mínimo de

bom senso e decência condena violenta-mente. Trata-se de bizarrices envolvendo estupros, canibalismo erótico, pedofilia, necrofilia e outros termos, capazes de revirar os estômagos dos mais fortes. A pornografia oferece uma perigosa ponte entre a web visível e a invisível, sendo fator motivador do grande tráfego da deep web pelo mundo.

Podemos estabelecer uma relação com o mundo das drogas: enquanto o pornô le-gal e visível na superfície é oferecido como um cigarro de maconha, a pornografia das entranhas da deep web é como a heroína, droga pesada e difícil de ser encontrada.

Eu devo conhecer a deep web?De forma alguma. É fortemente recomen-dado que você não faça isso, pois as con-sequências psicológicas são imprevisíveis. Mesmo com todo o cuidado e todo o equilíbrio do mundo, é provável que tenha pesadelos terríveis e que tais conteúdos demorem muitos dias para se apagarem de sua mente.

Ainda há o risco de sua máquina ser in-terceptada e invadida. A deep web possui mais vírus que qualquer hospital público de baixa qualidade; assim, uma simples e rápida passagem por lá pode ser consi-deravelmente fatal, em termos computa-cionais, é claro.

Mesmo assim, se resolver mergulhar, sai-ba que muito do conteúdo mais extremo é inacessível para novos usuários e que, para conhecer mais, o risco aumenta. As piores fotos, o acesso aos fóruns especí-ficos, tudo exige uma dose de exposição e de coragem que somente quem tem pouco a perder está disposto a correr. Se

Fabiano Pereira é designer gráfico com especializa-ção em UX Design, Front-End e Wordpress. Palestran-te, escritor, músico e curioso de plantão. www.fabianopereira.art.br.

resolver devastar os pântanos mais pro-fundos dessa perigosa realidade paralela, estude muito e se prepare para ter sua máquina infestada de todo o tipo de praga virtual.

Assim, crianças, não se arrisquem, não se iludam e deixem as profundezas para os seus habitantes temerosos.

Sabemos que crimes horríveis ocorrem diariamente ao lado de nossas casas; sa-bemos que, andando nas ruas, cruzamos com todo tipo de gente violenta; que, ao levar nossos filhos em parques infantis, po-demos encontrar, sem nem imaginar, pe-dófilos que ficam no aguardo de qualquer vacilo para sequestrarem nossas crianças e que aquele senhor respeitável que cum-primentamos no fila do pão pode ser um sadomasoquista da pesada, que utiliza pe-sados artefatos de tortura. Porém, saber dessas verdades mudaria algo em nós? Seria realmente bom ou nos deixaria ainda mais paranoicos, a moda de quem assiste aos programas vespertinos de sensacio-nalismo da TV aberta?

Existem duras realidades, porém o me-lhor caminho é se precaver e fugir delas, pois, como diria minha saudosa avó, “o que os olhos não enxergam, o coração não sente” e “péssimas companhias não pegam, mas sujam”. </>

70 > iMasters Box

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

cOntact managerUma aplicação simples que demonstra o uso da Con-tactsContract API, assim como a inserção manuai de novos contatos de uma con-ta específica. Em diversas situações, você desejará in-teragir com a rede de con-tatos do usuário, permitindo uma experiência mais gra-tificante para ele. Gratuito. http://ow.ly/hRxHM

html validatOrA extensão HTML Validator para Firefox realiza a validação do HTML da sua página den-tro do próprio Firefox, levando em consideração os mesmos parâmetros de validações do W3C. Exibe a quantidade de erros encontrados na página e o tipo de erro de que se trata, indicando as linhas do código onde ocorrem os erros. Essa extensão é ideal para deixar sua página dentro dos pa-drões Web do W3C. Gratuito. http://ow.ly/hRwSu

nextgen galleryConhecido como um dos me-lhores plugins para galeria de fotos no WordPress, também é muito flexível, permitindo criar templates diferentes para a exibição das gale-rias e fotos. Também conta com vários plugins auxiliares para uma turbinada a mais. http://ow.ly/hRxx2

suBlimetextÉ um editor de código sofis-ticado que vem sendo cada vez mais utilizado por desen-volvedores. É uma ferramenta leve, com interface simples e extremamente rápida. Possui versões pagas e gratuitas. http://www.sublimetext.com/

herOkuUma nova forma de desen-volvimento para Rails - um ambiente de desenvolvimen-to online onde você desen-volve e hospeda suas apli-cações, tudo via browser. O Heroku permite criação e edição online, importação de aplicações desenvolvidas fora do Heroku, compartilha-mento de aplicações, desen-volvimento colaborativo, ge-ração de código (generators e migrate), Rails console, e ainda não há necessidade de configuração e deployment. Versões pagas e gratuitas. http://www.heroku.com/

mercurialÉ uma ferramenta multi-plata-forma de controle de versão distribuído para desenvolve-dores de software. O sistema é implementado principal-mente em Python, porém o utilitário binário diff foi escri-to em C. O Mercurial foi ini-cialmente escrito para rodar sobre Linux, mas foi portado para Windows, Mac OS X, e a maioria dos outros siste-mas UNIX. É principalmente um programa de linha de co-mando. Todas as operações do Mercurial são chamadas através de palavras-chave de opções para o programa controlador hg, uma referên-cia para o símbolo químico do elemento Mercúrio. Gratuito.http://mercurial.selenic.com/

cherrypyFramework para desenvol-vimento orientado a objeto voltado para a web, usando apenas Python. Não intrusi-vo, o CherryPy permite criar aplicações web de grande porte, como se tivesse de-senvolvendo um simples aplicativo orientado a obje-to. Desenvolvido em 2005, já está bem estável. É gratuito. http://cherrypy.org/

api micrOsOft de iOs para Wp7Permite aos desenvolvedores de aplicativos para iPhone converter os programas para rodarem no sistema Windows Phone 7. A API liberada pela empresa mapeia a interface de programação dos aplica-tivos e contém um guia para que os desenvolvedores pos-sam fazer a transferência en-tre as plataformas. Gratuito.http://ow.ly/hPL0i

zend frameWOrkOferece uma aplicação ro-busta e de alto desempenho MVC, uma abstração de ban-co de dados que é simples de usar, e um componente que implementa formas de HTML, validação e filtragem para que desenvolvedores possam consolidar todas essas operações. A licença do Zend Framework é com-pativel com a BDS Licence, o que permite que softwares construídos com o framework possam ter código proprie-tário. Essa abertura é impor-tante para empresas porque nem sempre é possível libe-rar o código fonte. Gratuito. http://zendframework.com/

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

Documents