1. Diseño web con jQuery
Miguel Angel Alvarez
DesarrolloWeb.com
@alvarezmiguelan

2. 1) Tendencias diseño 2012
2) Recursos jQuery en el diseño web
3) Casos prácticos de uso

4. zzzzz

6. jQuery es la esencia de la vida

8. Diseño según estándares

9. Grids fluidos

10. Menos Flash, hover, pixel perfect
Más Responsive Design

11. Desplazamiento horizontal
http://www.weshootbottles.com/
http://deanoakley.com/
http://vanityclaire.com/

12. Aplicaciones HTML5 para
dispositivos móviles

13. Animaciones CSS3
http://www.anthonycalzadilla.com/
css3-ATAT/
http://tutorialzine.com/2009/11/
hovering-gallery-css3-jquery/

14. Scroll Parallax – Sitios de 1 página
http://www.redirectdigital.com.br/ http://www.hyundai-veloster.eu/

15. Interfaces enriquecidas

16. Diseños con componentes 3D

17. Slides – presentación de diapositivas

18. Infografías

19. Aplicaciones en el navegador

20. Tipografías

21. 2) Recursos jQuery en el diseño web
Diseño
Programación

22. 2) Recursos jQuery en el diseño web
Interacción + comportamientos

23. 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/

24. Animaciones CSS3
http://transformjs.strobeapp.com/
http://ricostacruz.com/jquery.transit/

25. Animaciones “cargando”
CSS3 + jQuery
http://fgnass.github.com/spin.js/

26. Interfaces de usuario para apps
http://jqueryui.com
http://www.kendoui.com/
http://wijmo.com/

27. Formularios, campos mejorados,
validación, ajax, etc.
http://demos.kendoui.com/web/validator
http://jquery.malsup.com/form/
http://textextjs.com/

28. Slides - Presentaciones
http://slidesjs.com/
http://nivo.dev7studios.com/
http://thiagosf.net/projects/jquery/skitter/
http://www.slidedeck.com/
http://buildinternet.com/project/supersized/

29. Efectos 3D
http://transformjs.strobeapp.com/
http://hakim.se/projects/reveal-js
http://lab.smashup.it/flip
http://www.zachstronaut.com/projects/rotate3di/

30. Tipografías
http://letteringjs.com/
http://fittextjs.com/
http://workshop.rs/2010/01/jqisotext-jquery-text-effect-plugin/

31. 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/

32. 3) Casos de uso

33. http://www.intacto10years.com/

34. 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

35. http://www.reverenddanger.com

36. 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

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

38. http://www.weareempire.co.uk/
jQuery
jQuery Carousel
http://thomaslanciaux.pro/jquery/jquery_carousel.htm
Easing
TwitterJS
http://code.google.com/p/twitterjs/

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

40. http://www.redirectdigital.com.br/
jQuery
ScrollTo
jSizes
http://www.bramstein.com/projects/jsizes/

41. ¿Diseño?