Saltar la navegación

Créditos

Autoría

Imagen del Proyecto REA Andalucía

Título Compartimos: Pensamiento Computacional para todos
Descripción

Recurso de la asignatura Computación y Robótica de 3 ESO sobre el desarrollo de páginas web. Los alumnos y alumnas realizarán un viaje a través del lenguaje HTML que les permitirá conocer y comprender cómo se construyen las páginas web. También descubrirán los problemas que se presentan en el desarrollo web y aprenderán a realizar el ciclo de vida completo del desarrollo de una aplicación web. Este viaje finalizará con diseño e implementación de una página web donde explicarán su experiencia vivida en la materia de Computación y Robótica. El producto final se podrá subir a la página oficial del Centro.
Persona elaboradora de contenido Antonio Jiménez Ruiz
Persona asesora en DUA y lectura fácil Lydia Nacimiento Rodríguez
Persona de soporte técnico Antonio Jiménez Ruiz
Persona asesora técnica docente José Pujol Pérez
Persona coordinadora de la materia Francisco Javier Álvarez Jiménez
Organización Dirección General de Formación del Profesorado e Innovación Educativa. Consejería de Educación y Deporte. Junta de Andalucía.
Licencia Licencia Creative Commons Reconocimiento No comercial Compartir igual 4.0

Este contenido fue creado con eXeLearning, el editor libre y de fuente abierta diseñado para crear recursos educativos.

Logo Andalucía se mueve con Europa

Créditos de los recursos externos

Página 1

Portada de la asignatura
Elaboración propia. Portada (CC BY-NC-SA )

Página 2

Imagen que representa a un community manager.
Mohamed Hassan. Community Manager (Dominio público)
Imagen que representa a una persona creando una página web.
Nick Youngson. Web Developer (CC BY-NC-SA )
Imagen de ejemplo de código html.
Elaboración propia. CodigoHTML (CC BY-NC-SA )
ZEWS Web. Importancia de las redes sociales en la actualidad (YouTube)
Imagen que muestra la cantidad de dinero gastada en compras online, los incrementos según el tipo de negocio y los compradores.
Mohamed Hassan. Comercio electrónico (ontsi)
Imagen del mando de una consola de juego.
Mohamed Hassan. Mando juego (CC0)
Fundación Telefónica. MOOC Iniciación a la programación: Introducción (YouTube)

Página 3

Imagen de una diana. Con valores de 10 hasta 2.
Arasaac. Diana (CC BY-NC-SA )
Imagen que muestra diferentes medios de comunicación. Por ejemplo, una radio, un periódico y la televisión.
Arasaac. Medios de comunicación (CC BY-NC-SA )
Imagen que muestra diferentes páginas web que nos ofrecen información.
Elaboración propia. Páginas web (CC BY-NC-SA )
Imagen de una señal de peligro con marcas que indican una distancia
Elaboración propia. SeñalPeligro (CC BY-NC-SA )
Imagen de una jarra con marcas de medir.
Arasaac. jarramedidora (CC BY-NC-SA )
Imagen que representa el uso de un marcapáginas.
Arasaac. Marcapáginas (CC BY-NC-SA )
Imagen de un termómetro que marca 36,5 ºC.
Arasaac. Termómetro (CC BY-NC-SA )



Imagen que representa el ciclo de vida de los gusanos de seda.
Arasaac. Ciclo de vida (CC BY-NC-SA )


Página 4

Imagen de un dibujo que representa a un detective.
Arasaac. Detective (CC BY-NC-SA )
Imagen que muestra el código HTML de una página web.
Elaboración propia. DetectiveHTML (CC BY-NC-SA )
Imgen del diario de aprendizaje del alumnado
Elaboración propia. DiarioAprendizaje (CC BY-NC-SA )
Imagen de una lupa buscando algo.
Arasaac. Buscar (CC BY-NC-SA )
Imagen donde se muestra el contenido de la página de Wikipedia en HTML pero las etiquetas de cabecera y cuerpo están minimizadas.
Elaboración propia. HTML_Minimizado (CC BY-NC-SA )



Imagen que muestra la pantalla inicial de la aplicación Bluefish.
Elaboración propia. PantallaInicial (CC BY-NC-SA )
Imagen de la tecla Windows de nuestro ordenador.
Elaboración propia. TeclaWindows (CC BY-NC-SA )
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.
Elaboración propia. Ciclo de tareas (CC BY-NC-SA )
Imagen del logotipo de la aplicación BlueFish. Representa un pez azul con ojos simpáticos.
Bluefish project. Blufish (GNU/GPL)

Página 5

Página 6

https://ca.wikipedia.org/wiki/Bluefish#/media/Fitxer:Bluefish-icon.svg
Bluefish project. BlueFish (GNU/GPL)
Imagen que muestra al logo de Bluefish asomándose al logo de Wikipedia.
Elaboración propia a partir de las obras de Nohat y Bluefish project. WikipediaBluefish (CC BY-NC-SA )
Imagen de la infografía
Elaboración propia. Infografía

Página 7

Imagen que muestra los datos de un archivo de libros, que facilitan la búsqueda de un libro.
Dr. Marcus Gossler. Metadatos (CC BY-SA)
Kiko Palomares. ¿HTML qué es y para qué sirve? - BIEN EXPLICADO (CC BY-SA)
Kiko Palomares. 10 BUENAS PRÁCTICAS en HTML (YouTube)
Imagen que muestra la etiqueta que informa al navegador de la versión de HTML que estamos usando en nuestra página web.
Elaboración propia. TipoDoc (CC BY-NC-SA )
Imagen de las etiquetas HTML que indican el inicio y fin de la página web.
Elaboración propia. InicioFin (CC BY-NC-SA )
Imagen de las etiquetas HTML que indican la cabecera de la página.
Elaboración propia. Cabecera (CC BY-NC-SA)
Imagen donde se ve la estructura de una página HTML. Aparecen las etiquetas fundamentales como la cabecera y el cuerpo.
Elaboración propia. EstructuraHTML (CC BY-NC-SA )
Imagen donde se ve la estructura de una página HTML. Aparecen las etiquetas fundamentales como la cabecera y el cuerpo.
Elaboración propia. EstructuraHTML (CC BY-NC-SA )
Imagen de la estructura que debe tener el lenguaje HTML. En rojo aparece la parte principal, en amarillo la cabecera y en púrpura el cuerpo.
Elaboración propia. EstructuraHTML (CC BY-NC-SA )
Imagen del documento rellenable EstructuraBasicaPaginaWeb.pdf
Elaboración propia. DocumentoRellenableEstuctura (CC BY-NC-SA )
Imagen que representa la acción de recordar.
Arasaac. Recordar la contraseña (CC BY-NC-SA)
KhanAcademy. HTML basic (YouTube)
KhanAcademy. HTML Text emphasis (YouTube)
KhanAcademy. HTML: Imgages (YouTube)
KhanAcademy. HTML: List (YouTube)

Página 8

Imagen que describe la configuración de la ventana de Inicio rápido. Debemos realizar los siguientes cambios: introducir el título de la página web, eliminar todas las etiquetas de la cabecera, desactivar la opción de abrir en un documento nuevo y aceptamos los cambios pulsando en OK.
Elaboración propia. InicioRapido (CC BY-NC-SA)
Imagen que muestra la ruta para acceder a la opción Codificación de caracteres de la aplicación BlueFish.
Elaboración propia. RutaTipoCaracteres (CC BY-NC-SA )
Imagen que muestra la ayuda del editor de BlueFish al escribir la etiqueta de párrafo.
Elaboración propia. AyudaCompletarParrafo (CC BY-NC-SA )
Imagen que muestra la barra de herramientas de la aplicación Bluefish, destacando las opciones de guardar y previsualizar en el navegador.
Elaboración propia. Guardar_Previsualizar (CC BY-NC-SA )
Imagen donde se muestra el código del código HTML y la previsualización en el navegador.
Elaboración propia. Previsualizacion_HolaMundo (CC BY-NC-SA )
Imagen de cómo quedaría después de configurar la ventana Inicio rápido…
Elaboración propia. PaginaHolaMundo (CC BY-NC-SA )
Imagen de una página HTML, donde se muestra el comportamiento de los títulos h1, h2, h3, h4, h5 y h6.
Elaboración propia. HTML_Titulos (CC BY-NC-SA )
Imagen donde se explica cómo se debe utilizar la etiqueta para insertar una imagen en un documento HTML.
Elaboración propia. HTML_InsertarImagen (CC BY-NC-SA )
Imagen del logotipo de los Recursos Educativos Abiertos (REA) de la Junta de Andalucía.
Elaboración propia. LogoREA (CC BY-NC-SA )
Imagen que muestra cómo se puede copiar el enlace de una imagen que está en una página web.
Elaboración propia. CopiarEnlaceImagen (CC BY-NC-SA )
Imagen donde se ve como quedaría la etiqueta imagen con el enlace, tamaño y descripción.
Elaboración propia. EjemploEtiquetaImagen (CC BY-NC-SA )
Imagen de la ventana de la aplicación Bluefish donde podemos poner los parámetros a una imagen.
Elaboración propia. VentanaImagen (CC BY-NC-SA )
Imagen que muestra como copiar la dirección o URL de un contenido digital.
Elaboración propia. CopiarURL (CC BY-NC-SA )
Imagen que muestra los tipos de listas, una ordenada y otra desordenada.
Elaboración propia. Listas (CC BY-NC-SA )
Imagen que muestra los días de la semana en una lista ordenados. A la derecha se puede ver el código HTML correspondiente.
Elaboración propia. Codigo_ListaOrdenada (CC BY-NC-SA )
Imagen que muestra una lista de siete colores organizados con viñetas.
Elaboración propia. Codigo_ListaDesordenada (CC BY-NC-SA )
Kiko Palomares. Cómo poner un VÍDEO de YouTube en HTML que se reproduzca solo (YouTube)
Imagen que muestra un truco para recordar algo que es muy complicado.
Kes47. UnDiaViUnaVacaVestidaDeUniforme (CC BY)
Imagen del documento rellenable Resumen las etiquetas y sus atajos.
Elaboración propia. ResumenEtiquetas (CC BY-NC-SA )
Imagen que muestra un código que contine src=…
Elaboración propia. Codigo2 (CC BY-NC-SA )
Imagen que muestra un código que contiene hrfe=…
Elaboración propia. Codigo1 (CC BY-NC-SA )
Imagen que muestra la ventana emergente de la opción Sonido…
Elaboración propia. Ventana sonido (CC BY-NC-SA )
Imagen que representa un hiperenlace.
Elaboración propia. Hiperenlace (CC BY-NC-SA )
Imagen de la estructura básica de una página HTML.
Elaboración propia. EstructuraBasica (CC BY-NC-SA )

Págna 9

Imagen de un monitor con un programa en su pantalla.
Arasaac. Software (CC BY-NC-SA )
Cristian Henao. Qué es el Ciclo de Vida del Software (YouTube)
Imagen que representa un diagrama del ciclo de vida.
Elaboración propia. Diagrama (CC BY-NC-SA )
Imagen del diagrama que explica el modelo cliente-servidor.
Tiago de Jesus Neves. Cliente-servidor (CC BY-SA)

Página 10

Imagen de una nube de palabras relacionadas con las páginas web.
Elaboración propia. Nube de palabras (CC BY-NC-SA )
Imagen que representa la organización de un grupo de personas para alcanzar un objetivo.
Arasaac. Organizar (CC BY-NC-SA )
Imagen que muestra un ordenador, un cuaderno, un lápiz y HTML. Representa el diseño web.
Diseña tu página (CC0)
Imagen que representa unas manos usando un teclado.
Arasaac. Teclear (CC BY-NC-SA )
Imagen que muestra el dibujo de una cinta de película.
Arasaac. Película (CC BY-NC-SA )
Imagen que representa el sonido en una página web.
Arasaac. Audio descripción web (CC BY-NC-SA )
Imagen que representa la comprobación de una tarea.
Comprobar (CC0)

Página11

Imagen que muestra el esquema final del documento. Se repasan aspectos relacionados con el ciclo de vida de una página web, el editor Bluefish y el lenguaje HTML.
Elaboración propia. Esquema Final (CC BY-NC-SA )
Elaboración propia. Audio final (CC BY-NC-SA)

Página 12

Los símbolos pictográficos utilizados son propiedad del Gobierno de Aragón y han sido creados por Sergio Palao para ARASAAC, que los distribuye bajo Licencia Creative Commons BY-NC-SA.

Historial de versiones

Elaborado por:

Servicio de Innovación Educativa de la Consejería de Educación de la Junta de Andalucía.
 Versión: 01 Fecha de publicación:
 Diciembre 2022 Primera versión

Aquí tienes el archivo fuente para editar este REA

Icono proyecto REA Andalucía en el que puede verse representados los tres colores del Diseño Universal para el Aprendizaje

  • Esto significa que tienes la posibilidad de poder usarlo, descargarlo, redistribuirlo y modificarlo para adaptarlo a tus necesidades.
  • Sigue estos pasos para usar/redistribuir/modificar este REA:

1. Descarga el archivo fuente. Con esto tienes el recurso original en formato editable.

2. Modifícalo usando eXeLearning.

3. Si aun no lo tienes, descarga e instala el estilo EducaAnd.

4. Si lo modificas, has de reconocer la autoría y publicarlo con la misma licencia (CC BY-SA-NC).

Puedes usar esta cita para referenciarlo:

Este REA es una adaptación del recurso original "Crea tu REA con calidad: guía para personas elaboradoras" del Proyecto REA Andalucía de la Consejería de Educación y Deporte de la Junta de Andalucía, que lo distribuye bajo licencia de CC BY-SA-NC.

Descargar el fichero .elp