Firebug, el mejor compañero de los desarrolladores Web

Firebug es un plugin para Firefox, una ves instalado nos pedirá que reiniciemos el navegador y estaremos listos para usarlo.

Por defecto consta de 6 solapas de de gran utilidad para diversos usos:

1- Consola: desde qui podemos setear que es lo que necesitamos monitorear, por ejemplo peticiones y respuestas AJAX, errores en Javascript, CSS, etc.
2- HTML: desde aqui podemos visualizar el código HTML por bloques (tags) y se nos irá resaltando en pantalla que bloque estamos inspeccionando, muy útil para maquetar. También podemos editar el código "on the fly" para ver cambios en el momento.
3- CSS: Similar a la solapa de HTML, donde podremos cambiar nuestros estilos y visualizar los cambios antes de hacerlos definitivos.
4- Script: Podremos visualizar nuestros Javascript pero sin modificarlos (por cuestiones obvias).
5- DOM: nos permite ver y debuguear estructuras DOM.
6- Red: en esta solapa podremos ver tiempos de carga de nuestros elementos y separarlos por grupos (imagenes, scripts, etc). Muy útil para optimización de sitios.

Como últimos comentarios al respecto les digo que cada solapa al activarse tiene un menú desplegable para editar sus opciones. Además hay un botón muy útil que nos permite inspeccionar un elemento o bloque simplemente cliqueándolo, con esto nos ahorraremos mucho tiempo buscando dentro de nuestro HTML.

Sin duda es una herramienta que no puede faltar para cualquier desarrollador Web.

Saludos y que lo disfruten!

Ejemplo sencillo de cURL, Postear en Twitter

Para los que no conozcan esta librería los invito a leer "cURL, una gran herramienta".

Y aquí les traigo un sencillo ejemplo para que vean la potencia de esta herramienta:

// seteamos nuestro usuario y password
$username = 'username';
$password = 'password';
// escribimos el mensaje
$message = 'is twittering from php using curl';
// esta es la URL de la API de Twitter
$url = 'http://twitter.com/statuses/update.xml';
$curl_handle = curl_init();
curl_setopt($curl_handle, CURLOPT_URL, "$url");
curl_setopt($curl_handle, CURLOPT_CONNECTTIMEOUT, 2);
curl_setopt($curl_handle, CURLOPT_RETURNTRANSFER, 1);
curl_setopt($curl_handle, CURLOPT_POST, 1);
curl_setopt($curl_handle, CURLOPT_POSTFIELDS, "status=$message");
curl_setopt($curl_handle, CURLOPT_USERPWD, "$username:$password");
$buffer = curl_exec($curl_handle);
curl_close($curl_handle);
// chequeamos si fué exitoso
if (empty($buffer)) {
    echo 'mensaje de error';
} else {
    echo 'Exitoso!!';
}

Obviamente deberán tener una cuenta en Twitter y si en lugar de dejar fijos los valores de usuario, password y mensaje los tomamos de un formulario nos podriamos crear nuestra propia aplicación para postear en Twitter.

Saludos y que lo disfruten!

cURL, una gran herramienta

cURL es una librería open source/software libre distribuido bajo la licencia MIT que viene incorporada en la mayoría de las distribuciones Linux. En caso de que no lo tengamos podemos descargarlo desde su Web.

Permite conectar y comunicar a muchos tipos diferentes de servidores con diferentes tipos de protocolos. Actualmente soporta los protocolos HTTP, HTTPS, FTP, Gopher, telnet, dict, archivo, y los protocolos LDAP. También soporta certificados HTTPS, HTTP POST, HTTP PUT, envío por FTP (esto también se puede hacer con la extensión ftp de PHP), la forma de carga basados en HTTP, servidores proxy, cookies y autenticación usuario + contraseña.

La idea básica tras las funciones cURL es que se inicializa una sesión cURL usando la función curl_init(), entonces usted puede configurar todas las opciones para la transferencia a través de la curl_setopt(), y finalmente se ejecuta la sesión con el curl_exec() y luego terminar su sesión con el curl_close(). He aquí un ejemplo que usa funciones cURL para traer la página de inicio example.com en un archivo:

$ch = curl_init("http://www.example.com/");
$fp = fopen("example_homepage.txt", "w");

curl_setopt($ch, CURLOPT_FILE, $fp);
curl_setopt($ch, CURLOPT_HEADER, 0);

curl_exec($ch);
curl_close($ch);
fclose($fp);

