Frogx Three

Javascript

PhotoSwipe script para galerías de imágenes con soporte de gestos Touch

photoswipe

PhotoSwipe es uno de los mejores scripts JavaScript disponibles en Internet para crear galerías de imágenes para paginas web, es un script completamente gratuito que no tiene dependencias con otros scripts o frameworks, es decir no tendrás necesidad de utilizar jQuery, Mootools ni ningún otro framework, PhotoSwipe ofrece un completo soporte de gestos Touch y MultiTouch que convierte a esta galería de imágenes en un excelente recurso para diseñadores web que ofrezcan diseños de paginas web responsivas con soporte para móviles y tabletas. PhotoSwipe, a su vez utiliza elementos de navegación SVG que se adaptan de forma automática a cualquier resolución sin perdida de calidad, ofrece soporte de navegación con el teclado, otra característica bastante interesante de PhotoSwipe y que la hace diferente a otras opciones disponibles en Internet es su optimización para SEO, ya que tiene un generador de URL’s que permiten ser generadas para cada elementos de tus......

Seguir leyendo 53

Tutorial para crear mockups 3D interactivos con CSS3 y jQuery

3d-animated-mockup-featured-new

Si eres diseñadores sabras lo importante que puede llegar a ser aplicar un poco de animación en una pagina web, y si tus usuarios tiene interacción con eventos de tu sitio para provocar animación mejor, pero y si combinas todo eso y creas formas interactivas para hacer demostraciones que permitan a tus visitantes y interactuar y que tengan un entorno visual agradable, bueno esto seria increíble. Eso es lo que podrás lograr si sigues el siguiente tutorial que estoy compartiendo con ustedes, y que si bien esta en Ingles bien que vale la pena esforzarse un poco en comprenderlo. Este tutorial para diseñadores web te permitirá crear mockups 3D interactivos con CSS3 y jQuery, una combinación que bien utilizada y aprovechada es una bomba, en el enlace que les comparto al final podrán encontrar el tutorial completo que les explica como funciona y como utilizarlos, también podrán descargar los archivos......

Seguir leyendo 21

MixitUp, Plugin jQuery para filtrar y reordenar grids dinámicamente

mixitup

Me encontré un plugin jQuery genial que quiero compartir con ustedes se llama MixitUp y creo que lo aplicare en algún momento al blog, MixitUp es un plugin jQuery que te permite agregar dinamismo al grid de tu pagina web, el plugin te permite filtrar y reordenar bloques en un grid de forma dinámica y con animación agregando un toque visual y bastante interesante a la tu diseño, de tal manera que puedes ofrecer una opción interesante de filtrado de datos con un poco de interacción y animación que harían mas cómoda y agradable la interacción de los usuarios que visitan tu pagina con la información que ellos encuentran en tu sitio. El plugin es gratuito, y lo puedes utilizar sin problemas en cualquiera de tus paginas web, en el sitio hace referencia a una licencia comercial pero esta es solo si tienes intensiones de incluir MixitUp en un plantilla......

Seguir leyendo 51

Script para agregar animaciones a imágenes SVG en tu pagina web

vivus

La semana pasada les hable de un sitio donde podían encontrar un plugin para animar iconos para web, aquellos iconos estaban construidos utilizando imágenes SVG y al menos en aquel sitio los podían integrar de manera sencilla en una pagina web utilizando jQuery, en este nuevo recurso para diseñadores les vengo a compartir Vivus, un script JavaScript para agregar animaciones a imágenes SVG aprovechando la propiedad strokeDashoffset que ofrece CSS3 la cual utiliza el script para crear una animación de dibujo de lineas de las imágenes SVG que estes utilizando en tu pagina web. El script es gratuito y muy, muy pero muy fácil de utilizar, simplemente basta con incluir el script en tu pagina y llamar a la función que se encargara de animar las imágenes SVG que le indiques en cada llamada, les dejo el enlace hacia el sitio oficial de esta librería JavaScript y espero que les sea de......

Seguir leyendo 70

Plugin jQuery para cambiar diseño de elementos de formularios web

Labelauty

Labelauty es un pequeño pero muy útil plugin jQuery para cambiar el diseño de elementos de formularios web, en particular de los elementos Checkbox y los Radio Buttons, que podrán ser muy útiles pero son los elementos más inflexibles para crear diseños de paginas web con formularios que se adapten al diseño, el plugin prácticamente convierte los elementos checkbox y radio buttons en botones seleccionables a los cuales les puedes aplicar diseños mas agradables y que se puedan adaptar a la identidad del sitio sin perder la funcionalidad que estos elementos nos ofrecen. La imagen de abajo te muestra un ejemplo de como utilizar este plugin jQuery para cambiar el diseño de formularios web, el plugin es completamente gratuito y bastante sencillo de aplicar, basta con iniciar el script en el footer o cabecera de tu sitio web para que el diseño de todos los elementos checkbox y radio buttons se......

