AULAS1LAB

Info

1º ano do curso de TCM Disciplina semestral Teórico/Prática com precedência
Carga horária: 60 horas (4 horas semanais = 30 aulas de 2 horas)
ECTS: 6

Objectivo / Metodologia

Esta disciplina posiciona-se numa esfera transdisciplinar e coloca em prática vários conceitos teóricos adquiridos em várias disciplinas. É um laboratório de práticas e experiências lançando ao aluno inumeros desafios. Previligia-se o trabalho em equipa e a experimentação na procura da resolução criativa de problemas.

Em Laboratório Multimédia I será feita uma introdução a ferramentas de autoria multimédia para distribuição ON-LINE e OFF-LINE. Serão abordadas temáticas diversas em torno das aplicações multimédia, nomeadamente os conteúdos institucionais. Tendo sempre como finalidade a construção de aplicações de distribuição ON-LINE, como páginas para a Internet ou OFF-LINE tendo como plataforma o CD-ROM interactivo e o DVD-Vídeo Interactivo.

Um aspecto de grande importância que será transmitido aos alunos durante o semestre é a noção de projecto multimédia na sua globalidade e nas suas diversas fases de forma a conceber, organizar, estruturar, planear e desenvolver uma aplicação multimédia nas suas várias componentes.

O aluno deverá ser capaz de gerir os prazos para assim, organizar e planificar os projectos de uma forma sensata e objectiva sempre com a ideia de compromisso. Também, a responsabilidade será um factor importante a incutir nos alunos, de forma a encararem o universo profissional.

Os alunos dispõem de sítios na Internet de apoio e orientação à aprendizagem entre outras informações relacionadas com os alunos e a disciplina:
www.grifu.com/elearning
www.leonelcunha.net/formacao
www.leonelcunha.com/aulas1lab
Podem encontrar toda a informação relacionada com os exercícios, trabalhos e com o projecto final, de forma a retirar dúvidas relacionadas com prazos de entrega, requisitos, formatos, etc. Existem também várias ligações a outras fontes como forma de orientação.

Cada aluno dispõe de um login, que lhe permite aceder às suas notas, questionários e trabalhos. O registo das presenças também é efectuado por esta plataforma.

Aprendizagem:

• Adquirir metodologias de trabalho;
• Organização de ideias e trabalhos;
• Planificação e estruturação de projectos;
• Cruzamento de saberes multidisciplinares;
• Aproveitar os conhecimentos adquiridos na construção de projectos multimédia;
• Adquirir sentido crítico;
• Olhar pragmático sobre os projectos;
• Proporcionar um olhar mais profundo sobre as narrativas abstraindo-se das técnicas;
• Poder de síntese e simplificação de problemas complexos.

Propostas:

• Repostas rápidas a pequenos desafios;
• Manipular vários objectos multimédia;
• Pensar, organizar e produzir trabalhos;
• Apresentar e criticar aplicações multimédia;
• Projecto final.

Aplicações / ferramentas:

A disciplina de Laboratório I irá abordar várias ferramentas como forma de dar a conhecer ou aprofundar os conhecimentos dos alunos, que assim podem optar cosoante as suas necessidades.

Aplicações:

Aplicações principais
(autoria multimédia)

• Adobe Photoshop
• Adobe Director
• Adobe Flash
• Adobe DreamWeaver

Aplicações secundárias
(autoria de conteúdos)

• Apple FinalCut (edição vídeo)
• Apple SoundTrack (edição áudio)
• Apple Quicktime (conversão vídeo e áudio)
• Apple Compressor (compressão de ficheiros)
• Apple Motion
• PhotoStitch

Conteúdos programáticos das aplicações principais

1. Adobe Director

• Interface (stage, tools, cast, timeline, behaviors)
• Desenho e pintura (ferramentas, técnicas e métodos)
• Estrutura (CastLib)
• Timeline (diferenças com o flash, filmloop)
• Animação por interpolação (Tween animation, aceleração e desaceleração)
• Animação gravada
• Animação de efeitos (mascaras, trajectos, transparências)
• Interactividade (botões e comportamentos)
• Componentes (componentes do flash)
• Articulação com ficheiros do flash (controlar e comunicar entre flash e director)
• Articulação com dvd-vídeo (controlar os dvd´s a partir do director)
• Publicação

