Crear i publicar una web o un blog

Explica amb les teves paraules la diferència entre una pàgina web i un lloc web, fent servir el símil d'un llibre: què seria cada full i què seria el llibre complet. Posa un exemple d'un lloc web que coneguis i anomena dues de les seves pàgines.

Quan visites un web intervenen dos programes: el navegador del teu ordinador i el servidor on viu el web. Explica què fa cadascun (qui demana la pàgina, qui la guarda i l'envia, qui la mostra) i què passa si el servidor està apagat.

La figura mostra l'esquema de maquetació típic d'una pàgina web, amb les seves quatre zones, però el nom d'una d'elles està tapat.

Indica quina zona està tapada i què conté normalment, i explica per a què serveix cadascuna de les altres tres zones de la pàgina.

Una pastisseria vol un web senzill amb: presentació, fotos dels seus pastissos, horari i un mapa amb l'adreça. Dissenya la seva estructura: quines zones tindrà la pàgina principal (capçalera, menú, contingut, peu), què anirà a cadascuna i quines dues pàgines secundàries enllaçaries des del menú.

Dissenya la pàgina principal del web del club de ciència: dibuixa o descriu el seu esquema de maquetació (capçalera, menú, contingut, peu), decideix els quatre continguts que hi destacaries i explica quins enllaços posaries al menú i per què aquests i no uns altres.

Pots fer-ho en paper i enviar una foto amb la teva resposta.

L'HTML no «programa» la pàgina: la descriu amb etiquetes que marquen què és cada cosa. Explica què és una etiqueta HTML fent servir el símil dels retoladors de colors amb què marques uns apunts (això és un títol, això és un paràgraf) i digues quina diferència hi ha entre el contingut i les marques.

Relaciona cada etiqueta HTML amb el que col·loca a la pàgina: (a) <h1>, (b) <p>, (c) <img>, (d) <a>, amb aquestes funcions: un enllaç a una altra pàgina, una imatge, el títol principal i un paràgraf de text. Després, digues quina de les quatre necessita sempre una adreça d'on és el recurs.

Llegeix aquest fragment d'HTML i descriu com es veurà la pàgina al navegador, element a element: <h1>El racó de la Marta</h1>, <p>Manualitats i receptes fàcils.</p>, <img> amb una foto d'unes galetes, <a> amb el text «Veure la recepta completa». Indica quina etiqueta produeix cada part.

La figura mostra l'arbre d'etiquetes d'una pàgina web molt senzilla: com unes etiquetes contenen les altres, però dues etiquetes estan tapades.

Esbrina quines dues etiquetes estan tapades utilitzant les pistes de sota de cada capsa, i explica amb les teves paraules què significa que una etiqueta «pengi» d'una altra a l'arbre.

Un grup d'alumnes ha creat aquest fragment de codi HTML per a la fitxa de l'equip de futbol sala de l'institut:

<h1>Equipo Cadete</h1>

<img src="equipo.jpg">

<a href="calendario.html">Haz clic aquí</a>

En auditar la pàgina s'han detectat dues errades:

1. Si la imatge no es carrega per una fallada a la xarxa, a la pantalla només apareix una icona trencada sense cap explicació.

2. Si una persona amb discapacitat visual fa servir un lector de pantalla, no sap què conté la imatge ni cap a on condueix exactament l'enllaç.

Reescriu el codi HTML corregint els dos problemes (utilitza els atributs i textos descriptius adequats) i justifica tècnicament com la teva solució millora l'accessibilitat i la usabilitat del web.

Avui es pot crear un web sense escriure codi, amb creadors de llocs com ara Google Sites o WordPress. Explica què és un creador de llocs web, com s'hi treballa (arrossegar blocs, triar plantilles) i quin avantatge té per a algú que està començant.

Aquests passos per publicar un web amb un creador de llocs estan desordenats: (a) revisar com es veu al mòbil i a l'ordinador, (b) triar una plantilla, (c) pensar quins continguts tindrà, (d) prémer «publica» per donar-li una adreça a internet, (e) afegir els textos i les imatges. Ordena'ls i explica per què la revisió ha d'anar abans de publicar.

L'associació juvenil del teu barri vol publicar la seva pàgina web i rumia dues opcions:

• Opció A: Crear un lloc gratuït en una plataforma en línia, obtenint l'adreça asociacionvalle.creacionsitios.com i allotjament sense cost als seus servidors a canvi de mostrar publicitat del proveïdor.

• Opció B: Registrar el domini propi asociacionvalle.es (8 € a l'any) i contractar un allotjament (hosting) independent (3,5 € al mes).

1) Explica quina funció compleix el domini i quina l'allotjament diferenciant-los en cadascuna de les dues opcions.

2) El tresorer proposa l'Opció A dient: «Estalviem-nos els diners; l'adreça i el servidor són exactament iguals mentre la pàgina s'obri». Rebat la seva afirmació preveient almenys dos problemes o limitacions que patirà l'associació a mitjà termini si trien l'Opció A (en relació amb la seva imatge pública, la publicitat o el control dels continguts).

La classe crearà el web del grup. Classifica aquests continguts en «es poden publicar» o «no s'han de publicar», justificant cada cas: el nom de l'institut, la foto de la façana del centre, els noms i cognoms complets de tots els alumnes, els treballs de la classe signats només amb el nom de pila, l'horari personal d'un alumne i una descripció de les activitats del grup.

Les imatges d'un web porten un text alternatiu (l'atribut «alt») que descriu la foto. Explica qui el necessita (persones que utilitzen lectors de pantalla) i escriu un bon text alternatiu per a aquestes dues imatges del blog de la classe: (a) la foto de l'equip guanyador del torneig d'escacs i (b) un gràfic de barres amb l'assistència al club cada mes.

Al web de l'AMPA apareix una llista amb «nom i cognoms dels premiats a la festa, el seu curs i la seva foto». Analitza quines dades personals s'estan publicant, quins riscos tenen juntes (més que per separat), quins permisos farien falta i com publicaries la mateixa notícia protegint els alumnes.