ARQUITECTURAWEBADOLFOSANZDEDIEGO

ENERO2014

1ACERCADE

1.1NDICEContenidos:AcercadeIntroduccinHistoriaevolutivadelaWebArquitecturawebEntornodeejecucinenservidorTecnologasdeservidorEntornodeejecucinenclienteTecnologasdecliente

1.2ADOLFOSANZDEDIEGOAntiguoprogramadorwebJEEHoyenda:ProfesordeFPdeinformtica:Hardware,SistemasOperativosRedes,Programacin

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

Megustaprogramar

1.3HACKALOVER

Paralosamantesdeloshackathones.Meetup:

LinkedIn:

Tumblr:Twitter:YouTube:

http://www.meetup.com/Hackathon-Lovers/

http://www.linkedin.com/groups/Hackathon-Lovers-6510465

http://hackathonlovers.tumblr.com/http://twitter.com/HackathonLovers

http://www.youtube.com/channel/UCRwSe7jK-y62BMvIiNBV1qw

1.4TWEETSSENTIMENT

Esunanalizadordetweetsqueextraeinformacinsemnticaparaconocersielsentimientogeneraldelostweetsdeundeterminadotemaespositivoonegativo.Web:Twitter:

http://tweetssentiment.com/http://twitter.com/TweetsSentiment

1.5DONDEENCONTRARME?Minick:asanzdiegoAboutMe:Blog:GitHub:Google+:

LinkedIn:SlideShare:Twitter:

http://about.me/asanzdiegohttp://asanzdiego.blogspot.com.es

http://github.com/asanzdiego

http://plus.google.com/+AdolfoSanzDeDiegohttp://www.linkedin.com/in/asanzdiegohttp://www.slideshare.net/asanzdiego

http://twitter.com/asanzdiego

1.6CRDITOSAgradecimientosaMicaelGallego

Introduccinalasaplicacionesweb

Tecnologasdedesarrollodeaplicacionesweb

Estastransparenciasestnhechascon:

http://twitter.com/micael_gallego

http://www.slideshare.net/micaelgallego/qu-es-la-web-30036167

http://www.slideshare.net/micaelgallego/tema2-tecnologas-de-desarrollo-de-aplicaciones-web

https://github.com/asanzdiego/marckdownslides

1.7LICENCIAEstastransparenciasestnbajounalicencia:

Elcdigodelosprogramasestnbajounalicencia:

CreativeCommonsReconocimiento-CompartirIgual3.0

GPL3.0

1.8FUENTESOtrosformatos:SlideShare

DeckSlides

RevealSlides

PlainHTML

Markdown

http://www.slideshare.net/asanzdiego/arquitectura-web-30984535

http://asanzdiego.github.io/arquitectura-web/export/arquitectura-web-deck-slides.html

http://asanzdiego.github.io/arquitectura-web/export/arquitectura-web-reveal-slides.html

http://asanzdiego.github.io/arquitectura-web/export/arquitectura-web.html

http://raw.github.com/asanzdiego/arquitectura-web/master/md/arquitectura-web.md

2INTRODUCCIN

2.1QUESINTERNET?InternetesunconjuntodescentralizadoderedesdecomunicacininterconectadasqueutilizanlafamiliadeprotocolosTCP/IP.Funcionacomounaredlgicanica,dealcancemundial,aunqueestformadapormultitudderedesfsicasheterogneas.UnodelosserviciosquemsxitohatenidoenInternethasidolaWorldWideWeb(WWW,o"laWeb"),aunqueeshabituallaconfusinentreambostrminosporgentenoexperta.

2.2QUESLAWEB?LaWebesunconjuntodeprotocolos,estndaresytecnologas,basadasenInternet,diseadooriginalmenteparalaconsultaremotadeinformacinenarchivosdehipertexto.

2.3OTROSSERVICIOSExistenmuchosotrosserviciosyprotocolosenInternet:Envoyrecepcindecorreoelectrnico(POP3,IMAP,SMTP)Transmisindearchivos(SSH,FTP,P2P,HTTP)Mensajerainstantnea(IRC,XMPP)Transmisindecontenidomultimedia(VoIP,IPTV,RTP)Conexinremotaporconsola(SSH,Telnet)Conexinremotagrfica(VNC)

2.4LAWEB1.0Alprincipio,elusuariosloleacontenidopublicadoporotros.Erauncontenidomuyesttico,ymuydifcildeeditarporelpropiousuario.Elnavegadorweberalanicaaplicacin"conectada",yhayquereconocerlo...laweberasobretodoparaFrikis.

