Saltar navegación

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

Back end Vs Front end - Vídeo 20 - 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 26 de julio de 2024 por Mario S.

49 visualizaciones

Trabajando con clases de Tailwind.

Más información Transcripción

Descargar la transcripción

well in this video we are going to see how to make a card is worth what they call with the 00:00:00
from with the frameworks the faces that is a very visual way very friendly to show information 00:00:08
when you access a database all the information that is extracted from that database 00:00:18
and showing it in this way, okay, this is what I told you in the last video that I uploaded, okay, 00:00:26
then here we have we are going to do this so that you can see how it is, I am going to explain different 00:00:37
classes as you can be the grid that is interesting and we could see this in an example that if you 00:00:42
you want, well, I also do it if the video is not very long, you see this type of cards, 00:00:54
also notice that I have not told you how the tailwind documentation works, not first they tell you 00:01:01
how it was done before we had here our our html code and we are going to put the classes 00:01:07
then in the style and we are going to do the different classes, it is worth that I understand that you this is 00:01:14
what you have done with the css in the end a framework is this then now they tell you no this is no longer 00:01:19
used if this now what is done is this code because you are using the framework the framework of 00:01:25
tailwind ok then if we take this for example I copy it we go to the code here we are going to paste it 00:01:33
for example here this is worth this this is not going to recognize me this we are going to put here it is the reason 00:01:52
then sign 00:02:12
dot jpg 00:02:17
and this and mg this does not catch me I do not know why 00:02:20
is because of the type I think 00:02:33
well, what I am going to do is 00:02:44
this now, yes, if we come to our website, this is the point, I think 00:02:57
to see if it is worth then you see that this card has been put to me in this way, now I tell you 00:03:10
why these margins are so wide, it is because I already had this one that had this size 00:03:21
then this one is suitable for this size, but you see that right now it has worked for me as easy 00:03:27
how to copy and paste the code and we would already have it here ok with its use with all the stories 00:03:33
well let's go again to our web we have here already put the page the visual studio code with the 00:03:40
página web vale y pues vamos a borrar todo esto desde este reto hasta aquí vale bueno ya está todo 00:03:55
borrado ahora me está dando aquí cantidad de errores vale porque esto siempre tiene que ir 00:04:08
with the div, and from here we start to do the different things, we are going to put for example here a hello world 00:04:14
to see what we are doing as we are putting the code, then we are going to make this a little bigger 00:04:28
y así lo vamos viendo mejor vale entonces tengo ese div este es el contenedor vale el contenedor 00:04:42
principal y hay que distinguir entre lo que es un canvas que eso lo vais a ver mucho mejor 00:04:54
cuando empecemos con el tema de unity y lo que es un contenedor dentro de ese canvas vale al 00:05:00
in the end a container is like if I am talking about classes it is the parent class ok and it will have 00:05:08
different children everything and the children will inherit from the father ok that is, the reasoning is always 00:05:14
the same ok then here I am going to start putting classes and I am going to see them with you 00:05:21
ok then for example the quotes quotes ok the first one that I can put where it is worth around what 00:05:28
that class does round the straight angles of the background ok or of an image if we put 00:05:39
una imagen cosas así vale pero lo que hace redondear luego tenemos diferentes veis diferentes 00:05:50
grados de redondear más pequeño menos menos grande vale puedes decirle que sea full entonces te hace 00:05:59
casi como un círculo vamos a meterle ahora el 2xl y luego lo voy cambiando y vais viendo y diferentes 00:06:06
things ok I have here I have the over flow haydn ok if you see the over flow it has here different 00:06:12
options the over flow is when a text or something is overpasses the container as you want it to 00:06:28
act is worth the typical of if it is rap because it takes you and divides you for example I am talking in 00:06:36
text does not divide the word and it starts to put the line below it is worth me in this case what 00:06:43
I have told him is everything that exceeds in my container you hide it ok and that's it but this 00:06:49
you already see that later we can modify it as you want, it is worth and in fact I encourage you 00:06:57
to modify it as you want to go doing you and seeing different things the shadow 00:07:02
which is what the shadow or shadow 2xl does, for example shadow what it does is put a shadow on the container 00:07:09
or on the image anywhere that you put this shadow it will give it an aspect like in 3d it is worth like 00:07:17
several layers what else can we put the green axis the color the background is worth then we are going to 00:07:28
put the blue and we are going to put it because a 600 for example is worth then you see how now if you 00:07:37
see the background the bg in blue it is worth it is seen that it has rounded the corners you see that if I take 00:07:44
and remove this is the background there is not this I have removed something that I did not have to have removed 00:07:53
we are going to avoid this, notice how now the corners are straight angles, it is worth 3 because 00:08:07
we are going to put the 2 xl the overflow haydn the shadow 00:08:26
is worth and the shadow is not that it looks too good 00:08:38
well, we are going to continue, we are going to continue putting more little things, more classes, then 00:08:41
notice that here the classes have been put in a div that in the end is to make a block, then 00:09:06
the dao programmers work a lot with the div, it is not always necessary, but it is 00:09:11
true that I am going to make those blocks block is equal to container is worth in this way 00:09:19
ok let's do for example something else and I'll tell you I'm also telling you new things 00:09:29
we are going to put here is this dip that is the container is worth that it always has to accompany 00:09:34
and it always has to accompany the challenge we are going to format this 00:09:42
ok well then I have the hola world ok I have this good dip if I want ok because 00:09:52
here you see that well, it is taking care of everything that is the entire width of my body of the 00:10:01
web page, then there are several ways to position a gui or an element of the water and 00:10:10
better said a container or a button or a container is worth in the end they always end up 00:10:22
becoming containers there are several ways to order these containers in the 00:10:29
on the screen, okay, if we don't tell him anything, he'll take care of everything, unless we play with the property width, okay, or the height, the width, we can play with that, okay, well, there are two properties that are used a lot, two classes, which is the gray one, and the flex one, in this case I'm going to use the gray one, okay, so here I put the class, as we're doing all the time, 00:10:40
Okay? And when you use the gray class, the first thing you do is put the gray. The second thing you do is say, gray, and here, if you look, I can move by columns and by rows, okay? 00:11:10
So, what does this do? It makes a kind of table, okay? 00:11:30
So, when you tell it the number of columns that you want your page to have and the number of rows, 00:11:34
that allows you to place the different components, the different containers, 00:11:41
in the places where you want to place them on your web page, in this case on the From, okay? 00:11:48
y eso es es cómodo porque también nos permite pues lo que nos suele permitir una tabla expandir un 00:11:56
objeto un contenedor entre dos columnas entre dos celdas o entre dos filas o decirle dónde empieza 00:12:05
dónde termina vale hay diferentes opciones yo en este caso le voy a decir que voy a hacer un 00:12:13
grid of five columns is worth then look at how already when I tell him the grid calls 5 he has already 00:12:18
taken me and he has made me smaller this this this container is worth with the text that has happened with 00:12:27
the text that he has taken and he has adjusted it to this size, it is good 00:12:36
here I have used 2 xl I do not know why it is that it is not a box this is a box 00:12:52
should give me a shadow and it is not giving it I do not know why you border 00:13:08
what happens is that they put it in a very black color, you see here now when I have put it with the 00:13:37
plan that you can see more if I was putting it ok here you can see more I am going to leave it like this so that it 00:13:50
looks good but also you as you have the smallest screen, well, notice that I have erased 00:13:58
the overflow haydn then what it does to me that the letters are coming out here, okay 00:14:03
if I put the overflow haydn here again, you see, it already hides it and I think it is better, okay 00:14:11
but we could go playing with the different options that the overflow gives me, all this as 00:14:23
siempre lo tenéis en las opciones vale en la documentación técnica aquí tenéis todo lo del 00:14:29
grid vale cómo empezar a trabajar con el grid las columnas todo todas estas historias las 00:14:35
tenemos todas aquí vale vamos a seguir entonces bueno ya más o menos si tiene forma de tarjeta 00:14:41
vale y entonces podemos por ejemplo y decirle al texto pues en el vídeo anterior vimos que 00:14:51
to change the size of the text we could put tex 00:14:58
we are going to see it in the documentation that is for that we have text typography text text color 00:15:19
ok then it is text the white slate ok then here it is not the color it is the test the size where it 00:15:29
is a white font site ok and in the font site we say the text xs sm text base then we are going to put it 00:15:39
here, for example, because text sm for example, it is worth that it has been noticed a lot 00:15:49
here we would have with more xs x is that it would be the smallest to see if it shows if it shows 00:16:09
ok if I put the axis here if it is noticeable we are going to put the one or we leave the one that gives us this 00:16:24
own ok we can leave the base or if not the xs we are going to leave the base and that's it and then if 00:16:39
ever because as always we can modify the base ok well what else can we do put 00:16:47
that image that I did not know that I knew how to teach at the beginning well before that 00:16:55
here you see that the text is sticking a lot to the edge of the left, it is worth if I wrote 00:17:04
more, it would also stick to the right, it is worth there is not much space between the top and the bottom 00:17:15
well there are two types of margins one is the margin which is the margin that will be between the 00:17:21
different containers that is, it is out here this margin that would move around here is 00:17:28
valid and another is an internal margin that is called the padding and if we come here 00:17:32
you will also have the option of the margin and the padding around here, let's see if I can find it 00:17:39
let's see if I see it here is the padding and the margin ok then here we have different 00:17:54
options to play with the pad and not the margin if you look at the padding it always starts 00:18:11
by p ok it gives you here the sizes of that padding to the right padding up ok this is zero but 00:18:18
if you go down because you have many more sizes here of course it is worth and the margin because it starts 00:18:29
by m m in x in and it is worth m r which is the right or the button or it is worth you have everything as always here 00:18:35
well put then we are going to put an interior margin a padding to the right and to the left when I 00:18:46
I want to put a margin on the right and on the left that is using the px ok then we are going to put 00:18:56
px for example at 4 ok and it has already put me this that text is worth in 4 and I am also going to say that 00:19:04
the upper left margin is sorry above and below it is paid to 2 ok then this is already 00:19:15
is putting it like this, it is taking shape, we are going to put it so long and so we see it we see it better 00:19:25
ok I have put it in pxp ok then I am already having this one is already taking its shape ok ok what else are we going to 00:19:33
do we are going to put an image here then the image within src I have put an image 00:19:43
which is logo sign point jpg which is the logo of the institute is worth then here what I put is the img 00:19:51
the img class is worth the same as I already have miles and here so that the error is not giving us I am going to put this is 00:20:02
worth then that I can tell the image because for example we can tell it that 00:20:12
this one that has rounded corners that more I can tell you, for example, that the width 00:20:18
is all the width of the image, that is, that it occupies the entire width of the container, what else can we 00:20:25
tell it to have a shadow, for example, then we put the shadow lg this type of things 00:20:34
vale esto en cuanto a las clases en cuanto al cargarle la imagen le vamos a poner pues src 00:20:41
porque la tenemos dentro de la carpeta src y el nombre logo firma punto jpg y entonces ya 00:20:50
I already have this image here the box out I go to the box out due to the issue of the bootstrap, which is another 00:21:03
framework then there if there is boxing and in the css there is boxing then I 00:21:50
here I think the same thing is going to happen to me 00:21:56
now you have it all there 00:22:05
we are going to put 00:22:11
2 xl ok and even if you can't see the umbrella is there 00:22:15
ok what else what else can we do we are going to put 00:22:23
text and it is worth another container that is going to be text 00:22:33
and we are going to put more classes ok but they are already classes 00:22:41
that well, they are a bit the ones of all the ones that are used the most, then we have for example the font 00:22:46
we want it to be in black, then we already saw that it was with font ball we want the text to be xl 00:22:55
to make it bigger we want the margin for example lower is 2 this is the 00:23:08
margin of the container and if instead of we are going to leave this and so now a test and here I am going to put 00:23:21
and it is 00:23:37
okay okay then here instead of the 5 we are going to say that it is 4 and so it gives me a little 00:23:38
more of this size instead of the text being xl we are going to put it a little smaller 00:23:58
that it is the axis, it is still very large, well something like that, for example, it is worth remembering that we have this 00:24:06
set to 400% that if I put this at 100% it will be modified that also tells me I am going to 00:24:35
leaving it already so we are seeing it well that is also telling me that if it makes sense 00:24:44
that I put the 2 xl here, this comma is not necessary to put it there, it is worth doing the table in this way, 00:24:51
vale en vez de mv si le ponemos m 00:25:01
vamos a ver el margen hemos dicho que es 00:25:11
botón right top es mt mt 2 vamos a ir viendo esto cómo va quedando vale le dejo un poco más de 00:25:22
margin up there mp3 ok I'm leaving that margin and yes I can take it now and put the mp here 00:25:32
because to 3 also ok and I keep doing my card ok then I'm going to put it now because for 00:25:42
example a paragraph we can put a paragraph ok that says something like 00:25:53
Centro situado en la calle Villablanca, Madrid. 00:26:02
Ok, and here I have the class, and we are going to put classes in the text, 00:26:15
because we can tell it that the text is gray, for example. 00:26:21
We are going to put it in that gray color, we are going to tell it, for example, the family, we can tell it to be this one or whatever you want, we are going to put the size of the text, 00:26:32
then we are going to tell it because the text is equal to xl and so it is putting it to me in this way, 00:26:54
okay, well, for example, we are going to put the labels of this, for example, imagine that it is 00:27:05
something from a chat, okay, then we can and tell him well, well, within what is this deep 00:27:14
that contains these bases, let's see if it leaves me if I put it here I put the tip and here I am going to put 00:27:22
this I think this cannot be here but hey we are going to see it right now we are going to put 00:27:34
we are going to put that as it is this degree superior degree superior ok I see that when I take it out of the 00:27:52
div I have already put it out here this is not what I want then this div I am going to take control x 00:28:03
we are going to put it here control v ok I have it here ok I want it to have this 00:28:09
an appearance of labels, so first I'm going to give it here so that it leaves me a margin that 00:28:17
puts a margin between this container of this text, that is, the label, the paragraph and this one 00:28:25
of the spam, because it puts me a margin of three, for example, margin 00:28:34
we are going to put it here I could put a higher margin below but it does not matter we are going to put it 00:28:43
like this it is worth then it is worth what I want to do now with this I want to put a background color 00:28:55
for example it is worth then in the spam we are going to place this text well there you are ok in the 00:29:13
in the span, in the class, we are going to pass it, for example, there is a class that is inline, 00:29:23
this is the block, this is what it does, we are going to see it and so we are also seeing it in the documentation, 00:29:38
then I look here in line as it is block 00:29:50
ok and it tells me to use the line and the blog and the blog control tools for the flow of the text and 00:30:01
elements ok well how it is going to go ok it is going to put me this because that is when I want to work with 00:30:07
it because I underline it that now is the case because I want it in gray ok then we are going to put 00:30:14
we are going to play with the inline blog or the ones that you want to use that of the ones we have here, 00:30:21
okay, so I have the inline blog, it is valid, then this is what we are going to put it if you do not know that you can 00:30:30
do the translations, it is worth it and then it is a bit good for what I tell you, it is worth the like, the block, 00:30:41
background of the text is a bit of the workflow with the text ok ok I'm going to put this one 00:30:48
I'm going to put it too let's go to the page again we're also going to put the class for example 00:30:55
because of the old man ok what I want is that it only puts me with the inline blog is that I only 00:31:04
work on this text that I have passed between where I open the span and I close it ok and I want you to 00:31:11
put a background of type because this is gray and we are going to put it at 200 to see 00:31:17
and it puts it to us in this way we are going to put here so that it seems more this theme of 00:31:32
the labels, okay, what else do I want? Well, man, the rounder, we are going to put the full on it, 00:31:38
I'm going to put it like this, okay, well, 00:31:53
we are going to put a px and a pi, px we are going to put the 3, a pi we are going to put the 2, okay, 00:32:00
remember that the px are the paddings are the internal margins, it is worth more things that we can 00:32:09
pass the size of the text, what happens is that this is his, it would be to control it with, I will tell you 00:32:20
the breaking points that we saw in the previous point, it is worth that it is important 00:32:31
so that your front is responsive, I'm going to leave it like this, here I could 00:32:36
play around too, I could put more classes, for example, to put something 00:32:44
we could take and say here the px is going to be equal to 6 00:32:51
for example the pay will be equal to 4 so that it is not stuck here or to the lower part of the 00:32:59
card or to the margins of right to left, it gives it another feeling if we take this now 00:33:12
and I duplicate it and I put three labels on it, then I put a medium degree here, for 00:33:20
example, and here we put that, okay? Well, well, well, we would have here, okay? All these 00:33:31
options, we can put the text, which is smaller, I'm not going to get it, there it goes, I'm wrong, this is 00:33:51
xl I had it on, it seems to me, yes, and the text, well, we can put it, I haven't touched it here, 00:34:10
I can put it right here, we tell it to be SM, I can tell it that the margin that is on the right, so that this is not stuck, then I can put an MR here 00:34:18
and we are going to say it to 2 00:34:45
and here the same, mr 00:34:50
equal to 2, for example 00:34:53
if we put more labels 00:34:56
we could do it this way 00:34:58
now, of course, I have also put the margin 00:35:01
so instead of saying that the margin is going to be everywhere 00:35:04
to 2 00:35:08
and so I am creating 00:35:10
that card is worth, then you see that in the end it is to put the necessary classes to work on and get what we want, 00:35:13
then what else can we do? Well, going back to this grid, I only told you, well, I define the grid, I tell you that I am going to work in columns and in rows, 00:35:28
we can tell him, okay, I have put four columns on it, if I, for example, this one, this one, I tell him 00:35:40
gray, we are going to see that this has not been written well, let's go to the grid 00:35:50
well, now I don't see it, it's going to be, well, it would be this, it's worth the beginning or end of the 00:36:00
grid column, then you see that it says col span, so if, for example, I want this to start or 00:36:35
to move it to the second column I am going to put it back in the original, it is worth seeing the 00:36:42
critical to be in then here we are going to put it because that is the col col the span not the start 00:36:51
is worth in this case what I want is for it to start in the column for example to be 2 00:37:06
look at how this is already moving it if I put it in column 3 00:37:12
because it will move it and you can move it that way by columns or by rows, 00:37:21
then the way to work with the grid is very very comfortable, we could also take 00:37:29
expand, for example, that this occupies me, let's see how it would be, okay, we have the 00:37:35
col spam, it is worth the col spam because it will expand two columns, then if I also put it here with 00:37:49
spam two columns is worth because this all expands two columns is worth then they are things that 00:37:58
also with the breaking points they let you do very very cool things very powerful ok then 00:38:09
if I leave you now because not to make this eternal video and well you already see how it works more or 00:38:17
less what the different classes are, do not stop working with the documentation, I will not get tired of 00:38:23
saying it is worth it because then they are also making changes in busters, for example, because they changed 00:38:30
when you talk about the upper part, it is worth the but of the button of the bottom of the bottom 00:38:39
inferior because they started to call it how it is or in all those things, well, you have to see 00:38:46
why the only way you are up to date is to be working with the documentation, okay, and 00:38:54
if it makes me the round 00:39:10
we are going to do it the same way so that it follows the same way this is already being 00:39:12
playing validating the form but the shadow well I would say that it is not that it is costing me a lot 00:39:29
we are going to put it here, we are going to put the same one, it is that it is not noticeable, it is that the colors I have not taken them very well, but okay, well, well, well, this is all here, now I would need a little more space 00:39:44
of margin that would be here is the button, not the button, not this one, I'm going to leave it at 3 and the one I'm going to 00:40:09
modify is the margin, which is, let's see where I had them, the margin, the margin, 00:40:21
the top, is mi, well in the mi, it gets, mt, 00:40:44
and we are going to put the 6 here, okay, and so I give it space between the shadow and where I am 00:41:12
putting everything, okay, well, that's all, I don't roll anymore, this is the way to make a 00:41:33
card, okay, always taking into account that you can take you can erase all this 00:41:40
it is worth a little what I have said before I can come to 00:41:46
and we are going to take this instead of this I am going to take this one or there were more examples for example this one 00:41:58
we are going to take this same 2 we are going to copy all this to the one we are going to copy with 00:42:07
and I'm going to paste it here, ctrl v, okay, and we're looking at this, okay, he's done this to me, he doesn't find the image, but I already have this, that card, you see that I would already have it made, the image, I come to the img label, which is here, okay, and instead of putting the girl, we're going to put the image that I do have in src, 00:42:28
src which is the logo sign point jpc ok then I would have it this way and I can 00:42:57
customize it ok but this is a bit what I also like about the tailwind that if you do not know 00:43:10
the css well you can do it in the end you can always look for documentation there and you can 00:43:17
ir haciéndolo no pero si conocéis las css y conocéis lo que son las clases y empecéis a 00:43:23
modificar las clases empezamos a configurar el time with conflict que éste no lo hemos tocado 00:43:30
y lo tocaré ahora para hacer temas o vale bueno pues se pueden hacer muchas cosillas que son muy 00:43:37
muy chulas entonces para todo el tema del desarrollo de interfaces pues podéis hacer 00:43:43
things that later I hope to see in the part of the defense of your end-of-cycle project 00:43:49
in the part of the customer a greeting to all guys see you later 00:43:58
Idioma/s:
es
Idioma/s subtítulos:
en
Autor/es:
Mario S.
Subido por:
Mario S.
Licencia:
Dominio público
Visualizaciones:
49
Fecha:
26 de julio de 2024 - 19:22
Visibilidad:
Público
Centro:
IES VILLABLANCA
Duración:
00′ 12″
Relación de aspecto:
1.78:1
Resolución:
1920x1080 píxeles
Tamaño:
120.58 MBytes

Del mismo autor…

Ver más del mismo autor

EducaMadrid, Plataforma Educativa de la Comunidad de Madrid

Plataforma Educativa EducaMadrid