Destacada

Diseño visual del blog

El uso de las imágenes del blog

A continuación se hará una descripción de las imágenes utilizadas en el blog y el distinto tratamiento que se ha hecho con ellas según cada caso.

Imágenes de portadas

Imagen de Wallpaperflare
Imagen de Pexels

La imágenes de las cabeceras utilizan el formato de compresión de imagen JPEG . Por lo que, las imágenes han sufrido pérdidas de datos pero que son irrelevantes y no modifican a simple vista la estética de la imagen. Por otro lado, tienen unas resolución bastante alta al tratarse de unas imágenes que van a estar en portada y tienen que verse lo más nítidas y con calidad posible. La compresión realizada sirve para reducir el peso de las imágenes, ya que en un entorno Web, los datos tienen que cargar lo más pronto posible y cuanto menos información contengan, más rápido llegarán a la pantalla del usuario. Por lo que la ficha técnica que tenemos de las imágenes es la siguiente:

  • Formato JPEG
  • Compresión con pérdidas
  • Una resolución de 2560 x 1440
  • Peso de 382Kb y 0,99Mb

Exportación de una imagen

Para la conversión de las imágenes se ha utilizado el programa Photoshop. Se ha manipulado el tamaño de cada imagen para obtener una resolución acorde con las dimensiones de una pantalla WQHD (2560×1440). Además, para el muestreo se ha optado por la opción Bicúbica para obtener unos tonos más suaves en cada uno de los píxeles. Por último, realizando estas transformaciones, logramos una imagen de portada con buena resolución y con un peso aceptable para la transmisión de datos servidor-cliente.

Bicubic (Bicúbica): Es un método más lento pero más preciso al realizar un promedio “ponderado” de los pixeles adyacentes. El resultado es una gradación tonal mucho más suave que con los métodos anteriores. Es el método más usado en fotografí­a y artes gráficas.

por xpert2 en http://xpert.co/

Imagen entradas recientes

En este caso, se ha creado un título en Photoshop para las entradas del blog, por lo que no es una imagen que se ha debido de “tratar” a partir de una original. Para esta imagen se ha usado el formato sin pérdida PNG, ya que, es capaz de definir niveles de transparencia a diferencia del JPEG usado anteriormente. Por lo que, esta imagen se puede adaptar a cualquier tipo de fondos. Al tratarse de una imagen con tan solo caracteres y con tan solo dos canales de color su tamaño es considerablemente pequeño. Por no mencionar, que el formato de imagen permite mostrar la imagen de forma gradual por su función de entrelazado.

  • Formato PNG
  • Comprensión sin pérdida
  • Una resolución 518×64
  • Peso de 5,90Kb

El formato PNG permite almacenar imágenes en blanco y negro (una profundidad de color de 16 bits por píxel) y en color real (una profundidad de color de 48 bits por píxel), así como también imágenes indexadas, utilizando una paleta de 256 colores. Además, soporta la transparencia de canal alfa, es decir, la posibilidad de definir 256 niveles de transparencia, mientras que el formato GIF permite que se defina como transparente solo un color de la paleta. También posee una función de entrelazado que permite mostrar la imagen de forma gradual.

por Carlos Villagómez en https://es.ccm.net/

Imágenes de Galería

Galería de Imágenes

Estas imágenes han sido tomadas desde un teléfono móvil. Cuando se genera una foto con la cámara del teléfono, según las opciones que se tengan configuradas (como velocidad de obturación, apertura, ISO, distancia focal, etc…), se genera una imagen con un tamaño, resolución y píxeles determinados. En este caso, las proporciones de las imágenes originales eran enormes por lo que se ha convertido de la siguiente manera:

En esta ocasión, se ha reducido la resolución de las imágenes y se ha realizado un muestreo bilineal para suavizar los bordes que contengan. Gracias a estas transformaciones, se ha logrado reducir ficheros de 6Mb a 350Kb (caso del templo dorado Rinkokuji) como en la imagen, por lo que su factor de de compresión sería 17,14. Al tratarse de una galería conviene que las imágenes sean lo más ligeras posibles para que los datos se descarguen enseguida del servidor. Por otro lado, al reducir la resolución y usar el formato JPEG con fotos de poco contraste, éstas, habrán tenido pérdidas de información pero debido a su tamaño final y los datos innecesarios que contenga, no es visible para el ojo humano.

  • Formato JPEG
  • Comprensión con pérdida
  • Resolución 800×600
  • Peso de 349Kb, 726Kb, 360Kb, 504Kb

Por último, esta imagen se ha utilizado para darle un aspecto estético a la zona de la galería y que a su vez tiene mayor resolución para hacerlo más vistoso y detallado, se le ha aplicado un filtro propio de WordPress para bajar su contraste y resaltar el texto. Esta imagen ha recibido un tipo de compresión con pérdidas y una disminución de su resolución (además ha sido recortada para la estética de la página).

Configuración de imagen
  • Formato JPEG
  • Compresión con pérdida
  • Resolución 1600 x 1200
  • Peso 261Kb

Estos son los ajustes que se han utilizado para la compresión de la imagen. Aunque se ha comprobado que al realizar el cambio había algo de ruido en la imagen. Por lo que se ha utilizado un filtro de reducción de ruido en Photoshop. En en muestreo se ha usado la opción Bicúbico.

Configuración de ruido de la Imagen

El ruido de la imagen se muestra como píxeles superfluos aleatorios que no forman parte del detalle de la imagen. El ruido puede aparecer por tomar fotografías con un ajuste ISO alto en una cámara digital, por subexposición o por tomar fotografías en un lugar oscuro con una velocidad de obturador larga. Las cámaras de consumo de gama baja suelen provocar más ruido de imagen que las cámaras de gama alta. Las imágenes escaneadas pueden presentar ruido de imagen a causa del sensor del escáner. A menudo, el motivo granulado de la película aparece en la imagen escaneada.

