Sistemas Multimédia. Ano lectivo Aula 3 Introdução à Multimédia (cont.)

Transcrição

1 Sistemas Multimédia Ano lectivo Aula 3 Introdução à Multimédia (cont.) Sumário World Wide Web Contexto Objectivos História da WWW Protocolo HTTP HTML XML SMIL Panorâmica das Ferramentas de Software Multimédia (cont.) 2 1

2 A World Wide Web Contexto: As aplicações multimédia criam um espaço de informação que combina vários tipos de media digitais, mas dependem de um ambiente tecnológico para serem distribuídas e utilizadas Utilização offline de aplicações multimédia Tecnologias necessárias ao desenvolvimento e distribuição de aplicações multimédia em redes de computadores, normalmente designadas por aplicações multimédia on-line (cont.) 3 Internet e World Wide Web Internet: Conjunto de redes de transmissão de informação entre sistemas informáticos, que estão interligados entre si A informação que circula entre um emissor e um receptor pode tomar vários caminhos, ou routes, podendo atravessar diversas redes de computadores antes de chegar ao computador de destino Desta forma, entre os equipamentos que permitem o funcionamento da Internet, encontram-se os routers, responsáveis pelo encaminhamento da informação até ao seu destino (cont.) 4 2

3 Internet e World Wide Web World Wide Web (WWW) Designa um conjunto de protocolos concebidos para permitir o desenvolvimento de um espaço de informação hipermédia sobre a Internet, suportado por um conjunto de servidores de informação multimédia A Web é portanto um serviço multimédia que assenta sobre a Internet (cont.) 5 Internet e World Wide Web World Wide Web (WWW) Os protocolos podem ser encarados como as regras que regem as trocas de informação nas redes de computadores A Web depende quer da infra-estrutura física das redes, quer das normas estabelecidas Na realidade, a Web é constituída por um conjunto de normas, sendo as mais importantes a norma HTTP e a norma HTML W3C (cont.) 6 3

4 A World Wide Web A W3C fixou os seguintes objectivos para a WWW: 1. Acesso universal aos recursos da web (por qualquer pessoa em qualquer lugar) 2. Eficácia da navegação da informação disponível 3. Utilização responsável do material disponível (cont.) 7 A World Wide Web História da WWW 1960s Reconhecimento de que os documentos têm de ter formatos que possam ser lidos por humanos e que identifiquem estrutura e elementos. Charles Goldfarb et al. desenvolveram a Generalized Markup Language (GML) para a IBM 1986 A ISO desenvolveu uma versão final da Standard Generalized Markup Language (SGML) 1990 Tim Berners-Lee inventou a HyperText Markup Language (HTML) e o HyperText Transfer Protocol (HTTP) (cont.) 8 4

5 A World Wide Web História da WWW (cont.) 1993 O NCSA desenvolveu uma versão do Mosaic baseada na versão do Marc Andreessen para o X-Windows o 1º browser conhecido. (O Internet Explorer da Microsoft é baseado no Mosaic) 1994 Marc Andressen et al. formaram a Mosaic Communications Corporation, mais tarde a Netscape Communications Corporation 1998 O W3C aceitou a versão 1.0 do XML como uma Recomendação (cont.) 9 A World Wide Web: HTTP (HyperText Transfer Protocol) HTTP é um protocolo para aplicações cliente-servidor que define as regras pelas quais um programa cliente (designado por Web browser ou navegador Web) interage com um programa servidor (designado por Web server) de modo a trocarem pedidos e respostas de informação em redes TCP/IP, tais como a Internet. (cont.) 10 5

