martes, 31 de mayo de 2011

Como crear una base de datos con MySQL

En esta oportunidad usaré un ejemplo simple que servirá para explicar paso a paso la construcción de una base de datos en MySQL. Crearemos una lista de clientes y sus datos de ubicación.
Asumiré que ya tiene instalado MySQL en su computadora en un servidor de prueba; si no es así, puede ver como se hace la instalación en el artículo Servidores de prueba: Qué tal me esta quedando?.
También podemos usar el servicio MySQL que seguramente venga pre instalado en el servidor donde tiene alojada su página.Lo primero que haremos en acceder a phpMyAdmin, el software por defecto para administrar MySQL, las pantallas son similares en cualquier sistema operativo. Escribimos en la barra de nuestro navegador preferido:

http://localhost/
Si tu servidor esta bien instalado y funcionando, debería aparecer la página inicial del mismo. En mi caso aparece esto:
Luego, buscamos el enlace a phpMyAdmin (PMA) y hacemos clic. Si nos presentara la pantalla de seguridad colocamos la clave que hayamos configurado. En mi caso no llegué a configurar la seguridad del servidor, así que uso la clave por defecto para el usuario "root" (la clave es lampp).
Ok! ya entraremos al phpMyAdmin. Probablemente ya podremos ver en la columna de la izquierda algunas bases de datos propias de sistema, las cuales recomiendo no tocar.

Ahora creamos nuestra base de datos
Para este ejercicio de prueba, le daremos a la tabla el nombre de "clientes". Colocamos el nombre en el campo correspondiente y le damos clic al botón "Crear".

Para conocer criterios profesionales de creación de bases de datos les puedo recomendar estos dos enlaces:

De inmediato PMA nos presentará una pantalla para comenzar a crear las tablas. Crearemos la tabla "clientes_data". Yo lo haré en principio con 7 campos, pero tu puedes hacerlo a tu gusto o necesidad. Además, esta cantidad de campos se podrá aumentar o disminuir a gusto posteriormente. Luego presionamos el botón "Continuar".
Ahora nos presentará el formulario de creación de los campos de la tabla. Llenamos todos los campo tomando en cuenta cada atributo:
  • Campo: el nombre del campo (tome en cuenta las recomendaciones que aparecen en el primero de los dos artículos que menciono líneas arriba)
  • Tipo: el tipo de datos. Presenta muchas opciones, pero puedo mencionarles los siguientes:
    • INT = números enteros. Es ideal para la clave principal del registro, además de otros datos similares
    • VARCHAR = caracteres o texto
    • DATE = fechas en formato mm/dd/yy
    • FLOAT = números de coma flotante o decimales
    • BOOLEAN = datos de valor dual como Falso/Verdadero, SI/NO, Activo/Inactivo
  • Longitud: la longitud máxima de los datos a contener. Tome en cuenta que para los datos de tipo FLOAT debe indicarse la longitud total y cuantos decimales llevará (nivel de precisión). Por ejemplo, si indicamos "8,2", 8 será el largo total del número, y 2 la cantidad de decimales. Para más detalles se puede consultar la documentación oficial.
  • Predeterminado: el valor por defecto del campo. Se puede dejar en blanco si no hay ninguno.
  • Nulo: Indica si el campo permitirá contener valor nulo, es decir, ningún valor.
  • Indice: En el caso de que el campo sea la Clave Principal de la tabla, se indica en esta columna
  • A_I: Significa Auto Incrementable, este campo activado habilita a MySQL a asignar un valor que se incrementa automáticamente en cada nuevo registro.
  • Comentarios: Recomiendo ámpliamente llenar este campo con una breve explicación del dato que se esta almacenando. Con el tiempo vamos aprendiendo el valor de documentar todo lo que hacemos, se los puedo asegurar ;-)
 Luego podremos "Grabar" los cambios o "Añadir" más campos y "continuar". Los campos que dejemos sin nombre no se guardarán.
