Es totalmente gratuito (versión para 20 asistentes y un orador) y está pensado para empresas o particulares que desean compartir experiencias o reuniones a través de la Web. Es tan simple su funcionamiento, que cualquiera puede utilizarlo. El usuario no tiene que instalarse ningún programa en su equipo para empezar a utilizarlo. Dimdim esta disponible en código abierto para poder mejorarlo libremente.

No es una aplicación de escritorio, lo que lo hace mas versatil, ya que podemos conectarnos o realizar los Webminarios desde cualquier parte del planeta, eso si, si se dispone de conexión a Internet.

Cualquier persona puede registrase y comenzar en pocos clics a realizar demostraciones, reuniones o conferencias. Los clientes que deseen personalizar Dimdim, para hacer uso de esta herramienta en su Intranet o página Web. Pueden comprar por 99$ al año el programa Profesional. Y si se trata de una empresa con muchos convocados en sus reuniones, pueden comprar Dimdim Empresas, con un coste mas inferior en comparación a otras soluciones existentes en el mercado.

Dimdim se inició en febrero de 2006, y está respaldada por Nexus India Capital, Index Ventures y Draper Richards.

Referencia: http://www.dimdim.com/

Posiblemente,  disponemos de documentación de nuestros clientes, en donde aparece su correo electrónico, deseamos extraerlo, pero es laborioso tener que revisar o buscar el email.

Existen varios modos de hacerlo, pero el propongo aquí me ha resultado curioso, rápido y me ha salvado de copiar y pegar uno a uno de un documento PDF de más de 145 páginas.

Lo encontré en SURF7 NETWORKS, una empresa dentro del sector de las IT, fundada en el año 2002 y dedicada al alquiler de Hosting, registros de dominios, desarrollo y diseño Web, comercio electrónico, conexiones de banda ancha y certificados digitales SSL.

En su apartado de herramientas gratuitas para el desarrollo web, encontramos el extractor de emails del que os comento.

http://www.surf7.net/product/tools/extractor.php

Conoce la marca

Para empezar, debemos utilizar el mejor método para definir un menú de navegación. Para este ejemplo, vamos a trabajar con las simples listas ordenadas de HTML.

<ul>
<li>Sunfishes
<ul>
<li><a href=”">Blackbanded»sunfish</a></li>
<li><a href=”">Shadow bass</a></li>
<li><a href=”">Ozark bass</a></li>
<li><a href=”">White crappie</a></li>
</ul>
</li>

<li>Grunts
<ul>
<li><a href=”">Smallmouth grunt</a></li>
<li><a href=”">Burrito</a></li>
<li><a href=”">Pigfish</a></li>
</ul>
</li>

<li>Remoras
<ul>
<li><a href=”">Whalesucker</a></li>
<li><a href=”">Marlinsucker</a></li>
<li><a href=”">Ceylonese remora</a></li>
<li><a href=”">Spearfish remora</a></li>
<li><a href=”">Slender suckerfish</a></li>
</ul>
</li>
</ul>

Realmente sencillo, bonito y HTML puro que, como resultado de ello, es muy accesible. Pero ahora queremos transformar esto, en una lista dinámica – el primer nivel de la lista de artículos que forman una barra de menú horizontal a partir de la cual se desplegará las listas de segundo nivel.

Dándole estilo

Para empezar todas las listas deben ser lineales, es decir, que los margin y los padding los dejamos a 0 y el list-style a none:

ul {
padding: 0;
margin: 0;
list-style: none;
}

Ahora necesitamos transformar el primer nivel en una lista de menús horizontal. Hay una serie de métodos para realizar esto. Podemos mostrar los articulos de la lista en linea con display:inline, pero para este ejemplo, vamos a flotarlo a la izquierda.

li {
float: left;
position: relative;
width: 10em;
}

La posición se ha establecido en relative, porque nosotros queremos la posición del segundo nivel. El menú esta tomando forma.

El siguiente paso es hacer frente, a las listas de segundo nivel que serán los propios menús:

li ul {
display: none;
position: absolute;
top: 1em;
left: 0;
}

La posición de las listas de segundo nivel es su totalidad y el set inicial no debe de ser mostrado. Si sustituimos display:none por display:block, veremos la necesidad de modificar las propiedades top y left para IE, ya que sin ellos. IE suma las listas de segundo nivel en la parte superior derecha de su pariente en lugar de los padres de la parte inferior izquierda. Des afortunadamente esto es un arreglo para IE ya que estropeará las cosas en otros navegadores , como Opera. Para establecer la parte superior izquierda y en las propiedades de todos los navegadores, añadiremos el siguiente CSS

li > ul {
top: auto;
left: auto;
}

Para que aparezcan las listas de artículos de segundo nivel ,cuando el ratón se pone encima, simplemente necesitaremos agregar lo siguiente:

li:hover ul { display: block; }

Esto significa, que cualquier lista anidada a un elemento de la lista donde el cursor se ponga encima, se muestre.

Por último, ya que las listas están flotando a la izquierda, el contenido que hay debajo de él, debe de ser liberado de la flotabilidad, mediante un clear:left.

¡Espera un minuto!

Este desplegable tan chulo no funciona !!!. Según dicen, el 102,6% son usuarios del navegador Internet Explorer (IE). Si se desarrolla bajo unos estandardares web, vemos que los de Micro$oft y su IE no respeta nada. :hover es una pseudo clase que trabaja con cualquier elemento, pero en IE solo funciona con los enlaces. ¿Que uso le daríamos a este menú, si solo lo vamos a ver el -2,6% de los usuarios de otros navegadores?. No mucho, para ser honesto. Tendremos que aplicar un poco más de magia.

DOM basado en secuencias de comandos al rescate

Hemos establecido la falta de apoyo a la pseudo clase :hover por parte de IE. Pero utilizando el Document Object Model (DOM), podemos adjuntar mouseover y mouseout y eventos a cualquier elemento. Esto es una buena noticia para nosotros, porque significa, que con un simple fragmento de JavaScript podemos hacer eficaz los problemas de IE y :hover