6 A World Wide Web: HTTP (HyperText Transfer Protocol) Hospedeiro cliente PROGRAMA CLIENTE Web browser Pedido HTTP Resposta HTTP PROGRAMA SERVIDOR Web server Hospedeiro servidor Recursos Ciclo de pedidos e respostas HTTP (cont.) 11 A World Wide Web: HTTP (HyperText Transfer Protocol) HTTP: um protocolo que foi originalmente desenhado para a transmissão de hipermédia, mas que também pode suportar a transmissão de qualquer tipo de ficheiro O recurso mais comum que é solicitado pelo cliente é uma página HTML um documento hipermédia que contém hiperligações a outros recursos. Contudo é possível realizar o pedido de outros tipos de recursos, tais como ficheiros armazenados no computador hospedeiro onde se encontra o servidor Web ou pedidos para se executar um programa no computador onde se situa o servidor Web (cont.) 12 6

7 A World Wide Web: HTTP (HyperText Transfer Protocol) Dado que o protocolo HTTP foi concebido para permitir a troca de recursos na Internet, necessita de utilizar um mecanismo de identificação de recursos que se baseia na utilização de URLs (Uniform Resource Locators). (cont.) 13 A World Wide Web: HTTP (HyperText Transfer Protocol) Os URLs são identificadores estruturados com o seguinte formato: [:<porta>] [<caminho> [?<pergunta>]] Exemplo: Indica o ficheiro index.htm que corresponde a uma página HTML armazenada no directório ~pedroleao/smweb/ do sistema de ficheiros do computador hospedeiro docentes.uportu.pt onde se encontra o servidor Web (cont.) 14 7

8 HTTP (HyperText Transfer Protocol) URI (Uniform Resource Identifier): um identificador do recurso acedido, por exemplo, o host name, sempre precedido pelo token Dois métodos muito conhecidos: GET e POST (cont.) 15 HTTP (HyperText Transfer Protocol) Dois códigos de status muito vistos: OK the request was processed sucessfully Not Found The URI does not exist (cont.) 16 8

9 HTML (HyperText Markup Language) HTML: uma linguagem para publicação de hipermédia na World Wide Web definida utilizando SGML: 1. O HTML utiliza ASCII, é portável para todos os tipos de hardware 2. A versão corrente do HTML é a versão A próxima geração do HTML é XHTML uma reformulação do HTML utilizando XML (cont.) 17 HTML (HyperText Markup Language) O HTML utiliza tags (marcas) para descrever os elementos do documento: <token params> - define um ponto de início de um elemento </token> - o ponto final de um elemento Alguns elementos não têm tags de fim (cont.) 18 9

10 HTML (HyperText Markup Language) HEAD BODY O HTML divide um documento nas partes HEAD e BODY: <HTML> <HEAD>... </HEAD> <BODY>... </BODY> </HTML> descreve as definições do documento, que são analisadas antes que a entrega do documento seja feita. Incluem título da página, links de recursos e alguma meta-informação que o autor decida especificar. Ex: palavras chave que são utilizadas pelos motores de pesquisa para indexar a página Web descreve a estrutura do documento e conteúdo. Elementos comuns da estrutura são parágrafos, tabelas, formulários, links, listas de itens e botões. (cont.) 19 HTML (HyperText Markup Language) Uma página HTML simples: <HTML> <HEAD> <TITLE> Uma página web exemplo. </TITLE> </HEAD> <BODY> <P> Pode-se colocar qualquer texto aqui, uma vez que este é um elemento parágrafo. </P> </BODY> </HTML> (cont.) 20 10

11 HTML (HyperText Markup Language) Naturalmente, o HTML tem estruturas mais complexas e pode ser misturado com outros standards: integração com linguagens de script Exemplo: JavaScript manipulação dinâmica de quase todos os elementos e propriedades depois destes serem mostrados no lado do cliente (HTML dinâmico) customização modular de parâmetros utilizando as folhas de estilo (CSS - Cascading Style Sheets). As folhas de estilo permitem definir o aspecto das páginas HTML de um modo totalmente independente das marcas tradicionais e do conteúdo (cont.) 21 XML (Extensible Markup Language) XML: uma linguagem de markup para a WWW em que existe uma modularidade de dados, estrutura e vista, de forma a que o utilizador da aplicação possa definir os tags (estrutura). O utilizador ou uma aplicação podem definir os tags (estrutura) de um documento e as suas relações num local; depois definir os dados que utilizam esses tags noutro local (ficheiro XML); e definir ainda noutro documento como devolver os tags. (cont.) 22 11

