jump to navigation

Nueva versión WebDevStudio 1.3 Jueves, 29 marzo 2007

Posted by israelof in Versiones.
add a comment

En esta nueva versión los cambios se han centrado fundamentalmente en modificar, lo que podríamos considerar la parte más importante de la aplicación, el editor de código. El nuevo editor de código, permite el resaltado de la sintaxis para el lenguaje en el que vamos a implementar, así como funcionalidades básicas de selección de código, copiar y pegar, rehacer y deshacer.

A continuación expongo un listado con todos los cambios realizados:

  • Se ha incorporado un nuevo editor de código con highlighting.
  • Se han deshabilitado temporalmente los proyectos basados en Win32.
  • Se ha eliminado el subapartado “Show” de la sección de proyectos, por carecer de sentido.
  • Se han eliminado algunos errores de traducción.

Os invito a que lo probeis en el enlace webDevStudio Demo

Espero que las modificaciones realizadas hagan a la aplicación más útil. Continúo trabajando para mejorar la parte de edición de código, con nuevas funcionalidades.

Anuncios

Nueva versión WebDevStudio 1.2 Lunes, 26 marzo 2007

Posted by israelof in Versiones.
add a comment

He realizado importantes modificaciones en la versión anterior de la aplicación. Los cambios han consistido básicamente en introducir nuevas secciones, cuya finalidad es introducir documentacion de la misma.

Las nuevas secciones que se han añadido son las siguientes:

  • News:  Esta sección recogerá todas las noticias que se vayan publicando de la herramienta, y se podrán leer tanto las noticias actuales como las archivadas.
  • Description: En esta otra sección se da una descripción de la utilidad de la aplicación, a parte de la que se da en la Home.
  • Operation: Aquí se dará una descripción más detallada de las funcionalidades que se han implementado, realizándose explicaciones más concretas de algunas partes y explicando su funcionamiento.

Espero que las secciones introducidas aporten más información y ayuden al manejo de la aplicación, además de invitar a las visitas a que se registren.

Problemas al generar XML con retornos de carro Jueves, 22 marzo 2007

Posted by israelof in Implementación.
add a comment

Una de las cosas que me he dado cuenta a la hora de generar de forma dinámica mis XML es que los navegadores web no interprentan del mismo modo la codificación que hacemos.

Esto lo he descubierto cuando quería generar un XML desde la lógica de negocio (con PHP) para que a través de AJAX, de forma síncrona, le llegara al interfaz. Ahora bien, desde PHP estaba generando el XML con retornos de carro al final de las líneas (con el típico \n) y parece ser que a todos los navegadores no les gusta, sobre todo a Firefox (en su versión 2.0.0.2) ya que estaba interpretando nodos de tipo texto que no existían realmente.

Así pues, recomiendo que cada vez que se cree un XML (y no digo un fichero XML, sino una estructura de datos basada en XML), se omitan los retornos de carro, ya que pueden dar problemas.

AJAX asíncrono y síncrono Miércoles, 21 marzo 2007

Posted by israelof in Implementación.
13 comments

Existe multitud de documentación que explica que es AJAX y como se suele utilizar de modo asíncrona, que es donde reside su potencia, pero en níngun lugar se explica como utilizar AJAX de forma síncrona.

Objeto XMLHttpRequest:

Lo primero que debemos hacer para que podamos realizar peticiones al servidor con AJAX es definirnos el objeto del siguiente modo:


<script>
 function AJAXCrearObjeto(){
  var obj;
  if (window.XMLHttpRequest) { // no es IE
   obj = new XMLHttpRequest();
  }
  else { // Es IE o no tiene el objeto
   try {
    obj = new ActiveXObject(“Microsoft.XMLHTTP”);
   }
   catch (e) {
    alert(‘El navegador utilizado no está soportado’);
   }
  }
  return obj;
 }
</script>

Existen diversas codificaciones del objeto. Aquí hemos puesto una de ellas como ejemplo.

