Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Diseño web con jQueryMiguel Angel AlvarezDesarrolloWeb.com@alvarezmiguelan
1) Tendencias diseño 20122) Recursos jQuery en el diseño web3) 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 perfectMás Responsive Design
Desplazamiento horizontalhttp://www.weshootbottles.com/http://deanoakley.com/http://vanityclaire.com/
Aplicaciones HTML5 paradispositivos móviles
Animaciones CSS3http://www.anthonycalzadilla.com/css3-ATAT/                                    http://tutorialzine.com/200...
Scroll Parallax – Sitios de 1 páginahttp://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 webDiseño                    Programación
2) Recursos jQuery en el diseño webInteracción + comportamientos
Menús dinámicos, ¿Solo CSS3?  http://css3menu.com/  http://codecanyon.net/item/menu-with-css3-effects-and-notification-bub...
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/for...
Slides - Presentaciones  http://slidesjs.com/  http://nivo.dev7studios.com/  http://thiagosf.net/projects/jquery/skitter/ ...
Efectos 3D  http://transformjs.strobeapp.com/  http://hakim.se/projects/reveal-js  http://lab.smashup.it/flip  http://www....
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-sc...
3) Casos de uso
http://www.intacto10years.com/
http://www.intacto10years.com/jQueryQueryLoader jQuery Pluginhttps://github.com/Gaya/QueryLoader2scrollTo jQuery Pluginhtt...
http://www.reverenddanger.com
http://www.reverenddanger.comjQuery, Modernizr, jQueryUI, EasingFlip jQuery Pluginjquery-animate-css-rotate-scalehttps://g...
http://www.weareempire.co.uk/
http://www.weareempire.co.uk/jQueryjQuery Carouselhttp://thomaslanciaux.pro/jquery/jquery_carousel.htmEasingTwitterJShttp:...
http://www.redirectdigital.com.br/
http://www.redirectdigital.com.br/jQueryScrollTojSizeshttp://www.bramstein.com/projects/jsizes/
¿Diseño?
Presentacion diseño web con jquery
Presentacion diseño web con jquery
Presentacion diseño web con jquery
Upcoming SlideShare
Loading in …5
×

Presentacion diseño web con jquery

737 views

Published on

  • Be the first to comment

  • Be the first to like this

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?

×