Desenvolvimento SMIL: Crie apresentações que farão as pessoas sorrirem

Divulgação: Seu suporte ajuda a manter o site funcionando! Ganhamos uma taxa de indicação por alguns dos serviços que recomendamos nesta página.


SMIL é um acrônimo para Synchronized Multimedia Integration Language. Apesar da ortografia, é pronunciado “Sorriso”. Baseado em XML, o SMIL não apenas exibe o conteúdo, mas também o tempo. Como resultado, é usado para criar apresentações e animações multimídia. Um exemplo muito simples seria exibir um cartão de título por 5 segundos, seguido por uma imagem por 10 segundos. Mas o SMIL pode fazer muito mais do que isso.

História do SMIL

Em 1997, o World Wide Web Consortium (W3C) começou a desenvolver o SMIL. A primeira versão oficial (SMIL 1.0) foi lançada em 1999. Em 2001, o SMIL 2.0 foi lançado, o que fez algumas alterações na estrutura subjacente da linguagem e introduziu módulos para animação e tempo. O padrão atual é o SMIL 3.0, lançado em 2008. Ele expandiu os módulos existentes e adicionou mais.

Após o lançamento do SMIL 1.0, a Microsoft e algumas outras empresas propuseram HTML + TIME para o W3C. Era um sistema para permitir que o SMIL fosse exibido em navegadores comuns. O W3C mudou substancialmente o sistema e lançou o XHTML + SMIL, que adicionou a funcionalidade SIML ao XHTML.

Funcionalidade do SMIL

O SMIL permite controlar todos os aspectos da exibição que você controlaria usando o PowerPoint ou uma ferramenta de apresentação multimídia semelhante:

  • Layout
  • Momento dos eventos
  • Transições
  • Mídia (imagens, vídeo, áudio)
  • Animação com SVG [1]

Por que usar o SMIL

Pode parecer muito aborrecido aprender a codificar SMIL quando você pode simplesmente usar o PowerPoint e convertê-lo em um formato flash para distribuição. Mas o SMIL tem várias vantagens sobre esse tipo de abordagem. Abaixo estão os principais, mas você pode aprender mais lendo: O que é SMIL e por que devemos usá-lo?

  • Formato de arquivo aberto. Isso é especialmente útil se você estiver colaborando com uma ou mais pessoas.
  • Os arquivos de mídia são externos. Após a conclusão dos arquivos de mídia, eles precisam ser carregados apenas uma vez, mesmo que você faça alterações substanciais nas suas apresentações. Além disso, suas apresentações podem usar arquivos de mídia em diferentes servidores. Isso também significa que várias apresentações podem usar os mesmos arquivos de mídia.
  • Facilidade de edição. As mudanças por atacado nas apresentações geralmente são muito envolvidas. Com o SMIL, é apenas uma questão de cortar e colar linhas de código.

Formato SMIL

Os arquivos SMIL se parecem muito com arquivos XHTML normais. De fato, o formato básico é exatamente o mesmo:

Esta é uma imagem da galáxia de Andrômeda:

Este é um texto para um vídeo com atraso de 5 segundos:

Como você pode ver, é um arquivo XML. A definição de idioma do SMIL 3.0 é então carregada.

Depois disso, existem duas partes do arquivo, assim como em um arquivo XHTML: head e body. Na cabeça vai o material usual, como meta tags. Aqui, colocamos apenas uma tag de layout básico para definir o plano de fundo como a cor verde-azulado.

O corpo é mais interessante. Começa carregando uma imagem e uma legenda – exibindo-as por 5 segundos. Em seguida, ele carrega um vídeo em flash, aguarda 5 segundos e exibe uma legenda para ele.

Neste exemplo, você vê a maioria das funcionalidades básicas do SMIL e como é fácil criar apresentações.

Ferramentas básicas

O suporte ao SMIL é superficial na maioria dos navegadores. Por exemplo, a partir da versão 45, o Chrome descontinuou o suporte ao SVG SMIL. Para aprender a codificar SMIL, é melhor obter um visualizador SMIL. Você pode usar ferramentas comuns como o QuickTime e o RealPlayer. Você provavelmente terá mais sucesso com o visualizador de código aberto Ambulant Player. É desenvolvido ativamente e suporta a especificação completa do SMIL 3.0.

Em termos de desenvolvimento, tudo o que você realmente precisa é de um editor de texto. No entanto, você pode querer usar um editor adaptado para SMIL e XML.

  • Ferramenta de geração SMILGen SMIL: um editor XML personalizado para uso com SMIL.
  • LimSee2: um editor SMIL 2.0 que não é mais apoiador e muito difícil de encontrar.

Recursos

Existem muitos recursos online, mas eles podem ser difíceis de localizar porque muitos deles desapareceram ao longo dos anos. Aqueles que permanecem geralmente estão focados no SMIL 2.0. Isso não é um problema, porque ainda inclui as informações relevantes. Reunimos os melhores recursos aqui.

Visão geral

  • O que é SMIL e por que devemos usá-lo? Esta é uma excelente visão geral para pessoas focadas em criar apresentações em vez de codificar.
  • Página SMIL 3.0 do W3C. Isso fornece especificações de todo o sistema.

Tutoriais

  • Multimídia 4 Todos SMIL Page. Esta página contém uma enorme quantidade de informações sobre diferentes versões do SMIL. Mas o destaque é a coleção de exemplos SMIL.
  • Como SMIL. Este tutorial o conduz pelo processo de criação da sua primeira apresentação SMIL.
  • Uma introdução à linguagem de integração multimídia sincronizada. Este é um tutorial sobre o SMIL 2.0 via Archive.org.

Referência

  • Página multimídia sincronizada do W3C: se você quiser conhecer os detalhes da SMIL, este é o lugar para você.

Livros

  • SMIL For Dummies< de Heather Williamson. Esta é uma introdução fácil ao SMIL, mas é um livro antigo que se concentra principalmente no SMIL 1.0 e 2.0.
  • SMIL 3.0: Multimídia flexível para a Web, dispositivos móveis e Daisy Talking Books de Dick Bulterman e Lloyd Rutledge.
  • XML inicial por Joe Fawcett, Liam Quin e Danny Ayers. O livro aborda apenas o SMIL, mas fornece uma boa base em XML, que é o núcleo do SMIL.
  • SVG Essentials de J David Eisenberg e Amelia Bellamy-Royds. Não é sobre o SMIL por si só, mas é muito útil para codificadores SMIL.

Conclusão

O SMIL é uma ótima ferramenta para pessoas que desejam criar e distribuir apresentações. E é especialmente útil se você deseja criar apresentações que precisam ser atualizadas periodicamente. Há uma curva de aprendizado modesta, mas depois que você pega o jeito, é tão fácil quanto codificar XHTML. E permite reutilizar facilmente o código que você usou antes.

[1] SVG significa Scalable Vector Graphics. Usando o SMIL, você pode criar animações fazendo modificações dependentes do tempo nos gráficos.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me