Exercicis: Crear i publicar un web o 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.

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.

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.

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.

Un blog és un lloc web que s'actualitza amb articles nous, ordenats del més recent al més antic. Explica quina diferència hi ha entre un blog i un web «aparador» (el d'una botiga, que gairebé no canvia) i posa un exemple de tema que encaixaria bé en cadascun.

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.

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ú.

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.

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.

Compara crear un web escrivint HTML a mà amb crear-lo en un creador de llocs sense codi: un avantatge i una limitació de cada via. Després recomana una de les dues per a cada cas: (a) el web del club de lectura, llest en una setmana; (b) aprendre com funciona internet per dins.

La classe crea un blog sobre els barris del poble o la ciutat. Planifica les seves tres primeres entrades: títol de cadascuna, dos continguts que portarà (text, foto, entrevista, mapa) i quina secció del menú li correspon. Explica per què convé planificar abans de tocar l'ordinador.

Al web de l'institut es publiquen fotos de les activitats. Redacta tres normes de publicació responsable per a aquest web pensant en: quin alumnat pot sortir reconeixible, quines dades personals no han d'acompanyar les fotos i quin permís cal de les famílies. Justifica cada norma.

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.

Tria el web d'un comerç o associació de la teva localitat que coneguis (o imagina'n un de realista) i analitza'l: quines zones té la pàgina principal, quins continguts ofereix, què li falta i què li sobra. Proposa tres millores concretes d'estructura o de contingut i justifica-les.

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.

Tres projectes necessiten un web: (a) el diari de l'institut, que publicarà articles cada setmana entre diverses persones; (b) l'exposició d'un treball, una sola pàgina fixa; (c) la botiga de la cooperativa del centre, amb catàleg i comandes. Tria per a cadascun l'eina més adequada (creador de llocs tipus Google Sites, un blog tipus WordPress o una solució de comerç electrònic) i raona l'elecció.

Redacta la política de publicació del web de la classe: quins continguts es publiquen i quins no, qui revisa abans de publicar, com se citen les fonts i les imatges alienes, i què es fa si algú demana retirar un contingut seu. Presenta-la com un document de quatre apartats breus.

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).

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.

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.

Un company diu: «com que el web de la classe l'hem fet nosaltres, hi podem posar el que vulguem: fotos de qui sigui, música de fons famosa i textos copiats d'altres webs». Rebat les seves tres afirmacions amb arguments: privadesa i dret a la imatge, drets d'autor de la música i plagi dels textos, i proposa l'alternativa correcta en cada cas.

Repte del tema. Dissenya un article per a un blog de divulgació sobre hàbits tecnològics i privacitat, utilitzant dades reals i respectant la propietat intel·lectual.

Completa les fases següents:

1. Fase 1. Recollida de dades: Entra al web de l'INE (ine.es) i anota el percentatge de menors que utilitzen internet habitualment, o enquesta 5 familiars sobre les seves hores d'ús de pantalles per calcular la mitjana diària (per exemple, $3,5\text{ h}$). Registra les dades en una taula.

2. Fase 2. Creació i continguts: Maqueta la teva entrada a LibreOffice Writer (o una eina de blog gratuïta) simulant la interfície web. Analitza les dades obtingudes i il·lustra l'entrada amb una imatge obtinguda d'un repositori lliure (com ara Wikimedia Commons o Pixabay), referenciant adequadament autor, font i tipus de llicència.

3. Fase 3. Difusió i llicències: Redacta tres pautes sobre privacitat per publicar fotos o informació de tercers a les xarxes. Finalment, assigna una llicència Creative Commons al teu propi treball (com ara CC BY-NC-SA), argumenta per què l'has escollida i exporta el resultat en PDF.

Es valorarà:

• Obtenció rigorosa de dades reals i el seu tractament clar.

• Atribució correcta de llicències lliures als recursos aliens i elecció justificada de la llicència pròpia.

• Qualitat tècnica de la maqueta i rellevància ètica dels consells de publicació responsable.