unijimpe » HTML http://blog.unijimpe.net Desarrollo Web, SEO, Adsense Tue, 16 Mar 2010 04:19:31 +0000 http://wordpress.org/?v=2.9.2 en hourly 1 Crear enlaces para compartir en Redes Sociales http://blog.unijimpe.net/crear-enlaces-para-compartir-en-redes-sociales/ http://blog.unijimpe.net/crear-enlaces-para-compartir-en-redes-sociales/#comments Sun, 14 Mar 2010 08:15:23 +0000 unijimpe http://blog.unijimpe.net/?p=1151 La forma más rápida de promover nuestro web site es a través de las redes sociales como Facebook, Twitter, Buzz entre otros. Entonces es recomendable crear los enlaces para que nuestros visitantes puedan agregarlo directamente a su red o marcador social favorito.

URLs para Redes Sociales
Lo primero es conocer el formato de las URLs de…

]]> La forma más rápida de promover nuestro web site es a través de las redes sociales como Facebook, Twitter, Buzz entre otros. Entonces es recomendable crear los enlaces para que nuestros visitantes puedan agregarlo directamente a su red o marcador social favorito.

URLs para Redes Sociales
Lo primero es conocer el formato de las URLs de las diferentes redes sociales, hay gran cantidad de estos servicios pero solo utilizaremos las mas utilizadas. El siguiente listado presenta los formatos de enlaces en donde URL es el enlace de la página que deseamos compartir y TITLE es el titulo que deseamos asignar al enlace que vamos a compartir.

  • Delicious: http://delicious.com/save?v=5&url=URL&title=TITLE
  • Digg: http://digg.com/submit?url=URL&title=TITLE
  • Facebook: http://www.facebook.com/sharer.php?u=URL&t=TITLE
  • Technorati: http://technorati.com/faves?add=URL&title=TITLE
  • Twitter: http://twitter.com/home?status=TITLE - URL
  • Meneame: http://meneame.net/submit.php?urlURL
  • Reddit: http://reddit.com/submit?url=URL&title=TITLE
  • StumbleUpon: http://www.stumbleupon.com/submit?url=URL&title=TITLE
  • Google Buzz: http://www.google.com/reader/link?url=URL&title=TITLE

Estos urls los podemos crear manualmente o con nuestro lenguaje de programación favorito para darle a nuestro web mayor interactividad.

Clase para Crear links a Redes Sociales
Con la información de los formatos de URLs decidimos crear una clase para facilitar la creación de estos enlaces. Esta clase la hemos llamado SocialClass que recibe cuatro parámetros: el url, titulo, target y tipo de resultado.

  1. // File:    socialclass.php
  2. // Web:  http://blog.unijimpe.net
  3. // Date:    13/03/2010
  4.  
  5. class SocialClass {
  6.     var $url;
  7.     var $title;
  8.     var $target;
  9.     var $type;
  10.    
  11.     function SocialClass($_url, $_title, $_target = "", $_type = "link") {
  12.         $this->url = urlencode($_url);
  13.         $this->title = urlencode($_title);
  14.         $this->setTarget($_target);
  15.         $this->setType($_type);
  16.     }
  17.     function setTarget($_target) {
  18.         if ($_target != "") {
  19.             $this->target = " target=\"".$_target."\"";
  20.         }
  21.     }
  22.     function setType($_type) {
  23.         $this->type = $_type;
  24.     }
  25.     function write($path, $label = "") {
  26.         if ($this->type == "link") {
  27.             return "<a href=\"".$path."\"".$this->target.">".$label."</a>";
  28.         } else {
  29.             return $path;
  30.         }
  31.     }
  32.    
  33.     function delicious($label = "Delicious") {
  34.         $path = "http://delicious.com/save?v=5&url=".$this->url."&title=".$this->title;
  35.         return $this->write($path, $label);
  36.     }
  37.     function digg($label = "Digg") {
  38.         $path = "http://digg.com/submit?url=".$this->url."&amp;title=".$this->title;
  39.         return $this->write($path, $label);
  40.     }
  41.     function facebook($label = "Facebook") {
  42.         $path = "http://www.facebook.com/sharer.php?u=".$this->url."&t=".$this->title;
  43.         return $this->write($path, $label);
  44.     }
  45.     function technorati($label = "Technorati") {
  46.         $path = "http://technorati.com/faves?add=".$this->url."&title=".$this->title;
  47.         return $this->write($path, $label);
  48.     }
  49.     function twitter($label = "Twitter") {
  50.         $path = "http://twitter.com/home?status=".$this->title." - ".$this->url;
  51.         return $this->write($path, $label);
  52.     }
  53.     function meneame($label = "Meneame") {
  54.         $path = "http://meneame.net/submit.php?url=".$this->url;
  55.         return $this->write($path, $label);
  56.     }
  57.     function reddit($label = "Reddit") {
  58.         $path = "http://reddit.com/submit?url=".$this->url."&title=".$this->title;
  59.         return $this->write($path, $label);
  60.     }
  61.     function stumbleupon($label = "StumbleUpon") {
  62.         $path = "http://www.stumbleupon.com/submit?url=".$this->url."&title=".$this->title; 
  63.         return $this->write($path, $label);
  64.     }
  65.     function buzz($label = "Google Buzz") {
  66.         $path = "http://www.google.com/reader/link?url=".$this->url."&title=".$this->title; 
  67.         return $this->write($path, $label);
  68.     }
  69. }

Para utilizar la clase primero incluimos el archivo y luego inicializamos el elemento con cuatro parámetros, en donde los dos primeros son necesarios y los dos últimos son opcionales:

  1. $social = new SocialClass($url, $title, $target, $type);

  • $url: es el enlace de la página que deseamos compartir.
  • $title: es el título a mostrarse con el enlace a compartir.
  • $target: el target del enlace, por defecto se abre en la misma ventana.
  • $type: es el tipo de resultado (link o url) por defecto el tipo es link.

Luego de ello podemos utilizar los siguientes métodos: delicious, digg, facebook, technorati, twitter, meneame, reddit, stumbleupon, buzz los cuales aceptar como parámetro un texto opciones para imprimir como texto del enlace a crear.

Veamos un ejemplo de uso de esta clase, en donde crearemos los enlaces recomendar para este blog.

  1. <?php $social = new SocialClass("http://blog.unijimpe.net", "unijimpe"); ?>
  2. <ul>
  3.     <li><?php echo $social->delicious(); ?></li>
  4.     <li><?php echo $social->digg(); ?></li>
  5.     <li><?php echo $social->facebook(); ?></li>
  6.     <li><?php echo $social->technorati(); ?></li>
  7.     <li><?php echo $social->twitter(); ?></li>
  8.     <li><?php echo $social->meneame(); ?></li>
  9.     <li><?php echo $social->reddit(); ?></li>
  10.     <li><?php echo $social->stumbleupon(); ?></li>
  11.     <li><?php echo $social->buzz(); ?></li>
  12. </ul>

Ahora podríamos modificar el uso de esta clase y crear los enlaces que se abran en ventana nueva y cambiarlo en nombre a los enlaces:

  1. <?php $social = new SocialClass("http://blog.unijimpe.net", "unijimpe", "_blank"); ?>
  2. <ul>
  3.     <li><?php echo $social->delicious("Guardar en Delicious"); ?></li>
  4.     <li><?php echo $social->digg("Enviar a Digg"); ?></li>
  5.     <li><?php echo $social->facebook("Compartir en Facebook"); ?></li>
  6.     <li><?php echo $social->twitter("Publicar en Twitter"); ?></li>
  7. </ul>

Finalmente si deseamos utilizar imagenes para los enlaces podríamos utilizar el tipo url para crear los enlaces de la forma:

  1. <?php $social = new SocialClass("http://blog.unijimpe.net", "unijimpe", "", "url"); ?>
  2. <a href="<?php echo $social->delicious(); ?>">
  3.     <img src="http://static.delicious.com/img/delicious.gif" />
  4. </a>
  5. <a href="<?php echo $social->facebook(); ?>">
  6.     <img src="http://static.ak.fbcdn.net/images/connect_favicon.png" />
  7. </a>
  8. <a href="<?php echo $social->twitter(); ?>">
  9.     <img src="http://twitter-badges.s3.amazonaws.com/t_mini-a.png" />
  10. </a>

Pueden ver el ejemplo funcionando en http://samples.unijimpe.net/socialclass/ y como pueden ver esta clase es sencilla de utilizar, tambíen pueden extender esta clase e incluir el servicio de su preferencia y si tienen sugerencias para mejorar esta clase pueden dejar su comentario.

Mas Información

© 2006 - 2009 unijimpe - Utiliza este feed solo para uso personal, partes de este feed pueden ser utilizados mencionando al autor, no esta permitido publicar enteramente este feed para uso comercial sin permiso del autor.


]]> http://blog.unijimpe.net/crear-enlaces-para-compartir-en-redes-sociales/feed/ 2 Optimización: Reducir peticiones HTTP http://blog.unijimpe.net/optimizacion-reducir-peticiones-http/ http://blog.unijimpe.net/optimizacion-reducir-peticiones-http/#comments Tue, 26 Jan 2010 03:30:07 +0000 unijimpe http://blog.unijimpe.net/?p=1133 Una de las primeras reglas para aumentar la velocidad de carga de una web es reducir la cantidad de peticiones HTTP. Recordando lo comentado en Optimizar Carga de Paginas Web el 80% del tiempo se emplea en descargar los componentes de una pagina mientras que solo el 20% en cargar el HTML. Si logramos reducir…

]]> Una de las primeras reglas para aumentar la velocidad de carga de una web es reducir la cantidad de peticiones HTTP. Recordando lo comentado en Optimizar Carga de Paginas Web el 80% del tiempo se emplea en descargar los componentes de una pagina mientras que solo el 20% en cargar el HTML. Si logramos reducir al máximo la carga de componentes externos lograremos mejorar el rendimiento de nuestro web.

Combinar archivos CSS y JS

Si tenemos una pagina que carga múltiples archivos JS para lograr efectos e interactividad o tal vez utilizamos múltiples archivos CSS (Esto generalmente ocurre al utilizar librerías de terceros que vienen con sus archivos JS y CSS). Podríamos combinar todos los archivos JS y CSS con lo cual podríamos disminuir la cantidad de peticiones HTTP .

Por ejemplo si tenemos una página que carga múltiples archivos Javascript tendríamos un código de la forma:

  1. <link href="css/reset.css" rel="stylesheet" type="text/css" />
  2. <link href="css/style.css" rel="stylesheet" type="text/css" />
  3. <link href="css/cropper.css" rel="stylesheet" type="text/css" />
  4. <script src="js/prototype.js" type="text/javascript"></script> 
  5. <script src="js/builder.js" type="text/javascript"></script>
  6. <script src="js/effects.js" type="text/javascript"></script>
  7. <script src="js/dragdrop.js" type="text/javascript"></script>
  8. <script src="js/controls.js" type="text/javascript"></script>
  9. <script src="js/slider.js" type="text/javascript"></script>
  10. <script src="js/sound.js" type="text/javascript"></script>
  11. <script src="js/cropper.js" type="text/javascript"></script>

Uniendo todo el contenido CSS en un archivo y el contenido JS en un solo archivo podríamos tener el siguiente código:

  1. <link href="css/cropper-complete.css" rel="stylesheet" type="text/css" />
  2. <script src="js/cropper-complete.js" type="text/javascript"></script>

Utilizar Mapa de Imágenes

Si utilizas varias imágenes como enlaces, una solución es unir las imágenes y utilizar mapa de imágenes para los enlaces, entonces en lugar de cargar una imagen por cada enlace, cargaremos una sola imagen para todos los enlaces y utilizamos un mapa de imágenes. Por ejemplo podríamos tener un menú de la forma:

  1. <a href="home.php"><img src="home.gif" width="59" height="20" alt="Home" /></a>
  2. <a href="empresa.php"><img src="empresa.gif" width="59" height="20" alt="Empresa" /></a>
  3. <a href="productos.php"><img src="productos.gif" width="59" height="20" alt="Productos" /></a>
  4. <a href="servicios.php"><img src="servicios.gif" width="59" height="20" alt="Servicios" /></a>
  5. <a href="contacto.php"><img src="contacto.gif" width="59" height="20" alt="Contacto" /></a>

Uniendo las imágenes y reemplazando los enlaces por un mapa de imágenes se tendría:

  1. <img src="menu.gif" width="295" height="20" usemap="#map" />
  2. <map name="map">
  3.    <area shape="rect" coords="0,0,59,20" href="home.php" title="Home" />
  4.    <area shape="rect" coords="59,0,118,20" href="empresa.php" title="Empresa" />
  5.    <area shape="rect" coords="118,0,177,20" href="productos.php" title="Productos" />
  6.    <area shape="rect" coords="177,0,236,20" href="servicios.php" title="Servicios" />
  7.    <area shape="rect" coords="236,0,295,20" href="contacto.php" title="Contacto" />
  8. </map>

Uso de CSS Sprites

Si utilizamos botones con rollover es típico hacerlo con dos imágenes una para el estado normal y otra para el rollover. Una técnica llamada CSS Sprites consiste en utilizar una sola imagen como fondo que contenga todas las imágenes a utilizar y para hacer el efecto de cambio de imagen se cambia la posición de la imagen de fondo.

Entonces al combinar las imágenes logramos disminuir la cantidad de peticiones HTTP con el consiguiente ahorro en el tiempo de carga. Pueden leer mas acerca de como funcionan los CSS Sprites en CSS Sprites: Image Slicing’s Kiss of Death

Imágenes Inline

Otra forma de disminuir la cantidad de peticiones es incluir las imágenes pequeñas como texto en el HTML, para ello se convierte la imagen en base64 y se incluye como texto. Por ejemplo normalmente incluimos una imagen con el siguiente código:

  1. <img src="boton.gif" width="16" height="16" />

Convirtiendo la imagen en base64 podremos incluir la imagen sin llamar a un archivo externo de la siguiente forma:

  1. <img src="data:image/gif;base64,R0lGODlhEAAQAJEAAAAAAN3d3...XZ" width="16" height="16" />

Donde R0lGODlhEAAQAJEAAAAAAN3d3...XZ texto resumido, resultado de convertir la imagen en texto codificado en base64. Ahora para reemplazar esta imagen tenemos que codificar la imagen, esto lo podemos hacer con la función base64_encode de PHP, entonces el código PHP que imprime la imagen como texto sería:

  1. <img src="data:image/gif;base64,<?php echo base64_encode(file_get_contents("boton.gif")); ?>" width="16" height="16" />

Otra opción para convertir las imágenes en base64 es utilizar un convertidor online como por ejemplo Online Image to Base64 Converter. Hay que tener en cuenta que este método es recomendable para imágenes pequeñas de preferencia en formato GIF y menores a 100KB por que la codificación en base64 incrementa el tamaño del archivo.

Mas Información
Con estos pequeños cambios podemos incrementar la velocidad de carga de nuestra web. No son muy complejos de implementar y además no interfieren con el backend de la página web. Pueden encontrar mas información en:

© 2006 - 2009 unijimpe - Utiliza este feed solo para uso personal, partes de este feed pueden ser utilizados mencionando al autor, no esta permitido publicar enteramente este feed para uso comercial sin permiso del autor.


]]> http://blog.unijimpe.net/optimizacion-reducir-peticiones-http/feed/ 7 Optimizar Carga de Paginas Web http://blog.unijimpe.net/optimizar-carga-de-paginas-web/ http://blog.unijimpe.net/optimizar-carga-de-paginas-web/#comments Tue, 29 Dec 2009 05:16:59 +0000 unijimpe http://blog.unijimpe.net/?p=1130 La optimización de los sitios web es un punto muy importante para mejorar el rendimiento de cualquier sitio web. Según el libro High Performance Web Sites: Essential Knowledge for Front-End Engineers de Steve Souders, basado en los estudios hechos por el equipo de optimización de Yahoo han llegado a definir una regla:

Sólo el

…

]]> La optimización de los sitios web es un punto muy importante para mejorar el rendimiento de cualquier sitio web. Según el libro High Performance Web Sites: Essential Knowledge for Front-End Engineers de Steve Souders, basado en los estudios hechos por el equipo de optimización de Yahoo han llegado a definir una regla:

Sólo el 10-20% del tiempo de respuesta se utiliza en descargar el documento HTML.
El otro 80-90% está empleado en descargar todos los componentes en la página.

Esto significa que si logramos optimizar la carga de todos los elementos de la pagina web, tendríamos el 80% de la velocidad de carga bajo nuestro control, con el consiguiente aumento considerable en la velocidad de carga de una web.

Reglas para Optimización

Para acelerar la carga de las paginas web podemos seguir algunas reglas que hemos recopilado de Exceptional Performance de Yahoo y de Web Performance Best Practices de Google.

  • Reducir las peticiones HTTP
    Reduciendo la cantidad de elementos externos a nuestra página podemos reducir el tiempo de carga, para ello podemos combinar archivos JS, CSS, utilizar sprites para los botones, etc.
  • Agregar headers de Expiración
    Agregando los headers indicando cuando expiran los archivos evitaremos la carga innecesaria de archivos que ya han sido cargados.
  • Utilizar compresión Gzip
    Al comprimir los archivos con gzip antes de enviarlos al browser conseguiremos disminuir la cantidad de datos a transmitir.
  • Colocar los Estilos en el Header
    Se recomienda colocar los archivos de estilos en el header para que se carguen primero y renderear rápidamente el web.
  • Colocar los Scripts en el Footer
    Cuando se carga un archivo JS, este bloquea la carga de otros archivos hasta que se complete la carga, si el archivo JS es pesada hará que nuestra página se vea en blanco mientras se carga el Javascript.
  • Poner Javascript y CSS en archivos externos
    Al colocar en archivos externos los javascripts y hojas de estilos, en la primera vez cargaremos estos archivos y en la siguientes peticiones las leeremos del cache del browser.
  • Reducir las búsquedas DNS
    Se recomienda no utilizar varios dominios en la carga de los elementos del web, por cada dominio habrá un tiempo para resolver la dirección IP.
  • Minificar archivos Javascript y CSS
    Minificar es eliminar los espacios en blanco y los saltos de linea innecesarios, minificar ayuda a reducir el tamaño de los archivos.
  • Evitar las Redirecciones
    El hacer una redirección toma un tiempo para resolver el URL de destino, utilizar correctamente los tipos de redirecciones ayudará a mantener rápida la carga de nuestras paginas.
  • Configurar los eTags
    Los eTags se agregan en los header para indicar si el archivo se ha modificado, para ello se compara el valor del eTag guardado en el browser con el eTag del archivo en el servidor.
  • Remover Scripts duplicados
    Al eliminar los scripts duplicados conseguiremos disminuir la carga de nuestros archivos.
  • Optimizar las Imagenes
    Podemos optimizar las imágenes, para ello hay que escoger adecuadamente el formato del archivo de imagen para reducir el tamaño del archivo.
  • Utilizar dominios libre de Cookies
    Es recomendable colocar las imagenes, js y css en dominios que no utilizen cookies, esto ayudará a disminuir el trafico de contenido.

Herramientas para la Optimización

Existen herramientas que nos pueden ayudar a hacer un diagnostico del estado de optimización de nuestra página, ello nos dará una guia de lo que podemos optimizar para mejorar la velocidad de nuestra web.

  • Firebug
    Firebug es el complemento básico para todo desarrollador web, esta extensión permite ver todos los archivos que se cargan con la pagina y los tiempos de carga.
  • YSlow
    Este es una extensión para Firebug creada por Yahoo que permite hacer un diagnostico de la velocidad de carga de una pagina basado en reglas definidas por YSlow.
  • Page Speed
    Este plugin creado por Google permite diagnosticar que puntos de nuestra web podemos mejorar para acelerar la carga de nuestras paginas.

Mas Información
Hay mucha información y muy bien documentada de todas las formas para optimizar nuestras paginas.

En futuros posts desarrollaremos uno a unos los puntos mencionados para optimizar nuestras páginas, las pondremos en práctica y analizaremos algunos casos prácticos.

© 2006 - 2009 unijimpe - Utiliza este feed solo para uso personal, partes de este feed pueden ser utilizados mencionando al autor, no esta permitido publicar enteramente este feed para uso comercial sin permiso del autor.


]]> http://blog.unijimpe.net/optimizar-carga-de-paginas-web/feed/ 7 Función dólar $() en Javascript http://blog.unijimpe.net/funcion-dolar-en-javascript/ http://blog.unijimpe.net/funcion-dolar-en-javascript/#comments Sun, 08 Nov 2009 06:43:50 +0000 unijimpe http://blog.unijimpe.net/?p=1120 La función dólar $() es una de las mas populares en Javascript por que permiten acceder a elementos del HTML de forma sencilla y utilizando poco código. Originalmente fue implementada en Prototype y ahora disponible en la mayoría de librerías como Mootools, jQuery.

Veamos como implementar nuestra propia función $, esto para evitar…

]]> La función dólar $() es una de las mas populares en Javascript por que permiten acceder a elementos del HTML de forma sencilla y utilizando poco código. Originalmente fue implementada en Prototype y ahora disponible en la mayoría de librerías como Mootools, jQuery.

Veamos como implementar nuestra propia función $, esto para evitar incluir librerías como Mootools, jQuery o Prototype las cuales tienes los cuales tienes funciones adicionales que en muchas ocaciones no vamos a utilizar, con ello disminuimos el tamaño de nuestros archivos html.

Función $() básica
El objetivo primario de esta función es la seleccionar elementos basados en un identificador, es decir un alias de la función getElementById, entonces podemos crear nuestra primera función dolar.

  1. function $(el) {
  2.     return document.getElementById(el);
  3. }

Función $() extendida
La función anterior permite seleccionar un sólo elemento, pero podemos extenderla para pasarle multiples parámetros y que nos devuelva un array con los elementos seleccionados, ello nos permitirá obtener y manipular múltiples elementos de forma rápida.

  1. function $() {
  2.     var elements = new Array();
  3.     for (var i = 0; i <arguments.length; i++) {
  4.         var element = arguments[i];
  5.         if (typeof element == "string") {
  6.             element = document.getElementById(element);
  7.         }
  8.         if (arguments.length == 1) {
  9.             return element;
  10.         }
  11.         elements.push(element);
  12.     }
  13.     return elements;
  14. }

Esta función recorre uno por uno los parámetros que se les pasa y va agregándolo a un array que posteriormente lo devuelve.

Como utilizar la función $
El uso es sencillo, por ejemplo si tenemos un formulario y deseamos verificar si el campo esta vacio podemos hacerlos de la siguiente forma:

  1. if ($('username').value == '') {
  2.    alert('Error: nombre de usuario vacio.');
  3. }

Personalmente utilizo la primera versión pues me permite seleccionar los elementos que necesito y ahorrando muchas línes de código comparado con el uso del método getElementById.

© 2006 - 2009 unijimpe - Utiliza este feed solo para uso personal, partes de este feed pueden ser utilizados mencionando al autor, no esta permitido publicar enteramente este feed para uso comercial sin permiso del autor.


]]> http://blog.unijimpe.net/funcion-dolar-en-javascript/feed/ 5 Facelift: Reemplaza texto por imagenes http://blog.unijimpe.net/facelift-reemplaza-texto-por-imagenes/ http://blog.unijimpe.net/facelift-reemplaza-texto-por-imagenes/#comments Fri, 23 Oct 2009 06:21:22 +0000 unijimpe http://blog.unijimpe.net/?p=1112 Facelift es una librería PHP/Javascript que permite reemplazar dinámicamente textos por imágenes, con lo cual podemos mostrar cualquier tipografía en nuestra web. Esto permite que los usuarios puedan ver texto con tipografías especiales mientras que los buscadores interpretarán este contenido como texto plano con lo cual mantenemos nuestro sitio optimizado para los buscadores.

Utilizando Facelift
…

]]> Facelift es una librería PHP/Javascript que permite reemplazar dinámicamente textos por imágenes, con lo cual podemos mostrar cualquier tipografía en nuestra web. Esto permite que los usuarios puedan ver texto con tipografías especiales mientras que los buscadores interpretarán este contenido como texto plano con lo cual mantenemos nuestro sitio optimizado para los buscadores.

facelift

Utilizando Facelift
Facelift consta de un javascript que se encarga de reemplazar un texto por una imágen que es generada dinámicamente por un PHP en el servidor. Para utilizar esta librería primero descargamos la ultima versión, extraemos los archivos y copiamos el contenido en una carpeta llamada 'flir' de nuestro servidor.

facelift-demo

Configurar las Fuentes
A continuación configuramos la librería en donde incluimos las tipografías que utilizaremos, para ello editamos el archivo config-flir.php en donde colocamos la lista de tipografías disponibles.

  1. $fonts = array();
  2. $fonts['wanta']      = 'wanta_091.ttf';
  3. $fonts['aorange']    = 'AgentOrange.ttf';

Estas tipografías deben estar en la carpeta fonts y en formato .ttf, puedes encontrar fuentes gratuitas para descargar en http://www.webpagepublicity.com/free-fonts.html .

Configurar el HTML
El siguiente paso es incluir el archivo flir.js en el header de nuestro html

  1. <script src="flir/flir.js" type="text/javascript"></script>

Luego aplicamos Facelift, para ello definimos la carpeta donde se ubica la librería y a continuación asignamos las tipografía utilizando el método FLIR.replace en donde definimos a que elementos del html se aplicarán.

  1. <script type="text/javascript">
  2.     FLIR.init( { path: 'flir/' } );
  3.     FLIR.replace( 'h2', new FLIRStyle({ cFont:'aorange' }) );
  4.     FLIR.replace( 'h3', new FLIRStyle({ cFont:'wanta' }) );
  5. </script>

Este código lo colocamos justo antes del tag </body>. En el ejemplo estamos asignando a todos los elementos h2 la tipografía Agent Orange y a los elementos h3 la fuente Wanta 091.

Personalizando los Textos
Para cambiar el tamaño, color y alineación de los textos generados lo podemos hacer mediante estilos, para ello creamos los CSS de acuerdo a nuestras necesidades, para nuestro ejemplo podríamos tener:

  1. h2 {
  2.     font-size: 24px;
  3.     color: #06C;
  4. }
  5. h3 {
  6.     font-size: 15px;
  7.     color: #C06;
  8. }

Uniendo Todo
Uniendo todos estos elementos tendríamos el siguiente código para generar nuestras imágenes dinámicamente. El resultado del ejemplo lo pueden ver en http://samples.unijimpe.net/facelift/.

  3. <title>Facelift Demo</title>
  4. <script src="flir/flir.js" type="text/javascript"></script>
  5. <style type="text/css">
  6. <!--
  7. h2 {
  8.     font-size: 24px;
  9.     color: #06C;
  10.     font-weight: bold;
  11. }
  12. h3 {
  13.     font-size: 15px;
  14.     font-weight: bold;
  15.     color: #C06;
  16. }
  17. -->
  18. </style>
  19. </head>
  21. <!-- contenido html -->
  22. <script type="text/javascript">
  23.     FLIR.init( { path: 'flir/' } );
  24.     FLIR.replace( 'h2', new FLIRStyle({ cFont:'aorange' }) );
  25.     FLIR.replace( 'h3', new FLIRStyle({ cFont:'wanta' }) );
  26. </script>
  27. </body>
  28. </html>

Con esto tenemos nuestra pagina personalizada con las fuentes que nosotros deseamos, eso te traduce en una web con mejor calidad visual si perder la optimización para los buscadores

© 2006 - 2009 unijimpe - Utiliza este feed solo para uso personal, partes de este feed pueden ser utilizados mencionando al autor, no esta permitido publicar enteramente este feed para uso comercial sin permiso del autor.


]]> http://blog.unijimpe.net/facelift-reemplaza-texto-por-imagenes/feed/ 6 MooEditable: Editor HTML con Mootools http://blog.unijimpe.net/mooeditable-editor-html-con-mootools/ http://blog.unijimpe.net/mooeditable-editor-html-con-mootools/#comments Thu, 08 Oct 2009 18:45:04 +0000 unijimpe http://blog.unijimpe.net/?p=1097 MooEditable es un editor de texto escrito en Mootools. Con esta librería podemos convertir nuestras cajas de texto o textareas en editores HTML con solo utilizar pocas líneas de código javascript.

Este editor es compatible con Internet Explorer 6/7/8, Firefox 2/3, Opera 9/10 y Safari 3/4, es ligero comparado con otras librerías como TinyMCE, se…

]]> MooEditable es un editor de texto escrito en Mootools. Con esta librería podemos convertir nuestras cajas de texto o textareas en editores HTML con solo utilizar pocas líneas de código javascript.

Este editor es compatible con Internet Explorer 6/7/8, Firefox 2/3, Opera 9/10 y Safari 3/4, es ligero comparado con otras librerías como TinyMCE, se pueden personalizar los iconos y con una interfaz limpia.

mooeditable

Tiene las opciones básicas para formatear texto como: negrita, cursiva, subrayado, tachado, listas además soporte para incluir, imágenes, enlaces, archivos flash y finalmente se pueden incluir las acciones para deshacer y rehacer.

Como Utilizar MooEditable
Para su funcionamiento se requiere primero Mootools, entonces primero se debe incluir el archivo mootools.js y MooEditable.js, también es necesario incluir la hoja de estilos MooEditable.css el cual incluirá los estilos e imagenes necesarias para el funcionamiento de la librería.

  1. <link rel="stylesheet" href="css/MooEditable.css" />
  2. <script type="text/javascript" src="js/mootools.js"></script>
  3. <script type="text/javascript" src="js/MooEditable.js"></script>

El siguiente paso es crear nuestro formulario en el cual debemos insertar un tag textarea, es necesario aplicarle un estilo a este tag para definir el ancho el cual se utilizará para crear el editor.

  1. <textarea name="content" id="content" rows="10" style="width: 400px;"></textarea>

Finalmente asignamos el método mooEditable al elemento que contendrá el editor de texto. En nuestro caso se lo asignamos al elemento content que el textarea que hemos creado.

  1. window.addEvent('domready', function(){
  2.     $('content').mooEditable();
  3. })

Con lo cual obtenemos nuestro editor funcionando, pueden ver el resultado en mooeditable. Hay muchas opciones para personalizar al detalle este editor, para conocer mas acerca de las opciones pueden leer la documentación que viene en el archivo de descarga.

© 2006 - 2009 unijimpe - Utiliza este feed solo para uso personal, partes de este feed pueden ser utilizados mencionando al autor, no esta permitido publicar enteramente este feed para uso comercial sin permiso del autor.


]]> http://blog.unijimpe.net/mooeditable-editor-html-con-mootools/feed/ 3 Lazy Load: Retrasar carga de imágenes http://blog.unijimpe.net/lazy-load-retrasar-carga-de-imagenes/ http://blog.unijimpe.net/lazy-load-retrasar-carga-de-imagenes/#comments Sun, 04 Oct 2009 05:44:57 +0000 unijimpe http://blog.unijimpe.net/?p=1090 Lazy Load es un interesante plugin para jQuery que permite postergar la carga de imágenes en páginas web largas. Las imágenes que están fuera de la zona visible no serán cargadas hasta que el usuario haga scroll y desplace la página sobre estas imágenes.

Un clásico y muy buen ejemplo de esta técnica lo podemos ver…

]]> Lazy Load es un interesante plugin para jQuery que permite postergar la carga de imágenes en páginas web largas. Las imágenes que están fuera de la zona visible no serán cargadas hasta que el usuario haga scroll y desplace la página sobre estas imágenes.

Un clásico y muy buen ejemplo de esta técnica lo podemos ver en el Apple Store donde podemos ver que a medidas que nos desplazamos por la página se van cargando las imágenes.

lazyload

Como utilizar Lazy Load
Para hacer uso de esta librería es necesario incluir el el header de nuestro HTML jQuery y jquery.lazyload.js el cual lo puedes descargar desde el web oficial Lazy Load Plugin for jQuery.

  1. <script src="jquery.js" type="text/javascript"></script>
  2. <script src="jquery.lazyload.js" type="text/javascript"></script>

El siguiente paso es inicializar el llamado a Lazy Load, esto lo hacemos llamando ala función lazyload a todas las imágenes de nuestro html.

  1. $(function() {
  2.     $("img").lazyload();
  3. });

Eso es suficiente para postergar la carga de imágenes en nuestras páginas hasta que estas imágenes estén en la zona visible del browser. Adicionalmente se tienen algunas opciones para mejorar el funcionamiento de esta técnica, por ejemplo podemos mostrar una imagen de fondo mientras se carga la imagen e incluso podemos asignar un mínimo de pixels antes de mostrar las imágenes.

  1. $(function() {
  2.     $("img").lazyload({placeholder : "img/loading.gif", threshold : 100});
  3. });

En el ejemplo se muestra la imagen loading.gif y se mostrarán las imágenes si es visible mas de 100 pixels de la imagen. Pueden ver el ejemplo funcionando en Lazy Load Demo.

© 2006 - 2009 unijimpe - Utiliza este feed solo para uso personal, partes de este feed pueden ser utilizados mencionando al autor, no esta permitido publicar enteramente este feed para uso comercial sin permiso del autor.


]]> http://blog.unijimpe.net/lazy-load-retrasar-carga-de-imagenes/feed/ 3 Vanadium: Validar formularios fácilmente http://blog.unijimpe.net/vanadium-validar-formularios-facilmente/ http://blog.unijimpe.net/vanadium-validar-formularios-facilmente/#comments Mon, 21 Sep 2009 04:58:04 +0000 unijimpe http://blog.unijimpe.net/?p=1085 Vanadium es un plugin para jQuery que permite validar formularios de manera sencilla y con pocas lineas de código. Permite validar campos obligatorios, numéricos, email, entre otros.

Validar formularios es muy importante en las páginas para prevenir el ingreso de datos inválidos sin el formato adecuado. Obviamente estas validaciones deben estar acompañadas de una validación…

]]> Vanadium es un plugin para jQuery que permite validar formularios de manera sencilla y con pocas lineas de código. Permite validar campos obligatorios, numéricos, email, entre otros.

Validar formularios es muy importante en las páginas para prevenir el ingreso de datos inválidos sin el formato adecuado. Obviamente estas validaciones deben estar acompañadas de una validación en el lado del servidor para tener una doble protección. Entonces Vanadium se encarga del proceso de validar formularios de manera sencilla y con una sintaxis muy sencilla de utilizar.

vanadium

Como utilizar Vanadium
Lo primero es descargar el script desde http://vanadiumjs.com/ en cualquiera de sus versiones: vanadium.js que contiene comentarios que puede usarse para editarlo o vanadium-min.js que esta comprimida para acelerar su carga.

Lo siguiente es incluir jQuery (en mi caso utilizare jQuery desde Google AJAX Libraries API) y Vanadium en el header de nuestro html para poder hacer uso de sus métodos.

  1. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
  2. <script type="text/javascript" src="vanadium.js"></script>

Lo siguiente es agregar a los campos de nuestro formulario el tipo de validación que queremos aplicarlo, esto se hace agregando estilos a los campos. Algunos de los tipos de validación disponibles son:

  • :required el campo es obligatorio.
  • :integer se aceptan números enteros.
  • :float se aceptan números decimales.
  • :length;n el campo debe tener n caracteres.
  • :min_length;n se aceptan n caracteres como mínimo.
  • :max_length;n se aceptan n caracteres como máximo.
  • :accept el campo checkbox debe ser aceptado.
  • :email el dato debe ser un email.

Luego si por ejemplo tuviéramos un formulario de registro donde el campo de usuario y clave son obligatorios y además el campo email debe aceptar solamente datos del tipo email tendríamos:

  1. <form method="post" action="">
  2.    Username:
  3.    <input name="username" type="text" id="username" size="36" class=":required" />
  4.    Password:
  5.    <input name="userpass" type="text" id="userpass" size="36" class=":required" />
  6.    Email:
  7.    <input name="email" type="text" id="email" size="36" class=":email" />
  8.    <input type="submit" name="btsend" id="btsend" value="Registro" />
  9. </form>

Listo, ya tenemos nuestro formulario validado. Como pueden ver en el el ejemplo los campos se validan cuando se esta ingresando los datos. Ahora si se desea personalizar esta validación solo hace falta modificar los estilos de los mensajes de error y confirmación.

© 2006 - 2009 unijimpe - Utiliza este feed solo para uso personal, partes de este feed pueden ser utilizados mencionando al autor, no esta permitido publicar enteramente este feed para uso comercial sin permiso del autor.


]]> http://blog.unijimpe.net/vanadium-validar-formularios-facilmente/feed/ 14 Precargar Imagenes con JS http://blog.unijimpe.net/precargar-imagenes-con-js/ http://blog.unijimpe.net/precargar-imagenes-con-js/#comments Mon, 27 Apr 2009 03:25:12 +0000 unijimpe http://blog.unijimpe.net/?p=1023 Luego del post Precargar imágenes con CSS en el cual comentábamos como colocar una imagen de fondo para indicar que se esta cargando una imagen, esta vez les presentamos una solución mas completa el cual incluye javascript.

