CAPÍTOL 1
Com funciona el web
client, servidor, URL, DNS, HTTP i carpetes
PREGUNTA PER A LA CLASSE
«Escrius una adreça i prems Enter. En menys d’un segon tens la pàgina.»
Què ha passat en aquest mig segon?
Un que demana, un altre que respon
Client i servidor són papers, no aparells
QUI DEMANA
ClientEl Chrome del teu portàtil demana http://localhost.
QUI RESPON
ServidorEl WordPress del mateix portàtil li respon.
localhost = 127.0.0.1 = aquest mateix ordinador
No miris l’aparell. Mira qui demana i qui respon.
Les sis parts d’una URL
Algunes no hi són sempre. Quan hi són, sempre en aquest ordre.
Separar una URL, part per part
https://www.example.com:443/cicles/smx.html?curs=2#horari
El port que no veus
SI ESCRIUS HTTP
Port 80http://www.example.com
és http://www.example.com:80
SI ESCRIUS HTTPS
Port 443https://www.example.com
és https://www.example.com:443
http://localhost:8080
amb Docker l’hauràs d’escriure
El DNS (Domain Name System): de noms a números
TU ESCRIUS
El dominiwww.example.com
EL DNS EN DONA
La IP203.0.113.25
Si l’empresa canvia de servidor, la IP canvia i el domini es queda igual. Només cal actualitzar el DNS.
Com l’agenda del mòbil: toques «Mare» i marca el número.
PREGUNTA PER A LA CLASSE
«Una pàgina té un HTML, dos fulls d’estil i cinc imatges.»
Quantes peticions fa el navegador?
Els set passos, de l’Enter a la pàgina
Pas 7: cada imatge i cada full d’estil és una petició nova.
HTTP: GET i POST
DEMANA
GETObres una pàgina o fas clic a un enllaç. Les dades van a la URL.
cercar.php?producte=sabates
ENVIA DADES
POSTEnvies un formulari: registre, inici de sessió. Les dades no surten a la URL.
Una contrasenya, sempre amb POST.
El codi d’estat: mira la primera xifra
Comença per 4: la culpa és de la petició. Per 5: del servidor.
PREGUNTA PER A LA CLASSE
«He obert la web i surt un 404.»
Vol dir que la web ha caigut?
HTTPS, i com ho veus tu
LA S VOL DIR SEGUR
HTTPSTot va xifrat. Sense la S, el que envies es pot llegir pel camí.
MIRA-HO AL NAVEGADOR
F12Pestanya Xarxa (Network): cada petició, amb el mètode i el codi. Ctrl+U: el HTML rebut.
«No segur» a la barra: ni contrasenya ni targeta.
Front-end i back-end
Web estàtica i web dinàmica
FITXERS JA FETS
EstàticaEl servidor envia els HTML tal com són. Tothom veu el mateix. Ex.: el teu currículum a Netlify.
ES FABRICA A CADA PETICIÓ
DinàmicaEl servidor executa PHP, consulta la base de dades i fa el HTML. Ex.: WordPress.
El PHP es queda al servidor. Amb Ctrl+U no el veuràs mai.
Les carpetes del Diari de Manacor
Les rutes relatives (relative paths)
DES DE NOTICIES/ESPORTS.HTML FINS A CSS/ESTILS.CSS
../css/estils.css
Cada ../ puja una carpeta. Compta-les amb el dit sobre l’arbre.
PREGUNTA PER A LA CLASSE
«A Windows la imatge img/Logo.png es veu. Al servidor, no.»
Quin codi surt a F12, i per què?