jQuery: Write less, do more

21
jQuery: write less, do more Hugo Santos http://netpont o.org 10ª Reunião Presencial - 15/05/2010

description

 

Transcript of jQuery: Write less, do more

Page 1: jQuery: Write less, do more

jQuery: write less, do moreHugo Santos

http://netponto.org10ª Reunião Presencial - 15/05/2010

Page 2: jQuery: Write less, do more

Hugo SantosConsultor, Agap2 ConsultingFreelancerMicrosoft Certified Professional Developer ASP.NET 3.5

Page 3: jQuery: Write less, do more

Agenda

• Apresentação do jQuery• Aplicações do jQuery?• Vantagens• Integração jQuery & VS2010• Plugins• jQuery UI• jQuery Templating

Page 4: jQuery: Write less, do more

Apresentação do jQuery

“jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development.”

jquery.com

Page 5: jQuery: Write less, do more

Apresentação do jQuery

Site oficialhttp://jquery.comCoreDocumentaçãoExemplosPluginsComunidades

Page 6: jQuery: Write less, do more

Aplicações do jQuery?

As aplicações ricas com forte componente interactiva tem cativado as grandes organizações a adoptar o jQuery nas suas soluções

Page 7: jQuery: Write less, do more

Vantagens

Resolução de incompatibilidades entre os browsersRedução de códigoMelhor performanceReutilização de códigoVasta galeria de pluginsComunidade activaApoio Microsoft

Page 8: jQuery: Write less, do more

DEMO 1: Setup do ambiente de Desenvolvimento

demonstração

Page 9: jQuery: Write less, do more

Integração VS2010 & jQuery– Suporte nativo no VS2010 para jQuery

• Web forms & MVC• Documentação• Intellisense• Code snipets

Page 10: jQuery: Write less, do more

DEMO 2: Primeiros passos…

demonstração

Page 11: jQuery: Write less, do more

Plugins– Ajax, Animação, Dados, Forms, Layout, Media, Validação,

Menus, UI, etc

Os meus preferidos:– Validation plugin - http://www.unwrongest.com/projects/valid8/

– TableSorter plugin - http://www.datatables.net/

– jQuery lightbox plugin - http://leandrovieira.com/projects/jquery/lightbox/

– highCharts - http://www.highcharts.com/

Page 12: jQuery: Write less, do more

jQuery UI– Conjunto de widgets e tools que

aceleram o desenvolvimento e proporcionam uma interface fluida implementada em jQuery

– Theme builder permite customizar o aspecto dos controlos

– …ver também o jQuery Tools - http://flowplayer.org/tools/index.html

Page 13: jQuery: Write less, do more

jQuery UIWidgets– Accordion– Autocomplete– Button– Datepicker– Dialog– Progressbar– Slider

Page 14: jQuery: Write less, do more

jQuery UIInteracções– Draggable– Droppable– Resizable– Selectable– Sortable

Page 15: jQuery: Write less, do more

DEMO 3: jQuery UI

demonstração

Page 16: jQuery: Write less, do more

jQuery Templating

Templates HTML para suportar renderização orientada a objectos Javascript na criação de aplicações “data driven”– “Data bind” e render do HTML no cliente– Separação de layout VS código js–Mais fácil de manter

Page 17: jQuery: Write less, do more

DEMO 4: jQuery templating

demonstração

Page 18: jQuery: Write less, do more

Dúvidas?

Page 19: jQuery: Write less, do more

ReferênciasjQuery Project

– http://www.jquery.org

jQuery: Write less, do more, Javascript Library– http://www.jquery.com

jQuery UI– http://www.jquery.ui

jQuery Templates and Data Linking (and Microsoft contributing to jQuery)– http://weblogs.asp.net/scottgu/archive/2010/05/07/jquery-templates-and-d

ata-linking-and-microsoft-contributing-to-jquery.aspx

Page 20: jQuery: Write less, do more

Patrocinadores desta reunião

Paulo Morgado

Page 21: jQuery: Write less, do more

Obrigado!

Hugo [email protected]/in/hfsantostwitter.com/h_fsantos