• XHTML 1.0 / 1.1
  • Transitional document.
  • Strict document.
  • Frameset.
  • Document 1.1.
• HTML 4.01
  • Transitional document.
  • Strict document.
  • Frameset.

Además de estos documentos encontré otros recursos interesantes relacionados con el desarrollo web.

• Formularios X/HTML accesibles.
  http://www.webstandards.org/learn/tutorials/accessible-forms/
• Character Entity References.
  http://www.webstandards.org/learn/reference/charts/entities/
• Colores válidos para HTML 4 y XHTML 1.0/1.1.
  http://www.webstandards.org/learn/reference/charts/color_names/
• DOCTYPEs y sus respectivos modos de diseño.
  http://www.webstandards.org/learn/reference/charts/doctype-switch/
• HTML versus XHTML.
  http://www.webstandards.org/learn/articles/askw3c/oct2003/
• Referencias de los lenguajes de marcas.
  http://www.webstandards.org/learn/external/html/
• Organizaciones relacionadas con los estándares.
  http://www.webstandards.org/learn/external/orgs/

Los demás campos son presentados en la tabla como campos editables (input) para permitir su modificación por parte del usuario hasta el momento de hacer el envío.

El ejemplo puede consultarse en el siguiente enlace: Test InnerHTML 3

Insertar una nueva fila en una tabla (destino) es fácil, sólo es establecer donde se quiere e insertarla.

var nuevo_indice = destino.rows.length;
fila = destino.insertRow(nuevo_indice);


Después es necesario especificar el contenido de las celdas, para el ejemplo, un checkbox y dos valores de texto.

celda = fila.insertCell(0);
valor = document.createElement("input");
valor.type = "checkbox";
valor.id = "marca";
valor.name = "marca";
valor.value = nuevo_indice;
celda.appendChild(valor);

celda = fila.insertCell(1);
valor = document.createTextNode(nombres + " - " + nuevo_indice);
celda.appendChild(valor);

celda = fila.insertCell(2);
valor = document.createTextNode(apellidos);
celda.appendChild(valor);

Para remover las filas obtengo una referencia a los elementos que sean input y pertenezcan a la tabla.

var inputs = origen.getElementsByTagName("input");

Después filtro los que sean checkbox y sean los que me interesan (id=’marca’). Los almaceno en un arreglo.

for (i=0; i<inputs.length; i++)
{
if (inputs[i].type == "checkbox" &&
inputs[i].id == "marca" &&
inputs[i].checked)
{
checkboxes[chk_cuenta] = inputs[i];
chk_cuenta ++;
}
}

Después de filtrados procedo a eliminarlos.

for (i=0; i<checkboxes.length; i++)
{
origen.deleteRow(checkboxes[i].value - 1*i);
}

En este punto encontré un serio problema. El value de los checkboxes seleccionados me indica cuales son las filas que deseo remover, pero después de remover la primera de ellas la continuidad de las filas se altera ya que se eliminó un elemento. Para compensar esto se disminuye 1*i el índice de la fila, siendo 0 para el primer caso cuando no se ha alterado, 1 cuando se ha removido una fila y así sucesivamente.

La solución anterior soluciona el problema durante un procedimiento de eliminación de filas, sin embargo al terminar la tabla queda con sus índices alterados y por consiguiente va a fallar la siguiente eliminación y posiblemente la adición de filas también va a ser confusa. Para esto tuve que corregir los índices de las filas tan pronto como se termina la remoción.

for (i=0; i<inputs.length; i++)
{
if (inputs[i].type == "checkbox" &&
inputs[i].id == "marca")
{
inputs[i].value = i + 1;
}
}

El archivo fuente del ejemplo se puede descargar del siguiente enlace: test_inner2.html

La idea es crear una tabla (info) que va a contener los datos.

<table id="info" name="info" class="tabla">
<tr class="titulos">
<td>
Nombres
</td>
<td>
Apellidos
</td>
</tr>
</table>

Un formulario desde el cual se agregarán nueva información.

<form id="datos" name="datos" onsubmit="return agregar_fila(this)">
Nombres: <input type="text" id="nombres" name="nombres" value="" size="25" />
Apellidos: <input type="text" id="apellidos" name="apellidos" value="" size="25" />

<input type="submit" id="agregar" name="agregar" value="Agregar" />
</form>

Y una función de JavaScript que agregará la nueva información (nombres y apellidos) a la tabla.

