Tagged: plugin RSS

  • TBS 12:38 am on November 20, 2009 Permalink | Reply
    Tags: , plugin, 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 4:50 pm on April 24, 2009 Permalink | Reply
    Tags: 960, , Framework, , plugin   

    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 10:17 pm on March 18, 2009 Permalink | Reply
    Tags: automático, plugin, , vinculo,   

    Enlazar usuarios a su perfil en Twitter desde Wordpress automáticamente 

    Hace tiempo tenía en mente desarrollar un plugin para Wordpress que me generara los vínculos hacia los usuarios de Twitter automáticamente.

    Es que me llega mucho contenido para posibles post por esa vía y pensé que sería útil un plugin que me vinculara a @fulano o @mengano de forma automátca cuando fueran citados en mi entrada.

    Se me acaba de adelantar un colega con el plugin EZ Twitter Links que me viene de perlas para hacer todo lo que anteriormente les comenté y que al final me ahorró unas horitas de trabajo ;) …

    El plugin no lleva complicación alguna, con subirlo a la carpeta de plugins de Wordpress y activarlo ya tenemos. El se encargara de vincular a @fulano y @mengano a su perfil de Twitter…

    Enlaces: Descargar plugin EZ Twitter Links | EZ Twitter Links en Wordpress

     

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

    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 2:14 am on February 21, 2009 Permalink | Reply
    Tags: iBBDemo, , navegación, plugin, simulador, software, tema, ,   

    La pechuga del Pollo en el iBBDemo, el simulador de navegación web con iPhone 

    Les voy a hablar de dos cosas en este post:

    1. Vía Cubaleo me entero de la existencia de iwphone-wordpress-plugin-and-theme, un plugin para Wordpress  que detecta cuando se está tratando de acceder a través de un móvil o PDA y carga automáticamente un tema con las características idóneas para ser visualizado de forma optimizada en las pantallas de estos dispositivos.

    El tema viene en el archivo del plugin y devemos subirlo a la carpeta de los temas de Wordpress pero no se debe activar. El plugin se sube a su carpeta de plugins y se activa normalmente.

    2. Luego de hacer las configuraciones pertinentes en mi blog, tenía un problema: de donde saco un iPhone, BlackBerry, PDA o cualquier otro dispositivo móvil que tenga servicio de Internet en Cuba para ver como se veía mi blog?!

    Para los que no lo saben, Cuba está muy atrás en todo lo que a Telecomunicaciones se refiere(entre otras cosas).

    Después de dar mil vueltas por Internet y probar sin resultados algunos simuladores Online de iPhone(TestiPphone, iPhoneTester), encontré que hace solo par de días el equipo de Blackbaud Labs acaba de liberar el software iBBDemo para Windows que simula la navegación de Safari en el iPhone de forma perfecta! Solo requiere tener instalado Safari 3.2 o superior en la PC porque utiliza el motor Webkit para el renderizado de las páginas.

    Entonces, aquí les dejo un Screenshot de mi blog visto desde iBBDemo, el simulador de navegación web con iPhone, con el plugin iwphone-wordpress-plugin-and-theme modificado al estilo pechuguero :)

     

    • Tarequito 6:21 am on February 21, 2009 Permalink

      Gracias por la referencia. Yo probé el plugin en cuestión directo en el iphone y funciona a las mil maravillas.

    • TBS 11:10 am on February 23, 2009 Permalink

      @Tarequito no, gracias a ti por compartir…

    • pablox 7:13 am on March 17, 2009 Permalink

      Hola, gracias por tu pagina web.
      Solo una pregunta, ¿sabe alguien si con una blackberry con tarifa plana internacional de navegacion en internet hay cobertura en Cuba a traves de GSM de la Habana o Varadero?

    • pablox 7:15 am on March 17, 2009 Permalink

      por cierto, otra cosa, estamos empezando una guia de Cuba online para todos los que esten interesados en buscar acomodacion de lujo en La Habana, quien tenga interés puede visitar la página en http://cuba-explore.com

    • TBS 10:15 am on March 25, 2009 Permalink

      pablox me parece que si funciona, siempre y cuando el teléfono no sea de una compañia norteamericana, por el bloqueo las pueden multar así que no tienen ningún convenio con Cuba

    • TBS 8:59 pm on April 30, 2009 Permalink

      pablox creo que ya hay Romaing con las compañias norteamericanas…

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