Outbook

HTML+CSS+JS, Accesibilidad, PHP y más

Inicio que contiene a DOM

Datos de búsqueda

Etiqueta ‘DOM’

Ejecución de funciones Javascript a la carga del DOM (DOM Ready)

Fecha de publicación: 2008/08/25

Para activar los comportamientos Javascript cuando se haya cargado el DOM es más sencillo utilizar algún framework, como Prototype o Jquery.

En estos ejemplos se pretende lanzar la función prueba.

Prototype

Primera variante:

document.observe("dom:loaded", prueba);

Segunda variante:

document.observe("dom:loaded", function() {
 prueba();
});

Prototype: document.observe

Jquery

$(document).ready(function(){
 prueba();
});

Jquery: evento ready

Datos del artículo:

Inserción de elementos en Javascript: insertBefore y appendChild

Fecha de publicación: 2008/02/11

Método appendChild

El método appendChild permite insertar un elemento al final de otro.

Supongamos que tenemos este HTML:

<div>
 <p id="existente">Elemento existente</p>
</div>

Y queremos que pase a ser así:

<div id="contenedor">>
 <p id="existente">Elemento existente</p>
 <p id="nuevo">Elemento nuevo</p>
</div>

No habría más que utilizar el siguiente código Javascript:

elemento1 = document.createElement('p');
elemento1.appendChild(document.createTextNode('Elemento nuevo'));
elemento1.id = 'nuevo';
elemento2 = document.getElementById('contenedor');
elemento2.appendChild(elemento1);

Método insertBefore (o insert before)

El método insertBefore tiene una función similar a appendChild, solo que no inserta el elemento hijo justo al final del elemento padre, sino antes de un elemento concreto que hay que especificar.

Supongamos que tenemos este HTML:

<div>
 <p id="existente">Elemento existente</p>
</div>

Y queremos que pase a ser así:

<div>
 <p id="nuevo">Elemento nuevo</p>
 <p id="existente">Elemento existente</p>
</div>

No habría más que utilizar el siguiente código Javascript:

elemento1 = document.createElement('p');
elemento1.appendChild(document.createTextNode('Elemento nuevo'));
elemento1.id = 'nuevo';
elemento2 = document.getElementById('existente');
elemento2.parentNode.insertBefore(elemento1,elemento2);

Saber más

Datos del artículo:

Javascript: Secciones desplegables

Fecha de publicación: 2007/12/29

He montado un ejemplo de secciones de página desplegables.

Al cargar la página esas secciones se pliegan automáticamente, y el encabezado que las precede adquiere forma de enlace para poder desplegarlas y plegarlas. Si Javascript no está disponible, no habrá enlace en el encabezado ni se plegarán las secciones.

El bloque de secciones es precedido por un menú con dos enlaces: uno para plegar todas las secciones y otro para desplegarlas todas. Este menú se inserta mediante Javascript, por lo que en ausencia de Javascript no se mostrará.

Su funcionamiento se ha comprobado en Internet Explorer (versiones 5.5, 6 y 7), Firefox 2.0.0.11 (Windows XP), Iceweasel 2.0.0.8 (Debian 4.0), Opera 9.25 (Windows XP), Opera 9.24 (Debian 4.0), Konqueror 3.5.5 (Debian 4.0) y Safari 3.0.4 (Windows XP).

Ejemplos

Ver ejemplos de funcionamiento:

Descarga

Descargar ejemplos (archivo ZIP)

Datos del artículo:

Las tres capas del diseño web

Fecha de publicación: 2007/06/26

Las interfaces web se componen de tres capas:

  • Contenido.
  • Presentación.
  • Comportamiento.

Presentación y comportamiento son opcionales.

Contenido

Se trata del contenido y de su estructuración semántica: el documento HTML. Cada porción de texto deberá ser contenida en el elemento adecuado a su contexto (párrafos, listas, encabezados, etc.), o llevar la información adicional que sea necesaria (el texto alternativo en las imágenes, por ejemplo).

Aquí no se definirá absolutamente nada relacionado con la presentación: nada de configurar colores, tipografías, fondos, etc. Nada.

Si todo esto se hace correctamente se habrá dado un paso muy importante hacia la accesibilidad, y también en cuanto al posicionamiento en buscadores. El documento será legible sin necesidad de las otras dos capas.

Presentación

En esta capa se definirá el aspecto del contenido, mediante hojas de estilo CSS.

El CSS se introduce preferentemente en un archivo, o varios, separados del contenido.

Se pueden aplicar hojas de estilo para dispositivos específicos: pantalla (la más habitual), PDA, impresoras, lectores de pantalla, etc. De esta forma se podrá optimizar el aspecto de un sitio web atendiendo a las necesidades específicas de cada dispositivo.

Además hacer la capa de presentación separada de la de contenido tiene otra ventaja importante: con solo cambiar la hoja de estilo, cambia el aspecto de todo el sitio al que se aplique la misma. Un ejemplo interesante de esta ventaja es el CSS Zen Garden, donde con un mismo contenido pero con diferentes hojas de estilo se consiguen resultados muy variados.

Comportamiento

Se trata de añadir funcionalidades con algo más de complejidad, como elementos desplegables, rollovers, etc. Se hace mediante Javascript que interactue con el DOM.

El código Javascript deberá estar contenido en archivos externos, igual que las hojas de estilo en la capa anterior.

La adición de esta capa no debe impedir el correcto acceso al contenido.

Saber más

Datos del artículo:

CSS: la propiedad text-transform

Fecha de publicación: 2007/06/11

La propiedad de CSS text-transform es muy útil para transformar los caracteres de un texto en mayúsculas o minúsculas. Puede aplicarse a cualquier elemento.

Esta propiedad puede tener los siguientes valores:

  • capitalize: convierte en mayúscula la primera letra de cada palabra.
  • uppercase: convierte todas las letras en mayúsculas.
  • lowercase: convierte todas las letras en minúsculas.
  • none: es el valor aplicado por defecto en los navegadores cuando no se especifica otro. Sirve, además, para neutralizar los valores anteriores.

Su funcionamiento puede verse limitado cuando se utiizan caracteres que no pertenezcan al alfabeto latino.

En el siguiente ejemplo todos los caracteres de los elementos H1 existentes en el documento pasarían a estar en mayúsculas:

h1 {text-transform: uppercase;}

Ejemplo de uso con Javascript-DOM (solo se ha de poner uno de los valores):

Object.style.textTransform=none|capitalize|uppercase|lowercase

Referencias y enlaces relacionados

Datos del artículo:

Información del sitio

Outbook está basado en WordPress

Licencia Reconocimiento-NoComercial-CompartirIgual

Feed RSS: