3. Un mundo por explorar

Retor dice

Hoy en día casi todos utilizamos a diario el servicio de internet.

Ahora, la pregunta que nos debemos hacer es, ¿qué es lo que podemos encontrar en internet?

Correcto, en internet podemos encontrar mucha información. Como por ejemplo: deportes, el tiempo, tutoriales, vídeos, música, etc. Para mostrar esta información se utilizan las páginas web.

En las siguientes actividades vais a descubrir un mundo desconocido, conoceréis cómo son las páginas web.

¡Empezamos nuestro viaje!

1. Detectives de la web

Imagen de un dibujo que representa a un detective. Como os indica la imagen de la izquierda, en esta actividad os vais a convertir en detectives de la web.

En esta actividad conoceréis la otra cara de las páginas web.

¿Cómo están hechas nuestras página favoritas?

Si seguís las siguientes instrucciones lo descubriréis:

    1. Abrid el navegador Mozilla Firefox.
    2. Buscar una página web que normalmente visitéis.
    3. Haced clic con el botón derecho del ratón en una zona de la página y seleccionad la opción Inspeccionar.
    4. Os deberá aparecer algo parecido a la siguiente imagen:

Imagen que muestra el código HTML de una página web. Haz clic sobre la imagen para agrandarla

Ya habéis encontrado el lenguaje con el que están hechas todas las páginas web.

Fijaos en la zona que indica la flecha blanca de la imagen anterior. ¿Qué os llama la atención del código que aparece en dicha zona?

Lumen dice ¿No sabéis en qué os tenéis que fijar?

Lo comprendo perfectamente.

Por eso os voy a dar una sugerencia. Fijaos en los textos que aparecen entre los símbolos de menor que (<) y mayor que (>).

Seguro que un buen detective sabe utilizar esta pista.

2. Buscando la estructura perfecta

Imagen de una lupa buscando algo.

Después de la actividad anterior, seguimos nuestra investigación.

En esta actividad vuestro grupo, deberá encontrar la estructura perfecta de una página web.

Se trata de hacer lo siguiente:

    1. Abrid la siguiente página web de la wikipedia.
    2. Haced clic con el botón derecho del ratón, y seleccionad la opción Inspeccionar.
    3. Localizamos las siguientes etiquetas, recordad que van entres los signos de  < y >:
      • !DOCTYPE html
      • html
      • /html
      • head
      • /head
      • body
      • /body
    4. Ahora debéis minimizar el contenido de las etiquetas head y body. Si os fijáis, a la izquierda de estas etiquetas hay un pequeño triángulo. Si pulsáis sobre él se puede maximizar o minizar el contenido de las etiquetas.
    5. Os deberá quedar como la siguiente imagen:

Imagen donde se muestra el contenido de la página de Wikipedia en HTML pero las etiquetas de cabecera y cuerpo están minimizadas.Haz clic para ver la imagen ampliada

Esta estructura se repite en todas las páginas web.

Ahora vuestro grupo debe hacer lo siguiente:

  1. Anotad el orden de las etiquetas. Podéis hacerlo en:
    • Vuestro cuaderno de clase.
    • Utilizando un documento de texto en classroom.
  2. Abrid varias páginas web y comprobad que se cumple la estructura anterior.

¡Felicidades por el gran trabajo de investigación que habéis hecho!

Kardia dice Apóyate en tu grupo

Seguro que esta tarea te ha parecido difícil al principio.

Puede que hayas sentido inseguridad o incluso enfado al tratar de realizarla.

Es normal, es algo nuevo y desconocido. 

Es importante preguntar al resto del grupo, porque entre muchas personas es más fácil comprender los conceptos y apaciguar las emociones.

No te preocupes, con la práctica y con ayuda de tus compañeros y compañeras os sentiréis más seguros y avanzaréis en vuestro aprendizaje.

3. Localizamos etiquetas

A continuación os presento una imagen interactiva.

Si deslizáis la barra central (slider) podéis ver dos imágenes:

  1. A la izquierda podéis ver una página web en la ventana de un navegador.
  2. A la derecha tenéis el código HTML correspondiente a la imagen anterior.

Vuestro grupo deberá:

  1. Localizar el mayor número de etiquetas.
  2. Asignar a cada etiqueta qué es lo que hace.
  3. Anotar las respuestas en vuestro cuaderno o en un documento compartido en classroom.

Lumen dice Tengo una ayuda para tí

Localiza el texto coincidente y observa:

  • En la imagen de la derecha las etiquetas que están al inicio y fin del texto, por ejemplo: <h1> ... </h1>
  • A la izquierda, fíjate en lo que hace, en este caso, resaltan y agrandan el texto escrito entre ellas.

¡Ya has localizado una etiqueta y su efecto!

4. Os presento a Bluefish

Cuando vemos algo por primera vez, intentamos hacernos una idea de lo que puede ser, para qué puede servir,... y muchas cosas más.

Esta actividad trata precisamente de eso, conocer a Bluefish.

En la siguiente imagen podéis ver cómo es la pantalla incial de Bluefish.

Imagen que muestra la pantalla inicial de la aplicación Bluefish.Haz clic sobre la imagen para verla ampliada

Si quieres conocer de cerca a Bluefish, puedes abrir la aplicación y navegar por sus menús.

Imagen de la tecla Windows de nuestro ordenador. Para entrar en la aplicación debéis:

    1. Pulsar la tecla Windows.
    2. Si escribes Bluefish, te aparecerá la aplicación.
    3. Si no aparece, quizás necesites instalarla en tu equipo. En este caso habla con tu profesor o profesora.

En esta actividad vuestro grupo deberá:

  1. Dibujar en el cuaderno la pantalla inicial del editor Bluefish. No es necesario dibujar todos los detalles.
  2. Sobre el dibujo anterior, dividir las diferentes zonas del editor, por ejemplo recuadrándolas con un rotulador de color.
  3. Una vez creadas las diferentes zonas, deberéis pensar cuál será su finalidad y anotarlo en vuestro dibujo.
  4. Subid una foto de vuestro dibujo a la tarea de classroom.

5. Este ciclo debe tener un orden

El ciclo de vida de una página web comprende desde la identificación de su necesidad hasta su publicación.

En esta actividad se trata de que imaginéis todos los pasos que hay que dar para realizar el reto que nos han encomendado al principio.

Imagen de una lista desordenada de tareas: entregar el trabajo, escribir el código, comprobar el resultado, diseñar en papel y buscar lo que necesitamos.

Con tu compañero o compañera realiza un listado ordenado de los pasos necesarios para resolver el reto. Puedes usar:

  • Tu cuaderno de clase.
  • Un documento de texto en classroom.

Lumen dice ¿Necesitas ayuda para realizar la actividad?

Si necesitáis ayuda podéis investigar en la web, buscando el ciclo de vida de una página web.

Página 4 de 9

Obra publicada con Licencia Creative Commons Reconocimiento No comercial Compartir igual 4.0

Creado con eXeLearning (Ventana nueva)