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://www.anthonycalzadilla.com/
css3-ATAT/

http://tutorialzine.com/2009/11/
hovering-gallery-css3-jquery/
Scroll Parallax – Sitios de 1 página

http://www.redirectdigital.com.br/ http://www.hyundai-veloster.eu/
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-scale
https://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?