2. Adobe Flash

• Animação interactiva
• Botões
• Articulação com o Director

3. Adobe DreamWeaver

• Interface
• Composição
• Optimização
• Publicação

Info

Será proposto aos alunos dois trabalhos práticos e um projecto final a serem desenvolvidos durante o semestre. Estes trabalhos têm como objectivo estimular o aluno a utilizar os seus conhecimentos e a pensar os projectos nas sua globalidade contemplando todas as suas vertentes, de forma a encontrar um compromisso entre a qualidade e o tempo disponível.

O aluno deverá encontrar soluções de forma criativa.

1º Trabalho

Ver proposta em grifu.com/elearning

2º Trabalho

Sítio Web
Um exercício de webdesign consubstanciado num site / portfólio, onde sejam aplicados os conhecimentos adquiridos nas aulas e que possa, também, servir para promoção ou referência de trabalho futuro do aluno.

Ver proposta em grifu.com/elearning

Projecto Final

Site institucional Conteúdo institucional
Publicação ON-LINE do site desenvolvido

Ver proposta em grifu.com/elearning

Propostas de Trabalho

Proposta de trabalho 1: Site com Oferta Educativa
Proposta de trabalho 2: m'Arte, o Poder das Imagens

Info

A avaliação contínua é constituída pelo somatório das presenças com a participação na aula.

Avaliação contínua 10% = 2 valores
Trabalhos 45% = 9 valores
Projecto final 45% = 9 valores

Distribuição da avaliação

a) Avaliação contínua (2 valores)
- Presenças (1.4) + participação (0.6) = 2 valores

b) Trabalhos (9 valores)
Os trabalhos práticos são apresentados com relatório
- Trabalho I + relatório = 4 valores
- Trabalho II + relatório = 5 valores

c) Projecto (9 valores)
- Projecto + proposta + relatório + apresentação = 9 valores

O projecto final é constituído por cinco elementos que compõe a avaliação, nomeadamente:

• proposta;
• projecto;
• relatório;
• apresentação.

Prazos

Existem prazos estipulados de apresentação dos exercícios, dos trabalhos e do projecto final.
O incumprimento dos prazos resulta na subtracção de 30% do valor do objecto avaliado.

O aluno poderá apresentar os trabalhos em atraso até à data da entrega do projecto final, no entanto deverá estar consciente do resultado da subtracção dos 30% na avaliação.

Assiduidade

Regime de faltas: no regime presencial o aluno pode faltar 20% do número total de aulas previstas. Com 30 aulas programadas, o aluno pode dar 6 faltas, sendo que à 7 falta o aluno estará reprovado por faltas.

Trabalhadores Estudantes

Os alunos com estatuto de trabalhador estudante devem abordar o professor nas primeiras aulas (até 20 dias depois da primeira aula) para assim esclarecerem a sua situação e se poderem delinear alternativas. Estes alunos podem discutir uma alternativa ao parâmetro da assiduidade referente à avaliação contínua, podendo ser proposto um exercício complementar que substituirá este parâmetro. Também podem solicitar o adiamento de trabalhos para uma data nunca superior a uma semana do prazo estipulado, para poderem beneficiar deste adiamento necessitam de fazer um pedido ao Professor com pelo menos uma semana de antecedência do prazo da entrega.

No caso do projecto final, não é possível aceder a um adiamento da entrega, mas sim a um adiamento da apresentação do projecto, não podendo exceder mais de dois dias úteis depois do prazo estipulado, sendo necessário o aviso prévio ao Professor com pelo menos uma semana de antecedência.

Objectivos

• Compreender o funcionamento da disciplina;
• Conhecer o tipo de trabalhos e projecto final a realizar, bem os prazos de entrega dos mesmos para a avaliação;
• Conhecer as ferramentas a usar na disciplina, no que concerne ao desenvolvimento web;
• Conhecer Browsers de navegação e extensões para o desenvolvimento web;
• Compreender e distinguir as três camadas básicas de um web site: conteúdo, apresentação e interactividade.
• Conhecer as inter-relações entre a estética, a ergonomia e as funcionalidades de uma site;
• Saber analisar a estrutura e o layout de uma interface recorrendo a extensões integradas nos browsers;
• Reconhecer estruturas e hierarquias na apresentação da informação;
• Conhecer tipos de sistemas de navegação.

Conteúdos

Informações sobre o funcionamento e avaliação da disciplina;
Ferramentas a usar para o desenvolvimento Web:

• Adobe Dreamweaver.

Browsers e add-ons para desenvolvimento web:

• IE / Safari / Ópera / Firefox / Chrome;
• Web Developer (Firefox);
• Firebug (Firefox);
• Develop menu (Safari);
• ScrapBook (Firefox);
• Pearl Crescent Page Saver Basic (Firefox).

Interface gráfica e navegação.
As três camadas de uma interface web:

• Conteúdo;
• Apresentação;
• Interactividade.

Abordagem às noções estéticas, ergonómicas e funcionais relacionadas com o desenho e organização dos componentes numa interface web, tais como:

• A forma;
• A cor;
• A interacção;
• A tipografia;
• A legibilidade;
• A hierarquia.

Recursos

Textos

Design e Metodologia
Design e navegação
Interfaces
Gestalt

Browsers

Chrome
Opera
Internet-explorer
Safari
Firefox

Addons

Pagesaver
Scrapbook
Web-developer
Yslow
Firebug

Objectivos

• Conhecer as funcionalidades do Adobe Dreamweaver;
• Compreender e construir a estrutura de um site;
• Compreender a hierarquização do conteúdo num documento html;
• Compreender a relação entre o conteúdo a apresentação e a interacção numa interface gráfica para a web;
• Compreender o Box Model, a estruturação de um documento html com divisões;
• Compreender as diferenças entre xhtml e html 5, no que respeita aos elementos estruturais.

Conteúdos

A interface do Dreamweaver:

• Área de trabalho;
• Menu Insert;
• Propriedades;
• Painel CSS;
• Painel Files.

A estrutura de um site:

• Directório;
• Sub-Directório;
• Organização dos conteúdos;
• Definição so site com o Dreamwaver.

A estrutura de um documento xhtml:

• DTD;
• Conteúdo, apresentação e comportamento;
• O Box model.

Inserção:

• Imagens;
• Swf;
• Flv;
• Mov;
• Embed;
• Vídeo (html5);
• Áudio (html5).

Metodologia

• Realizar exercícios de organização e hierarquização de informação em páginas html
• Construir documentos html aplicando o Box Model

Recursos

leonelcunha.net/formacao

Dreamweaver: Rreferência rápida
Dreamweaver: Atalhos
Definir um site com o Dreamweaver
Estrutura de um documento xhtml
dtd's e estrutura de um documento xhtml
Estrutura de um documento html 5

Exercícios

Exercício 1
Exercício 2
Exercício 3
Exercício 4
Exercício 5
Exercício 6
Exercício 7
Exercício 8
Exercício 9
Exercício 10
Exercício 11
Exercício 12
Exercício 13

Exemplos

Exercício 1
Exercício 2
Exercício 3
Exercício 4
Exercicio 5
Exercício 6
Exercício 7
Exercício 8
Exercício 9
Exercício 10
Exercício 11
Exercício 12
Exercício 13

Objectivos

• Conhecer os selectores mais comuns usados em CSS;
• Distinguir entre classes e IDs;
• Compreender a aplicação dos estilos CSS de forma inline, embedded e externa;
• Aplicar Divs (divisões) num documento xhtml;
• Compreender o conceito de block level element e inline level element;
• Compreender a utilização das margens e do padding na formatação das DIVs;

Conteúdos

CSS:

• Formas de inserção;
• Selectores;
• Classes;
• IDs;
• Divisões;
• Spans;
• Margens;
• Padding;
• Propriedades de texto;
• Propriedades da fonte.

