aula 04 ferramentas para autoria de produtos multimídia i

Sistemas e Aplicações

Multimídia

Março - 2015

Professor: Giomar Sequeiros O.

Email: [email protected]

Conteúdo

Ferramentas para Autoria de Produtos Multimídia I

Aula 4

Ferramentas para Autoria de Produtos

Multimídia

Sistemas e Aplicações Multimídia 2

Ferramentas para Autoria de Produtos Multimídia


As ferramentas usadas para autoria de produtos multimídia

podem ser divididas em duas categorias que são:

• Aplicativos Fechados

• Linguagens de Programação.

Estas ferramentas são usadas de acordo com o nível de

conhecimento do usuário que pode ser um usuário não técnico

e um usuário com formação em desenvolvimento de software,

especificamente, em desenvolvimento de sistemas multimídia.

Aplicativos Fechados


• Curva de aprendizado menor do que as Linguagens de

Programação.

• Disponibilidade de recursos

• Interface bem intuitiva.

• Alta produtividade

• Aprendizagem rápida

O usuário constrói seu produto multimídia, na maioria das vezes

títulos, usando diálogos, menus e ícones de forma interativa, ou

seja, o usuário não necessita ter conhecimento de programação,

ambientes de desenvolvimento, compiladores ou técnicas de

programação, ou seja, o usuário constrói o seu produto multimídia

usando o aplicativo fechado de forma interativa, sem a

necessidade de programação.

Aplicativos Fechados


Contudo, em aplicativos profissionais, existem recursos de

programação na forma de linguagens de script que oferecem ao usuário

a possibilidade de construir o produto multimídia de forma programada.

Algumas dessas ferramentas permite quem o usuário grave um conjunto

de ações sob a forma de um programa na linguagem de script, onde cada

ação do usuário é mapeada para uma ou mais instruções na linguagem

de script.

O conjunto de ações é gravado como uma Macro que nada mais é do

que um programa na linguagem de script. A Macro então pode ser

executada várias vezes no aplicativo fechado, reproduzindo as ações do

usuário, como se o usuário estivesse usando o aplicativo fechado

interativamente. Esta abordagem é útil para tarefas complexas ou muito

trabalhosas e que são executadas com certa frequência.

Linguagens de Programação


Para a construção de produtos multimídia mais sofisticados,

como jogos por exemplo, é necessário o uso de linguagens de

programação. Esta ferramenta apresenta a vantagem de se ter

maior flexibilidade para a construção do produto, permitindo a

construção de comportamento dinâmico e adicionando maior

interatividade ao produto multimídia criado.



Entretanto, diferente do aplicativo fechado, a linguagem de

programação apresenta uma curva de aprendizado muito maior e

requer conhecimento técnico não somente sobre a linguagem de

programação em si, mas também sobre o sistema operacional, sobre

redes de computadores, sobre banco de dados, etc.

Além disso, é necessário conhecer técnicas de programação e

construção de algoritmos e estruturas de dados para que se possa

fazer bom uso dos recursos oferecidos pela linguagem de programação.

Esta é portanto uma ferramenta de autoria indicada para profissionais

de informática com formação em desenvolvimento de software. O

conhecimento de boas práticas de desenvolvimento (Padrões de Projeto,

Coesão, Acoplamento, Injeção de Dependências ) e teste de software (

TDD) são fundamentas para o sucesso no projeto de software.



As linguagens de programação são usadas através de ambientes de

desenvolvimento integrado ( IDE do inglês Integrated Development

Environment ) que oferecem vários recursos necessários à atividade de

programação tais como compilador, depurador, conjunto de bibliotecas

suportadas pela linguagem, ajuda on-line, recurso auto-complete para

ajudar na codificação das instruções, entre outros. ).



As linguagens de programação mais conhecidas são:

Cobol, Fortran, List que ainda são usadas em aplicações muito

específicas em plataforma alta mas que não são usadas em aplicações

multimídia.

