Educa6 Diseñador Web

De EducaMadrid Ayuda
Saltar a: navegación, buscar

AVISO: ESTA INFORMACIÓN CORRESPONDE A UNA VERSIÓN ANTIGUA QUE NO ESTÁ OPERATIVA ACTUALMENTE. PINCHA AQUÍ PARA VER ESTA INFORMACIÓN ACTUALIZADA.


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


Cómo acceder al Diseñador Web

Vídeo tutorial


Para acceder al Diseñador web, una vez estemos situados en el espacio sobre el que queramos trabajar, accederemos Administrar - Paginas del sitio web:

Educa6 diseñadorweb.png


En la siguiente pantalla pulsaremos sobre Diseñador Web que aparece en la parte inferior:


Educa6 diseñadorweb2.png


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


Educa5 diseñadorweb5.png

Apariencias predefinidas

Con el diseñador web podremos seleccionar apariencias predefinidas.

Vídeo tutorial


Acceso a las apariencias

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


Educa5 diseñadorweb6.png


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


Diseñador acceso1.jpg


Opciones de las apariencias
Educa5 diseñadorweb12.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.
Educa5 diseñadorweb23.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 de mismo así como el código CSS correspondiente.


  • 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 Reestablecer.

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

1. Seleccionar la apariencia pulsando sobre el icono correspondiente

Educa6 diseñadorweb6.png


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


Educa6 diseñadorweb4.png


3. Pulsar sobre Finalizar.

Educa6 diseñadorweb5.png

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

Educa6 diseñadorweb8.png


5. A continuación, veremos un mensaje que nos indica que los cambios se han guardado correctamente y cerraremos esa ventana:


Educa6 diseñadorweb7.png


6. Vemos como la apariencia queda aplicada a nuestro espacio.



Educa6 diseñadorweb9.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.

Educa5 diseñadorweb27.png


General

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

Vídeo tutorial

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


Cabecera

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

Educa6 diseñadorweb10.png
Vídeo tutorial


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.
- 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 indidar qué tamaño de letra 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.
- Color enlace: indicamos el color de los enlaces.
- 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.
- Ocultar el logotipo de la cabecera de la versión antigua de EducaMadrid: al marcar esta opción ocultamos el logotipo de la cabecera.


  • 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 flechas: podremos seleccionar el color que queremos que muestren las flechas 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.
Educa6 diseñadorweb11.png




Menús

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

Educa5 diseñadorweb39.png


Vídeo tutorial

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ú.
- Color de 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.
- Sombra texto enlaces: podremos introducir un color de sombra para el texto de los enlaces.
- Ancho borde: introduciremos el ancho del borde.
  • Altura y tamaño fuente: % con respecto al tamaño y el interlineado por defecto.
- Altura interlineado: podremos modificar la altura del interlineado.
- 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: idnicamos 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.


Educa5 diseñadorweb18.png

Recursos

Vídeo tutorial

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

Educa5 diseñadorweb35.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.


Educa5 diseñadorweb21.png


Contenidos

Vídeotutorial


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

Educa5 diseñadorweb36.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.


Educa5 diseñadorweb19.png


Pie de página

Vídeotutorial


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


Educa5 diseñadorweb37.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.
Educa5 diseñadorweb20.png

Avanzado

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

Educa5 diseñadorweb29.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:

Educa5 diseñadorweb31.png

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

Educa6 diseñadorweb15.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.


Educa6 diseñadorweb13.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 tendremos que acceder Administrar - Páginas del sitio web:


Educa6 diseñadorweb16.png


En la siguiente ventana, veremos que debajo del Diseñador Web nos aparecerá el siguiente mensaje: "Por seguridad, guarda una copia de tu diseño actual (pincha en el enlace y guarda en tu ordenador el archivo generado)." Pulsaremos sobre el enlace indicado:


Educa6 diseñadorweb19.png


Se abrirá una nueva ventana en el navegador con el código actual de nuestro sitio web, pulsaremos sobre Archivo - Guardar y seleccionaremos donde queremos almacenar este fichero en nuestro ordenador.


Educa6 diseñadorweb20.png


Ejemplo de web personalizada

Educa5 diseñadorweb32.png