Metodologia:

• Aplicar estilos CSS de forma inline, embedded e externa;
• Formatar um documento xhtml com CSS usando ID e classes;
• Formatar inline elements e block level elements;
• Aplicar margens e paddings;
• Formatar texto e blocos de texto

Recursos

leonelcunha.net/formacao

CSS: Sintax
CSS: Cascata
CSS: Inserção
CSS: Selectores
CSS: Aplicação com o Dreamweaver

Exercícios

Formata os documentos seguintes com CSS.

Exercício 2
Exercício 3
Exercício 4
Exercício 5
Exercício 6
Exercício 7
Exercício 8
Exercício 9
Exercício 10
Exercício 11
Exercício 12
Exercício 13

Exemplos

Exemplo 2a
Exemplo 2b
Exemplo 3a
Exemplo 3b
Exemplo 4a
Exemplo 4b
Exemplo 5
Exemplo 6
Exemplo 7
Exemplo 8
Exemplo 9
Exemplo 10
Exemplo 11
Exemplo 12
Exemplo 13

Objectivos

• Compreender o conceito de layout fixo, fluido, elástico e híbrido;
• Compreender o fluxo normal dos elementos numa página html;
• Compreender o posicionamento dos elementos numa página html;
• Compreender a flutuação dos elementos numa página html;
• Compreender a utilização da função clear no lay out de uma página html;
• Compreender a ordem da cascata;
• Compreender o conceito de inerência;

Conteúdos

CSS.
Layout:

• Fixo;
• Fluido;
• Elástico;
• Híbrido.

Fluxo dos objectos:

• Posicionamento;
• Floats;
• Clear;

Ordem da cascata e inerência.

Metodologia:

• Criar documentos html segundo o tipo de layouts estudado;
• Realizar exercícios de posicionamento e flutuação;

Recursos

leonelcunha.net/formacao

CSS: Layout
CSS: Posicionamento

Exemplos

Selectores 1
Selectores 2
Posicionamento 1
Posicionamento 2
Posicionamento 3
Posicionamento 4
Posicionamento 5
Posicionamento 6
Posicionamento 7
Posicionamento 8

Caixa centrada fixa
Caixa centrada fluída
Caixa fixa vertical e horizontalmente

 

Layout fixo centrado
Layout elástico centrado
Layout liquido centrado
Layout hibrido

Layout com uma coluna e menu fixo
Layout com duas colunas
Layout com duas colunas e menu fixo
Layout com header, duas colunas e menu fixo
Layout com menu no topo
Layout de tres colunas

Objectivos

• Compreender as estruturas de menus de navegação;
• Desenvolver menus de navegação;
• Conhecer o spry framework;
• Aplicar wigets do spry framework.

Conteúdos

Navegação

• Âncoras;
• Links;
• Pseudo Classes;
• Pseudo Elementos.

Listas.
O Spry Framework:

• Menu Bar;
• Tabbed Panels,
• Accordion;
• Collapsibel Panel;
• Silind Panel.

Recursos

leonelcunha.net/formacao

Links
Menu de navegação
Menu horizontal
Menu vertical
Spry Accordion
Spry Collapsible Pannel
Spry Menu Bar
Spry Tabbed Pannels
Sliding Pannels

Exemplos

Sliding Panel Vertical
Sliding Panel Horizontal
Tool Tip
Blind
Fade
Grow
Highlight
Opacity
Shake
Size
Slide
Transition

Mais Exemplos da Biblioteca Spry

Objectivos

• Conhecer frameworks de javascript;
• Conhecer widgets de javascript;
• Aplicar widgets de javascript em documentos html;
• Conhecer e aplicar meta tags num documento html;
• Estruturar e desenvolver uma página html por secções aplicando widgets.

Conteúdos

Widgets de Javascript:

• LightBox;
• Bumpbox;
• Smoothscroll;
• etc.

Meta tags.
Site / portfolio de uma página (aplicação dos conhecimentos).

Recursos

Meta tags

Meta tags

Widgets | Exemplos

