Revista iMasters #05 - Feveireiro

Fevereiro 2013 / Ano 02 / Edição 05

O lado B da tecnologia

Nós fazemos a Internet no Brasil

Criatividade e Inovação Alternativas

R$24,00

Desenvolvimento um guia para otimizar as suas aplicações web

Entrevista Nada é acessível o suficiente que não possa melhorar

Pela web afora Deep Web e o lado obscuro do ser humano

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 Daniotti, 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 redacao@imasters.com.br Twitter: @iMasters Facebook: /PortaliMasters Os artigos assinados são de responsabilidade dos autores e não refletem necessariamente a opinião da revista. É proibida a reprodução total ou parcial de textos, fotos e ilustrações, por qualquer meio, sem prévia autorização dos artistas ou do editor da revista.

Editorial 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 minha carreira e, nesse sentido, espero poder corresponder ao convite.

Você, leitor, deve estar se perguntando: quem é esse cara? Desde sempre, me interesso pelo desenvolvimento de projetos que envolvam interatividade, 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: prototipando 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 consumidores, 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ência, 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. www.luisleao.com.br redacao@imasters.com.br

6 > Sumário

20 :: Capa > O lado B da tecnologia

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

44 :: Front-End Como otimizar aplicações web

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

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

A iMasters é uma revista de Tecnologia/Web aberta a novas ideias.

Para colaborar envie o seu material por e-mail <revista@imasters.com.br>

8 > Entrevista > Acessibilidade > Horácio Soares

Nada é acessível o suficiente que não possa melhorar

Por <Rina Noronha>

Acessibilidade web não é nenhum assunto novo. No entanto, ainda assim encontramos um grande número de páginas que não são acessí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 rapidamente, em comparação com anos atrás, mas ainda são passos pequenos, que precisam ser fortalecidos.

Horácio Soares é especialista em acessibilidade web, design, experiê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 Consultivo 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 exclusiva, 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.

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

Revista iMasters: Como você começou a trabalhar 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 deficientes visuais.

Na época eu não sabia exatamente o que representava a palavra acessibilidade e muito menos o que precisaria ser feito para desenvolver um site acessível. Também não tinha a menor idéia de como, nem com que tipo de tecnologia, 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 acessível da interface do sistema. Tive que aprender 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 estão preocupadas em atender e fornecer serviços para essa “minoria”.

cada vez mais significativa de nossos designers/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 incipiente, 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 acessibilidade. 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 ainda é muito pouco, considerando-se que a validaçã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ó, independentemente do tipo de pagina? (Portais de noticia, blog, E-commerce, etc)

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

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

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

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, independente de suas culturas, experiências, deficiências, sistemas e dispositivos utilizados.

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

Mas me dá muito orgulho em ver que parte

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

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

10 > Entrevista > Acessibilidade > Horácio Soares

plesmente permitir o acesso a serviços e conteúdos. Por exemplo, minha amiga Lêda Spelta, 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 pessoa sem deficiência visual, que vê totalmente) com a mesma experiência que ela não levaria 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 conseguir 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écnicas de acessibilidade e de padrões web, é preciso garantir a acessibilidade através da validação com usuários e com melhoria contínua. Nada é acessível o suficiente que não possa melhorar.

RiM: Qual é o principal pecado dos sites brasileiros em termos de acessibilidade?

HS: São muitas as heresias que prejudicam a acessibilidade web, mas classifico como sendo o pecado capital dos sites brasileiros a falta de foco. Isso mesmo, os projetos são desenvolvidos 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 acessível se não se sabe quais problemas ele irá

resolver e menos ainda quem é seu públicoalvo? Impossível...

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

Assim, mesmo em projetos onde a acessibilidade faz parte da lista de requisitos obrigatórios, primeiro desenvolvem o site, para só depois implantar 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 desenvolver os projetos, mas até onde isso é realmente um culpado, e até onde a culpa é do desenvolvedor/designer, por não fazer uso dos padrões web e, consequentemente, criar páginas 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 viciados a trabalhar contra o relógio. Porém, mesmo correndo o risco de uma cara feia, os desenvolvedores/designers têm o dever de alertar os responsáveis que esse tipo de postura certamente causará problemas na qualidade dos projetos, além de poderem ser processados por falta de acessibilidade. É sempre muito difícil mudar a cultura, principalmente 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 resultados de um projeto original “A”, com um outro dentro dos padrões “B”. Ou ainda, os gestores podem ser sensibilizados ao verem uma pequena gravação com testes de usabilidade com usuários utilizando o principal produto/serviço da empresa.

Dentro do possível, é preciso sempre tentar incluir 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 podemos listar três grandes desafios/barreiras que precisam ser vencidos/superados para uma web mais acessível no Brasil:

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

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

B. Capacitação: após serem conscientizados, os profissionais Web precisam de treinamento para conhecerem as técnicas de desenvolvimento, 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 acessibilidade Web, caso contrário, todo investimento se tornará inútil, volátil.

RiM: O que tem sido feito, na esfera governamental, 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 projeto, limitar a criatividade e o design e atrasar o desenvolvimento. Consideram “um preço muito alto para atender um número pequeno de pessoas e que não fazem parte de meu público 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 iniciativa do W3C Escritório Brasil, lançado em 2012 e que será repetido em 2013. O prêmio

12 > Entrevista > Acessibilidade > Horácio Soares

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

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 atendam de verdade as necessidades das pessoas.

Precisamos focar mais nas pessoas e menos nas tecnologias.

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 Internacional da ONU sobre os Direitos das Pessoas 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 determina que todas as empresas e instituições, de administração pública ou privada, devem assegurar o acesso a informação e a comunicação a todas as pessoas com deficiência e, a elas, devem ser oferecidas as mesmas oportunidades 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

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

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

RiM: Com relação a outros países, como estamos? 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 lentas. O Brasil segue o caminho de países como Estados Unidos, Inglaterra, Portugal, Australia, entre outros, com adoção de leis nacionais sobre a acessibilidade web para empresas estatais 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, desenvolver, 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-

RiM: Quais são os desafios relacionados a acessibilidade nos dispositivos móveis e qual sua avaliação sobre a nova funcionalidade 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 quanto 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 dispositivos móveis e em desktop.

