Posts Mentioning RSS Toggle Comment Threads | Keyboard Shortcuts

  • TBS 12:38 am on November 20, 2009 Permalink | Reply
    Tags: , , subtítulos   

    jQuery Subtitles plugin 

    Inspirado por la página de conmemoración del 5to aniversario de Firefox y el video que muestran con subtítulos externos que aprovecha las bondades de HTML 5 y la etiqueta <video>, creé el plugin Subtitles para jQuery a partir de este snipt de j^.

    Básicamente carga y sincroniza subtítulos desde un archivo externo con un video embebido con la etiqueta <video> de HTML 5.

    El modo de utilización es bastante simple:

    1. Cargamos jQuery y el plugin: 
      <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="jquery.subtitle.js"></script>
    2. Insertamos la etiqueta video con los atributos que estimemos pertinentes y el elemento donde se visualizarán los subtítulos que puede ser un div, p, spam o cualquier otr que deseemos: 
      <video id="video_example" width="505" height="284" src="http://videos.mozilla.org/fyfx/Firefox_Final_VO.ogv" controls="" tabindex="0"></video>
<p class="subtitulos"></p>
    3. Para finalizar ejecutamos el plugin. Se debe especificar como parámetros el camino hasta el fichero con los subtítulos y el id del video con el que se van a sincronizar: 
      <script type="text/javascript">
	$(document).ready(function(){
		$(".subtitulos").loadSubtitle("mozilla.srt", "video_example");
	});
</script>

    Debo agregar que por el momento solo soporta subtítulos en formato .srt.

    Pueden ver este ejemplo funcionando y descargar el plugin desde el repositorio de jQuery.

     

  • TBS 9:07 pm on November 9, 2009 Permalink | Reply
    Tags: adaptable, , , , layout, liquido, , plantilla,   

    Crear “vista adaptable” al estilo YouTube 

    LayoutSeguramente han notado en algún momento el botón que incorporó YouTube que nos permite expandir el reproductor del video al ancho total de la página, desplazando la lista de videos relacionados.

    En la práctica la vista adaptable en determinadas circunstancias puede resultar sumamente beneficiosa, mejorando la usabilidad de nuestro sitio web, además de brindar libertad al usuario de cambiar la visualización de los contenidos.

    Expandir la columna central del layout de nuestra página como lo hace YouTube puede resultar sencillo de realizar dependiendo de como esté estructurada y maquetada nuestra web.

    Desde JankoAtWarpSpeed –un fanático de Star Trek?- nos llega este ejemplo que utiliza la siguiente estructura:

    <div id="main"></div>

    El CSS es el complemento que ayudará a que la estructura de nuestro layout se ajuste de la siguiente forma: contenidos y áreas de comentario flota a la izquierda, mientras que la barra lateral flota a la derecha. Esto permitirá a la barra lateral bajar cuando expandamos el contenido sin necesidad de alterar nuestra estructura XHTML manipulando el DOM.

    El fragmento de CSS para que el ejemplo funcione de la manera descrita es el siguiente:

    #header, #content, #comments, #sidebar, #footer { margin:10px 0px; padding:30px;}
#header { width:900px; margin:0px auto;}
#main {width:960px; margin:0px auto; overflow:hidden;}
#content { width:540px; float:left;}
#content.wide { width:900px;}
#comments { width:540px; float:left;}
#sidebar { width:280px; margin-left:20px; float:right;}
#footer { width:900px; margin:0px auto;}

    Mediante unas líneas de Javascript y aprovechando la librería jQuery, vamos a conseguir que al dar click sobre un hipervínculo, se agregue o elimine la clase “wide” al elemento “content” de nuestra página, lo cuál completará la “magia”:

    $(document).ready(function() {
    $("#wideView").click(function() {
        $("#content").toggleClass("wide");
    });
});

    Para finalizar, podemos ver un ejemplo funcionando, descargar el código de fuente del ejemplo o leer el artículo original.

     

  • TBS 6:47 pm on May 1, 2009 Permalink | Reply
    Tags: , , , precarga,   

    Lazy Load: manipular la descarga de imágenes con jQuery 

    Si tienes un sitio con un número considerable de imágenes de gran tamaño y la descarga se ve afectada por este motivo, este plugin de jQuery puede ayudarte a optimizar el proceso.

    Con Lazy Load podemos retardar la descarga de las imágenes de una página a un período de tiempo determinado o hasta que la página se encuentre descargada completamente. De esta forma damos prioridad para que se descarguen las hojas de estilo y el cuerpo de la página, visualizándose sin problemas y dejando para el final la descarga de las imágenes pesadas.

    También podemos sumarnos algunos puntos de estética, si especificamos que las imágenes aparezcan solo cuando estas se encuentren completamente descargadas.

    Un ejemplo de su uso sería:

    <script src="jquery.js" type="text/javascript"></script>
