Frogx.Three » Javascript... http://www.frogx3.com Blog de diseño con recursos para diseño y desarrollo web - Tutoriales, tips, snippets, iconos, recursos, plantillas Thu, 09 Feb 2012 20:00:11 +0000 en hourly 1 http://wordpress.org/?v=3.3.1 45 Diseños web utilizando efectos parallax http://www.frogx3.com/2012/02/01/45-disenos-web-utilizando-efectos-parallax/ http://www.frogx3.com/2012/02/01/45-disenos-web-utilizando-efectos-parallax/#comments Wed, 01 Feb 2012 15:00:04 +0000 Jorge http://www.frogx3.com/?p=11914 Que les parece esta increíble recopilación de 45 diseños web utilizando efectos parallax, los efectos parallax son uno de los efectos mas atractivos que podemos lograr utilizando JavaScript, una de las librerías que nos facilitan esto es jQuery, y es que los diseños con efecto Parallax aplicados de forma creativa pueden tener increíbles resultados en diseño web.

Un script de MooTools muy bueno para lograr este efecto es mParallax y por el otro lado para jQuery tenemos jParallax, se rompieron la cabeza con el nombre.

LivingWord

diseños web efecto parallax 1 45 Diseños web utilizando efectos parallax

Siebennull

diseños web efecto parallax 2 45 Diseños web utilizando efectos parallax

Moods of Norway

diseños web efecto parallax 3 45 Diseños web utilizando efectos parallax

Head 2 Hearth Us

diseños web efecto parallax 4 45 Diseños web utilizando efectos parallax

Tennessee Trails & Byways

diseños web efecto parallax 5 45 Diseños web utilizando efectos parallax

Enlace: Design Resource Box

]]> http://www.frogx3.com/2012/02/01/45-disenos-web-utilizando-efectos-parallax/feed/ 1 15 Galerias de Imagenes para jQuery http://www.frogx3.com/2012/01/26/15-galerias-imagenes-jquery/ http://www.frogx3.com/2012/01/26/15-galerias-imagenes-jquery/#comments Thu, 26 Jan 2012 12:00:19 +0000 Jorge http://www.frogx3.com/?p=11668 Quienes esten dedicados a diseño web seguro mas de una vez hayan tenido la necesidad de emplear galerias de imagenes con efectos de slideshows, la verdad son muy vistosos y le dan un estilo bastante elegante a los sitios claro si se consideran dentro del diseño y se adapta correctamente, una de las librerías mas conocidas en Internet es jQuery y utilizando como base muchos son los desarrollos de galerias de imagenes jQuery las que hay en Internet, así que para ahorrarles un poco la búsqueda vamos a recomendarles algunas.

La recopilación fue hecha en Smashing Hub y contiene un total de 15 excelentes scripts jQuery para galerías de imagenes, como siempre les comparto algunos y al final el enlace para descargar todas.

Automatic Image Montage

Demo | Download

galerias de imagenes jQuery 1 15 Galerias de Imagenes para jQuery

Restaurant Website and Gallery template

Demo | Download

galerias de imagenes jQuery 4 15 Galerias de Imagenes para jQuery

Grid Navigation Effects

Demo | Download

galerias de imagenes jQuery 3 15 Galerias de Imagenes para jQuery

Sliding Background Image Menu

Demo | Download

galerias de imagenes jQuery 2 15 Galerias de Imagenes para jQuery

Enlace: Smashing Hub

]]> http://www.frogx3.com/2012/01/26/15-galerias-imagenes-jquery/feed/ 1 Video Tutorial: como hacer una extensión para Google Chrome http://www.frogx3.com/2011/11/22/video-tutorial-hacer-una-extension-google-chrome/ http://www.frogx3.com/2011/11/22/video-tutorial-hacer-una-extension-google-chrome/#comments Tue, 22 Nov 2011 22:13:15 +0000 Jorge http://www.frogx3.com/?p=10163 video tutorial como crear google chrome extension Video Tutorial: como hacer una extensión para Google Chrome

Ya que hemos publicado la primera extensión de Frogx.Three para el navegador de Google en la Chrome Store queremos compartir con ustedes un poquito de lo que hemos aprendido durante su desarrollo, fue algo muy bueno leer tanto y poner en practica algunos conocimientos que ya no utilizabasmos tanto debido al uso de Frameworks, bueno se trata de un video tutorial sobre como crear una extensión para Google Chrome.