AJAX asíncrono:

La codificación resumida de una llamada asíncrona suele ser del siguiente modo:


<script>
 // Creamos la variable parametro
 parametro = ‘Datos pasados por POST’;
 oXML = AJAXCrearObjeto();
 // Preparamos la petición con parametros
 oXML.open(‘POST’,’pagina.php’, true);
 // Preparamos la recepción
 oXML.onreadystatechange = leerDatos;
 // Realizamos la petición
 oXML.send(‘parametro=’ + escape(parametro));
 
 function leerDatos() {
  if (oXML.readyState == 4) {
   alert (oXML.responseText);
  }
 }
</script>

AJAX síncrono:

La literatura que encontramos sobre AJAX nos dice que para hacer llamadas síncronas deberemos poner a “false” el parámetro correspondiente de oXML.open, pero esto en la práctica no es suficiente para que funcione en todos los navegadores. De modo que la solución que aquí se plantea es la siguiente:


<script>
 // Creamos la variable parametro
 parametro = ‘Datos pasados por POST’;
 oXML = AJAXCrearObjeto();
 // Preparamos la petición con parametros
 oXML.open(‘POST’,’pagina.php’, false);
 // Realizamos la petición
 oXML.send(‘parametro=’ + escape(parametro));
 // Devolvemos el resultado
 return oXML.responseText;
</script>

Como vemos, toda la parte dedicada a comprobar el estado en el que se encuentra la comunicación, ya no es necesaria, puesto que ahora se trata de una llamada síncrona, de modo que hasta que no se reciban los datos del servidor no se va a continuar con la ejecución. Con la eliminación de ese fragmento de codigo se consigue que las llamadas síncronas funcionen correctamente.

NOTAS:
Esto se ha probado únicamente para Internet Explorer 7 y Firefox 2.0.0.2.
Se han omitido partes de código para simplificar los textos.

innerHTML vs appendChild() Martes, 20 marzo 2007

Posted by israelof in Implementación.
2 comments

He tenido muchas dificultades en la implementación de la nueva versión de la zona de edición de código. En esta nueva versión he introducido una mejora que consiste en la edición de múltiples ficheros a la vez mediante el uso de pestañas, de modo que podemos cambiar de un fichero a otro rápidamente. Para poder implementar esto, me he basado en JavaScript, de modo que todo se realiza en el lado del cliente, excepto la parte de la carga del código fuente, que se le solicita al servidor.

El problema lo he tenido a la hora de usar innerHTML para ir introduciendo los diferentes ficheros de edición. Como sabemos innerHTML nos permite obtener y modificar el contenido que existe entre una etiqueta. El problema se encuentra en que si queremos introducir o modificar el código HTML dentro de una etiqueta, los navegadores refrescan el código que se ha introducido, de modo que si queremos meter iframes, como es mi caso, cada uno de los iframes introducidos se refrescarán, con la pérdida de las modificaciones que hayamos hecho en el iframe (sabiendo que son iframes editables). La forma usada para introducir los iframes era la siguiente:


var contenidoHTML = <iframe id=”codigo” src=”pagina.php?file=main.c&id=1″></iframe>
var contenedor = document.getElementById(“contenedor”);
contenedor.innerHTML = contenidoHTML + contendor.innerHTML;

De modo que la solución ha sido crear los contenidos directamente creando los nodos con JavaScript, en vez de incorporar el contenido con texto HTML. La forma de hacerlo ha sido similar a la siguiente:


var nodo = document.createElement(“iframe”);
nodo.id = “codigo”;
nodo.src=”pagina.php?file=main.c&id=1″;
var contenedor = document.getElementById(“contenedor”);
contenedor.appendChild(nodo);

De este modo tenemos el mismo efecto que hacíamos pegando el código HTML como texto, pero la ventaja es que no se refrescan los contenidos dentro del nodo padre “contenedor”, así pues, los iframes contenidos permanecen inalterados sin recargarse, que es lo que se pretendía desde el principio.