Usando JSON con PHP

JSON (JavaScript Object Notation) se puede utilizar en lugar de XML para el intercambio de información con Javascript. Algunos llaman AJAJ en lugar de AJAX a la programación Javascript asíncrona con JSON. La clave para leer objetos JSON con Javascript es la función eval() que debe ser utilizada con precaución, ya que ejecuta cualquier código que se le pase como parámetro.

Para intercambiar información JSON entre Javascript y PHP existen dos funciones muy útiles (a partir de PHP 5.x): json_encode() y json_decode().

Ejemplo:

$i = array(
                array("id" => 1, "name" => "linus"),
                array("id" => 2, "name" => "bill"),
                array("id" => 3, "name" => "steve")
       );

echo json_encode($i);

El resultado será:

[{"id":1,"name":"linus"},{"id":2,"name":"bill"},{"id":3,"name":"steve"}]

Para utilizar los datos JSON en el cliente mediante Javascript usaremos eval() para leer el objeto enviado desde PHP:

var json = eval('(' + miRespuestaJSON + ')');
for(var i = 0; i < json.length; i++)
{
    console.info(json.id + " " + json.name);
}

Fuente:
http://www.json.es/2007/07/09/usando-json-desde-php/

PNG transparente en Internet Explorer 6

Existen varias soluciones para tratar de solucionar este gran problema del IE6, una de ellas es incorporar en la página HTML (dentro de head) el siguiente código:

<!--[if lt IE 7]>
<script language="JavaScript">
function PNG_loader() {
   for(var i=0; i<document.images.length; i++) {
      var img = document.images[i];
      var imgName = img.src.toUpperCase();
      if (imgName.substring(imgName.length-3, imgName.length) == "PNG") {
         var imgID = (img.id) ? "id='" + img.id + "' " : "";
         var imgClass = (img.className) ? "class='" + img.className + "' " : "";
         var imgTitle = (img.title) ? "title='" + img.title + "' " : "title='" + img.alt + "' ";
         var imgStyle = "display:inline-block;" + img.style.cssText;
         if (img.align == "left") imgStyle += "float:left;";
         if (img.align == "right") imgStyle += "float:right;";
         if (img.parentElement.href) imgStyle += "cursor:hand;";
         var strNewHTML = "<span " + imgID + imgClass + imgTitle
            + " style=\"" + "width:" + img.width + "px; height:" + img.height + "px;" + imgStyle + ";"
            + "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader"
            + "(src=\'" + img.src + "\', sizingMethod='scale');\"></span>";
         img.outerHTML = strNewHTML;
         i--;
      }
   }
}
window.attachEvent("onload", PNG_loader);
</script>
<![endif]-->

Nota: A veces puede tener efectos secundarios y descolocar algún elemento cercano a las imágenes ya que cambia la etiqueta img por span...

Más información:
http://homepage.ntlworld.com/bobosola/pnghowto.htm

CSS: hacks para igualar webs en distintos navegadores

A pesar de utilizar CSS, muchas veces no conseguimos que el resultado se vea igual en todos los navegadores. Para conseguir distinguirlos y crear estilos propios para cada uno, se han venido utilizando los famosos "hacks" que normalmente aprovechan bugs de los navegadores Internet Explorer (IE) para marcar diferencias y sobreescribir valores genéricos:

p{
color:#000; /* Definición genérica */
}
* html p {
color:#f00; /* Solo se modifica para IE6 */
}

p {
color: #000; /* Definición genérica */
#color: #f00; /* Se modifica sólo para IE */
}

.titulo {
height: 15px; /* Definición genérica */
#height: 15px; /* Se modifica sólo para IE */
_height: 21px; /* Se modifica sólo para IE6 */
}

#header {margin-bottom: 3em;} /* Definición genérica */
html>body #header {margin-bottom: 1em;} /* Se modifica sólo para IE6 */

.elemento {
width: 700px;
\width: 710px; /* Se modifica sólo para IE5.x */
wid\th: 710px; /* Se modifica para el resto de navegadores */
}

El uso de los hacks no es muy recomendable, puesto que en el futuro es probable que queden obsoletos y en los nuevos navegadores las páginas se vean incorrectamente. Además su uso hace que los documentos CSS puedan dejar de seguir el estándar. Así, siempre que sea posible, usaremos esta otra alternativa que nos permite cargar un css específico para cada navegador:

<!-- Usar ie6.css si el navegador es igual a Internet Explorer 6 -->
<!--[if IE 6]>
<link href="css/ie6.css" rel="stylesheet" type="text/css">
<![endif]-->