Lightbox
Thickbox
Bumpbox
Fancybox
Highslide
Smoothscroll

Site de uma página | Exemplos

Exemplo com collapsible panel
Exemplo com smooth scroll
Exemplo com sliding panel

Links

Lightbox2
Thickbox
Pirobox
Bumpbox
Fancybox
Highslide
Queness
Coda-Slider 2.0
SmoothGallery
Smoothscroll

Links |Artigos

45+ New jQuery Techniques For Good User Experience
7'Scroll to Top’ jQuery Solutions

Imagens

Calhaus

Objectivos

• Conhecer formas de optimização de documentos CSS;
• Conhecer Frameworks de CSS;
• Aplicar Frameworks de CSS;
• Optimizar conteúdo para a web;
• Inserir diferentes medias num documento html;
• Aplicar imagens de background a vários elementos html;
• Analisar exemplos de sites/portfolio de uma só página.

Conteúdos

CSS:

• Backgrounds.

Optimização e inserção de media num documento html:

• png;
• jpg;
• gif;
• flv;
• swf;
• mp4

Organização do documento CSS.
Frameworks CSS.
Site, portfolio de uma página:

• casos de estudo
• organização da informação
• estrutura da interface
• interactividade

Recursos

Exemplos de aplicação de imagens de fundo

Background centrado
Background fixo
Background. Padrão
Background. Repetição horizontal
Background. Imagem grande
Background. Imagem elástica 1
Background. Imagem elástica 2
Outros exemplos

Exemplos de inserção de vídeo e animação

Inserção de .swf 1
Inserção de .swf 2
Inserção de vídeo .flv
Inserção de vídeo .mov
Vídeo embebido

CSS Frameworks

Blueprint (CSS framework)
YUI Grids (CSS framework)
YAML (CSS framework)
Elastic (CSS framework)
960 Grid System
Emastic
Snowdust (CSS framework)

Compressores de CSS

CSS compressor
cssdrive/compressor
Clean CSS
CSS check
CSS optimizer

Exemplos de compressão

Exemplo 1 (css compressor)
Exemplo 2 (clean css)

Sites de uma só página

Full single

Ficheiros

Imagens
Vídeo .mov
Vídeo .flv
Animação .swf

Objectivos

• Apreender o conceito de arquitectura de informação;
• conhecer sistemas da arquitetura de informação;
• Compreender o conceito de fluxo de informação;
• Compreender o conceito de avaliação heurística;
• Conhcer técnicas de Image Replacement;
• Aplicar técnicas de Image Replacement;
• Conhecer e aplicar imagens de fundo a vários elementos html;
• Conhecer a aplicar selectores de atributos.

Conteúdos

Arquitectura de Informação

• Organização da informação;
• Fluxo da informação;
• Avaliação heurística.

Image replacement

• Fahrner Image Replacement (FIR);
• Leahy /Langridge Image Replacement;
• Phark Image replacement;
• Lindsay Image replacement;
• Gilder/Levin Image replacement;
• Shea Image replacement.

Backgrounds

Selectores de atributos

Recursos

Arquitectura de Informação
Qualidades de uma interface
Heurísticas

Image Replacement

Image replacement: FIR
Image replacement: Phark
Image replacement: Lindsay
Image replacement: Langridge
Image replacement: Gilder/Levin
Image replacement: Shea

Backgrounds

Background image /selector de atributo

Exercício

Aplicação

Objectivos

• Conhecer e aplicar grelhas;
• Aplicar css de forma modular;
• Definir o site do projecto final;
• Organizar e hierarquizar conteúdos;
• Definir sistemas de menus;
• Definir rótulos de menus;
• Optimizar ficheiros e código
• Validar html e css
• Conhecer os novos elementos de HTML5

Recursos

Formatação de tabelas. Smashing Magazine
Top 10 CSS table designs

Designing with grid based approach
Gridinator
Grid 960
Variavel grid system
fluid960gs

WHATWG
HTML 5 Demos and Examples
Html5 Gallery
Html5 Doctor
Html5 Experiments
Dive into Html 5

