Diseño web con jQuery

Miguel Angel Alvarez

DesarrolloWeb.com

@alvarezmiguelan

1) Tendencias diseño 2012

2) Recursos jQuery en el diseño web

3) Casos prácticos de uso

zzzzz

jQuery es la esencia de la vida

Diseño según estándares

Grids fluidos

Menos Flash, hover, pixel perfect

Más Responsive Design

Desplazamiento horizontal

http://www.weshootbottles.com/

http://deanoakley.com/

http://vanityclaire.com/

Aplicaciones HTML5 para

dispositivos móviles

Animaciones CSS3

http://tutorialzine.com/2009/11/hovering-gallery-css3-jquery/

http://www.anthonycalzadilla.com/css3-ATAT/

Scroll Parallax – Sitios de 1 página

http://www.hyundai-veloster.eu/http://www.redirectdigital.com.br/

Interfaces enriquecidas

Diseños con componentes 3D

Slides – presentación de diapositivas

Infografías

Aplicaciones en el navegador

Tipografías

2) Recursos jQuery en el diseño web

Diseño

Programación

2) Recursos jQuery en el diseño web

Interacción + comportamientos

Menús dinámicos, ¿Solo CSS3?

http://css3menu.com/

http://codecanyon.net/item/menu-with-css3-effects-and-notification-bubbles/1147974

http://net.tutsplus.com/tutorials/html-css-techniques/how-to-create-a-drop-down-nav-

menu-with-html5-css3-and-jquery/

Animaciones CSS3

http://transformjs.strobeapp.com/

http://ricostacruz.com/jquery.transit/

Animaciones “cargando”

CSS3 + jQuery

http://fgnass.github.com/spin.js/

Interfaces de usuario para apps

http://jqueryui.com

http://www.kendoui.com/

http://wijmo.com/

Formularios, campos mejorados,

validación, ajax, etc.

http://demos.kendoui.com/web/validator

http://jquery.malsup.com/form/

http://textextjs.com/

Slides - Presentaciones

http://slidesjs.com/

http://nivo.dev7studios.com/

http://thiagosf.net/projects/jquery/skitter/

http://www.slidedeck.com/

http://buildinternet.com/project/supersized/

Efectos 3D

http://transformjs.strobeapp.com/

http://hakim.se/projects/reveal-js

http://lab.smashup.it/flip

http://www.zachstronaut.com/projects/rotate3di/

Tipografías

http://letteringjs.com/

http://fittextjs.com/

http://workshop.rs/2010/01/jqisotext-jquery-text-effect-plugin/

Scroll Parallax

http://jonraasch.com/blog/scrolling-parallax-jquery-plugin

http://www.davecranwell.com/content/jquery-scroll-parallax-plugin

http://webdev.stephband.info/parallax.html

https://github.com/imakewebthings/jquery-waypoints/

3) Casos de uso

http://www.intacto10years.com/

http://www.intacto10years.com/

jQuery

QueryLoader jQuery Plugin

https://github.com/Gaya/QueryLoader2

scrollTo jQuery Plugin

http://flesler.blogspot.com/2007/10/jqueryscrollto.html

scrolling Paralax jQuery Plugin

http://jonraasch.com/blog/scrolling-parallax-jquery-plugin

http://www.reverenddanger.com

http://www.reverenddanger.com

jQuery, Modernizr, jQueryUI, Easing

Flip jQuery Plugin

jquery-animate-css-rotate-scalehttps://github.com/zachstronaut/jquery-animate-css-rotate-scale

scrollTo

jQuery Waypoints

https://github.com/imakewebthings/jquery-waypoints/

Typekit

http://www.weareempire.co.uk/

http://www.weareempire.co.uk/

jQuery

jQuery Carousel

http://thomaslanciaux.pro/jquery/jquery_carousel.htm

Easing

TwitterJS

http://code.google.com/p/twitterjs/

http://www.redirectdigital.com.br/

http://www.redirectdigital.com.br/

jQuery

ScrollTo

jSizes

http://www.bramstein.com/projects/jsizes/

¿Diseño?