Es algo muy sencillo y que muestra lo mas basico para crear una extensión para Google Chrome, también les dejamos los enlaces a su documentación y codigo que deberían utilizar para su creación, espero todo esto sea muy útil para ustedes.

Les pedimos una disculpa por el audio, es algo en lo que estamos trabajando e iremos mejorando.

Enlace: Código Manifest.json | Panel de Desarrolladores | Documentación

]]> http://www.frogx3.com/2011/11/22/video-tutorial-hacer-una-extension-google-chrome/feed/ 2 jQuery: Increíble slider con efectos, Nivo Slider http://www.frogx3.com/2010/12/13/jquery-increible-slider-con-efectos-nivo-slider/ http://www.frogx3.com/2010/12/13/jquery-increible-slider-con-efectos-nivo-slider/#comments Mon, 13 Dec 2010 08:44:09 +0000 Jorge http://www.frogx3.com/?p=7544 amazing jquery slider jQuery: Increíble slider con efectos, Nivo Slider

Nivo Slider es una excelente opción para utilizar sliders en tu sitio web, este fue creado utilizando jQuery como base y es realmente bueno, una de sus principales características es que tiene efectos entre transiciones como si fuera un clásico slider en Flash.

En fin para los interesados en este increíble slider con efectos aquí les dejo la lista de características y los enlaces para descargar y demos al final del post.

Características:

  • 9 efectos de transiciones
  • Simple y valido en HTML & CSS
  • Control de navegación de imagenes
  • Version comprimida de 10kb
  • Soporta enlaces en imagenes
  • Permite navegación utilizando el teclado
  • HTML Captions
  • Gratis y de libre uso, bajo MIT license

Enlaces: Descargar | Demos

]]> http://www.frogx3.com/2010/12/13/jquery-increible-slider-con-efectos-nivo-slider/feed/ 1 14 galerias y slideshows usando CSS y JavaScript http://www.frogx3.com/2010/04/23/14-galerias-y-slideshows-usando-css-y-javascript/ http://www.frogx3.com/2010/04/23/14-galerias-y-slideshows-usando-css-y-javascript/#comments Fri, 23 Apr 2010 12:35:07 +0000 Jorge http://www.frogx3.com/?p=6666 gayadesign 600x193 14 galerias y slideshows usando CSS y JavaScript

Una de las cosas mas utilizadas ultimamente en sitios de empresas son los ya clasicos Slideshows ya que permiten exponer de una manera creativa e impactante productos o servicios con imágenes atractivas, en la siguiente recopilación se muestran un total de 14 galerias y slideshows muy buenos usando CSS y JavaScript.

Estos slideshows javascript no son de alguna librería en especial, la lista incluye tanto Slideshows jQuery como MooTools, ojala les sean útil solo tienen que seguir el enlace.

Enlace: 14 most sexy galleries and slideshows using javascript and css

]]> http://www.frogx3.com/2010/04/23/14-galerias-y-slideshows-usando-css-y-javascript/feed/ 3 30 jQuery plugins inspirados en Twitter y Facebook http://www.frogx3.com/2010/02/17/30-jquery-plugins-inspirados-en-twitter-y-facebook/ http://www.frogx3.com/2010/02/17/30-jquery-plugins-inspirados-en-twitter-y-facebook/#comments Wed, 17 Feb 2010 10:27:59 +0000 Jorge http://www.frogx3.com/?p=6521 Sin duda jQuery es una gran libreria Javascript con enorme potencial y popularidad, personalmente pienso que MooTools tiene mas ventajas en cuanto a programación y potencia pero algo claro es que la cantidad de tutoriales jQuery y plugins para jQuery existentes en la red es infinitamente superior a la de MooTools, en psdeluxe colgandose de esto recopilaron los 30 mejores jQuery plugins inspirados en Twitter y Facebook, vale la pena checarlos igual y les sirve mas de uno.

Enlace: 30 best jquery plugins inspired from twitter and facebook

]]> http://www.frogx3.com/2010/02/17/30-jquery-plugins-inspirados-en-twitter-y-facebook/feed/ 1 Gráficas para estadísticas con JavaScript, HighCharts http://www.frogx3.com/2010/01/27/graficas-para-estadisticas-con-javascript-highcharts/ http://www.frogx3.com/2010/01/27/graficas-para-estadisticas-con-javascript-highcharts/#comments Wed, 27 Jan 2010 15:19:32 +0000 Jorge http://www.frogx3.com/?p=6465 Captura de pantalla 2010 01 27 a las 14.22.44 600x254 Gráficas para estadísticas con JavaScript, HighCharts

