Laboratório Web 2013-2014 - Introdução e Enquadramento

594 visualizações

Publicada em

Unidade Curricular de Laboratório Web, Curso de Licenciatura em Audiovisual e Multimédia, Escola Superior de Comunicação Social / Instituto Politécnico de Lisboa.

Publicada em: Design
0 comentários
0 gostaram
Estatísticas
Notas
  • Seja o primeiro a comentar

  • Seja a primeira pessoa a gostar disto

Sem downloads
Visualizações
Visualizações totais
594
No SlideShare
0
A partir de incorporações
0
Número de incorporações
3
Ações
Compartilhamentos
0
Downloads
33
Comentários
0
Gostaram
0
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

Laboratório Web 2013-2014 - Introdução e Enquadramento

  1. 1. Laboratório Web CURSO DE LICENCIATURA EM AUDIOVISUAL E MULTIMÉDIA / 2013-2014 / 4º SEMESTRE DOCENTE: RICARDO PEREIRA RODRIGUES / RPRODRIGUES@ESCS.IPL.PT INTRODUÇÃO E ENQUADRAMENTO
  2. 2. AGENDA Introdução e Enquadramento ! • A Web de Hoje: oportunidades para um Web Designer, Designer de Interfaces ou Designer Multimédia. • A Interface. • Tipologias de Interface.
  3. 3. URL: http://www.youtube.com/watch?v=7_zzPBbXjWs
  4. 4. A WEB DE HOJE URL: http://www.youtube.com/watch?v=ntyXvLnxyXk
  5. 5. A WEB DE HOJE URL: http://www.youtube.com/watch?v=gew68Qj5kxw
  6. 6. A WEB DE HOJE URL: http://www.youtube.com/watch?v=T0D4avXwMmM&feature=mh_lolz&list=PLB43734793C621D59
  7. 7. A WEB DE HOJE URL: http://www.youtube.com/watch?v=g_txF7iETX0
  8. 8. A WEB DE HOJE URL: http://www.youtube.com/watch?v=uSKq0DuH-7g
  9. 9. A WEB DE HOJE URL: http://www.youtube.com/watch?v=GPfCZC4VHnE
  10. 10. A WEB DE HOJE URL: http://www.youtube.com/watch?v=v2vpvEDS00o
  11. 11. A WEB DE HOJE URL: http://www.youtube.com/watch?v=ISxgVmRnFq8
  12. 12. A WEB DE HOJE URL: http://www.youtube.com/watch?v=rgT7gGciQrg
  13. 13. A WEB DE HOJE URL: http://www.youtube.com/watch?v=MzX140m_eiQ&feature=BFa&list=PLEC86D7B6150B0A0F&lf=BFa
  14. 14. A WEB DE HOJE URL: http://www.youtube.com/watch?v=uDNQr52b4oI
  15. 15. A WEB DE HOJE URL: https://www.youtube.com/watch?v=4EvNxWhskf8&list=PLyR4fvjGTgA65BkrjbVHAWT9IuPIExw5_
  16. 16. CENAS DOS PRÓXIMOS CAPÍTULOS… URL: http://www.youtube.com/watch?v=6Cf7IL_eZ38&feature=BFa&list=PLEC86D7B6150B0A0F
  17. 17. INTERFACE • Procuram resolver um problema específico, permitindo ao utilizador interagir com objectos (físicos ou virtuais). ! • Um dispositivo ou sistema usado por duas entidades independentes para interagirem/comunicarem. ! • No contexto deste laboratório interessa-nos sobretudo as interfaces digitais (interfaces Humano-Computador/HomemMáquina). Referências: - Ivan Sutherland - Douglas Englebart - Alan Kay
  18. 18. INTERFACE
  19. 19. INTERFACE
  20. 20. INTERFACE
  21. 21. INTERFACE • Representa a forma como o utilizador interage com o sistema. ! • A navegação é um dos elementos da interface e, a não ser que estejamos na presença de uma aplicação ou formulário, confunde-se com a própria interface. ! • Não trata exclusivamente da interacção. É também a forma como o sistema comunica com o utilizador: Estaticamente e Dinamicamente. Objectivo: Eliminar a sua presença da consciência do utilizador! Diferentes tipos: - Interfaces Web - Interfaces Gestuais - Interfaces Móveis ...
  22. 22. Exercício
  23. 23. INTERFACE Na Web, muitas vezes chegamos às páginas a partir de uma lista fornecida por um motor de busca. Torna-se necessário incluir elementos que nos permitam identificar uma qualquer página ou ecrã e com navegação que nos possibilite chegar à página de entrada ou ecrã de início. Elementos de uma interface essenciais para dar resposta às perguntas que o utilizador coloca a ele próprio e ao sistema: ! • Em que website/ecrã estou? • Do que trata? • Quando é que esta informação foi publicada? • Quando foi a última vez que sofreu alterações? • Como posso dar daqui? Para onde posso ir?
  24. 24. TIPOLOGIAS DE INTERFACE URL: http://www.ikea.com/pt/pt/
  25. 25. TIPOLOGIAS DE INTERFACE URL: http://www.ikea.com/pt/pt/
  26. 26. TIPOLOGIAS DE INTERFACE URL: http://www.sapo.pt
  27. 27. TIPOLOGIAS DE INTERFACE URL: http://www.thedailybeast.com/newsweek.html
  28. 28. TIPOLOGIAS DE INTERFACE
  29. 29. TIPOLOGIAS DE INTERFACE
  30. 30. TIPOLOGIAS DE INTERFACE
  31. 31. TIPOLOGIAS DE INTERFACE © Escola Virtual, Grupo Porto Editora.
  32. 32. TIPOLOGIAS DE INTERFACE © Escola Virtual, Grupo Porto Editora.
  33. 33. TIPOLOGIAS DE INTERFACE © Numbers, Apple.
  34. 34. TIPOLOGIAS DE INTERFACE URL: http://www.nytimes.com/interactive/2010/09/10/nyregion/2010-wtc.html
  35. 35. TIPOLOGIAS DE INTERFACE
  36. 36. TIPOLOGIAS DE INTERFACE
  37. 37. TIPOLOGIAS DE INTERFACE URL: https://www.youtube.com/watch?v=vDNzTasuYEw
  38. 38. BIBLIOGRAFIA • Lal, R. (2013) Digital Design Essentials. 100 Ways to Design Better Desktop, Web, and Mobile Interfaces. Rockport Publishers. • Matos, A. (2009) Dicionário de Informática e Novas Tecnologias. Lisboa, FCA. • Preece, J.; Rogers, Y. & Sharp, H. (2002) Design de Interacção, Bookman. • Ribeiro, N. (2004) Multimédia e Tecnologias Interactivas. FCA/Tecnologias de Informação. • Scott, B. & Neil, T. (2009) Designing Web Interfaces. O’Reilly.

×