Desenvolvimento de Sites V.2

Patrícia Mallmann Garcia

Unisinos 2008

1. Processo para desenvolvimento de sites

2. Dicas de criação

3. Novos comportamentos

4. Material para desenvolvimento


A. Sites de experiência

B. Portais de conteúdo

C. Presença de empresas na web

D. Aplicações



São sites que tem como premissa gerar uma experiência forte e única ao usuário. Esses sites são criativos, dinâmicos e interativos. Geralmente são construídos com ferramentas de animação e interação.

O que não interessa:

• Retorno do usuário ao site

• Ferramentas de buscas

• Otimização e peso da página (tempo de carregamento).

• Tempo de veiculação (são sites temporais, como campanhas publicitárias)

A experiência tem que ser plena e a divulgação ocorre normalmente de forma viral.





Um portal é um site na internet que funciona como centro aglomerador e distribuidor de conteúdo para uma série de outros sites ou subsites dentro, e também fora, do domínio ou subdomínio da empresa gestora do portal. (Wikipedia)

O que é premissa nesses projetos:

• Usabilidade, acessibilidade, performance da máquina, entre outros.

O que não é bem vindo:

• Animações, vídeos e imagens de layout.





São os sites institucionais. Toda empresa deve ter sua presença no meio virtual assim como no físico. Esses sites tem fins marketeiros e a criação é secundária.

O que interessa:

• Posicionamento no Google

• Retorno do usuário

• Usabilidade, facilidade de encontrar a informação

• Interface amigável

• Lembrança da marca

• Transmitir os princípios e valores da empresa

Há casos que empresas trabalham sua imagem como os sites de experiência, ou seja, a cada campanha o site é remodelado.




D. Aplicações

Aplicação Web é o termo utilizado para designar, de forma geral, sistemas de informática projetados para utilização através de um navegador, na internet ou em redes privadas ( Intranet ). Trata-se de um conjunto de programas que é executado em um servidor de HTTP (Web Host). O desenvolvimento da tecnologia web está relacionado, entre outros fatores, à necessidade de simplificar a atualização e manutenção mantendo o código-fonte em um mesmo local, de onde ele é acessado pelos diferentes usuários.

Podemos definir uma aplicação Web como uma aplicação de software que utiliza a Web, através de um browser como ambiente de execução.

(Wikipedia)


D. Aplicações


A. Sites de experiência Comercial > gerente de serviço > planejamento criativo + diretor de arte + redação > produção > codificação > programação = entrega


Analista de negócio > SEO + acessibilidade > design de interface > design gráfico > testes de usabilidade > codificação > programação > homologação = entrega

C. Presença de empresas na webComercial > analista de negócio > gerente de projeto > design de interface > design gráfico > redação > codificação > programação = entrega

D. AplicaçõesAnalista de negócio > design de interface > design gráfico > testes de usuabilidade > analista de sistemas > programação = entrega


Etapas de aprovação do projeto


1ª entrega: Sitemap É elaborado pelo produto, analista de negócio ou gerente de projeto.

A. Capa principal

A. Esportes C. Vídeos D.3 Blogs I. RSS

C.1 Vídeos

C.2 Áudios

C.3 Fotos

D. Blogs (lista)

E.X. Página do BlogA.1 Capa Time

A.2 Capa Campeonato

B. Notícias

LinkDúvidas freqüentes

B.1 Lista

B.2 Notícia Aberta

LinkFale Conosco

LinkAnuncie

Atemdimento

Destaque Login

Legenda

Seção de 1º nívelHome Sub-seções Seção externa Link Estrutural

Skin Seção totalmente restrita RSSGrupo de crosslinks


2º entrega: Wireframe É elaborado pelo designer de interface (arquiteto de informação).


O que é wireframe?

O wireframe pode ser considerado o esqueleto de uma interface. Através dele é possível definir posicionamento, navegação, agrupamento, ordem, hierarquia e peso de conteúdos, ou seja, ele responde pela organização dos elementos de interface sem trabalhar a apresentação visual.