Seguir leyendo 74

Plugin jQuery para animar iconos para diseños web

livIcons

Hace unos días revisando la documentación de Google Materials vi los efectos de transformación que utilizan en los iconos de sus aplicaciones, efectos bastante interesantes que aprovechan una combinación entre CSS3 y SVG, pero requieren de mucho código CSS, algo que no todos están dispuestos a incluir en sus archivos, buscando un poco me tope con una excelente alternativa, se trata de un plugin jQuery para animar iconos para diseños web. El plugin en cuestión se llama LivIcons que esta combinación entre jQuery, Animaciones CSS y WebFonts, bastante interesante, no se trata de una aplicación que anima los iconos que tienes ya incluidos en tu pagina, el plugin incluye un pack de iconos prediseñados con animaciones de transformación que puedes incluir en tu sitio o utilizar para reemplazar los iconos estaticos que actualmente tengas en tu pagina web. Un excelente recurso para diseñadores web que te permitirá agregar dinamismo a......

Seguir leyendo 51

Efecto de transición elástico con JavaScript

efecto elastico transiciones

Muchas veces en artículos anteriores sobre diseño web he mencionado la importancia de la interactividad y el encanto visual que deberían tener las paginas web para gustar a los usuarios, no se trata solo de la combinación de colores, el movimiento cuenta mucho, pero eso no significa hacer que todo se mueva como antes sucedía con Flash, se trata de volver a los principios del diseño y ha aquella frase que dice “los detalles hacen al diseño”. Eso es algo que podemos lograr con este efecto llamado Wobbly por su creador, se trata de un afecto de transiciones elásticas aplicado a Slideshows de pantalla completa, es un efecto tan sencillo como atractivo que le dará a tu web un toque que la hará diferente de todas las demás, es un script basado en JavaScript y CSS3 bastante sencillo y liviano. Al final podrás encontrar dos enlaces uno hacia el demo donde podrán......

Seguir leyendo 79

Repositorio con los mejores plugins jQuery para diseño web

repositorio plugins jquery

Les invito a navegar por este interesante repositorio de plugins jQuery que me he encontrado en el pude conocer algunos plugins jQuery para diseño web que ni siquiera conocía, todo esta muy bien organizado por categorías según la función principal que estos plugins realicen por ejemplo yo conocí este sitio buscando plugins que me puedan ayudar en el diseño de interfaces web, y he encontrado cosas sencillas pero muy buenas, lo mejor de todo que todos los plugins que encontraras en este repositorio son gratuitos. Estoy seguro que este sitio debe entrar en tu lista de favoritos si eres un diseñador web que le gusta innovar y presentar cosas diferentes en sus diseños, después de todo aquel dicho que dice “el diseño esta en los detalles” no se aplica únicamente al diseño impreso, también se aplicar en el diseño web, y es que muchas veces un detalle de movimiento e......

Seguir leyendo 107

App JavaScript para crear lineas de tiempo con HTML5 y CSS3

timesheet js

Time Sheet JS es una interesante App JavaScript que te facilita crear lineas de tiempo aprovechando la flexibilidad de HTML5 y CSS3, es un script muy fácil de utilizar e integrar en tu pagina web, basta con incluir el script y definir un arreglo en formato JSON con los datos que deseas se desplieguen como parte de la linea de tiempo, definiendo para cada dato una fecha inicial y una fecha inicial así como la información referente a dicho evento. La forma en la que nos permite crear las lineas de tiempo nos permite crear el arreglo de datos y eventos de manera muy sencilla integrando los datos desde una base de datos usando AJAX por ejemplo, no hay mucha documentación sobre la herramienta, solo una pequeña guía que explica como crear tu primera linea de tiempo con Time Sheet, les dejo el ejemplo. Por cierto resaltar que esta librería no......

Seguir leyendo 78

Plugin jQuery para crear diseños web inspirados en Windows 8

grid windows 8 metro

