Ejercicios: Crear y publicar una web o blog

Explicá con tus palabras la diferencia entre una página web y un sitio web, usando el símil de un libro: qué sería cada hoja y qué sería el libro completo. Poné un ejemplo de un sitio web que conozcas y nombrá dos de sus páginas.

Cuando visitás una web intervienen dos programas: el navegador de tu computadora y el servidor donde vive la web. Explicá qué hace cada uno (quién pide la página, quién la guarda y la envía, quién la muestra) y qué ocurre si el servidor está apagado.

La figura muestra el esquema de maquetación típico de una página web, con sus cuatro zonas, pero el nombre de una de ellas está tapado.

Indicá qué zona está tapada y qué contiene normalmente, y explicá para qué sirve cada una de las otras tres zonas de la página.

El HTML no «programa» la página: la describe con etiquetas que marcan qué es cada cosa. Explicá qué es una etiqueta HTML usando el símil de los resaltadores de colores con los que marcás un apunte (esto es un título, esto es un párrafo) y decí qué diferencia hay entre el contenido y las marcas.

Relacioná cada etiqueta HTML con lo que coloca en la página: (a) <h1>, (b) <p>, (c) <img>, (d) <a>, con estas funciones: un enlace a otra página, una imagen, el título principal y un párrafo de texto. Después, decí cuál de las cuatro necesita siempre una dirección de dónde está el recurso.

Hoy se puede crear una web sin escribir código, con creadores de sitios como Google Sites o WordPress. Explicá qué es un creador de sitios web, cómo se trabaja en él (arrastrar bloques, elegir plantillas) y qué ventaja tiene para alguien que está empezando.

El curso va a crear la web del grupo. Clasificá estos contenidos en «se pueden publicar» o «no se deben publicar», justificando cada caso: el nombre de la escuela, la foto de la fachada del colegio, los nombres y apellidos completos de todos los alumnos, los trabajos del curso firmados solo con el nombre de pila, el horario personal de un alumno y una descripción de las actividades del grupo.

Un blog es un sitio web que se actualiza con artículos nuevos, ordenados del más reciente al más antiguo. Explicá qué diferencia hay entre un blog y una web «vidriera» (la de un negocio, que casi no cambia) y poné un ejemplo de tema que encajaría bien en cada uno.

Leé este fragmento de HTML y describí cómo se verá la página en el navegador, elemento a elemento: <h1>El rincón de Marta</h1>, <p>Manualidades y recetas fáciles.</p>, <img> con una foto de unas galletitas, <a> con el texto «Ver la receta completa». Indicá qué etiqueta produce cada parte.

Una pastelería quiere un sitio web sencillo con: presentación, fotos de sus tortas, horario y un mapa con la dirección. Diseñá su estructura: qué zonas tendrá la página principal (cabecera, menú, contenido, pie), qué irá en cada una y qué dos páginas secundarias enlazarías desde el menú.

Estos pasos para publicar una web con un creador de sitios están desordenados: (a) revisar cómo se ve en el celular y en la computadora, (b) elegir una plantilla, (c) pensar qué contenidos tendrá, (d) hacer clic en «publicar» para darle una dirección en internet, (e) añadir los textos y las imágenes. Ordenalos y explicá por qué la revisión debe ir antes de publicar.

La figura muestra el árbol de etiquetas de una página web muy sencilla: cómo unas etiquetas contienen a otras, pero dos etiquetas están tapadas.

Averiguá qué dos etiquetas están tapadas usando las pistas de debajo de cada caja, y explicá con tus palabras qué significa que una etiqueta «cuelgue» de otra en el árbol.

Compará crear una web escribiendo HTML a mano con crearla en un creador de sitios sin código: una ventaja y una limitación de cada vía. Después recomendá una de las dos para cada caso: (a) la web del club de lectura, lista en una semana; (b) aprender cómo funciona internet por dentro.

La clase crea un blog sobre los barrios del pueblo o la ciudad. Planificá sus tres primeras entradas: título de cada una, dos contenidos que llevará (texto, foto, entrevista, mapa) y qué sección del menú le corresponde. Explicá por qué conviene planificar antes de tocar la computadora.

En la web del colegio se publican fotos de las actividades. Redactá tres normas de publicación responsable para esa web pensando en: qué alumnado puede salir reconocible, qué datos personales no deben acompañar a las fotos y qué permiso hace falta de las familias. Justificá cada norma.

Las imágenes de una web llevan un texto alternativo (el atributo «alt») que describe la foto. Explicá quién lo necesita (personas que usan lectores de pantalla) y escribí un buen texto alternativo para estas dos imágenes del blog del curso: (a) la foto del equipo ganador del torneo de ajedrez y (b) un gráfico de barras con la asistencia al club cada mes.

Elegí la web de un comercio o asociación de tu localidad que conozcas (o imaginá una realista) y analizala: qué zonas tiene su página principal, qué contenidos ofrece, qué le falta y qué le sobra. Proponé tres mejoras concretas de estructura o de contenido y justificalas.

