DESARROLLO DE SOFTWARE

Aprende a crear, experimentar y construir soluciones utilizando herramientas modernas de desarrollo.

¡BIENVENIDOS!

Este espacio será nuestro laboratorio digital de Programación. Durante este semestre aprenderemos que programar no consiste solamente en escribir código: significa pensar, crear, resolver problemas, experimentar y convertir ideas en soluciones.

Aquí encontrarás materiales, actividades, retos, recursos, ejercicios y proyectos que iremos construyendo juntos durante nuestro recorrido.

Desarrolla software con herramientas orientadas a la productividad

Emplea Frameworks para el Desarrollo de Software

Conoceremos herramientas y estructuras que permiten desarrollar software de manera más organizada, eficiente y profesional.

01 · CONFIGURA TU ENTORNO

Configura entornos de desarrollo con Frameworks y prepara las herramientas que utilizarás durante nuestro proceso de aprendizaje.

Antes de comenzar...

Queremos conocer qué sabes, qué herramientas has utilizado y cuáles son tus conocimientos previos sobre desarrollo de software y Frameworks.

Haz clic en el botón para comenzar

“No se trata solamente de aprender a programar... se trata de aprender a crear soluciones.”

PROGRAMACIÓN · TERCER SEMESTRE

Glosario Práctico

Desarrollo de Software de Sistemas Informáticos

Un recorrido por algunos de los conceptos fundamentales que utilizaremos para comprender, desarrollar y analizar sistemas informáticos.

🎯 Actividad

Registra el siguiente glosario en tu portafolio de evidencias y analízalo con tus compañeros del grupo, guiados por tu maestro. Identifica cuáles conceptos ya conoces, cuáles son nuevos para ti y cómo se relacionan entre ellos dentro del desarrollo de software.

Algoritmo – Conjunto de pasos ordenados que resuelven un problema o realizan una tarea.

API (Interfaz de Programación de Aplicaciones) – Conjunto de funciones y reglas que permiten la comunicación entre diferentes programas o sistemas.

Base de Datos – Sistema que almacena, organiza y gestiona información de manera estructurada.

Bug – Error en un programa que causa un mal funcionamiento.

Código Fuente – Conjunto de instrucciones escritas en un lenguaje de programación que define el funcionamiento de un software.

Compilador – Programa que traduce código fuente a lenguaje de máquina para que la computadora pueda ejecutarlo.

Debugging – Proceso de encontrar y corregir errores en un programa.

Desarrollo de Software – Creación de programas y aplicaciones mediante la programación y pruebas.

Entorno de Desarrollo (IDE) – Programa que proporciona herramientas para escribir, depurar y ejecutar código.

Estructura de Datos – Forma en que se organizan y almacenan los datos en un programa.

Framework – Conjunto de herramientas y bibliotecas que facilitan el desarrollo de software.

Interfaz Gráfica de Usuario (GUI) – Parte visual de un software que permite la interacción con los usuarios.

Inteligencia Artificial (IA) – Rama de la informática que desarrolla programas capaces de realizar tareas que normalmente requieren inteligencia humana.

Lenguaje de Programación – Conjunto de reglas y sintaxis que permiten escribir programas (ejemplo: Python, Java, C++).

Modelo Cliente-Servidor – Arquitectura en la que un dispositivo (cliente) solicita servicios o información a otro (servidor).

Metodología Ágil – Conjunto de métodos flexibles para desarrollar software de manera eficiente y en equipo.

Programación Orientada a Objetos (POO) – Modelo de programación basado en objetos que contienen datos y funciones.

Protocolo – Conjunto de reglas que permiten la comunicación entre computadoras o dispositivos.

Sistema Operativo – Software que gestiona el hardware y los programas de una computadora (ejemplo: Windows, Linux, macOS).

Software de Sistemas – Programas que permiten el funcionamiento del hardware y otras aplicaciones, como sistemas operativos y controladores.

Variable – Espacio en la memoria donde se almacena un dato que puede cambiar durante la ejecución de un programa.

🌱 Para reflexionar

Después de revisar el glosario, comenta con tus compañeros:

