Uso de imágenes y vídeos en Totara

Uso de imágenes

En esta sección hemos proporcionado algunos consejos sobre cómo usar imágenes en Totara, así como los tamaños recomendados para diferentes imágenes, y algunos ejemplos de cómo hemos usado imágenes en nuestros sitios de Totara Community y Academy.

Orientación general

A continuación, te ofrecemos una guía general para tener en cuenta al añadir imágenes a tu sitio:

• Usar formatos de archivo optimizados para la web como SVG o JPG/JPEG. Esto ayudará a proporcionar tiempos de carga más rápidos y un uso de datos móviles más eficiente para los usuarios que acceden al sitio en dispositivos móviles. Ten en cuenta que el formato de archivo de imagen SVG no es compatible actualmente con la aplicación Totara Mobile, por lo que debes usar formatos de archivo de imagen alternativos para el contenido que necesita ser compatible con la aplicación.
• Los archivos PNG suelen ser más grandes, pero este formato admite fondos transparentes. Por lo tanto, se recomienda el formato PNG cuando la imagen tiene un fondo transparente.
• Evita añadir texto a las imágenes siempre que sea posible. Si necesitas usar texto en una imagen, intenta usar no más de tres palabras. Considera cuán legible será el texto cuando se reduzca y se muestre en dispositivos más pequeños, como los teléfonos inteligentes.
• Evita colocar información importante (p. ej., texto, logotipos o caras) alrededor de los bordes externos de las imágenes, ya que algunas imágenes no se presentarán en su proporción original y, por lo tanto, se recortará. Te recomendamos que dejes una zona 20 % segura alrededor del borde exterior de las imágenes.
• Evita archivos demasiado grandes y, en su lugar, busca el equilibrio adecuado entre la calidad de la imagen y el tamaño del archivo.
• Asegúrate de que el modo de color de las imágenes esté configurado en RGB (para uso web), no en CMYK (para impresión), independientemente del software utilizado (p. ej., Photoshop, Canvas, Illustrator o Gimp).
• Al tomar imágenes desde otro lugar, generalmente puedes hacer una acción de "guardar como" o "exportar imágenes como", luego seleccionar un tipo de archivo apropiado, como JPG o PNG.
• La resolución de 72 ppp (o ppi) es suficiente para el uso en el sitio web, mientras que se recomiendan 300 ppp para el uso impreso.

Inspirar recursos temáticos

Imagen de la página de inicio de sesión

Imagen predeterminada de la página de inicio de sesión: 1200px x 1000px

Imagen de la página de inicio de sesión recomendada (no SVG): 1200px x 1200px

Se aceptan formatos de archivo JPEG, PNG y SVG, y los archivos PNG son los preferidos para imágenes ilustrativas. Recomendamos mantener el tamaño del archivo lo más pequeño posible (sin sacrificar la calidad), con un mínimo de DPI 150. Asegúrate de que cualquier texto de la imagen tenga suficiente contraste con el fondo para que la imagen sea accesible.

Banner de la página de inicio de sesión heredada

Banner de la página de inicio de sesión por defecto: 1672px x 430px

Banner de la página de inicio de sesión utilizado en la comunidad: 1672px x 215px, archivo JPEG

Curso, programa e imágenes de certificación por defecto

Imagen predeterminada del programa/curso: 960px x 540px

1280px x 720px proporciona mejor calidad, con compatibilidad futura con imágenes con calidad de retina. 960px x 540px es el tamaño mínimo recomendado. A 480 px x 270 px, la calidad de la imagen se degradará en algunos casos.

Las imágenes del curso, del programa y de la certificación serán redimensionadas automáticamente, por lo que si usas una imagen cuadrada, se recortarán vertical u horizontalmente en diferentes páginas.

Ejemplo de imagen del curso:

Imagen del curso en el bloque de aprendizaje actual:

Imágenes de recursos

Imagen de recurso por defecto: 960px x 540px

