Etiqueta: Jquery

jquerycards, más de 1.000 plugins para quien trabaja con jquery

Publicado el

por Juan Diego Polo

jquery

Si programáis con jquery y estáis buscando plugins efectivos, probados y de buena calidad, echad un vistazo en jquerycards.com.

Se trata de una impresionante selección de extensiones que nos ayudan a programar desde un código QR a un sistema que identifica si un elemento de una página web está visible en este momento al usuario, pasando por utilidades de listas, dibujo, animaciones y un larguí­simo etcétera.

La selección está mantenida por Aaron Lumsden, un desarrollador que decidió crear el proyecto hace un año, permitiendo que usuarios de todo el mundo puedan enviar los links a nuevos plugins, extensiones que se revisan para verificar su calidad y buen funcionamiento antes de publicarse en su web.
Continúa leyendo «jquerycards, más de 1.000 plugins para quien trabaja con jquery»

6 opciones para renovar los botones sociales para compartir artí­culos

Publicado el

por Juan David Quiñónez

Ya que tantos sitios cuentan con botones sociales de las redes sociales más populares, y son tantas las opciones para crearlos e integrarlos, resulta útil tener a la mano un listado de recomendaciones para ayudar en la selección. Pues bien, eso es lo que han logrado en Hongkiat, una recopilación de plugins (jQuery y WordPress) relevantes por su óptimo desempeño frente a las opciones que usa la mayorí­a:

1. Sharrre

sharrre
Un plugin para jQuery con el que será posible implementar unos botones sociales altamente personalizables y ligeros, tanto así­ que las herramientas disponibles (API) hacen posible manejar gráficos externos y contadores especiales que usan el número de «compartidas» generadas por cada botón para crear un valor general con su suma.

2. TNW Social Count

tnw social count
Un plugin para WordPress desarrollado en un principio para TheNextWeb.com, otro popular portal de noticias de Internet y tecnologí­a, y disponible ahora de forma gratuita para todos. Los botones son mostrados con su debido contador y unos elegantes iconos estilo flat.
Continúa leyendo «6 opciones para renovar los botones sociales para compartir artí­culos»

Audioplayer.js, plugin jQuery de reproductor de audio adaptable y táctil para sitios web

Publicado el

por Fco. José Hidalgo

Muchos proyectos de sitios web ahora tienen en cuenta que no sólo se ejecutarán en navegadores web de escritorio, sino también en dispositivos móviles con diferentes tamaños de pantalla, y cuya interacción será táctil. Una buena opción a la hora de incorporar un reproductor de audio es contar con AudioPlayer.js, un plugin para jQuery que trae importantes ventajas, ya que es adaptable, permite su uso desde dispositivos téctiles, elegante, y además, apenas ocupa 4 kb.

En su web oficial, indica que reemplaza el elemento con un poco de HTML personalizado, y que con algo de CSS se obtiene un reproductor a medida, sin necesidad de usar imágenes, siendo el CSS el que se encargue de adaptarse según la pantalla donde va a ser visualizada.

Entre las caracterí­sticas se encuentra el que, si el navegador no soporta el elemento audio completamente, o algunos de los archivos de audio ofrecidos, el reproductor se degrada a ser sólo un botón para pausa/reproducción. El plugin acepta muchos de los atributos y etiquetas del elemento audio.

En la página del plugin, se explica los códigos necesarios para su uso e implementación en sitios web, lo que permitirá a aquellos desarrolladores poder integrarlos en sus propios proyectos.

Enlace: Audioplayer.js | Ví­a: WebResourcesDepot

Extensión jQuery para crear menús desplegables con imágenes y descripciones

Publicado el

por Juan Diego Polo

Si trabajáis en el diseño web y queréis darle vida a vuestros menús desplegables, este plugin jQuery ofrece una opción bastante interesante y configurable.

Se trata de ddSlick, capaz de, con pocas lí­neas de código, añadir miniaturas y descripciones en cada una de las opciones ofrecidas en los menús desplegables, transformando los elementos HTML y usando poco css y ningún link externo.

En su página podéis ver algunos ejemplos con diferentes configuraciones, siendo posible ofrecer opciones por defecto, permitir la selección por teclado y otras alternativas que pueden ayudarnos a personalizar el trabajo.

Link: ddSlick | Ví­a webresourcesdepot.com

Relacionado: Introducción a jQuery

pagescroller – Ofrece a tus lectores una forma diferente de navegar por tu web

Publicado el

por Juan Diego Polo

En pagescroller.com tenemos un proyecto que nos permite instalar un código en nuestra web para ofrecer a los visitantes una nueva forma de desplazarnos entre el contenido de una misma página web.

El objetivo es sustituir la barra de desplazamiento vertical con dos botones que podrán ser pulsados para subir y bajar, estando localizados en la sección lateral de la web. También es posible mostrar un menú con enlaces que lleven a zonas especí­ficas de la página, colocándolo tanto en el lateral como en la parte superior.

Dentro del mismo pagescroller.com podemos ver los componentes mencionados en pleno funcionamiento, con un panel de control central que permite configurar su posición.

Gracias Óscar Benito por el enlace.

Sequence – plugin de jQuery para el deslizamiento de contenidos

Publicado el

por Fco. José Hidalgo

Por suerte, en la actualidad contamos con navegadores web modernos que soportan la tecnologí­a web más reciente, lo que nos permite acceder y disfrutar de magní­ficos diseños. Entre otras herramientas, tenemos a jQuery, del cual ya hemos contando algunos de sus plugins para implementar en nuestros sitios web. Ahora no vamos a ser menos y nos vamos a parar en Sequence, un plugin para jQuery que nos permite crear desplazamientos interactivos de contenidos en sitios web.

Basta con acercarnos a sus ejemplos en su sitio web oficial para darnos cuenta de las transiciones, algunas de ellas únicas realizadas en CSS3, que nos pone a nuestra disposición para integrarlo en nuestros sitios web, sin necesidad de programación, soportado por los navegadores web actuales e incluso compatible con los dispositivos táctiles. En caso de accederse desde navegadores web algo ya antiguos, se realizarán degradados también elegantes.

Se trata de una herramienta de código abierto, actualmente en fase beta, y que nos abre un mundo de posibilidades para nuestros sitios web.

Enlace: Sequence | Ví­a: WebResourcesDepot

HTML KickStart – Recursos para quien quiere programar en HTML5, CSS y jQuery

Publicado el

por Juan Diego Polo

Nos presentan ahora HTML KickStart, una colección de elementos diseñados para ahorrarnos tiempo en la creación de nuestro próximo sitio web.

Son menús, botones, etiquetas, tipografí­as, galerí­as, tablas… una colección bastante completa, con iconos incluidos, que puede ser bajada de forma gratuita para analizar el contenido y usarlo en nuestra página.

Bajado más de 20.000 veces, incluye archivos js y hojas de estilo (css) para facilitar el trabajo, con ejemplos funcionando en su página web para conocer las ventajas de su uso.

Link: 99lime.com

Libro gratuito de JQuery

Publicado el

por Fco. José Hidalgo

Si echamos la mirada hacia atrás, observaremos lo mucho que han cambiado las interfaces web, encontrándonos en la actualidad con sitios web más atractivos, dinámicos e interactivos. Parte de la «culpa» la tiene JQuery, una biblioteca en JavaScript, que cualquier desarrollador de hoy dí­a deberá tener al menos los conocimientos mí­nimos.

Si no lo tiene o quien quiera adentrarse en JQuery, puede utilizar el Libro gratuito de JQuery, un libro electrónico online bajo licencia Creative Commons Attribution-Share Alike 3.0, en el que a través de sus 11 capí­tulos, cualquier persona interesada podrá obtener los conceptos necesarios y realizar distintas prácticas para familiarizarse y usar en sus desarrollos de interfaces web a JQuery.

Enlace: Libro gratuito de JQuery

JavaScript para principiantes

Publicado el

por Rodrigo González

En mi último post analizaba la decisión de la Khan Academy de enseñar JavaScript como primer lenguaje de programación en su plataforma de aprendizaje online. Se trata de una elección discutible pero también innovadora, ya que tradicionalmente la iniciación a la programación se ha realizado a través de lenguajes procedimentales como Pascal o C, que a diferencia de JavaScript son lenguajes compilados y no orientados a objetos.
Me comprometí­a también en ese artí­culo a compartir algunos recursos que se encuentran en la red para aprender JavaScript de forma autónoma, así­ que he realizado una valoración de los que considero más relevantes:

Este último mes ya os hemos hablado en wwwhatsnew de Codecademy. Se trata de un proyecto de reciente creación que tiene como objetivo enseñar a programar (desde cero) de forma interactiva. Cuenta para ello con una consola y un editor de código integrados en la propia interfaz web. De momento sólo existe la posibilidad de aprender JavaScript, pero su intención es ampliar la oferta a otros lenguajes de programación como Ruby y Python. Proponen una aprendizaje por etapas en el que hay que finalizar todas las lecciones de un curso para poder comenzar el siguiente. Por ahora está disponible una sección para principiantes que consta de 3 cursos: Getting Started with Programming, Functions in JavaScript y JavaScript Quick Start Guide. Como puede deducirse de los tí­tulos, el material está disponible sólo en inglés. Aunque la interfaz todaví­a algún que otro error (es lógico tratándose de un proyecto poco rodado), la idea es buena y recomiendo su uso para aquellos que no tengan experiencia previa en programación. El mayor inconveniente que le encuentro es que está exclusivamente orientado a la práctica a través de ejercicios, pero no contiene ninguna guí­a o manual de referencia que pueda servir para consultar dudas o repasar lo aprendido. En otras palabras, puede ser muy útil como complemento al aprendizaje de JavaScript, pero es conveniente disponer de otro recurso como base para el mismo. Continúa leyendo «JavaScript para principiantes»

SliderWall – Para presentar galerí­as de imágenes en HTML5, CSS3 y JavaScript

Publicado el

por Juan Diego Polo


Si tenéis pensado incluir una galerí­a e capturas de pantalla, fotografí­as, dibujos o cualquier imagen que los lectores de vuestra web quieran ver de forma elegante y profesional, SliderWall es una buena opción.
Usando HTML5, CSS3 y JavaScript puede usarse también para mostrar artí­culos a partir de un feed, personalizando la estética para que se adapte a cualquier sitio web.
Compatible con todos los navegadores modernos, puede usarse también para crear historias para dispositivos móviles, ya que todos ellos pueden leer el contenido creado con este jQuery slider.
La versión gratuita puede personalizarse, pero incluye una marca de agua que desaparece al adquirir cualquiera de las versiones de pago.