HightChart es una excelente librería JavaScript que te permite integrar en tu sitio web gráficas de estadísticas en diferentes formatos, es compatible con todos los navegadores y muy agil y facil de utilizar.

El completamente gratuita y para uso libre en proyectos no comerciales, maneja una sintaxis de configuración muy sencilla y muestra tooltips para información de los detalles, ofrece la posibilidad de manejar eventos y gráficas multinivel, maneja canvas y utiliza Ajax para cargar la información que alimenta las gráficas.

Entre las diferentes opciones de gráficas para estadísticas que puedes presentar con HighCharts, están:

  • Lineal
  • Spline
  • Areas
  • Areaspline
  • Columnas
  • Barras
  • Pastel

Enlace: HighCharts

]]> http://www.frogx3.com/2010/01/27/graficas-para-estadisticas-con-javascript-highcharts/feed/ 5 Cheat Sheet para jQuery http://www.frogx3.com/2009/10/15/cheat-sheet-para-jquery/ http://www.frogx3.com/2009/10/15/cheat-sheet-para-jquery/#comments Thu, 15 Oct 2009 08:21:35 +0000 Jorge http://www.frogx3.com/?p=6051 jQuery es uno de los frameworks de javascript mas famosos de la red y no es para menos, es una excelente opción para integrar y mejorar la funcionalidad y usabilidad de nuestros sitios web, si aun no lo haz utilizado te estas perdiendo de una gran ayuda, si quieres empezar a utilizarlo te vendria bien este documento de jquery que lista todas las funciones utiles de este framework javascript, espero les sea de utilidad este cheat sheet de jquery.

Enlaces: jQuery Visual Cheat Sheet |    Descargar Cheat Sheet jQuery

]]> http://www.frogx3.com/2009/10/15/cheat-sheet-para-jquery/feed/ 2 25 excelentes tutoriales jQuery http://www.frogx3.com/2009/09/17/25-excelentes-tutoriales-jquery/ http://www.frogx3.com/2009/09/17/25-excelentes-tutoriales-jquery/#comments Thu, 17 Sep 2009 14:30:51 +0000 Jorge http://www.frogx3.com/?p=5981 Tutorial Lounge ha publicado una interesante colección de tutoriales jQuery que te servirían de mucho para explotar al máximo este excelente framework javascript, en la lista encontraras tutoriales jquery para formularios, scrollbars, menus de navegación, etc…

Enlace: 25+ paramount jquery tutorials

]]> http://www.frogx3.com/2009/09/17/25-excelentes-tutoriales-jquery/feed/ 1 Mejores ejemplos de menús de navegación con JavaScript http://www.frogx3.com/2009/07/14/mejores-ejemplos-de-menus-de-navegacion-con-javascript/ http://www.frogx3.com/2009/07/14/mejores-ejemplos-de-menus-de-navegacion-con-javascript/#comments Tue, 14 Jul 2009 13:08:33 +0000 Jorge http://www.frogx3.com/?p=5837 El sitio fresherwisdom ha recopilado algunos de los mejores ejemplos de menus de navegación que podras encontrar en sitios web, cabe resaltar que la mayoria de estos diseños de menus y lo creativo que pueden llegar a ser estan implementados en sitios web y portafolios de diseñadores o softwares para diseño web.

Es muy raro que empresas serias acepten este tipo de diseños, claro son empresas antiguas, las empresas jovenes les gustan las ideas frescas, en fin aquí estan algunas iamgenes y enlaces de estos sitios que poseen estos excelentes diseños de menus que utilizan javascript para mejorar la funcionalidad y diseño.

CheckOutApp

checkout app website navigation Mejores ejemplos de menús de navegación con JavaScript

EricJ

ericj website navigation Mejores ejemplos de menús de navegación con JavaScript

Helmy-Bern

helmy bern website navigation Mejores ejemplos de menús de navegación con JavaScript

Enlace: Best javascript navigation menu examples

]]> http://www.frogx3.com/2009/07/14/mejores-ejemplos-de-menus-de-navegacion-con-javascript/feed/ 2