<!-- Usar ie.css si el navegador es Internet Explorer -->
<!--[if IE]>
<link href="css/ie.css" rel="stylesheet" type="text/css" />
<![endif]-->

<!-- Usar ie56.css si el navegador es anterior a Internet Explorer 7 -->
<!--[if lt IE 7]>
<link href="/css/ie56.css" rel="stylesheet" type="text/css">
<![endif]-->

<!-- Usar estilo si el navegador es Internet Explorer 6 o posterior -->
<!--[if gte IE 6]>
<style>.titulo {width: 150px;}</style>
<![endif]-->

Enlaces relacionados:
http://metalize.liveonstyle.com/2007/07/08/evita-los-hacks-en-tu-css
http://www.albertofortes.com/blog/?p=290
http://www.disenorama.com/articulos/el-modelo-de-cajas-en-CSS
http://css-discuss.incutio.com/?page=BoxModelHack

CSS: centrar un div con tamaño absoluto

Cuando trabajamos con tamaños absolutos (position: absolute) no es sencillo centar un div en la página. Esta es una opción para un div de 300x200 pixels:

div {
position: absolute;
left: 50%;
top: 50%;
width: 300px;
height: 200px;
margin-top: -100px; /* mitad de la altura */
margin-left: -150px; /* mitad del ancho */
overflow: auto;
border: 1px solid red;
}

Información detallada:
http://www.programacionweb.net/articulos/articulo/?num=461

Para el caso de querer centrar un div no absoluto podríamos hacer lo siguiente:

1. Crear un div que ocupe el 100%
2. Ponerle tex-align:center;
3. Dentro de ese div insertar otro del tamaño que sea
4. Poner a este segundo div margin-left:auto; margin-right:auto;

Cambiar aspecto barras desplazamiento con CSS

Para cambiar el aspecto de las barras de desplazamiento en las páginas web (sólo para Internet Explorer) podemos usar el siguiente código CSS:

<style type="text/css">
BODY {
scrollbar-face-color: #FDCF66;
scrollbar-highlight-color: #FDCF66;
scrollbar-3dlight-color: #FDCF66;
scrollbar-darkshadow-color: #FDCF66;
scrollbar-shadow-color: #FDCF66;
scrollbar-arrow-color: #FDCF66;
scrollbar-track-color: #FDCF66;
}
</style>

Generador de código: http://www.elhacker.net/scrollbars.htm

Más información: http://www.programacionweb.net/articulos/articulo/?num=86

Sumar horas a fecha actual en PHP

Si queremos sumar o restar una hora a la fecha actual en PHP (para ajustar el huso horario con respecto a GMT por ejemplo), podemos usar el siguiente código:

//Obtenemos la fecha actual:
$fecha=time();
//Queremos restar 3 horas a la fecha actual:
$horas = -3;
// Convertimos las horas a segundos y las sumamos:
$fecha += ($horas * 60 * 60);
// Le damos al resultado el formato deseado:
$fecha = date("Y-m-d H:i:s", $fecha );

Enlace relacionado:
http://es.php.net/manual/es/function.date.php

Eliminar Barra de Navegación de Blogger

Para suprimir definitivamente la Barra de Navegación (Navigator Bar) de Blogger basta con modificar la plantilla HTML y poner al principio de la página (por ejemplo justo debajo de <body>):

<script language="javascript">
document.getElementById("navbar-iframe").parentNode.removeChild(document.getElementById("navbar-iframe"));
document.getElementById("space-for-ie").parentNode.removeChild(document.getElementById("space-for-ie"));
</script>

Nota: Vale para tanto para Internet Explorer como para Firefox, Mozilla, etc., pero sólo para la nueva plantilla de Blogger.

Para la plantilla tradicional debemos eliminar el espacio "extra" que queda arriba (por lo menos en Firefox) así que añadimos dentro del siguiente <div> después de <body>:

<div id="wrapper">
<script language="javascript">
document.getElementById("wrapper").style.marginTop="0px";
</script>

Nota: El id del div puede variar. Debemos cambiar "wrapper" por el id que aparezca en cada plantilla concreta (wrapper, wrap, header...).

Google code

Recientemente descubrí por casualidad una nueva aplicación de Google que me dejó boquiabierto: Google code. Nada más y nada menos que un motor de búsqueda especializado en códigos fuente públicos de programas y aplicaciones que nos muestra la página y el trozo de código que se corresponde con el patrón de nuestra búsqueda (que por cierto admite expresiones regulares "regexp").

Aquí dejo el enlace del portal: http://code.google.com
y del buscador: http://www.google.com/codesearch

Javascript: recargar página HTML

