Tutorial de Prototipagem em Papel

Para quem ficou interessado em saber mais sobre como fazer prototipagem em papel, depois de ler sobre a Oficina de Design de Interação na CPBr, dêem uma olhada no vídeo abaixo, preparado pelo pessoal do LTIA-Unesp (Laboratório de Tecnologia da Informação Aplicada), aqui de Bauru. É um tutorial muito interessante, rápido e divertido. Dá para ter uma boa noção de como fazer e aplicar testes em protótipo de papel.

Recebi esse vídeo pelo Henrique Perticarati, estudante da Unesp-Bauru e membro do LTIA. Até o tio Jakob Nielsen (ou Jakozão, como diria o designer Felipe Memória) assistiu a este vídeo, que foi enviado a ele pelos estudantes.

Leia mais sobre Tutorial de Prototipagem em Papel »

Último dia na Campus Party 2011 - Mesa-redonda das GarotasCPBr e palestra de Steve Wozniak

Meu último dia de atividades na Campus Party 2011 foi bem mais tranquilo do que os outros dias, mas não menos interessante. Logo pela manhã, no palco de Desenvolvimento, houve a mesa-redonda "Onde estão as mulheres na informática hoje? Suas áreas e interesses" com a presença das GarotasCPBr Caroline Souza, Elaine Cecília "Cissa" Gatto, Gislaine Pereira, Mônica Gagliardi e Vanessa Guedes Garcia, grupo do qual também faço parte.

Na mesa-redonda de cerca de 2 horas, as garotas contaram um pouco de suas experiências profissionais, como lidaram com o preconceito dentro do mercado de trabalho e dentro da própria família. Ainda há um certo preconceito e desconfiança quanto à competência da mulher no mercado de TI, mas elas têm conquistado cada vez mais espaço, respeito e, inclusive, admiração. Na plateia, vários homens manifestaram sua admiração pela competência das mulheres que trabalham com informática. Entre os depoimentos da plateia, há garotas que receberam total incentivo da família quando optaram pela área de TI e há as que enfrentaram e ainda enfrentam a incompreensão por parte da família.

Cissa Gatto, minha veterana de mestrado na UFSCar, relatou que na área acadêmica a igualdade entre homens e mulheres é bem maior, as professoras são muito respeitadas, as mulheres são as que mais publicam artigos e pesquisas já comprovaram que as mulheres estudam mais que os homens, ou seja, chegam mais longe em suas titulações acadêmicas.

Vanessa Guedes mostrou sua indignação pelas "cantadas" desrespeitosas por parte dos homens na Campus Party, que parecem tratar as mulheres como objetos, e deixou o recado: "Meninos, por favor, se controlem". Nesta questão, também foi discutido sobre a postura da mulher, e tanto as garotas quanto os garotos concordaram que a mulher também deve ter uma postura adequada, ter respeito próprio para ser respeitada, e valorizar mais a sua inteligência do que a aparência.

As Garotas CPBr mostraram que as mulheres podem ser programadoras, designers, técnicas de informática, gamers e analistas de sistemas sem perder a femilidade.

À noite, foi a vez de Steve Wozniak, o co-fundador da Apple, subir ao palco principal para o último Momento Telefônica da CP 2011.

Woz contou um pouco sobre a história de fundação da Apple e também de sua própria história. Ele começou a mexer com engenharia eletrônica em casa, pois seu pai era engenheiro e o ensinava a mexer com eletrônica.  Era um jovem sonhador, apaixonado pela eletrônica. Antes mesmo de ingressar na faculdade, ele mesmo começou a projetar a sua própria ideia de um computador, de modo empírico, e frisou: "Hoje vocês têm aulas sobre isso, mas naquela época nós não tínhamos". O projeto foi realmente levado à diante quando Woz já havia ingressado na faculdade de engenharia e conheceu Steve Jobs. Woz utilizou uma TV como terminal e chegou a implementar uma conexão com a Arpanet (rede antecessora à internet). Com 4 Kb de memória, surgiu o computador mais barato comparado aos outros existentes na época, o Apple-I.

O segredo para ele ter sido bem sucedido em sua empreitada, é, segundo Woz, amar aquilo que se faz. Ele disse que apenas conseguiu construir o que construir por sua paixão por eletrônica, ele se mostrou realmente apaixonado pelo que faz e isso o motivou a correr atrás e buscar conhecimento (ET Bilu Feelings).

Logo após a palestra, Woz estava distribuindo autógrafos e formou-se uma fila gigantesca que deu a volta em toda a arena da Campus Party.

Para concluir o evento, houve a entrega de prêmios "Campuseiros Empreendem" e "Campuseiros Inventam". Depois, só bagunça por parte dos campuseiros, acho que o pessoal passou um pouco dos limites, até caixas de pizza estava voando sobre a arena e foi difícil dormir com tanto barulho. O domingo foi dedicado à arrumação das malas e uma nova fila para sair do camping, só que desta vez, bem mais tranquila e mais rápida.

Que venha a CPBr 2012!

Leia mais sobre Último dia na Campus Party 2011 - Mesa-redonda das GarotasCPBr e palestra de Steve Wozniak »

Direto da Campus Party 2011 - Oficina "Design de Interação - além do lápis e papel"

A melhor oficina que participei na Campus Party foi, sem dúvida, "Design de Interação - além do lápis e papel", ministrada por Tássia Spinelli e Rafaela Rei, ambas arquitetas de informação no iG.

Para chamar a atenção do público, primeiro elas mostraram um slide com imagem do iPhone, clichê em muitas apresentações, mas logo elas explicaram porque. o iPhone é característico pela sua facilidade de uso e, por este e outros motivos, é desejo de consumo de muitas pessoas. Isto porque ele foi planejado, projetado, desenhado e prototipado.

A importância do protótipo em papel, segundo Spinelli e Rei, é que ele se apresenta uma forma simples, rápida e barata para testar e garantir bons resultados, além de ser uma das melhores ferramentas para desenhar ótimas experiências de uso. Os principais benefícios são: fácil execução; forma rápida de incorporar feedback no momento de produção; os participantes dos testes se sentem mais à vontade criticando um protótipo em papel; há economia de tempo e dinheiro. E tem a grande vantagem de que você não precisa se preocupar com a fidelidade do design. Isso acaba tirando o foco do usuário durante o teste, ele acaba se preocupando em apontar mais questões de design do que problemas de funcionalidade. O foco do protótipo é analisar o fluxo de interação e a dificuldade de realização de tarefas, permitindo maior abstração destes quesitos.