Todos los detalles de estos campos pueden ser modificados posteriormente, aunque sería ideal estudiar bien la estructura de la base de datos desde el principio. Así tendremos lista nuestra tabla.
Luego podremos agregar registros con la opción "Insertar", eliminarlos, vaciar la tabla o eliminarla, modificar su estructura, o realizar cualquier tipo de consulta SQL. También tenemos la posibilidad de cargar datos desde un archivo externo desde varios formatos.
Igualmente podremos exportar a muchos tipos de archivos, cada formato nos presentará las opciones necesarias y se puede incluso comprimir los archivos resultantes.

Otra herramienta muy buena para diseño de bases de datos en MySQL es la provista por la empresa ORACLE, dueños de MySQL. Se trata de MySQL Workbench y podemos encontrarlo "aun" gratis en su página oficial http://wb.mysql.com/, les invito a que le den un vistazo.
Por favor, no duden comentar, preguntar o cuestionar lo escrito en este blog, todos estamos para aprender algo nuevo cada día.

miércoles, 25 de mayo de 2011

LINUX, pero sin exagerar

Por algunos años he sido "perseguidor" de Linux, atraído por las muchas bondades que sus defensores alegan, pero nunca fui capaz de soltar Windows debido a que algunas de las aplicaciones para mi trabajo siguen siendo mucho mejores en Windows.
Mis primeros intentos fueron un desastre!!! lo confieso. Volé mucha información, tardé días tratando de recuperar me de la debacle con algún recuperador de archivos borrados.
Luego encontré versiones de Linux Live CD, lo cual me permitió probarlo sin dañar nada. Como dicen en mi tierra "el que se quema con leche, ve una vaca y llora".
Así conocí Linux Ubuntu, pero la verdad eran poco permanentes las sesiones de prueba, y eso de "instalar" cada vez que quería probarlo no era tan agradable. Buscando y leyendo encontré una solución que me gustó más, Wubi! la mejor idea que se les pudo haber ocurrido a la gente de Ubuntu. Se trata de una instalación de Ubuntu 100% funcional, independiente de Windows, con toda la potencia del Ubuntu, pero encapsulado en un espacio del disco de modo que no toca nada de Windows.


Instalando Ubuntu con Wubi
Wubi es un tipo de instalación en la que Ubuntu crea una carpeta en el lugar que elijamos, y en ella coloca un archivo del tamaño fijo que le indiquemos, dentro del cual se encontrará todo Ubuntu.
Al colocar el CD de instalación de Ubuntu, muestra un diálogo inicial donde aparecen tres opciones, elegimos "Instalar dentro de Windows" o "Install inside Windows".

Luego mostrará otro diálogo en el que elegimos el sitio de instalación que será una de las particiones de nuestro disco rígido, el tamaño del archivo que será nuestro "Disco Rígido Virtual" exclusivo para Ubuntu, el tipo de escritorio (Gnome por defecto), El idioma de la instalación, el nombre de usuario y la password.
Para ayudar a decidir donde instalar, mostrará la cantidad de espacio libre de que dispone el disco. Una vez elegidas las opciones deseadas, se procede a Instalar. Allí el Wubi creará una carpeta llamada "Ubuntu" y dentro colocará TODO lo que necesitamos, sin tocar nada de Windows. Al terminar pedirá reiniciar la computadora.
Cuando reinicie, aparecerá una nueva pantalla en la que elegimos en que Sistema Operativo deseamos comenzar y muestra Windows y Ubuntu. Seleccionamos Ubuntu y seguimos las pocas y sencillas instrucciones que nos de para terminar de instalar el sistema. Listo!! ya tenemos Ubuntu y no paso ningún desastre.

