Apresenta

1
Introdução à Informática Uma conversa sobre
Internet e Design para Web
2
Novas atividades, novas funções

• A Internet comercial provocou o surgimento de
  novas atividades e funções
• Webdesigner
• Webdeveloper
• Webmaster
• Webwriter redação de matérias e textos para
  sites
• Websurfer Manutenção de Páginas
• Mais???

3
Webdesign O sentido da Palavra
Mecanismos de Interação
Representação Visual
Webdeveloper (Programador)
Webdesign(O artista)
4
Fases (épocas) do Web design

• Sites Cartão de Visita
• Sites institucionais com informações sobre a
  empresa e um certo número de páginas
• Sites com o oferecimento de alguns serviços
• Sites complexos compostos por diversas
  tecnologias
• Sites participativos Chamado Web2.0
• Emitam opinião sobre a Web 2.0...
• E a Web 3.0...

5
Fases (épocas) do Web design

• Web 3.0
• A Web 3.0 propõe-se a ser, num período de cinco
  a dez anos, a terceira geração da Internet. A
  primeira, Web 1.0, foi a implantação e
  popularização da rede em si a Web 2.0 é a que o
  mundo vive hoje, centrada nos mecanismos de busca
  como Google e nos sites de colaboração do
  internauta, como Wikipedia, YouTube e os sites de
  relacionamento social, como o Facebook e Orkut. A
  Web 3.0 pretende ser a organização e o uso de
  maneira mais inteligente de todo o conhecimento
  já disponível na Internet.
• Exemplo http//www.cortex-intelligence.com/engine
  /

6
Fases (épocas) do Web design

• Sites participativos Chamado Web2.0

Fonte da Imagem http//citec.crpconsultores.com.b
r/
7
Fases (épocas) do Web design

• Sites participativos Chamado Web2.0

8
Fases (épocas) do Web design

• Sites participativos Chamado Web2.0

Mashup é um website ou uma aplicação web que usa
conteúdo de mais de uma fonte para criar um novo
serviço completo. O termo mashup deriva da
prática do hip-hop de mixar trechos de música e
vem sendo empregado por diversos sites na
internet, com o objetivo de combinar informações
de várias fontes num único endereço

9
Fases (épocas) do Web design

• Exemplo de Mashup

10
Webdesign x Design Impresso O que diferencia um
do outro?
11
Webdesign x Design Impresso

• Design Impresso todos vêem a mesma coisa
• Design Web - depende
• Da Resolução de tela do usuário
• Da capacidade da placa de vídeo do usuário
• Do Navegador utilizado
• Netscape, Opera, Explorer, Mozilla
• Da versão do Navegador
• Do sistema operacional
• Da existência de plug-ins, etc.

12
Webdesign x Design Impresso

• Do Navegador utilizado
• Internet Explorer e Fire Fox

Os controles somem e não funciona o vídeo
13
Webdesign x Design Impresso

• Da Resolução de tela do usuário

• Fonte Revista INFO.

14
Webdesign x Design Impresso

• Da Resolução de tela do usuário

Tamanho da Tela do monitor e resolução
Medida Resolução
14 800x600
15 800x600
17 1024x768
19 1280x1024
21 1600x1200
Influencia na decisão de projetos a serem
apresentados na tela. Qual resolução utilizar?
15
Quem vê o seu projeto

• A utilização de navegadores no Mundo

• Atualização do gráfico 05/2007
• 78 Internet Explorer
• 15,4 usam o FireFox
• Qual a relação deste gráfico com o
  desenvolvimento de projetos para Web?

Fonte Revista Info Exame. Edição de abril de
2006 Fonte http//info.abril.com.br/aberto/infone
ws/052007/04052007-3.shl Acesso 03/10/2007
16
Ferramentas para o Webdesign