O protótipo em papel é um ambiente simples para testar usabilidade, mas também deve ter uma planejamento. É preciso definir o público, as interfaces a serem testadas e as atividades a serem realizadas. Depois, os protótipos são desenhados e os testes são aplicados sob a supervisão do moderador e do observador. Para ter uma noção mais clara, as oficineiras exibiram o vídeo Paper Prototyping at Work.

Elas também deixaram claro o que não é protótipo:

• Quadro branco: é mais utilizado pra brainstorming, não é interativo e apenas apresenta um rascunho de ideias. Protótipo não é um rascunho, não é a primeira ideia que vem em mente, é um refinamento destas ideias sob um planejamento;
• Storyboard: apenas narra a ideia de interação. Mesmo que seja feito em papel, protótipo é funcional apenas é testado com o usuário e a intenção do storyboard não é essa;
• Prancha;
• Wireframe: são mais demorados e mais elaborados, geralmente não servem muito bem em outras etapas, pois há grande preocupação com detalhes de estrutura e fonte. Se for impresso, pode até servir como um protótipo funcional.

Os seguintes mitos também foram derrubados durante a oficina:

1. Protótipo deve ser bonito: não. Antes de tudo, um protótipo é uma simulação de interface, tem que ser vivo, não tem que ser bonito;
2. "Só sei desenhar direto no layout";
3. "Não parece profissional": profissional é envolver as pessoas desde o início do projeto, não fazer um protótipo de alta fidelidade;
4. "Meu chefe não irá entender";
5. "Prototipar depende da plataforma";
6. "Impossível simular interatividade com papel": é possível sim e muito bem :)

E para começar a fazer o protótipo é preciso pensar que a proposta da prototipação é propor ideias e trazer feedback mais rapidamente. Respondendo à algumas dúvidas da plateia, Spinelli e Rei esclareceram que o protótipo e seu benefício não são mensuráveis como um produto entregável. Elas também responderam que a responsabilidade sobre do protótipo ou wireframe é de toda a equipe, deve envolver todos os profissionais, não há "quem fale mais alto" nesse momento, é um processo de negociação com designers, arquitetos de informação e programadores.

Ao final da oficina foi proposta uma atividade prática pra prototipar um aplicativo do iG para iPhone. Ninguém se manifestou na plateia, acredito que todo mundo tenha ficado um pouco receoso de não conseguir dar conta, pois eu também fiquei assim. Conforme o pessoal foi saindo, eu continuei na plateia e fui chamada, junto com um pessoal para fazer a atividade. Estávamos em 6 pessoas e dividimos em 2 grupos de 3. Cada grupo teria que prototipar o aplicativo do canal Zoom para o iPhone e depois cada grupo elegeria o moderador e o observador para testar até 2 atividades do aplicativo com um "usuário" do outro grupo.

Quebramos muito a cabeça para definir uma interface simples e que pudesse refletir as principais ações desejadas pelos usuários no aplicativo. É interessante como o trabalho de prototipação é mais complexo, pois você precisa desenhar todo o fluxo de interação, por exemplo, "se o usuário clicar aqui, mostro a tela X, se na tela X ele clicar no botão Y, vai para Z, se clicar no W, vai para o K" e assim por diante. Spinelli e Rei foram super atenciosas e nos orientaram muito bem durante o teste com usuário, dando dicas do que não pode ser falado durante o teste com moderação, como apresentar o protótipo para o usuário, como incentivá-lo a narrar a interação, etc.

O mais surpreendente foi ver como cada equipe pensou a interface de forma completamente diferente. E, pra completar, eu e os colegas de oficina, novos amigos, fomos rachar uma pizza depois da oficina e no sábado também.

Leia mais sobre Direto da Campus Party 2011 - Oficina "Design de Interação - além do lápis e papel" »

Direto da Campus Party 2011 - Palestra "Social Interface Design"

Logo após a oficina sobre CSS3, Eduardo Agni apresentou a palestra "Social Interface Design", uma abordagem mais humana sobre o design de interface, visando aproximar as pessoas e permitir que elas interajam sobre um conteúdo ou um produto.

Passado um histórico sobre a evolução da interação entre usuários e computadores, Agni chegou na usabilidade, a área de estudos sobre facilidade de uso entre humanos e interfaces de software/hardware. Enquanto a usabilidade ainda trata mais a interação baseada em tarefas, os seres humanos, na verdade, respondem socialmente em suas interação com as máquinas, independente da facilidade de uso. O Napster foi um dos softwares mais utilizados durante a sua época e, apesar de ter falhas de usabilidade e uma interface confusa, ganhou a adesão da comunidade por possibilitar uma interação entre pessoas, através do compartilhamento de arquivos. O importante não era o software em si e a realização das tarefas, mas a cooperação e interação entre os usuários, que torna a interface transparente, pois ela se torna apenas um artefato de intermédio entre a interação humano-humano.

É o mesmo caso do Facebook. Mark Zuckerberg não entendia de interfaces, mas ele observava as interações sociais, que informações as pessoas queriam saber umas das outras e tinha a preocupação de que o Facebook fosse um ambiente legal para as pessoas, oferecendo interações que as pessoas desejavam. O Flickr, a rede social de fotografia mais utilizada no mundo, tinha componentes sociais que seus concorrentes na época não possuiam, o que possibilitou o destaque sobre estas outras ferramentas. No Mercado Livre, mais do que estar atento aos produtos, é poder ver a reputação do vendedor que está oferecendo este produto, e esta reputação é construída pelos outros compradores e as pessoas compram de quem tem a melhor reputação.

A usabilidade é muito importante, mas se um aplicativo faz o que as pessoas querem, mesmo tendo uma interface difícil, ele ainda será um sucesso. Se uma aplicação é fácil de usar, mas não faz o que as pessoas querem, ele será um fracasso. Mas a usabilidade é um diferencial. Se temos duas aplicações que fazem exatamente a mesma coisa, mas uma tem uma interface mais fácil e menos intrusiva, com certeza o sucesso dela será maior, basta observar sites como o Facebook e Flickr, que, além da funcionalidade, também tem o cuidado com a facilidade de uso. Mercado Livre já se encaixa dentro da categoria de interfaces que fazem o que os usuários querem, mas tem uma interface ruim, rsrs.

