advertisement

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

100 %
0 %
advertisement
Information about Laboratório Web 2013-2014 - Apresentação Unidade Curricular
Design

Published on February 23, 2014

Author: esganarel

Source: slideshare.net

Description

Apresentação da 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.
advertisement

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.

Add a comment

Related presentations

My Music Magazine Pitch

My Music Magazine Pitch

October 30, 2014

music mag pitch

Questionaire charts

Questionaire charts

November 4, 2014

bk

Final research

Final research

November 5, 2014

final research

Cersaie 2014

Cersaie 2014

October 30, 2014

allestimento in cartone per il Cersaie 2014 alberi in cartone scultura in cartone

Quarta turma do workshop de Infografia, ministrado por Beatriz Blanco e Marcos Sin...

Related pages

Ficha de Unidade Curricular - UCP - Faculdade de Ciências ...

Ficha de Unidade Curricular ... 2.º Semestre / 2013-2014 ... análise e apresentação dos resultados. Esta unidade curricular tem um papel ...
Read more

Laboratório Multifélix

Unidade Curricular: Laboratório Multimédia. ... Apresentação. 05:47 | ... o Laboratório Multifélix. ...
Read more

FICHA DE UNIDADE CURRICULAR 2013/2014

FICHA DE UNIDADE CURRICULAR 2013/2014 Designação Temas de Genética ... Apresentação de trabalho 20% . Regras relativas à melhoria de nota
Read more

Video LBAW - YouTube

Demonstração da aplicação desenvolvida no âmbito da Unidade Curricular de Laboratório de Bases de dados e Aplicações Web.
Read more

GUIA DE FUNCIONAMENTO DA UNIDADE CURRICULAR MODELO PED.008

UNIDADE CURRICULAR ... Curso Engenharia Civil Ano letivo 2013/2014 Unidade Curricular ... bibliográfica e web gráfica através da apresentação ...
Read more

Estágio e Seminário de Serviço Social V

Ficha de Unidade Curricular [FUC] 1. Unidade curricular / Curricular Unit Estágio e Seminário de Serviço Social V (com laboratório de comunicação e ...
Read more

Home · isel-leic-ls/1314-2-common Wiki · GitHub

... Repositório público do semestre de verão de 2013/2014. Skip to content. ... Laboratório de ... Apresentação da Unidade Curricular; Calendarização;
Read more

FICHA RESUMO DE UNIDADE CURRICULAR ANO LETIVO DE 2013-2014 ...

FICHA RESUMO DE UNIDADE CURRICULAR IE.131B/01 Página 3 de 3 Livros: Marion Bennion, Barbara Scheule, Introductory Foods, 13th edition Grande dicionário ...
Read more

Calaméo - Apresentaçao

... MATERIAL DA UNIDADE CURRICULAR Química Geral 2012 ... Caderno de laboratório (10%+10%) + minitestes (20%) Teórica Prática (10%) ...
Read more