Projeto Hipermídia e Multimídia Conceitos e aplicações das mídias digitais
Professor Anderson Carvalho
AGENDA 1. 2. 3. 4.
5. 6. 7.
Introdução aos conceitos de Hipertexto, Multimídia e Hipermídia Internet em seu aspecto de rede Edição de imagens Apresentações digitais; Criação e publicação de Animações Áudio Vídeo.
AGENDA 1. 2. 3. 4.
5. 6. 7.
Introdução aos conceitos de Hipertexto, Multimídia e Hipermídia Internet em seu aspecto de rede Edição de imagens Apresentações digitais; Criação e publicação de Animações Áudio Vídeo.
1. Introdução aos conceitos de Hipertexto, Multimídia e Hipermídia
1. Introdução aos conceitos de Hipertexto, Multimídia e Hipermídia
Transmissão do conhecimento
Verbal? Gestos? Símbolos?
1. Introdução aos conceitos de Hipertexto, Multimídia e Hipermídia
O Texto na história da humanidade “A transmissão do conhecimento através das palavras escritas”
O livro sempre foi rei
1. Introdução aos conceitos de Hipertexto, Multimídia e Hipermídia
HIPERTEXTO “Hipertexto é o termo que remete a um texto em formato digital, ao qual se agregam outros conjuntos de informação na forma de blocos de textos, palavras, imagens ou sons, cujo acesso se dá através de referências específicas denominadas hiperlinks, ou simplesmente links”.
Escrita e Leitura NÃO lineares
1. Introdução aos conceitos de Hipertexto, Multimídia e Hipermídia
MULTIMÍDIA “Programas e sistemas em que a comunicação entre homem e computador se dá através de múltiplos meios de representação de informação. A Multimídia requer, especificamente, o computador como meio de apresentação”.
1. Introdução aos conceitos de Hipertexto, Multimídia e Hipermídia
MULTIMÍDIA “Apresentação ou recuperação da informação se faz de maneira multi-sensorial”
1. Introdução aos conceitos de Hipertexto, Multimídia e Hipermídia
HIPERMÍDIA “Une os conceitos de nãolinearidade (não-linear), hipertexto, interface e multimídia numa só linguagem”.
AGENDA 1. 2. 3. 4.
5. 6. 7.
Introdução aos conceitos de Hipertexto, Multimídia e Hipermídia Internet em seu aspecto de rede Edição de imagens Apresentações digitais; Criação e publicação de Animações Áudio Vídeo.
2. Internet em seu aspecto de rede
A rede das infinitas possibilidades
2. Internet em seu aspecto de rede Histórico
Servidores Protocolos Padrões:
DTD, XML, SMIL Stream de áudio e vídeo
2. Internet em seu aspecto de rede Histórico
Servidores Protocolos Padrões:
DTD, XML, SMIL Stream de áudio e vídeo
2. Internet em seu aspecto de rede Histórico Auge
da guerra fria (década de 1960) Descentralização da informação ARPANET 1969: primeiro email MILNET + ARPANET 1992: surge a World Wide Web
2. Internet em seu aspecto de rede Hist贸rico
INTERNET Um advento de bases tecnol贸gicas e culturais
2. Internet em seu aspecto de rede Histórico
Servidores Protocolos Padrões:
DTD, XML, SMIL Stream de áudio e vídeo
2. Internet em seu aspecto de rede Servidores
SERVIDORES
Sistema de computação (hardware e software) que fornece serviços a uma rede de computadores.
2. Internet em seu aspecto de rede Servidores
Servidor de Fax: Servidor para transmissão e recepção automatizada de fax pela Internet, disponibilizando também a capacidade de enviar, receber e distribuir fax em todas as estações da rede. Servidor de arquivos: Servidor que armazena arquivos de diversos usuários. Servidor web: Servidor responsável pelo armazenamento de páginas de um determinado site, requisitados pelos clientes através de browsers. Servidor de e-mail: Servidor responsável pelo armazenamento, envio e recebimento de mensagens de correio eletrônico. Servidor de impressão: Servidor responsável por controlar pedidos de impressão de arquivos dos diversos clientes. Servidor de banco de dados: Servidor que possui e manipula informações contidas em um banco de dados Servidor DNS: Servidores responsáveis pela conversão de endereços de sites em endereços IP e vice-versa.
2. Internet em seu aspecto de rede Servidores
Servidor proxy: atua como um cache, armazenando páginas da internet recém-visitadas, aumentando a velocidade de carregamento destas páginas ao chamá-las novamente. Servidor de imagens: Tipo especial de servidor de banco de dados, especializado em armazenar imagens digitais. Servidor FTP: Permite acesso de outros usuários a um disco rígido ou servidor. Armazena arquivos para dar acesso a eles pela internet. Servidor webmail: servidor para criar emails na web. Servidor de virtualização: permite a criação de máquinas virtuais (servidores isolados no mesmo equipamento) mediante compartilhamento de hardware, significa que, aumentar a eficiência energética, sem prejudicar as aplicações e sem risco de conflitos de uma consolidação real. Servidor de sistema operacional: permite compartilhar o sistema operacional de uma máquina com outras, interligadas na mesma rede, sem que essas precisem ter um sistema operacional instalado, nem mesmo um HD próprio.
2. Internet em seu aspecto de rede Histórico
Servidores Protocolos Padrões:
DTD, XML, SMIL Stream de áudio e vídeo
2. Internet em seu aspecto de rede Protocolos
PROTOCOLOS
Convenção ou padrão que controla e possibilita uma conexão, comunicação, transferência de dados entre dois sistemas computacionais.
2. Internet em seu aspecto de rede Protocolos IP
= Internet Protocol TCP = Transmission Control Protocol DHCP = Dynamic Host Configuration Protocol HTTP = Hypertext Transfer Protocol FTP = File Transfer Protocol POP3 = Post Office Protocol 3 SMTP = Simple Mail Transfer Protocol IMAP = Internet Message Access Protocol
2. Internet em seu aspecto de rede Histórico
Servidores Protocolos Padrões:
DTD, XML, SMIL Stream de áudio e vídeo
2. Internet em seu aspecto de rede Padrões (arquivos)
DTD
(Document Type Definition)
Contém as regras que definem quais as tags que podem ser usadas em um documento XML e quais os valores válidos.
2. Internet em seu aspecto de rede Padrões (arquivos)
XML
(eXtensible Markup Language)
É uma recomendação da W3C para gerar linguagens de marcação para necessidades especiais.
2. Internet em seu aspecto de rede Padrões (arquivos)
SMIL
(Synchronized Multimedia Integration Language)
Padrão W3C baseado em XML para exibir apresentações multimídia na Internet.
2. Internet em seu aspecto de rede Histórico
Servidores Protocolos Padrões:
DTD, XML, SMIL Stream de áudio e vídeo
2. Internet em seu aspecto de rede Stream de áudio e vídeo SERVIDOR
STREAM
A tecnologia de streaming se utiliza para tornar mais leve e rápido o download e a execução de audio e video na web, já que permite escutar e visualizar os arquivos enquanto se faz o download.
AGENDA 1. 2. 3. 4.
5. 6. 7.
Introdução aos conceitos de Hipertexto, Multimídia e Hipermídia Internet em seu aspecto de rede Edição de imagens Apresentações digitais; Criação e publicação de Animações Áudio Vídeo.
3. Edição de imagens
Uma imagem fala MAIS que 1000 palavras
3. Edição de imagens
Formatos e aplicações Sistemas de cores Imagens vetoriais vs. Bitmaps Principais ferramentas e suas características Dimensionamento Otimização do tamanho em disco Conceitos de Design Tratamento Manipulação de imagens em camadas
3. Edição de imagens
Formatos e aplicações Sistemas de cores Imagens vetoriais vs. Bitmaps Principais ferramentas e suas características Dimensionamento Otimização do tamanho em disco Conceitos de Design Tratamento Manipulação de imagens em camadas
3. Edição de imagens Formatos e aplicações
FORMATOS
Cada um tem o seu destino!
3. Edição de imagens Formatos e aplicações
3. Edição de imagens Formatos e aplicações Menus de websites
3. Edição de imagens Formatos e aplicações Menus de websites
Impressão
3. Edição de imagens Formatos e aplicações Menus de websites
Aplicativos
Impressão
3. Edição de imagens 1. Menus de websites
3. Aplicativos
2. Impressão
4. Banners animados
3. Edição de imagens Formatos e aplicações
Cada formato tem sua Origem
3. Edição de imagens Formatos e aplicações PRINCIPAIS FORMATOS DE ARQUIVOS DE IMAGENS Extensão
Nome
Descrição
.ai
Adobe Illustrator Document
Formato vectorial do Adobe Illustrator. Mais utilizado em ambientes Mac.
.bmp
Windows bitmap
Comumente usado pelos programas Microsoft Windows, Compressão sem perdas de informação.
.cpt
Corel Photo Paint
Concorrente do PSD (Adobe). Utilizado na grande maioria dos casos apenas pelas ferramentas da Corel.
.cdr
Corel Draw
Suporta imagens vetoriais e bitmaps. Aceito apenas pelas ferramentas da Corel.
.eps
Encapsulated PostScript
Formato com a finalidade de importar e exportar arquivos PostScript. Utilizado para intercâmbio de imagens vetoriais.
.gif
Graphics Interchange Format
Usado extensivamente na web, Suporta imagens animadas com somente 255 cores por quadro. Aconselhável para imagens pequenas.
.jpeg .jpg
Joint Photographic Experts Group
Usado extensivamente para fotos na web e câmeras digitais. Usa compressão com perda de informação.
3. Edição de imagens Formatos e aplicações PRINCIPAIS FORMATOS DE ARQUIVOS DE IMAGENS Extensão
Nome
Descrição
Portable Document Format
É um formato nativo do Adobe Acrobat Reader, Adobe Acrobat Professional e do Adobe eBook Reader. Permite múltiplas páginas e ligações (links).
.png
Portable Network Graphics
Formato de imagem bitmap comprimido sem perdas de informação. Aceita fundo transparente.
.psd
Photoshop Documen
Formato padrão da Adobe para documentos do Photoshop. Dividido em camadas armazena todos os padrões de efeito do Photoshop.
.tiff .tif
Tagged Image File Format
Usado extensivamente para gráficos tradicionais impressos. Compressões com e sem perdas de informação disponíveis. Geralmente arquivo de grandes proporções em disco.
Windows Metafile
Formato nativo do Microsoft Windows para armazenar imagens. Aconselhável para importação no pacote Office.
.wmf
EXERCÍCIOS
EXERCÍCIOS 1. 2. 3. 4.
5. 6. 7.
8. 9. 10.
Descreva com suas palavras de que maneira o conhecimento de toda a história da humanidade culminou com o atual estágio da tecnologia. Dentro do contexto do hipertexto, da multimídia e da hipermídia, como podemos classificar o livro. Explique com suas palavras os conceitos de Hipertexto, Multimídia e Hipermídia. Qual foi a rede precursora da Internet com qual finalidade ela surgiu? Apresente os principais acontecimentos (mínimo 5) desde o seu surgimento até os dias atuais. O que é um servidor? Cite 3 exemplos e suas respectivas finalidades. Considerando as reais vantagens e desvantagens dos servidores de e-mail, apresente as diferenças entre os protocolos POP3 e IMAP. De maneira geral, qual a finalidade de um Servidor Stream. Apresente um exemplo real. Os formatos de imagens se aplicam incondicionalmente em qualquer mídia? Justifique sua resposta. Quais as diferenças entre os formatos .psd e .pdf? Analise websites que contenham imagens de fundo transparente e que estejam mescladas ao layout de maneira imperceptível. Apresente 3 URLs distintas que dão acesso direto à sua respectiva imagem.
3. Edição de imagens
Formatos e aplicações Sistemas de cores Imagens vetoriais vs. Bitmaps Principais ferramentas e suas características Dimensionamento Otimização do tamanho em disco Conceitos de Design Tratamento Manipulação de imagens em camadas
As cores
3. Edição de imagens
As cores
Espectro eletromagnético
3. Edição de imagens
Sistemas de cores
O campo de visão humana abrange
3.000 x 3.000 pixels
3. Edição de imagens
Sistemas de cores
Massssss
O que é um pixel?
3. Edição de imagens
Sistemas de cores
Unidade mínima que representa uma imagem.
3. Edição de imagens
Sistemas de cores
Elemento unidimensional
3. Edição de imagens
Sistemas de cores
Representação digital
do pixel
1 Pixel Colorido = 3 Bytes
3. Edição de imagens
Sistemas de cores
TV Comum: 512 x 480 pixels Monitor CRT: 640 x 480 pixels VHS: 240 linhas DVD: 720 x 480 pixels Equipamentos Full HD: 1920 x 1080 pixels
3. Edição de imagens
Sistemas de cores
PRINCIPAIS MODELOS DE CORES
RGB
CMY(K)
3. Edição de imagens
Formatos e aplicações Sistemas de cores Imagens vetoriais vs. Bitmaps Principais ferramentas e suas características Dimensionamento Otimização do tamanho em disco Conceitos de Design Tratamento Manipulação de imagens em camadas
3. Edição de imagens
Imagens Vetoriais vs. Bitmaps
VETORES VS. BITMAPS Demonstração Prática
3. Edição de imagens
Imagens Vetoriais vs. Bitmaps
Observações:
VETORES: são imagens produzidas através de coordenadas e cálculos matemáticos
Menor tamanho (em disco e na memória) Alteração das dimensões sem perda de qualidade Zoom sem perda de qualidade Mais flexíveis quanto à edição
BITMAPS: são imagens produzidas através de conglomerados pixels em forma de matrizes
Maior tamanho (em disco e na memória) Formada por linhas e colunas de pixels Exige mais recursos de processamento
3. Edição de imagens
Imagens Vetoriais vs. Bitmaps
Observações:
RESOLUÇÃO: quando for necessário imprimir uma imagem, deve-se considerar uma resolução mínima de 300 DPI (trezentos pixels por polegada).
A resolução não influencia na qualidade da imagem quando a mesma está sendo trabalhada em PIXELS como unidade de medida para largura e altura
CONSIDERAÇÃO: 1 Polegada = 2,54 CM
3. Edição de imagens
Formatos e aplicações Sistemas de cores Imagens vetoriais vs. Bitmaps Principais ferramentas e suas características Dimensionamento Otimização do tamanho em disco Conceitos de Design Tratamento Manipulação de imagens em camadas
3. Edição de imagens
Principais ferramentas e suas características
Photoshop
CorelDraw Demonstração Prática
Fireworks
3. Edição de imagens
Principais ferramentas e suas características
Photoshop
Shape tools Color Picker Paths Layer Style Mask Salvar para web History Actions Automate/Batch
3. Edição de imagens
Principais ferramentas e suas características Exercício 1.
2. 3. 4. 5.
Fazer download do EPS em http://dryicons.com/freegraphics/preview/idea/ Importar no CorelDraw Remover lâmpada, pitar de preto e exportar para PSD (202 x 300 pixels fundo transparente) Pesquisar por "idea" no Google Imagens Salvar a imagem "idea.jpg", do site "itavema.com.br"
3. Edição de imagens
Principais ferramentas e suas características Exercício 6.
7. 8.
9. 10.
11. 12.
Pesquisar por "Fiat" no Google Imagens Salvar a imagem "FIAT.jpg", do site "negociosveiculos.com.br" No Photoshop, remover o fundo do logo da Fiat e do carro Idea Criar novo documento com 600 X 300 px (fundo branco) Acessar http://my.opera.com/community/opera/speeddials / Salvar "Opera-Background-Speaker.jpg" Montar banner com todas as imagens salvas.
3. Edição de imagens
Principais ferramentas e suas características
Teclas
CorelDraw
de atalho Color Management Color Palets Shape Tool Cantos arredondados Power Clip Exportar com fundo transparente
3. Edição de imagens
Principais ferramentas e suas características Teclas de atalho
CorelDraw
Centralizar ao documento: P Agrupar: CTRL + G Desagrupar: CTRL + U Alinhar centros horizontalmente: E Alinhar centros verticalmente: C Alinhar ao topo: T Alinhar à base: B Alinhar à esquerda: L Alinhar à direita: R Mover pelos eixos X ou Y: CTRL (pressionada) Converter em curvas: CTRL + Q Duplicar: CTRL + D ou + (numérico)
3. Edição de imagens
Principais ferramentas e suas características
Barra
Fireworks
Properties Crop Tool Export Area Slice Tool Export Wizard Batch Process
3. Edição de imagens
Formatos e aplicações Sistemas de cores Imagens vetoriais vs. Bitmaps Principais ferramentas e suas características Dimensionamento Otimização do tamanho em disco Conceitos de Design Tratamento Manipulação de imagens em camadas
3. Edição de imagens
Dimensionamento
Dimensionar / Redimensionar Manter a proporção é essencial
3. Edição de imagens
Formatos e aplicações Sistemas de cores Imagens vetoriais vs. Bitmaps Principais ferramentas e suas características Dimensionamento Otimização do tamanho em disco Conceitos de Design Tratamento Manipulação de imagens em camadas
3. Edição de imagens
Otimização em disco
Ao escolher um formato e exportar uma imagem sempre analise a relação CUSTO-BENEFÍCIO Recurso de exportação do Adobe Fireworks
3. Edição de imagens
Otimização em disco
Custo
CUSTO-BENEFÍCIO
Tamanho da imagem em disco Tempo para download (carregamento)
Benefício
Qualidade
3. Edição de imagens
Formatos e aplicações Sistemas de cores Imagens vetoriais vs. Bitmaps Principais ferramentas e suas características Dimensionamento Otimização do tamanho em disco Conceitos de Design Tratamento Manipulação de imagens em camadas
3. Edição de imagens
Conceitos de Design (exemplo prático)
Proximidade Alinhamento Repetição Contraste
3. Edição de imagens
Conceitos de Design (exemplo prático)
Tudo o Que Vai
Volta
Uma capa de relatório comum, sem criatividade. Aparenta 6 tópicos separados, com elementos individuais.
3. Edição de imagens
Conceitos de Design (exemplo prático)
Tudo o Que Vai Volta
Proximidade Se os itens estiverem relacionados entre si, agrupe-os em proximidade. Varie o espaço entre os itens para indicar a proximidade ou a importância dessa ligação.
3. Edição de imagens
Conceitos de Design (exemplo prático)
Tudo o Que Vai Volta
Alinhamento Para que a página inteira fique unificada, alinhe cada objeto com a parte lateral do outro. Se os alinhamentos forem “Fortes”, então pode-se optar por quebrar ocasionalmente um alinhamento, e essa modificação não parecerá um erro.
3. Edição de imagens
Conceitos de Design (exemplo prático)
Tudo o Que Vai Volta
z
Robin Williams
Repetição Permite a consistência do material. Observe os elementos que já se repetem (sinais, fontes, linhas, cores, etc.); avalie se é apropriado fazer que um deles fique mais marcante e REPITA-O. A repetição também ajuda a fortalecer a percepção do leitor para reconhecer o que o design representa.
3. Edição de imagens
Conceitos de Design (exemplo prático)
Tudo o Que Vai Volta
Robin Williams
Contraste Esta página não atrai os olhos muito mais que a anterior? O responsável é o contraste do preto contra o branco. Há várias maneiras de criar contrastes: fios, fontes, cores, relações espaciais, etc.
3. Edição de imagens
Formatos e aplicações Sistemas de cores Imagens vetoriais vs. Bitmaps Principais ferramentas e suas características Dimensionamento Otimização do tamanho em disco Conceitos de Design Tratamento Manipulação de imagens em camadas
3. Edição de imagens
Tratamento
Sequência básica no Photoshop
Recursos aplicáveis à maioria das fotos
3. Edição de imagens
Formatos e aplicações Sistemas de cores Imagens vetoriais vs. Bitmaps Principais ferramentas e suas características Dimensionamento Otimização do tamanho em disco Conceitos de Design Tratamento Manipulação de imagens em camadas
3. Edição de imagens
Camadas
Paleta Layers
Blanding Options Opacity Fill Lock Visibility Style
Mask Adjustments Layers group New layer Delete
AGENDA 1. 2. 3. 4.
5. 6. 7.
Introdução aos conceitos de Hipertexto, Multimídia e Hipermídia Internet em seu aspecto de rede Edição de imagens Apresentações digitais; Criação e publicação de Animações Áudio Vídeo.
4. Apresentações Digitais
Formatos
e aplicações Diagramação e hierarquia da tipologia Estilos predefinidos: seleção e edição Slides: transição animada e objetos animados, áudio Publicação da apresentação: formatos
4. Apresentações Digitais
Formatos
e aplicações Diagramação e hierarquia da tipologia Estilos predefinidos: seleção e edição Slides: transição animada e objetos animados, áudio Publicação da apresentação: formatos
4. Apresentações Digitais Formatos e Aplicações FORMATO
APLICAÇÃO O formato PDF pode ser gerado a partir dos mais variados softwares. Pode ser visualizado na maioria dos navegadores. Exige o plugin Adobe instalado.
ppt / pptx
Documento do PowerPoint que armazena os atributos da apresentação para posterior edição. Abre o software editor.
pps / ppsx
Apresentação do PowerPoint que dispensa a abertura do seu editor. Exige apenas a abertura do player para ser exibido automaticamente.
4. Apresentações Digitais
Formatos
e aplicações Diagramação e hierarquia da tipologia Estilos predefinidos: seleção e edição Slides: transição animada e objetos animados, áudio Publicação da apresentação: formatos
4. Apresentações Digitais Diagramação e hierarquia da tipologia
DIAGRAMAÇÃO Distribuir os elementos gráficos no espaço limitado da página
Mais interessante quando utilizados os conceitos de design: proximidade, alinhamento, repetição e contraste
4. Apresentações Digitais Diagramação e hierarquia da tipologia
Hierarquia na tipologia Títulos, subtítulos e blocos de textos: cada um com o seu devido peso!
4. Apresentações Digitais Diagramação e hierarquia da tipologia
Hierarquia na tipologia A
tipologia define quais as fontes deverão ser utilizadas no slide. Cada fonte deve refletir uma intenção sobre a reação do leitor. É aconselhável utilizar fontes da mesma família, variando apenas espessura, inclinação, espaçamento e outros atributos sutis. Varia-se a família somente com o propósito de aplicar contraste.
4. Apresentações Digitais
Formatos
e aplicações Diagramação e hierarquia da tipologia Estilos predefinidos: seleção e edição Slides: transição animada e objetos animados, áudio Publicação da apresentação: formatos
4. Apresentações Digitais Estilos predefinidos: seleção e edição
Definição do Tema através da paleta Design
4. Apresentações Digitais
Formatos
e aplicações Diagramação e hierarquia da tipologia Estilos predefinidos: seleção e edição Slides: transição animada e objetos animados, áudio Publicação da apresentação: formatos
4. Apresentações Digitais Slides: transição animada e objetos animados, áudio
Transições animadas de um slide para outro através da paleta Transições
4. Apresentações Digitais Slides: transição animada e objetos animados, áudio
Animação de objetos através da paleta Animações
4. Apresentações Digitais Slides: transição animada e objetos animados, áudio
Inserção de áudio através da paleta Inserir
Para editar as configurações clique sobre o ícone e utilize a paleta Reprodução
4. Apresentações Digitais
Formatos
e aplicações Diagramação e hierarquia da tipologia Estilos predefinidos: seleção e edição Slides: transição animada e objetos animados, áudio Publicação da apresentação: formatos
4. Apresentações Digitais Publicação da apresentação: formatos
Para publicar basta salvar no formato correto
pps / ppsx
Sem efeitos
Com efeitos
TRABALHO
TRABALHO Abordar a biblioteca (framework) JavaScript JQuery • Criar apresentação no Power Point • Exibir os conteúdos de acordo com a quantidade de slides exigida: • Capa (1) • História (1) • Instalação (4) • Exemplos de sites que utilizam a biblioteca (4) • Opinião sobre a ferramenta (1)
AGENDA 1. 2. 3. 4.
5. 6. 7.
Introdução aos conceitos de Hipertexto, Multimídia e Hipermídia Internet em seu aspecto de rede Edição de imagens Apresentações digitais; Criação e publicação de Animações Áudio Vídeo.
5. Criação e Publicação de Animações
jQuery Flash:
Movieclips, Botões e Action Script Publicação na web: scripts para HTML
5. Criação e Publicação de Animações
jQuery Flash:
Movieclips, Botões e Action Script Publicação na web: scripts para HTML
5. Criação e Publicação de Animações jQuery
jQuery na Prática Instalação Seletores
básicos
CSS Animações
show() e hide() toggle() slideUp() e slideDown() fadeIn() e fadeOut()
5. Criação e Publicação de Animações jQuery
jQuery na Prática Instalação 1. Download: http://code.jquery.com/jquery-1.7.2.js 2. Inserir no HTML: <head> ... <script type="text/javascript" src=“jquery-1.7.2.js"></script> <script type="text/javascript"> $(document).ready(function(){ /* o código vem aqui */ }); </script> </head>
5. Criação e Publicação de Animações jQuery
jQuery na Prática Seletores básicos
1
2
3
$(‘#nome-do-id’)
$(‘.nome-da-classe)
$(‘nome-da-tag’)
Ação sobre um elemento HTML que possua o atributo id=“nome-do-id”
Ação sobre um ou vários elementos que possuam o atributo class=“nome-da-classe”
Ação sobre toda e qualquer tag que possua o mesmo nome do seletor
5. Criação e Publicação de Animações jQuery
jQuery na Prática CSS – Cascading Style Sheet Para acrescentar uma propriedade CSS em um determinado elemento HTML, basta identificar o seu seletor e aplicar a propriedade e seu respectivo valor $(‘#nome-do-id’).css(‘propriedade’,’valor’); //Exemplos $(‘#topo’).css(‘height’,’150px’); $(‘.listas).css(‘color’,’pink’);
5. Criação e Publicação de Animações jQuery
jQuery na Prática Animações A biblioteca jQuery possui alguns efeitos nativos de animação que dispensam a utilização de plugins. São Eles:
show() e hide() toggle() slideUp() e slideDown() fadeIn() e fadeOut()
5. Criação e Publicação de Animações jQuery
jQuery na Prática show() Show exibe o conteúdo omitido. Apresenta um efeito deslizante que vai na direção do canto superior esquerdo ao canto inferior direito do elemento. Permite os parâmetros „fast‟, „normal‟ e „slow‟
$(‘#nome-do-id’).show(‘fast’);
5. Criação e Publicação de Animações jQuery
jQuery na Prática hide() Oculta o conteúdo exibido. Apresenta um efeito deslizante que vai na direção do canto inferior direito ao canto superior esquerdo do elemento. Permite os parâmetros „fast‟, „normal‟ e „slow‟.
$(‘#nome-do-id’).hide(‘fast’);
5. Criação e Publicação de Animações jQuery
jQuery na Prática toggle() Efeito de alternância. Alterna entre as ações dos efeitos show() e hide(). As ações (cliques, por exemplo) de número impar estão reservadas para o efeito show() e as de número par ao efeito hide(). Permite os parâmetros „fast‟, „normal‟ e „slow‟. $(‘#nome-do-id’).toggle(‘fast’);
5. Criação e Publicação de Animações jQuery
jQuery na Prática slideUp() Oculta o elemento exibido. Apresenta um efeito deslizante que vai na direção da base ao topo do elemento. Permite os parâmetros „fast‟, „normal‟ e „slow‟.
$(‘#nome-do-id’).slideUp(‘fast’);
5. Criação e Publicação de Animações jQuery
jQuery na Prática slideDown() Exibe o elemento oculto. Apresenta um efeito deslizante que vai na direção do topo à base do elemento. Permite os parâmetros „fast‟, „normal‟ e „slow‟.
$(‘#nome-do-id’).slideDown(‘slow’);
5. Criação e Publicação de Animações jQuery
jQuery na Prática Plugins
de Animação
NIVO SLIDER
5. Criação e Publicação de Animações
jQuery Flash:
Movieclips, Botões e Action Script Publicação na web: scripts para HTML
5. Criação e Publicação de Animações
Flash na prática
• • • •
Área de trabalho Movieclips Botões Action Script
5. Criação e Publicação de Animações
jQuery Flash:
Movieclips, Botões e Action Script Publicação na web: scripts para HTML
5. Criação e Publicação de Animações Publicação na web: scripts para HTML
Inserindo uma animação .swf no HTML
AGENDA 1. 2. 3. 4.
5. 6. 7.
Introdução aos conceitos de Hipertexto, Multimídia e Hipermídia Internet em seu aspecto de rede Edição de imagens Apresentações digitais; Criação e publicação de Animações Áudio Vídeo.
6. Áudio
Formatos
e aplicações Mono vs Stereo Dolby 5.1 Ferramentas de manipulação Gravação, equalização e efeitos Edição multitrack Conversão, compressão e exportação