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 web optimizados 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 qué tan legible será el texto cuando se reduzca y se muestre en dispositivos más pequeños, como teléfonos inteligentes.
• 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.

Recursos temáticos de Ventura

Banners de inicio de sesión

Banner de página de inicio de sesión por defecto: 1672x430 px

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

Imágenes de recursos

Imagen de recurso por defecto: 428x228 px

Coloca el punto de interés de la imagen (p. ej., un ícono, texto, 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 del recurso con texto:

Imagen del recurso con área segura superpuesta:

Imágenes del espacio de trabajo

Imagen predeterminada del espacio de trabajo: 426x477 px

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:

Imagen del espacio de trabajo en el bloque Espacios de trabajo recomendados:

En este bloque, el espacio de trabajo se muestra con un degradado negro en la parte superior y con el número de miembros del espacio de trabajo en la parte inferior.

Curso predeterminado e imágenes del programa

Imagen predeterminada del programa/curso: 373x150 píxeles

Las imágenes del curso se cambiarán de tamaño automáticamente, por lo que si usas una imagen cuadrada, se recortarán vertical u horizontalmente en diferentes páginas. En Totara Community utilizamos un tamaño de imagen mayor (834x334 px) que tiene las mismas proporciones que el tamaño de imagen de curso por defecto de 373x150 px.

Ejemplo de imagen del curso:

Imagen del curso en el bloque de aprendizaje actual:

Imagen del curso en el bloque Cursos recomendados:

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 16x16 px (más común) o 32x32 px.

Otros activos de la comunidad/academia

Tamaño de la insignia: 426x426 px, 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 100x100 píxeles.

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

• Forma cuadrada: 500x500 px
• Paisaje: 500x375 píxeles

Banners de ancho completo: Los banners de escritorio son 1650x188 px y los banners móviles son 600x177 px.

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

Íconos del cuestionario de la academia: 115 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 te 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.
• Marca 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 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 - (1280 x 720 píxeles) - Facebook o videos de LinkedIn
• Retrato - 9:16 (720 x 1280 píxeles) - por ejemplo, historias de Instagram
• Cuadrado - 1:1 (mínimo de 1080 x 1080 píxeles) - 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.
• Proporciona subtítulos o transcripciones de videos con audio o información importante incluida 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 protegida por 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.

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.