Ya que el IE no lo detecta, tendremos que encontrar otra manera de identificar las propiedades de la pseudo clase :hover. Con JavaScript, sabemos que podemos manipular la propiedad del className de un elemento, así que lo primero que haremos será alterar el CSS.

li:hover ul{ display: block; }

se convierte en:

li:hover ul, li.over ul{ display: block; }

Ahora podemos llamar a las reglas del :hover CSS mediante la adición de la clase over al elemento deseado. También necesitamos una manera de decirle a IE cual de los elementos UL en la página queremos realmente sean nuestros menús. Podemos hacer esto dándole una ID a nuestra raíz del elemento UL:

<ul>

se convierte en:

<ul id=”nav”>

Ya tenemos un medio para identificar la raíz del elemento UL de nuestra lista desplegable, podemos agarrar este elemento y darle un loop a través de todos sus elementos hijo, vinculados a todos los eventos mouseover y moseout de todos elementos LI anidados dentro de ellos. Y así es como se hace:

<script type="text/javascript"><!--//--><![CDATA[//><!--

startList = function() {
if (document.all&&document.getElementById) {
	navRoot = document.getElementById("nav");
	for (i=0; i<navRoot.childNodes.length; i++) {
	node = navRoot.childNodes[i];
	if (node.nodeName=="LI") {
		node.onmouseover=function() {
		this.className+=" over";
		}
		node.onmouseout=function() {
		this.className=this.className.replace(" over", "");
		}
	}
}
}
}
window.onload=startList;

//--><!]]></script>

En la página de carga, la función  startList es invocada. La función determina si el navegador es realmente IE5 o superior, chekeando la existencia del document.all y la función document.getElementById. Esto es una manera un poco cruda de hacerlo, pero es corto y cómodo. Desde que intentamos una hacer una solución compacta, esta lo hará. A continuación, a través de los loops, permite a los eventos mouseover y al mouseout a cual añadir o quitar la propiedad de la clase over del elemento className.

Esto son agallas, aletas y espinas

Hasta el momento esta quedando desnudo. La idea ha sido enseñar el básico funcionamiento del menú desplegable Suckerfish. Pero CSS puede hacer que las cosas se vean mucho mejor. Un punto de salida obvio sería aplicar un color de fondo a la lista de segundo nivel.

Despues de resetear las propiedades top y left descritas anterior mente, los menús aparecen directamente debajo de las etiquetas en la mayoría de los navegadores modernos, pero desafortunadament, no en todos. EL Safari 1.0 , todavía se caen desde el punto superior derecho de la pantalla.

Además usabilidad y accesibilidad

Hacer enlaces en listas de primer nivel, permitirá al tab-stopping para los lectores que no utilizan dispositivos de puntero. Refiriéndose a los vínculos de las páginas de nivel superior donde los enlaces y los menús serán, incluso mejores.

URL ORIGINAL: http://www.alistapart.com/articles/dropdowns/#resettop

]]> http://webealo.wordpress.com/2008/10/25/menu-suckerfish-por-patrick-griffiths-y-dan-webb/feed/ 0 webmaster de webealo http://webealo.wordpress.com/2008/10/19/introduccion-al-modelo-de-objetos-de-documento-dom/ http://webealo.wordpress.com/2008/10/19/introduccion-al-modelo-de-objetos-de-documento-dom/#comments Sun, 19 Oct 2008 20:14:56 +0000 webealo http://webealo.wordpress.com/?p=49 ]]> El Modelo de Objetos de Documento o DOM, es la interfaz que te permite acceder y manipular, mediante la programación, los contenidos de una página web (o documento). Proporciona una representación estructurada, orientada a objetos, de los elementos individuales y el contenido de una página, con métodos para recuperar y fijar las propiedades de dichos objetos. Además, proporciona métodos para agregar y eliminar dichos objetos, permitiéndote crear contenido dinámico.

El DOM proporciona también una interfaz para trabajar con eventos, permitiéndote capturar y responder a las acciones del usuario o del navegador. Noscentraremos en la representación DOM de un documento y los métodos que proporciona para acceder a dichos objetos.

Niveles del DOM

Con el fin de proporcionar cierta compatibilidad hacia atrás, se definieron diferentes niveles del estándar del DOM. Encontrarás referencias al DOM Nivel 0 (o “DOM0″) que corresponde al modelo usado por los primeros navegadores scriptables – principalmente Internet Explorer y Netscape anteriores a la versión 4 de cada uno. A continuación está el DOM1 que fué adoptado en 1998 y que cubre algunas de las características introducidas en la versión 4 de los navegadores.

Navegadores Compatibles con los Estándares

Este artículo se centrará precisamente en el actual estándar DOM2. Aunque este estándar se aplica a los documentos XML en general(extended markup language), discute cómo el estándar se aplica a HTML en particular (ya que éste es un derivado de XML).

la programación DOM también es indirectamente dependiente de los estándares para HTML y CSS, dado que el DOM refleja las etiquetas y atributos definidos para dichos estándares. También depende de un estándar para JavaScript ya que el DOM es esencialmente una API para client-side scripting.

El Árbol del Documento

Cuando un navegador carga una página, crea una representación jerárquica de sus contenidos que representa, aproximadamente, su estructura HTML. Esto desemboca en una organización parecida a un árbol de nodos, cada uno representando un elemento, un atributo, contenido o algún otro objeto.

Nodos

Cada uno de estos tipos diferentes de objetos tendrá sus propios y únicos métodos y propiedades. Pero cada tipo implementará también la interfaz Node. Esta interfaz es un conjunto común de métodos y propiedades relacionadas con la estructura de árbol del documento. Para comprender mejor esta interfaz, échale un vistazo al diagrama de abajo que representa un árbol de nodos simple.

El objeto Node proporciona varias propiedades que reflejan esta estructura y te permiten recorrer el árbol. Aquí hay algunas relaciones usando el ejemplo anterior:

• NodeA.firstChild = NodeA1
• NodeA.lastChild = NodeA3
• NodeA.childNodes.length = 3
• NodeA.childNodes[0] = NodeA1
• NodeA.childNodes[1] = NodeA2
• NodeA.childNodes[2] = NodeA3
• NodeA1.parentNode = NodeA
• NodeA1.nextSibling = NodeA2
• NodeA3.prevSibling = NodeA2
• NodeA3.nextSibling = null
• NodeA.lastChild.firstChild = NodeA3a
• NodeA3b.parentNode.parentNode = NodeA

La interfaz Node también proporciona métodos para añadir, actualizar y eliminar nodos dinámicamente, tales como:

• insertBefore()
• replaceChild()
• removeChild()
• appendChild()
• cloneNode()

Éstos serán cubiertos más tarde. Pero, de momento, vamos a ver cómo refleja el árbol del documento los contenidos de una página web.

La Raíz (Root) Document

El objeto document object sirve de raíz de este árbol de nodos. Implementa también la interfaz Node. Va a tener  nodos hijos pero no tendrá nodo padre ni nodos de su mismo nivel, dado que él es el nodo inicial. Además de ser un Node, también implementa la interfaz Document.

Esta interfaz proporciona métodos para acceder y crear otros nodos en el árbol del documento. Algunos métodos son:

• getElementById()
• getElementsByTagName()
• createElement()
• createAttribute()
• createTextNode()

Nótese que, de modo distinto a los otros nodos, sólo hay un objeto document en una página. Todos los métodos anteriores (excepto getElementsByTagName()) pueden utilizarse sólo contra el objeto document, e.d., usando la sintaxis document. methodName().

El objeto document también puede tener otras propiedades relacionadas con el soporte de antiguos niveles del DOM. Por ejemplo, encontrarás que muchos navegadores tienen todavía los arrays document.images y document.links o las propiedades document.bgColor y document.fgColor relacionadas con los atributos BGCOLOR y TEXT de la etiqueta BODY.

Estas propiedades se mantienen con la intención de proporcionar cierta compatibilidad hacia atrás para que páginas diseñadas para navegadores antiguos sigan funcionando apropiadamente con las nuevas versiones. Pueden utilizarse todavía en los scripts pero probablemente no estén soportadas en las versiones futuras.

Recorriendo el árbol del Documento

Como se ha mencionado, el árbol del documento refleja la estructura del código de una  página. Cada etiqueta o par de etiquetas está representada por un nodo elemento con otros nodos representando atributos o datos de carácter (e.d., texto).

Técnicamente hablando, el objeto document tiene sólo un elemento hijo, dado por document.documentElement. Para páginas web, éste representa la etiqueta exterior HTML, y ésta actua como el elemento raíz del árbol del documento. Va a tener los elementos hijos HEAD y BODY que tendrán a su vez otros elementos hijos.

Utilizando ésto, y los métodos de la interfaz Node , puedes recorrer el árbol del documento para acceder a los nodos individuales contenidos en dicho árbol. Considera lo siguiente:

<html>
<head>
<title></title>
</head>
<body><p>This is a sample paragraph.</p></body>
</html>

y éste código:

alert(document.documentElement.lastChild.firstChild.tagName);

que debería mostrar “P”, el nombre de la etiqueta representada por dicho nodo. El código se puede descomponer como sigue:

• document.documentElement – devuelve la etiqueta HTML de la página.
• .lastChild – devuelve la etiqueta BODY.
• .firstChild – devuelve el primer elemento en BODY.
• .tagName – devuelve el nombre de la etiqueta de dicho elemento, “P” en este caso.

Hay varios problemas obvios para acceder a los nodos de esta forma. Por ejemplo, un simple cambio del código de la página, como agregar texto o elementos con formato o imágenes, cambiará la estructura de árbol. La ruta utilizada anteriormente no apuntará, en ese caso, al nodo intencionado.

Menos obvias son ciertas incompatibilidades entre los navegadores. Nótese que en el ejemplo HTML anterior, no hay espacio entre las etiquetas BODY y P. Si se hubiese añadido simplemente un salto de línea,

<html>
<head>
<title></title>
</head>
<body>

<p>This is a sample paragraph.</p>

</body>
</html>

Netscape añadiría un nodo para este dato, mientras que IE
no lo haría. Por ésto, en Netscape, el código JavaScript
mostrado anteriormente debería devolver "undefined" como su nuevo
puntero para el nodo de texto para este espacio en blanco. Como no es un
nodo elemento, no tiene la propiedad tagName. IE, por su parte, no agrega
nodos para espacios en blanco cómo estos, por lo que todavía.

Accediendo a los Elementos Directamente

Aquí es donde el método document.getElementById() adquiere utilidad. Mediante la adición de un atributo ID a la etiqueta del párrafo (o cualquier otra etiqueta, para el caso), puedes referirte a ella directamente.

<p id="myParagraph">This is a sample paragraph.</p>

...

alert(document.getElementById("myParagraph").tagName);

De este modo, puedes evitar problemas de compatibilidad y actualizar los contenidos de la página sin tener que preocuparte de dónde está el nodo del párrafo en el árbol del documento. Debemos recordar que cada ID tiene que ser único en una página.

Un método algo menos directo de acceder a los nodos de tipo elemento es proporcionado por document.getElementsByTagName(). Éste devuelve un array de nodos representando todos los elementos en una página que tengan la etiqueta HTML especificada. Por ejemplo, podrías cambiar el color de todos los links en una página con lo siguiente.

var nodeList = document.getElementsByTagName("A");
for (var i = 0; i < nodeList.length; i++)
  nodeList[i].style.color = "#ff0000";

Que actualiza simpemente los estilos inline de cada link fijándo el parámetro color en rojo.

Tipos de Nodos

hay varios tipos de nodos definidos en el modelo de objetos de documento, pero los que vas a utilizar con más frecuencia para las páginas web son element, text y attribute.

