Estas diapositivas de Borkweb muestran paso a paso los conceptos resumidos y prácticos de JavaScript, Ajax, DOM y jQuery (en inglés). 

He leido algo de ello alguna vez pero no le tome mucho interes, ahora luego de ver la manera fácil como se explica en JasLabs, me anime a probar. ¿Cómo se hace? Existe muchas utilidades (comerciales) para generar una apliación ejecutable (.exe) con nuestro scripts en PHP, pero existe una de código abierto: Wapache (basado en el servidor web Apache). En realidad Wapache, lo que hace es emular una aplicación ejecutable combinando un control de IE embelido y una versión de Apache.

Empezemos descargando la última versión de Wapache, de Sourceforge. Descomprimimos el paquete ZIP, y veremos la siguiente estructura:

 

Tiene casi la misma estructura del servidor web Apache (por no decir igual). Por defecto trae una ejemplo de aplicación, vamos al directorio bin y ejecutamos Wapache.exe. Los archivos que se usan para emular esa aplicación se encuentran en el directorio htdocs. Es en ese directorio donde debemos colocar nuestros archivos PHP. Para que todo funcione correctamente debe colocar un archivo index.php que será el punto de inicio de la aplicación.

Ahora, vamos al directorio conf y abrimos con un editor de texto el archivo default.wcf, y buscamos la línea (abajo) y cambiamos index.html por index.php.

InitialUrl _app http://wapache/index.php main

Nuevamente vamos al directorio bin y abrimos Wapache, el resultado:

 

La conclusión a la que llegue es que aparte de tus script PHP, todos tus archivos (css, js, imágenes, etc) deben estar en el directorio docs, todos. De lo contrario se mostrarán mensajes indicándote que cierto archivo no se ha encontrado. Cómo en mi caso, probando no salió una imagen que encerré en un circulo rojo en la imágen.

En resumen

1. Descarga y descomprime
2. Copia tus archivos a htdocs
3. Configura en conf/default.wcf
4. Prueba en bin/Wapache.exe 

Wapache, además te permite agregar menús en la parte superior de la ventan, con lo cual daría un mejor acabado a nuestros proyectos. Pueden encontrar más sobre Wapache aquí. Espero que les sea útil esta información. Y si se me olvido mencionar algo, acepto comentarios.

1. Tutorial de Autocompletado con jQuery (Ajax), PHP y MySQL

Interesante tutorial (en inglés pero sencillo de entender) que te explica paso a paso como desarrollar tu propio cuadro de sugerencias (ó autocompletado) con jQuery. (demo, descarga)

2. Autocompletado con Mootools

Esta pequeña utilidad crea un cuadro de sugerencia no obstructivo y personalizable haciendo uso de Mootools. Compatible con IE 6+, Opera 9, Firefox 1.5+ y Safari 2+. Cuenta con documentación de cómo usarlo en su misma página web.

3. HOWTO: Usando "Ajax Agent" y PHP para autocompletado

Tutorial que te explica como crear un autocompletado usando el framework Ajax Agent (similar a Prototype, jQuery) y PHP en 2 pasos. (descarga) 

4. Autocompletado Simple con JavaScript

Utilidad hecha solo con JavaScript (no hace uso de Ajax) para crear un autocompletado fácil de entender e implementar. (descarga)

5. Autocompletado con Script.aculo.us

Usando una de las framework mas populares también podemos crear nuestro autocompletado.

6. Autocompletado con Ajax por Robert Nyman

Utilidad lista para usar en nuestros proyectos de la web de Robert Nyman. Esta utlilidad cuenta con documentación para usarlo e implementarlo en nuestro sitio web. (demo)

7. Ajax AutoSuggest / Autocomplete

Utilidad hecha con JavaScript que nos brinda los resultados de la consulta del autocompletado en formato JSON ó XML. Además cuenta con una apariencia agradable y sencilla. Su página web cuenta con documentación para el uso de esta utilidad. (demo, descarga)

8. Autocompletado con Ajax y PHP paso a paso

Interesante utilidad en Ajax vía Sentido Web. (demo, descarga)

9. Tutorial para crear un Autocompletado con Ajax y PHP

Este tutorial te explica de manera simple como implementar tu propio autocompletado de texto. (descarga)

10. ComboBox con autocompletado

Interesante utilidad en forma de lista desplegable, que muestra un cuadro con sugerencias. Por defecto el control <select/> de HTML no permite escribir dentro, solo seleccionar. Este ComboBox  es un alternativa a ello.

 

¿Conoces de otras utilidades para autocompletado de texto? 

Después de un mes alejado de blog vuelvo con un interesante tema. Aca siempre hablamos de Desarrollo y Programación web, especialmente centrado en Ajax y temas relacionados. Justamente vamos a hablar del corazón de Ajax: el objeto XMLHttpRequest. Éste tiene un problema relacionado con la seguridad cuando tratamos de hacer llamadas a dominios externos con el método open(método,url); Un ejemplo aqui:

function objAjax(){
 var xmlhttp=false;
  try{
   xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");	
  }catch(e){
   try {
    xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
   }catch(E){
    xmlhttp = false;
   }
  }
  if (!xmlhttp && typeof XMLHttpRequest!='undefined') {
   xmlhttp = new XMLHttpRequest();
  }
  return xmlhttp;
}

function MostrarYahooHomePage(){
 resultado = document.getElementById('resultado');
 ajax=objAjax();
 ajax.open("GET", "http://es.yahoo.com/"); //esta linea  nos interesa
 ajax.onreadystatechange=function() {
  if (ajax.readyState==4) {
   resul.innerHTML = ajax.responseText
  }
 }
 ajax.send(null);
}

Este script nos dará un error porque no podemos abrir un documento que se encuentra en otro dominio. Lo apropiado es llamar a documentos que se encuentran en nuestro propio dominio. ¿Cuál es la solución? Existen algunas soluciones (como usar iframe). Pero la que me llamo la atención es la que encuentra en Jaslabs donde explica lo siguiente:

1. Si tenemos nuestro servidor Apache, debemos asegurarnos de instalar o habilitar los módulos: mod_rewrite y proxy.
2. Luego crear la siguiente regla: ^/yahoo_proxy http://www.yahoo.com/service [P] en el archivo .htaccess
3. Ahora reemplazar la linea del método open por la siguiente: http.open("GET"."http://your_host/yahoo_proxy").

No lo he probado aún, pero teniendo en cuenta lo multifacético que es el servidor Apache... se ve funcional. Eso si lo probaré y les contaré...

Vía Ajaxian, una pequeña presentacion acerca del uso de jQuery. Explica selectores CSS, manejo de eventos, Ajax entre otros.

 

E Logo Design, muestra una relación de 50 tutoriales que te explican cómo diseñar tu propio logo, paso a paso, con Photoshop. Un recurso como para tenerlo a mano para todos aquellos que manejan a la perfección el Photoshop, y los que no también. 

Por ejemplo este tema: Colorful Logo, explica cómo, paso a paso con una serie de screenshot y breves explicaciones, llegar a obtener el primer Logo de 4 hojitas de colores que se muestra arriba en la imagen.

A lo largo del año pasado y comenzando este, he venido desarrollando pequeños ejemplos sobre la combinación de estos lenguajes PHP y MySQL con la técnica de programación web mas popular Ajax, de manera casera, como le digo yo, definiendo y usando nuestro propio objeto XMLHttpRequest. Existen muchos librerías que hacen el trabajo más fácil; pero, para aquellos que les gusta tener el control sobre TODO el código que tiene su aplicación web, es que desarrolle y comparti estos ejemplos. Ahora hago una lista de todos estos, muchos de los cuales fueron idea de nuestros visitantes.

Introducción y acceso a Base de Datos

• Breve introducción a Ajax [ Articulo ] [ Ejemplo ] [ Descarga ]
• Consulta de datos 1 [ Articulo ] [ Ejemplo ] [ Descarga ]
• Consulta de datos 2 [ Articulo ] [ Ejemplo ] [ Descarga ]
• Inserción de datos [ Articulo ] [ Ejemplo ] [ Descarga ]
• Actualización de datos [ Articulo ] [ Ejemplo ] [ Descarga ]
• Eliminar datos [ Articulo ] [ Ejemplo ] [ Descarga ]

Ver Artículo Completo ››

Slider Control

Veremos ahora lo relacionado con el control Slider del script.aculo.us, sí, ese control deslizante al cual podemos darle muchos usos. Veamos su sintaxis y algunas de sus principales opciones:

new Control.Slider('id_deslizador','id_pista', [opciones]); 

Donde opciones (las principales por supuesto) :

• axis: Determina la dirección del control Slider. Por defecto es horizontal.
• range: Determina el valor minimo y máximo. Uso: $R(2,10). En caso de no especificar esta opción, 0 y 1 son valores por defecto.
• values: Un array donde determinamos los elementos que serán recorridos con el Slider. Ej. values: [2,4,6,8,10], esto hará que cuando nos deslicemos por el control, forzadamente cambiará a estos valores.

Las demas opciones puede consultarlos en el wiki de script.aculo.us.

Funciones de retorno (Callback)

• onSlide: Nos permite ver nuestra ubicación entre el rango mientras nos desplazamos por el Slider.
• onChange: Nos permite ver nuestra ubicación cuando terminamos de desplazarnos.

