Netex learningMaker | Basic Template v1.0 [Es]

Índice
1. Introducción....................................................................................................................................3
1.1 Estructura de un proyecto................................................................................................................................... 3
1.2 Navegación.......................................................................................................................................................... 3
1.3 Especificaciones .................................................................................................................................................. 4
2. Configuración del proyecto ............................................................................................................5
3. Páginas............................................................................................................................................6
3.1 Página de contenido............................................................................................................................................ 6
3.2 Página de secciones............................................................................................................................................. 7
4. Componentes .................................................................................................................................8
4.1 Sección ................................................................................................................................................................ 8
4.2 Contenedor ......................................................................................................................................................... 8
4.3 Audio ................................................................................................................................................................... 9
4.4 Destacado.......................................................................................................................................................... 10
4.5 HTML ................................................................................................................................................................. 10
4.6 Imagen............................................................................................................................................................... 11
4.7 Vídeo ................................................................................................................................................................. 11
4.8 Cuestionario ...................................................................................................................................................... 12
4.9 Contenido externo ............................................................................................................................................ 13
4.10 Carrusel ............................................................................................................................................................. 14
4.11 Grupo de acordeón ........................................................................................................................................... 14
4.12 Grupo de pestañas ............................................................................................................................................ 15
5. Recursos........................................................................................................................................17
6. Herramientas................................................................................................................................18
A. Anexos .............................................................................................................................................19
A.1. Tamaños de imágenes y contenidos externos ........................................................................................................ 19
A.2. Codificación de vídeos con HandBrake ................................................................................................................... 19
A.2.1. Proceso de codificación .......................................................................................................................................................19

1. Introducción
A lo largo de este documento se describen los elementos que forman la plantilla Basic en la herramienta autora Netex
learningMaker.
1.1 Estructura de un proyecto
Esta plantilla solo permite utilizar “Páginas” para estructurar los proyectos. Existirán dos tipos de páginas: la página de
contenido y la página de secciones.
1.2 Navegación
 Menú principal: es el menú que se muestra en todas las páginas y secciones de la plantilla. En el menú
principal se muestra una jerarquía con las páginas y secciones existentes dentro del proyecto. Para cada página
del menú se mostrará gráficamente el estado en el que el alumno se encuentra (desconocido/completado/no
completado). Dependiendo de la configuración del proyecto, el menú permitirá una navegación secuencial o
libre. El menú principal está siempre visible en resoluciones iguales o superiores a 980px, pero para las
inferiores permanecería plegado.
 Menú de página: es el menú que se muestra en el pie de las páginas de secciones y permite al usuario navegar
entre las diferentes secciones de una página.

4
Con respecto a la navegación por gestos, se utilizarán los gestos de “izquierda” y “derecha” para navegar entre páginas.
También se utilizará para navegar entre las secciones de una página siempre y cuando se haya configurado en
“horizontal” la propiedad de “Navegación de secciones” (ver apartado siguiente).
1.3 Especificaciones
Los dispositivos, resoluciones y navegadores soportados para estas plantillas son los siguientes:
 Dispositivos:
o Android 4+
o Cualquier otro compatible con los navegadores especificados
 Navegadores:
o IExplorer8+
o Firefox 18+
o Chrome 15+
o Android 4.0+
o Safari 5.1+
 Resoluciones:
o 240x320
o 320x480
o 480x800
o 768x1024
Wireframe de ejemplo:

5
2. Configuración del proyecto
La plantilla permite la configuración del proyecto con los siguientes parámetros:
Nombre Tipo Obligatorio Valor por defecto Descripción
Título Texto Sí Project Title Título mostrado en la cabecera.
Subtítulo Texto Sí Project Subtitle Subtítulo mostrado en la cabecera.
Botón Cerrar Sí/No Sí No Si seleccionas “True”, se muestra el botón para salir del
proyecto, y si seleccionas “False”, no se muestra.
Navegación Secuencial/Libre Sí Libre Secuencial: solo se puede avanzar de página/sección cumpliendo
los objetivos anteriores.
Libre: el usuario puede navegar libremente por todas las
páginas/secciones del contenido.
Navegación
de secciones
Horizontal/Vertical Sí Vertical Horizontal: las secciones se muestran unas al lado de las otras
(en forma de slide).
Vertical: las secciones se muestran una debajo de las otras.
Imagen de
logo
Recurso en
formato .GIF, .PNG
o .JPEG
No (Vacío) Logo mostrado en la cabecera de la página.
Color de
fondo
Color Sí #FFFFFF Color de fondo del proyecto
Color H1 Color Sí #000000 Color de los títulos H1
Color de
enlace
Color Sí #008cba Color de los enlaces
Color de
fondo del
menú
Color Sí #ffffff Color de fondo del menú
Color de
fondo del
menú (activo)
Color Sí #7fc9ff Color de fondo del elemento del menú activo
Color del
menú
Color Sí #000000 Color de la entrada del elemento del menú activo
Transición de
entrada
Listado No none Efecto de animación al entrar en una página.
Transición de
salida
Listado No none Efecto de animación al salir de una página.
CSS
Personalizado
Recurso No (Vacío) Selección de un archivo CSS que se cargará en el proyecto.

6
3. Páginas
Esta plantilla cuenta con dos tipos de páginas:
 Página de contenido
 Página de secciones
Las operaciones de gestión de páginas desde el editor se realizan a través del menú superior de herramientas, el cual
nos da acceso a la interfaz de “Gestionar páginas”.
Desde aquí es posible cambiar el orden de las páginas, añadir nuevas páginas, eliminar páginas ya existentes o
duplicarlas.
A continuación se describen en detalle las propiedades de cada uno de los tipos de página así como los componentes
que pueden incluir cada una de ellas.
3.1 Página de contenido
La página de contenido está destinada a mostrar contenidos que no están jerarquizados en secciones. Aparecen en el
menú principal como entradas clickables directamente (no se expanden, ya que no contienen secciones).
Las propiedades que se pueden establecer desde el editor para este tipo de página son:
Nombre Tipo Valor por defecto Descripción
Título Texto Page Content Título mostrado en la página.

7
Dentro de las páginas de contenido se puede utilizar los siguientes componentes:
Componente Cantidad Descripción
Audio 0..N Documento en formato .MP3.
Destacado 0..N Componente para concretar y resaltar información.
HTML 0..N Texto que se añade en las diferentes secciones.
Imagen 0..N Muestra una imagen en el contenido.
Vídeo 0..N Vídeo que se reproducirá dentro del componente.
Cuestionario 0..N Conjunto de preguntas ordenadas a las que hay que responder.
Contenido externo 0..N Permite utilizar contenido HTML o Flash creado por otras herramientas de
autor (animaciones, actividades…).
Contenedor 0..N Permite agrupar componentes en una determinada disposición: tres
columnas, doble columna - columna simple, columna simple - doble columna,
dos columnas o una columna.
3.2 Página de secciones
La página de secciones está destinada a mostrar contenidos que están jerarquizados en secciones. Aparecen en el menú
principal como elementos “expandibles”, es decir, al hacer clic en la entrada del menú que representa la página se
expanden sus secciones como entradas “clickables” para acceder directamente a la sección.
Dependiendo del valor especificado en la propiedad “Navegación de secciones” a nivel de proyecto, las secciones
dentro de esta página se mostraran unas debajo de otras (vertical) o unas al lado de otras (horizontal).
La propiedad que se puede establecer desde el editor para este tipo de página es:
Título Texto Page Section Título mostrado en la página.
Dentro de las páginas de contenido se puede utilizar el siguiente componente:
Sección 0..N Sección dentro de la página.

8
4. Componentes
Los componentes que pueden ser utilizados en esta plantilla, ya sea como componentes primarios dentro de las
páginas, o como componentes incluidos dentro de otros componentes, son los siguientes:
 Sección
 Contenedor
 Audio
 Destacado
 Texto en HTML
 Imagen
 Vídeo
 Cuestionario
 Contenido externo
 Carrusel
 Grupo de acordeón
 Grupo de pestañas
