Este documento apresenta o plano de ensino para a unidade curricular de Laboratório Web. O curso abordará conceitos como pesquisa, estratégia, design, programação e gestão de projetos web, com foco nas etapas de análise, concepção, desenvolvimento e implementação de sites. Os alunos desenvolverão projetos práticos e serão avaliados com base nesses projetos e em exercícios ao longo do semestre.

1. Laboratório Web
CURSO DE LICENCIATURA EM AUDIOVISUAL E MULTIMÉDIA / 2013-2014 / 4º SEMESTRE
DOCENTE: RICARDO PEREIRA RODRIGUES / RPRODRIGUES@ESCS.IPL.PT
APRESENTAÇÃO UNIDADE CURRICULAR

3. CONTACTOS
Prof. Ricardo Pereira Rodrigues
rprodrigues@escs.ipl.pt
Gabinete 1G1
Horário para marcação de atendimento: 2ª e 3ª feiras das 15h
às 16h30 (com marcação prévia por email).
!
!
Grupo Facebook de Apoio à Unidade Curricular:
https://www.facebook.com/groups/ESCS.AM.LAB.WEB
!
Neste grupo será disponibilizada toda a informação sobre as
aulas, exercícios, trabalhos e ligações para outras fontes e
recursos relacionados com o programa da cadeira.

4. Internet is a
“gift from God”
FONTE: The Verge

5. DESAFIOS DE APRENDIZAGEM
• Pensar de raiz projectos de comunicação em ambientes
digitais e desenvolvimento de conceitos para os principais
suportes existentes (WWW, mobile, e-mailling, apps, social
media e novos media).
!
• Enquadramentos teóricos e práticos nas áreas do web
design, desenho de interfaces e interacção, introdução a
ferramentas de computação gráfica e autoria web,
linguagens de programação, metodologias e práticas
associadas ao desenho para ecrãs.

6. POR ONDE VAMOS ANDAR?
• Pesquisa
• Estratégia
• Branding
• Copy
• Gestão de Projecto
• Usabilidade
• Web Design
• Interactividade
• Programação
• Social Media
• SEM / Analytics

7. POR ONDE VAMOS ANDAR?
Pesquisa
• Estratégia
• Branding
• Copy
✓ Gestão de Projecto
✓ Usabilidade
✓ Web Design
✓ Interactividade
✓ Programação
• Social Media
• SEM / Analytics
✓

8. O PERCURSO
ANÁLISE & PESQUISA
UX & UI
USER EXPERIENCE
E
USER INTERFACE
!
DEFINIÇÃO DA MELHOR
EXPERIÊNCIA PARA O
UTILIZADOR
!
(ARQUITECTURA DE
INFORMAÇÃO)
DESIGN & CONTEÚDO
HTML & CSS
DESENVOLVIMENTO
FRONT-END

9. RESUMO
URL:
https://www.youtube.com/watch?v=3iVVM_DgWY4&list=PL30E23CCC107B0A00&index=23

10. PROGRAMA
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.

11. PROGRAMA
Tendências na Estética e
Produção de Interfaces para Web
!
• Responsive Web Design;
• Flat Design;
• Revisitar o Layout de jornais/revistas impressas;
• HTML5 + CSS3;
• Vídeo Fullscreen em background ou layout em fullscreen;
• 3D;
• Slideshows “XL”;
• Scroll Vertical: novas interpretações;
• Parallax Scrolling;
• Tipografia;
• Backgrounds com grandes imagens ou ilustrações;
• Minimalismo;
• Ausência de cor ou monocromáticos.

12. PROGRAMA
Etapas na Produção:
Planeamento, Concepção e Implementação
!
Fase 1 - Análise e Pesquisa:
• Pesquisa, Objectivos e Necessidades;
• Brainstorming, Mapas Mentais, Entrevistas, Grupos Focais
(Focus Group) e Pesquisa Visual;
• Documentação;
• Análise Competitiva (Benchmark);
• Personas;
• Cenários de Actividade.
!
Fase 2 - Arquitectura de Informação:
• Inventário de conteúdo;
• Estrutura de Informação;
• Wireframes;
• Modelos e Especificações Funcionais (SPECS);
• Storyboard;

13. PROGRAMA
Etapas na Produção:
Concepção, Planeamento e Implementação
!
• Mapa de Fluxos de navegação (User Flows).