Ver Artículo Completo ››

En el artículo anterior vimos que es posible capturar todos los elementos de los bloques div y su ubicación mediante la función JavaScript obtenerElementos(). Entonces nos toca ahora enviar esa cadena de valores a un script PHP para que se encargue de cortarlos en los fragmentos correspondientes a los nombres de los empleados (contratados y despedidos) y guardalos en la base de datos.

Pero antes de eso vamos a modificar la funcion obtenerElementos() para que solo envie la cadena de valores y divida a los elementos de cada bloque por un slash ( / ), esa cadena obtenida la pasamos a una función EnviarDatos() que explicaremos luego. La idea es que la funcion obtenerElementos() envie este tipo de cadena: empleado_1_grupo_1, empleado2_grupo_1 / empleado_1_grupo2, empleado_2_grupo_2

function obtenerElementos() {
 var secciones = document.getElementsByClassName('seccion');
 var alerttext = '';
 var separador = '';
 secciones.each(function(seccion) {
  alerttext += separador + Sortable.sequence(seccion);
  separador = "/";
 });
 EnviarDatos(alerttext);
 return false;
}

Veamos ahora la función EnviarDatos() junto con la función que nos permitirá usar el objeto XMLHttpRequest. En nuestro caso separamos estás funciones en un archivo al que llamamos ajax.js

function Ajax(){
 var xmlhttp=false;
 try {
  xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
 }catch(e){
  try {
   xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
  }catch(E){
   xmlhttp = false;
  }
 }
 if (!xmlhttp && typeof XMLHttpRequest!='undefined') {
  xmlhttp = new XMLHttpRequest();
 }
 return xmlhttp;
}

function EnviarDatos(cadena){
 ajax.Ajax();
 ajax.open("POST", "guardar.php",true);
 ajax.onreadystatechange=function(){
  if (ajax.readyState==4) {
   alert(ajax.responseText);
  }
 }
 ajax.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
 ajax.send("cadena="+cadena)
}

Ver Artículo Completo ››

Ahora veremos la forma de combinar la característica del drag drop (script.aculo.us) con PHP y MySQL, esto con el objetivo de que los elementos que hemos seleccionado o movido de un lugar a otro se queden guardados en una base de datos.

La aplicación se basará en el ejemplo de drag drop que realizamos días atrás. El artículo relacionado comentó sobre el elemento Sortable y sus opciones para la creación de elementos con drag drop. Pero veremos ahora algunos opciones mas. Empecemos entonces.

Creación de las tablas

Nuestras tablas están relacionadas con la condición del empleado. Vamos a crear dos tablas: contratado y despedido, algo simple para no complicarnos. Cada tabla tendrán sus campos: id, nombre_contratado e id, nombre_despedido, respectivamente. [Ver script SQL]

Y también creamos un script PHP para la conexión a la base de datos.

<?php
   //Configuracion de la conexion a base de datos
   //Cambie estos datos por los suyos
   $bd_host = "localhost"; 
   $bd_usuario = "root"; 
   $bd_password = "123456"; 
   $bd_base = "ribosomatic"; 
   $con = mysql_connect($bd_host, $bd_usuario, $bd_password); 
   mysql_select_db($bd_base, $con); 
?>

Ahora vamos por partes

Creamos un archivos index.php y especificamos los archivos del paquetes script.aculo.us que usaremos:

<script src="js/prototype.js" type="text/javascript"></script>
<script src="js/scriptaculous.js" type="text/javascript"></script>

Vamos a crear una función en JavaScript para obtener el id de cada contenedor div donde aparecerán los nombres de los empleados contratados y despedidos.

• La variable secciones obtiene todos los contenedores div cuya atributo class sea seccion
• Declaramos una variable de cadena vacia textoprueba
• Revisamos las distintas secciones a través de un bucle y cada iteración la asignamos a una funcion que trabajará con la variable seccion.
• Obtenemos el id de la variable seccion en la variable seccionID.
• Ahora concatenamos esta variable mas todos los elementos de esta seccion, los cuales los obtenemos con el elemento Sortable.sequence(seccion).
• El resultado en un alert será (ej.): seccionAnimales : gato, perro, pato, gallina n seccionCosas: silla, escritorio, mes

<script type="text/javascript">
 function obtenerElementos() {
  var secciones = document.getElementsByClassName('seccion');
  var textoprueba = '';
  secciones.each(function(seccion) {
   var seccionID = seccion.id;   
   textoprueba += seccionID + ': ' + Sortable.sequence(seccion) + 'n';
  });
  alert(textoprueba);
  return false;
 }
</script>

Ver Artículo Completo ››