SlideShare uma empresa Scribd logo
1 de 20
Baixar para ler offline
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
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.
Internet is a
“gift from God”
FONTE: The Verge
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.
POR ONDE VAMOS ANDAR?
• Pesquisa

• Estratégia

• Branding
• Copy
• Gestão de Projecto
• Usabilidade

• Web Design

• Interactividade

• Programação

• Social Media
• SEM / Analytics
POR ONDE VAMOS ANDAR?
Pesquisa
• Estratégia

• Branding
• Copy
✓ Gestão de Projecto
✓ Usabilidade
✓ Web Design
✓ Interactividade
✓ Programação
• Social Media
• SEM / Analytics
✓
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
RESUMO

URL:

https://www.youtube.com/watch?v=3iVVM_DgWY4&list=PL30E23CCC107B0A00&index=23
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.
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.
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;
PROGRAMA
Etapas na Produção:
Concepção, Planeamento e Implementação
!

• Mapa de Fluxos de navegação (User Flows).
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.
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.
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.
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.
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).
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.
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.

Mais conteúdo relacionado

Destaque

Destaque (7)

Fundamentos de Sistemas Operacionais - Aula 2 - Conceitos Iniciais
Fundamentos de Sistemas Operacionais - Aula 2 - Conceitos IniciaisFundamentos de Sistemas Operacionais - Aula 2 - Conceitos Iniciais
Fundamentos de Sistemas Operacionais - Aula 2 - Conceitos Iniciais
 
Fundamentos de Sistemas Operacionais - Aula 3 - Arquiteturas de Sistemas Oper...
Fundamentos de Sistemas Operacionais - Aula 3 - Arquiteturas de Sistemas Oper...Fundamentos de Sistemas Operacionais - Aula 3 - Arquiteturas de Sistemas Oper...
Fundamentos de Sistemas Operacionais - Aula 3 - Arquiteturas de Sistemas Oper...
 
Wordpress ppt
Wordpress pptWordpress ppt
Wordpress ppt
 
1ª aula sistema operacional
1ª aula  sistema operacional1ª aula  sistema operacional
1ª aula sistema operacional
 
Sistemas Operacionais
Sistemas OperacionaisSistemas Operacionais
Sistemas Operacionais
 
Fazendo milagres com WordPress
Fazendo milagres com WordPressFazendo milagres com WordPress
Fazendo milagres com WordPress
 
Basic Wordpress PPT
Basic Wordpress PPT Basic Wordpress PPT
Basic Wordpress PPT
 

Semelhante a Laboratório Web 2013-2014 - Apresentação Unidade Curricular

Arte e Tecnologia - Artes Visuais - 2013
Arte e Tecnologia - Artes Visuais - 2013Arte e Tecnologia - Artes Visuais - 2013
Arte e Tecnologia - Artes Visuais - 2013
tecampinasoeste
 

Semelhante a Laboratório Web 2013-2014 - Apresentação Unidade Curricular (20)

CV Alexandre R. de Castro
CV Alexandre R. de CastroCV Alexandre R. de Castro
CV Alexandre R. de Castro
 
Website Fixie - Metodologia Projeto E
Website Fixie - Metodologia Projeto EWebsite Fixie - Metodologia Projeto E
Website Fixie - Metodologia Projeto E
 
Laboratório Web 2013-2014 - Etapas na Produção: Análise e Pesquisa
Laboratório Web 2013-2014 - Etapas na Produção: Análise e PesquisaLaboratório Web 2013-2014 - Etapas na Produção: Análise e Pesquisa
Laboratório Web 2013-2014 - Etapas na Produção: Análise e Pesquisa
 
Cv alexandre rezendedecastro
Cv alexandre rezendedecastroCv alexandre rezendedecastro
Cv alexandre rezendedecastro
 
Desenvolvimento de Projetos Interativos: Especificação e Implementação
Desenvolvimento de Projetos Interativos: Especificação e ImplementaçãoDesenvolvimento de Projetos Interativos: Especificação e Implementação
Desenvolvimento de Projetos Interativos: Especificação e Implementação
 
Introdução ao Web Design: Aula 2 - IHC/UX Design
Introdução ao Web Design: Aula 2 - IHC/UX DesignIntrodução ao Web Design: Aula 2 - IHC/UX Design
Introdução ao Web Design: Aula 2 - IHC/UX Design
 
Aula 1 Webdesign
Aula 1 WebdesignAula 1 Webdesign
Aula 1 Webdesign
 
Laboratório Web 2013-2014 - Tendências no Desenho e Produção de Interfaces pa...
Laboratório Web 2013-2014 - Tendências no Desenho e Produção de Interfaces pa...Laboratório Web 2013-2014 - Tendências no Desenho e Produção de Interfaces pa...
Laboratório Web 2013-2014 - Tendências no Desenho e Produção de Interfaces pa...
 
Padrões em Governo Eletrônico - Cartilha de Codificação e Guia de Administraç...
Padrões em Governo Eletrônico - Cartilha de Codificação e Guia de Administraç...Padrões em Governo Eletrônico - Cartilha de Codificação e Guia de Administraç...
Padrões em Governo Eletrônico - Cartilha de Codificação e Guia de Administraç...
 
A herança da arquitetura da informação para a UX Writer
A herança da arquitetura da informação para a UX WriterA herança da arquitetura da informação para a UX Writer
A herança da arquitetura da informação para a UX Writer
 
A Web para todos - Acessibilidade na web
A Web para todos  - Acessibilidade na webA Web para todos  - Acessibilidade na web
A Web para todos - Acessibilidade na web
 
Laboratório Audivisual Hipermedia Aula3 4 13 22 03
Laboratório Audivisual Hipermedia Aula3 4 13 22 03Laboratório Audivisual Hipermedia Aula3 4 13 22 03
Laboratório Audivisual Hipermedia Aula3 4 13 22 03
 
Pós-graduação em Desenvolvimento Web e Aplicativos Móveis
Pós-graduação em Desenvolvimento Web e Aplicativos MóveisPós-graduação em Desenvolvimento Web e Aplicativos Móveis
Pós-graduação em Desenvolvimento Web e Aplicativos Móveis
 
Arquitetura da Informacao na WEB
Arquitetura da Informacao na WEBArquitetura da Informacao na WEB
Arquitetura da Informacao na WEB
 
Projeto de Plataforma Digital de Produção Gráfica
Projeto de Plataforma Digital de Produção GráficaProjeto de Plataforma Digital de Produção Gráfica
Projeto de Plataforma Digital de Produção Gráfica
 
Arte e Tecnologia - Artes Visuais - 2013
Arte e Tecnologia - Artes Visuais - 2013Arte e Tecnologia - Artes Visuais - 2013
Arte e Tecnologia - Artes Visuais - 2013
 
Apresentação do Módulo de GP de Web
Apresentação do Módulo de GP de WebApresentação do Módulo de GP de Web
Apresentação do Módulo de GP de Web
 
Interaction South America 2015 - Concepção de um framework para definição em ...
Interaction South America 2015 - Concepção de um framework para definição em ...Interaction South America 2015 - Concepção de um framework para definição em ...
Interaction South America 2015 - Concepção de um framework para definição em ...
 
Web Standards
Web StandardsWeb Standards
Web Standards
 
Aula1 apresentaçao
Aula1 apresentaçaoAula1 apresentaçao
Aula1 apresentaçao
 

Laboratório Web 2013-2014 - Apresentação Unidade Curricular

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