HTML Dinamico y CSS's

DHTML y CSS's

(Alguno de los ejemplos sólo funcionan en Internet Explorer)

Temas relacionados: Ejemplos y trucos útiles con CSS's | Tabla de Referencia de CSS's | Tablas y CSS's

Contenido:

Modificaciones de Reglas:: estilos dinámicos

Introducción:

DHTML básicamente consiste en la posibilidad de que cualquier elemento del interfaz de usuario pueda cambiar en cualquier momento.

Pero sin necesidad de proceso en el servidor. Porque siempre sería posible requerir al servidor que nos enviase una nueva página dónde algunas situaciones de elementos hayan cambiado. Pero eso no es HTML Dinámico.

Este lo es cuando la página descargada incluye el código necesario para implementar cambios de situación de elementos por interacción directa del usuario, y simpre en "interfaz cliente". Es decir la página responde de forma autónoma a los requerimientos del usuario.

Las malas noticias, sin embargo, son que las posibilidades y la forma de manejar esta interactividad funcionan de forma diferente en Internet Explorer que en Netscape y el resto de Browsers. Esto requiere tomar una decisión:

O se desarrolla para un único browser, Internet Explorer que es el más extendido, y el que más posibilidades permite,

O se duplica el esfuerzo de codificación del interfaz dinámico para contemplar distintos browsers, lo que es conocido como codificación "cross browser".

Por tener una idea de ordenes de magnitud, en España en Marzo-2004, la distribución del parque de browsers es aproximadamente la siguiente:

Internet Explorer 6 ... 48,1%

Internet Explorer 5.X ... 26,91%

Resto de browsers ... 25%, dónde se incluyen:
- Netscape en sus diferentes versiones (4:X, 6:X, 7:X)
- Opera en sus diferentes versiones 5.X, 6.X y 7.X.
- Internet Explorer 4.X
- Browsers para otras plataformas, tales como Mac, OS/2...
- Browsers para sistemas UNIX, tales como Linux, Solaris, SCO...

De manera que es una decisión que siempre hay que tomar al implementar funcionalidades-cliente: utilizar un gran esfuerzo de codificación de manera que todas las páginas se vean óptimamente en todos los browsers, o centrarse en las últimas versiones de Explorer, perdiendo dinamismo en el resto de browsers.

Como para todo, hay un término medio, que es tan sencillo como renunciar a algunas propiedades que, contempladas sólo por Internet Explorer, impacten muy negativamente en los otros browsers. Un ejemplo de esto es el posicionamiento de objetos (no soportado por versiones <= Opera 6.X) y cuyos efectos son desastrosos. Sin embargo, la propiedad background-image, (aunque no está soportada por versiones 6.X de Netscape), dependiendo del elemento, su no visualización puede no ser tan crítica y relativamente bien tolerada por el interfaz.

En el caso concreto de WebUsable el desarrollo se ha hecho pensando básicamente en versiones > 5 de Internet Explorer, fundamentalmente para demostrar en la práctica el mayor número de posibilidades de las CSS's y el HTML Dinámico.

Modificaciones de la propiedad STYLE

DOM permite modificar los atributos del STYLE de cualquier objeto de una manera muy sencilla. Esto unido a las posibilidades de definir características de apariencia en el STYLE de cualquier objeto, nos da unas posibilidades enormes para cambiar de forma sustancial el IU mediante los manejadores de eventos Javascript.

2.1 De color de fondo: La primera aplicación va a ser cambiar el color de fondo de un contenedor. Para ello, le definiremos mediante un <DIV> y le asignaremos su "ID" correspondiente:

Länsstyrelserna har ansvaret för fördelning och uppföljning av regionala mål och delmål. Flera av länsstyrelserna har redan beslutat om sina regionala mål - du når dem via sidan Regionala miljömål.

Länsstyrelserna samarbetar i RUS-projektet för att ta fram ett uppföljningssystem med gemensamma indikatorer. Regionala presentationer av indikatorer finns under respektive nationell presentation.

Cambiar Fondo Restaurar Fondo

