DOMTool: Crea código DOM a partir de HTML

0 COMENTARIOS -  Publicado hace 30 meses -  Clasificado en: , ,

DOOMTool es una interesante herramienta para aquellos que se estén iniciando en AJAX y el proceloso mundo de la arquitectura DOM. La herramienta sirve para convertir el código HTML a DOM. Las aplicaciones son múltiples. Desde insertar texto de un modo similar al método innerHTML a crear nuevos bloques elementos dentro de una web. De este modo podremos ahorrarnos bastante tiempo escribiendo manualmente largas estructuras DOM.

Vamos a realizar un ejemplo bastante sencillo para ver su uso. Supongamos que deseamos que cuando se pulse un botón deseamos que aparezca un nuevo bloque con una imagen y un texto. El código de lo que deseamos crear sería algo como: 

<div style="width:300px;height:100px;font-size:11px;background-color:#CCC;">
<img src="http://www.webintenta.com/wp-content/uploads/2007/08/franjas1.jpg" style="float:left;margin-right:15px;" />
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
</div>

(Perdón por la utilización de estilos en línea pero es que el ejemplo queda un poco más visual y no se complica en demasía)

A continuación accedemos a la herramienta y pegamos este código en el textarea dedicado al código HTML. Pulsamos el botón "Create DOM Statements". Con ello obtendremos como salida el código DOM necesario: 

var div1=document.createElement('div');
div1.style.width="300px";
div1.style.height="100px";
div1.style.fontSize="11px";
div1.style.backgroundColor="rgb(204, 204, 204)";
var img1=document.createElement('img');
img1.style.cssFloat="left";
img1.style.marginRight="15px";
img1.setAttribute('src','franjas1.jpg');
div1.appendChild(img1);
var txt2=document.createTextNode('Lorem ipsum dolor sit amet, consectetuer adipiscing elit.\n');
div1.appendChild(txt2);


Así como los nodos que deberemos anexar. En este caso únicamente div1.

Ahora únicamente nos quedaría crear una función, que al ser ejecutado, anexase el contenido creado mediante DOM donde deseemos. En mi caso he creado una función llamada pruebaDOM y anexo el contenido dentro de un div denominado ContDOM. El ejemplo completo quedaría:

<html>
<head>
<title>PRUEBA DOMTOOL</title>
<script language="javascript">
function pruebaDOM(){
   //CODIGO GENERADO POR DOMTOOL
   var div1=document.createElement('div');
   div1.style.width="300px";
   div1.style.height="100px";
   div1.style.fontSize="11px";
   div1.style.backgroundColor="rgb(204, 204, 204)";
   var img1=document.createElement('img');
   img1.style.cssFloat="left";
   img1.style.marginRight="15px";
   img1.setAttribute('src','franjas1.jpg');
   div1.appendChild(img1);
   var txt2=document.createTextNode('Lorem ipsum dolor sit amet, consectetuer adipiscing elit.\n');
   div1.appendChild(txt2);
   //ANEXAMOS EL CONTENIDO
   var t = document.getElementById('ContDOM');
   t.appendChild(div1);
}
</script>
<div id="ContDOM">
<a href="javascript:pruebaDOM();">Ejecutar DOM</a>
</div>
</body>
</html>

Algunas entradas relacionadas:

 

Ejecutando archivos JS en servidores remotos

0 COMENTARIOS -  Publicado hace 35 meses -  Clasificado en: , , Autor: Albert Coronado

Una de las limitaciones de AJAX es que no se pueden hacer llamadas a servidores remotos. Es decir, que si tenemos una aplicacion AJAX en el servidor X todos los archivos llamados deben estar en el servidor X. En caso de hacer aplicaciones AJAX y querer obtener los datos de un servidor remoto lo podemos hacer mediante la creación de TAG Script en el codigo HTML en lugar de utilizar el objeto HttpRequest.

HTML 

<html>
<body>
<script>
var contador=0;
function execJS(url) {
         var sc = document.createElement("script");
         sc.setAttribute("charset", "utf8");
         sc.src = url;
         document.getElementsByTagName("body")[0].appendChild(sc);
}
</script>
<a href="javascript: execJS('webintenta.js');">Click aquí para ejecutar el script remoto.
(<span id="contador">0</span>) </a>
</body>
</html>
Javascript: 
alert("Hi World");  contador++;  document.getElementById("contador").innerHTML=contador;

En este ejemplo se puede ver como una página web(webintenta.html) hace una llamada a código remoto(webintenta.js). Simplementa muestra un mensaje y actualiza un contador.
Otra ventaja de esta técnica es que se pueden llamar archivos PHP que retornen código javascript pasándoles paramentros por la URL.

Esta técnica es la que utilizan aplicaciones como Google Maps a la hora de generar los Mapas en la web.

Ver Ejemplo en funcionamiento » »

 

Cuwhois: Información sobre dominios

0 COMENTARIOS -  Publicado hace 36 meses -  Clasificado en: , ,

