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":

El Diseñador Web se abrirá en una nueva ventana:

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

Una vez seleccionada cualquier de las dos opciones anteriores, vemos las diferentes apariencias:

Opciones de las apariencias

En cada uno de los temas (apariencias) podemos:

Previsualizar   : al pulsar sobre esta opción, vemos un mensaje que nos indica los pasos que tenemos que seguir para aplicar el tema. Al 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.Más información de la apariencia : desde aquí vemos información relevante al tema seleccionado.

Descargar la 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 : 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:

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

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

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

Y el tema se aplica en nuestra web:

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

• Algunos consejos prácticos importantes:
  Para familiazarte con esta herramienta, práctica a modificar la apariencia en tus páginas privadas.
• Activa la opción Previsualizar.
• Guardamos los cambios para evitar que se pierda la sesión.

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.

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:

• Mostrar nombre de la web como texto en la cabecera: desde aquí indicamos si queremos que el nombre de la web aparezca en la cabecera.
• Fuente: seleccionamos el tipo de letra que queremos que tenga el texto del nombre de la web.
• Color texto: indicamos el color del nombre de la web.
• Color sombra: indicamos el color de sombra del nombre de la web.
• Margen superior: separación del nombre de la cabecera de la parte superior.
• Margen izquierdo: separación del nombre de la cabecera del margen izquierdo.
• Tamaño texto: podemos indicar qué tamaño de letra queremos que tenga el texto del nombre de la web.

Cabecera:

• Altura: podemos especificar qué altura queremos que tenga la cabecera de la página.
• Color de fondo: el color de la cabecera.
• Imagen: podemos seleccionar una imagen para poner en la cabecera. Los pasos para incorporar la imagen en la cabecera son los siguientes:
  
  

Pulsamos en "Examinar":Ahora en "Añadir imagen"

Para localizar la imagen en nuestro equipo pulsamos sobre "Examinar"
Localizamos la imagen en nuestro equipo y pulsamos en "Abrir"
Pulsamos en Subir fichero

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

• Posición: hace referencia al lugar que queremos que ocupe la imagen.
• Repetir: podemos seleccionar si queremos que se repita o no la imagen y cómo queremos que se repita.

Buscador y rastro de migas

• Ocultar el buscador: si no queremos que el buscador aparezca en nuestro sitio web, marcamos esta opción.
• Ocultar el rastro de migas: el camino de migas aparece en nuestro espacio web cuando nos situamos en un subpágina, este camino indica los pasos seguidos hasta llegar a esta página concreta. Si marcamos esta opción, el camino de migas no aparecerá en nuestro sitio web.

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

• Color de fondo: el color de que componen el camino de migas.
• Color barras: podremos seleccionar el color que queremos que muestren las barras que componen el camino de migas.
• Color enlaces: seleccionamos el color que deseemos.
• Enlaces sobre: podemos seleccionar el color con el que queremos que se muestre el enlace sobre el que nos situemos.

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:

• Ocultar las páginas de segundo nivel: si marcamos esta opción, no se mostrarán las subpáginas en el menú.
• Color fondo: indicamos el color que queremos que tenga el menú.
• Fondo activo: seleccionamos el color que queremos que se muestre cuando nos situemos sobre una de las páginas.
• Color borde: podemos elegir el color que deseemos que se muestre en los bordes del menú.
• Color enlaces:  color que deseemos que tenga el texto de los enlaces.
• Enlaces activos: seleccionamos el color del enlace de la sección en la que estemos.
• Ancho borde: introducimos el ancho del borde.
• Sombra enlaces: podemos introducir un color de sombra para el texto de los enlaces.
• Sombra enlaces: podemos introducir un color de sombra para el texto de los enlaces.
• Tamaño texto: desde aquí podemos aumentar o disminuir el tamaño del texto del menú.

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.

• Mostrar sólo este menú (oculta el menú principal): si marcamos esta opción el menú principal de nuestro espacio web, no se visualizará.
• Mejorar la presentación del recurso de navegación: podemos modificar la apariencia del recurso modificando los siguientes datos:

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.

 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