960 grid system
Fluid 960
Exemplo

Estrutura de um documento HTML5
Template HTML5
HTML5 novos elementos
HTML5 vídeo
HTML5 Áudio

Objectivos

• Conhecer exemplos de estuturas de css;
• Conhecer e aplicar css reset;
• Aplicar css3

Conteúdos

Aplicações para optimização de sites.
Optimização do código.
Teste e validação de html e css.
Upload de ficheiros para o servidor.
Cloaking.
Criar documentos em HTML5

CSS3:

• exemplos e aplicação
• Personas;
• Público-alvo;
• Interface espelho / interface janela;
• A interface enquanto objecto comunicativo;

css3.info
30 Essential CSS3 Resources
CSS3 Gradient Generator
CSS3 Generator
CSS3 Demos

Developer @ Mozilla
Developer @ Ópera
Developer @ Safari
Webkit
Font Squirrel

Exemplos

Media Queries
Cantos Redondos
Sombras
Opacidade
Cores
Sombras de texto
Gradientes
Resize
Multiplas Colunas
Flip
Links de Imagem
@font-face
@font-face Kit

Exemplo da alteração de um documento xhtml para HTML5

Bibliografia

CSS Mastery Advanced Web Standards Solutions
FriendsofED, Fevereiro, 2006

The Essential Guide to Dreamweaver CS3 with CSS Ajax and PHP
FriendsofED, Julho,2007

Foundation Website Creation with CSS XHTML and JavaScript
FriendsofED, Julho, 2008

Web Standards Solutions Special Edition
FriendsofED, Maio, 2009

The Non-Designer's Design Book
2ª edição, 2004

Good Design in the Digital Age

Cheat sheets

Dreamweaver: Referência rápida
Dreamweaver: Atalhos
HTML: Referência 1
HTML: Referência 2
HTML: Referência 3
CSS: Layout
CSS: Referência 1
CSS: Referência 2
CSS: Referência 3

Revistas

Smashing Magazine
Web Designer Wall
Design Reviver
Artigos actuais, tutoriais e downloads.

Recursos para Web Design

W3C.org
Organização internacional que se dedica ao desenvolvimento de web standards.
W3Schools
Excelente recurso de estudo online de xHTML, CSS; JS, XML, Flash; etc.
Dreamweaver Developer Center
Centro de recursos da Adobe, orientado para web developers.
CSS Zen Garden
Excelente demonstração do que é possivel fazer com CSS. Uma referência na web!
CSS Play
Experiências com CSS. Um conjunto de demonstrações avançadas do que é possivel fazer com CSS.
Glish.com
Técnicas de Layout com CSS.
Listamatic
Excelentes tutoriais de menus e layouts com cSS.
Layout Gala
Série de layouts compativeis com vários browsers.
Little Boxes
Layouts em XHTML e CSS.http://www.w3schools.com/default.asp
CSS Basics
Livro online sobre CSS. Conciso e muito prático.
CSS Model
Técnicas e recursos de CSS. Links para outros sites com galerias, tutoriais e templates.
Criar Web
Site sobre desenvolvimento web. Bastante útil. Em Português!
Dinamic Drive
Livrarias de CSS. Ferramentas e tutoriais de javascript. Excelente recurso!
Visual Blast
Excelente agregador de recursos. Em português!
Css Generator
Css Generator. Ferramenta geradora de layouts. Bom site com mais recursos e fórum.
mitchbryson.com
Poucos, mas bons templates, com ficheiros CSS muito completos e bem construídos.
corkdump.com
Excelente fonte de recursos para developers e designers!

Showcases de sites em XHTML / CSS

Excelentes fontes de referência / inspiração.
CSS Container
Css Mania
CSS Hazard
CSS Based
CSS Leak
CSS Index
CSS Beauty
CSS Pig
Unmatched Style
Best Web Gallery
Web Site Design Awards
Style Boots
Net Diver
Full Single
Minimal Sites

Net Book

Web Developers Handbook
Uma lista de links fundamentais para web design e web development. HTML, CSS javascript, usabilidade, etc.