Algo que pode ajudar a melhorar a acessibilidade 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 realmente é 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 necessidades dos pequenos dispositivos, e uma versão desktop mais leve e objetiva, impregnada pela simplicidade do dispositivo menor.

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

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 mercado? Ela existe? Como funciona?

HS: Esse é um grande e promissor mercado.

Hoje, com o uso das técnicas de acessibilidade propostas pela WAI/ARIA (Accessible Rich Internet Applications) do W3C (http://www. w3.org/WAI/intro/aria.php), já é possível desenvolver conteúdo dinâmico e interfaces interativas bem acessíveis com Ajax, HTML, JavaScript, e tecnologias relacionadas.

Falta melhorar o suporte dos navegadores e tecnologias 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 resposta/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 argumentos fortes sobre as vantagens da acessibilidade e por que ela não deve ser tratada pelas empresas como uma obrigação social e legislativa, mas sim como uma vantagem competitiva.

Horácio e MAC (arquivo pessoal)

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 tecnologias, 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 pesquisado. </>

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 Informação, Design, Web Design e afins.

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

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

14 > Coluna > +Interatividade

if ( ignorancia == bençÃo ) return false; Por <Pedro Gravena>

Nos últimos 2 anos, tenho passado por uma lavagem cerebral intensa para aprender programaçã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 programação é ainda mais importante do que aprender uma segunda língua.

Minha ideia era simples: aprender a programar 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 visão do meu objetivo.

Explico: normalmente fico olhando pessoas que fazem design com códigos, ou traquitanas incríveis. Acompanho o trabalho do Mr. Doob, ou do pessoal do Google Creative Labs e fico invejando como eles são capazes de realizar 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 também falar sobre o Eye Writer. O trabalho da produtora é incrível! Para quem gosta de motion graphics, basta citar que fizeram a abertura 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 chegou 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 gostaria de fazer algo assim, arduino, geringonças, etc). Fiquei bem surpreso quando ele respondeu: “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á recebendo contribuições e melhorando o projeto inicial, como montou uma comunidade de desenvolveres 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 trabalhando na garagem.

Antes que eu pudesse fazer mais alguma pergunta, veio a segunda resposta: - Ele só consegui porque não tinha a mínima ideia do que estava fazendo, 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 conhecida, mas mudando uma palavra: “Naivety is a Bliss!” - Como se diz Naivety em português?

A palavra é inocência. E a frase faz muito mais sentido com essa palavra.

Depois desse encontro, entendi que só devo continuar aprendendo 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. </>

Para saber mais, procure por Mick Ebeling no site do TED, ou acesse: http://new.theebelinggroup.com

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

16 > Artigo > Marketing Digital

Um mundo “novo” para o marketing digital:

Big Data

Por <Marcela Daniotti>

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 enfatizar o que já era feito no passado, mas que agora 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 ferramentas convencionais.

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

Vamos trazer essa realidade para o nosso mundo? 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 efetivamente o ROI de marketing Grandes empresas são muito menos propensas a coletar novas formas de dados digitais como dados móveis (19%) do que para reunir dados tradicionais sobre os clientes, como informações demográficas (74%) e comportamentais (54%) 85% das grandes empresas já estão usando contas de redes sociais (por exemplo, sobre as contas da marca Facebook, Twitter, Google, Foursquare) como uma ferramenta de marketing 65% dos profissionais de marketing, ao comparar a eficácia do marketing entre diferentes meios digitais, Big Data é “um grande desafio” para o seu negócio.

O desafio e ao mesmo a promessa das novas 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 manipulam Big Data podem prosperar?

Obama, o Presidente Digital Se nas penúltimas eleições presidenciais nos Estados Unidos, Obama revolucionou, nas últimas 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 eleitores. 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 insights mais e mais inteligentes. Um verdadeiro Big Brother Eleitoral, como a própria equipe envolvida carinhosamente apelidou.

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

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

Cidades Inteligentes: Projeto Cidade 2020 Com o objetivo de desenvolver um novo modelo de cidade inteligente sustentável, ecológica e economicamente por meio da análise da demanda 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 tecnologias, 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 digitais para aprimorar e definir os serviços oferecidos. 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 ajustar os serviços interativos acessíveis oferecidos para as necessidades reais.

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

Respeitando a dualidade universal mais famosa, a tecnologia de Big Data é clamada pelo bem e crucificada pela “mal”. O problema, neste caso, é a preocupação com privacidade. 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 é utilizada, 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 fornecer 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.

18 > Coluna > Padrões Web

Por dentro do W3C Brasil Por <Reinaldo Ferraz>

O World Wide Web Consortium (W3C) aterrissou em terras brasileiras em outubro de 2007. Há quase seis anos, o primeiro escritó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 Coordenação do Ponto BR (NIC.br) para que a comunidade brasileira não seja apenas adotadora de padrões Web. O Brasil pode contribuir para o desenvolvimento da Web participando ativamente 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 alcance mundial sobre grande parte dos padrões, o W3C Brasil dá atenção especial a determinados temas:

Open Web Platform Esse é o conjunto de tecnologias abertas criada 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 quaisquer 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 dados, outras pessoas podem fazer uso dessas informações e criar aplicações mesclando os dados das mais diversas fontes. Temos trabalhado bastante para disseminar a cultura de dados abertos no Brasil e no mundo.

Acessibilidade na Web Permitir que a Web seja acessada por qualquer pessoa, independentemente de alguma deficiência, é fundamental para o maior princípio do W3C: uma Web para todos. A tecnologia trouxe autonomia 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 participa de ações e projetos para fomentar o uso e o desenvolvimento dos padrões. Dos diversos projetos que temos planejados para 2013, posso destacar alguns deles de grande importância 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

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 comunidade Web brasileira para a discussão e o fomento do uso e desenvolvimento de padrõ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 Acessibilidade 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 padrõ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érica 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 realizará a conferência em parceria com a Comissã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 Pessoas com Deficiência Todo dia 3 de dezembro, dia esse proclamado pela ONU como o Dia Internacional das Pessoas com Deficiência, o W3C Brasil promove ações para a conscientização sobre a importâ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 discussã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 padrões testes etc., tudo isso de forma aberta e livre. Esta a é a grande vantagem do W3C: permitir 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 Por <Blab>

