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

1 Solución UC3M para insertar videotutoriales en páginas ...
Author: Ernesto Hernández Soler
0 downloads 2 Views

1 Solución UC3M para insertar videotutoriales en páginas webBelé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

width="410" object="" id="movie" autostart="false" loop=“true" src="http://dirección donde está el vídeo.swf" quality="high" frameborder="1" name="presentation" allowscriptaccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/ getflashplayer">

8 Embeber objetos

width="410" object="" id="movie" autostart="false" loop=“true" src="http://dirección donde está el vídeo.swf" quality="high" frameborder="1" name="presentation" allowscriptaccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/ getflashplayer">

9 es la etiqueta estándar html pero....Se puede utilizar el siguiente código: Pero algunos navegadores como Internet Explorer no muestran el vídeo hasta que se ha descargado completamente…

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

11 Height / align / width

width="410" object="" id="movie" autostart="false" loop=“true" src="http://dirección donde está el vídeo.swf" quality="high" frameborder="1" name="presentation" allowscriptaccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/ getflashplayer">

Podemos modificar la altura, la anchura (ojo, proporcionalmente para que no se vea mal) y la alineación del vídeo

12 Autostart

width="410" object="" id="movie" autostart="false" loop="true" src="http://dirección donde está el vídeo.swf" quality="high" frameborder="1" name="presentation" allowscriptaccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/ getflashplayer">

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

width="410" object="" id="movie" autostart="false" loop=“true" src="http://dirección donde está el vídeo.swf" quality="high" frameborder="1" name="presentation" allowscriptaccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/ getflashplayer">

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

width="410" object="" id="movie" autostart="false" loop=“true" src="http://dirección donde está el vídeo.swf" quality="high" frameborder="1" name="presentation" allowscriptaccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/ getflashplayer">

SRC=Fuente. Hay que especificar la ruta y el nombre del archivo de vídeo que se va a embeber.

15 Allowscriptaccess

width="410" object="" id="movie" autostart="false" loop=“true" autoplay="off" src="http://dirección donde está el vídeo.swf" quality="high" frameborder="1" name="presentation" allowscriptaccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/ getflashplayer">

El parámetro allowScriptAccess es necesario para permitir que el objeto SWF del reproductor ejecute funciones en la página HTML contenedora.

16 Type

width="410" object="" id="movie" autostart="false" loop=“true" src="http://dirección donde está el vídeo.swf" quality="high" frameborder="1" name="presentation" allowscriptaccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/ getflashplayer">

Indica el tipo de contenido del objeto (flash, quicktime, java, etc.)

17 Pluginspage

width="410" object="" id="movie" autostart="false" loop=“true" src="http://dirección donde está el vídeo.swf" quality="high" frameborder="1" name="presentation" allowscriptaccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/ getflashplayer">

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…

width="410" object="" id="movie" autostart="false" loop="loop" autoplay="off" src="http://dirección donde está el vídeo.swf" quality="high" frameborder="1" name="presentation" allowscriptaccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/ getflashplayer">

20 …Insertalo en la página web

21

22 Videotutoriales UC3M Cómo localizar recursos en UNIverso-eCó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 <IMG alt="Still from Movie" src="moviename.gif" width=100 height=80>

25 W3school http://www.w3schools.com/media/media_object.asp

26 Muchas gracias por vuestra atención