SlideShare ist ein Scribd-Unternehmen logo
1 von 21
http://netponto.org 10ª Reunião Presencial - 15/05/2010 jQuery: writeless, do moreHugo Santos
Hugo Santos Consultor, Agap2 Consulting Freelancer Microsoft Certified Professional Developer ASP.NET 3.5
Agenda Apresentação do jQuery Aplicações do jQuery? Vantagens Integração jQuery & VS2010 Plugins jQuery UI jQueryTemplating
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
Apresentação do jQuery Site oficial http://jquery.com Core Documentação Exemplos Plugins Comunidades
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
Vantagens Resolução de incompatibilidades entre os browsers Redução de código Melhor performance Reutilização de código Vasta galeria de plugins Comunidade activa Apoio Microsoft
DEMO 1: Setup do ambiente de Desenvolvimento demonstração
Integração VS2010 & jQuery Suporte nativo no VS2010 para jQuery Web forms & MVC Documentação Intellisense Codesnipets
DEMO 2: Primeirospassos… demonstração
Plugins Ajax, Animação, Dados, Forms, Layout, Media, Validação, Menus, UI, etc Os meus preferidos: Validationplugin - http://www.unwrongest.com/projects/valid8/ TableSorterplugin - http://www.datatables.net/ jQuerylightboxplugin - http://leandrovieira.com/projects/jquery/lightbox/ highCharts - http://www.highcharts.com/
jQuery UI Conjunto de widgets e tools que aceleram o desenvolvimento e proporcionam uma interface fluida implementada em jQuery Themebuilder permite customizar o aspecto dos controlos …ver também o jQueryTools - http://flowplayer.org/tools/index.html
jQuery UI Widgets Accordion Autocomplete Button Datepicker Dialog Progressbar Slider
jQuery UI Interacções Draggable Droppable Resizable Selectable Sortable
DEMO 3: jQuery UI demonstração
jQueryTemplating 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
DEMO 4: jQuerytemplating demonstração
Dúvidas?
Referências jQuery Project http://www.jquery.org jQuery: Writeless, 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-data-linking-and-microsoft-contributing-to-jquery.aspx
Patrocinadores desta reunião Paulo Morgado
Obrigado! Hugo Santos hugo@hugosantos.com linkedin.com/in/hfsantos twitter.com/h_fsantos

Weitere ähnliche Inhalte

Was ist angesagt?

AngularJS - Just Digital
AngularJS - Just DigitalAngularJS - Just Digital
AngularJS - Just DigitalJust Digital
 
Arquitetura de Microserviços - Tecnologia na Prática - Julho/2017
Arquitetura de Microserviços - Tecnologia na Prática - Julho/2017Arquitetura de Microserviços - Tecnologia na Prática - Julho/2017
Arquitetura de Microserviços - Tecnologia na Prática - Julho/2017Renato Groff
 
Produtividade infinito e além com We.js
Produtividade infinito e além com We.jsProdutividade infinito e além com We.js
Produtividade infinito e além com We.jsAlberto Souza
 
Plataformas Monolíticas, redescobrindo o Desktop e sendo Ágil para Web.
Plataformas Monolíticas, redescobrindo o Desktop e sendo Ágil para Web.Plataformas Monolíticas, redescobrindo o Desktop e sendo Ágil para Web.
Plataformas Monolíticas, redescobrindo o Desktop e sendo Ágil para Web.Cristofer Sousa
 
O futuro dos WebApps com AngularJS 2.0
O futuro dos WebApps com AngularJS 2.0O futuro dos WebApps com AngularJS 2.0
O futuro dos WebApps com AngularJS 2.0Wilson Mendes
 
5 frameworks para desenvolvimento de apps em html5
5 frameworks para desenvolvimento de apps em html55 frameworks para desenvolvimento de apps em html5
5 frameworks para desenvolvimento de apps em html5daliarafaela
 
Criando e Usando Helpers
Criando e Usando HelpersCriando e Usando Helpers
Criando e Usando HelpersJoaoVagner
 
Do mapa mental para Serviços de Dados até APIs
Do mapa mental para Serviços de Dados até APIsDo mapa mental para Serviços de Dados até APIs
Do mapa mental para Serviços de Dados até APIsWSO2
 
Minicurso - Desenvolvendo aplicações web com JavaScript e AngularJS - Estácio...
Minicurso - Desenvolvendo aplicações web com JavaScript e AngularJS - Estácio...Minicurso - Desenvolvendo aplicações web com JavaScript e AngularJS - Estácio...
Minicurso - Desenvolvendo aplicações web com JavaScript e AngularJS - Estácio...Rodrigo Branas
 
