Educa62 Diseñador Web

De EducaMadrid Ayuda
Saltar a: navegación, buscar

El Diseñador Web es una nueva funcionalidad del Portal EducaMadrid que nos permite dar una apariencia personalizada a nuestro espacio web en sencillos pasos.

Ejemplo apariencia personalizada 1
Ejemplo plantilla 1
Ejemplo apariencia personalizada 2
Ejemplo plantilla 2


Contenido

Cómo acceder al Diseñador Web


Para acceder al Diseñador web, una vez estemos situados en el espacio sobre el que queramos trabajar pulsamos Editar.

Disenar web 12 2015.png


En la siguiente pantalla desplegamos "Apariencia" y pulsaremos sobre el botón "Diseñador Web" que aparece en la parte inferior:


Disenar web 11 2015.png


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


Disenador web 2015.png


Apariencias predefinidas

Con el diseñador web podremos seleccionar apariencias predefinidas.



Acceso a las apariencias

Para acceder a los diferentes temas podremos hacerlo o bien desde el enlace que aparece en la pestaña General (1) o bien desde la pestaña Temas (2):


Disenador web 1 2015.png


Una vez seleccionada cualquier de las dos opciones anteriores, podremos ver las distintas apariencias:


Disenador web 2 2015.png


Opciones de las apariencias

Disenador web 3 2015.png


Por cada una de las apariencias podremos hacer lo siguiente:


  • Educa5 diseñadorweb8.png
    Previsualizar: esta opción nos permite ver la apariencia aplicada a un espacio web. Basta con pulsar sobre esta opción y se abrirá, en la parte posterior de la ventana del diseñador, como se verá aplicado en una web de ejemplo:


Educa5 diseñadorweb15.png


  • Educa5 diseñadorweb9.png
    Más información de la apariencia: al pulsar sobre ella nos abre una ventana nueva donde aparece información relevante al tema seleccionado.


Disenador web 4.1 2015.png
Disenador web 4 2015.png


  • Educa5 diseñadorweb10.png
    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.


Disenador web 4.2 2015.png


  • Educa5 diseñadorweb11.png
    Seleccionar la apariencia: pulsando sobre esta opción, el tema quedará asociado a nuestro espacio web.


Cómo aplicar apariencia

Si seleccionamos una apariencia y no deseamos que el cambio se guarde, deberemos pulsar sobre Descartar cambios.

Para aplicar la apariencia a nuestro espacio web, tendremos que hacer tres pasos:

1. Seleccionar la apariencia pulsando sobre el icono correspondiente

Disenador web 5 2015.png


2. En la ventana emergente, pulsamos sobre Aceptar para aplicar el tema.


Disenador web 6 2015.png


3. Si la opción "Previsualizar" esta seleccionada podremos ver el tema aplicado en la web y si estamos de acuerdo pulsaremos sobre el botón "Guardar y salir".


Disenador web 7 2015.png


4. En la siguiente pantalla, nos aparecerá un mensaje preguntándonos si estamos seguros de guardar los cambios. Pulsamos sobre Aceptar:


Disenador web 8 2015.png


5. A continuación, veremos nuestra web con la apariencia aplicada a nuestro espacio:


Disenador web 9 2015.png


Personalizar apariencia predefinida

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


Apariencia personalizada

Esta nueva funcionalidad nos va a permitir dar una apariencia muy personalizada a nuestro espacio web cumplimentando aquellos campos del formulario que nos interesen.

Veamos a continuación los diferentes apartados del formulario del diseñador web.


Antes de empezar...

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.
  • Guarda los cambios que vayas realizando cada poco tiempo para evitar que se pierda la sesión.

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

Disenador web 10 2015.png


General

Como indica su nombre, hace referencia a los aspectos generales de la página.


Veamos a continuación qué elementos de la página web podremos definir:

  • 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: Podremos 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: podremos 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: seleccionaremos 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.
Disenador web 11 2015.png


Cabecera

Como indica su nombre, hace referencia a las características que queremos que tenga la cabecera de nuestra web.


Disenador web 12 2015.png




Veamos a continuación qué elementos de la cabecera podremos definir:

  • 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: seleccionaremos 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: podremos indicar qué tamaño de letra que queremos que tenga el texto del nombre de la web.
  • Cabecera:
- Altura: podremos especificar qué altura queremos que tenga la cabecera de la página.
- Color de fondo: el color de la cabecera.
- Imagen: podremos seleccionar una imagen para poner en la cabecera.
- Posición: hace referencia al lugar que queremos que ocupe la imagen.
- Repetir:podremos 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, marcaremos esta opción.
- Ocultar el rastro de migas: el camino de migas aparecerá en nuestro espacio web cuando nos situemos 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.

Ahora bien, si queremos darle un aspecto personalizado al camino de migas, podremos 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: podremos seleccionar el color con el que queremos que se muestre el enlace sobre el que nos situemos.


Disenador web 13 2015.png


Menús

Desde esta pestaña vamos a definir las características del menú de nuestra web.

Disenador web 14 2015.png




Veamos a continuación que podemos hacer:

  • 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: indicaremos 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: podremos elegir el color que deseemos que se muestre en los bordes del menú.
- Color enlaces: desde aquí podremos introducir el color que deseemos que tenga el texto de los enlaces.
- Enlaces activos: seleccionar el color del enlace de la sección en la que estemos.
- Ancho borde: introduciremos el ancho del borde.
- Sombra enlaces: podremos introducir un color de sombra para el texto de los enlaces.
- Sombra enlaces: podremos introducir un color de sombra para el texto de los enlaces.
- Tamaño texto: desde aquí podremos 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 tendremos 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: podremos 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.