Linguagem Pascal e Basic que foram criadas para o ensino de

programação e que evoluíram para uso profissional na forma de dialetos

como Visual Basic da Microsoft e Delphi da Borland.

Linguagem C que é uma poderosa linguagem de programação, sendo

usada para criação de praticamente todo tipo de software, incluindo aí

software multimídia.

Linguagem C++ que é uma variação da linguagem C mas com recursos

de programação orientada a objetos.



As linguagens de programação mais conhecidas são:

Linguagem Java que se tornou padrão de mercado e que é usada para

aplicações corporativas e sistemas web corporativos. Teve muito

progresso na melhoria de desempenho na execução dos programas

criados porém ainda é mais lenta do que outras linguagens como Pascal

e C ou C++.

Linguagem C# que é uma cópia da linguagem C++ só que para a

plataforma .Net que é a plataforma da Microsoft para desenvolvimento de

software.

Linguagens de Script como PHP, Python e Ruby que são muito usada

para criação de Web Sites e Comercio Eletrônico.

Ferramentas de Autoria


A construção de produtos multimídia sofisticados pode ser feita também

com as chamadas ferramentas de autoria que oferecem uma solução

intermediária entre os aplicativos fechados e as linguagens de

programação, pois permitem a manipulação direta de menus, controles

de caixas de ferramentas e ainda oferecem recursos de programação sob

a forma de linguagens de script.

Uma vantagem deste tipo de ferramenta é que permite ainda a integração

com módulos ( .dll, .jar ) construídos com outras linguagens de

programação.

Ferramentas de Autoria


As ferramentas de autoria são usadas para produção de títulos sob a

forma de slides, um documento, um livro eletrônico, entre outros.

Os títulos lineares são a forma mais usada para consumo de

informações, no caso de apresentações e livros eletrônicos por exemplo.

Apesar de a ordem de apresentação do conteúdo ser predefinida o

conteúdo pode ser bastante rico em áudio, vídeo e animações,

proporcionando uma experiência rica em termos de informação ao leitor.

Autoria de Títulos Lineares


São ferramentas que permite a construção de produtos multimídia, os

títulos com avanços manuais, de forma sequencial, em apresentações.

Algumas dessas ferramentas oferecem suporte à tecnologia OLE que

permite a inclusão de multimídia nos títulos sob a forma de áudio,

vídeo e animações, mas também outros tipos de conteúdo tais como

cronograma de projetos, planilhas de cálculos, etc.

Exemplo de ferramentas para autoria de títulos lineares temos:

Powerpoint (Microsoft ) e Impress ( Open Office ) orientados para a

construção de apresentações eletrônicas Acrobat orientado para a

construção de documentação on-line.

Autoria de Títulos Hipermídia


As ferramentas para autoria de títulos hipermídia adicionam aos

recursos multimídia controles para navegação não sequencial pelo

usuário através de hipertexto.

Para isso o hipertexto dispõe de recursos como controles de navegação,

através dos quais o usuário percorre o título de forma não sequencial.

Estes controles são apresentados na forma de botões, links e imagens

que direcionam a navegação para outras paginas do documento, sem

seguir uma ordem pré-definida e proporcionando um grau de

interatividade maior do que os títulos lineares.

Autoria de Títulos Hipermídia


Devemos considerar os aspectos abaixo em uma ferramenta de autoria

para hipermídia:

Estilo de Autoria: Pode ser interativo ou programado.

Modo de Operação: Modo de execução ou modo de Edição.

Capacidade de intercâmbio de dados: É muito importante que a

ferramenta de autoria suporte os principais formatos e tipos de mídia

existentes no mercado e que permita a importação destes formatos para

serem adicionados ao título.

A Internet como Plataforma de Hipermídia


A Internet como Plataforma de Hipermídia


O uso da WWW como plataforma de hipermídia faz dela o ambiente

hipermídia mais rico disponível. E hoje a linguagem HTML se tornou o

