Manuales de usuario
En esta documentación se van a detallar los aspectos fundamentales que debe conocer un usuario a la hora de modificar o ampliar los distintos temas y/o apartados del tutorial.
Se han especificado tres tipos de usuarios con el fin de intentar acercar el tutorial al mayor número posible de alumnos.
Para empezar a comprender como funciona el tutorial, se expone a continuación una explicación de la jerarquía de carpetas junto con una descripción del contenido de cada una de ellas. Esta jerarquía de carpetas debe ser tenida en cuenta por todos los usuarios.
1.- Jerarquía de carpetas y archivos
En la siguiente figura se muestra la jerarquía de carpetas que posee el tutorial.
Fig. 1 : Jerarquía de carpetas
La carpeta raiz del tutorial es la carpeta Tutorial,
esta carpeta puede estar situada que cualquier directorio, subdirectorio o servidor de páginas web desde el cual se
pueda tener acceso a través de Internet. En ella se encuentra contenido el tutorial completo.
Existen dos archivos en esta carpeta. El primero es el
archivo index.html, que es la página de acceso al tutorial.
Se le ha dado este nombre dado que la mayoría de servidores de páginas web de Internet tienen este nombre como el archivo de entrada al sitio por defecto. Se podía haber puesto cualquier otro siempre que se le indicara esto al servidor. El segundo es un archivo de texto llamado textosMenu.txt que es un archivo auxiliar que es utilizado por index.html para guardar los textos que se muestran en dicha página de inicio.
A continuación se detallan el resto de carpetas contenidas dentro de esta carpeta raiz.
La carpeta _notes. No es una carpeta relevante ya que
es creada por DreamWeaver para cuestiones internas de la propia herramienta.
La carpeta Descarga contiene los archivos que podrán
ser descargados por los visitantes del sitio web. En ella se encuentran una versión comprimida del tutorial llamada tutorial.zip y una versión electrónica de esta
documentación llamada documentacion.pdf.
La carpeta img contiene las imágenes y animaciones del
tutorial. En ella hay dos carpetas más: la carpeta fla
contiene las animaciones realizadas en Flash que se han
contiene una serie de animaciones que sirven para mostrar lo que puede realizarse con Flash.
La carpeta Temas contiene el temario del tutorial, es
decir cada uno de los temas incluyendo estos los distintos apartados que los compongan. En esta carpeta se encuentra
el archivo temas.txt que es un archivo de texto que
contiene los enlaces a todos los temas incluidos en el tutorial. Este archivo es leído desde distintos flash del tutorial y siempre debe estar actualizado de acuerdo a los temas contenidos actualmente en el tutorial. Cada tema está
contenido completamente una carpeta de nombre TemaXX, donde
XX debe corresponder con el número del tema concreto.
Dentro de cada tema, en su correspondiente carpeta TemaXX se encuentra un archivo llamado apartados.txt que contiene los enlaces a los distintos apartados de los que está compuesto ese tema, este archivo también debe mantenerse actualizado de acuerdo a los apartados que estén actualmente contenidos en el tema. Cada apartado está
contenido completamente en una carpeta de nombre ApartadoXX
donde XX debe corresponder con el número de apartado concreto.
Dentro de cada apartado, en su correspondiente carpeta ApartadoXX se encuentran los siguientes archivos. El
archivo texto.txt contiene el texto que se va a presentar
en este apartado concreto, los enlaces al apartado anterior y siguiente, el nombre del tema y el nombre del apartado.
El archivo index.html es la página html que hay que cargar
refieren los enlaces de los archivos (temas.txt, apartados.txt y texto.txt). Esta página esta creada a partir de una plantilla de DreamWeaver (contenida en Templates). Esto implica que es de muy fácil construcción y que se pueden modificar la totalidad de páginas del tutorial con sólo modificar esta plantilla. El archivo animacion.swf es la animación que se mostrará al cargar la
página index.html, junto con el texto. En lugar de este
archivo podrá estar imagen.gif que será la imagen que se
muestre al cargar index.html.
Por último está la carpeta Templates. Esta carpeta
contiene las plantillas que han sido utilizadas para la construcción del tutorial y que pueden volver a ser utilizadas para seguir añadiéndole contenido al mismo. Los archivos que se encuentran en ella son explicados a
continuación. El archivo plantillaIndex.dwt es la plantilla
utilizada por la totalidad de archivos html contenidos en el tutorial, esta plantilla debe ser tratada con sumo cuidado ya que cualquier cambio en ella afectará a todas las páginas del tutorial.
Dentro de esta carpeta se encuentra la carpeta PlantillasUsuarios, en ella se encuentran otras tres carpetas que servirán de ayuda a los usuarios que se dispongan a crear nuevos temas y/o apartados. Estas plantillas son de tres tipos de archivos: Archivos HTML, archivos FLA y Archivos de texto.
Los archivos plantillaIndexAnimacion.html y
archivos index.html contenidos en los apartados (por tanto también serán actualizados si se cambia la plantilla) y pueden ser utilizados(copiados directamente) a la hora de crear nuevos apartados. El resto de archivos contenidos en la carpeta son muestras de cómo se deben ir construyendo los archivos temas.txt, apartados.txt y texto.txt junto con dos plantillas para crear animaciones simples en flash (
plantillaAnimacionNingunaOpcion.fla y plantillaAnimacionVariasOpciones.fla).
2.- Formato de los archivos de texto
Existen varios archivos de texto que son utilizados por las animaciones flash. Estos archivos contienen información que será utilizada por la animación, esta información puede ser un texto a mostrar, una URL a la que acceder en caso de que se pulse un botón, el valor de una variable, un trozo de código HTML, etc.
Los datos que una animación puede importar de un archivo de texto deben estar guardados en variables, en el
lenguaje ActionScript (el de Flash) todas las variables son
de tipo cadena (hay excepciones como los objetos predefinidos). Un archivo de texto es simplemente una inicialización de variables que serán utilizadas por la animación.
Los archivos de texto que puede leer una animación flash poseen las siguientes características. Debe ser un archivo de texto plano, como el que se crea con editores simples de texto (Bloc de Notas). Cada variable se
nombre_variable=valor_variable
El carácter de separación de las variables es &, al
igual que otros lenguajes de programación en internet como PHP. Un ejemplo de archivo de texto que se puede encontrar en el tutorial es el siguiente:
En este archivo se pasan a la animación cinco variables, todas son cadenas de texto, será el programador de la animación el que deba reconocer el contenido de cada
una de ellas. Las variables anterior y siguiente son dos
rutas a archivos HTML y serán usadas al pulsar algún botón
en la animación, mientras que las otras (titulo, apartado y
importedText) contienen cadenas normales de caracteres y
seran mostradas en algún cuadro de texto de la animación. Fig. 2: Ejemplo archivo texto
3.- Usuario de nivel básico
Se ha considerado un usuario de nivel básico a aquel que posee unos conocimientos básicos de informática, entendiendo conocimientos básicos aquellos que puede poseer una persona habituada a trabajar con un ordenador personal pero que no tiene que estar habituado al manejo de ninguna de las herramientas software utilizadas en el desarrollo del tutorial.
¿Qué puede hacer? Un usuario de nivel básico puede llegar ha realizar, de manera sencilla, un tema completo del tutorial incluyendo los distintos apartados de los que esté compuesto.
3.1.- Introducir un tema
El añadir un nuevo tema al tutorial es tan simple como editar un archivo de texto y crear una carpeta.
El archivo de texto, llamado temas.txt, a editar se
encuentra en la carpeta Temas. Para editar este archivo
sólo es necesario un editor de textos como puede ser el Bloc de Notas de Windows. Este archivo se edita de la siguiente forma:
1º) Añadir un enlace como el que se muestra en la siguiente figura al final del archivo. Se puede encontrar el archivo mostrado en la figura, en la carpeta Templates/PlantillasUsuarios/PlantillasTXT con el nombre temas.txt.
2º) Cambiar la ruta a la que hace referencia el enlace copiado para que apunte al nuevo tema, y cambiarle el nombre del tema.
Fig. 4: Cambio de enlace y título de tema
A continuación hay que crear una carpeta con el número
del tema correspondiente, dentro de la carpeta Temas. La
carpeta debe llamarse TemaXX, donde XX debe sustituirse por
el número del tema que se esta creando.
Por último hay que crear un archivo de texto, llamado apartados.txt, en la nueva carpeta creada, como el que se muestra en la figura siguiente. Se puede encontrar un ejemplo del archivo de la figura en la carpeta
Templates/PlantillasUsuarios/PlantillasTXT con el mismo nombre (apartados.txt).
Nota: la cadena de texto /Apartado01/index.html correspondiente a la ruta del enlace, hace referencia al archivo html del primer apartado del nuevo tema introducido.
3.2.- Introducir un apartado
El añadir un nuevo apartado al tutorial es tan simple como editar un archivo de texto y crear una carpeta.
El archivo de texto, llamado apartados.txt, a editar
se encuentra en la carpeta correspondiente al tema al que pertenece (carpeta TemaXX dentro de Temas). Para editarlo sólo es necesario un editor de textos como puede se el Bloc de Notas de Windows. El archivo de texto se edita de la siguiente forma:
0º) Si se trata de añadir el primer apartado del tema, sólo hay que modificar el nombre del apartado, saltándose los pasos 1º y 2º. Ver figura siguiente.
Fig. 6: Modificación título apartado primero
1º) Copiar un enlace completo html ya hecho, y pegarlo
al final del archivo de texto.
2º) Cambiar la ruta a la que hace referencia el enlace (el cambio de la ruta siempre va a consistir en lo mismo, actualizar el número de la carpeta de apartado), y cambiarle el nombre al apartado.
Fig. 8: Cambio enlace apartados.txt
A continuación hay que crear una carpeta con el número del apartado correspondiente, dentro de la carpeta del tema al que pertenece. La carpeta debe tener el nombre ApartadoXX, donde XX debe sustituirse por el número del nuevo apartado introducido.
El contenido de la carpeta creada (texto, imagen o animación) se completará como se explica en los siguientes apartados.
Nota: la cadena de texto /index.html correspondiente a la ruta del enlace, hace referencia al archivo html del apartado.
3.3.- Introducir texto al apartado
La introducción de texto en un apartado conlleva la creación, dentro del apartado concreto (carpeta ApartadoXX), de un archivo de texto. Se puede realizar en los siguientes pasos:
1º) Crear un archivo de texto, llamado texto.txt, como
el que muestra la figura, y guardarlo dentro de la carpeta del apartado correspondiente. Se puede encontrar el archivo mostrado en la figura en la carpeta Templates/PlantillasUsuarios/PlantillasTXT con el mismo nombre.
2º) Sustituir las XX de los enlaces anterior y siguiente, por los números de los apartados correspondientes. Si no existe apartado anterior o siguiente, sustituir el enlace completo de este por almoadilla(#). Puede verse un ejemplo en las figuras siguientes.
3º) Sustituir número y nombre del tema por el correspondiente.
4º) Sustituir número y nombre del apartado por el
correspondiente.
Fig. 63: Cambio número y nombre de apartado Fig. 12: Cambio número y nombre de tema
5º) Introducir el texto perteneciente al apartado en el lugar que se indica en la figura.
Fig. 14: Introducción del texto
Con esto finaliza la introducción del texto al
apartado, en los siguientes apartados se detalla como debe introducirse una animación FLASH o una imagen GIF.
3.4.- Introducir animación o imagen
Se puede introducir una animación Flash o una imagen GIF en el apartado. Si se decide insertar una animación, esta debe cumplir los siguientes requisitos:
1º) Debe estar en la carpeta del apartado
490 pixels de anchura por 520 de altura. No obstante, cualquier otro tamaño será redimensionado para coincidir con los requisitos de la página HTML, con la consiguiente posible pérdida de calidad de la imagen.
En la carpeta Templates/PlantillasUsuarios/PlantillasFLA existen dos
animaciones que pueden ser usadas a modo de plantilla para crear animaciones simples (que sólo muestren una o varias
imágenes). Estas animaciones son
PlantillaAnimacionNingunaOpcion.fla y
PlantillaAnimacionVariasOpciones.fla. Esto no implica que no se pueda colocar ahí cualquier tipo de animación como
cualquiera de las contenidas en la carpeta img/ejemplos.
Si se decide insertar una imagen GIF, se aconseja que se cree una animación aunque esta sólo contenga esta imagen
(usando la plantilla PlantillaAnimacionNingunaOpcion.fla)
ya que el redimensionado de los archivos swf es mucho mejor que el de los GIF. No obstante si se opta por introducir directamente una imagen GIF esta debe cumplir los siguientes requisitos:
1º) Debe estar en la carpeta del apartado
correspondiente y llamarse imagen.gif.
2º) Las dimensiones idóneas para la animación son de
490 pixels de anchura por 520 de altura. Si la imagen no se ajusta a estas dimensiones sería conveniente tratarla con algún editor de gráficos.
3º) También es recomendable que la imagen tenga fondo transparente o el mismo color de fondo que la página html.
3.5.- Crear una animación flash
Crear una animación flash puede ser tan sencillo o tan complicado como se quiera. Es muy fácil crear una animación que sólo muestre una imagen o varias de ellas y además se suministran dos plantillas de ejemplo que ya tienen el tamaño, el color de fondo y los botones que deben tener y sólo es necesario introducirles las imágenes.
Un usuario sin conocimientos previos sobre Flash puede hacer estas operaciones sin la mayor dificultad.
Si lo que se desea es introducir una animación un poco más elaborada ya son necesarios algunos conocimientos más sobre la herramienta, pero cualquiera puede adquirirlos en un cortísimo espacio de tiempo simplemente siguiendo la ayuda en linea que esta posee.
Si se opta por esto último se aconseja que antes de ralizar la animación se hayan comprendido los siguientes conceptos sobre flash: obejetos, capas, interpolación de movimiento, interpolación de forma, eventos, linea de tiempo, efecto alfa...
Sin duda el límite de la complejidad que pueda llegar a alcanzar una animación lo pondrán el alumno y su
animación con apariencia “profesional” sin que su elaboración haya tenido que ser complicada.
3.6.- Construir la página HTML
Existen dos opciones a la hora de crear la página html, según si se ha optado por incluir una imagen o una animación.
En cualquiera de los dos casos hay que copiar un archivo html ya creado (el cual se encuentra en la carpeta Templates/PlantillasUsuarios/PlantillasHTML), y pegarlo dentro de la carpeta del apartado correspondiente (llamada
ApartadoXX) con el nombre index.html.
Si se decide incluir una imagen GIF, el archivo html a
copiar se llama PlantillaIndexImagen.html.
Si se ha optado por incluir una animación, el archivo
html a copiar se llama PlantillaIndexAnimacion.html.
4.- Administrador
Se ha denominado Administrador al encargado del
mantenimiento del tutorial. Este, además de poder realizar todas las funciones desempeñadas por un usuario básico, puede modificar la totalidad del tutorial. Es conveniente
que el Administrador posea, aunque no sean muchos,
A continuación se detallan las funciones que puede realizar el administrador, esto no inmplica que deba hacerlas sino que podría realizarlas si lo creyera oportuno.
Modificar textos de la página inicio. La página de inicio del tutorial esta situada en la carpeta raiz del tutorial. El código de esta consiste en
una tabla que contiene dos animaciones. La primera es la superior que consiste en la animación que contiene el título del tutorial. La segunda es la inferior y contiene el menú dinámico. Cada enlace de este menú muestra un determinado texto en su interior que puede ser modificado
desde el archivo textosMenu.txt situado en la misma
carpeta. La animación flash lee de este archivo los textos que debe mostrar.
Modificar página inicio. De la página de inicio se pueden modificar varias cosas. Una es el color de fondo de la página, esto puede realizarse editando directamente el
archivo index.html con un editor de textos(si se sabe algo
de HTML) o con Dreamweaver. Si se decide cambiar el color de fondo también será comveniente cambiárselo a las animaciones en ella contenidas, estas animaciones se encuentran en la carpeta img/fla con los nombres PresentacionTitulo.fla y MenuDinamico.fla. Para modificarlas es necesaria la herramienta Flash 5 (o
superior). Estas animaciones también pueden ser modificadas ya que se suministra el código fuente (*.fla). Si se modifican estas animaciones hay que compilarlas de nuevo para que los cambios surtan efecto, al compilarlas se generan los archivos que se muestran en la página html (*.swf). También se puede optar por modificar el código javascript contenido en esta página, este código sirve para ocultar la barra de desplazamiento lateral del navegador y para mostrar el título en la barra de estado.
Modificar plantilla de contenido PlantillaIndex.dwt. Para modificar esta plantilla es necesaria la herramienta Dreamweaver 4. La plantilla en sí contiene código html que define como es la página y aparte posee código propio de Dreamweaver para definir que partes son editables (modificables en cada una de las páginas que usan la plantilla). Cualquier modificación de regiones no editables de la plantilla afectará a la totalidad de páginas de contenido del tutorial, es decir, a todas las páginas index.html pertenecientes a cada apartado y a las dos
plantillas de html contenidas en Templates/PlantillasUsuarios/PlantillasHTML.
En esta plantilla se puede editar también tanto el color de fondo como el código javascript que contiene. las animaciones en ella contenidas que estan en img/fla (AnimacionTitulo.fla, ApartadosScroll.fla, TemasScroll.fla
y ScrollTexto.fla) se pueden editar con la herramienta Flash 5.
Generar tutorial.zip. En la página de inicio del tutorial se hace referencia a este archivo contenido en la carpeta Descarga. El archivo contendrá una versión comprimida del tutorial que podrá ser bajado desde la Red. Debe ser el administrador el encargado de mantener actualizado este archivo. Este tutorial descargable servirá
a los alumnos tanto para poder visitarlo off-line como para
trabajar con él a la hora de añadirle nuevos apartados y/o temas.
