J. Personalización de la apariencia en EducaMadrid (II)

Si hemos comprendido lo explicado a lo largo de este bloque, no deberíamos tener ningún problema para modificar el código generado por el Diseñador Web.

Solo tendremos que cambiar sus atributos y valores.

Por ejemplo:

Si el Diseñador Web ha generado este código:

.blue #banner {
    background-color:transparent;
    background-image:url(...);
    background-repeat:no-repeat;
    background-position:left top;
    height: 0200px;
}

Y queremos modificar su imagen de fondo, no tendríamos más que introducir la dirección de la nueva imagen dentro de los paréntesis de background-image:url(...);

Aunque ese mismo cambio podríamos hacerlo utilizando el Diseñador Web, y resultaría mucho más cómodo.

Sin embargo, ¿qué pasaría si queremos que la imagen de fondo se sitúe a 10 píxeles de la parte superior y a 15 de la parte izquierda del banner?

El Diseñador Web no nos da esa opción, de manera que tendríamos que especificarlo modificando el CSS.

Escribiendo:

background-position: 15px 10px;

En lugar de:

background-position:  left top   ;

¿Cuál es la mejor forma de hacerlo?

Podríamos hacer ese cambio directamente en el código CSS generado por el Diseñador Web, pero eso tendría un inconveniente: el Diseñador Web podría dejar de recuperar correctamente los valores introducidos y no podríamos editar nuestro diseño.

Lo ideal en estos casos es hacer uso de la pestaña "Avanzado". Si ahí añadimos el siguiente código lograremos lo que queremos y tendremos un diseño 100% compatible con el Diseñador Web (podremos seguir editándolo sin problemas):

.blue #banner {
    background-position: 15px 10px;
}

El código que introduzcamos en la pestaña "Avanzado" se incluirá después del resto del código, de manera que "pisará" las definiciones anteriores.

Por supuesto, no solo podemos cambiar las propiedades de los elementos que controla el Diseñador Web.

Introduciendo código CSS en la pestaña "Avanzado" podemos modificar la apariencia de cualquier elemento de la página.

El truco está en saber "cómo se llaman" los elementos.

Podemos identificarlos revisando el código fuente de la página, pero en ocasiones puede no resultar sencillo. Por eso recomendamos la siguientes herramientas:

• Aardvark (https://addons.mozilla.org/es-ES/firefox/addon/aardvark/) es una extensión para Firefox que facilita enormemente la tarea de "poner nombre" a los elementos de nuestras páginas. Es muy fácil de usar.
  Si tenéis problemas con vuestra versión de Firefox (porque Aardvark no es compatible), podéis usar esta versión: Aardvark en Marcadores.
  
  • Una vez instalada, se activa con el botón derecho del ratón.
  • Aardvark nos dirá cómo se llaman los elementos según vayamos pasando sobre ellos.
  • Si queremos ir al padre de un elemento (el que lo contiene), pulsamos la letra W.
  • Si queremos ir al hijo, pulsamos la letra N.
  • La tecla H muestra una ayuda con todos los atajos de teclado.
• Web Developer Toolbar (https://addons.mozilla.org/es-ES/firefox/addon/web-developer/) es otra extensión para Firefox. Es más compleja y potente. Ofrece muchísimas posibilidades, entre ellas:
  • Mostrar información de los elementos.
  • Mostrar identificadores y clases.
  • Mostrar el orden de las capas.
  • Tiene además muchas opciones relacionadas con CSS: desde ver la página sin CSS hasta editar los CSS de la página que estamos visitando.

En el apartado "Recursos avanzados sobre Diseño personalizado y accesible" encontraréis enlaces a herramientas que os facilitarán esta y otras tareas.

Otras ventajas de usar el Diseñador Web

• Por supuesto, escribiendo nuestro propio código CSS podemos prescindir del Diseñador Web, sin embargo, esta herramienta tiene una ventaja adicional: si la utilizamos será más fácil mantener la compatibilidad de nuestro diseño con futuras versiones del portal educativo.
• Utilizando la pestaña "Avanzado" podemos modificar el aspecto de elementos no contemplados por la herramienta o introducir valores que la herramienta no genera.