SlideShare una empresa de Scribd logo
1 de 9
Descargar para leer sin conexión
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
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
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:
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.
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
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
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:
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.

Más contenido relacionado

Destacado

Presentació ptt instituts
Presentació ptt institutsPresentació ptt instituts
Presentació ptt instituts
pqpiptt
 
Presentación_ Visita Omar_ Comunidad Qom
Presentación_ Visita Omar_ Comunidad QomPresentación_ Visita Omar_ Comunidad Qom
Presentación_ Visita Omar_ Comunidad Qom
magpardo
 
Competencia para docentes de escuelas técnicas
Competencia para docentes de escuelas técnicasCompetencia para docentes de escuelas técnicas
Competencia para docentes de escuelas técnicas
Adriana Montiel
 
ADR Presentacion temporada 13-14
ADR Presentacion temporada 13-14ADR Presentacion temporada 13-14
ADR Presentacion temporada 13-14
Jose Diez
 
Qué entendemos por delirio
Qué entendemos por delirioQué entendemos por delirio
Qué entendemos por delirio
Silvia Gracida
 
14 cambios de estado en la materia
14 cambios de estado en la materia14 cambios de estado en la materia
14 cambios de estado en la materia
andrealokita
 
De colonias sin memoria artículo de divulgación (2)
De colonias sin memoria artículo de divulgación (2)De colonias sin memoria artículo de divulgación (2)
De colonias sin memoria artículo de divulgación (2)
walkiride
 

Destacado (20)

Presentació ptt instituts
Presentació ptt institutsPresentació ptt instituts
Presentació ptt instituts
 
Presentación_ Visita Omar_ Comunidad Qom
Presentación_ Visita Omar_ Comunidad QomPresentación_ Visita Omar_ Comunidad Qom
Presentación_ Visita Omar_ Comunidad Qom
 
I Junta de socios Amigos Del Runing/Presentacion temparada 14-15
I Junta de socios Amigos Del Runing/Presentacion temparada 14-15I Junta de socios Amigos Del Runing/Presentacion temparada 14-15
I Junta de socios Amigos Del Runing/Presentacion temparada 14-15
 
Netex learningCentral | What's New v7.1 [ES]
Netex learningCentral | What's New v7.1 [ES]Netex learningCentral | What's New v7.1 [ES]
Netex learningCentral | What's New v7.1 [ES]
 
Competencia para docentes de escuelas técnicas
Competencia para docentes de escuelas técnicasCompetencia para docentes de escuelas técnicas
Competencia para docentes de escuelas técnicas
 
Becquer Fran velez y alvaro bobis
Becquer Fran velez y alvaro bobisBecquer Fran velez y alvaro bobis
Becquer Fran velez y alvaro bobis
 
Salud
SaludSalud
Salud
 
Construcciones antisísmicas, seguridad ante terremotos
Construcciones antisísmicas, seguridad ante terremotosConstrucciones antisísmicas, seguridad ante terremotos
Construcciones antisísmicas, seguridad ante terremotos
 
Clase1
Clase1Clase1
Clase1
 
La socialización. psicologia
La socialización. psicologiaLa socialización. psicologia
La socialización. psicologia
 
ADR Presentacion temporada 13-14
ADR Presentacion temporada 13-14ADR Presentacion temporada 13-14
ADR Presentacion temporada 13-14
 
Qué entendemos por delirio
Qué entendemos por delirioQué entendemos por delirio
Qué entendemos por delirio
 
Netex learningApp | What's New v2.3 [ES]
Netex learningApp | What's New v2.3 [ES]Netex learningApp | What's New v2.3 [ES]
Netex learningApp | What's New v2.3 [ES]
 
Fenelon gimenez gonzalez fenomenos de la_naturaleza-11372
Fenelon gimenez gonzalez fenomenos de la_naturaleza-11372Fenelon gimenez gonzalez fenomenos de la_naturaleza-11372
Fenelon gimenez gonzalez fenomenos de la_naturaleza-11372
 
Leonardo arevalo actividad_3
Leonardo arevalo actividad_3Leonardo arevalo actividad_3
Leonardo arevalo actividad_3
 
Codigo penal ruddy
Codigo penal ruddyCodigo penal ruddy
Codigo penal ruddy
 
Presentación1
Presentación1Presentación1
Presentación1
 
Innovación docInnovación docente y uso de las TIC en la enseñanza universitar...
Innovación docInnovación docente y uso de las TIC en la enseñanza universitar...Innovación docInnovación docente y uso de las TIC en la enseñanza universitar...
Innovación docInnovación docente y uso de las TIC en la enseñanza universitar...
 
14 cambios de estado en la materia
14 cambios de estado en la materia14 cambios de estado en la materia
14 cambios de estado en la materia
 
De colonias sin memoria artículo de divulgación (2)
De colonias sin memoria artículo de divulgación (2)De colonias sin memoria artículo de divulgación (2)
De colonias sin memoria artículo de divulgación (2)
 

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

PresentacióN Jv+++
PresentacióN Jv+++PresentacióN Jv+++
PresentacióN Jv+++
FESABID
 