Existen 3 formas de recargar la página actual y se pueden usar en un botón, en un enlace u en otro elemento que ejecute el código Javascript.

Ejemplos:

<input type="button" value="Recargar página" onClick="window.location.reload()">

<a href="" onClick="window.location.href=window.location.href">Recargar página</a>

Recargar página

<input type="button" value="Recargar página" onClick="history.go(0)">

Java: Convertir valores RGB

Si queremos extraer de un color de 3 bytes (24 bits) los 3 canales Rojo (R), Verde (G) y Azul (B) podemos utilizar las instrucciones siguientes:

int blue= color24bits & 0x0000FF; int green=(color24bits & 0x00FF00) >> 8; int red= (color24bits & 0xFF0000) >> 16;

ó

int blue= color24bits & 255; int green=(color24bits >> 8) & 255; int red= (color24bits >> 16) & 255;

El proceso inverso, calcular el número de 3 bytes que se corresponde con los 3 colores sería:

int color24bits=(red << 16) | (green << 8) | blue;

Información relacionada: http://www.sromero.org/articulos/gfx/graf13.html

ActionScript / Javascript: redondear decimales

Si estamos trabajando con ActionScript (Flash) o Javascript y queremos dejar un número determinado de decimales, podemos hacer estar sencilla operación:

valor= 3,1416

Para 2 decimales:
valor2decimales=Math.round(valor * 100) / 100;
Resultado: valor=3,14

Para 3 decimales:
valor3decimales=Math.round(valor * 1000) / 1000;
Resultado: valor=3,142

Para N decimales:
valorNdecimales=Math.round(valor * N * 10) / (N * 10);

Javascript: mostrar fecha con idioma automático

Insertamos el siguiente script en el HTML:

<script type="text/javascript" language="javascript" src="http://etatus.googlepages.com/fecha.js"></script>

Y luego donde queramos mostramos la fecha:

<script type="text/javascript">document.write(Fecha());</script>

Codigo fuente: http://etatus.googlepages.com/fecha.js

JavaScript: pasar parámetros a un pop-up

Cuando abrimos una ventana hija (popup) con JavaScript mediante window.open, es posible que ésta acceda a la página padre mediante opener. Un ejemplo:

Página padre.html:

<HTML><HEAD><TITLE>Padre</TITLE></HEAD>
<BODY>
<FORM name="form">
<INPUT type="hidden" name="nombre" value="PAPA">
<SCRIPT language="javascript">
window.open('hija.html','hija');
</SCRIPT>
</BODY></HTML>

Página hija.html:

<HTML><HEAD><TITLE>Hija</TITLE></HEAD>
<BODY>
<SCRIPT language="javascript">
//Leer un valor
document.write('Nombre: '+window.opener.document.form.nombre.value);
//Cambiar un valor
window.opener.document.form.nombre.value="MAMA";
</SCRIPT>
</BODY></HTML>

Enlace relacionado:
http://www.desarrolloweb.com/articulos/609.php

Insertar multimedia en HTML

Si deseamos incrustar o "embedir" un fichero multimedia de audio, video o streaming en nuestra web, podemos utilizar este código HTML basado en el reproductor Windows Media Player que funciona tanto para Internet Explorer como para Firefox (siempre que estén instalados los correspondientes plugins):

<object width="300" height="45" id="MediaPlayer" classid="CLSID:22D6f312-B0F6-11D0-94AB-0080C74C7E95" standby="Loading Windows Media Player components..." type="application/x-oleobject" codebase="http://activex.microsoft.com/activex/controls/mplayer /en/nsmp2inf.cab#Version=6,4,7,1112"> <param name="filename" value="http://server.com/fichero.mp3"> <param name="Showcontrols" value="True"> <param name="autoStart" value="False"> <embed autostart="0" type="application/x-mplayer2" width="300" height="45" src="http://server.com/fichero.mp3" name="MediaPlayer"> </embed> </object>

Resultado:


Nota 1: para los ficheros de video se debe poner una altura mayor de 45 pixels, si no sólo se visualizarán los botones.

Nota 2: para que el parámetro "autostart" funcione correctamente en Firefox se debe utilizar "0" en lugar de "false" y "1" en lugar de "true".

Enlaces interesantes donde se describen todos los parámetros posibles:

• EMBED (Firefox)
• OBJECT (Explorer)

Flash con fondo transparente

Si deseamos que nuestra animación Flash aparezca con el fondo transparente dentro de una página HTML, debemos añadir el parámetro wmode en el código fuente tanto para Internet Explorer (OBJECT - PARAM) como para Netscape y Firefox (EMBED). El siguiente ejemplo muestra el código válido para ambos:

