DISEÑO METODOLÓGICO PARA EL APRENDIZAJE DE TEMP – 4TO AÑO
UNIDAD II: PENSAMIENTO COMPUTACIONAL – TRABAJANDO ACCESOS A PLATAFORMAS
DMPA N° 04 y 05: Pensamiento Computacional - interfaz de accesos
Explorar y comprender la naturaleza y objetivos, mundo de la programación con html, css, Js
una interfaz amigable, aprenderemos a desarrollar aplicaciones funcionales y atractivas para
accesos a plataformas.
.
I.1. Colegio de alto rendimiento : COAR APURIMAC
I.2. Asignatura : Tecnología para el Emprendimiento Fecha: 08/07/2024
I.3. Unidad didáctica :
12/05/2024
I.4. Grado y sección : 4to Sección
I.5. Horas pedagógicas : 2horas
I.6. Docente : EMERSON ESCUDERO QUISPE
NOS CONTACTAMOS Y ASUMIMOS LOS RETOS
¡Hola!
Ya en el DMpA anterior lograste conocer y comprender aspectos del pensamiento computacional, ya
tienes claro a qué se refieren los algoritmos y su relación con los diagramas de flujo.
Ahora, este DMpA te brinda orientaciones previas para iniciar una nueva aventura en el ámbito del
pensamiento computacional, El pensamiento computacional es una habilidad fundamental que
involucra la resolución de problemas de manera estructurada y lógica, utilizando principios y técnicas
utilizadas en la informática y la ciencia de la computación. Aunque normalmente se ha asociado con la
programación, el pensamiento computacional va más allá y es aplicable en diversos contextos y disciplinas.
¡Empecemos!
¿QUÉ HAREMOS?
Meta
Reto Misiones Criterios de
[Evidencia]
[Propósito] [Actividades] Evaluación
Representa su alternativa Leer el documento Describe la forma y
de solución con dibujos a sobre App Inventor ubicación de los elementos
escala, incluyendo vistas y Ingresar a que considerará en el
perspectivas para diseñar http://web.mit.edu/ diseño de la interfaz de la
la interfaz de una Registrarse con su calculadora.
Diseña la interfaz de
calculadora básica. cuenta de Google. Genera un orden o
una calculadora básica,
Propone maneras de Desarrollar las secuenciación de la
incluyendo Etiquetas,
probar el funcionamiento actividades representación: Etiqueta,
botones, etc. Utilizando
de la solución tecnológica planteadas en el botones, imagen, etc.
App Inventor.
tomando en cuenta su DMPA. Representa la forma o
eficiencia y confiabilidad Diseñar la interfaz de apariencia de la calculadora
para asegurar el siguiente la calculadora en App Inventor (interfaz),
paso del diseño de la de acuerdo al modelo
interfaz (programación). solicitado.
CONCEPTOS CONTEXTOS CONTENIDOS
● Cambio ● Cultural Tendencias emergentes
● Expresión ● Ambiental Avances futuros
● Valores y Ética ● Conocimiento Perspectivas en las Tecnologías
● Identidad Humano
● Sistemas ● Económico
Valores y Ética ● Conocimiento
Humano
Social
¿Preparada/o?
Pero antes reflexionemos acerca de la siguiente pregunta:
¿?
¿Qué entiendes de interfaz y Proyecto
Conceptos que se abordarán en Desarrollo
HTML?
clase: Tecnología
Fuente: Brainly. Fuente: Brainly. (2020)
(2020)
Para lograr satisfactoriamente los resultados en esta evidencia de aprendizaje necesitas:
Autogestionar tus tiempos para la culminación de cada una de las acciones
satisfactoriamente.
Concéntrate plenamente en tus actividades planteadas quitando todo tipo de distracción.
¡Comenzamos!
INVESTIGAMOS Y CONSTRUIMOS EL APRENDIZAJE
Actividad 1
Fuente: Flaticon. (2020)
Conocemos App Inventor (Interfaz)
Nos informamos
¿Qué es un interfaz?
Es la más común y se basa en el uso de elementos visuales como ventanas, iconos, menús y botones que permiten
a los usuarios interactuar con el software a través de acciones como hacer clic, arrastrar y soltar.
rear una interfaz gráfica de usuario (GUI) en Java generalmente implica utilizar bibliotecas como Swing o JavaFX.
Aquí te doy una guía básica para crear una interfaz simple usando Swing, que es una de las bibliotecas más
comunes para GUI en Java:
Pasos para hacer una interfaz en html:
<html>
<head>
<link rel="stylesheet" href="estilo.css">
<script src="programa.js"></script>
</head>
<body>
<form action="">
<h1>LOGIN</h1>
<label for="usuario">usuario</label>
<input type="text" placeholder="ingrese su usario" id="usuario">
<label for="contraseña">contraseña</label>
<input type="password" placeholder="contraseña" id="clave">
<input type="button" value="INGRESAR" onclick="loguear()">
</form>
</body>
</html>
Y trabajando con css tendremos
*{
margin: 0px;
padding: 0px;
box-sizing: border-box;
font-family: 'Times New Roman', Times, serif;
}
form{
width: 400px;
height: 500px;
background-color: brown;
padding: 28px;
margin: 20px auto;
}
h1{
color: white;
text-align: center;
margin-top: 28px;
margin-bottom: 30px;
}
label{
color: white;
font-size: 28px;
text-align: center;
display: block;
margin: 15px;
}
input{
font-size: 28px;
padding: 8px;
display: flex;
margin: 10px auto;
}
input[type="button"]{
color:rgb(9, 9, 10);
margin-top: 28px;
font-size: 15px;
display: block;
background-color: white;
cursor: pointer;
}
input[type="button"]{
width: 100px;
margin-top: 28px;
display: block;
}
input:hover[type="button"] {
background-color:orchid;
}
LA IMAGEN SERIA EL INTERFAS
Una "interfaz" se refiere a un punto de conexión o interacción entre
dos sistemas, dispositivos, o entidades que permite la
comunicación, interacción o transferencia de datos entre ellos. En
el contexto de la informática y la tecnología, una interfaz puede ser
física (como un conector o puerto en un dispositivo) o virtual (como
una pantalla gráfica o un menú de opciones en un programa). Su
propósito principal es facilitar la comunicación y la interacción de
manera efectiva y eficiente entre diferentes componentes de un
sistema.
Actividad 2
Empezamos a programar
1. Preparación del Entorno:
Asegúrate de tener instalado un entorno de desarrollo integrado (IDE) como IntelliJ IDEA, Eclipse o NetBeans,
con Java JDK instalado.
2. Creación de un Proyecto Nuevo:
Abre tu IDE y crea un nuevo proyecto Java.
3. Importación de Librerías Swing:
Asegúrate de importar las clases necesarias de la biblioteca Swing al principio de tu archivo Java. Por ejemplo:
java
Copiar código
import javax.swing.*;
import java.awt.*;
4. Crear una Clase para la Interfaz:
Define una clase que extienda JFrame, que es el contenedor principal para la interfaz gráfica.
java
Copiar código
public class MiInterfaz extends JFrame {
// Aquí va el código de la interfaz
}
5. Configuración de la Interfaz:
Dentro de la clase MiInterfaz, puedes configurar los componentes que deseas agregar a la interfaz.
java
Copiar código
public class MiInterfaz extends JFrame {
public MiInterfaz() {
// Configurar el tamaño y la operación al cerrar la ventana
setSize(400, 300);
setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
// Crear y añadir componentes a la ventana
JLabel etiqueta = new JLabel("Hola Mundo!");
getContentPane().add(etiqueta);
// Mostrar la ventana
setVisible(true);
}
public static void main(String[] args) {
// Crear una instancia de la interfaz en el hilo de eventos de Swing
SwingUtilities.invokeLater(() -> new MiInterfaz());
}
}
6. Compilación y Ejecución:
Compila y ejecuta tu aplicación Java desde el IDE. ¡Deberías ver una ventana con el texto “Hola Mundo!".
Notas adicionales:
Eventos y Manejo de Acciones: Puedes agregar interactividad a tu interfaz respondiendo a eventos
como clics de botón, ingreso de texto, etc.
Componentes Swing: Puedes agregar una amplia variedad de componentes como botones, campos
de texto, listas, barras de progreso, etc., según tus necesidades.
Este es un ejemplo básico para comenzar con Swing. Para aplicaciones más complejas o interfaces más
sofisticadas, considera explorar JavaFX, que ofrece más flexibilidad y una experiencia de desarrollo más
moderna.
function loguear(){
let user=document.getElementById("usuario").value;
let pass=document.getElementById("clave").value;
if(user=="juan" && pass=="1234"){
window.location="plantilla.html"
}
else
{
alert("datos incorrectos")
}
}
TRANSFERIMOS Y NOS AUTOEVALUAMOS
Actividad 3
Actividad a desarrollar:
A continuación:
Elabora la interfaz del proyecto de emprendimiento.
Indicaciones:
1. Lee el material compartido sobre App Inventor: Introducción/Interfaz
2. Investiga información (Usando la información compartida en este DMpA) y
contrasta con tus fuentes de información.
3. De acuerdo con tus recursos desarrolla la actividad de manera creativa e
innovadora.
4. Evaluar: Presentar el trabajo.
INSTRUMENTO DE EVALUACIÓN
Lista de cotejo.
Competencias • Diseña y construye soluciones tecnológicas para resolver problemas de su entorno
• Se desenvuelve en entornos virtuales generados por las TIC
Desempeños Representa su alternativa de solución con dibujos a escala, incluyendo vistas y perspectivas para
diseñar la interfaz de una calculadora básica.
Propone maneras de probar el funcionamiento de la solución tecnológica tomando en cuenta su
eficiencia y confiabilidad para asegurar el siguiente paso del diseño de la interfaz (programación).
Accede a la plataforma App Inventor para desarrollar aprendizajes de creaciones de aplicaciones
móviles seleccionando opciones, herramientas y aplicaciones, y realizando configuraciones de
manera autónoma y responsable.
Evidencia de Diseña la interfaz de una calculadora básica, incluyendo Etiquetas, botones, etc. Utilizando App
aprendizaje Inventor.
Observaciones
Criterios a evaluar
Si No Observaciones
Observa el objeto que representará (calculadora)
Describe la forma y ubicación de los elementos que considerará en
el diseño de la interfaz de la calculadora.
Genera un orden o secuenciación de la representación: Etiqueta,
botones, imagen, etc.
Representa la forma o apariencia de la calculadora en App Inventor
(interfaz), de acuerdo al modelo solicitado.
¡Excelente trabajo! Hemos terminado el desarrollo de la interfaz de la calculadora.
Reflexionamos
Vamos a recordar las ideas clave que aprendiste en esta guía y/o conceptos.
Aprendimos a aplicar elementos del programa App Inventor para diseñar la interfaz de la calculadora
Aprendimos que es necesario conocer las herramientas de App Inventor para diseñar y programar Aplicaciones
Móviles.
¿Crees que logramos alcanzar el propósito de la clase?
¿Qué impidió o permitió el logro del propósito?
¿Para qué crees que te servirán lo aprendido en clase?
REFERENCIAS BILIOGRÁFICAS Y RECURSOS
BIBLIOGRAFÍA
http://www.practicasconarduino.com/manualrapido/secuencia_de_led.html
file:///C:/Users/Usuario/Downloads/Andres-Ubeda_Practicas_FSI.pdf
http://www.jgvaldemora.org/blog/tecnologia/wp-content/uploads/2016/10/PR%C3%81CTICAS-ARDUINO-20.pdf.
Guía del Área Curricular de Tecnología para el Emprendimiento.
DEBEDSAR (2024). Orientaciones para la planificación curricular en los Colegios de Alto Rendimiento 2024
Eli Bomfim, Tammy Earle, Michael Fitzpatrick, Carol Hancox, Jonathon Levin, Barbara Stefanics (2022). Digital Society. IB
Diploma Hodder Education
Hoang Paul. (2022). Business Management. 5ta Edición.
Lominé. L., Muchena, M., Pierce, R. (2022). Business Management Course Companion 2022 edition. Reino Unido: Oxford
University Press
Malcolm Surridge y Andrew Gillespie 2022, Business Management IB Diploma
Minedu (2017) Currículo Nacional de Educación Básica. Ministerio de Educación, Perú. Link
https://www.minedu.gob.pe/curriculo/pdf/curriculo-nacional-de-la-educacion-basica.pdf
Minedu. (2024). Guía Metodológica del área Curricular de Tecnología para el emprendimiento. Lima: Ministerio de
Educación. Dirección de Educación Básica para Estudiantes con Desempeño Sobresaliente y Alto Rendimiento
(DEBEDSAR)
Organización del Bachillerato Internacional (2022). Material de ayuda al profesor de Gestión Empresarial
Organización del Bachillerato Internacional IB (2022). Material de ayuda al profesor de Sociedad Digital. Primera
Evaluación 2024
Organización del Bachillerato Internacional IB. (2022). Guía de Gestión Empresarial, Primera evaluación 2024.
Organización del Bachillerato Internacional IB. (2022). Guía de Sociedad Digital. Primera Evaluación 2024
Organización del Bachillerato Internacional IB.(2014). Los enfoques de la enseñanza y el aprendizaje en el Programa del
Diploma.
Organización del Bachillerato Internacional IB.(2022). Uso eficaz de citas y referencias. Actualizada abril 2022
Organización del Bachillerato Internacional IB.(2023). Guía Monografía actualizada mayo 2023.
RECURSOS DE SOPORTE PARA EL DOCENTE Y EL ESTUDIANTE
● Cuaderno de trabajo ● Laptop o PC ● Laptop o PC
● Cuaderno de apuntes ● Internet ● Cuaderno de apuntes
● Lapiceros ● Cuaderno de apuntes ● Lapiceros
…………………………………………..
Docente - Tecnología
