Universidade do Estado da Bahia – UNEB / Profª Josemeire Machado Dias :: 2007 Uma visão Geral sobre Webdesign e Interfaces Webdesign e Interfaces.

Apresentação em tema: "Universidade do Estado da Bahia – UNEB / Profª Josemeire Machado Dias :: 2007 Uma visão Geral sobre Webdesign e Interfaces Webdesign e Interfaces."— Transcrição da apresentação:

1 Universidade do Estado da Bahia – UNEB / Profª Josemeire Machado Dias :: 2007 Uma visão Geral sobre Webdesign e Interfaces Webdesign e Interfaces

2 Universidade do Estado da Bahia – UNEB / Profª Josemeire Machado Dias :: 2007 Uma visão Geral sobre 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.ijobs.com.br/ http://www.widesoft.com.br/users/virtual/profis.htm

3 Universidade do Estado da Bahia – UNEB / Profª Josemeire Machado Dias :: 2007 Uma visão Geral sobre Webdesign e Interfaces Webdesign – O sentido da Palavra Mecanismos de Interação Representação Visual Webdesign Webdeveloper

4 Universidade do Estado da Bahia – UNEB / Profª Josemeire Machado Dias :: 2007 Uma visão Geral sobre Webdesign e Interfaces 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

5 Universidade do Estado da Bahia – UNEB / Profª Josemeire Machado Dias :: 2007 Uma visão Geral sobre Webdesign e Interfaces 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

6 Universidade do Estado da Bahia – UNEB / Profª Josemeire Machado Dias :: 2007 Uma visão Geral sobre Webdesign e Interfaces 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.

7 Universidade do Estado da Bahia – UNEB / Profª Josemeire Machado Dias :: 2007 Uma visão Geral sobre Webdesign e Interfaces Webdesign x Design Impresso  Da Resolução de tela do usuário;

8 Universidade do Estado da Bahia – UNEB / Profª Josemeire Machado Dias :: 2007 Uma visão Geral sobre Webdesign e Interfaces Webdesign x Design Impresso  Da Resolução de tela do usuário; Tamanho da Tela do monitor e resolução MedidaResoluçã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?

9 Universidade do Estado da Bahia – UNEB / Profª Josemeire Machado Dias :: 2007 Uma visão Geral sobre Webdesign e Interfaces Quem vê o seu projeto  A utilização de navegadores no Mundo Atualização do gráfico  78% Internet Explorer  15,4% usam o FireFox  Qual a relação deste gráfico com o desenvolvimento de projetos para Web?

10 Universidade do Estado da Bahia – UNEB / Profª Josemeire Machado Dias :: 2007 Uma visão Geral sobre Webdesign e Interfaces 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?

11 Universidade do Estado da Bahia – UNEB / Profª Josemeire Machado Dias :: 2007 Uma visão Geral sobre Webdesign e Interfaces  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

12 Universidade do Estado da Bahia – UNEB / Profª Josemeire Machado Dias :: 2007 Uma visão Geral sobre Webdesign e Interfaces 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

13 Universidade do Estado da Bahia – UNEB / Profª Josemeire Machado Dias :: 2007 Uma visão Geral sobre Webdesign e Interfaces 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

14 Universidade do Estado da Bahia – UNEB / Profª Josemeire Machado Dias :: 2007 Uma visão Geral sobre Webdesign e Interfaces 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... E Serifa  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?

15 Universidade do Estado da Bahia – UNEB / Profª Josemeire Machado Dias :: 2007 Uma visão Geral sobre Webdesign e Interfaces 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 Blue Green 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

16 Universidade do Estado da Bahia – UNEB / Profª Josemeire Machado Dias :: 2007 Uma visão Geral sobre Webdesign e Interfaces 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

17 Universidade do Estado da Bahia – UNEB / Profª Josemeire Machado Dias :: 2007 Uma visão Geral sobre Webdesign e Interfaces 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

18 Universidade do Estado da Bahia – UNEB / Profª Josemeire Machado Dias :: 2007 Uma visão Geral sobre Webdesign e Interfaces Preocupações  Desenvolvimento de Projetos que possuam usabilidade 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ção no mercado.

19 Universidade do Estado da Bahia – UNEB / Profª Josemeire Machado Dias :: 2007 Uma visão Geral sobre Webdesign e Interfaces Webdesign voltado para o usuário Processo de Avaliação

20 Universidade do Estado da Bahia – UNEB / Profª Josemeire Machado Dias :: 2007 Uma visão Geral sobre Webdesign e Interfaces Hardware Software O ser humano

21 Universidade do Estado da Bahia – UNEB / Profª Josemeire Machado Dias :: 2007 Uma visão Geral sobre Webdesign e Interfaces  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 OBJETIVOS DA AVALIAÇÃO

22 Universidade do Estado da Bahia – UNEB / Profª Josemeire Machado Dias :: 2007 Uma visão Geral sobre Webdesign e Interfaces 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 (*)

23 Universidade do Estado da Bahia – UNEB / Profª Josemeire Machado Dias :: 2007 Uma visão Geral sobre Webdesign e Interfaces 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

24 Universidade do Estado da Bahia – UNEB / Profª Josemeire Machado Dias :: 2007 Uma visão Geral sobre Webdesign e Interfaces 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

25 Universidade do Estado da Bahia – UNEB / Profª Josemeire Machado Dias :: 2007 Uma visão Geral sobre Webdesign e Interfaces Avaliação Heurística Fácil / Rápida / Barata Como 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

26 Universidade do Estado da Bahia – UNEB / Profª Josemeire Machado Dias :: 2007 Uma visão Geral sobre Webdesign e Interfaces As heurísticas de Nielsen – As mais conhecidas 1. Visibilidade do sistema – Feedback 2. Compatibilidade do sistema com o mundo Real 3. Controle do usuário e liberdade (undo e redo) 4. Consistência e padrões 5. Prevenção de erros 6. Reconhecimento ao invés de relembrança 7. Flexibilidade e eficiência de uso 8. Estética e design minimalista 9. Ajudar os usuários a reconhecer diagnosticar e corrigir erros 10. Help e documentação AVALIAÇÃO DE USABILIDADE

27 Universidade do Estado da Bahia – UNEB / Profª Josemeire Machado Dias :: 2007 Uma visão Geral sobre Webdesign e Interfaces 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 :: Referências Bibliográficas