Javascript: HTML como base de datos
Visita este artículo en http://www.estadobeta.com/2006/05/08/javascript-html-como-base-de-datos/
Por Ismael en (X)HTML, Comportamiento, Desarrollo, artículos, educación, tipsEn el artículo anterior explicaba porqué a veces es necesario desarrollar “efectos de escritorio” en nuestros documentos web, sin embargo manteniendo en lo posible la accesibilidad y SEO de los datos.
en muchas aplicaciones de este tipo - frecuentemente las que utilizan Ajax para inyectar datos al documento - se genera el html dinámicamente:
var nuevo_contenido = "<p>Este es un nuevo párrafo de texto</p>";
document.getElementById("contenido").innerHTML += nuevo_contenido;
InnerHTML no es una propiedad estándar. Los puristas prefieren utilizar los métodos del DOM para la generación de HTML:
var nuevo_contenido = document.createElement("p");
nuevo_contenido.appendChild(document.createTextNode("Este es un nuevo párrafo de texto"));
document.getElementById("contenido").appendChild(nuevo_contenido);
Ni una de las dos soluciones es accesible. Al ser generado con javascript, el contenido del nuevo párrafo es invisible a los motores de búsqueda. A veces esa información debe ser cargada dinámicamente y no tenemos otra opción, pero en muchos casos incurrimos en estas prácticas sólo para agregar “interactividad” a las páginas. En estos casos podemos mejorar la accesibilidad cargando la primera vez toda la información relacionada en nuestro documento HTML. Luego, mediante javascript y el manejo apropiado del DOM, podemos esconder, mostrar y modificar la estructura como queramos.
HTML, y en especial su última versión XHTML, no es más que un formato estructurado para guardar datos. Una “página web” no es sólo un documento visual sino también una pequeña base de datos que, una vez cargada en el navegador, podemos consultar de múltiples maneras gracias a la interfaz del DOM.
Imaginemos una lista de definiciones HTML:
<dl>
<dt>Primera definición</dt>
<dd>Descripción de la primera definición</dd>
<dt>Segunda definición</dt>
<dd>Descripción de la segunda definición</dd>
<dt>Tercera definición</dt>
<dd>Descripción de la tercera definición</dd>
<!-- etc... -->
</dl>
Gracias a que el HTML es acesible y bien estructurado, con javascript podríamos esconder las descripciones y transformar cada título en un botón que muestre o esconda la descripción correspondiente.
// lista de todos las descripciones
var descripciones = document.getElementsByTagName("dd");
// lista de todos los títulos
var titulos = document.getElementsByTagName("dt");
// apagamos las descripciones una por una, asignando un identificador correspondiente a cada título.
// se puede crear atributos propios a los elementos HTML del DOM!
for(var i=0,total=descripciones.length;i<total;i++){
descripciones[i].style.display = "none";
titulos[i].descripcion_id = i;
}
// agregamos onClick a cada titulo para prender o apagar las descripciones
for(var u=0,total=titulos.length;u<total;u++){
titulos[u].onclick = function(){
var desc = descripciones[this.descripcion_id];
if(desc.style.display = "none")
desc.style.display = "block";// prende
else
desc.style.display = "none";// apaga
}
// un detalle agregamos la "manito" del cursor a los titulos.
titulos[u].style.cursor = "pointer";
}
Con un poco de la magia de las bibliotecas javascript Prototype y Scriptaculous, estas ideas básicas se pueden llevar a un nuevo nivel de dinamismo y accesibilidad.
- Servicios:
- Comentarios RSS
- Menear!
- Del.icio.us
5/10/2006 at 4:36 pm
Esto está muy bien para datos o listas cortos, pero no lo veo muy práctico para cuando los datos a mostrar son más largos. Si son muchos datos, el sitio va a tardar mucho más en cargar y quizás muestre algun “parpadeo” cuando trate de esconder los mismos. Pero muy buen artículo de todas formas!
5/10/2006 at 8:02 pm
Cierto. Por eso cuando digo “toda la información relacionada”, me refiero a toda la info que tnga que ir en una página. Mantener cada página (documento) breve y conciso pasa por un buen diseño de la información, procedimiento previo al desarrollo. En definitiva, se trata de mantener la mayor cantidad de contenido posible en HTML estático, para aumentar la SEO. Los “efectos” javascript se pueden aplicar sobre ese contenido como una capa complementaria, sin necesidad de generar contenidos con javascript.
2/16/2007 at 12:44 pm
hola
5/2/2007 at 6:25 pm
A mi me parece un buen principio para empezar a tocar este lenguaje como Base de Datos
3/24/2008 at 8:36 pm
Se puede crear algo parecido, se puede crear un bloc de notas con los datos separados por comas -> , por ejemplo
color,tamaño,medida, etc
y se utiliza como base de datos utilizando html y javascript, lo tengo en un ejemplo de un libro de DHTML, y de esta manera si se puede, la solucion seria guardar la base de datos como texto separado cor comas y el codigo DHTML buscalo en google, porque si se puede.
Saludos
4/4/2008 at 6:12 pm
Para un trabajo de la escuela me pidieron una pagina web, que lleves el control, para prestar a los maestros un aula, entonces quieren que haiga como un calendarioo para escuger el dia y la fecha en que quieren apartar la aula, basandose en una ficha de prestamo que tienen que llenar en una hoja, el problema que tengo es que quieren que desde cualquier maquina de la escuela o de su casa puedan apartar el aula, como le puedo hacer para que puedan guardar esos datos en una BASE DE DATOS COMUN y desde cualquier lugar tambien puedan ver quien aparto la aula y que codigo se usa, ayudenme porfavor. gracias. mi correo es moytellez@hotmail.com
5/22/2008 at 6:02 pm
Moises, insisto en la propuesta de utilizar un block de notas como base de datos, y un pag web para aceder a ellos, si se puede, porque lo tengo creado en un ejemplo de un libro, lo he provado y modificado, es muy practico y relativamente sencillo
6/8/2008 at 6:39 pm
M. Cara puedes enviarme ese ejemplo de utilizar un block de notas como base de datos y acceder a ellos desde una pagina web con javascript?, Please es algo elemental que necesito realizar en mi trabajo. Mi correo es: elvysrodriguez@hotmail.com
10/17/2009 at 3:12 pm
yo quiero saber como poner un espacio para comentarios como este
10/17/2009 at 3:24 pm
eadsdasd