En primer lugar definimos un contenedor mediante un <DIV>:

Este <DIV>:tiene asociada la clase block1 que le confiere la apariencia inicial:

.block1 {position: relative;top: 20px;left: 30px;width: 200px;height: auto;display: block;background: #5F9EA0;color: #FFFFFF;border: 2px groove #FF7755;padding: 5px;font-weight:normal;font-size: 10px;text-align: left;text-decoration: none;font-family: verdana,arial,helvetica,sans-serif;}

Mediante las siguientes 2 funciones Javascript alteramos el atributo background del STYLE del objeto, con la primera, y le restituímos a su valor original, con la segunda:

function FChangeBg(id)
{
document.getElementById(id).style.background='navy';
}

function FChangeInverseBg(id)
{
document.getElementById(id).style.background='#5F9EA0';
}

2.2 De color del texto: A continuación, complicaremos un poco más el ejemplo anterior cambiando además el color del texto.

Länsstyrelserna samarbetar i RUS-projektet för att ta fram ett uppföljningssystem med gemensamma indikatorer. Regionala presentationer av indikatorer finns under respektive nationell presentation.

Cambiar Fondo + Color de Texto Restaurar Fondo + Color de Tetxo

Igual que antes, tenemos definido el contenedor mediante un <DIV> y la clase block1 correspondiente:

Y con las siguientes 2 funciones Javascript alteramos tanto el atributo background como el color del STYLE del objeto, con la primera, y les restituímos a su valor original, con la segunda:

function FChangeColor(id)
{
document.getElementById(id).style.background='navy';
document.getElementById(id).style.color='#FFFF00';
}

function FChangeInverseColor(id)
{
document.getElementById(id).style.background='#5F9EA0';
document.getElementById(id).style.color='#FFFFFF';
}

2.3 Del tipo, tamaño y peso de la fuente: Ahora, vamos a cambiar el tipo, el tamaño y el peso de la fuente utilizada para el texto:

Länsstyrelserna samarbetar i RUS-projektet för att ta fram ett uppföljningssystem med gemensamma indikatorer. Regionala presentationer av indikatorer finns under respektive nationell presentation.

Cambiar Tipo + Tamaño + Peso Restituir Tipo + Tamaño + Peso

Como siempre, tenemos definido el contenedor mediante un <DIV> y la clase block1 correspondiente:

Y con las siguientes 2 funciones Javascript alteramos tanto el atributo tipo como el tamaño y el peso de la fuente del STYLE del objeto, con la primera, y les restituímos a su valor original, con la segunda:

function FChangeFontFamily(id)
{
document.getElementById(id).style.fontFamily='Times New Roman';
document.getElementById(id).style.fontWeight='bold';
document.getElementById(id).style.fontSize='12px';
}

function FChangeInverseFontFamily(id)
{
document.getElementById(id).style.fontFamily='Verdana';
document.getElementById(id).style.fontWeight='normal';
document.getElementById(id).style.fontSize='10px';
}

2.4 De otras propiedades del Texto Finalmente, vamos a cambiar varias propiedades del texto a la vez. En concreto, alineación, espaciado de letras, espaciado de palabras y decoración.

Länsstyrelserna samarbetar i RUS-projektet för att ta fram ett uppföljningssystem med gemensamma indikatorer. Regionala presentationer av indikatorer finns under respektive nationell presentation.

Alineación + Espaciados + Decoración Restituir Alineación + Espaciados + Decoración

Como siempre, tenemos definido el contenedor mediante un <DIV> y la clase block1 correspondiente:

Las siguientes 2 funciones Javascript serán las que modifiquen / restituyan los atributos de alineación, espaciado de letras, espaciado de letras y palabras y decoración:

function FChangeTexto(id)
{
document.getElementById(id).style.textAlign='justify';
document.getElementById(id).style.textDecoration='line-through';
document.getElementById(id).style.letterSpacing='2px';
document.getElementById(id).style.wordSpacing='2em'
}

function FChangeInverseTexto(id)
{
document.getElementById(id).style.textAlign='left';
document.getElementById(id).style.textDecoration='none';
document.getElementById(id).style.letterSpacing='normal';
document.getElementById(id).style.wordSpacing='normal'
}

2.5 De los bordes del contenedor Dejando a un lado las posibles modificaciones de características de fuentes y textos, volvamos de nuevo a aspectos isuales del contenedor. Volviendo al caso 2.1, vamos a modificar con un único "click", además del fondo del contenedor y el color del texto, los bordes del mismo.

Länsstyrelserna samarbetar i RUS-projektet för att ta fram ett uppföljningssystem med gemensamma indikatorer. Regionala presentationer av indikatorer finns under respektive nationell presentation.

Cambiar Fondo + Color de Texto + Bordes Restituir Fondo + Color de Texto + Bordes

Como siempre, tenemos definido el contenedor mediante un <DIV> y la clase block1 correspondiente:

Las siguientes 2 funciones Javascript serán las que modifiquen / restituyan los atributos de fondo, color de texto y propiedades de los bordes:

FChangeBorder(id)
{
document.getElementById(id).style.background='navy';
document.getElementById(id).style.color='#FFFF00';
document.getElementById(id).style.borderWidth='10px';
document.getElementById(id).style.borderStyle='outset';
document.getElementById(id).style.borderColor='#A4C0CC';
}

FChangeInverseBorder(id)
{
document.getElementById(id).style.background='#5F9EA0';
document.getElementById(id).style.color='white';
document.getElementById(id).style.borderWidth='2px';
document.getElementById(id).style.borderStyle='groove';
document.getElementById(id).style.borderColor='#FF7755';
}

2.6 Del relleno del contenedor Y ahora, además al caso 2.5, vamos a aplicarle además un relleno entre el texto y los bordes del contenedor del mismo.

Por complicarlo un poco, vamos a hacer que sean diferentes los "paddings" aplicador a los bordes laterales, padding-left: 10px, padding-right: 10px, de los aplicados a los bordes superior e inferior, padding-top: 20px, padding-bottom: 20px

Länsstyrelserna samarbetar i RUS-projektet för att ta fram ett uppföljningssystem med gemensamma indikatorer. Regionala presentationer av indikatorer finns under respektive nationell presentation.

Cambiar Fondo + Color de Texto + Bordes + Padding Restituir Fondo + Color de Texto + Bordes + Padding

Con el mismo contenedor de siempre:

A las 2 funciones Javascript anteriores les añadimos el código que modifique / restituya los "paddings":

FChangePadding(id)
{
document.getElementById(id).style.background='navy';
document.getElementById(id).style.color='#FFFF00';
document.getElementById(id).style.borderWidth='10px';
document.getElementById(id).style.borderStyle='outset';
document.getElementById(id).style.borderColor='#A4C0CC';
document.getElementById(id).style.paddingLeft='10px';
document.getElementById(id).style.paddingRight='10px';
document.getElementById(id).style.paddingTop='20px';
document.getElementById(id).style.paddingBottom='20px';
}

FChangeInversePadding(id)
{
document.getElementById(id).style.background='#5F9EA0';
document.getElementById(id).style.color='white';
document.getElementById(id).style.borderWidth='2px';
document.getElementById(id).style.borderStyle='groove';
document.getElementById(id).style.borderColor='#FF7755';
document.getElementById(id).style.padding='5px';
}

2.7 Mostrar / ocultar contenidos En este ejemplo vamos a ver de que forma sencilla cambiar la propiedad visibility para hacer un determinado contenido. visible o invisible

Länsstyrelserna samarbetar i RUS-projektet för att ta fram ett uppföljningssystem med gemensamma indikatorer. Regionala presentationer av indikatorer finns under respektive nationell presentation.

Este es un segundo bloque de contenido dentro del principal

Cambiar Fondo + Color de Texto + Mostrar conten. Restituir Fondo + Color de Tetxo + Ocultar conten.

Además del contenedor de siempre:

.block1 {position: relative;top: 20px;left: 30px;width: 200px;height: auto;z-index: 1;display: block;background: #5F9EA0;color: #FFFFFF;border: 2px groove #FF7755;padding: 5px;font-weight:normal;font-size: 10px;text-align: left;text-decoration: none;font-family: verdana,arial,helvetica,sans-serif;}

Tenemos ahora un segundo contenedor definido por su propio "id" y su clase de estilo "block2":

.block2 {position: relative;top: -10px;left: 5px;width: 180px;height: 100px;z-index: 2;visibility: hidden;background: #FFFFFF;color: #BB8800;border: 2px inset #ADD8E6;padding: 15px;font-weight:normal;font-size: 10px;text-align: left;text-decoration: none;font-family: verdana,arial,helvetica,sans-serif;}

Habiendo asociado a las clases de cada contenedor un z-index que de prevalencia de primer plano al contenedor "block2".

A las 2 funciones Javascript que cambiaban el fondo y el color:

function FChangeColor(id)
{
document.getElementById(id).style.background='navy';
document.getElementById(id).style.color='#FFFF00';
}

function FChangeInverseColor(id)
{
document.getElementById(id).style.background='#5F9EA0';
document.getElementById(id).style.color='#FFFFFF';
}

Añadimos otras 2 más que muestren u oculten el 2º contenedor:

FChangeVisibility(id)
{
document.getElementById(id).style.visibility='visible';
}

FChangeInverseVisibility(id)
{
document.getElementById(id).style.visibility='hidden';
}

Siendo el código HTML que lanza los eventos:

<a href="javascript:void(null)" class="buttonAction" onClick="FChangeColor('b7');FChangeVisibility('b72')"> Cambiar Fondo + Color de Texto + Mostrar contenidos</a>
<a href="javascript:void(null)" class="buttonAction" onClick="FChangeInverseColor('b7');FChangeInverseVisibility('b72')"> Restituir Fondo + Color de Tetxo + Ocultar contenidos</a>

2.8 Redimensionamiento Avanzando en los aspectos más "dinámicos" de modificación de objetos, ahora voas a cambiar el tamaño del contenedor con el que venimos trabajando. Aprovechando la potencia de DOM y modificando atributos del STYLE del contenedor, es francamente sencillo.

Länsstyrelserna samarbetar i RUS-projektet för att ta fram ett uppföljningssystem med gemensamma indikatorer. Regionala presentationer av indikatorer finns under respektive nationell presentation.

Cambiar Tamaño Restituir Tamaño

Con el mismo contenedor de siempre:

.block1 {position: relative;top: 20px;left: 30px;width: 200px;height: 200px;z-index: 1;display: block;background: #5F9EA0;color: #FFFFFF;border: 2px groove #FF7755;padding: 5px;font-weight:normal;font-size: 10px;text-align: left;text-decoration: none;font-family: verdana,arial,helvetica,sans-serif;}

Utilizaremos las siguientes 2 funciones Javascript para cambiar y restituir el tamaño del contenedor:

function FChangeSize(id)
{
document.getElementById(id).style.width='400px';
document.getElementById(id).style.height='280px';
}

function FChangeInverseSize(id)
{
document.getElementById(id).style.width='200px';
document.getElementById(id).style.height='200px';
}

2.9 Movimientos Para finalizar con las modificaciones de atributos del STYLE del contenedor, vamos a ver como producir movimientos en el mismo.

Länsstyrelserna samarbetar i RUS-projektet för att ta fram ett uppföljningssystem med gemensamma indikatorer. Regionala presentationer av indikatorer finns under respektive nationell presentation.

Desplazar Volver a posición inicial

Con el mismo contenedor de siempre:

Utilizaremos las siguientes 2 funciones Javascript para desplazar el contenedor:

function FChangeMove(id)
{
document.getElementById(id).style.left='280px';
document.getElementById(id).style.top='70px';
}

function FChangeInverseMove(id)
{
document.getElementById(id).style.left='30px';
document.getElementById(id).style.top='20px';
}

Capítulos:
Modificaciones de Style Modificaciones de Reglas

Temas relacionados: Ejemplos y trucos útiles con CSS's | Tabla de Referencia de CSS's | Tablas y CSS's