function agregar_fila(origen)
{
nom = origen.nombres.value;
apl = origen.apellidos.value;

document.getElementById("info").innerHTML += "<tr class='fila'> \
<td> \
" + nom + " \
</td> \
<td> \
" + apl + " \
</td> \
</tr>";

return false;
}

El archivo de ejemplo puede descargarse desde el siguiente enlace: test_inner.html

El ejemplo anterior tomado de Matthew Levine estaba elegante pero no quiso funcionar en IE.

Simplifiqué un poco el ejemplo y esto fue lo que obtuve.

Me hace falta lograr que las columnas izquierda (azul) y derecha (rojo) ocupen tanto espacio como ocupe la columna central (salmón), sin embargo si utilizo height: 100% intentan tomar el alto de la pantalla.

Por ahora este es un gran paso para -mi- humanidad en la lucha contra las cajas.

El archivo de prueba puede descargarse del siguiente enlace: test_div2a.html.

Una de las cosas de las que en realidad no he logrado entender completamente es el box model (modelo de cajas) de CSS. Yo quiero hacer lo que la teoría sugiere: en el HTML dejar sólo el contenido y en CSS especificar como se va a presentar esa información. Según esto, yo quiero que el layout (distribución) de mi página esté dada por el CSS con DIVs y no en el HTML con TABLE. Pero ah que cosa mas extraña para mi.

Le he sacado tiempo en varias oportunidades pero no lo he logrado. Lo mas cerca que he estado funcionaba perfecto en Firefox pero se corría inexplicablemente en IE ... como siempre.

Hoy amanecí con ganas de volver a intentarlo y encontré un par de enlaces muy interesantes. Entre ellos me gustó In Search of the Holy Grail de Matthew Levine quien se toma su tiempo para explicar la implementación de una página con tres columnas, dos de ellas de ancho fijo y el centro líquido (consume el tamaño complementario) y con una estructura de DIVs simple, tal y como yo la quería.

<div id="header">Este es el header</div>
<div id="container">
<div id="center" class="column">Este es el centro</div>
<div id="left" class="column">Esta es la izquierda</div>
<div id="right" class="column">Esta es la derecha</div>
</div>
<div id="footer">Estos son los pies</div>

Este código HTML produce el siguiente resultado después de ser mezclado con el CSS correspondiente.

Como siempre ... en Firefox funciona perfecto, lo acabo de probar en IE7 y se enloquece, a pesar de que el autor menciona que funciona en los principales navegadores.

El archivo de prueba que utilicé se puede descargar del siguiente enlace: test_div.html.

Espero mas adelante tener un poco mas de tiempo y hacerlo funcionar ya que no quiero seguir haciendo páginas basadas en TABLEs.

Otro enlace relacionado con el tema que se ve prometedor es Layout Gala (http://blog.html.it/layoutgala/) en el que se presentan varios diseños basados en columnas.

Hice pruebas envolviendo el object en un div y modificando el z-index, pero nadita.

Los objetos Flash traen ahora una propiedad que se llama wmode a la cual si se le asigna el valor de transparent no solo hace el fondo del SWF transparente sino que hace que el objeto respete el índice de profundidad.

Hay que poner el valor sugerido como parámetro del object y dentro de la etiqueta embed para que funcione en los dos navegadores.

Ejemplo:

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="185"
height="205">
<param name="wmode" value="transparent">
<param name="movie" value="banner_iso9001_ntcgp1000.swf">
<param name="quality" value="high">
<embed src="banner_iso9001_ntcgp1000.swf" quality="high" wmode="transparent"
pluginspage="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash"
type="application/x-shockwave-flash"
width="185"
height="205"></embed>
</object>

• em/strong: énfasis en los textos.
• pre/code: muestra el código tal y como se escribió.
• ins/del: resalta los textos como modificaciones del mismo.
• blockquote: define una cita.
• acronym: define un acrónimo.
• abbr: define una abreviación.
• dfn: especifica una definición.
• cite: referencia a otra fuente de información.
• dl/dt/dd: listas de definiciones.
• caption/th de table: especifica el texto adjunto a la tabla.
• thead/tbody/tfoot: especifica la cabecera, cuerpo y pies de una tabla.
• fieldset: agrupa de manera lógica los elementos de un form.
• legend/label: especifica el texto explicativo de un campo de formulario.
• optgroup: agrupa opciones de un select.
• address: presenta la dirección de contacto de una persona.