Walker Leite apresenta usando o WordPress como backend de aplicação
Walker Leite apresenta usando o WordPress como backend de aplicaçãoWalker Leite apresenta usando o WordPress como backend de aplicação
Walker Leite apresenta usando o WordPress como backend de aplicaçãoWordCamp Floripa
 
[Cloud Summit 2010] Francisco Gioielli - Google Apps
[Cloud Summit 2010] Francisco Gioielli - Google Apps[Cloud Summit 2010] Francisco Gioielli - Google Apps
[Cloud Summit 2010] Francisco Gioielli - Google AppsTecla Internet
 
Webdroid by cngsm
Webdroid by cngsmWebdroid by cngsm
Webdroid by cngsmCNGSM
 
Arquitetura Client-Side do Comentários da Globo.com
Arquitetura Client-Side do Comentários da Globo.comArquitetura Client-Side do Comentários da Globo.com
Arquitetura Client-Side do Comentários da Globo.comEvandro Gonçalves
 

Was ist angesagt? (20)

AngularJS - Just Digital
AngularJS - Just DigitalAngularJS - Just Digital
AngularJS - Just Digital
 
Arquitetura de Microserviços - Tecnologia na Prática - Julho/2017
Arquitetura de Microserviços - Tecnologia na Prática - Julho/2017Arquitetura de Microserviços - Tecnologia na Prática - Julho/2017
Arquitetura de Microserviços - Tecnologia na Prática - Julho/2017
 
Angular js
Angular jsAngular js
Angular js
 
Gwt parte 01
Gwt   parte 01Gwt   parte 01
Gwt parte 01
 
Produtividade infinito e além com We.js
Produtividade infinito e além com We.jsProdutividade infinito e além com We.js
Produtividade infinito e além com We.js
 
Plataformas Monolíticas, redescobrindo o Desktop e sendo Ágil para Web.
Plataformas Monolíticas, redescobrindo o Desktop e sendo Ágil para Web.Plataformas Monolíticas, redescobrindo o Desktop e sendo Ágil para Web.
Plataformas Monolíticas, redescobrindo o Desktop e sendo Ágil para Web.
 
O futuro dos WebApps com AngularJS 2.0
O futuro dos WebApps com AngularJS 2.0O futuro dos WebApps com AngularJS 2.0
O futuro dos WebApps com AngularJS 2.0
 
5 frameworks para desenvolvimento de apps em html5
5 frameworks para desenvolvimento de apps em html55 frameworks para desenvolvimento de apps em html5
5 frameworks para desenvolvimento de apps em html5
 
Introdução ao AngularJS!
Introdução ao AngularJS!Introdução ao AngularJS!
Introdução ao AngularJS!
 
Criando e Usando Helpers
Criando e Usando HelpersCriando e Usando Helpers
Criando e Usando Helpers
 
Framework7
Framework7Framework7
Framework7
 
Widgets
WidgetsWidgets
Widgets
 
O poder das Progressive Web Apps
O poder das Progressive Web AppsO poder das Progressive Web Apps
O poder das Progressive Web Apps
 
Do mapa mental para Serviços de Dados até APIs
Do mapa mental para Serviços de Dados até APIsDo mapa mental para Serviços de Dados até APIs
Do mapa mental para Serviços de Dados até APIs
 
Minicurso - Desenvolvendo aplicações web com JavaScript e AngularJS - Estácio...
Minicurso - Desenvolvendo aplicações web com JavaScript e AngularJS - Estácio...Minicurso - Desenvolvendo aplicações web com JavaScript e AngularJS - Estácio...
Minicurso - Desenvolvendo aplicações web com JavaScript e AngularJS - Estácio...
 
Walker Leite apresenta usando o WordPress como backend de aplicação
Walker Leite apresenta usando o WordPress como backend de aplicaçãoWalker Leite apresenta usando o WordPress como backend de aplicação
Walker Leite apresenta usando o WordPress como backend de aplicação
 
[Cloud Summit 2010] Francisco Gioielli - Google Apps
[Cloud Summit 2010] Francisco Gioielli - Google Apps[Cloud Summit 2010] Francisco Gioielli - Google Apps
[Cloud Summit 2010] Francisco Gioielli - Google Apps
 
Introdução Vue JS
Introdução Vue JSIntrodução Vue JS
Introdução Vue JS
 
