Diplomados

DIPLOMADO EN INTELIGENCIA ARTIFICIAL, TIC E INNOVACIÓN EDUCATIVA

DG David Steven Gómez Alzate
Michael Stiven Valencia Villa Michael Stiven Valencia Villa
MIGUEL ANGEL AGUDELO MONCADA MIGUEL ANGEL AGUDELO MONCADA
0% completo
0% completo
Continuar

  • Robótica Educativa en la Educación

    Inteligencia ar...

    • SESIÓN 1
      PENSAR COMO PROGRAMADOR
      BIENVENIDOS
      AL MÓDULO
      VIBE CODING - PROGRAMACIÓN CON IA
    • INTRODUCCIÓN A LA PROGRAMACIÓN
      Aprende a pensar como un programador
      Explora esta presentación para conocer los conceptos fundamentales que te ayudarán a dar tus primeros pasos en el mundo de la programación.
      Instrucción: Revisa las diapositivas con atención, identifica las ideas clave y relaciona los conceptos con situaciones cotidianas. Estos conocimientos serán la base para las próximas actividades prácticas.
      ¿No puedes visualizar la presentación? Ábrela en una ventana nueva.
    • INTRODUCCIÓN AL DESARROLLO WEB
      Glosario del desarrollador web
      Descubre los conceptos esenciales de HTML, CSS y JavaScript. Explora cada término, comprende su función y observa cómo se utiliza en la creación de páginas web.
      HTML · ESTRUCTURA CSS · DISEÑO JS · INTERACCIÓN
      ¿Cómo explorar este glosario?
      Selecciona cada concepto para desplegar su definición y ejemplo. Identifica qué función cumple dentro de una página web y cómo puedes utilizarlo en tus propios proyectos.
      01 · ESTRUCTURA
      HTML
      El esqueleto de una página web.
      Etiqueta (tag)
      Es una marca que indica al navegador qué tipo de elemento se está creando.
      <p>Hola mundo</p>
      ¿Para qué sirve? Para definir elementos como párrafos, títulos, imágenes y enlaces.
      Encabezado (h1)
      Es un elemento utilizado para representar el título principal de una sección o página.
      <h1>Mi primera web</h1>
      ¿Para qué sirve? Para organizar el contenido y destacar títulos importantes.
      Párrafo (p)
      Es un elemento HTML que permite agrupar texto en un párrafo.
      <p>Estoy aprendiendo programación.</p>
      ¿Para qué sirve? Para presentar descripciones, explicaciones e información textual.
      Enlace (a)
      Es un elemento que permite navegar hacia otra página, archivo o sección.
      <a href="https://example.com">Visitar sitio</a>
      ¿Para qué sirve? Para conectar contenidos mediante hipervínculos.
      Imagen (img)
      Es un elemento que permite insertar imágenes en una página web.
      <img src="foto.jpg" alt="Mi fotografía">
      ¿Para qué sirve? Para complementar el contenido con fotografías, ilustraciones e iconos.
      02 · DISEÑO VISUAL
      CSS
      La apariencia y presentación de una página web.
      Selector
      Es la parte de una regla CSS que identifica los elementos HTML a los que se aplicarán los estilos.
      p { color: blue; }
      ¿Para qué sirve? Para elegir qué elementos tendrán una apariencia determinada. En el ejemplo, se seleccionan los párrafos.
      Propiedad y valor
      La propiedad indica qué aspecto se modifica y el valor determina cómo se verá.
      color: red;
      ¿Para qué sirve? Para establecer características como color, tamaño de letra y alineación.
      Color del texto (color)
      Es la propiedad que establece el color del texto de un elemento.
      h1 { color: teal; }
      ¿Para qué sirve? Para mejorar la identidad visual y la legibilidad del contenido.
      Fondo (background-color)
      Es una propiedad que permite definir el color de fondo de un elemento.
      div { background-color: lightblue; }
      ¿Para qué sirve? Para diferenciar secciones, destacar bloques y crear contrastes visuales.
      Margen (margin)
      Es el espacio exterior que separa un elemento de otros elementos.
      p { margin: 20px; }
      ¿Para qué sirve? Para controlar las separaciones y evitar que el diseño se vea amontonado.
      03 · INTERACCIÓN
      JavaScript
      El comportamiento y la lógica de una página web.
      Variable
      Es un espacio con nombre que permite almacenar un valor que un programa puede utilizar.
      let nombre = "Ana";
      ¿Para qué sirve? Para guardar datos como nombres, cantidades y resultados.
      Función
      Es un bloque de código que realiza una tarea y puede ejecutarse cuando se necesita.
      function saludar() { alert("¡Hola!"); }
      ¿Para qué sirve? Para organizar instrucciones y reutilizar código.
      Evento (click)
      Es una acción o suceso que puede detectar el programa, como pulsar un botón.
      boton.addEventListener("click", saludar);
      ¿Para qué sirve? Para responder a acciones del usuario, como hacer clic o escribir.
      Condicional (if)
      Es una estructura que permite ejecutar instrucciones dependiendo de si se cumple una condición.
      if (edad >= 18) { console.log("Adulto"); }
      ¿Para qué sirve? Para tomar decisiones dentro de un programa.
      DOM
      El Modelo de Objetos del Documento representa la estructura de una página para que JavaScript pueda acceder a sus elementos.
      document.querySelector("h1");
      ¿Para qué sirve? Para consultar y modificar elementos HTML, su contenido y sus atributos.
      ¡Ahora es tu turno!
      Utiliza este glosario como punto de partida para construir tu propio vocabulario de programación.

      Actividad: selecciona un concepto de cada lenguaje, explícalo con tus propias palabras y escribe un ejemplo diferente al presentado aquí. Finalmente, describe cómo se relacionan HTML, CSS y JavaScript en una página web.
      COMPRENDER · EXPERIMENTAR · CREAR

    • SESIÓN 2
      PINTRODUCCIÓN A 
      LA PROGRAMACIÓN
      BIENVENIDOS
      AL MÓDULO
      VIBE CODING - PROGRAMACIÓN CON IA
    • SESIÓN 02 · DESARROLLO WEB
      HTML + CSS
      Descubre cómo se estructura y se diseña una página web. En esta presentación encontrarás los conceptos trabajados durante la sesión para comenzar a construir tus propios proyectos.
      10 ETIQUETAS HTML 10 ETIQUETAS CSS
      Antes de continuar...
      Revisa la presentación y repasa los 20 conceptos abordados en clase: 10 relacionados con HTML y 10 con CSS. Identifica para qué sirve cada uno y cómo contribuye a la construcción de una página web.
      Reto de aprendizaje: selecciona una etiqueta HTML y una propiedad CSS de la presentación. Explica con tus propias palabras qué hace cada una y cómo podrías utilizarlas en una página web.
      ¿No puedes visualizar la presentación? Abre la presentación en una ventana nueva.
      ESTRUCTURA · DISEÑO · CREATIVIDAD
      Cada concepto que aprendes es una nueva herramienta para crear en la web.
    • LABORATORIO DE DESARROLLO WEB
      Tu espacio para crear en la web
      Explora herramientas, consulta referencias y experimenta con HTML y CSS. Aquí encontrarás lo necesario para transformar tus ideas en páginas web.
      01 · CREAR 02 · CONSULTAR 03 · EXPERIMENTAR
      ¡Manos al código!
      Utiliza estos recursos durante las actividades de clase. Puedes crear tus archivos desde el ordenador, programar en línea, consultar etiquetas HTML, seleccionar colores y obtener enlaces para insertar imágenes en tus proyectos.
      01
      Editores de código
      Escribe, organiza y ejecuta tus proyectos.
      Visual Studio Code
      EDICIÓN EN EL NAVEGADOR
      Abre un entorno de edición para explorar y modificar código desde el navegador.
      Abrir VS Code ↗
      Ideal para familiarizarte con el editor. Para trabajar directamente con carpetas locales, consulta la guía de abajo y verifica los permisos del navegador.
      StackBlitz
      PROYECTOS EN LÍNEA
      Crea proyectos en el navegador y experimenta con archivos, código y vistas previas.
      Abrir StackBlitz ↗
      Útil para probar ideas rápidamente sin tener que configurar un entorno local.
      02
      Consulta y documentación
      Aprende a reconocer y utilizar etiquetas HTML.
      Listado de etiquetas HTML
      Una referencia práctica para explorar etiquetas, conocer su función y encontrar ejemplos.
      Consultar etiquetas ↗
      Documentación de MDN
      Consulta la documentación de referencia sobre los elementos HTML y sus características.
      Explorar documentación ↗
      03
      Recursos visuales
      Personaliza los colores y utiliza imágenes.
      Selector de colores
      Explora colores y obtén sus códigos HEX para utilizarlos en tus estilos CSS.
      Elegir colores ↗
      Alojamiento de imágenes
      Sube una imagen y obtén un enlace directo que puedas utilizar en tus prácticas HTML.
      Subir una imagen ↗
      Comprueba que el enlace obtenido corresponda al archivo de imagen y que puedas acceder a él.
      GUÍA PASO A PASO
      Crea tu primera página web desde el ordenador
      Antes de programar, organiza tus archivos. No necesitas crear un archivo desde cero cada vez que quieras continuar trabajando.
      Paso 1. Crea una carpeta
      En el escritorio o en Documentos, haz clic derecho, selecciona Nuevo → Carpeta y ponle un nombre, por ejemplo:
      MiPrimeraWeb
      Paso 2. Abre la carpeta en Visual Studio Code
      Abre la aplicación instalada de Visual Studio Code. Ve a Archivo → Abrir carpeta..., busca MiPrimeraWeb y selecciónala. Si aparece una solicitud de confianza, confirma solo si es una carpeta creada por ti o cuyo contenido conoces.
      Paso 3. Crea los archivos
      En el panel Explorador de VS Code, pulsa el icono de nuevo archivo y crea estos dos archivos dentro de la carpeta:
      MiPrimeraWeb/
      ├── index.html
      └── style.css
      Escribe los nombres exactamente como aparecen, incluida su extensión. No los guardes como archivos .txt.
      Paso 4. Escribe el HTML
      Abre index.html, pega esta estructura básica y guarda con Ctrl + S. 
      <!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Mi primera web</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <h1>¡Hola, mundo!</h1>
  <p>Esta es mi primera página web.</p>
