Saltar la navegación

Créditos

Autoría

Título Mi primera página web
Descripción

Recurso de la asignatura Digitalización de 4 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 el diseño e implementación de una página web donde explicarán su experiencia vivida en la materia de Digitalización. El producto final se podrá subir a la página oficial del Centro.
Autor José Ramón Dorado (IES Astaroth - Rota)
Licencia Licencia Creative Commons Reconocimiento No comercial Compartir igual 4.0

Este contenido es una adaptación de la obra original "Computación y Robótica para todos" 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 y fue creado con eXeLearning, el editor libre y de fuente abierta diseñado para crear recursos educativos.

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
De la obra original. 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.
De la obra original. DetectiveHTML (CC BY-NC-SA )
Imgen del diario de aprendizaje del alumnado
De la obra original. 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.
De la obra original. HTML_Minimizado (CC BY-NC-SA )



Imagen que muestra la pantalla inicial de la aplicación Bluefish.
De la obra original. PantallaInicial (CC BY-NC-SA )
Imagen de la tecla Windows de nuestro ordenador.
De la obra original. 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.
De la obra original a partir de las obras de Nohat y Bluefish project. WikipediaBluefish (CC BY-NC-SA )
Imagen de la infografía
De la obra original. 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.
De la obra original. TipoDoc (CC BY-NC-SA )
Imagen de las etiquetas HTML que indican el inicio y fin de la página web.
De la obra original. InicioFin (CC BY-NC-SA )
Imagen de las etiquetas HTML que indican la cabecera de la página.
De la obra original. 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.
De la obra original. 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.
De la obra original. 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.
De la obra original. EstructuraHTML (CC BY-NC-SA )
Imagen del documento rellenable EstructuraBasicaPaginaWeb.pdf
De la obra original. 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.
De la obra original. 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.
De la obra original. RutaTipoCaracteres (CC BY-NC-SA )
Imagen que muestra la ayuda del editor de BlueFish al escribir la etiqueta de párrafo.
De la obra original. 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.
De la obra original. Guardar_Previsualizar (CC BY-NC-SA )
Imagen donde se muestra el código del código HTML y la previsualización en el navegador.
De la obra original. Previsualizacion_HolaMundo (CC BY-NC-SA )
Imagen de cómo quedaría después de configurar la ventana Inicio rápido…
De la obra original. 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.
De la obra original. 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.
De la obra original. HTML_InsertarImagen (CC BY-NC-SA )
Imagen del logotipo de los Recursos Educativos Abiertos (REA) de la Junta de Andalucía.
De la obra original. 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.
De la obra original. CopiarEnlaceImagen (CC BY-NC-SA )
Imagen donde se ve como quedaría la etiqueta imagen con el enlace, tamaño y descripción.
De la obra original. EjemploEtiquetaImagen (CC BY-NC-SA )
Imagen de la ventana de la aplicación Bluefish donde podemos poner los parámetros a una imagen.
De la obra original. VentanaImagen (CC BY-NC-SA )
Imagen que muestra como copiar la dirección o URL de un contenido digital.
De la obra original. CopiarURL (CC BY-NC-SA )
Imagen que muestra los tipos de listas, una ordenada y otra desordenada.
De la obra original. 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.
De la obra original. Codigo_ListaOrdenada (CC BY-NC-SA )
Imagen que muestra una lista de siete colores organizados con viñetas.
De la obra original. 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.
De la obra original. ResumenEtiquetas (CC BY-NC-SA )
Imagen que muestra un código que contine src=…
De la obra original. Codigo2 (CC BY-NC-SA )
Imagen que muestra un código que contiene hrfe=…
De la obra original. Codigo1 (CC BY-NC-SA )
Imagen que muestra la ventana emergente de la opción Sonido…
De la obra original. Ventana sonido (CC BY-NC-SA )
Imagen que representa un hiperenlace.
De la obra original. Hiperenlace (CC BY-NC-SA )
Imagen de la estructura básica de una página HTML.
De la obra original. 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.
De la obra original. 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.
De la obra original. 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.
De la obra original. Esquema Final (CC BY-NC-SA )
De la obra original. 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:
 Abril 2024 Primera versión

Aquí tienes el archivo fuente para editar este REA

  • 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 aún 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 "Mi primera página web" de J Ramón Dorado (@ramondor2) que lo distribuye bajo licencia de CC BY-SA-NC.

Descargar el fichero .elp

Creado con eXeLearning (Ventana nueva)