Saltar navegación

Activa JavaScript para disfrutar de los vídeos de la Mediateca.

Corrección Examen - Vídeo 2 - Contenido educativo

Ajuste de pantalla

El ajuste de pantalla se aprecia al ver el vídeo en pantalla completa. Elige la presentación que más te guste:

Subido el 17 de diciembre de 2023 por Mario S.

65 visualizaciones

Más información Transcripción

Descargar la transcripción

Bueno, en el primer vídeo hemos visto cómo hacemos nuestra ventana, cómo se nos genera a partir de una clase. 00:00:11
Tenemos nuestro fichero principal en el que hemos llamado al fichero donde está contenida la clase con la que trabajamos de ventana principal. 00:00:24
le hemos pasado como parámetros de entrada el ancho, el alto, la Y y el texto, el title de la ventana y la redibujamos. 00:00:33
Esta sería nuestra clase principal y continuamos a partir de aquí. 00:00:45
A partir de aquí lo que quiero hacer son nuestros frames, nuestras cajas, 00:00:49
Para ir haciendo una interfaz que sea por cajas, darle un formato más actual y más semejante a lo que vienen siendo las páginas web, ¿vale? A todo lo que es el desarrollo web. 00:00:53
Vale, para eso vamos a utilizar, pues por ejemplo, esta función def, ¿vale? 00:01:11
Y desde aquí voy a empezar a llamar a las diferentes cajas, ¿vale? 00:01:21
Entonces, cada una de esas cajas, no me acuerdo bien qué colores eran, da igual, ponemos los que sean, 00:01:25
tenían un color diferente para distinguirlas bien. 00:01:36
Perdón. Vale, entonces, vamos a crearnos un fichero que yo le voy a llamar herramientas.py o tool.py, como vosotros queráis. 00:01:43
¿Vale? En este fichero, pues tampoco voy a importar ninguna librería. 00:01:57
Al final lo único que voy a hacer es, pues es que podemos tener incluso las mismas variables, bueno, como tenemos que hacerlo por clases, o sea, utilizando clases, pues vamos a hacer una clase que la voy a llamar, pues eso, colores aplicación, por ejemplo. 00:02:06
no hereda de nada, vale, dentro de colores aplicación, el def, guión bajo, guión bajo, init, guión bajo, guión bajo, self, vale, dentro de esta función, pues vamos a llamar a self, entonces vamos a llamar a color, cabecera, pie, esto es igual a, vale, siempre empezamos así, vale, colores, 00:02:42
con un formato de esa decimal 00:03:17
entonces este puede ser 00:03:20
que fuera de estos que tengo aquí apuntados, uno sería este 00:03:26
otro color 00:03:30
principal, que este sería 00:03:35
el de 805 00:03:42
color principal 00:03:50
el de la izquierda 00:04:07
este es igual a 00:04:09
B805AF 00:04:16
y vale, un color que es 00:04:23
de la fuente, color fuente 00:04:34
este es 00:04:38
F, E, F, E, fuente secundaria, vale, que es 7A0374, vale, estos son los colores que yo tengo, que no sé si son exactamente los mismos que os puse a vosotros, 00:04:51
que supongo que sigo, están aquí apuntados en un papel 00:05:40
vale, y una vez que tengo estos colores, lo único que hago 00:05:43
es def, me voy creando funciones 00:05:48
get 00:05:52
color, y esto me va a poner, me va a devolver 00:05:54
el resum 00:06:08
a esto, está mal, por lo que os decía en el primer vídeo, vale, esto siempre 00:06:11
le damos del self, vamos, le damos, perdón, siempre se le pasa el self para que pueda hacer referencia a las variables de toda la clase de esa instancia, ¿vale? 00:06:23
Entonces aquí voy a devolver este y esto pues lo vamos a duplicar las veces que nos hagan falta, entonces son 1, 2, 3 y 4, 4 veces, pues 4 veces que lo tengo que escribir. 00:06:39
color principal 00:07:06
ser color 00:07:17
izquierda 00:07:44
vale 00:07:47
aquí 00:08:01
get color 00:08:06
fuente 00:08:12
y por último 00:08:13
get color 00:08:26
fuente 00:08:30
secundario 00:08:33
return 00:08:36
ser 00:08:40
punto 00:08:41
ser punto 00:08:42
color fuente secundaria 00:08:51
vale, de esa manera voy a llamar 00:08:54
a cada uno de estos métodos 00:08:57
cuando me declaro la clase 00:08:58
colores aplicación 00:09:00
y ya tengo acceso 00:09:02
a esos colores 00:09:05
entonces, ¿qué es lo que tengo que hacer? 00:09:06
pues venirme a mi clase ventana principal 00:09:07
importo 00:09:10
perdón, desde el fichero 00:09:11
herramientas 00:09:17
import 00:09:20
¿Cómo lo he llamado? 00:09:23
Colores aplicación 00:09:29
Colores aplicación 00:09:30
¿Vale? 00:09:33
Y entonces, pues 00:09:36
Igual que antes, puedo tener aquí 00:09:37
Unas variables, una que es 00:09:39
Punto 00:09:41
Color principal 00:09:44
Es igual a 00:09:48
Vale, y esto lo vamos a poner como 00:09:54
Asca 00:09:56
Vale, esto va a ser ca.getColorPrincipal, aquí vamos a poner self.colorIzquierda, esto va a ser igual a ca.getColorIzquierda. 00:09:58
izquierda, self, vamos a poner color cabecera, esto es igual a ca.colorcabecera, self.colorfuente, 00:10:22
Esto va a ser igual a ca.colorFuente. Y por último, self.colorFuente secundaria, secundario, ca.tiri. Ahí estamos. 00:10:43
Vale, ya tengo acceso a esos colores que nos hemos definido en herramientas.py y que para hacer cualquier cambio en el desarrollo que estamos haciendo lo único que tendría que hacer es venir aquí y ir modificándolos y eso ya me lo va a coger en todo el desarrollo porque lo estamos importando como si fuera una clase. 00:11:05
que es lo interesante de trabajar con, bueno, es parte de lo interesante de trabajar con clases. 00:11:30
Bueno, entonces, yo voy a empezar a crear mis cajas, entonces, llamamos a esta función, ¿vale? 00:11:36
a cajas, vale, cajas, y siempre con el set, ahí está, bueno, lo que queremos hacer es, 00:11:46
Entonces, no me acuerdo de los tamaños y todo esto, pero era en nuestra ventana, que ahora la hacemos un poco más grande para que sea mejor, era un encabezado, un pie de página, una columna a la izquierda y el resto como principal a la derecha. 00:12:21
¿Vale? Queríamos hacer eso 00:12:45
Entonces, según el diseño que tenemos o que yo os mostré en el examen 00:12:49
Tengo que hacer primero ese encabezado o ese pie de la interfaz 00:12:53
¿Vale? Para que luego esa columna de la izquierda no pase por encima de las dos 00:13:01
Me da igual que sea el encabezado que el pie de la interfaz 00:13:08
Entonces voy a empezar por el encabezado 00:13:12
Luego hago el pie, luego hacemos la columna de la izquierda y por último ese frame principal donde vamos a ir cargando los datos que nos hagan falta. 00:13:14
Vale, entonces, vamos a crearnos primero, vamos a decirle, esto va a ser de un tamaño de, vamos a ponerle, 800 y este de 400. 00:13:29
A ver cómo nos lo hace. Vale. Esto. Yo creo que lo quiero un poco más alto, así que le vamos a poner aquí 850. Algo así. Va a dar la sensación de algo hecho mal. 00:13:43
vamos a ver 00:14:11
aquí 00:14:21
está pasando algo 00:14:32
ah, porque excedía 00:14:37
el tamaño, vale, pero así 00:14:52
me vale, 800 por 600 00:14:54
vale 00:14:57
con, aquí podemos 00:14:59
ir dibujando, utilizando los colores 00:15:02
que acabamos de crear 00:15:05
y vamos dibujando esas cajas 00:15:06
que llamáis vosotros 00:15:08
que en realidad son frame 00:15:10
Y cuando estamos trabajando con el TKinter son el TKinter.tkframe, ¿vale? Entonces, venga, vamos a por ello. 00:15:12
Aquí vamos a coger la ventana principal dentro de cajas y vamos a empezar, ¿vale? Con la superior, ¿vale? Entonces, la que está en la parte de arriba. 00:15:21
self, le llamamos, pues, por ejemplo, cabecera, ¿vale? Esto va a ser igual a tk.frame, ¿vale? 00:15:34
vale, tk.frame, vale, recordad que es el tk porque aquí le he puesto el alias al tkinter, vale, tkframe, bueno, aquí le vamos a ir pasando una serie de parámetros, vale, una serie de parámetros, 00:15:56
Siempre a los widgets de Python, el primer parámetro que le voy a pasar siempre, siempre, siempre es donde quiero dibujar este widget. 00:16:17
En este caso, el widget es el frame, aunque va a ser el contenedor de otros widgets, pero es un widget, no deja de ser un objeto, ¿vale? 00:16:28
Entonces, ¿dónde lo voy a dibujar? En la ventana principal. 00:16:36
¿Cuál es esa ventana principal? Es self, ¿vale? 00:16:40
recordar cómo pongo self.título, cómo pongo la geometría y para hacer referencia a la ventana 00:16:44
siempre pongo el self porque es la instancia de esa clase. Esa ventana que se dibuja es esa 00:16:52
instancia. Si yo dibujara varias ventanas desde main.py, desde aquí, yo dibujara varias ventanas 00:16:59
root, root1, root2, cada una de esas ventanas haría referencia a sí misma a través del self, ¿vale? 00:17:06
Entonces ponemos el self, como primer parámetro le digo que quiero que se dibuje en esta instancia, en este self, ¿vale? 00:17:17
Vale, y ya aparte, esto es lo importante, esto y luego situarlo en una posición o en otra, ¿vale? 00:17:27
Vale, yo le he pasado otros dos parámetros. Una que es el color de fondo, ¿vale? Que es el VG. Y esto le digo que es igual a self. Estamos en la cabecera, entonces tenemos el color cabecera. 00:17:36
ser punto color cabecera vale y otro parámetro o sea le pasó una coma porque son 00:17:52
diferentes parámetros que van dentro del teca frame y otro parámetro es como es la 00:18:02
cabecera pues una altura vale entonces si quiero que tenga una altura pues le vamos a pasar pues 00:18:09
por ejemplo, va a ser igual a, vamos a poner 40, ¿vale? Vale, bueno, estos serían los parámetros para dibujar ese frame de la parte superior de la ventana, ¿vale? 00:18:18
Esto, si yo vengo aquí y le doy al play, no me dibuja nada, bueno, lo que me hace falta ahora es self.cabecera.pack, vale, entonces tenéis que acordar que a la hora de situar un objeto dentro de un contenedor, un widget dentro de un lienzo, de un canvas o de un contenedor, ¿vale? 00:18:45
como pueden ser los frames tenéis tres formas de hacerlo con el pack con el place y con el grid 00:19:15
vale y cada una de las diferentes situaciones que os podéis encontrar pues puede ser mejor utilizar 00:19:21
una opción u otra en este caso para mí es muy cómodo usar el pack porque voy acomodando los 00:19:30
widgets según según los voy creando vale automáticamente se me van a ir 00:19:38
acomodando en la en lo alto en lo bajo a la izquierda y a la derecha entonces 00:19:45
para mí es muy cómodo entonces este para este forma de 00:19:50
ordenarlo de situar los widgets tiene un parámetro que es el site que le dices 00:19:55
con el tk punto pues en este caso yo quiero que me lo sitúe en la parte de 00:20:01
arriba entonces le digo el teca punto top vale teca punto top 00:20:07
tenemos otros dos parámetros uno que es el film que aquí le podemos pasar veis 00:20:15
aquí no me lo muestra vale le puedo pasar si aquí estás el 00:20:29
film vale en x en y en voz si quiero que rellene en x y voz y ambos vale 00:20:34
Yo le voy a pasar a ambos, aunque al pasarle una altura, ya le digo que me lo rellene, en este caso en Y, pero hasta esa altura, como máximo hasta esa altura. 00:20:42
Le podría pasar otro parámetro, que luego lo haré, aquí no me interesa, que se expanda, ¿vale? 00:20:55
También hemos puesto el Recyble a falso y falso, así que el que se expanda o no, cuando cambiamos la resolución de la pantalla, 00:21:00
Aquí no tendría sentido, entonces en un momento dado el Recybel lo voy a comentar, ¿vale? Para poder reescalarlo. 00:21:10
Vale, esto me tendría que dibujar la cabecera, el frame de la cabecera. Vamos a verlo, vamos a limpiar esto y vamos a ver por qué nos está dando este error. 00:21:18
Vale, dice que es desconocido ese color 00:21:39
Esto es porque me faltan estos paréntesis 00:21:42
Estamos llamando a esas funciones, vale 00:21:45
Y aquí igual 00:21:53
Ya estás 00:21:55
Vamos a poner que sea 00:21:57
Sea igual a colores 00:22:04
Vale 00:22:08
Lo vamos, no lo puedes poner como un alias 00:22:12
hay que declarar sea como una instancia de esa clase, ¿vale? Vale, entonces ahora ya sí lo tenemos aquí, ¿vale? Y hemos dibujado esta ventana con este color que no sé si es el que os dije en el examen o no, 00:22:16
Pero bueno, ahí está nuestra franja superior, nuestro frame superior, ¿vale? Entonces ahora vamos a hacer lo mismo con el frame inferior. Antes de hacer lo mismo vamos a hacer alguna pruebecilla, ¿vale? De cambio de resolución y para hacer eso, lo que os comentaba antes, vamos a coger en el Recybel y lo voy a comentar, ¿vale? 00:22:39
Vale, entonces vamos a ver que si yo empiezo a modificar la resolución, el tamaño de esa ventana, pues el fill, el parámetro que hemos pasado dentro de pack, ese fill en ambos, en both, siempre se está cumpliendo, o sea, siempre lo rellena en x y en y hasta 50, vale, o hasta 40 que hemos puesto. 00:23:05
Vale, entonces eso nos lo está, lo cumple siempre, vale, y ya tenemos nuestra ventana, vale, vamos con la cabecera, pues ahora el pie, pues entonces self.pie es igual a, esto es lo mismo, 00:23:35
TK.frame, donde queremos que lo dibujen, self, coma, queremos que el color de fondo BG sea igual, pues lo mismo, self.color, cabecera, que es el mismo que el de la fuente, 00:23:58
y le decimos que sea 40 también vale y ahora le digo que es el punto cabecera no perdón pie 00:24:20
punto pack site en este caso el site es en la parte inferior así que este punto 00:24:34
bottom, vale, fill, pues igual, que me lo rellene en x y en y, ambos, vale, esto ya lo que nos va a hacer es que desde el main ya tenemos nuestro parte superior, 00:24:43
nuestro frame en la parte superior, nuestro frame en la parte inferior, ¿vale? Y que responde bien a la resolución, ¿vale? Muy bien, ahora vamos a hacer nuestra frame de, en la izquierda, ¿vale? 00:25:07
La que habíamos dicho, entonces esto es self.izquierda es igual a tk.frame, le decimos donde lo quiero dibujar, siempre en self, le digo, en este caso lo que quiero es que tenga un determinado ancho, ¿vale? 00:25:26
Que tenga un determinado ancho, entonces para poner ese determinado ancho lo que le voy a pasar es el width, ¿vale? 00:25:52
entonces veje primero el color que color era éste el ser punto color izquierdas 00:25:59
este 00:26:06
vale y ahora lo que os digo en vez de pasarle el parámetro y le pasó 00:26:09
y este le vamos a decir pues por ejemplo que sea 00:26:17
bueno, siempre se suelen ser entre 150 a 200, vamos a dejar de 150, lo vemos ahora, 00:26:22
y, pues eso, si no es el tamaño que nosotros queremos, lo modificamos, 00:26:34
self.izquierda, todo el rato lo mismo, self.izquierda.pack, 00:26:42
donde quiero colocar en el self, en el espacio que me queda del self 00:26:49
donde quiero colocar este frame, pues a la izquierda 00:26:56
pues entonces le paso el side igual tk.left 00:27:00
vale, le pasamos el fill, el relleno que le digo 00:27:04
pues ponlos en ambos 00:27:10
y le voy a pasar también el expandir 00:27:12
el span 00:27:17
y este le digo que sea falso 00:27:19
para que siempre 00:27:21
me ocupe esos 150 00:27:23
vale 00:27:25
vale 00:27:28
y entonces yo cojo 00:27:30
lo ejecutamos y vemos 00:27:32
que ha pasado 00:27:36
o que no ha pasado 00:27:37
aquí estás, vale 00:27:39
son dos colores diferentes 00:27:41
este yo lo puedo ir haciendo 00:27:42
más grande o más pequeño 00:27:45
¿Vale? Siempre estás a 150 00:27:46
¿Vale? Aunque se expanda, se expanda bien 00:27:51
En este caso en I 00:27:54
Y aquí siempre me respeta al 150 00:27:56
Y ya tengo mis 3 frames hechos 00:27:59
¿Vale? Y que responden perfectamente al cambio de resolución 00:28:01
Y nos falta el último, pues vamos con el último 00:28:05
El último es el principal 00:28:08
Entonces en el principal 00:28:11
pues otra vez hacer lo mismo, vale, vamos a self.principal es igual a tk.frame, este lo dibujamos en lo que queda ya de self, 00:28:14
y le voy a pasar 00:28:32
es igual a 00:28:37
cel 00:28:40
punto color 00:28:42
principal 00:28:44
este 00:28:46
vale 00:28:47
y ahora quiero que me ocupe 00:28:49
todo a lo alto y a lo ancho 00:28:54
así que pues no le meto ninguna 00:28:56
altura, ningún parámetro de altura ni de ancho 00:28:58
vale 00:29:00
si que cel principal 00:29:01
es igual, perdón, .pack 00:29:04
el site, ¿dónde quiero que me lo ponga? 00:29:09
pues le puedo poner en el tk.write 00:29:13
vale, y ahora hacemos alguna prueba 00:29:18
con una pregunta que me hizo Andrés 00:29:22
en clase 00:29:27
vale, yo le digo el fill, me lo vas a rellenar en bot 00:29:30
y el stand en este caso sí que quiero que siempre se esté expandiendo así que 00:29:35
esto lo pasó a ti vale entonces vamos a hacer alguna 00:29:45
proyección ya con esto primero compruebo que esto está está bien tal cual lo 00:29:50
tengo aquí está vale perfecto ya tengo mis frames para ir dibujando mis 00:29:55
diferentes opciones genial vale hasta ahora como 00:29:59
En este caso el frame principal se me está expandiendo a lo alto y a lo ancho, genial, perfecto, vamos a ver si, que pasaría si no le paso esto, vale, no le paso esto, el side, porque ahora lo que quiero es que me esté ocupando todo el espacio del self que me queda, vale, 00:30:08
Todo el espacio del self que me queda 00:30:37
Entonces, le estoy diciendo 00:30:39
Tú rellénalo en X y en Y 00:30:41
Y además que sea escalable 00:30:44
Vamos a ver qué hace esto 00:30:45
Esto me parece que fue lo que preguntó Andrés 00:30:46
¿Vale? 00:30:49
Entonces, fijaros que me hace exactamente lo mismo 00:30:50
No me haría falta decirle dónde lo quiero situar 00:30:52
Porque ya le estoy diciendo que me ocupe todo el espacio 00:30:55
En X y en Y 00:30:59
¿Vale? 00:31:02
¿Y qué pasaría, por ejemplo, si en vez de bot 00:31:03
le digo que sea solo en y 00:31:07
¿vale? 00:31:11
pues 00:31:17
no nos pasa 00:31:17
más que esto 00:31:19
¿qué hace? es un punto 00:31:21
y entonces ese punto lo expande 00:31:23
en y desde el centro 00:31:26
¿vale? 00:31:27
y me hace esto 00:31:29
bueno, si esto 00:31:30
bueno, os iba a decir si 00:31:33
ahora le paso 00:31:39
el side a la derecha 00:31:41
pues obviamente esa línea la va a pegar a la derecha esto sería la creación de los frames y 00:31:43
este vídeo ya lo dejo aquí en el siguiente vídeo nos dedicamos a meter los widgets dentro de cada 00:31:51
uno de los frames como recordatorio de lo que hemos hecho hay que acordarse de dónde estamos 00:31:58
donde dibujamos esos frames vale siempre dentro de la ventana principal de ese 00:32:06
root que hemos creado en main.py ese root es el self de esta clase es la 00:32:12
instancia de esa clase vale lo demás con lo que he ido jugando 00:32:19
parámetro de el color de fondo altura anchura según esté haciendo uno u otro 00:32:24
tener cuidado con el diseño que queréis hacer porque tendréis que dibujar unos 00:32:30
antes que otros vale y luego el tema de situarlos vale como le pasó hoy o lo 00:32:34
cómodo que es decirle con el teca punto top el teca punto botón el teca punto 00:32:42
left el right como es cómodo decirle si lo quiero arriba abajo a la izquierda o 00:32:48
a la derecha si quiero que se expanda si quiero que me lo rellene en x y en y 00:32:54
vale todo ese tipo de cosas se hace más o menos rápido y al final bueno yo lo 00:32:59
he ido escribiendo pero esto como vayas con el copiar y pegar que vosotros lo 00:33:06
manejáis bien pues lo haces en dos patadas vale bueno un saludo hasta luego 00:33:11
Valoración:
  • 1
  • 2
  • 3
  • 4
  • 5
Eres el primero. Inicia sesión para valorar el vídeo.
Idioma/s:
es
Idioma/s subtítulos:
es
Autor/es:
Mario Santos
Subido por:
Mario S.
Licencia:
Dominio público
Visualizaciones:
65
Fecha:
17 de diciembre de 2023 - 20:40
Visibilidad:
Público
Centro:
IES VILLABLANCA
Duración:
33′ 18″
Relación de aspecto:
1.78:1
Resolución:
1920x1080 píxeles
Tamaño:
786.72 MBytes

Del mismo autor…

Ver más del mismo autor

EducaMadrid, Plataforma Educativa de la Comunidad de Madrid

Plataforma Educativa EducaMadrid