A continuación se describen las propiedades de cada uno de estos componentes, su posible utilización y los
componentes que pueden tener en su interior.
4.1 Sección
Son las diferentes partes que están dentro de la página de secciones. En las secciones se pueden incluir, a su vez, todos
los componentes disponibles.
La propiedad que se puede establecer desde el editor para este componente es:
Título Texto Page Section Título de la sección.
Dentro se puede utilizar los siguientes componentes:
columnas, doble columna - columna simple, columna simple - doble
columna, dos columnas o una columna.
4.2 Contenedor
Este componente permite agrupar otros componentes en una determinada disposición: tres columnas, doble columna -
columna simple, columna simple - doble columna, dos columnas o una columna.
Las propiedades que se pueden establecer desde el editor para este componente son:

9
Color de fondo Color #FFFFFF Color de fondo del contenedor.
Color del borde Color #FFFFFF Color del borde del contenedor.
Esta es la visualización de su panel de propiedades:
Dentro se puede utilizar los siguientes componentes:
Columna 0..N Componente divido en columnas en el que se incluyen el resto de
componentes. El número de columnas se selecciona desde el panel de
propiedades de este componente.
columnas, doble columna - columna simple, columna simple - doble columna,
dos columnas o una columna.
4.3 Audio
Este componente se utiliza para introducir un recurso audio (.MP3). Se recomienda utilizar este tipo de recurso para
aportar ejemplos basados en situaciones cotidianas, conversaciones entre comercial/cliente, narrar una historia, relatar
un caso… Es importante tener en cuenta que todos los recursos audiovisuales generan interés en el usuario.
La propiedad que se puede establecer desde el editor para este componente es:
Audio Recurso en formato .MP3 Vacío Archivo .MP3 reproducido por el componente.

10
Este componente no contiene ningún otro componente.
4.4 Destacado
El componente “Destacado” es muy útil para concretar y resaltar información a lo largo del proyecto. Por ejemplo, sirve
para aportar puntos clave sobre un determinado asunto, ejemplificar una idea o, simplemente, aportar un dato curioso
que motive continuar con la lectura.
Color de fondo Color #FFFFFF Color de fondo del destacado.
Color del borde Color #FFFFFF Color del borde del destacado.
El componente que puede contener es el siguiente:
HTML 1..N Texto mostrado dentro del destacado.
4.5 HTML
El componente HTML permite la introducción directa de texto en formato HTML, en el que se puede incluir:
 Texto con formato
 Imágenes
 Fórmulas matemáticas

11
Para editar fórmulas matemáticas de una manera visual haz clic en en la barra de edición. Puedes copiar o pegar
fórmulas desde Microsoft Word y es compatible con MathML.
El texto en html se incluye en muchos de los componentes mencionados (destacados, secciones, citas…). Además del
propio contenido HTML, este componente no dispone de ninguna otra propiedad que pueda ser modificada desde el
editor.
Por otra parte, este componente no puede incluir a ningún otro componente.
4.6 Imagen
Este componente se utiliza para introducir una imagen en diferentes partes del contenido. Las imágenes aportan
dinamismo al proyecto y dan fuerza a la información que se trata. Sin embargo, no es recomendable abusar de su uso
ya que pueden “desvirtualizar” la información. Cada imagen debería acompañar al texto y tener un objetivo concreto.
Ej.: un esquema que resuma los pasos de un proceso o, simplemente, una imagen de un equipo de trabajo que
acompañe al texto que describe un buen equipo de trabajo.
Imagen Recurso en
formato .GIF,
.PNG, .JPEG.
Vacío Recurso imagen mostrado en el componente.
Texto alternativo Texto Vacío Es el texto que se muestra cuando una imagen no se
visualiza correctamente (debido a una velocidad de
conexión lenta, por ejemplo).
Este componente puede contener el siguiente componente:
Componente Cantidad Obligatorio Descripción
Pie de imagen 1 No Texto que se sitúa en la parte inferior de la imagen sobre un fondo gris. Describe la
imagen.
4.7 Vídeo
Este componente se utiliza para introducir un vídeo. Se recomienda el uso de vídeos con un propósito motivacional o
informativo: describir pasos de un proceso, relatar un caso real para ejemplificar la teoría o exponer un ejemplo.
Estas son sus propiedades:

12
Vídeo Recurso en
formato .MP4
Vacío Vídeo que se reproducirá dentro del componente.
Carátula Recurso en
formato .GIF,
.PNG, .JPEG
Vacío Imagen mostrada antes de reproducir el vídeo.
Subtítulo por defecto Recurso en
formato .SRT
Vacío Archivo que permitirá la reproducción de los subtítulos establecidos
por defecto en el vídeo.
Subtítulo español Recurso en
formato .SRT
Vacío Archivo que permitirá la reproducción de los subtítulos en español en
el vídeo.
Subtítulo inglés Recurso en
formato .SRT
Vacío Archivo que permitirá la reproducción de los subtítulos en inglés en el
vídeo.
Subtítulo gallego Recurso en
formato .SRT
Vacío Archivo que permitirá la reproducción de los subtítulos en gallego en
el vídeo.
Subtítulo catalán Recurso en
formato .SRT
Vacío Archivo que permitirá la reproducción de los subtítulos en catalán en
el vídeo.
Subtítulo portugués Recurso en
formato .SRT
Vacío Archivo que permitirá la reproducción de los subtítulos en portugués
en el vídeo.
Subtítulo italiano Recurso en
formato .SRT
Vacío Archivo que permitirá la reproducción de los subtítulos en italiano en
el vídeo.
Subtítulo holandés Recurso en
formato .SRT
Vacío Archivo que permitirá la reproducción de los subtítulos en holandés en
el vídeo.
Este componente no contiene ningún otro componente.
Para saber cómo codificar vídeos con la herramienta HandBrake, consulta el anexo A.2.
4.8 Cuestionario
Un cuestionario es un componente que se puede incluir dentro de cada una de las secciones. Son un conjunto de
preguntas ordenadas que sirven para obtener información de quien las responde. Dentro de cada cuestionario se
pueden incluir diferentes tipos de preguntas (respuesta simple, relacionar, rellena los huecos…).

13
Nombre Tipo Obligatorio Descripción
Título Texto Sí Título mostrado en la cabecera del cuestionario.
Ponderar
puntuaciones
Listado Sí Si seleccionas “False”, la puntuación total se normaliza a 100 puntos por defecto,
de manera que todas las preguntas tienen el mismo valor. Si seleccionas “True”,
tendrás que fijar los puntos para cada pregunta (ver Manual de autor).
Evaluable Listado Sí En el listado se escoge si el cuestionario será evaluable (True) o no (False).
Puntuación para
aprobar
Numérico Sí Puntuación necesaria para dar el cuestionario por aprobado (también se puede
modificar a nivel de proyecto).
Preguntas
aleatorias
Listado Sí Si seleccionas “True”, las preguntas se mostrarán de forma aleatoria al usuario. Si
seleccionas “False”, aparecerán en el orden en que las hayas dispuesto.
Preguntas a
incluir
Numérico No Número de preguntas que se mostrarán a la hora de responder al cuestionario. Si
se selecciona “True” en la propiedad “Preguntas aleatorias”, se mostrará en
número de preguntas que se indique de manera aleatoria. Si se selecciona “False”,
se mostrará en número de preguntas que se indique pero en el orden en que
están en el proyecto.
Color de fondo Color Sí Color de fondo de la cabecera.
Color de borde Color Sí Color del borde de la pregunta.
Color de fondo
del cuestionario
Color Sí Color de fondo del cuerpo del cuestionario.
Título de la
cabecera visible
Listado Sí Si seleccionas “True”, el usuario verá el título en la cabecera. Si seleccionas
“False”, no lo verá.
Botón de informe
visible
Listado Sí Si seleccionas “True”, el usuario verá el botón para ver el informe del
cuestionario. Si seleccionas “False”, no tendrá opción de verlo.
Paginación visible Listado Sí Si seleccionas “True”, el usuario podrá ver la página del cuestionario en que se
encuentra debajo del título de la cabecera. Si seleccionas “False”, no lo verá.
Puntuación de
pregunta visible
Listado Sí Si seleccionas “True”, el usuario verá la puntuación de cada pregunta debajo del
título de la cabecera o de la paginación. Si seleccionas “False”, no la verá.
Para obtener más información acerca de cómo crear un cuestionario y de los diferentes tipos de preguntas que se
pueden incluir consulta el Manual de autor (apartado 4.7).
4.9 Contenido externo
Este componente permite utilizar contenido HTML creado por otras herramientas de autor (animaciones,
actividades…).

