Proyecto Final Programación Básica en HTML

UNIVERSIDAD MARIANO GÁLVEZ DE GUATEMALA FACULTAD DE HUMANIDADES CARRERA: P.E.M EN TECNOLOGÍA EDUCATIVA CURSO: ELEARNING I LICDA. JOSELIN GARCÍA VALLADARES

PROYECTO FINAL PROGRAMACIÓN BÁSICA EN HTML PARA APLICACIONES DIRIGIDO A JÓVENES DE LA CARRERA DE BACHILLER EN CIENCIAS Y LETRAS CON ORIENTACIÓN EN COMPUTACIÓN

ESTUDIANTE: KEVIN AMILCAR SANTIAGO GODOY CARNET: 9995-14-6203 FECHA DE ENTREGA: 31 DE OCTUBRE DE 2,022

INDICE

Página 3

Introducción Fase 1: Diagnóstico inicial del proyecto

4-5

Fase 1: Cuadro del diseño inicial del proyecto

6

Fase 3: Propuesta Final

7

Programa académico

7

Contenido prográmatico (temas y subtemas)

8

Contenido prográmatico por módulos y evaluación del curso

9

Cronograma por módulos

10

Planificación del Proyecto:

11

Conclusiones

12

Recomendaciones

13

Bibliografía

14

2

INTRODUCCIÓN

Ante la constante evolucion de la tecnología, demanda personas que esten a la vanguardia de los pasos agingantados que avanza esta, dando lugar a una preparación constante y evolutiva en el campo tecnólgico, requiriendo un conducción regida por estandares funcionales que son importantes en la preparación de personas que desean adentrarse al mundo tecnólogico. Este presente se rige ante los fundamentos básicos que debe ser establecidos y enseñados en la preparación de estudiantes apasionados por aprender nuevas tecnologías. Partiendo por un curso básico para comprender los fundamentos de la web; por lo cual fue diseñado, estructurado y sobre todo preparado para que los estudiantes gocen de una enriquecida enseñanza, permitiendo alcanzar con éxito las competencias que fueron diseñadas ante la demanda de la del desarollo web.

3

DIAGNÓSTICO INICIAL DEL PROYECTO FASE 1 PROGRAMACIÓN BÁSICA EN HTML PARA APLICACIONES DIRIGIDO A JÓVENES DE LA CARRERA DE BACHILLER EN CIENCIAS Y LETRAS CON ORIENTACIÓN EN COMPUTACIÓN I. 1

ANTECEDENTES, CONTEXTO Y JUSTIFICACIÓN ¿Cuál es la situación que da lugar al proyecto? (el problema o necesidad que se quiere usted resolver) ¿En qué contexto se desarrollará?

(Escriba características de la institución y lugar donde pretenda proyectar el proyecto) ¿Se encuadra en los objetivos estratégicos de la institución?

(Investigue los objetivos de la institución e indique cómo apoya su proyecto al cumplimiento de ellos)

2

3

II. 1 2

3

La falta de conocimiento de HTML de los estudiantes de la carrera de Bachiller en Ciencias y Letras con Orientación en Computación en el área de programación.

El centro educativo forma parte de un proyecto social que ayuda académicamente a jóvenes de escasos recursos, a los cuáles les dan estudios desde su formación inicial hasta diversificado.

La institución dentro de sus objetivos estratégicos promueve la estimulación y mejora en los resultados académicos, es por eso que el proyecto “Programación básica en HTML para aplicaciones en jóvenes de nivel medio” apoya al cumpliendo de los objetivos de la institución ya que con este se busca darle al estudiante las herramientas necesarias para que puedan desenvolverse y desarrollarse en el mundo digital.

GRUPO META, LOCALIZACIÓN Y MARCO INSTITUCIONAL ¿Quiénes son los beneficiados del proyecto? (qué personas) ¿Cuáles son las responsabilidades específicas? (Indique que es lo que debe hacer cada persona a quien va dirigido el proyecto) ¿La división de tareas es clara?

(Especifique cuáles son las tareas y en qué momentos la realizarán)

III.

● Autoridades educativas ● Alumnos de la carrera de bachillerato Docente: Velar por el cumplimiento de las estrategias y el uso adecuado de las herramientas didácticas.

