Guiabreve» JavaScript http://www.guiabreve.com por Víctor Falcón Sun, 05 Sep 2010 19:04:42 +0000 en hourly 1 http://wordpress.org/?v=3.0.1 Presentation Cycle: Presentaciones dinámicas con barra de progreso http://www.guiabreve.com/presentation-cycle-presentaciones-dinamicas-con-barra-de-progreso.htm http://www.guiabreve.com/presentation-cycle-presentaciones-dinamicas-con-barra-de-progreso.htm#comments Mon, 25 Jan 2010 22:05:36 +0000 Víctor Falcón http://www.guiabreve.com/?p=1166 Presentation Cycle es un plugin de jQuery creado por Gaya Kessler que nos hará presentaciones o transiciones de imágenes con texto y una barra de progreso.

En el ejemplo podemos ver el funcionamiento de este plugin en 3 diferentes formas, la básica, una minimalista y otra aún mas minimalista.

Para implementarlo en una página debemos de incluir en el header las hojas de estilo y archivos del script y del jQuery:

[COPIAR]
Código HTML (Copiar):
  2.     <!-- Stylesheets-->
  3.     <link rel="stylesheet" type="text/css" href="css/presentationCycle.css" />
  4.  
  5.     <!-- Scripts -->
  6.     <script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js?ver=1.3.2'></script>
  7.     <script type='text/javascript' src='js/jquery.cycle.all.min.js'></script>
  8.     <script type='text/javascript' src='js/presentationCycle.js'></script>
  9. </head>

Despúes en el body donde queramos incluimos el container:

[COPIAR]
Código HTML (Copiar):
  1. <div id="presentation_container" class="pc_container">
  2.             <div class="pc_item">
  3.                 <div class="desc">
  4.                     <h1>Server Park</h1>
  5.                     Consectetur adipiscing elit. Nunc quis tellus eros.
  6.                     Nam blandit diam id turpis bibendum nec rutrum dui pulvinar. Quisque fermentum,
  7.                     dolor ut adipiscing suscipit, leo lorem malesuada mauris, vitae dapibus mi
  8.                     ligula ut nunc.
  9.                 </div>
  10.                 <img src="images/slide1.jpg" alt="slide1" />
  11.             </div>
  12.             <div class="pc_item">
  13.                 <div class="desc">
  14.                     <h1>iPhone Apps</h1>
  15.                     Consectetur adipiscing elit. Nunc quis tellus eros.
  16.                     Nam blandit diam id turpis bibendum nec rutrum dui pulvinar. Quisque fermentum,
  17.                     dolor ut adipiscing suscipit, leo lorem malesuada mauris, vitae dapibus mi
  18.                     ligula ut nunc.
  19.                 </div>
  20.                 <img src="images/slide2.jpg" alt="slide2" />
  21.             </div>
  22.  
  23.             <!-- Introducimos más elementos si queremos, Aqui hay dos. -->
  24.  
  25.         </div>

Como vemos todo está contenido por <div id="presentation_container" class="pc_container"> y luego cada elemento es un <div class="desc"> con un div para la descripción que contiene el titulo en un h1 y la descripción en sí. Además hay una imagen que será el fondo.

Ahora solo nos falta añadir lo siguiente justo después del presentation_container y listo.

[COPIAR]
Código PHP (Copiar):
  1. <script type="text/javascript">
  2.             presentationCycle.init();
  3.         </script>

Si hemos subido todos los archivos y los hemos añadido en el header de forma correcta ya debería de funcionar.

Para más información consultar la página del autor donde explica (en ingles) como utilizar el script y además como personalizarlo.

]]> http://www.guiabreve.com/presentation-cycle-presentaciones-dinamicas-con-barra-de-progreso.htm/feed 0 Menús desplegables, ¡solo con CSS! http://www.guiabreve.com/menus-desplegables-%c2%a1solo-con-css.htm http://www.guiabreve.com/menus-desplegables-%c2%a1solo-con-css.htm#comments Sat, 20 Jun 2009 20:14:53 +0000 Víctor Falcón http://www.guiabreve.com/?p=861 Menús desplegables, ¡solo con CSS! Normalmente solemos usar Javascript para añadirles efectos pero realmente si queremos realizar un menú desplegable sencillo lo podemos hacer solo usando CSS tal y como lo explica el señor Janko en su blog.

]]> http://www.guiabreve.com/menus-desplegables-%c2%a1solo-con-css.htm/feed 0 8 Soluciones basadas en Javascript a los problemas más comunes de CSS http://www.guiabreve.com/8-soluciones-basadas-en-javascript-a-los-problemas-mas-comunes-de-css.htm http://www.guiabreve.com/8-soluciones-basadas-en-javascript-a-los-problemas-mas-comunes-de-css.htm#comments Sun, 24 May 2009 16:58:05 +0000 Víctor Falcón http://www.guiabreve.com/?p=830 A veces para solucionar algunos de los problemas en cuanto a compatibilidad con los distintos navegadores de CSS no nos basta el CSS, a veces, tenemos que recurrir al Javascript. Por eso os dejo esta entra que recopila 8 Soluciones basadas en Javascript a los problemas más comunes de CSS.

]]> http://www.guiabreve.com/8-soluciones-basadas-en-javascript-a-los-problemas-mas-comunes-de-css.htm/feed 0 Añade colorido animado a tu página con Javascript http://www.guiabreve.com/anade-colorido-animado-a-tu-pagina-con-javascript.htm http://www.guiabreve.com/anade-colorido-animado-a-tu-pagina-con-javascript.htm#comments Wed, 20 May 2009 17:57:01 +0000 Víctor Falcón http://www.guiabreve.com/?p=820 Bonito el efecto que han generado en Dragon Labs (Demo) consiguiendo un fondo colorido y animado. El problema: la forma en que carga no es muy elegante y tendremos que usar una imagen de 3000x900 pixeles.

]]> http://www.guiabreve.com/anade-colorido-animado-a-tu-pagina-con-javascript.htm/feed 0 Typeface.js – Utiliza cualquier fuente en tus diseños. http://www.guiabreve.com/typefacejs-utiliza-cualquier-fuente-en-tus-disenos.htm http://www.guiabreve.com/typefacejs-utiliza-cualquier-fuente-en-tus-disenos.htm#comments Tue, 04 Nov 2008 22:42:41 +0000 Víctor Falcón http://www.guiabreve.com/?p=518 ¡Al fin! typeface.js es una librería JavaScript que yo y muchas gente más estaba esperando. Esta librería mediante el uso de <canvas/> nos permite utilizar en nuestra web cualquier tipografía.

Se acabo el ceñirse a las 3 o 4 fuentes clásicas que se encuentran en todos los sitemas operativos para evitar la perdida de compatibilidad. Lo bueno de este sistema es que al estar basado en Javascript es perfectamente compatible con el 99% de los navegadores del mercado.

Además tiene otras ventajas como, por ejemplo: es legible para los buscadores, multiplataforma, fácil de usar mediante CSS, ligero, y además permite seleccionar el texto y copiarlo (Aunque no muestra el texto seleccionado. Es algo extraño).

Pasemos a ver como implementarlo en nuestro sitio y como usarlo.

Implementación

  1. Descargamos la librería TypeFace.js
  2. Convertimos la fuente TrueTipe deseada a Javascript. Para ello tenemos disponible este conversor que nos facilita el trabajo.
  3. Añadimos en el header la llamada a la librería JavaScript y a la fuente convertida en el paso anterior de la siguiente forma:
    [COPIAR]
    Código HTML (Copiar):
    1. <script src="js/typeface-0.10.js" type="text/javascript"></script>
    2. <script src="js/YOURFILE.typeface.js" type="text/javascript"></script>

    ¡Importante! Hay que llamar a la Hoja de estilo CSS antes de la inclusión de los dos archivos Javascript.

Uso: Html + Css

Una vez que ya hemos incluido todo lo necesario en nuestro sitio web solo nos queda incluir un poco de CSS y Html en el sitio para aplicar la fuente que queramos. Por ejemplo: podemos amplicar nuestra fuente a un div de la siguiente forma:

[COPIAR]
Código HTML (Copiar):
  1. <div class="typeface-js" style="font-family: YOURFONT">
  2. Typeface.js will convert these lines of text to YOURFONT.
  3. </div>

Por supuesto que también podemos hacer esto por medio de CSS creando por ejemplo una clase llamada Myfont de la siguiente forma:

[COPIAR]
Código CSS (Copiar):
  1. .Myfont {font-family: YOURFONT}

El resultado es bastante bueno, además nos permite usar nuestra fuente deseada conjuntamente con otras propiedades de CSS como font-weight:bold; o line-height entre otras.

Si queréis ver ejemplos de la librería en funcionamiento dirigíos a la sección ejemplos de la web oficial.

]]> http://www.guiabreve.com/typefacejs-utiliza-cualquier-fuente-en-tus-disenos.htm/feed 2 Mejorando las Cajas de Alerta de Javascript con Mootools http://www.guiabreve.com/mejorando-las-cajas-de-alerta-de-javascript-con-mootools.htm http://www.guiabreve.com/mejorando-las-cajas-de-alerta-de-javascript-con-mootools.htm#comments Tue, 26 Aug 2008 19:18:31 +0000 Víctor Falcón http://www.guiabreve.com/?p=359 Es posible mejorar las cajas de alerta de Javascript usando Mootools para ellos y sino mira este ejemplo.

]]> http://www.guiabreve.com/mejorando-las-cajas-de-alerta-de-javascript-con-mootools.htm/feed 0 ¡No redimensiones la ventana! http://www.guiabreve.com/%c2%a1no-redimensiones-la-ventana.htm http://www.guiabreve.com/%c2%a1no-redimensiones-la-ventana.htm#comments Wed, 25 Jun 2008 08:49:49 +0000 Víctor Falcón http://www.guiabreve.com/?p=141 ¡No redimensiones la ventana! Se trata de una pequeña animación o corto que hace uso de Javascript para ir redimensionando y moviendo nuestra ventana consiguiendo un buen efecto. Probadlo con Firefox. (Vía)

]]> http://www.guiabreve.com/%c2%a1no-redimensiones-la-ventana.htm/feed 0 Captcha inspirado en el iPhone http://www.guiabreve.com/captcha-inspirado-en-el-iphone.htm http://www.guiabreve.com/captcha-inspirado-en-el-iphone.htm#comments Sat, 14 Jun 2008 21:55:29 +0000 Víctor Falcón http://www.guiabreve.com/?p=136 Los CAPTCHA suelen estar basados en pedir al usuario que copie el texto contenido en una imagen en un cuadro de texto. Este sistema es realmente novedoso. Como si de un iPhone se tratase lo que tenemos que hacer es arrastrar una flecha. (Ejemplo + Información)

]]> http://www.guiabreve.com/captcha-inspirado-en-el-iphone.htm/feed 1 Menú superior desplegable con jQuery http://www.guiabreve.com/menu-superior-desplegable-con-jquery.htm http://www.guiabreve.com/menu-superior-desplegable-con-jquery.htm#comments Sun, 18 May 2008 22:47:40 +0000 Víctor Falcón http://www.guiabreve.com/?p=122  

Las ventajas de un menú superior desplegable es que nos permite ofrecerle al usuario una serie de accesos directos a los enlaces más importante de nuestra web de forma que no estén continuamente en pantalla si no que solo se desplieguen cuando el usuario desee.

Para hacer este menú hemos utilizado la librería jQuery, para conseguir ese efecto. Para aplicarlo en nuestra web tenemos que incluir el código Javascript y la llamada a la librería entre las etiquetas <head></head> de la siguiente forma:

[COPIAR]
Código PHP (Copiar):
  1. <script type="text/javascript" src="jquery.js"></script>  <!-- Libreria jQuery -->
  2. <script type="text/javascript">
  3. $(document).ready(function(){
  4.  
  5.     $(".btn-slide").click(function(){
  6.         $("#panel").slideToggle("slow");
  7.         $(this).toggleClass("active"); return false;
  8.     });
  9.    
  10.     
  11. });
  12. </script>

El código html quedaría de la siguiente forma:

[COPIAR]
Código HTML (Copiar):
  1. <div id="panel">
  2.     <ul class="list">
  3.         <li><a href="#">Inicio</a></li>
  4.         <li><a href="#">Contacto</a></li>
  5.         <li><a href="#">Portafolio</a></li>
  6.         <li><a href="#">Sobre...</a></li>
  7.         <li><a href="#">Ayuda</a></li>
  8.         <li class="buscar"><input value="Buscar" /></li>
  9.     </ul>
  10.     <div class="clear"></div>
  11. </div>
  12.  
  13. <p class="slide"><a href="#" class="btn-slide">Men&uacute;</a></p>

Y por último necesitamos darle estilo mediante CSS quedando de la siguiente forma:

[COPIAR]
Código CSS (Copiar):
  1. #panel {
  2.     background: #CCC093;
  3.     height: 50px;
  4.     display: none;
  5. }
  6. .slide {
  7.     margin: 0;
  8.     padding: 0 0 0 5px;
  9.     border-top: solid 4px #825948;
  10.     height: 40px;
  11. }
  12. .btn-slide {
  13.     float: left;
  14.     background: #825948 url(white-arrow.gif) no-repeat right -50px;
  15.     text-align: center;
  16.     width: 144px;
  17.     height: 31px;
  18.     padding: 10px 10px 0 0;
  19.     margin: 0 auto;
  20.     display: block;
  21.     font: bold 120%/100% Arial, Helvetica, sans-serif;
  22.     color: #fff;
  23.     text-decoration: none;
  24. }
  25. .active {
  26.     background-position: right 12px;
  27. }
  28.  
  29. ul.list {margin: 0px; padding: 16px 0px 0px 10px; list-style: none;}
  30. ul.list li {float: left; width: auto;}
  31. ul.list a {text-decoration: none; background: #453027; margin: 5px; padding: 4px;}
  32. ul.list a:hover {text-decoration: none; background: #825948;}
  33.  
  34. ul.list li.buscar {float: right; margin-right: 5px;}
  35. ul.list li.buscar input {background-color: #453027; border: 0px; color: #CCC093; font-size: 18px; margin: 0px; width: 300px;}

Si queréis ver un ejemplo de como queda, tenéis esta página disponible. La librería jQuery la tenéis aquí.

]]> http://www.guiabreve.com/menu-superior-desplegable-con-jquery.htm/feed 4 Guia completa sobre PHP Speedy: Instalación, configuración y uso http://www.guiabreve.com/guia-completa-sobre-php-speedy-instalacion-configuracion-y-uso.htm http://www.guiabreve.com/guia-completa-sobre-php-speedy-instalacion-configuracion-y-uso.htm#comments Tue, 06 May 2008 14:14:08 +0000 Víctor Falcón http://www.guiabreve.com/?p=95 Primero que nada: ¿Que es y para que sirve? PHP Speedy WordPress Plugin es un plugin para WordPress que acelera la carga del blog, uniendo y comprimiendo los archivos Javascript y las Hojas de Estilo (CSS). La página cargará más rápido y si usamos varias librerías JavaScript notaremos bastante la diferencia.

A continuación hablaremos de:

  1. Instalación
  2. Configuración
  3. Prueba de la configuración
  4. Activación
  5. ¿Realmente mejora el tiempo de Carga?

Instalación

La instalación no es diferente a el resto de plugins, simplemente lo descargamos y subimos la carpeta php_speedy_wp al directorio wp-content/plugins de WordPress.

Antes de activarlo tenéis que aseguraos de que los directorios /wp-content/plugins/php_speedy_wp/libs/php_speedy/config.php y /wp-content/plugins/php_speedy_wp/cache tengan permisos CHMOD 777. Luego lo activamos y vamos a Opciones » PHP Speedy.

Configuración

Comprobaciones

Una ves que estemos en en la página de Opciones de PHP Speedy, lo primero que tendréis que comprobar es que PHP Speedy marque el archivo de opciones y el directorio de caché como writable (Modificable). Tal y como muestra la siguiente imagen.

Configuración básica

El plugin nos ofrece varías opciones para que lo configuremos a nuestro gusto. En principio nos encontramos con una lista de librerías JavaScript. En caso de que usemos alguna de las que esta disponible podríamos añadirla desde hay. En mi caso no uso ninguna de esas, así que no he marcado ninguna.

A continuación nos encontramos con las opciones de reducción de archivos y la compresión Gzip tanto de los archivos JavaScript como de los CSS. Yo he marcado todas las opciones para conseguir la mayor optimización posible del sitio.

Luego nos encontramos con otros tres grupos de opciones: Far Future Expires Options, File Cleanup y Footer Text. En estas opciones no me voy a parar, yo simplemente active todas las opciones de los dos primero grupos y desactive las de Footer Text. (Tal y como esta en las imágenes siguientes)

En caso de querer añadir un enlace de texto y un logo en el pie de nuestra página para ayudar al creador del plugin podríamos marcar las opciones de Footer Text

Una ves que este todo configurado a nuestro gusto hacemos clic en el botón Set Options para guardar la configuración.

Probar configuración

Una ves que este todo configurado y hallamos guardado la configuración tendremos que probarla para comprobar que todo este bien. Para ello nos dirigimos a la pestaña Test Configuration.

En caso de que no halla problemas nos aparecerá una ventana como la de la imagen. Si nos fijamos nos indica que archivos JavaScript y CSS ha tratado y cual es el resultado de la combinación de ambos.

En caso de que halla algún error habría que analizarlo uno por uno, pero en principio si se ha configurado todo correctamente no debería de haber ningún problema.

Activación

Luego solo nos quedaría activar el plugin para que comienza a funcionar. Para ello simplemente nos dirigimos a la tercera pestaña, en la que debe poner algo así como Activate, y pulsar el botón para activarlo.

Análisis

Ahora, una vez que lo he activado, he querido comprobar si realmente funciona y cuanto tiempo ahorra. Por medio de la utilidad de Safari, el Inspector Web, he comprobado los tiempos de cargas y las peticiones con y sin el plugin activado.

En mi caso la diferencia de tiempo ha sido de 1 segundo y medio. Teniendo en cuenta que antes cargaba en 3'5 segundos aproximadamente y ahora en unos 2 segundos, estamos hablando de una diferencia del 43%.

En cuanto a las peticiones, también han descendido, con lo cual, también se reducirá la carga del servidor.

Bueno, esto ha sido todo, espero que os halla sido útil y que alguno se anime a probarlo, si os surge algún problema probad a dejar un comentario, y os intentaré ayudar en lo que pueda.

]]> http://www.guiabreve.com/guia-completa-sobre-php-speedy-instalacion-configuracion-y-uso.htm/feed 4