• A linguagem HTML - Ainda é fundamental
• Linguagem de Marcação proveniente da SGML
• O básico para o webdesign
• Edição HTML
• Frontpage agora é Microsoft Expression Web
• Dreamweaver - Adobe
• Edição de Imagens
• Photoshop - Adobe
• FireWorks - Adobe
• Animação
• Flash - Adobe

17
Formatos de Arquivos

• São muitos os formatos de arquivos utilizados na
  Internet, principalmente com surgimento de novas
  linguagens de programação. Podemos destacar os
  seguintes
• Imagens
• GIF Graphics Interchange Format
• JPG Joint Photographic Expert Group
• Páginas
• HTML, htm, asp, php, cfm
• Curiosidade 1
• Qual a diferença de .html para .htm?
• Arquivo.html é igual a arquivo.Html?

18
Tamanho das Imagens para Web

• Para alguns a rede pode ter se tornado um pouco
  mais rápida graças a Banda Larga, mas para a
  maioria, que ainda utiliza modens comuns para se
  conectar, a rede continua lenta!
• Pensar no tamanho das imagens
• Melhor formato para cada tipo de imagem
• Melhor compressão
• Photoshop permite a otimização de imagens para
  Web

19
Escolha de Fontes para o Webdesign
Se perguntarmos a um Webdesigner qual a fonte
ideal para um projeto, certamente receberemos
como resposta Fontes sem serifa, mas poucos
saberão explicar o porque...

• Limitações dos equipamentos da época geravam
  falta de legibilidade nas fontes serifadas, o que
  fez das fontes sem serifa um padrão de utilização.

Devemos utilizar as fontes mais comuns de serem
encontradas, como Tahoma, Verdana e Arial. Isso
ainda é verdade? O que acontece se o usuário não
tiver em seu computador a fonte especificada no
projeto?
20
Escolha de Fontes para o Webdesign
http//www.canaldev.com.br/topico/771-font-face/
http//www.fontsquirrel.com/fontface/generator ht
tp//www.rafaelcorreia.net/?paginanoticiaid2
21
Sistema de Cores do Webdesign
O modelo de cores RGB é baseado no princípio de
que diversos efeitos cromáticos são obtidos pela
projeção da luz branca através dos filtros
vermelho, verde e azul.
Red
Green
Blue
A cada uma das três cores é atribuído um valor de
0 a 255 que combinados formam todas as outras
cores. A codificação Hexadecimal
22
Metodologia para Webdesign

• Além do conhecimento técnico necessário para o
  desenvolvimento de projetos para web é necessário
  também uma metodologia de desenvolvimento que
  direcione ao sucesso do projeto.
• Fase 1 - Visão geral
• Fase 2 Planejamento
• Fase 3 - Definição de uma Identidade Visual
• Fase 4 - Coleta de material
• Fase 5 Desenvolvimento
• Fase 6 - Testes
• Fase 7 Correções
• Fase 8 Publicação
• Fase 9 - Divulgação do Site
• Fase 10 - Manutenção

23
Tipos de projetos para Web

• Portais Horizontais e Verticais
• Comércio eletrônico
• Sistemas Bancários
• Sistemas Acadêmicos
• Sistemas de Busca
• Sistemas de localização
• Trabalho em Equipe muitas áreas envolvidas
• O desenvolvimento de projetos web que ofereça
  serviços é quase impossível ser realizado de
  forma individual

24
Preocupações

• Desenvolvimento de Projetos que
  possuamusabilidade além de funcionalidade
• Frase conhecida
• Designer e Programador não são usuários!
• Necessidade de Critérios de Avaliação dos
  projetos desenvolvidos para uma maior
  aceitaçãono mercado.

25
PARTE 2
26
Webdesign voltado para o usuário Processo de
Avaliação
27
(No Transcript)
28
OBJETIVOS DA AVALIAÇÃO

• Conhecer o que os usuários desejam
• Avaliar a Funcionalidade do projeto
• O sistema permite ao usuário executar a tarefa
  desejada?