1. ¿Qué conceptos ya conocías?
2. ¿Cuál fue el concepto que te pareció más interesante?
3. ¿Qué conceptos se relacionan entre sí?
4. ¿Dónde puedes observar estos conceptos en aplicaciones o programas que utilizas diariamente?
5. ¿Por qué es importante conocer estos términos antes de comenzar a desarrollar software?

Cada concepto es una herramienta para crear.

Aprende, practica, pregunta y construye.

MI ENTORNO PERSONAL DE APRENDIZAJE

Descubre las herramientas digitales que forman parte de tu aprendizaje.

¿Qué es un PLE?

Un PLE (Personal Learning Environment) o Entorno Personal de Aprendizaje es el conjunto de herramientas, aplicaciones, recursos y espacios digitales que utilizamos para aprender, buscar información, crear contenidos, organizar nuestro trabajo y compartir lo que sabemos.

Cada persona tiene un PLE diferente porque aprendemos y utilizamos herramientas digitales de distintas maneras.

 TU RETO: CREA TU PROPIO PLE

Ahora vas a construir un mapa de las herramientas digitales que utilizas en tu vida escolar y personal.

🎨 AHORA DISEÑA TU PLE

Utiliza Canva, PowerPoint, Google Drawings o una hoja de papel para crear una representación visual de tu Entorno Personal de Aprendizaje.

💭 PARA REFLEXIONAR

Después de crear tu PLE, responde:

1. ¿Cuál es la herramienta digital que más utilizas para aprender?
2. ¿Qué aplicación nueva te gustaría aprender a utilizar?
3. ¿Qué herramienta utilizas más para entretenimiento que para aprender?
4. ¿Cómo podrías utilizar mejor la tecnología para mejorar tus aprendizajes?

🏆 PRODUCTO FINAL

Entrega una infografía o mapa visual de tu PLE incluyendo las aplicaciones y herramientas que realmente utilizas.

INTERNET BAJO LA LUPA

Descubre qué hay detrás del mundo digital que utilizas todos los días.

🔎 ¿De qué trata esta actividad?

Internet forma parte de nuestra vida cotidiana. Lo utilizamos para comunicarnos, buscar información, aprender, trabajar, compartir archivos y utilizar diferentes herramientas digitales.

En esta actividad observarás Internet “bajo la lupa” para conocer cómo funciona, qué servicios ofrece y cómo puede convertirse en una herramienta para aprender y aumentar nuestra productividad.

Propósito

Investigar y comprender los principales elementos, servicios y herramientas de Internet para reconocer su importancia en el aprendizaje, el trabajo y el desarrollo de software.

Consulta al menos 3 fuentes confiables y responde:

• ¿Qué es Internet?
• ¿Cómo funciona de manera general?
• ¿Qué elementos permiten que funcione?
• ¿Qué es la Web?
• ¿Qué servicios utilizamos en Internet?
• ¿Qué herramientas digitales favorecen la productividad?
• ¿Cuáles son sus ventajas y riesgos?
• ¿Cómo podemos utilizar Internet para aprender y trabajar?

Selecciona la información más importante. Evita copiar grandes cantidades de texto y explica las ideas principales con tus propias palabras.

Recuerda: una buena infografía comunica información de manera breve, visual y clara.

Puedes utilizar Canva, Genially, PowerPoint, Google Presentaciones u otra herramienta digital.

Tu infografía deberá incluir:

• 🌐 Título.
• 💡 ¿Qué es Internet?
• ⚙️ ¿Cómo funciona?
• 📱 Servicios y herramientas que utilizamos.
• 🚀 Internet y productividad.
• ⚠️ Ventajas y riesgos.
• 💭 Una conclusión personal.
• 📚 Fuentes consultadas.

📌 Producto final

Elabora una infografía digital sobre Internet y intégrala posteriormente a tu portafolio de evidencias.

¿De qué manera Internet y las herramientas digitales pueden ayudarme a trabajar, aprender y desarrollar soluciones de software?

Escribe una respuesta personal de aproximadamente 5 a 8 líneas.

💻 ¿Por qué comenzamos con Internet?

Esta actividad será nuestro punto de partida para conocer el entorno digital en el que actualmente se desarrolla el software.

