Politik - Mudanças para deixar o site "atraente"

1.302 visualizações

Publicada em

Alterações para deixar o site "atraente". Trabalho da discplina Design de Interfaces Interativas II, da Pós em Webdesign da UniverCidade - Rio de Janeiro, ministrada pelo professor Robson Santos.

Publicada em: Tecnologia
0 comentários
0 gostaram
Estatísticas
Notas
  • Seja o primeiro a comentar

  • Seja a primeira pessoa a gostar disto

Sem downloads
Visualizações
Visualizações totais
1.302
No SlideShare
0
A partir de incorporações
0
Número de incorporações
39
Ações
Compartilhamentos
0
Downloads
46
Comentários
0
Gostaram
0
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

Politik - Mudanças para deixar o site "atraente"

  1. 2. O que é?
  2. 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)
  3. 4. Interface, hoje
  4. 6. Conteúdo
  5. 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
  6. 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
  7. 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)
  8. 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”
  9. 11. Tarefas
  10. 12. Usuários Compra de camisetas Participação na Comunidade “Camisa Social” e nas notícias da loja Comentários
  11. 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”)
  12. 14. SEO – Otimização para sistemas de busca
  13. 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
  14. 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).
  15. 17. Guidelines W3C Utilizar as recomendações do W3C para a criação do site Tableless CSS em arquivo separado ALT das imagens
  16. 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)
  17. 20. Pay Per Click e Ferramentas - Google: Ad Words, Ferramentas para Webmasters e toolbar - Yahoo: Search Marketing e Site Explorer
  18. 22. Sitemaps! Mapa do site em formato XML para o Google
  19. 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”
  20. 24. Acessibilidade
  21. 25. Guidelines do W3C Seguir as recomendações do W3C para XHTML, Tableless, CSS, alt nas imagens, <strong>, <h1>, etc
  22. 26. Validadores Não são a solução, mas já são um caminho W3C (CSS e XHTML) e DaSilva (Acessibilidade)
  23. 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
  24. 28. Usabilidade
  25. 29. Lojas virtuais Não inventar: seguir o padrão já estabelecido na web para lojas virtuais Utilizar o Carrinho de compras
  26. 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)
  27. 31. Ajuda Utilizar sistema de ajuda que abra o conteúdo referente a página a qual o usuário estiver acessando
  28. 32. Mapa do site Sempre útil.
  29. 33. Portabilidade
  30. 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.
  31. 35. CSS “mutante” CSS específico para cada tipo de dispositivo (browser, celular, impressão, etc).
  32. 36. Site para celular Avaliar a criação de um site separado para celular (com o conteúdo da &quot;Camisa Social”, principalmente)
  33. 37. Consistência e Convenção
  34. 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)
  35. 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é)
  36. 40. Colaboração
  37. 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
  38. 42. Integração com outros serviços 2.0 Digg, del.icio.us, RSS, Orkut (comunidades), widgets, etc
  39. 43. Próximos passos
  40. 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
  41. 45. Referências
  42. 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
  43. 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
  44. 48. Obrigado

×