Web y desarrollo

Muchas veces un error de programación nos puede llevar a pasar algún que otro mal rato. Una errata en el código de un formulario o los valores de una consulta que no manejamos muy bien pueden llevarnos hacia resultados inesperados en un script (una acción que no se realiza sin dejar mensajes de error, filas que se insertan con valores incorrectos…). Aquí os dejo una pequeña función recursiva que recorre todos los elementos de un array y devuelve una cadena para que nosotros la imprimamos en pantalla en cualquier momento:

function debug_array($array){

$output = “”;
foreach($array as $key => $value){

$output .= “<p>”.$key.” => “.$value.”</p>”;
if (is_array($value)){

$output .= “<blockquote>”.debug_array($value).”</blockquote>”; 

}

}
return $output;

}

Llamar a la función es tan sencillo como esto:

echo debug_array($arrayquequierodepurar);

Anuncios
Etiquetas: , ,

El envío de formularios mediante métodos AJAX puede ser un tanto engorroso, más aún teniendo en cuenta que deberemos usar funciones diferentes en función de si el método del formulario es GET o POST. Esto nos puede plantear algunos problemas, ya que dependiendo del tipo de campo del formulario debemos acceder a una propiedad u otra del objeto. Podemos utilizar esta función, a la que pasamos como parámetro la id del formulario que queramos enviar, para concatenar las variables en una cadena del tipo var1=value1&var2=value2&…varN=valueN.

function variablesdelformulario(form) {

var salida = ”; //cadena de variables
var i = 0; //contador
var primeravez = true; //Switch para saber si se comienza la cadena

formobj = document.getElementById(form); //Objeto formulario a tratar

//Recorremos todos los elementos del formulario
for (i = 0; i < formobj.elements.length; i++){

//Si es la primera vez cambiamos el switch
if (primeravez) primeravez = false;
//Si no es la primera vez añadimos
else salida += ‘&’;
//Si es un checkbox marcado…
if (formobj.elements[i].type == “checkbox”){

if (formobj.elements[i].checked) 
salida += formobj.elements[i].name+”=”+formobj.elements[i].checked;

}
//Si es un radio button y está marcado…
else if (formobj.elements[i].type == “radio”){

if (formobj.elements[i].checked)
salida += formobj.elements[i].name+”=”+formobj.elements[i].value;

}
//Si es cualquier otro elemento
else{
salida += formobj.elements[i].name+”=”+formobj.elements[i].value;
}

}
//Devolvemos la cadena
return salida;
}

El gran problema viene cuando uno de los campos del formulario es del tipo file. En Desarrollo Web nos dicen:

[…] Sería algo como Archivo Subido con AJAX. Esto, hoy por hoy, no se puede hacer. Es así y no hay vuelta que darle. 
Entonces usted dirá … 
– heeee, si yo en gmail puedo subir archivos y lo hago con AJAX !!!. 
Yo le respondo … 
– No sea bobo, yo también creía lo mismo. 

Hay sobradas muestras que el objeto XMLHttpRequest no puede enviar archivos al servidor. […]

Efectivamente, el objeto XMLHttpRequest no puede enviar ficheros, pero se pueden enviar simulando una conexión asíncrona con un iframe, tal y como nos enseñan en el artículo Ajax File Upload.

Actualización 3/12/2008

Otro problema que se nos puede presentar al pasar variables de esta forma es que el caracter ‘&’ esté dentro de uno de los valores -algo que casi siempre ocurrirá si uno de los campos contiene código HTML-, porque la variable que lo contenga se cortará exactamente donde aparezca ‘&’. Por ejemplo si var1 = ‘Acci&oacute;n’, la cadena de variables será “var1=Acci&oacute;n”, lo que el servidor interpretará como dos variables: var1 = ‘Acci’ y oacute;n sin valor asignado, y además con un ‘;’ por medio, lo que hará que el programa no funcione de ni coña.

Pero podemos solucionarlo de una manera muy sencilla haciendo la siguiente modificación en la función para reemplazar el símbolo ‘&’ por una cadena de texto que nosotros podamos identificar para luego recuperarla. Afortunadamente tenemos funciones en JavaScript y PHP que hacen eso. En JavaScript codificaremos el valor de la variable con encodeURIComponent():