14
Recurso
(HTML5)
Recurso en
formato HTML5
Vacío Fichero comprimido que contiene el recurso en HTML5 a mostrar
Recurso (Flash) Recurso en
formato .SWF
Vacío Película flash a mostrar
Visualización Listado:
HTML5/Flash/
Combinada
Combinada Opción a mostrar por defecto. Si se escoge la combinada se intentará
visualizar primero el Flash, en el caso de no tener el plugin de Flash
disponible, se muestra el recurso HTML5. Si se escoge alguna de las otras
opciones, no hay “fallback” de visualización.
Nombre de
Índice
Texto Index.html Nombre del archivo HTML de inicio del contenido externo. Debe estar
ubicado en la raíz del zip incluido, es decir, sin estar contenido en una
carpeta.
Esta es la visualización del panel de propiedades:
4.10 Carrusel
Este componente se utiliza para introducir varias imágenes que se podrán visualizar individualmente, una tras otra,
haciendo clic sobre las flechas que se muestran a la derecha ( ) y a la izquierda ( ) de la imagen o sobre los puntos al
pie de la misma ( ).
Este componente no tiene propiedades editables, pero contiene el siguiente componente:
Componente Tipo Obligatorio Descripción
Imagen Recurso en formato .GIF,
.PNG, .JPEG
Sí Recurso imagen mostrado en el componente. Puedes añadir tantas como
desees.
4.11 Grupo de acordeón
Este componente nos permite mostrar contenidos en forma de acordeón desplegable. Este acordeón permanece oculto
hasta que hacemos clic sobre un componente HTML. Los componentes que puede incluir el acordeón son: actividad,
audio, cita, HTML, imagen, actividad de texto, vídeo, cuestionario, contenido externo y mapa de clicks.
Plegar
automáticamente
Listado No Cuando hay varios acordeones, si seleccionas “True”, cada vez que
despliegues uno de ellos se plegará el anterior que hayas desplegado. Si
seleccionas “False”, los acordeones que despliegues permanecerán así
hasta que los pliegues.
Color de fondo
de la cabecera
Color No Color de fondo de la cabecera antes de desplegar el acordeón.

15
Este componente contiene el siguiente componente:
Acordeón 1..N Sí Contiene los componentes que se quieren desplegar.
4.12 Grupo de pestañas
Este componente nos permite mostrar contenidos en varias pestañas que se podrán visualizar individualmente
haciendo clic en cada una de ellas. Puedes incluir cualquier tipo de componente de los disponibles en la herramienta.
Color de
cabecera activo
Color No Color de fondo de la cabecera una vez se despliegas el acordeón.
Color de fondo
principal
Color No Color de fondo de la sección que se visualiza al desplegar el acordeón.
Titulo Texto Sí Título mostrado en cada pestaña.
Color de
fondo de la
cabecera
Color No Color de fondo de la cabecera.
Color de
pestaña
activo
Color No Color de fondo de la pestaña seleccionada.
Color de
fondo
principal
Color No Color de fondo de la sección que se visualiza dentro de cada pestaña.

16
Este componente contiene el siguiente componente:
Contenido de
pestaña
1..N Sí Contiene los componentes que se quieren desplegar.

