Tutoriales

// Artículos archivados

Minijs: Colección de plugins jQuery escritos en CoffeeScript

Captura-de-pantalla-2012-05-17-a-las-17.14.51

Minjs es un recurso Open Source que recoge varios plugins jQuery escritos en CoffeeScript. Estos plugins se pueden utilizar en cantidad de aplicaciones o herramientas web para añadir controles deslizantes, información sobre herramientas, notificaciones e integración con twitter y contadores. Esta desarrollados pensando en la simplicidad de uso con tan sólo añadir unos cuantos parámetros que necesitan para funcionar.

Leer más

Componentes minimalistas en Javascript con min.js

Captura-de-pantalla-2012-05-16-a-las-18.20.03

min.js es una pequeña librería Javascript que contiene un conjunto de componentes independientes basado en jQuery con un toque minimalista y muy funcional. Actualmente consta de 3 componentes: un sencillo formulario, una tabla de datos y un calendario … longtable representa una tabla que permite manejar gran cantidad de datos con muchas filas. Se puede añadir un número de páginas y añadir funciones para consultar cierta página determinada. drcal por su parte ofrece un marco simple de calendario que permite interactuar sobre los días, meses y años. Cuenta con varias funciones listas para usar en el.

Leer más

Carga de páginas web con botones sociales: Socialite.js

botones redes sociales con javascript

A día de hoy una de las principales cuestiones sobre la mejora de un sitio web es la carga de la página, así es como viene contemplado en Panda de google y una de las principales consejos en SEO. El uso de redes sociales es muy habitual en un sitio web ya que permite compartir el contenido, pero esto puede ralentizar en gran medida la carga de tu página. Socialite.js es un proyecto de código libre que viene para mejorar esta situación. Se trata de una biblioteca Javascript que te permitirá tener mayor control sobre estos botones sociales … La biblioteca pesa tan sólo 2 kb minificada, por lo que se puede añadir directamente a un sitio web. Es independiente...

Leer más

Comprueba la compatibilidad CSS de navegadores web con Browser Support

Captura-de-pantalla-2012-05-11-a-las-16.46.38

El uso de CSS3 no está tan extendido como se querría debido a la incompatibilidad de las reglas de este estándar en los principales navegadores web, pero también es cierto que estos se están modernizando, por ejemplo se ha hecho mucho incapié en mejorar Internet Explorer para que cumpla con el estándar de CSS3, con mejor o peor resultado. Browser Support es una gran fuente de recursos para averiguar qué propiedades CSS3 son compatibles con los navegadores web principales como son: Google Chrome, Firefox, internet Explorer, Opera y Safari. Permite realizar una búsqueda mostrando todas las propiedades y aporta los resultados de los principales navegadores. También puedes seleccionar cada navegador para comprobar las propiedades admitidas por ese navegador.

Leer más

Ajax Star Rating: Completo sistema de votaciones para tu sitio web

Captura-de-pantalla-2012-05-09-a-las-19.21.39

Ajax Star Rating es un completo sistema de votaciones, un script en php de código libre que con apoyo de Ajax permite añadir esta funcionalidad a un sitio web. Cuenta con conexión a bases de datos MySQL para recoger los datos y se puede dar estilo a su interfaz mediante el uso de CSS. El apoyo de Ajax es opcionable ya que se puede usar sin el, además este proyecto cuenta con varias plantillas ya diseñadas en CSS para comenzar a usar. Los votos se pueden representar mediante botones de radio, aunque los resultados se muestran siempre como estrellas.

Leer más

Barra de progreso circular en Javascript con jQuery Knob

Captura-de-pantalla-2012-05-08-a-las-17.35.10

Knob demo es un plugin desarrollado en jQuery que muestra una barra de progreso circular que seguramente ya habrás visto en aplicaciones móviles antes. Se usa como control de volumen o como indicadores de descarga y de aplicaciones. El plugin funciona mediante la transformación de los campos de entrada dados según valores definidos en sus atributos, además se puede añadir un valor para cambiar el valor directamente … Los valores se pueden definir estableciendo un mínimo y un máximo entre los que se moverá el circulo con la animación. También se podrán modificar otros datos como el color inicial de carga por defecto y también se puede usar en modo de sólo lectura para visualizar un estado, una descarga por...

Leer más

Crear sombras dinámicas con jQuery y el uso del ratón [Real Shadow]

Captura-de-pantalla-2012-04-30-a-las-19.40.51

jQuery permite añadir efectos a los objetos clásicos en HTML como es el caso de Real Shadow, un fantástico plugin en jQuery que añade sombras realistas y que reaccionan al movimiento del ratón. Este plugin funciona por la orientación de cualquier número de elementos para manipular el valor de la sombra de cada elemento con CSS. El resultado es realmente bueno.

