Projeto Hipermídia e Multimídia

Page 1

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

.pdf

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


Turn static files into dynamic content formats.

Create a flipbook
Issuu converts static files into: digital portfolios, online yearbooks, online catalogs, digital photo albums and more. Sign up and create your flipbook.