Lado B é uma expressão que surgiu com os antigos discos de vinil, onde os artistas aproveitavam 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 alternativo. Esse outro lado podia não ter interesses comerciais e, por isso mesmo, era mais autêntico e representava melhor a essência do artista.

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 informaçã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 fosse um disco de vinil, com dígitos imutáveis, ou você está escutando o lado B do universo digital 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 sistema 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 tecnologia não foi inicialmente desenvolvida para a atividade artística, porém são estes os responsá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 muito pouco, e é aí que a arte entra, sujeita a errar e a ver coisas novas.

Giselle Beiguelman, midiartista, curadora e pesquisadora, criou um aplicativo para dispositivos

móveis, I Lv Yr GIF (http://www.desvirtual. com/i-lv-yr-gif-webapp/), que permite composições visuais interativas através de antigos GIFs animados. Com isso, temos que o desenvolvimento de aplicativos não se restringe apenas aos engenheiros da computação, sendo 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 popularização para que o aplicativo permaneça vivo.

22 > Capa

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

O Arduino, por exemplo, hardware livre que revolucionou a cena digital, é open source, ou seja, toda informação sobre seu desenvolvimento 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 desenvolvedores. 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 celebração de uma obra de arte, criam-se inúmeras formas de utilização da idéia ali criada. Hoje o que vemos é o oposto: engenheiros e afins criando tecnologias, as quais artistas se ocupam 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 Janeiro, criou uma série de pinturas que se baseiam nas imagens obtidas por um algoritmo que ele mesmo criou utilizando uma ferramenta de código aberto que facilita o uso de determinadas linguagens de programação para designers e artistas, tornando suas criações interativas 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, substituiu 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ásica 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 computador. Em obras interativas, a posição cartesiana do seu mouse é traduzida como o ponto de origem para algum outro acontecimento.

Muitas vezes é na simplicidade que se encontra o complexo. O trabalho de Cadu Lacerda acabou 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 letras, e assim podemos ler o texto “existente” em cada imagem.

Futuro no passado Muitas vezes a inovação vem de peças já ultrapassadas, 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 sinal 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 tecnologia que é cada vez mais potente, porém em menores escalas. O Raspberry Pi, computador

Workshop de Mateus Knelsen

Imagem: Parasimétrica – Algoritmo das Cores

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 assistimos com os óculos ganharam enorme credibilidade com o filme Avatar, de James Cameron, mas eles existem desde 1915; só que agora, com a tecnologia digital, ganharam força novamente. Outra grande cartada do passado são as holografias, que estão fazendo sucesso em shows onde antigos músicos, digamos já “extintos”, voltam de suas tumbas através de imagens holográficas que interagem com a banda real. Esse é um efeito que era muito usado por antigos mágicos e se chamava phantasmagoria, e não eram holografias, mas um jogo de espelhos 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 valiosí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 proposta 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 é formado por pessoas. Parece que a galera descolada esta invadindo o espaço dos nerds.

Radamés Ajna lidera já há alguns anos o hackerspace 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 hackerspaces funcionam ao oposto disto.

Um hackerspace, como o nome já diz, é um local onde hackers, curiosos que gostam de fuçar coisas, se encontram fisicamente. É um movimento internacional que vem crescendo todos os dias, com grupos e mais grupos surgindo, com o intuito de compartilhar seus conhecimentos construindo uma comunidade de gente esperta capazes de superar qualquer desafio.

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

24 > Capa

restringe ao eixo Rio-São Paulo. O grupo Gambiologia (gambiologia.net/blog), de Belo Horizonte, 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.

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 mundo à 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 projeto foi financiado através de crowdfunding, ou seja, por pessoas físicas interessadas na iniciativa 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 imprimir outra impressora 3D, ainda mais avançada.

A Casa de Cultura Digital ainda abriga o MemeLab (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 decidiram 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

Os que frequentam o universo do desenvolvimento tecnológico formam uma cena cada vez mais variada e animada. Entre eles está Marcelo 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 disco novamente e se introduz na cena hacker: já conduziu o hackerspace do SESC Belenzinho e já foi visto usando tupperwares como distorcedores 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. Segundo Arlindo Machado, o segredo é a convergência – quanto mais individualizamos os campos 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 disponibilizam 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 caminhos. 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. </>

Texto: Blab - Adriana Pedrosa e Iliana Grinstein Fotos: 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.

26 > Criatividade Tecnológica

Festival das Luzes na era da interatividade Por <Lina Lopes>

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

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.

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 balada. Dizem que, desde 1850, os lionenses saem às ruas para admirar a atmosfera luminosa que a cidade ganha, sempre no dia 8 de dezembro.

Da parafina ao LED, passamos por iluminação a gás, luminárias de querosene, lâmpadas a arco voltaico, lâmpadas elétricas incandescentes 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.

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

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

Para ampliar nosso entendimento dessas relações, voltemos à balada, ou melhor, à iluminaçã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 tinham suas referências no universo das grandes pinturas, estavam sobre as fachadas de edifícios que faziam parte do patrimônio da cidade, como o Palácio da Justiça, a Catedral de Saint-Jean e a Basílica de Fourvière (erguida em homenagem à Virgem Maria).

Dessa forma, a dimensão espacial chamava 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ógica da obra era bem menos onerosa do que

eu esperaria, uma vez que, do lado oposto do canal, havia uma dúzia de refletores cênicos com lâmpadas de alta potência da família dos elipsoidais (na verdade, deviam ser do tipo seguidores). Esse refletor possui a capacidade de utilizar gobos, uma espécie de filtro físico que possui imagens fixas e, dessa forma, diminui o custo da produção. As imagens, assim, mudavam dinamicamente e acompanhavam um videomapping (sim, havia uma parte mapeada, mas bem menor). A imersão dada pela projeção em todas aquelas fachadas, pelo reflexo na água e ainda com uma combinaçã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 fachadas distintas que cercam a Place des Terreaux. 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-

28 > Artigo > Criatividade Tecnológica

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

sibilitam o movimento do facho de luz pelo espaço, que entram em cena para acompanhar 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 propostos ao longo da cidade para visualizar as intervenções luminosas (eram cerca de 60 projetos). As rotas do app contavam com mapas e, se conectadas à internet 3G, eram capazes de orientar o usuário pelo festival. Além disso, era possível compartilhar as próprias fotos do festival, votar nas mais interessantes, e na iluminação que mais agradou, tudo por meio do aplicativo. Não tive oportunidade 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 també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 tecnologias 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 sistema de computação visual é tão aperfeiçoado e tangível que a opção por seu uso, atualmente de maneira massiva, em obras ditas interativas não é nenhuma surpresa. Basicamente, essa tecnologia foi usada no festival para permitir ao espectador usar seu corpo para interferir nas projeções. Lembro-me

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 provocando uma experiência cada vez mais afetiva.

ms e outras redes sociais, ou mais ferramentas 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 iluminaçã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 encontrar uma dessas lâmpadas na balada. </>

Quem acompanhou o Intercon 2012, organizado pelo iMasters, pode ver na Arena Criatividade, eu e o parceiro Luis Leão demonstrando 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ências que fizemos com a iluminação do Intercon 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-

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

!DOCTYPE html><html lang=”en”> <head> <meta charset=”utf-8”> <title>Bootstrap</title> <me ame=”viewport” content=”width=device-width, initial-scale=1.0”> <meta name=”description” co ent=””> <meta name=”author” content=””> <!-- Le styles --> <link href=”assets/css/bootstra ss” rel=”stylesheet”> <link href=”assets/css/bootstrap-responsive.css” rel=”stylesheet”> <li ref=”assets/css/docs.css” rel=”stylesheet”> <link href=”assets/js/google-code-prettify/prettif ss” rel=”stylesheet”> <!-- Le HTML5 shim, for IE6-8 support of HTML5 elements --> <!--[if lt IE 9 script src=”assets/js/html5shiv.js”></script> <![endif]--> <!-- Le fav and touch icons --> <li el=”apple-touch-icon-precomposed” sizes=”144x144” href=”assets/ico/apple-touch-icon-144-preco osed.png”> <link rel=”apple-touch-icon-precomposed” sizes=”114x114” href=”assets/ico/apple-touc con-114-precomposed.png”> <link rel=”apple-touch-icon-precomposed” sizes=”72x72” href=”assets/ic

Frameworks para front-end

30 > Opinião

Após o surgimento do Bootstrap (desenvolvido no Twitter), vários outros frameworks têm surgido. Isso representa um avanço na padronização e o acesso mais fácil a webstandards ou pode ser uma armadilha 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 desenvolvimento 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 produtividade 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 Accessibility Initiative - Accessible Rich Internet 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 surgimento dos frameworks. Para se desenvolver algo multplataforma e acessivel, além de “seguir fielmente os frameworks”, devemos aplicar as diretrizes de acessiblidade / semantica. <Sergio Nascimento> (aka Elvis Detona) é FrontEnd Developer na agencia Tribo Interactive e um dos organizadores do FrontInSampa

De modo geral, todos os frameworks baseados no Twitter Bootstrap são bons. Essa popularização é boa por que os bootstraps ajudam na padronização do código usado no projeto, sugerindo a criação de um CSS reutilizável e também oferecem um grid system responsivo, isso facilita muito 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 sendo uma responsabilidade do desenvolvedor. <Ofelquis Gimenes> é Desenvolvedor Front-end Freelancer.

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 acessibilidade 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 todos para todos”. A utilização de um framework pode ajudar como também atrapalhar e deixar o desenvolvimento de um produto bem caótico, tudo depende de como será implementado e a acessibilidade 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 webstandards e das leis sancionadas pelo Governo Federal nesse quesito. <Bruno Pulis> é Web Developer na 3bits Estúdio Interativo e participante ativo dos gropos “Acessibilidade Digital” e “Frontend Brasil”

É fato que têm surgido alguns 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 alinhados com os padrões web e de acessibilidade, mas cabe ao desenvolvedor refletir sobre os impactos que ele trará a performance, curva de aprendizado da equipe e custo de manutenção, dentre boas opções no mercado podemos destacar: Twitter Bootstrap, Skeleton, Zurb Foundation. <Davidson Fellipe> é Front-end Engineer na Globo.com e BrazilJ-Foundation

32 > Artigo > Segurança

Confiança, certificados digitais e autenticação Por <João Neto>

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 utilizadas em uma aplicação. Quando solicitamos ao usuário uma senha, nome do primeiro professor, 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 identidade 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), cidade, 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.

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 certificado 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 openssl, 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. $ mkdir ~/certs 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): $ mkdir ~/certs/ca $ cd ~/certs/ca $ opensslgenrsa -des3 -out ca.key 4096 Generating RSA private key, 4096 bit long modulus ....................................................................... ...................................++ .....................................................................++ e is 65537 (0x10001) Enter pass phrase for ca.key: Verifying - Enter pass phrase for ca.key 3. Utilizamos a chave para gerar uma requisição de assinatura (CSR) e o certificado da CA: $ opensslreq -new -x509 -days 365 -key ca.key -out ca.crt Enter 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 blank For some fields there will be a default value, If you enter ‘.’, the field will be left blank.

----Country Name (2 letter code) [XX]:BR State or Province Name (full name) []:Sao Paulo

34 > Artigo > Segurança

Locality Name (eg, city) [Default City]:Sao Paulo Organization Name (eg, company) [Default Company Ltd]:iMasters Organizational Unit Name (eg, section) []:dev Common Name (eg, your name or your server’s hostname) []:Minha CA Email Address []:neto.joaobatista@localhost

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: $ mkdir ~/certs/server $ cd ~/certs/server $ $ opensslgenrsa -des3 -out server.key 4096 Generating RSA private key, 4096 bit long modulus ....................................................................... ............++ ....................................................................... ....................................................................... ................++ e is 65537 (0x10001) Enter pass phrase for server.key: Verifying - Enter pass phrase for server.key: 2. Com a chave, vamos gerar uma requisição de assinatura (CSR) para o servidor: $ opensslreq -new -key server.key -out server.csr Enter 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 blank For some fields there will be a default value, If you enter ‘.’, the field will be left blank.

----Country Name (2 letter code) [XX]:BR State or Province Name (full name) []:Sao Paulo Locality Name (eg, city) [Default City]:Sao Paulo Organization Name (eg, company) [Default Company Ltd]:iMasters Organizational Unit Name (eg, section) []:dev Common Name (eg, your name or your server’s hostname) []:example. localhost Email Address []:admin@example.localhost Please enter the following ‘extra’ attributes to be sent with your certificate request A challenge password []: An optional company name []:

Nota: Perceba que, ao contrário do certificado da CA, utilizamos o nome do servidor 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 assinatura do servidor: $ 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.crt Signature ok subject=/C=BR/ST=Sao Paulo/L=Sao Paulo/O=iMasters/OU=dev/CN=example. localhost/emailAddress=admin@example.localhost Getting CA Private Key Enter pass phrase for /home/neto/certs/ca/ca.key: Nesse instante temos: Chave privada da CA, Certificado da CA, Chave privada do servidor, Requisiçã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: $ sed -i ‘1 i 127.0.0.1 example.localhost’ /etc/hosts 2. Criamos do DocumentRoot, onde serviremos nossa aplicação: $ mkdir /var/www/html/example /var/www/html/example/public 3. Criamos um VirtualHost para nosso example.localhost: $ vi /etc/httpd/conf.d/example.conf Nota: O conteúdo de /etc/httpd/conf.d/example.conf segue abaixo: NameVirtualHost 127.0.0.1:443 <Directory “/var/www/html/example”> Options -Indexes AllowOverride All Order allow,deny Allow from all </Directory> <VirtualHost 127.0.0.1:443> SSLEngine ON SSLCertificateFile /home/neto/certs/server/server.crt SSLCertificateKeyFile /home/neto/certs/server/server.key SSLCACertificateFile /home/neto/certs/ca/ca.crt ServerAdminadmin@example.localhost DocumentRoot /var/www/html/example/public ErrorLog /var/www/html/example/error_log ServerName example.localhost:443 LogLevel warn ServerSignature On </VirtualHost>

36 > Artigo > Segurança

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: SSLVerifyClient optional SSLVerifyDepth 1 SSLOptions +StdEnvVars A primeira linha diz que o certificado é opcional. Se estivermos, por exemplo, em uma área administrativa 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 expediu. 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.

A terceira linha vai pedir para o servidor definir as variáveis de ambiente com alguns dados do certificado. 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: $ git clone git://github.com/netojoaobatista/example.git $ composer.phar install Ao clonar o repositório, a seguinte estrutura será criada: $ 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 Da mesma forma que utilizamos openssl para gerar os certificados da CA e do servidor, utilizaremos as funções openssl_* do PHP para gerar as chaves, as requisições de assinatura de certificado 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 genrsa -des3 -out client.key 4096

openssl_csr_new A função openssl_csr_new será utilizada para gerar a requisição do certificado. Ela é equivalente ao seguinte: openssl genrsa -des3 -out client.key 4096

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: openssl x509 -req -days 365 -in client.csr -CA ca.crt -CAkey ca.key -set_serial 01 -out client.crt

38 > Artigo > Segurança

Sempre que o usuário acessar a aplicação, verificaremos a existência de um certificado: 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. }

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 credenciais (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 certificados 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. </>

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.

40 > Comunidade

Busão Hacker da Internet para as ruas 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 sistemas de transmissão a dinheiro, são essas pessoas que se reúnem aos domingos ou feriados – em torno de um churrasco com cerveja, porque todo mundo tem que se divertir – para trabalhar.

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 à tecnologia, não é só isso que entra. “O importante é operar na lógica do faça você mesmo e compartilhar o que sabe”, conta Daniela. “Já teve de programador a cantora; do pessoal da Voodoo Hop a gente de governo viajando com o Busão”, completa.

Descobrir como financiar A 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.

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

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.

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

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

Ônibus Hacker

Daniel Varga e Bruna Trevisan montando a antena da TV Ônibus Hacker

Pedro Belasco consertando a embreagem do ônibus

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.

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

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

Uma coleção ambulante de histórias

Entenda o Ônibus Hacker e a comunidade O Busão Hacker é um laboratório sobre quatro rodas no qual hackers de todas as áreas de conhecimento embarcam por um desejo comum: ocupar cidades brasileiras com ações políticas.

Por política, entendemos toda apropriação tecnoló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, encontros com esses, num busão, contam com o aditivo do caminho entre uma cidade e outra, 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-

Conversar com a Daniela é uma oportunidade para escutar histórias divertidíssimas sobre o Busão. Um exemplo: fizeram uma invasão hacker 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 busônicos (como às vezes se intitulam) se divertem 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. </>

42 > Coluna > Código Livre

Informações e dicas sobre projetos open source Por <Alê Borba>

Dojo Feedback

Super Trunfo

Projeto 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 negativo, em uma espécie de quadro.

Esse jogo foi criado para incentivar a transparência e colaboração em cima dos dados abertos, mostrando o que é possível fazer com as informações cedidas pelo governo brasileiro, 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 contabilidade 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

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 bastante intuitivo. Peca apenas pelo fato de, mesmo sendo um projeto que roda no navegador, não possui versão online e tem que ser instalado localmente. Mas é um projeto que promete muito! Para saber mais: https://github.com/ braziljs/power-polygon

Postmon Uma API, open source, desenvolvida usando Python, para consultas de endereços postais 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 melhorias e novas features, vale a pena acompanhar: postmon.com.br

Seu Lixo Site criado durante o Desarrollando América Latina 2012 com a intenção de agregar os dados abertos sobre lixo, possibilitando inferir informações importantes sobre um dos princípais problemas mundiais: o lixo. Os destinos do lixo de cada cidade revelam as diretrizes de planejamento urbano adotado por cada município e como a comunidade está consciente ou não para alternativas ecologicamente mais corretas. 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 prefeitura da sua cidade dados sobre o lixo gerado, é direito do cidadão! Ainda assim, mesmo com a pequena quantidade de dados sobre lixo, podemos inferir informações relevantes... www.seulixo.com </>

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

44 > Artigo > Front-end

Como otimizar aplicações web 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

ETags A Etag é um mecanismo para identificação de um componente em cache.

Em outras palavras, um componente é identificado por uma string única, e o browser pode verificar se ela foi modificada ou não;

É um software para compressão e descompressão de arquivos. Ele é altamente utilizado em websites para aumentar a performance. Sites que utilizam o Gzip podem ser até 80% mais rápidos.

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

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

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.

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

# 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

Configurando o cache Muitas vezes, pensamos que o browser do cliente irá fazer o cache automático de nossa aplicação, mas precisamos informá-lo de como fazer o cache da maneira correta.

Para isso, utilizamos os recursos do response headers.

Invalide o cache Invalidar o cache também é uma ótima estratégia para alteração de conteúdo; Podemos utilizar uma estratégia de versionamento de componentes (CSS, js); assim, o servidor saberá quando um arquivo foi alterado e precisa ser recarregado; Utilize helpers server-side para o versionamento 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;

46 > Artigo > Front-end

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

Exemplo: um website com nove js sendo

<IfModulemod_expires.c> ExpiresActive on # Favicon (cannot be renamed) ExpiresByType image/x-icon “access plus 1 week” # Media: images, video, audio ExpiresByType 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 JavaScript ExpiresByType text/CSS “access plus 1 year” ExpiresByType application/ javascript “access plus 1 year” </IfModule>

subdomínios, ele poderá carregar os nove

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 carregamento da página, mas precisamos entender como fazer isso.

Um browser pode carregar até três arquivos em paralelo para cada servidor; Deixe os arquivos estáticos em servidores CDN com subdomínios; dessa forma, o browser poderá carregar três arquivos para cada subdomínio em paralelo;

carregados no mesmo servidor irá carregar três deles paralelamente, depois mais três, e mais três. Já com o CDN com três em paralelo.

Minificar e unificar js e CSS Essa estratégia é considerada uma das melhores para obtermos uma boa performance. O problema é que a maioria dos desenvolvedores 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;

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 Compressor - Comprime arquivos CSS; Easy YUI compressor - Versão visual do YUI compressor.

CSS Sprite

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

Sprite é uma imagem que contém outras imagens dentro dela, e nós podemos pegá-las através do CSS e manipulá-las de diversas formas. Com Sprites, diminuem-se significativamente as requisições para o servidor, 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:

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

Caesium - Promete comprimir imagens em até 90%;

Zend_Minify - API do Zend Framework para YUI compressor;

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

Ferramentas para unificar arquivos

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 aplicações. Felizmente, existem formas de contornar esse problema:

Data URI Sprites - Gerador de sprites baseado 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 –

48 > Artigo > Front-end

Isso irá evitar que páginas sejam carregadas sem o seu estilo, evitando problemas de “flickering” nas páginas; Arquivos js no final do arquivo – O carregamento 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óximos – Uma forma de otimizar o carregamento é 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 expressões no CSS {background-color: expression( (new Date().getHours()%2 ? “#00000” : “#FFFFF”))}

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 arquivos, as funções ou as classes específicas que iremos usar. Para isso, podemos utilizar o Require JS. Vantagens:

Evite duplicação de scripts;

Carregamento otimizado - não precisamos carregar tudo;

Quebre os componentes em vários subdominios;

Podemos carregar apenas uma função ou classe;

Diminiua o uso de iFrames – iFrames exigem novas requisições com sub-requisições, deixando a página consideravelmente lenta;

Integrado com NodeJs;

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 – Utilizando <link>, você pode aproveitar o paralelismo dos navegadores; com o @import, não.

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. 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 otimizado em HTML5. Com ele, você tem um arquivo .htaccess totalmente configurado para trabalhar da melhor maneira possível. Além disso, contamos com: Suporte cross-browser; Compatibilidade com browsers legados;

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

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

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 ferramentas de análise, como compressão, cachê e invalid caches;

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 acessibilidade 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 Arquitetura de Informação, o “custo” é mínimo.

Sempre tentei explicar que acessibilidade aumenta 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 ceguinho”. Até que, num almoço com Horácio Soa-

res, o papa da acessibilidade web no Brasil, conversamos 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 acessibilidade?” E ele me mostrou todas elas.

E então acessibilidade web deixou de ser caridade, assistência social. Neste momento passou a ser compliance. Segundo a wikipedia, compliance é 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 inconformidade 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. Acessibilidade 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 Especialistas. 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 aproveitar 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.

ção, legibilidade e aprendizado em um dos projetos 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 distribuiçã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.

Embora muito se fale sobre o ganho de produtividade e de expressividade que o uso de linguagens funcionais traz, pouco é mostrado sobre como isso se aplica no mundo real.

Em pouco tempo a equipe aprendeu o suficiente 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 Clojure 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.

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

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

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.

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ágina 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 quantidades 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 requisiçõ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 padrão do WordPress nos mostra ganos de desempenho 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 segundos (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” durante esses minutos. A solução seria programar o WordPress para conversar com o Varnish e retirar 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 WordPress (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 documentação de API Hooks do WordPress.

Mesmo assim, existem algumas funcionalidades 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 microcontrolador 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 habituados ao .NET Framework.

O que é o .NET Microframework? É uma versão muito reduzida do .NET Framework, com apenas 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 estrutura 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, fazendo 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 Visual 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 reduzido e bem mais simples de aprender.

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

7Masters Mobile [iOS] Contornando as resoluções dos devices de maneira simples Fernando Bass Hoje para trabalhar com iOS, temos que nos preocupar com as resoluções de telas dos aparelhos – 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 exibidos 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 imagens 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 minha_imagem@2x.png. É 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 aplicacã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 versã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 é retina ou para qual device ela foi feita. Deve ficar assim: [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

54 > Encontros > 7Masters

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 dificuldade para enxergar devido a problemas de visão como miopia, catarata e glaucoma ou mesmo 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 representará 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 acessibilidade 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 beneficiam muito o acesso de pessoas idosas na Web, como por exemplo:

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 inclusivo 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 explorando 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 informação, em detrimento de outros elementos que compõem a experiência do usuário.

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

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

Nesta apresentação, procuro utilizar a tríade da experiência digital (projetar para pessoas, compartilhar 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, comportamental e reflexivo).

Não utilizar somente a cor para transmitir informações

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

Tornar todo o conteúdo acessível via teclado

</>

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

56 > Artigo > User Experience

O verdadeiro design de interface a favor do desenvolvedor front-end Por <Bernard de Luna>

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 implementador, começar a codificar, muitos webdesigners até entendem o fluxo, mas simplesmente nunca o praticam. Depois de algumas observações, percebi os motivos óbvios: Pessoas metódicas: eu sou uma pessoa metódica e sei como isso é. Pessoas metódicas (dependendo do grau) até conseguem sair da caixa, mas não gostam, nem se sentem à vontade; por isso, preferem esperar o design completo 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 tenham que mexer novamente e o adaptarem a qualquer mudança. Assim sendo, precisam do layout finalizado para minimizar a chance de refazer 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 produtividade e qualidade profissional e pessoal.

Muitas vezes, o desenvolvedor acredita veementemente 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 desenvolvimento estrutural do HTML e do CSS. O principal motivo é que, quase em sua totalidade, o design 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,

artigos, blogs e livros sobre AI, mas, na prática, 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 etapa finalizada dá origem ao começo da etapa seguinte. O processo é demorado, e um profissional depende do término do outro.

Modelo avançado: o modelo necessita de uma documentação bastante definida no protó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 iniciada uma terceira etapa simultânea, que é a do desenvolvimento do sistema, ou programação.

Funcionamento em SCRUM: muitas empresas aqui no Brasil e no exterior já trabalham com metodologias ágeis; a mais famosa atualmente é o SCRUM. O projeto é dividido em sprints; assim, temos que aproveitar a sprint 1 para prever, mapear e arquitetar o que será feito 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 anterior. Com um número de designers para atender esse fluxo, ele seria excelente, porém não é a realidade da maioria das empresas de desenvolvimento 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 desenvolvedor Quando 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 concentra 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 ambiente, mas quando o produto é online poucos se concentram nisso.

Uma dica para ajudar o front-end na parte técnica é 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 utilizados efeitos em máscaras; isso facilita e muito 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 também facilita a medição para o CSS;

58 > Artigo > User Experience

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;

Com uma interface definida, você consegue captar a semântica de cada item, além de estruturar da melhor forma o seu HTML para que seja flexível e limpo ao mesmo tempo, com classes genéricas e reaproveitáveis. O programador, por sua vez, já saberá os campos que serão utilizados e preenchidos pelo cliente.

Tudo bem mais ágil e econômico não?

Criar um pdf ou qualquer outro tipo de documento, informando as cores usadas (hexadecimal), fontes usadas nos elementos h1, h2, h3, hn, p, li etc., espaçamentos padronizados, 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 Planejamento de corte, o seu layout virando código (http://slidesha.re/aGIjLq)

Na prática Entendemos 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 forma detalhada, e este, então, ser apresentado para a equipe e para o seu cliente. Um wireframe de alta fidelidade ou até mesmo um Interface Design antes do Context Design permitem o trabalho simultâneo de desenvolvimento front-end e back-end. Um exemplo disso:

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 inovado. Se criar algo novo na sua equipe ou empresa, me conte por e-mail, ok? </>

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

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

O Vale do Silício é um estado mental Por <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 existem grandes monumentos nem visitas guiadas pelas empresas que o tornaram famoso.

Se você der um close-up, no entanto, vai provavelmente começar a notar algumas poucas diferenças. Jaquetas e crachás da Apple ou do Github acompanhando seus donos na rua, pessoas acessando o TechCrunch enquanto esperam o trem chegar ou um ônibus todo branco 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 Mozilla 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 ritmo maluco e decidida a mudar o mundo, é fácil imaginar quão importantes são as interações pessoais e profissionais. Também, pudera. Elas fazem com que ideias surjam, projetos sejam lançados no prazo e, principalmente,

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 todos os lugares: não é preciso estar no Vale do Silício para interagir com pessoas sagazes, trabalhar duro, mudar o mundo e fazer tudo isso ser um grande aprendizado. </>

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.

60 > Artigo > SEO

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

Já estamos no final do primeiro trimestre do ano, mas acredito que ainda há tempo para refletir um pouco e fazer algumas “previsõ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 previsões, dicas e uma recapitulação do que já aprendemos até aqui.

Otimizar site para funcionar em plataformas móveis O 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 local Com 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 resultados 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 também nas buscas locais, devem efetuar algumas alterações. E os sites menores, que competiam no mercado com sites muito grandes, têm a oportunidade de utilizar a geolocalizaçã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 fundamentais 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

HTML5, que está em constante avanço e tem sido cada vez mais utilizado, devido à preferência dos usuários por explorar conteúdo mais dinâmico e interessante, que pode aproveitar diversos recursos do HTML5. A junção das possibilidades do HTML5 permite a exploraçã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.

Falando do site como um todo, há uma tendência desde o final de 2011, mas que ganhará força agora em 2013, da interpretaçã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 trabalhar em cima de uma palavra chave para ficar bem posicionado nos resultados. Isso porque o algoritmo do Google está reduzindo o peso da relevância de link building.

Não que tais links deixem de ser importantes, mas o Google está analisando o conjunto 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.

Atenção a arquitetura da informação, campo semântico e schema.org

Um critério de posicionamento será a autoridade sobre um assunto, a disponibilização de um acervo informativo sobre um tema ao usuário.

A arquitetura da informação em um site requer atenção especial, o que não tem acontecido 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.

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 grandes, uma possibilidade para alavancar o po-

62 > Artigo > Métricas

sicionamento nos sites de busca é optar por, em vez de escrever um artigo somente sobre um determinado assunto, criar hotsites dentro 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 relacionados, 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 importante, visto que o Google tem usado cada vez mais esses dados. Sendo assim, para você aparecer com rich snippet, é crucial essa implementação, que tornará o seu site adiantado no cenário brasileiro, aumentará os acessos e o posicionará melhor nos rankings.

Faça link building O link building vem perdendo força nos últimos 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 campo 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 informação, a otimização de páginas no schema.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! </>

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

Dê tag nos seus autores com o Rel=author No 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 autor, o que tende a substituir o link building, mas para isso o seu autor deve ter autoridade no assunto.

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

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. diego@conversion.com

64 > Review

MariaMole um ambiente de desenvolvimento brazuca para Arduino Por <Luis Leão>

O mais legal de a plataforma Arduino ser open-source (e open-hardware também) é que muitos 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 integrado) mais completa que a padrão, com possibilidade de múltiplos projetos, com ajustes nas opções de compilação e conexão com várias portas seriais simultaneamente.

Instalação O 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ção Ao 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 bibliotecas, apenas carrega a pasta “examples” da instalação do Arduino); Importar de um projeto já existente feito na IDE do Arduino.

precisa ativar o projeto primeiro para executar esses comandos.

Conclusão

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 bibliotecas, 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 modelo 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 bibliotecas e não é obrigado a criar a estrutura Arduino/libraries na pasta de documentos. Para isso, basta inserir a lista de pastas separadas por “;” nas preferências do aplicativo.

Contras

Ainda não consegui testar outras IDEs, como o Atmel Studio e os plugins para Eclipse para fazer um comparativo mais detalhado, mas, independentemente 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 quero 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. </>

Não é 100% independente da IDE do Arduino (existem algumas dependências de compilador 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ê

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

66 > Artigo > Pela web afora

Deep Web e o lado obscuro do ser humano Por <Fabiano Pereira>

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 contexto 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 sociedade), 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 fossem vigentes? Qual seria a conduta humana 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 assim, pois acham que o homem não precisa 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 repreenda ou de correntes morais que castrem. Será que é tão simples assim?

A deep web Se 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 (consideravelmente grande) da Internet que, simplesmente, não “existe” para os mecanismos 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 determinadas páginas (algo útil, por exemplo, quando o site está recebendo ajustes e ainda não está pronto para ser visualizado por todos) e também impede que os mesmos robôs sigam os links desses sites. 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.

Garantia de anonimato para quem navega Quando navegamos na Internet, deixamos rastros por todos os lados: cookies, históricos públicos, históricos no servidor/ provedor de serviços e outros mais específicos. Assim, na superfície - na navegação tradicional - o anonimato é uma ilusão, pois bastam alguns conhecimentos básicos para rastrear a navegação de quem quer que seja. A Polícia Federal já utiliza recursos de rastreamento e consegue “pegar 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 deseja 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áquina virtual que permita simular outro computador 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, é acessar a Hidden Wiki, espécie de Wikipedia do caos: desde os previsíveis documentos secretos dos governos, tutoriais de invasã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, canibais e usuários de drogas. Tudo de forma natural e convivendo, harmoniosamente (se é que tal termo cabe aqui), com os demais 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 oferecendo 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

68 > Artigo > Pela web afora

1. Wikileaks Julian Assange é o mentor do Wikileaks (http://wikileaks.org), site que tem o objetivo 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 pornografia (de maneira geral), o Wikileaks é um dos únicos sites que fazem a ponte entre a deep web e a “parte visível” da web, já que é normalmente indexado pelos mecanismos 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 verdade, há quem dispense a barra de endereços do navegador e digite qualquer endereço de web somente pelo mecanismo de busca. Muito do sucesso do Google se deve à mudança de paradigma de estabelecer 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, sobretudo, 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 canais 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 utilizaçã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 coragem de publicar.

4. Hackers A deep web é o habitat natural da maioria dos hackers, uma vez que já estão habituados a navegar em total anonimato.

Hackers são, normalmente, movidos por questões políticas e conceituais, utilizando seus conhecimentos para derrubar governos, 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 trabalho 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 corruptos 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 violentamente. 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ô legal 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 recomendado que você não faça isso, pois as consequê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 interceptada 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 consideravelmente fatal, em termos computacionais, é claro.

Mesmo assim, se resolver mergulhar, saiba 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

resolver devastar os pântanos mais profundos 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; sabemos que, andando nas ruas, cruzamos com todo tipo de gente violenta; que, ao levar nossos filhos em parques infantis, podemos encontrar, sem nem imaginar, pedófilos que ficam no aguardo de qualquer vacilo para sequestrarem nossas crianças e que aquele senhor respeitável que cumprimentamos no fila do pão pode ser um sadomasoquista da pesada, que utiliza pesados 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 sensacionalismo da TV aberta?

Existem duras realidades, porém o melhor 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”. </>

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

70 > iMasters Box

iMasters box O iMasters Box é um agregador de serviços voltado para desenvolvedores web, que reúne ferramentas úteis para esses profissionais e que já estão disponibilizadas na rede.

Aqui na Revista, vamos selecionar sempre algumas das ferramentas mais interessantes para você. Conheça mais o iMasters Box em http://imasters.com.br/box e participe! Sua sugestão de ferramenta pode vir parar também na Revista!

Nextgen Gallery

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

HTML Validator

A extensão HTML Validator para Firefox realiza a validação do HTML da sua página dentro 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 padrões Web do W3C. Gratuito. http://ow.ly/hRwSu

Contact Manager

Uma aplicação simples que demonstra o uso da ContactsContract API, assim como a inserção manuai de novos contatos de uma conta específica. Em diversas situações, você desejará interagir com a rede de contatos do usuário, permitindo uma experiência mais gratificante para ele. Gratuito. http://ow.ly/hRxHM

API Microsoft De iOS para WP7

Permite 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 aplicativos e contém um guia para que os desenvolvedores possam fazer a transferência entre as plataformas. Gratuito. http://ow.ly/hPL0i

Mercurial É uma ferramenta multi-plataforma de controle de versão distribuído para desenvolvedores de software. O sistema é implementado principalmente em Python, porém o utilitário binário diff foi escrito em C. O Mercurial foi inicialmente escrito para rodar sobre Linux, mas foi portado para Windows, Mac OS X, e a maioria dos outros sistemas UNIX. É principalmente um programa de linha de comando. Todas as operações do Mercurial são chamadas através de palavras-chave de opções para o programa controlador hg, uma referência para o símbolo químico do elemento Mercúrio. Gratuito. http://mercurial.selenic.com/

CherryPy

Framework para desenvolvimento orientado a objeto voltado para a web, usando apenas Python. Não intrusivo, o CherryPy permite criar aplicações web de grande porte, como se tivesse desenvolvendo um simples aplicativo orientado a objeto. Desenvolvido em 2005, já está bem estável. É gratuito. http://cherrypy.org/

Zend Framework Heroku Uma nova forma de desenvolvimento para Rails - um ambiente de desenvolvimento online onde você desenvolve e hospeda suas aplicações, tudo via browser.

O Heroku permite criação e edição online, importação de aplicações desenvolvidas fora do Heroku, compartilhamento de aplicações, desenvolvimento colaborativo, geraçã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/

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

Oferece uma aplicação robusta e de alto desempenho MVC, uma abstração de banco 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 é compativel com a BDS Licence, o que permite que softwares construídos com o framework possam ter código proprietário. Essa abertura é importante para empresas porque nem sempre é possível liberar o código fonte. Gratuito. http://zendframework.com/