A lo largo de la materia aprenderás a utilizar diferentes herramientas orientadas a la productividad para organizar, crear, comunicar, colaborar y desarrollar proyectos de software.

📊 Criterios de evaluación

COMENZAMOS

No se trata solamente de usar Internet...
se trata de comprenderlo para aprovecharlo mejor.

Investiga · Analiza · Diseña · Comparte

HOY VAMOS A APRENDER A PENSAR COMO DESARROLLADORES

Antes de programar, debemos aprender a identificar problemas y diseñar soluciones.

🚀 El reto

En un grupo escolar existen estudiantes que presentan dificultades para mejorar su desempeño académico. Algunos pueden tener problemas para organizar sus actividades, identificar sus áreas de oportunidad, administrar su tiempo o dar seguimiento a sus avances.

Tu equipo deberá analizar este problema y proponer la base de una solución de software.

🧠 Una regla importante

No comiences pensando en el código.

Primero debes comprender el problema, identificar a quién afecta, determinar qué información se necesita y decidir qué debería hacer una posible solución.

Hoy no vamos a programar. Hoy vamos a pensar como desarrolladores.

Analicen la situación y respondan como equipo:

• ¿Cuál es realmente el problema?
• ¿A quién afecta?
• ¿Por qué ocurre?
• ¿Qué consecuencias puede generar?
• ¿Qué necesitaríamos conocer para comprender mejor la situación?

Imaginen que ustedes son el equipo encargado de desarrollar una herramienta para atender el problema identificado.

Determinen:

• ¿Quién utilizaría el software?
• ¿Qué información debería proporcionar el usuario?
• ¿Qué información debería almacenar?
• ¿Qué procesos debería realizar?
• ¿Qué resultados debería mostrar?
• ¿Qué tendría que hacer para que realmente fuera útil?

Ahora conviertan sus ideas en una secuencia lógica.

Escriban los pasos que debería seguir el usuario y las acciones que debería realizar el sistema para atender el problema.

Pueden representarlo mediante una lista de pasos, esquema, diagrama de flujo o la forma que consideren más adecuada.

Realicen un boceto de cómo podría ser su solución.

No necesitan realizar un diseño profesional. Lo importante es representar qué información aparecería, qué acciones podría realizar el usuario y cómo se comunicaría el sistema con él.

PREGUNTA DESAFÍO

¿Cómo saber si la solución que diseñaron realmente ayudaría a mejorar el problema?

 Producto de la actividad

Cada equipo entregará una propuesta inicial que contenga:

1. Problema identificado.
2. Usuario al que está dirigida la solución.
3. Información necesaria.
4. Funciones que debería realizar.
5. Proceso o algoritmo propuesto.
6. Boceto de la solución.

⏱️ Tiempo de trabajo

60 minutos

10 min · Comprender el problema
15 min · Analizar la situación
15 min · Diseñar el proceso
15 min · Elaborar el boceto
5 min · Compartir la propuesta

PIENSA ANTES DE PROGRAMAR

Un buen desarrollador no comienza escribiendo código.
Comienza comprendiendo el problema.

CICLO DE VIDA DE UN SISTEMA

Desde una necesidad hasta un sistema funcional... ¿qué ocurre detrás de una aplicación?

¿Qué es el ciclo de vida de un sistema?

Es el conjunto de etapas que permiten transformar una necesidad o problema en un sistema que pueda utilizarse, mantenerse, mejorarse y, cuando sea necesario, reemplazarse.

🔄 EL VIAJE DE UN SISTEMA

Sigue las etapas y observa cómo el sistema evoluciona.

Identificación del problema o necesidad

Todo sistema comienza con una pregunta: ¿qué problema necesitamos resolver?

Análisis de requerimientos

Se investiga qué necesita realmente el usuario. Se determinan las funciones, información y características que deberá tener el sistema.

Diseño

Antes de construir, se planea cómo funcionará el sistema: pantallas, navegación, datos, procesos y estructura.

Desarrollo o construcción

El diseño se convierte en un sistema real. Los desarrolladores programan, configuran bases de datos, interfaces y demás componentes necesarios.

Pruebas

Se verifica que el sistema funcione correctamente. Se buscan errores, fallas y situaciones que puedan afectar al usuario.

