BITACORA 1

Integrantes:Alvarado Esqueda Alejandro-No. control22180816Rodriguez Rodriguez Israel-No. control 22180861

Instituto Tecnológico de San Luis Potosí

Ingeniería en Sistemas Computacionales

Doscente:Ríos Velázquez Beatriz Oralia

Fecha de entrega: 13/sep/2024

Next

Unidad I>

1.Interfaz Gráfica de Usuario

EMPEZAR >

>

>

Temas>

¿Qué es una GUI?

Manejo de eventos

1.1

1.3

1.4

Manejo de componentes gráficos de control

GUI de Amazon

GUI de Google

Practica 2

Practica 1

GUI de windows

1.2

Tipo de eventos

Actividad 2

Actividad 1

Actividad 3

>

>

1.1 ¿Qué es una GUI?

Una GUI (traduciendo sus siglas al español), es una Interfaz Gráfica de Usuario, que permite interactuar con software mediante formas gráficas.

https://www.ionos.mx/digitalguide/paginas-web/desarrollo-web/que-es-una-gui/

>

>

Características de una GUI

Capacidad para ser utilizada de manera efectiva por personas con diversas discapacidades y de forma indiscriminada.

Accesibilidad

Usabilidad

Facilidad y eficiencia en cuanto a la interacción entre el usuario y la interfaz.

Posicionamiento

Distribución y organización de los elementos visuales en la pantalla

https://kschool.com/blog/usabilidad-ux/los-10-principios-de-usabilidad-para-diseno-de-interfaces-de-usuario/

>

>

La GUI está controlada por eventos, que son cosas que pasan, en este caso el código actua como consecuencia.

1.2 Tipos de eventos

https://quejava.com/que-son-los-eventos-en-una-interfaz-grafica/

>

>

-Presionar botones.-Cambiar valores en barras de desplazamiento.-Elegir valores.-Cambiar texto

Tipos

Eventos de alto nivel

Eventos de bajo nivel

Acciones que hacen posibles los eventos de alto nivel:-Operaciones de los componentes.-Pulsar teclas.-Uso del ratón.-Cambio de foco de un componente.-Operaciones con ventanas.

https://wordpresscomnatcelies.wordpress.com/2017/02/22/competencia-1-interfaz-grafica-de-usuario/

el sistema nos ayuda a que se produzca una señal y se mantenga un cierto tiempo en el momento que se ejecuta el programa y te avisa si hay un dato mal

Introducción a los eventos - Aprende desarrollo web | MDN. (2024, 28 julio). MDN Web Docs. https://developer.mozilla.org/es/docs/Learn/JavaScript/Building_blocks/Events

>

>

1.3 Manejo de eventos

¿Qué son?

>

>

Para agilizar y simplificar la creación de páginas cuando el usuario hace click en un formulario

KathleenDollard. (2024, 27 enero). Events - visual basic. Microsoft Learn. https://learn.microsoft.com/es-es/dotnet/visual-basic/programming-guide/language-features/events/

Se utiliza para desarrollar páginas web.

Java

Ejemplos

Visual basic

Son partes que conforman una interfaz o un sistema en nuestro programa.

>

>

Conceptos básicos de HTML - Aprende desarrollo web | MDN. (2024, 28 julio). MDN Web Docs. https://developer.mozilla.org/es/docs/Learn/Getting_started_with_the_web/HTML_basics

1.4 Componentes gráficos de control

¿Qué son?

- los botones- barras de desplazamiento- etiquetas- listas- cajas de selección - campos de texto. Nos permiten a que el usuario pueda interactuar con las aplicaciones o paginas web..

>

>

Tutorial de Java - Componentes y contenedores. (s. f.). http://www.itlp.edu.mx/web/java/Tutorial%20de%20Java/Cap4/comcon.html

Ejemplo en java

Componentes

>

>

• pensamiento mas rapido
• Menor codificacion de desicion
• interactividad

.

• Flujo de control complejo
• Flexibilidad

Corvo, H. S. (2020, 30 marzo). Programación orientada a eventos: características, ejemplos, ventajas, aplicaciones. Lifeder. https://www.lifeder.com/programacion-orientada-a-eventos/

Ventajas

Desventajas

>

>