WINE: corriendo programas de Windows en Ubuntu
Una vez que probamos lo agradable de Linux Ubuntu, no se si a todos nos pasa, pero a mi me dio por odiar a Windows, y hablar mal de él en todos los ámbitos en los que tenía alguna audiencia interesada. Siempre consigues gente exagerada que te da más "leña para ese fuego", así que no es difícil convertirse en lunuxero empedernido.
La realidad es que, por más ciertas que sean las verdades que se dicen de Windows, su popularidad como sistema operativo lo hace el objetivo principal de las más grandes empresas de software propietario  especializado. Aun cuando existe mucho software libre de muy buena calidad, yo soy sincero en decir que no cambio Photoshop por Gimp, ni abandono Illustrator por Inkscape u OpenOffice Dibujos, ni mucho menos InDesign por Scribus (quizás sea costumbre y falta de ganas de cambiar). Esos programas en ambiente Linux son realmente buenos, de excelente calidad y cada vez mejores, pero sigue habiendo cosas en las que se quedan cortos.
Así que, para dejar de reiniciar la pc para trabajar en esos programas, decidí probar Wine.
Se instala en la mayoría de las distribuciones de Ubuntu con una simple orden en el terminal:
sudo apt-get install wine
Luego viene la parte difícil: encontrar las versiones de los programas deseados que SI corran bien bajo Wine. Wine es una especie de ambiente adecuado para aplicaciones que corren por naturaleza bajo Windows, pero a decir verdad con algunas, sobre todo con las más recientes, no lo logra.
Bajo Wine pude correr sin problema Photoshop CS2, más avanzado no. Pude también instalar Illustrator 10, pero con algunas fallas, pude instalar alguno que otro juego no muy exigente y dejé de hacer pruebas al ver era todo un azar si funcionaría o no lo que instalara.

Quitando Windows (casí...)
Al final, llegué a la etapa terminal de mi locura y he decidido que mi computadora no tendrá más instalado Windows en el disco C.
Mi investigación dio como resultado una posibilidad que me gustó. Les describo los pasos que tomé:
1. Me bajé un programa para hacer particiones en caliente, uno gratis tal como me lo recetó el doctor, EASEUS partition manager. Antes de partir en pedazos mi disco, tome las previsiones, respaldé algunas cosas y pase el defragmentador de disco. Dividí mis DD de 160 Gb en 2 particiones, tome aproximadamente 80 Gb. para Windows y los programas, y 80 Gb para mis archivos, los que necesitaba conservar. Ambas particiones de tipo NTFS.

2. Me fui a lo grade y corrí desde el inicio el programa de instalación de Ubuntu (esta vez no lo hice con Wubi dentro de Windows).
3. Cuando me preguntó donde quería instalar Ubuntu, decidí elegir el modo manual. Ahí, al mostrar como está el disco actualmente, aparece con colores en una franja las distintas particiones y sus tamaños.
4. Con un poco de temor a lo desconocido, me lancé a la aventura y borré la partición inicial que contenía Windows y los programas.
5. En ese espacio vacío, al inicio, cree una partición de tipo EXT3 de 25Gb, con punto de montaje /
6. en el espacio restante de 36Gb creé una partición adicional de tipo EXT4 con punto de montaje /home donde quedarían mis documentos bajo Linux
7. Además cree otra partición de tipo SWAP de 2Gb, para memoria de intercambio (según los expertos, la SWAP debe igual a la memoria RAM, pero como mínimo ser de 1Gb), esta la puse al final de todo, incluso después de la partición de datos que no llegue a tocar. Así quedó distribuido mi Disco Rígido.
8. Una vez instalado todo el sistema operativo, revisé mis "Lugares", y ahí estaba todo, no faltó nada de mis preciados archivos de datos. Mis documentos, mis diseños, mis imágenes y todo lo demás quedaron intactos.
Para más detalles de como hacer una buena partición de Disco Rígido para Linux Ubuntu, recomiendo ver este video instruccional.

VirtualBox: Abandonando Windows, sin dejarlo
Al final, como les comenté, no soy tan fanático como para abandonar por completo Windows. Si bien casi todo lo hago en Ubuntu, he dejado una alternativa totalmente funcional para los programas en Windows: VirtualBox.

