Neeos: 2011

miércoles, 8 de junio de 2011

Menú desplegable con AJAX

Vamos a mostrar un interesante menú desplegable hecho con la técnica AJAX, y como construirlo paso a paso. Debo advertir que quizás se requiere de conocimientos básicos de programación y en especial, algo de programación en ambiente Web.
Necesitaremos los siguientes elementos:

Base de datos: Usaremos MySQL como SMBD y, para este ejemplo tendremos una tabla cargada con un listado de ciudades
Un script PHP que capture los datos de la base de datos según el parámetro enviado.
Una Página Receptora de los resultados, en la que colocaremos la zona para mostrarlos. Además esta misma enviará la solicitud de los datos que necesita mostrar.

Veamos como será el resultado esperado. Solo comience a escribir un nombre en el campo de texto indicado. Al escribir las 3 primeras letras aparecerá un listado de los nombre en los que se encuentren estas. Por favor, intente escribir "mar..."

Nombre

Documento

Paso 1. Empezamos construyendo la página donde se desencadenan todos los eventos. En nuestro ejemplo usaremos lo siguiente:

<html>
<head>
<title>Menu desplegable con AJAX</title>
</head>
<body>
<div style="float:left;width:80px;">Nombre</div>
<div style="float:left; width:220px;">
<input type="text" style="width:200px;" name="nom" id="nom" value="" />
</div>
<div style="float:left; width:130px;">
Id <input type="text" style="width:90px;" name="id" id="id" value="" />
</div>
<div style="float:left; width:190px;">
Documento <input type="text" style="width:90px;" name="cid" id="cid" value="" />
</div>
</body>
</html>

Paso 2. Desarrollamos los elementos básicos para que AJAX funcione. Primero la función para crear instancias del objeto XMLHTTPRequest. En el post AJAX para principiantes - 2 encontraremos mas detalles acerca de este tema.

Paso 3. Crearemos el archivo php que se conectará a la base de datos para sacar de ella lo que necesitamos. A este archivo lo llamaremos array_listado.php, luego lo veremos mencionado en el proceso de captura de datos con Ajax en el paso 4.

<?php
$hostname = "localhost";
$database = "my_database";
$username = "my_username";
$password = "my_password";
$conexion = mysql_pconnect($hostname, $username, $password) or trigger_error(mysql_error(), E_USER_ERROR);

mysql_select_db($database, $conexion);
$sql_query = "SELECT * FROM clientes";
$cliData = mysql_query($sql_query, $conexion) or die(mysql_error());
$cliCount = mysql_num_rows($cliData);
if ($cliCount>0) {
$cli = mysql_fetch_assoc($cliData);
$k = 0;
do {
echo $cli['id']."~".$cli['cli_nombre']."~".$cli['cli_cid']."--\n";
} while ($cli = mysql_fetch_assoc($cliData));
}
?>

Paso 4. Ahora crearemos una función con la que cargaremos en nuestra página un listado de nombre, id y documentos (para nuestro ejemplo).

Podemos darnos cuenta de que:

A través de la función open del objeto Ajax, ejecutamos en el servidor el archivo array_listado.php.
Usando el método responseText del objeto Ajax, capturamos la respuesta del servidor como texto plano. Este contenido será una serie de registros separados por el doble guion "--", donde cada dato estará separado por el símbolo "~". Obviamente podemos usar el método responseXML, para lo cual deberíamos haber configurado nuestra respuesta del archivo array_listado.php como datos en formato XML.
Considerando que tenemos una respuesta en formato de texto plano, hacemos uso de la función split de JavaScript para obtener cada dato y construir la matriz de datos que necesitamos.

Paso 5. Agregaremos algunas funciones que nos ayudarán a que nuestra escritura en el campo de texto de como resultado que se despliegue un listado con los nombres que coincidan en cualquier parte con nuestra escritura.

Paso 6. Finalmente, agregamos un par de detalles al campo de texto nombre, para que se desencadenen las funciones programadas para los eventos onFocus y onKeyUp

onFocus: Al recibir el enfoque, la matriz de datos se recargará con la lista actualizada de clientes, por lo que en un entorno multiusuario se podrán tener siempre los datos actualizados.
onKeyUp: Al soltar la pulsación de una tecla, se desencadenará la función que despliega el listado de nombres coincidentes. Igualmente en esta misma función se encuentran inmersos los procesos de selección de la lista y carga de datos del nombre seleccionado.

Por favor, no olviden comentar sus ideas para mejorar este artilugio.

sábado, 4 de junio de 2011

Cómo obtener datos de MySQL usando PHP

El lenguaje PHP es muy extenso, como todos. Aprender todas las posibilidades del lenguaje cuesta tiempo y perseverancia. Hoy vamos a explicar como conectarse a una base de datos en MySQL usando PHP.
Lo primero que debemos hacer es crear un archivo PHP por separado, en el cual crearemos "la conexión" a la base de datos. Este archivo será un objeto reutilizable en nuestra página.

<?php
$hostname = "localhost";
$database = "mi_base_de_datos";
$username = "mi_nombre_de_usuario";
$password = "mi_password";
$conexion = mysql_pconnect($hostname, $username, $password) or trigger_error(mysql_error(),E_USER_ERROR);
?>

De esta forma, la variable $conexion será nuestro enlace a la base de datos.
Ahora bien, ¿de dónde sacamos esos valores que le daremos a este pequeño script? Veamos nuestro phpMyAdmin para entenderlo

Clic para agrandar la imagen

En esta pantalla haremos clic en la opción "Agregar un nuevo usuario"

Colocamos nuestro nombre de usuario, elegimos servidor Local, colocamos una contraseña y la repetimos. Luego debemos asignarle a este nuevo usuario privilegios. En principio vamos a usar la opción "Marcar todos/as", luego podremos hablar con más detalles acerca de estos privilegios.
De estos datos tomaremos en cuenta:

El nombre de la base de datos
El nombre de usuario que acabamos de crear
El password de este usuario

Estos tres datos los escribiremos cada uno en su sitio en nuestro archivo de conexión, el cual llamaremos conexion.php.

Capturemos datos de una tabla
Ahora vamos a crear un archivo PHP que se conecte a la base de datos, lea una tabla, extraiga un registro e imprima los datos de este registro.
Lo primero que haremos es cargar el archivo de coenxión, con la orden siguiente:

<?php require_once('conexion.php'); ?>

Luego, seleccionamos la base de datos y la tabla que queremos acceder (Recuerde siempre encerrar el código PHP entre "<?php" y "?>".)

mysql_select_db($database, $conexion);

Ahora creamos una variable con la sentencia SQL con la que accederemos a los datos que deseamos.

$sql_query = "SELECT * FROM clientes";

Por supuesto que se pueden hacer consultas mas complejas, así como hacer uso variables de las cuales dependa el resultado, utilizando el punto (.) para concatenar o la función sprintf. Veamos dos ejemplos:

$sql_query = "SELECT * FROM clientes WHERE id_cliente=".$id_a_consultar." ORDER BY nombre_cliente";

O bien,

$sql_query = sprintf("SELECT * FROM clientes WHERE id_cliente=%s ORDER BY nombre_cliente", $id_a_consular);

Donde las ocurrencias de "%s" son sustituidas por las variables después de la coma, en el mismo orden en que aparezcan.
Luego crearemos una instancia de la tabla a través de la función mysql_query.

$clientes = mysql_query($sql_query, $conexion) or die(mysql_error());

Por último, obtendremos el número de registros, y si es superior a 0 (cero), entonces podremos acceder a los datos.

$num_registros = mysql_num_rows($clientes);
if ($num_registros) {
$columnas = mysql_fetch_assoc($ciudad);
do {
$id = $columnas['id_cliente'];
$nombre = $columnas['nombre_cliente'];
$telef = $columnas['tel_cliente'];
echo $id . " - " . $nombre . " - " . $telef . "<br />"; // resultados
} while ($columnas = mysql_fetch_assoc($ciudad))
}

Existen varias otras formas de acceder a los datos, con el uso de las funciones propias de PHP para MySQL.
De esta forma habremos obtenido los resultados deseados. Tomemos en cuenta que al exponer los resultados, podemos agregar cualquier elemento HTML, es decir, podemos construir listas desplegables, tablas, cuadros de selección, etc. Nuestra propia audacia será nuestro límite!!

miércoles, 1 de junio de 2011

PHP: protegiendo el código fuente

PHP es un lenguaje de programación para crear scripts, ámpliamente usado en el desarrollo de páginas Web y sistemas bajo ambiente Web. Los scripts de PHP pueden ser colocados en archivos independientes o incrustado en el HTML de una página.

