Professional Documents
Culture Documents
Contedo programtico
1 Conceitos bsicos de mdias digitais
2 Conceitos bsicos de Web
3 Usabilidade
4 Webdesign
5 Equipe de produo Web
6 Imagem e cor nas mdias digitais
7 Tipografia na Web
8 Formatos de mdias para Web
9 Mdias mobile
10 Softwares para produo Web
11 Softwares para produo audiovisual
2
25/02/2015
Conceito de multimdia
No mbito das mdias audiovisuais, identificamos
uma subdiviso em dois grupos bsicos: de um
lado as mdias tradicionais e do outro as novas
mdias (multimdia).
A definio mais precisa para o que caracteriza o
grupo multimdia mdia
digital interativa.
3
Nova mdia
A nova mdia no se configura apenas como uma extenso linear da antiga,
ela expande a gama de recursos para novas dimenses.
Oferece ligaes interativas on-line entre o consumidor e o provedor de
informaes. Esta capacidade acrescenta uma importante nova dimenso ao
atual padro da mdia de massa que consiste de produtos unidirecionais
fornecidos por uma fonte centralizada (jornal, TV ou cinema). A nova mdia
permite aos consumidores escolher quais recursos de informao e
entretenimento desejam, quando e de que forma utiliz-los.
Segundo DIZARD, o resultado pode ser uma nova espcie de ambiente de
comunicaes democrtico, igualando-se previso da dcada de 60 do
guru da mdia, Marshall McLuhan, sobre mquinas de informao de ltima
gerao que faro do homem comum seu prprio editor.
4
25/02/2015
Hotsite
um pequeno site planejado para apresentar e destacar uma ao de comunicao
e marketing pontual. Possui tempo de vida til determinado e ligado a uma ao de
marketing ou comunicao especfica, com durao vinculada a esta ao
mercadolgica, como lanamento de produtos, eventos, novas edies de produtos
ou servios, etc. Geralmente possuem um apelo visual maior e so mais focados em
um pblico especfico.
6
25/02/2015
Home Page
O contedo de um site um conjunto de documentos
multimdia de acesso remoto. Home o nome dado
primeira tela de sites de navegao simples.
Um website composto de vrios documentos de
hipertexto intercalados e dos recursos relacionados a eles:
imagens, sons, multimdia, vdeo, etc, que ficam gravados
no disco do servidor e so chamadas de pginas web.
25/02/2015
http://www.meusite.com.br
Domnio
especfico
Categoria
do site
Localizao
do domnio
10
25/02/2015
Copyleft
uma forma de usar a legislao de proteo dos direitos autorais com o objetivo
de retirar barreiras utilizao, difuso e modificao de uma obra criativa devido
aplicao clssica das normas de propriedade intelectual, sendo assim diferente
do domnio pblico que no apresenta tais restries.
12
25/02/2015
3 Usabilidade
Usabilidade = facilidade de uso
A usabilidade um aspecto da ergonomia.
um termo usado para definir a facilidade com que as pessoas podem empregar uma
ferramenta ou objeto a fim de realizar uma tarefa especfica e importante. Pode
tambm se referir aos mtodos de mensurao da usabilidade e ao estudo dos
princpios relacionados eficincia percebida de um objeto.
No mbito da Interao Humano-computador e da Cincia da Computao,
usabilidade se refere simplicidade e facilidade com que uma interface, um programa
de computador ou um website podem ser utilizados. Est relacionada aos estudos de
Ergonomia e de Interao Humano-computador.
Segundo FERRARI, o conjunto de caractersticas de um produto que definem seu
grau de interao com o usurio.
13
3 Usabilidade
Aspectos importantes:
Fcil aprendizagem
Utilizao eficiente
Poucos erros
Memorizao
Satisfao
Referncias principais: Jakob Nielsen e Steve Krug
14
25/02/2015
3 Usabilidade
Dicas de usabilidade
Design
ANIMAO: Deixar o usurio optar se quer ver ou no a abertura. No animar o
ttulo do site, assim como no se deve animar o logotipo.
O logotipo principal deve ficar junto com o nome do site, de preferncia no canto
esquerdo superior da home.
Texto e Layout
3 Dicas de Usabilidade
LAYOUT: Sempre que possvel, deve ser fluido e simples para ajustar-se a
qualquer resoluo de tela.
SEES: Nome-las e orden-las segundo sua importncia para o usurio.
Elementos diversos
CONES: S us-los na navegao se identificarem facilmente um tipo de produto
ou arquivo.
LINKS: Comear cada link com a palavra mais importante da informao a que ele
conduz.
BUSCA: Pr uma caixa para ela direto na home. O default deve ser a pesquisa no
site todo (o prprio Google oferece uma ferramenta para busca interna).
ATALHOS: oferecer atalhos imediatos para os servios mais procurados no site.
ANNCIOS: Devem ficar nas bordas da pgina, e nunca ao lado de itens de
prioridade alta.
16
25/02/2015
3 Usabilidade
Entender o fator humano
Quem julga o sucesso de um produto de mdia interativa o
usurio. Designers, programadores e empresas que entenderem
o fator humano tero xito em seus produtos.
Um erro fundamental como estratgia de mercado foi no
considerar o desejo e a reao dos usurios tecnologia.
De acordo com pesquisas realizadas nos Estados Unidos,
usurios da Internet apontam como as duas razes principais que
os fazem retornar a um site a facilidade de uso e a rapidez de
download.
17
3 Usabilidade
Arquitetura da Informao (AI)
O contedo de um website necessita ser cuidadosamente organizado em
pginas, menus e mapas de navegao.
AI consiste na estruturao das informaes de sistemas computacionais de
forma lgica e na criao de solues quanto organizao visual destas
informaes.
Envolve a organizao do fluxo de informao objetivando torn-la til e
inteligvel. Une trs reas fundamentais: tecnologia, design e produo de
contedo. (jornalismo e redao).
Jakob Nielsen
18
25/02/2015
3 Usabilidade
Arquitetura da Informao (AI)
O profissional de AI deve estar apto a analisar e entender as
necessidades dos usurios e projetar uma arquitetura da
informao clara, que permita que tudo o que o usurio procure
seja encontrado rpida e facilmente.
O AI responsvel pelo desenho do mapa do site, que apresenta
o fluxo e a hierarquia do contedo do site em seus vrios nveis.
Jakob Nielsen
19
4 Webdesign
Interface grfica
Refere-se a como as pginas se apresentam e tambm a como
elas funcionam e interagem com o usurio. o ponto de contato
entre um ser humano e uma mquina. Em web, a aparncia
dos websites. o ambiente grfico do produto digital, o canal de
comunicao do usurio final com o contedo do sistema de
computador (o elemento de transio entre o mundo real e o
digital). composta de links, cones, botes, etc. que permitem
que o usurio interaja com a mquina sem precisar dominar
cdigos de programao.
20
10
25/02/2015
4 Webdesign
O webdesign totalmente diferente do design grfico
tradicional para a mdia impressa. Webdesign antes de
tudo design interativo.
Fazer design para a Web no fcil, porque cada tela pode
se comportar de uma forma diferente: so browsers,
computadores, sistemas operacionais, cores, letras,
tamanhos de monitor, etc.
No h como desenhar documentos que fiquem iguais em
todos os sistemas a no ser que se nivele por baixo. Por
isso muito importante saber o que o meio comporta e o
que no comporta.
21
4 Webdesign
Browsers podem ocupar qualquer tamanho em um
monitor. Mesmo a tela sendo grande, nada impede o
usurio de abrir uma janela pequena. Como no existe
tamanho fixo nem definitivo para a interface que
aparecer na tela, o design deve ser bastante verstil
para se ajustar a qualquer configurao.
A primeira fase da web caracterizou-se pela experincia
espacial (revista eletrnica, aspecto grfico). A web ps
Flash caracteriza-se pela experincia temporal (cinema,
movimento).
22
11
25/02/2015
4 Webdesign
Relao entre texto e imagem
Redundante
Os mesmos elementos so reproduzidos visual e
verbalmente, repetindo as idias principais e contando a
mesma histria. Nesses casos, ler o texto ou ver a imagem
traz exatamente a mesma informao.
Complementar
Texto e imagem apresentam contedos diferentes.
preciso ver os dois modos para que se entendam as idias
principais.
23
4 Webdesign
Relao entre texto e imagem
Cenrio
Um dos elementos define um cenrio (ou ambiente) e conta a
situao. O segundo conta uma histria dentro desse
ambiente.
Suplementar
Os contedos de texto e imagem so diferentes. Um modo
domina, mandando as idias principais, enquanto o outro
refora, elabora ou as explica.
24
12
25/02/2015
4 Webdesign
Legibilidade
A legibilidade dada em funo da tipologia, da cor
do texto, do tamanho da letra dos espaamentos
(kerning e tracking), da largura da coluna etc.
25
4 Webdesign
Planejamento (etapas)
Objetivos
Qual o tipo de produto e o que se pretende com a
comunicao
Pblico
A quem se dirige a comunicao
Formato
Suas dimenses e propores
Resposta
O que se pretende com ele.
26
13
25/02/2015
Diretor de Criao
Funo: Criar o projeto grfico do site, coordenar o trabalho
dos designers e fornecedores.
Coordenador de projeto
Funo: Garantir o prazo o oramento estipulados, contactar
fornecedores e cobr-los.
27
Atendimento e marketing
Funo: Garantir a adequao do projeto estratgia mercadolgica
determinada pelo cliente.
Redatores e editores
Funo: Escrever os textos e garantir sua consistncia, adequando-o
ao pblico leitor.
14
25/02/2015
Webdesigner
Funo: Garantir o funcionamento do site. o programador
responsvel pela manuteno do site, suporte tcnico e correo de
eventuais problemas.
29
Testadores
Funo: Revisar os processos para evitar erros (bugs).
30
15
25/02/2015
Imagem
Existem quatro tipos de funo que uma
imagem pode realizar em um website:
1 - ilustrar;
2 - boto com link de hipertexto;
3 - mapa (image map) com reas clicveis;
4 - imagem de fundo.
31
16
25/02/2015
Resoluo
33
cones
34
17
25/02/2015
18
25/02/2015
Cor
37
Valores RGB
As imagens utilizadas em mdias digitais devem ser salvas no modo RGB.
Cada cor RGB possui um valor (intensidade), de 0 a 255. As combinaes
desses valores produzem as vrias cores. Ex: R 30, G 170, B 255.
Cor hexadecimal
Na linguagem HTML as cores RGB so traduzidas para o cdigo
hexadecimal. Ex: #FF0072. Isso pode ser verificado ao visualizarmos o
cdigo fonte de uma pgina.
38
19
25/02/2015
7 Tipografia na Web
Pensar em tipografia para Web desenhar mensagens
interativas. O uso da tipografia na Web envolve solues (em
muitos casos) inovadoras e nicas, levando-se em conta os
instrumentos (computadores, modems), novos sinais grficos (#,
@), novas dimenses (hipertexto, hiperlink), novas linguagens
(html, java) e necessidades individuais a serem atendidas.
Existem empresas que produzem e distribuem fontes otimizadas
para uma melhor visualizao na tela (melhor adequao do tipo
grade de pixel do monitor). Suas caractersticas so: caracteres
com hastes mais largas, maior altura do corpo, maior espao
entre letras .
40
20
25/02/2015
7 Tipografia na Web
Evitar o uso de Famlias do tipo cursivo (que imitam caligrafia) em
maisculas, pois no foram projetadas para este uso.
L E T R A S S E P A R A D A S so uma soluo radical para
a mudana de ritmo e reconhecimento de palavras. Evite usar
esse recurso com minsculas, pois seu desenho original no
prev tamanha separao.
Deixe espaos em branco para garantir o arejamento do texto.
Evite usar para massas de texto uma fonte muito grande com uma
entrelinha apertada. Textos menores com uma entrelinha maior
possuem uma leitura mais agradvel.
41
7 Tipografia na Web
21
25/02/2015
7 Tipografia na Web
Alinhamento
Um texto alinhado esquerda a forma mais fcil de se ler. Textos
centralizados costumam ser estticos. Podem ser usados como
ttulos de produtos clssicos ou tradicionais. No se deve us-los
para textos corridos.
Alinhar direita uma soluo de contraste bastante radical e
costuma chamar muito a ateno. Em longos textos to difcil
quanto o layout centralizado.
O texto blocado no deve ser utilizado em colunas estreitas, pois
podem criar rios de espaos em branco entre as palavras,
dificultando a leitura.
43
7 Tipografia na Web
Formatos de Fontes
Fontes TTF (true type)
So as mais comuns, este formato foi desenvolvido por uma parceria entre a Microsoft e
a Apple. Nele a fonte que voc v na tela a mesma que ser impressa, o que o torna
bastante verstil.
Fontes PostScript (Type 1 ou PS)
Desenvolvido pela Adobe Corporation, este tipo de fonte composto por dois arquivos:
um para visualizao na tela e outro para impresso. muito usado na indstria
grfica. Para o uso deste formato necessrio um software para habilit-la e para que o
sistema a reconhea.
Fontes Bitmap (fontes de tela ou screen fonts)
So otimizadas para apresentar o mximo de qualidade na tela, levando em conta a
grade de pixels. No possuem anti-aliasing (anti-serrilhado), por isso apresentam uma
leitura na tela melhor. So desenhadas para serem usadas em um nico tamanho.
44
22
25/02/2015
Full banner
Formato: 468x60 pixels
Half banner
Formato: 234x60 pixels
Boto
Formato: 125x50 pixels
Banner Vertical
Formato: 120x240 pixels
PopUp
Janela flutuante, ativada aps o carregamento da pgina.
Formato: 250x250 pixels
45
E-mail mkt
E-mail personalizado do anunciante. Em geral enviado para um pblico
segmentado.
Super banner
Formato: 728x90 pixels
PopUnder
Janela que carrega atrs do site, quando o usurio fecha a janela do site,
v outra janela aberta.
Floater ou DHTML
Pea dinmica que flutua na tela e que pode ser fechada ou fica por tempo
determinado.
Formato: varivel, substituindo o popup, que est sendo bloqueado
46
23
25/02/2015
9 Mdias mobile
Browsers (navegadores)
Programas leitores de hipertexto. Tem por funo mostrar
os documentos do website. O browser permite a
visualizao de grficos, cores, links etc. Ele l as
informaes na pgina web e as exibe na tela.
Internet Explorer
Mozilla Firefox
Google Chrome
Safari
Opera
48
24
25/02/2015
Editores Web
Adobe Dreamweaver, Adobe Flash, Microsoft Expression
Edio de vdeo (composio de vdeo)
Adobe Premiere
Apple Final Cut
Avid
Adobe After Effects
Autodesk Combustion
Sony Vegas
49
Digitais
SDTV (480i, 576i)
HDTV (1080i) e (1080p)
50
25
25/02/2015
52
26
25/02/2015
Bibliografia
53
27