REST, jQuery y otros Frameworks JS

34
REST, JQUERY Y OTROS FRAMEWORKS NOVIEMBRE 2012

description

Slides de una charla que dí en las jornadas del GUL-UC3M en noviembre del 2012.

Transcript of REST, jQuery y otros Frameworks JS

Page 1: REST, jQuery y otros Frameworks JS

REST,JQUERYYOTROSFRAMEWORKS

NOVIEMBRE2012

Page 2: REST, jQuery y otros Frameworks JS

1GULUC3M

Page 3: REST, jQuery y otros Frameworks JS

1.1¿QUIÉNESSOMOS?ElGULeselGrupodeUsuariosdeLinux.Somosungrupodepersonasconinquietudesentornoalosordenadoresylainformáticay,enconcreto,conlaideacomúndelautilizaciónypromocióndelsoftwarelibre.Quedamosdevezencuandoyorganizamosactividadessobretodoesto.Elpuntodeunióndetodoelgrupoeslalistadecorreo,dondecualquierapuedeapuntarseyparticiparpreguntandodudas,contestándolas,proponiendoactividades,ayudandoallevarlasacabooproponiendoideas.

Page 4: REST, jQuery y otros Frameworks JS

1.2¿DÓNDEENCONTRARNOS?Lista:Twitter:@Web:Ftp:Blog:Podcast:Linkedin:

[email protected]

http://www.gul.uc3m.esftp://ftp.gul.uc3m.eshttp://planeta.gul.uc3m.es/

http://holamundo.gul.es/http://www.linkedin.com/groups?

gid=3451836

Page 5: REST, jQuery y otros Frameworks JS

2ACERCADE

Page 6: REST, jQuery y otros Frameworks JS

2.1ADOLFOSANZDEDIEGOAntiguoprogramadorwebJEEHoyendía:ProfesordeFPdeinformática:Hardware,SistemasOperativosRedes,Programación

FormadorFreelance:Java,AndroidJavaScript,jQueryJSF,Spring,HibernateGroovy&Grails

Megustaprogramar

Page 7: REST, jQuery y otros Frameworks JS

2.2¿DONDEENCONTRARME?Minick:asanzdiegoAboutMe:GitHub:Twitter:Blog:LinkedIn:Google+:

http://about.me/asanzdiegohttp://github.com/asanzdiegohttp://twitter.com/asanzdiego

http://asanzdiego.blogspot.com.eshttp://www.linkedin.com/in/asanzdiego

http://plus.google.com/+AdolfoSanzDeDiego

Page 8: REST, jQuery y otros Frameworks JS

2.3LICENCIAEsteobraestábajounalicencia:

Elcódigofuentedelosprogramasestánbajounalicencia:

CreativeCommonsReconocimiento-CompartirIgual3.0

GPL3.0

Page 9: REST, jQuery y otros Frameworks JS

3REST

Page 10: REST, jQuery y otros Frameworks JS

3.1¿QUÉESREST?REST(RepresentationalStateTransfer)esunatécnicadearquitecturasoftwareparasistemashipermediadistribuidoscomolaWorldWideWeb.Esdecir,unaURL(UniformResourceLocator)representaunrecursoalquesepuedeaccederomodificarmediantelosmétodosdelprotocoloHTTP(POST,GET,PUT,DELETE).VerArtículosdeRESTdeEnriqueAmodeoRubio

Page 11: REST, jQuery y otros Frameworks JS

3.2¿PORQUÉREST?Esmássencillo(tantolaAPIcomolaimplementación).Esmásrápido(peticionesmáslijerasquesepuedecachear).Esmultiformato(HTML,XML,JSON,etc.).SecomplementamuybienconAJAX.

Page 12: REST, jQuery y otros Frameworks JS

3.3EJEMPLOAPIGET http://host.com/person Devuelvetodas

laspersonasPOST http://host.com/person Crearunanueva

personaGET http://host.com/person/123 Devuelvela

personaconid=123

PUT http://host.com/person/123 Actualizalapersonaconid=123

DELETE http://host.com/person/123 Borralapersonaconid=123

Page 13: REST, jQuery y otros Frameworks JS

3.4MANEJODEERRORESSepuedenutilizarloserroresdelprotocoloHTTP:200OKStandardresponseforsuccessfulHTTPrequests201Created202Accepted301MovedPermanently400BadRequest401Unauthorised402PaymentRequired403Forbidden404NotFound405MethodNotAllowed500InternalServerError501NotImplemented

Page 14: REST, jQuery y otros Frameworks JS

4JQUERY

Page 15: REST, jQuery y otros Frameworks JS