Mas é preciso que sejam tratadas as questões de mediação entre pessoas, pois as necessidades sociais dos usuários são: expressão e identidade; status e auto-estima; dar e receber ajuda; pertencer a grupos e afiliações; ter um senso de pertença à comunidade. A principal diferença em aplicações que trabalham o design de interface social é que elas ajudam a sociedade a ter sucesso, mesmo que isso signifique que o usuário tem que falhar. No design de interfaces convencional, orientado a tarefas, a usabilidade trabalha com o design defensivo, dizendo ao usuário o que ele fez de errado e como ele de pode corrigir isso.

Algumas considerações quando se trabalha com o design de interface social: dar recompensas pela realização de uma tarefa, podendo ser o desbloqueio de uma função ou fornecendo um badge (qualificações, insígnias, como vemos no Foursquare e, mais recentemente, no Orkut); avisar o usuário sobre atualizações de conteúdo; fornecer opções de compartilhamento. Mas lembrando de não ser intrusivo, mandando mensagens não solicitadas tentando forjar uma interação ou uma adesão à determinada rede social, como fazem o QuePasa e o Badoo (esse eu recebo e-mails frequentemente e isso não me motiva nem um pouco a querer ingressar na rede).

Como leitura recomendada, Agni destacou o livro Cultura da Interface, de Steve Johnson. Eu vou garantir o meu, e você?

Leia mais sobre Direto da Campus Party 2011 - Palestra "Social Interface Design" »

Direto da Campus Party 2011 - Oficina "Seu desenho vai virar código, e agora?"

Na sexta-feira (21/01), o designer Eduardo Agni apresentou sua oficina "Seu desenho vai virar código, e agora?", que ele já havia apresentado em outras edições da Campus Party, mas este ano com um conteúdo mais forte sobre CSS3. Inclusive, quem quiser conferir os slides, eles estão disponíveis no Slideshare.

Agni começou com uma citação de Chris Coyer: "CSS é como xadrez... Você pode aprender os princípios em um dia e passar a vida inteira se especializando". Para quem trabalha com desenvolvimento/design front-end, sabe que CSS é um aprendizado diário. Ele apresentou a divisãode páginas web em três camadas: conteúdo (HTML), apresentação (CSS) e comportamento (JavaScript) através de um diagrama. Depois, comentou sobre as diversas limitações da especificação corrente do CSS (2.1) e como o CSS 3 (ainda em fase de rascunho pelo W3C) permitirá maior controle do estilo sem a necessidade de utilizar certos truques e imagens para reproduzir alguns efeitos.

Foram mostradas algumas ferramentas que as novas propriedades possam ser visualizadas em todos os navegadores, como o Modernizr. Entre as IDEs disponíveis para escrever HTML e CSS, Agni apresentou o Aptana Studio 3, que já possui suporte a HTML5 e CSS3, e destacou: "HTML5 e CSS3 não criam maravilhas, eles apenas possibilitem que você crie... São apenas ferramentas, mas quem faz a buniteza acontecer é você", em resposta a diversos posts que vemos mostrando "sites inspiradores" feitos com as novas especificações das linguagens.

Grande parte da oficina foi destinada à apresentação prática das principais propriedades novas do CSS3: border-radius, border-colors, text-shadow, box-shadow, opacity, columns, backgrounds múltiplos e @font-face.

Leia mais sobre Direto da Campus Party 2011 - Oficina "Seu desenho vai virar código, e agora?" »

Direto da Campus Party 2011 - Debate "Eleições na web"

Logo após a oficina de Otimização de Wordpress, houve, sem dúvida, o melhor debate que assisti aqui na CP. Talvez não somente pelas informações debatidas, mas pelo confronto acalorado (e algumas vezes até divertido) entre os convidados para o painel. O debate contou com os coordenadores de campanha na internet dos principais candidatos à presidência das eleições 2010, Soninha Francine (José Serra), Marcelo Branco (Dilma Rousseff), Caio Túlio Costa (Marina Silva), além de Fernando Barreto, sócio-diretor da empresa WebCitizen e um dos criadores do Votenaweb.

As eleições de 2010 no Brasil foi a primeira a poder utilizar os canais de comunicação na internet de forma tão abrangente, portanto, muitas coisas não funcionaram como o previsto, enquanto que outras tiveram um resultado muito positivo. Ainda que a maioria tenha tido como inspiração, direta ou indireta, a campanha de Barack Obama no ano de 2008, nenhuma campanha cobriu as redes sociais da mesma forma e com a mesma eficiência.

Sobre a campanha de Dilma, Marcelo Branco relatou que a intenção foi utilizar a internet para mobilizar a campanha offline e retomar o papel de militância, possibilitar o engajamento. Para isso, a campanha deu possibilidade de cobertura colaborativa, uma vez que não contava com o apoio dos grandes veículos de imprensa, e também monitoravam em tempo real as redes sociais em que a campanha estava inserida. Um dos problemas apontados por Branco foi o fato de não ter uma coordenação de comunicação na campanha.

Soninha relatou, sobre a campanha do Serra, a respeito da presença do famigerado indiano radicado em New York que auxiliou a coordenação de mídias sociais durante algum tempo e trouxe uma visão diferenciada. A princípio a equipe não confiava muito nas instruções dele, pois acreditavam que certas estratégias não iriam funcionar no Brasil, mas que, no final, deram certo e, concluiu que "o olhar de fora ajuda a gente a olhar as coisas de outra maneira". Ela também comentou sobre a mensuração do grau de engajamento nas campanhas, não somente medir o sentimento na rede, baseando-se na construção de um relacionamento com os eleitores e militantes. Também revelou que pode perceber mais a presença das minorias de audiência da internet do que a audiência convencional, ou seja, pessoas idosas ou de locais com acesso mais restrito à internet estavam se manifestando também dentro das redes sociais em apoio ao candidato.

