Koldo Parra de la Horra 1

MANUAL DEL MANUAL DEL PUBLICADOR EN PUBLICADOR EN

JOOMLA (15)JOOMLA (15)

Todo lo que necesitas saber Todo lo que necesitas saber para publicar tus artículos en para publicar tus artículos en

la página Web del Centrola página Web del Centro

Insertar animaciones flash (SWF) Insertar animaciones flash (SWF) en un artículoen un artículo

2Koldo Parra de la Horra

Índice (8)Índice (8)

15.15. ¿Cómo introduzco una animación ¿Cómo introduzco una animación flash (archivo .SWF) en mi Artículflash (archivo .SWF) en mi Artículo?o?

a)a) Encontrar y bajar una animación FlashEncontrar y bajar una animación Flash.( archivo ..( archivo .swfswf o “ o “InfografíaInfografía”).”).

b)b) Subir el archivo al FTP vía Subir el archivo al FTP vía DocmanDocman..

c)c) Insertar el SWF en el Artículo.Insertar el SWF en el Artículo.

3Koldo Parra de la Horra

15-Incrustar 15-Incrustar animaciones Flash animaciones Flash

(SWF) en los artículos (SWF) en los artículos (1)(1) Programar en Flash es un trabajo arduo y requiere bastantes Programar en Flash es un trabajo arduo y requiere bastantes

conocimientos.conocimientos. Vamos a limitarnos a aprovechar lo que ya hay creado y puesto Vamos a limitarnos a aprovechar lo que ya hay creado y puesto

en la red.en la red. Se trata de archivos de extensión .SWF, infografías, en muchos Se trata de archivos de extensión .SWF, infografías, en muchos

casos interactivas. Ocupan muy poco espacio, por lo que casos interactivas. Ocupan muy poco espacio, por lo que pueden alojarse en el espacio FTP. (requerirá permiso de un pueden alojarse en el espacio FTP. (requerirá permiso de un administrador).administrador).

Es la operación más compleja, pero pueden tener una Es la operación más compleja, pero pueden tener una aplicación didáctica excelente.aplicación didáctica excelente.

Se recomienda este sitio: Se recomienda este sitio: http://www.consumer.es/infografias/ http://www.consumer.es/infografias/

4Koldo Parra de la Horra

15-Incrustar 15-Incrustar animaciones Flash animaciones Flash

(SWF) en los artículos (SWF) en los artículos (2)(2)

1.Vamos a “Consumer Eroski”

2.Seleccionamos “Infografías”

a)a)Encontrar y bajar una animación Encontrar y bajar una animación Flash.(1)Flash.(1)

5Koldo Parra de la Horra

15-Incrustar 15-Incrustar animaciones Flash animaciones Flash

(SWF) en los artículos (SWF) en los artículos (3)(3)

2.Salen ordenadas por categorías. Por ejemplo elegimos “Nuevas Tecnologías”.

a)a)Encontrar y bajar una animación Encontrar y bajar una animación Flash.(2)Flash.(2)

6Koldo Parra de la Horra

15-Incrustar 15-Incrustar animaciones Flash animaciones Flash

(SWF) en los artículos (SWF) en los artículos (4)(4)

3.Elegimos la infografía sobre la fibra óptica.

a)a)Encontrar y bajar una animación Encontrar y bajar una animación Flash.(3)Flash.(3)

7Koldo Parra de la Horra

15-Incrustar 15-Incrustar animaciones Flash animaciones Flash

(SWF) en los artículos (SWF) en los artículos (5)(5)

4.Podemos verla

5.Y también podemos descargarla.

a)a)Encontrar y bajar una animación Encontrar y bajar una animación Flash.(4)Flash.(4)

8Koldo Parra de la Horra

15-Incrustar 15-Incrustar animaciones Flash animaciones Flash

(SWF) en los artículos (SWF) en los artículos (6)(6)

5.En la siguiente pantalla hacemos clic otra vez en “Descargar Infografía”.

a)a)Encontrar y bajar una animación Encontrar y bajar una animación Flash.(5)Flash.(5)

9Koldo Parra de la Horra

15-Incrustar 15-Incrustar animaciones Flash animaciones Flash

(SWF) en los artículos (SWF) en los artículos (7)(7)

6.Este es el archivo que ha bajado a nuestro equipo.

7.Lo copiamos a una carpeta llamada “Infografías y dentro de ella lo descomprimimos.

a)a)Encontrar y bajar una animación Encontrar y bajar una animación Flash.(6)Flash.(6)

