Desenvolupament web estàtic amb HTML + CSS
Conceptes

Sessió 2: Entorn de desenvolupament

Objectiu Sessió 2

L'objectiu d'aquesta 2a sessió és descobrir quin serà l'entorn de desenvolupament que usarem, així com l'espai a on s'ha d'allotjar una pàgina o lloc web.

Servidor Apache

Apache HTTP Server és un servidor HTTP (de pàgines web) de codi obert multiplataforma desenvolupat per Apache Software Foundation. El servidor Apache es desenvolupa dins del projecte HTTP Server (httpd) de l'Apache Software Foundation.

L'objectiu bàsic del Apache és oferir resposta a una petició HTTP GET, processar-la i retornar-la a qui n'havia fet la petició.

Podem diferenciar si la petició és:

• un arxiu amb extensió .html, .js, … el servidor llegeix el contingut de l'arxiu tal qual i l'envia de resposta
• un arxiu tipus imatge .jpg, png, … el servidor llegeix el conjunt de bits i ho envia de resposta
• un arxiu amb extensió .php, asp, … el servidor processa el codi, i el codi html generat el retorna.

La resposta pot ser:

• HTML
• XML
• JSON
• CSS
• el recurs sol·licitat, .jpg, pdf, …

Una característica que té l'Apache és que es pot configurar amb diferents mòduls, per exemple php. rewrite, per a poder usar la configuració .htaccess

També disposa de la possibilitat de navegació segura usant SSL amb la versió HTTPS.

Enllaços

https://ca.wikipedia.org/wiki/Servidor_HTTP_Apache
https://www.apachefriends.org/es/download.html

Tindrem un panell de control una vegada està en execució

Ull

Apache està configurat per obrir els ports 80 i 443, en el cas que aquests ports estiguin usats o oberts per altres aplicacions a l'ordinador, caldrà configurar-ho diferent o bé desintal·lar el servei o aplicació causant.

El que ens interessa a l'hora de publicar contingut web serà la carpeta a on cal ubicar els arxius i recursos web. És a dir els arxius .html, .css, …

Info

Com a objectiu d'aquest curs, el que farem serà arquitectura planera, on els arxius estaran ubicats a partir d'una carpeta arrel. L'arquitectura per capes del MCV queda fora de l'objectiu.

Per tant, de manera bàsica tindrem la carpeta:

• Windows: c:\xampp\htdocs
• Linux: \var\www

Info

Apache permet treballar amb VirtualHosts que permetria més d'una web, però ara per ara no treballem aquest tema.

Per defecte Apache pot realitzar dues coses:
* Cercar el fitxer index.html i mostrar el seu contingut. Això és configurable i pot ser un altre fitxer, per exemple index.php. O també podem configurar l'arxiu .htacess per que sigui un altre fitxer * Mostrar el contingut de la carpeta, creant enllaços automàticament

IDE o Entorn de desenvolupament

Podriem definir un IDE com a Entorn Integrat de Desenvolupament i és una eina que ens permet desenvolpar programari de manera còmoda i ràpida. La funció més bàsica serà la de editor de text, per escriure codi, i anar augmentant les funcionalitats d'ajuda a l'escriptura i fins a connexió al servidor per a pujar el codi.

Enllaços

https://ca.wikipedia.org/wiki/Entorn_integrat_de_desenvolupament

En el nostre cas usarem el VSC, Visual Studio Code, desenvolupat per Microsoft i és gratuït i de codi obert.

Enllaços

https://code.visualstudio.com/

Podem usar el VSC simplement com un editor de codi i no usar tota la seva potència. De manera mínima podrem usar les funcionalitats:

• Gestió de fitxer, obrir, tancar, desar, …
• L'ajuda en l'edició la tindrem disponible sense haver d'instal·lar res
• Treballar amb un espai de treball (workspace)
• Utilitzar el terminal o consola per executar comandes o configuracions
• Extensions: Prettier, Live Server

Deixarem per més endavant funcions avançades com:

• Connexió al git i github
• Depuració
• Test

Inspeccionem

Els navegadors disposen d'unes eines molt potents que permeten usar-les als desenvolupadors per fer un seguiment o depuració.

Recordem el gràfic

Tot el que el navegador envia o reb en una sessió de navegació es podrà monitoritzar

Es podem fer coses tant interessants com:

• Elements: Visualitzar el codi font

• Consola: Visualitzar errades, elements del codi web o executar comandes

• Fonts: Visualitzar l'origen del contingut que ha rebut el navegador

• Xarxa: Visualitzar temporalment totes les peticions i respostes web

• Aplicació: Visualitzar l'emmagatzematge