Webdroid by cngsm
Webdroid by cngsmWebdroid by cngsm
Webdroid by cngsm
 
Arquitetura Client-Side do Comentários da Globo.com
Arquitetura Client-Side do Comentários da Globo.comArquitetura Client-Side do Comentários da Globo.com
Arquitetura Client-Side do Comentários da Globo.com
 

Andere mochten auch (9)

Access
AccessAccess
Access
 
França
FrançaFrança
França
 
Diseño empresarial
Diseño empresarialDiseño empresarial
Diseño empresarial
 
Vo Ip
Vo IpVo Ip
Vo Ip
 
Doing business 2013 (version française)
Doing business 2013 (version française)Doing business 2013 (version française)
Doing business 2013 (version française)
 
Web 2.0
Web 2.0Web 2.0
Web 2.0
 
Métacognition en centre de documentation
Métacognition en centre de documentationMétacognition en centre de documentation
Métacognition en centre de documentation
 
2° apunte negocio jurídico
2° apunte negocio jurídico2° apunte negocio jurídico
2° apunte negocio jurídico
 
Nedal Nemer CV
Nedal Nemer CVNedal Nemer CV
Nedal Nemer CV
 

Ähnlich wie jQuery: Write less, do more

Desenvolvendo aplicações PHP, AJAX e YUI! Yahoo User Interface
Desenvolvendo aplicações PHP, AJAX e YUI! Yahoo User InterfaceDesenvolvendo aplicações PHP, AJAX e YUI! Yahoo User Interface
Desenvolvendo aplicações PHP, AJAX e YUI! Yahoo User InterfaceDomingos Teruel
 
Como fazer mais em aplicações RIA escrevendo menos
Como fazer mais em aplicações RIA escrevendo menosComo fazer mais em aplicações RIA escrevendo menos
Como fazer mais em aplicações RIA escrevendo menosJaydson Gomes
 
Como Fazer (+) Em AplicaçõEs Ria Escrevendo ( )
Como Fazer (+) Em AplicaçõEs Ria Escrevendo ( )Como Fazer (+) Em AplicaçõEs Ria Escrevendo ( )
Como Fazer (+) Em AplicaçõEs Ria Escrevendo ( )Felipe Nascimento
 
Atlassian Confluence pela 3layer Tecnologia
Atlassian Confluence pela 3layer TecnologiaAtlassian Confluence pela 3layer Tecnologia
Atlassian Confluence pela 3layer TecnologiaMarcelo Mrack
 
Desenvolvimento de Aplicações com Zend Framework e Yahoo! User Interface
Desenvolvimento de Aplicações com Zend Framework e Yahoo! User InterfaceDesenvolvimento de Aplicações com Zend Framework e Yahoo! User Interface
Desenvolvimento de Aplicações com Zend Framework e Yahoo! User InterfaceDomingos Teruel
 
FEMUG MGA #6 - Abandonando o jQuery
FEMUG MGA #6  - Abandonando o jQueryFEMUG MGA #6  - Abandonando o jQuery
FEMUG MGA #6 - Abandonando o jQueryJulio Vedovatto
 
Introdução JQuery
Introdução JQueryIntrodução JQuery
Introdução JQueryinfo_cimol
 
Django: Uso de frameworks ágeis para desenvolvimento web
Django: Uso de frameworks ágeis para desenvolvimento webDjango: Uso de frameworks ágeis para desenvolvimento web
Django: Uso de frameworks ágeis para desenvolvimento webMiguel Galves
 
Web Tools Pt B R
Web Tools Pt  B RWeb Tools Pt  B R
Web Tools Pt B Rguestb9d145
 
Angular, React ou Vue? Comparando os favoritos do JS reativo
Angular, React ou Vue? Comparando os favoritos do JS reativoAngular, React ou Vue? Comparando os favoritos do JS reativo
Angular, React ou Vue? Comparando os favoritos do JS reativoGDGFoz
 
Microsoft Expression Blend e WEB: sob o ponto de vista de um desenvolvedor
Microsoft Expression Blend e WEB: sob o ponto de vista de um desenvolvedorMicrosoft Expression Blend e WEB: sob o ponto de vista de um desenvolvedor
Microsoft Expression Blend e WEB: sob o ponto de vista de um desenvolvedorRodrigo Kono
 
Integração de Serviços Cloud com REST/JSON
Integração de Serviços Cloud com REST/JSON Integração de Serviços Cloud com REST/JSON
Integração de Serviços Cloud com REST/JSON Fernando Rizzato
 