</body>
</html>
      Paso 5. Agrega los estilos CSS
      Abre style.css, escribe los estilos y guarda los cambios. 
      body {
  font-family: Arial, sans-serif;
  background-color: #edf7f8;
  color: #073747;
  padding: 30px;
}

h1 {
  color: #117b83;
}
      Paso 6. Visualiza tu página
      Abre la carpeta en el Explorador de archivos de Windows y haz doble clic en index.html. La página se abrirá en tu navegador. Cuando modifiques el código, guarda los archivos y actualiza el navegador para ver los cambios.
      Un consejo para tus proyectos
      Mantén el archivo HTML y el CSS en la misma carpeta mientras aprendes. Así podrás relacionarlos fácilmente. Recuerda que HTML define la estructura y CSS controla la apariencia.
      EXPLORA · PRACTICA · CREA
      Tu primera página web comienza con una carpeta, dos archivos y muchas ideas.

    • SESIÓN 2
      PINTRODUCCIÓN A 
      LA PROGRAMACIÓN
      BIENVENIDOS
      AL MÓDULO
      VIBE CODING - PROGRAMACIÓN CON IA

  • General

  • Enfoque STEAM+ en la Educación

  • Fundamentos de programación para docentes

  • Innovación educativa con tecnologías emergentes

  • Inteligencia artificial aplicada a la educación

Inteligencia ar...