4.1¿QUÉESJQUERY?EsunalibreríaJavaScriptquesimplificaelmanejodelDOMdelHTML.Funcionaseleccionandounoovarioselementosyejecutandounaacciónsobreellos."Writeless,domore."LamejorAPIquehevistojQueryQuickAPIReference

Page 16: REST, jQuery y otros Frameworks JS

4.2SELECTORESUtilizalosmismosqueCSS,yalgunomáspropio.

Page 17: REST, jQuery y otros Frameworks JS

4.3EVENTOSjQueryestápensadopararecogery/olanzareventos.Estoseventosnormalmentesoneventosderatón,deteclado.TambiénmanejaloseventosdecambiodeestadodealgúnelementodelDOM.

Page 18: REST, jQuery y otros Frameworks JS

4.4CSSPodemoscambiartantoelatributostyle,comolasclasesdeunelemento.

Page 19: REST, jQuery y otros Frameworks JS

4.5EFECTOSOcultar,mostrar,desvanecerelementos.TambiénpodemoshaceranimacionescambiandoelCSS.VertambiénCSS3transitionsjQueryplugin

Page 20: REST, jQuery y otros Frameworks JS

4.6HTMLPodemoscambiarelDOMdelHTML:añadiendotextotantoalprincipiocomoalfinaldeunelemento,cambiandoeltextodeunelemento,añadiendounelementotantoantescomodespuésdeunelemento,eliminandoelementos.

Page 21: REST, jQuery y otros Frameworks JS

4.7AJAXSimplificalaspeticionesAJAX,pudiendomanejarsuestado.

Page 22: REST, jQuery y otros Frameworks JS

4.8PLUGINSExisteungrancatálogodeplugins.Lospluginssecreandeunaformamuysencilla.VerTutorialOficial

Page 23: REST, jQuery y otros Frameworks JS

5JQUERYUI

Page 24: REST, jQuery y otros Frameworks JS

5.1¿QUÉESJQUERYUI?Sonunconjuntodecomponentesvisuales,con

.LasclasesCSSsepuedenreutilizar.Ver

Lasdemosestánmuybien,conmuchosymuybuenosejemplos

temaspersonalizablesThejQuery

UICSSFramework

jQueryUIDemos

Page 25: REST, jQuery y otros Frameworks JS

5.2COMPONENTESInteractions:draggable,droppable,resizable,selectable,sortableWidgets:accordion,autocomplete,button,datepicker,dialog,menu,progressbar,slider,spinner,tabs,tooltipEfects:blind,bounce,clip,drop,explode,fade,fold,highlight,pulsate,scale,shake,slide,transfer

Page 26: REST, jQuery y otros Frameworks JS

6JQUERYMOBILE

Page 27: REST, jQuery y otros Frameworks JS

6.1¿QUÉESJQUERYMOBILE?Soncomponentespensadosparaaplicacionesmóviles.Estánpensadosparaelmanejodeeventostáctiles.

Page 28: REST, jQuery y otros Frameworks JS

6.2EJEMPLOSTodaladocumentacióndelsiteestáhechaconelpropioframework.VerVer

jQueryMobilejQueryMobileDocumentation

Page 29: REST, jQuery y otros Frameworks JS

7OTROSFRAMEWORKS

Page 30: REST, jQuery y otros Frameworks JS

7.1BACKBONE.JSimplementaelparadigmaMVCen

cliente.Permitecrearunmodeloqueseactualizaconelservidor(medianteRESTyAJAX),yquerefrescalasvistasquetengaasociadasenelcliente.VerVer

backbone.js

Tutorials,blogpostsandexamplesitesTutplusBackboneTutorial

Page 31: REST, jQuery y otros Frameworks JS

7.2REQUIRE.JSpermitelagestióndedependencias

entremódulos.Losmódulossecargandeformaasíncrona(segúnsevayannecesitando).Ver

require.js

OrganizingyourapplicationusingModuleswithrequire.js

Page 32: REST, jQuery y otros Frameworks JS

7.3DUST.JSesunmotordeplantillasenJavaScript.dust.js

Page 33: REST, jQuery y otros Frameworks JS

7.4LESSCSS.JSpermitecreararchivosCSSdeforma

programática.Sepuedenusararchivos.lessylalibreríaJavaScript(desarrollo)o"compilar"losarchivos.lessenarchivos.css(producción)Aquíhay

lesscss.js

unbuentutorialsobreless

Page 34: REST, jQuery y otros Frameworks JS

7.5MODERNIZR.JSdetectalascaracterísticasCSS3y

HTML5quesoportaelnavegador.modernizr.js