Los formatos admitidos en la Web UCM son:
JPEG (admitido para toda la Web)PNG y GIF (no admitidos para imágenes de fondo de portada y widget "Noticias y avisos", si admitidos para Portadas de Noticias).JPG. Admitido para toda la Web
El formato JPEG, archivos con extensión .jpg o .jpeg, es uno de los formatos más utilizados en Internet.
Formato adecuado para imágenes realistas de gran tamaño en origen.
Las imágenes JPG pueden mostrar un elevado número de colores (más de 16 millones de colores).
No soporta transparencias.
Formato de compresión con pérdida, es decir, acepta alguna degradación de la imagen en beneficio de una mayor compresión. Esta degradación se produce cada vez que comprimimos la imagen, es acumulativa. Conviene trabajar siempre sobre la imagen original.
PNG. No admitido para imagenes de fondo de portada y widget "Noticias y avisos".
Recomendado para imágenes que contengan áreas de colores planos, icónos, gráficos, imágenes de texto, logotipos...
Soporta transparencias. A diferencia de la transparencia ofrecida por GIF que solo puede tomar dos valores, el canal alfa de PNG permite utilizar mayor profundidad de bits para lograr efectos de semi-transparencia.
Formato de compresión sin pérdida, es decir, permite comprimir la información sin degradarla. La compresión es reversible y podemos recuperar la imagen exacta a la original.
PNG-24 utiliza el mismo número de colores que JPEG preservando un alto grado de resolución.PNG-8 utiliza una paleta de 256 colores (2⁸) a partir de los colores originales de la imagen. Codificando imágenes en este formato podemos obtener archivos muy pequeños con alta resolución. El requisito es que la imagen original tenga, como máximo, 256 tonos o colores, para poder almacenar la imagen sin pérdidas
GIF. No admitido para imagenes de fondo de portada y widget "Noticias y avisos".
Su principal utilidad es el despliegue de imágenes animadas. También es útil para guardar imágenes que tengan grandes bloques de colores planos como ilustraciones simples, logotipos, iconos... con un número de colores limitado.
El formato GIF utiliza una paleta de 256 colores.
Soporta animaciones y transparencias.
La transparencia ofrecida por GIF solo puede tomar 2 valores (completamente transparente o completamente opaco).
Cuando insertamos un GIF animado con el Widget de texto debemos eliminar el parámetro de tamaño (situado al final de la URL) para que se visualice la animación en nuestra página.
El parámetro de tamaño renderiza la imagen generando un tamaño determinado. Este proceso bloquea la visualización de GIF animado de manera que sólo se muestra el primer frame.
Podemos eliminar el final de la URL, desde el signo igual = , y de esta manera mostrar todos los frames de nuestro GIF en la Web.
Por ejemplo, en la URL https://www.ucm.es/salidas-de-campo-virtuales/file/rockgif_test/?ver=n, tendremos que eliminar =n quedando la url así: https://www.ucm.es/salidas-de-campo-virtuales/file/rockgif_test/?ver.
La resolución de una imagen digital es el resultado de multiplicar el ancho (resolución horizontal) por el alto (resolución vertical) en píxeles.
Resolución total = píxeles de ancho x píxeles de alto
La resolución de una imagen indica la cantidad de detalles que puede observarse en esta. A mayor resolución, mayor cantidad de detalles.
Una imagen de 1140 píxeles de ancho ocupa todo el ancho de una página UCM. Cuando insertamos una imagen mayor de 1140 px., esta se adapta al ancho disponible, es decir, se muestra con una resolución horizontal máxima de 1140 píxeles. Poner una imagen de gran tamaño no supone que se muestre en la web con mayor calidad. Podría tener sentido poner imágenes de gran tamaño para, por ejemplo, poder ampliarlas manteniendo la calidad.
La relación entre el ancho y el alto se llama "relación de aspecto" y determina las proporciones de la imagen.
Algunos espacios de la web UCM requieren imágenes con una relación de aspecto y tamaño determinado. Cuando las proporciones de la imagen no se ajustan a las proporciones requeridas, la imagen se muestra recortada o con espacios vacios aldededor.
Los espacios que requieren imágenes con proporciones determinadas son:
798 × 400 píxeles.331 × 200 píxeles.1140 x 400 píxeles.280 píxeles.La profundidad de color o bits por píxel, es la cantidad de colores que puede mostrar una imagen.
Si utilizamos un solo bit para representar cada píxel de color, tenemos 2 valores por píxel, encendido y apagado, es decir, blanco y negro:
Cuando utilizamos 8 bits por píxel podemos representar hasta 256 colores por cada píxel. Los formatos que usan esta profundidad de bits son GIF y PNG8. Se utiliza una paleta de 256 colores creada a partir de los colores originales de la imagen (color indexado). Se corresponde con los estándares de visualización VGA o SVGA:
Con una profundidad de color de 24 bits podemos representar más de 16 millones de colores. Los formatos que usan esta profundidad de bits son JPG y PNG24. Se habla de color verdadero porque es, aproximadamente, el número de colores que el ojo humano puede distinguir:
Cuando se utilizan 32 bits para representar un color se agrega, para cada tono primario, un cuarto canal denominado alfa que representa la transparencia. Este valor se utiliza cuando, por ejemplo, superponemos imágenes:
Cuanto más pequeño es un archivo de imagen, más fluida es la navegación. Se trata de conseguir la máxima calidad posible con el menor tamaño.
El peso o tamaño de un archivo de imagen sin comprimir es el resultado de multiplicar la resolución (ancho por alto en píxeles) por la profundidad de bits:
Tamaño archivo no comprimido = píxeles ancho x píxeles alto x profundidad de bits.
Los formatos de archivos de imagen que usamos en nuestra Web comprimen la información y reducen el tamaño del archivo. Las imagenes pueden degradarse en beneficio de la compresión.
JPG permite ratios altos de compresión manteniendo una buena calidad de imagen. Comprimir la imagen con un ratio inferior al 70% puede producir imágenes de mala calidad.PNG no degrada la imagen, sin embargo, se pueden reducir notablemente el tamaño del archivo dependiendo, en gran medida, de la imagen de entrada.PNG-8 y GIF utilizan una paleta limitada a 256 colores que reduce el tamaño del archivo.PNG comprime mejor que GIF, aunque esto puede depender de cómo estén implementados los métodos de compresión en las aplicaciones de edición de imágenes.Debemos tener en cuenta que elegir una resolución adecuada al lugar de la página donde vamos a situar la imagen (contenedor), así como elegir una profundidad de color adecuada a las características de la imagen, es fundamental para conseguir adecuados tamaños de archivos de imagen.
Hay una serie de reglas para nombrar archivos que nos ayudan a evitar problemas en la edición web:
/ : * ? " < > | ! @ # $ % & . Algunos de estos signos son caracteres reservados para lenguajes, protocolos o estándares.fachada-derecho-1024x798.png (en este caso el nombre nos indica el objeto de la imagen, sus dimensiones y su formato).Estos consejos nos evitarán problemas a la hora de añadir, sustituir y organizar los archivos de nuestra web, así como para utilizar esos archivos en aplicaciones de edición de imágenes.
Podemos usar los siguientes widgets para incorporar imágenes en la Web:
El widget "Galería de imágenes" permite insertar galerías con todas sus imágenes:
Galería apariencia Clásica
Galería apariencia Carrusel
Galería apariencia Lista
Galería apariencia Zoom
Galería apariencia Fila
Galería apariencia Círculos
El widget "Texto" permite insertar en la web cada una de las imágenes incorporadas en las galerías de imágenes del Website.
Podemos incorporar imágenes en las galerías de nuestro website con la aplicación "Galerías de Imágenes" del Escritorio.
El texto alternativo de una imagen cumple varias funciones:
El texto alternativo debe ser preciso y equivalente, breve, no redundante, no usar frases como "imagen de...".
Cuando una imagen contiene sólo texto, el texto que muestra puede usarse normalmente como texto alternativo.
Cuando se carga una imagen en una galería se generan 3 versiones adicionales a la original, cada una se puede usar según los tamaños que se vayan a visualizar en pantalla:
?ver=t?ver=m?ver=nPodemos hacer referencia al tamaño original de la imagen usando una URL acabada en:
?ver sin parámetro de tamaño.
Cuando cambiamos los parámetros de tamaño de una imagen debemos fijarnos en que las dimensiones de la imagen han tomado los valores correspondientes:
t= 100 píxeles de ancho.
m= 300 píxeles de ancho.
n= 850 píxels de ancho.
Para que se actualicen las dimensiones basta con hacer clic fuera del campo enlace. Es decir, primero modificamos la parte final del campo enlace y después clicamos fuera del campo para que se actualicen las dimensiones.
Es importante usar la resolución más próxima al tamaño al que se va a visualizar la imagen en la página, pues conseguiremos un doble beneficio: por un lado, la página se cargará más rápido evitando la descarga de datos innecesarios y, por otro, evitaremos sobrecargar los servidores y la red. Adicionalmente minimizaremos las perdidas de sesión que se sufren en la web cuando se tarda demasiado tiempo en cargar los datos de una página.
Cuando insertamos un GIF animado con el Widget de texto debemos eliminar el parámetro de tamaño (situado al final de la URL) para que se visualice la animación en nuestra página.
El parámetro de tamaño renderiza la imagen generando un tamaño determinado. Este proceso bloquea la visualización de GIF animado de manera que sólo se muestra el primer frame.
Podemos eliminar el final de la URL, desde el signo igual = , y de esta manera mostrar todos los frames de nuestro GIF en la Web.
Por ejemplo, en la URL https://www.ucm.es/salidas-de-campo-virtuales/file/rockgif_test/?ver=n, tendremos que eliminar =n quedando la url así: https://www.ucm.es/salidas-de-campo-virtuales/file/rockgif_test/?ver.
Clicando sobre "Iconos" en la barra de herramientas del widget de texto, podemos añadir iconos de las categorías: Biblioteca, Directorio, Generales, Web y Redes Sociales.
A diferencia de los iconos del widget "Iconos", no contienen título ni URL.
Iconos. Herramienta del widget de texto
Todos los iconos de marcas son marcas registradas de sus respectivos dueños.
El logotipo registrado no podemos utilizarlo (aunque sea sin ánimo de lucro) dado que el registro da derecho a que el titular del logotipo use en exclusiva un logo que esté identificado con unos productos y servicios determinados. Y el titular es el único legitimado. No obstante, la actual legislación en materia de Marcas no permite que su titular prohíba el uso de la marca cuando el tercero la utiliza para indicar el destino de un producto o servicio.
La tabla de caracteres Unicode permite buscar cualquier caracter tipográfico y, pulsando sobre él, vemos el número unicode y el código html correspondiente.
Copiando y pegando el símbolo de la web.
Podemos insertar caracteres especiales disponibles con el widget "Texto" clicando en el símbolo Omega (Ω).
y seleccionando el símbolo deseado:
Tabla de caracteres especiales del widget de texto
En el código HTML inserta un ampersand "&", seguido del símbolo de almohadilla "#", el código decimal del caracter y al final punto y coma.
Inserta:☂
Se mostrará: ☂
∜ β ☆ ☂ ⌚ ⏰ ☮ ∞ ♡ © ♻ ♀ ♂ ☺ ♧ ➳ ☎ ✉ ✏
Algunos símbolos unicode no son admitidos en nuestra Web. Para poder mostrar los caracteres Unicode, se necesita disponer de tipos de letra que los incluyen (tipografía subida al servidor y ruta en hoja de estilos).
Se requieren imágenes en formato JPG.
El ancho requerido de las imágenes se encuentra entre 360 px. y 1140px. Depende de:
Podemos subir varias imágenes con el botón "subir archivos" hasta completar nuestra galería.
Estas imágenes no forman parte de las imágenes de la aplicación "Galería de imágenes" de nuestro website.
Las noticias muestran la imagen marcada como principal como una miniatura en la parte superior derecha (360 px.) y imágenes no marcadas como principales aparecen al pié de la noticia (véase siguiente ilustración).
Las páginas de noticias usan una la plantilla de dos columnas (70%-30%)
La miniatura de la imagen principal encaja en la columna derecha (30%).
Cuando clicamos sobre las imágenes accedemos a una presentación, a modo de diapositivas, de todas las imágenes subidas.
Las "diapositivas" muestran las imágenes en su tamaño original con una resolución máxima de 1140 x 800 píxeles.
El widget "Noticias y avisos", apariencia "clásico" muestra la lista de noticias una debajo de otra.
Se recomienda un tamaño mínimo de 360 px. para la imagen principal. Sin embargo, para que se visualizen a máxima resolución en modo diapositiva (es decir, cuando clicamos sobre las imágenes), en tamaño máximo es de 1140 x 800 píxeles.
La apariencia clásica no admite RSS.
Ejemplo apariencia de lista noticias clásica
El widget "Noticias y avisos", apariencia "carrusel" muestra una sucesión de noticias en un carrusel.
Podemos subir varias imágenes pulsando en el botón "Subir archivos".
Si marcamos una de ellas como "Principal", ésta aparecerá como imagen del carrusel.
280 px.:Según la plantilla seleccionada, podemos encontrar los siguientes anchos disponibles:
1140 px.
555 px.
360 px.750 px.
360 px.
263 px.
La imagen muestra una imagen de carrusel de noticias. Hemos situado el widget en el área 70% de una plantilla 70% - 30%.
En este caso el tamaño requerido de las imágenes es de 750 px. x 280 px. para que encajen correctamente.
Imagen ejemplo noticia apariencia carrusel
Las leyes de la mayoría de las jurisdicciones en todo el mundo confieren automáticamente los derechos de autor y derechos relacionados al creador y al propietario o propietarios (sin necesidad de registro previo).
Ciertos propietarios, mediante el uso de licencias Creative Commons, desean compartir algunos de sus derechos sobre una obra para que el público pueda reutilizarla.
Las licencias Creative Commons están compuestas por cuatro módulos de condiciones, representados por cuatro iconos:
| ICONO | LICENCIA | USOS |
|---|---|---|
 |
