Netex learningMaker | Basic Template v1.0 [Es]

Plantilla Basic Versión 1.0

Í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:

Nombre Tipo Valor por defecto Descripción Título Texto Page Section Título de la sección.

Dentro se puede utilizar los siguientes componentes:











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.










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.


Nombre Tipo Valor por defecto Descripción 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.


Nombre Tipo Valor por defecto Descripción 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

Nombre Tipo Valor por defecto Descripción 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.


Nombre Tipo Obligatorio Descripción

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:

Componente Cantidad Obligatorio Descripción 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.

Nombre Tipo Obligatorio Descripció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:

Componente Cantidad Obligatorio Descripción 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]

Business

Transcript of Netex learningMaker | Basic Template v1.0 [Es]