Gridster es un excelente y muy útil plugin jQuery perfecto para diseñadores web que busquen crear diseños de paginas web modernos y fuera de lo común, este plugin hecho con jQuery te facilita la construcción de diseño web inspirados en el sistema de girds o rejillas que utiliza el tema Metro que viene por default en Windows 8, Metro presento un estilo de organización de contenidos y accesos por medio de bloques ordenados de forma aleatoria en diferentes dimensiones encajando perfectamente entre ellos. Gridster también permite agregar eventos drag & drop a estos bloques con la intensión de reordenarlos al arrastrar y provocando un efecto de acomodo automatico entre los bloques, este plugin es completamente gratuito y muy fácil de utilizar en la pagina web oficial podrán descargarlo y ver una serie de ejemplo de uso de Gridster. Enlace para descargar Gridster...

Seguir leyendo 79

Tutorial para crear notificaciones animadas con CSS3

notificaciones css

Fantástico tutorial y códigos CSS3 para crear increíbles diseños de notificaciones con animación para tus diseños de paginas web, en el ejemplo que enlazamos al final verán 12 ejemplos de notificaciones web animadas con muy buen diseño y fáciles de aplicar en tu pagina, algunas utilizan librerías JavaScript para las animaciones y las acciones pero en general se trata de código CSS para generar las animaciones utilizando transiciones y los keyframes, características incluidas en CSS3 y que ya son soportadas por la gran mayoría de los navegadores web modernos. En el segundo enlace encontrarán el enlace para descargar la guiá de instalación y un paquete con los códigos CSS3 y scripts JavaScript para utilizar todos estos diseños de notificaciones animadas para mejorar el diseño de interface de tus paginas web. Enlaces: Demo | Descargar códigos y tutorial...

Seguir leyendo 83

Skippr, sencillo, muy sencillo plugin jQuery para crear slideshows responsivos

Skippr

Skippr es un excelente plugin jQuery para crear slideshows de una forma muy sencilla, el plugin es bastante liviano, simple y promete no cargar de recursos de tu sitio web, solo necesita de un pequeño archivo JS sin archivos CSS, solo unas 10 lines de CSS y listo, otra característica que por su estructura le permite funcionar de esa forma es que es un plugin jQuery slideshow 100% responsivo es decir que se adapta automáticamente a cualquier resolución y dispositivo, y por su puesto lo mejor, es gratuito. Enlace para descargar Skippr Skippr...

Seguir leyendo 97

Famo.us, Framework Javascript para crear diseños de interface atractivos

famous

Famo.us es un excelente framework Javascript especial para crear diseños de interface modernos y muy atractivos, el framework es muy fácil de utilizar e implementar, por supuesto es gratis. En el sitio oficial de Famo.us encontrarán gran cantidad de recursos entre documentación de todas las funciones, ejemplos de diseños de interface hechos con el framework y otros snippets que te facilitaran el trabajo. Enlace para descargar Famo.us...

Seguir leyendo 56

Framer App y librería JS para hacer animaciones web

framerjs

Framer es una App que te permite exportar Assets de archivos PSD y también de diseños hechos en Sketch, guardando por separado las imágenes en formato PNG y generando los archivo HTML, CSS y JS necesarios, para iniciar un proyecto utilizando FramerJS una librería para hacer animaciones web muy sencilla de utilizar y de rápida implementación, los ejemplos que podemos ver en el sitio nos muestran como crear animaciones secuenciales utilizando JavaScript para aplicar las propiedades CSS sin gran dificultad, estoy seguro que cualquier diseñador web con conocimientos básicos de HTML y JavaScript podrá utilizar esta librería y acostumbrar rápidamente. Considero que Framer es una excelente herramienta para diseñadores web sea la aplicación o simplemente la librería JavaScript pueden ser de gran utilidad los diseñadores que deseen aplicar animación a los elementos de sus diseños web. Enlace: Framer...

Seguir leyendo 57

Plugin jQuery para crear galerías web atractivas

plugin jquery

Fotorama es un excelente plugin jQuery para crear galerías web con estilo, es un plugin bastante completo que incluye versión para WordPress, Fotorama es gratis y puede ser personalizado según tus necesidades, en el sitio pueden encontrar toda clase ejemplos para crear galerías de imágenes, galerías de videos, animaciones flash, capas HTML, etc… Fotorama fue diseñado y desarrollador por el diseñador web Artem Polikarpov de Rusia, en fin les recomiendo este excelente plugin para crear paginas web con galerías de fotos atractivas. Enlace para descargar Fotorama...

Seguir leyendo 38

UIKit un interesante Framework para diseñar paginas web

UIKIT