Los nodos Element, como hemos visto, se corresponden a las etiquetas individualel o pares de éstas en el código HTML. Éstas pueden tener nodos hijos, que pueden ser otros elementos o nodos de texto.

Los nodos Text representan contenido, o datos de carácter. Van a tener un nodo padre y, posiblemente, nodos del mismo nivel, pero no pueden tener nodos hijos.

Los nodos Attribute son un caso especial. No están considerados una parte del árbol del documento – no tienen un nodo padre(parent), ni nodos hijos(children) o nodos del mismo nivel (siblings). En lugar de ello, son utilizados para posibilitar el aceso a los atributos de un nodo elemento. Esto es, representan los atributos definidos en la etiqueta HTML de un elemento, como el atributo HREF de una etiqueta A o el atributo SRC de una etiqueta IMG.

Nótese que los valores de los atributos son siempre cadenas de texto.

Atributos vs. Nodos Atributo

Hay varios modos de hacer referencia a los atributos de un elemento. la razón de ésto es que el estándar del DOM2 fué diseñado para muchos tipos de documentos estructurados (e.d., documentos XML), no sólo HTML. Por lo que define un tipo formal de nodo para los atributos.

Pero para todos los documentos también proporciona algunos métodos mas convenientes para acceder, agregar y modificar atributos, com se describe a continuación.

El método document.createAttribute() te permite crear un nuevo nodo atributo, al cuál le puedes fijar entonces un valor y asignarlo a un nodo elemento.

var attr = document.createAttribute("myAttribute");
attr.value = "myValue";
var el = document.getElementById("myParagraph");
el.setAttributeNode(attr);

No obstante, usualmente es más fácil aceder a los atributos de un elemento directamente usando los métodos del elemento getAttribute() y setAttribute() en su lugar.

var el = document.getElementById("myParagraph");
el.setAttribute("myAttribute", "myValue");

Los atributos de un elemento son representados también como propiedades del nodo elemento. En otras palabras, puedes usar simplemente

var el = document.getElementById("myParagraph");
el.myAttribute = "myValue";

También es interesante resaltar que puedes definir tus propios atributos en la etiqueta HTML en sí misma. Por ejemplo,

<p id="myParagraph" myAttribute="myValue">This is a sample paragraph.</p>

...

alert(document.getElementById("myParagraph").getAttribute("myAttribute"));

mostrará “myAttribute.” Pero fíjate en que deberías usar element .getAttribute(attributeName) en lugar de element.attributeName para obtener el valor ya que algunos navegadores no registrarán los atributos definidos por el usuario como propiedades del elemento.

Los atributos también pueden removerse de un nodo elemento, utilizándo indistintamente los métodos removeAttribute() o removeAttributeNode() o fijándolos en la propiedad element.attributeName a una cadena nula (“”).

La alteración de los atributos es uno de los modos de crear efectos dinámicos.

El código es bastante simple:

<p id=”sample1″ align=”left”>Text in a paragraph element.</p>

… code for the links …

document.getElementById(‘sample1′).setAttribute(‘align’, ‘left’);
document.getElementById(‘sample1′).setAttribute(‘align’, ‘right’);

Atributos de estilo

La mayor parte de los atributos para las etiquetas HTML son bastante simples, definen un único valor para una propiedad específica para dicha etiqueta. Los estilos son un poco más complicados. Como sabes, CSS puede ser utilizado para aplicar parámetros de estilo a una etiqueta individual, a todas las etiquetas de un tipo dado o a las que hayamos asignado  clases. Asímismo, los estilos para un elemento en particular pueden ser heredados dede cualquiera de éstas fuentes.

También puedes alterar estos estilos a varios niveles. Por ejemplo, puedes cambiar el atributo STYLE de una etiqueta HTML, o su atributo CLASS. Pero estos métodos alterarán todos los parámetros de estilo de un elemento. Frecuentemente, vas a querer cambiar sólamente un sólo parámetro, o unos pocos seleccionados, mientras que retendrás los demás.

Afortunadamente, el atributo style de un nodo elemento está definido como un objeto con propiedades para cada parámetro de estilo posible. Puedes acceder y actualizar estos parámetros individuales como desees.

Pero en este caso, la alineación del texto está definida y alterada usando un parámetro de style en lugar del atributo ALIGN. Aquí está el código subyacente al ejemplo:

<p id="sample2" style="text-align:left;">Text in a paragraph
element.</p>

... code for the links ...

document.getElementById('sample2').style.textAlign = 'left';
document.getElementById('sample2').style.textAlign = 'right';

Nótese que cuando el nombre de un parámetro CSS contiene un guión (“-”) como en “text-align”, el nombre de su correspondiente propiedad style se construye quitando el guión y pasando a mayúsculas la primera letra que le sigue, en este caso quedaría como “textAlign.”

Nótese que incluso si un parámetro en particular de style no está definido inicialmente para un elemento, sigues pudiendo fijar su valor usando DOM. Por ejemplo, en el código anterior el estilo  ‘inline’ style= en la etiqueta P realmente no es necesario.

Usando las técnicas que hemos discutido, podrías ser muy poco peligroso. Has visto como puedes acceder y alterar dinámicamente algunas propiedades o parámetros de estilo de un elemento en una página.

Pero, ¿qué hay de agregar y manipular dinámicamente elementos y contenido? ¿Y cambiar el contenido en sí mismo?

Contenido Dinámico

Cambiar contenido textual es relativamente simple. Cada cadena contínua de datos de carácter en el cuerpo de una página HTML es representada por un nodo de texto. El valor de la propiedad nodeValue de estos nodos es el texto en sí mismo. Cambiando dicho valor, cambiaremos el texto en una página.

Nodos de Texto

Ahora veamos el código que hay detrás de ésto:

<p id="sample1">This is the initial text.</p>

... code for the links ...

document.getElementById('sample1').firstChild.nodeValue =
  'Once upon a time...';