12 XML (Extensible Markup Language) Exemplo de utilização do XML para obter informação de stocks de uma base de dados de acordo com um query do utilizador: 1. Utilizar um Document Type Definition (DTD) global que já esteja definido para os dados de stock 2. O script do lado do servidor submeterse-á às regras do DTD para gerar um documento XML de acordo com o query, utilizando dados da base de dados 3. Finalmente, enviar ao utilizador o XML Style Sheet (XSL) dependendo do tipo de dispositivo utilizado para mostrar a informação (computador com monitor CRT 21 ; telefone celular, etc.) (cont.) 23 XML (Extensible Markup Language) A versão corrente do XML é a versão XML 1.0, aprovada pelo W3C em Fevereiro de A sintaxe do XML assemelha-se à sintaxe do HTML, embora seja muito mais rigorosa: Todos os tags estão em letra minúscula, e um tag que tem só dados inline tem de se terminar a si próprio, p. ex: <token params /> Utiliza espaços de nomes, de forma a que vários DTDs declarando diferentes elementos mas com nomes de tags semelhantes possam ter os seus elementos distinguidos. Os DTDs podem também ser importados a partir dos URIs. (cont.) 24 12

13 XML (Extensible Markup Language) Um exemplo da estrutura de um documento XML a definição de um documento pequeno de XHTML <?xml version= 1.0 encoding= iso ?> <!DOCTYPE html PUBLIC -//W3C//DTD XHTML transition.dtd > <html xmlns= > [html que segue as regras acima mencionadas de XML] Define um espaço de nome XML único para os elementos do documento; </html> para este caso é o website de especificações XHTML Todos os documentos XML começam desta forma Tag especial utilizado para importar DTDs (cont.) 25 XML (Extensible Markup Language) As seguintes especificações relacionadas com o XML estão também estandardizadas: Protocolo XML: utilizado para trocar informação XML entre processos. Suplanta o protocolo HTTP e extende-o de forma a permitir comunicações entre processos em redes XML Schema: uma linguagem mais estruturada e poderosa para definir tipos de dados do XML (tags) XSL: é basicamente o Cascading Style Sheets (CSS) para o XML. (cont.) 26 13

14 XML (Extensible Markup Language) SMIL: Synchronized Multimedia Integration Language, pronunciada como smile uma aplicação particular do XML (DTD predefinido globalmente) que permite a especificação de interacção entre quaisquer tipos de media e o input do utilizador, de uma forma temporizada Exemplo: Visualizar um video sincronizado com uma apresentação de slides, ambos reagindo à navegação do utilizador através da apresentação ou video (cont.) 27 SMIL (Synchronized Multimedia Integration Language) Finalidade do SMIL: também é desejável que seja possível publicar apresentações multimédia com a utilização de uma linguagem de markup Uma linguagem de markup multimédia precisa de permitir a calendarização e a sincronização de diferentes elementos multimédia e definir a interactividade destes elementos com o utilizador. O W3C estabeleceu um Working Group em 1997 para definir especificações para uma linguagem de sincronização multimédia O SMIL 2.0 foi aceite em Agosto de (cont.) 28 14

15 SMIL (Synchronized Multimedia Integration Language) O SMIL 2.0 é especificado em XML utilizando uma aproximação de modularização semelhante à utilizada em XHTML: 1. Todos os elementos SMIL estão divididos em módulos conjuntos de elementos XML, atributos e valores que definem uma conceptualidade funcional 2. No interesse da modularização, nem todos os módulos disponíveis têm de ser incluídos em todas as aplicações (cont.) 29 SMIL (Synchronized Multimedia Integration Language) 3. Language profiles: especifica um agrupamento particular de módulos. Módulos particulares podem ter requisitos de integração que um profile tem de seguir. - O SMIL 2.0 tem uma linguagem principal de profiles que inclui a maioria dos módulos SMIL Os elementos básicos do SMIL são mostrados no exemplo que é apresentado a seguir. (cont.) 30 15