• Avaliar a Usabilidade
• É fácil aprender a usar o sistema?
• Identificar os problemas enfrentados pelo
  usuário
• Situações inesperadas ou que confundem os
  usuários
• Se nos voltarmos para o desenvolvimento de
  produtos, os itens acima são válidos?

29
(No Transcript)
30

• Os itens são válidos? Vejam algumas tecnologias
  novas...

Projeta um teclado virtual em uma superfície
plana através de tecnologia laser. Captura em
tempo real a digitação pela intersecção dos dedos
com os raios. http//www.youtube.com/watch?vMBIi
-suIR-Qfeaturerelated Teclado virtual
tecnologia laser R580,00
31
Empresa coreana Cellulon
32
...tecnologias novas...
Papel Eletrônico
O Jornal belga De Tijd entregou 200 unidades do
e-readers para seus assinantes testarem
Fonte Revista Veja
33
(No Transcript)
34
A super Interessante testou o Kindle da Amazon
(Price359.00 ) http//super.abril.com.br/videos
/conteudo_videos_277046.shtml http//www.youtube.c
om/watch?vXdpWnmawiBIfeaturerelated
35
IPADJORNAL DA GLOBO Apple lança o iPad
(27/01/10) http//www.youtube.com/watch?vTCbPXd
IvHlwNR1
36
...tecnologias novas...
Projetor 3D "real"
O novo equipamento, cria imagens 3D reais,
utilizando raios laser que são focalizados por
meio de uma lente até pontos específicos no
espaço. Empresa http//www.io2technology.com/vid
eos acesso em 30/09/2007 Vídeo
37
Em inglês http//gl.ict.usc.edu/Research/3DDispla
y/
Em Português http//uninuni.com/projetor-3d/
38
...tecnologias novas...
Interfaces e Tecnologia O sistema ideal
esconde tanto a tecnologia que o usuário nem nota
sua presença. As pessoas deveriam aprender a
tarefa, não a tecnologia.
39
...tecnologias novas...
Modelo Mental Representação dinâmica sobre
qualquer sistema ou objeto, que evolui
naturalmente na mente de um sujeito É o modelo
que as pessoas tem de si próprias, dos outros, do
ambiente, e das coisas com as quais interagem.
Pessoas formam modelos mentais por meio da
experiência, treinamento e instrução (Norman)
40
Fatores que determinam o tipo de avaliação
() Designing the user Interface. Página 124.
Ben Shneiderman Design e Avaliação de Interfaces
Humano-Computador . Página 164.
41
FATORES DETERMINANTES DO TIPO DE AVALIAÇÃO ()

• Estágio do Projeto - Início, meio ou fim
• Quão inovador é o projeto
• Qual o número esperado de usuários
• Quão crítica é a interface
• Custo do produto e Orçamento disponível para a
  avaliação
• Tempo disponível
• Experiência dos Designers e da equipe de
  avaliação

() Designing the user Interface. Página 124.
Ben Shneiderman Design e Avaliação de Interfaces
Humano-Computador . Página 164.
42
AVALIAÇÃO DE USABILIDADE

• Conjunto de técnicas baseados em se ter
  avaliadores
• inspecionando ou examinando aspectos de uma
  interface de
• usuário relacionados a usabilidade
• Facilidade de Aprendizagem
• Eficiência
• Facilidade de relembrar
• Erros (Eles são catastróficos?)
• Satisfação subjetiva

43
USABILIDADE DEFINIÇÃO FORMAL
A capacidade que um sistema interativo oferece a
seu usuário, em um determinado contexto de
operação, para a realização de tarefas, de
maneira eficaz, eficiente e agradável. (ISO 9241)
44
EXEMPLO DE TÉCNICA DE AVALIAÇÃO
Avaliação Heurística Fácil / Rápida / BarataComo
funciona? Um conjunto de avaliadores examina o
sistema julgando as suas características face a
um conjunto de princípios de usabilidade
(heurísticas)ExemploHeurísticas de Nielsen
(1993)
45
AVALIAÇÃO DE USABILIDADE