VirtualBox es un virtualizador de Sistemas Operativos. Dicho en palabras simples, con este sistema creamos en un pedazo de nuestro disco rígido y lo convierte en una máquina ideal para recibir la Instalación de un sistema cualquiera. Siguiendo las instrucciones, cree una máquina vistual para Windows XP en mi disco /home, usando 10Gb y allí volví a instalar Windows.
Allí reinstalé mi Photoshop, DreamWeaber, Illustrator y una que otra utilidad adicional, además de un antivirus por si acaso. Entre las instrucciones encontré una manera de "compartir" a través de una carpeta los archivos de mi Windows XP con Ubuntu, de manera que se ha volteado la tortilla, si algo falla en mi Windows, lo quito (tal como hacía antes cuando tenía instalado Ubuntu  en Windows con Wubi), lo reinstalo y nada se pierde de mis archivos.
La ventaja de esta manera de tener las cosas radica en que no necesito reiniciar mi PC para nada. tengo ambos sistemas disponibles al mismo tiempo. La desventaja es la poca potencia que puede tener Windows Virtualizado para correr programas pesados o exigentes, seguramente exige mucha más memoria RAM que correr programas para Windows sobre Wine.
Me gustaría escuchar sus opiniones al respecto, quizás alguien con más experiencia nos pueda dar ideas.

viernes, 20 de mayo de 2011

Servidores de prueba: Qué tal me esta quedando?

Una de las primeras cosas que hacer para iniciarse como desarrollador Web es montar un servidor de pruebas para verificar que lo diseñado funcione como se debe.

Un servidor de prueba es una especie de "réplica" del servidor en donde alojará la página una vez lista. Contiene intérpretes de los principales lenguajes que usaremos al diseñar, lo cual hace que la página se comporte tal como lo hará cuando la publiquemos para el mundo.

Los servidores de prueba son llamados WAMP, LAMP o MAMP, según sea el sistema operativo en el que se insalen Windows, Linux o Mac. Evidentemente se trata de la primera letra del acrónimo, las otras letras significan Apache como servidor Web, MySQL como servidor de base de datos, y PHP, Perl o Python como lenguajes de programación.

Existen muchos paquetes que se consiguen gratis en la Internet, que instalan todo de una sola vez, Vertrigo, Appserv, entre otros. Yo he probado varios y por ahora me quedo con XAMPP, pero solo por gusto personal. Lo importante es entender como funcionan y saber donde poner cada cosa. De todos modos lo explicaré usando de ejemplo el XAMPP, y Windows como sistema operativo.

1. Descargue la versión actualizada del XAMPP desde su página oficial en www.apachefriends.org.

2. Ejecute el instalador, siga los pasos de la instalación.

3. Una vez instalado podremos acceder al Control Panel desde el cual debemos ver iniciados (Running) el servidor Apache y MySql. Si deseamos que se inicien cada vez que encendamos nuestra PC, marcaremos las opciones Servicio (Svc) de ambos ítems.


Debemos tener cuidado con algunos programas como el Skype porque, si inician antes que el XAMPP, pueden hacer que este no funcione.

4. Probamos si todo quedó bien instalado. Desde cualquier navegador en nuestra computadora escribimos la dirección http://localhost/
Una página similar a esta se mostrará la primera vez permitiendo elegir el idioma en el que se mostrará la página incial del XAMPP. Luego tendremos acceso a todas las opciones de configuración de XAMPP, pero por ahora no entraré en detalles con este punto.

Y ahora qué?
El servidor tiene una carpeta especial donde se colocan los archivos que se harán visibles en el navegador. En XAMPP la carpeta se llama htdocs, y normalmente se encuentra en C:\xampp\htdocs\. Es allí donde pondremos nuestros archivos.

Es conveniente que cada proyecto web tenga su propia sub carpeta dentro de htdocs:


C:\xampp\htdocs\nombre_de_la_web\