Estudiantes: Cumplir con las actividades que propicien los nuevos contenidos de programación haciendo un uso adecuado de las herramientas innovadoras en el aula.

Docente: Cumplimiento de la planeación bimestral de contenidos, seguimiento académico mediante plataforma.

Estudiantes: Elaboración de tareas de aprendizaje propuestas por el docente en plataforma. (Diaria- semanal).

OBJETIVOS DEL PROYECTO

1

¿Qué cambios generales busca realizar el proyecto? (Escriba el objetivo general del proyecto)

2

¿Qué resultado general busca el proyecto? (Escriba que se esperaría al ejecutarse el proyecto)

Proveer a los estudiantes de conocimientos básicos de programación bajo un programa práctico y aplicado, dotándolos de un entendimiento amplio de la programación como lengua que permite comunicarnos y diseñar herramientas para entender, transformar e interactuar en el mundo que los rodea.

Que los estudiantes de nivel medio sean capaces de aplicar con toda eficacia y certeza los conocimientos adquiridos en su preparación.

4

I. 1

2

3

RECURSOS, ACTIVIDADES ¿Qué recursos son necesarios para llevar adelante el proyecto? (Escriba todos los recursos que necesitaría para implementar el proyecto - humanos, materiales y tecnológicos) ¿Cuánto costará el proyecto? (Presente un desglose aproximadamente de lo que se gastaría)

● ● ● ●

Computadoras Internet Humanos Visual Code

●

Plan Khan Academy (Gratuito)

●

Visual Code HTML

¿Quién asumirá el costo del proyecto?

(Indique quienes podrían costear los fondos que describió en el numeral anterior)

●

La institución educativa

II. 1

2

CONTROL GENERAL DE RIESGOS ¿Se podrá tener todo bajo control cuando se implemente el proyecto? (Describa de qué manera se podría tener el control de la ejecución del proyecto para que sea exitoso) ¿Cuáles son los riesgos más importantes que se han identificado antes del inicio del proyecto? (Escriba los posibles riesgos que se podrían dar para que no sea exitoso el proyecto)

III. 1

(Si así se requiriera)

Si, Khan Academy ofrece en su plataforma un rol docente donde se dará seguimiento a cada estudiante de forma personalizada. ●

La institución no cuenta con equipo actualizado.

EVALUACIÓN DEL PROYECTO

¿Quién y cómo evaluará el éxito del proyecto? (Todo proyecto se debe evaluar, describa de qué manera se haría y qué persona o personas lo realizan si se llegará a ejecutar).

El área administrativa de la Institución Educativa, por medio de los avances en plataforma.

5

CUADRO DEL DISEÑO INICIAL DEL PROYECTO FASE 2 NO. ASPECTO 1 2

Nombre del proyecto o curso Propósito general

3

Breve descripción del proyecto o curso

4

Breve descripción de la población meta (a quién va dirigido) Descripción de las características de salida del participante (perfil de salida del participante) Número mínimo y máximo de participantes Conocimientos previos de los participantes Distribución de horas por semana para el participante. (elabora un cuadro resumen)

5

6 7 8

DESCRIPCIÓN Programación básica en HTML para aplicaciones.

Dominar la anatomía de los elementos HTML y usando preprocesadores para mejorar el flujo de desarrollo con CSS. Mediante el entorno de trabajo IDE Visual Code.

Aprender sobre etiquetas HTML, semántica, dar estilos a los elementos de los sitios web, medidas EM/REM modelo de caja. Dominar la anatomía de HTML, aplicando estilos de CSS3.

Estudiantes de la carrera de Bachillerato en Ciencias y Letras con orientación en computación.

• Comprender la lógica del código • Escribir código fluido con HTML • Diseñar algoritmos • Desarrolla software básico con funciones, objetos y eventos Mínimo 5 Máximo 10 *Computación básica *Manejo de internet básico y navegadores web Dia: lunes HORA ACTIVIDAD 9:00 am / 10:00 am Temas: *Entornos Visual y Khan academy *Estructura de árbol Practica: *Primer página en HTML Dia: miércoles HORA 9:00 am / 10:00 am