Cuwhois es otra web que nos permite obtener información sobre un determinado dominio. Introduciendo el nombre de dominio que queremos buscar nos ofrecerá información sobre suIP, el sistema operativo que utiliza, en que país está alojado el servidor, su pagerank, su ranking en Alexa, e incluso permite saber que otros dominios están cohabitando en el mismo servidor.
La gran ventaja respecto a otras herramientas de este tipo es que su uso es muy sencillo y nos reporta bastante información.

CuWhois

Vía Webmaster Libre » »

 

Crear un style switcher o alternador de estilos

0 COMENTARIOS -  Publicado hace 40 meses -  Clasificado en: , ,

En un post anterior vimos como "Cambiar de clase CSS de un elemento con DOM". En este vamos a ir un poco más allá y crear un "style-switcher" o alternador de estilos. Lo primero que debemos tener es 2 o más estilos, cada uno de ellos con su propio titulo. Uno de ellos con rel="stylesheet", que será el que coja por defecto y los otros dos con rel="alternate stylesheet": 

<link href="css1.css" rel="stylesheet" type="text/css" title="css1"/>
<link href="css2.css" rel="alternate stylesheet" type="text/css" title="css2"/>

Posteriormente debemos tener una función Javascript que se encargue de cambiar de estilo, pasándole como parámetro el título del mismo: 

function EstablecerCSS(title) {
      var i, a, main;
      for(i=0; (a = document.getElementsByTagName("link")[i]); i++) {
            if(a.getAttribute("rel").indexOf("style") != -1 &&
                  a.getAttribute("title")) {
                  a.disabled = true;
            if(a.getAttribute("title") == title)
	        a.disabled = false;
            }
      }
}

Y ahora tan sóllo queda llamar a la función en el HTML: 

<div id="enlaces">
<a href="javascript:EstablecerCSS('css1');">Estilo 1</a>
<a href="javascript:EstablecerCSS('css2');">Estilo 2</a>
</div>

Ver ejemplo en funcionamiento » »

Algunas entradas relacionadas:

 

Cambiar la clase CSS de un elemento con DOM

0 COMENTARIOS -  Publicado hace 40 meses -  Clasificado en: , ,

Este ejemplo tiene múltiples aplicaciones: cambiar el aspecto de la página web, aumentar el tamaño del texto, cambiar el aspecto de un botón si a través de él hemos cargado contenido (este uso lo daré en un próximo tutorial), mostrar u ocultar elementos, etc. Supongamos que tenemos un div con una clase "aspecto1" y que al pulsar sobre un enlace este div cambie a una clase "aspecto2".

Me valgo de una función que recoge el id como parámetro y que le cambia el estilo: Javascript: 

function CambiarEstilo(id) {
	var elemento = document.getElementById(id);
	elemento.className = "aspecto2";
}
CSS: 
body {
      font-family: Verdana, Arial, Helvetica, sans-serif;
      font-size: 10px;
      background-color: #FFFFFF;
      margin-left: 100px;
      margin-right: 100px;
}
.aspecto1 {
      border: 1px solid #CCC;
      padding: 10px 5px 6px 5px;
      background-color: #E4E4E4;
      color: #666;
}
.aspecto2{
	background-color:#F1D59E;
	border: #F2BE84 5px solid;
	color: #666;
	font-family: "Lucida Sans Unicode", Verdana, Arial, Georgia;
	font-size: 12px;
	width:200px;
	padding:10px;
}
HTML: 
<p><a href="javascript:CambiarEstilo('EjCambioEstilo')">Cambiar</a></p>
<div id="EjCambioEstilo" class="aspecto1">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vivamus mollis. Etiam aliquet. Ut ultrices justo ut arcu. Proin a purus. Fusce pharetra ultrices nibh. Nam erat lectus, dapibus id, congue vel, cursus a, tellus. Sed turpis ante, condimentum at, accumsan eget, pulvinar vitae, nibh. </p></div>

Ver ejemplo en funcionamiento » »

ACTUALIZACIÓN: Para que el elemento con un segundo clic volviese a su clase inicial tan sólo hay que averiguar en cada momento qué clase tiene y cambiar a una u otra en función de ello. De este modo, la función sería la siguiente: 

function CambiarEstilo(id) {
	var elemento = document.getElementById(id);
	if (elemento.className == "aspecto1") {
	elemento.className = "aspecto2";
	}
	else {
	elemento.className = "aspecto1";
	}
}

Ver ejemplo en funcionamiento » »

Algunas entradas relacionadas:

 

Mostrar y ocultar filas de una tabla mediante DOM

2 COMENTARIOS -  Publicado hace 45 meses -  Clasificado en: , ,

Accediendo a través de DOM a las filas podemos hacer que éstas se muestren u oculten. Lo único que deberemos tener en cuenta es que así como en Internet Explorer funciona display = "block" para volver a mostrar la fila, en Firefox deberemos utilizar display = "table-row".

A continuación se muestra un pequeño ejemplo de uso. Un formulario en el que hay campos opcionales y otros que son obligatorios. Podemos disponer de un botón para ocultar los campos que son opcionales y facilitar el trabajo al usuario. Logicamente, esta opción adquiere verdadera utilidad en formularios de gran tamaño. HTML: 

