Crear y publicar una web o blog

Explica 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 nombra dos de sus páginas.

Cuando visitas una web intervienen dos programas: el navegador de tu ordenador y el servidor donde vive la web. Explica 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.

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

Una pastelería quiere una web sencilla con: presentación, fotos de sus tartas, horario y un mapa con la dirección. Diseña 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ú.

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

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

Relaciona 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, di cuál de las cuatro necesita siempre una dirección de dónde está el recurso.

Lee este fragmento de HTML y describe 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 galletas, <a> con el texto «Ver la receta completa». Indica qué etiqueta produce cada parte.

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.

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

Escribe el micro-HTML de una ficha de la web del club de deportes usando solo las etiquetas <h1>, <p>, <img> y <a>: un titular con el nombre del equipo, un párrafo de presentación, una foto y un enlace al calendario de partidos. Después explica qué vería en la página alguien cuyo navegador no pudiera cargar la foto.

Hoy se puede crear una web sin escribir código, con creadores de sitios como Google Sites o WordPress. Explica 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.

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

Para que una web esté en internet hacen falta dos cosas: un dominio (el nombre, como «clublectura.es») y un alojamiento (el servidor donde vive). Explica qué es cada una con el símil de una tienda (el rótulo con el nombre y el local alquilado) y razona por qué los creadores de sitios gratuitos te dan ambas cosas a cambio de llevar su nombre en la dirección.

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

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

En la web del AMPA aparece una lista con «nombre y apellidos de los premiados en la fiesta, su curso y su foto». Analiza 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.