Netex learningMaker | Recomendaciones v1.0 [ES]

Recomendaciones para recursos multimedia
Versión 1.0
Revisión 4

2
Índice
1. Introducción.......................................................................................................................................3
2. Imágenes............................................................................................................................................3
2.1 Formatos soportados ................................................................................................................................................. 3
2.2 Configuraciones recomendadas................................................................................................................................. 4
2.3 Programas recomendados.......................................................................................................................................... 4
3. Vídeos.................................................................................................................................................4
4. Audios ................................................................................................................................................5
5. Documentos.......................................................................................................................................6
6. Animaciones e interactivos................................................................................................................6
7. Fuentes...............................................................................................................................................7
7.1 Uso de combinaciones básicas ................................................................................................................................... 7
7.2 Uso de combinaciones seguras .................................................................................................................................. 8
7.3 Uso de combinaciones agresivas................................................................................................................................ 8
7.4 Uso de fuentes incrustadas ........................................................................................................................................ 9
7.5 Recomendaciones ...................................................................................................................................................... 9

3
1. Introducción
A lo largo de este documento se incluyen un conjunto de recomendaciones sobre el uso de elementos multimedia
dentro de los proyectos creados con Netex learningMaker, tales como imágenes, audios, vídeos, documentos,
animaciones, actividades interactivas o fuentes.
Normalmente estos recursos son producidos por herramientas externas a Netex learningMaker, por lo que es
importante tener en cuenta estas recomendaciones para que la calidad de los contenidos que vayamos a producir no se
vea resentida por un mal uso de otro tipo de herramientas a la hora de producir los recursos que vamos a incluir dentro
de nuestros proyectos. Por ese motivo, no solo hablamos de recomendaciones en lo que respecta a formatos y
configuraciones, también recomendamos herramientas que faciliten la creación de una forma adecuada.
2. Imágenes
Las imágenes pueden ser mostradas dentro de nuestros proyectos de diferentes formas, dependiendo de la plantilla y
el componente que vayamos a usar para incluirlas.
Habrá casos en los que las imágenes tendrán que tener un alto y/o un ancho fijo, y otros en los que tendremos total
libertad en su tamaño. Todos estos detalles los puedes consultar en el manual de usuario de la/s plantilla/s que vayáis a
utilizar, dentro del Anexo correspondiente a los tamaños de las imágenes, donde encontraréis una imagen similar a
esta:
2.1 Formatos soportados
Los formatos de imágenes soportados son:
 JPEG (recomendado para imágenes de tipo fotográfico)
 GIF (recomendado para imágenes con bloques de colores planos, tales como iconos o cliparts)
 PNG (recomendado para imágenes con efectos como brillos y sombras, que también requieran transparencia)

4
2.2 Configuraciones recomendadas
Sea cual sea el formato y la configuración que vayamos a aplicar a nuestras imágenes, podemos usar la siguiente guía
para comprobar que el peso de nuestra imagen es el óptimo:
 Las imágenes de fondo no deberían de superar los 10 KB.
 Las imágenes que usemos para encabezar alguna página, sección o similar deberían de rondar los 60 KB.
 Las imágenes que se correspondan con fotografías u otros elementos de importancia dentro de nuestro
proyecto no deberían de superar los 100 KB.
En función del formato de imagen utilizado, las configuraciones recomendadas son diferentes. Es importante destacar
que estas recomendaciones son genéricas, ya que pueden variar en función de las características particulares de cada
imagen que vayamos a utilizar:
 Para imágenes en formato JPEG:
Propiedad Valor recomendado
Calidad Alta (70%)
Altura La especificada en el componente donde se vaya a utilizar, en caso de que exista.
Anchura La especificada en el componente donde se vaya a utilizar, en caso de que exista.
Resolución 72 PPI
 Para imágenes en formato GIF:
Colores 256 o menos, en función del número de colores que contenga la imagen
Paleta Web
 Para imágenes en formato PNG:
Profundidad 24 bits
Resolución 72 PPI
2.3 Programas recomendados
Recomendamos el uso de Adobe PhotoShop y Adobe Illustrator para la creación, diseño y manipulación de imágenes.
En caso de que nuestra imágenes ya hayan sido creadas y solo necesitemos transformarlas siguiendo las
recomendaciones de este manual, recomendamos el uso de la herramienta online gratuita Smush.it de Yahoo!
3. Vídeos
Los vídeos pueden ser colocados en nuestros proyectos de diferentes maneras; ya sea dentro del cuerpo de una página,
en una ventana emergente o dentro de una galería multimedia. En función de la plantilla que vayamos a utilizar en
nuestro proyecto dispondremos de diferentes posibilidades.
En cualquier caso, a diferencia de las imágenes, los formatos y configuraciones de los vídeos son independientes del
sitio en el que los vayamos a usar dentro de nuestro proyecto.
El único formato de vídeo soportado es MP4, ya que es el único que nos ofrece compatibilidad con todos los
dispositivos y navegadores del mercado.