• As heurísticas de Nielsen As mais conhecidas
• Visibilidade do sistema Feedback
• Compatibilidade do sistema com o mundo Real
• Controle do usuário e liberdade (undo e redo)
• Consistência e padrões
• Prevenção de erros
• Reconhecimento ao invés de relembrança
• Flexibilidade e eficiência de uso
• Estética e design minimalista
• Ajudar os usuários a reconhecer diagnosticar e
  corrigir erros
• Help e documentação

46
As heurísticas de Nielsen Visibilidade do
sistema Feedback
47
As heurísticas de Nielsen 2. Compatibilidade do
sistema com o mundo Real
48
As heurísticas de Nielsen 2. Compatibilidade do
sistema com o mundo Real
49
As heurísticas de Nielsen 3. Controle do usuário
e liberdade (undo e redo)
50
As heurísticas de Nielsen 4. Consistência e
padrões
51
As heurísticas de Nielsen 5. Prevenção de erros
52
As heurísticas de Nielsen 5. Prevenção de erros
e também falta de consistência
53
As heurísticas de Nielsen 5. Prevenção de erros
54
As heurísticas de Nielsen 5. Prevenção de erros
http//gazetaweb.globo.com/Canais/Empregos/Frame.p
hp?fInclusaoCandidato.php
55
As heurísticas de Nielsen 6. Reconhecimento ao
invés de relembrança
56
As heurísticas de Nielsen 7. Flexibilidade e
eficiência de uso
57
As heurísticas de Nielsen 7. Flexibilidade e
eficiência de uso
58
As heurísticas de Nielsen 8. Estética e design
minimalista
59
As heurísticas de Nielsen 9. Ajudar os usuários
a reconhecer diagnosticar e corrigir erros
60
As heurísticas de Nielsen 9. Ajudar os usuários
a reconhecer diagnosticar e corrigir erros
Se vc nem tem mais o e-mail com o qual vc se
inscreveu Já era... Não existe nem a opção de
enviar a senha para seu e-mail.
61
As heurísticas de Nielsen 10. Help e
documentação
62

• Qual o Resultado da avaliação Heurística?
• Uma lista de problemas referentes aos princípios
  violados
• O grau de severidade de cada problema encontrado
• A avaliação não objetiva prover meios de correção
  dos problemas

63

• Atividade para a aula da semana que vem...
• Avaliação do site da Uneb, utilizando as
  heurísticas de Nielsen
• Vou colocar o material no site.

64
Referências Bibliográficas
NIELSEN, Jakob, TAHIR, Marie. Homepage 50
Websites Desconstruídos. Rio de Janeiro Campus,
2002. NIELSEN, Jakob,. Projetando Websites. Rio
de Janeiro Campus, 2000 ROCHA, Helena Vieira da
BARANAUSKAS, Maria Cecília Calani. Design e
Avaliação de Interfaces humano-computador.
Campinas, SP Instituto de Computação - IC
Núcleo de Informática Aplicada à Educação.
Universidade Estadual de Campinas, 2003. DIAS,
Cláudia. Usabilidade na WEB Criando Portais mais
Acessíveis. Rio de Janeiro Alta Books, 2003. 3D
PROJETOR http//gl.ict.usc.edu/Research/3DDisplay
/ acesso 2/05/2010 IPAD http//www.apple.com/br/i
pad/
65
VIDEOS
Sony unveils prototype 360 3D display
http//www.youtube.com/watch?vlAS55_RngoQfeatur
erelated IPAD JORNAL DA GLOBO Apple lança o
iPad (27/01/10) http//www.youtube.com/watch?vTC
bPXdIvHlwNR1 http//www.youtube.com/watch?vHXe
rnkpBEJo