Archive for the ‘javascript’ Category

¿Sabes y amas HTML 5, CSS y JS? Participa en este debate

Miércoles, Febrero 24th, 2010

Hace días que se viene dando un interesante debate alrededor de la tecnología Flash y HTML 5, hemos visto diversas opiniones y a diferentes escalas inclusive algunas declaraciones de parte del CEO de Apple (Steve Jobs) y el CTO de Adobe (Kevin Lynch).

Esto no es algo nuevo, de hecho con cada nueva tecnología que sale al mercado (Silverlight, JavaFX, etc.) y/o cada que la W3C se pone las pilas sucede lo mismo, hay quiénes toman una posición a favor y hay quiénes toman una posición en contra; lo cuál es muy respetable siempre que esto vaya sustentado con argumentos y no simplemente como un factor de respuesta a todo el ruido que se genera en el medio.

Participa en un debate en vivo de Flash vs. HTML 5

La semana pasada participé con @freddier y @cvander en el programa Mejorando la Web para hablar al respecto. Los comentarios que pude ver alrededor de esta discusión fueron bastante atinados. Es por eso que al final del programa decidí comentarle una inquietud a Freddy y a Christian (quiénes se mostraron entusiasmados) misma que comparto con ustedes en este post. (Puedes ver la grabación del programa abajo)



Empieza a verlo desde el minuto 30:28

La idea es organizar un debate con 5 invitados de cada bando (por decirlo de una manera), es decir 5 entusiastas de Flash y 5 entusiastas de HTML 5. Ya tenemos algunas personas interesadas pero no creo que fuera en realidad algo muy democrático si no le diéramos cabida a cualquier persona de la comunidad que quiera participar.

Cómo participar

Por lo que no importa que posición sea la tuya, si estás interesado en debatir, deja en los comentarios quien eres, qué piensas y tu posición (y tu cuenta de twitter o algo). Los mejores y más acertados comentaristas serán elegidos para participar en la transmisión, que esperamos vean alrededor de 2000 personas en vivo y muchas más en su grabación.

Aún tenemos que definir las fechas pero tan pronto tengamos a los participantes lo haremos de manera formal, por lo que si estas interesado en participar no dudes en dejar tu comentario en este post lo antes posible.

Enviar comentario

Recargar pagina al cerrar colorbox o nyroModal

Lunes, Febrero 22nd, 2010

-
Para todos aquellos que tuvieron problemas al intentar recargar la pagina al cerrar las ventanas generadas por estos pluggins de jQuery acá les dejo unos metodos que les podrian resultar útiles:

Para colorbox:

Código :