ASP.NET MVC com jQuery (Retome o controle da sua aplicação web)
ASP.NET MVC com jQuery (Retome o controle da sua aplicação web)ASP.NET MVC com jQuery (Retome o controle da sua aplicação web)
ASP.NET MVC com jQuery (Retome o controle da sua aplicação web)Giovanni Bassi
 
Treinamento ASP.NET 2014
Treinamento ASP.NET 2014Treinamento ASP.NET 2014
Treinamento ASP.NET 2014Eric Gallardo
 
TDC 2010 Floripa-SC SharePoint 2010: Novidades para os desenvolvedores .net
TDC 2010 Floripa-SC SharePoint 2010: Novidades para os desenvolvedores .netTDC 2010 Floripa-SC SharePoint 2010: Novidades para os desenvolvedores .net
TDC 2010 Floripa-SC SharePoint 2010: Novidades para os desenvolvedores .netFabian Gehrke
 
Descomplicando o JQuery - Introdução ao Framework
Descomplicando o JQuery - Introdução ao FrameworkDescomplicando o JQuery - Introdução ao Framework
Descomplicando o JQuery - Introdução ao FrameworkPablo Garrido
 
Angular5, vue js ou react redux (Trilha de Javascript - TDC 2018 )
Angular5, vue js ou react redux (Trilha de Javascript - TDC 2018 )Angular5, vue js ou react redux (Trilha de Javascript - TDC 2018 )
Angular5, vue js ou react redux (Trilha de Javascript - TDC 2018 )Getúlio Strapazzon
 
ASP.Net MVC 3 - o que há de novo (TechEd)
ASP.Net MVC 3 - o que há de novo (TechEd)ASP.Net MVC 3 - o que há de novo (TechEd)
ASP.Net MVC 3 - o que há de novo (TechEd)Giovanni Bassi
 

Ähnlich wie jQuery: Write less, do more (20)

Desenvolvendo aplicações PHP, AJAX e YUI! Yahoo User Interface
Desenvolvendo aplicações PHP, AJAX e YUI! Yahoo User InterfaceDesenvolvendo aplicações PHP, AJAX e YUI! Yahoo User Interface
Desenvolvendo aplicações PHP, AJAX e YUI! Yahoo User Interface
 
Como fazer mais em aplicações RIA escrevendo menos
Como fazer mais em aplicações RIA escrevendo menosComo fazer mais em aplicações RIA escrevendo menos
Como fazer mais em aplicações RIA escrevendo menos
 
Como Fazer (+) Em AplicaçõEs Ria Escrevendo ( )
Como Fazer (+) Em AplicaçõEs Ria Escrevendo ( )Como Fazer (+) Em AplicaçõEs Ria Escrevendo ( )
Como Fazer (+) Em AplicaçõEs Ria Escrevendo ( )
 
Atlassian Confluence pela 3layer Tecnologia
Atlassian Confluence pela 3layer TecnologiaAtlassian Confluence pela 3layer Tecnologia
Atlassian Confluence pela 3layer Tecnologia
 
Desenvolvimento de Aplicações com Zend Framework e Yahoo! User Interface
Desenvolvimento de Aplicações com Zend Framework e Yahoo! User InterfaceDesenvolvimento de Aplicações com Zend Framework e Yahoo! User Interface
Desenvolvimento de Aplicações com Zend Framework e Yahoo! User Interface
 
FEMUG MGA #6 - Abandonando o jQuery
FEMUG MGA #6  - Abandonando o jQueryFEMUG MGA #6  - Abandonando o jQuery
FEMUG MGA #6 - Abandonando o jQuery
 
Introdução JQuery
Introdução JQueryIntrodução JQuery
Introdução JQuery
 
Django: Uso de frameworks ágeis para desenvolvimento web
Django: Uso de frameworks ágeis para desenvolvimento webDjango: Uso de frameworks ágeis para desenvolvimento web
Django: Uso de frameworks ágeis para desenvolvimento web
 
Introdução jQuery UI
Introdução jQuery UIIntrodução jQuery UI
Introdução jQuery UI
 
Web Tools Pt B R
Web Tools Pt  B RWeb Tools Pt  B R
Web Tools Pt B R
 
Angular, React ou Vue? Comparando os favoritos do JS reativo
Angular, React ou Vue? Comparando os favoritos do JS reativoAngular, React ou Vue? Comparando os favoritos do JS reativo
Angular, React ou Vue? Comparando os favoritos do JS reativo
 
