Apariencia de aplicaciones y portlets
La apariencia de las aplicaciones puede ser fácilmente adaptada y rediseñada. Para ello, los administradores tienen total libertad para modificar las propiedades de las ventanas o contenedores en los que se muestran las distintas herramientas y los contenidos en EducaMadrid.
Eligiendo la opción "Apariencia" disponible en todas y cada una de las aplicaciones, podemos personalizar algunos aspectos como el título, el estilo, tamaño y color de la fuente, el ancho y el color de los bordes, etc. Además, si tenemos conocimiento de CSS también podemos emplearlo para cambiar la apariencia de las aplicaciones.
Configuración del recurso
Una vez modificada la apariencia no debemos olvidar pulsar en Guardar para que los cambios queden registrados.
En este apartado nos encontramos con las siguientes opciones:
Título del recurso : al marcar la opción "Usar un título personalizado" podemos poner un titulo personalizado al recurso en la caja destinada a tal efecto.
Otra forma fácil y rápida de poner o modificar el título a un recurso es haciendo "click" con el botón izquierdo del ratón sobre la barra de "título del recurso".
A continuación borramos el título original, introducimos el nuevo título y pulsamos sobre validar.
Enlazar URL del recurso con la página: esta opción nos permite elegir la página o sección donde queremos que se "abra" el contenido del recurso. Al pulsar sobre el desplegable, nos aparecen todas las páginas del espacio web en el que estamos trabajando.
Mostrar bordes: podemos definir que el recurso tenga o no un borde alrededor. Por defecto, los recursos siempre se muestran con borde. Para quitar el borde del recurso seleccionamos la opción "No".
En la pestaña "Estilos del borde" podemos definir las distintas opciones de anchura, color, etc.
Estilos del texto
Una vez modificada la apariencia no debemos olvidar pulsar en Guardar para que los cambios queden registrados.
Desde aquí podemos aplicar formato de texto a cada uno de nuestros recursos.
- Tipo de fuente: Arial, Georgia, Times New Roman, Tahoma, Trebuchet MS, Verdana...,
- Estilo: negrita, cursiva.
- Tamaño de la fuente: desde 0,1em hasta 12em.
- Color del texto: para cambiar el color del texto hacemos clic en el icono de la paleta de colores y seleccionamos el color deseado
- Alineamiento: determina cómo se hace la alineación del texto y puede tener cuatro posibles valores: a la izquierda, a la derecha, centrar, justificar.
- Decoración del texto: hace referencia a las cuatro formas que tenemos para presentar el texto: normal, subrayado, con una linea encima, tachado (con una linea en medio del texto).
- Espacio entre palabras: permite alterar el espacio que hay entre palabras. Utilizado con moderación puede aumentar la legibilidad del texto. Los valores de longitud que podemos definir también pueden ser negativos.
- Altura de la línea: Mediante este atributo se puede especificar la altura de una linea de texto como su propio nombre indica, es decir, para llegar a esa altura de línea, se añade espacio por encima y por debajo del texto de la línea.
- Separación entre las letras de una misma palabra: no tiene porqué ser siempre fijo. En ocasiones, cuando este espacio se ajusta, los textos son más legibles y el aspecto estético es mucho mejor. Los valores de separación que podemos definir también pueden ser negativos.
Ejemplo aplicando unos valores determinados para cada una de las opciones que se nos ofrecen:
Estilos del fondo
Una vez modificada la apariencia no debemos olvidar pulsar en Guardar para que los cambios queden registrados.
Por defecto, el color de fondo de un portlet es el blanco. Para modificarlo, pulsamos en el "Selector de color" y se abre una paleta de colores. Elegimos el color deseado.
Una vez guardado los cambios podemos visualizar el fondo aplicado:
Estilos del borde
Una vez modificada la apariencia no debemos olvidar pulsar en Guardar para que los cambios queden registrados.
Los estilos del borde sólo se aplican si hemos marcado la opción "Si" en "Configuración del recurso"->" Mostar bordes".
Las propiedades del borde especifican el ancho, estilo y color del borde de un recurso.
- Anchura del borde: Estas propiedades determinan la anchura de los bordes superior, derecho, inferior e izquierdo de una caja. Podemos indicar que el ancho sea igual para todos los bordes o especificar un ancho distinto para cada borde.
- Estilo del borde: podemos elegir entre distintos estilo a aplicar a los bordes superior, inferior, derecha e izquierda de una caja. También podemos definir un estilo distinto para cada borde.
- Color del borde: apartado donde especificamos el color que queremos que tenga el borde. Puede ser igual para todos o distinto.
Ejemplo de recurso con los bordes personalizados:
Márgenes
Una vez modificada la apariencia no debemos olvidar pulsar en Guardar para que los cambios queden registrados.
Las propiedades Márgenes interno (padding) y Margen son importantes cuando queremos posicionar elementos dentro de un recurso ya que nos permite establecer el espacio externo e interno de un objeto o texto.
Si queremos que el valor de los cuatro márgenes (externo o interno) sea igual para todos bastará con seleccionar el valor del margen superior y tener marcada la opción "Igual para todos" (se utiliza para definir el valor de los cuatro márgenes a la vez).
Márgenes interno ("Padding"): espacio de separación entre los márgenes del recurso y el contenido del mismo.
"Márgenes": margen externo entre el borde del contenedor y lo que haya alrededor de él. Contiene cuatro valores: margen superior, margen inferior, margen izquierdo y margen derecho.
Estilos avanzados
Esta pestaña nos permite introducir código "CSS".
CSS quiere decir Cascading Style Sheets (Hojas de Estilo en Cascada). Sabiendo CSS podemos cambiar la apariencia de nuestros portlets. Si conocemos CSS, podemos escribir código en el apartado "Introduzca estilos CSS a medida" en el caso de no dominarlo lo aconsejable es dejar este campo vacío.
Asimismo, tenemos la posibilidad de añadir código CSS sólo para el recurso en el que estás trabajando en ese momento y también puedes introducir código CSS para todos los portlets iguales a este.
Es importante tener en cuenta que no podremos ver las fuentes que no tengamos instaladas. Si no tenemos instalada una fuente, veremos otra. Debemos utilizar fuentes comunes (preinstaladas en los principales sistemas operativos) si queremos controlar nuestro diseño.