document.getElementById('sample1').firstChild.nodeValue =
  '...in a galaxy far, far away';

Hay unas cuantas cosas importantes que debemos resaltar aquí. La primera, los nodos de texto no tienen un atributo ID como pueden tenerlos los nodos elementos. Por lo tanto, no podemos acceder a ellos directamente usando métodos como document.getElementById() or document.getElementsByTagName().

En su lugar, el código hace referencia al texto usando su nodo padre, en este caso es el elemento párrafo con un ID “sample1″. Este nodo elemento tiene un nodo hijo, el nodo textoque queremos actualizar. Puedes verlo en el diagrama siguiente.

Así document.getElementById('sample1').firstChild.nodeValue se ha utilizado para acceder a este nodo de texto y leer o fijar su valor de cadena.

Es importante recordar que los nodos de texto contienen justamente eso, texto. Cualquier etiqueta de marcado simple como B o I dentro de una cadena de texto creará un sub-árbol de elemento y nodos texto. Por ejemplo, usando el ejemplo anterior y agregando etiquetas para poner en negrita la palabra “initial”:

<p id="sample2">This is the <b>initial</b> text.</p>

tendremos que el árbol del elemento párrafo “sample2″ tienen tres hijos en lugar de uno. Hay un nodo texto para “This is the “, un nodo elemento para el par de etiquetas B y un nodo texto para ” text.”. El nodo para el elemento B element tiene un nodo hijo, un nodo de texto para “initial”. Puedes ver la estructura en el diagrama que sigue.

Cambiar firstChild del elemento  P ahora sólo afecta al texto “This is the “. Coloquialmente hablando, si intentas agregar marcado al valor de un nodo de texto, el navegador lo va a tratar como texto plano.

Donde el código del link se ha modificado como sigue:

document.getElementById('sample3').firstChild.nodeValue =
  '<b>Once</b> upon a time...';
document.getElementById('sample3').firstChild.nodeValue =
  '...in a galaxy <i>far, far</i> away';

Puedes eludir problemas como este pensando en los nodos de texto como cadenas individuales de datos de carácter localizados entre cualquiera dos etiquetas HTML, no necesariamente entre la primera pareja de etiquetas.

document.getElementById('sample4').innerHtml =
  "<b>Once</b> upon a time...";

Añadiendo Nodos

Los Nodos se pueden agregar también al DOM. Acabas de ver como los nodos atributo pueden ser creados y aplicados a un elemento, y ahora vamos a ver cómo agregar nodos elemento y nodos texto al árbol del documento (sin utilizar la propiedad innerHTML).

El primer paso es crear un objeto nodo del tipo que quieras utilizar de entre document.createElement(), document.createAttribute() o document.createTextNode(). Para atributos, sin embargo, probablemente querrás crear un nodo elemento y asignárselos a éste directamente (recalcar que IE, hasta la versión 5.5, no soporta createAttribute()).

Trabajando con Nodos de Texto

Vamos a empezar con un nodo de texto. Abajo hay un código de ejemplo mostrando cómo crear un nodo de texto y asignarle un valor.

var myTextNode = document.createTextNode("my text");

Ahora tienes un nodo de texto. Pero no es parte del árbol del documento. Para hacer que aparezca en la página, necesitas agregarlo como un hijo de un nodo existente dentro del árbol. Como los nodos de texto no pueden tener nodos hijos, no puedes agregárselo a otro  nodo de texto. Los nodos atributos no son parte del árbol del documento, por lo que tampoco puedes agregarles nuevos nodos. Ésto nos deja sólo los nodos de tipo elemento.

Puesto que los nodos elemento pueden tener varios hijos, son proporcionados unos cuantos métodos diferentes que te permiten especificar dónde añadir los nuevos nodos entre sus hijos existentes. Esto se puede ilustrar mejor con un ejemplo.

Aquí, el método appendChild() para agregar nuevo texto a un elemento párrafo. También te permite remover el último nodo añadido usando el método removeChild() :

Initial text within a paragraph element.

var counter1 = 0;
function addText1() {
var text, el;
text = document.createTextNode(” new text ” + (++counter1));
el = document.getElementById(“sample1″);
el.appendChild(text);
return false;
}
function removeText1() {
var el;
el = document.getElementById(“sample1″);
if (el.hasChildNodes())
el.removeChild(el.lastChild);
return false;
}

Ahora echémosle un vistazo al código:

<p id="sample1">Initial text within a paragraph element.</p>

... code to add a text node ...

var text = document.createTextNode(" new text " + (++counter1));
var el = document.getElementById("sample1");
el.appendChild(text);

... code to remove the last child node ...

var el = document.getElementById("sample1");
if (el.hasChildNodes())
  el.removeChild(el.lastChild);

Agregar texto es fácil, el código crea un nuevo nodo de texto, localiza el nodo del elemento párrafo y llama a appendChild() para insertarlo al final de su array childNodes. Una variable contador global es utilizada en el propio texto para que puedas distinguir cada nuevo nodo en lo que muestra el navegador.

Quitar texto es casi tan fácil, usando una llamada a removeChildNode() . La única diferencia está en la adición de un nodo de referencia, cuál de los hijos del elemento debe ser removido. Aquí utilizamos la propiedad lastChild del elemento que siempre apunta al último nodo de la matriz de childNodes del elemento. Nótese que también va a eleiminar el texto inicial escrito inicialmente en el código de la etiqueta P si éste es el único hijo.

Resaltar también el uso del método hasChildNodes() que simplemente devuelve true o false para indicar si el nodo dado tiene algún hijo actualmente. Aquí se ha utilizado para prevenirt un error por llamar removeChild cuando no le queda ningún hijo.

Normalizando y Partiendo Nodos de Texto

En ejemplo anterior, los nuevos nodos de texto se han añadido como hijos independientes. Pero si has escrito texto adicional en el marcado HTML,

<p id="sample1">Initial text within a paragraph element. new text 1
new text 2 new text 3</p>

