PythonTkinter/index.html at main · TheNarratorVIMMXX/PythonTkinter · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
<!-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->
<!-- DOCUMENTACIÓN -->
<!-- Vista para el Proyecto Tkinter -->
<!-- Ultima Modificación: 05/05/2026 -->
<!-- Autor: Magallanes López Carlos Gabriel -->
<!-- Correo: cgmagallanes23@gmail.com -->
<!-- Versión: 1.2 -->
<!-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->

<!DOCTYPE html>
<html lang="es">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>TheNarratorDev</title>
    <link rel="stylesheet" href="css/styles.css">
</head>

<body>

    <!-- Barra de Navegación -->
    <nav>
        <div class="nav-container">
            <a href="../index.html" class="nav-logo">TheNarratorDev</a>
            <a href="https://github.com/TheNarratorVIMMXX" class="back-btn" data-i18n="backBtn">← Volver a Proyectos</a>
        </div>
    </nav>

    <div class="container">

        <!-- Encabezado del Proyecto -->
        <div class="project-header">
            <h1>Python Tkinter</h1>
            <p data-i18n="projectDesc">Prácticas de Interfaz Gráfica de Usuario (GUI) desarrollados en Python utilizando la biblioteca nativa Tkinter</p>

            <div class="project-tags">
                <span class="tag">Python</span>
                <span class="tag">Tkinter</span>
                <span class="tag">GUI</span>
            </div>

            <div class="project-links">
                <a href="https://github.com/TheNarratorVIMMXX/PythonTkinter" target="_blank" data-i18n="githubBtn">Ver en GitHub</a>
            </div>

        </div>

        <!-- Descripción General -->
        <div class="content-section">
            <h2 data-i18n="overviewTitle">📖 Descripción General</h2>

            <p data-i18n="overviewText">
                Este proyecto contiene una colección de 14 prácticas educativas desarrolladas con Tkinter,
                la biblioteca nativa de Python para crear Interfaces Gráficas de Usuario (GUI).
                Estas prácticas cubren los siguientes conceptos fundamentales de Tkinter:
            </p>

            <ul>
                <li data-i18n="li1">Creación y configuración de ventanas (Tk())</li>
                <li data-i18n="li2">Widgets básicos: Label, Button, Entry, Listbox, Canvas</li>
                <li data-i18n="li3">Gestores de geometría: pack(), grid(), place()</li>
                <li data-i18n="li4">Manejo de eventos con command y bind()</li>
                <li data-i18n="li5">Organización con frame y marcos anidados</li>
                <li data-i18n="li6">Validación de entrada de datos</li>
                <li data-i18n="li7">Uso de temporizadores con after()</li>
                <li data-i18n="li8">Mensajes emergentes con Messagebox</li>
                <li data-i18n="li9">Personalización avanzada (colores, fuentes, estilos)</li>
            </ul>

        </div>

        <!-- Características Principales -->
        <div class="content-section">
            <h2 data-i18n="featuresTitle">✨ Características Principales</h2>

            <div class="features-grid">

                <div class="feature-card">
                    <h4 data-i18n="feat1Title">🎯 Widgets</h4>
                    <p data-i18n="feat1Desc">Uso de botones, labels, listbox, entries y más elementos nativos de Tkinter</p>
                </div>

                <div class="feature-card">
                    <h4 data-i18n="feat2Title">⚡ Layouts & Grid</h4>
                    <p data-i18n="feat2Desc">Organización de interfaces usando el sistema de grid y frames para estructurar ventanas</p>
                </div>

                <div class="feature-card">
                    <h4 data-i18n="feat3Title">🚀 Interactividad</h4>
                    <p data-i18n="feat3Desc">Manejo de eventos, acciones de usuario y respuestas dinámicas dentro de las ventanas</p>
                </div>

                <div class="feature-card">
                    <h4 data-i18n="feat4Title">💡 Diseño de Interfaz</h4>
                    <p data-i18n="feat4Desc">Principios de UX/UI aplicados a ventanas de escritorio con estilos y configuraciones visuales</p>
                </div>

            </div>

        </div>

        <!-- Cómo Usar -->
        <div class="content-section">
            <h2 data-i18n="howToUseTitle">🚀 Cómo Usar</h2>

            <h3 data-i18n="installTitle">Instalación</h3>

            <pre><code>
                git clone https://github.com/TheNarratorVIMMXX/PythonTkinter.git

                cd PythonTkinter

                python P1.py
            </code></pre>

            <h3 data-i18n="basicUseTitle">Uso Básico</h3>
            <p data-i18n="basicUseDesc">Cada práctica es un script independiente, para ejecutar cualquiera:</p>

            <ol>
                <li data-i18n="step1">Asegúrate de tener <code>Python 3.11</code> instalado en tu sistema</li>
                <li data-i18n="step2">Tkinter viene incluido con Python, no necesitas instalar dependencias extra</li>
                <li data-i18n="step3">Navega a la carpeta del proyecto y ejecuta la práctica deseada</li>
                <li data-i18n="step4">Se abrirá una ventana gráfica con la interfaz de esa práctica</li>
                <li data-i18n="step5">Cierra la ventana para terminar la ejecución</li>
            </ol>
        </div>

        <!-- Screenshots -->
        <div class="content-section">
            <h2 data-i18n="screenshotsTitle">📸 Capturas de Pantalla</h2>

            <div class="screenshots">

                <div class="screenshot">
                    <img src="imgs/P7.png" alt="Práctica 7">
                    <p data-i18n="shot1">P7 - Cuestionario</p>
                </div>

                <div class="screenshot">
                    <img src="imgs/P13.png" alt="Práctica 13">
                    <p data-i18n="shot2">P13 - Semáforo</p>
                </div>

                <div class="screenshot">
                    <img src="imgs/P14.png" alt="Práctica 14">
                    <p data-i18n="shot3">P14 - Calculadora</p>
                </div>

            </div>

        </div>

        <!-- Tecnologías Utilizadas -->
        <div class="content-section">
            <h2 data-i18n="techTitle">🛠️ Tecnologías Utilizadas</h2>

            <ul>
                <li data-i18n="tech1">Python 3.11 - Lenguaje de Programación</li>
                <li data-i18n="tech2">Tkinter - Biblioteca para crear Interfaces Gráficas de Usuario (GUI)</li>
                <li data-i18n="tech3">Visual Studio Code - Entorno de Desarrollo (IDE)</li>
            </ul>

        </div>

        <!-- Licencia -->
        <div class="content-section">
            <h2 data-i18n="licenseTitle">📄 Licencia</h2>

            <p data-i18n="licenseText">
                Este proyecto está bajo la Licencia MIT. Consulta el archivo LICENSE para más detalles.
            </p>

        </div>

        <!-- Contacto -->
        <div class="content-section">
            <h2 data-i18n="contactTitle">📧 Contacto</h2>
            <p data-i18n="contactDesc">Si tienes preguntas o sugerencias sobre este proyecto, contáctame:</p>

            <ul>
                <li><strong>GitHub:</strong> <a href="https://github.com/TheNarratorVIMMXX" target="_blank" style="color: #fff3b0;">@TheNarratorVIMMXX</a></li>
                <li><strong>Email:</strong> <a href="mailto:cgmagallanes23@gmail.com" style="color: #fff3b0;">cgmagallanes23@gmail.com</a></li>
                <li><strong>LinkedIn:</strong> <a href="https://linkedin.com/in/carlos-gabriel-magallanes-lopez-940179398" target="_blank" style="color: #fff3b0;">Carlos Gabriel Magallanes López</a></li>
            </ul>

        </div>

        <!-- Pie de Página -->
        <footer>
            <p data-i18n="footer">&copy; 2026 TheNarratorDev. Todos los derechos reservados.</p>
        </footer>

    </div>

    <script src="js/script.js"></script>

</body>
</html>