En esa sub carpeta pondremos nuestra estructura de archivos para crear nuestra página Web. Hasta donde sé, no existe una norma obligatoria de como crear la estructura de archivos de una página web, pero debería contener al menos una carpeta para las imágenes y una para los scripts o cgi.


C:\xampp\htdocs\nombre_de_la_web\cgi-bin\
C:\xampp\htdocs\nombre_de_la_web\images\

Cada quien luego decidirá que nombre le pondrá a sus carpetas y cuantas más deseará colocar. Luego colocaremos los archivos en su sitio, la página home o default deberán estar en la carpeta raíz del sitio:


C:\xampp\htdocs\nombre_de_la_web\home.html


y accederemos a esa página en nuestro servidor de pruebas de esta forma:

http://localhost/nombre_de_la_web/home.html

o simplemente mencionando el nombre del sitio, como cuando lo hacemos en la Internet:


http://localhost/nombre_de_la_web

Luego, dentro del diseño de la página tomaremos como raíz la carpeta contenedora del proyecto, sin necesidad de mencionarla:


<a href="home.php">Home</a>

Y una imagen que este en la carpeta images podremos mencionarla así:


<img src="images/logo.jpg" alt="logo" width="80" height="57" />

Cualquiera que sea el software que decidamos usar para diseñar nuestra web, podremos ver los resultados de nuestro trabajo antes de publicarlos en la Internet colocando cada cosas en su lugar en nuestro servidor de pruebas.

jueves, 19 de mayo de 2011

AJAX para principiantes - 2

Como explique anteriormente, la técnica AJAX (Asynchronous JavaScript and XML) consiste en enviar solicitudes al servidor a través de un canal silencioso y una vez obtenida la respuesta, colocarla a vista del usuario sin necesidad de recargar la página.

Para que la tecnología AJAX funcione necesita varios elementos, todos indispensables:
1. La página web, por supuesto. En ella más adelante aprenderemos a colocar espacios bien definidos para depositar la respuesta del servidor.
2. Un canal de comunicación silencioso, llamado "objeto XMLHTTPRequest"
3. Un contenido previamente registrado en el servidor, que será la respuesta a nuestra solicitud.

Normalmente cuando queremos "cargar" una página en el navegador, escribimos la URL en la barra de direcciones y listo!

Pues bien, básicamente el objeto AJAX hace lo mismo pero sin que nadie lo vea (esta es una de las formas que tiene para solicitar la información al servidor). Cuando obtiene el resultado, se ejecuta el siguiente paso que consiste en colocar ese resultado a la vista del usuario, en una zona de la página preparada para esto.

Cómo creamos el objeto AJAX?
Lo primero es "declararlo" y ponerle nombre. Todos los navegadores modernos (IE7, Firefox, Safari y Opera) tienen ya incluido el objeto, por lo que se puede declarar así:
variable=new XMLHttpRequest();
Ahora bien, para versiones antiguas de Internet Explorer como IE5 y IE6, se necesita declarar distinto:
variable=new ActiveXObject("Microsoft.XMLHTTP");
En definitiva, para lograr que funcione bien se declara verificando la forma en que funcione bien para cualquier navegador:
var ajax;
if (window.XMLHttpRequest)
  {// codigo para IE7+, Firefox, Chrome, Opera, Safari
  ajax=new XMLHttpRequest();
  }
else
  {// codigo para IE6, IE5
  ajax=new ActiveXObject("Microsoft.XMLHTTP");
  }


Y... donde coloco eso?
Un sitio adecuado para empezar sería la cabecera de la página, para hacer pruebas o cuando no tiene más que una página en su proyecto, es decir entre las etiquetas <head> y </head>, sin embargo yo recomendaría preparar un archivo .js separado, y hacer una llamada a ese archivo en la cabecera de la página.


Creamos un archivo javascript:
function nuevoAjax()
{
 var ajax = false;
 if (window.XMLHttpRequest)
  {// codigo para IE7+, Firefox, Chrome, Opera, Safari
  ajax=new XMLHttpRequest();
  }
 else
  {// codigo para IE6, IE5
  ajax=new ActiveXObject("Microsoft.XMLHTTP");
  }

 return ajax;
}