$(document).ready(function() {
   $().bind('cbox_closed',function() { 
      location.reload(true);
   });
}

Para nyroModal

Código :

//Esto recargará la pagina cada vez que se cierra cada nyroModal
$(function() {
  $.nyroModalSettings({
    endRemove: function() {
      window.location.reload();
    }
  });
});

//para permitir que solo algunas ventnas tengan este comportamiento
//realizamos lo siguiente:
$(function() {
  $('.myNyroModal').nyroModal({
    endRemove: function() {
      window.location.reload();
    }
  });
});
//En este caso cada ventana con atributo class="myNyroModal" recargará
//la pagina en cuestion

Espero les sirva, a mi me costó mucho tiempo dar con la solucion pero al fin la encontre y la queria compartir con ustedes.
Saludos a todos

Enviar comentario

Programación para diseñadores 10: Funciones

Miércoles, Febrero 17th, 2010

-
En este videotutorial aprenderemos que son y como usar funciones en Javascript, ya que son las estructuras de programación mas usadas.


Enviar comentario

El futuro de Flash

Jueves, Febrero 11th, 2010

Desde que el iPad fue anunciado, sin Flash, mucha gente ha estado especulando su caída. Se suma el experimento de Youtube con HTML 5 y el tag <video>. Tal fue el hype generado por la supuesta muerte, que dedicamos un capítulo de MejorandoLaWeb al tema.

El mundo de Flash está cambiando. La computación está cambiando. La web está cambiando. Pero Flash no morirá y si Adobe toma las decisiones correctas, incluso puede convertirse en el líder de campos que no esperamos. Este año será decidido todo.

Flash, HTML 5, Javascript y el video

HTML 5 tiene cosas impresionantes. Drag and Drop de archivos al navegador, animaciones vectoriales en SVG, un tag para embeber video, otro tag para audio, acceso a disco y geolocalización por múltiples métodos (GPS, IP, manual, etc). Esto ha dado pie a que muchos digan que "Flash es innecesario".

Molly Holzschlag es una de las personas que más sabe de estándares en el mundo y compiló una lista de capacidades de HTML 5 y los navegadores que las implementan. No es mala la implementación, pero usarla en producción es triste.

El video es un problema "emocional". Algunos quieren OGG como formato, otros H.264 y otros algo completamente diferente. Ahora mismo, el tag <video> tiene la misma versatilidad de las epocas del Real Player.

Cosas que hace Flash que no puede hacer HTML5 o JS ni hay planes para que pueda

  • Streaming: UStream, Tinychat, Livestream, incluso Youtube live, inviables con "estándares".
  • Animación vectorial compleja: SVG? CSS3? Jajajaja. Si tu crees que hacer animaciones con esas tecnologías es más fácil, igual que Flash y gasta menos CPU, no has comparado a nivel técnico. La realidad es que actualmente, sólo Flash lo permite como debe ser. El resto de animaciones en SVG, CSS3 o JS gastan demasiada CPU y no hay un software del nivel de Flash para crearlas.
  • Edición y manipulación de audio: AS3 es capaz de mezclar audio en tiempo real. Nadie más puede hacerlo al nivel de AS3.
  • Edición bit por bit de mapas de bits: Aviary, Picnik y Photoshop Online hechos en Flash y Flex lo demuestran. ¿En HTML5 o JS? Ninguno realmente usable.
  • 100% de compatibilidad a través de todas las plataformas: Si dices que es posible escribir un sólo código HTML5/CSS/JS que funcione en todos los navegadores ahora mismo, no has hecho nada profesional. En SWF es normal

Flash no es sólo el player. Flash CS5 es un entorno integrado con la capacidad de diseñar, dibujar, animar, incluir video, audio, editar todos estos componentes, agregar interactividad y programación de alta complejidad, compilar para desktops, móviles o iPhones. Ninguna herramienta del lado "estándar abierto" ofrece ese nivel de integración ahora mismo. No Dreamweaver, no Visual Studio 2010, no Aptana, ni siquiera una combinación de varias.

Flash, teléfonos móviles, Apple

El mundo móvil es diferente. El iPhone cambió el mundo y estableció una fuerte tendencia a las tiendas de aplicaciones, la integración de HTML 5 actualizado en el teléfono e ignorar a Flash. Android y otros siguieron el mismo camino.

Este mes en el Mobile World Congress, Adobe presentará el Flash Player 10.1 para todos los teléfonos móviles (excepto iPhone), un compilador especial para crear apps de iPhone con SWF desde Flash CS5 y el secreto a gritos, una forma unificada de desarrollar apps "pseudo-nativas" para Android, WebOS, Blackberry y Symbian, con un mismo código.

Flash ya era usado por el 90% de la humanidad conectada antes de Youtube. Las animaciones y los juegos en linea lograron posicionar a Flash en el principio. No hay razón para pensar que no pasará a nivel móvil. Ninguna empresa tiene un entorno tan avanzado para el desarrollo de juegos móviles como Adobe con Flash. Y pasará en todas las plataformas de teléfonos actuales (En tu Nokia 1100 puede que no)

¿Y Flex? ¿Y Adobe AIR?

Flex es líder en desarrollo de RIAs. No se nota mucho su presencia en la web, pero está en muchas intranets y empresas. Aun no tengo claro si Flex Mobile hará un impacto tan fuerte como Flash/AIR Mobile, pero su presencia como la mejor y más veloz herramienta para aplicaciones web se mantendrá, a pesar de que HTML 5 y jQuery UI son amenazas muy reales y fuertes.

Adobe AIR tiene que evolucionar. El uso de archivos .air y "badge installers" es simplemente estúpido. No está mal que los ofrezcan, pero también incluyan la opción de crear instaladores por SO. Si el rumor de AIR Mobile es cierto y cometen una cagada como la de los .air, Flash no será el sueño que esperábamos. Esperemos que Adobe tome la decisión correcta.

Flash "estándar", Flash Open Source

Flash es estándar en el mismo sentido que los .doc y .docx lo son. Es una realidad. No es algo malo de por sí, pero muchos no se sienten cómodos. Flash tiene abiertas las especificaciones del formato SWF, pero prohíben crear "players" alternativos con esas specs ¿Por qué? Según ellos, para proteger la segmentación del mercado y mantener un sólo player. Yo solía creer en esto.

Ya no lo creo más. La pésima forma en la que Adobe ha manejado las plataformas móviles (i-Mode -> Flash Lite con AS0.5 -> muerte de Flash Lite -> vacío -> ¿10.1?) , sumado a la lección de Android que se puede tener una distro oficial open source sin perder el control me lo deja claro. Adobe debería, sin duda, liberar el código del Player y permitir que la comunidad "ayude". Si Adobe no puede implementar bien Flash en Linux y Mac, la comunidad sí podrá. ¿El miedo es que Microsoft los mate como mató a Java con una maquina virtual especial? Adobe ya está grande y debe poder superar esto. Con su penetración, pueden mantener el control de un player abierto.

Si no, quizás y el 2022, cuando HTML 5 será un estándar cerrado y aprobado, será realmente el declive de Flash.

NOTA: Si "odias Flash", por favor cita razones técnicas para odiarlo.
Si crees que estoy equivocado y Flash morirá, di tus razones técnicas o políticas por la que lo crees.
Si no tienes razones y es sólo porque "no te gusta", reflexiona.
Lee los comentarios, han aportado mucho al tema.

Enviar comentario

Programación para diseñadores 6: Condiciones switch

Miércoles, Febrero 10th, 2010

En este videotutorial aprenderemos el uso de condicionales con la instrucción de casos Switch de Javascript.


Videotutoriales de programación para diseñadores:

Encuentras enlaces a los más recientes en el más avanzado o en los tutoriales de programación:

  1. Introducción a la programación para diseñadores
  2. Programación para diseñadores 2: Javascript y comentarios
  3. Programación para diseñadores 3: Algoritmos
  4. Programación para diseñadores 4: Programación estructurada
  5. Programación para diseñadores 5: Condicionales
  6. Programación para diseñadores 6: Condiciones switch
  7. Programación para diseñadores 7: Ciclos while
  8. Programación para diseñadores 8: Scripts en Photoshop
  9. Revisa el más reciente para la lista completa…

Enviar comentario

Obtener latitud y longitud de una dirección en Google Maps

Domingo, Diciembre 7th, 2008

A veces es necesario obtener los valores de latitud y longitud para ubicar una dirección en un mapa, yo en lo personal la he necesitado cuando he utilizado el componente GMap en flash.

Primero se debe ir a la pagina de Google Maps y buscar la dirección deseada, este truco funciona sólo si la dirección esta indicada en el centro del mapa (por defecto esta centrada así que no mover el puntero).

Entonces si la dirección esta indicada en el centro, escribimos este código javascript en la barra de direcciones:

Código :

javascript:void(prompt('',gApplication.getMap().getCenter()));

Al ejecutarlo saldrá un mensaje con las coordenadas, y listo! Y en caso se lo estén preguntando, el valor del lado izquierdo es la Latitud y el de la derecha la Longitud.

Enviar comentario

Ventana de alerta para AJAX con Javascript, DOM y CSS

Domingo, Noviembre 2nd, 2008

En este tip les mostraré como armé esta ventana de alerta para AJAX, con DOM y CSS… la idea es entregar una base para agregar funcionalidades tales como drag, eventos de salida, etc:

Esta es la base:

alerta.js

Código :

function alerta(titulo, texto) {

Primero definimos la función, que recibirá el titulo de la alerta mas el texto del contenido… Además, trabajaremos con una imagen llamada fondo.gif, que será el fondo de la ventana mientras se muestra la alerta (yo elegí una imagen de 4 píxeles con 3 transparentes para que se opaque el contenido bajo la alerta) y definimos un div contenedor de nuestra ventana de alerta llamado fondo como sigue:

Código :

var fondo = document.createElement('div');
      fondo.style.backgroundImage = "url(img/fondo.gif)";
      fondo.style.position = "absolute";
      fondo.style.width = "100%";
      fondo.style.height = "100%";
      fondo.style.top = "0px";
      fondo.style.left = "0px";
      fondo.style.verticalAlign = "middle";
      fondo.align = "center";

Ahora bien, tenemos el fondo, pero necesitamos además crear la ventana de alerta que contendrá lo siguiente:

  • Una barra de titulo
  • Un contenedor con el texto de la alerta
  • Un contenedor con el boton "Aceptar"

veamos como sigue:

Código :

var ventana = document.createElement('div');
      ventana.style.width = "200px";
      ventana.style.margin = "5px";
      ventana.style.border = "solid 1px #999999";
      ventana.style.backgroundColor = "#FFFFFF";
      
      var barraTitulo = document.createElement('div');
         barraTitulo.style.backgroundColor = "#e2e3e5";
         barraTitulo.innerHTML = titulo;
      
      var contenido = document.createElement('div');
         contenido.style.padding = "5px";
         contenido.innerHTML = texto;
      
      var cerrar = document.createElement('div');
         cerrar.style.padding = "5px";

Ahora bien, tenemos que crear un botón de tipo input al cual le asignaremos la acción de ocultar nuestra ventana de alerta y dejar nuestra pagina como estaba anteriormente:

Código :

var boton = document.createElement('input');
            boton.type = "button";
            boton.value = "Aceptar";
            boton.onclick = function() {
               fondo.style.visibility = "hidden";
            }

Bien, solo queda agregar estos contenedores a donde correspondan para poder finalizar mostrando la ventana en el body:

Código :

ventana.appendChild (barraTitulo);
      ventana.appendChild (contenido);
      ventana.appendChild (cerrar);
      
   fondo.appendChild (ventana);
   document.body.appendChild(fondo);

return true;
}

Retornamos y esa es todo el código necesario para mostrar la ventana de alerta que se llama mediante alerta(titulo, texto). Espero que les haya servido, saludos!

Enviar comentario

Cómo cargar Google Maps de forma asíncrona.

Viernes, Octubre 31st, 2008

Google Maps ha sido uno de los grandes inventos que se sacó Google de la manga. Normalmente para cargar Google Maps situamos una etiqueta <script> dentro de nuestra página con nuestra id del api de Google Maps. Luego modificamos la etiqueta <body> para que cuando se cargue el documento, ejecute una función para inicializar el mapa.

El problema que ya comenté en un post anterior (Cargar Google Analytics una vez se haya cargado la página), es que esto, en según que momentos, puede ralentizar de una forma muy grave nuestra página, o por ejemplo, el mapa lo tenemos en una pestaña que por defecto no es visible. Por ello, podemos obtar por una solución que incrementará sustancialmente la velocidad de carga de nuestra página y que se encargará de que, una vez se haya cargado la página, proceder a la descarga y la inicialización del nuestro Google Map.

Esta no es la única utilidad, también podríamos cargar nuestro Google Map a voluntad mediante la pulsación de cualquier elemento. Esto nos permitiría que en una página no cargásemos el Google Map hasta que el usuario decidiese utilizarlo, aliviando la carga de nuestra página.

Veamos un ejemplo práctico llamando a Google Maps una vez se ha terminado la carga de nuestra página:

Lo primero de todo, veamos la estructura de nuestros ficheros:

Por un lado tenemos un fichero html en el cual hay una capa que utilizaremos para insertar nuestro Google Maps y las llamadas a los ficheros googleMaps.js y jquery.js.

Código :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
   <title>Ejemplo de carga de forma asíncrona de Google Maps</title>
</head>
<body>
   <div id="mapa" style="width:300px;height: 300px">
      <p style="text-align:center"><strong>Cargando</strong></p>
   </div>
   <script type="text/javascript" src="jquery.js"></script>
   <script type="text/javascript" src="googleMaps.js"></script>
</body>
</html>

Cómo podemos ver, el div con id "mapa" tiene un texto interior que pone "Cargando". Esto es para que mientras se carga nuestro Google Maps el visitante pueda saber que el navegador está trabajando. Después del div, insertamos las dos llamadas a nuestros ficheros javascript. El primero es la librería jQuery que nos ayudará realizar la petición de carga del conjunto de ficheros necesarios para cargar Google Maps.

En el fichero googleMaps.js tenemos el código necesario para realizar la carga del mapa:

Código :

function cargarMapa(){
   if (GBrowserIsCompatible()) {
      var map = new GMap2(document.getElementById("mapa"));
      map.setCenter(new GLatLng(39.578678,2.646021), 16);
   }
};

$(document).ready(function(){
   var api='ABQIAAAAOxTvdJxbyGuGB8_UUEe52xRHT0E5MDpBZnfhvo0jhLIefK70hRTYIol4_Lr75EWTtT9VjcaZzY2QWg';
   $.getScript('http://maps.google.com/maps?file=api&amp;v=2.x&amp;key='+api+'&amp;async=2&amp;callback=cargarMapa');
});

Lo primero que vemos es una función llamada "cargarMapa" la cual será llamada una vez tengamos cargada la librería de Google Maps. Esta función únicamente se encarga de mostrar nuestro Google Maps en un determinado div (en nuestro caso el div llamado "mapa") y situarlo en una coordenada (new GLatLng(39.578678,2.646021)) con un determinado zoom (16).

La parte interesante viene justo después. Vemos el comienzo típico de cualquier fichero js que jQuery ( $(document).ready(function(){ ) y justo después dos líneas de código; la primera es una variable en la cual, por cuestiones de tener un código más legible, guardo la clave del api de Google Maps. Y en el segundo realizo la petición, que a simple vista, es la misma url que normalmente nos da google para poner en las etiquetas <script>. Pero si nos fijamos, existe dos diferencias. Justo al final de la línea vemos que hay dos parámetros de url nuevos: &asyn=2&callback=cargarMapa. El primero (async=2) permite llamar de forma asíncrona (cuando nosotros queramos y no siempre cuando se carga el documento al completo), y el segundo (callback=cargarMapa) es el parámetro que le dice a Google Maps que función debe ejecutar una vez tenga todo lo necesario cargado para ser ejecutado.

Ponerlo en práctica es tremendamente sencillo y podemos sacarle mucha utilidad al tema, como por ejemplo, la siguiente demostración dónde cargamos el mapa cuando alguien hace clic sobre un botón:

http://www.marcosdev.com/ejemplos/googlemaps_async/index2.html

La diferencia entre el primer ejemplo y este segundo, reside en que la capa "mapa" la tengo escondida y que en vez de cargar el mapa directamente, le agrego una funcionalidad al botón para que este lo carge cuando hagan clic sobre él, y además, haga visible la capa:

Código :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
   <title>Ejemplo de carga de forma asíncrona de Google Maps</title>
</head>
<body>
   <div id="mapa" style="width:300px;height:300px;display:none;">
      <p style="text-align:center"><strong>Cargando</strong></p>
   </div>
   <input type="button" name="bCargar" id="bCargar" value="Cargar Mapa" />
   <script type="text/javascript" src="jquery.js"></script>
   <script type="text/javascript" src="googleMaps.js"></script>
</body>
</html>

Código :

function cargarMapa(){
   if (GBrowserIsCompatible()) {
      var map = new GMap2(document.getElementById("mapa"));
      map.setCenter(new GLatLng(39.578678,2.646021), 16);
  }
};

$(document).ready(function(){

   //Agregamos evento click al botón
   $('#bCargar').click(function(){
      //Mostramos la capa mapa
      $('#mapa').show();
      var api='ABQIAAAAOxTvdJxbyGuGB8_UUEe52xRHT0E5MDpBZnfhvo0jhLIefK70hRTYIol4_Lr75EWTtT9VjcaZzY2QWg';
      $.getScript('http://maps.google.com/maps?file=api&amp;v=2.x&amp;key='+api+'&amp;async=2&amp;callback=cargarMapa');
   });
});

Espero que les sea útil

P.D.: Los estilos de la capa "mapa" están escritos utilizando el atributo style. Esto no es una buena práctica; hay que utilizar ficheros CSS de estilos. Lo he hecho así para hacerlo más visible para todos.

P.D2.: En el segundo ejemplo se podría insertar la capa "mapa" en tiempo real sin necesidad de que esté en el código, pero sería menos didácticos para aquellas personas que tengan un nivel bajo de Javascript.

Enviar comentario

Listar resultados de una búsqueda con PHP + MySQL para AJAX

Lunes, Octubre 27th, 2008

Bueno, la idea es realizar un PHP que nos devuelva un XML con resultados de una búsqueda pasada por parámetros POST y lo envíe como text/xml para poder ser recogido de forma fácil mediante JavaScript con el objeto XMLHttpRequest.

Supongamos ahora que tenemos una tabla llamada STOCK en donde almacenamos los registros referidos a cada producto que comercializa la empresa de Manolo. Los principales campos son ID, CÓDIGO DE PRODUCTO, DESCRIPCION, URLIMG (url de la imagen). Vamos a enviarle a nuestro buscador.php la variable buscar por POST para que la recoja en el caso que corresponda y realice la búsqueda.

Veamos un poco de código:

buscador.php

Código :

<?php
   header("Content-type: text/xml");

Antes que nada definiremos el formato de salida como text/xml para que se interprete el contenido como un archivo XML. Esto lo hacemos mediante la función header() que envía una cabecera.

Código :

require (“conexión.php”);

Aquí el archivo con los datos de la conexión a la base de datos, ojo! es muy recomendable que el archivo NO se encuentre en una carpeta pública.

Código :

$condicion = "";
$resultados = 0;

Definimos las variables en juego, $condicion se refiere a la las especificaciones del SELECT de la búsqueda, luego:

Código :

if (isset($_POST['buscar'])) {

      $cadena = htmlentities($_POST['buscar']);
      $cadena = str_replace(" ", "%", $cadena);
      
      $condicion .= " WHERE DESCRIP LIKE '%$cadena%'";
   }

Con htmlentities() prevenimos la inclusión de caracteres no deseados en la consulta. Es importante realizar un control sobre los parámetros pasados para evitar problemas de inyección SQL. Luego reemplazamos los espacios por comodines “%” para especificar que las palabras separadas deben aparecer juntas en los resultados de la búsqueda.

Código :

// REALIZAMOS LA CONSULTA SEGUN LOS PARAMETROS OBTENIDOS   
   $consulta = "SELECT * FROM STOCK$condicion ";
   if (!($res = mysql_query($consulta)))
      echo $consulta;

Así procedemos a realizar la consulta y obtener los resultados, en caso de que la consulta falle devolvemos el código SQL (es importante reemplazar esto por un mensaje de error pertinente).

Y, finalmente, creamos el documento XML mediante el objeto DOMDocument() y funciones como $objeto->appendChild(), $objeto->createElement(), $objeto->setAttribute() que sirven para agregar nodos, crear nodos y setear atributos de un nodo respectivamente, dentro del archivo XML:

Código :

// OBTENEMOS LA CANTIDAD DE RESULTADOS
   $resultados = mysql_num_rows($res);
   
   /** CREAMOS EL DOM DE NUESTRO XML
     * CON LA SIGUIENTE ESTRUCTURA:
      *
     * <productos n=$resultados>
     *       <producto>
     *         <codigo>codigo</codigo>
     *         <descripcion>descripcion</descripcion>
     *          <urlimg>urlimg</urlimg>
     *       </producto>
     *      ...
     * </productos>
     */
   $dom = new DOMDocument('1.0', 'UTF-8');
   $productos =$dom->appendChild($dom->createElement("productos"));
   $productos->setAttribute("n", $resultados);
   
   for ($i=0; $i<mysql_num_rows($res); $i++) {
   
      // DEFINIMOS LAS VARIABLES DE DATOS
      $txtCodigo = utf8_encode(mysql_result($res, $i, 'CODIGO'));
      $txtDescripcion = utf8_encode(mysql_result($res, $i, 'DESCRIP'));
      $txtUrlimg = utf8_encode(mysql_result($res, $i, 'urlimg'));
      
      // ANEXAMOS LOS NODOS
      $producto = $productos->appendChild($dom->createElement('producto'));
      $producto->setAttribute('id', $txtCodigo);
      
      $codigo = $producto->appendChild($dom->createElement('codigo'));
      $codigo->appendChild($dom->createTextNode($txtCodigo));
      
      $descripcion = $producto->appendChild($dom->createElement('descripcion'));
      $descripcion->appendChild($dom->createTextNode($txtDescripcion));
      
      $urlimg = $producto->appendChild($dom->createElement('urlimg'));
      $urlimg->appendChild($dom->createTextNode($txtUrlimg));
   }

Y, por último, devolvemos el resultado como un XML de la siguiente forma:

Código :

// UNA VEZ CREADO EL XML LO VOLCAMOS EN LA PANTALLA
   $dom->formatOutput = true;
   echo $dom->saveXML();
      
   mysql_close();
?>

Eso es todo, es bastante simple y provee un punto de partida para facilitar el trabajo con el lenguaje de servidor en AJAX y realizar un nexo entre los registros de una base de datos con la aplicación correspondiente, espero haya servido, saludos!

Enviar comentario

jQuery irá incluido en el Visual Studio de Microsoft

Jueves, Octubre 2nd, 2008

En la noticia OMGWTFBBQ!? de la semana, Microsoft y Nokia han anunciado que incluirán a jQuery como parte de sus plataformas para desarrolladores. Específicamente, jQuery será parte del Visual Studio y del framework MVC para ASP.NET. jQuery también tendrá soporte de IntelliSense dentro del Visual Studio (ayudas visuales, tooltips con información de los métodos y sintaxis de jQuery, etc). En el lado de Nokia, esperan usarlo en todos sus sitios web, así como en su plataforma para creación de sitios web móviles en teléfonos Nokia.

Microsoft también creará widgets, componentes y elementos de interfaz de usuario como extensiones para jQuery. Tanto MS como Nokia prometen que no cambiarán el código de jQuery, respetarán su licencia de código abierto y colaborarán con el proyecto.

jQuery es, sin duda, uno de los mejores frameworks de Javascript y AJAX que existen. Aquí en Cristalab tenemos un tutorial de jQuery para novatos, además de artículos más avanzados. Igualmente, usamos jQuery en todos los desarrollos de los proyectos de la comunidad (incluyendo ClabEngines, el CMS de Cristalab).

Hay más información en el blog de jQuery, Scott Hanselman y Slashdot.

PD. Curioso que la gente de Microsoft use Firefox para mostrar ejemplos de aplicaciones wen en ASP.net y Javascript.

Enviar comentario