A campanha  da Marina Silva, sob coordenação do Caio Túlio, foi uma das mais bem sucedidas a meu ver. E, inclusive os outros participantes consideraram que isto foi devido ao fato de Marina já possuir uma causa bem definida. Caio relatou que o sistema de doação para a campanha da Marina foi bem sucedido pois era fácil de usar, em contrapartida ao da campanha de Dilma. Ele também revelou que foi preciso saber como se comunicar com cada canal da internet, pois cada serviço tinha uma audiência específica, então, no Orkut, Marina falava mais para o público evangélico, no Facebook falava com as mulheres e a classe mais elitista e os intelectuais, no Twitter falava com com os jovens e a vanguarda da internet. Caio comentou que durante toda a eleição foi feita uma campanha responsável e transparente, respondendo a todos os e-mails que chegavam e que o preparo da equipe foi fundamental para evitar as trollagens na rede. E mostrou que a audiência da Marina na internet casa com a porcentagem de votos, ou seja, não é uma exatamente uma comprovação, mas podemos inferir que sem os canais de redes sociais não haveria segundo turno e a Marina não teria uma votação tão expressiva.

Entretanto, os participantes discutiram que faltou envolver os eleitores mais na discussão política do que na militância. Um dos pontos de maior divergência entre os participantes do debate foi sobre as mídias convencionais vs. as novas mídias e, nesse momento, Soninha Francine teve seus argumentos contestados com frequência pelos outros participantes e ela acabou se alterando um pouco (confesso que isso foi engraçado). O ponto mais importante desta discussão: as mídias convencionais não tem mais o mesmo eixo de comunicação e, na internet, a plataforma do público e dos editores é a mesma, há uma igualdade do poder de comunicação entre a imprensa e o público por utilizarem as mesma ferramentas.

Por fim, fica o seguinte recado: a internet ainda é uma nova forma de comunicação que todos estão aprendendo a lidar. Muitos tentam dar pitaco como especialistas em mídias sociais a respeito de campanhas na internet, mas ainda há muito pragmatismo e muitas estratégias são capazes de ser mensuradas e tendo seu impacto analisado somente depois de utilizadas na prática.

Leia mais sobre Direto da Campus Party 2011 - Debate "Eleições na web" »

Direto da Campus Party 2011 - Oficina "Otimização de Wordpress"

Quinta-feira (20/01), no palco de Mídias Sociais ocorreu a oficina sobre Otimização de Wordpress com Paulo Henrique Alkimin, do Tecnoblog, e Gus Fune, do Papo de Homem. Certamente a área de Mídias Sociais era a que concentrava o maior número de blogueiros, entretanto o teor da palestra estava mais compreensível para quem era desevolvedor.

A oficina foi divida em três partes. Na primeira parte, Alkimin e Fune comentaram sobre estrutura de servidores e o core do Wordpress. Esclareceram que um dos motivos para um blog ficar fora do ar é o uso de muitos plugins, que acabam requerendo muitas requisições e poder acabar derrubando o servidor se não forem bem configurados. Também comentaram que o plano de hospedagem deve ser de acordo com o tráfego esperado para o site e que, para fazer um site profissional, é preciso sim gastar um pouco mais. Com relação a otimização de performance, eles falaram sobre Cache (armazenamento de recursos em uma local de acesso rápido, não precisando requisitar novamente ao servidor) e Optcode exemplificando sobre Cache via .htacess (exemplo 1 e exemplo 2), também fizeram um overview sobre WP-Supercache e W3-Total-Cache. A primeira parte foi finalizada as dicas sobre criar um subdomínio pra imagens ou então utilizar serviços de terceiros, como Amazon Web Services, Flickr, Rackspace ou ImageShake, que ajudam a reduzir também as requisições em seu servidor.

A segunda parte foi a respeito da otimização dos temas, onde os rapazes comentaram sobre o uso de sprites (uma única imagem contendo todas ou quase todas as imagens, ícones, logo, etc, do site) e de plugins de navegadores muito úteis para avaliar quais recursos estão consumindo mais tráfego no servidor como o Google Page Speed e o Yahoo! Page Slow (ou apenas YSlow). Achei bem interessante eles comentarem também sobre a remoção de certos recursos dinâmicos do Wordpress deixando alguns trechos de forma estática, como é o caso do charset que ele chama por uma função PHP ou mesmo um menu de categorias que será sempre fixo e não precisa ser gerado dinamicamente.

Na terceira parte eles falaram sobre plugins, mas plugins úteis para otimizar o seu blog e não para adicionar coisas supérfluas e que certos plugins podem ser substituídos por algumas linhas de código no seu blog, como é o caso do Facebook "Like", a função de retweet e o código do Analytics. Entre os plugins de otimização foram citados o WP-Tuner e Smush.it. Eles também falaram sobre a terceirização de comentários que, além de reduzir o tráfego ao servidor, ainda se mostram mais úteis do que os comentários do próprio wordpress, como é o caso do Intense Debate, DISQUS e até mesmo o Facebook Comments. Pra finalizar, Alkimin e Fune indicaram utilizar o YSlow para verificar o impacto de um plugin no site.

Leia mais sobre Direto da Campus Party 2011 - Oficina "Otimização de Wordpress" »

Direto da Campus Party 2011 - Oficinas e Palestras de HTML5

Nesta quinta (20/01) e sexta (21/01), os palcos de Desenvolvimento e Software Livre da Campus Party 2011 sediaram, ao todo, 4 atividades sobre HTML5. Eu assisti a 3 delas e, embora um pouco redundantes entre si, cada uma destacou conteúdos diferenciados sobre as mudanças nos padrões de desenvolvimento.

Palestra: Futuro da Web, HTML5 e W3C

A primeira foi a palestra "Futuro da Web, HTML5 e W3C" (foto acima) por Carlinhos Cecconi, analista de projetos do escritório do W3C no Brasil. Assim como nas outras atividades, foi apresentado primeiro um histórico sobre o HTML, o início da era dos padrões web e Cecconi acrescentou a motivação para a criação do consórcio W3C, que foi a Guerra dos Browsers em 1994.

Cecconi comentou mais sobre a história do W3C, enfatizando o objetivo de conduzir a Web para que ela "atinja todo seu potencial, desenvolvendo protocolos e diretrizes que garantam o seu crescimento". E para isso, o W3C possui 4 metas:

