0614 - UF1: Servidors web i de transferència de fitxers

Arquitectura web

Un exemple de com funciona

Per entendre millor, mirem el següent exemple:

Trobeu un nou lloc web fantàstic i voleu crear un compte, així que decidiu fer clic al botó Registrar-se. A continuació, se us redirigirà a una pàgina on trobareu un formulari que us demana que introduïu la vostra informació. Un cop hàgiu acabat d'omplir el formulari, se us redirigirà a la secció de perfil i ja podreu utilitzar l'aplicació.

En aquest exemple, el formulari d'inscripció es troba al costat del client, on es recullen les dades de l'usuari i que sovint anoemenem fontend. D'altra banda, totes les accions que s'estan produint entre bastidors com afegir l'usuari a la base de dades, comprovar si el correu electrònic és únic i vàlid, redirigir l'usuari a diferents pàgines, etc., són el backend de la nostra aplicació web.

Definició d'arquitectura web

L'arquitectura web és l'estructura conceptual de la World Wide Web. La WWW o internet és un mitjà en constant canvi que permet la comunicació entre diferents usuaris i la interacció tècnica (interoperabilitat) entre diferents sistemes i subsistemes. La base d'això són diferents components i formats de dades, que normalment s'organitzen en nivells i es basen els uns als altres. En general, formen la infraestructura d'Internet, que és possible gràcies als tres components bàsics: els protocols de transmissió de dades (TCP/IP, HTTP, HTTPS), formats de representació (HTML, CSS, XML) i estàndards d'adreçament (URI, URL). El terme arquitectura web s'ha de distingir dels termes arquitectura web i arquitectura de la informació.

Origen de l'arquitectura web

La World Wide Web és un concepte que es va realitzar a la dècada de 1990 perquè persones i màquines poguessin comunicar-se entre elles dins d'un espai determinat. S'utilitza per intercanviar, distribuir i compartir informació en una xarxa. En aquella època, la web consistia principalment en llocs web estàtics basats en HTML , és a dir, hipertextos que es poden recuperar amb un navegador. Més tard es van afegir llocs web dinàmics i serveis web distribuïts.

Tendències en l'arquitectura d'aplicacions web

Les dues arquitectures d'aplicacions web més populars són la representació del costat del servidor (SSR) i la representació del costat del client (CSR).

El Javascript actual ha canviat dràsticament l'estructura dels llocs web moderns i l'experiència de l'usuari. Els llocs web actuals es creen més com una aplicació que pretén ser un lloc web capaç d'enviar correus electrònics, notificacions, xat, comprar, pagaments, etc. Els llocs web actuals són molt avançats i interactius; però abans, els llocs web i les aplicacions web tenien una estratègia comuna, preparar contingut HTML per enviar-lo als navegadors del costat del servidor. Aquest contingut es representa com a HTML amb estil CSS al navegador.

Tradicionalment, el navegador rep el codi HTML del servidor i el representa. Quan l'usuari navega a una altra URL, es requereix una actualització de pàgina completa i el servidor envia un HTML nou per a la pàgina nova. Això s'anomena renderització del costat del servidor (SSR).

Avui dia, els llocs web són més que pàgines estàtiques. La caiguda de la SSR es va produir quan els llocs web permetien a l'usuari realitzar accions i rebre una resposta per la seva acció. És per això que els desenvolupadors canvien el mètode per representar les pàgines web al costat del client (CSR).

Representació del costat del servidor:

Quan visiteu un lloc web fent clic a una URL, s'envia una sol·licitud al servidor. Després de processar la sol·licitud, i en cas necessari accedir a la base de dades, el servidor envia al navegador client els fitxers (HTML, CSS i JavaScript) i el contingut de la pàgina i després el navegador client el representa. Si l'usuari decideix anar a una altra pàgina del lloc web, es farà una altra sol·licitud.

Representació del costat del client:

La principal diferència entre la representació del costat del servidor i la representació del costat del client és que un cop visiteu un lloc web que utilitza CSR, només es farà una sol·licitud al servidor per carregar l'esquelet principal de l'aplicació. Aleshores, el contingut es genera dinàmicament mitjançant JavaScript.

Cadascuna d'aquestes tendències té pros i contres; aquí hi ha una comparació detallada:

	Renderització del costat del servidor	Renderització del costat del client
