laboratório web 2013-2014 - introdução e enquadramento

47
Laboratório Web CURSO DE LICENCIATURA EM AUDIOVISUAL E MULTIMÉDIA / 2013-2014 / 4º SEMESTRE DOCENTE: RICARDO PEREIRA RODRIGUES / [email protected] INTRODUÇÃO E ENQUADRAMENTO

Upload: ricardo-pereira-rodrigues

Post on 19-May-2015

367 views

Category:

Design


1 download

DESCRIPTION

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.

TRANSCRIPT

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

Laboratório Web CURSO DE LICENCIATURA EM AUDIOVISUAL E MULTIMÉDIA / 2013-2014 / 4º SEMESTRE

DOCENTE: RICARDO PEREIRA RODRIGUES / [email protected]

INTRODUÇÃO E ENQUADRAMENTO

Page 2: Laboratório Web 2013-2014 - Introdução e Enquadramento
Page 3: Laboratório Web 2013-2014 - Introdução e Enquadramento

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.

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

URL: http://www.youtube.com/watch?v=7_zzPBbXjWs

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

A WEB DE HOJE

URL: http://www.youtube.com/watch?v=ntyXvLnxyXk

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

URL: http://www.youtube.com/watch?v=gew68Qj5kxw

A WEB DE HOJE

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

URL: http://www.youtube.com/watch?v=T0D4avXwMmM&feature=mh_lolz&list=PLB43734793C621D59

A WEB DE HOJE

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

URL: http://www.youtube.com/watch?v=g_txF7iETX0

A WEB DE HOJE

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

URL: http://www.youtube.com/watch?v=uSKq0DuH-7g

A WEB DE HOJE

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

URL: http://www.youtube.com/watch?v=GPfCZC4VHnE

A WEB DE HOJE

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

URL: http://www.youtube.com/watch?v=v2vpvEDS00o

A WEB DE HOJE

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

URL: http://www.youtube.com/watch?v=ISxgVmRnFq8

A WEB DE HOJE

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

URL: http://www.youtube.com/watch?v=rgT7gGciQrg

A WEB DE HOJE

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

URL: http://www.youtube.com/watch?v=MzX140m_eiQ&feature=BFa&list=PLEC86D7B6150B0A0F&lf=BFa

A WEB DE HOJE

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

URL: http://www.youtube.com/watch?v=uDNQr52b4oI

A WEB DE HOJE

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

URL: https://www.youtube.com/watch?v=4EvNxWhskf8&list=PLyR4fvjGTgA65BkrjbVHAWT9IuPIExw5_

A WEB DE HOJE

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

URL: http://www.youtube.com/watch?v=6Cf7IL_eZ38&feature=BFa&list=PLEC86D7B6150B0A0F

CENAS DOS PRÓXIMOS CAPÍTULOS…

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

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/Homem-Máquina).

Referências: - Ivan Sutherland - Douglas Englebart - Alan Kay

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

INTERFACE

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

INTERFACE

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

INTERFACE

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

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

Diferentes tipos: - Interfaces Web - Interfaces Gestuais - Interfaces Móveis ...

É 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!

INTERFACE

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

Exercício

Page 24: Laboratório Web 2013-2014 - Introdução e Enquadramento
Page 25: Laboratório Web 2013-2014 - Introdução e Enquadramento
Page 26: Laboratório Web 2013-2014 - Introdução e Enquadramento
Page 27: Laboratório Web 2013-2014 - Introdução e Enquadramento
Page 28: Laboratório Web 2013-2014 - Introdução e Enquadramento
Page 29: Laboratório Web 2013-2014 - Introdução e Enquadramento
Page 30: Laboratório Web 2013-2014 - Introdução e Enquadramento
Page 31: Laboratório Web 2013-2014 - Introdução e Enquadramento
Page 32: Laboratório Web 2013-2014 - Introdução e Enquadramento

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?

INTERFACE

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

URL: http://www.ikea.com/pt/pt/

TIPOLOGIAS DE INTERFACE

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

URL: http://www.ikea.com/pt/pt/

TIPOLOGIAS DE INTERFACE

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

URL: http://www.sapo.pt

TIPOLOGIAS DE INTERFACE

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

URL: http://www.thedailybeast.com/newsweek.html

TIPOLOGIAS DE INTERFACE

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

TIPOLOGIAS DE INTERFACE

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

TIPOLOGIAS DE INTERFACE

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

TIPOLOGIAS DE INTERFACE

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

© Escola Virtual, Grupo Porto Editora.

TIPOLOGIAS DE INTERFACE

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

© Escola Virtual, Grupo Porto Editora.

TIPOLOGIAS DE INTERFACE

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

© Numbers, Apple.

TIPOLOGIAS DE INTERFACE

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

URL: http://www.nytimes.com/interactive/2010/09/10/nyregion/2010-wtc.html

TIPOLOGIAS DE INTERFACE

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

TIPOLOGIAS DE INTERFACE

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

TIPOLOGIAS DE INTERFACE

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

URL: https://www.youtube.com/watch?v=vDNzTasuYEw

TIPOLOGIAS DE INTERFACE

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

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

BIBLIOGRAFIA