2.5LASCOSASEMPIEZANACAMBIARPocoapocolastecnologassedesarrollanylosusuariosempiezanatenermsfacilidadesparaeditarelpropiocontenido.Googleseempiezaapopularizar,naceBlogger,WordPress,laWikipedia,LinkedIn...

2.6NACELAWEB2.0En2004DaleDougherty(O'Reilly)acuaeltrminoWeb2.0parareferirseaLaWebcomounaplataformaconaplicacionesligeras,dinmicasyenconstanteevolucin.ConlaWeb2.0,laspginaswebdejandesersimplesdocumentosonlineparaconvertirseenaplicacionesweb,yesentoncescuandolosusuariostomanelcontroldeloscontenidos.

2.7WEB1.0VSWEB2.0

3HISTORIAEVOLUTIVADELAWEB

3.1LOSORGENESDEINTERNETEn1962,acausadelaguerrafraconlaURSS,lasFuerzasAreasdeEstadosUnidospidieronaunreducidogrupodeinvestigadoresquecrearaunareddecomunicacionesmilitaresquepudieraresistirunataquenuclear.En1964,PaulBarantuvolaideadecrearunaredenformadetelaraa.Elconceptodeestaredsebasabaenunsistemadescentralizado,demaneraquelaredpudieraseguirfuncionandoaunquesedestruyeranunoovariosequipos.

3.2ARPANET(1969)

En1969,elproyectomilitarARPA(AgenciadeProyectosdeInvestigacinAvanzados,unadivisindelMinisteriodeDefensadeEstadosUnidos)crelaredexperimentalARPANETcuyofineraconectarlasprincipalesuniversidadesdeEEUU.

3.3NACELAWEB(1989)

En1989,TimBerners-LeejuntoaRobertCailliaucreanlaWorldWideWeb.Habilitaronlosdominiosodireccionesconletras(envezdeloscomplejoscdigosIP).Tambininventaronlosenlaces.EstomarcelnacimientodeLaWebcomoloconocemoshoyenda.

3.4YAHOO(1994)

En1994,JerryYangyDavidFilo,estudiantesdeStanford,creanYahoo!undirectoriodesitiossegnlacategoradesucontenido,paraasintentarponerordendentrodelbazar,cadadamsextenso,queseestabaconvirtiendoInternet.

3.5HOTMAIL(1996)

En1996,selanzHotmailelcorreoelectrnicogratuitodeMicrosoft.

3.6GOOGLE(1997)

En1997,LarryPageySergeyBrin,dosestudiantesdeStanford,creanGoogle,unsistemaqueanalizalosenlacesqueconectanlossitiosdeInternetparahallarinformacindemaneraefectiva.

3.7LAS'.COM'(1998)

En1998,bancoseinversionistasvolcaronmilesdemillonesdedlaresalfinanciamientodetodotipodeempresasbasadasenlaRed,conocidascomolas'punto-com'.

3.8NAPSTER(1998)

En1998,SeanParkeryShawnFanningcreanNapsterunodelosprimerosprogramasP2P.

3.9XMPP(1999)

En1999,naceXMPP,unprotocoloabiertoideadoparalamensajerainstantnea.

3.10BLOGGER(1999)

En1999,tambinnaceBlogger,unserviciowebparagestionarblogs.

3.11LABURBUJA(2001)

En2001,estallalaburbujadelas'punto-com'quellevalaquiebraalamayora.

3.12WIKIPEDIA(2001)

En2001,salialaluzWikipedia,unaenciclopediavirtualqueadiariosealimentaysecorrigeporsuspropiosusuarios.

3.13THEPIRATEBAY(2003)

En2003,naceenSueciaelportaldebsquedadetorrentsThePirateBay.

3.14LINKEDIN(2003)

En2003,selanzalaredsocialdecontactosprofesionalesLinkedIn.

3.15WORDPRESS(2003)

En2003,selanzalaplataformadegestindeblogsWordPress.

3.16GMAIL(2004)

En2004,naceGMailelcorreoelectrnicogratuitodeGoogle.

3.17FACEBOOK(2004)

En2004,MarkZuckerberg,estudiantedelaUniversidaddeHarvard,creaFacebook,unadelasredessocialesmsconocidas.

3.18YOUTUBE(2005)

En2005,conelaugedelabandaancha,elvdeoenlneadejadeserunautopayvelaluzelfamosoportaldeYoutube.

3.19TWITTER(2006)

En2006,JackDorseylanzalafamosaredsocialdemicrobloggingTwitter.

3.20HOYEn2009,Internetsuperalos180millonesdesitiosweb.En2012,Facebooksuperalos1000millonesdeusuarios,yesttraducidoa70idiomas.En2013,LinkedInsuperalos225millonesdeusuariosenms200pasesyterritorios.En2013,Twittersuperalos280millonesdeusuariosactivos,ylos480millonesdeperfiles.En2013,sesuperanlos1000millonesdedispositivosAndroidenelmundo.

4ARQUITECTURAWEB

4.1CLIENTE-SERVIDORLaarquitecturawebesunaarquitecturacliente-servidorformadaporlossiguienteselementos:Unnavegador:Hacedeclienteyrealizapeticionessolicitandorecursosalosservidoresweb.Unservidorweb:Recibepeticionesdeclientesyrespondeaesaspeticionesenviadounrecursoonotificandounerror.Elprotocolohttp:EselprotocolobasadoenTCP/IPqueseutilizaparaqueelnavegadorrealicelaspeticionesalservidorwebyesteresponda.

4.2PGINASESTTICASEnloscomienzosdelaweb,todoslossitiosweberanconjuntosdepginaswebenformadeficherosHTML.Lossitiosweberancomolibrosperoconnavegacinmedianteenlacesenvezdenavegacinsecuencial.Laedicindesitioswebserealizabaconherramientassimilaresalaedicindedocumentos(p.e.MicrosoftFrontPage)Aestaspginasselasdenominabapginaswebestticas.

4.3PGINASDINMICASPocoapocolaspginasempezaronasermsdinmicas.EnvezdeserficherosHTMLeneldisco,empezabanaserpequeosprogramasqueseejecutabancadavezqueunusuariopedaunapgina.Inicialmenteerancambiosmnimos(contadordevisitas,fechaactual,cambiarlaimagendecabecera,...)conlenguajesdescriptcomoPERLyPHP.

4.4APLICACIONESWEBLoscambiosserancadavezmsprofundosylaspginaswebseconvertiranencompletasaplicacionesweb.UnaaplicacinwebesaquellaquelosusuariosutilizanaccediendoaunservidorwebatravsdeInternetmedianteunnavegador.TienenlaventajadeserindependientesdelSistemaOperativo,ydequesonfcilesdeactualizarymantener.

5ENTORNODEEJECUCINENSERVIDOR

5.1SERVIDORESWEBESTTICOSAlprincipio,laformadetrabajarconlosserivoderesweberadelasiguienteforma:Primero,elnavegadorhaceunapeticinalservidormediantehttp.Seguidamente,elservidortransformalaURLenunarutaelsistemadearchivosydevuelveelarchivoalnavegador.

Enestecaso,paraunamismaURLelservidorsiemprevaadevolverelmismorecurso,siendonormalmenteestosrecursosficherosHTML,CSS,JavaScript,imgenes...

5.2SERVIDORESWEBDINMICOS(I)Perohoyenda,lamayoradelosservidoreswebpermitenqueencadapeticinseejecuteunprogramaquegeneradinmicamenteelrecursoqueseenvaalusuario(server-sidescripting).AhoraparaunamismaURLelservidorpuededevolverunrecursodistinto.Aestecontenidogenerado"alvuelo"seledenominacontenidodinmico,encontraposicinalcontenidoestticoobtenidodelsistemadearchivos.

5.3SERVIDORESWEBDINMICOS(II)Esbastantehabitualqueelcontenidodinmicosegenereconlainformacindeunabasededatos.Losservidoreswebconcontenidodinmiconosloenvanrecursosalnavegador,tambinpuedenprocesarinformacinquelesllegadelmismo:Datoscontenidosenformulariosweb.Ficherosenviadosdesdeelnavegador.Informacincodificadaenlosenlacesquepulsanlosusuarios.

Estafuncionalidadpermiteeldesarrollodecompletasaplicacionesweb.

5.4HISTORIADELOSSERVIDORESWEBLosprincipalesservidoreswebsonohansido:CERNhttpd(1990)Apache(1995)IIS(1995)NginX(2004)

5.5CERNHTTPD(1990)CreadoporTimBerners-Leeyotros,fuelprimerservidorweb.AlprincipioslocorraenordenadoresNeXTSTEP,peromsadelantefueportadoaotrossistemas.Enagostode1991,TimBerners-LeeanunciladisponibilidaddelcdigofuenteydelsoftwareWorldWideWebdesdeelsitioFTPCERN.EldesarrollodelCERNhttpdfueadquiridoporW3Cylaltimaversines1996,yhoyesttotalmenteendesuso.

5.6APACHE(1995)

Lanzadoen1995ydesarrolladoporlaApacheSoftwareFundation,hoyendaeselservidormspopular(Enerode2014con42%cuota)EsunservidorwebmultiplataformayconunalicenciadeSoftwareLibre(ApacheLicense)SunombrecompletoesApacheHTTPServerProject.

5.7IIS(1995)

Lanzadotambinen1995ydesarrolladoporMicrosoft,hoyendaeselsegundoservidormsusado(Enerode2014con30%cuota)EstintegradoenWindowsServer,ysecompaginabienconlabasededatosMSSQLServer.SunombrecompletoesMicrosoftInternetInformationServices.

5.8NGINX(2004)

Lanzadoen2004ydesarrolladoporelrusoIgorSysoev,hoyendaeseltercerservidormsusadoa(Enerode2014con14%cuota)EsunservidormultiplataformayconunalicenciadeSoftwareLibre(tipoBSD)Esmuyrpidoysesueleusarcomobalanceadordecarga.

5.9CUOTASERVIDORESWEB

http://news.netcraft.com

6TECNOLOGASDESERVIDOR

6.1INTRODUCCINLosestndaressonmuyimportantesenlosnavegadoresweb(HTML,CSS,JavaScript)porquelawebtienequesercompatibleconcualquierdispositivo.Encambiolosestndaresnosontannecesariosenelservidor,ycadaorganizacindesarrollasuservidorconlatecnologadesueleccin.

6.2CUOTASTECNOLOGAS

http://w3techs.comExistenmultituddetecnologasdeconstruccindeaplicacioneswebenelservidor,siendolasmsusadas:PHP,ASP.NET,JavaEE.

6.3OTRASTECNOLOGAS

Existenotrosmenosusadas,peroconungrancrecimientodepupularidad:RubyonRails,Grails(Groovy),Django(Python),Node(JavaScript),etc.

6.4PHP(I)

PHP(acrnimorecursivoquesignificaPHPHypertextPre-processor)esunlenguajedeprogramacinoriginalmentediseadoparaeldesarrollowebdecontenidodinmico.FueunodelosprimerosenpermitircombinarseconelHTMLdelpropiodocumento.

6.5PHP(II)FuecreadooriginalmenteporRasmusLerdorfen1994yactualmenteellenguajesiguesiendodesarrolladoconunalicencialibre(PHPlicense)porlacomunidadenPHPGroup,puesnoexisteunorganismodeestandarizacin.Puedeserusadoenlamayoradelosservidoreswebyencasitodoslossistemasoperativossinningncosto.

6.6PHP(III)EjemploscomoFacebookoWordpresssonsindudaunamuestraimportantedelapopularidaddePHP.

6.7PHP(IV)Eslatecnologadeprogramacindelladodelservidormsusadaenelpasadoyenelpresente.SeintegranormalmenteconApacheyMySQLenentornosLinuxenunpaquetellamadoLAMP

6.8PHP(V)ExistenmultituddeframeworksparaeldesarrollodeaplicacionesPHP:CakePHP,CodeIgniter,Symfony,YiiZend,etc.

6.9ASP.NET(I)

ASP.NETesunframeworkparaaplicacioneswebdesarrolladoporMicrosoftyusadoparaconstruirpginaswebdinmicas.EssucesoradelatecnologaActiveServerPages(ASP),tieneunalicenciapropietariayestpensadaparaserusadaenplataformasWindows.EstpensadaparaserprogramadoenellenguajeC#,aunquepermitecualquierlenguajedelaplataforma.NET.

6.10ASP.NET(II)LamayoradelaslibrerasparaASP.NETsonlasoficialesproporcionadasporMicrosoft:(I)WebPages:permitecombinarHTMLconcdigoASP(similaraJSPyPHP)WebForms:permiteconstruiraplicacioneswebbasadasencomponentes(similaraJSF)MVCFramework:permitedesarrollaraplicacioneswebusandoelpatrnmodelo-vista-controlador

6.11ASP.NET(III)LamayoradelaslibrerasparaASP.NETsonlasoficialesproporcionadasporMicrosoft:(II)AJAX:permitelaactualizacindedatossinlarecargacompletadeunapginaweb.EntityFramework:permitemapearobjetosalparadigmarelacional(similaraJPA)DynamicData:permitecrearaplicacionesweborientadasadatos(similaraRubyonRails)

6.12JAVAEE(I)

Javaesunlenguajedeprogramacindepropsitogeneral,concurrente,orientadoaobjetosybasadoenclasescreadoporJamesGoslingdeSunMicrosystemsypublicadoen1995.SuscomponentessongeneralmentecompiladasabytecodeparaquepuedanejecutarseencualquiermquinavirtualJava(JVM)sinimportarlaarquitecturadelacomputadorasubyacente.

6.13JAVAEE(II)JavajuntoconCesellenguajemspopularenelndiceTIOBE.

http://www.tiobe.com/

6.14JAVAEE(III)JavaEEeslaedicinempresarialdelaplataformaJava(lenguaje+JVM+bibliotecas),yestdesarrolladaporunacoalicindeempresaslideradasporOracle,IBM,RedHat,etc.Esunatecnologamuyusadaanivelempresarial,ybastanteestandarizadapuestieneunaorganizacindeestandarizacinpropiallamadaJavaCommunityProcess(JCP)quedefinelosestndaresdelaplataforma.

6.15JAVAEE(IV)

6.16JAVAEE(V)EstndaresmsimportantesenJavaEE:(I)Servlets:permiteejecutardecdigoJavaanteunapeticinwebenunservidorJavaEE.Applets:permiteejecutardecdigoJavadentrodeunnavegadorweb.JSP(JavaServerPages):permitecombinarHTMLconcdigoJavaparagenerarpginaswebdinmicas.JDBC(JavaDatabaseConectivity):permitelaconexinabasesdedatosrelacionalesdesdeJava.

6.17JAVAEE(VI)EstndaresmsimportantesenJavaEE:(II)JPA(JavaPersistenceAPI):permitemapearobjetosalparadigmarelacional(ORM,ObjectRelationalMapping)JSF(JavaServerFaces):permiteconstruiraplicacioneswebbasadasencomponentesreutilizables.JMS(JavaMessegeService):permitelacreacinygestindecolasdemensajesentreaplicaciones.

6.18JAVAEE(VII)TodaaplicacinwebJavaEEtienequeejecutarseenunaservidordeaplicacionesJavaEE(aunqueluegoseintegreenApache,NginXoIIS)Existenmuchostiposdeservidores,dependiendodesusfuncionalidades/rendimientoydesulicencia/coste.

6.19JAVAEE(VIII)ParadesarrollaraplicacionesJavaEEseutilizanIDEsyplugins:Eclipse:Fundacin.Muchadiversidad,faltadeintegracin.Softwarelibre.Netbeans:Oracle.Muyintegrado.Softwarelibre.IntelliJ:Jetbrains.Muyintegrado.Propietario.

6.20BASESDEDATOSLasbasesdedatostienenunpapelmuyimportanteeneldesarrollodeaplicacionesweb.Lasmspopulareshansidolasbasesdedatosrelacionales,perocadavezmsseusanlasbasesdedatosNoSQL.

6.21BBDDRELACIONALES

Sonlasbasesdedatosmspopulareseneldesarrollodeaplicaciones.Enelladodelsoftwarelibrelasmsusadasson:PostgreSQLyMySQL,Yenladodelsoftwareprivativolasmsusadasson:OracleyMicrosoftSQLServer.

6.22BBDDNOSQL

Comolasaplicacioneswebtienenmuchasnecesidadesdeescalabilidadytoleranciaafallos,hayunanuevafamiliadebasesdedatosquesedenominangenricamenteNoSQL,quesepuedeinterpretarcomo:'NoSQL'ocomo'NotOnlySQL'

6.23TEOREMACAP(I)ElteoremaCAPoteoremaBrewer,dicequeensistemasdistribuidosesimposiblegarantizaralavez:consistencia,disponibilidadytoleranciaaparticiones.

6.24TEOREMACAP(II)

6.25TEOREMACAP(III)Definiciones:Consistencia:alrealizarunaconsultaoinsercinsiempresetienequerecibirlamismainformacin,conindependenciadelnodooservidorqueproceselapeticin.Disponibilidad:quetodoslosclientespuedanleeryescribir,aunquesehayacadounodelosnodos.Toleranciaafallos:implicaqueelsistematienequeseguirfuncionandoaunqueexistanfallosocadasparcialesquedividanelsistema.

6.26TEOREMACAP(IV)Segnlascondicionesquecumplan:AP:garantizandisponibilidadytoleranciaafallos,peronolaconsistencia.Algunasconsiguenunaconsistenciaparcialatravsdelareplicacinylaverificacin.CP:garantizanconsistenciaytoleranciaafallos.Paralograrlaconsistenciaatravsdelosnodos,sacrificanladisponibilidad.CA:garantizanconsistenciaydisponibilidad,perotienenproblemasconlatoleranciaafallos.Esteproblemalosuelengestionarreplicandolosdatos.

6.27TIPOSDEBDNOSQLExisten4tiposdebasesdedatosNoSQL:OrientadasadocumentosOrientadasacolumnasDeclavevalorEngrafo

6.28ORIENTADASADOCUMENTOSGestionandatossemiestructuradosalmacenadosenalgnformatoestndarcomoXMLoJSON.Sonlasmsverstilesysepuedenutilizarenmuchosproyectos,inclusoaquellosquetradicionalmentefuncionaransobrebasesdedatosrelacionales.Enestacategoraencontramos:MongoDB:probablementelamsfamosadelmomento.AlgunascompaaslautilizansonFoursquareoeBay.CouchDB:esdeApacheysusdatossonaccesiblesvaunaAPIREST.EsutilizadaporcompaascomoCreditSuisseylaBBC.

6.29ORIENTADASACOLUMNASEstnpensadaspararealizarconsultasyagregacionessobregrandescantidadesdedatos.Funcionandeformaparecidaalasbasesdedatosrelacionales,peroalmacenandocolumnasdedatosenlugarderegistros.Enestacategoraencontramos:Cassandra:incluidaenestaseccin,aunqueenrealidadsigueunmodelohbridoentreorientadaacolumnasyclave-valor.EsutilizadaporFacebookyTwitter.HBase:EscritaenJavaymantenidaporelProjectoHadoopdeApache,seutilizaparaprocesargrandescantidadesdedatos.LautilizanFacebook,TwitteroYahoo.

6.30DECLAVEVALORSonlasmssencillasdeentender.Simplementeguardantuplasquecontienenunaclaveysuvalor.Cundosequiererecuperarundato,simplementesebuscaporsuclaveyserecuperaelvalor.Enestacategoraencontramos:DynamoDB:desarrolladaporAmazon,esunaopcindealmacenajequepodemosusardesdelosAmazonWebServices.LautilizanelWashingtonPostyScopely.Redis:desarrolladaenCydecdigoabierto,esutilizadaporCraiglistyStackOverflow(amododecach).

6.31ENGRAFOBasadasenlateoradegrafosutilizannodosyaristaspararepresentarlosdatosalmacenados.Sonmuytilesparaguardarinformacinenmodelosconmuchasrelaciones,comoredesyconexionessociales.Enestacategoraencontramos:InfiniteGraph:escritaenJavayC++porlacompaaObjectivity.Tienedosmodelosdelicenciamiento:unogratuitoyotrodepago.Neo4j:basededatosdecdigoabierto,escritaenJavaporlacompaaNeoTechnology.UtilizadaporcompaascomoHP,InfojobsoCisco.

7ENTORNODEEJECUCINENCLIENTE

7.1PGINASWEBESTTICASSonpginasenlasqueelnavegadorrenderizaelHTMLconestilosCSSeimgenesperosinJavaScript.Enestaspginas,cadavezqueelusuariohaceclicenunenlace,elnavegadorrecargaporcompletolapginaweb.Lasprimeraspginasweberanas,yhoytodavasesiguenutilizandobastante:enpginaspersonales,en'landingspages',en'homepages',enpginasdedocumentacin,etc.

7.2PGINASWEBDINMICASElclienteesdinmicoporquelaspginasincluyencdigoJavaScriptqueseejecutaenelnavegador.DependiendodecmoseuseelJavaScriptenelcliente,lasaplicacionessepuedendividirentrestipos:JavaScriptparaefectosgrficos.JavaScriptconpeticionesensegundoplano(AJAX)SinglePageApplication.

7.3JAVASCRIPTPARAEFECTOSGRFICOSJavaScriptsedise,entreotrascosas,paraaadirefectosgrficosbsicosalaspginascuandoelCSSeramuylimitado.LagranmayoradelasaplicacioneswebqueexistenenInternetutilizanJavaScriptalmenosconestepropsito.

7.4JAVASCRIPTPETICIONESENSEGUNDOPLANO

JavaScriptseusatambinparanotenerquerecargarlapginacompleta,realizandopeticionesensegundoplanoqueactualizansloaquellaspartesdelapginanecesarias.AestatcnicaselaconocecomoAJAX(AsynchronousJavaScriptAndXML),ylagranmayoradelasaplicacionesdehoyendalousanparamejorarlaexperienciadelusuario.

7.5SINGLEPAGEAPPLICATIONEnestecaso,laaplicacinwebesunconjuntoderecursosHTMLyCSSestticosquesecarganenelnavegador,yelcontenidodinmicosecargaensegundoplanoconJavaScript.UnaSPAesunanicapginacuyocontenidovacambiandosegnelusuariointeractaconbotones,pestaas,etc.

7.6HISTORIADELOSCLIENTESWEBLosprincipalesclienteswebsonohansido:Mosaic(1993)NetscapeNavigator(1994)InternetExplorer(1995)Opera(1996)MozillaFirefox(2002)iPhone(2007)Android(2008)GoogleChrome(2008)FirefoxOS(2013)

7.7MOSAIC(1993)

En1993,salialaluzMosaicelprimernavegadorquepermitavergrficamentelosdocumentosescritosenHTMLyseguirlosenlacesentredistintossitiosweb.

7.8NETSCAPENAVIGATOR(1994)

En1994,naciNetscapeNavigator,comoevolucindeMosaic.

7.9INTERNETEXPLORER(1995)

En1995,MicrosoftlanzaelnavegadorInternetExplorer.Llegatenerunacuotadel70%,perohoyenda,aunqueeselsegundonavegadormsusado,estendeclivedesobretodoporelimpulsodeGoogleChrome.

7.10OPERA(1996)

En1996,naciOperaunnavegadorquenuncahatenidounagrancuotademercado.

7.11SAFARI(2003)

En2003,ApplelanzaSafari,unnavegadorbasadoenWebKit(libre).Hoyendaeselcuartonavegadormsusado.

7.12MOZILLAFIREFOX(2002)

En2002,naceelelnavegadorlibreMozillaFirefox.Hoyendaeseltercernavegadormsusado.

7.13IPHONE(2007)

En2007,SteveJobs,cofundadordeAppel,lanzaeliPhone.

7.14ANDROID(2008)

En2008,sevendeelprimersmartphoneconelsistemaoperativoAndroid.

7.15GOOGLECHROME(2008)

En2008,elgiganteGooglelanzaalmercardosupropionavegador:elGoogleChrome.Hoyendaeselnavegadormsutilizadoconmsdeun40%decuota.

7.16FIREFOXOS(2013)

En2013,lafundacinMozillalanzaelsistemaoperativoFirefoxOS.

7.17CUOTANAVEGADORES

http://gs.statcounter.com/

8TECNOLOGASDECLIENTE

8.1INTRODUCCINElclientewebporexcelenciaeselnavegadorweb,aunqueahoraexistenotrosclientescomopuedenserlasaplicacionesnativasdelosdispositivosmviles,ahorabienlatendenciaesladeutilizarlosestndareswebendichasaplicaciones.Aunquelatendenciaesusarcadavezmstecnologasestndares,anseusanotrastecnologasnoestndar.

8.2ESTNDARESWEB

ElW3C(WorldWideWebConsortium)esunacomunidadinternacionalquedesarrollaestndaresabiertosqueaseguranelcrecimientodelaWebalargoplazo.HTML(HypertextMarkupLanguage)andCSS(CascadingStyleSheets)sondosdelastecnologasprincipalesparalaconstruccindepginasweb.

8.3HTML(I)

HTMLproporcionalainformacinestructuradaensecciones,prrafos,ttulo,imgenes,etc.

8.4HTML(II)LaversinactualesHTML5,queaunquetodavanoestfinalizada,lamayoradelosnavegadoresimplementangranpartedelaespecificacin.Hasupuestounarevolucinenelclientepuesofrecemuchastecnologasavanzadas:Multimedia:audio,vdeo,canvas,webgl,etc.Comunicaciones:websocketsConcurrencia:webworkersAlmacenamiento:storageOtros:geoposicionamiento,drag&drop,accesoalacmara,almicrfono,etc.

8.5CSS(I)

CSSproporcionaladistribucindeloselementosysuestilo(colores,tiposdeletra,fondos,efectos...)

8.6CSS(II)CSSesunlenguajeusadoparadefinirlapresentacindeundocumentoestructuradoescritoenHTML,XML,SVGoinclusointerfacesdeusuariodeotrastecnologas(JavaFX)SuversinactualesCSS3,queaunquetodavanoestfinalizada,lamayoradelosnavegadoresimplementangranpartedelaespecificacin.

8.7PREPROCESADORES(I)ProcesancdigoescritoenunlenguajeA+(HAML,Coffeescritp,SCSSoLESS)ygeneranarchivosescritosenotrolenguajeA(HTML,JavascriptyCSS,respectivamente).Loslenguajesfuentesonsimilaresalosqueproducen,peromssencillosdeescribir(ydeleerymantener).EnelcasodeCSSlospreprocesadoressuplenciertascarenciasquetieneelpropiolenguajecomopuedeser:variables,herencias,funciones,imports,...

8.8PREPROCESADORES(II)LospreprocesadoresCSSmsimportantesson:Sassyless.

8.9FRAMEWORKSCSS(I)FacilitanlatareadecrearsitiosResponsiveWebDesign(diseoqueseadaptaalosdistintosclientes:mvil,tablet,ordenador)medianteelusodediseoconrejillas,usodeclases,componentes,etc.

8.10FRAMEWORKSCSS(II)LosframeworksCSSmasimportantesson:ZurbFoundationyTwitterBootstrap.

8.11JAVASCRIPT(I)

ConJavaScriptsepuedemodificarlapginayejecutarcdigocuandoseinteractaconella(atravsdelmodelodeobjetosdeldocumentoDOM)

8.12JAVASCRIPT(II)AunquealgunoselementosdelasintaxisrecuerdenaJava,notienenadaqueverconJava,seeligiesenombreporrazonesdemarketing,puescuandosepublicJavaestabaenauge.EsunlenguajedeprogramacinbasadoenelestndarECMAScriptdeECMA(otraorganizacindiferentealW3C)HayligerasdiferenciasenlaimplementacindeJSdelosnavegadores,aunqueactualmentetodossonbastantecompatiblesentres(enelpasadonofueas)

8.13JAVASCRIPT(III)Inicialmenteeraunlenguajeinterpretado,peroactualmenteseejecutaconmquinasvirtualesenlosnavegadores(velocidaddeejecucinyeficienciadememoria)Caractersticas:Tipadodinmico(habitualenloslenguajesdescript)Funcionalyorientadoaobjetos(basadoenprototipos)

8.14LIBRERASJAVASCRIPT

ExistenmultituddelibrerasJavaScript,aunquelasmsutilizadasson:jQuery:aportafacilidaddeusoycompatibilidadentrenavegadores.Seusaparagestionarelinterfazypeticionesajax.underscore.js:permitetrabajarconunenfoquemsfuncionalypermitegestionarplantillasparagenerarHTML.

8.15FRAMEWORKSJAVASCRIPT

Ademsdelibreras,tambinexistenframeworksdealtonivelqueestructuranunaaplicacindeformacompleta,siendolosmspopulares:Angular.js,Backbone.jsyEmber.

8.16TECNOLOGASNOESTNDARENLAWEBLawebhaavanzadoyevolucionadograciasatecnologasnoestndarincluidasenlosnavegadoresmedianteplugins.Algunasllegaronaconvertirseenestndaresdefacto,comoeselcasodeAdobeFlash.Lallegadadelosdispositivosmviles,consolasytelevisionesconectadas(SmartTVs)ylaestandarizacindeHTML5hanhechoqueestastecnologasnoestndarestnendesuso.

8.17ADOBEFLASH(I)

Esunatecnologausadaprincipalmenteparaincrustarcontenidomultimediainteractivoenpginasweb.Durantemuchosaosfuelanicaformadetenerinteractividad,animaciones,vdeos,juegos...enlaweb.

8.18ADOBEFLASH(II)Esunatecnologapropietariaycerrada,yaunqueesgratuitaparalosusuarios,noloesparalosdesarrolladoresyservidores.Hasidoacusadadedequenoeseficiente,noesabiertayportanto,noeselfuturodelaweb(Abril2010-SteveJobsporeliPhoneyiPad)AdobelohaacabadoreconociendoynoseguirapostandoporFlashcomolaherramientabsicadelawebinteractiva(Nov2011)

8.19JAVAAPPLETS

LosappletsdeJavafueronlosprecursoresdeFlash,aunquehoyestnendesuso.

8.20MICROSOFTSILVERLIGHT

LaapuestadeMicrosoftparacompetirconFlash,aunquehoyestnendesuso.