Webmaster Libre » Javascript http://www.webmasterlibre.com Desarrollo Web con Software Libre Thu, 09 Feb 2012 11:34:44 +0000 en hourly 1 http://wordpress.org/?v=3.3.1 Scrollorama, haz locuras con el scroll de tu página http://www.webmasterlibre.com/2012/01/26/scrollorama-haz-locuras-con-el-scroll-de-tu-pagina/ http://www.webmasterlibre.com/2012/01/26/scrollorama-haz-locuras-con-el-scroll-de-tu-pagina/#comments Thu, 26 Jan 2012 14:40:51 +0000 Alma Fernández http://www.webmasterlibre.com/?p=2469

Scrollorama es un plugin para jQuery que te permitirá hacer cosas increibles con tus páginas cuando el usuario haga scroll.

Podrás hacer efectos parallax, animar y transformar texto (rotarlo, incrementar el zoom, girarlo, hacerlo desaparecer o aparecer suavemente…), mantener texto fijo en pantalla…

Visita la página del proyecto para ver un ejemplo pero, recuerda, estas cosas mejor cuando no las exageras demasiado. No queremos que a base de hacer efectos alucinantes tus usuarios se pierdan el contenido de la página ¿no?.

Entradas relacionadas

¿Quieres hasta 6 meses de hosting gratis? Utiliza el cupón RCwebmasterlibre al contratar cualquier plan con RedCoruna - más información


Scrollorama, haz locuras con el scroll de tu página was first posted on enero 26, 2012 at 3:40 pm.
]]> http://www.webmasterlibre.com/2012/01/26/scrollorama-haz-locuras-con-el-scroll-de-tu-pagina/feed/ 0 Dropkick, dropdowns más bonitos http://www.webmasterlibre.com/2012/01/13/dropkick-dropdowns-mas-bonitos/ http://www.webmasterlibre.com/2012/01/13/dropkick-dropdowns-mas-bonitos/#comments Fri, 13 Jan 2012 13:23:10 +0000 Alma Fernández http://www.webmasterlibre.com/?p=2438

Personalizar los menús desplegables de un formulario es una labor que no suele ser ni cómoda ni fácil.

Existen múltiples plugins y scripts para hacerlo pero, en la mayoría de los casos, requiere sacrificar alguna funcionalidad o añadir toneladas de código extra.

Ojeando Criterion me encuentro con Dropkick, un plugin para jQuery con el que la tarea se convierte en algo sencillo y flexible.

Dropkick nos permite dar estilo a los elementos <select> requiriéndonos únicamente que les demos un atributo name, nada de divs extras ni cosas raras. La apariencia se controla mediante hojas de estilo y no perdemos ninguna funcionalidad propia de los dropdowns (si añadimos el tabindex se pueden seguir navegando con el tabulador).

Entradas relacionadas

¿Quieres hasta 6 meses de hosting gratis? Utiliza el cupón RCwebmasterlibre al contratar cualquier plan con RedCoruna - más información


Dropkick, dropdowns más bonitos was first posted on enero 13, 2012 at 2:23 pm.
]]> http://www.webmasterlibre.com/2012/01/13/dropkick-dropdowns-mas-bonitos/feed/ 2 Mootools Forge: librería de plugins para MooTools http://www.webmasterlibre.com/2009/12/15/mootools-forge-libreria-de-plugins-para-mootools/ http://www.webmasterlibre.com/2009/12/15/mootools-forge-libreria-de-plugins-para-mootools/#comments Tue, 15 Dec 2009 20:06:07 +0000 Alma Fernández http://www.webmasterlibre.com/?p=2386 MooTools-Forge

Si hay algo que hace sencillo usar jQuery es lo fácil que es encontrar plugins desde la misma página del framework.

Ahora, los que prefieren MooTools disponen de un directorio propio donde ir a buscar plugins: MooTools Forge.

Allí podrás encontrar plugins categorizados por tipo y, si eres desarrollador, también podrás subir los tuyos.

Sin duda, un gran recurso para los usuarios de esta fantástica librería.

Otras entradas que pueden interesarte:

¿Quieres hasta 6 meses de hosting gratis? Utiliza el cupón RCwebmasterlibre al contratar cualquier plan con RedCoruna - más información