Atribución (BY) |
Debemos citar al autor según indique la licencia. |
 |
No Obras Derivadas (ND) |
No podemos modificar la obra. |
 |
Compartir Igual (SA) |
Si modificamos la obra y creamos una obra derivada, tenemos que compartirla bajo el mismo tipo de licencia. |
 |
No Comercial (NC) |
No podemos usar la obra con fines comerciales. |
La combinación de los elementos anteriores permite generar hasta seis tipos de licencias diferentes:
| ICONOS | LICENCIA | USOS |
|---|---|---|
 |
Reconocimiento (CC BY) |
Se permite el uso comercial de la obra y de las posibles obras derivadas. Esta licencia permite a otros distribuir, mezclar, ajustar y construir a partir de su obra, incluso con fines comerciales, siempre que le sea reconocida la autoría de la creación original. |
 |
Reconocimiento-Sin Obra Derivada (CC BY-ND) |
Se permite el uso comercial de la obra pero no la generación de obras derivadas. Esta licencia permite la redistribución, comercial y no comercial, siempre y cuando la obra no se modifique y se transmita en su totalidad, reconociendo su autoría. |
 |
Reconocimiento-Compartir Igual (CC BY-SA) |
Se permite el uso comercial de la obra y de las posibles obras derivadas mediante una licencia igual a la de la obra original. |
 |
Reconocimiento-No Comercial (CC BY-NC) |
Se permite la generación de obras derivadas siempre que no se haga un uso comercial. |
 |
Reconocimiento-No Comercial-Compartir Igual (CC BY-NC-SA) |
No se permite un uso comercial de la obra original ni de las posibles obras derivadas, la distribución de las cuales debe hacerse mediante una licencia igual que la de la obra original. |
 |
Reconocimiento-No Comercial- Sin Obra Derivada (CC BY-NC-ND) |
No se permite un uso comercial de la obra original ni la generación de obras derivadas. Esta licencia es la más restrictiva de las seis licencias principales, sólo permite que otros puedan descargar las obras y compartirlas con otras personas, siempre que se reconozca su autoría, pero no se pueden transformar de ninguna manera ni se pueden utilizar comercialmente. |
 |
CC0 “No hay derechos reservados” (CC 0) |
Obras liberadas de derechos de propiedad intelectual y "marcadas" como pertenecientes al dominio público. |
Si lo desea, puede ampliar la información sobre las licencias Creative Commons en la siguiente biblioguía:
