En algunas ocasiones tenemos la necesidad de enviar las variables de un formulario al servidor, procesarlas allí y luego devolver un resultado al navegador del cliente pero haciendo todo esto en forma asincrónica. Xajax nos puede ayudar en situaciones como éstas.
Un formulario común, sería algo asi como esto:
<form name=’formulario’ action =’pagina.php’ method=’POST’>
<input type=’text’ name=’textoMensaje’ value=”/>
<input type=’submit’ value=’Enviar’/>
</form>
Donde vemos que ‘action’ nos envia a la página ‘pagina.php’ usando el método POST. Nada nuevo.
Ahora bien, sabemos que existe el evento JavaScript ‘onSubmit’ para las etiquetas FORM. Allí se coloca una función o archivo JavaScript cuyo propósito será el de ejecutarse al presionar el botón ‘Enviar’ del formulario con el mouse o si, estando tipeando texto en la caja de texto, presionamos ENTER. Para que suceda lo anterior, tendremos que eliminar la propiedad ‘action’ del formulario. Nos quedaría algo asi:
<form name=’formulario’ onSubmit=’enviarMensaje()’>
<input type=’text’ name=’textoMensaje’ value=”’/>
<input type=’submit’ value=’Enviar’/>
</form>
Justamente en esa función JS que acabamos de mensionar, colocaremos un método xajax que hará que el envío de las variables del formulario se haga de forma asincrónica, teniendo en cuenta para ello, un pequeño detalle.
La función PHP que luego será transformada en un método JS es:
function enviarMensaje($textoMensaje){
$respuesta = new xajaxResponse();
// Desarrollo de la función PHP con $texto como variable final luego de procesar $textoMensaje como variable de entrada.
$respuesta->assign(“divNoRespuesta”,”innerHTML”,$texto);
return $respuesta;
}
Finalmente, luego de definir e imprimir la funciones JS como se hace normalmente con XAJAX (ver post anterior), agregamos el método xajax_enviarMensaje(‘texto’) en el evento ‘onSubmit’ antes mencionado. Podemos hacer referencia al contenido de ‘<input type=’text’ name=’textoMensaje’ value=”’/> escribiendo ‘document.getElementById(“textoMensaje”).value‘ en lugar de nombrar la variable de entrada en la función.
<form name=’formulario’ onSubmit=’xajax_enviarMensaje(document.getElementById(“textoMensaje”).value); return false’>
<input type=’text’ name=’textoMensaje’ value=” />
<input type=’submit’ value=’Enviar’/>
</form>
Un detalle: hay que colocar ‘; return false’ a continuación de la función. El punto y coma, porque vamos a escribir mas código JS, y ‘return false’ para evitar la recarga del formulario que se produce al llamar al evento ‘onSubmit’.
Eso es todo, ahora ya podemos enviar las variables de un formulario en forma asincrónica con xajax.
Filed under: Ajax | 1 Comment
Tags: Ajax, PHP
Esta es una muy interesante estadística para que podamos ver cuáles son los trabajos online mas rentables y de mayor crecimiento, especialmente ahora en éstos tiempos de vacas flacas.
Este artículo es una copia del que fuera difundido hace pocos días por la consultora oDesk y publicada por Tendencia Digital.
PHP, Ajax, MySQL, WordPress, y SEO son las herramientas informáticas más solicitadas para los empleos IT en la modalidad freelance
En una gacetilla de prensa distribuida el 15 de enero de 2009, la empresa de trabajo online oDesk difundió un estudio referido al mundo de empleos freelance. Gracias a una compilación y análisis de más de 100.000 empleos freelance ofertados en su sitio durante 2008, la empresa encontró algunas tendencias respecto a las habilidades y competencias informáticas más solicitadas durante 2008.
Los datos muestran tendencias donde poner el foco si uno quiere aumentar sus probabilidades de ser contratado en el mercado laboral de herramientas informáticas
Los programadores PHP fueron claramente los profesionales Web más solicitados en el sitio oDesk en 2008. Otras destrezas de programación que los empleadores también buscaron con marcado interés incluyeron Ajax, MySQL, CSS, y Diseño Gráfico
Las competencias informáticas de crecimiento más rápido, basadas en crecimiento de demanda fueron Desarrolladores WordPress (+427 %) y Consultores SEO (+242 %), reflejando la continua necesidad de los negocios pequeños de tener una fuerte presencia Web. El crecimiento en Redacción (en ingles) y Excel refleja el creciente número de empleadores que, a traves de oDesk, están haciendo outsourcing, como también la expansión de oDesk en estas categorías
Los profesionales freelance pueden aumentar sus probabilidades de encontrar empleos, enfocándose en habilidades IT donde haya menos competidores. Los hallazgos de oDesk muestran que el Modelado de Base de Datos, LAMP (Linux, Apache, MySQL y PHP), Facebook, y Drupal representan las mejores oportunidades para los freelancers ya que la demanda para esas destrezas supera por mucho el número de contratistas.
Las competencias informáticas de crecimiento más rápido fueron:
1 – WordPress
2 – Redacción (en ingles)
3 – Excel
4 – Seo
5 – XHTML
6 – Linux
7 – Drupal
8 – Joomla
9 – CSS
10 – Diseño Gráfico
<!– –>
| Area de conocimiento | Ofertas, últimos 60 días en 2007 | Ofertas, últimos 60 días en 2008 | Cambio |
| 1. WordPress | 37 | 195 | 427.0% |
| 2. Redacción (en ingles) | 32 | 138 | 331.3% |
| 3. Excel | 30 | 118 | 293.3% |
| 4. SEO | 73 | 250 | 242.5% |
| 5. XHTML | 24 | 61 | 154.2% |
| 6. Linux | 23 | 58 | 152.2% |
| 7. Drupal | 70 | 169 | 141.4% |
| 8. Joomla | 157 | 352 | 124.2% |
| 9. CSS | 119 | 250 | 110.1% |
| 10. Diseño Gráfico | 20 | 42 | 110.0% |
El blogging dominó el área de crecimiento 2008. La demanda para desarrolladores y diseñadores con experiencia en WordPress aumentó más de 4 veces.
La demanda para redactores (en ingles), una buena porción de los cuales están online o relacionados con los blogs se ha triplicado.
Filed under: Varios | Leave a Comment
¿QUE ES DRUPAL?
- DRUPAL
“Drupal es un sistema de gestión de contenido modular y muy configurable.
Es un programa de código abierto, con licencia GNU/GPL, escrito en PHP, desarrollado y mantenido por una activa comunidad de usuarios. Destaca por la cálidad de su código y de las páginas generadas, el respeto de los estándares de la web, y un énfasis especial en la usabilidad y consistencia de todo el sistema.
El diseño de Drupal es especialmente idóneo para construir y gestionar comunidades en Internet. No obstante, su flexibilidad y adaptabilidad, así como la gran cantidad de módulos adicionales disponibles, hace que sea adecuado para realizar muchos tipos diferentes de sitio web.
El sitio principal de desarrollo y coordinación de Drupal es drupal.org, en el que participan activamente varios miles de usuarios de todo el mundo.“
¿COMO SE INSTALA?
Lo primero que tenemos que hacer es descargar la última versión estable de DRUPAL 6 del sitio http://drupal.org.es ( Comunidad de usuarios de Drupal Hispano) que al momento de escribir esto es un archivo comprimido similar a drupal-6.8.tar.gz . En el directorio raíz de nuestro servidor, pegamos el archivo que acabamos de descargar y lo descomprimimos allí mismo. Luego de la descompresión quedará una carpeta de nombre similar a drupal-x.x, donde x.x es la versión descargada. Personalmente no me agrada dejarle ese mismo nombre a la carpeta porque será el nombre que tendremos que tipear en el navegador para acceder al sitio. Aquí lo voy a cambiar, pero no por algo muy distinto: drupal68. Dentro de este directorio están los archivos y carpetas del sitio. Podemos iniciar la instalación tipeando http://localhost/drupal68 en el navegador, pero la instalación se hará en inglés, que es el idioma por defecto del sistema. Si deseamos que el sitio esté en español, tendremos que descargar el archivo de traducción al español, que hasta el momento es es-6.x-1.2.tar.gz . Lo pegamos en el interior de la carpeta que hace referencia a nuestro sitio en el servidor y lo descomprimimos allí mismo.
Una vez hecho lo anterior, tipamos http://localhost/drupal68 en el navegador y se dará inicio a la instalación del sitio en el servidor.
La primera ventana que veremos, nos preguntará por el idioma del sitio.
- Inicio de la configuración de un sitio web con DRUPAL 6
Seleccionamos la opción de idioma español y presionamos el botón “Select language” para continuar con la instalación.
La siguiente ventana muestra un error que se produce al no encontrar un archivo.
Lo que tenemos que hacer es simplemente renombrar el archivo /sites/default/default.settings.php por /sites/default/settings.php. Luego de haber renombrado, recargamos la página para continuar.
Nos aparecerá una ventana que nos pedirá ingresar los datos referentes a la base de datos con la que trabajará nuestra web.
Aquí vamos a trabajar con una base de datos MySQL, así que dejamos seleccionada la primera opción, mysqli. Luego tipeamos el nombre de la base de datos con la que trabajará el sitio. Podemos elegir un nombre como drupal68bd o el que uds quieran. Después tenemos que ingresar el nombre de usuario administrador de la base de datos de nuestro servidor y también su clave.
Ahora viene un detalle importante que deberán tener en cuenta: antes de presionar el botón “Guardar y continuar”, deberán asegurarse de haber creado una base de datos vacia en el servidor con el mismo nombre que colocaron mas arriba, porque de otro modo, les dará error.
Seguidamente les aparecerá una ventana de configuración. Allí colocaremos datos tales como nombre del sitio, email, el nombre de usuario del administrador del sitio y su clave, otros datos mas.
Por último, y si tienen correctamente configurado el servidor de correo, el sistema les mostrará un mensaje diciéndonos que nuestro sitio ya está instalado y funcionando.
Listo! , ahora será cuestión de empezar a configurar nuestro sitio según nuestras necesidades y empezar a cargarle toda la información sobre la cual tratará.
En próximos posts veremos cómo hacerlo.
Filed under: Drupal | 5 Comments
Para aquellos que cuenten con el servidor XAMPP, ya tendrán las librerías PEAR disponibles para usar en nuestros desarrollos. La primera vez que quise utilizar estas librerías, pude ver que si bien contaba con una carpera PEAR dentro de la carpeta PHP, me daba errores cada vez que las incorporaba a mis scripts. El tema pasaba porque tenía que instalar la librería antes de usarla 
Vamos a ver, entonces, que tenemos que hacer primero para poder instalar PEAR en nuestro servidor XAMPP:
- Descargar XAMPP si no lo tenemos ya instalado.
- Desde el símbolo del sistema, vamos al directorio C:\xampp\php
- Ejecutar el archivo go-pear.bat tipeándolo en el símbolo del sistema. A continuación se iniciará el proceso de instalación que podrá tardar algunos segundos.
- Una vez instalada la librería PEAR, debemos actualizarla. Con el símbolo del sistema abierto, tipeamos pear upgrade PEAR, y luego de unos segundos, ya lo tendremos actualizado a la última versión.
Una vez hecho lo anterior, ya podremos incorporar las librerías PEAR a nuestros scripts. Vallamos entonces, a ver cómo hacemos para implementar imágenes captcha en PHP utilizando la librería PEAR.
Las imágenes CAPTCHA, son aquellas que aparecen en algunos formularios como parte de un proceso de validación. Es muy común verlas en el registro de una cuenta de correo de hotmail o google, por ejemplo.
- Google captcha
Las CAPTCHA vienen a dar una solución de seguridad en los procesos de registros de usuarios y otras validaciones, pues garantizan en cierta medida que es una persona la que esta llevando adelante el proceso de registro y no un software que carga los datos del formulario en forma automatizada.
- Un formulario con CAPTCHA
Nuestro desarrollo está formado por dos archivos: index.php y captcha.php. El primero se encarga de mostrar el formulario y cargar el archivo captcha.php que dentro del formulario es tratado como un archivo de imagen (en vez de mostrar una imagen dentro del formulario, ejecuta el script captcha.php).
En el formulario, se debe ingresar un texto que sea igual al que muestre la imagen captcha, de ésta manera se estará cumpliendo con el propósito de que sea una persona el que ingresa la datos.
Al presionar el botón enviar, vuelve al mismo archivo index.php, pero ésta vez, observando los valores de variables de sesión que fueron creadas en la primera llamada al script, muestro un mensaje que indica que se ha tipeado un texto que es el mismo que aparece en la imagen CAPTCHA.
Además de éstos dos scripts, tenemos una carpeta (a la que llamaremos fuentes) que contendrá la fuente que usará el texto de la imagen captcha, en nuestro ejemplo, el archivo de la fuente que usaremos será corbelb.ttf, pero ustedes podrán usar las que más les guste.
Bueno, aqui voy con el archivo index.php:
<?
session_start();
// verifico si existe $enviar
if (isset($_POST['enviar'])){
// La variable de sesion $textoImagen es creada en el archivo captcha.php
// al momento de generar la imagen.
// Verifico si $textoImagen existe
if ($_SESSION['textoImagen'] == $_POST['texto']){
echo ‘<li>correcto’;
exit;
} else {
echo ‘<li>incorrecto’;
}
}
?>
<form method=’post’>
<table border=’1′ cellspacing=’0′ cellpadding=’5′ align=’center’>
<tr>
<td>Ingrese su nombre</td>
<td><input type=’text’ id=’nombre’ name=’nombre’></td>
</tr>
<tr>
<td>Ingrese su apellido</td>
<td><input type=’text’ id=’apellido’ name=’apellido’></td>
</tr>
<tr>
<td>Ingrese texto de la imagen</td>
<!– El archivo captcha.php genera la imagen –>
<td><img src=’captcha.php’><br/><input type=’text’ id=’texto’ name=’texto’></td>
</tr>
<tr>
<td colspan=’2′ align=’center’><input type=’submit’ id=’enviar’ name=’enviar’><input type=’reset’></td>
</tr>
</table>
</form>
Y acá está el archivo captcha.php:
<?
// El archivo captcha.php genera la imagen con texto incorporado.
session_start();
// Incorporacion de las librerias PEAR para la generación de imágenes captcha.
require_once ‘Text/CAPTCHA.php’;
// Creo una instancia del objeto Text_CAPTCHA
$captcha = Text_CAPTCHA::factory(‘Image’);
// Creo un array con los valores para la generación de la imagen
$opcionesImg['font_size'] = ‘24′;
$opcionesImg['font_path'] = ‘./fuentes/’;
$opcionesImg['font_file'] = ‘corbelb.ttf’;
$opcionesImg['text_color'] = ‘#660000′;
$opcionesImg['lines_color'] = ‘#FF9966′;
$opcionesImg['background_color'] = ‘#FFFFCC’;
// Creo la imagen (pero no la muestro todavía) con los valores especificados en el array
$captcha->init(200,70,NULL,$opcionesImg);
// El texto mostrado en la imagen lo cargo en la variable de sesión $textoImagen
$_SESSION['textoImagen'] = $captcha->getPhrase();
// Cargo la imagen a una variable para luego mostrar la variable
$imagen = $captcha->getCAPTCHAAsPNG();
if (PEAR::isError($imagen)){
printf(‘Error: %s’,$imagen->getMessage());
exit;
}
// Muestro la imagen
echo $imagen;
?>
Los scripts son bastante simples y creo que los he comentado lo suficiente como para poder entenderlo sin mas.
Filed under: PHP | 2 Comments
Tags: captcha, PHP, seguridad
Desde hace algún tiempo andaba dándole vueltas a un problema y la solución es mas simple de lo que se supone. El problema era cómo posicionar la barra de desplazamiento vertical (o de scroll vertical) en la parte inferior de la página al cargar la misma. Normalmente la barra aparece en la parte superior, pero lo que necesitaba era que se comporte al igual que en un chat: que con cada reload de la pagina, el scroll vertical esté en la parte mas baja del la página o iframe.
En JavaScript existe una función window.scrollBy(x, y); que posiciona las barras de desplazamiento en las coordenadas x e y. La verdad, es que no se trata de coordenadas sino de pixeles, horizontales para x y verticales para y. Entonces la solución al problema pasa por utilizar este método para mover la barra hacia abajo. ¿Pero cuántos pixeles hacia abajo? Tendríamos que saber cuántos pixeles de largo tiene la página y una vez que lo sepamos, colocar ese valor para y. Para x=0, la barra horizontal no se desplaza y por lo tanto la dejamos en 0.
Ahora bien, ¿Existe algún método o propiedad que me de el valor máximo de pixeles que utiliza una página?. Afortunadamente SI! Pero como dice alguna gente conocida.. “nunca la felicidad es conpleta!”: la propiedad que me da ese valor funciona en Firefox pero no en IE, y viceversa, el que anda para IE, no lo hace para Firefox.
Las propiedades en cuestión son window.innerHeight para Firefox y document.body.clientHeight para IE. Para evitarnos el problema de que funcione para uno y no para otro, tendremos que detectar el tipo de navegador que se está usando y dependiendo de cual sea, desplazar el scroll con window.scrollBy(x, y); cargando el valor de y con window.innerHeight o con document.body.clientHeight, según corresponda.
Aqui les dejo una página como ejemplo de cómo implementar lo dicho:
<html><head><title>usuario conectado</title></head>
<body>
<p>
Colocar texto aqui.<br>
Colocar texto aqui.<br>
Colocar texto aqui.<br>
Colocar texto aqui.<br>
Colocar texto aqui.<br>
Colocar texto aqui.<br>
Colocar texto aqui.<br>
Colocar texto aqui.<br>
Colocar texto aqui.<br>
Colocar texto aqui.<br>
Colocar texto aqui.<br>
Colocar texto aqui.<br>
Colocar texto aqui.<br>
Colocar texto aqui.<br>
Colocar texto aqui.<br>
Colocar texto aqui.<br>
Colocar texto aqui.<br>
Colocar texto aqui.<br>
Colocar texto aqui.<br>
Colocar texto aqui.<br>
Colocar texto aqui.<br>
Colocar texto aqui.<br>
Colocar texto aqui.<br>
Colocar texto aqui.<br>
Colocar texto aqui.<br>
Colocar texto aqui.<br>
Colocar texto aqui.<br>
Colocar texto aqui.<br>
Colocar texto aqui.<br>
Colocar texto aqui.<br>
Colocar texto aqui.<br>
Colocar texto aqui.<br>
Colocar texto aqui.<br>
Colocar texto aqui.<br>
Colocar texto aqui.<br>
Colocar texto aqui.<br>
Colocar texto aqui.<br>
Colocar texto aqui.<br>
Colocar texto aqui.<br>
Colocar texto aqui.<br>
Colocar texto aqui.<br>
Colocar texto aqui.<br>
Colocar texto aqui.<br>
Colocar texto aqui.<br>
Colocar texto aqui.<br>
Colocar texto aqui.<br>
Colocar texto aqui.<br>
Colocar texto aqui.<br>
Colocar texto aqui.<br>
Colocar texto aqui.<br>
Colocar texto aqui.<br>
etc.
<script type=”text/javascript” language=”JavaScript1.5″>
if (window.innerHeight) {
document.write(“FF “+window.innerHeight);
window.scrollBy(0,window.innerHeight*5);
}
else {
document.write(“IE “+document.body.clientHeight);
window.scrollBy(0,document.body.clientHeight*5);
}
</script>
</p></body>
</html>
Como verán, el script se tiene que ejecutar al final de la carga de la página y no al inicio…porque si lo ejecutamos al comenzar, la longitud en pixeles de la página será cero!
Si leen con atención el código, verán que a la propiedad en cuestión (window.innerHeight o document.body.clientHeight, según sea), la multiplico por un valor, en éste caso 5. Esto es porque por alguna extraña razón que desconozco, si coloco sólo esos valores, el scroll no aparece justo abajo. Aparece solo un poco mas arriba, digamos, al 90% del largo. Entonces, ¿qué pasa si a ese valor lo multiplico digamos por 5 o por 100? La respuesta a eso es que el nuevo valor de y exederá sobradamente el 100%. Si coloco este nuevo valor de y, la barra se moverá sólo al valor máximo que alcanzó, en este caso, llegará a ese 100% deseado. 
Filed under: javascript | 1 Comment
Tags: javascript
Recién salida la versión 8.10 de Ubuntu (Intrepid Ibex), descargué la versión para amd64. Para aquellos que no están muy familiarizados, les digo que es para micros de 64 bits. En caso de que tengan un micro que no sea de 64 bits, deberán descargar la version i386.
Hasta hace poco, si queríamos tener un servidor web XAMPP en nuestra máquina de 64 bits, no podíamos porque si bien se instalaba, no se ejecutaba correctamente pues arrojaba errores. Ahora, para Ubuntu 8.04 y 8.10, se instala y corre sin ningún tipo de inconvenientes.
En la página oficial de XAMPP, http://www.apachefriends.org/en/xampp-linux.html, podemos descagar el archivo xampp-linux-1.6.8a.tar.gz. Una vez descargado el archivo, ejecutamos las siguientes instrucciones de instalación:
1. Descargado el archivo en nuestra carpeta personal, abrimos la consola, y con permiso de superusuario, descomprimimos el archivo en la carpeta /opt de la siguiente manera:
sudo tar xvfz xampp-linux-1.6.8a.tar.gz -C /opt
2. El servidor está instalado ahora en /opt/lampp. Para inicializar el servidor vamos nuevamente a la consola, y también con permiso de superusuario, ejecutamos el comando lampp start de la siguiente manera:
sudo /opt/lampp/lampp start
3. Abrimos nuestro Browser favorito, tipeamos localhost en la barra de direcciones y listo! ya tendremos nuestro servidor XAMPP, corriendo en Ubuntu 8.10 para 64 bit
Filed under: Linux, Servidores | 1 Comment
Tags: Linux, ubuntu, XAMPP
Este es un artículo que trata sobre algo de una muy simple solución pero que no siempre se puede ver a simple vista. Aquí voy a procesar un único formulario que consta de un texto el caul tenemos que ingresar, y dos botones que, según sea el que seleccionemos, redirigirá la página a otra según corresponda con el valor del texto ingresado.
Aquí les muestro la página principal index.php
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1″ />
<title>Procesamiento de un formulario con dos botones en PHP</title>
</head>
<body>
<form action=”procesamiento.php” method=”post”>
<p>Ingrese un texto</p>
<p><input type=”text” name=”texto”/></p>
<p><input type=”submit” name=”cmdForm” value=”Procesar texto con el boton 1″ /></p>
<p><input type=”submit” name=”cmdForm” value=”Procesar texto con el boton 2″ /></p>
</form>
</body>
</html>
Como habrán visto, es sólo un formulario, con un campo texto y dos botones submit dentro. El detalle está en que, si bien son dos botones, los dos llevan el mismo nombre (name=”cmdForm”), solo cambia el valor de esos botones según sea el que seleccionemos: value=”Procesar texto con el boton 1″, para el boton1 y value=”Procesar texto con el boton 2″ para el boton 2. Al seleccionar uno de esos botones, el formulario nos manda a procesamiento.php, independientemente de cual botón presionamos. Será allí donde se procesará el texto según sea el botón seleccionado.
Aqui el segundo archivo: procesamiento.php
<?php
switch( $_POST['cmdForm'] ) {
case “Procesar texto con el boton 1″: header (“location:boton1.php?texto=”.$_POST['texto']);
break;
case “Procesar texto con el boton 2″: header (“location:boton2.php?texto=”.$_POST['texto']);
break;
}
?>
Aquí está todo el tratamiento de nuestro formulario con los dos botones: hago un switch (o un case, para otros lenguajes) con el valor del botón cmdForm (recordemos que al llamar a los dos botones con el mismo nombre, es como si fuera un sólo botón que admite dos valores!). Según sea el valor del botón, nos vamos a una página correspondiente al botón1 y a otra correspondiente al botón2. En ambos casos, me voy a esas dos paginas con el valor del texto ingresado para tratarlo según sea la utilidad que le demos.
Aquí estan las dos páginas, una para cada botón:
boton1.php
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1″ />
<title>Se procesó el formulario con el boton 1</title>
</head>
<?php
echo “Se procesó el formulario con el boton 1, y el texto de entrada es: <strong>”.$_GET['texto'].”</strong> “;
?>
<a href=”index.php”>Volver</a>
<body>
</body>
</html>
boton2.php
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1″ />
<title>Se procesó el formulario con el boton 2</title>
</head>
<?php
echo “Se procesó el formulario con el boton 2, y el texto de entrada es: <strong>”.$_GET['texto'].”</strong> “;
?>
<a href=”index.php”>Volver</a>
<body>
</body>
</html>
Estos dos scripts son prácticamente iguales, sólo cambian algunos detalles de nombre para cada botón. Podemos ver que aquí recupero la variable con el valor del texto que ingresamos inicialmente. Aquí utilizo GET y no POST, puesto que en el archivo procesamiento.php pasé la variable texto en el prompt (location:boton1.php?texto=”.$_POST['texto']) y luego muestro esa misma variable al final de un echo como para personalizar el resultado.
Eso es todo, espero que les sirva.
Filed under: PHP | 3 Comments
Tags: PHP
Trabajar en Google
Planeta Google, primera parte:
Planeta Google, segunda parte:
Google Argentina:
Filed under: Varios | Leave a Comment
Qué es xajax?
Xajax es un framework (que es algo así como un entorno de trabajo) y que está escrito en PHP. Es de código abierto y con él podemos crear aplicaciones web utilizando AJAX sin la necesidad de conocer todos los detalles de la programación en JavaScript.
Para qué sirve xajax?
En una aplicación Web, el servidor crea una página que es enviada al cliente. Ésta página crea, entre otras cosas, formularios y botones que a su vez disparan ciertos eventos de JavaScript (onclick, onchange, etc) o pueden redireccionar nuestra página a otra alojada en el servidor para ejecutar código PHP, por ejemplo. Estas funciones, como acabamos de mencionar, pueden o no interactuar con el servidor (llamando a eventos JavaScript o redirigiendo la página o otra alojada en el servidor), pero según el caso, podemos necesitar invocar datos que se encuentran sólo en el servidor de forma tal que parezca como si estuviéramos disparando un evento con JavaScript y no con una función PHP alojada en el servidor. Esto último se hace con Ajax (acceso asincrónico al servidor).
Este tipo de páginas resultan muy útiles y son lo último en desarrollo web (Web 2.0). Un proyecto Ajax puede resultar muy costoso y largo; pero con Xajax no es así.
XaJax te permite escribir funciones en PHP que pueden ser accedidas cuando ya la página ha estado enviada al navegador, cuando el usuario ha disparado un evento o la función PHP ha sido llamada desde JavaScript. Éstas funciones PHP modifican el contenido o el aspecto de la página, como lo podría hacer JavaScript, pero repito que se hacen desde PHP, lo que abre un abanico de posibilidades: PHP puede acceder a bases de datos, al sistema de archivos… Y todo sin recargar la página!!!
Para instalar la librería xaJax, debes abrir el zip que acabamos de descargar de la web y lo descomprimimos conservando la estructura de las carpetas. Lo descomprimimos dentro de la carpeta donde tienes la web en el servidor local o remoto y debes cambiarle el nombre de la carpeta (normalmente el nombre xajax seguido del nombre de la versión) por solamente xajax.
A éste momento la última versión es xajax 0.2.5 (stable). El zip consta de tres scripts PHP: xajax.inc.php, que contiene la clase xajax, xajaxResponse.inc.php, que contiene la clase xajaxResponse, y xajaxCompress.php, que es una utilidad para, de cierta manera, reducir el peso de un archivo JavaScript. Contiene también, en la carpeta xajax_js, dos archivos .js; uno que contiene el código original (el xajax_uncompressed.js) y otro que es el que está comprimido y es el que se usa para enviar al navegador (el xajax.js). Además de eso, también incorpora dos archivos .txt (la licencia y el readme) y dos carpetas más (examples, con ejemplos de utilización y tests, donde puedes probar xaJax).
Funcionamiento
Lo único que hay que hacer es escribir un require (‘xajax/xajax.inc.php’) en el archivo por defecto (index.php, por ejemplo). Obviamente, este archivo index.php está en la carpeta de nuestra web en el servidor, en donde has descomprimido el zip que ahora se ve como una carpeta de nombre “xajax”, repito.
Como he dicho antes, xaJax permitirá a una función JavaScript recibir una respuesta de una función del servidor. Dicha respuesta estará en formato XML (como es habitual en AJaX) y será interpretada por la misma función JavaScript que realizará los cambios en la página que se le piden.
El objeto xajaxResponse contiene la respuesta que realiza la función PHP y el objeto xajax es el que recibe las peticiones de que se ejecuten las funciones, el que las gestiona, al igual que todas las respuestas, y el que envia las respuestas en XML de vuelta al navegador.
Por lo tanto, se puede distinguir dos partes en una página basada en xaJax: una parte es todo el código php que contiene las funciones y los objetos xajax y xajaxResponse (además de todo el código necesario para que la web tenga un entorno dinámico) y otra parte que sería todo lo que se ejecuta en el navegador.
Bueno, basta de preliminares y vamos directamente a los hechos…
El ejemplo que a continuación les muestro, es muy sencillo. Es sólo para explicar el funcionamiento de la clase xajax. Con un poco de imaginación y de acuerdo a sus necesidades, uds. podrás complicarlo todo lo necesario de acuerdo a sus necesidades. Aquí los pasos:
1) Incluir con PHP el archivo donde está la clase xajax
//incluímos la clase ajax
require (‘xajax/xajax.inc.php’);
2) Creamos una instancia de un objeto de la clase xajax
//instanciamos el objeto de la clase xajax
$xajax = new xajax();
3) Escribimos una función en PHP, que luego llamaremos por medio de ajax
Esta función es todo lo complicado que se requiera. Realizará acciones del lado del servidor y por tanto puede acceder a bases de datos, abrir ficheros o cualquier cosa que se nos ocurra. Luego en la propia función realizaremos una instancia de un objeto AjaxResponse, que utilizaremos para mostrar resultados en la página.
function si_no($entrada){
if ($entrada==”true”){
$salida = “Marcado”;
}else{
$salida = “No marcado”;
}
//instanciamos el objeto para generar la respuesta con ajax
$respuesta = new xajaxResponse();
//escribimos en la capa con id=”respuesta” el texto que aparece en $salida
$respuesta->addAssign(“respuesta”,”innerHTML”,$salida);
//tenemos que devolver la instanciación del objeto xajaxResponse
return $respuesta;
}
El objeto xajaxResponse() se encarga de realizar acciones en la página sin tener que recargar el documento, en otras palabras, sin que veamos el refresh. Posee varios métodos o funciones. Uno de ellos es addAssign() que sirve para asignar un valor a una propiedad de un elemento HTML de la página. En este caso se asigna el valor contenido en la variable $salida al innerHTML de la capa “respuesta”, con lo que se cambia el contenido en esa capa.
4) Asociamos la función PHP al objeto xajax
//asociamos la función creada anteriormente al objeto xajax
$xajax->registerFunction(“si_no”);
Esta asociación permite ejecutar la función PHP desde una llamada a una función Javascript.
5) Antes de enviar cualquier contenido a la página, tenemos que ejecutar un método del objeto xajax para procesar las peticiones del que puedan llegar a la página.
//El objeto xajax tiene que procesar cualquier petición
$xajax->processRequests();
Es importante tener en cuenta que esta llamada al método se tiene que hacer antes de escribir algún contenido HTML dentro del código de la página, es decir, antes de que llegue al cliente algún caracter de código HTML.
6) Luego hacemos que la clase xajax escriba todo el códogo javascript necesario para procesar las llamadas a ajax.
//En el <head> indicamos al objeto xajax se encargue de generar el javascript necesario
$xajax->printJavascript(“xajax/”);
Lo ideal es hacer esta llamada al método printJavascript() dentro del <head> de la página.
Si nos fijamos, el método recibe un parámetro, que es la ruta relativa para acceder al directorio donde están los archivos xajax descomprimidos.
7) Podemos hacer llamadas a las funciones PHP en cualquier lugar del código, como respuesta a las acciones del usuario con javascript.
<input type=”checkbox” name=”si” value=”1″ onclick=”xajax_si_no(document.formulario.si.checked)”>
Como podemos ver, desde un elemento de la página, como en este caso una casilla de verificación, al cambiar su estado, se llama a una función javascript que ejecuta una función PHP escrita anteriormente. Es decir, al pulsar el chechbox se desencadena el evento onchange y con él se llama a la función xajax_si_no() enviándo como parámetro el estado (chequeado o no) de la casilla de verificación.
Pueden ver el código del ejemplo completo a continuación, pero hay que tener en cuenta que para que funcione tienen que disponer del código de la clase xajax, que en este caso debe estar en un subdirectorio que cuelgue del directorio donde está el archivo del ejemplo (por ejemplo index.php).
<?
//incluímos la clase ajax
require (‘xajax/xajax.inc.php’);
//instanciamos el objeto de la clase xajax
$xajax = new xajax();
function si_no($entrada){
if ($entrada==”true”){
$salida = “Marcado”;
}else{
$salida = “No marcado”;
}
//instanciamos el objeto para generar la respuesta con ajax
$respuesta = new xajaxResponse();
//escribimos en la capa con id=”respuesta” el texto que aparece en $salida
$respuesta->addAssign(“respuesta”,”innerHTML”,$salida);
//tenemos que devolver la instanciación del objeto xajaxResponse
return $respuesta;
}
//asociamos la función creada anteriormente al objeto xajax
$xajax->registerFunction(“si_no”);
//El objeto xajax tiene que procesar cualquier petición
$xajax->processRequests();
?>
<html>
<head>
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<META HTTP-EQUIV=”Content-Type” CONTENT=”text/html;charset=ISO-8859-1″>
<title>Si / No en Ajax</title>
<?
//En el <head> indicamos al objeto xajax se encargue de generar el javascript necesario
$xajax->printJavascript(“xajax/”);
?>
</head>
<body>
<div id=”respuesta”></div>
<form name=”formulario”>
<input type=”checkbox” name=”si” value=”1″ onclick=”xajax_si_no(document.formulario.si.checked)”>
</form>
<script type=”text/javascript”>
xajax_si_no(document.formulario.si.checked); //Llamando inicialmente a la función xajax_si_no inicializamos el valor de la capa con la respuesta
</script>
</body>
</html>
Para escribir éste post me basé en un artículo publicado en www.desarrolloweb.com y en el libro “AJAX WEB 2.0 La guia total del desarrollador”, de Francisco Minera, Ed. MPEdiciones – 2007
Filed under: Ajax, PHP | 1 Comment
Tags: Ajax, PHP
Hola amigos, acá estoy de vuelta luego de algo más de un mes. Mis excusas son las habituales de todo el mundo: mucho trabajo.
Esta vez les deseo comentar que he comprado una Palm TUNGSTEN E2. Recién estoy descubriéndole algunas cosas y la verdad es que la compré sólo con un sólo objetivo: programar en J2ME y ver que se puede hacer con un juguete como éste.
Lo primero que hice una vez que la tuve en mis manos, fué hacer algo que leí en un post por ahí: instalarle un simulador de HP48GX a mi palm. La HP48GX, es una muy potente calculadora de mano fabricada por la Hewlet Packard y, en mi modesta opinión, es una opción que todavía no ha sido superada a pezar de que son calculadoras que ya tienen algo más de 15 años en el mercado.
La cosa resultó muy bien y aquí les dejo algunas conclusiones de mi experiencia:
El programa que hace de simulador es el Power48 que es un emulador que nos permite tener ésta y otras avanzadas calculadoras en la Palm (HP 48SX, 48GX y 49G) . Se trata de software libre y gratuito, basado en un proyecto anterior llamado Emu48, que corría bajo Windows y PocketPC. Se ejecuta en una Palm, con sistema operativo PalmOS 5, pantalla de color de 16 bits con una resolución mínima de 320×320, procesador ARM y 16Mb de memoria interna.
Este emulador por sí sólo no basta, es como si sólo se tratase de una interface gráfica que hace que la pantalla de nuestra palm se vea como una de las mencionadas calculadoras HP. Necesitamos además las ROM de éstas calculadoras. Son éstas las que hacen que el emulador se comporte tal cual como lo hacen éstos juguetitos en la realidad. Por motivos de copyright no se incluyen con el Power48, pero HP deja disponer de éstas siempre que sea sin ánimo de lucro.
La instalación no tiene ningún problema:
- Primero debemos bajar el emulador y descomprimirlo en un directorio de nuestro disco duro. Por ejemplo en “C:\Power48″.
- Descargamos la ROM de la o las calculadoras que queramos emular. Están disponibles libremente en la página de HPCalc, y éstos son sus enlaces:
- ROM de la HP 48SX: http://www.hpcalc.org/hp48/pc/emulators/sxrom-j.zip
- ROM de la HP 48GX: http://www.hpcalc.org/hp48/pc/emulators/gxrom-r.zip
- ROM de la HP49G:
- http://www.hpcalc.org/hp49/pc/rom/beta1196.zip
- Descomprimimos las ROMS en el directorio donde pusimos el Power48 (en nuestro caso “C:\Power48″). Ahora abrimos una ventana de comandos de Windows (“Menú inicio->Accesorios->Símbolo del sistema”) y hacemos lo siguiente:
- Entramos en ese directorio. Por ejemplo “cd C:\Power48″ .
- Convertimos las ROMS que hemos descomprimido aquí, a un formato que entienda el Power48. Para ello usamos la utilidad p48rc que acompaña al emulador. La sintaxis es “p48rc archivo-origen destino”. Destino puede ser “CARD” (es necesario en mayúsculas) si pensamos guardar las ROMS en nuestra tarjeta SD (recomendable), o “INTERNAL”, si van a guardarse en la memoria principal de la Palm. Por ejemplo, para convertir las tres ROMs, y copiarlas luego a la tarjeta SD, se haría con las siguientes órdenes:
p48rc.exe sxrom-j CARD
p48rc.exe gxrom-r CARD
p48rc.exe rom.49g CARD - En ese directorio aparecerán tres archivos terminados en .p48rom. Son los que nos interesan.
- Instalamos el Power48 como haríamos con cualquier otro programa.
- Y finalmente transferimos las ROM ya modificadas haciendo un hotsync a la palm.
Listo, nuestra palm ya estará transformada en una maravillosa calculadora HP.
Algunos de ustedes se preguntarán: ¿Cómo hago para cargar mis programas hechos para HP que tengo en mi computadora al emulador de la HP48G de la Palm? muy simple:
Generalmente escribo los programas con un editor para calculadoras HP como puede ser el HPUserEdit 4. Este editor guarda los scripts con extensión “.hpe” En nuestro caso podemos tener un archivo “dummy.hpe” cuya contenido podría ser trivial:
«
40 'A' STO 60 'B' STO A B + EVAL
»
A éste archivo “dummy.hpe” debemos transformarlo a un formato transferible por hotsync mediante el ejecutable h48obj según la siguiente sintaxis:
p48obj dummy.hpe INTERNAL
Se generará un archivo para Palm y será éste el que debemos mandar via hotsync a nuestra palm. ¿Cómo se hace para hacer que el emulador lo cargue? también es muy simple: sobre la base de la pantalla de la calculadora a un lado, se encuantra una flecha doble (<->) (ver imágen de la calculadora más arriba). Haciendo click con el puntero en esa flecha doble, aparecerá una panralla como la siguiente:
En la pestaña LOAD aparecerá nuestro archivo “dummy.hpe”. Con sólo seleccionarlo con el puntero y dando OK, el programa se mostrará en el STACK de nuestra HP simulada.
¿Y si escribo un progama en el emulador? ¿Cómo hago para pasarlo a la computadora? También la solución es simple:
Al programa escrito lo debemos colocar en el STACK del emulador. Luego, en la pestaña SAVE (ver la última imagen de más arriba), se nos preguntará con que nombre queremos guardar éste último programa, por ejemplo “object-prueba”. Haciendo hotsync, el programita se copiará en “C:\Archivos de programa\palmOne\usuario\Backup” y dirigiéndonos a esa carpeta podremos ver el archivo “object-prueba” ya guardado en nuestra PC.
Y eso es todo!
En la página http://www.hpcalc.org/ se puede encontrar mucha información acerca de estas calculadoras, como por ejemplo el manual de instrucciones. Y en la del Power48 se explica cómo usar el emulador.
Que lo disfruten!
Filed under: Varios | 1 Comment
Entradas Recientes
- Envio asincrónico de un formulario con xajax
- Tendencias para trabajadores online – freelance
- Instalación de DRUPAL 6 en WINDOWS XP o VISTA
- Implementación de imágenes CAPTCHA en PHP
- Control y posicionamiento de la barra de scroll
- Instalación de XAMPP en Ubuntu 8.10 para amd64
- Procesamiento de un formulario con dos botones en PHP
- Trabajar en Google
- Xajax: una clase en PHP para AJAX
- Una Palm corriendo un emulador de una HP48GX
- Validación o autenticación de usuarios en PHP (segunda parte)
Categorías
- Ajax (2)
- Drupal (1)
- javascript (1)
- Linux (1)
- PHP (5)
- Servidores (3)
- Varios (7)