¡ALTO! EL CICLO NO SIEMPRE AVANZA EN LÍNEA RECTA

Si durante las pruebas encontramos un problema, podemos regresar al análisis, al diseño o al desarrollo para realizar mejoras.

Implementación

El sistema se pone en funcionamiento y comienza a ser utilizado por las personas para quienes fue creado.

Mantenimiento y actualización

Un sistema no termina cuando se implementa. Se corrigen errores, se mejora su funcionamiento y se agregan nuevas características cuando las necesidades cambian.

Retiro o sustitución

Con el paso del tiempo, un sistema puede quedar obsoleto, dejar de ser útil o ser reemplazado por una tecnología más adecuada.

🔄 EL CICLO COMPLETO

🔎 Necesidad → 📋 Requerimientos → 🎨 Diseño → 💻 Desarrollo → 🧪 Pruebas → 🚀 Implementación → 🔧 Mantenimiento → 📴 Retiro

Y cuando las necesidades cambian... el proceso puede comenzar nuevamente.

TU RETO COMO DESARROLLADOR

Selecciona un sistema y representa gráficamente todo su ciclo de vida.

No solamente muestres las etapas: explica qué sucede en cada una.

📌 PRODUCTO FINAL EXPOSICIÓN 

• Diagrama completo del ciclo de vida. (Explicar que se hace en esa etapa y como lo implementas en tu ejemplo)
• Nombre del sistema seleccionado. (Ejemplo: sistema de nominas, sistema de Recursos humanos, De control escolar, etc.)
• Explicación de cada etapa,
• Flechas que indiquen la secuencia.
• Flechas de regreso cuando existan mejoras o correcciones.

 PUEDES UTILIZAR

Canva · PowerPoint · Word · Google Drawings · herramienta de diagramas · o realizarlo a mano

Un buen desarrollador no comienza programando.

Primero comprende el problema.

Después analiza, diseña, construye, prueba, implementa y mejora.

Actividad 12 

Investigación: Conociendo los Frameworks

Descubre qué son, para qué sirven y por qué son importantes en el desarrollo de software.

 Propósito

Investigar y comprender el concepto de framework, sus características, aplicaciones, ventajas y desventajas, para posteriormente compartir los resultados mediante una exposición frente al grupo.

 Pregunta guía

¿Por qué un programador utilizaría un framework en lugar de desarrollar todo desde cero?

🔎 ¿Qué debe investigar cada estudiante?

Para evitar investigaciones repetitivas, cada estudiante deberá reunir información sobre los siguientes aspectos:

1. Concepto: ¿Qué es un framework?
2. Función: ¿Para qué se utiliza?
3. Características: Identifica al menos 5.
4. Aplicaciones: ¿Qué podemos desarrollar utilizando frameworks?
5. Ventajas: Explica al menos 5.
6. Desventajas: Explica al menos 3.
7. Tipos: Identifica diferentes tipos de frameworks.
8. Ejemplos: Investiga al menos 5 frameworks conocidos.
9. Framework asignado: Investiga con mayor profundidad el framework que corresponda a tu equipo.

💻 Investigación del Framework asignado

Además de la investigación general, cada equipo estudiará un framework específico. Sobre este framework deberán investigar:

• Nombre y logotipo.
• Origen o historia breve.
• ¿Quién lo desarrolla o mantiene?
• ¿Para qué se utiliza?
• Lenguajes o tecnologías relacionadas.
• Principales características.
• Ventajas.
• Desventajas.
• Ejemplos de aplicaciones o proyectos.
• Un ejemplo sencillo de lo que podría desarrollarse con él.

👥 Frameworks sugeridos para los equipos

Producto de investigación

Cada estudiante deberá entregar su investigación con:

1. Información organizada.
2. Imágenes o recursos visuales pertinentes.
3. Una tabla o esquema comparativo.
4. Fuentes de información consultadas.
5. Conclusión personal.

Importante: No copies y pegues información directamente de Internet. Lee, comprende y explica con tus propias palabras.

🎤 Exposición

Posteriormente, cada equipo presentará sus resultados ante el grupo.

La exposición deberá incluir:

• Presentación del framework.
• Explicación de su utilidad.
• Características principales.
• Qué se puede desarrollar con él.
• Ventajas y desventajas.
• Ejemplos de uso.
• Una conclusión del equipo.

