Laboratório Web 2013-2014 - Apresentação Unidade Curricular
0 gostou744 visualizações
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.
![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).](https://image.slidesharecdn.com/01lab-140223131707-phpapp02/85/Laboratorio-Web-2013-2014-Apresentacao-Unidade-Curricular-18-320.jpg)
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
- 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.