por Colaborador de Adobe en https://helpx.adobe.com/

Imagen de ejemplo

Fuentes de información utilizadas

Documentación docente

  • Alex Ribelles García. Conceptos básicos de vídeo y audio. Introducción. Publicación,distribución y monetización. Barcelona: Fundació per a la Universitat Oberta de Catalunya.
  • Alex Ribelles García. Digitalización, almacenamiento y transmisión de audio y vídeo. Introducción. Publicación,distribución y monetización. Barcelona: Fundació per a la Universitat Oberta de Catalunya.

Documentación en línea

Streaming YouTube

Streaming de tutorial de como crear una entrada en WordPress

Bibliografía

Documentación docente

  • Raúl Gómez Bizcocho. Introducción a OBS Studio y a streaming en Youtube. Publicación, distribución y monetización. Barcelona: Fundació per a la Universitat Oberta de Catalunya.

Documentación en línea

HBO como plataforma de distribución de contenido audiovisual

Bibliografía

Recursos docentes

  • Toni Comerma Paré. Conceptos generales y visión de los elementos. Publicación, distribución y monetización. Barcelona: Fundació per a la Universitat Oberta de Catalunya.
  • Toni Comerma Paré. Comercialización. Publicación, distribución y monetización. Barcelona: Fundació per a la Universitat Oberta de Catalunya.
  • Raúl Gómez Bizcocho. Nuevos formatos y estrategias de vídeo marketing online. Publicación, distribución y monetización. Barcelona: Fundació per a la Universitat Oberta de Catalunya.

Documentación en línea

Publicación con embebido

Presentación publicitaria de un PDC ficticio llamado Boxed.

Fuentes de información utilizadas

Documentación docente

  • Alex Ribelles García. Digitalización, almacenamiento y transmisión de audio y vídeo. Introducción. Publicación, distribución y monetización. Barcelona: Fundació per a la Universitat Oberta de Catalunya.
  • Alex Ribelles García. Plataformas de publicación y distribución de audio y vídeo. Publicación,distribución y monetización. Barcelona: Fundació per a la Universitat Oberta de Catalunya.

Documentación en línea

Imágenes en línea usadas

Uso del vídeo en el blog

Tipos de formatos y códecs

Debido al plan de pago de WordPress no se pueden subir achivos de vídeo. No obstante se ha investigado que formatos y archivos son aptos para este CMS.

Tipos de resolución

  • Standard Definition (SD) -> 640×480 o 480p
  • High Definition (HD) -> 1920×1080 o 1080p.

Frames Per Second (FPS)

Los FPS que incluye son 24, 25, 29.97 y 30. Por lo que se permiten vídeos en HD que no superen 30.

Tipos de formato que acepta

  • .MP4, .M4V (MPEG-4)
  • .MOV (QuickTime)
  • .WMV (Windows Media Video)
  • .AVI
  • .MPG
  • .OGV (Ogg)
  • .3GP (3GPP)
  • .3G2 (3GPP2)

Recomendaciones de formato de uso

Video

  • Codec: H264
  • Frame Rate: 24, 25 o 30 (Constante)
  • Frame Size / Resolución: 1280×720 (720p)
  • Archivos: Progressive
  • Bitrate: 5000 – 10000 kbps

Audio

  • Codec: AAC-LC
  • Bitrate: 320 kbit/s
  • Sample Rate: 44.100 OR 48,000 kHz

La elección de los formatos que dar dependen del uso que se le dará el vídeo. En el caso de un blog que no tiene tanta capacidad para procesar archivos como 4K es mejor mantenerse en HD con 30FPS. Aunque en este caso el vídeo se ha subido a Youtube, se han realizado las codificaciones destinadas para el blog (si fuera para una plataforma de vídeos se podrían utilizar hasta resoluciones 4K).

Otros formatos que se podrían utilizar son .WMV, .AVI y .MPG. Aunque el recomendado es MP4 ya que es el formato con el que no se tendrán problemas de compatibilidad en ningún sitio web y proporciona una buena proporción calidad peso, AVI por ejemplo da buena calidad pero a cambio de ofrecer un alto peso. En una web como se ha comentado en un post anterior, hay que procurar que los elementos y archivos multimedia utilizados no pesen demasiado para mal influir en la transferencia de datos.

Proceso de conversión

Para el vídeo incrustado arriba de la publicación, se han hecho una serie de cambios. El objetivo es obtener una mayor calidad posible dentro de un número de datos determinados tanto para imágenes como para vídeos.

Página principal de Adobe Media Encoder

Se comienza por importar el vídeo seleccionado. Se selecciona el cuadro de opciones que ofrece el programa.

Se selecciona la velocidad de fotograma de 30 (la que sería permitida en WordPress siendo YouTube se puede subir a más).

Se pone un perfil alto para mejorar la calidad del vídeo.

Establecemos las velocidades que los datos del vídeo se van a procesar.

Utilizamos el códec AAC por defecto que es lo permitido en WordPress.

Al exportar el vídeo cambia el formato a .MP4 (códec H264) con un peso de 24,6Mb, se vuelve más óptimo para un sitio web.


Fuentes de información utilizadas

Documentación docente

  • Alex Ribelles García. Conceptos básicos de vídeo y audio. Introducción. Publicación,distribución y monetización. Barcelona: Fundació per a la Universitat Oberta de Catalunya.
  • Alex Ribelles García. Digitalización, almacenamiento y transmisión de audio y vídeo. Introducción. Publicación,distribución y monetización. Barcelona: Fundació per a la Universitat Oberta de Catalunya.

Documentación en línea

Crea tu sitio web con WordPress.com
Empieza ahora