Presentacion diseño web con jquery
Upcoming SlideShare
Loading in...5
×
 

Presentacion diseño web con jquery

on

  • 788 views

 

Statistics

Views

Total Views
788
Views on SlideShare
788
Embed Views
0

Actions

Likes
0
Downloads
9
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Presentacion diseño web con jquery Presentacion diseño web con jquery Presentation Transcript

  • 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/2009/11/ hovering-gallery-css3-jquery/
  • 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-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/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
  • http://www.reverenddanger.com
  • 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
  • http://www.weareempire.co.uk/
  • http://www.weareempire.co.uk/jQueryjQuery Carouselhttp://thomaslanciaux.pro/jquery/jquery_carousel.htmEasingTwitterJShttp://code.google.com/p/twitterjs/
  • http://www.redirectdigital.com.br/
  • http://www.redirectdigital.com.br/jQueryScrollTojSizeshttp://www.bramstein.com/projects/jsizes/
  • ¿Diseño?