• Web para todos: tornar o benefício da web (valor social: comunicação humana, comércio, compartilhar conhecimento) disponível a todos independente de harware, software, infra estrutura de rede, idioma, cultura, localização geográfica, habilidade física, habilidade mental;
• Web em qualquer dispositivo: Possibilitar que o acesso de qualquer tipo de dispositivo seja tão simples, fácil e conveniente quanto de um computador convencional;
• Web base de conhecimento: Possibilitar que os próprios computadores estabeleçam inferências e relações entre os conteúdos, interpretem informações e valores semânticos, tornar a Web mais do que um livro hiperlinkado;
• Web confiável e segura: transações sociais e comunicações com terceiros.

E nisso ele apontou o futuro da Web como um ambiente independente de linguagem, de formalismo, mas um ambiente de informações semânticas interpretadas e inferidas, citando também o uso do RDF com HTML5, que provê mais do que hiperlinks, mas também datalinks. Foram mostradas as principais novidades do HTML5, incluindo as novas tags (mais semânticas) com um exemplo entre a diferença de marcação do HTML 4.01 para o HTML5 e mais demonstrações presentes no site-livro Diveintohtml5.org. Cecconi frisou o uso do SVG com um ponto importante a ser estudado por designer e programadores front-end.

Mas, dentre o que foi mostrado, o mais interessante foram as possibilidades de se trabalhar com vídeos acessíveis, que possuem legendas (tanto de diálogos quanto de descrição de cena) providas por um arquivo XML e, dessa forma, podem ser interpretados por softwares leitores de tela. Mais exemplos de HTML5 podem ser encontrados em http://www.w3.org/html/wiki/Demos.


Palestra: HTML5

Na sexta-feira à tarde foi a vez de Andrew de Andrade falar sobre HTML5 e depois fazer um hand-on (oficina prática) para aplicar os conceitos apresentados. Infelizmente eu não terminei de assistir essa palestra e também não participei da próxima que era o hands-on. Neste momento a energia da CP teve que ser interrompida pois eles estavam saindo dos geradores (no dia teve uma chuva muito forte que causou a queda de energia e foi preciso acionar os geradores).

O que pude ver nesta palestra foi que o foco acabou sendo mais JavaScript do que HTML5. Apesar de sabermos que a combinação entre HTML5 + CSS3 + JavaScript pode gerar aplicações incríveis, elas não são uma unidade e funcionam independentemente umas das outras e eu esperava que a palestra falasse mais sobre características do HTML5. O conteúdo sobre JS foi muito interessante e bem apresentado, mas não estava muito de acordo com o título da palestra.

Entre os tópicos, Andrade mostrou novos seletores de elementos que podem (talvez, no futuro) extinguir a necessidade de frameworks como jQuery (claro que o jQuery tem muitas outras funções, não vamos minimizá-los a isso). Ele também abordou o Web Storage, que permite salvar o conteúdo no cliente e não no servidor (pesquisei no site do W3C e parece que este recurso foi descontinuado), Web SQL Database, Indexed Database, Application Cache (definido no mas manipulável por JS),  Web Workers (API para rodar os scripts em background), Notifications (janelinhas de notificações diretas na área de trabalho), Geolocation, e o Drag and Drop nativo que pode permitir, inclusive, arrastar os itens para o desktop.

Sobre as tags do HTML5, é interessante Andrade ter explanado que a criação destas novas tags foi um mapeamento feito pelo grupo de trabalho do HTML5 acerca das estruturas mais utilizadas e até mesmo as classes e IDs mais utilizados.


Palestra: HTML5 e o Futuro da Web

À noite foi a vez da área de Software Livre ser palco de uma palestra sobre HTML5, desta vez com Maxwell Dayvson. Ele mencionou muitas coisas semelhantes a Andrew de Andrade, mas o foco maior foi em canvas e vídeos.

Dayvson mostrou alguns vídeos muito interessantes de sites que utilizam, principalmente, canvas, entre eles jogos muito bem elaborados e interfaces ricas.

Ele chamou a atenção também para o uso do vídeo em HTML5, pois parece que há uma guerra de Codecs de vídeo, alguns navegadores, como o Chrome, passaram a não dar mais suporte para determinados codecs,o que deixa o uso da tag "video" um pouco instável. Nesse ponto, o Flash tem uma vantagem como player de vídeo, pois o codec já vem embutido.

Também foram mostrados os novos tipos de inputs do HTML5, com certeza uma das características mais imporantantes que retira o uso do JS para implementar funções comuns como campo de data, email, valor numérico, entre outros.

E, por fim, um dos destaques da palestra foram também os frameworks de HTML5, que permitem utilizar certas convenções para facilitar o trabalho e manter um padrão. Dayvson apresentou o 52Framework, HTML5 Boilerplate, EaselJS (para trabalhar com canvas), entre outros.

Leia mais sobre Direto da Campus Party 2011 - Oficinas e Palestras de HTML5 »

Direto da Campus Party 2011 - Oficina "SEO - Search Engine Optimization & SMO - Social Media Optimization"

Na quarta-feira (19/01), depois de ter perdido a palestra "Criando aplicações .Net com software gratuito" por conta de uma mudança de horário sem aviso da organização, fui muito bem recompensada durante a oficina "SEO - Search Engine Optimization & SMO - Social Media Optimization", ministrada pelo Fábio Ricotta, do Mestre SEO.

Dentre as palestras e oficinas que participei, foi uma das melhores. As práticas de SEO apresentadas se concentraram mais em blogs, especialmente para a Wordpress.

A primeira parte da apresentação foi uma compilação do que ele já havia apresentado na Campus Party do ano anterior, mas casou perfeitamente com o fato da maioria dos participantes não ter comparecido na oficina da CP 2010. Ele começou explicando sobre alguns plugins que permitem otimizar o Wordpress:

• Friendly URL: é importante ter URLs amigáveis tanto para os mecanismos de busca quanto para os usuários e isto pode ser configurado dentro do Wordpress em Settings > Permalinks.
• All in one SEO pack: é um plugin que facilita a configuração de aspectos de SEO para os posts
• Similar Posts: indicar artigos similares ou relacionados a um determinado post permite que mecanismos de busca descubram e naveguem por outras páginas de seu blog.
• XML Sitemap: o XML sitemap é um arquivo que lista as URLs de seu site, a frequência de atualização, data da última atualização e relevância de cada página dentro do site. Estas informações são importantes para o mecanismo de busca e este plugin permite criar um XML sitemap para posts do Wordpress.
• Redirecionamento: ao mudar a URL de um artigo ou de uma página, deletar um conteúdo, etc., é necessário fazer o redirecionamento correto (ex.: redirecionamento 301, para indicar que o conteúdo foi movido permanentemente para uma URL). Caso isso não seja feito adequadamente, o mecanismos de busca pode continuar indexando URLs inválidas.

Depois, Fábio Ricotta explanou como é possível utilizar o Google Analytics para mensurar os resultados de um blog, através de tracking de assinantes de feeds, monitorando quantos usuários são ganhos por dia e de onde eles surgem; monitoramento de comentários, analisando a quantidade de comentários que recebe por dia para medir a repercussão do blog; monitoramento de quais posts e quais assuntos geraram mais comentários (para ter um direcionamento de quais assuntos agradam e atraem mais leitores); e os Filtros Avançados que permitem que criar segmentos para observar um determinado comportamento dos usuários do blog.

A segunda parte foi o conteúdo inédito da oficina, um estudo de caso de 3 blogs com quantidade de visitas e audiências diferentes, mas as dicas foram praticamente as mesmas e estavam destinadas diretamente a SEO, mas como encontrar fontes de informação relevantes para escrever artigos que interessem à sua audiência. As principais dicas:

• Assinar o RSS dos sites que você utiliza como fonte de informação através do Google Reader e utilizar em conjunto o Post Rank, que classifica os posts do Google Reader, permitindo que você filtre o que é mais interessante ler e publicar. Se você tem um site maior, mais popular, escolha feeds de fora para fazer esse procedimento, pois você pode estar sendo um dos primeiros a comentar um determinado assunto em português e isso irá atrair leitores que desejam ler sobre o conteúdo em português;
• Regra supersimples mas valiosa: digitar um tópico de interesse do seu blog no campo de busca do Google e observar o Google Suggest, pois ele se baseia no que as pessoas mais procuram;
• Olhar também as sugestões no YouTube;
• O potencial do Google Suggest pode ser expandido utilizando o 
• Monitorar termos de interesse do blog através do Topsy, onde é possível observar as notícias mais relevantes do Twitter, ou seja, o hype, o que as pessoas estão querendo saber e pelo que elas se interessam;
• Utilizar ferramentas como o Open Site Explorer para ver os sites que linkaram para o seu blog, quais as páginas mais linkadas e avisar essas pessoas que linkaram para o seu site quando você tiver um novo artigo que possa interessar para eles divulgarem.
• Responder dúvidas no Yahoo! Respostas e citar um link para o seu blog indicando onde você aprendeu aquela informação

E, por último, Ricotta finalizou observando que utilizar bem as práticas de SEO em conjunto com as mídias sociais é o "pulo do gato" para trazer sucesso para o conteúdo que você publica. Nas redes sociais você estará observando o que as pessoas querem e escrevendo justamente sobre as informações que elas procuram. As redes sociais devem ser bem utilizadas para trazer tráfego para o seu site, você não deve responder às dúvidas das pessoas e publicar conteúdo somente nas redes sociais, mas sim dentro do seu site.

O vídeo da oficina você pode conferir no Blog Content.

Leia mais sobre Direto da Campus Party 2011 - Oficina "SEO - Search Engine Optimization & SMO - Social Media Optimization" »

Direto da Campus Party 2011 - Debate "Trending Topics - o poder do coletivo"

Na terça-feira (18/01), também na área de Social Media, houve o debate sobre os Trending Topics (tópicos mais comentados) ou TT do Twitter, com a presenta de Bia Granja, Rene de Paula Jr, Pablo Peixoto, Chico Barney e Bruno Ferrari.

O pessoal começou fazendo uma consideração que, por mais que pareça óbvia para a maioria, ainda há empresas que não pensam assim: o trend é mais interessante quanto é natural, orgânico. Podemos ter uma amostragem pela plateia, quando pergutaram quem já havia clicado nos trends "Promoted" (termos pagos para aparecerem na lista dos TT): a maioria não clica nestes termos ou pensa duas vezes para clicar. É certo que, muitas vezes, o que soa comercial para o usuário dentro de redes sociais acaba sendo ignorado. Também foi debatido que para uma empresa, uma pessoa ou uma marca, etc, é mais interessante que ela esteja nos trends por um motivo positivo.

Também foi alertada sobre a escolha da hashtag. A hashtag escolhida para promover um determinado conteúdo deve ser bem pensada e elaborada, ser algo fácil e que o pessoal acolha bem, caso contrário ela pode não convergir para o efeito e a audiência necessária. Nisso o Pablo Peixoto citou as hashtags temáticas que ele fazia para o Porra, Maurício (site que mostra tiras da Turma da Mônica fora do contexto original de uma forma divertida) e o caso específico do #xavecoday, destinado a destacar as tiras do personagem Xaveco, mas que acabou sendo interpretado pelos twitteiros como dia de mandar xavecos e a hashtag foi parar no TT mais por este motivo do que pela intenção original.

Os participantes do debate clarificaram um ponto importante: nem toda empresa terá grande parte de sua audiência no Twitter, é preciso que a empresa conheça onde está a sua audiência e dar a devida importância nas ferramentas e serviços onde ela se encontra. Não se deve, por exemplo, gerar grandes esforços para investiver em campanhas e promoções no Twitter se seu público alvo não se encontra lá.

A relevância do TT sobre o que está acontecendo atualmente também foi debatida, pois algumas vezes o TT não reflete o que está acontecendo no momento no mundo, mas aí entra a questão de analisar se as pessoas estão utilizando uma hashtag ou um termo unificado, caso contrário pode atrapalhar para que um assunto chegue aos TT pois há uma dispersão.

Rene de Paula Jr. foi responsável pelas discussões e críticas mais interessantes que propõem reflexões. Em dado momento ele colocou a seguinte questão: Você quer ser popular ou relevante? Afinal, nem sempre um assunto popular no TT é relevante. E aí entra a questão das métricas errôneas sobre o Twitter, onde são considerados números de followers de um perfil para determinar sua relevância. Entretanto, muitos perfis com alto número de seguidores possuem uma baixa taxa de retweets e menções, ou seja, sua relevância pode ser mais baixa do que um perfil que possui menor número de seguidores mas que, dentro desse número, possui uma porcentagem maior de retweets e menções.