16 SMIL - Exemplo <!DOCTYPE smil PUBLIC -//W3C//DTD SMIL > <smil xlmns= Elemento raiz > <head> <meta name= Author content= Some Professor /> Contém informação não utilizada na sincronização: meta informação, informação de layout, etc. </head> <body> <par id= MakingOfABook > <seq> Contém <video src= authorview.mpg /> informação de <img src= onagoodday.jpg /> todos os recursos a </seq> apresentar e <audio src= authorview.wav /> quando </par> </body> </smil> <text src= /> Tipos de sincronização de recursos: seq, par, excl Ordem sequencial de apresentação dos elementos agrupados Os elementos agrupados vão ser apresentados ao mesmo tempo (em (cont.) paralelo) 31 SMIL Exemplo (cont.) No exemplo: Um video designado por authorview.mpg Um audio designado por authorview.wav E um documento HTML em Quando o video termina: São apresentados em simultâneo no início A imagem onagoodday.jpg é mostrada, enquanto o audio e o documento HTML ainda estão a ser apresentados Neste ponto, o audio agradecerá aos ouvintes e concluirá a entrevista. (cont.) 32 16

17 Panorâmica das Ferramentas de Software Multimédia Categorias de ferramentas de software que vão ser brevemente examinadas: 1. Sequenciação de Música e Notação 2. Audio Digital 3. Edição de gráficos e Imagem 4. Edição de Video 5. Animação 6. Authoring de Multimédia (cont.) 33 Sequenciação de Música e Notação Sequenciação de música sintetização de música a partir de uma pauta electrónica Cakewalk: software de sequenciação e edição de música agora designado por Pro Audio O termo sequencer provém de dispositivos mais antigos que armazenavam sequências de notas ( events na linguagem de música MIDI) É também possível inserir ficheiros WAV e comandos Windows MCI (para animação e video) em pistas de música (MCI é uma componente ubíqua da Windows API) Cubase: outro programa sequenciador/editor de música com capacidades semelhantes às do Cakewalk. Inclui algumas ferramentas de edição de audio digital. (cont.) 34 17

18 Sequenciação de Música e Notação Macromedia Soundedit: programa maduro para a criação de audio em projectos multimédia e na web que se integra bem com outros produtos da Macromedia como o Flash ou o Director. GarageBand: programa de sequenciação e edição de música da Apple. (cont.) 35 Audio Digital As ferramentas de audio digital estão relacionadas com o acesso e edição de sons amostra que compõem o audio: Cool Edit: um toolkit muito conhecido e poderoso de audio digital; emula um estúdio de audio profissional produções multitrack e edição de ficheiros de som incluindo efeitos de processamento de sinal digital. Sound Forge: um programa sofisticado baseado em computador para edição de ficheiros WAV. O som pode ser capturado de um drive de CD-ROM, de um microfone ou de um gravador através da placa de som e depois é misturado e editado. Permite ainda a adição de efeitos especiais complexos. Pro Tools: um ambiente integrado de edição e produção audio criação e manipulação MIDI; mistura de audio poderosa, gravação, e software de edição. (cont.) 36 18