ACTIVIDAD Temas: *Declarar variables *Usar prompt Practica: *Creación de algoritmo: piedra, papel o tijera

Dia: lunes HORA 9:00 am / 10:00 am

ACTIVIDAD Temas: *Tipos de variables *Introducción a funciones Practica: Algoritmo avanzado de piedra, papel o tijera.

9

Criterios para la elaboración de los participantes del proyecto o curso (escribir las actividades obligatorias)

* Desarrolla un juego web con HTML, CSS. Eligiendo a su mascota favorita y enfrentando a otros Mokepones en peleas épicas de agua, fuego y tierra.

Desarrollado en Visual Code. *Examen de conocimiento básico. Elaborado web en la plataforma de Khan Academy

6

PROPUESTA FINAL FASE 3 PROGRAMA ACADÉMICO •

Nombre del curso: “Programación básica en HTML para aplicaciones”

•

Descripción del curso: Aprender sobre etiquetas HTML, semántica, dar estilos a los elementos de los sitios web, medidas EM/REM modelo de caja. Dominar la anatomía de HTML, aplicando estilos de CSS3.

•

Contribución del curso para la formación académica: “Programación básica en HTML para aplicaciones” apoya al cumplimiento de los objetivos de la institución ya que con este se busca darle al estudiante las herramientas necesarias para que puedan desenvolverse y desarrollarse en el mundo digital. Tiendo como perfil de salida: Comprender la lógica del código, escribir código fluido con HTML, diseñar algoritmos, desarrolla software básico con funciones, objetos y eventos; para un egresado de Bachillerato en Computación.

•

Objetivo general: Proveer a los estudiantes de conocimientos básicos de programación bajo un programa práctico y aplicado, dotándolos de un entendimiento amplio de la programación como lengua que permite comunicarnos y diseñar herramientas para entender, transformar e interactuar en

aplicaciones web.

•

Objetivo específicos: Proporcionar por medio de ruta de aprendizaje en lenguaje HTML,

partiendo de fundamentos de programación hasta aplicaciones nativas web, desarrollando actividades en plataforma (Khan Academy), aplicando conocimientos de desarrollo web estático.

•

Competencias para desarrollar por los estudiantes: Desarrollar codigo para el desarrollo web en HTML, y en conjunto de los estilos por medio CSS, mostrando el funcionamiento correcto de aplicaciones web.

•

Indicadores de logro:

El alumno escribe codigo limpio, usando los elementos escenciales de HTML; reconociendo lo aprendido en compilaciones correctas para el desarrollo de aplicaciones web.

•

Resultado o producto final de aprendizaje: Desarrolla un juego web con HTML, CSS. Eligiendo a su mascota favorita y enfrentando a otros Mokepones en peleas épicas de agua, fuego y tierra.

Desarrollado en Visual Code.

7

Contenido prográmatico (temas y subtemas):

TEMAS Entornos de IDE y Khan Academy

• • • •

SUBTEMAS Instalar Visual Code Ingreso a entorno Khan Academy ¿Cómo aprender programación?

Mi primer sitio web en HTML

Estructura de árbol

• • • •

La regla: <!DOCTYPE html> El árbol: <html> Las raíces: <head> Las ramas, hojas y flores: <body>

Declarar variables

• •

¿Para qué sirven las variables? ¿Cómo declarar variables?

Usar prompt

• •

Funciones del prompt Ventanas del prompt

Tipos de variables

•

Var / Let (JavaScript)

Introducción a funciones

• •

¿Cómo declarar funciones? ¿Cómo usar funciones?

•

Bibliografia: Platzi (2022): GitHub - platzi/curso-programacion-basica at 10-refactor-funciones Tomando de: https://github.com/platzi/curso-programacion-basica/tree/10-refactor-funciones

8

Contenido prográmatico por módulos:

MODULOS Modulo 1

TEMAS 1.Entornos de IDE y Khan Academy

SUBTEMAS • • • •

2.Estructura de árbol

• • • •

3.Declarar variables

• •

1. Usar prompt Modulo 2

• •

COMPETENCIA POR MÓDULO