Foi mostrado também no debate um paradoxo do Twitter: conforme as pessoas passam a seguir mais perfis, mais difícil fica delas conseguirem ler suas timelines e, com isso, aquele perfil diminui o número de pessoas que lêem os seus tweets e clicam nos links postados, ou seja, a relevância também diminui.

E, sobre o TT, Bia Granja comentou que muitas vezes as mentions e a própria timeline acabam sendo mais relevantes para saber de um determinado assunto do que consultar ou clicar nos termos dos TT.

Por fim, Rene de Paula Jr. encerrou sua participação no debate com chave de ouro: "O que eu sinto falta não são de 140 caracteres mas de 140 pessoas com caráter!".

Leia mais sobre Direto da Campus Party 2011 - Debate "Trending Topics - o poder do coletivo" »

Direto da Campus Party 2011 - Oficina "Direito e Internet"

Ontem, por conta da queda de energia na Campus Party não participei de todas as atividades que havia me inscrito, mas as que consegui assistir trouxeram discussões bem interessantes sobre várias questões pertinentes à websfera.
Ontem à tarde, assisti primeiramente a oficina sobre "Direito e Internet", ministrada por Marcel Leonardi, advogado especializado em direito na internet. Infelizmente não tenho fotos da palestra pois a bateria da minha máquina acabou bem naquele momento.

Entre os tópicos, Marcel abordou:

• Reputação online: as informações presentes na web são capazes de definir a reputação de pessoas e empresas, de forma positiva ou negativa. É preciso considerar também que toda a sua atividade virtual e o conteúdo que você produz estarão praticamente de forma permanente nos mecanismos de busca e devemos tomar cuidado com a nossa postura no ambiente virtual pois podemos ser acionados judicialmente por algo que fazemos. Podemos esquecer de ter feito algo, mas os mecanismos de busca não equecem. Isto inclui produzir um conteúdo sobre um fato apenas com dados parciais e mesmo assim fazer afirmações categóricas. Todas estas questões têm embasamento jurídico dentro da Constituição Federal;
• Anonimato x pseudônimo: no Brasil, há um artigo na Constituição Federal que proíbe o anonimato. Entretanto, o pseudonimato é diferente, pois mesmo a pessoa utilizando uma outra identidade, ainda é possível ser identificada. O que é proibido no Brasil é o anonimato puro, que não permite a identificação da pessoa. Porém há um problema, quando uma pessoa divulga uma informação de forma anônima em serviços como o Twitter, Facebook ou Wordpress, que não têm sede no Brasil, abre-se brechas para que estas pessoas não sejam punidas devidamente, pois, como eles não possuem escritório no Brasil, será válida a legislação local (EUA, que permite o anonimato). Para vítimas de conteúdo de autoria anônima, se o blog utiliza plataforma brasileira, fica mais fácil conseguir retirar o conteúdo do ar. Utilizar os serviços citados anteriormente implica em estar de acordo com seus termos de uso.
• Direito de reposta online: É assegurado o direito de resposta caso alguém tenha publicado conteúdo que infringe os direitos de uma pessoa (CF, art. 5º, V).
• Remoção de conteúdo: uma questão bem delicada, mas previsto no Código Civil, art. 20. Se um material foi publicado sem autorização que atinge a honra,a boa fama ou a respeitabilidade de uma pessoa, este conteúdo pode ser removido. No caso de serviços que encontramos pela internet, caso não seja encontrado o usuário que publicou o material, é possível requerer judicialmente o bloqueio de todo o conteúdo do site em território nacional, como já aconteceu anteriormente. Eu, particularmente, acho que esta questão deve ser revista, pois muitas vezes os serviços não dispoem de meios para monitorar todo o volume de informações publicado, mas aí entra no próximo tópico abordado por Marcel.
• Comentários de terceiros: a controversa questão sobre moderar os conteúdos previamente ou posteriormente. O controle posterior seria o mais adequado para o caso de vídeos, pelos motivos que eu citei acima. Mas, para comentários de blogs, hoje podemos evitar que pessoas postem comentários ofensivos que possam prejudicar o editor do blog, geralmente os sistemas de blog permitem a moderação de comentários. Mas atenção: mesmo moderando os comentários, a jurisprudência considera que blogueiro é sempre responsável pelos comentários (TJ-SP, 994.06.116.162-8) e pode ser responsabilizado se não identificar o autor de um comentário ofensivo (TJ-SP, 528.6910-4/0).
• Marcas: vemos muitas paródias de marcas pela internet, algumas inofensivas e outras com a intenção de chamar a atenção para um determinado problema ou característica. Mas, a lei assegura ao titular de uma marca o direito de zelar pela sua integridade material ou reputação, por isso deve-se pensar 2 vezes antes de parodiar uma marca, salvo em caso de "citação da marca em discurso, obra científica ou literária ou qualquer outra publicação, desde que sem conotação comercial e sem prejuízo para seu caráter distintivo".

Marcel também respondeu dúvidas da plateia com relação à bullying virtual, calúnia e direito autoral. A oficina foi bem interessante por clarificar que a legislação atual cobre vários aspectos de direitos e deveres tanto de usuários quanto de editores de conteúdo, porém, vale lembrar que a nossa legislação ainda precisa abordar outras questões, especialmente com relação a crimes virtuais.

Leia mais sobre Direto da Campus Party 2011 - Oficina "Direito e Internet" »

Primeiras Impressões sobre a Campus Party 2011

"ooooOOOoooOOOOooo!!" Ontem, dia 17/01, estava começando a 4ª edição da Campus Party Brasil, no Centro de Exposições Imigrantes (São Paulo). Estão aqui mais de 6000 campuseiros, fora os palestrantes, blogueiros, twitteiros, podcasters.