Disenador web 15 2015.png

Recursos

Desde esta pestaña vamos a poder definir las características que queremos que tengan los diferentes recursos que incluyamos en nuestra web.

Disenador web 16 2015.png

A continuación vamos a ver qué elementos de los recursos podemos definir:

  • 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:podremos seleccionar 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: desde aquí podremos establecer la anchura del borde.
- Redondeado: podremos especificar 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: podremos 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: podremos 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: podremos seleccionar una imagen que se muestre en este espacio.
- Posición: especificaremos la posición del recurso en este espacio.
- Repetir: indicamos si queremos que la imagen se repita y cómo queremos que se repita.


Disenador web 17 2015.png


Contenidos


Desde esta pestaña podremos definir las características de los contenidos creados con el Administrador de contenidos.

Disenador web 19 2015.png

A continuación vamos a ver qué características podemos definir:

  • Texto y enlaces:
- Fuente: seleccionaremos el tipo de letra con el que queremos que se muestren los contenidos.
- Color de texto: color del texto del contenido.
- Color enlaces: indicaremos 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: indicaremos 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 podremos 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: como su nombre indica, seleccionaremos 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.


Disenador web 18 2015.png


Pie de página


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


Disenador web 20 2015.png
  • 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: si lo deseamos podemos incorporar una sombra al texto.
- Color del borde: podremos seleccionar el color del borde del pie de página.
- Grosor del borde: anchura del borde.
- Imagen fondo: podremos añadir una imagen al pie.
- Posición: podremos especificar la posición de la imagen.
- Repetir: especificaremos si queremos si queremos que la imagen se repita y cómo.
Disenador web 21 2015.png



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, veremos cómo 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:


Santo domingo educa.png


Habilitar vista móvil

Pero, ¿es posible tener una vista con un diseño personalizado para los dispositivos móviles?. La respuesta es SI. Para ello bastará con acceder a la pestaña "Móvil" del Diseñador web y marcar la casilla “Habilitar el diseño en vista móvil”.


Movil 2.png


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

Ejemplo:


Santo domingo cortada.png

Adaptación de la imagen

¿Qué podemos hacer?. Es muy fácil. Para ello bastará con adaptar previamente la imagen que tenemos en la web y subirla 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.


Movil seleccionar cabecera.png


En las imágenes se ve cómo la imagen que tenemos para la vista web, una vez rediseñada, se ajusta correctamente para un dispositivo móvil.


Santodomingo diseñomovil.png

Ejemplos prácticos

Veámoslo con dos ejemplos:


Ejemplo 1: Supongamos ahora que nuestro centro tiene como cabecera de su página web una imagen con un diseño totalmente personalizado y queremos mantener esta misma imagen para su visualización desde un dispositivo móvil.


Ejemplo santo domingo 1.png


Para ello será necesario rediseñar ligeramente la imagen siguiendo las siguientes recomendaciones:

  • Mantenemos el tamaño de la imagen original y
  • Ubicamos la información que nos interesa destacar en la parte izquierda de la imagen


Ejemplo rediseno.jpg


El resultado sería similar a como se ve en la imagen:


Santo domingo movil.png


Ejemplo 2: Supongamos ahora que nuestro centro tiene como cabecera de su página web una imagen con el logo del centro, un color de fondo y además muestra el nombre de la web. Para la vista móvil vamos a mantener la imagen con el logo del centro e intentaremos respetar en la medida de lo posible la apariencia de la vista para la web.


Si subimos una imagen como cabecera para la vista móvil, el nombre de la web no se mostrará como texto en la cabecera.
Web calatalifa.jpg


Para ello seguiremos las siguientes recomendaciones:

  • Subimos como cabecera para el móvil la imagen con el logo del centro (Diseñador web > Pestaña "Móvil" > apartado "Cabecera" > Imagen) y
  • Seleccionamos (o mantenemos) un color de fondo para la cabecera igual al que tenemos para la vista web (Diseñador web > Pestaña "Cabecera" > apartado "Cabecera" > Color de fondo)


Logo calatalifa web movil.png

Avanzado

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

Disenador web 22 2015.png


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, pulsaremos sobre Finalizar:

Disenador web 23 2015.png

A continuación, pulsaremos en Aceptar para que los cambios se guarden:

Disenador web 24 2015.png

Hecho esto, nos aseguramos que los cambios que hemos introducido se han guardado correctamente al tiempo que podremos continuar dando una apariencia personalizada a nuestra web pulsando nuevamente sobre Diseñador Web.


Disenador web 25 2015.png


Guardar el código CSS

Si una vez hemos dado una apariencia personalizada a nuestro espacio, 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 a "Editar":


Disenar web 12 2015.png


Desde Editar página desplegaremos la opción "Apariencia" veremos el acceso a "Diseñador Web", pulsaremos sobre el enlace:


Disenar web 11 2015.png


Se abrirá el Diseñador web 2.1, al final de esta ventana pulsaremos el botón "Copia de seguridad":


Disenador web 26 2015.png


Dependiendo de nuestro requerimientos se creara o restablecerá una copia de seguridad, seguiremos los pasos que nos indica en la ventana emergente:


Disenador web 27 2015.png


Ejemplo de web personalizada

Educa5 diseñadorweb32.png
Vistas
Herramientas personales
Navegación
Herramientas