Volver a la portadaFormación Tecnológica · octavo año · Cambiar asignatura
Empezar gratis
Octavo 8° · Formación Tecnológica
La colaboración en red · Publicación y difusión responsable

Crear y publicar una web o blog

Te conviene dominar: Los elementos de una red (sétimo año (III Ciclo de la Educación General Básica))

Su grupo de octavo año quiere tener su propia página para mostrar los trabajos de Formación Tecnológica y avisar de las actividades del colegio. No hace falta ser programador: con un creador de sitios y unas nociones de cómo funciona una página por dentro, pueden tenerla lista en una tarde. Veamos qué hay detrás de cualquier página que usted visita desde su celular.

Qué es una página web

Un sitio web es como un libro del que salen varias páginas web: inicio, contacto y galería. sitio web = «el libro» Sitio páginas web = «las hojas» inicio contacto galería

Cuando usted abre una página intervienen dos programas, que se hablan con un protocolo llamado HTTP: el navegador hace un pedido y el servidor responde con la página. La dirección web (por ejemplo https://www.mep.go.cr) indica el protocolo, el dominio y la ruta de la página.

Practica★☆☆Sin empezar
Explique con sus 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. Ponga un…

Explique con sus 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. Ponga un ejemplo de un sitio web que conozca y nombre dos de sus páginas.

Resolver
Practica★☆☆Sin empezar
Cuando usted visita una web intervienen dos programas: el navegador de su computadora y el servidor donde vive la web. Explique qué hace cada uno (quién pide la página,…

Cuando usted visita una web intervienen dos programas: el navegador de su computadora y el servidor donde vive la web. Explique 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.

Resolver

Cómo se maqueta una página

Esquema de maquetación web: cabecera, menú de navegación, contenido principal y pie de página. cabecera: logo y título menú: enlaces a otras páginas contenido: texto, fotos, videos pie: contacto y aviso legal

Las cuatro zonas son: la cabecera (logo y título del sitio), el menú (enlaces a las demás páginas), el contenido (lo principal de cada página) y el pie (contacto, aviso legal y datos de la dirección).

Practica★☆☆Sin empezar
La figura muestra el esquema de diagramación típico de una página web, con sus cuatro zonas, pero el nombre de una de ellas está tapado. Indique qué zona está tapada y…

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

encabezado con el logo y el título ? contenido principal: texto, fotos y videos pie de página: contacto y aviso legal header nav main footer

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

Resolver
Practica★★☆Sin empezar
Una pastelería quiere un sitio web sencillo con: presentación, fotos de sus tortas, horario y un mapa con la dirección. Diseñe su estructura: qué zonas tendrá la página…

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

Resolver
Practica★★★Sin empezar
Diseñe la página principal de la web del club de ciencia: dibuje o describa su esquema de maquetación (encabezado, menú, contenido, pie de página), decida los cuatro…

Diseñe la página principal de la web del club de ciencia: dibuje o describa su esquema de maquetación (encabezado, menú, contenido, pie de página), decida los cuatro contenidos que destacaría en ella y explique qué enlaces pondría en el menú y por qué esos y no otros.

Puede hacerlo en papel y enviar una foto con su respuesta.

Resolver

HTML: las etiquetas que describen el contenido

Comparación entre el código HTML con etiquetas y la página que muestra el navegador: título, párrafo, imagen y enlace. Código HTML <h1>El rincón de Marta</h1> <p>Manualidades y recetas fáciles.</p> <img> ... <a>Ver receta</a> el navegador lo muestra Página en el navegador El rincón de Marta Manualidades y recetas fáciles. [imagen] · Ver receta

Texto alternativo y enlaces que se entienden

El atributo alt de <img> es una descripción escrita de la imagen. Lo necesitan las personas que usan un lector de pantalla (un programa que lee en voz alta la página) y también sirve cuando la imagen no carga: en lugar de un ícono roto aparece el texto.

Un buen alt describe lo que aporta la imagen, no solo dice «foto» o «gráfico». Y el texto de un enlace debe decir adónde lleva: «Haga clic aquí» no dice nada a quien escucha la lista de enlaces; «Ver el calendario de partidos» sí.

Practica★☆☆Sin empezar
El HTML no «programa» la página: la describe con etiquetas que marcan qué es cada cosa. Explique qué es una etiqueta HTML usando el símil de los marcadores de colores…

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

Resolver
Practica★☆☆Sin empezar
Relacione 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…

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

Resolver
Practica★★☆Sin empezar
Lea este fragmento de HTML y describa 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>,…

Lea este fragmento de HTML y describa 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». Indique qué etiqueta produce cada parte.

Resolver
Practica★★☆Sin empezar
Las imágenes de una web llevan un texto alternativo (el atributo «alt») que describe la foto. Explique quién lo necesita (personas que usan lectores de pantalla) y…

Las imágenes de una web llevan un texto alternativo (el atributo «alt») que describe la foto. Explique quién lo necesita (personas que usan lectores de pantalla) y escriba 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.

Resolver

El árbol de etiquetas

Árbol de etiquetas HTML: html se divide en head y body, y body contiene h1, p e img. <html> <head> <body> <h1> <p> <img> no se ve
Practica★★☆Sin empezar
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. Averigüe qué dos…

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.

html head body ? el título de la pestaña h1 titular grande ? un párrafo img una foto

Averigüe qué dos etiquetas están tapadas usando las pistas de debajo de cada caja, y explique con sus palabras qué significa que una etiqueta «cuelgue» de otra en el árbol.

Resolver

Crear y publicar sin programar

Para quien empieza, la ventaja es clara: se obtiene un resultado presentable en poco tiempo y el creador escribe el HTML por usted. Su limitación es que solo puede hacer lo que la herramienta permite. Escribir HTML a mano da control total y enseña cómo funciona internet por dentro, pero tarda más y exige más práctica.

Pasos para crear un sitio: pensar contenido, elegir plantilla, añadir textos y fotos, revisar en celular y computadora, y publicar. 1. pensar contenido 2. elegir plantilla 3. agregar textos e imágenes 4. revisar en celulary computadora → publicar
Practica★☆☆Sin empezar
Hoy se puede crear una web sin escribir código, con creadores de sitios como Google Sites o WordPress. Explique qué es un creador de sitios web, cómo se trabaja en él…

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

Resolver
Practica★★☆Sin empezar
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)…

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) presionar «publicar» para darle una dirección en internet, (e) añadir los textos y las imágenes. Ordénelos y explique por qué la revisión debe ir antes de publicar.

