Personalizar la apariencia

Diseñador WEB 2.0

Cómo acceder al Diseñador Web

Situados en nuestra página web pulsamos en "Editar" (1). A continuación en "Apariencia"-> "Diseñador Web":

Acceso al diseñador webEl Diseñador Web se abrirá en una nueva ventana:

Diseñador web

Apariencias predefinidas

Acceso a las apariencias

El acceso a los diferentes temas lo hacemos bien desde el enlace que aparece en la pestaña General (1) o bien desde la pestaña Temas (2):

Acceso a los temas del diseñador webUna vez seleccionada cualquier de las dos opciones anteriores, vemos las diferentes apariencias:Listado de plantillas

Opciones de las apariencias

En cada uno de los temas (apariencias) podemos:Opciones plantilla

Previsualizar Previsualizar tema  : al pulsar sobre esta opción, vemos un mensaje que nos indica los pasos que tenemos que seguir para aplicar el tema. diseñadorweb10.pngAl pulsar sobre "Aceptar", se abre, en la parte posterior de la ventana del diseñador, una web de ejemplo donde podemos ver como queda aplicado el tema en un sitio web.Ejemplo de como queda aplicado un tema en un sitio webMás información de la apariencia Información tema : desde aquí vemos información relevante al tema seleccionado.Información tema

Descargar la apariencia Descargar apariencia: esta opción nos permite obtener un fichero .zip en el cual vamos a encontrar las imágenes que componen el tema seleccionado, información del mismo, código CSS correspondiente...

Seleccionar la apariencia Seleccionar apariencia: pulsando sobre esta opción, el tema queda aplicado a nuestro espacio web.


Cómo aplicar apariencia

Para aplicar la apariencia a nuestro espacio web, seguimos estos pasos:

Seleccionamos la apariencia pulsando sobre el icono correspondiente:Pulsamos sobre el icono Aplicar para que la plantilla se aplique en nuestro sitio web

Al hacerlo, vemos un nuevo mensaje en el que tenemos que pulsar sobre "Aceptar" para aplicar el tema.Pulsamos sobre Aceptar para que el tema se aplique

Si tenemos la opción "Previsualizar" (1) seleccionada, podemos ver el tema aplicado en la web y si estamos conformes con la apariencia, pulsamos sobre el botón "Guardar y salir" (2).

Pulsamos en Guardar y salir para aplicar el tema

Vemos un mensaje preguntándonos si estamos seguros de guardar los cambios. Pulsamos sobre Aceptar:

Aplicar temaY el tema se aplica en nuestra web:

Ejemplo de tema aplicado


Personalizar apariencia predefinida

Una vez hemos seleccionado una apariencia predefinida podemos personalizar la misma empleando las diferentes opciones que nos proporciona el diseñador web como podemos ver en el siguiente apartado

Apariencia personalizada


Antes de empezar...

Antes de empezar a trabajar con el diseñador web, recomendamos acceder a la información que figura en la pestaña "Ayuda".

Diseñador web Ayuda

General

Como indica su nombre, hace referencia a los aspectos generales de la página. Los elementos que podemos definir son:

Guardamos los cambios cada poco tiempo para evitar que se pierda la sesión.

Aspecto General:

- Ancho de página: indica el ancho que queremos que tenga la página. Podemos indicarlo en % o pixeles. Se recomienda que en caso de % no se empleen valores inferiores a 50% y en caso de píxeles inferiores a 500 px .
- Posición de página: Podemos indicar cómo queremos posicionar la página: centrada o a la izquierda.
- Ancho borde: si queremos que la página tenga borde introduciremos el valor que deseemos que tenga el mismo.
- Color borde: seleccionamos el color de nuestro interés.
- Color de sombra: seleccionamos el color de nuestro interés.

Fondo de página

- Color de fondo: podemos seleccionar el color que deseemos que tenga la página por los laterales en caso de haber indicado que el ancho de la misma sea inferior a 100 (es el valor por defecto)
- Imagen de fondo: podemos incorporar una imagen que se muestre en los laterales de la página.
- Posición: hace referencia al lugar que queremos que ocupe la imagen en los laterales.
- Repetir: podremos seleccionar si queremos que se repita o no la imagen y cómo queremos que se repita.

