Presentacion diseño web con jquery
-
Upload
mejorandola -
Category
Technology
-
view
5.827 -
download
0
description
Transcript of Presentacion diseño web con jquery
![Page 1: Presentacion diseño web con jquery](https://reader033.fdocuments.ec/reader033/viewer/2022051514/54842d01b47959f60c8b4b4f/html5/thumbnails/1.jpg)
Diseño web con jQuery
Miguel Angel Alvarez
DesarrolloWeb.com
@alvarezmiguelan
![Page 2: Presentacion diseño web con jquery](https://reader033.fdocuments.ec/reader033/viewer/2022051514/54842d01b47959f60c8b4b4f/html5/thumbnails/2.jpg)
1) Tendencias diseño 2012
2) Recursos jQuery en el diseño web
3) Casos prácticos de uso
![Page 3: Presentacion diseño web con jquery](https://reader033.fdocuments.ec/reader033/viewer/2022051514/54842d01b47959f60c8b4b4f/html5/thumbnails/3.jpg)
![Page 4: Presentacion diseño web con jquery](https://reader033.fdocuments.ec/reader033/viewer/2022051514/54842d01b47959f60c8b4b4f/html5/thumbnails/4.jpg)
zzzzz
![Page 5: Presentacion diseño web con jquery](https://reader033.fdocuments.ec/reader033/viewer/2022051514/54842d01b47959f60c8b4b4f/html5/thumbnails/5.jpg)
![Page 6: Presentacion diseño web con jquery](https://reader033.fdocuments.ec/reader033/viewer/2022051514/54842d01b47959f60c8b4b4f/html5/thumbnails/6.jpg)
jQuery es la esencia de la vida
![Page 7: Presentacion diseño web con jquery](https://reader033.fdocuments.ec/reader033/viewer/2022051514/54842d01b47959f60c8b4b4f/html5/thumbnails/7.jpg)
![Page 8: Presentacion diseño web con jquery](https://reader033.fdocuments.ec/reader033/viewer/2022051514/54842d01b47959f60c8b4b4f/html5/thumbnails/8.jpg)
Diseño según estándares
![Page 9: Presentacion diseño web con jquery](https://reader033.fdocuments.ec/reader033/viewer/2022051514/54842d01b47959f60c8b4b4f/html5/thumbnails/9.jpg)
Grids fluidos
![Page 10: Presentacion diseño web con jquery](https://reader033.fdocuments.ec/reader033/viewer/2022051514/54842d01b47959f60c8b4b4f/html5/thumbnails/10.jpg)
Menos Flash, hover, pixel perfect
Más Responsive Design
![Page 11: Presentacion diseño web con jquery](https://reader033.fdocuments.ec/reader033/viewer/2022051514/54842d01b47959f60c8b4b4f/html5/thumbnails/11.jpg)
Desplazamiento horizontal
http://www.weshootbottles.com/
http://deanoakley.com/
http://vanityclaire.com/
![Page 12: Presentacion diseño web con jquery](https://reader033.fdocuments.ec/reader033/viewer/2022051514/54842d01b47959f60c8b4b4f/html5/thumbnails/12.jpg)
Aplicaciones HTML5 para
dispositivos móviles
![Page 13: Presentacion diseño web con jquery](https://reader033.fdocuments.ec/reader033/viewer/2022051514/54842d01b47959f60c8b4b4f/html5/thumbnails/13.jpg)
Animaciones CSS3
http://tutorialzine.com/2009/11/hovering-gallery-css3-jquery/
http://www.anthonycalzadilla.com/css3-ATAT/
![Page 14: Presentacion diseño web con jquery](https://reader033.fdocuments.ec/reader033/viewer/2022051514/54842d01b47959f60c8b4b4f/html5/thumbnails/14.jpg)
Scroll Parallax – Sitios de 1 página
http://www.hyundai-veloster.eu/http://www.redirectdigital.com.br/
![Page 15: Presentacion diseño web con jquery](https://reader033.fdocuments.ec/reader033/viewer/2022051514/54842d01b47959f60c8b4b4f/html5/thumbnails/15.jpg)
Interfaces enriquecidas
![Page 16: Presentacion diseño web con jquery](https://reader033.fdocuments.ec/reader033/viewer/2022051514/54842d01b47959f60c8b4b4f/html5/thumbnails/16.jpg)
Diseños con componentes 3D
![Page 17: Presentacion diseño web con jquery](https://reader033.fdocuments.ec/reader033/viewer/2022051514/54842d01b47959f60c8b4b4f/html5/thumbnails/17.jpg)
Slides – presentación de diapositivas
![Page 18: Presentacion diseño web con jquery](https://reader033.fdocuments.ec/reader033/viewer/2022051514/54842d01b47959f60c8b4b4f/html5/thumbnails/18.jpg)
Infografías
![Page 19: Presentacion diseño web con jquery](https://reader033.fdocuments.ec/reader033/viewer/2022051514/54842d01b47959f60c8b4b4f/html5/thumbnails/19.jpg)
Aplicaciones en el navegador
![Page 20: Presentacion diseño web con jquery](https://reader033.fdocuments.ec/reader033/viewer/2022051514/54842d01b47959f60c8b4b4f/html5/thumbnails/20.jpg)
Tipografías
![Page 21: Presentacion diseño web con jquery](https://reader033.fdocuments.ec/reader033/viewer/2022051514/54842d01b47959f60c8b4b4f/html5/thumbnails/21.jpg)
2) Recursos jQuery en el diseño web
Diseño
Programación
![Page 22: Presentacion diseño web con jquery](https://reader033.fdocuments.ec/reader033/viewer/2022051514/54842d01b47959f60c8b4b4f/html5/thumbnails/22.jpg)
2) Recursos jQuery en el diseño web
Interacción + comportamientos
![Page 23: Presentacion diseño web con jquery](https://reader033.fdocuments.ec/reader033/viewer/2022051514/54842d01b47959f60c8b4b4f/html5/thumbnails/23.jpg)
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/
![Page 24: Presentacion diseño web con jquery](https://reader033.fdocuments.ec/reader033/viewer/2022051514/54842d01b47959f60c8b4b4f/html5/thumbnails/24.jpg)
Animaciones CSS3
http://transformjs.strobeapp.com/
http://ricostacruz.com/jquery.transit/
![Page 25: Presentacion diseño web con jquery](https://reader033.fdocuments.ec/reader033/viewer/2022051514/54842d01b47959f60c8b4b4f/html5/thumbnails/25.jpg)
Animaciones “cargando”
CSS3 + jQuery
http://fgnass.github.com/spin.js/
![Page 26: Presentacion diseño web con jquery](https://reader033.fdocuments.ec/reader033/viewer/2022051514/54842d01b47959f60c8b4b4f/html5/thumbnails/26.jpg)
Interfaces de usuario para apps
http://jqueryui.com
http://www.kendoui.com/
http://wijmo.com/
![Page 27: Presentacion diseño web con jquery](https://reader033.fdocuments.ec/reader033/viewer/2022051514/54842d01b47959f60c8b4b4f/html5/thumbnails/27.jpg)
Formularios, campos mejorados,
validación, ajax, etc.
http://demos.kendoui.com/web/validator
http://jquery.malsup.com/form/
http://textextjs.com/
![Page 28: Presentacion diseño web con jquery](https://reader033.fdocuments.ec/reader033/viewer/2022051514/54842d01b47959f60c8b4b4f/html5/thumbnails/28.jpg)
Slides - Presentaciones
http://slidesjs.com/
http://nivo.dev7studios.com/
http://thiagosf.net/projects/jquery/skitter/
http://www.slidedeck.com/
http://buildinternet.com/project/supersized/
![Page 29: Presentacion diseño web con jquery](https://reader033.fdocuments.ec/reader033/viewer/2022051514/54842d01b47959f60c8b4b4f/html5/thumbnails/29.jpg)
Efectos 3D
http://transformjs.strobeapp.com/
http://hakim.se/projects/reveal-js
http://lab.smashup.it/flip
http://www.zachstronaut.com/projects/rotate3di/
![Page 30: Presentacion diseño web con jquery](https://reader033.fdocuments.ec/reader033/viewer/2022051514/54842d01b47959f60c8b4b4f/html5/thumbnails/30.jpg)
Tipografías
http://letteringjs.com/
http://fittextjs.com/
http://workshop.rs/2010/01/jqisotext-jquery-text-effect-plugin/
![Page 31: Presentacion diseño web con jquery](https://reader033.fdocuments.ec/reader033/viewer/2022051514/54842d01b47959f60c8b4b4f/html5/thumbnails/31.jpg)
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/
![Page 32: Presentacion diseño web con jquery](https://reader033.fdocuments.ec/reader033/viewer/2022051514/54842d01b47959f60c8b4b4f/html5/thumbnails/32.jpg)
3) Casos de uso
![Page 34: Presentacion diseño web con jquery](https://reader033.fdocuments.ec/reader033/viewer/2022051514/54842d01b47959f60c8b4b4f/html5/thumbnails/34.jpg)
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
![Page 36: Presentacion diseño web con jquery](https://reader033.fdocuments.ec/reader033/viewer/2022051514/54842d01b47959f60c8b4b4f/html5/thumbnails/36.jpg)
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
![Page 38: Presentacion diseño web con jquery](https://reader033.fdocuments.ec/reader033/viewer/2022051514/54842d01b47959f60c8b4b4f/html5/thumbnails/38.jpg)
http://www.weareempire.co.uk/
jQuery
jQuery Carousel
http://thomaslanciaux.pro/jquery/jquery_carousel.htm
Easing
TwitterJS
http://code.google.com/p/twitterjs/
![Page 40: Presentacion diseño web con jquery](https://reader033.fdocuments.ec/reader033/viewer/2022051514/54842d01b47959f60c8b4b4f/html5/thumbnails/40.jpg)
http://www.redirectdigital.com.br/
jQuery
ScrollTo
jSizes
http://www.bramstein.com/projects/jsizes/
![Page 41: Presentacion diseño web con jquery](https://reader033.fdocuments.ec/reader033/viewer/2022051514/54842d01b47959f60c8b4b4f/html5/thumbnails/41.jpg)
¿Diseño?