A Politik é uma loja virtual de camisetas atrelada a uma comunidade sobre questões políticas, sociais e ambientais. Os usuários podem comprar camisetas, participar de discussões e escolher projetos sociais e ambientais para receber doações geradas pelas vendas. A loja precisa melhorar a usabilidade, acessibilidade e otimização para mecanismos de busca.

2. O que é?

3. Loja virtual e Comunidade Social Loja virtual de camisetas atrelada a uma comunidade para discussões de idéias políticas, sociais e/ou ambientais Cada venda de camiseta gera uma contrapartida social e ambiental definida pelos usuários (escolhendo um projeto de uma lista determinada pela loja)

4. Interface, hoje

6. Conteúdo

7. Estampas! “ Estampa” é o conjunto de: - preço - descrição - nome - árvores a serem plantadas - valor a ser doado - ilustração (a própria estampa) - fotos de modelos Comentários das estampas feitos pelos usuários também fazem parte

8. Comunidade “Camisa Social” Comunidade inserida na loja. Conjunto de blogs e fóruns, sobre política, meio ambiente e questões sociais (sociedade e cidadania) Comentários para os usuários cadastrados Posts nos blogs somente por colaboradores da Politik Lista de projetos disponíveis para receber os recursos (o usuário escolhe para quem doar) Acompanhamento dos projetos

9. Usuário e Carrinho de Compras Conta do usuário: - histórico de pedidos - histórico de doações - dados pessoais Carrinho de compras (padrão)

10. Textos e mais textos “ A Marca”, contando tudo sobre a Politik “ Notícias” (ou “Novidades”) sobre a loja, produtos e comunidade. Comentários para os cadastrados “ Ajuda”, “FAQ” e “Política de Privacidade”

11. Tarefas

12. Usuários Compra de camisetas Participação na Comunidade “Camisa Social” e nas notícias da loja Comentários

13. Funcionários do site Administração (ou seja, alteração, inclusão e exclusão): - de estampas - dos blogs - de notícias - de pedidos - de projetos - dos comentários (blogs, estampas, notícias e projetos) - de textos gerais (“Ajuda”, “Política de Privacidade”, “FAQ” e “A Marca”)

14. SEO – Otimização para sistemas de busca

15. Título, meta tags, alts, etc Título do site: “POLITIK – Vista seus ideais – “ + seção (por exemplo: “A marca”, “Comunidade Camisa Social”, etc) Meta description para home: “Loja virtual de camisetas e comunidade para discussões de idéias políticas, sociais e/ou ambientais.” Meta description personalizada para cada seção do site (inclusive na página do produto). Meta keywords: politik, camisetas, camiseta, camisas, camisa, protesto, política, ativismo, revolta, social, ambiente e comunidade

16. Meta Robots e robots.txt: configurar o arquivo corretamente e indicar na “meta robots” para não indexar a página do carrinho de compras (informação dinâmica).

17. Guidelines W3C Utilizar as recomendações do W3C para a criação do site Tableless CSS em arquivo separado ALT das imagens

18. Cadastrar onde for possível Além do Google e Yahoo cadastrar em outros sites de busca Utilizar algum serviço que faça isso automaticamente (AddMe ou iNeedHits, por exemplo)

20. Pay Per Click e Ferramentas - Google: Ad Words, Ferramentas para Webmasters e toolbar - Yahoo: Search Marketing e Site Explorer

22. Sitemaps! Mapa do site em formato XML para o Google

23. Fácil de usar = fácil de achar Usabilidade, acessibilidade e consistência ajudam a achar o site mais facilmente “ Google é o usuário cego mais rico do mundo”

24. Acessibilidade

25. Guidelines do W3C Seguir as recomendações do W3C para XHTML, Tableless, CSS, alt nas imagens, <strong>, <h1>, etc

26. Validadores Não são a solução, mas já são um caminho W3C (CSS e XHTML) e DaSilva (Acessibilidade)

27. Link “Ir para o conteúdo” Inserir em todas as páginas um link com um atalho para o conteúdo principal da página

28. Usabilidade

29. Lojas virtuais Não inventar: seguir o padrão já estabelecido na web para lojas virtuais Utilizar o Carrinho de compras

30. Busca inteligente Utilizar sistema de tags e classes para classificação das estampas, facilitando a busca Tags viram palavras chaves para search engines (meta keywords) Sugerir palavras parecidas (baseadas nas tags)

31. Ajuda Utilizar sistema de ajuda que abra o conteúdo referente a página a qual o usuário estiver acessando

32. Mapa do site Sempre útil.

33. Portabilidade

34. Tableless + CSS, sempre! Não custa repetir. Recomendações do W3C! Passar pelos validadores deles. Testar no maior número de browsers e sistemas possíveis.

35. CSS “mutante” CSS específico para cada tipo de dispositivo (browser, celular, impressão, etc).

36. Site para celular Avaliar a criação de um site separado para celular (com o conteúdo da &quot;Camisa Social”, principalmente)

37. Consistência e Convenção

38. Consistência Visual Utilizar a idéia de boxes em todo o site Mesma formatação de título Mesma linha visual para a Comunidade “Camisa Social” (logicamente com algumas características particulares)

39. Convenção Seguir convenção de desenho de interface (logomarca no canto superior esquerdo, busca no canto superior direito, navegação global na parte superior com links na horizontal e navegação de rodapé)

40. Colaboração

41. Participação Fórum para os usuários. Deixar comentar tudo o que for possível, com o mínimo de censura possível (dentro dos limites do bom senso, obviamente) Concursos sazonais para criação de estampas pelos usuários

42. Integração com outros serviços 2.0 Digg, del.icio.us, RSS, Orkut (comunidades), widgets, etc

43. Próximos passos

44. Mão na massa - implementação Rever o código HTML da página que existe hoje e implementar as mudanças vistas na apresentação Passar pelos validadores (W3C e Da Silva) Avaliação por checklist – guidelines W3C Avaliação de usabilidade por tarefas SEO

45. Referências

46. Apresentação &quot;Como tornar seu site atraente&quot; Horário Soares http://www.slideshare.net/horacio.soares/como-tornar-seu-site-atraente Apresentação &quot;Elegância e Simplicidade&quot; Robson Santos http://www.slideshare.net/robsonsantos/elegncia-e-simplicidade Apresentação &quot;Entrega de Conteúdo para internet móvel&quot; Robson Santos http://www.slideshare.net/robsonsantos/entrega-de-contedo-para-internet-mvel/ Capítulo 4 da dissertação de mestrado &quot;Otimização de websites para mecanismos de busca na Internet: uma contribuição do Ergodesign.&quot; Patrick Scripilliti

47. AddMe http://www.addme.com Amazon http://www.amazon.com Correios http://www.correios.com.br DaSilva http://www.dasilva.org.br del.icio.us http://del.icio.us Digg http://www.digg.com Firefox http://www.firefox.com Google http://www.google.com.br iNeedHits http://www.ineddhits.com Internet Explorer http://www.microsoft.com/brasil/windows/ie/default.mspx Ponto Frio http://www.pontofrio.com.br Submarino http://www.submarino.com.br Yahoo http://www.yahoo.com.br W3C http://www.w3c.org

48. Obrigado