Revista Imasters by Imasters (Revista-iMasters-Web - PDF) (72 Pages)

Fevereiro 2013 / Ano 02 / Edio 05
O lado B da tecnologia
Criatividade e Inovao Alternativas
Ns fazemos a Internet no Brasil
Desenvolvimento um guia para otimizar as suas aplicaes web

R$24,00
Entrevista Nada acessvel o suficiente que no possa melhorar
Pela web afora Deep Web e o lado obscuro do ser humano
Expediente
TIAGO BAETA Publisher LUIS LEO Editor RINA NORONHA (MTB 2759-ES) Jornalista Responsvel EDU AGNI Projeto Grfico / Diagramao NATHLIA TOREZANI Reviso COLABORADORES Adriana Pedrosa, Al Borba, Bernard de Luna, Equipe Blab, Bruno Pulis, Clcio Bachini, Davidson Fellipe, Diego Ivo, Edu Agni, Fabiano Pereira, Fernando Bass, Horcio Soares, Hugo Cisneiros, Iliana Grinstein, Italo Lelis de Vietro, Joo Neto, Lina Lopes, Marcela Daniotti, Marcio Paulo Mello Martins, Lucia Freitas, Ofelquis Gimenes, Pedro Gravena, Plnio Balduno, Ramon Bispo, Reinaldo Ferraz, Richard Duchatsch Johansen, Sergio Nascimento (Elvis Detona), Vinicius Depizzol. Eskenazi Indstria Grfica Grfica Grupo imasters Organizao > 1000 exemplares > ISSN 1981-0288
Alameda Santos, 2395 - 1 andar Cerqueira Csar, So Paulo/SP CEP: 01419-101 - Brasil www.imasters.com.br/revista redacao@imasters.com.br Twitter: @iMasters Facebook: /PortaliMasters Os artigos assinados so de responsabilidade dos autores e no refletem necessariamente a opinio da revista. proibida a reproduo total ou parcial de textos, fotos e ilustraes, por qualquer meio, sem prvia autorizao dos artistas ou do editor da revista.
Editorial
Foi com muita felicidade que aceitei o desafio de ser o editor desta nova etapa da Revista iMasters. No de hoje que tenho o desejo de poder escrever sobre os assuntos e experimentos que tm 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 So Paulo, buscando aprender coisas novas e vivendo o mercado publicitrio, no que voc poderia chamar de marketing experimental: prototipando ideias para serem utilizadas pelas marcas. Aprendi aqui uma lio 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 ningum sabe que existe. Um timo exemplo que voc no precisa explicar como funciona um forno microondas, mas precisa saber quanto tempo necessrio para esquentar uma pizza gelada e isso no quer dizer que no 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 experimentao de produtos e servios cria um novo modelo de relacionamento entre eles, muito alm do xingar muito no Twitter. Marcas criam plataformas e servios que complementam seus produtos, e agora vemos uma nova onda de APIs e dados que podem gerar novos subprodutos (quando no criam novos modelos de negcio). 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: experincia, interatividade e como possvel incluir tecnologia e inovao nos seus projetos. Mais uma vez, agradeo pelo convite para estar frente desse projeto, e peo o seu feedback, sempre, na certeza de que sempre podemos fazer melhor.
Luis Leo desenvolvedor web que encontrou em APIs e hardware aberto novas formas de integrar a web com o mundo real. www.luisleao.com.br redacao@imasters.com.br
6 > Sumrio
20 :: Capa > O lado B da tecnologia
08 :: Entrevista Acessibilidade web, com Horcio Soares
44 :: Front-End Como otimizar aplicaes web
66 :: Pela web afora Deep Web e o lado obscuro do ser humano
14 :: +Interatividade > If ( ignorncia == beno) return false; 16 :: Marketing Digital > Um mundo novo para o marketing: Big Data 18 :: Padres Web > Por dentro da W3C Brasil 26 :: Criatividade Tecnolgica > Festival das luzes na era da interatividade 30 :: Opinio > Frameworks para Front-End 32 :: Segurana > Confiana, certificados digitais e autenticao 40 :: Comunidade > Buso Hacker: da internet para as ruas 42 :: Cdigo Livre > Informaes 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 :: Conexo Vale do Silcio > O Vale do Silcio um estado mental 60 :: SEO > 8 dicas, tendncias e previses 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 > Horcio Soares
Nada acessvel o suficiente que no possa melhorar
Por <Rina Noronha>
Acessibilidade web no nenhum assunto novo. No entanto, ainda assim encontramos um grande nmero de pginas que no so acessveis e, pior ainda, um nmero de profissionais que no sabe, no quer ou no se importa com o assunto. A mudana j caminha mais rapidamente, em comparao com anos atrs, mas ainda so passos pequenos, que precisam ser fortalecidos. Horcio Soares especialista em acessibilidade web, design, experincia do usurio, usabilidade e Web Standards, trabalha com
acessibilidade web h mais de uma dcada. fundador e consultor da Acesso Digital e da Interativa, alm de fazer parte do Conselho Consultivo do Instituto Intranet Portal, do GT de Acessibilidade na Web do W3C Brasil e da equipe julgadora Prmio 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 acessvel.
No Brasil falta vontade poltica em fazer valer as leis e temos escassez de mo de obra capacitada para projetar, desenvolver, testar e auditar acessibilidade
Revista iMasters: Como voc comeou a trabalhar com acessibilidade web? Horcio Soares: Meu primeiro contato com o termo acessibilidade foi em 2001, quando participei da resposta de um edital de licitao para construo de um sistema web para uma empresa do governo. Um dos itens do edital exigia que a soluo fosse acessvel para deficientes visuais. Na poca eu no sabia exatamente o que representava a palavra acessibilidade e muito menos o que precisaria ser feito para desenvolver um site acessvel. Tambm no tinha a menor idia de como, nem com que tipo de tecnologia, algum com deficincia poderia acessar o contedo das pginas de um site. Acabamos ganhando a licitao e fui um dos responsveis por desenvolver a soluo acessvel 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 so irreversveis. 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 importncia. A mensagem clara, elas no esto preocupadas em atender e fornecer servios para essa minoria. a velha cultura da reatividade, afinal, mudar para que, se esto ganhando... Por que precisamos oferecer servios com mais qualidade se a demanda bem maior que a oferta? Quando a concorrncia crescer nos preocupamos com isso.... Ignoram que, quando a concorrncia avanar, j poder ser tarde. Que qualidade no custo, mas sim investimento e que bem mais barato manter um cliente do que que conquistar um novo. Ignoram que dentro de diferentes contextos, todos ns somos usurios diretos de acessibilidade e no apenas as pessoas com deficincia. Mas me d muito orgulho em ver que parte
cada vez mais significativa de nossos designers/desenvolvedores, mesmo lutando com tudo e todos, se qualificaram em acessibilidade e, quando podem, implementam suas tcnicas em seus projetos digitais, mesmo sem seus clientes e gestores se darem conta. RiM: Qual o estado atual da acessibilidade no Brasil? Ja possvel considerar que nossa web acessvel? Por qu? HS: A acessibilidade no Brasil ainda bem incipiente, principalmente se considerarmos os servios oferecidos pela internet. Para se ter uma ideia do tamanho do problema, o W3C Brasil realizou, em 2010 e 2011, uma avaliao automtica dos sites do Governo Brasileiro com domnio .gov. Foram aplicados testes automticos de HTML, CSS e acessibilidade. O resultado foi preocupante pois, em 2010, apenas 2,5% dos sites do Governo no apresentavam erros nas avaliaes. J em 2011, esse nmero dobrou para 5%, mas ainda muito pouco, considerando-se que a validao automtica s capaz de realizar uma pequena parte dos testes de acessibilidade e padres web. Infelizmente, ainda estamos longe de uma web brasileira verdadeiramente inclusiva e democrtica. RiM: Acessibilidade web uma s, independentemente do tipo de pagina? (Portais de noticia, blog, E-commerce, etc) HS: Dependendo dos tipos contedos (textos, Imagens, links, vdeos, udios, tabelas, formulrios,...), das tecnologias utilizadas e das interaes de cada pgina, as tcnicas podem ser diferentes, mas a acessibilidade web ser sempre uma s. Todos os contedos/servios devem estar acessveis, com acesso facilitado, da forma mais intuitiva e com menor esforo, para o maior nmero possvel de usurios, independente de suas culturas, experincias, deficincias, sistemas e dispositivos utilizados. RiM: Qual o grande paradigma hoje em unir usabilidade, acessibilidade e padres web? HS: Uma boa acessibilidade vai alm de sim-
plesmente permitir o acesso a servios e contedos. Por exemplo, minha amiga Lda 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 deficincia visual, que v totalmente) com a mesma experincia que ela no levaria mais do que 20 minutos. O site parece ser acessvel, mas na verdade s est acessvel. Nessa caso, para o supermercado virtual ser acessvel de verdade, alm do usurio conseguir realizar a compra (efetividade), precisa realizar as tarefas com facilidade e rapidez (eficincia), e no dispositivo e sistema que desejar (portabilidade). preciso entender que no basta aplicar tcnicas de acessibilidade e de padres web, preciso garantir a acessibilidade atravs da validao com usurios e com melhoria contnua. Nada acessvel o suficiente que no possa melhorar. RiM: Qual o principal pecado dos sites brasileiros em termos de acessibilidade? HS: So 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 so desenvolvidos sem se saber ao certo quais so os objetivos e metas, quem so os beneficiados e suas necessidades e os quais so problemas que realmente precisam ser resolvidos. Como esperar que um projeto web seja acessvel se no se sabe quais problemas ele ir
resolver e menos ainda quem seu pblicoalvo? Impossvel... Identificar corretamente o alvo significa ter que investir tempo e dinheiro em coisas aparentemente abstratas, mesmo antes de comear a colocar a mo na massa. Os projetos vivem na cultura da pressa, onde todos esto sobrecarregados e sempre atrasados, muitas vezes correndo atrs do prprio rabo. Tudo pra ontem e no h tempo a perder com pesquisa, estratgia, design, testes etc. Para sobreviver a prazos e cronogramas impossveis, os projetos so movidos a dose cavalares de ASAP (as soon as possible ou, em bom portugus, o quanto antes). Mas como qualquer droga pesada, tem efeitos colaterais devastadores, como a falta de qualidade, muito retrabalho, insatisfao 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 obrigatrios, primeiro desenvolvem o site, para s depois implantar a acessibilidade. como construir um prdio e depois quebrar tudo para adaptar uma rampa para cadeirantes. O resultado sempre ser caro e a acessibilidade duvidosa... Uma maquiagem para ingls ver. RiM: Muito se fala que as empresas/os chefes nao deixam que os sites sejam mais acessveis 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 no fazer uso dos padres web e, consequentemente, criar pginas que nao so acessveis?
* Taxa do churn a proporo dos clientes que deixam o fornecedor durante um ano. [http://wikipedia.qwika.com/en2pt/Churn_rate]
HS: Certamente os maiores culpados so as empresas/chefes que j esto totalmente viciados a trabalhar contra o relgio. Porm, mesmo correndo o risco de uma cara feia, os desenvolvedores/designers tm o dever de alertar os responsveis que esse tipo de postura certamente causar problemas na qualidade dos projetos, alm de poderem ser processados por falta de acessibilidade. sempre muito difcil mudar a cultura, principalmente dentro de empresas estabelecidas e que mantm 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 padres B. Ou ainda, os gestores podem ser sensibilizados ao verem uma pequena gravao com testes de usabilidade com usurios utilizando o principal produto/servio da empresa. Dentro do possvel, preciso sempre tentar incluir as tcnicas de acessibilidade, usabilidade e padres web em seus projetos. RiM: Quais tem sido os maiores desafios para uma web acessvel no Brasil? HS: So grandes as dificuldades, mas podemos listar trs grandes desafios/barreiras que precisam ser vencidos/superados para uma web mais acessvel no Brasil:
A. Conhecimento: as empresas, seus executivos e profissionais precisam saber o que realmente acessibilidade web, sua importncia, leis, estatsticas, normas, pblico alvo, custos e benefcios. B. Capacitao: aps serem conscientizados, os profissionais Web precisam de treinamento para conhecerem as tcnicas de desenvolvimento, validao e manuteno de sites acessveis. C. Cultura: o terceiro e maior desafio mudar a cultura dentro das corporaes. preciso que as empresas incluam em suas normas, padres e processos a cultura da acessibilidade Web, caso contrrio, todo investimento se tornar intil, voltil. RiM: O que tem sido feito, na esfera governamental, para que a web seja mais acessvel? E no plano privado? HS: Pouco tem sido feito, em ambos planos. As empresas/instituies 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 preo muito alto para atender um nmero pequeno de pessoas e que no fazem parte de meu pblico alvo. Certamente no leram o timo artigo Acessibilidade web: 7 mitos e um equvoco, da Lda Spelta (http://bit.ly/11qOoR) Ainda so poucos, mas a boa notcia que existem empresas, instituies, universidades e profissionais que realmente se preocupam com a acessibilidade e comeam a fazer diferena. Um bom exemplo o Prmio Nacional de Acessibilidade na Web - todos@web, uma iniciativa do W3C Escritrio Brasil, lanado em 2012 e que ser repetido em 2013. O prmio
Dentro de diferentes contextos, todos ns somos usurios diretos de acessibilidade e no apenas as pessoas com deficincia
tem como objetivo promover nacionalmente a acessibilidade na web, para conscientizar desenvolvedores e homenagear pessoas, empresas e aes em prol do acesso de pessoas com deficincias na web. Veja mais http://premio.w3c.br/ Muito ainda precisa ser feito, mas um passo importante foi a criao do Decreto Lei 6.949, de 2009. Ele promulgou a Conveno Internacional da ONU sobre os Direitos das Pessoas com Deficincia (Nova York, 30 de maro de 2007), que passou a ter fora de lei. Mais abrangente do que o Decreto Lei 5.296, ele determina que todas as empresas e instituies, de administrao pblica ou privada, devem assegurar o acesso a informao e a comunicao a todas as pessoas com deficincia e, a elas, devem ser oferecidas as mesmas oportunidades oferecidas aos demais. Leia o artigo Anlise de Acessibilidade dos Sites Oficiais dos Trs Principais Candidatos Presidncia do Brasil, onde este decreto comentado, http://bit.ly/bQCmaQ A partir da, empresas estatais e privadas podem ser processadas pelo Ministrio Pblico 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 relao a outros pases, como estamos? Muito atrasados, acompanhando bem o ritmo mundial, na frente? HS: O mundo est atrasado, mesmo em naes mais desenvolvidos as mudanas so lentas. O Brasil segue o caminho de pases como Estados Unidos, Inglaterra, Portugal, Australia, entre outros, com adoo de leis nacionais sobre a acessibilidade web para empresas estatais e privadas. O lado negativo que no Brasil falta vontade poltica em fazer valer as leis e temos escassez de mo de obra capacitada para projetar, desenvolver, testar e auditar acessibilidade. RiM: Como possvel pensar acessibilidade web fora da caixa? Como fazer diferente? HS: Apesar de parecer bvio, no projetamos a experincia do usurio; na verdade, proje-
tamos para a sua experincia. Essa pequena mudana de paradigma faz toda a diferena na criao e desenvolvimento de sites que atendam de verdade as necessidades das pessoas. Precisamos focar mais nas pessoas e menos nas tecnologias. As pessoas acreditam que acessibilidade sempre direcionada para pessoas com deficincia, mas ela no s pode como deve ser pensada para atender melhor todas as pessoas. RiM: Quais so os desafios relacionados a acessibilidade nos dispositivos mveis e qual sua avaliao sobre a nova funcionalidade de assistentes pessoais (Siri e Google Now)? O que poderia tornar dispositivos mveis mais acessveis? HS: O curioso com relao acessibilidade em dispositivos mveis que as dificuldades apresentadas por pessoas com deficincia ao utilizarem computadores do tipo desktop so muito semelhantes s apresentadas por todos ns em dispositivos mveis. Portanto, somos todos usurios diretos de acessibilidade quanto estamos usando dispositivos mveis, em movimento, com apenas uma das mos, com baixa preciso, sem feedback, luz direta, baixo contraste e resoluo reduzida, assim como o tamanho das letras, campos de formulrio, links e botes. Por isso mesmo, as tcnicas e os problemas de acessibilidade so muito parecidos em dispositivos mveis e em desktop. Algo que pode ajudar a melhorar a acessibilidade dos sistemas e sites para dispositivos mveis o uso da tcnica Mobile First. Ao invs de adaptar os contedos e servios do desktop para o Mobile, a ideia dessa tcnica fazer exatamente o contrrio: comear pela verso mvel, incluindo na interface apenas o que realmente relevante e prioridade para os usurios, para depois projetar a verso para desktop. Como resultado, obtemos uma verso mvel otimizada para atender s especificaes e necessidades dos pequenos dispositivos, e uma verso desktop mais leve e objetiva, impregnada pela simplicidade do dispositivo menor. Com relao ao uso do Siri e o Google Now,
no sou usurio e nem fiz testes com ambos, mas acredito que podem ser bem teis para todas as pessoas, com e sem deficincia, em diferentes contextos. RiM: Games hoje so utilizados no s como entretenimento, mas tambm como plataforma de educao (ensino de lgica, por exemplo). Como a acessibilidade tratada nesse mercado? Ela existe? Como funciona? HS: Esse um grande e promissor mercado. Hoje, com o uso das tcnicas de acessibilidade propostas pela WAI/ARIA (Accessible Rich Internet Applications) do W3C (http://www. w3.org/WAI/intro/aria.php), j possvel desenvolver contedo dinmico e interfaces interativas bem acessveis 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 tm evoludo 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 conscientizao, paixo, tcnica e perseverana. Sei que abraar essa causa no uma tarefa fcil, por isso, preciso fazer com que os alunos sejam picados pelo mosquito da acessibilidade, exatamente como fui. E, alm das tcnicas, precisam de argumentos fortes sobre as vantagens da acessibilidade e por que ela no deve ser tratada pelas empresas como uma obrigao social e legislativa, mas sim como uma vantagem competitiva. RiM: Qual o papel das universidades em relao acessibilidade? Existe pesquisa? HS: Um papel de extrema importncia, 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 graduao em Tecnologia da Informao, Sistemas de Informao, Design, Web Design e afins. Esses profissionais no s precisam sair das universidades conscientizados da importn-
Horcio e MAC (arquivo pessoal)
cia da acessibilidade, mas preparados para o desenvolvimento de projetos acessveis. Por exemplo, os desenvolvedores saem de seus cursos especialistas em algoritmo, lgica, as principais linguagens de programao e tecnologias, mas desconhecem por completo as necessidades de seus usurios com diferentes experincias e habilidades. A boa notcia que isso j comeou a mudar, principalmente nos cursos de ps-graduao Latu e Stricto Sensu, onde o tema tem sido cada vez mais pesquisado. </>
No projetamos a experincia do usurio; na verdade, projetamos para a sua experincia
14 > Coluna > +Interatividade
if ( ignorancia == beno ) return false;

Por <Pedro Gravena>
Nos ltimos 2 anos, tenho passado por uma lavagem cerebral intensa para aprender programao. Sei que um publicitrio no tinha nada que se meter com isso :) mas acredito que saber uma linguagem e lgica de programao ainda mais importante do que aprender uma segunda lngua. Minha ideia era simples: aprender a programar melhor para sair da ignorncia. Tropeos parte, tenho conseguido andar at que bem. Estava muito feliz em saber um Java basico, quando recebi a visita de um cara, no mnimo inspirador, que me fez mudar um pouco a viso do meu objetivo. Explico: normalmente fico olhando pessoas que fazem design com cdigos, ou traquitanas incrveis. Acompanho o trabalho do Mr. Doob, ou do pessoal do Google Creative Labs e fico invejando como eles so capazes de realizar coisas incrveis e eu no. claro que coloco toda a culpa nos cdigos, afinal eles sabem programar e eu no. Quando eu deixar de ser ignorante, eles vo 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 tambm falar sobre o Eye Writer. O trabalho da produtora incrvel! Para quem gosta de motion graphics, basta citar que fizeram a abertura do filme do 007-Quantum of Solace e a pea mais copiada da histria, depois de Star Wars, a abertura do filme Mais Estranho do que a Fico.
Tudo muito incrvel e bem feito, at que chegou a hora de mostrar o Eye Writer. Quando ele abriu o keynote imediatamente mudou de expresso, estampava orgulho nos olhos e na fala. No 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 tetraplgico. Tudo muito incrvel, a histria, a geringona, tudo. To incrvel que virou uma palestra no TEDx. Fiquei to 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, geringonas, etc). Fiquei bem surpreso quando ele respondeu: no sei fazer uma linha de cdigo. Mas como? Ele fala com tanta propriedade sobre o projeto aberto do Eye Writer, sobre como est recebendo contribuies 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 artifcio de um vendedor? Acostumado com as farsas da propaganda e com pessoas que levam crditos por outras, pensei: pronto t a mais um cara que no fez nada e est rodando o mundo fazendo palestras e levando o crdito pelo trabalho dos outros. Perguntei, ento, 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 prottipo h um longo caminho, que sempre passa por um desenvolvedor. Veio a primeira resposta: - Ele estava to 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 no tinha a mnima ideia do que estava fazendo, que se ele tivesse ideia do quanto seria complicado e de toda tecnologia que seria envolvida, no teria nem comeado. E fechou com uma frase conhecida, mas mudando uma palavra: Naivety is a Bliss! - Como se diz Naivety em portugus? A palavra inocncia . E a fra se faz muito mais sentido com essa palavra. Depois desse encontro, entendi que s devo continuar aprendendo a programar se mantiver a minha inocncia em relao ao assunto. Afinal eu no preciso continuar ignorante em programao, preciso continuar ingnuo. A ingenuidade que te faz ter a falta de noo para fazer. </>
Para saber mais, procure por Mick Ebeling no site do TED, ou acesse: http://new.theebelinggroup.com
Pedro Gravena Diretor de Criao Digital da Wieden+Kennedy So Paulo, j foi arquiteto, msico, artsta plstico, e est estudando para ser um inventor frustrado. Conhea mais em @pedrogravena e pedrogravena.posterous.com
16 > Artigo > Marketing Digital
Um mundo novo para o marketing digital:

Por <Marcela Daniotti>
Big Data
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 tecnolgicos e BAM!, a revoluo se instaura. Mesmo assim, vale a pena colocar definio + cases e enfatizar o que j era feito no passado, mas que agora virou disciplina e tpico de muita discusso. Muitos de vocs j devem ter se deparado com a expresso big data. Vamos dissecar? O termo Big Data refere-se ao volume absurdo de informaes que produzido e consumido na era em que vivemos e na impossibilidade de processar essas informaes com as ferramentas convencionais. Trazendo isso para o mundo corporativo, imagine a dificuldade que empresas tm em extrair, armazenar, processar e ento, o mais importante, visualizar esse volume crtico de informaes a fim de obter insights valiosos? Vamos trazer essa realidade para o nosso mundo? Podemos dizer, sem sombra de dvida, que um dos culpados pelo altssimo volume de informaes produzidas e consumidas hoje o marketing digital, que exponencializou o nmero de touch points entre consumidores e marcas/empresas. Seria lindo se no fosse trgico, pois:
91% de profissionais de marketing seniors acreditam que marcas de sucesso fazem bom uso de Big Data para suas decises de marketing, mas... 39% dizem que os dados na empresa onde trabalham so coletados sem frequncia certa ou no suficientemente real-time 51% dizem que a falta de compartilhamento dos dados de clientes dentro da sua prpria organizao uma barreira para medir efetivamente o ROI de marketing Grandes empresas so muito menos propensas a coletar novas formas de dados digitais como dados mveis (19%) do que para reunir dados tradicionais sobre os clientes, como informaes demogrficas (74%) e comportamentais (54%) 85% das grandes empresas j esto 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 eficcia do marketing entre diferentes meios digitais, Big Data um grande desafio para o seu negcio.
O desafio e ao mesmo a promessa das novas tecnologias que prometem lidar com este grande volume de informaes permitir que os profissionais de marketing tomem melhores decises em todos os nveis, sejam varejistas, fabricantes, prestadores de servios 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 penltimas eleies 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 informao sobre eleitores. Em poucas palavras, o processamento dos dados estimou como cada grupo reagiria a cada tipo de abordagem e, ao colocar as aes em prtica, os esforos eram medidos e viravam mais dados, que eram reinseridos no banco de dados e permitiam a obteno de insights mais e mais inteligentes. Um verdadeiro Big Brother Eleitoral, como a prpria 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 bilhes de requisies ao banco de dados e 180 tb de armazenamento em trs data centers. Quer mais um exemplo de aplicao desta tecnologia? Ok, vamos l.
Alm de integrar diferentes mbitos e tecnologias, o principal atrativo e diferencial do projeto que a anlise de dados obtidos em grande escala do comportamento urbano do cidado, mediante a integrao dos grandes dados digitais para aprimorar e definir os servios oferecidos. A coleta destas informaes sobre os cidados em termos de uso de transporte, energia, meio-ambiente e comunicao ser utilizada para retroalimentar as tecnologias e os servios desenvolvidos e assim permitiro ajustar os servios interativos acessveis oferecidos para as necessidades reais. Alm disso, j existem projetos mais ambiciosos de aproveitar as informaes de cidades inteligentes para gerar receita proveniente de anunciantes. Imagine o seguinte: e se uma telecom cruzar dados demogrficos e de geolocalizao de seus assinantes e oferecer para empresas que desejam saber onde seu pblico 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 preocupao com privacidade. Enquanto o projeto de cidades inteligentes conserva a identidade do indivduo e se importa somente com dados coletivos, a campanha de Obama utilizou os insights conquistados para aes one on one. Nos ltimos anos, legisladores e reguladores tm manifestado preocupaes crescentes sobre o volume de dados que as empresas esto coletando, como essa informao utilizada, se o dado coletado vendido, e se os consumidores so avisados sobre as prticas dessas empresas. Penso assim: uma escolha do indivduo fornecer informaes. Outro dia ouvi um amigo dizer: no ligo para o modo como as redes sociais fazem uso dos dados pessoais. No estou em nenhuma delas mesmo. Interconectividade: nus e bnus. Cabe a ns escolher. </>
Cidades Inteligentes: Projeto Cidade 2020

Com o objetivo de desenvolver um novo modelo de cidade inteligente sustentvel, ecolgica e economicamente por meio da anlise da demanda real dos cidados aliada s oportunidades de comunicao oferecidas pela internet e cada vez mais numerosos dispositivos conectados rede, o projeto pretende atender as necessidades de usurios com servios pblicos aprimorados.
Marcela Daniotti profissional de marketing online focada em contedo digital. Graduada em Publicidade e Propaganda pela Faculdade Csper Lbero e especializada em Gesto de Marketing pela Fundao Getlio Vargas.
18 > Coluna > Padres 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 escritrio da Amrica Latina atua com princpios muito claros: trabalhar por uma Web para todos, em qualquer dispositivo, em qualquer lugar, segura e confivel! Trazer um escritrio do W3C para o Brasil foi uma iniciativa do Comit Gestor da Internet no Brasil (CGI.br) e do Ncleo de informao e Coordenao do Ponto BR (NIC.br) para que a comunidade brasileira no seja apenas adotadora de padres Web. O Brasil pode contribuir para o desenvolvimento da Web participando ativamente dos fruns de discusses do W3C. Ns queremos que a realidade brasileira faa parte das discusses de padres internacionais. Mesmo acompanhando as discusses de alcance mundial sobre grande parte dos padres, o W3C Brasil d ateno especial a determinados temas:
Dados abertos
Possibilita que dados pblicos na Web estejam disponveis em formato aberto, padronizados e compreensveis por mquina. Com esses dados, outras pessoas podem fazer uso dessas informaes e criar aplicaes 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 deficincia, fundamental para o maior princpio do W3C: uma Web para todos. A tecnologia trouxe autonomia para as pessoas com deficincia e por isso a acessibilidade na Web to importante.
W3C Brasil em 2013

Desde 2007, o W3C Brasil promove e participa de aes e projetos para fomentar o uso e o desenvolvimento dos padres. Dos diversos projetos que temos planejados para 2013, posso destacar alguns deles de grande importncia nacional e internacional.
Open Web Platform

Esse o conjunto de tecnologias abertas criada para o desenvolvimento da Web. Entre eles, esto nossos conhecidos do cotidiano, como HTML, CSS, SVG, Web APIs etc. A utilizao da Open Web Platform permite que qualquer pessoa possa implementar um componente de software da Web sem a necessidade de quaisquer aprovaes ou ter que pagar qualquer taxa de licena. O W3C Brasil tem feito um grande trabalho de conscientizao da comunidade da importncia do uso de padres abertos.
Conferncia WWW2013
A maior conferncia 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 so apenas alguns dos palestrantes confirmados para esse evento, que tem como um dos organizadores o W3C Brasil. Acesse http://www2013.org/.
co e como assegurar a sustentabilidade e a escalabilidade dos projetos desenvolvidos com dados abertos. Acesse http:// www.od4d.org.
Aes do Dia Internacional das Pessoas com Deficincia

Todo dia 3 de dezembro, dia esse proclamado pela ONU como o Dia Internacional das Pessoas com Deficincia, o W3C Brasil promove aes para a conscientizao sobre a importncia da acessibilidade na Web. Em 2012, deixamos nossa pgina toda escura e fizemos uma ao espetacular de cenografia na mo do memorial da Amrica Latina, em So Paulo (o vdeo est disponvel na pgina do W3C Brasil em http://www.w3c.br/ ou diretamente pelo YouTube em http://youtu.be/MWuZFDnor2c).
Conferncia Web W3C Brasil

Tambm em 2013 acontecer a 5 edio da Conferncia Web W3C Brasil, prevista para outubro. Uma conferncia que reunir a comunidade Web brasileira para a discusso e o fomento do uso e desenvolvimento de padres para uma Web livre e aberta. Acesse http://conferenciaweb.w3c.br/.
Prmio Nacional de Acessibilidade na Web

A segunda edio do Prmio Nacional de Acessibilidade na Web foi lanado em janeiro de 2013 e estar com inscries abertas em breve. Sero premiadas pessoas que fizeram grandes aes em favor da acessibilidade na Web, tecnologias assistivas, websites e aplicaes que sigam padres de acessibilidade e no criem barreiras de acesso para pessoas com deficincia. Acesse http://premio.w3c.br/.
Voc tambm pode participar do W3C

Uma forma de participao so as listas de discusso do W3C (http://lists.w3.org/). Grande parte dessas listas pblica e aceita participaes e contribuies da comunidade. Algumas delas, especialmente as relacionadas a Grupos de Trabalho, so restritas a membros (mais um dos grandes benefcios de se filiar ao W3C - http://www.w3c.br/Filiese). Voc tambm pode participar de tradues, revises de padres 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. </>
Open Data Conference in Latin America and the Caribbean 2013

A Conferncia sobre Dados Abertos na Amrica Latina e Caribe ocorrer em junho de 2013, em Montevidu, Uruguai. No mbito do projeto Open Data for Development in Latin America and the Caribbean (OD4D), o W3C Brasil realizar a conferncia em parceria com a Comisso Econmica para Amrica Latina e Caribe (CEPAL), o Centro Internacional de Pesquisa e Desenvolvimento do Canad (IDRC), o Banco Mundial, a Fundao Omidyar e o Governo do Uruguai. Reunir grandes nomes engajados na discusso sobre dados abertos e abordar temas como o impacto dos dados abertos na sociedade, a importncia dos dados abertos governamentais, o desenvolvimento econmi-
Reinaldo Ferraz especialista em desenvolvimento web do W3C Brasil. Formado em Desenho e Computao Grfica e ps graduado em Design de Hipermdia pela Universidade Anhembi Morumbi, em So Paulo. Trabalha h mais de 12 anos com desenvolvimento web. Coordenador do Prmio Nacional de Acessibilidade na Web e do Grupo de Trabalho em Acessibilidade na Web e representante do W3C Brasil em plenrias tcnicas do W3C.No Twitter @reinaldoferraz
20 > Capa
O lado B da tecnologia
Criatividade e Inovao Alternativas
Por <Blab>
Lado B uma expresso 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 no era aquele com maior
potencial de vendas, mas o lado mais experimental e alternativo. Esse outro lado podia no ter interesses comerciais e, por isso mesmo, era mais autntico e representava melhor a essncia do artista.
Do analgico para o digital, no existem mais lados, mais uma questo sobre conter ou no conter informao, alm de ser uma informao que pode ser malevel, diferentemente do contedo analgico ao qual no podemos manipular. Mas, a grosso modo, nem porque deixamos de utilizar as mdias analgicas como principal meio de propagao, que o lado B se perdeu, alis nem o velho vinil se perdeu, ele est mais vivo do que anos atrs. 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 dgitos imutveis, ou voc est escutando o lado B do universo digital e acessando o seu lado mais malevel?
mveis, I Lv Yr GIF (http://www.desvirtual. com/i-lv-yr-gif-webapp/), que permite composies visuais interativas atravs de antigos GIFs animados. Com isso, temos que o desenvolvimento de aplicativos no se restringe apenas aos engenheiros da computao, sendo uma rea das mais cobiadas pelos artistas contemporneos. Alm 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 condio para a sua existncia do que um princpio, pois dentro de mdias de massa dependemos de sua popularizao para que o aplicativo permanea vivo.
Arte
Nossa cultura inteiramente permeada por meios digitais e, no entanto, sem um lado B, sem um comparativo, no h crtica. Vlem Flusser, em seu livro A filosofia da caixa preta, usa como metfora a cmera fotogrfica para apontar a forma como usufrumos dos meios tecnolgicos. Sabemos apertar um boto para tirar uma foto, no entanto, essa automatizao nos afasta de todo o processo de como o sistema funciona. A arte lida com os meios de seu tempo, e os artistas miditicos de hoje representam o que h de mais avanado na arte. A atual tecnologia no foi inicialmente desenvolvida para a atividade artstica, porm so estes os responsveis pelo desenvolvimento que vai alm da dimenso tcnica, desprogramando suas funes e deixando a n sua lgica. E isso faz com que muitos artistas estejam bem na frente de algumas empresas de tecnologia. A turma que pensa em desenvolvimento tecnolgico pensa em padres 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
22 > Capa
Projeto utilizando Arduino (Polar Plotter - http://ow.ly/hUJTW)
tipo de interatividade participando de inmeras exposies de Arte Digital, mas a funo bsica 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 posio 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 cmera para uma imagem e o processo reverso se d, os nmeros obtidos pelas cores em RGB so substitudos por letras, e assim podemos ler o texto existente em cada imagem.
O Arduino, por exemplo, hardware livre que revolucionou a cena digital, open source, ou seja, toda informao sobre seu desenvolvimento est disponvel e voc pode construir o seu prprio e ainda por cima comercializ-lo. Nem por isso seus desenvolvedores deixam de faturar, pois muita gente acaba comprando o Arduino produzido pelos prprios desenvolvedores. Assim, eles faturam com as vendas e tambm se beneficiam com a expanso do nmero de usurios. Veja aqui alguns projetos bacanas que foram feitos com Arduno no ano passado http://bit.ly/10cgmbK A grande diferena entre a criao e a inovao que a criao envolve a idia, e a inovao envolve a aplicao de uma idia. At ento, o papel do artista era o da criao e, aps a celebrao de uma obra de arte, criam-se inmeras formas de utilizao da idia ali criada. Hoje o que vemos o oposto: engenheiros e afins criando tecnologias, as quais artistas se ocupam de sua aplicao. Se a arte se contamina pela tecnologia, por que no deixar a tecnologia se permear pela arte? Cadu Lacerda, artista multimeios do Rio de Janeiro, criou uma srie de pinturas que se baseiam nas imagens obtidas por um algoritmo que ele mesmo criou utilizando uma ferramenta de cdigo aberto que facilita o uso de determinadas linguagens de programao para designers e artistas, tornando suas criaes interativas e generativas, a Processing. Depois do seu surgimento, a arte e o design nunca mais foram os mesmos - http://processing.org/ Para a criao da srie intitulada Parasimtrica 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
Futuro no passado
Muitas vezes a inovao vem de peas j ultrapassadas, e nessa releitura que surgem as ideias mais mirabolantes. O midiartista Mateus Knelsen desenvolveu, em 2012, um workshop ao estilo DYI, faa voc mesmo, na Freguesia do em So Paulo, onde os inscritos eram convidados a construir seu prprio carinho de rolim e acoplar pequenos transmissores de sinal de rdio e TV; ao descerem a ladeira, eles transmitiam estes sinais s TVs e rdios locais. Confira em http://labmovel.net/ A releitura do passado s possvel devido ao grande avano tecnolgico atual, que nos permite, por exemplo, transformar uma fita K7 em um minicomputador, devido a uma tecnologia que cada vez mais potente, porm em menores escalas. O Raspberry Pi, computador
Workshop de Mateus Knelsen
Imagem: Parasimtrica Algoritmo das Cores
que surgiu em 2012 do tamanho de um carto de crdito, o auge da tecnologia hoje e quem mais esta aproveitando disto o lado B. Vale a pena ler este artigo que mostra 10 criaes com Raspberry Pi e como um mini-PC pode ser incrvel: http://ow.ly/hdUyX Muita coisa nova pode surgir do passado, mas nem tudo que vemos de inovador to novo assim. Os filmes 3D estereoscpicos 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 fora novamente. Outra grande cartada do passado so as holografias, que esto fazendo sucesso em shows onde antigos msicos, digamos j extintos, voltam de suas tumbas atravs de imagens hologrficas que interagem com a banda real. Esse um efeito que era muito usado por antigos mgicos e se chamava phantasmagoria, e no eram holografias, mas um jogo de espelhos muito bem feito.
que jamais se esperaria de um grupo que se envolve com desenvolvimento tecnolgico e polticas 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 espao dos nerds. Radams Ajna lidera j h alguns anos o hackerspace do SESC Pompia, em So Paulo (http://hackzilian.com). Muito jovem para tanto conhecimento, ele no tem medo de compartilhar livremente tudo que sabe para quem estiver disposto a aprender. Em uma poca onde a informao vale muito, os hackerspaces funcionam ao oposto disto. Um hackerspace, como o nome j diz, um local onde hackers, curiosos que gostam de fuar 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 fsico, por uma vasta lista de comunidades que compartilham na rede tutoriais e cdigos sobre tudo que diz respeito a este universo, envoltos, claro, sobre a bandeira do software livre. So inmeros sites que podem te ensinar a fazer qualquer tipo de coisa, aparentemente de uma sofisticada tecnologia, mas que pode ser
Lixo eletrnico
Por isso no jogue fora o passado, alis, no jogue nada fora! O lixo eletrnico pode ser valiosssimo nas mos de pessoas como as do Metareciclagem (rede.metareciclagem.org), que comearam recebendo computadores usados para serem concertados e doados em projetos sociais. O grupo amadureceu e hoje se envolve em diversas aes de desconstruo para reconstruo da tecnologia como proposta de transformao social. Na pgina inicial do site voc recebido com todo o bom humor
24 > Capa
restringe ao eixo Rio-So Paulo. O grupo Gambiologia (gambiologia.net/blog), de Belo Horizonte, marca presena na cena com sua cultura pop tupiniquim. E em festivais e encontros de cultura digital podemos ouvir toda uma srie de sotaques baianos e pernambucanos discutindo cdigos e calando muito carioca e paulista. Os que frequentam o universo do desenvolvimento tecnolgico formam uma cena cada vez mais variada e animada. Entre eles est Marcelo Castilha, msico da banda Improvisado. Ele vira o disco da cena eletrnica noturna e toca jazz em uma das festas mais descoladas de So 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 msicas com um resultado harmnico. Mais um pouco e vamos ter o lado C da tecnologia!
construda com objetos que esto nossa volta. Ao compreendermos como escrever nossos prprios softwares ou construir nossas prprias mquinas, compreendemos mais o mundo nossa volta e podemos nos expressar melhor de uma maneira que rompe com os limites que as grandes instituies e corporaes esto nos impondo. A Casa de Cultura Digital, em So Paulo, quase uma vila de hackerspaces como a sede do Garoa Hacker Club engajadssimos 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 atravs de crowdfunding, ou seja, por pessoas fsicas interessadas na iniciativa e engajado pelo site Catarse. Outro projeto surgiu quando decidiram comprar uma Makerbot, impressora que imprime peas em 3D, para construir sua prpria mquina de pinball e perceberam que a impressora poderia ser bem melhor. Da fizeram a impressora imprimir outra impressora 3D, ainda mais avanada. A Casa de Cultura Digital ainda abriga o MemeLab (memelab.com.br), onde trabalham o VJ Pixel e a produtora Andressa Viana, que tm a pilha de produzir tanto um evento como um software a questo realizar. Um dia decidiram que queriam criar seu prprio software de Realidade Aumentada e reuniram quem mais estava a fim de se envolver, fuaram um pouco e criaram o Jandig, software que j participou de vrios festivais de cultura digital, mostrando o que um grupo de pessoas ousadas capaz. Mas o desenvolvimento de gambiarras, aquele jeitinho brasileiro de improvisar solues, no se
Concluso
Podemos virar o disco, ou unir os lados. Segundo Arlindo Machado, o segredo a convergncia quanto mais individualizamos os campos de atividade, menos produtivos somos, enquanto a hibridizao gera possibilidades e melhores solues. Compartilhar a chave do negcio e, sem as comunidades que disponibilizam livremente a informao na rede, nada disso seria possvel. Olhar para o outro lado estar livre de padres, criar com as prprias mos e ver que possvel alcanar 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 incorporao de diversos gneros com um resultado singular. </>
Texto: Blab - Adriana Pedrosa e Iliana Grinstein Fotos: cedidas O Blab um coletivo voltado para tecnologias audiovisuais e interativas, que rene designers, programadores, videomakers, msicos, surfistas e ex-modelos para projetos imersivos extrasensoriais.
26 > Criatividade Tecnolgica
Festival das Luzes na era da interatividade

Por <Lina Lopes>
Tomei de emprstimo para estas divagaes o tema de um dos tpicos abordados na Conferncia do Festival da Luzes de Lyon 2012, organizado pela LUCI Association e Prefeitura de Lyon, a que tive a oportunidade de assistir. Mais informaes no site da LUCI em http://bit.ly/V5q3kN Fiat Lux. Deus criou a luz e o homem criou a iluminao 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. Inicialmente, essa iluminao 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 histria contada sobre o mais antigo e famoso festival das luzes, La Fte des Lumires, em Lyon, Frana. O que sempre me leva a pensar em como as possibilidades tecnolgicas de iluminao mudaram muito nestes 150 anos de histria. Da parafina ao LED, passamos por iluminao a gs, luminrias de querosene, lmpadas a arco voltaico, lmpadas eltricas incandescentes e fluorescentes, neon, fibra tica, light flex, refletores cnicos, moving heads, e assim por diante - isso sem contar o advento do cinema e seus desdobramentos digitais, como a projeo mapeada (videomapping). Um festival das luzes discute tudo isso, j que , de fato, uma relao ntima entre as tecnologias de luz disponveis, a arquitetura, o espao pblico e a arte.
Et Si - Daniel Knipper Production GL EvetnsAudiovisuel (c) Muriel ChauletFete des Lumieres
Para ampliar nosso entendimento dessas relaes, voltemos balada, ou melhor, iluminao pblica. Ela fruto de um processo de urbanizao crescente a partir do sculo XIX, que ampliou o convvio em espaos pblicos noite adentro, gerando uma noo de segurana aos cidados. O que um festival das luzes dilata nesse contexto a celebrao conjunta dos conhecimentos cientficos, responsveis pela histria humana, aplicados imaginao e ao ldico. Eu, pessoalmente, considero essa tarefa uma arte. Dentre as obras que gostaria de destacar, pela unio que fizeram entre o esttico e a soluo engenhosa pela sua simplicidade, est a Et Si?. Nela, as imagens luminosas, que tinham suas referncias no universo das grandes pinturas, estavam sobre as fachadas de edifcios que faziam parte do patrimnio da cidade, como o Palcio da Justia, a Catedral de Saint-Jean e a Baslica de Fourvire (erguida em homenagem Virgem Maria). Dessa forma, a dimenso espacial chamava a ateno ao longo do canal. Pensei se estaria diante do maior videomapping que j tinha visto. Para minha surpresa, a soluo tecnolgica da obra era bem menos onerosa do que
eu esperaria, uma vez que, do lado oposto do canal, havia uma dzia de refletores cnicos com lmpadas de alta potncia da famlia dos elipsoidais (na verdade, deviam ser do tipo seguidores). Esse refletor possui a capacidade de utilizar gobos, uma espcie de filtro fsico que possui imagens fixas e, dessa forma, diminui o custo da produo. As imagens, assim, mudavam dinamicamente e acompanhavam um videomapping (sim, havia uma parte mapeada, mas bem menor). A imerso dada pela projeo em todas aquelas fachadas, pelo reflexo na gua e ainda com uma combinao entre luzes e videomapping, foi mais que garantida. Outra obra que gostaria de citar Highlights no imagino melhor nome para descrev-la, esta sim um videomapping monumental. Trata-se de um vdeo de aproximadamente sete minutos que se estende por trs fachadas distintas que cercam a Place des Terreaux. O vdeo foi feito com bailarinos que, em determinados momentos, so projetados como pilastra dos edifcios e, em outros, aparecem desenhando as fachadas com luz de lanterna. Nota para a sincronizao dos moving lights, refletores eletrnicos que pos-
28 > Artigo > Criatividade Tecnolgica
Highlights, le fil lumire-Skertz(c) Fabrice Dimier/Fete des Lumieres
sibilitam o movimento do facho de luz pelo espao, que entram em cena para acompanhar o videomapping com luzes coloridas, ou para fazer parte da narrativa. Para no se perder entre as inmeras 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 intervenes luminosas (eram cerca de 60 projetos). As rotas do app contavam com mapas e, se conectadas internet 3G, eram capazes de orientar o usurio pelo festival. Alm disso, era possvel compartilhar as prprias fotos do festival, votar nas mais interessantes, e na iluminao que mais agradou, tudo por meio do aplicativo. No tive oportunidade de usar as opes que necessitavam de Internet - vai ficar para o prximo ano.
emprstimo o ttulo, peguei emprestado tambm o conceito geral da srie de palestras com a participao do artista Miguel Chevalier (www.miguel-chevalier.com), que tratou a interatividade como um modo de encorajar a participao e a apropriao da obra por parte do espectador. O conceito no novo para um usurio mais avanado da Internet e dos videogames. Contudo, o suporte digital das novas tecnologias permite ampliar a ideia de interatividade para espaos cada vez mais diversificados. Entre as obras presentes no festival, pude perceber o uso generalizado de cmeras de deteco de profundidade, como a kinect. Ela emprega uma tcnica que no nova e consiste em usar iluminao infravermelha e uma cmera sensvel a essa iluminao para detectar um corpo no espao. O que a kinect fez foi criar uma ferramenta estvel e acessvel com esse conhecimento e ampliar para uma deteco 3D do seu objeto. Esse sistema de computao visual to aperfeioado e tangvel que a opo por seu uso, atualmente de maneira massiva, em obras ditas interativas no nenhuma surpresa. Basicamente, essa tecnologia foi usada no festival para permitir ao espectador usar seu corpo para interferir nas projees. Lembro-me
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
especificamente do LABO#6, uma experincia de estudantes de arte e design, e da obra Murs Sensibles, na fachada da Aliana Francesa de Lyon. Creio que havia mais uma obra, o Eclat-Fresque Interactive, que no consegui ver. Todas elas apontam para a expectativa de o festival se alinhar com essa questo contempornea de engajamento do seu pblico, tornando-o coautor e provocando uma experincia cada vez mais afetiva. Quem acompanhou o Intercon 2012, organizado pelo iMasters, pode ver na Arena Criatividade, eu e o parceiro Luis Leo demonstrando o uso da kinect. Mudamos as cores da iluminao lateral do evento de acordo com o movimento horizontal da mo (da esquerda para a direita) em frente cmera. Para quem quiser ainda dar uma conferida nas experincias que fizemos com a iluminao do Intercon e possibilidades interativas, deixo o link: http://bit.ly/Y6ArJF claro que sistemas de computao visual que rastreiam o corpo no espao no so a nica forma de se fazer interatividade. Ainda temos outra possibilidade da qual o Festival talvez se aproprie nos prximos anos, como a internet das coisas. Usar twitters, instagra-
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 lanou em outubro (http://bit.ly/S7g7Xc), um sistema de iluminao wireless em que o usurio capaz de, a partir de seu sistema (iphone/ipad ou android), controlar a intensidade e a cor das lmpadas instaladas. No vejo a hora de encontrar uma dessas lmpadas na balada. </>
Lina Lopes graduada no curso superior de audiovisual da universidade de So Paulo (ECA/ USP), est cursando engenharia da computao (FIAP) e se especializando em iluminao e design (IPOG). Pesquisa a relao entre corpo, espao cnico, linguagem da fotografia, do vdeo e das artes&tecnologias. - lina@blab.art.br
!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=>  <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>    <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 30 > Opinio
Frameworks para front-end
Aps o surgimento do Bootstrap (desenvolvido no Twitter), vrios outros frameworks tm surgido. Isso representa um avano na padronizao e o acesso mais fcil a webstandards ou pode ser uma armadilha quando voc precisa desenvolver multi-plataforma e com a preocupao com acessibilidade? Por qu?
Quando este termo de CSS Frameworks surgiu, havia sim um certo receio do uso, pois no se enxergava o verdadeiro potencial que os Framewors poderiam proporcionar. Para quem era acostumado a fazer na mo, houve um certo receio de seu uso. Em alguns casos ele pode no se aplicar, dependendo da complexidade dos layouts. Hoje eles esto mais maduros com algumas melhorias em acessibilidade e responsivo. Mas eles ainda tem muito a evoluir, porm, h casos de frameworks modificados derivados do Bootstrap (Twitter), que esto fazendo melhorias alm da verso standard do mesmo, afim de suprir estas deficincias. No mesmo ritmo da Biblioteca jQuery, eles esto tambm deixando o legado de suporte a navegadores antigos e ficando mais leves e tambm com tcnicas de OOCSS (Object Oriented CSS), que fazem o uso inteligente do CSS. Existem tambm 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 congneres no afetam diretamente na padronizao e no acesso aos web standards, pois o papel deles, na verdade, consiste em ajudar a tornar o desenvolvimento para web mais prtico, verstil e rpido. Em contrapartida, sabendo que esses frameworks procuram cobrir a maior parte dos elementos que usamos no dia a dia, padronizaes proprietrias nascem naturalmente, o que interessante para o estudo de quem est comeando. Digo proprietrias porque as decises partem das equipes que criaram e mantm os projetos, o que muitas vezes do margem para resultados inconsistentes e que no agradam a maioria. preciso cuidado para decidir quando usar (ou no usar) esses frameworks. <Ramon Bispo> Designer e Desenvolvedor
O surgimento de frameworks de desenvolvimento s veio para somar e ajudar na padronizao da web, mas para ter um projeto com o mnimo 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 , alm de ter um cdigo com semntica, 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 semntica do documento para fornecer esclarecimentos adicionais sobre o estado da interface e como interagir com ele. Mas voltando, a pergunta inicial, no uma armadilha o surgimento dos frameworks. Para se desenvolver algo multplataforma e acessivel, alm 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
Acredito que seja um avano em questes estruturais da interface, mas em questes de webstandards penso que no ajuda em muita coisa. Quanto a questo de acessibilidade deixa um pouco a deseja no utiliza algumas das tecnologias da W3C como, por exemplo, WAI-ARIA e so poucas as empresas que tem o zelo da Web de todos para todos. A utilizao de um framework pode ajudar como tambm atrapalhar e deixar o desenvolvimento de um produto bem catico, tudo depende de como ser implementado e a acessibilidade e da mesma forma deve ser pensada deste o comeo do projeto, ela no 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 Estdio Interativo e participante ativo dos gropos Acessibilidade Digital e Frontend Brasil
De modo geral, todos os frameworks baseados no Twitter Bootstrap so bons. Essa popularizao boa por que os bootstraps ajudam na padronizao do cdigo usado no projeto, sugerindo a criao de um CSS reutilizvel e tambm oferecem um grid system responsivo, isso facilita muito no desenvolvimento multi-plataforma no atrapalhando em nenhum momento a acessibilidade, mas tambm no torna uma pgina mais acessvel, com um bootstrap fazer pginas mais acessveis continua sendo uma responsabilidade do desenvolvedor. <Ofelquis Gimenes> Desenvolvedor Front-end Freelancer.
fato que tm 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 padronizaes de cdigo, uma boa documentao centralizada, e muitas vezes bem alinhados com os padres 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 manuteno, dentre boas opes no mercado podemos destacar: Twitter Bootstrap, Skeleton, Zurb Foundation. <Davidson Fellipe> Front-end Engineer na Globo.com e BrazilJ-Foundation
32 > Artigo > Segurana
Confiana, certificados digitais e autenticao

Por <Joo Neto>
Confiana x Autenticao
A diferena fundamental entre autenticao e confiana est na confirmao de algo. Enquanto que na autenticao duvidamos at que se prove a veracidade, na confiana acreditamos at que algum evento prove que estamos errados. Para usurios, o coneito de autenticao segue o mesmo princpio. Ele se identifica com seu nome, email etc. e, atravs de alguma das trs formas descritas, confirmamos sua identidade: 1. Atravs de algo que ele : a biometria , talvez, um dos mtodos mais eficientes e seguros para se confirmar uma identidade. Impresso digital, DNA etc., so padres com os quais o usurio nasce. extremamente difcil falsificar esse tipo de padro, mas tambm relativamente caro e complexo utilizar esse tipo de autenticao em algumas aplicaes 2. Atravs de algo que ele saiba: essa , provavelmente, uma das formas mais comumente utilizadas em uma aplicao. Quando solicitamos ao usurio uma senha, nome do primeiro professor, nome do bichinho de estimao etc., estamos pedindo algo que o usurio sabe e, teoricamente, apenas ele sabe. 3. Atravs de algo que ele tenha: essa formatem sido cada vez mais utilizada por aplicaes nas quais a autenticidade da informao fundamental. o caso, por exemplo, de internet banking, em que um Token ou um certificado digital fornecido ao usurio. Quando utilizamos essa forma de autenticao, estamos usando algo que o usurio tem. comum, em uma aplicao, termos um formulrio no qual o usurio informa um identificador (nome de usurio, email etc.) e uma senha. Chamamos essa senha de autenticador de identidade e, com ela, atravs de consulta em uma base de dados, verificamos se determinada senha pertence determinada identidade. A grande pergunta que fica : A informao provida pelo usurio autntica? Uma vez que no temos como confirmar se foi, de fato, o dono da credencial que a utilizou, penso nessa verificao como confiana, e no como autenticao. O usurio pode ter perdido a senha, pode ter sido roubado, N coisas podem ter acontecido, inclusive ter emprestado a senha para algum. Se outra pessoa, em vez do dono, estiver utilizando essa identidade, mesmo que o par identidade e senha seja vlido, ele no autntico.
Certificado digital
O certificado digital um arquivo que contm diversas informaes sobre a identidade de algum ou alguma coisa. Alm de dados como nome (do indivduo, da empresa ou de uma mquina), cidade, estado (UF), pas etc., o certificado digital funciona como uma espcie 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 criptogrficas assimtricas - uma pblica, que enviada para o destinatrio, e uma privada, que de posse e responsabilidade exclusiva do dono do certificado.
Quando uma comunicao estabelecida, por exemplo, entre Fulano e Beltrano, Fulano recebe de Beltrano sua chave pblica, utiliza sua chave privada para criptografar a informao para a chave pblica de Beltrano e envia a mensagem. Como Fulano utilizou sua chave privada para criptografar para a chave pblica 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 autenticao 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 aceitao, para autenticao de usurios, para afirmar que os dados contidos em uma nota fiscal eletrnica so verdadeiros etc. Para o propsito deste artigo, vamos usar um cenrio hipottico de uma aplicao rodando em localhost. Essa aplicao 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: Pressupe-se, nos passos abaixo, que a mquina onde sero executados j possui openssl, Apache httpd, mod_ssl e php com a extenso openssl.
CA Autoridade certificadora
1. Criaremos um diretrio de forma que seja inacessvel publicamente. Nesse diretrio, criaremos as chaves e os certificados. $ mkdir ~/certs 2. Dentro desse diretrio, criaremos um diretrio para o certificado da CA. Assim que criado, entramos nele diretrio 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 requisio 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
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 servers hostname) []:Minha CA Email Address []:neto.joaobatista@localhost
Certificado do servidor
1. Criamos um diretrio para o certificado do servidor de forma que seja inacessvel 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 requisio 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 servers 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 contrrio do certificado da CA, utilizamos o nome do servidor em Common Name. Se no existir um nome de domnio, ento o IP do servidor dever ser utilizado. 3. Usamos o certificado da CA, que criamos anteriormente, para assinar a requisio 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, Requisio 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 resoluo 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 aplicao: $ 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 contedo 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>
Aps reiniciar o servio httpd, j teremos acesso ao nosso example.localhost utilizando SSL. Um detalhe interessante que, como nossa CA no reconhecida pelo navegador, veremos uma tela como a abaixo:
Como podemos ver, voltamos quela questo de confiana. Como o navegador (no caso, Firefox), no reconhece a CA, ele no consegue dizer se aquele certificado autntico. Isso pode ser um problema se estivermos trabalhando em um ambiente web, mas em um ambiente controlado, como de uma intranet, essa situao no problemtica, e basta adicionar o certificado da CA na lista de expedidores confiveis do browser. Configurando a aplicao 1. O primeiro passo para configurar a aplicao fazer o servidor solicitar o certificado do usurio. Para isso, criaremos um arquivo .htaccess no diretrio /var/www/html/example, com o seguinte contedo: SSLVerifyClient optional SSLVerifyDepth 1 SSLOptions +StdEnvVars A primeira linha diz que o certificado opcional. Se estivermos, por exemplo, em uma rea administrativa da aplicao, podemos utilizar require em vez de optional. O require exigir que o usurio tenha um certificado e, se no tiver, o servidor no 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 usurio no for expedido por uma CA em que o servidor confia, o servidor no permitir acesso ao usurio.
A terceira linha vai pedir para o servidor definir as variveis de ambiente com alguns dados do certificado. Essas variveis estaro na super global $_SERVER, com o prefixo SSL_CLIENT_*. Vamos utilizar esses dados para autenticar o usurio. Por uma questo de espao, no vou demonstrar todo o cdigo da aplicao de exemplo aqui, contudo, ela est disponvel no Github e pode ser obtida atravs do seguinte: $ git clone git://github.com/netojoaobatista/example.git $ composer.phar install Ao clonar o repositrio, 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 funes openssl_* do PHP para gerar as chaves, as requisies de assinatura de certificado e os certificados do cliente. Abaixo, a descrio das funes utilizadas:
openssl_pkey_new
A funo openssl_pkey_new ser utilizada para a gerao das chaves. Ela equivalente ao seguinte: openssl genrsa -des3 -out client.key 4096
openssl_csr_new
A funo openssl_csr_new ser utilizada para gerar a requisio do certificado. Ela equivalente ao seguinte: openssl genrsa -des3 -out client.key 4096
openssl_csr_sign
A funo openssl_csr_sign ser utilizada para assinar uma requisio 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
Sempre que o usurio acessar a aplicao, verificaremos a existncia 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) { //usurio no possui um certificado da aplicao //redirecionamos o usurio para o formulrio de registro. } else { //usurio possui um certificado da aplicao //utilizaremos as variveis SSL_CLIENT_M_SERIAL e SSL_CLIENT_I_DN para //identificar o usurio na aplicao, verificar a validade do //certificado e, se o processo de autenticao for bem sucedido, //autorizamos o acesso. }
Concluso
Apesar de mais burocrtico, a utilizao de um certificado digital de cliente para autenticao adicionar uma camada de segurana aplicao. Podemos, inclusive, chamar essa camada extra de autenticao em dois passos. Primeiro verificamos o certificado digital, sua validade (para uma poltica de renovao de credenciais) e, ento, solicitamos ao usurio suas credenciais (nome e senha). Uma vez autenticado no sistema, todas as aes do usurio podem ser assinadas; por exemplo, se a aplicao tratar de documentos que precisam ser aprovados pelo presidente da empresa, ele pode utilizar seu certificado digital para assinar o documento, evitando a impresso do documento e o tempo necessrio para trafegar esse documento at sua sala. Alm disso, o uso de certificados digitais permite que os usurios da aplicao utilizem seus certificados para criptografar dados confidenciais. Por exemplo, essa medida foi utilizada pelo novo Mega para armazenar os arquivos dos usurios. Uma vez que a chave assimtrica, apenas o dono da chave privada pode descriptografar um arquivo armazenado no servidor. Como o servio Mega no possui essas chaves, eles podem alegar que no conhecem o contedo armazenado em seus servidores, isentando-se da responsabilidade e de acusaes de pirataria. </>
Joo Neto engenheiro de aplicaes e trabalha com ambiente web desde 2000 em diversas linguagens, como Java e PHP, dedicando esforos ao desenvolvimento de bibliotecas reutilizveis para a comunidade. Especialista em integrao de sistemas, possui vrias bibliotecas reutilizveis publicadas como open-source para a comunidade, como biblioteca Cielo, PayPal, ECT (Correios), BuscaP, Lomadee, Twitter, Facebook entre vrias outras. administrador do frum iMasters e iMasters Code, onde compartilha conhecimento com a comunidade de desenvolvedores. Tambm autor de cursos no iMasters PRO.
40 > Comunidade
Buso Hacker
da Internet para as ruas
Por <Lucia Freitas> para iMasters
H dois anos, surgiu a chamada no Catarse para o financiamento do Buso Hacker (conhea no http://onibushacker.org). Quinhentas pessoas colocaram a mo 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 discusso do nibus, no Google Groups. Segundo Daniela B. Silva, uma das idealizadoras do projeto, tudo no nibus Hacker aconteceu e acontece de forma muito orgnica. Quem se interessa pela proposta vai chegando junto, simples assim. Desse grupo saem os vinte que colaboram para resolver todas as questes do Buso. De sistemas de transmisso a dinheiro, so essas pessoas que se renem aos domingos ou feriados em torno de um churrasco com cerveja, porque todo mundo tem que se divertir para trabalhar. A comunidade tem as discusses normais de um grupo diverso, em que cada um pensa de um jeito. O resultado concreto do esforo so as invases hacker, que comearam pelo Festival de Cultura Digital, no Rio de Janeiro, em 2011, e no pararam mais. J so mais de 10 invases, cada uma do seu jeito. No, no tem carona de graa. Quem entra no nibus Hacker precisa colaborar. Na pr-produo (que d um trabalho enorme), nas oficinas, no evento. Tudo comea com uma Chamada Aberta (que publicada no site), quando
os interessados em participar preenchem um formulrio no qual pedem para entrar e dizem o que vo fazer. Apesar de o nome hacker remeter tecnologia, no s isso que entra. O importante operar na lgica do faa 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 Buso, completa.
Descobrir como financiar

A magia da colaborao comeou com uma ideia solta que virou realidade e comunidade que entrega energia e conhecimento para fazer o nibus acontecer. Mais que isso, eles ainda esto descobrindo como se pagar. Nos eventos, todas as oficinas e eventos so gratuitos. E, para no ficar presa aos convites, a comunidade ainda est inventando a histria 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 no sabamos, diz Daniela. Depois das primeiras tentativas, o coletivo chegou a um jeito: custo por quilmetro. No custo, alm da diria do motorista, combustvel e manuteno (porque um nibus velho exige manuteno constante), entram alimentao, 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 prprio nibus. A ideia criar condies para que o Buso Hacker tenha tambm autonomia para decidir seu destino. Alm disso, outros modelos, como Adote um Km e autofinanciamento por quem quer embarcar j esto no mapa futuro.
cker por 100 pessoas de redes e reas diversas, com um pblico que chega a dez mil pessoas.
Uma coleo ambulante de histrias

Conversar com a Daniela uma oportunidade para escutar histrias divertidssimas sobre o Buso. Um exemplo: fizeram uma invaso hacker em Ciudad del Este, no Paraguai. E, claro, compraram um monte de coisa por l. Da caixa de som porttil com microfone, para usar em eventos, ao kit de walkie talkies (que comeou com quatro e foi expandido para seis). Os busnicos (como s vezes se intitulam) se divertem acima de tudo. Em janeiro, a turma se reuniu (sem o nibus), no espao da Ashoka, dentro da Campus Party Brasil 2013. Foi s o comeo do ano. Depois disso, muitas outras invases viro, com certeza. Quer participar tambm? Assine o RSS do site (http://onibushacker.org), entre na lista de discusso e embarque nessa aventura. Todos so bem-vindos. </>
Entenda o nibus Hacker e a comunidade

O Buso Hacker um laboratrio sobre quatro rodas no qual hackers de todas as reas de conhecimento embarcam por um desejo comum: ocupar cidades brasileiras com aes polticas. Por poltica, entendemos toda apropriao tecnolgica, toda gambiarra, todo questionamento e exerccio de direitos. Por ao, entendemos a prtica, o faa voc mesmo uma antena de rdio, um projeto de lei, uma escola. Nessa lgica, o download de um torrent uma ao poltica to potente quanto a construo de aplicativos a partir de dados abertos. E, encontros com esses, num buso, contam com o aditivo do caminho entre uma cidade e outra, quando ideias diversas se conectam e um oramento pblico pode se tornar um lambe-lambe ou um grafite nos muros. Desde ento, j aconteceram dez invases ha-
42 > Coluna > Cdigo Livre
Informaes e dicas sobre projetos open source

Por <Al Borba>
Dojo Feedback
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 comentrios, separados em positivo e negativo, em uma espcie de quadro.
Super Trunfo
Esse jogo foi criado para incentivar a transparncia e colaborao em cima dos dados abertos, mostrando o que possvel fazer com as informaes cedidas pelo governo brasileiro, seguindo as definies do W3C. Desde a Lei da Transparncia (131/2009) em 2010, o Brasil vem se destacando quanto obrigao dos Estados a documentarem sua contabilidade na internet. Dessa forma, o jogo foi criado, consumindo atravs de um webservice, os dados abertos do primeiro turno das eleies de 2012. https://github.com/transparencia/ super-trunfo
Power Polygon
uma ferramenta baseada em Javascript para criar apresentaes em HTML5. O projeto foi inicialmente criado por Felipe N. de Moura e hoje est sob as asas da BrazilJS Foundation. Ele possui vrios temas e transies utilizando HTML5, CSS3 e Javascript e tem o uso bastante intuitivo. Peca apenas pelo fato de, mesmo sendo um projeto que roda no navegador, no possui verso online e tem que ser instalado localmente. Mas um projeto que promete muito! Para saber mais: https://github.com/ braziljs/power-polygon
Seu Lixo
Site criado durante o Desarrollando Amrica Latina 2012 com a inteno de agregar os dados abertos sobre lixo, possibilitando inferir informaes importantes sobre um dos princpais problemas mundiais: o lixo. Os destinos do lixo de cada cidade revelam as diretrizes de planejamento urbano adotado por cada municpio e como a comunidade est consciente ou no para alternativas ecologicamente mais corretas. O site foi baseado em dados do IBGE e so datados do ano 2000. No h dados mais recentes sobre o tema. Vale pedir para a prefeitura da sua cidade dados sobre o lixo gerado, direito do cidado! Ainda assim, mesmo com a pequena quantidade de dados sobre lixo, podemos inferir informaes relevantes... www.seulixo.com </>
Postmon
Uma API, open source, desenvolvida usando Python, para consultas de endereos postais do Brasil. A API usa um script que busca as informaes nos Correios e entrega para o cliente em formato JSON. O Roadmap do projeto conta com uma srie de outras melhorias e novas features, vale a pena acompanhar: postmon.com.br
Al Borba Gerente de TI e Comunidades do iMasters, e desenvolve projetos como o 7Masters, Dojos e outros.
44 > Artigo > Front-end
Como otimizar aplicaes web

As aplicaes web esto cada vez mais robustas, muitas delas recebem milhes de usurios por dia. Mas ser que elas realmente aguentam essa quantidade de requisies mantendo a qualidade de seus servios? Nosso objetivo aqui aprender a otimizar nossas aplicaes front-end para que o usurio tenha a melhor experincia possvel.
Por <Italo Lelis de Vietro>
Configurando nosso servidor

Gzip
um software para compresso e descompresso de arquivos. Ele altamente utilizado em websites para aumentar a performance. Sites que utilizam o Gzip podem ser at 80% mais rpidos. Como configuramos nossos servidores para utilizar o Gzip? Muito simples, basta informarmos ao .htaccess que queremos utiliz-lo. Exemplo:
<IfModulemod_filter.c> AddOutputFilterByType DEFLATE application/atom+xml \ application/javascript \ application/json \ application/rss+xml \ application/vnd.ms-fontobject \ application/x-font-ttf \ application/xhtml+xml \ application/xml \ font/opentype \ image/svg+xml \ image/x-icon \ text/CSS \ text/html \ text/plain \ text/x-component \ text/xml </IfModule>
ETags
A Etag um mecanismo para identificao 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 no; O problema das Etags que elas so geradas para um nico servidor, sendo invivel valid-la em outro servidor; A melhor soluo ento cancelar o uso da Etag; dessa forma, o browser no ir verificar o componente. Isso traz uma performance significativa para o website.
# FileETag None is not enough for every server. <IfModulemod_headers.c> Header unset ETag </IfModule> # Since were sending far-future expires, we dont need ETags for static content. FileETag None
Invalide o cache
Invalidar o cache tambm uma tima estratgia para alterao de contedo; Podemos utilizar uma estratgia 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.
Configurando o cache
Muitas vezes, pensamos que o browser do cliente ir fazer o cache automtico de nossa aplicao, mas precisamos inform-lo de como fazer o cache da maneira correta. Para isso, utilizamos os recursos do response headers.
Defina o tempo de cache para cada tipo de arquivo

O famoso Expires dos servidores uma das melhores solues para controle de cache;
Utilizamos diversos tempos diferentes para cada tipo de arquivo, por exemplo, arquivos como imagem podem ter um cache menor que um javascript.
<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>
Exemplo: um website com nove js sendo carregados no mesmo servidor ir carregar trs deles paralelamente, depois mais trs, e mais trs. J com o CDN com trs subdomnios, ele poder carregar os nove em paralelo.
Minificar e unificar js e CSS

Essa estratgia considerada uma das melhores para obtermos uma boa performance. O problema que a maioria dos desenvolvedores no a utiliza. Vamos entender como funciona:
Reduzindo as requisies
Reduzir a quantidade de requisies que a aplicao faz para nossos servidores uma tima soluo para otimizarmos o carregamento da pgina, mas precisamos entender como fazer isso. Um browser pode carregar at trs arquivos em paralelo para cada servidor; Deixe os arquivos estticos em servidores CDN com subdomnios; dessa forma, o browser poder carregar trs arquivos para cada subdomnio em paralelo;
Ferramentas para comprimir arquivos

YUI Compressor- Ferramenta do Yahoo! que promete ser a mais segura e eficiente de todas; Packer- Comprime JS pela web; JSCompress.com- Usa JSMin ou Packer para reduzir o tamanho dos arquivos; CSS Compressor- Comprime arquivos CSS; Easy YUI compressor - Verso visual do YUI compressor.
No coloque imagens maiores do que o necessrio; Comprima as imagens; Use os formatos corretos para cada ocasio; Defina o tamanho e a largura da imagem no HTML; Use Sprites onde possvel.
CSS Sprite
Sprite uma imagem que contm outras imagens dentro dela, e ns podemos peg-las atravs do CSS e manipul-las de diversas formas. Com Sprites, diminuem-se significativamente as requisies para o servidor, e as imagens so manipuladas pelo CSS atravs da posio no arquivo. Veja algumas ferramentas para compresso de imagens e criao de sprites: Caesium - Promete comprimir imagens em at 90%; Smush.it - Compressor de imagens do Yahoo!; Data URISprites- Gerador de sprites baseado na web; Spritr- Gera cdigo CSS para sprites; SmartSprites- Gerador de sprites para desktop.
Ferramentas para unificar arquivos

Normalmente, essas ferramentas so executadas em tempo de execuo, comprimem e unificam os arquivos, e logo em seguida armazenam os arquivos gerados em cache. Minify- Ferramenta em PHP que utiliza a biblioteca YUI compressor; Zend_Minify - API do Zend Framework para YUI compressor; Easy Minify - API do Easy Framework paraYUI compressor; YUI compressor for .net. - Biblioteca para .NET; Ant - Biblioteca para Java.
Otimizao de imagens
As imagens so os maiores responsveis pela baixa performance de websites e aplicaes. Felizmente, existem formas de contornar esse problema:
Boas prticas
Organizao do HTML
Arquivos CSS no topo do documento
Isso ir evitar que pginas sejam carregadas sem o seu estilo, evitando problemas de flickering nas pginas; Arquivos js no final do arquivo O carregamento de javascript algo bloqueante, ento, se ns o colocarmos no inicio da pgina, nosso cliente ficar esperando o carregamento do js, levando mais tempo para a execuo; Deixe os arquivos de mesmo tipo prximos Uma forma de otimizar o carregamento entender como o interpretador do browser funciona; no caso de arquivos do mesmo tipo prximos um do outro, ser mais rpido do que intercal-los; Crie arquivos CSS e js externos; Evite duplicao de scripts; Quebre os componentes em vrios subdominios; Diminiua o uso de iFrames iFrames exigem novas requisies com sub-requisies, deixando a pgina consideravelmente lenta; Mantenha seus componentes abaixo de 25 KB.
Evite expresses 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 organizao. Atravs do carregamento modular, podemos carregar apenas os arquivos, as funes ou as classes especficas que iremos usar. Para isso, podemos utilizar o Require JS. Vantagens: Carregamento otimizado - no precisamos carregar tudo; Podemos carregar apenas uma funo ou classe; Integrado com NodeJs; Jquery incorporado; UglifyJS para comprimir e unificar todos os js requeridos. O Require JS trabalha de forma simples, apenas uma funo 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(); }); });
Otimizao 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, no.
HTML5 boilerplate
O HTML5 boilerplate um conjunto de boas prticas para voc iniciar o seu projeto otimizado em HTML5. Com ele, voc tem um arquivo .htaccess totalmente configurado para trabalhar da melhor maneira possvel. Alm disso, contamos com: Suporte cross-browser; Compatibilidade com browsers legados; Estrutura padro de um documento HTML5 otimizado; Estrutura padro para criao de plug-ins js; Estutura padro para CSS cross-browser.
Page Speed Verifica se sua aplicao segue as diretrizes de um site otimizado.
Concluso
Essas so algumas das estratgias utilizadas para otimizarmos nossas aplicaes, e todas esto disponveis com mais detalhes no Yahoo! Developers (developer.yahoo. com/performance/rules.html). </>
Ferramentas de diagnstico
Com as ferramentas de diagnstico, podemos saber como est o fluxo de nossas aplicaes, alm de sabermos exatamente quais arquivos ou recursos esto deixando o site lento. Aqui vai uma lista dos mais populares: ChromeDeveloperTools- Para fazer debug do js, anlise de recursos e elementos; WebPagetest - Executa diversas validaes e testes de performance, alm de falar o que seria ideal fazer para resolver os problemas; Firebug Para debugao do js, anlise de recursos e elementos; GzipTest Verifica se determinado domnio usa compresso GZIP; HTTPAnalysisTools Diversas ferramentas de anlise, como compresso, 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 perodo de Anlise de Desenvolvimento de Sistemas e possui uma agncia de desenvolvimento web chamada Lellys Informtica, onde trabalha com PHP, HTML5, CSS3 e jQuery.
50 > 7Masters
7Masters Acessibilidade
Acessibilidade Como Compliance Clcio 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 produo e principalmente planejado na etapa de Arquitetura de Informao, o custo mnimo. Sempre tentei explicar que acessibilidade aumenta o pblico potencial do site em at 25%, que melhora a semntica e o SEO pois temos que explicar pra mquina, no caso o leitor de tela, o que cada objeto quer dizer e qual sua funo. Que melhora a usabilidade para todos. Que todos somos usurios com limitaes potenciais quando, por exemplo, camos de mau jeito no futebol e chegamos para trabalhar na segunda-feira com o brao engessado. Tentava explicar que em uma tela pequena todos tm dificuldade para tocar e enxergar. Nada disso derretia o corao frio do cara da criao. Cheguei a ouvir que se dane o ceguinho. At que, num almoo com Horcio Soa-
res, o papa da acessibilidade web no Brasil, conversamos sobre suas frustraes: S somos chamados quando a ministrio pblico j bateu na porta das empresas. Neste momento fez-se a luz. Horcio, existe lei que obrigue acessibilidade? E ele me mostrou todas elas. E ento acessibilidade web deixou de ser caridade, assistncia social. Neste momento passou a ser compliance. Segundo a wikipedia, compliance o conjunto de disciplinas para fazer cumprir as normas legais e regulamentares, a poltica e a diretriz estabelecida para o negcio e para as atividades da instituio ou empresa, bem como evitar, detectar e tratar qualquer desvio ou inconformidade que possa ocorrer. Ou seja, no acessvel, est fora da lei. Sendo assim, agora no batemos mais no marketing ou na TI, batemos no jurdico. Acessibilidade web lei. D multa pesada. O ministrio pblico est preparado. E no importa quantos usurios h com dificuldades de acesso ao site: acessibilidade para todos. Um ou um milho. Quer saber mais? Acesse o vdeo 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, apresentaes rpidas e de contedo inovador, dentro do tema definido. O 7Masters foi lanado no incio 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 apresentaes que j passaram no 7Masters. Voc pode ver todos os vdeos em setemasters.imasters.com.br
7Masters Java
Clojure Plnio Balduino Clojure um dialeto LISP que gera cdigo binrio 100% compatvel com Java. Na prtica, isso significa que voc pode ter todas as vantagens de uma linguagem funcional, alm de aproveitar todas as bibliotecas Java que sua empresa j utiliza, sem ter que mudar a estrutura e os servidores que j esto consolidados hoje. possvel tambm utilizar bibliotecas feitas em Clojure dentro de sua aplicao Java, como o caso do Expectations, ferramenta de testes criada pelo Jay Fields. Caso voc queira iniciar um projeto do zero, voc tambm pode usar o Immutant, que um servidor de aplicaes para Clojure feito nos moldes do JBoss AS. 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. Neste talk, apresento algumas empresas conhecidas que esto utilizando Clojure e demonstra os ganhos obtidos em facilidade de manuten-
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 comunicao entre os 200 dispositivos mveis espalhados pelo pas e o banco de dados. Esse servidor cresceu alm do planejado, conforme foram incorporados outros projetos, e a classe responsvel pela distribuio dos servios passou de 1.200 linhas de cdigo, o que se tornou um fardo para dar manuteno. Sem contar o fato de que, apesar de ter uma boa cobertura de testes funcionais e de integrao, praticamente no existem testes unitrios para a aplicao. Em pouco tempo a equipe aprendeu o suficiente de Clojure para que fosse possvel iniciar a migrao. Se na verso Java havia 400 linhas apenas para subir a aplicao, na verso Clojure passou-se a ter 800 linhas para a aplicao inteira. Cada servio passou a ser uma funo pequena, simples e testvel, e o cdigo em alguns pontos ficou at mais legvel do que a verso original. Gostou da ideia? Veja a apresentao completa, em vdeo, no site do 7Masters: http://ow.ly/hyhCt
52 > Encontros > 7Masters
7Masters WordPress
WordPress + Varnish = Desempenho Hugo Cisneiros Diferentemente de servir itens estticos, os sistemas dinmicos usam bastante memria e processamento para montar pginas, e isso sempre foi um problema. Com o WordPress no diferente: cada usurio que acessa o site gasta recursos preciosos do servidor, via PHP. O Varnish um software de cdigo aberto que serve como uma camada intermediria entre o usurio e o servidor Web. Ele funciona fazendo cache do contedo dinmico gerado pelo WordPress transformando-o em uma pgina esttica em memria, e ento mandando para o usurio. Nessa camada de cache, a maioria das requisies so servidas diretamente dela, e por isso o site no perde desempenho ao ter quantidades grandes de requisies ao mesmo tempo. Por exemplo, se eu configuro o Varnish para fazer cache por 30 segundos de uma pgina com 500 acessos por segundo, o WordPress s vai gerar a pgina apenas uma vez a cada 30 segundos, servindo um total de 15 mil requisies de clientes com apenas uma operao dinmica do WordPress. Em um teste simples em uma mesma mquina desktop comum, acessando localmente com 50 usurios simultneos na pgina principal padro do WordPress nos mostra ganos de desempenho assustadores. Sem Varnish, foram servidas 932 pginas em 217 segundos (4,29 requisies por segundo). Com Varnish o nmero subiu para 10 mil pginas em 1.6 segundos (6242,42) requisies por segundo. Aplicando um cache de vrios minutos em um WordPress o faria trabalhar muito pouco, mas suas pginas iriam ficar desatualizadas durante esses minutos. A soluo seria programar o WordPress para conversar com o Varnish e retirar do cache as pginas que forem atualizadas.
Por exemplo, se um artigo novo foi publicado, na prxima requisio o Varnish buscaria a pgina principal novamente com os artigos mais atuais. Isto pode ser feito atravs de aes do WordPress (hooks), que ento se conectam ao Varnish via TCP e mandam certos comandos - BAN e PURGE - que invalidam itens de cache baseados em uma URL. Duas referncias para se fazer isso so: o plugin wp-varnish e a documentao de API Hooks do WordPress. Mesmo assim, existem algumas funcionalidades que complicam o cache de todo um site: cookies, autenticao, query strings aleatrias e dados sempre dinmicos. Nestes casos no h uma regra fcil para se usar, pois cada usurio tem que receber respostas diferentes. Nestes casos, importante construir uma configurao mais cuidadosa e utilizar tcnicas como ESI, que gera apenas pedaos da pgina dinamicamente. Veja o vdeo da apresentao: http://ow.ly/hyhHk
7Masters .NET
Cubo de LEDs com Netduino Marcio Paulo Mello Martins Netduino uma criao da empresa americana Secret Labs, que consiste em um microcontrolador com uma interface MicroUSB, 6 entradas analgicas para a conexo de sensores e outros tipos de componentes, e 14 sadas digitais para envio de sinal a componentes e circuitos digitais. O Netduino utiliza o .NET Microframework como plataforma para a execuo de cdigos escritos em linguagens comuns do .NET, o que o torna muito atrativo para desenvolvedores habituados ao .NET Framework. O que o .NET Microframework? uma verso muito reduzida do .NET Framework, com apenas aproximadamente 300 KB de tamanho. Foi criado para instalao em dispositivos embar-
cados e pode rodar sem sistema operacional. O Projeto Open Source, e est disponvel em http://netmf.codeplex.com. Cubo de LEDs Um cubo de LEDs um circuito digital com propsito decorativo, onde uma estrutura em forma de cubo montada com LEDs acionada por um microcontrolador, no nosso caso, o Netduino. Atravs de cdigo 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 sequncia, temos a sensao de uma animao tridimensional no cubo. Concluso 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 eletrnica digital. Mesmo quem j tem bastante experincia com circuitos digitais pode usar o Netduino para controlar as funes de processamento de sistemas eletrnicos, 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
perder a qualidade de imagem. Isso bem simples de resolver: as imagens retina possuem o dobro do tamanho das imagens normais de sua aplicao, ento se voc tem uma imagem 100x100px, a imagem para tela retina deve ter 200x200px. Para adicion-las em sua aplicao, basta nome-las com a notao @2x para imagens retina. Ento ficaria assim: a imagem no 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 aplicaco pronta para rodar tanto no iPad quanto no iPhone. Para diferenciar as imagens de acordo com o aparelho devemos colocar uma notao ~iPad e ~iPhone nas imagens, assim elas sero 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 verso 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 cdigo preciso indicar apenas o nome da imagem, sem a indicao se ela retina ou para qual device ela foi feita. Deve ficar assim: [UIImage imageNamed:@minha_imagem] Com o lanamento do iPhone 5, temos uma tela de 4 polegadas, com resoluo de 640x1136. Porm, isso no 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 resoluo a mesma do iPad normal, 768x1024, ento no h alteraes na maneira de carregar suas imagens nesse device. No deixe de conferir o vdeo http://ow.ly/hyj50
7Masters Mobile
[iOS] Contornando as resolues dos devices de maneira simples Fernando Bass Hoje para trabalhar com iOS, temos que nos preocupar com as resolues de telas dos aparelhos temos basicamente 4 resolues de telas para iPhone e iPad. Para trabalhar com os diferentes tipos de resolues e deixar nossos aplicativos com uma boa aparncia, temos que preparar os cones e as imagens que so exibidos para que possam atender a resoluo sem
54 > Encontros > 7Masters
7Masters Acessibilidade
Usurios idoso na Web Reinaldo Ferraz Quando falamos em acessibilidade na Web, normalmente a primeira coisa que nos vem a mente : acesso de pessoas com deficincia na Web. Porm se considerarmos que daqui 20 ou 30 anos ns mesmos poderemos ter dificuldade para enxergar devido a problemas de viso como miopia, catarata e glaucoma ou mesmo ter problemas em escutar e se locomover, esse cenrio passa a fazer parte da nossa vida. Segundo dados da ONU, em 2040 o nmero de pessoas com mais de 65 anos representar mais de 14% da populao mundial. Porm, o nmero 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 estatstica e a Web dever ser acessvel para mim tambm. Mas ser que adotamos diretrizes de acessibilidade considerando ns mesmos no futuro? Temos que tomar muito cuidado porque se no cuidarmos das pginas desenvolvidas hoje, poderemos no futuro ser vtimas de pginas cheias de barreiras e inacessveis construdas por ns mesmos. Por isso as diretrizes para acessibilidade, as WCAG (Web Content Accessibility Guidelines), so de extrema importncia. Algumas delas beneficiam muito o acesso de pessoas idosas na Web, como por exemplo: Possibilitar que o usurio possa aumentar o tamanho da fonte do seu site Utilizar unidades relativas (e no absolutas) dentro do CSS No utilizar somente a cor para trans mitir informaes Tornar todo o contedo acessvel via teclado
Tornar o foco dos elementos (formulrios e links) sempre visveis. Quando trabalhamos a acessibilidade na Web estamos considerando o acesso no s de pessoas com deficincia, mas promovendo que a Web seja efetivamente um ambiente inclusivo para todas as pessoas. Veja a apresentao aqui http://ow.ly/hyjUp
7Masters UX
Design Emocional e a Experincia Digital Edu Agni Quero trazer para o centro da discusso 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 discusses sobre UX a questes como usabilidade e arquitetura de informao, em detrimento de outros elementos que compem a experincia do usurio. O Design Emocional prope uma maneira diferente de enxergar a experincia com os produtos, considerando que o mundo do consumidor no regido por tanta razo, mas sim influenciado por desejos subconscientes, exploraes sensoriais, estmulos, instintos e outras aspiraes emocionais. Dessa forma, o impacto visceral causado pela forma e o valor simblico agregado as relaes sociais ganham maior relevncia do que a simples facilidade de uso. Nesta apresentao, procuro utilizar a trade da experincia digital (projetar para pessoas, compartilhar boas histrias e estimular os sentidos) para traar um paralelo entre as trs questes de uma avaliao rpida de UX ( usabilidade, utilidade e desejo) e os trs nveis de design propostos por Donald Norman (visceral, comportamental e reflexivo). Veja os slides da palestra: http://ow.ly/hPA5k </>
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, comear a codificar, muitos webdesigners at entendem o fluxo, mas simplesmente nunca o praticam. Depois de algumas observaes, percebi os motivos bvios: Pessoas metdicas: eu sou uma pessoa metdica e sei como isso . Pessoas metdicas (dependendo do grau) at conseguem sair da caixa, mas no gostam, nem se sentem vontade; por isso, preferem esperar o design completo para ento comear o seu trabalho. Desorganizao: pessoas desorganizadas com o seu CSS no conseguem pensar em como estrutur-lo, de forma que depois tenham que mexer novamente e o adaptarem a qualquer mudana. Assim sendo, precisam do layout finalizado para minimizar a chance de refazer a implementao de algo. Preguia: o pior aliado de um desenvolvedor qualquer profisso a preguia. A ideia de
deixar tudo at os 47 do segundo tempo um cncer que cada vez mais corri 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 comear a trabalhar. Com um pouco mais de viso, ele aprontaria o que desse antes e, enquanto o designer estivesse preparando o layout final, o desenvolvedor poderia pensar em formas de melhorar o cdigo, experimentar algo novo, propor uma funcionalidade diferente para a equipe etc.
Surpresa!
O mais interessante disso tudo que esse no o principal motivo para o no desenvolvimento estrutural do HTML e do CSS. O principal motivo que, quase em sua totalidade, o design da interface s pensado ou levado a srio no momento em que o designer faz o layout final. Muito se fala sobre wireframes, softwares,
artigos, blogs e livros sobre AI, mas, na prtica, o mercado em sua maioria (me refiro mais a agncias web) ainda continua com o seu fluxo medroso e antigo. Modelo tradicional: bem simples, cada etapa finalizada d origem ao comeo da etapa seguinte. O processo demorado, e um profissional depende do trmino do outro. Modelo avanado: o modelo necessita de uma documentao bastante definida no prottipo para que a etapa de codificao possa ser iniciada. Mais de um profissional pode atuar ao mesmo tempo no projeto. Com a interao e a arquitetura definidas, ainda pode ser iniciada uma terceira etapa simultnea, que a do desenvolvimento do sistema, ou programao. 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 nmero de designers para atender esse fluxo, ele seria excelente, porm no a realidade da maioria das empresas de desenvolvimento web, muitas vezes prejudicando o trabalho do design ou o sobrecarregando. Crtica pessoal: pelos livros que eu li, cursos e treinamentos em Scrum de que participei pela Petrobras, alm da prtica, 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 importncia para o produto e empresa.
da totalmente confiante disso, vale a pena ler estes artigos de grandes nomes da web: Robson Santos - A necessidade do design centrado no usurio (http://bit.ly/10Qp8N1). Amy Hillman - Pioneering a User Experience (UX) Process (http://bit.ly/10Qp2Vx). Frederick Van Amstel - Design centrado no usurio da web (http://bit.ly/ABKTy). O problema disso tudo a grande difuso desse conceito em que o designer se concentra apenas no usurio e esquece que algum ter que transformar isso em algo usvel. De que adianta fazer um produto magnfico para o usurio se devido a ele a empresa ter que comprar uma mquina, do Japo, por US$ 2 milhes, que no cabe na rea atual da fbrica, 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 tcnica preparar o PSD de forma profissional, seguindo algumas regras, como: Dar nomes intuitivos s layers; Organizar conceitualmente as layers em pastas; Colorir conceitualmente pastas tambm interessante; Dar flattern nas layers em que foram utilizados efeitos em mscaras; 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 no precisa pegar cone por cone e ir cortando; Padronizar o espaamento - isso no s bom para o conforto da tela e aproximao de objetos baseados em Gestalt, como tambm facilita a medio para o CSS;
O outro lado da moeda, o design centrado no desenvolvedor

Quando buscamos informaes sobre design, achamos muitas informaes sobre design centrado no usurio. Caso voc no esteja ain-
58 > Artigo > User Experience
Se utilizar fontes que no so do sistema, envi-las junto com o zip; Criar uma pasta ou outro PSD com o hover (interaes); isso ajuda muito na hora de o usurio criar o CSS e at mesmo influencia no HTML (dependendo do caso); Caso tenha um background grande bem trabalhado ou que se repita, envie-o junto com o zip; Criar um pdf ou qualquer outro tipo de documento, informando as cores usadas (hexadecimal), fontes usadas nos elementos h1, h2, h3, hn, p, li etc., espaamentos padronizados, largura de colunas. Existem outras dicas na apresentao que fiz junto com o Victor Montalvo, no 15 EDTED, com o ttulo Oficina de Planeja mento de corte, o seu layout virando cdigo ( http://slidesha.re/aGIjLq )
Com uma interface definida, voc consegue captar a semntica de cada item, alm de estruturar da melhor forma o seu HTML para que seja flexvel e limpo ao mesmo tempo, com classes genricas e reaproveitveis. O programador, por sua vez, j saber os campos que sero utilizados e preenchidos pelo cliente. Tudo bem mais gil e econmico no?
Na prtica
Entendemos que a baixa fidelidade a melhor forma de comear o seu wireframe, pois nela que voc vai trabalhar e contrapor suas ideias. Porm, acredito que aps isso, ainda antes do layout, voc pode tratar esse wireframe de forma detalhada, e este, ento, 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 simultneo 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.
Concluso
evidente que no 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 > Conexo Vale do Silcio
O Vale do Silcio um estado mental

Por <Vinicius Depizzol>
Steve Blank, um empreendedor que aterrissou no sul da baa de So Francisco no final dos anos 70 durante o boom das empresas dali, disse certa vez talvez a melhor definio do vale que ele viu crescer. O Vale do Silcio mais um estado mental do que uma localizao fsica. No h fronteiras nem placas que apontem para onde ele comea ou termina. um embaado de cidades, que do alto se parecem com qualquer outro subrbio americano, e no existem grandes monumentos nem visitas guiadas pelas empresas que o tornaram famoso. Se voc der um close-up, no entanto, vai provavelmente comear a notar algumas poucas diferenas. Jaquetas e crachs 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 inscries GBUS TO MTV o Google Bus, que carrega seus funcionrios l para Mountain View. Mas no so esses detalhes que fazem do vale o que ele de fato . E nem os outdoors da Mozilla que do as boas-vindas no aeroporto. O que define o Vale do Silcio so as pessoas e as suas interaes ali. Com muita gente altamente capacitada, com uma mentalidade aberta, trabalhando num ritmo maluco e decidida a mudar o mundo, fcil imaginar quo importantes so as interaes pessoais e profissionais. Tambm, pudera. Elas fazem com que ideias surjam, projetos sejam lanados no prazo e, principalmente,
permitem que todo o tempo seja, na verdade, um grande aprendizado. Mas isso no , nem de longe, exclusividade do Vale do Silcio, se considerarmos que quase 80% dos investimentos americanos em start-ups de 2011 no foram para a Califrnia (veja aqui http://bit.ly/y6YJEW). E que Londres tem o seu SiliconRoundabout, Berlim j chamada de Vale do Silcio europeu, e Nova Iorque conta com sua SiliconAlley. No Brasil mesmo existe uma disputa para ver quem fica com o ttulo de Vale do Silcio brasileiro - com Recife, Rio, So Paulo, Porto Alegre, Florianpolis e So Jos dos Campos na lista. A verdade que o nome mesmo no importa. O Vale do Silcio, como um estado mental, no depende de rtulos, e no acontece s nesse canto ensolarado da Califrnia. Gente inteligente e boas ideias existem em todos os lugares: no preciso estar no Vale do Silcio 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 Vitria/ES para So /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, tendncias e previses 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 previses de SEO para 2013. Pensar no que aconteceu no ltimo ano e se planejar para o futuro prximo ou re-planejar, se for o caso. Apresento, aqui, um misto de previses, dicas e uma recapitulao do que j aprendemos at aqui.
uma keyword de head tail encontra resultados locais sem trabalhar com a long tail. Isso traz mudanas de comportamento dos pequenos sites e tambm dos grandes no mercado digital. Os sites maiores devem estar preparados para uma significativa perda de trfego; para que eles continuem bem posicionados tambm nas buscas locais, devem efetuar algumas alteraes. E os sites menores, que competiam no mercado com sites muito grandes, tm a oportunidade de utilizar a geolocalizao para obter vantagem, atingindo os consumidores locais.
Otimizar site para funcionar em plataformas mveis

O crescimento de sites em mobile algo inevitvel e no 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 acessveis e mais dinmicos para o usurio ser fundamental para a manuteno no mercado. Alm 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.
Desenvolver contedo multimdia

inquestionvel a importncia do contedo em SEO. Contudo, haver uma mudana a respeito de qual contedo o ideal para que o seu site esteja bem posicionado em 2013. At ento, havia a preocupao em utilizar muitos textos com repetio de palavras-chave em negritvo e imagens otimizadas. Tal conceito muda, dando espao ao contedo multimdia. Imagens que sejam fundamentais para o entendimento do contedo, slides, podcast e, sobretudo, vdeos, pela grande facilidade de produo com que vm se desenvolvendo, devero ser utilizados para enriquecer o contedo do site. Algo que tambm vale ser ressaltado a o
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 informaes geograficamente especficas. Dessa forma, h resultados cada vez mais geolocalizados, ento a pesquisa usando
HTML5, que est em constante avano e tem sido cada vez mais utilizado, devido preferncia dos usurios por explorar contedo mais dinmico e interessante, que pode aproveitar diversos recursos do HTML5. A juno das possibilidades do HTML5 permite a explorao do contedo multimdia e possibilita experincias de navegao inovadoras. Com essas dicas, seu site ficar facilmente indexvel pelos buscadores. E ateno: quem no se adaptar s novas tendncias de contedo e navegao est fadado a perder visitas.
Falando do site como um todo, h uma tendncia desde o final de 2011, mas que ganhar fora agora em 2013, da interpretao do campo semntico para o Google avaliar a relevncia do site. J no basta ter uma nica pgina sobre o contedo 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 relevncia de link building. No que tais links deixem de ser importantes, mas o Google est analisando o conjunto de contedo das pginas do site. E pelo conjunto de contedo que voc far com que o Google atribua autoridade sobre um assunto ao seu site. Um critrio de posicionamento ser a autoridade sobre um assunto, a disponibilizao de um acervo informativo sobre um tema ao usurio. Se voc tem um site pequeno, foque em um nicho e em desenvolver contedo de head tails, mas tambm em contedo amplo de long tail. Dessa forma, voc ter autoridade pelo contedo, no s pelo Para sites grandes, uma possibilidade para alavancar o po-
Ateno a arquitetura da informao, campo semntico e schema.org

A arquitetura da informao em um site requer ateno especial, o que no tem acontecido em muitos sites no Brasil. Para que o site se fortalea, necessrio mant-lo atualizado, dinmico e bem organizado; para isso, importante priorizar a AI.
62 > Artigo > Mtricas
sicionamento nos sites de busca optar por, em vez de escrever um artigo somente sobre um determinado assunto, criar hotsites dentro do seu prprio site. Isso porque o Google est dando mais importncia aos diretrios individualmente, em relao ao todo do site, determinando assim que um site pode ser especialista em determinado tema, apesar de o site no ser muito bom como um todo. A arquitetura da informao e o domnio de campo semntico esto intimamente relacionados, e a sua boa utilizao ajudar muito no estabelecimento de uma boa posio nos rankings em 2013. Na parte semntica do cdigo 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 implementao, que tornar o seu site adiantado no cenrio brasileiro, aumentar os acessos e o posicionar melhor nos rankings. Nesse contexto, trabalhar com schema.org, Google+ e Google Places se torna importante em funo dos resultados locais.
Faa link building

O link building vem perdendo fora nos ltimos anos, mas isso no quer dizer que ele v parar de existir. J havia uma tendncia do Google em valorizar mais o autor e o campo semntico do site. A quantidade de link building perde importncia e se torna cada vez mais importante a qualidade de cada link recebido, porque no so todos os site que conseguem estabelecer links relevantes. Sendo assim, com a combinao de um bom e relevante link building, a dominao de um campo semntico, desenvolvimento de contedo multimdia, a disponibilizao de um site mobile, uma boa arquitetura da informao, a otimizao de pginas no schema.org e, se for o caso, a otimizao local, seu ranking estar garantido em 2013. E que 2013 seja um grande ano para todos ns! </>
D tag nos seus autores com o Rel=author

No Brasil, no h ainda muita preocupao de vincular a autoria de um artigo a um perfil no Google+, todavia, essa prtica tende a se estabelecer e a provocar uma grande revoluo. 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 valorizao dos autores, j que pessoas que produzem bons contedos sero mais cobiadas pelos sites, porque os contedos 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 formao autodidata, no gosta de burocracia, adora criar estratgias de marketing de converses 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 Leo>
O mais legal de a plataforma Arduino ser open-source (e open-hardware tambm) que muitos desenvolvedores podem contribuir com a plataforma, criando tutoriais, desenvolvendo prottipos e at mesmo criando programas que a complementem. Alex Porto, desenvolvedor brasileiro, lanou uma IDE (ambiente de desenvolvimento integrado) mais completa que a padro, com possibilidade de mltiplos projetos, com ajustes nas opes de compilao e conexo com vrias portas seriais simultaneamente.
Instalao
O processo de instalao bem simples, e voc precisa apenas indicar qual o caminho do arquivo arduino.exe. Depois de instalado, necessrio criar um workspace, no qual seus projetos sero inseridos ( simplesmente uma pasta no seu disco).
Utilizao
Ao criar um projeto, voc tem 3 opes: Criar um firmware do zero (mas ele j inicia com o exemplo blink do Arduino);
Importar um dos exemplos do Arduino (mas ele no considera os exemplos das bibliotecas, apenas carrega a pasta examples da instalao do Arduino); Importar de um projeto j existente feito na IDE do Arduino. Qualquer que seja a opo, ele vai montar uma estrutura de pastas (o fonte e o build), alm do arquivo que contm as configuraes 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 no fez importao automtica da biblioteca. Isso significa que, se voc j possui um projeto utilizando algumas bibliotecas, ser necessrio refazer a importao das bibliotecas individualmente.
precisa ativar o projeto primeiro para executar esses comandos.
Concluso
Prs
Mltiplas portas seriais (isso ajuda inclusive na hora de testar/debugar alguma funo do seu programa); Ambiente de desenvolvimento profissional. Para cada projeto, voc pode definir um modelo de Arduino especfico (isso timo se considerar que voc vai prototipar sempre com a mesma estrutura); Voc pode ter mais de uma pasta de bibliotecas e no obrigado a criar a estrutura Arduino/libraries na pasta de documentos. Para isso, basta inserir a lista de pastas separadas por ; nas preferncias do aplicativo.
Ainda no 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 estvel. Para os usurios que so escovadores de bits e que querem melhorar questes de desempenho de firmware, ela a alternativa para personalizar os parmetros de compilao do seu projeto. Quando o aplicativo estiver mais estvel e em mais de uma plataforma, com certeza quero usar! Ento, 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. </>
Contras
No 100% independente da IDE do Arduino (existem algumas dependncias de compilador e bibliotecas, e voc precisa informar o caminho do executvel); Poderia ter uma forma de fechar facilmente os arquivos abertos (hoje voc precisa usar o mouse para fazer isso); Faltam comandos de build, gravao e abertura da porta serial em cada projeto utilizando o boto auxiliar do mouse. Voc
Luis Leo 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 so pautadas, normalmente, por dois filtros: o primeiro deles o filtro legal, ou seja, o universo das leis que regem um pas e que definem o que lcito ou ilcito dentro de determinado contexto social. O outro diz respeito aos valores ticos e morais que cada indivduo recebe, desde o bero. Tais valores, apesar de no estarem formalizados em forma de lei, so muito representativos de tudo aquilo que se faz a si mesmo e ao outro (sendo que, aqui, o outro a representao da prpria sociedade), norteiam condutas e garantem uma sociedade mais ou menos digna, de acordo com a forma como se encara o respeito ao prximo.
O que aconteceria se tais valorem no fossem vigentes? Qual seria a conduta humana sem os filtros comportamentais, sem a noo de responsabilidade? O que cada um faria, caso no prestasse contas (na esfera legal ou da conscincia 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 anrquica, lutam por uma sociedade assim, pois acham que o homem no precisa de mecanismos de controle. Segundo essa corrente, cada um de ns saberia, por natureza, respeitar o espao do outro, sem a necessidade de um estado que repreenda ou de correntes morais que castrem. Ser que to simples assim? na vida digital temos um exemplo do que acontece ao homem que conta com a total liberdade, sem dispositivos de repreenso: a deep web. Trata-se de uma parte (consideravelmente grande) da Internet que, simplesmente, no existe para os mecanismos de busca por um simples motivo: em sua concepo, as pginas receberam a tag <meta name=robots content=noindex,nofollow>, que tem dupla funo: faz com que os robs dos mecanismos de busca no visualizem determinadas pginas (algo til, por exemplo, quando o site est recebendo ajustes e ainda no est pronto para ser visualizado por todos) e tambm impede que os mesmos robs sigam os links desses sites. Eis a receita do anonimato. Assim, curiosamente, os contedos s ficam acessveis para quem tiver os links diretos, o que acontecer somente se o dono do site resolver divulgar seus links em locais especficos da web.
A deep web
Se na vida real ainda no foi possvel constatar se tal teoria funcionaria de fato,
Garantia de anonimato para quem navega

Quando navegamos na Internet, deixamos rastros por todos os lados: cookies, histricos pblicos, histricos no servidor/ provedor de servios e outros mais especficos. Assim, na superfcie - na navegao tradicional - o anonimato uma iluso, pois bastam alguns conhecimentos bsicos para rastrear a navegao de quem quer que seja. A Polcia Federal j utiliza recursos de rastreamento e consegue pegar no pulo alguns pedfilos desavisados. Uma pgina ser protegida da indexao dos mecanismos de busca no garante o anonimato de quem navega. Para que o usurio fique totalmente annimo, existe um browser especfico, 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 navegaes pela deep web. Por incrvel que parea, simples assim: basta usar o antivrus no talo, uma mquina virtual que permita simular outro computador dentro de seu sistema principal, garantindo mais segurana para os seus dados, o Tor, e pronto: s mergulhar no pntano lamacento da deep web.
senhas de usurios incautos (de servios populares como o Facebook) at links para grupos de estupradores, pedfilos, canibais e usurios de drogas. Tudo de forma natural e convivendo, harmoniosamente (se que tal termo cabe aqui), com os demais contedos. Todos os acessos da deep web passam por aqui, uma espcie 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 anncios de assassinos oferecendo seus servios e de gente que se oferece para ser violentada. E quanto mais se explora, mais bizarro .
Infogrfico: mergulhando na deep web
O que encontro na deep web?

O caminho comum, depois de instalar a mquina virtual, colocar o antivrus no modo paranico e instalar o Tor, acessar a Hidden Wiki, espcie de Wikipedia do caos: desde os previsveis documentos secretos dos governos, tutoriais de invaso de sistemas dos mais variados tipos,
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 visvel da web, j que normalmente indexado pelos mecanismos de busca. No por acaso, Julian Assange est com priso decretada em diversos pases e corre risco de ser preso (ou assassinado) a qualquer momento.
filosficas e polticas. A outra forma a utilizao do mesmo atributo descrito aqui, que torna as pginas ocultas aos olhos dos mecanismos de busca. Tanto uma forma como a outra fazem a alegria de sites como o Wikileaks, que, no nvel subterrneo da deep web, torna esses documentos pblicos, para a web que se v na superfcie. 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 esto habituados a navegar em total anonimato. Hackers so, normalmente, movidos por questes polticas e conceituais, utilizando seus conhecimentos para derrubar governos, desmoralizar empresas de conduta desleal (dentro dos princpios hackers) ou simplesmente para se divertirem, testando habilidades e conhecimentos profundos de Internet e segurana em rede. Muito do combustvel que alimenta sites como Wikileaks oferecido graas ao trabalho habilidoso e dedicado dos hackers que, diferentemente dos crackers, no fazem por dinheiro, mas sim por amor a determinadas causas (e o fim das grandes corporaes online e de governos corruptos so causas caras para tal grupo).
2. Google
O Google o principal canal de pesquisas de qualquer assunto na Internet. Na verdade, h quem dispense a barra de endereos do navegador e digite qualquer endereo de web somente pelo mecanismo de busca. Muito do sucesso do Google se deve mudana de paradigma de estabelecer a relevncia de determinado site: o PageRank um algoritmo de busca que define a relevncia no s pela densidade de palavras-chave existentes, mas, sobretudo, pelo nmero de links que apontam para determinado site. Quanto mais links, maior a importncia. Por isso, sites da deep web no aparecem, pois so ocultos aos olhos do gigante das buscas.
3. Governos
Os governos compartilham documentos secretos na Internet atravs de dois canais distintos: um deles a utilizao de redes privadas, ou fechadas, que volta e meia so invadidas por hackers militantes habilidosos, que o fazem por motivaes
5. Pornografia
A pornografia da superfcie move milhes de dlares e a maior responsvel pelos picos de trfego da Internet. H, porm, o porn ilegal, aquele proibido por tudo quanto lei do mundo e que o mnimo de
bom senso e decncia condena violentamente. Trata-se de bizarrices envolvendo estupros, canibalismo ertico, pedofilia, necrofilia e outros termos, capazes de revirar os estmagos dos mais fortes. A pornografia oferece uma perigosa ponte entre a web visvel e a invisvel, sendo fator motivador do grande trfego da deep web pelo mundo. Podemos estabelecer uma relao com o mundo das drogas: enquanto o porn legal e visvel na superfcie oferecido como um cigarro de maconha, a pornografia das entranhas da deep web como a herona, droga pesada e difcil de ser encontrada.
resolver devastar os pntanos mais profundos dessa perigosa realidade paralela, estude muito e se prepare para ter sua mquina infestada de todo o tipo de praga virtual. Assim, crianas, no se arrisquem, no se iludam e deixem as profundezas para os seus habitantes temerosos. Sabemos que crimes horrveis 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, pedfilos que ficam no aguardo de qualquer vacilo para sequestrarem nossas crianas e que aquele senhor respeitvel que cumprimentamos no fila do po pode ser um sadomasoquista da pesada, que utiliza pesados artefatos de tortura. Porm, saber dessas verdades mudaria algo em ns? 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, porm o melhor caminho se precaver e fugir delas, pois, como diria minha saudosa av, o que os olhos no enxergam, o corao no sente e pssimas companhias no pegam, mas sujam. </>
Eu devo conhecer a deep web?

De forma alguma. fortemente recomendado que voc no faa isso, pois as consequncias psicolgicas so imprevisveis. Mesmo com todo o cuidado e todo o equilbrio do mundo, provvel que tenha pesadelos terrveis e que tais contedos demorem muitos dias para se apagarem de sua mente. Ainda h o risco de sua mquina ser interceptada e invadida. A deep web possui mais vrus que qualquer hospital pblico de baixa qualidade; assim, uma simples e rpida passagem por l pode ser consideravelmente fatal, em termos computacionais, claro. Mesmo assim, se resolver mergulhar, saiba que muito do contedo mais extremo inacessvel para novos usurios e que, para conhecer mais, o risco aumenta. As piores fotos, o acesso aos fruns especficos, tudo exige uma dose de exposio e de coragem que somente quem tem pouco a perder est disposto a correr. Se
Fabiano Pereira designer grfico com especializao em UX Design, Front-End e Wordpress. Palestrante, escritor, msico e curioso de planto. www.fabianopereira.art.br.
70 > iMasters Box
iMasters box
O iMasters Box um agregador de servios voltado para desenvolvedores web, que rene ferramentas teis para esses profissionais e que j esto disponibilizadas na rede. Aqui na Revista, vamos selecionar sempre algumas das ferramentas mais interessantes para voc. Conhea mais o iMasters Box em http://imasters.com.br/box e participe! Sua sugesto de ferramenta pode vir parar tambm na Revista!
Nextgen Gallery
Conhecido como um dos melhores plugins para galeria de fotos no WordPress, tambm muito flexvel, permitindo criar templates diferentes para a exibio das galerias e fotos. Tambm conta com vrios plugins auxiliares para uma turbinada a mais. http://ow.ly/hRxx2
HTML Validator
A extenso HTML Validator para Firefox realiza a validao do HTML da sua pgina dentro do prprio Firefox, levando em considerao os mesmos parmetros de validaes do W3C. Exibe a quantidade de erros encontrados na pgina e o tipo de erro de que se trata, indicando as linhas do cdigo onde ocorrem os erros. Essa extenso ideal para deixar sua pgina dentro dos padres Web do W3C. Gratuito. http://ow.ly/hRwSu
Contact Manager
Uma aplicao simples que demonstra o uso da ContactsContract API, assim como a insero manuai de novos contatos de uma conta especfica. Em diversas situaes, voc desejar interagir com a rede de contatos do usurio, permitindo uma experincia mais gratificante para ele. Gratuito. http://ow.ly/hRxHM
API Microsoft De iOS para WP7
Mercurial
uma ferramenta multi-plataforma de controle de verso distribudo para desenvolvedores de software. O sistema implementado principalmente em Python, porm o utilitrio binrio 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 operaes do Mercurial so chamadas atravs de palavras-chave de opes para o programa controlador hg, uma referncia para o smbolo qumico do elemento Mercrio. Gratuito. http://mercurial.selenic.com/
CherryPy
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 programao dos aplicativos e contm um guia para que os desenvolvedores possam fazer a transferncia entre as plataformas. Gratuito. http://ow.ly/hPL0i
Framework para desenvolvimento orientado a objeto voltado para a web, usando apenas Python. No intrusivo, o CherryPy permite criar aplicaes web de grande porte, como se tivesse desenvolvendo um simples aplicativo orientado a objeto. Desenvolvido em 2005, j est bem estvel. 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 aplicaes, tudo via browser. O Heroku permite criao e edio online, importao de aplicaes desenvolvidas fora do Heroku, compartilhamento de aplicaes, desenvolvimento colaborativo, gerao de cdigo (generators e migrate), Rails console, e ainda no h necessidade de configurao e deployment. Verses pagas e gratuitas. http://www.heroku.com/
SublimeText
um editor de cdigo sofisticado que vem sendo cada vez mais utilizado por desenvolvedores. uma ferramenta leve, com interface simples e extremamente rpida. Possui verses pagas e gratuitas. http://www.sublimetext.com/
Oferece uma aplicao robusta e de alto desempenho MVC, uma abstrao de banco de dados que simples de usar, e um componente que implementa formas de HTML, validao e filtragem para que desenvolvedores possam consolidar todas essas operaes. A licena do Zend Framework compativel com a BDS Licence, o que permite que softwares construdos com o framework possam ter cdigo proprietrio. Essa abertura importante para empresas porque nem sempre possvel liberar o cdigo fonte. Gratuito. http://zendframework.com/

Revista Imasters by Imasters (Revista-iMasters-Web - PDF) (72 Pages)

Hochgeladen von

Dokumentinformationen

Originaltitel

Copyright

Verfügbare Formate

Dieses Dokument teilen

Dokument teilen oder einbetten

Freigabeoptionen

Stufen Sie dieses Dokument als nützlich ein?

Sind diese Inhalte unangemessen?

Copyright:

Verfügbare Formate

Revista Imasters by Imasters (Revista-iMasters-Web - PDF) (72 Pages)

Hochgeladen von

Copyright:

Verfügbare Formate

Fevereiro 2013 / Ano 02 / Edio 05

Ns fazemos a Internet no Brasil

Desenvolvimento um guia para otimizar as suas aplicaes web

Entrevista Nada acessvel o suficiente que no possa melhorar

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

20 :: Capa > O lado B da tecnologia

08 :: Entrevista Acessibilidade web, com Horcio Soares

44 :: Front-End Como otimizar aplicaes web

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

8 > Entrevista > Acessibilidade > Horcio Soares

Nada acessvel o suficiente que no possa melhorar

Por <Rina Noronha>

10 > Entrevista > Acessibilidade > Horcio Soares

12 > Entrevista > Acessibilidade > Horcio Soares

Horcio e MAC (arquivo pessoal)

No projetamos a experincia do usurio; na verdade, projetamos para a sua experincia

14 > Coluna > +Interatividade

if ( ignorancia == beno ) return false;

16 > Artigo > Marketing Digital

Um mundo novo para o marketing digital:

Obama, o Presidente Digital

Cidades Inteligentes: Projeto Cidade 2020

18 > Coluna > Padres Web

Por dentro do W3C Brasil

W3C Brasil em 2013

Open Web Platform

Aes do Dia Internacional das Pessoas com Deficincia

Conferncia Web W3C Brasil

Prmio Nacional de Acessibilidade na Web

Voc tambm pode participar do W3C

Open Data Conference in Latin America and the Caribbean 2013

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

Workshop de Mateus Knelsen

Imagem: Parasimtrica Algoritmo das Cores

O lado mais humano dentro dos hackerspaces

26 > Criatividade Tecnolgica

Festival das Luzes na era da interatividade

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

28 > Artigo > Criatividade Tecnolgica

Highlights, le fil lumire-Skertz(c) Fabrice Dimier/Fete des Lumieres

E o que isso tem a ver com a era da interatividade?

Frameworks para front-end

32 > Artigo > Segurana

Confiana, certificados digitais e autenticao

34 > Artigo > Segurana

36 > Artigo > Segurana

38 > Artigo > Segurana

Descobrir como financiar

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

Pedro Belasco consertando a embreagem do nibus

Uma coleo ambulante de histrias

Entenda o nibus Hacker e a comunidade

42 > Coluna > Cdigo Livre

Informaes e dicas sobre projetos open source

44 > Artigo > Front-end

Como otimizar aplicaes web

Configurando nosso servidor

Defina o tempo de cache para cada tipo de arquivo

46 > Artigo > Front-end

Minificar e unificar js e CSS

Ferramentas para comprimir arquivos

Ferramentas para unificar arquivos

48 > Artigo > Front-end