Seus componentes devem ser realizados de acordo com seu grau de relevância e criticidade de acesso, o modo de exibição e interação dessa informação com o usuário.

Validar organização dos elementos na interface: posicionamento, navegação, agrupamento, ordem, hierarquia e peso;

• Relevância entre áreas e componentes;

• Modo de interação e exibição do conteúdo ao usuário.


O que faz um designer/projetista de interface?

Um projetista de interface é responsável basicamente por três atributos de qualquer interface: formato e densidade informacional, a localização desta informação na interface e o modo de interação com o usuário.

Atividades de um projetista de interface

• Entender e definir a lógica de navegação do ambiente;

• Fomentar acesso às páginas menos acessadas e a conteúdos relacionados;

• Orientar a navegação do usuário;

• Estabelecer áreas de apoio à sua interação;

• Garantir interfaces mais intuitivas e orientadas ao usuário.


3° entrega: Layout É elaborado pelo design gráfico.


4° entrega: Codificação e produção

É entregue pelo htmller (web standards), flasher, 3D designer e outros.

5° entrega: Programação

É entregue pelo programador já com todas interações e pronto para publicação. Esse processo pode ser bem complexo, envolvendo analista de sistemas e diversas tecnologias.


SEO


O que é SEO?

Search Engine Optimization, é a otimização de Sites, refere-se ao conjunto de estratégias com o objetivo de potencializar e melhorar o posicionamento de um site nas páginas de resultados naturais (orgânicos) nos sites de busca.

As técnicas utilizadas no SEO são concebidas para alavancar seus objetivos no seu website melhorando o número e a posição de seus resultados nas busca orgânica para uma grande variedade de palavras-chave relevantes ao conteúdo do web site. Estratégias de SEO podem melhorar tanto o número de visitações quanto a qualidade dos visitantes, onde qualidade significa que os visitantes concluem a ação esperada pelo proprietário do site (ex. comprar, assinar, aprender algo).

www.google.com.br/webmasters






a. Acompanhar o desenvolvimento da web

b. Utilizar os padrões sempre que não houver um motivo muito forte para fugir deles

c. Clean é a palavra do momento, design minimalista

d. Fazer estudo de cores, refinar os acabamentos

e. Deixar áreas de respiro na página

f. Estudar o público e os concorrentes

g. Traçar etapas do projeto e deixar que o usuário avalie

h. Reconhecer que você não sabe tudo, procure profissionais qualificados nas demais especialidades

i. Busque referências, sempre!

j. Domine mais de um software

k. Vá em eventos

Quais as funções do layout?


1. Comunicar

2. Gerar sensações

3. Dar valor a marca

4. Hierarquizar o conteúdo

5. Criar identidade






Web 2.0

Web 2.0 é um termo cunhado em 2004 pela empresa estadunidense O'Reilly Media[1] para designar uma segunda geração de comunidades e serviços baseados na plataforma Web, como wikis, aplicações baseadas em folksonomia e redes sociais. Embora o termo tenha uma conotação de uma nova versão para a Web, ele não se refere à atualização nas suas especificações técnicas, mas a uma mudança na forma como ela é encarada por usuários e desenvolvedores. (Wikipedia)


Cauda Longa

O conceito trata basicamente do fenômeno que tem gerado migração da cultura de hits (oferta de produtos e serviços mais procurados) para a cultura de nichos (público restrito de interessados), a partir da viabilização de produção, exibição do conteúdo amador e baixo custo no comércio digital.

Com essa nova disposição de produtos no mundo digital, os consumidores tornam-se menos fieis às marcas e mais propensos a novas experimentações.


Redes Sociais

São as relações entre os indivíduos na comunicação mediada por computador. Esses sistemas funcionam através da interação social, buscando conectar pessoas e proporcionar sua comunicação e, portanto, podem ser utilizados para forjar laços sociais. As pessoas levam em conta diversos fatores ao escolher conectar-se ou não a alguém. (Wikipedia)

=


RSS