14. PROGRAMA
Etapas na Produção:
Concepção, Planeamento e Implementação
!
Fase 3 - Desenho e Composição (Look & Feel):
• A Interface: desenho de interfaces e usabilidade, modelos
teóricos e princípios para o design de interacção em
sistemas web;
• Desenho de Navegação para Web;
• Hierarquia Visual: grelha e estrutura;
• Fundamentos e Teoria do Design: composição, consistência,
equilíbrio e teoria da Gestalt;
• Princípios do Design Gráfico: Proximidade, Alinhamento,
Repetição e Contraste.
• Layout: gráficos, tipografia, formas e cores;
• Mock-ups.

15. PROGRAMA
Abordagem “Responsive Web Design”: a adaptação
como paradigma de produção de projectos web
!
• Características e cenários de utilização;
• Design para diferentes resoluções e plataformas;
• Layout: fixo, fluido, elástico e híbridos;
• Tamanhos de Fontes;
• Media Queries: viewports, estrutura, breakpoints e
navegação.

16. PROGRAMA
Acessibilidade e Usabilidade
!
• Acessibilidade: métodos de implementação.
• Acessibilidade: boas práticas.
• Usabilidade: métodos de avaliação.
• Usabilidade: no desenho de página e conteúdo.

17. PROGRAMA
Tecnologias Web: Introdução ao HTML5
!
• Estrutura do Documento;
• Elementos Novos;
• Layout;
• Vídeo e Áudio.
Tecnologias Web: Introdução às CSS3
!
• Propriedades: border-radius, text-shadow, box-shadow;
• Usar múltiplas imagens no background;
• Cor: HSL e HSLA;
• Opacidade e RGBA;
• Transições;
• Trabalhar com formato SVG.

18. AVALIAÇÃO
O método de avaliação é contínuo e tem como base a
cotação obtida, pelos alunos, nos seguintes elementos de
avaliação:
!
Projecto Final - 60%
• Apresentação Proposta de Projecto - 20%
• Desenho, Animação e Programação - 30%
• Tutorias e Aulas de Acompanhamento - 10% *
!
Exercícios Práticos - 40%
!
• Exercício de Avaliação 1 [Arquitectura de Informação] *
• Exercício de Avaliação 2 [HTML + CSS] *
• Exercício de Avaliação 3 [JavaScript] *
• Exercício de Avaliação 4 [MySQL + PHP] *
* Nota para alunos com
estatuto trabalhadorestudante e estatuto de
dirigente associativo do
ensino superior:
!
Nos momentos de
avaliação presencial
existe a obrigatoriedade
do aluno acordar,
posteriormente à data de
realização em aula, um
dia/hora alternativo para
a execução dos mesmos (o
prazo para a execução
nunca poderá ser superior
a 5 dias úteis).

19. BIBLIOGRAFIA
• Best, K. (2006) Gestão de Design, AVA Publishing.
• Brown, D. (2007) Communicating Design. Developing Web Site Documentation For
Design and Planning, New Riders.
• Cederholm, D. (2010) CSS3 For Designers. A Book Apart.
• Dabner, D.; Calvert, S. & Casey, A. (2010) Graphic design school : the principles and
pratice of graphic design, New Jersey: Wiley.
• Duckett, J. (2011) HTML & CSS - Design and Build Websites. Wiley.
• Friedlein, A. (2001) Web Project Management. Morgan Kaufmann Publishers.
• Jacobson, Robert (ed.) (2000) Information Design, The MIT Press.
• Keith, J. (2010) HTML5 For Web Designers. A Book Apart.
• Lal, R. (2013) Digital Design Essentials. 100 Ways to Design Better Desktop, Web, and
Mobile Interfaces. Rockport Publishers.
• Lidwell, W.; Holden, K. & Elam, K. (2003) Universal Principles of Design, Rockport.
• Morville, P. & Rosenfeld, L. (2007) Information Architecture For The World Wide Web,
O’Reilly.
• Nielsen, J. (1999) Designing Web Usability, New Riders Publishing.
• Preece, J.; Rogers, Y. & Sharp, H. (2002) Design de Interacção, Bookman.
• Robbins, N. (2007) Learning Web Design. O’Reilly.

20. BIBLIOGRAFIA
• Scott, B. & Neil, T. (2009) Designing Web Interfaces. O’Reilly.
• Vinh, K. (2011) Ordering disorder : grid principles for web design. New Riders.
!
NOTAS: Outras referências serão disponibilizados, sempre que se justificarem, nos keynotes de
apoio às aulas ou no grupo do Facebook de apoio à cadeira.