Microsoft Expression Blend e WEB: sob o ponto de vista de um desenvolvedor
Microsoft Expression Blend e WEB: sob o ponto de vista de um desenvolvedorMicrosoft Expression Blend e WEB: sob o ponto de vista de um desenvolvedor
Microsoft Expression Blend e WEB: sob o ponto de vista de um desenvolvedor
 
Integração de Serviços Cloud com REST/JSON
Integração de Serviços Cloud com REST/JSON Integração de Serviços Cloud com REST/JSON
Integração de Serviços Cloud com REST/JSON
 
GWT
GWTGWT
GWT
 
ASP.NET MVC com jQuery (Retome o controle da sua aplicação web)
ASP.NET MVC com jQuery (Retome o controle da sua aplicação web)ASP.NET MVC com jQuery (Retome o controle da sua aplicação web)
ASP.NET MVC com jQuery (Retome o controle da sua aplicação web)
 
Treinamento ASP.NET 2014
Treinamento ASP.NET 2014Treinamento ASP.NET 2014
Treinamento ASP.NET 2014
 
TDC 2010 Floripa-SC SharePoint 2010: Novidades para os desenvolvedores .net
TDC 2010 Floripa-SC SharePoint 2010: Novidades para os desenvolvedores .netTDC 2010 Floripa-SC SharePoint 2010: Novidades para os desenvolvedores .net
TDC 2010 Floripa-SC SharePoint 2010: Novidades para os desenvolvedores .net
 
Descomplicando o JQuery - Introdução ao Framework
Descomplicando o JQuery - Introdução ao FrameworkDescomplicando o JQuery - Introdução ao Framework
Descomplicando o JQuery - Introdução ao Framework
 
Angular5, vue js ou react redux (Trilha de Javascript - TDC 2018 )
Angular5, vue js ou react redux (Trilha de Javascript - TDC 2018 )Angular5, vue js ou react redux (Trilha de Javascript - TDC 2018 )
Angular5, vue js ou react redux (Trilha de Javascript - TDC 2018 )
 
ASP.Net MVC 3 - o que há de novo (TechEd)
ASP.Net MVC 3 - o que há de novo (TechEd)ASP.Net MVC 3 - o que há de novo (TechEd)
ASP.Net MVC 3 - o que há de novo (TechEd)
 

Kürzlich hochgeladen

ATIVIDADE 1 - LOGÍSTICA EMPRESARIAL - 52_2024.docx
ATIVIDADE 1 - LOGÍSTICA EMPRESARIAL - 52_2024.docxATIVIDADE 1 - LOGÍSTICA EMPRESARIAL - 52_2024.docx
ATIVIDADE 1 - LOGÍSTICA EMPRESARIAL - 52_2024.docx2m Assessoria
 
ATIVIDADE 1 - CUSTOS DE PRODUÇÃO - 52_2024.docx
ATIVIDADE 1 - CUSTOS DE PRODUÇÃO - 52_2024.docxATIVIDADE 1 - CUSTOS DE PRODUÇÃO - 52_2024.docx
ATIVIDADE 1 - CUSTOS DE PRODUÇÃO - 52_2024.docx2m Assessoria
 
Boas práticas de programação com Object Calisthenics
Boas práticas de programação com Object CalisthenicsBoas práticas de programação com Object Calisthenics
Boas práticas de programação com Object CalisthenicsDanilo Pinotti
 
ATIVIDADE 1 - ESTRUTURA DE DADOS II - 52_2024.docx
ATIVIDADE 1 - ESTRUTURA DE DADOS II - 52_2024.docxATIVIDADE 1 - ESTRUTURA DE DADOS II - 52_2024.docx
ATIVIDADE 1 - ESTRUTURA DE DADOS II - 52_2024.docx2m Assessoria
 
Padrões de Projeto: Proxy e Command com exemplo
Padrões de Projeto: Proxy e Command com exemploPadrões de Projeto: Proxy e Command com exemplo
Padrões de Projeto: Proxy e Command com exemploDanilo Pinotti
 
ATIVIDADE 1 - GCOM - GESTÃO DA INFORMAÇÃO - 54_2024.docx
ATIVIDADE 1 - GCOM - GESTÃO DA INFORMAÇÃO - 54_2024.docxATIVIDADE 1 - GCOM - GESTÃO DA INFORMAÇÃO - 54_2024.docx
ATIVIDADE 1 - GCOM - GESTÃO DA INFORMAÇÃO - 54_2024.docx2m Assessoria
 

Kürzlich hochgeladen (6)

