Solución UC3M para insertar videotutoriales en páginas web

Presentación del tema: "Solución UC3M para insertar videotutoriales en páginas web"— Transcripción de la presentación:

1 Solución UC3M para insertar videotutoriales en páginas web
Belén Mosquera - UC3M Taller : Tutoriales de formación 7as Jornadas Expania Santiago de Compostela, 26 de mayo de 2010

2 Publicar el tutorial en captivate

3 Seleccionar Flash (SWF)

4 Flash Flash Player es el programa que permite reproducir el archivo flash en el navegador Los archivos de Flash tienen generalmente la extensión SWF

5 SWF = Small Web Format Formato y extensión de archivos para Flash creado por la empresa Adobe (antes Macromedia). Se usa principalmente para agregar animaciones e interactividad a las páginas web, ya que son archivos que ocupan poco.

6 Subir el vídeo a nuestro servidor web

7 Código utilizado para insertar un vídeo en nuestra página web
<p><embed height="342" align="middle" width="410" object="" id="movie" autostart="false" loop=“true" src=" donde está el vídeo.swf" quality="high" frameborder="1" name="presentation" allowscriptaccess="sameDomain" type="application/x-shockwave-flash" pluginspage=" getflashplayer"></embed></p>

8 <embed> Embeber objetos
<p><embed height="342" align="middle" width="410" object="" id="movie" autostart="false" loop=“true" src=" donde está el vídeo.swf" quality="high" frameborder="1" name="presentation" allowscriptaccess="sameDomain" type="application/x-shockwave-flash" pluginspage=" getflashplayer"></embed></p>

9 <Object> es la etiqueta estándar html pero....
Se puede utilizar el siguiente código: <object data="nombre_video.swf" type="application/x-shockwave-flash"></object> Pero algunos navegadores como Internet Explorer no muestran el vídeo hasta que se ha descargado completamente…

10 <embed> Embeber objetos
Por este motivo se utiliza la etiqueta <embed> para incluir vídeos Flash en las páginas HTML: es una alternativa, pero no es un estándar HTML

11 Height / align / width <p><embed height="342" align="middle"
width="410" object="" id="movie" autostart="false" loop=“true" src=" donde está el vídeo.swf" quality="high" frameborder="1" name="presentation" allowscriptaccess="sameDomain" type="application/x-shockwave-flash" pluginspage=" getflashplayer"></embed></p> Podemos modificar la altura, la anchura (ojo, proporcionalmente para que no se vea mal) y la alineación del vídeo

12 Autostart <p><embed height="342" align="middle"
width="410" object="" id="movie" autostart="false" loop="true" src=" donde está el vídeo.swf" quality="high" frameborder="1" name="presentation" allowscriptaccess="sameDomain" type="application/x-shockwave-flash" pluginspage=" getflashplayer"></embed></p> El atributo autostart indica si el archivo se reproducirá automáticamente al cargarse la página, puede tomar los valores true o false.

13 Loop <p><embed height="342" align="middle"
width="410" object="" id="movie" autostart="false" loop=“true" src=" donde está el vídeo.swf" quality="high" frameborder="1" name="presentation" allowscriptaccess="sameDomain" type="application/x-shockwave-flash" pluginspage=" getflashplayer"></embed></p> El atributo loop indica si el archivo se reproducirá continuamente en un bucle, y también puede tomar los valores true o false.

14 SRC <p><embed height="342" align="middle"
width="410" object="" id="movie" autostart="false" loop=“true" src=" donde está el vídeo.swf" quality="high" frameborder="1" name="presentation" allowscriptaccess="sameDomain" type="application/x-shockwave-flash" pluginspage=" getflashplayer"></embed></p> SRC=Fuente. Hay que especificar la ruta y el nombre del archivo de vídeo que se va a embeber.

15 Allowscriptaccess <p><embed height="342" align="middle"
width="410" object="" id="movie" autostart="false" loop=“true" autoplay="off" src=" donde está el vídeo.swf" quality="high" frameborder="1" name="presentation" allowscriptaccess="sameDomain" type="application/x-shockwave-flash" pluginspage=" getflashplayer"></embed></p> El parámetro allowScriptAccess es necesario para permitir que el objeto SWF del reproductor ejecute funciones en la página HTML contenedora.

16 Type <p><embed height="342" align="middle"
width="410" object="" id="movie" autostart="false" loop=“true" src=" donde está el vídeo.swf" quality="high" frameborder="1" name="presentation" allowscriptaccess="sameDomain" type="application/x-shockwave-flash" pluginspage=" getflashplayer"></embed></p> Indica el tipo de contenido del objeto (flash, quicktime, java, etc.)

17 Pluginspage <p><embed height="342" align="middle"
width="410" object="" id="movie" autostart="false" loop=“true" src=" donde está el vídeo.swf" quality="high" frameborder="1" name="presentation" allowscriptaccess="sameDomain" type="application/x-shockwave-flash" pluginspage=" getflashplayer"></embed></p> pluginspage : Se debe indicar el sitio donde está el plugin necesario para mostrar Flash

18 Plugin HTML permite incluir en las páginas web elementos complejos como vídeos en formato QuickTime o Flash. La mayoría de este tipo de contenidos no los interpreta el navegador directamente, sino que hace uso de pequeños programas llamados plugins y que se encargan de tratar con este tipo de elementos complejos .

19 Una vez modificado el código…
<p><embed height="342" align="middle" width="410" object="" id="movie" autostart="false" loop="loop" autoplay="off" src=" donde está el vídeo.swf" quality="high" frameborder="1" name="presentation" allowscriptaccess="sameDomain" type="application/x-shockwave-flash" pluginspage=" getflashplayer"></embed></p>

20 …Insertalo en la página web

21

22 Videotutoriales UC3M Cómo localizar recursos en UNIverso-e
Cómo localizar los recursos por materias  Ejemplo de creación de diferentes alertas en un recurso Cómo localizar una revista en nuestras plataformas  Aprende a buscar en los formularios de búsqueda de revistas de SFX Aprende a interpretar los resultados que muestra SFX Aprende a saber si una revista tiene versión electrónica desde nuestro catálogo Aprende el funcionamiento de SFX dentro de una base de datos

23 Existen otros códigos que funcionan correctamente…

24 W3C http://www.w3.org/TR/2003/WD-WCAG20-HTML-TECHS-20031209/#programmaticobjects
<OBJECT classid="clsid:A12BCD3F-GH4I-56JK-xyz" codebase=" width=100 height=80> <PARAM name="Movie" value="moviename.swf"> <EMBED src="moviename.swf" width=100 height=80 pluginspage=" </EMBED> <NOEMBED> <IMG alt="Still from Movie" src="moviename.gif" width=100 height=80> </NOEMBED> </OBJECT>

25 W3school http://www.w3schools.com/media/media_object.asp
<object width="400" height="40" <object classid="clsid:d27cdb6e-ae6d-11cf-96b " codebase=" pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0"> <param name="SRC" value="bookmark.swf"> <embed src="bookmark.swf" width="400" height="40"></embed> </object>

26 Muchas gracias por vuestra atención