O que é?
Loja virtual e Comunidade Social Loja virtual de camisetas atrelada a uma comunidade para discussões de idéias políticas, ...
Interface, hoje
 
Conteúdo
Estampas! “ Estampa” é o conjunto de: - preço - descrição - nome - árvores a serem plantadas - valor a ser doado - ilustra...
Comunidade “Camisa Social” Comunidade inserida na loja. Conjunto de blogs e fóruns, sobre política, meio ambiente e questõ...
Usuário e Carrinho de Compras Conta do usuário: - histórico de pedidos - histórico de doações - dados pessoais Carrinho de...
Textos e mais textos “ A Marca”, contando tudo sobre a Politik “ Notícias” (ou “Novidades”) sobre a loja, produtos e comun...
Tarefas
Usuários Compra de camisetas Participação na Comunidade “Camisa Social” e nas notícias da loja Comentários
Funcionários do site Administração (ou seja, alteração, inclusão e exclusão): - de estampas - dos blogs - de notícias - de...
SEO – Otimização para sistemas de busca
Título, meta tags, alts, etc Título do site:  “POLITIK – Vista seus ideais – “ + seção (por exemplo: “A marca”, “Comunidad...
Meta Robots e robots.txt:  configurar o arquivo corretamente e indicar na “meta robots” para não indexar a página do carri...
Guidelines W3C Utilizar as recomendações do W3C para a criação do site Tableless CSS em arquivo separado ALT das imagens
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...
 
Pay Per Click e Ferramentas - Google: Ad Words, Ferramentas para Webmasters e toolbar - Yahoo: Search Marketing e Site Exp...
 
Sitemaps! Mapa do site em formato XML para o Google
Fácil de usar = fácil de achar Usabilidade, acessibilidade e consistência ajudam a achar o site mais facilmente “ Google é...
Acessibilidade
Guidelines do W3C Seguir as recomendações do W3C para XHTML, Tableless, CSS, alt nas imagens, <strong>, <h1>, etc
Validadores Não são a solução, mas já são um caminho W3C (CSS e XHTML) e DaSilva (Acessibilidade)
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
Usabilidade
Lojas virtuais Não inventar: seguir o padrão já estabelecido na web para lojas virtuais  Utilizar o Carrinho de compras
Busca inteligente Utilizar sistema de tags e classes para classificação das estampas, facilitando a busca Tags viram palav...
Ajuda Utilizar sistema de ajuda que abra o conteúdo referente a página a qual o usuário estiver acessando
Mapa do site Sempre útil.
Portabilidade
Tableless + CSS, sempre! Não custa repetir. Recomendações do W3C! Passar pelos validadores deles. Testar no maior número d...
CSS “mutante” CSS específico para cada tipo de dispositivo (browser, celular, impressão, etc).
Site para celular Avaliar a criação de um site separado para celular (com o conteúdo da &quot;Camisa Social”, principalmen...
Consistência e Convenção
Consistência Visual Utilizar a idéia de boxes em todo o site Mesma formatação de título Mesma linha visual para a Comunida...
Convenção Seguir convenção de desenho de interface (logomarca no canto superior esquerdo, busca no canto superior direito,...
Colaboração
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...
Integração com outros serviços 2.0 Digg, del.icio.us, RSS, Orkut (comunidades), widgets, etc
Próximos passos
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çã...
Referências
Apresentação &quot;Como tornar seu site atraente&quot; Horário Soares http://www.slideshare.net/horacio.soares/como-tornar...
AddMe http://www.addme.com Amazon http://www.amazon.com Correios http://www.correios.com.br DaSilva http://www.dasilva.org...
Obrigado
Upcoming SlideShare
Loading in …5
×

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

1,264 views
1,201 views

Published on

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.

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,264
On SlideShare
0
From Embeds
0
Number of Embeds
38
Actions
Shares
0
Downloads
46
Comments
0
Likes
0
Embeds 0
No embeds

No notes for 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

×