Lo guardamos con el nombre que mas nos guste, en mi caso lo llamaré (por pura originalidad) ajax.js
Luego, cargamos el archivo ajax.js en la cabecera de la página donde deseamos usar la técnica AJAX.
Para este ejemplo crearé una página html nueva y la nombraré principal.html.
<html>
<head>
<title>Mi pagina con AJAX</title>
<script type="text/javascript" src="ajax.js"></script>
</head>
<body>
</body>

Listo! ya estará disponible la función que crea "instancias" del objeto AJAX para que lo usemos cada vez que lo necesitemos.

Que datos voy a capturar del servidor?
Si bien la técnica AJAX hace referencia al uso del XML como lenguaje de transporte de datos, no se limita a este lenguaje. AJAX devolverá el contenido tal como lo consiga en el servidor, salvo pequeñas limitaciones relacionadas con el idioma y la codificación del contenido.

Lo lógico es que se trate de datos que varíen constantemente, o cuyo origen se quiera mantener en secreto, o resultados de fórmulas complejas con muchas variables en juego, o cosas por el estilo.

Por ahora solo necesitaremos algún contenido para hacer nuestras pruebas. En mi caso escribiré un archivo con la palabra Neeos y lo guardaré como dato.html en el servidor.


Luego haremos una llamada con AJAX para que el servidor nos devuelva el contenido del archivo dato.html. En la zona <head> de nuestra página principal.html, después de la linea donde llamamos al archivo ajax.js escribimos:
<script language="JavaScript" type="text/JavaScript">
function cargarDatos()
{
  var respuesta;
  var objeto_ajax=nuevoAjax();
  objeto_ajax.open("GET", "dato.html", true);
  objeto_ajax.onreadystatechange=function() {
    if (objeto_ajax.readyState==4) 
   {
    respuesta = objeto_ajax.responseText;
    }
  }
  objeto_ajax.send(null);
}
</script>


Expliquemos esto: la función tiene como objetivo capturar el contenido del archivo dato.html en silencio, sin que el usuario lo note.
- Creamos una variable vacía para la respuesta:
var respuesta;
- Creamos una instancia del objeto XMLHTTPRequest del que hablamos al principio, usando la función nuevoAjax() que preparamos en el archivo ajax.js
var objeto_ajax=nuevoAjax();
- Abrimos el archivo dato.html usando el método GET, es decir, enviando la información al servidor por URL. 
objeto_ajax.open("GET", "dato.html", true);
Debo mencionar un par de cosas con respecto a esta línea. Con el método GET podemos enviar al servidor datos para que este sepa que respuesta darnos. por ejemplo:
objeto_ajax.open("GET", "dato.php?id=325&date=22/10/2000", true);
En este caso le diríamos al servidor que necesitamos un contenido relacionado con el ítem número 325 para la fecha 22/10/2000. Hemos llamado al archivo que procesa esta solicitud dato.php porque en nuestro ejemplo imaginario se hace uso del PHP para consultar la base de datos y obtener una respuesta.


Otra cosa a tomar en cuenta es la palabra "true", que significa que la consulta se hará de manera Asíncrona. Eso quiere decir que si existen otras cosas que necesiten realizarse en la página, estas se harán sin esperar la respuesta del servidor. Eso le da tiempo al servidor a "pensar bien su respuesta antes de hablar" ;-)
- Le indicamos al objeto AJAX que debe esperar una respuesta, en este caso el estado 4 significa "respuesta recibida":

objeto_ajax.onreadystatechange=function() {
    if (objeto_ajax.readyState==4) 
   {
    respuesta = objeto_ajax.responseText;
    }
  }

Ponemos esa respuesta en la variable "respuesta".
- Desencadenamos toda la funcion con la orden objeto_ajax.send(null); Aquí es donde realmente empieza a trabajar el objeto AJAX.
Si decidimos usar el método POST en lugar de GET, los datos adicionales que se le envían al servidor se colocarían en lugar de null.

