Conceptes Fonamentals de la Web: Història, Estructura i Llenguatges

La Xarxa Internet i la World Wide Web (WWW)

La xarxa Internet va néixer el 1973, però no va ser fins al 1990 que Tim Berners-Lee i Robert Cailliau van establir un protocol de funcionament de la xarxa molt exitós que va permetre que la web s'estengués a nivell mundial.

La Web (WWW) es compon d'un sistema de documents relacionats entre si mitjançant hipervincles que permeten la seva visualització des d'un ordinador connectat a la xarxa.

Termes Clau Associats a la Web

• Servidor Web: Ordinador remot amb els programes necessaris per allotjar pàgines web.
• Client: Ordinador connectat a una pàgina web.
• Navegador Web: Programa que permet al client visualitzar documents.
• URL (Uniform Resource Locator): Adreça d'un servidor web per arribar a un arxiu.
• IP (Internet Protocol): Codi identificatiu d'un ordinador.
• DNS (Domain Name System): Base de dades que relaciona noms de domini amb adreces IP.
• HTTP (Hypertext Transfer Protocol): Protocol o llenguatge de marcat.

Pas 1: Des del nostre ordinador, s'executa el programa navegador d'Internet.

Exercicis de Repàs

Ex 1. Quina funció té el servidor DNS?

Ex 2. Quines diferències hi ha entre una adreça URL i una adreça IP?

Definicions Clau

• URL: Adreça textual d’un servidor web per arribar a un arxiu HTML.
• IP: Codi identificatiu d’un ordinador a Internet.

2. Llenguatges de Programació i Eines per al Web

HTML: El Llenguatge Estàndard

El llenguatge estàndard per a la creació de pàgines web és el llenguatge HTML. Aquest llenguatge es basa en etiquetes per definir les qualitats dels textos que conté. Per exemple:

• <title> per definir el títol.
• </title> per indicar que s’ha acabat el títol.
• <body> per indicar el cos del text.
• <Font size> per indicar la mida de la lletra (Nota: Aquesta etiqueta està obsoleta).

Crear una web en HTML és senzill, però molt lent.

Editors Gràfics (WYSIWYG)

Per això, s’han desenvolupat molts programes d’edició de web que permeten crear arxius HTML de forma gràfica. Són els editors WYSIWYG (*What You See Is What You Get*), que mostren el resultat de la pàgina web que estem dissenyant. P.ex. Front Page, Dream Weaver, Kompozer (lliure), Amaya, NVU...

Llenguatges Dinàmics

Per modificar una pàgina web més ràpidament, s’han desenvolupat altres llenguatges com:

• PHP: Per a webs dinàmiques.
• ASP (Servidor de Pàgines Actives): Eina de creació de webs dinàmiques.
• JAVA: S’utilitza en moltes aplicacions interactives.

3. Organització i Estructura d'una Pàgina Web

Els elements més importants d’una pàgina web són:

• Objectius
• Continguts i menús
• Estructura de navegació
• Combinació de colors i imatges
• Encapçalament i peus de pàgina

3.1. Tipus d'Estructura de Navegació

L’estructura de navegació es refereix a l’organització dels enllaços entre les diferents pàgines d’un projecte web. Hi trobem:

Estructura Lineal

Cada pàgina té enllaços a la pàgina anterior i posterior només, com un llibre. S’utilitza en manuals, però no de forma estricta.

Estructura Jeràrquica

Des de cada pàgina es pot accedir al nivell superior i a la pàgina d’inici. Els continguts estan estructurats en nivells de categoria diferent.

Estructura Mixta

Combina la navegació jeràrquica amb zones de contingut lineal. És la més utilitzada.

Estructura de Marcs

En el marc lateral o superior hi ha sempre present el menú d’accés a les diferents seccions principals del web.

Estructura Web (o Xarxa)

Totes les pàgines donen accés a la resta. Ofereix total llibertat a l’usuari, però la navegació pot ser més confusa.

Exercici 18 (Pàg. 160)

Un lloc web està format per 4 pàgines. La primera d’elles conté un índex que dóna accés a les altres tres. Aquestes tres pàgines funcionaran com una revista, amb enllaços a la pàgina anterior i posterior, si existeixen. Quin tipus d’estructura de navegació té?

Opcions suggerides: Estructura web / Estructura lineal

3.2. L'Ús del Color i la Imatge Corporativa

L’ús del color en els navegadors d’Internet estava tradicionalment limitat a 216 colors (la paleta de colors segurs per a web), en lloc dels 256 colors habituals, perquè es reservaven alguns per a la interfície del navegador.

La combinació de colors escollida ha de tenir en compte l’usuari final:

• Per a públic adult: S’utilitzen colors sobris.
• Per a públic infantil o juvenil: S’utilitzen colors cridaners (llamatius).

Es poden utilitzar imatges com a fons de pantalla, però respectant sempre el contrast per a la correcta lectura dels textos.

S’utilitzen encapçalaments i peus de pàgina, així com logotips, per donar a la web uniformitat i una imatge corporativa.

Annex: Repetició del Contingut Original

A continuació es reprodueix el text original tal com es va proporcionar, sense correccions addicionals, per complir amb la restricció de no eliminar contingut:

La xarxa Internet va néixer el 1973 , però no va ser fins el 1990 en que Tim Berners-Lee i Robert Caillau establiren un protocol de funcionament de la xarxa molt exitós que la web es va estendre a nivell mundial.La web (www) es composa de un sistema de documents relacionats entre sí mitjançant hipervincles que permeten la seva visualització des de un ordinador connectat a la xarxa.Termes associats a la web:-Servidor webi : ordinador remot amb els programes necessaris -Client :ordinador connectat a una pagina web.-Navegador web: programa que permet al client visualtzar documents-Url: adresa de un servidor web per arrivar a un arxiu-IP: codi identificatiu de un ordinador.-DNS: base de dades que relaciona- http: llenguatge de mercat. Pas 1: des de el nostre ordinador ejecuten el programa navegador de Internet.Exercicis:Ex 1. Quina funció té el servidor DUS?2 Quines diferencies hi ha entre una adreça URL -URL: adreça textual d’un servidor web per arribar a un arxiu html.-Ip: codi identificatiu d’un ordinador en Internet.2. Llenguatges de programació per la webEl llenguatge estàndard per la creació de pàgines web és el llenguatge HTML. Aquest llenguatge es basa en etiquetes per definir les qualitats dels textos que conté. Per ex.<title> per definir el títol</title> per indicar que s’ha acabat el títol,<body> per indicar el cos del text, <Font size> per indicar la mida de la lletra, etc. Crear una web en HTML és senzill però molt lent. Per això s’han desenvolupat molts programes d’edició de web, que permeten crear arxius HTML de forma gràfica. Són els editors WYSIWIG (What You See Is What You Get) que mostren el resultat de la àgina web que estem dissenyant. P.ex. Front Page, Dream Weaver, Kompozer (lliure) Amaya, NVU....Per modificar una pagina web més ràpidament s’han desenvolupat altres llenguatges com PHP per a webs dinàmiques, ASP (Servidor de Pagines Actives) que és eina de creació de webs dinàmiques o JAVA que s’utilitza en moltes aplicacions interactives.3. Organització dels elements d’una pàgina webEls elements més importants d’una pàgina web són:-Objectius-Continguts i menús-Estructura de navegació-Combinació de colors i imatges -Encapçalament i pens de pàgina.3.1 L’estructura de navegacióEs refereix a l’organització dels enllaços entre les diferents pàgines d’un projecte web. Hi trobem:-Estructura lineal: cada pagina té enllaços a la pagina anterior i posterior només, com un llibre. S’utilitza en manuals però no de forma estricta.-Estructura jeràrquica: des de cada pàgina es pot accedir el nivell superior i va a la pagina d’inici.Els continguts estan estructurats en nivells de categoria diferent.-Estructura mixta: combina la navegació jeràrquica amb zones de contingut lineal. És la més utilitzada.-Estructura de marcs: En el marc lateral o superior hi ha sempre present el menú d’accés a les distintes seccions principals del web.-Estructura web: Totes les pàgines donen accés a la resta. Ofereix total llibertat a l’usuari però la navegació pot ser més confusa.Exercici 18 pag 160: Un lloc web esta format per 4 pàgines. La primera d’elles conté un índex que dóna accés a les altres tres. Aquestes tres pàgines funcionaran com una revista, amb enllaços a la pàgina anterior i posterior, si existeixen. Quin tipus d’estructura de navegació té? -Estructura web-Estructura lineal 3. 2 L’ús del color en la web:L’ús del color en els navegadors d’Internet està limitat a 216 colors, en lloc dels 256 colors habituals, perquè es reserven alguns per a la interfície del navegador. La combinació de colors escollida per la pàgina web ha de tenir en compte qui és l’usuari final: si va dirigit a públic adult, s’utilitzen colors sobris, i si és per públic infantil o juvenil, s’utilitzen colors llamatius. Es poden utilitzar imatges com a fons de pantalles, però respectant sempre el contrast per la correcta lectura dels textos.-S’utilitzen encapçalaments i peus de pàgina així com logotips per donar a la web uniformitat i una imatge corporativa

f