Sesión 2.- Preparar materiales para la actividad. Imágenes, iconos, audiovisuales. Descargas, enlaces, códigos de reproducción.

En la sesión anterior hemos recopilado materiales como estos :

- imagen01.jpg - imagen02.jpg - imagen03.jpg - imagen04.jpg - video.flv

Las url-s , link-s o enlaces de origen son en este caso :

- url-flv-neolao - url-flv-player - url-galilei - url-la-luna - url-luna-rara - url-youtube-video-luna -

En esta sesión vamos a preparar los elementos web que formarán parte de la actividad. Estos serán:

2a.- Logo de la actividad que sacaremos de aquí = - imagen03.jpg -

2b.- Iconos para el menú principal que sacaremos de aquí = - imagen04.jpg -

2c.- Señalizadores numéricos en iconos menú principal para diferenciación on/off - activo/inactivo. Utilizaremos estos iconos = [ 1.gif ] [ 1x.gif ] [ 2.gif ] [ 2x.gif ] [ 3.gif ] [ 3x.gif ] [ 4.gif ] [ 4x.gif ] [ 5.gif ] [ 5x.gif ] [ 6.gif ] [ 6x.gif ]

2d.- Vídeo con contenido principal que sacaremos de aquí = - video.flv -

2e.- Texto escrito del vídeo principal. Se trata de pasar a texto el relato audio del vídeo. No es imprescindible pero viene muy bien tener la versión texto del audio - vídeo para desarrollar actividades en torno a su lectura, impresión, subrayado, etc.

2f.- Reproductor FLV y código de inserción HTM. Podemos utilizar [ este ...descarga vídeo también, 21 Mg, esperar fin descarga ] cuyo resultado es [ así ]

2g.- Fichero de estilo para resaltar link-s o enlaces. Código e inserción HTM. Podemos utilizar [ este ] cuyo resultado es [ así ]

Para preparar todos estos materiales podemos hacerlo como sigue:

OBSERVACIÓN: Todos los materiales que voy utilizando para el ejemplo que utilizo como tutorial son descargables. Podéis utilizar estos mismos materiales e ir reproduciendo paralelamente el mismo ejemplo. También se pueden utilizar otros materiales, otro tema, otra actividad llevada paralelamente a esta. Será más difícil para quien elija esta opción, también más meritorio lógicamente.

2a1.- Logo de la actividad ; de la imagen elegida extraemos una sección circular (150x150 píxeles) en la que escribimos el titular principal de la actividad. [ Este ] puede ser un resultado. Se precisará como herramienta de trabajo el editor de imágenes que utilice cada cual.

2b1 - 2c1.- Iconos menú principal ; de la imagen elegida extraemos secciones circulares (75x75 píxeles) incrustando numeración indicativa on/off - activo/inactivo . Como resultados obtenemos = [ menu1 - menu1x ] [ menu2 - menu2x ] [ menu3 - menu3x ] [ menu4 - menu4x ] [ menu5 - menu5x ] [ menu6 - menu6x ]

2d1 - 2e1 - 2f1.- Vídeo de contenidos principal ; En el sitio fuente Neolao podemos obtener su reproductor FLV cuyo fichero de descarga es este , el cual he simplificado y detallado [ aquí ] (22 Mg de descarga - esperad descarga). Descomprimido fichero codigo-flv.zip obtenemos estos componentes necesarios para la reproducción FLV...

...donde .SWF y .FLV son reproductor - vídeo respectivamente y .HTM - .TXT contiene los códigos de configuración.

Los contenidos de player-maxi.HTM y player-maxi.TXT son estos :

-PLAYER-MAXI.HTM-

   

-PLAYER-MAXI.TXT-

   

El primer código (player.htm) irá integrado en la página de contenidos que dediquemos al vídeo y el fichero segundo (player-maxi.txt) habrá de estar tal cual (formato TXT) en la misma carpeta donde desarrollaremos la actividad.

2g1.- Estilo CSS para link-s o enlaces ; Una forma muy elemental de utilizar hojas de estilo (definen como se ven documentos separando los detalles de estilo de los contenidos) es la que podemos utilizar para resaltar link-s o enlaces (haciendo las veces de sencillos botones) y definiendo tipos de letra o detalles de la barra de desplazamiento. [ Aquí ] podéis descargar el código y el fichero adjunto para lograr estos propósitos. Al descomprimir - site-link-codigo.zip - encontraréis dos ficheros:

1º -site.css-

2º -site-link.htm-

El primero contiene lo mostrador abajo y debe estar copiado tal y como se ha descargado en la carpeta de trabajo en la cual desarrollamos nuestra actividad. El segundo contiene lo que también se muestra abajo y es un código que ha de copiarse entre -HEAD- y -/HEAD- como detallaremos más adelante.

-SITE.CSS-

   

-SITE-LINK.HTM-