UIKit es una excelente framework para diseñar paginas web, es un alternativa mas que recomendable al famoso Bootstrap, UIKit es un framwork OpenSource que incluye una gran cantidad de componentes para personalizar y armar de una forma rápida nuestra pagina web, incluye archivos CSS base para normalizar el estilo de los elementos, CSS para impresión, plantilla grid basada en el estándar 960 que nos ayudara a crear paginas web responsivas. Es muy fácil de integrar, básicamente tienen que insertar los archivos CSS y según los componentes o addons que deseen agregar algunos archivos JavaScript, les dejo el enlace a la pagina oficial del proyecto donde podrán descargar UIKit gratis y leer toda su documentación. Enlace para descargar UIKit Framework...

Seguir leyendo 74

HybridAuth plugins JS para conectar con redes sociales

boton login facebook

HybridAuth es un excelente plugin JS para conectar con redes sociales a los usuarios de tu sitio, con este plugin tienes todo lo necesario para crear sistemas de registros y acceso para usuarios utilizando las cuentas de sus redes sociales, es muy fácil de implementar, HybridAuth te permite realizar conexiones con Facebook, Twitter, Google+, Instagram, LinkedIn, Foursquare, entre otras redes sociales. El plugin es muy completo y excelente para los programadores web ya que les permitirá ahorrar mucho tiempo en el desarrollo de sus aplicaciones web que necesiten conexión con redes sociales. HybridAuth les ahorrara el trabajo de implementar las API’s que ofrece cada red social para realizar conexiones y también para recibir la información de los perfiles de los usuarios que haga login en tu aplicación utilizando sus cuentas de Facebook, Twitter, etc. Para complementar este recurso les comparto una serie de paquetes de botones e iconos de redes sociales para......

Seguir leyendo 53

Backbone JS framework utilizado por Rdio, Foursquare, WordPress y otros

Backbone js

Backbone JS es el framework JavaScript definitivo para los desarrolladores web que busquen desarrollar aplicaciones web robustas utilizando como base JavaScript, Backbone JS ofrece una enfoque de programación en base a modelos y un mejorado uso de los eventos, ofrece una gran cantidad de funciones que hacen de su API una de las mas robustas para el desarrollo web. Este framework no es uno mas del montón, es utilizado por redes sociales, paginas web importantes y famosas aplicaciones web como Rdio, Foursquare y WordPress.com, en el siguiente enlace pueden ver la lista de proyectos que utilizan este Framework. Backbone JS se integra fácilmente con otros frameworks como jQuery, es una aplicación bastante ligera que no hará mas lenta tu aplicación, optimiza el manejo de datos JSON, trabaja con atributos adicionales en las etiquetas HTML (data-, ng-), en conclusión es una herramienta que todo programador web con experiencia debería tomar en......

Seguir leyendo 38

11 Plugins JS para hacer diseños web responsivos

diseños web responsivos

Les compartimos una serie de excelentes plugins javascript perfectos para hacer diseños web responsivos, esto será de gran utilidad para seguir una de las tendencias de diseño web en 2014 que se trata de crear diseños web adaptables a cualquier plataforma sin importar navegador y mostrando contenido de calidad aprovechando las posibilidades que los diferentes dispositivos ofrecen tanto en imágenes de alta resolución como en interactividad. Plugins JS para hacer diseños web responsivos Adapt.Js Es un alternativa al uso y dependencia de los Media Queries con CSS, que si bien cierto son excelentes aun no son reconocidos por todos los navegadores, lo cual puede causarnos algunos problemas, con Adapt.js eliminamos esa dependencia, también ofrece soporte para la mayoría de los navegadores incluso Internet Explorer, con este plugin podremos identificar el tamaño de la venta o resolución de pantalla de la persona que accede a nuestro sitio de tal modo que sirvamos......

Seguir leyendo 311

jQuery Selectric: script para cambiar diseño de selects en formularios

jQuery Selectric

jQuery Selectric es un excelente script jQuery que permite cambiar diseño de selects o listas de tus formularios HMTL con la combinación de CSS3 y JavaScript, el script es muy fácil de implementar y también de personalizar con hojas de estilo, este script ofrece soporte para diferentes navegadores entre ellos: Firefox Chrome Safari Internet Explorer 7+ Opera En la pagina de demostración de este script podemos ver algunas opciones que nos ofrece jQuery Selectric, como agregar opciones a la lista de forma dinámica, permite ejecutar Callbacks dependiendo del valor de la opción seleccionada, y también ejecutar acciones Ajax para comunicarnos con el servidor y manejar respuestas de forma dinámica, todo esto gracias a jQuery. Enlace para descargar: jQuery Selectric...

Seguir leyendo 37

Pagina 1 de 7123...6...Antiguas »

#Ranascreativas // Últimas imágenes enviadas