Web y desarrollo

Archive for the ‘Programación Web’ Category

He pasado el fin de semana poniendo al día el PC e instalando las aplicaciones que voy a utilizar para trabajar. En esencia, la cosa ha quedado así:

  • SO: Ubuntu 8.10. La instalación es sencillísima, sale del tirón, y detecta los drivers de todos los dispositivos, incluso les saca más partido que los drivers de fábrica para Windows Vista. Especialmente sencillo y potente con los drivers de NVidia.
  • Servidor web: XAMPP.
  • IDE: Aptana como plugin para Eclipse.

La verdad es que estoy como un niño con zapatos nuevos. El siguiente paso, quizás, es seguir este tutorial para instalar KDE en Ubuntu. Lo que me plantea muchas dudas y os lanzo la principal: ¿os gusta más Gnome o KDE?.

Etiquetas: , , , ,

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);

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.


Posts Más Vistos

del.icio.us

Top Clicks

  • Ninguna

Calendario

julio 2017
L M X J V S D
« Feb    
 12
3456789
10111213141516
17181920212223
24252627282930
31