aparecería en el DOM como un sólo nodo hijo de texto del elemento párrafo. En otras palabras, el árbol de nodos producido añadiendo contenido dinámicamente aparecería diferente del árbol de nodos que resultaría si dicho contenido hubiese sido incluido en el código HTML estático.

Ésto puede o no ser deseable dependiendo de lo que estés intentando hacer. En algunos casos puedes querer combinar nodos de texto para hacer que el árbol refleje como si el nuevo contenido, añadido dinámicalmente, fuese una parte del código original HTML, estático.

El método normalize() nos proporciona dicha funcionalidad. Llamándolo sobre un elemento “limpiará” el árbol de nodos, combinando cualquiera de los nodos de texto adyacentes y eleiminando cualquiera de los que estén vacios.

Para demostrarlo, aquí está el mismo ejemplo utilizado anteriormente pero con links adicionales proporcionados para normalizar el elemento párrafo y mostrar su número actual de hijos.

Initial text within a paragraph element.

var count2 = 0;
function addText2() {
var text, el;
text = document.createTextNode(” new text ” + (++count2));
el = document.getElementById(“sample2″);
el.appendChild(text);
return false;
}
function removeText2() {
var el;
el = document.getElementById(“sample2″);
if (el.hasChildNodes())
el.removeChild(el.lastChild);
return false;
}
function normalizeText2() {
var el;
el = document.getElementById(“sample2″);
if (el.normalize)
el.normalize();
else
alert(“Sorry, not supported in this browser.”);
return false;
}

Puedes ver que mientras que añades texto, el número de nodos hijos aumenta pero que, en cuanto normalizas el párrafo, se combinan en un único nodo de texto. Aquí está el código para los links adicionales:

... normalize element ...

el = document.getElementById("sample2");
el.normalize();

... show number of child nodes ...

el = document.getElementById("sample2");
alert(el.childNodes.length);

También puedes partir un nodo de texto en dos separados usando el método splitText(). Ésto puede resultar útil si quieres alterar dinámicamente una sóla palabra o frase o insertar un elemento en una línea de texto.

Vamos con otro ejemplo. Esta vez, el link remove va a borrar el primer hijo del párrafo. Inicialmente, este va a ser la frase entera. Pero si utilizas separate link primero, va a separar la primera palabra en el texto y subsequentemente ‘remove’ va a borrar sólo esa palabra. El link ‘reset’ te permite empezar de nuevo.

Initial text within a paragraph element.

function splitText3() {
var text, el;
el = document.getElementById(“sample3″);
if (el.hasChildNodes()) {
text = el.firstChild;
i = text.nodeValue.indexOf(” “);
if (i >= 0)
text.splitText(i + 1);
}
return false;
}
function removeText3() {
var el;
el = document.getElementById(“sample3″);
if (el.hasChildNodes())
el.removeChild(el.firstChild);
return false;
}
function reset3() {
var text, el;
el = document.getElementById(“sample3″);
while (el.hasChildNodes())
el.removeChild(el.firstChild);
text = document.createTextNode(“Initial text within a paragraph element.”);
el.appendChild(text);
return false;
}

Y aquí está el código para cada función:

... split at first word ...

el = document.getElementById("sample3");
if (el.hasChildNodes()) {
  text = el.firstChild;
  i = text.nodeValue.indexOf(" ");
  if (i >= 0)
    text.splitText(i + 1);
}

... remove first text node ...

el = document.getElementById("sample3");
if (el.hasChildNodes())
  el.removeChild(el.firstChild);

... reset the example ...

el = document.getElementById("sample3");
while (el.hasChildNodes())
  el.removeChild(el.firstChild);
text = document.createTextNode(
  "Initial text within a paragraph element.");
el.appendChild(text);

Algunas notas aquí. El nodeValue de un nodo de texto es simplemente una cadena. El método splitText() method espera un valor inicial que le diga pro dónde rompe el texto.El método del objeto string indexOf() es utilizado para encontrar el primer espacio en blanco en el texto y pasárselo a splitText().

En segundo lugar, el código de reset simplemente borra todos los nodos hijos del párrafo original y entonces vuelve a agregar el texto original como un sólo nodo.

Trabajando con Nodos de Tipo Elemento

Agregar y quitar nodos de tipo elemento se hace más o menos igual que con los nodos de texto. La diferencia principal reside en la creación del nodo y la colocación de contenido dentro de éste.

En primer lugar, creas un nodo utilizando document.createElement() pasándole como parámetro el nombre de la etiqueta del elemento que quieras construir tal como P, DIV, TABLE, etc. El parámetro es case-insensitive,(insensible al uso de mayúsculas o minúsculas), así tanto “div”, “Div” como “DIV” crearán una etiqueta DIV. Es conveniente resaltar que el navegador devolverá el nombre de la etiqueta en mayúsculas si le preguntamos por éstet, por ejemplo:

var el = document.createElement("div");
alert(el.tagName);

mostraría “DIV”.

Como con los nodos de texto, después de crear un elemento necesitas agregarlo a algún elemento existente en el árbol del documento con el fin de poder verlo en la página.

Pero un nuevo elemento recien creado es simplemente una etiqueta vacía. Probablemente querrás añadirle primero algo de contenido, y fijar algunos de sus atributos. De nuevo un ejemplo práctico que ayudará a comprenderlo.

function addParagraph() {

var paraEl, boldEl;

paraEl = document.createElement(“p”);

boldEl = document.createElement(“b”);

paraEl.appendChild(document.createTextNode(“This is a new paragraph with “));

boldEl.appendChild(document.createTextNode(“bold”));

paraEl.appendChild(boldEl);

paraEl.appendChild(document.createTextNode(” text, added to the DIV”));

document.getElementById(“sample1″).appendChild(paraEl);

return false;

}

Aquí, haciendo click sobre el link crearemos un nuevo elemento P – con algunos nodos hijos propios – y lo agregaremos a un elemento DIV ya existente. Echemos un vistazo al código:

<div id="sample1">This text is in a DIV element.</div>

... code for the link ...

var paraEl, boldEl;

paraEl = document.createElement("p");
boldEl = document.createElement("b");
paraEl.appendChild(
  document.createTextNode("This is a new paragraph with "));
boldEl.appendChild(document.createTextNode("bold"));
paraEl.appendChild(boldEl);
paraEl.appendChild(document.createTextNode(" text added to the DIV"));

document.getElementById("sample1").appendChild(paraEl);

En primer lugar crea 2 nuevos elementos, una etiqueta P y una etiqueta B. Entonces agrega un nuevo nodo de texto con la cadena “This is a new paragraph with ” a la etiqueta del párrafo. Hace lo mismo con la etiqueta B, agregándole el texto “bold”. A continuación, añade dicha etiqueta B (y su nodo de texto hijo) al párrafo. Otro nuevo nodo de texto con la cadena ” text added to the DIV” es agregado al párrafo.

En este punto el elemento párrafo tiene tres hijos, un nodo de texto, un nodo elemento para la etiqueta B y otro nodo de texto. El elemento B tiene un hijo, un nodo de texto. El paso final es insertar el nuevo elemento párrafo dentro de la etiqueta DIV existente en la página.

También podríamos haber fijado cualquier atributo de cada nuevo elemento. No habría ninguna diferencia entre fijar los atributos de un elemento antes o después de haberlo agregado al árbol de nodos. Por ejemplo, tanto

boldEl.style.color = "#ffff00";
paraEl.appendChild(boldEl);

como

paraEl.appendChild(boldEl);
boldEl.style.color = "#ffff00";

convertirían el texto en negrita en rojo. En otras palabras, appendChild() coloca el propio nodo dentro del árbol, no una copia de éste, y la variable boldEl continuará apuntando a él.

Conclusión

Hay muchas más cosas sobre el Modelo de Objetos de Documento de las que han sido cubiertas aquí. Los estilos agregan una dimensión completamente nueva a la presentación del contenido y los eventos proporcionan un modo de hacer que las páginas sean interactivas con el usuario. Pero estos tópicos son dignos de su propia discusión.

Por ahora, trata de experimentar con lo que aquí ha sido cubierto. Familiarízate con el árbol del documento y los métodos que proporciona para navegarlo y para manipular tipos de nodos diferentes. Ésto te dará un fundamento sólido para tratar con otras características del DOM.

Conseguiremos que los elementos de la lista estén uno detrás de otro en la misma línea. También cada elemento será un enlace que al poner el cursor del ratón encima, destaque de alguna manera.

ejemplo de menú horizontal realizado con HTML y CSS

Código HTML de la barra  de navegación, creada con listas:

<div id=”navegador”>
<ul>
<li><a href=”#”>Elemento 1</a></li>
<li><a href=”#”>Elemento 2</a></li>
<li><a href=”#”>Elemento 3</a></li>
<li><a href=”#”>Elemento 4</a></li>
</ul>
</div>

Tenemos una capa llamada “navegador” y dentro el código de las listas. Elementos LI con enlace.

Código CSS  de la lista:

En primer lugar definiremos  el estilo de la lista (UL):

#navegador  ul {
list-style-type:none;
text-align:center;
}

Con list-style-type, indicaremos al navegador que no nos muestre las marcas al lado de los elementos de la lista. Y text-align, para centrarla.

Vamos a crear los estilos de cada uno de los elementos de las listas (LI):

#navegador li {
display:inline;
text-align:center;
margin:0 10px 0 0;
}

Con la etiqueta display:inline conseguiremos que los elementos de las listas, se pinten uno detrás de otro en la misma línea. Con text-align:center, mostraremos el texto centrado y con margin, la separación de cada elemento.

Para crear los estilos de los enlaces de nuestra barra de navegación, podemos usar este código:

#navegador li a {
padding:2px 7px 2px 7px;
color:#666;
background-color:#eee;
border:1px solid #ccc;
text-decoration:none;
}

El padding, lo hemos puesto para que tenga espacio  a los lados. Esto viene bien, para que el área donde se pueda hacer clic sea mayor.  Con la etiqueta color le damos un color al texto del enlace. Le pintamos un fondo con background-color y le damos un borde. Para quitar el subrayado de los enlaces, hemos usado text-decoration:none.

Utilizaremos la pseudoclase hover para definir un estilo distinto cuando pasa el ratón por encima:

#navegador a:hover {
background-color:#333;
color:#fff;
}

Esto es todo lo que necesitamos para crear un menú de navegación con listas.

Código de fuente:

<html>
<head>
<title>Barra de navegación horizontal con listas y estilos CSS</title>

<style type=”text/css”>
#navegador ul{
list-style-type: none;
text-align: center;
}
#navegador li{
display: inline;
text-align: center;
margin: 0 10px 0 0;
}
#navegador li a {
padding: 2px 7px 2px 7px;
color: #666;
background-color: #eeeeee;
border: 1px solid #ccc;
text-decoration: none;
}
#navegador li a:hover{
background-color: #333333;
color: #ffffff;
}
</style>
</head>

<body>

<div id=”navegador”>
<ul>
<li><a href=”#”>Elemento 1</a></li>
<li><a href=”#”>Elemento 2</a></li>
<li><a href=”#”>Elemento 3</a></li>
<li><a href=”#”>Elemento 4</a></li>
</ul>
</div>

</body>
</html>

Fuente: http://www.desarrolloweb.com/articulos/barra-navegacion-horizontal-listas-css.html

CSS 2, no soporta la alineación vertical de los elementos, por lo que mostraré un hack o truco para que sea viable en cualquier explorador. Este hack se basa en alinear verticalmente por medio de una imagen. Aprovechamos que la imagen tiene un atributo vertical-align:middle; que sirve para que el texto que hay después de la imagen esté alineado a su mitad vertical.