Texto y enlaces

- Fuente: seleccionamos el tipo de letra que queramos que tengan los datos generales de la página.
- Color de texto: indicaremos el color del texto.
- Color enlaces: los enlaces podrán aparecer de un color diferente al del resto de la información.
- Color enlaces sobre: color sobre aquellos enlaces en los que nos posicionemos.Diseñador web  General

Cabecera

Hace referencia a las características que queremos que tenga la cabecera de nuestra web. Los elementos que podemos definir son:

Guardamos los cambios cada poco tiempo para evitar que se pierda la sesión.

Nombre de la web:

Cabecera:

Pulsamos en "Examinar":Examinar Ahora en "Añadir imagen"
diseñadorwebcabecera2.png

Para localizar la imagen en nuestro equipo pulsamos sobre "Examinar"
ExaminarLocalizamos la imagen en nuestro equipo y pulsamos en "Abrir"
Seleccionar imagenPulsamos en Subir ficheroSubir fichero

Una vez se ha subido la imagen, pulsamos sobre "Listado"
Imagen subida
Ahora seleccionamos la imagen y pulsamos en "Seleccionar imagen"Seleccionar imagenLa imagen queda subida.

Buscador y rastro de migas

Si queremos darle un aspecto personalizado al camino de migas, podemos hacerlo desde las siguientes opciones:

Menús

Desde aquí definimos las características del menú de nuestra web.

Guardamos los cambios cada poco tiempo para evitar que se pierda la sesión.

Aspecto general:

Navegación vertical (menú lateral)

Para poder ver estás opciones en nuestro entorno web, previamente tenemos que haber incorporado el recurso Mapa del Web en la página y además este debe estar posicionado en una columna estrecha.

Color de fondo: determinamos el color de fondo del recurso.
Color de enlaces: seleccionamos el color que deseemos que tenga el enlace.
Color de líneas: indicamos el color que queremos que tenga las líneas del mapa de navegación.
Color fondo activo: seleccionamos el color de la sección en la que nos encontremos.
Color enlace activo: seleccionar el color del enlace de la sección en la que estemos.

Diseñador web Menú

 Recursos

Definimos las características de los diferentes recursos que incluyamos en nuestra web. Los elementos de los recursos que podemos personalizar son:

Guardamos los cambios cada poco tiempo para evitar que se pierda la sesión.

Aspecto general

Título

Espacio en el que se colocan los recursos:

Diseñador web Recursos

Contenidos

Desde aquí definimos las características de los contenidos creados con el Administrador de contenidos.
A continuación vamos a ver qué características podemos definir:

Guardamos los cambios cada poco tiempo para evitar que se pierda la sesión.

Texto y enlaces:

Títulos:

Tablas:

Algunos tipos de contenidos, como por ejemplo el contenido tipo Publicación, contienen información adicional en forma de tabla. El aspecto de dicha tabla lo podemos personalizar desde este apartado:

Diseñador web Contenidos

Pie de página

Desde esta pestaña vamos a poder definir las características del pie de página de nuestra web.

Guardamos los cambios cada poco tiempo para evitar que se pierda la sesión.

Pie de página

Diseñador web Pié de página

Móvil

EducaMadrid ofrece una vista móvil común para todas las páginas web elaboradas con las herramientas propias del portal educativo (Liferay). De este modo, podemos tener elaborada nuestra página web con un diseño y apariencia personalizada accesible desde un PC y al visualizarla desde un dispositivo móvil, de forma automática, el diseño cambia a la vista que por defecto ofrece la herramienta, garantizando así su correcta visualización desde este tipo de dispositivos.

En las imágenes se puede ver un ejemplo de una web vista desde un ordenador con un diseño de cabecera propio y un dispositivo móvil utilizando el diseño que por defecto tiene el portal EducaMadrid:Ejemplo vista web y móvil

