REST, jQuery y otros Frameworks JS

Post on 29-Jun-2015

269 views 10 download

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

REST,JQUERYYOTROSFRAMEWORKS

NOVIEMBRE2012

1GULUC3M

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

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

gul@gul.uc3m.esguluc3m

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

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

gid=3451836

2ACERCADE

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

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

Megustaprogramar

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

2.3LICENCIAEsteobraestábajounalicencia:

Elcódigofuentedelosprogramasestánbajounalicencia:

CreativeCommonsReconocimiento-CompartirIgual3.0

GPL3.0

3REST

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

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

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

3.4MANEJODEERRORESSepuedenutilizarloserroresdelprotocoloHTTP:200OKStandardresponseforsuccessfulHTTPrequests201Created202Accepted301MovedPermanently400BadRequest401Unauthorised402PaymentRequired403Forbidden404NotFound405MethodNotAllowed500InternalServerError501NotImplemented

4JQUERY

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

4.2SELECTORESUtilizalosmismosqueCSS,yalgunomáspropio.

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

4.4CSSPodemoscambiartantoelatributostyle,comolasclasesdeunelemento.

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

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

4.7AJAXSimplificalaspeticionesAJAX,pudiendomanejarsuestado.

4.8PLUGINSExisteungrancatálogodeplugins.Lospluginssecreandeunaformamuysencilla.VerTutorialOficial

5JQUERYUI

5.1¿QUÉESJQUERYUI?Sonunconjuntodecomponentesvisuales,con

.LasclasesCSSsepuedenreutilizar.Ver

Lasdemosestánmuybien,conmuchosymuybuenosejemplos

temaspersonalizablesThejQuery

UICSSFramework

jQueryUIDemos

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

6JQUERYMOBILE

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

6.2EJEMPLOSTodaladocumentacióndelsiteestáhechaconelpropioframework.VerVer

jQueryMobilejQueryMobileDocumentation

7OTROSFRAMEWORKS

7.1BACKBONE.JSimplementaelparadigmaMVCen

cliente.Permitecrearunmodeloqueseactualizaconelservidor(medianteRESTyAJAX),yquerefrescalasvistasquetengaasociadasenelcliente.VerVer

backbone.js

Tutorials,blogpostsandexamplesitesTutplusBackboneTutorial

7.2REQUIRE.JSpermitelagestióndedependencias

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

require.js

OrganizingyourapplicationusingModuleswithrequire.js

7.3DUST.JSesunmotordeplantillasenJavaScript.dust.js

7.4LESSCSS.JSpermitecreararchivosCSSdeforma

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

lesscss.js

unbuentutorialsobreless

7.5MODERNIZR.JSdetectalascaracterísticasCSS3y

HTML5quesoportaelnavegador.modernizr.js