Instalar Visual Code Ingreso a entorno Khan Academy ¿Cómo aprender programación?

Mi primer sitio web en HTML

Curso de programación básicas – Platzi (2022) Tomado de: https://platzi.com/cursos/ programacion-basica/

La regla: <!DOCTYPE html> El árbol: <html> Las raíces: <head> Las ramas, hojas y flores: <body> ¿Para qué sirven las variables? ¿Cómo declarar variables?

Funciones del prompt Ventanas del prompt

2.Tipos de variables

•

Var / Let (JavaScript)

3. Introducción a funciones

•

¿Cómo declarar funciones? ¿Cómo usar funciones?

•

Aprender a instalar entornos de trabajo, para el uso correcto de la compilación en los primeros programas.

Conocer las principales etiquetas de HTML para la utilización optima con variables.

BIBLIOGRAFÍA

Hacer de las variables con funciones las bases para creacion de programas básicos en HTMl, funcionales en desarrollo web.

Fundamentos de Ingeniería de Software – Platzi (2022) Tomado de : https://platzi.com/cursos/ ingenieria/

Evaluación de Curso:

Modulo 3: Proyecto HMTL Proyecto del curso Nombre del Proyecto: Batalla de Mokepones Desarrollo: Desarrolla un juego web con HTML, CSS, JavaScript y Node.js. Eligiendo a tu mascota favorita y enfrenta a otros Mokepones en peleas épicas de agua, fuego y tierra.

Utilizando etiquetas, variables, funciones y fusión.

9

Cronograma por módulos

MODULOS

SEMANAS Semana 1

Modulo 1

Semana 2

Semana 3

TEMAS

SUBTEMAS

1.Entornos de IDE y Khan Academy

2.Estructura de árbol

3.Declarar variables

FECHAS

1. Instalar Visual Code 2. Ingreso a entorno Khan Academy 3. ¿Cómo aprender programación?

4. Mi primer sitio web en HTML

Dia: Lunes Hora: 9:00 / 10:00 am Subtemas: 1 y 2

5. La regla: <!DOCTYPE html> 6. El árbol: <html> 7. Las raíces: <head> 8. Las ramas, hojas y flores: <body>

Dia: Lunes Hora: 9:00 / 10:00 am Subtemas: 5 y 6

9. ¿Para qué sirven las variables?

10. ¿Cómo declarar variables?

Dia: Lunes Hora: 9:00 / 10:00 am Subtemas: 9

Dia: Miercoles Hora: 9:00 / 10:00 am Subtemas: 3 y 4

Dia: Miercoles Hora: 9:00 / 10:00 am Subtemas: 7 y 8

Dia: Miercoles Hora: 9:00 / 10:00 am Subtemas: 10 Semana 4

1. Usar prompt

11. Funciones del prompt 12. Ventanas del prompt

Modulo 2

Dia: Lunes Hora: 9:00 / 10:00 am Subtemas: 11 Dia: Miercoles Hora: 9:00 / 10:00 am Subtemas: 12

Semana 5

2.Tipos de variables

13. Var / Let (JavaScript)

Dia: Lunes Hora: 9:00 / 10:00 am Subtemas: 13 (primera parte) Dia: Miercoles Hora: 9:00 / 10:00 am Subtemas: 13 (segunda parte)

Semana 6

3. Introducción a funciones

14. ¿Cómo declarar funciones?

15. ¿Cómo usar funciones?

Dia: Lunes Hora: 9:00 / 10:00 am Subtemas: 14 Dia: Miercoles Hora: 9:00 / 10:00 am Subtemas: 15

Módulo 3

Semana 7

1. Proyecto de curso

16. Explicación y ejecución primera parte 17. Ejecución final y calificación

10

Dia: Lunes Hora: 9:00 / 10:00 am Subtemas: 16 Dia: Miercoles Hora: 9:00 / 10:00 am Subtemas: 17

Planificación del Proyecto: MODULOS

SEMANAS Semana 1

Modulo 1

OBJETIVOS DE APRENDIZAJE • Aprende a instalar Visual Code en Windows, Mac o Linux •

•

Semana 2

•

Semana 3

•

Semana 4