5
El peso recomendado de un vídeo depende de su duración y de sus fotogramas. Cuanto más dure el vídeo, mayor será
su peso; y aquellos vídeos que tengan muchas transiciones y sean muy dinámicos tendrán mayor peso que aquellos que
sean más estáticos.
En cualquier caso, podemos tomar como regla general que cada minuto de vídeo no debería de superar los 8 MB. Es
decir, si tenemos un vídeo de 4 minutos, el peso no debería superar los 32 MB.
Para conseguir esto, recomendamos los siguientes ajustes de codificación:
Resolución 640x360
Codec H.264 (x264)
H.264 Profile Baseline
H.264 Level 3.1
Bitrate Video 1 Mb/s
Bitrate Audio Mono (si solo hay una voz) / Stereo (si hay música y/o varias voces)
Recomendamos el uso de Adobe Premiere y Adobe AfterEffects para la creación, diseño y manipulación de vídeos.
En caso de que el vídeo fuente ya lo tengamos disponible y queramos simplemente transformarlo a alguno de los
formatos soportados en learningMaker, recomendamos el uso de la herramienta gratuita de código abierto Handbrake.
4. Audios
Los audios pueden ser ubicados en nuestros proyectos en diferentes lugares; ya sea dentro del cuerpo de una página,
en una ventana emergente o dentro de una galería multimedia. En función de la plantilla que vayamos a utilizar en
nuestro proyecto dispondremos de diferentes posibilidades.
La configuración y recomendaciones que damos a continuación son de aplicación general para cualquier audio que
usemos en cualquier proyecto.
El único formato de audio soportado es MP3, ya que es el que mejor compatibilidad nos ofrece entre diferentes
dispositivos y navegadores del mercado.
El peso de un audio depende de la complejidad sonora de la grabación que vayamos a utilizar y de su duración. A mayor
duración, mayor peso, y cuanto más espectro sonoro tenga que cubrir su peso también será mayor.
A pesar de que no existe una regla maestra para saber si el peso de nuestros audios es el correcto, se recomienda que
cada minuto de audio no supere 1 MB. Es decir, si tenemos un audio de 3 minutos, el peso debería de rondar los 3 MB.
Bitrate 128
Codec MP3
Codec Profile VBR (Variable Bit Rate)
Encoding lossy
Channels 2 (Stereo) si hay música o varias voces / 1 (Mono) si solo hay una voz
Sample Rate 44100 khz
Bit Float 16-bit

6
Recomendamos el uso de Adobe Audition para la creación y manipulación de audios.
5. Documentos
Los documentos son recursos que se pueden introducir dentro de nuestros proyectos para que el alumno los pueda
descargar o visualizar en línea, sirviendo de apoyo o de material adicional.
Por ese motivo, normalmente los enlazaremos con algún componente de nuestro proyecto, ya sea a través de un
enlace en un texto o imagen; o a través de un widget. Dependiendo de la plantilla que utilicemos tendremos más o
menos opciones para hacerlo.
En cualquier caso, las recomendaciones que se describen a continuación se aplican a cualquier documento que
vayamos a incluir en nuestro proyecto.
En general se soporta cualquier tipo de fichero, pero se recomienda el uso de documentos en formato PDF, ya que es el
único que puede ser visualizado desde cualquier dispositivo y navegador sin necesidad de obligar a que el usuario tenga
un visor específico instalado.
El peso de un documento PDF depende del número de páginas y del tipo de información que vaya a contener. Cuantas
más páginas tenga y más imágenes contenga, más pesado será.
Un buen criterio para saber si el peso de nuestro PDF es correcto es comprobar que cada página de nuestro documento
pesa alrededor de 50KB. Es decir, si nuestro documento tiene 10 páginas, su tamaño debería de rondar los 500 KB.
Resolución 72 PPI
Recomendamos el uso de Adobe InDesign para la creación, diseño y manipulación de documentos PDF.
6. Animaciones e interactivos
Las animaciones e interactivos son recursos que pueden ser incluidos en nuestros proyectos a través de los
componentes “Recurso externo” e “Iframe”.
Normalmente se utilizan para incluir elementos creados por herramientas externas que dotan de interactividad y
animación a nuestro contenido, normalmente actividades.
Es importante remarcar que estos recursos externos tienen que estar desarrollados en formatos que sean compatibles
con los dispositivos y navegadores de nuestros usuarios finales. No solo a nivel de tecnología, sino a nivel de las
resoluciones de pantalla.
La herramienta soporta la inclusión de recursos externos en los siguientes formatos:
 SWF (Flash)
 HTML

