Saltar la navegación

Créditos

1. Autoría

Imagen del Proyecto REA Andalucía

Título Actividades extraescolares, un bonito recuerdo
Descripción Situación de aprendizaje de la asignatura de Programación y Computación para 2º de Bachillerato sobre la creación de contenido web con HTML, estilos con CSS (hojas de estilo en cascada) e iniciación a la programación en el lado del servidor con PHP conectando con una base de datos. Se utiliza un servidor de distribución gratuita como es XAMPP para proporcionar servidor web, procesador PHP y servidor MySQL. En el reto propuesto el alumnado deberá crear la web de actividades extraescoalres de un centro educativo mediante el uso de una página web dinámica que accede a una base de datos mediante un formulario web para incluir las actividades que se realizan, y de la que también extrae información sobre las mismas y las muestra en la página.
Elaboradora de contenido de apoyo para el aprendizaje inclusivo Lydia Nacimiento Rodríguez
Elaboradora de contenido curricular Belén Lara Aznar
Coordinador de la materia Francisco Javier Álvarez Jiménez
Organización Dirección General de Tecnologías Avanzadas y Transformación Educativa. Consejería de Desarrollo Educativo y Formación Profesional. 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

2. Créditos de los recursos externos

Página1

Portada REA 2
Creación propia. Portada REA

Página 2

Página 3

Imagen que muestra el móvil como medio de pago como se ha hecho anteriormente con dinero en efectivo.
Public Domain Vectors . Web Pay (Dominio público)

Página 4

Imagen de una búsqueda en Google que señala los títulos de las páginas encontrados por la etiqueta title y una primera frase de contenido recuperada por la etiqueta meta.
Elaboración propia. Meta y title
Imagen del programa BLuefish en funcionamiento.
Elaboración propia. Bluefish
Imágen del editor Quackit tal como aparece online.
Creación propia. Quackit
Imagen del editor de HTML online LiveGap tal como aparece en la web al acceder.
Creación propia. LiveGap
Imagen que muestra que hay que guardar el archivo con extensión HTML o HTM
Creación propia. Extensión HTML
Imagen del resultado en un navegador web del código escrito.
Creación propia. Primera web

Página 5

Página 6

Imagen de posible esquema gráfico de la estructura de una página web.
Creación propia. Diseño 1
Imagen de posible esquema gráfico de la estructura de una página web.
Creación propia. Diseño 2
Imagen de posible esquema gráfico de la estructura de una página web.
Creación propia. Diseño 3
Imagen para presentar que se habla de las etiquetas de texto en HTML.
norfipc. Texto en HTML (Uso sin limitación)
Imagen que muestra títulos en diferentes tamaños
Creación propia. Títulos
Imagen de la apariencia de una lista numerada en la web, donde cada elemento aparece precedido de su número en orden creciente.
Creación propia. Lista numerada
Imagen de la apariencia de una tabla en la web.
Creación propia. Tabla
Creación propia. Ejemplo de vídeo incrustado
Imagen de la opción que aparece en Youtube tras seleccionar Compartir e Insertar: el código iframe.
Creación propia. Iframe
Imagen de la apariencia del formulario en la web con los cuatro campos a rellenar y el botón de Enviar.
Creación propia. Formulario
Imagen con el atributo color modificando a la etiqueta h2 con los valores (13,44,84)
Creación propia. h2 con (13,44,84)
Imagen con el atributo color modificando a la etiqueta body con los valores #FFB400
Creación propia. body con #FFB400
Imagen con el atributo color modificando a la etiqueta h2 con los valores #0D2C54
Creación propia. h2 con #0D2C54

Página 7

Partes de una regla CSS: selectores, y pares atributo-valor.
Creación propia. Partes CSS
Imagen de dos cadenas que representa el vínculo a crear entre HTML y CSS.
Smashicons. Vínculo (Flaticon)
Imagen que marca en la pantalla del navegador los pasos explicados abajo a dar en el inspector de código de Firefox.
Creación propia. Inspector de código
Posicionamiento flotante en el que la caja de código flota sobre el resto del contenido.
Creación propia. float
Posicionamiento estático del bloque: hay un salto de línea tras cada elemento.
Creación propia. static
Posicionamiento relativo que se modifica especificando la distancia.
Imagen propia. relative
La caja se posiciona donde le indiquen sus atributos de posición tomando com oreferencia la esquina superior izquierda.
Creación propia. absolute

Página 8

Esquema de funcionamiento en el que la web con el código script se envía al cliente y allí se ejecuta.
Creación propia. Programación en cliente
Esquema de funcionamiento en el que la web con el código script se ejecuta en el servidor y después se envía al cliente.
Creación propia. Programación en servidor
Esquema de funcionamiento en el que el código script PHP se ejecuta en el servidor y el código script Javascript se ejecuta en el cliente.
Creación propia. Cliente y servidor

Página 9

Imagen de XAMPP ejecutándose.
Creación propia. XAMPP on
Imagen de la pestaña Base de Datos en XAMPP mostrando el botón Crear.
Creación propia. Crea la tabla
Imagen de la pestaña Structure y de la zona para crear la tabla.
Creación propia. Crea la tabla
Imagen del asistente de XAMP donde te pide el nombre y propiedades de cada campo que quieres añadir a la tabla.
Creación propia. Diseña la tabla
Panel de control de XAMPP donde se muestran los botones de arranque de las aplicaciones (start) y los botones de Admin, mencionados en el texto.
Creación propia. Start MySQL
Web con noticias de actividades extraescolares.
Creación propia. Noticias extraescolares
Imagen de la web de 000webhosting donde se muestran los diferentes planes de contratación incluyendo el gratuito.
Creación propia. Planes 000webhosting

Página 10

Imagen de un diseño básico de la web con un título arriba, un menú lateral con tres opciones y un contenido en su zona central.
Creación propia. Diseño básico
Imagen que muestra los diferentes tipos de dispositivos que pueden consultar una web y que originan un diseño responsive.
Muhammad Rafizeldi. Responsive (CC BY-SA)

Página 11

Sin contenido multimedia

Página 12

Resumen del REA 5
Creación propia. Resumen del REA 5

3. 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 corrección:
11-12-2022 Primera versión

4. 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 "Actividades extraescolares, un bonito recuerdo" 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.