• Recursos sin borde: podemos indicar si queremos que se muestren o no los bordes del recurso.
• Color de fondo: nos permite seleccionar el color que tenga de fondo el recurso.
• Color de texto: indicaremos el color del texto.
• Color sombra: seleccionamos el color de la sombra del texto (esta característica no se verá aplicada en todos los navegadores).
• Color borde: campo para seleccionar el color del borde del recurso.
• Grosor borde: definimos la anchura del borde.Redondeado: especificamos que los bordes de los recursos se muestren redondeados (esta característica no se verá aplicada en todos los navegadores).

Título

• Recursos sin título: al marcar esta opción, no se mostrará el título del recurso.
• Título sin borde: si marcamos esta opción el borde de la parte inferior del título desaparece.
• Color del texto: desde aquí especificamos el color del texto del título.
• Sombra del texto: indicamos el color de la sombra del título.
• Tamaño texto: podemos aumentar el tamaño del texto.
• Sangrar: indicamos la separación del margen izquierdo.
• Color de fondo: color de fondo del espacio destinado para el título.
• Imagen de fondo: podemos incorporar una imagen al título.
• Posición: desde aquí especificaremos el lugar donde queremos que se ubique la imagen respecto al título.
• Repetir: podremos indicar si queremos que la imagen se repita.

Espacio en el que se colocan los recursos:

• Color de fondo: indicamos el color que queremos que se muestre entre los distintos recursos.
• Imagen de fondo: podemos seleccionar una imagen que se muestre en este espacio.
• Posición: especificamos la posición del recurso en este espacio.
• Repetir: indicamos si queremos que la imagen se repita y cómo queremos que se repita.

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:

• Fuente: seleccionamos el tipo de letra con el que queremos que se muestren los contenidos.
• Color de texto: color del texto del contenido.
• Color enlaces: indicamos el color de texto de los enlaces que hayamos incorporado en los contenidos.
• Enlaces sobre: color de los enlaces cuando nos posicionemos encima.

Títulos:

• Fuente: tipo de letra con el que queremos que se muestre el título del contenido.
• Línea inferior: color de la línea inferior que se muestre en los contenidos en vista detallada.
• Grosor borde: grosor de la línea inferior.
  Color texto: color del título del contenido en vista detallada.
• Color enlaces: indicamos el color de l título cuando se muestre en vista resumida o título.
• Enlaces sobre: color de los títulos cuando estén en vista resumida o título y nos posicionemos encima.

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:

• Color texto: color del texto de las celdas.
• Color bordes: color de los bordes de la tabla.
• Grosor borde: anchura del borde.
• Espacio borde: distancia entre las celdas.
• Fondo celda título: seleccionamos el color de las celdas donde se muestran los títulos.
• Fondo celda datos: fondo de las celdas donde se incorporan el resto de datos.
• Margen interno celda: separación del texto de los bordes de la celda en que se encuentra.

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

• Altura: introducimos como valor la altura que queremos que disponga el pie de página.
• Color de fondo: seleccionamos el color de fondo.
• Color de texto: color del texto que aparece en el pié de página.
• Sombra del texto: podemos incorporar una sombra al texto.
• Color del borde: seleccionamos el color del borde del pie de página.
• Grosor del borde: anchura del borde.
• Imagen fondo: podemos añadir una imagen al pie.
• Posición: especificamos la posición de la imagen.
• Repetir: especificamos si queremos que la imagen se repita y cómo.

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:

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

Si 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".

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"

En la siguiente pantalla "Añadir"

Pulsamos en ExaminarSeleccionamos el fichero de nuestro equipo y pulsar en Abrir

Pulsamos en "Subir fichero"Accedemos a "Listado"Seleccionamos la imagen y pulsamos en SeleccionarPor último pulsamos en "Guardar y salir"

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

Avanzado

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

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:A continuación, pulsaremos en Aceptar para que los cambios se guarden:Para 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":Desde 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:

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":En la siguiente ventana pulsamos en Aceptar:

Descartar cambios

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