Leer más

Diferentes efectos de Scroll con uso de CSS3 [stroll.js]

Captura-de-pantalla-2012-04-30-a-las-10.08.50

hakim.se desarrollador web ha creado un conjunto de efectos de scroll mediante el uso único de CSS3. El experimento consigue mostrar efectos CURL, de olas, efecto flip o de vuelo … además de mostrarse de forma fluida. Tan sólo utiliza algo de javascript para cambiar las clases de los elementos …

Leer más

Añade soporte de gestos táctiles a tu sitio web con Hammer.js

Captura-de-pantalla-2012-03-26-a-las-13.10.10

Hammer.js es una librería en Javascript que permite añadir soporte para gestos táctiles a cualquier sitio web para que los usuarios interactuen con los contenidos de forma dinámica desde cualquier dispositivo multitouch. Esta librería sólo pesa 2 kb por lo que no afectará al rendimiento general de tu página y añade funciones como clic, doble toque, arrastrar y soltar elementos y mucho más …

Leer más

Consigue un efecto Blur en cualquier elemento web con blur.js

Captura-de-pantalla-2012-03-23-a-las-14.05.12

Seguramente conoces el efecto blur en el que una imagen o elemento consigue difuminarse, ahora puedes aplicarlo a cualquier elemento en una página web gracias a blur.js, una librería javascript que te permite aplicarlo de forma cómoda. Este plugin jQuery produce elementos pseudo-transparentes borrosos sobre otros elementos.

Leer más

Upload de archivos con jQuery dinámico y flexible

Captura-de-pantalla-2012-03-20-a-las-12.52.08

Seguramente habrás hecho uso muchas veces de código PHP para construir un upload de archivos al servidor, ahora te propongo una nueva forma de hacerlo en jQuery con este fantástico plugin. jQuery File Upload es un impresionante plugin que permite hacer fácil la carga de archivos …

Leer más

Generador de imágenes Sprites CSS con SpritePad

Captura-de-pantalla-2012-03-14-a-las-20.08.55

Ya hemos comentado otras veces los beneficios de añadir sprites de imágenes CSS al diseño de tu página web. La principal diferencia al cargar una página con 5 imágenes por separado e incluidas en un archivo CSS al cargarlos de una sola vez también con CSS es que el navegador sólo tiene que hacer una petición http en lugar de 5  y esto aumenta el rendimiento general de un sitio. SpritePad es una buena solución para implementar sprites en tu página, se trata de una aplicación de código libre y online que te permite tratar con estas imágenes.

Leer más

Efectos de imagen Hover en jQuery con Adipoli

Captura-de-pantalla-2012-03-08-a-las-11.36.54

Seguramente ya has trabajado con la propiedad Hover en CSS3 permitiendo añadir efectos en función de otras propiedades, ahora por qué no hacerlo en jQuery, mucho más dinámico y flexible para tu página. Adipoli te ofrece multitud de opciones parra configurar un buen efecto Hover para tus imágenes …

Leer más

Librería Javascript para la creación de gráfica en el tiempo [Morri.js]

Captura-de-pantalla-2012-02-29-a-las-18.00.06

Morri.js es una sencilla librería escrita en jQuery + Raphaël que permite la creación de gráficas en el tiempo, especialmente indicado para analizar datos. Es muy fácil de usar y tiene una API de desarrollo para configurarla en cualquier sitio web. Permite configurar los datos que se mostrarán, el color de las etiquetas, ancho de línea y algunos ajustes más.

Leer más

intype, sencillo pero potente editor de código para windows

Captura-de-pantalla-2012-02-24-a-las-21.04.24

Su buscas por un editor de código sencillo pero potente para tu pc intype es una buena opción. Se muestra muy sencillo a través de una simple ventana con navegador de archivos a la izquierda. Aunque cuenta con funciones bastante completas para este tipo de editores, las vemos tras el salto …

Leer más

Consigue la tonalidad de color exacta con Colllor

colllor

Para conseguir un esquema de color más consistente se pueden usar las herramientas de Adobe, aunque también puedes recurrir a aplicaciones online como la que te proponemos hoy. Colllor es una aplicación web de código abierto y libre de usar con la que puedes conseguir la gama completa de un color exacto, tanto los tonos más suaves o claros como los más fuertes u oscuros. Con esta aplicación descubrirás fácilmente los matices, tonos y también colores similares así como mezclar colores, es bastante completo y como digo un perfecto sustituto de las herramientas Adobe, también más rápido de conseguir.

Leer más