Digitalización: conceptos, criterios para la determinación de formatos de dig...
Digitalización: conceptos, criterios para la determinación de formatos de dig...Digitalización: conceptos, criterios para la determinación de formatos de dig...
Digitalización: conceptos, criterios para la determinación de formatos de dig...
DIGIBIS
 
PresentacióN Jv+
PresentacióN Jv+PresentacióN Jv+
PresentacióN Jv+
FESABID
 
Curso+photoshop+orientado+a+la+fotografia+digital++%5 bwww.e book-tutoriales....
Curso+photoshop+orientado+a+la+fotografia+digital++%5 bwww.e book-tutoriales....Curso+photoshop+orientado+a+la+fotografia+digital++%5 bwww.e book-tutoriales....
Curso+photoshop+orientado+a+la+fotografia+digital++%5 bwww.e book-tutoriales....
zapfire7
 
Imagen01
Imagen01Imagen01
Imagen01
c09271
 
Curso coordinadores salud. el vídeo como herramienta de trabajo
Curso coordinadores salud. el vídeo como herramienta de trabajoCurso coordinadores salud. el vídeo como herramienta de trabajo
Curso coordinadores salud. el vídeo como herramienta de trabajo
enroks
 

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

T6 andradeerikaticsii
T6 andradeerikaticsiiT6 andradeerikaticsii
T6 andradeerikaticsii
 
Digitalización: conceptos, formatos de digitalización, equipos de captura y s...
Digitalización: conceptos, formatos de digitalización, equipos de captura y s...Digitalización: conceptos, formatos de digitalización, equipos de captura y s...
Digitalización: conceptos, formatos de digitalización, equipos de captura y s...
 
PresentacióN Jv+++
PresentacióN Jv+++PresentacióN Jv+++
PresentacióN Jv+++
 
Digitalización: conceptos, criterios para la determinación de formatos de dig...
Digitalización: conceptos, criterios para la determinación de formatos de dig...Digitalización: conceptos, criterios para la determinación de formatos de dig...
Digitalización: conceptos, criterios para la determinación de formatos de dig...
 
Universidad de las fuerzas armadas
Universidad de las fuerzas armadasUniversidad de las fuerzas armadas
Universidad de las fuerzas armadas
 
PresentacióN Jv+
PresentacióN Jv+PresentacióN Jv+
PresentacióN Jv+
 
2. uso de la imagen
2. uso de la imagen 2. uso de la imagen
2. uso de la imagen
 
Formatos de Imagen
Formatos de ImagenFormatos de Imagen
Formatos de Imagen
 
Taller6mariavegatics2
Taller6mariavegatics2Taller6mariavegatics2
Taller6mariavegatics2
 
Curso+photoshop+orientado+a+la+fotografia+digital++%5 bwww.e book-tutoriales....
Curso+photoshop+orientado+a+la+fotografia+digital++%5 bwww.e book-tutoriales....Curso+photoshop+orientado+a+la+fotografia+digital++%5 bwww.e book-tutoriales....
Curso+photoshop+orientado+a+la+fotografia+digital++%5 bwww.e book-tutoriales....
 
Dpp w1 6-es
Dpp w1 6-esDpp w1 6-es
Dpp w1 6-es
 
Caperucita Roja
Caperucita RojaCaperucita Roja
Caperucita Roja
 
Técnicas de edición de vídeo útil
Técnicas de edición de vídeo útilTécnicas de edición de vídeo útil
Técnicas de edición de vídeo útil
 
estimada Tutora la actividad esta en el siguiente Link https://es.slideshare....
estimada Tutora la actividad esta en el siguiente Link https://es.slideshare....estimada Tutora la actividad esta en el siguiente Link https://es.slideshare....
estimada Tutora la actividad esta en el siguiente Link https://es.slideshare....
 
Imagenes para la web
Imagenes para la webImagenes para la web
Imagenes para la web
 
Imagen01
Imagen01Imagen01
Imagen01
 
Prestaciones características de las videocámaras
Prestaciones características de las videocámarasPrestaciones características de las videocámaras
Prestaciones características de las videocámaras
 
Tipos de archivos graficos
Tipos de archivos graficosTipos de archivos graficos
Tipos de archivos graficos
 
Imagenes en paginas web
Imagenes en paginas webImagenes en paginas web
Imagenes en paginas web
 
Curso coordinadores salud. el vídeo como herramienta de trabajo
Curso coordinadores salud. el vídeo como herramienta de trabajoCurso coordinadores salud. el vídeo como herramienta de trabajo
Curso coordinadores salud. el vídeo como herramienta de trabajo
 

Más de Netex Learning

Más de Netex Learning (20)

Netex contentCloud 2022 en breve [ES]
Netex contentCloud 2022 en breve [ES]Netex contentCloud 2022 en breve [ES]
Netex contentCloud 2022 en breve [ES]
 