Creando los estilos
Lo primero es crear dos estilos, un estilo que contiene una imagen de…

]]> Luego del post Precargar imágenes con CSS en el cual comentábamos como colocar una imagen de fondo para indicar que se esta cargando una imagen, esta vez les presentamos una solución mas completa el cual incluye javascript.

jspreload

Creando los estilos
Lo primero es crear dos estilos, un estilo que contiene una imagen de precarga y otro que elimina la imagen de fondo.

  1. .loading {
  2.     background: url(loading.gif) no-repeat center center;
  3. }
  4. .loaded {
  5.     background: none;
  6. }

Cargando la Imagen de Precarga
Lo siguiente es cargar al inicio la imagen del precargador, esto para que se pueda mostrar como fondo de las imágenes a precargar. Esto lo colocamos en el header de nuestro html.

  1. <script type="text/javascript">
  2. loadImage = new Image();
  3. loadImage.src = "loading.gif";
  4. </script>

Incluyendo las Imagenes
Lo que sigue es incluir las imágenes que deseamos mostrar, esto lo hacemos de la forma normal, pero le aplicamos el estilo .loading para mostrar la imagen de precarga.

  1. <img src="img1.png" width="512" height="387" class="loading" />
  2. <img src="img2.png" width="512" height="387" class="loading" />

Finalmente completamos el proceso creando un javascript que recorra todas las imágenes que contiene nuestro HTML, esto lo hacemos con la función getElementsByTagName, luego detectamos el evento onload de cada imagen para aplicarle el estilo que elimina la imagen de fondo.

  1. <script type="text/javascript">
  2. var imgs = document.getElementsByTagName('img');
  3. for(i in imgs) {
  4.     imgs[i].onload = function() {
  5.         this.className = "loaded";
  6.     }
  7. }
  8. </script>

Este script lo colocamos al final del HTML antes del tag </body> y listo ya tenemos nuestro script de precarga de imágenes completo que lo podemos incluir en cualquier en cualquier página html. Pueden ver el ejemplo funcionando en jspreload.

© 2006 - 2009 unijimpe - Utiliza este feed solo para uso personal, partes de este feed pueden ser utilizados mencionando al autor, no esta permitido publicar enteramente este feed para uso comercial sin permiso del autor.


]]> http://blog.unijimpe.net/precargar-imagenes-con-js/feed/ 5 Crear páginas de error 404 http://blog.unijimpe.net/crear-paginas-de-error-404/ http://blog.unijimpe.net/crear-paginas-de-error-404/#comments Sun, 19 Apr 2009 18:33:40 +0000 unijimpe http://blog.unijimpe.net/?p=1020 Un error 404 ocurre cuando un visitante no encuentra una página web, esto por que la dirección ingresada no existe, han escrito mal la dirección URL o por que la ruta ya no existe por que se editado o eliminado. Por defecto el browser muestra una pantalla indicando el tipo de error el cual es ininteligible…

]]> Un error 404 ocurre cuando un visitante no encuentra una página web, esto por que la dirección ingresada no existe, han escrito mal la dirección URL o por que la ruta ya no existe por que se editado o eliminado. Por defecto el browser muestra una pantalla indicando el tipo de error el cual es ininteligible para la mayoría de usuarios, por ello veremos la forma de personalizar este tipo de mensajes.

error404

Creando las paginas de error 404
Lo primero es editar el archivo .htaccess que esta en la raíz de nuestro servidor e incluir la siguiente línea de código, el cual hará que cada vez que no se encuentre el archivo solicitado se muestre la pagina error404.hml al visitante

  1. errorDocument 404 /error404.htm

Lo siguiente es crear este archivo, ahora como esta página es solo informativa no es necesario que sea indexada por los buscadores para ello es necesario agregarle un header indicando el tipo de error:

  1. <?php header("HTTP/1.1 404 Not Found"); ?>

Otra forma si no se tiene acceso a PHP es agregar un metatag en nuestro html para indicarle a los robots que no indexen la página:

  1. <meta name="robots" content="noindex, nofollow">

Lo que sigue es creatividad para crear un archivo de error personalizado. Si desean ver una muestra de diferentes paginas de error pueden visitar 404 Error Pages, One More Time.

Páginas de error personalizadas con Google
Si eres usuario de Google Webmaster Central podrás hacer uso de un widget para incluir en tus páginas de error 404, el cual sugerirá al visitante las urls semejantes a la ingresada e incluso un buscador, de esta forma le brindamos al usuario posibilidades de encontrar la información deseada.

Para utilizar este script, accedes a tu panel de Google Webmaster Central, seleccionas el dominio que deseas, luego accedes en el menu Tools - Enhance 404 pages, en donde encontrarás un código javascript el cual debes incluir en tus paginas de error.

  1. <script type="text/javascript">
  2.   var GOOG_FIXURL_LANG = 'es';
  3.   var GOOG_FIXURL_SITE = 'http://blog.unijimpe.net/';
  4. </script>
  5. <script type="text/javascript"  src="http://linkhelp.clients.google.com/tbproxy/lh/wm/fixurl.js"></script>

De esta forma ya tienes una página de error personalizada y sobre todo que le dará al visitante las opciones necesarias para encontrar lo que busca.

Mas Información

© 2006 - 2009 unijimpe - Utiliza este feed solo para uso personal, partes de este feed pueden ser utilizados mencionando al autor, no esta permitido publicar enteramente este feed para uso comercial sin permiso del autor.


]]> http://blog.unijimpe.net/crear-paginas-de-error-404/feed/ 2