<html>
<head>
<script type="text/javascript">
function MostrarFilas(Fila) {
var elementos = document.getElementsByName(Fila);
    for (i = 0; i< elementos.length; i++) {
        if(navigator.appName.indexOf("Microsoft") > -1){
               var visible = 'block'
        } else {
               var visible = 'table-row';
        }
	elementos[i].style.display = visible;
        }
}
function OcultarFilas(Fila) {
    var elementos = document.getElementsByName(Fila);
    for (k = 0; k< elementos.length; k++) {
               elementos[k].style.display = "none";
    }
}
</script>
</head>
<body >
<form id="form1" name="form1" method="post" action="">
  <table width="90%" border="0" cellspacing="0" cellpadding="5">
    <tr>
      <td colspan="2">Los campos marcados con un asterisco son obligatorios </td>
    </tr>
    <tr>
      <td width="26%">(*) Nombre:</td>
      <td width="74%"><input name="Nombre" type="text" /></td>
    </tr>
    <tr name="Op" id="Op">
      <td>Apellidos:</td>
      <td><input name="Apellidos" type="text"  /></td>
    </tr>
    <tr>
      <td>(*) E-mail:</td>
      <td><input name="E-mail" type="text"/></td>
    </tr>
    <tr name="Op" id="Op">
      <td>Teléfono:</td>
      <td><input name="Telefono" type="text" /></td>
    </tr>
  </table>
  <p><a href="javascript:OcultarFilas('Op')">Ocultar Opcionales</a> </p>
   <p><a href="javascript:MostrarFilas('Op')">Mostrar Opcionales</a> </p>
</form>
</body>
</html>

Ver ejemplo en funcionamiento » »

 

Ajax II: Un primer vistazo al DOM

0 COMENTARIOS -  Publicado hace 50 meses -  Clasificado en: , ,

El Modelo de Objetos del Documento (DOM) es una interfaz de programación de aplicaciones (API) para documentos HTML y XML. Define la estructura lógica de los documentos y el modo en que se accede y manipula un documento. En la especificación del DOM, el término "documento" se utiliza en un sentido amplio. XML se utiliza cada vez más como un medio para representar muchas clases diferentes de información que puede ser almacenada en sistemas diversos, y mucha de esta información se vería, en términos tradicionales, más como datos que como documentos. Sin embargo, XML presenta estos datos como documentos, y se puede usar el DOM para manipular estos datos.

Con el Modelo de Objetos del Documento los programadores pueden construir documentos, navegar por su estructura, y añadir, modificar o eliminar elementos y contenido. Se puede acceder a cualquier cosa que se encuentre en un documento HTML o XML, y se puede modificar, eliminar o añadir usando el Modelo de Objetos del Documento, salvo algunas excepciones.
Traducción de la Recomendación del W3C "Document Object Model (DOM) Level 1 Specification"

Para el desarrollador la jerarquía que proporciona el DOM es obtener para cada objeto una referencia, una dirección, a través de la cual acceder a las propiedades del objeto.El primer objeto en el nivel de jerarquía es el objeto 'window'. Todo esta enmarcado dentro de la ventana del navegador. En el siguiente gráfico se muestra una jerarquía típica de una página web. Cada objeto tiene una serie de propiedades a las que podemos acceder y que otorgan una serie de características al objeto. La modificación de elementos del DOM puede alterar el marcado HTML de la página y por tanto su presentación.

DOM

Suena bien ¿verdad? Lo cierto es que cuando apareció una primera aproximación al DOM, los desarrolladores inmediatamente vieron las posibilidades que se abrían para añadir interactividad a las estáticas páginas web de entonces. El problema no tardo en surgir, puesto que los dos navegadores principales de aquellos años divergieron, desarrollando cada uno de ellos un modelo de DOM con múltiples puntos de incompatibilidad con el otro. En los últimos tiempos los esfuerzos se dirigen en normalizar un Modelo de Objetos del Documento. En este sentido lo mas reseñable ha sido las recomendaciones que ha hecho el w3c en este sentido para establecer estandares comunes para todos los navegadores.

En el nuevo Modelo de objetos (DOM) cada elemento en un documento html es parte de un árbol, y se puede acceder a todos los elementes bevegando a través de las ramas hasta alcanzar al "nodo" u objeto que buscamos. Un sencillo ejemplo de este "árbol podría ser".

document
| -- <html>
|-- <head>
|-- <body>
| -- <div>

Para acceder al <div> necesitaría:
1. Comenzar en el nodo de inicio "document";
2. Moverme al primero de todos sus "hijos" o "nodos hijo", que sería la etiqueta <html> : document.childNodes[0];
3. Bajar otro nivel y desplazarme al segundo hijo de esa rama: document.childNodes[0].childNodes[1];
4. Llegar al <div>: document.childNodes[0].childNodes[1].childNodes[0];

La forma más común de acceso a un elemento es definir a éste con una ID que le identificará de una manera única. Por ejemplo, supongamos que tenemos 

<div id='noticias'></div>

Para hacer referencia a este nodo, independientemente de su posición dentro del árbol sería: 

var noticias=document.getElementById(noticias);

Algunas entradas relacionadas:

 
Páginas: 1