¿Qué tiene de particular el PHP?
PHP es un lenguaje de scripts que se ejecuta en el servidor. Esto quiere decir que las órdenes que coloquemos van a ser interpretadas en el servidor, traducidas en resultados que luego serán enviados al cliente, sin que se vea nada del código PHP que dio origen a ese resultado.
Veamos un ejemplo práctico. En su servidor de prueba o el servidor en donde hospeda su página, creemos un archivo PHP con apenas un par de órdenes:

<?php
echo "Hola mundo!!<br \>";
echo "Hoy es ".date("d/m/Y", time());
?>

Estas dos líneas las guardaremos como "prueba.php" en la carpeta raíz del servidor.
Luego navegaremos esta página en http://localhost/prueba.php. El resultado deberá ser algo como esto:

Y al ver el código de la página en el navegador obtendremos:

Como podemos ver, los elementos del código PHP no aparecen en el resultado. El intérprete de PHP que trabaja en el servidor, procesa el código PHP y ofrece el resultado como HTML, para luego enviar este resultado a la PC cliente. De esta manera, PHP permite proteger la integridad del código fuente de nuestra página Web.

PHP incrustado en HTML
Ahora probemos algo un poco mas complejo para demostrar como funciona PHP incrustado en medio de HTML. Crea un archivo con este código y guárdalo en la raíz de tu servidor como prueba2.php.

<html>
<head>
<title>Prueba de PHP incrustado en HTML</title>
<?php
$nombre = "Neeos";

function fecha_en_espanol()
{
$result = ""; // variable de resultado vacia
// matriz de valores para dias de la semana
$diaArr[0] = "Domingo";
$diaArr[1] = "Lunes";
$diaArr[2] = "Martes";
$diaArr[3] = "Miercoles";
$diaArr[4] = "Jueves";
$diaArr[5] = "Viernes";
$diaArr[6] = "Sabado";
// matriz de valores para meses del ano
$mesArr[0] = "";
$mesArr[1] = "ENERO";
$mesArr[2] = "FEBRERO";
$mesArr[3] = "MARZO";
$mesArr[4] = "ABRIL";
$mesArr[5] = "MAYO";
$mesArr[6] = "JUNIO";
$mesArr[7] = "JULIO";
$mesArr[8] = "AGOSTO";
$mesArr[9] = "SEPTIEMBRE";
$mesArr[10] = "OCTUBRE";
$mesArr[11] = "NOVIEMBRE";
$mesArr[12] = "DICIEMBRE";
$result = $diaArr[(int)date('w')]." ".date('d')." de ".$mesArr[(int)date('m')]." de ".date('Y');
return $result;
}
?>
</head>
<body>
<p>Hola mundo!!<br />
Hoy es <?php echo fecha_en_espanol(); ?><br />
Les saluda cordialmente <?php echo $nombre; ?>
</p>
</body>
</html>

Quiero resaltar varias cosas en este código:

El archivo lo hemos nombrado ".php" a pesar de contener código html. Esto se hace para que el intérprete PHP en el servidor "traduzca" la página a HTML antes de enviarla al cliente.
El código PHP se puede incluir en la zona <head> de la página. En este área es frecuente encontrar funciones, declaraciones de variables o constantes y sus valores, conexiones al servidor y capturas de datos de base de datos, etc.
También se puede colocar código PHP en medio del diseño de la página, para hacer llamadas a funciones o valores declarados o capturados previamente.
El código PHP se debe colocar entre las etiquetas "<?php" y "?>". Notemos también que cada línea debe terminar en ";".
Para obtener el resultado concatenado, hemos usado la función 'date' propia de PHP, pasándole el argumento que conviene en cada caso. Vea este artículo del manual oficial del PHP.
Note que el caracter de concatenacion en PHP es el punto '.'

El resultado en el navegador (cliente) será el siguiente:

Y el código fuente de este página no mostrará nada del código PHP original:

Les animo a que hagan sus propias pruebas y vean el potencial de este excelente lenguaje. Esté alerta a las próximas publicaciones, ya que seguiremos usando constantemente PHP para hacer muchas tareas comunes en el desarrollo de una página Web.

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:

Guia de Diseño de Bases de Datos

Normalización de Bases de Datos

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>

</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.