1.Entornos de IDE y Khan Academy

MEDIOS Y MATERIALES Internet Navegadores IDE Visual Code

2. Ingreso a entorno Khan Academy

Utiliza Bloc de notas para guardar páginas web Utiliza Khan Academy para llevar su progreso semanal Aprende las primeras etiquetas de un codigo HTML para crear sitio web

ACTIVIDADES DE APRENDIZAJE 1. Instalar Visual Code

3. Mi primer sitio web en HTML

2.Estructura de árbol

4. Crea el primer código en estructura árbol

IDE Visual Code

Utiliza las etiquetas bases para declaración de variables en codigo funcional

3.Declarar variables

5. Declara variables básicas para funciones web

Navegador IDE Visual Code

•

Reconoce la función prompt como ventanas para crear alertas

1. Usar prompt

6. Utiliza “prompt” para crear alertas en el navegador

Navegador IDE Visual

Semana 5

•

Aprende los tipos de variables para usar con funciones reales

2.Tipos de variables

7. Declara las variables Var / Let (con operaciones númericas)

Internet IDE Visual Code

Semana 6

•

Reconoce la importancia de el uso de funciones para crear acciones en desarrollo web

3. Introducción a funciones

8. Utiliza las funciones de ejemplos para una página web

IDE Visual Code

Semana 7

•

Crea un video juego en HTML, CSS, JavaScript

1. Proyecto de curso

9. En la primera parte diseña el juego en HTML, con diseño en CSS 10. Ejecuta con variables y funciones correctas para mostrar alertas de avatar que se designen.

Internet Navegadores IDE Visual Code

Modulo 2

Módulo 3

TEMAS

11

CONCLUSIONES 1. Mediante la creación del este proyecto, se puede concluir un aprendizaje optimo en la planificación de cursos interactivos para ser aplicados en centros educativos.

2. Con las directrices e instrucciones claras para la formación de un curso interactivo, se puede determinar que el desarrollo en la educación en cualquier materia o curso, son de gran ayuda, porque beneficia tanto al docente como a los estudiantes el poder reforzar, capacitarse de una menera efeciente, respetando y cumpliendo los objetivos establecidos dentro de este tipo de programas, logrando tener un aprendizaje significativo en los estudiantes y asi poder llegar los propósitos de la educación en el pais.

3. Este tipo de cursos beneficia a los estudiantes, ya que permite llegar a ellos de una manera personalizada, respetando y siguiendo al pie de la letra las competencias, establece un crecimiento en cada uno en porque incentiva aprender nuevos temas; esto determina que el alumno necesita seguir una capacitacion y reforzamiento, permitiendo en la culminación de los cursos, nuevas habilidades para ser aplicadas en el aprendizaje o actividad que se quiera seguir.

12

RECOMENDACIONES

1. Es de vital importancia que el desarrollo de estos cursos, seas diseñados mas prácticos que teóricos, ya que el alumno cursa materias o clases ya designadas y esto resultaría un proceso mas largo y aburrido que eficáz y dinámico.

2. Importante la revisión de las compentencias con las fechas del impartimiento del curso, ya que no se puede presionar con corto tiempo alcanzar competencias muy grandes, por lo cual, la medición en fechas permite que el desarrollo de actividades sean alcanzables en una competencia razonable.

3. El diseño y organización de este tipo de curso, es importante que sean presentados ante el comité, coordinadores, y/o docentes a cargo para que sean de vital apoyo en el propósito, revisando a detalle cada aspecto a cumplir y sujetarse dicho curso o programa a cambios establecidos por el centro educativo, ya que esto permite uno de las principales metas: Un aprendizaje significativo y eficiente para los estudiantes.

13

BIBLIOGRAFÍA

•

Platzi (2022): GitHub - platzi/curso-programacion-basica at 10-refactor-funciones Tomando de: https://github.com/platzi/curso-programacion-basica/tree/10-refactor-funciones

•

Curso de programación básica – Platzi (2022) Tomado de: https://platzi.com/cursos/programacionbasica/

•

Fundamentos de Ingeniería de Software – Platzi (2022) Tomado de: https://platzi.com/cursos/ingenieria/

14