SMIL

861 visualizações

Publicada em

Publicada em: Tecnologia
  • Seja o primeiro a comentar

  • Seja a primeira pessoa a gostar disto

SMIL

  1. 1. SMIL Claudson Oliveira www.claudson.com.br claudson.oliveira@ice.ufjf.br
  2. 2. SMIL Lê-se Smile [smaili]
  3. 3. SMIL Lê-se Smile [smaili]
  4. 4. SMIL Lê-se Smile [smaili] Linguagem de integração de mídias Sincronizáveis - Nascida em 1998 - XML (W3C)
  5. 5. Por que sorrir ? - Estamos felizes com as formas de exibir conteúdo interativo na internet?
  6. 6. Por que sorrir ? - Estamos felizes com as formas de exibir conteúdo interativo na internet? Sim, estamos!
  7. 7. Por que sorrir ? - Estamos felizes com as formas de exibir conteúdo interativo na internet? Sim, estamos! - Então por que precisamos desse novo padrão?
  8. 8. Por que sorrir? Imagine os seguintes casos : - Você usa um SO que não dá suporte àquele plugin do youtube ou qualquer outro site de vídeos. - Você vive num mundo onde cada site multimídia usa um plugin diferente; Flash, Wm player, Quick time, etc.
  9. 9. Proposta do SMIL - O SMIL quer “unir” numa única plataforma todos os plugins existentes - Para exibir vídeo na internet seria necessário apenas que os browsers entendessem o xml - Outra vantagem: Indexação
  10. 10. Mão na massa
  11. 11. Mão na massa Browser suportado
  12. 12. Mão na massa Browser suportado
  13. 13. Mão na massa Para reconhecer os objetos é necessário inserir na tag html um namespace, ficando assim: <html xmlns:time="urn:schemas-microsoft- com:time">
  14. 14. Mão na massa É preciso incorporar a classe que nomeamos de “time” para usarmos os atributos do smile no código html por exemplo. O código ficou assim: <html xmlns:time="urn:schemas-microsoft-com:time"> <head> <?import namespace="time" implementation="#default#time2"> <style>.time {behavior: url(#default#time2)}</style> </head>
  15. 15. Mão na massa Feito isso já temos suporte para rodarmos uma aplicação com o SMIL. Usaremos a tag seq que é encontrada no namespace da nossa classe “time”
  16. 16. Mão na massa <time:seq repeatCount="indefinite"> <img class="time" src="image1.jpg" dur="3s" /> <img class="time" src="image2.jpg" dur="3s" /> </time:seq>
  17. 17. Mão na massa Ficando com o seguinte código ... <body> <time:seq repeatCount="indefinite"> <img class="time" src="image1.jpg" dur="3s" /> <img class="time" src="image2.jpg" dur="3s" /> </time:seq> </body> </html>
  18. 18. Agradecimentos Obrigado! Links Wikipedia : http://bit.ly/1JNLn1 W3C : http://bit.ly/pg6j9

×