Educa62 apariencia portlets

De EducaMadrid Ayuda
Saltar a: navegación, buscar


La apariencia de los recursos 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 todos y cada uno de los recursos de la versión 6 de EducaMadrid, 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. Asimismo, si sabes CSS también puedes utilizarlo para cambiar la apariencia de tus recursos.


Apariencia portlets 1 15.png



Contenido

Configuración del recurso

Apariencia portlets 2 15.png


Título del recurso

Si queremos poner un título personalizado a nuestro recurso primero debemos marcar la opción "Usar un título personalizado" y, a continuación, escribir el título deseado en la caja destinada a tal efecto.


Apariencia portlets 3 15.png



Recuerde que después de cada modificación veremos el siguiente mensaje


Apariencia portlets 6.1 15.png



Observamos el resultado:


Apariencia portlets 4 15.png


Otra forma fácil y rápida de poner o modificar el título a un recruso es haciendo "click" con el botón izquierdo del ratón sobre la barra de título del recurso.

Apariencia portlets 5 15.png

A continuación borramos el título original, introducimos el nuevo título y pulsamos sobre validar.


Apariencia portlets 6 15.png


Observamos el resultado:


Apariencia portlets 7 15.png


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.


Mostrar bordes

Nos permite quitar o poner un borde alrededor del recurso. Por defecto, los recursos siempre se muestran con borde.

Para quitar el borde del recurso es necesario desmarcar la opción "Mostrar bordes". En este caso, la herramienta nos advertirá que el cambio no será visible hasta que la página no sea nuevamente recargada.


Apariencia portlets 8 15.png


Una vez desmarcada esta opción y asegurándonos de haber guardado y recargado los cambios, estos serían los efectos resultantes:


Apariencia portlets 9 15.png


En la pestaña "Estilos del borde" puedes definir las distintas opciones de anchura, color, etc.

Apariencia portlets 10 15.png


Estilos del texto

A través de la pestaña "Estilos del texto" podremos 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 haz clic en el icono de la paleta de colores (Icono selector color.jpg). Se abrirá una ventana con muchos colores para elegir.
  • 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). Esto se logra a través de cuatro valores posibles: "none", "underline", "overline", y "line-through".
  • 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 (kerning): 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.


Veámoslo con un ejemplo aplicando unos valores determinados para cada una de las opciones que se nos ofrecen:



Apariencia portlets 12 15.png


Guardamos los cambios que hemos efectuado y la herramienta nos devuelve un mensaje informándonos que la operación se ha realizado correctamente. Observamos ahora la apariencia dada a nuestro recurso:


Apariencia portlets 13 15.png


Estilos del fondo

Por defecto, el color de fondo de un portlet es el blanco. Si queremos cualquier otro tenemos que indicarlo. Para ello, haremos click sobre el icono selector de color (Icono selector color.jpg)y se abrirá una ventana con muchos colores para elegir.


Apariencia portlets 14 15.png


Una vez seleccionado el color no debemos olvidar guardar las modificaciones realizadas y podremos visualizar el fondo aplicado a nuestro portlet:


Apariencia portlets 15 15.png


Estilos del borde

Las propiedades del borde especifican el ancho, estilo y color del borde de un recurso.


Apariencia portlets 15.0 15.png


Ancho del borde

Estas propiedades determinan el ancho de los bordes superior, derecho, inferior e izquierdo de la caja.

Si queremos que los cuatro bordes del recurso tengan el mismo ancho bastará con seleccionar el ancho del borde superior y tener marcada la opción "Igual para todos" (se utiliza para definir el ancho de los cuatro bordes a la vez).

Sin embargo, si queremos que cada uno de los bordes tenga un ancho propio, deberemos desmarcar la opción "Igual para todos" y a continuación establecer el valor de cada uno de ellos.


Apariencia portlets 15.1 15.png


Estilo del borde

Estas propiedades determinan el estilo de los bordes superior, derecho, inferior e izquierdo de una caja (recurso).