y ahora que hago con la respuesta?
Para demostrar como funciona la técnica AJAX, vamos a usar dos ejemplos:
Ejemplo 1: campo de texto
En la zona <body> de la página principal.html colocamos un campo de texto vacío y un botón para ejecutar la función cargarDatos()
<body>
<input type="button" name="cargar" onclic="cargarDatos();" value=" Cargar Datos " />
<br />
<input type="text" name="resultado" id="resultado" value="" />
</body>
Luego hacemos una pequeña modificación a la función cargarDatos() para que ponga los resultados en el campo de texto resultado:

function cargarDatos()
{
  var respuesta;
  var objeto_ajax=nuevoAjax();
  objeto_ajax.open("GET", "dato.html", true);
  objeto_ajax.onreadystatechange=function() {
    if (objeto_ajax.readyState==4) 
   {
     respuesta = objeto_ajax.responseText;
     document.getElementById('resultado').value = respuesta;
   }
  }
  objeto_ajax.send(null);
}


Ejemplo 2: Zona DIV contenedora
La otra forma de hacerlo es similar, pero en lugar de un campo de texto, usaremos una zona contenedora para la respuesta:

<body>
<input type="button" name="cargar" onclic="cargarDatos();" value=" Cargar Datos " />
<div id="resultado"></div>
</body>



Y nuevamente hacemos una pequeña modificación a la función cargarDatos() para que ponga los resultados en la zona DIV resultado:
function cargarDatos()
{
  var respuesta;
  var objeto_ajax=nuevoAjax();
  objeto_ajax.open("GET", "dato.html", true);
  objeto_ajax.onreadystatechange=function() {
    if (objeto_ajax.readyState==4) 
   {
     respuesta = objeto_ajax.responseText;
     document.getElementById('resultado').innerHTML = respuesta;
   }
  }
  objeto_ajax.send(null);
}


Has tus propias pruebas y coméntanos que tal te fue, si dieron los resultados esperados. Aun nos queda mucho que aprender de esta simpática tecnología.

miércoles, 18 de mayo de 2011

AJAX para principiantes


Ajax es, a mi modo de ver, una técnica de desarrollo Web que ha revolucionado la forma en que hacemos las páginas web.

Básicamente, consiste en enviar "solicitudes" al servidor y mostrar la "respuesta" sin que sea necesario que se recargue completamente la página para mostrar esa respuesta.

A la manera tradicional:
1 - El usuario hace clic en un enlace y envía una solicitud al servidor
3 - El servidor prepara un "paquete" de respuesta con la página completa: cabecera, logotipos, barras de navegación, hoja de estilo, pie de página, etc. y lo envía a la PC del usuario, al tiempo que atiende a unos cuantos usuario más que están haciendo otras solicitudes.
4 - Cuando la respuesta al fin llega a la PC de usuario, el navegador se encarga de construir la página completa, poniendo cada cosa en su lugar.
Con Ajax:
1 - El usuario hace clic en un enlace y envía una solicitud al servidor
2 - Esta solicitud es enviada al servidor a través de un "canal" exclusivo de Ajax que trabaja en silencio.
3 - El servidor prepara un "paquete" con SOLO los datos necesario para dar respuesta al usuario, el resto de los componentes de la página siguen ahí a la vista del usuario.
4 - El canal Ajax permanece alerta a la respuesta del servidor.
5 - La respuesta obtenida es preparada y colocada en el sitio adecuado de la página sin que esta tenga que reconstruir ningún otro elemento.

Con Ajax el servidor prepara paquetes de respuesta mucho más pequeños, por lo que las páginas cargan más rápido. La presentación y "maquillaje" de esa respuesta está a cargo del navegador de usuario, por lo que se acelera aun la navegación.

En mi próxima publicación Ajax para principiantes 2, les comentaré como crear el canal de comunicación Ajax entre la página y el servidor.