10Koldo Parra de la Horra

15-Incrustar 15-Incrustar animaciones Flash animaciones Flash

(SWF) en los artículos (SWF) en los artículos (8)(8)

8.Es un archivo swf. El original en zip y el html los podemos eliminar.

a)a)Encontrar y bajar una animación Encontrar y bajar una animación Flash.(7)Flash.(7)

11Koldo Parra de la Horra

15-Incrustar 15-Incrustar animaciones Flash animaciones Flash

(SWF) en los artículos (SWF) en los artículos (9)(9)b)b)Subir el archivo al FTP vía Subir el archivo al FTP vía

Docman.(1)Docman.(1) Como publicadores, inicialmente no tenemos permisos para Como publicadores, inicialmente no tenemos permisos para

subir archivos. Debemos hacerlo a través de la extensión subir archivos. Debemos hacerlo a través de la extensión Docman, comunicárselo a un administrador del portal y Docman, comunicárselo a un administrador del portal y esperar a que él nos apruebe la subida (publique) del archivo.esperar a que él nos apruebe la subida (publique) del archivo.

Para ello se debe cumplir que:Para ello se debe cumplir que: La extensión Docman esté instalada.(Debe hacerlo el administrador).La extensión Docman esté instalada.(Debe hacerlo el administrador). Esté configurado para permitir la subida de archivos .SWF (Debe Esté configurado para permitir la subida de archivos .SWF (Debe

hacerlo el administrador).hacerlo el administrador). La carpeta de destino de los archivos sea: joomla/dmdocuments.La carpeta de destino de los archivos sea: joomla/dmdocuments.

No debemos abusar subiendo muchos archivos o subiendo No debemos abusar subiendo muchos archivos o subiendo archivos grandes.archivos grandes.

12Koldo Parra de la Horra

15-Incrustar 15-Incrustar animaciones Flash animaciones Flash

(SWF) en los artículos (SWF) en los artículos (10)(10)b)b)Subir el archivo al FTP vía Subir el archivo al FTP vía

Docman.(2)Docman.(2) 1.Vamos a la portada de nuestro portal.

2.Loguearnos.3.Encontrar el

enlace “Descargas” en el menú principal. Hacer clic en él.

13Koldo Parra de la Horra

15-Incrustar 15-Incrustar animaciones Flash animaciones Flash

(SWF) en los artículos (SWF) en los artículos (11)(11)b)b)Subir el archivo al FTP vía Subir el archivo al FTP vía

Docman.(3)Docman.(3)4.Hemos entrado en Docman.5.Hacemos clic en “Submit file”.

14Koldo Parra de la Horra

15-Incrustar 15-Incrustar animaciones Flash animaciones Flash

(SWF) en los artículos (SWF) en los artículos (12)(12)b)b)Subir el archivo al FTP vía Subir el archivo al FTP vía

Docman.(4)Docman.(4)6.Seleccionamos “Subir desde nuestro

ordenador”.7.Hacemos clic en “Next”.

15Koldo Parra de la Horra

15-Incrustar 15-Incrustar animaciones Flash animaciones Flash

(SWF) en los artículos (SWF) en los artículos (13)(13)b)b)Subir el archivo al FTP vía Subir el archivo al FTP vía

Docman.(5)Docman.(5)8. Hacemos clic en “Examinar”.9.Seleccionamos el archivo de nuestro

disco duro.

16Koldo Parra de la Horra

15-Incrustar 15-Incrustar animaciones Flash animaciones Flash

(SWF) en los artículos (SWF) en los artículos (14)(14)b)b)Subir el archivo al FTP vía Subir el archivo al FTP vía

Docman.(6)Docman.(6)

10. Seleccionamos el archivo “fibra_optica.swf”.

11.Clic en “Abrir”.

17Koldo Parra de la Horra

15-Incrustar 15-Incrustar animaciones Flash animaciones Flash

(SWF) en los artículos (SWF) en los artículos (15)(15)b)b)Subir el archivo al FTP vía Subir el archivo al FTP vía

Docman.(7)Docman.(7)12. Hacemos clic en “Upload”.

18Koldo Parra de la Horra

15-Incrustar 15-Incrustar animaciones Flash animaciones Flash

(SWF) en los artículos (SWF) en los artículos (16)(16)b)b)Subir el archivo al FTP vía Subir el archivo al FTP vía

Docman.(8)Docman.(8)13. Esperamos a que suba. Tarda poco.

19Koldo Parra de la Horra

