¿IE 6 vencido?

Microsoft, la misma empresa que desarrolló el navegador Internet Explorer 6 hace 9 años, lanzó una campaña en Australia donde desaconseja el uso de dicho explorador con una curiosa y controvertida analogía: "No tomarías una leche de hace nueve años. Entonces, ¿por qué usás un navegador de hace nueve años?".

Microsoft aprovechó para criticar a sus rivales alegando que, en un estudio realizado por NSS Labs, Internet Explorer 8 es capaz de detectar y detener el 85% de malware comparado con el 29% de Firefox, 29% de Safari y 17% de Chrome.

Muchas voces se han escuchado al respecto, lo cierto es que a pesar del tiempo que ha pasado desde su lanzamiento, este navegador sigue siendo muy utilizado a nivel mundial; y a su vez es cada vez más repudiado por los desarrolladores Web, ya que su tecnología obsoleta obliga en muchos casos a diseñar 2 webs estructuralmente distintas para asegurar el correcto funcionamiento en IE6.

Link a la campaña: http://www.microsoft.com/australia/technet/ie8milk/

Saludos y que lo disfruten!
Bookmark and Share

¿Problemas con la PC?, MS Fix It Center ¿la solución?

Ya se encuentra activa la beta del programa para reparar errores comunes de Windows. Al ingresar al Portal nos encontraremos con una interfaz simple y con información bien detallada sobre requerimientos y funcionalidades.

Fix it Center ya existía como centro de soluciones a problemas de Windows, pero con herramientas específicas para cada tipo de problema, no en un solo programa o herramienta.

El funcionamiento es por demás simple: descargamos Fix It Center y bastará con hacer click en la solución que queremos aplicar, y el sistema nos guiará paso a paso para que podamos solucionar el problema de forma rápida, sencilla y prácticamente automática.

Uno de los requisitos indispensables es darnos de alta previamente en el servicio de forma gratuita, y elegir si deseamos enviar datos de la configuración de nuestro equipo, en caso de no querer formar parte de los archivos de Microsoft.

Luego de instalar Fix it Center Beta, la aplicación se conectará periódicamente a internet para descargar nuevas soluciones a los problemas de Windows.

Definitivamente y como toda noticia relacionada con Microsoft generará controversia, muchos propondrán otros S.O. como la solución definitiva y a otros la noticia ni les afectará. Lo cierto es que Windows forma parte de la vida informática de la gran mayoria, como asi también es muy cierto que tiene grandes fallas técnicas. Esta herramienta no estará demás.

Saludos y que lo disfruten!

Bookmark and Share

Diversión asegurada, Soul Adventure

Aquí les traigo otro nuevo juego online llamado Soul Adventure, en este caso un juego de ROL ambientado en la época medieval donde deberemos recorrer diferentes mapas, entrenar y comerciar para avanzar en la historia.

Cabe destacar que es un juego que no requiere de ningún tipo de máquina especial, sino que funciona simplemente con una conexión a internet.

Link: http://souladventure.oskoi.com/

Saludos y que lo disfruten!

Bookmark and Share

Extendiendo PHPMailer

Como habiamos visto en el artículo Envío de email con PHP, PHPMailer, esta clase facilita mucho el envio de mails con PHP.

Como desarrollador he adaptado un poco esta libreria a mis necesidades, como por ejemplo hacer debug sin necesidad de enviar el mail (ya sea por no tener un servidor SMTP local o para no tener que esperar a que se envie y llegue), o formatear los mails salientes con el "estilo" de la empresa.

Para esto les traigo el código base para que puedan usarlo, adaptarlo a sus necesidades o mejorarlo según convenga.

Primero incluyo mi archivo de configuración en el que tengo datos de acceso a base, contantes del sistema, etc. Y también incluyo mi clase para consulta a base de datos y la libería PHPMailer:

include_once("../../conf/archivo_configuracion.php");

include_once("class.mysql.php");
include_once("class.phpmailer.php");

Luego creo mi clase extendiendo con la de PHPMailer y seteo algunas variables de clase:

class Mensajeria extends PHPMailer {
var $debugg   = TRUE; // cambiando este valor paso a modo debug
var $para               = NULL;
var $de                 = SITIO_EMAIL;
var $asunto             = "";
var $cuerpo             = "";
var $contenido          = "";
var $copia  = "";
var $copiaO  = "";
}

Luego creo algunos métodos de mi clase, como por ejemplo para el envio del mensaje. Como se puede ver, valido si estoy en modo de debug para imprimir en pantalla o para enviar el mail de modo convencional:

function enviar( $debug = FALSE ) {
 $this->Subject        = $this->asunto;
 $this->estilar_cuerpo( $this->contenido );
 if($debug){
   echo "De:   " . $this->de[1] . " (" . $this->de[0] . ")
";
   echo "Para: " . $this->para[1] . " (" . $this->para[0] . ")
";
   echo "

Asunto: " . $this->asunto . "

"; echo $this->cuerpo; }else{ $this->Body = $this->cuerpo; $this->From = $this->de[0]; $this->FromName = $this->de[1]; $this->AddAddress( $this->para[0], $this->para[1] ); $this->send(); $this->ClearAddresses(); } }

Con el siguiente método formateamos nuestro mail, es una plantilla HTML que podemos crear a nuestro gusto. Sólo debemos pasarle como parámetro el cuerpo del mail y se encargará de colocarlo en nuestro maquetado.

function estilar_cuerpo($contenido){
 ob_start();
 
 echo '
OSKOI

 

'; $this->cuerpo = ob_get_contents(); ob_end_clean(); }

El siguiente método es muy útil y nos permite reemplazar en el texto del primer parámetro el valor correspondiente almacenado en el array del segundo parámetro. Lo utilizo ara personalizar los emails, por ejemplo tengo el siguiente mensaje de plantilla:

Hola [nombre_completo]!!, este es un mail de prueba.
Saludos de parte de [nombre_empresa].

Entonces debería tener un array con los valores correspondientes para cada campo entre corchetes:

$aDatos['nombre_completo'] = "Pepito";
$aDatos['nombre_empresa'] = "Pepito S.A.";

Y al utilizar el método el resultado sería:

Hola Pepito!!, este es un mail de prueba.
Saludos de parte de Pepito S.A..

Este es el método en cuestión:

function procesar_etiquetas( $texto, $vars ) {
    foreach ( $vars AS $clave => $valor ) {
        $texto    = str_replace( "[".$clave."]", $valor, $texto );
    }

    return $texto;
}

Con esto ya tenemos todo listo para crear nuestro metodos de clase para cada caso, por ejemplo podriamos tener uno para contactar a nuestros clientes:

function contactarCliente($id_cliente){

$db = new db();

$query = "SELECT * FROM `mensajeria` WHERE `constante` = 'CONTACTAR_CLIENTE'";

$mensaje = $db->getRow($query, "NaN", ARRAY_A);

$query = "SELECT CONCAT(nombre, ' ', apellido) AS nombre_completo, email FROM `clientes` WHERE `id` = $id_cliente";

$datos = $db->getRow($query, "NaN", ARRAY_A);

$datos['asunto'] = $this->procesar_etiquetas( $mensaje["asunto"],  $datos );

$this->de             = array( SITIO_EMAIL, SITIO_NOMBRE );
$this->para           = array( $datos['email'], $datos['nombre_completo'] );
$this->asunto         = "Contacto desde " . SITIO_NOMBRE;
$this->contenido      = $this->procesar_etiquetas( $mensaje["mensaje"],  $datos );
$this->enviar($this->debugg);  

return true;

}

Saludos y que lo disfruten!

Bookmark and Share

Envio de email con PHP, PHPMailer

PHPMailer es una excelente librería desarrollada en PHP que expande y facilita el envio de mails con este lenguaje. Permite el envio de archivos adjuntos, soporta múltiples codificaciones, acepta imágenes embebidas, entre otras funcionalidades.

Para comenzar a utilizarla debemos descargarla desde la Web Oficial, en la sección de descargas veremos las diferentes versiones disponibles.

Une vez que lo tengamos entre varios archivos (demos, tutoriales, etc) deberemos elegir entre class.phpmailer.php para el envío de correo y class.smtp.php para enviar correo mediante servidores SMTP. Incluimos el archivo que corresponda en un nuevo documento e instanciamos la clase:

require("class.phpmailer.php");
$mail = new PHPMailer();

Con esto ya estamos listo para usar las diferentes funcionalidades, como por ejemplo setear el remitente, destinatarios, copias y asunto del mensaje:

$mail->From = "remitente@email.com";
$mail->FromName = "Nombre del Remitente";
$mail->Subject = "Asunto del correo";
$mail->AddAddress("destino1@correo.com","Nombre 01");
$mail->AddAddress("destino2@correo.com","Nombre 02");
$mail->AddCC("usuariocopia@correo.com");
$mail->AddBCC("usuariocopiaoculta@correo.com");

Como mencionamos más arriba podemos enviar el mensaje como HTML, y además podemos enviar un texto alternativo para el caso que el cliente de correo del destinatario no soporte este formato:

$body  = "Hola  estoy probando PHPMailer.< br />";
$body .= "Este es el cuerpo del mensaje.< br />";
$body .= "Saludos";
$mail->Body = $body;
$mail->AltBody = "Hola estoy probando PHPMailer\n\nSaludos"; // texto alternativo

Yendo un poco más a fondo podriamos agregar un Archivo Adjunto, por lo que debemos valernos del método AddAttachment() y enviarle 2 parámetros, el primero la ruta al archivo a adjuntar y el segundo el nombre con el que se mostrará al destinatario:

$mail->AddAttachment("_img/imagen.jpg", "foto.jpg");
$mail->AddAttachment("_content/zipeado.zip", "demo.zip");

Con esto tenemos todo listo, seteamos el remitente, destinatario y asunto. Creamos el cuerpo en HTML con un texto alternativo en caso de que el cliente de correo no lo soporte. Y adjuntamos 2 archivos, una imágen y un .zip. Sólo restaría enviar el mail y esto se hace con el método send(). Nuestro código completo quedaría así:

require("class.phpmailer.php");
$mail = new PHPMailer();

$mail->From = "remitente@email.com";
$mail->FromName = "Nombre del Remitente";
$mail->Subject = "Asunto del correo";
$mail->AddAddress("destino1@correo.com","Nombre 01");
$mail->AddAddress("destino2@correo.com","Nombre 02");
$mail->AddCC("usuariocopia@correo.com");
$mail->AddBCC("usuariocopiaoculta@correo.com");

$body  = "Hola  estoy probando PHPMailer.< br />";
$body .= "Este es el cuerpo del mensaje.< br />";
$body .= "Saludos";
$mail->Body = $body;
$mail->AltBody = "Hola estoy probando PHPMailer\n\nSaludos"; // texto alternativo

$mail->AddAttachment("_img/imagen.jpg", "foto.jpg");
$mail->AddAttachment("_content/zipeado.zip", "demo.zip");

$mail->Send();

Saludos y que lo disfruten!

Bookmark and Share

USB 3.0, la nueva generación

El USB que tanto conocemos y utilizamos fué creado en 1996 y desde entonces ha pasado por varias etapas hasta llegar a lo que el presiente del Foro de Aplicaciones USB presentó como el llamado Super Speed USB en la feria CES de Las Vegas.

Los dispositivos USB se clasifican en cuatro tipos según su velocidad de transferencia de datos:

  • Baja velocidad (1.0): Es utilizado en su mayor parte por dispositivos de interfaz humana como los teclados y los mouses.
  • Velocidad completa (1.1): Ésta fue la más rápida antes de la especificación USB 2.0, y muchos dispositivos fabricados en la actualidad trabajan a esta velocidad.
  • Alta velocidad (2.0): Está presente casi en el 99% de las PCs actuales. El cable USB 2.0 dispone de cuatro líneas, un par para datos, una de corriente y una de toma de tierra.
  • Super alta velocidad (3.0): Esta especificación será diez veces mas veloz que la anterior 2.0 duplicando las lineas destinadas al envío y recepción de datos. El USB 3.0, además, es más eficiente en el consumo energético, que reduce en un tercio y es compatible con periféricos basados en la anterior generación.

Saludos y que lo disfruten!

Bookmark and Share

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!

Bookmark and Share

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!

Bookmark and Share

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!

Bookmark and Share

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:


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!

Bookmark and Share

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!

Bookmark and Share

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!

Bookmark and Share

Combinar Scripts y CSS

Con el fin de optimizar el rendimiento de nuestra web, nos valdremos de la técnica de minimizar las peticiones al servidor, en este caso agrupando nuestros scripts en uno solo (CSS por un lado, Javascript por el otro).

Este Tip mezcla herramientas y prácticas al momento de llevar a cabo nuestros desarrollos, veamos como.

Todos sabemos la importancia de organizar bien nuestros proyectos, carpetas para imágenes, hojas de estilos, Javascript, etc. Y a su vez dentro de cada una de ellas podemos tener varios archivos o incluso subcarpetas.

Esta práctica es muy buena y debemos mantenerla; pero podriamos hacer una pequeña modificación a la hora de subir nuestro sitio al servidor de producción: juntar todas las hojas de estilos en una sola, todos nuestros Javascripts en una solo y asi con todos los archivos que lo permitan (para las imágenes podriamos usar la técnica de CSS Sprites).

De esta manera reduciremos la cantidad de peticiones al servidor, por ejemplo en nuestro sitio tenemos la libreria Scriptaculous y un Javascript propio llamado "misfunciones.js". En este caso tendriamos 2 peticiones al servidor, pero ¿qué pasa si copiamos ambos códigos y los pegamos en un único archivo llamado "scripts.js"? A nivel funcionalidad no perdemos nada, ya que se mantiene todo intacto. A nivel organizativo si perjudica, ya que "desarmariamos" nuestra estructura de directorios, por eso se recomienda hacerlo en el momento de pasar los archivos a producción y NO en etapa de desarrollo.

La mejora importante es que reducimos a la mitad las peticiones la servidor con una técnica muy sencilla. Si a esto lo multiplicamos por la cantidad de scripts que componen nuestra Web veremos que podemos mejorar mucho con muy poco.

Contamos con algunas herramientas para automatizar estas tareas, como por ejemplo CSS Merge.

Aqui les dejo un script en PHP (clic en "expandir" para verlo) tomado del blog de Eliot para hacerlo y como detalle adicional podemos utilizar JSmin para comprimir el Javascript resultante.

// Written by Ed Eliot (www.ejeliot.com) - provided as-is, use at your own risk
   
   /****************** start of config ******************/
   define('FILE_TYPE', 'text/javascript'); // type of code we're outputting
   define('CACHE_LENGTH', 31356000); // length of time to cache output file, default approx 1 year
   define('CREATE_ARCHIVE', true); // set to false to suppress writing of code archive, files will be merged on each request
   define('ARCHIVE_FOLDER', 'js/archive'); // location to store archive, don't add starting or trailing slashes
   
   // files to merge
   $aFiles = array(
      'js/yahoo.js',
      'js/event.js',
      'js/connection.js',
      'js/blog-search.js'
   );
   /****************** end of config ********************/
   
   // this is prepended to all file / folder paths so files and archive folder should be specified relative to this
   $sDocRoot = $_SERVER['DOCUMENT_ROOT'];
   
   /*
      if etag parameter is present then the script is being called directly, otherwise we're including it in 
      another script with require or include. If calling directly we return code othewise we return the etag 
      representing the latest files
   */
   if (isset($_GET['version'])) {
      $iETag = (int)$_GET['version'];     
      $sLastModified = gmdate('D, d M Y H:i:s', $iETag).' GMT';
      
      // see if the user has an updated copy in browser cache
      if (
         (isset($_SERVER['HTTP_IF_MODIFIED_SINCE']) && $_SERVER['HTTP_IF_MODIFIED_SINCE'] == $sLastModified) ||
         (isset($_SERVER['HTTP_IF_NONE_MATCH']) && $_SERVER['HTTP_IF_NONE_MATCH'] == $iETag)
      ) {
         header("{$_SERVER['SERVER_PROTOCOL']} 304 Not Modified");
         exit;
      }
      
      // create a directory for storing current and archive versions
      if (CREATE_ARCHIVE && !is_dir("$sDocRoot/".ARCHIVE_FOLDER)) {
         mkdir("$sDocRoot/".ARCHIVE_FOLDER);
      }
      
      // get code from archive folder if it exists, otherwise grab latest files, merge and save in archive folder
      if (CREATE_ARCHIVE && file_exists("$sDocRoot/".ARCHIVE_FOLDER."/$iETag.cache")) {
         $sCode = file_get_contents("$sDocRoot/".ARCHIVE_FOLDER."/$iETag.cache");
      } else {
         // get and merge code
         $sCode = '';
         $aLastModifieds = array();
         foreach ($aFiles as $sFile) {
            $aLastModifieds[] = filemtime("$sDocRoot/$sFile");
            $sCode .= file_get_contents("$sDocRoot/$sFile");
         }
         // sort dates, newest first
         rsort($aLastModifieds);
         
         if (CREATE_ARCHIVE) {
            if ($iETag == $aLastModifieds[0]) { // check for valid etag, we don't want invalid requests to fill up archive folder
               $oFile = fopen("$sDocRoot/".ARCHIVE_FOLDER."/$iETag.cache", 'w');
               if (flock($oFile, LOCK_EX)) {
                  fwrite($oFile, $sCode);
                  flock($oFile, LOCK_UN);
               }
               fclose($oFile);
            } else {
               // archive file no longer exists or invalid etag specified
               header("{$_SERVER['SERVER_PROTOCOL']} 404 Not Found");
               exit;
            }
         }
      }
   
      // send HTTP headers to ensure aggressive caching
      header('Expires: '.gmdate('D, d M Y H:i:s', time() + CACHE_LENGTH).' GMT'); // 1 year from now
      header('Content-Type: '.FILE_TYPE);
      header('Content-Length: '.strlen($sCode));
      header("Last-Modified: $sLastModified");
      header("ETag: $iETag");
      header('Cache-Control: max-age='.CACHE_LENGTH);
   
      // output merged code
      echo $sCode;
   } else {
      // get file last modified dates
      $aLastModifieds = array();
      foreach ($aFiles as $sFile) {
         $aLastModifieds[] = filemtime("$sDocRoot/$sFile");
      }
      // sort dates, newest first
      rsort($aLastModifieds);
      
      // output latest timestamp
      echo $aLastModifieds[0];
   }


Saludos y que lo disfruten!

Bookmark and Share

Usar CSS Sprites

Haciendo mucho hincapié en reducir al máximo las peticiones al servidor nos podremos valer de esta técnica muy antigua y adaptada al Desarrollo Web.

La idea es agrupar la mayor cantidad de imágenes posibles en una sola y utilizar un "enmascaramiento" para mostrar la que necesitemos en cada caso.

Por ejemplo la página principal de Google utiliza la siguiente imágen:

Sprite Google

Alli podemos ver todos los iconos que componen a esta web y la forma de utilizarla resulta muy sencilla. Consiste en valernos de las propiedades "background-image" y "background-position" para producir el "enmascaramiento". Podemos verlo de una forma gráfica:

Sprite Google

Para utilizar la flecha debemos ocultar el resto. Podemos automatizar esta tarea siguiendo estos pasos:

  1. Creamos un .zip con las imágenes que vamos a utilizar.
  2. Ingresamos a alguna web que nos genere el código en base a este conjunto de imágenes, por ejemplo: CSS Sprites Generator.
  3. Luego de procesar el archivo que enviamos nos generará el código CSS que tendremos que utilizar en cada caso y la única imágen que deberemos subir al servidor.

Esta es simplmente una explicación muy básica de esta técnica, ya que los usos pueden ser muy diversos y la mejora en el rendimiento es muy notoria.


Saludos y que lo disfruten!

Bookmark and Share

Usar Imágenes Embebidas

En estos sucesivos Tips para Optimización de Sitios Web hacemos hincapié en reducir las peticiones al servidor para alivianar la carga del mismo y las transferencias.

Otra buena práctica es Usar Imágenes Embebidas. La idea es sencilla, se "codifica" la imágen que vayamos a utilizar y en lugar de hacer referencia a ella mediante una ruta (relativa o absoluta) en el atributo "src" del tag "img", directamente enviemos la imágen "embebida" en el código, en formato de texto plano gracias a la Base 64.

Lo que deberiamos hacer es convertir una imágen a este formato, para eso podemos valernos de diversas herramientas, como por ejemplo Base 64 Online. Cargamos una imágen que tengamos en nuestra PC, le damos a "Convert the source data" y listo!.

Una vez que tengamos la imágen codificada sólo tenemos que reemplazar en el atributo "src" del tag "img" la ruta a la imagen por el texto generado; teniendo en cuenta que antes de colocar el código generado debemos poner el tipo MIME y la base, de esta manera: data:image/jpg;base64,.

Yo convertí una imágen y me devolvió el siguiente código (aunque no lo crean el texto siguiente es una imágen):

iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAABHNCSVQICAgIfAhkiAAAAAlwSFlz
AAAN1wAADdcBQiibeAAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAAT7SURB
VFiFtZddbBRVFMd/Z2b2o93d7i6FbtuUbin9kFbZLjVtpV0tdAWkBEgpUSKxgmLRaDCASsAommiM
BhMS3nzywSefNDXwpC+EBPBBoiQm0oAVI5ZqIbbdbffj+jCz7bb0gy70JP/cmXPPnPM/5557Zwal
FLkCKAfOA605+3iA4B5d1/tbWlqUx+OJAY/m4kcjR7HZbKej0WhlRUUFkUjE6fV6vxIR22L95ERA
RLaHw+F9JSUlGTLU1dWt1TTtgyUnICKeoqKiLxoaGhCB3r1QVQEFBQWUlZW9LSKhJSWgadrxaDRa
pOs6m9vh8RAcegl8BRAMBnW32316yQiIyKqmpqYjgUCANVXQudHU+71wpBdshhAMBp8SkR1LQsDv
938eiURsTgc8twNEAGXOPVIFuzrB5XJRWFh46n4b8r4JiEiktbV1p2EYtK+H/HwYi8GJT+G7702b
7k7w+2DFihWrNU1746EREBGtuLj4TGNjI74CaFln6s9fgsEh+OYcTEyA0wEv7ga73Y7P53tPRAof
CgGgp6OjY62u62xsA0M3lTdumuNYHP68ZV5v3gCV5eD3+726ri+4LRckICLuioqKT0KhECUBqK+e
mvtneOr67yFz1AVe7QFN0/B4PL0isuaBCADHtm3bVgSwoQWz6Sz8e2fKaPD2lL45BM1hcLvdhmEY
p3ImICIr6+vrj9bW1lIVhNIiIG0iPgax+AwCKSBpjod6QNeFvLy8Z0QkmhMBTdPe6erqcojAE+Gs
7NOgUtNt0+kpcqSguhy2toPD4UDX9ZOLJiAixc3NzQfKy8upXAk+N4gVQNKQ7zC7PiOBZSApc04s
Eq90m2eF3W5vFZH2RRFwOBxvdXd32wEaaq3MrAqodBqV+A+SgwwMDNDf30++XEeN3yI9PoxKjEBy
glXFik3rQdd1ROTEbHGMObIv7OzsfC0QCFBYEMPnvE1y+DKpsV9QyWFUahRQ3PgVLlwwn/HZIDVy
jyde3m7w9VlBRKIi0qyUurhgBbxe79G2tjZnX18f7jsfEb/+IYmhs6TH/kBNjEBKQQpC1pbMd0JN
GWYTToMiVJmgLTRBOp0GePceitbXTXb2XsMwfk8mk95IA3z72WwUTRm6C5Fe6NkKx16Y2+7Cz9B5
ePI2rJT6KXMz2xK8nkwmvQCHn7UymUOWu+HKl2A35rdbXwfN9XDxKgAngN2ZuWlLICIu4E2AcDW0
r2WWsk7Hzb8gHlvY7vBkSLqyT8eZPXAQWA6wK7Kw030fQ+MBqNoDl6/Ob9vRAH7PZMzj9xAQEQOY
XKlN66x9PQfG43D2kmk7GodzF+e3NxREw5OJ7hGRlTMr0AmUAgSLoKZ4/oycGrz/PJQsgycfg/1P
L1yxLY2TsXRgP2TtAhHps0iwdwOc6eWhy+BdqD0IVsgBYJUopRCRUkuhZ4xL/dBUA03VsKYMXA5w
OSHPbh7DLgfkOcCmmw7jCXMpYhMwOg5jFm7fhR/74dJvcOUGjCemcdqS+cvZybQX7f3D0FEiuT0L
nMz0gAJiuZQ1mZos6WIlBYxn90AA2AzUAKsxfzw9gBPIs0Yn4ADm++JNAhNA3ELMwihwE+gHrgE/
KKWuZXrAZjnPnxHIOQscFiE34ALsQMIKMAKMAeNZBLKR0Y9Z9rFp7wIRAXNrGpgNabOubVagDGxZ
yGSdtIgkrApkj8kspFRW0P8BcVptcl859dUAAAAASUVORK5CYII=

Nos quedaría algo asi:

Mi imágen base 64

Como podemos observar es sencillo y en lugar de hacer una petición al servidor la imágen viaja en modo texto.

Saludos y que lo disfruten!

Bookmark and Share

Resaltar Sintaxis (Syntax Highlighter)

Para los que tenemos un Blog con POSTs relacionados con códigos de programación nos va a resultar útil esta herramienta. Permite hacer "Highlight" de sintaxis con unos pocos pasos. Para más referencias podemos visitar la Web Oficial de syntaxhighlighter.

El Primer Paso seria agregar el "Widget" a nuestro Blog, lo podemos hacer simplemente haciendo click en el siguiente Link. Veremos una página como esta y tendremos que hacer clic en el botón "Add to Blogger":



Con eso ya tenemos disponible esta utilidad para utilizarla en todos nuestros POSTs, y la forma de hacerlo es muy sencilla, simplemente debemos "envolver" nuestro código entre los tags:



Lo único que debemos tener en cuenta es reemplazar donde dice "[lenguage]" por el lenguaje que corresponda. Aqui tienen una lista de los lenguajes disponibles:

Lenguage Valor
C++ cpp, c, c++
C# c#, c-sharp, csharp
CSS css
Delphi delphi, pascal
Java java
Java Script js, jscript, javascript
PHP php
Python py, python
Ruby rb, ruby, rails, ror
Sql sql
VB vb, vb.net
XML/HTML xml, html, xhtml, xslt

Con estos simples pasos podemos usar esta fantastica herramienta. Para utilizar otras funcionalidades no olviden visitar la Web Oficial.

Saludos y que lo disfruten!

Bookmark and Share

Chachear Páginas con PHP

En nuestro Tip Definir Fecha de Expiración para Optimización de Sitios Web hablamos de lo útil que puede resultar el chacheo de páginas.

Acá les dejo un ejemplo de código en PHP para hacerlo. El funcionamiento es sencillo:

  1. Se incluye el primero de los archivos (cache.start.php) encargado de verificar si existe el chache de la página a la que se ingresa y si sigue siendo válido. En ese caso mostrará el contenido "chacheado".
  2. Se genera el contenido HTML correspondiente sin importar las funciones de "cacheo".
  3. Se incluye el archivo final (cache.end.php) encargado de generar el cache de la página que servira para los sucesivos ingresos.

[*] "cache.start.php":
// Settings
$cachedir = 'cache/';   // directorio de cache
$cachetime = 86400;   // duración del cache
$cacheext = 'cache';   // extensión de cache

// script a procesar
$cachepage = $_SERVER['HTTP_HOST'].$_SERVER['REQUEST_URI'];
$cachefile = $cachedir.md5($cachepage).'.'.$cacheext;

// calculamos el tiempo del cache
if (@file_exists($cachefile)) {
$cachelast = @filemtime($cachefile);
} else {
$cachelast = 0;
}

@clearstatcache();

// Mostramos el archivo si aun no vence
if (time() - $cachetime <$cachelast) {
@readfile($cachefile);
exit();
}

ob_start();
[*] "cache.end.php":
// Generamos el nuevo archivo cache
$fp = @fopen($cachefile, 'w');

// guardamos el contenido del buffer
@fwrite($fp, ob_get_contents());
@fclose($fp);

ob_end_flush();
[*] Implmentación:
include("cache.start.php");

// Aqui el código HTML

include("cache.end.php");
Saludos y que lo disfruten!
Bookmark and Share

Definir Fecha de Expiración

Si vamos a mostrar el mismo contenido a todos los usuarios durante un tiempo "X", ¿por qué hacer trabajar al sistema para que haga una consulta a la base de datos, o ejecutar una script cada vez si el resultado va a ser el mismo?

Cuando tus páginas son cacheadas el servidor no perderá ni tiempo ni recursos en regenerar una y otra vez estas, unicamente las cargará de la cache.

Existen tres tipos de caches que pueden actuar durante el proceso de solicitud de un documento web:
  1. Cache de Agente de Usuario (User-Agent): Está presenten en los navegadores web y lógicamente sólo funcionan para un único usuario.
  2. Cache Compartida o proxy-cachés directos: Este tipo de cache son utilizados por los proveedores de servicios de Internet y empresas para ahorrar ancho de banda. La comparten todos los usuarios que accedan.
  3. Cache pasarela o proxy-cachés inversos: Funcionan como respaldo de un servidor web de forma transparente para los usuarios. Es posible trabajar con varias cache pasarela de manera conjunta para implementar una Red de Distribución (CDN)

El funcionamiento del cache en términos muy básicos seria:
  1. Se realiza una petición de un recurso al servidor y se valida la fecha de modificación.
  2. En caso de que la fecha de modificación sea la misma que esta guardada en el cache NO es necesario que el servidor envie el archivo, directamente se envia al usuario el "chacheado".
  3. Si el archivo que se solicita ha sido modificdo, el servidor lo envia, se chachea y se repite el proceso en futuras consultas.

Puede seguir mi tutorial para Chachear Páginas con PHP.

Saludos y que lo disfruten!

Bookmark and Share

Evitar Redirecciones

Como hemos visto en los sucesivos Tips tras cada petición se envian datos (cabeceras) que por mas minimas que sean en la suma total de elementos que las solicitan la cuenta final puede resultar abultada.

Hay un error muy común en los desarrollos que es olvidar poner en una ruta que apunta a una carpeta la barra final ("/"), que indica justamente que es una carpeta. Parece un detalle menor pero si lo vemos un poco en detalle nos daremos cuenta que no lo es tanto:

Usaremos una direccion de ejemplo: "http://misitio.com". En en Index tenemos un link que apunta a la carpeta Portfolio de la siguiente manera: "http://misitio.com/portfolio" (notese la falta de la barra final). Cuando intentemos acceder a esa URL la petición será para buscar el archivo llamado "portfolio" (sin extensión, recuerden que existen archivos sin extensión) en lugar de buscar la carpeta llamada asi.

Al no encontrar dicho archivo automáticamente se hará una redirección a "http://misitio.com/portfolio/" (notese la barra al final) para dar con la carpeta especificada.

Si de entrada hubieramos colocado esa barra nos habriamos ahorrado esa redirección con todas las peticiones en vano que se hicieron en un principio.

Saludos y que lo disfruten!

Bookmark and Share

Usar una Red de Distribución (CDN)

Esta técnica es utilizada en archivos estáticos, entendiendo por esto archivos que NO son generados dinámicamente: imágenes, Javascript, CSS, etc.

Almacenando estos "archivos estáticos" en un servidor externo lograremos alivianar la carga del servidor y ganaremos estabilidad.

Algunos ejemplos de esta técnica llamada "off-load" son:

[*] Imágenes: Amazon S3, Flickr, ImageShack u otro servicio de alojamiento de imágenes.
[*] JavaScript: Google Ajax Library o Google App Engine
[*] Formularios web: WuFoo, FormSpring
[*] Feeds RSS: Feedburner
[*] Encuestas y votaciones: SurveyMonkey, PollDaddy

Amazon S3 merece una mención especial por su enorme crecimiento (es utilizado por muchisimas empesas reconocidas) y planes hiperflexibles con una relación precio/calidad excelente. En su WEB nos encontramos con un calculador de nuestro costo ingresando unos pocos datos estimados.

Saludos y que lo disfruten!

Bookmark and Share

Debugging de aplicaciones Web

Les dejo un listado que iré actualizando a medida que encuentre y pruebe herramientas útiles al momento de desarrollar un Sitio Web.

Aconsejo para desarrollar que utilicen Mozilla Firefox, ya que cuenta con gran cantidad de Plugins (Complementos) que nosa facilitarán las cosas.
Esto NO quiere decir que no usen otros navegadores, ya que de hecho hay que hacerlo, sino que aprovechen el Firefox y sus Plugins.

[*] Firebug (link): Excelente herramienta que nos permite monitorear errores javascript, peticiones y respuestas al servidor, cabeceras enviadas, modificación "on the fly" de código para visualizar pequeños cambios inmediatamente sin necesidad de refrescar la página. Todo distribuido en solapas para cada funcionalidad.

[*] Web Developer Toolbar(link): Se añade una barra a Firefox donde con unos clics podemos activar/desactivar estilos, javascript, etc. Mostrar el "Layout" de nuestro diseño, redimensionar el tamaño del explorador para "emular" diferentes resoluciones, visualizar codigo fuente, obtener información de los elementos que componen nuestra página entre muchas otras más. El complemento ideal a Firebug.

[*] MeasureIt (link): Plugin que nos serira para realizar mediciones en nuestros sitios web. Muy útil para acomodar la distribución de los elementos en la página.

[*] Charles Proxy(link): Básicamente se interpone entre el navegador y el servidor para monitorear las peticiones y respuestas y hacer todo tipo de informes: tiempos de carga (un muy útil grafico de barras donde a simple vista podemos detectar posibles errores o deficiencias en nuestros scripts), tamaños y tipos de archivos, metadatos, etc.

Nos podemos descargar una versión de prueba con todas las funcionalidades con la única "molestia" de unas ventanas que se abren cada tanto y que se cierran automáticamente a los pocos segundos y podemos tener el programa abierto por 30 minutos. Pasado ese tiempo lo debemos volver a abrir. Nada mal para una versión de prueba.

Saludos y que lo disfruten!

Bookmark and Share

Comprimir Recursos

La optimización de un sitio es un trabajo un tanto arduo. ¿Porqué?, sencillo: porque no existe una fórmula mágica sino que hay que analizar que es lo que sucede de trasfondo y actuar en base a ello. Es por esto que cada "pequeña acción" que podamos realizar va a aportar al resultado final.

La compresión de recursos estáticos es una de estas pequeñas acciones a llevar a cabo, y entender el porqué es claro: es necesario disminuir al máximo el número de peticiones y/o el tamaño de los archivos que se envian. La compresión se encarga de esto último, el contenido es comprimido antes de enviarlo al navegador.

La herramienta por excelencia para esto se llama gzip: es una abreviatura de GNU ZIP, por lo que es catalogado como "Software Libre" y su popularidad se debe a que es soportado por la gran mayoría de los navegadores y su efectividad es muy alta.

En la actualidad la mayoría de los navegadores soportan dos formatos de compresión: "gzip" y "deflate", y esto se puede ver en la propiedad "Accept-Encoding" de la petición realizada.

Para ver esto pueden usar alguna de las herramientas que aquí menciono: Link

La compresión se aconseja en archivos que sean de texto: HTML, CSS, Javascript. No asi en imágenes, ya que estan viajan comprimidas y seria contraproducente para el rendimiento del servidor, ya que en ocasiones puede consumir muchos recursos, lo cual es particularmente malo si el sitio se encuentra hospedad en una cuenta de alojamiento compartido.

[*] Usar gzip en Apache 1.3*: En este caso la compresión gzip es manejada por el módulo "mod_gzip". Para ello se pueden utilizar las sentencias "mod_gzip_item_include" para incluir archivos a comprimir y "mod_gzip_item_exclude" para excluir archivos. Luego editamos el archivo ".htaccess" e incluimos el siguiente código:


mod_gzip_on Yes
mod_gzip_item_include file \.html$
mod_gzip_item_include file \.php$
mod_gzip_item_include file \.css$
mod_gzip_item_include file \.js$

mod_gzip_item_include mime ^application/javascript$
mod_gzip_item_include mime ^application/x-javascript$
mod_gzip_item_include mime ^text/.*
mod_gzip_item_include handler ^application/x-httpd-php

mod_gzip_item_exclude mime ^image/.*


[*] Usar gzip en Apache 2.*: En este caso la compresión es gestionada por el módulo "mod_deflate". Para comprimir los archivos podemos utilizar la sentencia "AddOutputFilterByType" de la siguiente forma:

AddOutputFilterByType DEFLATE text/html text/css application/x-javascript

Saludos y que lo disfruten!

Bookmark and Share

Tips para Optimización de Sitios Web

Este será el POST que organicé los sucesivos Tips que vaya posteando referidos a la Optimización de Sitios Web.

Los que llevamos un tiempo como desarrolladores de Sitios Web tenemos preconceptos que en cierta medida están pasando de moda o en ciertos casos nunca estuvieron en lo cierto. Si a esto le sumamos los avances tanto tecnológicos (mejores equipos, conexiones, etc.), como de investigaciones sobre el tema (lease Steve Souders) nos encontramos con muchas cosas nuevas por probar, o al menos tener en cuenta.

De esto se van a tratar los Tips que voy a listar, espero que los pongan en práctica.

[*] Tip 1: Comprimir Recursos (link)
[*] Tip 2: Usar una Red de Distribución (CDN) (link)
[*] Tip 3: Evitar redirecciones (link)
[*] Tip 4: Definir fecha de Expiración (link)
[*] Tip 5: Usar Imágenes Embebidas (link)
[*] Tip 6: Usar CSS Sprites (link)
[*] Tip 7: Combinar Scripts y CSS (link)

Saludos y que los disfruten!

Bookmark and Share

Plantillas personalizadas

¿Estás buscando darle un "touch" personal a tu Blog?

Yo estoy dispuesto a darte una mano. La idea es sencilla.

Deberás enviarme algún datos reevante para ser tomado como eje del diseño: nicho al que apunta tu Blog, tus gustos personales, etc. Y en base a eso elaboraré una plantilla y en caso de que no te guste o quieras cambiarle algo iremos charlandolo.

Te preguntarás cual es mi beneficio de esto (ya que el tuyo es claro), sencillo: conocimientos en base a la práctica. Siempre hay algo por aprender y que mejor manera de hacerlo que poniéndolo en práctica.

RECORDÁ: esto es totalmente gratuito por lo que habrá que ser pacientes en cuanto a tiempos de respuesta. Prometo hacerlo en el menor tiempo posible.

Saludos!

Bookmark and Share

Diccionario Inglés / Español

Este diccionario es de gran utilidad para diversos tutoriales. Por ejemplo si usamos un traductor, varios términos de los "Modos de fusión" Photoshop son mal traducidos y debemos probar varias veces hasta dar con el correcto.

Para esto servirá esta lista de equivalencias de "Modos de fusión" (inglés / español):
  • Normal - Normal
  • Dissolve - Disolver
  • Darken - Oscurecer
  • Multiply - Multiplicar
  • Color Burn - Subexponer color
  • Linear Burn - Subexposición lineal
  • Lighten - Aclarar
  • Screen - Trama
  • Color Dodge - Sobreexponer color
  • Linear Dodge - Sobreexposición lineal
  • Overlay - Superponer
  • Soft Light - Luz Suave
  • Hard Light - Luz fuerte
  • Vivid Light - Luz intensa
  • Linear Light - Luz lineal
  • Pin Light - Luz focal
  • Difference - Diferencia
  • Exclusion - Exclusión
  • Hue - Tono
  • Saturation - Saturación
  • Color - Color
  • Luminosity - Luminosidad

Que lo disfruten!

Bookmark and Share

Listado de pinceles

En caso de no saber instalar pinceles en Photoshop pueden seguir el tutorial del siguiente Link.

Aquí les dejo un listado de pinceles en orden alfabético. Algunos tienen una pequeña muestra para visualizar.


Que los disfruten!

Bookmark and Share

Tutorial instalación de pinceles (brushes)

Instrucciones para instalar pinceles (brushes):

Paso 1: Descargar los que quieran a su PC. La ruta final se las indico en el paso siguiente, mientras tanto sería bueno que los almacenen en alguna otra carpeta de "resguardo".

Paso 2: La ruta dentro de su PC para almacenar los pinceles y poder utilizarlos en Photoshop es "C:\Archivos de programa\Adobe\Adobe Photoshop CS2\Presets\Brushes\".

Paso 3: Una vez colocados en dicha carpeta sólo resta utilizarlos en nuestros proyectos selecionando la herramienta "Pincel (B)" y dentro del submenú de esta herramienta vamos a la opción "Sustituir piceles..." y nos dirigimos a la carpeta donde los colocamos: "C:\Archivos de programa\Adobe\Adobe Photoshop CS2\Presets\Brushes\" y elegimos el que necesitemos.



Que lo disfruten!

Bookmark and Share

Vintage

Si no sabés como instalar la plantilla podés pasar por el Tutorial para uso de plantillas
Código:


Que lo disfruten!

Bookmark and Share

Tech Grunge

Si no sabés como instalar la plantilla podés pasar por el Tutorial para uso de plantillas





Código:

Que lo disfruten!

Bookmark and Share

Tutorial para hacer copia de respaldo de tu configuración

Siempre es importante en todo trabajo que realicemos, no sólo en nuestro blog, realizar copias de respaldo o "backups"; ya que nadie está exento de imprevistos tanto humanos como tecnológicos, y esta es una buena práctica para evitar dolores de cabeza.

Paso 1: Desde el administrador de nuestro Blog nos dirigimos a "Diseño >> Edición de HTML" y veremos una opción más que descriptiva, llamada "Realizar copia de seguridad/Restaurar plantilla".



paso 2: la ventana que se abre nos debe resultar familiar, allí seleccionamos la opción de "Guardar Archivo" y seleccionamos una ubicación en nuestra máquina.

Otra buena práctica es tener todo organizado por carpetas, para este ejemplo de "backups" podriamos tener una carpeta dentro de "Mis Documentos" llamada "Mi Blog" y allí crear subcarpetas para las plantillas, backups, documentos, etc.

Saludos!

Bookmark and Share

Tutorial para uso de las plantillas

Aclaración importante: antes de realizar cualquier cambio siempre es importante hacer una copia de respaldo de su configuración actual. Para saber cómo hacerlo puede visitar el siguiente link.

Paso 1: Desde el administrador de nuestro Blog nos dirigimos a "Diseño >> Seleccionar plantilla nueva" y seleccionamos la configuración de plantilla minima.



Paso 2: Luego vamos a "Diseño >> Edición de HTML" y en la sección "Editar plantila" buscamos donde dice "#outer-wrapper{}" y cambiamos el ancho (width) a 760px. También debemos modificar las lineas de abajo donde dice "#main-wrapper" y cambiamos el ancho (width) a 500px.



En el siguiente link dejo una copia de mi configuración con los cambios hechos. Si lo desean lo descargan a su PC y lo suben tal como muestra la siguiente imágen:



Con cualquiera de las 2 formas el resultado será el mismo.

Paso 3: Luego nos dirigimos a "Diseño >> Elementos de la página" y hacemos clic en la opción "Añadir un gadget".



Se nos abrirá una ventana como la siguiente y elegimos la opción "HTML/Javascript":



Paso 3: En la ventana que se abre debemos pegar el código de la plantilla que hayamos seleccionado y no es necesario completar el campo "Título".



RECORDÁ: estas plantillas son gratuitas, por favor no modifiques el código.

Paso 4: En caso de querer cambiar la plantilla por otra simplemente hay que dirigirse a "Diseño >> Elementos de la página" y allí seleccionar la opción de editar gadget, tal como lo muestra la siguiente imágen:



Periódicamente iré agregando plantillas y en caso de querer alguna personalizada hacerme llegar la solicitud via mail que en lo posible las iré haciendo.

Saludos!

Bookmark and Share

Estilos en Checkboxs y Radio buttons con FancyForm

Con FancyForm podremos aplicar estilos a nuestros Checkboxs y Radio buttons. Este script funciona con Mootools y un CSS muy fáciles de implementar, veamos como.

Primero deberemos descargar la última versión desde la sección de descargas de la web oficial, e incluir los scripts mootools.js y moocheck.js de la siguiente forma:




Luego debemos crear los estilos, para los checkbox hay que crear dos estilos llamados checked y unchecked y para los radio buttons dos estilos llamados selected y unselected. Por ejemplo, podemos crear los estilos en donde hemos reemplazado estos campos por imágenes:

.checked {
    background-color:#222;
    background-image:url(chk_on.png);
}
.unchecked {
    background-color:#1c1c1c;
    background-image:url(chk_off.png);
}
.selected {
    background-color:#222;
    background-image:url(rdo_on.png);
}
.unselected {
    background-color:#1c1c1c;
    background-image:url(rdo_off.png);
}

Y finalmente debemos crear nuestros Checkboxs y Radio buttons como de costumbre. Podemos ver un ejemplo en funcionamiento es FancyForm Test.

Saludos y que lo disfruten!

Bookmark and Share