Resolver
Practica★★☆Sin empezar
Compare 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 recomiende una de las dos…

Compare 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 recomiende 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.

Resolver

Blog, escaparate y elegir herramienta

Un blog es un sitio web que se actualiza con artículos (entradas) nuevos, ordenados del más reciente al más antiguo. Una web escaparate (por ejemplo, la de un negocio) casi no cambia: presenta quién es usted, qué ofrece y cómo contactarlo.

Comparación de un blog, con entradas ordenadas de la más reciente a la más antigua, y una web escaparate con páginas fijas. Blog entrada de hoy entrada de la semana pasada entrada más antigua Escaparate quiénes somos productos contacto

Ejemplos: un blog de recetas o de noticias del colegio encaja en un blog; la página de una librería del barrio encaja en un escaparate. El blog es además un espacio de participación: hay edublogs (blogs educativos) y blogs de ONG, de organismos de gobierno o de instituciones culturales.

Practica★☆☆Sin empezar
Un blog es un sitio web que se actualiza con artículos nuevos, ordenados del más reciente al más antiguo. Explique qué diferencia hay entre un blog y una web…

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

Resolver
Practica★★☆Sin empezar
La clase crea un blog sobre los barrios del pueblo o la ciudad. Planifique sus tres primeras entradas: título de cada una, dos contenidos que llevará (texto, foto,…

La clase crea un blog sobre los barrios del pueblo o la ciudad. Planifique 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. Explique por qué conviene planificar antes de tocar la computadora.

Resolver
Practica★★★Sin empezar
Elija la web de un comercio o asociación de su localidad que conozca (o imagine una realista) y analícela: qué zonas tiene su página principal, qué contenidos ofrece,…

Elija la web de un comercio o asociación de su localidad que conozca (o imagine una realista) y analícela: qué zonas tiene su página principal, qué contenidos ofrece, qué le falta y qué le sobra. Proponga tres mejoras concretas de estructura o de contenido y justifíquelas.

Resolver

Dirección y alojamiento: dominio y hosting

Para que su web exista en internet necesita dos cosas distintas.

El visitante escribe un dominio en el navegador, y la petición llega al servidor de alojamiento donde están los archivos del sitio. navegador dominio(la dirección) alojamiento(el servidor)

Hay dos caminos comunes:

  • Sitio gratuito en una plataforma: la dirección es un subdominio de la plataforma y el alojamiento va incluido. No se paga, pero a cambio suele haber publicidad ajena, menos control y dependencia de la empresa (si cambia las reglas o cierra, tu sitio se ve afectado).

  • Dominio propio y hosting contratado: se paga por el dominio (por año) y por el alojamiento (por mes). Tiene dirección propia, sin anuncios impuestos y más control.

Publicar con responsabilidad

A la izquierda, lo que se puede publicar en la web del grupo; a la derecha, lo que mejor no publicar. Se puede publicar · nombre del colegio · foto de la fachada · trabajos con nombre de pila · descripción de actividades Mejor no · nombres y apellidos completos · horarios personales · domicilio o teléfono · fotos sin autorización

Una política de publicación pone estas reglas por escrito. Cuatro apartados breves bastan:

  1. Qué se publica y qué no: actividades, trabajos y fotos autorizadas sí; datos personales no.

  2. Quién revisa: una persona del equipo y el o la docente revisan antes de publicar.

  3. Cómo se citan las fuentes: todo texto o imagen ajeno lleva autor y fuente, y se respeta su licencia.

  4. Retirada de contenidos: si alguien pide quitar algo suyo, se retira pronto y sin pedir explicaciones.

En Costa Rica, los datos personales están protegidos por la Ley 8968 de Protección de la Persona frente al Tratamiento de sus Datos Personales: quien los trata debe informar para qué los usa, y las personas pueden pedir acceso, rectificación y supresión de los suyos. La PRODHAB (Agencia de Protección de Datos de los Habitantes) vela por su cumplimiento (verificar).

Practica★☆☆Sin empezar
La clase va a crear la web del grupo. Clasifique estos contenidos en «se pueden publicar» o «no se deben publicar», justificando cada caso: el nombre del colegio, la…

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

Resolver
Practica★★☆Sin empezar
En la web del cole se publican fotos de las actividades. Redacte tres normas de publicación responsable para esa web pensando en: qué estudiantes pueden salir…

En la web del cole se publican fotos de las actividades. Redacte tres normas de publicación responsable para esa web pensando en: qué estudiantes pueden salir reconocibles, qué datos personales no deben acompañar a las fotos y qué permiso hace falta de las familias. Justifique cada norma.

Resolver
Practica★★★Sin empezar
En la página web de la Junta de Padres de Familia del cole aparece una lista con «nombre y apellidos de los premiados en la fiesta, su año y su foto». Analice qué datos…

En la página web de la Junta de Padres de Familia del cole aparece una lista con «nombre y apellidos de los premiados en la fiesta, su año y su foto». Analice 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ía la misma noticia protegiendo a los estudiantes.

Resolver
Practica★★★Sin empezar
Redacte la política de publicación de la web de la clase: qué contenidos se publican y cuáles no, quién revisa antes de publicar, cómo se citan las fuentes y las…

Redacte la política de publicación de la web de la clase: 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. Preséntela como un documento de cuatro apartados breves.

Resolver

Tecnología con mirada crítica

Publicar en la web no es un acto neutro: detrás de cada herramienta hay quién la controla, quién puede usarla y quién paga sus costos. Cuatro ideas le ayudan a analizarlo.

Relaciónelo con lo que vio en esta página. WordPress es software libre: su grupo puede usarlo y adaptarlo sin pedir permiso. Una plataforma «gratuita» puede cobrar con sus datos y su atención. Si su sitio es muy pesado, quien tiene un celular modesto y pocos datos en su plan no va a poder verlo: eso es brecha digital. Y cada servidor y cada dispositivo tiene un costo ambiental.

Imagen, música y textos ajenos

Lo que usted publica en la web de su grupo sigue estando sujeto a la ley. Tres reglas:

  • Imagen de las personas: no se publican fotos de alguien sin su consentimiento (o el de su familia si es menor).

  • Música, fotos y textos de otros: tienen autor y están protegidos por la Ley de Derechos de Autor y Derechos Conexos (Ley 6683; verificar). Para usarlos hace falta permiso o una licencia que lo permita, como Creative Commons, y siempre hay que citar al autor.

  • Plagio: copiar un texto y presentarlo como propio está mal aunque se publique en una web escolar. Se resume con sus palabras y se cita la fuente.

Practica★★★Sin empezar
Un compañero dice: «como el sitio web de la clase lo hicimos nosotros, podemos poner en él lo que queramos: fotos de quien sea, música de fondo famosa y textos copiados…

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

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

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

Complete las siguientes fases:

  1. Fase 1. Recogida de datos: Entre a la web del INE (ine.es) y anote el porcentaje de menores que utilizan internet habitualmente, o encueste a 5 familiares sobre sus horas de uso de pantallas para calcular la media diaria (por ejemplo, $3,5\text{ h}$). Registre los datos en una tabla.

  2. Fase 2. Creación y contenidos: Maquete su entrada en LibreOffice Writer (o una herramienta de blog gratuita) simulando la interfaz web. Analice los datos obtenidos e ilustre 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: Redacte tres pautas sobre privacidad para publicar fotos o información de terceros en redes. Finalmente, asigne una licencia Creative Commons a su propio trabajo (como CC BY-NC-SA), argumente por qué la ha escogido y exporte 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.

Resolver

Vuelva al principio: para publicar la web del grupo en una tarde, elija una plantilla en un creador de sitios, organice los contenidos en las cuatro zonas de la maquetación, agregue texto alternativo a las imágenes, compruebe en la vista previa que se lee bien en el celular y asegúrese de no incluir datos personales de nadie.

Resumen

Ver todos los ejercicios de este apartado