Expectativas à parte, algumas coisas me deixaram um pouco desapontada com o evento. A organização deixou um pouco a desejar no primeiro dia, em que praticamente são feitos apenas os cadastramentos e a instalação dos campuseiros. Vim com a caravana de Bauru e nós tivemos que passar cerca de 8 horas na fila, de pé, para conseguir as credenciais e depois mais um tempo considerável, em uma outra fila extensa, para conseguir passar para a área de camping. Não consegui cadastrar o pacote de alimentação no primeiro dia, pois a fila também estava extensa. Eu e a Cissa Gatto, organizadora das GarotasCPBr, recorremos a um lanche como janta. Ainda sobre o pacote de alimentação: apesar da comida ser muito boa, na hora do almoço eles não estavam repondo os refrigerantes. Acabei desistindo de jantar também pelo mesmo motivo e preparei o Cup Noodles que veio no kit da CPBr.

Hoje, o que "abalou" também a Campus Party foi o apagão que ocorreu entre as 18h e 19h. Várias atividades foram interrompidas, os campuseiros ficaram sem internet, enfim... A organização da Campus Party se manifestou sobre a obtenção de geradores, que poderão ser por conta do evento, uma vez que supostamente a Eletropaulo não se responsabilizou pelo ocorrido.

Também há o problema de conexão com a internet, pois nem todos os cabos com velocidade de 10 Gb estão funcionando adequadamente.

Mas, mesmo com todos os incidentes, o evento está sendo muito bom, hoje assisti parte do debate entre Al Gore, ex-vice presidente dos EUA, e Tim Berners-Lee, o, digamos, criador da World Wide Web, sobre os rumos da internet, a forma como as pessoas utilizam e compartilham as informações. Também assisti a uma palestra sobre Direito e Internet no palco de Social Media e logo mais terá um debate sobre "Trending Topics - O poder do coletivo" também na área de Social Media. Detalhes later :)http://garotascpbr.com.br/

Leia mais sobre Primeiras Impressões sobre a Campus Party 2011 »

O que há de bom na Campus Party 2011 para Desenvolvedores Front-End

Olá pessoal! Um Feliz Ano Novo a todos!

E 2011 começa muito bem. De 17 a 22 de janeiro acontece em São Paulo mais uma edição da Campus Party, um dos maiores eventos de inovação, ciência, criatividade e entretenimento digital. São 13 área que oferecem diversas atividades entre palestras, oficinas e debates.

Será a primeira vez que vou no evento e creio que será uma grande oportunidade de agregar novos conhecimentos. Neste momento, uma das minhas dificuldades foi conseguir fechar minha agenda do evento, pois há muitas atividades em vários setores e dá vontade de participar de tudo.

Como desenvolvedora front-end [(X)HTML/CSS], vou listar algumas atividades interessantes que podem lhe dar uma forcinha nesta tarefa. Há atividades que vão além do design/desenvolvimento front-end e acrescentam conhecimentos muito úteis. Infelizmente, não consegui me inscrever em todas por conflitos de horários. As informações foram retiradas do site da Campus Party.

Área: Desenvolvimento

Palestra: Introdução ao Node.JS - Terça, das 16h às 17h
Lembra quando você usava Javascript apenas para validar formulários? Pois é, passado o tempo ele começou a ser usado para dar experiências ricas aos usuários e agora ele chega com força no desenvolvimento Server-Side. Ainda não sabe direito o que é NodeJS? Precisa criar aplicações com alta concorrência? Interessado em desenvolver Jogos multiplayer na rede? Ainda acha que Javascript é simplesmente um scriptzinho que valida formulários e brinca de AJAX? Entenda como o NodeJS vai facilitar muito a sua vida no desenvolvimento web com uma performance impressionante.

Palestra: Desenvolvendo um site completo com ASP.NET - Quarta, das 14h30 às 15h30
Veja nesta palestra como desenvolver um site de catálogo de produtos utilizando ASP.NET MVC e JQuery. Será apresentado as novidades do ASP.NET MVC 3 com Razor e como construir recursos ricos com JQuery, totalmente integrado ao Visual Studio 2010.

Palestra: HTML 5 - Sexta, das 16h às 17h
Ele chegou com tudo! Na sua quinta versão, o HTML será uma das linguagens padrão da Web Semântica, representando alterações importantes que resultarão em mudanças significativas na navegação, design e vários outros tópicos que serão mostrados em detalhes nesta palestra.

Palestra: HTML 5 - Hands On - Sexta, das 17h30 às 18h30
Empolgados depois da palestra sobre HTML5? Então aqui estará montado o cenário perfeito para experimentar este novíssimo e promissor padrão.

Palestra: Futuro da Web, HTML5 e W3C - Sábado, das 9h às 9h45
Apresentação sobre o desenvolvimento e histórico da linguagem HTML e o Consórcio WWW - W3C.

Área: Foto / Vídeo / Design

Oficina: Seu desenho vai virar código, e agora? - Sexta, das 9h30 às 11h30
Que dificuldades surgem na hora de transformar o seu layout em uma página da web? O que um designer precisa saber de CSS antes de iniciar o projeto de um layout? Quais os novos recursos que o CSS3 oferece e os ganhos visuais na hora de projetar layouts para essa linguagem?

Palestra: Social Interface Design - Sexta, das 11h45 às 12h45
Saiba tudo aquilo que vai além da usabilidade dentro do design de interfaces, e que possibilita, de fato, a interação entre pessoas nos ambientes virtuais.

Oficina: Desbravando Fireworks, CSS3 e HTML5 - Sexta, das 15h15 às 17h15
A descrição é a mesma da primeira oficina, não sei se eles colocaram incorretamente no site.

Workshop: Arquitetura da informação - Construindo uma home page - Sexta, das 17h30 às 18h45
Montagem de home. Utilização de recursos tecnológicos. Atividade a ser realizada por duplas. A cada dupla será entregue um iPad ligado ao telão, no qual montará interfaces da página através de componentes prontos. Para tornar isso mais desafiador, atribuiremos níveis, ou seja, para a montagem de cada nível, atributos como inclusão de shopping, publicidade e outras particularidades de veículos deveriam ser obrigatórias.

O que acharam pessoal? Vale lembrar que a CPBrasil tem muitas outras atividades, principalmente para quem se interessa e/ou tem conhecimento também em programação, software livre, mídias sociais, etc.

Leia mais sobre O que há de bom na Campus Party 2011 para Desenvolvedores Front-End »