O que é?

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)

Interface, hoje

Conteúdo

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

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 projetosdisponíveis para receberos recursos (o usuárioescolhe para quem doar)

Acompanhamentodos projetos

Usuário e Carrinhode Compras

Conta do usuário:

- histórico de pedidos- histórico de doações- dados pessoais

Carrinho de compras (padrão)

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”

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 pedidos- de projetos- dos comentários (blogs, estampas, notícias e projetos)- de textos gerais (“Ajuda”, “Política de Privacidade”, “FAQ” e “A Marca”)

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”, “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

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).

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 automaticamente (AddMe ou iNeedHits, por exemplo)

Pay Per Click e Ferramentas

- Google: Ad Words, Ferramentas para Webmasters e toolbar

- Yahoo: Search Marketing e Site Explorer

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 é o usuário cego mais rico do mundo”

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 palavras chaves para search engines (meta keywords)

Sugerir palavras parecidas (baseadas nas tags)

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 de browsers e sistemas possíveis.

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 "Camisa Social”, principalmente)

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 Comunidade “Camisa Social” (logicamente com algumas características particulares)

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é)

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 limites do bom senso, obviamente)

Concursos sazonais para criação de estampas pelos usuários

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ção

Passar pelos validadores (W3C e Da Silva)

Avaliação por checklist – guidelines W3C

Avaliação de usabilidade por tarefas

SEO

Referências

Apresentação "Como tornar seu site atraente"Horário Soareshttp://www.slideshare.net/horacio.soares/como-tornar-seu-site-atraente

Apresentação "Elegância e Simplicidade"Robson Santoshttp://www.slideshare.net/robsonsantos/elegncia-e-simplicidade

Apresentação "Entrega de Conteúdo para internet móvel"Robson Santoshttp://www.slideshare.net/robsonsantos/entrega-de-contedo-para-internet-mvel/

Capítulo 4 da dissertação de mestrado "Otimização de websites para mecanismos de busca na Internet: uma contribuição do Ergodesign."Patrick Scripilliti

AddMehttp://www.addme.com

Amazonhttp://www.amazon.com

Correioshttp://www.correios.com.br

DaSilvahttp://www.dasilva.org.br

del.icio.ushttp://del.icio.us

Digghttp://www.digg.com

Firefoxhttp://www.firefox.com

Googlehttp://www.google.com.br

iNeedHitshttp://www.ineddhits.com

Internet Explorerhttp://www.microsoft.com/brasil/windows/ie/default.mspx

Ponto Friohttp://www.pontofrio.com.br

Submarinohttp://www.submarino.com.br

Yahoohttp://www.yahoo.com.br

W3Chttp://www.w3c.org

Obrigado