KathleenDollard. (2024, 27 enero). Events - visual basic. Microsoft Learn. https://learn.microsoft.com/es-es/dotnet/visual-basic/programming-guide/language-features/events/

conclusion

La importancia de las GUI radica en la interpretación del usuario en cuestión de la información. Facilitar al usuario la interacción con el software con un manejo intuitivo a componentes gráficos dejando de lado los tecnicismos y ofreciendo un resultado libre de éstos al usuario.

>

>

GUI de windows

https://edu.gcfglobal.org/es/informatica-basica/interfaz-de-windows/1/

Barra de herramientas: facilita el acceso a diversas funciones, como lo son el inicio de aplicaciones.

Iconos: representación gráfica para aplicaciones que en este caso son una representación de ellas.

Desplegable: permite desplegar una lista de opciones donde el usuario puede pulsar a alguna de ellas.

Paneles: se agrupan y organizan otros elementos de la interfaz, como opciones de volumen, notificaciones, etc.

Campo de texto: el usuario puede teclear cualquier texto que desee ingresar

>

>

GUI de Amazon

https://edu.gcfglobal.org/es/informatica-basica/interfaz-de-windows/1/

Imagen: las representación gráfica de un objeto, que en este caso son unos auriculares.

Iconos

Campo de texto: el usuario puede ingresar texto

Desplegables: permite seleccionar una opcion de una lista desplegable.

Botones de radio: de entre una serie de botones, solo se permite seleccionar uno a la vez.

>

>

Interfaz Google

https://edu.gcfglobal.org/es/como-usar-chrome/interfaz-y-botones-de-navegacion/1/

Barra de direcciones: permite realizar busquedas, como sitios web

Pestañas, se pueden tener varias abiertas y visitar una u otra.

Botones de navegación: permiten avanzar o retroceder

marcadores: accesos directos a sitios

>

>

Conclusión

https://edu.gcfglobal.org/es/como-usar-chrome/interfaz-y-botones-de-navegacion/1/

Para diseñar una GUI es necesario adaptarse a las necesidades del usuario, identificando áreas de mejora, dependiendo el entorno en el que se desarrolle la interfaz, por ejemplo, no es lo mismo una interfaz de busqueda general, y una de catálogo.

>

>

video 1

• Nos vamos a dirigir a esta pagina web en donde nos dice que tenemos que instalar dos cosas antes de tener kotlin las descargamos para instalarlos y tener kotlin

• vamos a nuestros archivos en descargas vamos a seleccionar y nos va abrir una pestaña y vamos aceptar todo lo que nos pida al final se va a estar instalando

>

>

• vamos a ir a file y nos vamos a new y nos sale la opción de proyecto y nos va a salir un cuadro en donde le vamos a poner el nombre del proyecto

• vamos a nuestros archivos en descargas vamos a seleccionar y nos va abrir una pestaña y vamos aceptar todo lo que nos pida al final se va a estar instalando

>

>

• Este código define la función main, que es el punto de entrada de cualquier aplicación Kotlin, y usa la función println para imprimir "Hola, Mundo" en la consola.

• se pueden agregar comentarios en varias líneas dentro del código, y si todo está dentro de comentarios, no se ejecutará ni mostrará nada.

>

>

video 2

• Para acceder, si ya tienes una cuenta solo te pedirá la contraseña, si no, deberás crear una y luego podrás empezar a trabajar con ella.

• te muestra cómo montar unos botones chéveres en el código, dándole a cada uno su botón, su etiquetita, y su texto para que, al darle click, todo funcione a la perfección. ¡Así de fácil

>

>

video 2

• para generar el código, seleccionamos la opción "generar" en la parte superior y elegimos "app Android", lo que nos proporcionará el código.

• Para finalizar nos va a dar un código para que lo podamos visualizar en el celular y poder interactuar con la app que creamos

>

>

conclusion

• Estas prácticas no ayudaron a saber cómo trabaja cada programa y a saber cómo se debe utilizar cada paso para tener un buen código y poder ejecutar el programa. Es importante saber que políticas de lenguaje tienen para no cometer un error como nos lo muestra los videos como la de crear una app nos dice de cómo crear una estructura estable para que esta app haga su función y nos enseñaron bastantes cosas como instalar el programa y la creacion de la app los videos nos ayudan a entender y comprender los programas con los que vamos a trabajar.

/

Fin