Si queremos que los cuatro bordes del recurso tengan el mismo estilo bastará con seleccionar el estilo del borde superior y tener marcada la opción "Igual para todos" (se utiliza para definir el estilo de los cuatro bordes a la vez).

Sin embargo, si queremos que cada uno de los bordes tenga un estilo propio, deberemos desmarcar la opción "Igual para todos" y a continuación seleccionar en cada uno de los combos el valor que queremos asignar a cada uno de ellos.

Puede tomar uno de los siguientes valores:

  • Línea discontinua (dashed): El borde es una serie de pequeños segmentos de línea
  • Doble: El borde son dos líneas sólidas.
  • Línea de puntos (dotted): El borde es una serie de puntos.
  • Efecto 3D de borde hundido (groove): El borde luce como si estuviese tallado en la página
  • Oculto:ningún borde.
  • Efecto 3D de contenido hundido (inset): El borde hace que toda la caja luzca como si estuviera empotrada en la página.
  • Efecto 3D de contenido saliente (outset): el borde hace que toda la caja parezca sobresalir de la página.
  • Efecto 3D de borde saliente (ridge): el borde parece que estuviera sobresaliendo de la página.
  • Línea continua: El borde es un único segmento de línea.


Apariencia portlets 16 15.png


Color del borde

Estas propiedades determinan el color de los bordes superior, derecho, inferior e izquierdo de una caja.

Si queremos que los cuatro bordes del recurso tengan el mismo color bastará con seleccionar el color del borde superior y tener marcada la opción "Igual para todos" (se utiliza para definir el color de los cuatro bordes a la vez).

Sin embargo, si queremos que cada uno de los bordes tenga su propio color, deberemos desmarcar la opción "Igual para todos" y a continuación pinchar en cada uno de los selectores de color y seleccionar en cada una de las paletas el color que queremos asignar a cada borde del recurso.


Apariencia portlets 17 15.png

Margenes externo e interno (padding)

Las propiedades Margenes 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.


Apariencia portlets 18 15.png


Cuando hablamos de "Margenes", estamos haciendo referencia al 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.


Apariencia portlets 19 15.png


Cuando hablamos de "Padding", estamos haciendo referencia al margen interno, al espacio de separación entre los márgenes del recurso y el contenido del mismo.


Apariencia portlets 20 15.png


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).

Estilos avanzados

Esta pestaña llamada "Estilos avanzados" 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 sabes CSS, puedes escribir tu código en el apartado "Introduzca estilos CSS a medida". Si no dominas CSS, te recomendamos que dejes siempre vacío este campo.

Asimismo, tienes 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.

Veamos un ejemplo definiendo previamente unas características para nuestro recurso:

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.
  • Color de fondo F3F3F3
  • Un borde sólido de 10 pixels de ancho
  • El borde será redondeado (no disponible para todos los navegadores. En Internet Explorer, entre otros, no se verán las esquinas redondeadas)
  • Un margen de 20 pixels por encima y por debajo del portlet
  • El título del recurso:
    • Tiene color de fondo FFFFCC
    • Muestra un icono (que no se repite) a 12 pixels del margen izquierdo y centrado verticalmente
    • El texto deja 35 pixels a su izquierda para dejar sitio al icono
    • El tamaño del texto es 150% (con respecto al tamaño general del texto)
    • La fuente del texto es Verdana o Arial (en ese orden y según disponibilidad).
    • El color del texto es CC3300


Introducimos el código correspondiente en el campo "Introduzca estilos CSS a medida" dentro de la pestaña "Estilos Avanzados":


Apariencia portlets 21 15.png


Y, finalmente, observamos los resultados:


Apariencia portlets 22 15.png

Estilos WAP

Wireless Application Protocol o WAP es un estándar internacional abierto para aplicaciones que usan la comunicación inalámbrica. Su principal uso es permitir el acceso a Internet desde un teléfono móvil o PDA.

Vistas
Herramientas personales
Navegación
Herramientas