Presentacion diseño web con jquery

6,169 views

Published on

Published in: Technology
0 Comments
6 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
6,169
On SlideShare
0
From Embeds
0
Number of Embeds
3,175
Actions
Shares
0
Downloads
93
Comments
0
Likes
6
Embeds 0
No embeds

No notes for slide

Presentacion diseño web con jquery

  1. 1. Diseño web con jQueryMiguel Angel AlvarezDesarrolloWeb.com@alvarezmiguelan
  2. 2. 1) Tendencias diseño 20122) Recursos jQuery en el diseño web3) Casos prácticos de uso
  3. 3. zzzzz
  4. 4. jQuery es la esencia de la vida
  5. 5. Diseño según estándares
  6. 6. Grids fluidos
  7. 7. Menos Flash, hover, pixel perfectMás Responsive Design
  8. 8. Desplazamiento horizontalhttp://www.weshootbottles.com/http://deanoakley.com/http://vanityclaire.com/
  9. 9. Aplicaciones HTML5 paradispositivos móviles
  10. 10. Animaciones CSS3http://www.anthonycalzadilla.com/css3-ATAT/ http://tutorialzine.com/2009/11/ hovering-gallery-css3-jquery/
  11. 11. Scroll Parallax – Sitios de 1 páginahttp://www.redirectdigital.com.br/ http://www.hyundai-veloster.eu/
  12. 12. Interfaces enriquecidas
  13. 13. Diseños con componentes 3D
  14. 14. Slides – presentación de diapositivas
  15. 15. Infografías
  16. 16. Aplicaciones en el navegador
  17. 17. Tipografías
  18. 18. 2) Recursos jQuery en el diseño webDiseño Programación
  19. 19. 2) Recursos jQuery en el diseño webInteracción + comportamientos
  20. 20. 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/
  21. 21. Animaciones CSS3 http://transformjs.strobeapp.com/ http://ricostacruz.com/jquery.transit/
  22. 22. Animaciones “cargando”CSS3 + jQuery http://fgnass.github.com/spin.js/
  23. 23. Interfaces de usuario para apps http://jqueryui.com http://www.kendoui.com/ http://wijmo.com/
  24. 24. Formularios, campos mejorados,validación, ajax, etc. http://demos.kendoui.com/web/validator http://jquery.malsup.com/form/ http://textextjs.com/
  25. 25. Slides - Presentaciones http://slidesjs.com/ http://nivo.dev7studios.com/ http://thiagosf.net/projects/jquery/skitter/ http://www.slidedeck.com/ http://buildinternet.com/project/supersized/
  26. 26. Efectos 3D http://transformjs.strobeapp.com/ http://hakim.se/projects/reveal-js http://lab.smashup.it/flip http://www.zachstronaut.com/projects/rotate3di/
  27. 27. Tipografías http://letteringjs.com/ http://fittextjs.com/ http://workshop.rs/2010/01/jqisotext-jquery-text-effect-plugin/
  28. 28. 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/
  29. 29. 3) Casos de uso
  30. 30. http://www.intacto10years.com/
  31. 31. http://www.intacto10years.com/jQueryQueryLoader jQuery Pluginhttps://github.com/Gaya/QueryLoader2scrollTo jQuery Pluginhttp://flesler.blogspot.com/2007/10/jqueryscrollto.htmlscrolling Paralax jQuery Pluginhttp://jonraasch.com/blog/scrolling-parallax-jquery-plugin
  32. 32. http://www.reverenddanger.com
  33. 33. http://www.reverenddanger.comjQuery, Modernizr, jQueryUI, EasingFlip jQuery Pluginjquery-animate-css-rotate-scalehttps://github.com/zachstronaut/jquery-animate-css-rotate-scalescrollTojQuery Waypointshttps://github.com/imakewebthings/jquery-waypoints/Typekit
  34. 34. http://www.weareempire.co.uk/
  35. 35. http://www.weareempire.co.uk/jQueryjQuery Carouselhttp://thomaslanciaux.pro/jquery/jquery_carousel.htmEasingTwitterJShttp://code.google.com/p/twitterjs/
  36. 36. http://www.redirectdigital.com.br/
  37. 37. http://www.redirectdigital.com.br/jQueryScrollTojSizeshttp://www.bramstein.com/projects/jsizes/
  38. 38. ¿Diseño?

×