Introdução à Informática Uma conversa sobre Internet e Design para Web

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

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 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/infonews/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. E Serifa 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 http://www.rafaelcorreia.net/?pagina=noticia&id=2

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. O ser humano Software Hardware

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?

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?v=MBIi-suIR-Q&feature=related Teclado virtual – tecnologia laser R$580,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

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

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

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

37. Em inglês: http://gl.ict.usc.edu/Research/3DDisplay/ 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. 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 AVALIAÇÃO DE USABILIDADE

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)Exemplo:Heurí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