Netex learningMaker | Recomendaciones v1.0 [Es]

9
Recomendaciones para recursos multimedia Versión 1.0 Revisión 4
  • date post

    14-Sep-2014
  • Category

    Business

  • view

    108
  • download

    1

description

Netex learningMaker | Recomendaciones para usos multimedia v1.0

Transcript of Netex learningMaker | Recomendaciones v1.0 [Es]

Page 1: Netex learningMaker | Recomendaciones v1.0 [Es]

Recomendaciones para recursos multimedia Versión 1.0

Revisión 4

Page 2: Netex learningMaker | Recomendaciones v1.0 [Es]

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

3.1 Formatos soportados ................................................................................................................................................. 4

3.2 Configuraciones recomendadas ................................................................................................................................. 5

3.3 Programas recomendados.......................................................................................................................................... 5

4. Audios ................................................................................................................................................ 5

4.1 Formatos soportados ................................................................................................................................................. 5

4.2 Configuraciones recomendadas ................................................................................................................................. 5

4.3 Programas recomendados.......................................................................................................................................... 6

5. Documentos ....................................................................................................................................... 6

5.1 Formatos soportados ................................................................................................................................................. 6

5.2 Configuraciones recomendadas ................................................................................................................................. 6

5.3 Programas recomendados.......................................................................................................................................... 6

6. Animaciones e interactivos ................................................................................................................ 6

6.1 Formatos soportados ................................................................................................................................................. 6

6.2 Configuraciones recomendadas ................................................................................................................................. 7

6.3 Programas recomendados.......................................................................................................................................... 7

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

Page 3: Netex learningMaker | Recomendaciones v1.0 [Es]

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)

Page 4: Netex learningMaker | Recomendaciones v1.0 [Es]

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:

Propiedad Valor recomendado

Colores 256 o menos, en función del número de colores que contenga la imagen

Paleta Web

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.

Para imágenes en formato PNG:

Propiedad Valor recomendado

Profundidad 24 bits

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

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.

3.1 Formatos soportados

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.

Page 5: Netex learningMaker | Recomendaciones v1.0 [Es]

5

3.2 Configuraciones recomendadas

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:

Propiedad Valor recomendado

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)

3.3 Programas recomendados

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.

4.1 Formatos soportados

El único formato de audio soportado es MP3, ya que es el que mejor compatibilidad nos ofrece entre diferentes dispositivos y navegadores del mercado.

4.2 Configuraciones recomendadas

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.

Propiedad Valor recomendado

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

Page 6: Netex learningMaker | Recomendaciones v1.0 [Es]

6

4.3 Programas recomendados

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.

5.1 Formatos soportados

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.

5.2 Configuraciones recomendadas

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.

Propiedad Valor recomendado

Resolución 72 PPI

5.3 Programas recomendados

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.

6.1 Formatos soportados

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

Page 7: Netex learningMaker | Recomendaciones v1.0 [Es]

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.

6.2 Configuraciones recomendadas

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.

6.3 Programas recomendados

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:

Page 8: Netex learningMaker | Recomendaciones v1.0 [Es]

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;

Page 9: Netex learningMaker | Recomendaciones v1.0 [Es]

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.