Upload
victor-joel-pinargote-bravo
View
92
Download
0
Embed Size (px)
Citation preview
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.