19 Edição de gráficos e imagem Adobe Illustrator: uma ferramenta de publicação poderosa da Adobe. Utiliza gráficos vectoriais; os gráficos podem ser exportados para a Web. Adobe Photoshop: o standard numa ferramenta de gráficos, processamento e manipulação de imagem. Permite layers de imagens, gráficos e texto que podem ser manipulados separadamente para flexibilidade máxima. A filter factory permite a criação de sofisticados filtros de efeitos de luz. (cont.) 37 Edição de gráficos e imagem Macromedia Fireworks: software para a produção específica de gráficos para a web. Inclui um editor bitmap, um editor de gráficos em formatos vectoriais e um gerador JavaScript para botões. Macromedia Freehand: uma ferramenta de edição de texto e gráficos para a web que suporta muitos formatos bitmap como GIF, PNG e JPEG. Estes são formatos baseados em pixels, em que cada pixel é especificado. Também suporta formatos vectoriais em que as extremidades das linhas são especificadas em vez dos pixels, como SWF (Macromedia Flash) e FHC (Shockwave Freehand). Também lê formato Photoshop. (cont.) 38 19

20 Edição de video Adobe Premiere: uma ferramenta de edição de video simples e intuitiva para edição não linear, isto é, a colocação de video clips em qualquer ordem: Video e audio são arranjados em tracks Proporciona um grande número de video e audio tracks, super-impositions e clips virtuais. Uma grande biblioteca de transições built-in, filtros e motions para clips produções multimédia eficazes com um esforço reduzido. Adobe After Effects: uma ferramenta de edição de video poderosa que permite ao utilizador adicionar e alterar filmes existentes. Permite ainda a adição de muitos efeitos: iluminação, sombras, motion blurring, layers. Final Cut Pro: uma ferramenta de edição de video da Apple: só para Macintosh. (cont.) 39 Animação APIs de Multimédia Java3D: API utilizada pelo Java para construir e devolver 3D graphics, idêntica à forma como a Java Media Framework é utilizada para manipular ficheiros de media 1. Proporciona um conjunto básico de primitivas de objectos (cubo, splines, etc.) para a construção de cenas. 2. É um layer de abstracção construído sobre o OpenGL ou DirectX (o utilizador pode seleccionar qualquer um deles). DirectX: API do Windows que suporta video, imagens, audio e animação 3D OpenGL: a altamente portátil, mais popular API 3D. (cont.) 40 20

21 Animação (*) rendering tool ferramenta que permite visualizar modelos 3D num plano 2D. Rendering Tools (*) 3DStudioMax: rendering tool que inclui um número de very high-end professional tools para animação de caracteres, desenvolvimento de jogos e produção de efeitos visuais. Softimage XSI: um pacote poderoso de modelação, animação e rendering utilizado para animação e efeitos especiais em filmes e jogos. Maya: produto competidor da Softimage; é também um package completo de modelação. RenderMan: rendering package criado pela Pixar. Packages de animação da GIF: uma aproximação mais simples, permite o desenvolvimento muito rápido de pequenas animações para a web (cont.) 41 Authoring de Multimédia Macromedia Flash: permite ao utilizador criar filmes interactivos utilizando a score metaphor, isto é, uma linha de tempo arranjada em sequências de eventos paralelas. Macromedia Director: utiliza uma metáfora de filme para criar apresentações interactivas ferramenta muito poderosa e inclui uma built-in linguagem de scripting, Lingo, que permite a criação de complexos filmes interactivos. Authorware: um maduro, bem suportado authoring product baseado na metáfora Iconic/Flow-control. Quest: semelhante ao Authorware em muitas formas, utiliza um tipo de metáfora de flowcharting. No entanto, os nodos do flowchart podem encapsular informação de uma forma mais abstracta (designados por frames) do que simplesmente níveis de subrotina. (cont.) 42 21

22 Pesquisa suplementar Links para a história da multimédia Artigo Vannvar Bush sobre o sistema Memex hap1/vbusharticle/ Definições dos termos hypertexto e hypermedia (cont.) 43 Pesquisa suplementar Outros links Ted Nelson e o projecto Xanadu Trabalho de Nicholas Negroponte no MIT Media Lab Douglas Engelbart e a história do On-Line System O MIT Media Lab O W3C Execução do lado do cliente (cont.) 44 22

23 Próxima aula Produção Multimédia e Ferramentas (cont.) 45 23