Universidade do Estado da Bahia – UNEB / Profª Josemeire Machado Dias :: 2007Universidade do Estado da Bahia – UNEB / Profª Josemeire Machado Dias :: 2011

Universidade do Estado da Bahia – UNEB / Profª Josemeire Machado Dias :: 2007Universidade do Estado da Bahia – UNEB / Profª Josemeire Machado Dias :: 2011

Uma visão Geral sobre Webdesign e Interfaces

Introdução à Informática

Uma conversa sobre Internet e Design para Web



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???


Uma visão Geral sobre Webdesign e InterfacesWebdesign – O sentido da Palavra

Mecanismos de

Interação

Representação Visual

Webdesign(O artista)

Webdeveloper

(Programador)



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



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/



Fases (épocas) do Web design Sites participativos = Chamado Web2.0

Fonte da Imagem: http://citec.crpconsultores.com.br/



Fases (épocas) do Web design Sites participativos = Chamado Web2.0


Uma visão Geral sobre Webdesign e InterfacesFases (é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*


Uma visão Geral sobre Webdesign e InterfacesFases (épocas) do Web design

Exemplo de Mashup

*



Webdesign x Design Impresso

O que diferencia um do outro?



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.



Webdesign x Design Impresso Do Navegador utilizado

Internet Explorer e Fire Fox

Os controles somem e não funciona o vídeo



Webdesign x Design Impresso Da Resolução de tela do usuário;

Fonte: Revista INFO.



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?


Uma visão Geral sobre Webdesign e InterfacesQuem vê o seu projeto

A utilização de navegadores no Mundo

Fonte: Revista Info Exame. Edição de abril de 2006

Fonte: http://info.abril.com.br/aberto/infonews/052007/04052007-3.shl Acesso 03/10/2007

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?



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

Ferramentas para o Webdesign



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?



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


Uma visão Geral sobre Webdesign e InterfacesEscolha 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...

ESerifa

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?



Escolha de Fontes para o Webdesign

http://www.canaldev.com.br/topico/771-font-face/

http://www.fontsquirrel.com/fontface/generator

http://www.rafaelcorreia.net/?pagina=noticia&id=2



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

BlueGreen

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



Metodologia para WebdesignAlé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


Uma visão Geral sobre Webdesign e InterfacesTipos 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


Uma visão Geral sobre Webdesign e InterfacesPreocupaçõ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.



PARTE 2



Webdesign voltado para o usuário

Processo de Avaliação



Hardware Software

O ser humano



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?

OBJETIVOS DA AVALIAÇÃO





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?v=MBIi-suIR-Q&feature=related

Teclado virtual – tecnologia laser R$580,00



Empresa coreana Cellulon



...tecnologias “novas”...

O Jornal belga De Tijd entregou 200 unidades do e-readers para seus assinantes testarem

Fonte: Revista Veja

Papel Eletrônico





A super Interessante testou o Kindle da Amazon (Price:$359.00 ):http://super.abril.com.br/videos/conteudo_videos_277046.shtmlhttp://www.youtube.com/watch?v=XdpWnmawiBI&feature=related



IPADJORNAL DA GLOBO: Apple lança o iPad (27/01/10)

http://www.youtube.com/watch?v=TCbPXdIvHlw&NR=1



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/videos acesso em 30/09/2007 [Vídeo]




Em Português:http://uninuni.com/projetor-3d/

Em inglês:http://gl.ict.usc.edu/Research/3DDisplay/




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




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)



(*) Designing the user Interface. Página 124. Ben Shneiderman Design e Avaliação de Interfaces Humano-Computador . Página 164.

Fatores que determinam o 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.

FATORES DETERMINANTES DO TIPO DE AVALIAÇÃO (*)



AVALIAÇÃO DE USABILIDADE

Conjunto de técnicas baseados em se ter avaliadoresinspecionando ou examinando aspectos de uma interface

deusuário relacionados a usabilidade

Facilidade de Aprendizagem Eficiência Facilidade de relembrar Erros (Eles são catastróficos?) Satisfação subjetiva



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)

USABILIDADE – DEFINIÇÃO FORMAL



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)

Exemplo:Heurísticas de Nielsen (1993)

EXEMPLO DE TÉCNICA DE AVALIAÇÃO



As heurísticas de Nielsen – As mais conhecidas

1. Visibilidade do sistema – Feedback2. Compatibilidade do sistema com o mundo Real3. Controle do usuário e liberdade (undo e redo)4. Consistência e padrões5. Prevenção de erros6. Reconhecimento ao invés de relembrança7. Flexibilidade e eficiência de uso8. Estética e design minimalista9. Ajudar os usuários a reconhecer diagnosticar e

corrigir erros10. Help e documentação

AVALIAÇÃO DE USABILIDADE


Uma visão Geral sobre Webdesign e InterfacesAs heurísticas de Nielsen

Visibilidade do sistema – Feedback



As heurísticas de Nielsen2. Compatibilidade do sistema com o mundo Real



As heurísticas de Nielsen2. Compatibilidade do sistema com o mundo Real



As heurísticas de Nielsen

3. Controle do usuário e liberdade (undo e redo)




4. Consistência e padrões




5. Prevenção de erros




5. Prevenção de erros e também falta de consistência









http://gazetaweb.globo.com/Canais/Empregos/Frame.php?f=InclusaoCandidato.php




6. Reconhecimento ao invés de relembrança




7. Flexibilidade e eficiência de uso




7. Flexibilidade e eficiência de uso




8. Estética e design minimalista



9. Ajudar os usuários a reconhecer diagnosticar e corrigir erros



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.




10. Help e documentação



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



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.



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/ipad/

Referências Bibliográficas



Sony unveils prototype 360° 3D display http://www.youtube.com/watch?v=lAS55_RngoQ&feature=related

IPADJORNAL DA GLOBO: Apple lança o iPad (27/01/10) http://www.youtube.com/watch?v=TCbPXdIvHlw&NR=1

http://www.youtube.com/watch?v=HXernkpBEJo

VIDEOS

Documents

Universidade do Estado da Bahia – UNEB / Profª Josemeire Machado Dias :: 2007Universidade do Estado da Bahia – UNEB / Profª Josemeire Machado Dias :: 2011