A tecnologia do RSS permite aos usuários da internet se inscreverem em sites que fornecem "feeds" (fontes) RSS. Estes são tipicamente sites que mudam ou atualizam o seu conteúdo regularmente. Para isso, são utilizados Feeds RSS que recebem estas atualizações, desta maneira o usuário pode permanecer informado de diversas atualizações em diversos sites sem precisar visitá-los um a um. (Wikipedia)


Widgets

Um widget é um componente de uma interface gráfica do utilizador (GUI), o que inclui janelas,

botões, menus, ícones, barras de rolagem, etc. Outro emprego do termo são os widgets da área de trabalho, pequenos aplicativos que flutuam pela área de trabalho e fornecem funcionalidade específicas ao utilizador (previsão do tempo, cotação de moedas, relógio, ...) (Wikipedia)






Fontes de sistema

Fontes compatíveis com: Mac OS (Tiger e Leopard) e Windows OS (XP SP2 e Vista)

• Arial

• Arial Black

• Comic Sans MS

• Courier New

• Georgia

• Impact

• Tahoma (- Mac OS Tiger)

• Times New Roman

• Trebuchet MS

• Verdana


As 10 heurísticas de Nielsen

1. FeedbackO sistema deve informar continuamente ao usuário sobre o que ele está fazendo. 10 segundos é o limite para manter a atenção do usuário focalizada no diálogo.

2. Falar a linguagem do usuárioA terminologia deve ser baseada na linguagem do usuário e não orientada ao sistema. As informações devem ser organizadas conforme o modelo mental do usuário.

3. Saídas claramente demarcadasO usuário controla o sistema, ele pode, a qualquer momento, abortar uma tarefa, ou desfazer uma operação e retornar ao estado anterior.

4. ConsistênciaUm mesmo comando ou ação deve ter sempre o mesmo efeito. A mesma operação deve ser apresentada na mesma localização e deve ser formatada/apresentada da mesma maneira para facilitar o reconhecimento.



5. Prevenir errosEvitar situações de erro. Conhecer as situações que mais provocam erros e modificar a interface para que estes erros não ocorram.

6. Minimizar a sobrecarga de memória do usuárioO sistema deve mostrar os elementos de diálogo e permitir que o usuário faça suas escolhas, sem a necessidade de lembrar um comando específico.

7. AtalhosPara usuários experientes executarem as operações mais rapidamente. Abreviações, teclas de função, duplo clique no mouse, função de volta em sistemas hipertexto. Atalhos também servem para recuperar informações que estão numa profundidade na árvore navegacional a partir da interface principal.



8. Diálogos simples e naturaisDeve-se apresentar exatamente a informação que o usuário precisa no momento, nem mais nem menos. A seqüência da interação e o acesso aos objetos e operações devem ser compatíveis com o modo pelo qual o usuário realiza suas tarefas.

9. Boas mensagens de erroLinguagem clara e sem códigos. Devem ajudar o usuário a entender e resolver o problema. Não devem culpar ou intimidar o usuário.

10. Ajuda e documentaçãoO ideal é que um software seja tão fácil de usar (intuitivo) que não necessite de ajuda ou documentação. Se for necessária a ajuda deve estar facilmente acessível on-line.


Galerias para busca de referências

• www.istockphoto.com

• www.deviantart.com

• http://bestwebgallery.com

• www.designineurope.eu

• www.mydesignaward.com

• www.netdiver.net

• http://mediainspiration.com

• www.e-creative.net

• http://linkdup.com

• www.thefwa.com


Sugestões de leituras básicas

• Não me Faça Pensar - STEVE KRUG

• Design para a Internet: Projetando a Experiência Perfeita - FELIPE MEMORIA

• Design de Interação - Além da Interação Homem-Computador - JENNIFER PREECE & YVONNE ROGERS & HELEN SHARP

• Design para quem não é designer - ROBIN WILLIAMS

WEB STANDARDS

• Projetando Web Sites Compatíveis - JEFFREY ZELDMAN