Universidade do Estado da Bahia – UNEB / Profª Josemeire Machado Dias :: 2007UCSal – Disciplina...

Universidade do Estado da Bahia – UNEB / Profª Josemeire Machado Dias :: 2007UCSal – Disciplina Novas Tecnologias / Profª Josemeire Machado Dias

Uma visão Geral sobre Webdesign e Interfaces

Novas Tecnologias Aplicadas às artes

VisuaisTema da Aula:

Webdesign e Interfaces



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

Fonte: Guia de Empregos: http://www.ijobs.com.br/

http://www.widesoft.com.br/users/virtual/profis.htm


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

Mecanismos de

Interação

Representação Visual

Webdesign

Webdeveloper



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


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

Sites participativos = Chamado Web2.0

Fonte: Revista INFO. Setembro de 2007

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

Fonte: PLANTÃO INFO / 09/2007 / TI



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 Da Resolução de tela do usuário;

Fonte: Revista INFO. Setembro de 2007



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: http://info.abril.com.br/

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?



Quem vê o seu projeto

Brasil é o 36° em Banda Larga

Apenas 1,9% da população estão usando a banda larga.

Qual a relação deste gráfico com o desenvolvimento de projetos para os meios digitais?



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 WebCURIOSIDADE 2

Considerando que as duas imagens acima possuem a mesma dimensão e quantidade de cores. Qual delas terá o maior tamanho?


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 da fontes sem serifa um padrão de utilização.

Devemos utilizar as fontes mais comuns de serem encontradas, como Tahoma, Verdana e Arial.

O que acontece se o usuário não tiver em seu computador a fonte especificada no projeto?



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.



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.

Teclado virtual – tecnologia laser €139.99



...tecnologias “novas”...

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

Fonte: Revista Veja

Papel Eletrônico




Fonte: Revista Veja

IPad




A LG Display desenvolveu uma tela de papel eletrônico flexível, mais ou menos do tamanho de uma folha A3. Para ser mais específico, a tela possui 19 polegadas e 0,3 milímetros de espessura, podendo ser dobrada como um jornal

Fonte: http://www.techguru.com.br/lg-apresenta-papel-eletronico-flexivel.htm

Papel Eletrônico - Flexível



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 [Vídeo]





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)



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




5. Prevenção de erros

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




8. Estética e design minimalista


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

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




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

Avaliação do site da Unifacs ou Uneb, utilizando as heurísticas de Nielsen



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.

Universidade do Estado da Bahia – UNEB / Profª Josemeire Machado Dias :: 2007UCSal – Disciplina...

Documents

Transcript of Universidade do Estado da Bahia – UNEB / Profª Josemeire Machado Dias :: 2007UCSal – Disciplina...