Mootools Forge: librería de plugins para MooTools was first posted on diciembre 15, 2009 at 9:06 pm.
]]> http://www.webmasterlibre.com/2009/12/15/mootools-forge-libreria-de-plugins-para-mootools/feed/ 8 Una sencilla y vistosa barra de herramientas para tu web con jQuery y CSS3 http://www.webmasterlibre.com/2009/12/09/una-sencilla-y-vistosa-barra-de-herramientas-para-tu-web-con-jquery-y-css3/ http://www.webmasterlibre.com/2009/12/09/una-sencilla-y-vistosa-barra-de-herramientas-para-tu-web-con-jquery-y-css3/#comments Wed, 09 Dec 2009 12:25:31 +0000 Alma Fernández http://www.webmasterlibre.com/?p=2379 toolbar

De un tiempo a esta parte empiezo a ver por muchos sitios una barra de herramientas en la parte inferior de las páginas con utilidades como enviar enlaces a redes sociales, suscribirse al feed o abrir una ventana de chat. Muy al estilo de la que emplea, por ejemplo, Facebook.

Existen algunos servicios como Wibiya con los que generar nuestra propia barrita de forma cómoda y sencilla pero, si buscamos ese punto extra de personalización nos toca ponernos manos a la obra y crear la nuestra propia.

En pvmgarage nos enseñan a hacer una gracias a jQuery y CSS3, lo malo es que no se lleva nada bien con Explorer 6 o 7 – y en el 8 se ve ligeramente fea – así que, al menos de momento, queda relegada a proyectos donde no te importe perder unos cuantos visitantes por culpa de su navegador. O eso, o te toca ponerte a trabajar un poco más para adaptar algunas cosas ya que el autor no considera esos navegadores porque “están pasados” (sic).

Otras entradas que pueden interesarte:

¿Quieres hasta 6 meses de hosting gratis? Utiliza el cupón RCwebmasterlibre al contratar cualquier plan con RedCoruna - más información


Una sencilla y vistosa barra de herramientas para tu web con jQuery y CSS3 was first posted on diciembre 9, 2009 at 1:25 pm.
]]> http://www.webmasterlibre.com/2009/12/09/una-sencilla-y-vistosa-barra-de-herramientas-para-tu-web-con-jquery-y-css3/feed/ 13 Detect Mobile Browser, detecta y redirige a los navegadores móviles http://www.webmasterlibre.com/2009/11/30/detect-mobile-browser-detecta-y-redirige-a-los-navegadores-moviles/ http://www.webmasterlibre.com/2009/11/30/detect-mobile-browser-detecta-y-redirige-a-los-navegadores-moviles/#comments Mon, 30 Nov 2009 19:33:13 +0000 Alma Fernández http://www.webmasterlibre.com/?p=2372 Detect Mobile Browser

No hace demasiado, preopuparse por los navegadores móviles en según que tipo de sitios era esfuerzo extra y generalmente servia para poco.

Hoy, con el boom de teléfonos que ofrecen una experiencia bastante buena de internet y la llegada, por fin, de tarifas planas medianamente decentes. Empieza a ser una cuestión importante, redirigir a nuestros visitantes móviles a sitios más acordes a sus dispositivos.

Detect Mobile Browser es un proyecto Open Source que nos ofrece código en diferentes lenguajes (.htaccess de Apache, JSP, PHP, Rails, ASP, Javascript y ColdFusion) listo para descargar e incorporar a nuestros proyectos. Además, en su web podremos crear enlaces del tipo http://detectmobilebrowser.com/www.webmasterlibre.com|m.webmasterlibre.com (ojo, a dirección “móvil” no existe al menos de momento) con el que pasar un enlace que llevará a los usuarios a distintas versiones de la web dependiendo de su dispositivo.

Enlace: Detect Mobile Browser

Otras entradas que pueden interesarte:

¿Quieres hasta 6 meses de hosting gratis? Utiliza el cupón RCwebmasterlibre al contratar cualquier plan con RedCoruna - más información