ATIVIDADE 1 - LOGÍSTICA EMPRESARIAL - 52_2024.docx
ATIVIDADE 1 - LOGÍSTICA EMPRESARIAL - 52_2024.docxATIVIDADE 1 - LOGÍSTICA EMPRESARIAL - 52_2024.docx
ATIVIDADE 1 - LOGÍSTICA EMPRESARIAL - 52_2024.docx
 
ATIVIDADE 1 - CUSTOS DE PRODUÇÃO - 52_2024.docx
ATIVIDADE 1 - CUSTOS DE PRODUÇÃO - 52_2024.docxATIVIDADE 1 - CUSTOS DE PRODUÇÃO - 52_2024.docx
ATIVIDADE 1 - CUSTOS DE PRODUÇÃO - 52_2024.docx
 
Boas práticas de programação com Object Calisthenics
Boas práticas de programação com Object CalisthenicsBoas práticas de programação com Object Calisthenics
Boas práticas de programação com Object Calisthenics
 
ATIVIDADE 1 - ESTRUTURA DE DADOS II - 52_2024.docx
ATIVIDADE 1 - ESTRUTURA DE DADOS II - 52_2024.docxATIVIDADE 1 - ESTRUTURA DE DADOS II - 52_2024.docx
ATIVIDADE 1 - ESTRUTURA DE DADOS II - 52_2024.docx
 
Padrões de Projeto: Proxy e Command com exemplo
Padrões de Projeto: Proxy e Command com exemploPadrões de Projeto: Proxy e Command com exemplo
Padrões de Projeto: Proxy e Command com exemplo
 
ATIVIDADE 1 - GCOM - GESTÃO DA INFORMAÇÃO - 54_2024.docx
ATIVIDADE 1 - GCOM - GESTÃO DA INFORMAÇÃO - 54_2024.docxATIVIDADE 1 - GCOM - GESTÃO DA INFORMAÇÃO - 54_2024.docx
ATIVIDADE 1 - GCOM - GESTÃO DA INFORMAÇÃO - 54_2024.docx
 

jQuery: Write less, do more

  • 1. http://netponto.org 10ª Reunião Presencial - 15/05/2010 jQuery: writeless, do moreHugo Santos
  • 2. Hugo Santos Consultor, Agap2 Consulting Freelancer Microsoft Certified Professional Developer ASP.NET 3.5
  • 3. Agenda Apresentação do jQuery Aplicações do jQuery? Vantagens Integração jQuery & VS2010 Plugins jQuery UI jQueryTemplating
  • 4. 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
  • 5. Apresentação do jQuery Site oficial http://jquery.com Core Documentação Exemplos Plugins Comunidades
  • 6. 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
  • 7. Vantagens Resolução de incompatibilidades entre os browsers Redução de código Melhor performance Reutilização de código Vasta galeria de plugins Comunidade activa Apoio Microsoft
  • 8. DEMO 1: Setup do ambiente de Desenvolvimento demonstração
  • 9. Integração VS2010 & jQuery Suporte nativo no VS2010 para jQuery Web forms & MVC Documentação Intellisense Codesnipets
  • 10. DEMO 2: Primeirospassos… demonstração
  • 11. Plugins Ajax, Animação, Dados, Forms, Layout, Media, Validação, Menus, UI, etc Os meus preferidos: Validationplugin - http://www.unwrongest.com/projects/valid8/ TableSorterplugin - http://www.datatables.net/ jQuerylightboxplugin - http://leandrovieira.com/projects/jquery/lightbox/ highCharts - http://www.highcharts.com/
  • 12. jQuery UI Conjunto de widgets e tools que aceleram o desenvolvimento e proporcionam uma interface fluida implementada em jQuery Themebuilder permite customizar o aspecto dos controlos …ver também o jQueryTools - http://flowplayer.org/tools/index.html
  • 13. jQuery UI Widgets Accordion Autocomplete Button Datepicker Dialog Progressbar Slider
  • 14. jQuery UI Interacções Draggable Droppable Resizable Selectable Sortable
  • 15. DEMO 3: jQuery UI demonstração
  • 16. jQueryTemplating 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
  • 17. DEMO 4: jQuerytemplating demonstração
  • 19. Referências jQuery Project http://www.jquery.org jQuery: Writeless, 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-data-linking-and-microsoft-contributing-to-jquery.aspx
  • 21. Obrigado! Hugo Santos hugo@hugosantos.com linkedin.com/in/hfsantos twitter.com/h_fsantos

Hinweis der Redaktion

  1. CDNPlugins: validation; table sorting