cURL tiene un serie de constantes predefinidas que podemos encontrar en http://ar2.php.net/manual/en/curl.constants.php y también podemos ver la lista de funciones disponibles en http://ar2.php.net/manual/en/ref.curl.php.

Saludos y que lo disfruten!

Manejo de directorios con PHP

En PHP existen muchas funciones para el manejo de directorios (carpetas) y sus contenidos.

En esta ocasión nos centraremos en listar directorios y a su vez sus contenidos de manera recursiva, ya que nos sabemos que puede contener (la conocida estructura de árbol).

Aqui les listo las funciones de PHP que vamos a utilizar:

• is_dir()
• opendir()
• readdir()
• close_dir()

El funcionamiento sería el siguiente:

La función recibe una ruta. Por ejemplo, si queremos que liste los directorios de la carpeta donde está el archivo la llamaríamos con:

listar_directorios_ruta("./"); 

Lo primero que se hace es comprobar si la ruta recibida es un directorio.

if (is_dir($ruta)) { //... }

Si lo es realizaremos las acciones, pero si no lo es, mostraremos un mensaje diciendo que no es una ruta válida.

En el siguiente if extraemos el gestor de directorio y lo guardamos en una variable $dh

if ($dh = opendir($ruta)) 

Con un bucle while recorreremos cada elemento de ese directorio.

while (($file = readdir($dh)) !== false) 

Dentro del bucle hacemos un if para saber si el elemento es un directorio

if (is_dir($ruta . $file) && $file!="." && $file!="..") 

En caso que sea un directorio, simplemente escribimos en la página. Además, tenemos que ver si ese directorio contiene a su vez otros directorios. Para eso llamamos a la función de nuevo pasándole ese nuevo directorio. Así la función se llama a si misma para mostrar todo el árbol de carpetas.

Por último se cierra el gestor de directorio abierto previamente.

closedir($dh);

Con lo que nuestra función quedaría de la siguiente manera:

function listar_directorios($ruta){ 
   // abrir un directorio y listarlo recursivo 
   if (is_dir($ruta)) { 
      if ($dh = opendir($ruta)) { 
         while (($file = readdir($dh)) !== false) { 
            //esta línea la utilizaríamos si queremos listar todo lo que hay en el directorio 
            //mostraría tanto archivos como directorios 
            echo "Nombre de archivo: $file : Es un: " . filetype($ruta . $file); 
            if (is_dir($ruta . $file) && $file!="." && $file!=".."){ 
               //solo si el archivo es un directorio, distinto que "." y ".." 
               echo "Directorio: $ruta$file"; 
               listar_directorios_ruta($ruta . $file . "/"); 
            } 
         } 
      closedir($dh); 
      } 
   }else 
      echo "No es ruta valida"; 
} 

Saludos y que lo disfruten!

SEO para AJAX: "Ajax Crawling"

En los últimos años AJAX ha permitido pasar de Páginas Web estáticas a Sitios más complejos, con muchas aplicaciones, interfaces "Ricas", permitiendo mejorar la experiencia del usuario.

Todo esto que a primera vista es puro beneficios visto del lado de SEO ha sido perjudicial, ya que por ejemplo es muy común que ciertas partes de una página sean creadas por un JavaScript, un navegador puede interpretar y generar el contenido correspondiente en el momento, pero un rastreador no.

La solución es otorgada por Google con una explicación muy detallada: http://code.google.com/intl/es-ES/web/ajaxcrawling/.

Saludos y que lo disfruten!

Igualar la Altura de Varias Columnas CSS

Al pasar de trabajar con tablas a un maquetado CSS quizá nos topemos con problemas como este al momento de organizar los elementos de nuestra página.

Supongamos un diseño sencillo a 2 columnas, la de la izquierda es el menú (vertical) y la de la derecha es el contenido principal:

    
...
...

Generalmente el contenido tiene una altura mayor al del menú, la técnica consiste en "simular" que la altura del menú es igual a la del contenido, de la siguiente manera:

#contenedor{
    margin: 0 auto;
    width: 600px;
}
#contenido{
    border-left: solid 200px #DFDFDF; // acá simulamos la altura del menú
    position: absolute;
    width: 400px;
}
#menu{
    background: #DFDFDF;
    margin-left: 400px;
    position: absolute;
    width: 200px; // debe tener el mismo ancho que el borde del contenido
}

Saludos y que lo disfruten!