Avantatges	Els llocs web són fàcils de rastrejar, cosa que significa un millor SEO (optimització del motor de cerca) La càrrega inicial de la pàgina és més ràpida. Ideal per a llocs estàtics on no teniu contingut dinàmic	Interaccions riques del lloc Després de la càrrega inicial, el lloc web és molt ràpid Ideal per a aplicacions web.
Inconvenients	Sol·licituds freqüents del servidor. La pàgina es renderitza lentament Recàrregues de pàgina sencera. Interaccions bàsiques del lloc.	SEO baix si no s'implementa correctament. La càrrega inicial pot ser massa lenta En la majoria dels casos, requereix una biblioteca externa.

Tipus d'arquitectures web

Internet és un mitjà que està en constant canvi i ampliació per nombrosos desenvolupadors, programadors i diversos consorcis com el W3C.

Tanmateix, les arquitectures utilitzades es poden distingir esquemàticament.

Model client-servidor

Què és?

El model client-servidor és una arquitectura en la qual les tasques i serveis d’un sistema informàtic es reparteixen entre:

Client: sol·licita serveis o informació.
Servidor: processa la sol·licitud i envia la informació o el servei al client.

Penseu en un restaurant:
- Client: demana un plat al cambrer.
- Servidor (cuina): prepara el plat i el lliura al client.

Exemple pràctic a la web

Quan obres un navegador i escrius una URL:

El navegador és el client: sol·licita la pàgina web.
El servidor web rep la sol·licitud, recupera les dades i envia la pàgina (HTML, CSS, imatges) al client.
El client mostra el contingut al navegador.

Aquesta és la base de les aplicacions web de dues capes (client + servidor).

Requisits del model client-servidor a la web

a) Formats de representació

Els sistemes han de parlar un idioma comú.
- Per humans: HTML i CSS.
- Entre màquines: XML o JSON.

b) Protocols de transferència de dades

Els clients i servidors necessiten regles de comunicació.
- Web: HTTP / HTTPS.
- Correu electrònic: SMTP, POP3, IMAP.

c) Adreçament estàndard

Cada recurs té una adreça única: l’URL (Uniform Resource Locator), que forma part dels URI (Uniform Resource Identifier).

Funcionament resumit

Client (navegador) → sol·licitud HTTP → Servidor web Servidor web → processa dades → resposta HTTP → Client (navegador)

El servidor pot incloure un servidor de bases de dades per emmagatzemar informació.
El client només mostra la informació i envia sol·licituds.

Model de tres nivells

El model de tres nivells (o tres capes) és una arquitectura de programari on les responsabilitats es divideixen en tres blocs diferenciats:

Capa de presentació (client)
- Interfície amb l’usuari (UI).
- Pot ser un navegador web amb HTML, CSS i JavaScript (o frameworks com Vue, React, Angular).
- Gestiona l’experiència d’usuari i envia peticions al servidor.
Capa de lògica de negoci (servidor d’aplicacions)
- Processa les regles de l’aplicació: autenticació, càlculs, validacions, fluxos de negoci.
- Interpreta les peticions del client i consulta/emmagatzema dades al servidor de BBDD.
- S’implementa amb frameworks i llenguatges de servidor (PHP amb Symfony, Java amb Spring, .NET, Node.js...).
Capa de dades (servidor de BBDD)
- Gestiona únicament l’emmagatzematge i l’accés a les dades.
- Exemples: MySQL, PostgreSQL, Oracle, MongoDB.

La clau no és si tot està en una mateixa màquina física, sinó la separació funcional de responsabilitats.

Costat del client vs Costat del servidor

Costat del client (client-side):
- L’execució passa al navegador.
- Exemples: JavaScript, AJAX, JSON.
- Benefici: més interactivitat sense recarregar la pàgina.
- Exemple: validació d’un formulari d’email abans d’enviar-lo.
Costat del servidor (server-side):
- L’execució passa al servidor.
- Exemples: PHP, JSP, ASP.NET.
- Benefici: seguretat, control d’accés, persistència a la BBDD.
- Exemple: comprovació d’un usuari i contrasenya a la base de dades.

Tecnologies i marcs del model de tres capes

❗ No cal utilitzar tots per tindre un model de 3 capes. Només cal que cada capa estiga coberta.

PHP (Preprocessador d’Hipertext)
- Llenguatge de servidor molt usat per webs dinàmiques (WordPress, Symfony, Laravel).
- Funciona a la capa de lògica de negoci.
CGI (Common Gateway Interface)
- Estàndard antic per permetre que els servidors web executin scripts (Perl, C, etc.).
- Actualment en desús.
JSP (JavaServer Pages)
- Tecnologia de Java que permet incrustar codi Java en pàgines HTML.
- Executada al servidor (p. ex. Tomcat).
ASP.NET (Active Server Pages)
- Plataforma de Microsoft per aplicacions web dinàmiques amb C# o VB.NET.
- Funciona dins Internet Information Services (IIS).
AJAX (Asynchronous JavaScript And XML)
- Tècnica per carregar dades de manera asíncrona sense recarregar la pàgina.
- Millora la capa de presentació.
Microsoft Silverlight
- Plugin de Microsoft per aplicacions riques al navegador.
- Actualment obsolet.
JSON (JavaScript Object Notation)
- Format lleuger per intercanviar dades entre client i servidor.
- No és un llenguatge, sinó un format de dades.
Applets de Java
- Petits programes Java incrustats dins una pàgina web.
- Avui obsolets per problemes de seguretat.
JavaScript i VBScript
- Llenguatges del costat del client.
- JavaScript també pot ser del servidor amb Node.js.
- Gestionen la interactivitat i manipulació del DOM.

Resum

Per tenir un model de 3 capes, només cal cobrir les tres parts amb tecnologies adequades:

Capa	Funció principal	Exemples de tecnologies
Presentació	Interfície amb l’usuari	HTML, CSS, JS, Vue, React
Lògica de negoci	Processament i regles d’aplicació	PHP, Symfony, Node.js, ASP.NET
Dades	Emmagatzematge i recuperació d’informació	MySQL, PostgreSQL, MongoDB

Arquitecturas orientades a serveis (SOA)

Què és una SOA?

Una SOA (Service-Oriented Architecture) és una manera de dissenyar sistemes informàtics on les funcionalitats estan dividides en serveis independents.
Aquests serveis es comuniquen entre ells mitjançant la xarxa (Internet o intranet) i poden ser reutilitzats en diferents aplicacions.

Exemple quotidià: - Botiga online: - Servei per gestionar el catàleg de productes. - Servei per gestionar els pagaments. - Servei per gestionar els enviaments.

Cada servei és independent, però junts formen l’aplicació completa.

Per què SOA?

Permet automatitzar processos empresarials.
Els sistemes poden interactuar sense intervenció humana.
Modular i escalable: es poden afegir serveis nous sense redissenyar tot el sistema.
Molt utilitzat en banca en línia, e-commerce, e-learning, intel·ligència empresarial.

Tipus principals d’enfocaments en SOA

1. SOAP + WSDL

SOAP (Simple Object Access Protocol)
Protocol basat en XML per intercanviar missatges entre sistemes.
Sovint utilitza RPC (Remote Procedure Call) per trucades remotes.
Ideal per entorns empresarials grans.
WSDL (Web Services Description Language)
Metallenguatge basat en XML que descriu com utilitzar un servei web (interfície, paràmetres, protocols).
SOAP i WSDL solen anar junts:
- WSDL: defineix què fa el servei.
- SOAP: gestiona com s’envien els missatges.

Exemple:
Un servei de banca online publica un WSDL que explica com consultar saldo o fer transferències. El client envia una crida SOAP amb les dades, i el servidor respon amb XML.

2. REST (Representational State Transfer)

Arquitectura més lleugera i flexible que SOAP.
Funciona amb el model client-servidor.
Utilitza HTTP i una interfície uniforme basada en recursos:
GET → consultar
POST → crear
PUT → actualitzar
DELETE → eliminar
HATEOAS (Hypermedia As The Engine Of Application State) permet que les interfícies evolucionin i es descobreixin en temps real.

Exemple:
Un servei REST d’e-commerce: - GET /productes/123 → retorna les dades del producte amb ID 123 (JSON). - POST /comandes → crea una nova comanda.

Tendències actuals

REST ha guanyat molt terreny per ser més senzill i ràpid d’implementar.
SOAP encara s’usa en grans corporacions on la formalitat és crucial.
SOA ha evolucionat cap a microserveis, més escalables i modulars.

Relació amb IoT i Web Semàntica

A l’Internet de les Coses (IoT), molts dispositius exposen serveis per comunicar-se.
La Web Semàntica busca que les màquines entenguin i intercanviïn informació de manera intel·ligent.

Extret de ...