7
Dado que el soporte de recursos Flash es inexistente o limitado en muchos dispositivos (iPhone, iPad), se recomienda el
uso de recursos externos creados en formato HTML, en concreto en HTML5 y con capacidades de “Responsive Web
Design”; es decir, que se adapte automáticamente al tamaño del dispositivo del usuario.
Para aquellos casos donde resulte complejo conseguir la funcionalidad deseada con HTML5, se recomienda la creación
de dos versiones del recurso; una en Flash con toda la funcionalidad y otra en HTML5 con funcionalidad reducida. Los
componentes de Netex learningMaker permiten incluir ambos recursos en un componente y que nuestro proyecto
muestre una versión del recurso u otra en función de las capacidades de nuestro dispositivo y navegador.
Es imposible definir una regla que nos marque el peso de una animación o interactivo, ya que el contenido puede ser
muy variado y diferente. Una buena práctica consiste en incluir recursos externos con un peso no superior a los 10 MB,
ya que pueden provocar la generación de proyectos con un peso excesivo y que la experiencia de usuario se vea
resentida por los tiempos de carga necesarios.
Para la generación de animaciones e interactivos en HTML5, recomendamos el uso de Adobe Edge, que nos permitirá
además que nuestras animaciones e interactivos se adapten de forma automática a los diferentes dispositivos. Además,
Adobe Edge nos permite publicar los recursos tanto en HTML5 como en Flash.
Si queremos generar únicamente recursos en Flash, recomendamos el uso directo de Adobe Flash Professional.
7. Fuentes
Dependiendo de la plantilla que vayamos a utilizar en el proyecto, tenemos diferentes alternativas para las fuentes:
 Uso de combinaciones básicas (uso de fuentes serif, sans serif y monospaced, que son prácticamente estándar
en cualquier navegador y sistema operativo)
 Uso de combinaciones seguras (las que normalmente se utilizan en páginas o aplicaciones para la web,
incluyen fuentes con visualizaciones similares para todos los navegadores y sistemas operativos)
 Uso de combinaciones agresivas (incluyen fuentes a las combinaciones seguras que no son soportadas por
todos los navegadores y sistemas operativos, pero sí por los más importantes)
 Uso de fuentes incrustadas (donde se puede usar cualquier fuente que queráis, pero en dispositivos de poca
capacidad habrá problemas de rendimiento y un aumento considerable del peso de los contenidos)
Las plantillas incluidas por defecto en la herramienta utilizan siempre “combinaciones seguras”; pero si eres un cliente
con plantillas hechas a medida es muy probable que estés utilizando “combinaciones agresivas” o “fuentes
incrustadas”.
Es importante tener en cuenta que cada navegador y sistema operativo utiliza su propia forma de renderizar las
fuentes, con lo cual es prácticamente imposible conseguir que dos cosas se vean exactamente iguales en diferentes
navegadores.
7.1 Uso de combinaciones básicas
Existen tres familias de fuentes básicas en cualquier navegador y sistema operativo:
 SANS-SERIF, tipografía sin remate (serifa), también llamada de palo seco o moderna. Ej: Arial, Helvética o
Verdana.
 SERIF, tipografía con remate (serifa) también llamada romanas. Ej: Georgia o Times New Roman.
 MONOSPACE, tipografía en las que todos los caracteres tienen el mismo ancho. Suelen ser muy limpias, y
amplias en sus caracteres. Pueden ser con remate o sin remate, pero no resultan muy útiles para trabajar con
párrafos largos. Ej: Courier o Courier new.
El uso de combinaciones clásicas de fuentes se materializa con la definición de una lista de fuentes basadas en estas
familias. En concreto estamos hablando de las siguientes combinaciones:

8
 Pila de palo seco (sans serif) «ancha»: Verdana, Geneva, sans-serif.
 Pila de palo seco (sans serif) «estrecha»: Tahoma, Arial, Helvetica, sans-serif.
 Pila con remates (serif) «ancha»: Georgia, Utopia, Palatino, 'Palatino Linotype', serif.
 Pila con remates (serif) «estrecha»: 'Times New Roman', Times, serif.
 Pila monoespaciada: 'Courier New', Courier, monospace.
Como se puede observar en las combinaciones, la última fuente reserva se define como la fuente base de la familia; la
cual cuenta siempre con una fuente equivalente en cualquier sistema operativo y navegador ya que todos ellos usan
alguna de las fuentes de estas familias como la “implementación por defecto” de la misma.
7.2 Uso de combinaciones seguras
Si las combinaciones básicas nos resultan insuficientes o no suficientemente atractivas, podemos complementarlas con
alguna fuente adicional “segura”.
Una fuente se dice que es “segura” cuando está disponible en casi la totalidad de los sistemas operativos y navegadores
del mercado. La industria considera como seguras las siguientes fuentes:
 Arial/Helvetica
 Courier/Courier New
 Georgia
 Times/Times New Roman
 Trebuchet MS
 Verdana