15-Incrustar 15-Incrustar animaciones Flash animaciones Flash

(SWF) en los artículos (SWF) en los artículos (17)(17)b)b)Subir el archivo al FTP vía Subir el archivo al FTP vía

Docman.(9)Docman.(9) 14. Podemos renombrar el archivo.

15.Elegir Carpeta. Lo ideal es crear una por Departamento. (Administrador).

16.Activar “Yes” en “Aproved”

17.Confirmar.

20Koldo Parra de la Horra

15-Incrustar 15-Incrustar animaciones Flash animaciones Flash

(SWF) en los artículos (SWF) en los artículos (18)(18)b)b)Subir el archivo al FTP vía Subir el archivo al FTP vía

Docman.(10)Docman.(10) 18. Vemos el archivo subido junto con los otros anteriores.

19.Da igual que esté en la carpeta “Nuevas tecnologías”, la ruta del archivo es el servidor FTP de nuestro IES o CP+/joomla/dmdocuments/fibra_optica.swf

21Koldo Parra de la Horra

15-Incrustar 15-Incrustar animaciones Flash animaciones Flash

(SWF) en los artículos (SWF) en los artículos (19)(19)b)b)Subir el archivo al FTP vía Subir el archivo al FTP vía

Docman.(11)Docman.(11)Recuerda:• Avisa a un administrador para que

apruebe desde el panel de administración la subida del archivo. De lo contrario es como si no existiese.

• Previamente debe haber creado una carpeta para tu Departamento.

• Da igual la carpeta en la que esté, la dirección donde se alojan es la misma para todos: En mi caso será:http://web.educastur.princast.es/ies/matajove/joomla/dmdocuments/

nombredelarchivo.swf

22Koldo Parra de la Horra

15-Incrustar 15-Incrustar animaciones Flash animaciones Flash

(SWF) en los artículos (SWF) en los artículos (20)(20)b)b)Subir el archivo al FTP vía Subir el archivo al FTP vía

Docman.(12)Docman.(12)Analicemos:http://web.educastur.princast.es/ies/matajove/joomla/dmdocuments/

nombredelarchivo.swf

Dirección FTP de

Educastur

Carpeta de

Docman en

Joomla

Depende de cada

centro

Nombre del

archivo.

23Koldo Parra de la Horra

15-Incrustar 15-Incrustar animaciones Flash animaciones Flash

(SWF) en los artículos (SWF) en los artículos (21)(21)b)b)Subir el archivo al FTP vía Subir el archivo al FTP vía

Docman.(13)Docman.(13)http://web.educastur.princast.es/ies/matajove/joomla/dmdocuments/

nombredelarchivo.swf

Para vuestro centro es siempre igual.

Sólo cambia esto

24Koldo Parra de la Horra

15-Incrustar 15-Incrustar animaciones Flash animaciones Flash

(SWF) en los artículos (SWF) en los artículos (22)(22)c)c)Insertar el SWF en el Artículo.Insertar el SWF en el Artículo.

(1)(1)1. Como

siempre, creamos un artículo.

2.De nuevo deberemos editar en HTML, por lo tanto el botón será “<>”.

25Koldo Parra de la Horra

15-Incrustar 15-Incrustar animaciones Flash animaciones Flash

(SWF) en los artículos (SWF) en los artículos (23)(23)c)c)Insertar el SWF en el Artículo.Insertar el SWF en el Artículo.

(2)(2) 3.Pero ahora resulta más complejo porque no hay reproductor específico.

4.Primero debemos preparar el código base. Se recomienda en el bloc de notas

Este código puede obtenerse del archivo “reproductor swf.txt”, dentro de la carpeta de recursos de esta publicación.

26Koldo Parra de la Horra

15-Incrustar 15-Incrustar animaciones Flash animaciones Flash

(SWF) en los artículos (SWF) en los artículos (24)(24)c)c)Insertar el SWF en el Artículo.Insertar el SWF en el Artículo.

(3)(3)5.Observamos este código. Solo hay que sustituir:

• El FTP correspondiente a nuestro CP o IES.(1)

• El nombre del archivo swf que queremos reproducir. (2)

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="400" height="400">swflash.cab#version=6,0,29,0" width="400" height="400">

<param name="movie" <param name="movie" value="http://ftpweb.educastur.princast.es/ies/matajove/joomla/dmdocuments/value="http://ftpweb.educastur.princast.es/ies/matajove/joomla/dmdocuments/nombrearchivo.swf">nombrearchivo.swf">

<param name="quality" value="high"><param name="quality" value="high">