Definimos los estilos para una imagen:

<style type=”text/css”>
img.valign {
height:100%;
vertical-align:middle;
width:0px;
}
</style>

En la hoja de estilos de la imagen, definimos la altura a 100%, para que se adapte a la altura del contenedor donde se insertará el elemento. La etiqueta vertical-align:middle, es la alineación que tendrá el texto que acompañe a esta imagen antes o después. Y la anchura a 0px, ya que no queremos que se pinte la imagen, solo el texto.

Creamos ahora la capa  con un contenido alineado vertical:

<div style=”height:220px; background-color:#54f”>
Contenido alineado verticalmente <img class=”valign” />
</div>

La etiqueta div puede tener la altura que necesitemos  así como el color del fondo.
Vemos que se ha colocado una imagen dentro de la capa asignándola una clase definida en el CSS, pero sin src ni ningún otro atributo ya que no queremos que se muestre ninguna imagen.

El truco funciona en Internet Explorer, Firefox y Opera, con lo que es un hack css perfectamente usable y compatible con la mayoría de los navegadores.

Lo malo es que esta alineación vertical sólo funcionará, en caso que el contenido de la capa no supere una línea. En el momento que el texto de la capa tenga varias líneas, sólo se, alineará verticalmente una de ellas, la primera o la última, dependiendo de donde se haya colocado la imagen, delante o detrás del texto.

Fuente: http://www.desarrolloweb.com/articulos/alineacion-vertical-css.html

ada_lovelace.

Ada no fue una mujer convencional. Vivió en Londres en la época Victoriana, nació un 18 de diciembre de 1815 (aun no se determina bien el año). Hija del famoso Poeta Lord George Gordon Byron y una adinerada mujer llamada Anabella, quienes se separaron dos meses depues de nacer Ada, pues Byron era un hombre de letras, poeta, bohemio, conquistador de mujeres y soñador, mientras Anabella era una mujer estricta y disciplinada.

Fuente: http://www.chicaslinux.org/?q=node/122

Fuente: http://www.elpais.com/articulo/espana/arma/secreta/Franco/elpepuesp/20081011elpepunac_5/Tes

La idea que se encuentra detrás del desarrollo de CSS es separar la estructura de un documento de su presentación.

La información de estilo puede ser adjuntada tanto como un documento separado o en el mismo documento HTML. En este último caso podrían definirse estilos generales en la cabecera del documento o en cada etiqueta particular mediante el atributo “style”.

CSS proporciona tres caminos diferentes para aplicar las reglas de estilo a una página Web:

• 1. Una hoja de estilo externa, que es una hoja de estilo que está almacenada en un archivo diferente al archivo donde se almacena el código HTML de la página Web. Esta es la manera de programar más potente, porque separa completamente las reglas de formateo para la página HTML de la estructura básica de la página.
• 2. Una hoja de estilo interna, que es una hoja de estilo que está incrustada dentro de un documento HTML. (Va a la derecha dentro del elemento ). De esta manera se obtiene el beneficio de separar la información del estilo, del código HTML propiamente dicho. Se puede optar por copiar la hoja de estilo incrustada de una página a otra, (esta posibilidad es difícil de ejecutar si se desea para guardar las copias sincronizadas). En general, la única vez que se usa una hoja de estilo interna, es cuando se quiere proporcionar alguna característica a una página Web en un simple fichero, por ejemplo, si se está enviando algo a la página web.
• 3. Un estilo en línea, que es un método para insertar el lenguaje de estilo de página, directamente, dentro de una etiqueta HTML. Esta manera de proceder no es excesivamente adecuada. El incrustar la descripción del formateo dentro del documento de la página Web, a nivel de código se convierte en una tarea larga, tediosa y poco elegante de resolver el problema de la programación de la página. Este modo de trabajo se podría usar de manera ocasional si se pretende aplicar un formateo con prisa, al vuelo. No es todo lo claro, o estructurado, que debería ser, pero funciona.

Las ventajas de utilizar CSS (u otro lenguaje de estilo) son:

• Control centralizado de la presentación de un sitio web completo con lo que se agiliza de forma considerable la actualización del mismo.
• Los Navegadores permiten a los usuarios especificar su propia hoja de estilo local que será aplicada a un sitio web, con lo que aumenta considerablemente la accesibilidad. Por ejemplo, personas con deficiencias visuales pueden configurar su propia hoja de estilo para aumentar el tamaño del texto o remarcar más los enlaces.
• Una página puede disponer de diferentes hojas de estilo según el dispositivo que la muestre o incluso a elección del usuario. Por ejemplo, para ser impresa, mostrada en un dispositivo móvil, o ser “leída” por un sintetizador de voz.
• El documento HTML en sí mismo es más claro de entender y se consigue reducir considerablemente su tamaño (siempre y cuando no se utilice estilo en línea).

Hay varias versiones: CSS1 y CSS2, con CSS3 en desarrollo por el World Wide Web Consortium (W3C). Los navegadores modernos implementan CSS1 bastante bien, aunque existen pequeñas diferencias de implementación según marcas y versiones de los navegadores. CSS2, sin embargo, está solo parcialmente implementado en los más recientes.

Antes de que estuviera disponible CSS, la única forma de componer espacialmente una página era el uso de tablas. Aunque es una técnica cómoda y versátil, se está usando un elemento con una semántica particular, que es la de expresar información tabular, solamente por su efecto en la presentación.

La introducción de CSS ha permitido en muchos casos reemplazar el uso de tablas. Sin embargo CSS todavía no permite la versatilidad que ofrecían las tablas, lograr un diagramado de una página compleja suele ser una tarea difícil en CSS y las diferencias entre navegadores dificultan aún más la tarea. Se espera que futuros desarrollos en CSS3 resuelvan esta deficiencia y hagan de CSS un lenguaje más apto para describir la estructura espacial de una página.

Fuente: http://es.wikipedia.org/wiki/Css

Más información en: http://www.customerca.com/Style/CSS/