<script src="jquery.lazyload.js" type="text/javascript"></script>
 
<script type="text/javascript">
      $(function() {          
          $("img").lazyload({
             placeholder : "img/grey.gif",
             effect      : "fadeIn"
          });
      });
</script>

    Enlaces: Descargar Lazy Load y ejemplos

     

  • TBS 4:50 pm on April 24, 2009 Permalink | Reply
    Tags: 960, , Framework, ,   

    960.gs grid overlay: plugin de jQuery para verificar las retículas 


    Si basas tus diseños web en columnas utilizando el Framework de CSS 960.gs, 960.gs grid overlay, un plugin para jQuery puede resultarte bastante útil.

    Con 960.gs grid overlay podemos agregar de forma dinámica una capa con las columas(12 o 16 según especifiquemos) sobre nuestro sitio, mientras testeamos la maquetación en el navegador. De esta forma podemos comprobar los márgenes y el ancho de las columnas del trabajo que estamos maquetando.

    El plugin pesa solo unos 1.5 Kb y podemos utilizarlo agregando solamente algo como esto:

    <script type="text/javascript">
	$(function() {
		$("body").addGrid(12, {img_path: 'images/'});
	});
</script>

    Para el ejemplo tomé prestado una imagen del diseño de Cubanealo que hace unos días hizo público David Chapet y que está basado 12 columnas con 960.gs.

    Enlaces: 960.gs grid overlay | Demo 960.gs grid overlay | 960.gs

     

  • TBS 8:53 pm on April 22, 2009 Permalink | Reply
    Tags: , ,   

    Crear PDF con Javascript 

    Vía este status de @emiligene se de jsPDF, un pequeña librería Javascript(con proyecto en Google Code bloqueado para los cubanos pero accesible desde un anonymizer ;) ) con la cuál podemos generar PDF “al vuelo” desde el navegador.

    Por lo que pude revisar lamentablemente admite para generar el PDF solo texto en un mismo puntaje e imágenes, pero de llegar a desarrollarse y admitir un poco más de personalización no cabe dudas de que sería muy útil.

    Estamos hablando de que sitios que por alguna razón ofrecen documentos en formato PDF pueden ahorrarse gigas de espacio para almacenar los mismos y un ahorro considerable de recursos como CPU y memoria RAM en caso de que dejásemos de generarlo de forma dinámica en el servidor.

    El modo de empleo es bastante sencillo y lo podemos ver en acción en este pequeño ejemplo. Funciona además en las últimas versiones de los navegadores.

    Para utilizarlo primero debemos agregar la librería con sus dependencias:

    <script src="base64.js" type="text/javascript"><!--mce:0--></script>
<script src="sprintf.js" type="text/javascript"><!--mce:1--></script>
<script src="jspdf.js" type="text/javascript"><!--mce:2--></script>

    Creamos la función para generar el PDF:

    <script type="text/javascript">
   function crearPDF() {
      jsPDF.init();
      jsPDF.addPage();
      jsPDF.text(5, 10, 'Creando un PDF con Javascript!');
 
      var out = jsPDF.output();
      var url = 'data:application/pdf;base64,' + Base64.encode(out);
      document.location.href = url;
   }