<embed src="nombre_carpeta_flash/archivo.swf" quality="high" <embed src="nombre_carpeta_flash/archivo.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="400" height="400"></embed> </object>flash" width="400" height="400"></embed> </object>

(1)

(2)

27Koldo Parra de la Horra

15-Incrustar 15-Incrustar animaciones Flash animaciones Flash

(SWF) en los artículos (SWF) en los artículos (25)(25)c)c)Insertar el SWF en el Artículo.Insertar el SWF en el Artículo.

(4)(4)6.Ojo hay que ponerlo justo entre las comillas. En nuestro caso y para ese archivo quedaría así:<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="400" height="400">swflash.cab#version=6,0,29,0" width="400" height="400">

<param name="movie" <param name="movie" value="http://ftpweb.educastur.princast.es/ies/matajove/joomla/dmdocumentsvalue="http://ftpweb.educastur.princast.es/ies/matajove/joomla/dmdocuments /fibra-/fibra-optica.swf">optica.swf">

<param name="quality" value="high"><param name="quality" value="high">

<embed src="nombre_carpeta_flash/archivo.swf" quality="high" <embed src="nombre_carpeta_flash/archivo.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="400" height="400"></embed> </object>shockwave-flash" width="400" height="400"></embed> </object>

28Koldo Parra de la Horra

15-Incrustar 15-Incrustar animaciones Flash animaciones Flash

(SWF) en los artículos (SWF) en los artículos (26)(26)c)c)Insertar el SWF en el Artículo.Insertar el SWF en el Artículo.

(5)(5)7.Es mejor realizar los cambios en el bloc de notas. Luego seleccionar todo, copiarlo y pegarlo en el editor HTML de Joomla.

8.Edición y “Seleccionar todo”. Control+C

29Koldo Parra de la Horra

15-Incrustar 15-Incrustar animaciones Flash animaciones Flash

(SWF) en los artículos (SWF) en los artículos (27)(27)c)c)Insertar el SWF en el Artículo.Insertar el SWF en el Artículo.

(6)(6)La ventaja es que siempre va a ser igual. Solamente cambia el

nombre del archivo .SWF, porque la ubicación siempre es la misma.

Con Docman, todos los archivos están en ../joomla/dmdocuments

30Koldo Parra de la Horra

15-Incrustar 15-Incrustar animaciones Flash animaciones Flash

(SWF) en los artículos (SWF) en los artículos (28)(28)c)c)Insertar el SWF en el Artículo.Insertar el SWF en el Artículo.

(7)(7)9.Lo

anterior es el texto del artículo.Se pega aquí con Control+V y se confirma con “Update”.

31Koldo Parra de la Horra

15-Incrustar 15-Incrustar animaciones Flash animaciones Flash

(SWF) en los artículos (SWF) en los artículos (29)(29)c)c)Insertar el SWF en el Artículo.Insertar el SWF en el Artículo.

(9)(9)

10.En el editor se ve así. He centrado la animación.

11.Guardamos el Artículo de la manera habitual.

32Koldo Parra de la Horra

15-Incrustar 15-Incrustar animaciones Flash animaciones Flash

(SWF) en los artículos (SWF) en los artículos (30)(30)c)c)Insertar el SWF en el Artículo.Insertar el SWF en el Artículo.

(10)(10)

12.Al visualizar el archivo se muestra así.

33Koldo Parra de la Horra

15-Incrustar 15-Incrustar animaciones Flash animaciones Flash

(SWF) en los artículos (SWF) en los artículos (31)(31)c)c)Insertar el SWF en el Artículo.Insertar el SWF en el Artículo.

(11)(11)

13.Es interactiva. Podemos ir avanzando.

34Koldo Parra de la Horra

Hay que instalar el plugin de Adobe Hay que instalar el plugin de Adobe para poder reproducir archivos flashpara poder reproducir archivos flash

http://www.adobe.com/products/flash/about/ http://www.adobe.com/products/flash/about/

O bien haz clic sobre esta imagenO bien haz clic sobre esta imagen

15-Incrustar 15-Incrustar animaciones Flash animaciones Flash

(SWF) en los artículos (SWF) en los artículos (32)(32)

Koldo Parra de la Horra 35

MANUAL DEL MANUAL DEL PUBLICADOR EN PUBLICADOR EN

JOOMLA (15)JOOMLA (15)Insertar animaciones flash (SWF) Insertar animaciones flash (SWF)

en un artículoen un artículoFin de la presentaciónFin de la presentación