Netex learningCloud 2022 | ¡Motiva, inspira, conecta! [ES]
Netex learningCloud 2022 | ¡Motiva, inspira, conecta! [ES]Netex learningCloud 2022 | ¡Motiva, inspira, conecta! [ES]
Netex learningCloud 2022 | ¡Motiva, inspira, conecta! [ES]
 
Netex talentCloud 2022 in short [EN]
Netex talentCloud 2022 in short [EN]Netex talentCloud 2022 in short [EN]
Netex talentCloud 2022 in short [EN]
 
Netex contentCloud 2022 in short [EN]
Netex contentCloud 2022 in short [EN]Netex contentCloud 2022 in short [EN]
Netex contentCloud 2022 in short [EN]
 
Netex learningCloud 2022 | Engage, Empower, Improve! [EN]
Netex learningCloud 2022 | Engage, Empower, Improve! [EN]Netex learningCloud 2022 | Engage, Empower, Improve! [EN]
Netex learningCloud 2022 | Engage, Empower, Improve! [EN]
 
Netex talentCloud 2021 | Tu organización es puro talento [ES]
Netex talentCloud 2021 | Tu organización es puro talento [ES]Netex talentCloud 2021 | Tu organización es puro talento [ES]
Netex talentCloud 2021 | Tu organización es puro talento [ES]
 
Netex talentCloud 2021 | Your organisation is pure talent [EN]
Netex talentCloud 2021 | Your organisation is pure talent [EN]Netex talentCloud 2021 | Your organisation is pure talent [EN]
Netex talentCloud 2021 | Your organisation is pure talent [EN]
 
Netex contentCloud 2020 [EN]
Netex contentCloud 2020 [EN]Netex contentCloud 2020 [EN]
Netex contentCloud 2020 [EN]
 
WEBINAR | smartClassroom - Funcionalidades básicas [ES]
WEBINAR | smartClassroom - Funcionalidades básicas [ES]WEBINAR | smartClassroom - Funcionalidades básicas [ES]
WEBINAR | smartClassroom - Funcionalidades básicas [ES]
 
WEBINAR | La escuela desde casa, es hora de reinventarse [ES]
WEBINAR | La escuela desde casa, es hora de reinventarse [ES]WEBINAR | La escuela desde casa, es hora de reinventarse [ES]
WEBINAR | La escuela desde casa, es hora de reinventarse [ES]
 
WEBINAR | La universidad desde casa, estrategias para el cambio [ES]
WEBINAR | La universidad desde casa, estrategias para el cambio [ES]WEBINAR | La universidad desde casa, estrategias para el cambio [ES]
WEBINAR | La universidad desde casa, estrategias para el cambio [ES]
 
Netex learningCloud 2020 | ¡Motiva, inspira, conecta! [ES]
Netex learningCloud 2020 | ¡Motiva, inspira, conecta! [ES]Netex learningCloud 2020 | ¡Motiva, inspira, conecta! [ES]
Netex learningCloud 2020 | ¡Motiva, inspira, conecta! [ES]
 
Netex contentCloud 2020 en breve [ES]
Netex contentCloud 2020 en breve [ES]Netex contentCloud 2020 en breve [ES]
Netex contentCloud 2020 en breve [ES]
 
Netex learningCloud 2020 | Engage, Empower, Improve! [EN]
Netex learningCloud 2020 | Engage, Empower, Improve! [EN]Netex learningCloud 2020 | Engage, Empower, Improve! [EN]
Netex learningCloud 2020 | Engage, Empower, Improve! [EN]
 
Netex learningCloud 2020 in short [EN]
Netex learningCloud 2020 in short [EN]Netex learningCloud 2020 in short [EN]
Netex learningCloud 2020 in short [EN]
 
Netex contentCloud 2020 in short [EN]
Netex contentCloud 2020 in short [EN]Netex contentCloud 2020 in short [EN]
Netex contentCloud 2020 in short [EN]
 
Netex Seminar DES2019 | Performance-Based Learning Strategies in the 4th Indu...
Netex Seminar DES2019 | Performance-Based Learning Strategies in the 4th Indu...Netex Seminar DES2019 | Performance-Based Learning Strategies in the 4th Indu...
Netex Seminar DES2019 | Performance-Based Learning Strategies in the 4th Indu...
 
WEBINAR | Impulsando el rendimiento empresarial [ES]
WEBINAR | Impulsando el rendimiento empresarial [ES]WEBINAR | Impulsando el rendimiento empresarial [ES]
WEBINAR | Impulsando el rendimiento empresarial [ES]
 
WEBINAR | Driving business performance [EN]
WEBINAR | Driving business performance [EN]WEBINAR | Driving business performance [EN]
WEBINAR | Driving business performance [EN]
 
Netex contentCloud 2019 en breve [ES]
Netex contentCloud 2019 en breve [ES]Netex contentCloud 2019 en breve [ES]
Netex contentCloud 2019 en breve [ES]
 

Netex learningMaker | Recomendaciones v1.0 [ES]

  • 1. Recomendaciones para recursos multimedia Versión 1.0 Revisión 4
  • 2. 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
  • 3. 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. 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.
  • 5. 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
  • 6. 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
  • 7. 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:
  • 8. 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. 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.