</script>

    Llamamos en el evento onclick de un botón o vículo a la función que generará el PDF:

    <a href="javascript:crearPDF();">Ejecutar código</a>

    Enlaces: Crear PDF con Javascript | Proyecto jsPDF

     

  • TBS 11:05 pm on March 30, 2009 Permalink | Reply
    Tags: ,   

    jQuery hint Plugin: EZPZ hint 

    EZPZ hint es un plugin de jQuery para mostrar en el interior de un campo de texto una etiqueta descriptiva, la misma desaparece cuando pasa el foco al campo de texto, y aparece de nuevo si salimos del mismo sin haber escrito nada.

    La forma de empleo es bastante simple, creamos un input de tipo texto y nos aseguramos de especificar el atributo title, ya que este será el texto que aparecerá dentro del mismo:

    <input id="search" class="hint" title="Search" name="search" type="text" />

    Luego agregamos las siguientes líneas para activar el plugin:

    $("input.login_hint").ezpz_hint();

    Sencillo modo de empleo, práctico y solo 900 bytes.

    Enlaces: Ejemplos y más información | Descargar

     

  • TBS 7:53 pm on March 9, 2009 Permalink | Reply
    Tags: , ,   

    Modificar altura de un textarea de forma automática 

    Vía Twitter y gracias a este micropost de @nourayehia conozco a autoRisze, un nuevo plugin para jQuery que nos permite modificar la altura de un textarea de forma automática a la par que introducimos el contenido en el mismo.

    Utilizando el método scrollTop del DOM, obtiene la altura completa del textarea, incluyendo los pixels que nos oculta el scroll. Luego modifica la altura del textarea a los pixels obtenidos. De manera alternativa podemos aplicar el cambio con un pequeño efecto.

    Sin dudas este plugin utiliza una forma mucho más óptima que la que utilizaba el plugin de Jason Frame que a mi particularmente nunca me funcionó del todo bién, por aquello que obtenía la altura de un DIV invisible en el cuál replicaba el contenido del textarea, etc.

    Para poner a funcionar el plugin solo tenemos que las siguientes líneas de código:

    $('textarea#comment').autoResize({
// On resize:
onResize : function() {
$(this).css({opacity:0.8});
},
// After resize:
animateCallback : function() {
$(this).css({opacity:1});
},
// Quite slow animation:
animateDuration : 300,
// More extra space:
extraSpace : 40
});

    Enlaces: autoRisze

     

  • TBS 4:51 pm on March 7, 2009 Permalink | Reply
    Tags: , , , , Trackback   

    Obtener el Trackback URL de un blog utilizando PHP y jQuery 

    Hace unos días vengo testeando Cubanéalo, un proyecto de Cuba Zoom que se encuentra en fase de producción y del cuál muy pronto estoy seguro se hablará mucho.

    Para que tengan una idea, Cubanéalo es una especie de digg-like, pero tiene la particularidad que solo difunde contenido relacionado con Cuba.

    Probando esta aplicación, noté la ausensia de la detección automática de la URL Trackback hacia el contenido, algo que si no eres un usuario experimentado y con conocimientos de los blogs, difícilmente sepas el dato que te están pidiendo y como obtenerlo.

    Tengo la manía de ponerme a tratar de decifrar como se haría X o Y cosa que me halla llamado la atención en algún sitio que visito, la detección automática de la URL Trackback de los contenidos que se publican en Cubanéalo no fue la excepción ;) …

    Heché manos a la obra y desarrollé utilizando jQuery y la clase PHP Simple HTML DOM Parser este ejemplo que de forma bastante práctica y dinámica nos permite obtener la URL Trackback.

    Este Script puede modificarse para de forma alternativa obtener el título, las palabras claves y otros contenidos de nuestro interés en la página especificada.

    El funcionamiento es básicamente el siguiente:

    • Recojo la URL especificada que apunta hacia el contenido a publicar con Javascript y la envío por AJAX hacia el Script getPingBack.php, todo utilizando jQuery.
    • El Script getPingBack.php verifica valida la URL, de existir aprovechando los métodos de la clase PHP Simple HTML Parser, cargo el contenido de la página y lo parseo hasta encontrar la etiqueta link cuyo atributo rel tiene el valor pingback.
    • Si el Script encuentra dicha etiqueta, devuelve el atributo href de la misma, que es la URL Trackback de la página en cuestión y se muestra utilizando nuevamente jQuery en el input correspondiente a la URL Trackback

    Enlaces: Ejemplo obtener la URL Trackback | Código de fuente | jQuery | PHP Simple HTML DOM Parser

     

  • TBS 2:05 pm on January 31, 2009 Permalink | Reply
    Tags: chivos, chuletas, , ,   

    Chivos para jQuery 

    Cuando se es programador y utilizas para el desarrollo varios lenguajes es bién difícil acordarse de todas las funciones y métodos propias de cada uno de ellos.Hay un invento que nos puede ayudar a recordar y es más viejo que andar a piés: los chivos(chuletas)… (More …)

     

  • TBS 6:15 pm on January 22, 2009 Permalink | Reply
    Tags: , , ,   

    Crear un Slideshow a partir de una lista desordenada 

    Hace unos días escribí un post en el cual mencionaba 11 nuevos plugins para las librerías de Javascript más populares los cuales nos permiten crear Slideshows. Pues hoy gracias al amigo @elijahmano, conocí un nuevo plugin para jQuery slideViewer, que como el título de este post indica, nos permite crear un Slideshow a partir de una lista desordenada de imágenes(ul).

    Muy sencillo de aplicar y muy ligero, solo 1,5 kb. En la página del proyecto podemos encontrar diversos ejemplos para su aplicación.

     

Older Posts →

c
compose new post
j
next post/next comment
k
previous post/previous comment
r
reply
e
edit
o
show/hide comments
t
go to top
l
go to login
h
show/hide help
esc
cancel