Habilitar vista móvil

Para disponer de un diseño personalizado para los dispositivos móviles, tenemos que habilitar el diseño en vista móvil. Accedemos a la pestaña "Móvil" del Diseñador web y marcamos la casilla “Habilitar el diseño en vista móvil”.

Diseñador Web MóvilSi accedemos ahora a nuestra web a través de un dispositivo móvil podremos comprobar que la página conserva la misma apariencia que cuando la visualizamos desde el ordenador pero, OJO: la imagen de cabecera no se reajusta al nuevo tamaño de pantalla sino que se verá "cortada".imagen móvil

Adaptación de la imagen

Adaptamos previamente la imagen que tenemos en la web y la subimos como imagen de cabecera para la vista móvil. Si lo deseamos también podemos subir una imagen diferente a la que tenemos en la vista para web.

Para subir la imagen de cabecera móvil, pulsamos en "Examinar"

subir imagen movilEn la siguiente pantalla "Añadir"

Añadir imagenPulsamos en ExaminarExaminarSeleccionamos el fichero de nuestro equipo y pulsar en Abrir

Seleccionar fichero

Pulsamos en "Subir fichero"Subir imagenAccedemos a "Listado"Acceso a listsadoSeleccionamos la imagen y pulsamos en SeleccionarSeleccionar imagenPor último pulsamos en "Guardar y salir"

Imagen insertadaVemos como la imagen rediseñada, se ajusta correctamente para un dispositivo móvil.

Imagen insertarda

Avanzado

En este apartado podrás incorporar el código CSS con el que queramos cumplimentar la personalización de la página.Avanzado

Guardar cambios

Recomendamos guardar los cambios que vayamos realizando en el diseñador web cada poco tiempo para evitar que se pierda la sesión.

Para ello, cada vez que cumplimentemos los datos referidos a un aspecto concreto de la apariencia de la web, pulsamos sobre Guardar y salir:Guardar y salirA continuación, pulsaremos en Aceptar para que los cambios se guarden:diseñadorweb47.pngPara modificar la apariencia o continuar trabajando en la misma, accedemos de nuevo al "Diseñador Web".

Guardar / restaurar copia de seguridad CSS

Una vez hemos dado una apariencia personalizada a nuestro espacio, si queremos realizar alguna modificación, antes de acceder nuevamente al Diseñador Web aconsejamos guardar la apariencia que habíamos realizado previamente.

Para ello tendremos que acceder al Diseñador web y pulsamos sobre el botón "Copia de seguridad":copia de seguridadDesde aquí podemos guardar un copia de seguridad o restablecer la copia que ya tuviéramos. Solo tenemos que seguir los pasos que aparecen en la siguiente ventana:Guardar o restaurar copia de seguridad

Borrar mi diseño

¡OJO! esta operación no puede deshacerse y el diseño se eliminará definitivamente.

Si una vez hemos trabajado con el Diseñador web no nos gusta la apariencia que le hemos dado, podemos empezar desde cero pulsando sobre "Borrar mi diseño":Borrar diseñoEn la siguiente ventana pulsamos en Aceptar:diseñadorweb49.png

Descartar cambios

Empleamos esta opción cuando realicemos algún cambio en el diseño de nuestra página que no queramos mantener:Descartar cambiosEn la siguiente ventana pulsamos en Aceptar:diseñadorweb50.png

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.título personalizado

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".aparienciaporlet6.pngA continuación borramos el título original, introducimos el nuevo título y pulsamos sobre validar.aparienciaporlet7.pngEnlazar 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.enlazar urlMostrar 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.

Mostrar bordes

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.

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.Seleccionar color de fondoUna vez guardado los cambios podemos visualizar el fondo aplicado:color de 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.

Estilos de bordeEjemplo de recurso con los bordes personalizados:bordes

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

Margenes externos e internos

Márgenes interno ("Padding"):  espacio de separación entre los márgenes del recurso y el contenido del mismo.

aparienciaporlet12.png"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.

Maegen externo

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.

Css a medidaAsimismo, 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.