Duración sugerida: 5 a 7 minutos por equipo.

✅ Recomendaciones para trabajar

• Utiliza fuentes confiables.
• Consulta más de una fuente.
• No dependas únicamente de Wikipedia o de una herramienta de inteligencia artificial.
• Verifica que la información sea actual.
• Utiliza ejemplos para explicar.
• No llenes las diapositivas de texto.
• Todos los integrantes deben participar.
• Prepárate para responder preguntas de tus compañeros

CHISMÓGRAFO DIGITAL

“Lo que nunca preguntamos…”

¿Qué vamos a hacer?

Vas a crear tu propio Chismógrafo Digital utilizando Google Forms desde Google Drive.

La idea es aprender a crear un formulario, elegir diferentes tipos de preguntas y recopilar información de manera digital.

Pero hay una condición: tu formulario debe ser lo suficientemente interesante para que otras personas quieran contestarlo.

PASO 1. Crea tu chismógrafo

1. Ingresa a Google Drive.
2. Crea un nuevo Formulario de Google.
3. Ponle un nombre original a tu chismógrafo.
4. Agrega las 10 preguntas indicadas por tu docente.
5. Personaliza el diseño de tu formulario.
6. Revisa que las preguntas sean claras y estén correctamente escritas.

PASO 2. Las 10 preguntas

PASO 3. ¡Ahora sí, a compartir!

Comparte tu formulario con tus compañeros, familiares o amigos.

¿Qué debes entregar?

• Nombre original de tu chismógrafo.
• Formulario creado en Google Forms.
• 10 preguntas completas.
• 10 personas que hayan respondido.
• Enlace de tu formulario.
• Una captura de pantalla donde se observe que tienes las 10 respuestas.

RETO

No hagas un formulario aburrido.
Ponle creatividad a las preguntas y al diseño.

Después analizaremos qué podemos hacer con toda la información que recopilamos.

MI PRIMER COMPONENTE CON BOOTSTRAP

Programación · Desarrollo de interfaces web

¿Qué aprenderemos?

Bootstrap es un framework que facilita el diseño de páginas web mediante clases y componentes prediseñados. Nos permite crear botones, tarjetas, menús y diseños adaptables sin escribir todos los estilos desde cero.

Paso 1. Prepara tu archivo HTML

Abre Visual Studio Code o el Bloc de notas y crea un archivo llamado mi_bootstrap.html. Copia esta estructura completa:

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Mi primera práctica Bootstrap</title>

    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css"
    rel="stylesheet">
</head>
<body class="bg-light p-4">

    <h1 class="text-primary">Hola, Bootstrap</h1>
    <p class="lead">Estoy aprendiendo a diseñar páginas web.</p>

    <button class="btn btn-success">
        Mi primer botón
    </button>

</body>
</html>

¿Qué debes observar?

• text-primary: aplica un color de texto de la paleta de Bootstrap.
• lead: presenta el párrafo con mayor énfasis visual.
• btn btn-success: transforma el botón con los estilos de Bootstrap.
• p-4: agrega espacio interior alrededor del contenido.

Paso 2. Obtén un componente de Bootstrap

Entra a la documentación oficial y busca un componente que te interese. Puedes elegir un botón, una tarjeta, una alerta o una barra de navegación.

CONSULTAR COMPONENTES BOOTSTRAP

1. Selecciona un componente.
2. Busca un ejemplo de código HTML.
3. Copia el código proporcionado.
4. Pégalo dentro de la etiqueta <body> de tu archivo.
5. Guarda el archivo y ábrelo en tu navegador.

Paso 3. Personaliza tu componente

Realiza estas modificaciones:

• Cambia el texto por uno relacionado con una empresa comercial.
• Modifica las clases de Bootstrap para probar otra apariencia.
• Agrega un segundo componente diferente.

Evidencia de aprendizaje

Entrega el archivo HTML y una captura de pantalla del resultado en el navegador. Agrega una breve explicación de qué componente elegiste y qué clases de Bootstrap utilizaste.

Criterios de evaluación

Explora, copia, prueba y transforma el código en tu propio diseño web.