Detect Mobile Browser, detecta y redirige a los navegadores móviles was first posted on noviembre 30, 2009 at 8:33 pm.
]]> http://www.webmasterlibre.com/2009/11/30/detect-mobile-browser-detecta-y-redirige-a-los-navegadores-moviles/feed/ 1 gRaphaël, librería javascript para crear gráficos http://www.webmasterlibre.com/2009/10/12/graphael-libreria-javascript-para-crear-graficos/ http://www.webmasterlibre.com/2009/10/12/graphael-libreria-javascript-para-crear-graficos/#comments Mon, 12 Oct 2009 20:30:19 +0000 Alma Fernández http://www.webmasterlibre.com/?p=2358 gRaphaël

gRaphaël es una sencilla librería con la que insertar gráficos en tus sitios web será coser y cantar. Descarga el javascript, inclúyelo en tus páginas y con unas simples líneas de código podrás mostrar gráficos de tarta, de líneas, de puntos…

gRaphaël está bajo licencia MIT

enlace: gRaphaël

vía Web Resources Depot

Otras entradas que pueden interesarte:

¿Quieres hasta 6 meses de hosting gratis? Utiliza el cupón RCwebmasterlibre al contratar cualquier plan con RedCoruna - más información


gRaphaël, librería javascript para crear gráficos was first posted on octubre 12, 2009 at 10:30 pm.
]]> http://www.webmasterlibre.com/2009/10/12/graphael-libreria-javascript-para-crear-graficos/feed/ 4 IE Tester, probar tus páginas en múltiples versiones de Internet Explorer en una sola ventana http://www.webmasterlibre.com/2009/09/28/ie-tester-probar-tus-paginas-en-multiples-versiones-de-internet-explorer-en-una-sola-ventana/ http://www.webmasterlibre.com/2009/09/28/ie-tester-probar-tus-paginas-en-multiples-versiones-de-internet-explorer-en-una-sola-ventana/#comments Mon, 28 Sep 2009 19:34:59 +0000 Alma Fernández http://www.webmasterlibre.com/?p=2344 ietester-0.3

En este blog creo que, de tanto en cuanto, toca hablar de algo que nos permita probar nuestros sitios en IE o no rompernos los cuernos más de lo estrictamente necesario ¿por qué será?

Esta semana descubro vía Genbeta una utilidad que nos permitirá probar nuestros sitios contra múltiples versiones de Internet Explorer en una misma ventana, dividida en pestañas.

La aplicación se llama IETester y, como digo, nos ayudará a abrir nuestros sitios en varias versiones de Explorer simultáneamente. El programa está en fase alfa así que puede que de vez en cuando se rompa, no obstante cada pestaña funciona como un proceso independiente de las demás así que si se rompe en una de ellas las demás no nos dejarán tirados.

Para funcionar, IE Tester requiere una copia de Windows con IE7+ instalado.

IE Tester: http://www.my-debugbar.com/wiki/IETester/HomePage

Otras entradas que pueden interesarte:

¿Quieres hasta 6 meses de hosting gratis? Utiliza el cupón RCwebmasterlibre al contratar cualquier plan con RedCoruna - más información


IE Tester, probar tus páginas en múltiples versiones de Internet Explorer en una sola ventana was first posted on septiembre 28, 2009 at 9:34 pm.
]]> http://www.webmasterlibre.com/2009/09/28/ie-tester-probar-tus-paginas-en-multiples-versiones-de-internet-explorer-en-una-sola-ventana/feed/ 5 IxEdit, diseño de interacción al vuelo http://www.webmasterlibre.com/2009/09/22/ixedit-diseno-de-interaccion-al-vuelo/ http://www.webmasterlibre.com/2009/09/22/ixedit-diseno-de-interaccion-al-vuelo/#comments Tue, 22 Sep 2009 20:04:57 +0000 Alma Fernández http://www.webmasterlibre.com/?p=2336 ixedit

Una de las fases que más tiempo pueden llevarnos del diseño de una aplicación para web es la de comprobar las interacciones con el usuario y los efectos que empleamos.

Hay muchas cosas que sobre el papel parecen fantásticas pero una vez en marcha no funcionan y para comprobarlo, generalmente, hace falta meterse a picar código y hacer pruebas.

IxEdit es un cómodo editor escrito en javascript y que irá embebido en tus prototipos. Con él cualquiera, con un mínimo de conocimiento, podrá ir probando diferentes comportamientos y efectos al vuelo.

IxEdit genera código javascript automáticamente con los parámetros que especifiques y se apoya en jQuery. Además podrás almacenar tus prototipos en una base de datos local con Google Gears.

IxEdit: http://www.ixedit.com/

Vía Criterion

Otras entradas que pueden interesarte:

¿Quieres hasta 6 meses de hosting gratis? Utiliza el cupón RCwebmasterlibre al contratar cualquier plan con RedCoruna - más información


IxEdit, diseño de interacción al vuelo was first posted on septiembre 22, 2009 at 10:04 pm.
]]> http://www.webmasterlibre.com/2009/09/22/ixedit-diseno-de-interaccion-al-vuelo/feed/ 0 Javascript Framework Matrix te ayuda a decidirte por un framework javascript http://www.webmasterlibre.com/2009/09/14/javascript-framework-matrix-te-ayuda-a-decidirte-por-un-framework-javascript/ http://www.webmasterlibre.com/2009/09/14/javascript-framework-matrix-te-ayuda-a-decidirte-por-un-framework-javascript/#comments Mon, 14 Sep 2009 21:21:28 +0000 Alma Fernández http://www.webmasterlibre.com/?p=2325 Java Script Framework Matrix

En los últimos tiempos han proliferado extraordinariamente los frameworks, sobre todo los destinados a facilitarnos la vida con el javascript.

Que haya múltiples alternativas siempre es positivo para nosotros al ofrecernos diversas posibilidades y funcionalidades, pero mantenerse al tanto de todas y escoger la mejor para nuestros proyectos es, en general, algo complicado. Supongo que, como yo, la mayoría tenemos un framework preferido y solemos recurrir a él.

Javascript Framework Matrix te ayudará a conocer otras opciones, permitiéndote compararlas de una forma cómoda y sencilla para que escojas la mejor herramienta para cada proyecto.

Javascript Framework Matrix: http://matthiasschuetz.com/javascript-framework-matrix/

Vía Anieto2k

Otras entradas que pueden interesarte:

¿Quieres hasta 6 meses de hosting gratis? Utiliza el cupón RCwebmasterlibre al contratar cualquier plan con RedCoruna - más información


Javascript Framework Matrix te ayuda a decidirte por un framework javascript was first posted on septiembre 14, 2009 at 11:21 pm.
]]> http://www.webmasterlibre.com/2009/09/14/javascript-framework-matrix-te-ayuda-a-decidirte-por-un-framework-javascript/feed/ 1 Subida múltiple de ficheros con barra de progreso con jQuery http://www.webmasterlibre.com/2009/09/08/subida-multiple-de-ficheros-con-barra-de-progreso-con-jquery/ http://www.webmasterlibre.com/2009/09/08/subida-multiple-de-ficheros-con-barra-de-progreso-con-jquery/#comments Tue, 08 Sep 2009 21:36:42 +0000 Alma Fernández http://www.webmasterlibre.com/?p=2317 multiple-file-upload-with-progress-bar

Los inputs de tipo file son un asco, no se les puede dar estilo sin recurrir a javascript y sólo nos permiten subir un fichero de cada vez.

Si estás buscando una forma de conseguir que tus usuarios puedan seleccionar múltiples ficheros usando las teclas control y mayúsculas para escogerlos de su disco duro y, además, te gustaría mostrarles una barra de progreso que les mantenga informados en todo momento de como va su subida atento al tutorial que han publicado en Web Developer Plus.

En él podrás aprender a utilizar jQuery y el plugin SWFUpload para crearlo. El tutorial recorre todos los aspectos que puedes necesitar conocer desde el HTML y CSS a todo el Javascript. Además, por si no te ves con ganas de escribir tu mismo todo el código podrás descargártelo directamente.

Multiple FIle Upload with Progress Bar using jQuery

Otras entradas que pueden interesarte:

¿Quieres hasta 6 meses de hosting gratis? Utiliza el cupón RCwebmasterlibre al contratar cualquier plan con RedCoruna - más información


Subida múltiple de ficheros con barra de progreso con jQuery was first posted on septiembre 8, 2009 at 11:36 pm.
]]> http://www.webmasterlibre.com/2009/09/08/subida-multiple-de-ficheros-con-barra-de-progreso-con-jquery/feed/ 0