Тёмный
No video :(

Diseño moderno con Menu Sidebar en Python Tkinter GUI ⭐ Tutorial Desde Cero - Parte 1 

Autodidacta
Подписаться 2,5 тыс.
Просмотров 26 тыс.
50% 1

En este vídeo, te guiaré a través del proceso de creación de Interfaces Gráficas de Usuario (GUI) con un diseño moderno utilizando Python (Python Tkinter GUI Design). Utilizaremos Tkinter para la construcción de la interfaz gráfica, incorporando diversos widgets para alcanzar nuestros objetivos. Además, destacaremos un diseño que incluirá un menú lateral (sidebar) activado por un botón, permitiendo su visualización u ocultamiento según la preferencia del usuario. ¡perfecta tanto para principiantes como para desarrolladores intermedios de Python!
En este tutorial, haremos lo siguiente:
⭐ Crearemos un diseño moderno.
⭐ Manejaremos controles de Label, Frame, Button.
⭐ Manejo de iconos con FontAwesome.
⭐ Aprenderemos un poco el uso de la Herencia POO.
⭐ Asociar eventos Enter y Leave con la función dinámica con sidebar.
⭐ Manejo de Imagenes con Label
Descargar Archivos 👉 acortar.link/U...
Instalación de dependencias (Pip):
🐍 pip install Pillow==10.1.0
Capítulos:
00:00 Introducción
01:18 Creación de la Estructura del Proyecto
03:00 Creación de Archivo de Configuración y Utilidades
07:07 Creación de la Ventana Principal Tkinter
12:16 Configuración de la Ventana Principal
16:40 Creación de Paneles (Frame)
22:15 Creación de Widgets
36:34 Configuración del Cambio de Botones con Eventos al Pasar el Ratón
39:55 Toggle para el Menú Lateral (Sidebar)
41:50 Colocación de Imagen en el Centro del Panel del Cuerpo
43:58 Resumen del Proyecto en Modo Debug
Si eres un desarrollador Python o aspirante a serlo, este tutorial es perfecto para ti. ¡No importa si eres principiante o experimentado, aprenderás habilidades esenciales que mejorarán tu flujo de trabajo de desarrollo en Python!

Опубликовано:

 

15 авг 2024

Поделиться:

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 105   
@edgarantonio2190
@edgarantonio2190 15 дней назад
No es necesario verlo escribir código. La forma de explicar es espectacular , no es ni muy rápido ni muy lento , usted es un crack enhorabuena 💪 Nuevo subscriptor
@jhon.k.3227
@jhon.k.3227 5 дней назад
Eu nem falo espanhol mas entendi tudo, tens o dom de ensinar.
@xavimarin1126
@xavimarin1126 24 дня назад
bufff un video muy bueno y de una forma "sencilla" y muy bien explicada has construido una ventana con un diseño increible... además de una códificación increible y muy bien estructurada... buenisimoooooo
@martinfaverio4813
@martinfaverio4813 3 месяца назад
EXCELENTE!! felicitaciones por la explicación tan detallada... Has ganado un subscriptor
@autodidacta-mx
@autodidacta-mx Месяц назад
Gracias
@rauljimenez5364
@rauljimenez5364 9 месяцев назад
Brother realmente te la comiste sigue asi como vas explicado el código mas no escribiendo es excelente
@autodidacta-mx
@autodidacta-mx 8 месяцев назад
Gracias.
@DarkAlucar
@DarkAlucar 9 месяцев назад
Me encanta la forma en la que desarrollas, muy buen orden y super bien explicado ya me suscribí espero puedas seguir compartiendo lo que sabes porque estoy lleno de dudas
@autodidacta-mx
@autodidacta-mx 9 месяцев назад
gracias por la confianza 😃 alucar
@-Fjolnir-
@-Fjolnir- 9 месяцев назад
aun no lo terminé de ver pero la verdad WOW que hermoso diseño hermano! jajaja y eso que a mi jamás me gusto la interfaz grafica que te da python XD realmente se nota lo que un profesional sabe hacer... lo unico de malo es que solo puedo dar 1 like D: luego cuando termine de ver el video comentaré de nuevo haciendo preguntas XDD
@autodidacta-mx
@autodidacta-mx 9 месяцев назад
Gracias por tu comentario eso me anima, cuanto llegue a las mil vistas lanzo la segunda parte donde habilitare acciones en el botón de gráfico y de información donde enseñare como actualizar al información del panel y abrir ventanas secundarias. Si te gusto el dise;o veras que en un par de días lanzare una aplicación de calculadora que te gustara. Saludos
@-Fjolnir-
@-Fjolnir- 9 месяцев назад
@@autodidacta-mx estaré muy atento ya active la campanita para recibir las notificaciones jaja hace tiempo que hago apps y nunca usé visual studio code y mucho menos la librería Tkinter por que "me parecía fea" hoy cambio radicalmente mi pensamiento jaja voy a estar atento para los futuros videos! Muchos éxitos!! (Me di cuenta después del mensaje que no estaba suscrito jajaja flashe cualquiera, ahora si me suscribí y active la campanita)
@OmarGonzalez-ti7bd
@OmarGonzalez-ti7bd 9 месяцев назад
Muy bueno muchas gracias. Sería útil que pudieras agregarle como habría que hacerlo para poder ir a las distintas ventanas (o frames) que representan cada uno de los botones.
@autodidacta-mx
@autodidacta-mx 9 месяцев назад
Muy bien Omar, buscaremos hacer esa segunda parte con lo que mencionas mínimo con un botón. Saludos
@AndreaAaaa-ni4jx
@AndreaAaaa-ni4jx 2 месяца назад
La creación de submenu
@Jeankarlos687
@Jeankarlos687 5 месяцев назад
excelente explicación espero la continuación, como por ejemplo cuando selecciones una opción en la barra lateral aparezca la interface en el panel principal, osea si eliges registrar usuario que aparezca la interfaz de registrar usuario, espero que me entiendas, ahora realice todo lo que hiciste y me funciono de maravilla el único problema es con la visualización de los icono de fontaweson que no se muestran correctamente solo sale un cuadrito vacío
@autodidacta-mx
@autodidacta-mx 5 месяцев назад
Ya tenemos parte dos te paso el enlace del video ahi hacemos lo que mencionas. Saludos ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-LNQcnbqBh4k.html
@josueserrano6541
@josueserrano6541 5 месяцев назад
Me encanta la organización en la que va todo
@autodidacta-mx
@autodidacta-mx 5 месяцев назад
Gracias
@jorgemariovargas3830
@jorgemariovargas3830 5 месяцев назад
Autodidacta !! excelente video. Gracias
@autodidacta-mx
@autodidacta-mx 5 месяцев назад
@dredupastor
@dredupastor 8 месяцев назад
Buen tuto, coincido con Omar, sería interesante la segunda parte
@autodidacta-mx
@autodidacta-mx 8 месяцев назад
Aqui te dejo la segunda parte. ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-LNQcnbqBh4k.html Estamos trabajando en la 3. Saludos @dredupastor
@llllllllll124
@llllllllll124 9 месяцев назад
Excelente tutorial mi estimado Chuy!!
@autodidacta-mx
@autodidacta-mx 9 месяцев назад
Gracias y saludos
@vicentemvusb
@vicentemvusb 9 месяцев назад
Eso es todo mi Chuy, muy chido. Un día de estos platicamos para un curso de AWS.
@autodidacta-mx
@autodidacta-mx 9 месяцев назад
Me late mi estimado Vincet, Gusto de saber de ti.
@javierruizarto5554
@javierruizarto5554 5 месяцев назад
Me parecen muy interesantes tus aplicaciones, Ojalá hicieses mas videos, me gustaría que me ayudases a añadir a un proyecto algunas funciones de apariencia profesional como una barra inferior con información o un menú tipo ribbon de office. Para solucionar el problema de font awesome, ¿por qué no utilizar la familia de fuentes Segoe UI? Ahí hay iconos parecidos a los ya utilizados como por ejemplo ☰
@autodidacta-mx
@autodidacta-mx 3 месяца назад
Gracias por el aporte revisare esa fuente que mencionas
@leonarddavidfernandezurdan8167
@leonarddavidfernandezurdan8167 5 месяцев назад
Hermano eres increíble.
@autodidacta-mx
@autodidacta-mx 5 месяцев назад
@user-kd9bq5em7p
@user-kd9bq5em7p 7 месяцев назад
Muy buen video y muy útil. Muchas gracias.
@autodidacta-mx
@autodidacta-mx 5 месяцев назад
Gracias a ti!
@patriciozamorano7034
@patriciozamorano7034 3 месяца назад
Buenísimo ❤
@autodidacta-mx
@autodidacta-mx Месяц назад
Gracias
@shagorojas9281
@shagorojas9281 3 месяца назад
Excelente video!! Me fue de mucha utilidad. Quisiera saber en que pagina puedo consultar los diferentes códigos para generar los iconos con tkinter. Muchas gracias
@alextuza7166
@alextuza7166 16 дней назад
SALUDOS, EXCELENTE APORTE. TENGO UNA CONSULTA COMO LE PODEMOS HACER ESE ARCHIVO EN EJECUTABLE?
@angelmoratroncoso9431
@angelmoratroncoso9431 5 месяцев назад
Excelente video, muy claro. Tengo una consulta que tal vez ya has respondido en videos anteriores...Cómo puedo generar menus desplegables de selección de parámetros? Muchas gracias
@autodidacta-mx
@autodidacta-mx 5 месяцев назад
Tkinter tiene un widget de menus desplegables tk.Menu(). Saludos
@odelalvarado4807
@odelalvarado4807 9 дней назад
Hola alguien me ayuda porfa... tengo este error al instalar tkinter-fontawesome ERROR: Could not find a version that satisfies the requirement tkinter-fontawesome (from versions: none) ERROR: No matching distribution found for tkinter-fontawesome;;;; pero el proble es cuando ejecuto hasta la parte que tengo{Error :::AttributeError: '_tkinter.tkapp' object has no attribute 'toggle_panel'}... si alguien me puede ayudar tego window 11,,, la ultima vesion instalada de VSCode y Python 12..
@DMTRX
@DMTRX 4 месяца назад
como puedo poner los iconos?
@Martininga
@Martininga 9 месяцев назад
Gracias
@autodidacta-mx
@autodidacta-mx 8 месяцев назад
Esperemos te sirva de algo. Saludos
@aguscmzz
@aguscmzz 15 дней назад
Una cosa que no he entendido nunca... si se importa primero la librería tkinter por qué luego se importa de tkinter ... font? por ejemplo. ¿no se han cargado todos los módulos de tkinter ya? ¿Entonces que hace el primer import tkinter as tk?
@moretee
@moretee 9 дней назад
tengo la misma duda 😅
@pydata2.0
@pydata2.0 4 месяца назад
mui bueno!!! Gracias, desde Brasil!
@autodidacta-mx
@autodidacta-mx 3 месяца назад
Me alegra saber que te sirvio.
@luquez_26
@luquez_26 Месяц назад
Me gustó mucho tu video. Solamente tengo un error, no me sale el ícono que se obtiene a partir del Awesome Font. Me sale como un cuadrito, pero no me lo detecta.
@autodidacta-mx
@autodidacta-mx Месяц назад
Una disculpa ese error debido a la biblioteca que se debe isntalar pip install fontawesome eld etalle que no todos los windows funciona me di cuenat despues :(
@Leo-nw5xr
@Leo-nw5xr 4 месяца назад
Buenas tardes muy buen tuto pero en mi caso el icono del menu no se visualiza como en el tuto, pero se ve de forma rectangular. me podras ayudar con este tema? Desde ya gracias!
@luquez_26
@luquez_26 Месяц назад
Me sucede lo mismo. Pudo solucionarlo? Gracias...
@miguelangelrivasgarcia9080
@miguelangelrivasgarcia9080 9 месяцев назад
A esa interfaz se le puede añadir el login que explicas en videos anteriores?
@autodidacta-mx
@autodidacta-mx 9 месяцев назад
Sin problema, gracias a que lo encapsulamos en sus propios módulos y clases , agrega se código al proyecto de login y cuando se acceda ahora instancia la clase de este proyecto. Inténtalo, sise te complica me avisas y vemos como subir ese ajuste a una rama de git
@miguelangelrivasgarcia9080
@miguelangelrivasgarcia9080 9 месяцев назад
El panel de este video pasaria a ser mi MasterPanel? me ayudarias mucho si subieras la integracion de ambos proyectos a github, para estudiar el codigo :D@@autodidacta-mx
@miguelangelrivasgarcia9080
@miguelangelrivasgarcia9080 9 месяцев назад
Te comento que ya hice la integración y todo perfecto, Solo tengo problema en el font awesome que no me carga los iconos, El SQL me da un rollback que no sé si es un error o está bien que salga eso cuando inició sesión, Y cuando registro un usuario y inició sesión al cerrar el programa me da un error diciendo que la class Registerdesign no tiene un mainloop, Podrías ayudarme con eso porfa.
@autodidacta-mx
@autodidacta-mx 9 месяцев назад
Super lo de la integración, que te parece si me compartes tu código en git para descargarlo y darle una revisada. Al parecer son detalles pero una checada al codigo rapido te puedo decir que es.
@autodidacta-mx
@autodidacta-mx 9 месяцев назад
Es correcto seria el master. dame chance la próxima semana lo subí al git te paso el enlace por este comentario. goat-turquoise-white-horns
@narcizonorzagaray
@narcizonorzagaray 9 месяцев назад
para agregar acciones al menu ? ejecutar formularios, salir, etc
@autodidacta-mx
@autodidacta-mx 9 месяцев назад
Que tal Narcizo, tengo pensado subir un segundo video donde aplique acciones al menus como comentas. Espero que llegue a las mil vistas. Saludos
@pdpaco7
@pdpaco7 3 месяца назад
pues a mi dice que no puede importar config
@autodidacta-mx
@autodidacta-mx Месяц назад
😅
@alfredvarela2119
@alfredvarela2119 3 месяца назад
Buenas. Recomiendas usar clases para dividir cada función?
@autodidacta-mx
@autodidacta-mx 3 месяца назад
Siempre cuando se busque el Principio de responsabilidad única . Busca que una clase sea lo mas especifico posible.
@xanthekirax2653
@xanthekirax2653 7 месяцев назад
Nos podrias ayudar, donde podemos encontrar los iconos, y tengo un problema donde el icono no se visualiza
@autodidacta-mx
@autodidacta-mx 5 месяцев назад
Una disculpa, no he encontrado una solucion que les sirva a todos, buscare una alternativa para usar otros iconos genericos.
@xanthekirax2653
@xanthekirax2653 5 месяцев назад
@@autodidacta-mx gracias estare al pendiente
@pandorita_
@pandorita_ 4 месяца назад
a mi me funciono instalando el pip, python -m pip install tkfontawesome
@lucavella9174
@lucavella9174 9 месяцев назад
Muy buen video, lo que estoy teniendo un problema para ejecutar el codigo, no me esta dejando usar las utilidades
@autodidacta-mx
@autodidacta-mx 9 месяцев назад
Me muestras luca el error que te manda y te puedo apoyar
@juansebastiancamachoreyes4256
@juansebastiancamachoreyes4256 Месяц назад
Esa aplicación de escritorio se puede unir a una base de datos y crear un CRUD?
@jhon.k.3227
@jhon.k.3227 5 дней назад
Sim, é bem possível, podes usar Mysql connector ou pode utilizar Alambic como mediador.
@miguelangelrivasgarcia9080
@miguelangelrivasgarcia9080 9 месяцев назад
tengo problemas con los iconos no me salen. ejemplo el de el sidebar me sale un cuadro en ves de las 3 barritas horizontales
@autodidacta-mx
@autodidacta-mx 9 месяцев назад
Eso significa que no te esta detectando la tipografia, intenta instalar lo siguiente "pip install fontawesome" Me avisas si te funciono.
@miguelangelrivasgarcia9080
@miguelangelrivasgarcia9080 9 месяцев назад
no me funciono :c @@autodidacta-mx
@autodidacta-mx
@autodidacta-mx 9 месяцев назад
Intenta instalando pip install fontawesome. Por fa
@miguelangelrivasgarcia9080
@miguelangelrivasgarcia9080 9 месяцев назад
Ya lo hice amigo, y nada:(
@GamingHorizon_News
@GamingHorizon_News 9 месяцев назад
Tengo problemas con los controles menu lateral y no encuentro el por que. stoy tratando de hacer lo que haces pero sin imagenes
@autodidacta-mx
@autodidacta-mx 9 месяцев назад
Creo te refieres a los iconos intenta instalar pip install tk.fontawesome me avisas
@ronaldperezvargas8030
@ronaldperezvargas8030 2 месяца назад
Donde puedo conseguir los codigos de los iconos para poder cambiarlos??
@autodidacta-mx
@autodidacta-mx Месяц назад
Como se usa biblioteca pip install fontawesome lso iconos dependen de fontawesome.com/icons
@cyber1451
@cyber1451 5 месяцев назад
:( a mi me salio este error: Traceback (most recent call last): File "c:\Users\cyber\OneDrive\Escritorio\aoss\main.py", line 2, in from formularios.form_maestro_design import FormularioMaestroDesign ImportError: cannot import name 'FormularioMaestroDesign' from 'formularios.form_maestro_design' (c:\Users\cyber\OneDrive\Escritorio\aoss\formularios\form_maestro_design.py)
@autodidacta-mx
@autodidacta-mx 5 месяцев назад
Recuerda abrir el proyecto en tu editor al nivel donde esta el main.py sea el nivel principal para que desde ahi pueda observar todos los módulos importados
@AMIGOSTOTO
@AMIGOSTOTO 9 месяцев назад
Muy bueno el tuto !!! de donde podemos descargar los iconos que se usan en este tuto ? No me salen esos iconos . Muchas gracias ¡¡¡
@autodidacta-mx
@autodidacta-mx 8 месяцев назад
Muchos me han preguntado lo mismo. En mi experiencia, al instalar pip install tkinter-fontawesome, logré resolver el problema. Si aún encuentran dificultades, no duden en contactarme a través de la página de autodidacta.mx/. Si eres el primero podemos revisar el problema juntos en una reunión y, con suerte, encontrar una solución que pueda compartir en un nuevo video.
@juancarlosgutierrezviera5766
@juancarlosgutierrezviera5766 8 месяцев назад
Muy buen tutorial, he aprendido mucho gracias el, le agradecería que explicara bien lo de los iconos de font awasome, ya he intentado resolver el problema de varias maneras y no lo logro solucionar, muchas gracias. @@autodidacta-mx
@pandorita_
@pandorita_ 4 месяца назад
a mi me funciono instalando el pip, python -m pip install tkfontawesome
@marcossilvestre2100
@marcossilvestre2100 8 месяцев назад
por que hay partes de tu codigo que no corre que ocultas
@autodidacta-mx
@autodidacta-mx 8 месяцев назад
Es posible que en la edición del vídeo se me cortara . Pero el código completo lo encuentars en github.com/AutodidactaMx/Code-General-Python/tree/main/Modern%20GUI recuerdas instalar los paquetes de l archivo de requerimiento y el proyecto se invoca desde el modulo main.py. Saludos
@user-bk8nm3iv1l
@user-bk8nm3iv1l 8 месяцев назад
No m muestra los iconos ya intale font tkinter fontaweson
@autodidacta-mx
@autodidacta-mx 8 месяцев назад
Me apoyas instalando pip install tkinter_fontawesome . Me mencionas si te funciona Saludos @user-bk8nm3iv1l
@robertocalderon5191
@robertocalderon5191 7 месяцев назад
Genial pero no me sale el icono de font_awesome
@autodidacta-mx
@autodidacta-mx 5 месяцев назад
Una disculpa, no he encontrado una solución que les sirva a todos, buscare una alternativa para usar otros iconos genéricos.
@pandorita_
@pandorita_ 4 месяца назад
a mi me funciono instalando el pip, python -m pip install tkfontawesome
@the_br4y4n37
@the_br4y4n37 8 месяцев назад
no me cargan los iconos del font awesome
@autodidacta-mx
@autodidacta-mx 8 месяцев назад
Muchos me han preguntado lo mismo. En mi experiencia, al instalar pip install tkinter-fontawesome, logré resolver el problema. Si aún encuentran dificultades, no duden en contactarme a través de la página de autodidacta.mx/. Podemos revisar el problema juntos en una reunión y, con suerte, encontrar una solución que pueda compartir en un nuevo video.
@the_br4y4n37
@the_br4y4n37 8 месяцев назад
@@autodidacta-mx pues otra forma de solucionarlo fue instalar el font awesome en mi equipo, con la fuente, pero tu solución es un poquito mas practica
@ajm0o
@ajm0o 9 месяцев назад
يأخي الافضل ان تكتب يدويًا، هذه طريقة شرحك صعبة جداً!
@autodidacta-mx
@autodidacta-mx 9 месяцев назад
سنأخذ توصياتك بعين الاعتبار في الفيديوهات القادمة.
@Carlos.OrtizL
@Carlos.OrtizL 8 месяцев назад
no me funciono
@autodidacta-mx
@autodidacta-mx 8 месяцев назад
Que error te sale ,me indicas te puedo apoyar
@chef9404
@chef9404 6 месяцев назад
oye bro trato de correr tu proyecto directo desde tu git pero me dice que no pudo encontrar imagenes/logo.png y no se que sea el error y ya busque por todos lados, sera que me falta descargar alguna dependencia? mira aqui esta mi error = Traceback (most recent call last): File "c:\Users\Gus\Desktop\Code-General-Python-main\Modern GUI\main.py", line 3, in app = FormularioMaestroDesign() File "c:\Users\Gus\Desktop\Code-General-Python-main\Modern GUI\formularios\form_maestro_design.py", line 11, in __init__ self.logo = util_img.leer_imagen("./imagenes/logo.png", (560, 136)) File "c:\Users\Gus\Desktop\Code-General-Python-main\Modern GUI\util\util_imagenes.py", line 4, in leer_imagen return ImageTk.PhotoImage(Image.open(path).resize(size, Image.ADAPTIVE)) File "C:\Users\Gus\AppData\Local\Programs\Python\Python310\lib\site-packages\PIL\Image.py", line 3243, in open fp = builtins.open(filename, "rb") FileNotFoundError: [Errno 2] No such file or directory: './imagenes/logo.png'
@autodidacta-mx
@autodidacta-mx 5 месяцев назад
El error menciona por la posicion de donde esta la imagen logo intenta colocar tu ruta absoluta ejemplo 'c:/imagenes/logo.png' en lugar la relativa './imagenes/logo.png' esta esta solo cuando abres el proyecto al nivel del archivo main.py. Saludos
Далее
Мелл хочешь сына от Дилары
00:50
Running With Bigger And Bigger Feastables
00:17
Просмотров 25 млн
Using tkinter with classes
28:23
Просмотров 59 тыс.
C++ Developer Learns Python
9:26
Просмотров 2,7 млн
How principled coders outperform the competition
11:11
Мелл хочешь сына от Дилары
00:50