salida += formobj.elements[i].name + “=” + encodeURIComponent(formobj.elements[i].value);

Al recibir los parámetros en el servidor, con PHP, podemos reestablecerlos con urldecode():

foreach ($_POST as $key => $value)
$_POST[$key] = urldecode(‘MyHTMLamp;simbol’, ‘&’, $value);

De esta forma, ya con las variables separadas, volvemos a sus valores originales. Esto puede ser muy útil para enviar datos de textareas que utilizan un editor WYSIWYG o que contienen código HTML a secas, o aún más sencillo, si tenemos un campo ‘empresa’ y su valor puede ser “McDollar & sons”.

Lightbox 2 es una biblioteca escrita en JavaScript que permite mostrar en pantalla una imagen a partir de una vista previa, de una forma elegante y con una instalación sencillísima (al estilo de, por ejemplo, Lolacamisetas.com).

En la web oficial podeis encontrar un ejemplo de uso que permite ampliar una imagen o a través de una ampliación navegar por un album de vistas previas. El potencial de esta biblioteca radica sobre todo en la limpieza del diseño: las capas se abren con transiciones, muestran una animación de carga, el resto de la página se oscurece, los botones de navegación se muestran nítidamente. Y además, como decía antes, la instalación es tan fácil como hacer lo siguiente:

  1. Descargar de la página oficial el código.
  2. Incluir en nuestra página las siguientes librerías:
  3. <script type=”text/javascript” src=”js/prototype.js”></script>
    <script type=”text/javascript” src=”js/scriptaculous.js?load=effects,builder”></script>
    <script type=”text/javascript” src=”js/lightbox.js”></script>
     
  4. Activar las CSS de Lighbox 2 -o incluír las nuestras-:<link rel=”stylesheet” href=”css/lightbox.css” type=”text/css” media=”screen” />
     
  5. Añadir el atributo rel = “lightbox” a los links de las imágenes cuya vista ampliada queremos mostrar con lightbox, por ejemplo:<a href=”images/image-1.jpg” rel=”lightbox” title=”my caption”>image #1</a>

    (El atributo title de la imagen se utiliza también como texto de la ampliación con lightbox)
     
  6. Por último, para agrupar imágenes en álbumes, no hay más que poner el nombre del álbum en el atributo rel del paso anterior de la siguiente forma:<a href=”images/image-1.jpg” rel=”lightbox[roadtrip]”>image #1</a>
    <a href=”images/image-2.jpg” rel=”lightbox[roadtrip]”>image #2</a>
    <a href=”images/image-3.jpg” rel=”lightbox[roadtrip]”>image #3</a>

En Lightbox 2 existe también un foro de ayuda además algún que otro truco más para sacarle el máximo partido a esta biblioteca.

Atravesando como estamos una etapa febril de web 2.0, en la Red podemos encontrar ya bastantes textos que nos hablan de web 3.0 e incluso 4.0, y es normal, porque los supestos gurúes de la red dicen que la web 3.0 nos alcanzará en la próxima dédaca (y eso empieza dentro de poco más de un año, señores, que el tiempo pasa volando).

¿Pero qué es todo esto de la web x.0? Este gráfico que unblogmas comparte en su cuenta de flikr lo explica de maravilla:

Evolución de la web (via unblogmas)

Evolución de la web (vía unblogmas)

Y este video que encuentro vía The Inquirer es mucho más intuitivo:

Pero, en resumen, la evolución de la web se resume en esencia en algo así:

  • 1.0 – El pasado (1990 – 2000). La web en la que un desarrollador podía publicar contenidos en Internet. Cuando la Red creció demasiado se hizo necesario el desarrollo de buscadores (¿lo llamamos web 1.5?) para cribar información y acceder en décimas de segundo a lo que estamos buscando. Éste sistema es defectuoso por razones que explicaré más adelante.
  • 2.0 – El presente (2001 – 2010). La web evoluciona incorporando tecnologías que mejoran la experiencia del usuario como AJAX, que sobre todo pretende abstraer al navegante de los tiempos de carga de las páginas, se tienen más en cuenta los estándares W3C y los diseños se basan CSS que, manipulados con JavaScript consiguen efectos visuales más atractivos. Se liberan infinidad de CMS’s y se facilitan alojamientos gratuitos para crear blogs, portales, redes, etc. con contenidos fácilmente editables mediante un gestor (véase WordPress, Joomla, elgg…). En definitiva: el usuario se convierte también en editor. En los procesos de búsqueda empiezan a cobrar bastante relevancia, merecida, sitios como digg.com.
  • 3.0 – El futuro inmediato (2011 – 2020). Se pretende desarrollar (por fin) la web semántica. Es decir: los buscadores utilizan mapas semánticos y redes significados para romper cierta barrera entre lo que el usuario que busca quiere decir y lo que el buscador encuentra. El problema es que en el momento en el que tecleamos unas cuantas palabras en un buscador estas dejan de ser palabras para convertirse en meras letras sin significado (y un significante sin significado es algo cojo). El problema radica en que una máquina (o cualquier artefacto no inteligente), que se comunica con un lenguaje estructurado y basado totalmente en operaciones aritmeticológicas no podrá nunca entender un lenguaje natural (esa es la gran barrera hacia la inteligencia artificial. De modo que la Web 3.0, hoy por hoy, es sencillamente una paradoja, aunque quizás pueda simularse con resultados más o menos óptimos.
    A esto habría que añadir la recopilación de datos de los usuarios (que ya se lleva a cabo mediante muchos sistemas) para cambiar los resultados de una búsqueda, seleccionar la publicidad, etc.
  • 4.0 – El futuro lejano (???? – ????). Lo que se ha reservado para la Web 4.0 es algo que veo muchísimo más cercano que la web semántica: el WebOS, es decir, el sistema operativo basado en la web, cosa que no sé muy bien cómo está planteada, pero que es, hoy día, imprescindible: se trata de que cualquier usuario o empresa acceda a sus datos y a sus aplicaciones a tavés de la web, es decir, desde cualquier lugar del mundo donde haya una conexión a Internet. Con eso solventamos un problema muy común en la PyME que ejemplifico: de tres ordenadores que tenemos en la oficina sólo uno tiene aquel viejo programa de contabilidad que no puede compartir datos con los demás ordenadores, y peor aún, no el usuario no sabe cómo hacer operaciones de mantenimiento.

Creo que de todos estos cambios lo más interesante para el navegante es el acercamiento a la web semántica. Sin duda el sistema de búsquedas que utilizamos ahora (llámese Google, llámese Yahoo) funciona mal. ¿Cómo puede un motor de búsqueda encontrar un texto literario? ¿Cómo puede relacionar expresiones y textos que en definitiva son ideas si los programas informáticos no pueden pensar? Sin duda, el protagonismo que tendrán los lingüístas en el futuro de la red será similar al de los desarrolladores.

Tenía que empezar con el tópico, no pude evitarlo (os presento mis disculpas). Supongo que esta primera entrada (¿log entry? ¿seguro que se dice así en español?) debería ser para explicar de qué va esto, pero en realidad está bastante claro en el título, así que la pregunta que voy a responder no es qué, sino por qué: ¿por qué he empezado a escribir este blog? Porque creo que cualquier persona que se dedique en parte a cualquier proyecto de desarrollo debería, en la medida de lo posible, sacar un rato para escribir sobre las herramientas que usa. Dejaré algún tutorial explicando cómo preparo ciertas cosas (cómo hacer un fichero de configuración para una web, cómo conseguir ciertos efectos que se ven en determinados sitios, qué herramimentas libres utilizo, cómo empezar a hacer ese algo que parece tan complicado) Algunos no serán de la calidad que requiere un programador ávido de aprendizaje, por eso espero vuestras correcciones en los comentarios. No me cortaré a la hora de postear contenidos de otros blogs, porque eso servirá para que los lectores que pueda tener, en algún caso, descubran algo nuevo.

Entonces… ¿esto es un blog más sobre desarrollo y web? La respuesta es no, éste es el mío.

Posts Más Vistos

del.icio.us

Top Clicks

  • Ninguna

Calendario

septiembre 2017
L M X J V S D
« Feb    
 123
45678910
11121314151617
18192021222324
252627282930