Aplicaciones web. Características, funcionamiento y estructura
Implantación de Aplicaciones Web Nac"o Iborra IE& &an 'icente
Esta obra está licenciada bajo la Licencia Creative Commons Atribución-NoComercial-CompartirIgual 4.0 Internacional. Internacional. ara ver una copia de esta licencia! visita "ttp#$$creativecommons.org$lice "ttp#$$creativecom mons.org$licenses$b%-nc-sa$4 nses$b%-nc-sa$4.0$ .0$
Aplicaciones web: características, funcionamiento y estructura
Tipos de aplicaciones Cuando estamos utili(ando un ordenador! una tablet o un tel)*ono móvil! +,u) tipos de aplicaciones o programas podemos estar utili(ando ásicamente distinguimos dos grandes grupos# •
•
A,uellas aplicaciones ,ue no necesitan ninguna cone/ión a Internet o a una red de ordenadores para *uncionar. Este tipo de aplicaciones suelen llamarse aplicaciones de escritorio! % podemos encontrar ejemplos mu% variados# un procesador de te/tos! un lector de libros electrónicos! un reproductor de msica o v1deo! e incluso videojuegos ,ue tengamos instalados. A,uellas aplicaciones ,ue s1 necesitan cone/ión! bien sea a Internet o a un ordenador de su red local. En este otro grupo tambi)n tenemos ejemplos variados de aplicaciones. or ejemplo! si compartimos un documento de te/to en 2oogle 3rive! o si abrimos el navegador para acceder a una plata*orma de un curso online! o incluso si jugamos a videojuegos junto con otras personas de otros lugares. A,u1 distinguimos varios tipos de aplicaciones. Algunos de los más "abituales son# ◦
◦
Las aplicaciones P2P peer-to-peer 5! donde todos los elementos conectados a la red tienen el mismo 6rango6! por as1 decirlo! % comparten in*ormación entre ellos. Es el mecanismo en el ,ue se basan varios programas de descarga! como los de descarga de torrents! u otros más antiguos como Emule. Las aplicaciones cliente-seridor ! llamadas as1 por,ue consisten en ,ue un conjunto de ordenadores llamados clientes5 se conectan a uno central llamado servidor 5 ,ue es el ,ue les proporciona la in*ormación % los servicios ,ue solicitan. En el caso de videojuegos donde nos conectamos a otro lugar para jugar con otras personas! estamos utili(ando aplicaciones cliente-servidor! donde nuestro ordenador uno de los clientes5! tiene instalada una parte de la aplicación % el servidor al ,ue se conecta le proporciona la in*ormación de los escenarios % del resto de jugadores % personajes. ◦
3entro del tipo de aplicaciones cliente-servidor! las aplicaciones web son un subtipo! ,ui(á el más numeroso. &e llaman as1 por,ue accedemos a una página 7eb para poderlas ver % usar. 2oogle 3rive! una plata*orma de un curso online! o una 7eb de videojuegos ser1an ejemplos de aplicaciones 7eb.
Nos vamos a centrar en este ltimo tipo de aplicaciones! las aplicaciones web. Con la e/pansión de Internet % de las redes de ordenadores! son aplicaciones en auge! % no dejan de aparecer nuevas "erramientas % tecnolog1as para desarrollar aplicaciones 7eb cada ve( más vistosas! versátiles % adaptadas a gran variedad de dispositivos. En esta unidad veremos ,u) ventajas e inconvenientes pueden tener las aplicaciones 7eb con otros tipos de aplicaciones en concreto con las de escritorio5! % tambi)n veremos ,u) ar,uitectura tienen! es decir! ,u) mecanismos son los ,ue las "acen *uncionar como *uncionan. 8ambi)n daremos alguna pincelada sobre ,u) patrones de ar,uitectura so*t7are podemos utili(ar para desarrollar aplicaciones 7eb.
Introducción a las Aplicaciones Web
2
Aplicaciones web: características, funcionamiento y estructura
Ar!uitectura de una aplicación web ¿u! es "la web#$ odemos ver la 7eb como una especie de plata*orma mundial donde tenemos disponibles gran cantidad de recursos documentos! videojuegos! redes sociales! *oros! etc.5. &e "i(o popular a principios de los a9os :0 gracias a aplicaciones como el correo electrónico! los c"ats! etc. % con la aparición de la 7eb ;.0 vinieron otra serie de aplicaciones ,ue la potenciaron an más! como los blogs o las redes sociales. oco a poco se "an ido a9adiendo *uncionalidades! "asta el punto de ,ue "ace pocos a9os era impensable poder ver v1deos o pel1culas en Internet! % "o% es algo mu% "abitual.
Elementos de una aplicación web En una aplicación 7eb podemos distinguir en primer lugar dos grandes lados# el cliente! donde está el usuario! ,ue utili(a un navegador 7eb 2oogle C"rome!
%uncionamiento de una aplicación web Como "emos comentado! las aplicaciones 7eb son un tipo de aplicaciones clienteservidor. Este tipo de ar,uitecturas distribu%en las tareas entre ,uienes prestan los recursos % servicios los servidores5 % ,uienes los solicitan los clientes5. Los pasos ,ue se siguen en la comunicación cliente-servidor! son! en general# =. El cliente inicia sesión en el servidor ;. El cliente solicita al servidor el recurso o servicio ,ue ,uiere utili(ar una página 7eb! un documento! subir in*ormación! etc.5 >. El servidor recibe la respuesta del cliente! la procesa % decide ,u) programa debe darle servicio! enviando la petición a dic"o programa. 4. El programa responsable procesa la petición! prepara la respuesta % la entrega al servidor. ?. El servidor env1a la respuesta al cliente @. El cliente puede volver al paso ; % reali(ar una nueva petición! o bien . El cliente termina la sesión en el servidor. En general! el servidor no tiene por ,u) ejecutarse solo! sino ,ue podemos tener di*erentes aplicaciones en di*erentes e,uipos o en el mismo5! lo ,ue se conoce como ar,uitectura multicapa o multiniel. or ejemplo! un servidor de bases de datos en una má,uina! un servidor 7eb en otra o en la misma ,ue el de bases de datos5! un servidor de correo electrónico... % as1 distribuir los procesos % el trabajo a reali(ar! e incluso con*igurar opciones de seguridad % rendimiento separadas para cada servidor.
Introducción a las Aplicaciones Web
&
Aplicaciones web: características, funcionamiento y estructura
"#emplo$ ar!uitectura de dos o tres nieles or ejemplo! si el cliente conectara con el servidor para pedir un listado de noticias almacenadas en una base de datos! e/presado como un diagrama de secuencia! el *uncionamiento básico de esta petición % de la ar,uitectura cliente-servidor en general5 puede verse como algo as1#
En este ejemplo! el servidor 7eb % el servidor de bases de datos podr1an estar instalados en la misma má,uina o en má,uinas separadas! cada una con su "ard7are espec1*ico % control de acceso de usuarios espec1*ico. En cual,uier caso! estamos "ablando de una ar,uitectura de tres nieles cliente! servidor 7eb % servidor de base de datos5! ,ue es algo bastante "abitual en las aplicaciones 7eb! pues casi todas cuentan con una base de datos con in*ormación ,ue consultar % modi*icar. &in el servidor de base de datos! estar1amos ante una ar,uitectura de dos nieles! donde el servidor es polivalente! % puede responder directamente a las peticiones de los clientes sin consultar con otros servidores o aplicaciones. Esta opción es menos *le/ible! menos segura % puede o*recer peor rendimiento en sistemas congestionados! al no poder dividir el trabajo entre distintos tipos de servidores.
'()s Bemos visto ,ue! en el es,uema de *uncionamiento de una aplicación 7eb! el cliente solicita recursos al servidor. La *orma en ,ue los solicita es mediante %&'s. na DL 'niform (esource )ocator 5 es una manera de identi*icar % locali(ar cada recurso de una 7eb. or ejemplo! cuando escribimos en un navegador una dirección como *ttp:++wwwmiwebcom+painas+paina*tml ! estamos introduciendo una DL para locali(ar un recurso en este caso! una página B8L5. na DL se compone de# •
•
El protocolo! ,ue indica las reglas ,ue se van a seguir para comunicarse cliente % servidor. 'eremos más adelante algunos ejemplos de protocolos! pero para lo ,ue nos importa! en una DL el protocolo va al principio! "asta los dos puntos % el delimitador $$. En nuestro ejemplo! el protocolo ser1a *ttp:++ El nombre de dominio! ,ue identi*ica al servidor % la empresa$7eb a la ,ue vamos a conectar. 'a justo detrás del protocolo! "asta la siguiente barra. Normalmente termina en com, es, net ! etc. En nuestro ejemplo ser1a wwwmiwebcom
Introducción a las Aplicaciones Web
.
Aplicaciones web: características, funcionamiento y estructura •
La ruta (acia el recurso! ,ue comprende todas las carpetas % subcarpetas si las "a%5 % el nombre de arc"ivo ,ue ,ueremos obtener. En nuestro ejemplo! la ruta ser1a +painas+paina*tml
El navegador obtiene la DL ,ue "a escrito el usuario! trans*orma el nombre de dominio en una dirección I segn su servidor 3N& asignado5 % env1a al servidor indicado la petición.
)enua/es Al "ablar de aplicaciones 7eb en los siguientes temas! "ablaremos de algunos conceptos ,ue nos deben empe(ar a sonar %a! como los %a comentados de cliente! o servidor. Ftro de estos conceptos es el de len)ua#e. ara las personas! un lenguaje es un conjunto de palabras % signos ,ue nos permiten comunicarnos. ara un ordenador viene a ser algo parecido# un conjunto de palabras % signos ,ue permiten ,ue el usuario le d) una serie de órdenes! % ,ue el ordenador sepa interpretar. En el ámbito de las aplicaciones 7eb! distinguimos dos tipos de lenguajes# •
•
Lenguajes en el entorno cliente o len)ua#es cliente# son los ,ue permiten ,ue el cliente interacte con la aplicación 7eb. ara ello! el cliente debe poder ver la aplicación 7eb en el navegador! e interactuar con ella pinc"ar en enlaces! rellenar *ormularios! etc.5. En este lado! normalmente se tienen dos lenguajes para ,ue todo esto se pueda llevar a cabo# el lenguaje B8L para poder crear % visuali(ar páginas 7eb! % el lenguaje Gavascript para poder *acilitar la interacción entre el usuario % el navegador. Los veremos en temas posteriores. Lenguajes en el entorno servidor o len)ua#es seridor # son los ,ue permiten ,ue el servidor realice ciertas tareas cuando le llegan las peticiones de los clientes! como por ejemplo consultar una base de datos! guardar in*ormación en un *ic"ero! o cargar una *oto ,ue el usuario está subiendo al servidor. En este otro lado! e/isten varias *amilias de lenguajes ,ue podemos elegir! dependiendo del servidor 7eb ,ue ,ueramos utili(ar. or ejemplo! podemos utili(ar lenguaje A& .NE8 para servidores de icroso*t % entornos Hindo7s5! o el lenguaje G& lenguaje Gava para aplicaciones 7eb5! o el lenguaje B! entre otros.
Introducción a las Aplicaciones Web
0
Aplicaciones web: características, funcionamiento y estructura
Aplicaciones web s escritorio na ve( "emos visto ,u) ar,uitectura tienen las aplicaciones 7eb! +,u) ventajas e inconvenientes podemos ver ,ue tienen *rente al otro gran grupo de aplicaciones! las de escritorio
1enta/as de las aplicaciones web •
•
•
•
•
•
•
na de las principales ventajas ,ue tienen es ,ue el cliente no tiene ,ue instalar nada en su e,uipo! o casi nada. asta con tener instalado un navegador 7eb! % como muc"o en algunos casos! algn plugin especial
Introducción a las Aplicaciones Web
Aplicaciones web: características, funcionamiento y estructura
Inconvenientes de las aplicaciones web •
•
•
no de los inconvenientes ,ue podemos encontrar en una aplicación 7eb es su ri!ue*a )r+fica! si la comparamos con aplicaciones de escritorio. E/isten algunos tipos de e*ectos animaciones! >3! etc.5 ,ue an son mu% di*1ciles o imposibles de conseguir en una aplicación 7eb. oco a poco "an ido apareciendo "erramientas para intentar paliar esto! como
•
•
Esto no es un problema en otro tipo de ar,uitecturas! como por ejemplo las redes ;! donde el nmero de clientes mejora el rendimiento del sistema! al "aber más lugares desde donde compartir % cargar$descargar los recursos.
Ftro inconveniente es el tiempo de respuesta. Al ser aplicaciones cliente$servidor! puede pasar un tiempo considerable desde ,ue! por ejemplo! enviamos un *ormulario "asta ,ue el servidor nos avise de ,ue los datos se "an guardado correctamente. Estos tiempos son muc"o menores en aplicaciones de escritorio! al no necesitar comunicación entre e,uipos. 8ambi)n podemos citar entre los inconvenientes la apariencia. A pesar de ,ue las aplicaciones 7eb son más compatibles! su apariencia *inal depende del navegador ,ue utilice el cliente para visuali(arlas. As1! la misma aplicación puede verse de *orma di*erente segn si estamos utili(ando C"rome! Internet E/plorer!
Introducción a las Aplicaciones Web
3
Aplicaciones web: características, funcionamiento y estructura
Protocolos m+s utili*ados A la "ora de comunicar clientes % servidores! es necesario establecer un protocolo de comunicación! es decir! una serie de reglas ,ue indi,uen ,u) tipo de mensajes se van a intercambiar! en ,u) orden % ,u) contenido va a tener cada tipo de mensaje! de *orma ,ue los dos e/tremos de la comunicación cliente % servidor5 puedan entenderse. Al trabajar con aplicaciones 7eb! los protocolos de comunicación más empleados son# •
•
TTP 4yper5e6t 5ransfer 7rotocol 5! un protocolo e/istente desde =::0 % ,ue permite la trans*erencia de arc"ivos en general! aun,ue principalmente de arc"ivos B8L es decir! documentos 7eb5. &e sigue un es,uema de peticiones % respuestas entre cliente % servidor como el visto anteriormente. TTP! versión segura del protocolo anterior! donde los datos de las peticiones % las respuestas se env1an encriptados! para ,ue nadie ,ue intercepte la comunicación pueda descri*rar el contenido de la misma. Este tipo de protocolos se suele utili(ar en sistemas bancarios! plata*ormas de pago a%pal! por ejemplo5! % otras aplicaciones ,ue manejen in*ormación delicada 3NIs! nmeros de tarjetas de cr)dito! etc.5. Normalmente! los navegadores 7eb cambian automáticamente del protocolo JnormalK B88 a B88& al conectar con páginas ,ue necesitan ser más seguras login! datos de pago! etc.5. &e puede comprobar el cambio mirando la barra de dirección del navegador# al acceder al protocolo seguro se mostrará el protocolo *ttps en la barra! o bien el icono de un candado. &in embargo! s1 deberemos con*igurar nuestro servidor 7eb para aceptar comunicaciones B88&! si *uese el caso.
•
Ftros protocolos son menos utili(ados a la "ora de trabajar con aplicaciones 7eb! pero s1 se utili(an igualmente en otras aplicaciones ,ue re,uieran de Internet. or ejemplo! para el env1o % recepción de correo electrónico se emplean los protocolos /TP o P0P1I/AP! respectivamente. ara enviar arc"ivos a un servidor remoto se puede emplear además del propio protocolo B885 el protocolo 3TP.
Introducción a las Aplicaciones Web
8
Aplicaciones web: características, funcionamiento y estructura
Patrones de dise4o software n patrón de dise9o o ar,uitectura so*t7are comprende un conjunto de pautas a seguir! elementos a desarrollar! jerar,u1as % orden ,ue dotan a una aplicación de una estructura preestablecida! ,ue la "ace más propicia para *uncionar como debe. &us principales objetivos son! por un lado! estandari(ar la *orma en ,ue se desarrollan las aplicaciones! % por otro! elaborar elementos o componentes reutili(ables entre diversas aplicaciones! al ajustarse todos a un mismo patrón. En el ámbito de las aplicaciones 7eb! e/isten patrones de dise9o espec1*icos ,ue nos gu1an a la "ora de estructurar! dise9ar % programar estas aplicaciones. no de los más utili(ados o ,ui(á el más utili(ado5 es el patrón 'C! ,ue comentaremos a continuación! pero tambi)n "an surgido otros muc"os a partir de )ste5! ,ue "an ,uerido dar una vuelta de tuerca más! o adaptarse a las necesidades de aplicaciones 7eb más espec1*icas o concretas. 'eremos tambi)n algunos de estos patrones en este apartado.
El patrón 91 'C son las siglas de 9odelo-1ista-ontrolador o en ingl)s! 9odel-1iew-ontroller 5! % es! como dec1amos antes! el patrón por e/celencia a"ora mismo en el mundo de las aplicaciones 7eb! e incluso muc"as aplicaciones de escritorio. Como su nombre indica! este patrón se basa en dividir el dise9o de una aplicación 7eb en tres componentes *undamentales# •
•
•
E l modelo! ,ue podr1amos resumir como el conjunto de todos los datos o in*ormación ,ue maneja la aplicación. 81picamente serán variables u objetos e/tra1dos de una base de datos o cual,uier otro sistema de almacenamiento! por lo ,ue el código del modelo normalmente estará *ormado por instrucciones para conectar con la base de datos! recuperar in*ormación de ella % almacenarla en algunas variables determinadas. or tanto! no tendrá conocimiento del resto de componentes del sistema. La ista! ,ue es el intermediario entre la aplicación % el usuario! es decir! lo ,ue el usuario ve en pantalla de la aplicación. or lo tanto! la vista la compondrán las di*erentes páginas! *ormularios! etc! ,ue la aplicación mostrará al usuario para interactuar con )l. El controlador o controladores5! ,ue son los *ragmentos de código encargados de coordinar el *uncionamiento general de la aplicación. Ante peticiones de los usuarios! las recogen! las identi*ican! % acceden al modelo para actuali(ar o recuperar datos! % a su ve(! deciden ,u) vista mostrarle al usuario a continuación de la acción ,ue acaba de reali(ar.
Es un patrón de dise9o mu% conciso % bien estructurado! lo ,ue le "a valido la *ama ,ue tiene "o% en d1a. Entre sus muc"as ventajas! permite aislar el código de los tres elementos involucrados vista! modelo % controlador5! de *orma ,ue el trabajo es muc"o más modular % divisible! pudiendo encargarse de las vistas! por ejemplo! un dise9ador 7eb ,ue no tenga muc"a idea de programación en el servidor! % del controlador un programador B ,ue no tenga muc"as nociones de B8L. Introducción a las Aplicaciones Web
;
Aplicaciones web: características, funcionamiento y estructura En *orma de es,uema! podr1amos representarlo as1#
Las peticiones del usuario llegan al controlador! ,ue las identi*ica! % se comunica con el modelo para obtener los datos necesarios! % con las vistas para decidir ,u) vista mostrar a continuación % llenarla con los datos del modelo! para despu)s serv1rsela al usuario como respuesta.
"l patrón /55/ El patrón ''! como recogen sus siglas! se centra e/clusivamente en los componentes del modelo % de la vista 9odelo-1ista-1ista-9odelo5! % prescinde del controlador. 3e esta *orma! el usuario interacta directamente con la vista! % las acciones o cambios ,ue introdu(ca en ella a*ectan directamente al modelo! % viceversa los cambios en el modelo se re*lejan de *orma automática en la vista5. Este patrón está cobrando especial relevancia en las llamadas &A >inle 7ae Applications5! aplicaciones 7eb con una sola página ,ue recarga parcialmente sus contenidos ante las acciones del usuario. En estos casos! no es necesario un controlador ,ue diga ,u) vista cargar! por,ue sólo "a% una vista principal ,ue puede estar compuesta por subvistas5! % si la estructura es lo su*icientemente sencilla! vista % modelo pueden estar intercomunicados sin intermediarios. ara dar ma%or soporte an a esta metodolog1a! "an surgido algunas librer1as de comunicación as1ncrona con el servidor veremos este concepto en temas posteriores5! tales como Anular/s.
Introducción a las Aplicaciones Web
?@
Aplicaciones web: características, funcionamiento y estructura
"l patrón /05" El patrón F'E sustiti%e el controlador del patrón 'C por dos elementos. no ,ue denomina operaciones ,ue ser1a la F de sus siglas5! % ,ue englobar1a todo el conjunto de acciones ,ue la aplicación es capa( de reali(ar! % otro ,ue ser1an los eentos ,ue ser1a la E de sus siglas5! % ,ue representar1an todos a,uellos sucesos ,ue desencadenan ,ue se ejecute una acción determinada. As1! por ejemplo! las acciones de los usuarios son eventos sobre la aplicación ,ue provocan ,ue se ejecuten determinadas operaciones. Estas operaciones! a su ve(! pueden acceder al modelo para obtener o actuali(ar in*ormación! % pueden generar o llamar a una vista ,ue mostrar al usuario como respuesta. &e divide as1 la tarea de los controladores entre los eventos % las operaciones.
"l patrón /5P El patrón ' sustitu%e el controlador o controladores5 del 'C por lo ,ue se denominan presentadores. Estos presentadores son una especie de intermediarios entre el modelo % la vista! de *orma ,ue cada vista tiene el su%o propio! % acta tras la vista para comunicarse con el modelo! obtener los datos! % cargarlos en ella para mostrarlos al usuario. &e tiene as1 encapsulado con cada vista su presentador! % la aplicación puede considerarse un conjunto de pares vista-presentador, ,ue se encarga de comunicarse con el modelo! ,ue ,ueda por detrás.
Introducción a las Aplicaciones Web
??