<OBJECT> <PARAM NAME=movie VALUE=animacion.swf> <PARAM NAME=quality VALUE=high> <PARAM NAME=wmode VALUE=transparent> <EMBED wmode=transparent src=animacion.swf quality=high> </OBJECT>

Mostrar siempre el final de un textarea o div

Si estamos trabajando con HTML y tenemos un TEXTAREA o un DIV con más información de la que cabe en la zona visible, nos aparecerá un scrollbar (en el DIV debemos poner el estilo apropiado: style="overflow: auto"). Pero si queremos que el texto que aparezca por defecto sea el del final (por ejemplo un chat), podemos utilizar esta sencilla instrucción javascript:

<script language="javascript">
//Textarea:
form.textarea_name.scrollTop = form.textarea_name.scrollHeight;
//Div:
document.getElementById("div_id").scrollTop=document.getElementById("div_id").scrollHeight;
</script>

Una buena idea puede ser poner la instrucción en la etiqueta body para que se ejecute al terminar de cargar la página y asegurar así que siempre aparezca el final del texto del textarea:

<body onLoad="form.textarea_name.scrollTop = form.textarea_name.scrollHeight;">

En el caso de Java podemos hacer:

area.append(text+"\n"); // en el JTextArea
scroll.getVerticalScrollBar().setValue(scroll.getVerticalScrollBar().getMaximum());
// scroll es JScrollPane

Nota: Si no se queda el scroll abajo sino por el medio, se puede repetir la instrucción dos veces para asegurar que se actualiza correctamente.

Creación de varias cuentas en linux

Este script bash podría servir. Recibe como entrada el grupo la cuenta y el número inicial y final de cuentas a crear.

#!/bin/bash if [ $# -lt 4 ]; then    echo "Crea las cuentas indicadas. El directorio por defecto es: /home/. Si no existe el grupo, se crea."    echo "Usar: $0 [dir] "    echo "Ejemplos: $0 alumnos mates 5 30"    echo " $0 /home/labs alumnos mates 1 25"    exit 1 fi if [ $# -eq 4 ]; then    dir="/home/$2"    grupo=$1    cuenta=$2    ini=$3    fin=$4 else    dir=$1    grupo=$2    cuenta=$3    ini=$4    fin=$5 fi for i in $(seq $ini $fin) do    echo "Creando cuenta $cuenta$i"    useradd -d $dir$i -g $grupo -m -s /bin/bash $cuenta$i done

Apache: proteger página web con contraseña

Primero tenemos que añadir una entrada en el fichero de configuración del apache (httpd.conf) para el directorio que queremos proteger, por ejemplo:

<Directory "/home/usuario/public_html/directorio_a_proteger">
AllowOverride All
</Directory>

Despues debemos crear un fichero .htaccess dentro de la carpeta a proteger indicando cual es el nombre de usuario y la contraseña (.htpasswd)

AuthName "Password requerido"
AuthType Basic
AuthUserFile /home/usuario/.htpasswd
Require valid-user

Finalmente en .htpasswd debemos escribir el usuario y la contraseña con el formato usario:passwd, donde passwd es la contraseña encriptada mediante el comando htpasswd.

Podemos generar este fichero escribiendo por ejemplo:

> htpasswd -b -c /home/usuario/.htpasswd usuario password

Nota1: si queremos encriptar con MD5 hay que añadir el parámetro -m; si queremos añadir varios usuarios, quitamos el parámetro -c
Nota2: el fichero .htpasswd tiene que tener permisos de lectura:
> chmod a+r .htpasswd

Enlaces relacionados:
http://bulma.net/body.phtml?nIdNoticia=656
http://www.apacheweek.com/features/userauth

CSS: orden de las 4 orientaciones

Al utilizar algunas etiquetas de estilos como border o padding, es posible especificar las propiedades para las 4 orientaciones, en ese caso el orden es: arriba, derecha, abajo e izquierda

Por ejemplo:

margin: 1px 2px 3px 4px equivale a: margin-top: 1px margin-right: 2px margin-bottom: 3px margin-left: 4px

padding: 1em 2em 3em 4em equivale a: padding-top: 1em padding-right: 2em padding-bottom: 3em padding-left: 4em

ASP: Validación de nº positivo

Dim regEx
Set regEx = New RegExp

regEx.Pattern = "^\d+$"
Validate = regEx.Test(num_comprobar)

Validate será true si num_comprobar es un nº positivo y false en caso contrario.

Para más información sobre esta y muchas otras validaciones del lado del servidor en ASP: http://www.15seconds.com/issue/010301.htm