Teniendo en cuanto esto, las “combinaciones seguras” más usadas en la web son las siguientes:
 Pila de palo seco seguro: Arial, Helvética, sans-serif; Tahoma, Geneva, sans-serif; "Trebuchet MS", Helvetica,
sans-serif; Verdana, Geneva, sans-serif.
 Pila con remates segura: "Palatino Linotype", "Book Antiqua", Palatino, serif.
 Pila monoespaciada segura: "Lucida Console", Monaco, monospace.
7.3 Uso de combinaciones agresivas
Hoy en día hay mucha gente que utiliza “stocks” menos tradicionales e incluye en las combinaciones nombres de
fuentes que no se consideran seguras en el sentido más universal, pero que normalmente están instaladas por defecto
en la mayoría de los navegadores y sistemas operativos.
En estos casos, el orden de la combinación es el siguiente: fuente exacta, alternativa más próxima, alternativa
proporcionada por el sistema operativo, fuente segura, nombre de la familia.
Teniendo esto en cuenta, las combinaciones más utilizadas son:
 Con remate (serif) basadas en Times New Roman: Cambria, "Hoefler Text", Utopia, "Liberation Serif",
"Nimbus Roman No9 L Regular", Times, "Times New Roman", serif;
 Con remate (serif) basadas en Georgia: Constantia, "Lucida Bright", Lucidabright, "Lucida Serif", Lucida,
"DejaVu Serif", "Bitstream Vera Serif", "Liberation Serif", Georgia, serif;
 Con remate (serif) basadas en Garamond: "Palatino Linotype", Palatino, Palladio, "URW Palladio L", "Book
Antiqua", Baskerville, "Bookman Old Style", "Bitstream Charter", "Nimbus Roman No9 L", Garamond, "Apple
Garamond", "ITC Garamond Narrow", "New Century Schoolbook", "Century Schoolbook", "Century Schoolbook
L", Georgia, serif;
 Sin remate (sans serif) basadas en Helvetica/Arial: Frutiger, "Frutiger Linotype", Univers, Calibri, "Gill Sans",
"Gill Sans MT", "Myriad Pro", Myriad, "DejaVu Sans Condensed", "Liberation Sans", "Nimbus Sans L", Tahoma,
Geneva, "Helvetica Neue", Helvetica, Arial, sans-serif;
 Sin remate (sans serif) basadas en Verdana: Corbel, "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans",
"DejaVu Sans", "Bitstream Vera Sans", "Liberation Sans", Verdana, "Verdana Ref", sans-serif;
 Sin remate (sans serif) basadas en Trebuchet: "Segoe UI", Candara, "Bitstream Vera Sans", "DejaVu Sans",
"Bitstream Vera Sans", "Trebuchet MS", Verdana, "Verdana Ref", sans-serif;

9
 Sin remate (sans serif) basadas en Impact: Impact, Haettenschweiler, "Franklin Gothic Bold", Charcoal,
"Helvetica Inserat", "Bitstream Vera Sans Bold", "Arial Black", sans-serif;
 Monoespaciadas: Consolas, "Andale Mono WT", "Andale Mono", "Lucida Console", "Lucida Sans Typewriter",
"DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", Monaco, "Courier
New", Courier, monospace.
7.4 Uso de fuentes incrustadas
Finalmente está la opción de incrustar las fuentes directamente en la plantilla utilizando la propiedad @font-face. Con
esta alternativa es posible usar cualquier fuente que queramos y se garantiza que esta fuente será la mostrada en
cualquier situación.
Sin embargo, el uso de fuentes incrustadas afecta gravemente al rendimiento de nuestros contenidos y al peso de los
mismos; ya que requiere que la fuente sea almacenada por completo dentro del contenido y que el navegador la
descargue y la renderice en cada uno de los accesos al mismo.
Además, en el caso de usar fuentes propietarias será necesario disponer de las licencias que permitan su uso y
distribución.
7.5 Recomendaciones
Dependiendo de la plantilla que vayamos a utilizar en nuestro proyecto tendremos diferentes posibilidades. Pero en
general, recomendamos el uso de combinaciones básicas o seguras, evitando el uso de fuentes incrustadas lo máximo
posible.

Netex learningMaker | Recomendaciones v1.0 [ES]

Recommended

Recommended

More Related Content

Viewers also liked

Viewers also liked (20)

Similar to Netex learningMaker | Recomendaciones v1.0 [ES]

Similar to Netex learningMaker | Recomendaciones v1.0 [ES] (20)

More from Netex Learning

More from Netex Learning (20)

Netex learningMaker | Recomendaciones v1.0 [ES]