1280 px x 720 px proporciona una mejor calidad, con compatibilidad futura con imágenes con calidad de retina. 960 px x 540 px es el tamaño mínimo recomendado. A 480 px x 270 px, la calidad de la imagen se degradará en algunos casos.

Coloca el punto de interés de la imagen (p. ej., un ícono, texto, la cara de una persona) en el centro, ya que esta es el área segura que no se recortará. La imagen aparecerá recortada en otros dispositivos (como dispositivos móviles) y pantallas más pequeñas (p. ej., computadoras portátiles), pero el área central seguirá siendo visible. Aquí puedes ver un ejemplo de una imagen de recurso con texto y cómo el texto y el ícono están alineados en el área segura.

Imagen con texto:

Imagen con área segura superpuesta:

Imágenes del espacio de trabajo

Imagen predeterminada del espacio de trabajo: 960px x 960px

1280px x 1280px proporciona mejor calidad, con compatibilidad futura con imágenes con calidad de retina. 960px x 960px es el tamaño mínimo recomendado, con compatibilidad parcial futura con imágenes con calidad de retina. A 480 px x 480 px, la calidad de la imagen se degradará en algunos casos.

Al igual que con las imágenes de recursos, coloque el foco principal del gráfico en el centro, ya que el área segura de la imagen del espacio de trabajo está limitada a un cuadrado en el centro, como se muestra en el ejemplo.

Imagen del espacio de trabajo:

Imagen del espacio de trabajo con área segura superpuesta:

Imagen del espacio de trabajo en contexto:

Logotipos y favicons

Logotipo: se prefiere un logotipo horizontal sin márgenes. Se recomienda un archivo SVG para mantener la mejor calidad de imagen en diferentes tamaños.

Favicon: Este ícono se mostrará junto al nombre del sitio/página en la pestaña del navegador y en los marcadores del navegador. Se recomiendan los archivos ICO, pero los archivos PNG también son compatibles. El tamaño óptimo es 16px x 16px (más común) o 32px x 32px.

Otros activos de la comunidad/academia

Tamaño de la insignia: 426px x 426px, formato PNG (contiene transparencia)

Evita colocar texto en las imágenes de la insignia. Las insignias generalmente se muestran junto al título del curso o programa. La simplicidad es clave, por lo que cuando se diseñan imágenes de insignias, se intenta reducir al mínimo el número de elementos, colores y formas, ya que las insignias pueden mostrarse en algunos lugares en tamaños tan pequeños como 100 px x 100 px.

Bloques de enlaces destacados:  Utilizamos dos dimensiones para los mosaicos en los bloques de enlaces destacados: 

• Forma cuadrada: 500px x 500px
• Paisaje: 500px x 375px

Banners de ancho completo: Los banners de escritorio son 1650px x 188px y los banners móviles son 600px x 177px.

Banner del formulario de comentarios de la comunidad: 1280px x 223px

Íconos del cuestionario de la academia: 115 px x 100 px, PNG con fondos transparentes

En Totara Academy, el texto de la pregunta en las actividades del cuestionario incluye el ícono del cuestionario. Este ícono está alineado a la izquierda en las propiedades de la imagen. 

Usando video

En esta sección, hemos descrito información importante y orientación sobre las mejores prácticas para agregar videos a tu sitio de Totara.

Recomendaciones generales

A continuación, se presenta una guía general para tener en cuenta al añadir videos a tu sitio:

• La mayoría de los videos se graban en al menos 1080p (Full HD) a 24 cuadros por segundo (fps). Consulte la tabla a continuación para obtener más información sobre los tamaños de video comunes.
• La relación de aspecto estándar para los videos es 16:9. El término 'relación de aspecto' se refiere al ancho y la altura de una imagen en relación con la otra, por ejemplo, dividir 1920 por 1080 le da 16/9.
• La relación de aspecto 16:9 también se conoce como “pantalla ancha” y actualmente es la relación de aspecto más utilizada.
• Exportar un video con una duración más corta para probar diferentes códecs y ajustes de compresión.
• Marque los cuadros de diálogo de ajustes de compresión al reproducir/exportar el video. 
• Para video de alta calidad, se recomienda el formato AVI, pero tenga en cuenta que los tamaños de los archivos suelen ser significativamente más grandes con este formato.
• Los archivos MP4 se recomiendan para la transmisión, ya que es el formato más ampliamente compatible (en contraste con los archivos MOV o AVI).
• H.264 no es compatible con la transparencia, pero es una buena opción para maximizar la calidad y mantener un tamaño de archivo pequeño. H.264 también se recomienda para plataformas de video en línea como YouTube y Vimeo.
• Ten en cuenta que QuickTime Player no exporta videos como archivos MP4.
• Los gráficos o elementos visuales importantes no deben aparecer en el área donde aparecen los subtítulos.
• Evita usar más de dos fuentes en la pantalla al mismo tiempo.

En la tabla a continuación, puedes ver detalles sobre las resoluciones de video comúnmente utilizadas.

 Al exportar videos para redes sociales, verifica la relación de aspecto utilizada para la plataforma de redes sociales que deseas usar:

• Panorama - 16:9 - (1280px x 720px) - Facebook o videos de LinkedIn
• Retrato - 9:16 (720px x 1280px) - por ejemplo, historias de Instagram
• Cuadrado - 1:1 (mínimo de 1080 px x 1080 px) - por ejemplo, publicaciones en Instagram (formato cuadrado)

Al crear o exportar un video, debes considerar cómo se verá tu video. Si tu video está diseñado para ser visto en 9:16 (vertical), querrás exportarlo en esa relación de aspecto con la resolución de video mínima para tu plataforma prevista.

La resolución de video para cada plataforma varía, por lo que recomendamos verificar las pautas de la plataforma de redes sociales antes de hacer tu video.

Mejores prácticas para el video

• Cualquier texto que aparezca en los videos debe cumplir con los estándares de contraste de WCAG.
• Evita los efectos intermitentes o estroboscópicos en tus videos.
• Proporcionar subtítulos o transcripciones para videos con audio o información importante incluidos en los elementos visuales.
• Los subtítulos y subtítulos te permiten compartir tus videos con una audiencia más grande, incluidos los usuarios sordos o con dificultades auditivas y los usuarios que hablan otro idioma. Aprende cómo añadir subtítulos y subtítulos a videos de YouTube.
• YouTube bloqueará los videos cargados a YouTube con música con derechos de autor que se utilicen sin permiso. Hay varios sitios en los que puedes encontrar música sin derechos de autor para usar en tus videos.
• Si la imagen en miniatura de un video incrustado no se muestra (ya sea en el contenido o en la imagen de recurso generada por el usuario), verifique que el servidor proxy o el filtro web permita la conexión con la fuente del video, por ejemplo, YouTube.

Recursos adicionales y herramientas útiles

Para la edición de videos, recomendamos usar Adobe Premier Pro o Adobe After Effects. Sin embargo, aquí hay una selección de herramientas gratuitas que pueden resultarte útiles al añadir medios a tu sitio de Totara:

• Adobe Express: Software de video gratuito (con una cuenta de Adobe). Te permite recortar videos a cualquier relación de aspecto o tamaño personalizado de forma gratuita. También puedes recortar tu video a la longitud correcta o silenciar el audio, entre otras características.
• Audacidad: Audacity es una aplicación de grabación y editor de audio digital gratuita y de código abierto.
• Comprobador de accesibilidad de color y contraste: Asegúrate de que los colores seleccionados cumplan con los requisitos de accesibilidad y que los usuarios con discapacidades visuales puedan leerlos fácilmente.
• Compresor de imágenes: Optimiza archivos JPEG, PNG, SVG, GIF y WEBP.

Consulte la guía de W3C sobre cómo hacer que los medios de audio y video sean accesibles para obtener más información.