17
5. Recursos
Los tipos de archivo que pueden ser utilizados como recursos dentro de las páginas son:
 Imágenes en formato .PNG
 Imágenes en formato .JPEG
 Imágenes en formato .GIF
 Audios en formato .MP3
 Vídeos en formato .MP4
 Documento en formato .PDF
 Contenido externo comprimido en formato .ZIP (.doc, .ppt, .xcl, .pdf, .xls…)

18
6. Herramientas
Sólo existirá una herramienta dentro de esta plantilla: el buscador.
Se accede desde el menú superior pulsando en el ícono de la lupa, permitiendo buscar dentro de la página actual. Los
resultados de la búsqueda se deben mostrar resaltados en la página (en amarillo por ejemplo).
El comportamiento de las herramientas es exclusivo, es decir, si se abre una herramienta para su uso (en este caso el
buscador), el resto de elementos que estén desplegados en pantalla (por ejemplo el menú principal en aquellas vistas
donde esté oculto por defecto) se cerrarán para mostrar la herramienta.

19
A. Anexos
A.1. Tamaños de imágenes y contenidos externos
Todos los elementos multimedia de adaptan al tamaño de su contenedor.
A.2. Codificación de vídeos con HandBrake
HandBrake es una herramienta para la conversión de vídeos desde casi cualquier formato a una selección de codecs
modernos y ampliamente compatibles.
Las razones fundamentales por las que usar esta herramienta son:
 Convierte vídeo desde casi cualquier formato
 Libre y de código abierto
 Multiplataforma (Windows, Mac y Linux)
Una vez instalado HandBrake y dependiendo de los ajustes de compresión, los vídeos resultantes pueden ser
reproducidos en ordenadores de escritorio y dispositivos móviles (iPhone, iPod Touch, iPad, Smartphones, Tablets
Android, etc.).
A.2.1. Proceso de codificación
En este apartado se describen los pasos a seguir para realizar la codificación de vídeo con la herramienta HandBrake:
1. Abre HandBrake, haz clic en “Source/Open File” y selecciona el archivo que quieres convertir.

20
2. Después de seleccionar el archivo, aparecerá información a la derecha de “Source”.
3. Selecciona la pestaña “Picture” para configurar el tamaño del vídeo.
El tamaño recomendado para vídeos que se van a visualizar en dispositivos móviles es 640x360.
Para ello debes configurar los siguientes parámetros tal y como se muestra en la imagen:
 Cropping: Automatic
 Anamorphic: None
 Width: 640
 Keep Aspect Ratio: selecciona este parámetro para que se ajuste automáticamente el alto del vídeo al
ancho indicado
4. Selecciona la ruta destino así como el nombre del archivo haciendo clic en “Browse”.

21
Una característica a tener en cuenta es el formato de salida del vídeo que debe ser mp4. En caso de que
HandBrake lo convierta a otro formato se puede forzar cambiando la extensión del archivo de salida.
5. Selecciona la pestaña “Video” y configura la conversión de vídeo como se muestra en la imagen, prestando
especial atención a los siguientes parámetros:
a. Web optimized: este parámetro debe estar seleccionado.
b. Vídeo Codec: selecciona códec H.264 (x264). Esto da mejor calidad y menor tamaño de archivo que la
codificación MPEG-4 y VP3. Además, la mayoría de dispositivos soportan este formato, por lo que se
está convirtiendo en un estándar.
c. H.264 Profile: selecciona perfil Baseline.
d. H.264 Level: selecciona nivel 3.1.

22
6. Haz clic en “Start” para comenzar con el proceso de compresión
Una vez finalizado el proceso, ya tienes el vídeo listo con las características adecuadas para ser visualizado
correctamente en dispositivos móviles y en escritorio.
Ahora sólo tienes que añadir el vídeo a la zona de recursos y utilizarlo dentro de tu proyecto.

Netex learningMaker | Basic Template v1.0 [Es]

Más contenido relacionado

La actualidad más candente

Destacado

Similar a Netex learningMaker | Basic Template v1.0 [Es]

Más de Netex Learning

Último

Netex learningMaker | Basic Template v1.0 [Es]