padrão de hipertexto para a Web. Existem razões para isso.

• Primeiro a HTML é padronizada pelo W3C e não é uma tecnologia

proprietária, presa a uma plataforma específica ou a um fabricante.

• Segundo, é fácil de usar e possui milhares de ferramentas para

elaborações de conteúdo HTML disponíveis, muitas delas gratuitas.

• Terceiro, a HTML suporta todos os formatos de áudio, vídeo e

desenho disponíveis, a partir da versão 5 estes conteúdos

multimídia são suportados nativamente.

Localização de recursos


O formato URL (Universal Resource Locator) é conhecimento como

endereço web e usado para localizar páginas e outros tipos de

recursos, imagens por exemplo.

Um URL é um caso particular de URI ( Uniform Resource Identifier ), um

texto que identifica um recurso de forma única. O URL vai além disso

pois além de identificar o recurso ele fornece meios para localizá-lo. Um

URL tem a seguinte forma:

protocolo:[//dominio[:porta]/] caminho do arquivo [?texto de consulta]

[#ancora]



O protocolo mais usado é o http, mas também é usado o https, para o

caso de transações seguros como em comercio eletrônico ou home

banking. Também é usado mailto para o envio de mensagens de correio

eletrônico e o file para arquivos locais, além do ftp para transferência de

arquivos. Quando o domínio não é indicado, o navegador assume o http

como padrão.

O domínio indica o nome da entidade ou empresa que disponibiliza o

conteúdo, conforme registro feito por um registrador de nomes de

domínio que é credenciado pelo órgão que regula a atribuição de

domínios da Internet.

A porta raramente é usada, mas pode ser quando um domínio oferece

mais de um serviço, por exemplo, servidor web na porta 8888 e servidor

de banco de dados postgresql na porta 8654.



O caminho do arquivo equivale à estrutura de diretórios usada pelo

sistema operacional do servidor, partindo do diretório raiz atribuído ao

servidor.

São exemplos de URLS:

http://en.wikipedia.org/wiki/URL#Syntax

http://localhost:8080/query.php?regiao=centro-oeste

file://d:/trabalho/multimedia/livro.doc

Autoria de Sites


Autoria de sites


Os sites são um conjunto de páginas que pode conter conteúdo

bastante diversificado, indo desde páginas estáticas até páginas

dinâmicas e com conteúdo multimídia, incluindo áudio, vídeo, animações,

etc. As páginas são organizadas em uma estrutura de pastas que reflete

o mapa de navegação do sites e a hierarquia entre os documentos, indo

do conteúdo mais geral para o mais específico.

Os possíveis materiais que podem compor um site são os seguintes:

• Páginas de hipertexto;

• Material gráfico e de multimídia incorporado a estas páginas (

imagens, áudio, vídeo, animações );

• Outros tipos de documentos;

• Arquivos de trabalho usados pelo software servidor do site;

• Scripts que conferem interatividade a páginas do site ( PHP, ASP, JSP,

etc. )

Sites estáticos e dinâmicos


Um site pode ser estático ou dinâmico, dependendo do conteúdo

apresentado ao usuário.

Sites estáticos oferecem pouca interatividade com o usuário e

apresentam informação numa página que foi gerada em tempo de

desenvolvimento, ou seja, quando o site foi construído.

Sites dinâmicos oferecem maior interatividade com o usuário, sob a

forma de pesquisas, escolhas de opções e geram informação com base

nas informações do usuário, gerando as páginas em tempo de execução

e apresentando informações sempre atualizadas. Normalmente as

informações são lidas em um banco de dados e as páginas possuem

scripts que são processados pelo servidor que interpreta o script

gerando o conteúdo da pagina dinamicamente. Estes scripts são

escritos em alguma linguagem de script tal como PHP, ASP, JSP e que

pode ser interpretada pelo servidor web.

Servidores


Um servidor web é um programa que recebe uma requisição HTTP de

um computador cliente através de um navegador e devolve uma

resposta HTTP, no mesmo formato da requisição, que geralmente é uma

ou mais páginas HTML que pode então ser apresentada ao usuário

também através do navegador. O nome é usado também para o

computador que hospeda o programa servidor.

Tanto a requisição quanto a resposta são feitas no formato HTTP que é

amplamente usado na internet por ser o protocolo padrão de

hipertexto, padronizado e mantido pelo W3C.

O protocolo HTTP usa os serviços do protocolo TCP para estabelecer

conexões entre o cliente ( usuário ) e o servidor. Estas conexões

permitem que sejam trocadas mensagens no modelo de requisição e

resposta.

Servidores


O protocolo HTTP não guarda o estado de uma requisição, ou seja,

não se lembra dos dados de uma requisição. Esta limitação é superada

por recursos de programação usados do lado do cliente ou do lado do

servidor.

Para transações de comércio eletrônico, banco online, é usado o

protocolo HTTPS que possui recursos de criptografia para garantir a

comunicação segura entre cliente e servidor.

O servidor web mais usado atualmente é o Apache HTTP Server. Ele é

gratuito e é conhecido simplesmente como Apache, sendo mantido

Apache Software Foundation e está disponível para os principais

sistemas operacionais.

O segundo servidor web mais usado é o IIS da microsoft mas este é

limitado ao ambiente Windows.

Servidores


O servidor web a ser usado depende da plataforma de

desenvolvimento usada. Se você for usar Java terá de usar um servidor

como Tomcat, JBoss, Web Logic ou GlassFish. Se voce estiver

usando .Net então usa única opção será mesmo o IIS. Observe que

quanto mais aberto for o software usado maiores são as opções em

termos de servidor, ferramenta, linguagem de programação, etc.

Hoje em dia existe um grande número de sites com Apache Server e

PHP com banco de dados MySQL ou PosgreSQL. São usados

principalmente para sites dinâmicos e de comércio eletrônico.

Comunicação síncrona


Comunicação assíncrona (AJAX)


Sites estáticos


A autoria de sites estáticos envolve as tarefas abaixo:

• Autoria do material gráfico ( imagens, videos, animações ) que deve

ser incluído nas páginas

• Autoria das páginas HTML

• Autoria da interligação entre as páginas

• Testes de visualização nos navegadores escolhidos

• Publicação em um servidor web.

Sites estáticos: Scripts


Os Scripts do lado do cliente são um recurso interessante para se fazer

pequenos efeitos visuais em uma página. Normalmente são

implementados através de linguagens de script que são executadas

diretamente no navegador, ou seja, do lado cliente.

Estas linguagens são interpretadas e possuem recursos capazes de

manipular os elementos de uma página, alterando seu comportamento.

Por exemplo, ao passar o mouse sobre um elemento da página, um

formulário, pode-se exibir uma mensagem para o usuário.

As linguagens de Script mais comuns são Javascript, VbScript,

ActionScript e JScript.

Sites estáticos: Scripts


JavaScript é a mais usada e aceita em todos os navegadores. Possui

sintaxe bastante parecida com a linguagem Java e é padronizada pela

ISO.

VbScript é usada no navegador IE da Microsoft e é um dialeto da

linguagem Basic.

ActionScript é a linguagem de script para animações em Flash. Com a

chegada do HTML5 e seus recursos nativos para animação a tendência é

que esta linguagem seja cada vez menos usada no futuro.

Todas as linguagens de Script podem ter o código-fonte exibido no

navegador e isso é um problema com relação à segurança. Por conta

disso, validações e tratamentos de regras de negócio ou cálculos

devem ser feitos do lado servidor com uma linguagem de servidor como

PHP ou ASP.NET.

Sites estáticos: Tecnologias


Sites estáticos: Exemplo


Sites dinâmicos


São sites que fazem uso de alguma linguagem de script de servidor

que permite a criação de páginas em tempo de execução, de forma

dinâmica, normalmente acessando um banco de dados a partir do qual

consultam informações que são então inseridas nas páginas

dinamicamente. A geração de páginas dinâmicas é feita da seguinte

forma:

O cliente envia uma requisição, via protocolo HTTP, contendo uma URL

do aplicativo, componente ou script que será processado no servidor,

gerando em tempo de execução, o conteúdo da página de resposta.

O aplicativo, componente ou script processa a requisição e gera uma

página de resposta em HTML, mas que pode conter scripts tanto do lado

cliente quando do lado servidor. A página de resposta é enviada então ao

navegador para visualização pelo usuário.

A

Sites dinâmicos: Tecnologias


Linguagens do lado do cliente

Linguagens do lado do servidor

Banco de Dados

Sites dinâmicos: Exemplo


Etapas de criação de um site

• Planificação e Objetivos

• Realizar um esboço (wireframe)

• Maquetação

• Inserção de conteúdo

• Publicação


Planificação: Sitemap


Esboço (wireframe)


Papel Balsamiq Mockup

http://www.balsamiq.com/

https://moqups.com/

http://www.balsamiq.com/

Esboço (wireframe): Exemplos


Esboço (wireframe): Responsive Design


Normal



Tablet



Smartphone

Maquetação (Estrutura HTML 4)


Maquetação: CSS – Modelo caixa


Tutorial: http://www.w3c.br/divulgacao/guiasreferencia/css2/

http://www.w3c.br/divulgacao/guiasreferencia/css2/

Maquetação: CSS – Seletores


Maquetação: Links úteis


HTML5http://diveintohtml5.com.br/http://www.w3schools.com/html/html5_intro.asphttp://html5doctor.com/http://www.html5rocks.com/pt/

CSShttp://www.w3schools.com/css/https://developer.mozilla.org/pt-BR/docs/CSS/Getting_Startedhttp://www.htmldog.com/guides/css/beginner/

Outroshttp://www.criarweb.com/css-960-grid-system/http://css3generator.com/http://www.css3.me/http://html-color-codes.info/

http://www.w3schools.com/html/html5_intro.asp

http://html5doctor.com/

http://www.html5rocks.com/pt/

http://www.w3schools.com/css/

https://developer.mozilla.org/pt-BR/docs/CSS/Getting_Started

http://www.htmldog.com/guides/css/beginner/

http://www.criarweb.com/css-960-grid-system/

http://css3generator.com/

http://www.css3.me/

http://html-color-codes.info/

Frameworks front-end e templates


• Boilerplate– http://html5boilerplate.com/

• Bootstrap– http://getbootstrap.com/

• Templates gratuitos– http://html5up.net/

– http://freehtml5templates.com/

– http://www.templatesbox.com/templates.htm

– http://www.templateworld.com/free_templates.html

http://html5boilerplate.com/

http://getbootstrap.com/

http://html5up.net/

http://freehtml5templates.com/

http://www.templatesbox.com/templates.htm

Frameworks front-end: Bootstrap




Editores web


• Sublime Text 2– http://www.sublimetext.com/

• Textmate– http://macromates.com/

• Notepad++– http://notepad-plus-plus.org/

• Adobe Dreamweaver– http://www.adobe.com/br/products/dreamweaver.html

http://www.sublimetext.com/

http://macromates.com/

http://notepad-plus-plus.org/

http://www.adobe.com/br/products/dreamweaver.html

Publicação do site


FTPFile Transfer Protocol

Cliente Servidor- Servidor- Usuário- Senha

Publicação do site: clientes FTP


• Filezilla:https://filezilla-project.org/

• Coffee Free FTP http://www.coffeecup.com/free-ftp/

– Net2ftp

http://www.net2ftp.com/

https://filezilla-project.org/

http://www.coffeecup.com/free-ftp/

http://www.net2ftp.com/

Publicação do site: hosting


• Hostingerhttp://www.hostinger.com.br/

• Google Drivehttps://drive.google.com/

• ByeHosthttp://byethost.com/

http://www.hostinger.com.br/

https://drive.google.com/

https://drive.google.com/

História breve sobre o web designThe dark ages of web design (1989)


http://blog.froont.com/brief-history-of-web-design-for-designers/

História breve sobre o web designTables – The beginning (1995)


História breve sobre o web designJavaScript comes to the rescue (1995)


História breve sobre o web designThe golden era of freedom – Flash (1996)


História breve sobre o web designCSS (1998)


História breve sobre o web designMobile uprising – Grids and frameworks (2007)


História breve sobre o web designResponsive web design (2010)


História breve sobre o web designThe times of the flat (2010)


História breve sobre o web designThe bright future (2014)


Tendências de web design 2015• Longer scrolling sites

• Storytelling and interaction

• Removing non-essential design elements in favor of simplicity

• Professional high quality custom photography

• Hidden main menus

• Very large typography

• Flat design

• No more boxes

• Material design


Longer scrolling sites


http://mintdesigncompany.com/home

Storytelling and interaction


http://www.spaceneedle.com/home/

Removing non-essential design elements in favor of simplicity


http://rareview.com/

Professional high quality custom photography


http://grainandmortar.com/

Hidden main menus


http://brianhoffdesign.com/

Very large typography


http://madebytinygiant.com/

Flat design


http://colinanddewi.com/

Princípios de Desenho de Interfaces com o UsuárioConsistência, pelo qual ações de natureza semelhante devem ser

ativada de forma semelhante

Realimentação - O aplicativo deve fornecer feedback ao usuário sobre

como entendeu a tarefa solicitada;

Minimização de erros - O aplicativo deve ajudar o usuário a não cometer

erros, oferecendo opções no momento certo, desabilitando funções que

não devem estar disponíveis para o usuário em um determinado contexto,

etc.

Recuperação de erros - Mesmo assim o usuário erra e a interface deve

dar a opção de desfazer o erro;


Princípios de Desenho de Interfaces com o Usuário

Múltiplos níveis de treinamento - A ajuda deve considerar o perfil do

usuário. Usuários novos devem ser bem orientados. Usuários experientes

nem tanto mas ainda assim devem ser ajuda e orientação suficientes.

Minimização da memorização - Não sobrecarregar o usuário com

informações em excesso, obrigando-o a memorizar dezenas de comandos

e conceitos;

Leiaute adequado das telas - Telas simples, limpas, objetivas e com boa

estética é o que o usuário espera de um aplicativo.


Revisão – Trabalho em grupo

Fazer um Wareframe (esboço) de um site


Bibliografia Recomendada

PAULA FILHO, Wilson de Pádua. Multimídia: Conceitos e Aplicações. 2. ed. Rio de Janeiro: LTC, 2014. .

Básica


Bibliografia RecomendadaComplementar

MARTINO, Luis M. S.. TEORIA DAS MIDIAS DIGITAIS.

1ª ed. : VOZES, 2014.

FOROUZAN, Behrouz A.. A comunicação

de dados e redes de computadores. 1ª

ed. Rio de Janeiro: McGraw

COMER, Douglas; BARCELLOS, Marinho. Redes de

Computadores e Internet : abrange transmissão de

dados, ligação inter-redes e web.. 4ª ed. Porto Alegre:

Bookman, 2007.


Material, Comunicação e Critérios de Avaliação

Avaliação I (Peso 4,0)

- Prática : 2,00 (ATPS)

- Prova: 8,00

- Lista de exercícios: 1,00 (Opcional)

Avaliação II (Peso 6,0)

- Prática : 2,00 (ATPS)

- Prova escrita oficial: 8,00

- Lista de exercícios: 1,00 (Opcional)

Frequência igual ou superior a 70%.


Média final >=6 (Não existe arredondamento)

aula 04 ferramentas para autoria de produtos multimídia i

Documents