Un grupo de alumnos creó este fragmento de código HTML para la ficha del equipo de fútbol sala de la escuela:

<h1>Equipo Cadete</h1>

<img src="equipo.jpg">

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

Al auditar la página se detectaron dos fallos:

1. Si la imagen no se carga por un fallo en la red, en la pantalla solo aparece un ícono roto sin ninguna explicación.

2. Si una persona con discapacidad visual usa un lector de pantalla, no sabe qué contiene la imagen ni hacia dónde conduce exactamente el enlace.

Reescribí el código HTML corrigiendo ambos problemas (utilizá los atributos y textos descriptivos adecuados) y justificá técnicamente cómo tu solución mejora la accesibilidad y la usabilidad de la web.

Tres proyectos necesitan una web: (a) el periódico de la escuela, que publicará artículos cada semana entre varias personas; (b) la exposición de un trabajo, una sola página fija; (c) la tienda de la cooperativa de la escuela, con catálogo y pedidos. Elegí para cada uno la herramienta más adecuada (creador de sitios tipo Google Sites, un blog tipo WordPress o una solución de comercio electrónico) y razoná la elección.

Redactá la política de publicación de la web del curso: qué contenidos se publican y cuáles no, quién revisa antes de publicar, cómo se citan las fuentes y las imágenes ajenas, y qué se hace si alguien pide retirar un contenido suyo. Presentala como un documento de cuatro apartados breves.

La asociación juvenil de tu barrio quiere publicar su página web y baraja dos opciones:

• Opción A: Crear un sitio gratuito en una plataforma en línea, obteniendo la dirección asociacionvalle.creacionsitios.com y alojamiento sin costo en sus servidores a cambio de mostrar publicidad del proveedor.

• Opción B: Registrar el dominio propio asociacionvalle.com.ar (8 pesos al año) y contratar un alojamiento (hosting) independiente (3,5 pesos al mes).

1) Explicá qué función cumple el dominio y cuál el alojamiento, diferenciándolos en cada una de las dos opciones.

2) El tesorero propone la Opción A diciendo: «Ahorrémonos la plata; la dirección y el servidor dan exactamente igual mientras la página se abra». Rebatí su afirmación prediciendo al menos dos problemas o limitaciones que va a sufrir la asociación a mediano plazo si eligen la Opción A (en relación con su imagen pública, la publicidad o el control de los contenidos).

En la web de la cooperadora aparece una lista con «nombre y apellido de los premiados en la fiesta, su año y su foto». Analizá qué datos personales se están publicando, qué riesgos tienen juntos (más que por separado), qué permisos harían falta y cómo publicarías la misma noticia protegiendo a los alumnos.

Diseñá la página principal de la web del club de ciencia: dibujá o describí su esquema de maquetación (cabecera, menú, contenido, pie), decidí los cuatro contenidos que destacarías en ella y explicá qué enlaces pondrías en el menú y por qué esos y no otros.

Podés hacerlo en papel y enviar una foto con tu respuesta.

Un compañero dice: «como la web de la clase la hicimos nosotros, podemos poner en ella lo que queramos: fotos de quien sea, música de fondo famosa y textos copiados de otras webs». Rebatí sus tres afirmaciones con argumentos: privacidad y derecho a la imagen, derechos de autor de la música y plagio de los textos, y proponé la alternativa correcta en cada caso.

Reto del tema. Diseñá un artículo para un blog de divulgación sobre hábitos tecnológicos y privacidad, utilizando datos reales y respetando la propiedad intelectual.

Completá las siguientes fases:

1. Fase 1. Recolección de datos: Entrá en la web del INDEC (indec.gob.ar) y anotá el porcentaje de menores que utilizan internet habitualmente, o encuestá a 5 familiares sobre sus horas de uso de pantallas para calcular el promedio diario (por ejemplo, $3,5\text{ h}$). Registrá los datos en una tabla.

2. Fase 2. Creación y contenidos: Maquetá tu entrada en LibreOffice Writer (o una herramienta de blog gratuita) simulando la interfaz web. Analizá los datos obtenidos e ilustrá la entrada con una imagen obtenida de un repositorio libre (como Wikimedia Commons o Pixabay), referenciando adecuadamente autor, fuente y tipo de licencia.

3. Fase 3. Difusión y licencias: Redactá tres pautas sobre privacidad para publicar fotos o información de terceros en redes. Finalmente, asigná una licencia Creative Commons a tu propio trabajo (como CC BY-NC-SA), argumentá por qué la elegiste y exportá el resultado en PDF.

Se valorará:

• Obtención rigurosa de datos reales y su tratamiento claro.

• Correcta atribución de licencias libres a los recursos ajenos y elección justificada de la licencia propia.

• Calidad técnica de la maqueta y relevancia ética de los consejos de publicación responsable.