 Hola, bienvenidos todos ao Track 1, habéis venido a la ponencia, a la charla que va a dar Mauricio Gelves. Los que sois de la comunidad, le conocéis todos, todo el mundo le admiramos un montón porque es un crack en todo, ahora os lo demostrará, e na, los que sois nuevos vais alucinar porque es una pasada, es una maravilla ver sus charlas, porque as aces redondas, las cierras, solen ser historias espectaculares, normalmente lo enlazan, no se lo que va a hacer hoy, pero es un gustazo verle, donde espero que le aprovechéis, que aprendéis mucho e que le hagáis muchas preguntas, e na, muchas gracias a todos por estar aquí e esperemos que os guste mucho. Una presentación que no te pone presión para comenzar la charla, tranquilo aquí a charlar. Bueno, muchas gracias por estar acá en la charla, vamos saber un pouco, en la audiencia quiero saber que hay gente que trabaja con Figma, sketching, design, illustrator photoshop. Todavía hay gente que trabaja con eso, mo bien, para hacer páginas web creo que no, pero bueno, ni importa. Bien, muchos diseñadores, diseñadores, tienen todos mis respetos absolutos, porque están ahí en el medio, pasándose horas buscando paletas de color e la tipografía, no el diseño aquí para que el usuario venga por este lado, para que después el cliente le estire todo por la borda, por un lado, o por el outro lado, que es quando ya le presentan ese fichero, se lo mandan por la nube, al frontender, e luego el frontender tiene que darle vida a ese fichero estático que ustedes les pasaron. E esa forma de darle vida a ese Figma, a ese indesign, es a través de la materia prima de la cual se nutre internet. Son tres, HTML, CCS de lo que vamos hablar hoy, y JavaScript, que tal vez es el que los desarrolladores estátamos a desquivar sempre ao máximo porque es el má complexo. Así que, esta charla es, vamos a decir, inicial, se hay gente que ya tiene mucha experiencia con CCS, con frontender, bueno, por aí no va a descubrir nada nuevo, aunque por aí alguna pildorita se lleve. Por que la quiero, por que quiero hablar de algo inicial? Primero, porque me gustaría ver en las WarCamps, en esta e en todas las que vienen, que introduzcamos charlas iniciales. Non podemos dar por hecho que toda la persona que están ahí adelante ya son todos desarrolladores profesionales. Entonces, hay que tener un poco de un equilibrio. E esta va a ser una charla inicial de CCS, pero puntualmente, quiero mostrar quale son los pilares, quale son de todo o que es CCS, que es gigante e, a esta vez, un pouco abrumador, quale son esos pilares que le van a facilitar a los frontenders a llegar a ese franc, que tenga vida e que sea lo má parecido en lo posible al cien por cien a lo que el diseñador nos presentó. Solamente tengo dos diapositivas. En nombre de la charla, e este que es la empresa onde yo trabajo, HumanMade, mi nombre es Mauricio, como me presento bien Patricia, soy licenciado en informática, trabajo desde hace muchos años en forma frilas e estoy a punto de cumplir un año en HumanMade. Grácia a esta empresa, le he vuelto a perder el miedo al trabajar de lunes a viernes. Están muy bien esta empresa e o máis importante, están buscando agente. Así que se hay frontenders, backenders o gente de servidores apliquen porque es una empresa realmente hecha por e para los humanos. HumanMade. Ya está, son estas dos diapositivas así que se agora quieren ver sangre código en vivo, quieren ver código en vivo? Están todo deseando ver como sufro con los errores. Bueno, vamos hablar de las primeras de las capacidades que tiene CCS. CCS sigla Cascade Style Sheet plantilla encascada de estilos y una de las particularidades o atributos que tiene este lenguaje es que tiene herencia inheritance. Herencia, no hay que romperse mucho la cabeza. Quando lamentablemente se nos va un familiar cercano nosotros tomamos todas esas propiedades que tenia esta persona. El informática pasa lo mismo, en CCS pasa lo mismo aunque no tenemos que esperar ese momento trágico. Los padres dan a sus hijos varias propiedades, no todas obviamente, no todas las propiedades de CCS porque si no CCS seria un caos absoluto tener que decir este hijo esta propiedad no la quiero, esta propiedad no la quiero pero aquella que se puede anir hacia abajo CCS lo implementa en forma directa. Son muchas las demo que tengo que presentar es la primera vez que creo que tengo chuleta en una presentación así que espero no olvidarme ninguno e que el código se vea bien e que si no entenden algo me pueden levantar la mano e preguntarme y por que aí busieses esa clase y por que aí esa propiedad? Vamos a hacerlo id y vuelta, sin problemas. Bueno, vamos a comenzar con código esta página por si no la conocen es Codepen es un editor de HTML, CCS e Javascript que renderiza automáticamente e vemos en la derecha el resultado final tenemos un HTML un encabezado que es que perdona este HTML va al final de todo ya comienza con errores tenemos un una cabecera HTML de encabezado y el body que es donde va todo el contenido puntualmente para Codepen non es necesario escribir HTML el head y el body lo pongo solamente a modo de ejemplo para saber dónde estamos ubicados tenemos una cabecera con inheritance e el main que es que tiene el resto del contenido tenemos un dos deeps con un container que le da ese pequeno padding e águnos elementos, H2, párrafos nada muy complejo que es lo que se suele hacer con inheritance en los grandes proyectos bueno, vamos a darle en un principio éxos son todos estilos que ya tengo para dar un pouco de diseño al demo podremos comenzar aquí con la etiqueta HTML y body preferiblemente no pongamos propiedades en el HTML se lo vamos a aplicar vamos a aplicarlo en el body todo lo que se aplique en el body a este padre que es el padre de absolutamente todos sus hijos es padre del header, es padre del main es padre del deep del H2 todo lo que se aplique aquí va a ser heredado ase a sus hijos vamos a hacer un ejemplo que el body tiene un color pink que su texto, su contenido va a ser de color rosa se va aplicar a absolutamente todos sus hijos esto é o má genérico e é o lugar ideal para poner los colores para poner la tipografía aquí podremos cambiar también foam family aria el serif quero que esto non se está aplicando porque tengo outro estilo más arriba sí, aí cambió Podí es ideal para definir un color, vamos a ponerlo nuevamente en negro, pongo black para que se entienda, pero normalmente utilizamos valores hexadeximales e também podriamos aplicar un font size, que aquí podriamos decir, bueno, el famoso 16 píxeles o sus correlativos para luego poder utilizar las unidades de EM, RM e demás en el resto de la web. Se yo aquí también cambio el valor de la tipografía a 20, automáticamente todos sus hijos van a tener un tamaño de fuente de 20 píxeles. Ahora bien, la pregunta que es bien a continuación es, y como hacemos para que uno de nuestros hijos rompa esta regla? Bueno, básicamente en CSS la seleccionamos e aplicamos ese valor. A ver, tenemos un title ahí abajo, así que clase title, este en particular, va a tener 24 píxeles, porque es un título, vamos a poner un más grande porque está más pequeño. Ahí vamos rompiendo lo que es la herencia de nuestro padre. La excepción que tenemos con respecto a la herencia de un padre, de un atributo, está por ejemplo en los forms, en los forms este caso no se aplicaría, pero bueno, es algo excepcional que lo podemos solucionar de outra manera. Otro ejemplo que puedo mostrarle con respecto a la herencia es, si tomamos una de estas cajitas de contenedor que tiene todo el contenido, podemos decir, container, vamos a ponerle container 1, y acá decimos que el container 1 va a tener un color rojo. De esa manera, el body está diciendo que todos sus hijos sean negros, pero tiene un hijo a su vez que es el container 1, que dice no, no, pero todos mis hijos van a tener rojo, e se quiero cambiar el color de un hijo, pues ya tendría que ir específicamente hacia ese párrafo, que lo podriamos seleccionar obviamente, e aí cambia. Por que estoy mostrando todo esto? Porque tenemos que tener cuidado e saber dónde definimos en un escala muy general estos valores para que no tengamos que estar yendo de hijo en hijo no. Este párrafo es rojo, este párrafo es verde, en ejemplos. Veo muchos sitios web donde van repitiendo tamaños de fuente o tipografía, e esto hace que a página web sea muy difícil de mantener e ni hablar de cambiar. Así que quanto máis arriba, maior sea el padre o el abuelo, o máis general sea esta propedad, mejor. Otra cosa que deberíamos evitar, es por ejemplo, poner aquí una clase que se llame color violeta, e yo digo acá color purple, y ahora aplico esta clase al segundo contenedor color violeta. Vemos que efectivamente se cambia el segundo párrafo, pero por que digo evitar los nombres, que esto también vamos a hablar en la parte de los nombramientos, porque el día de mañana, la página web cambia el diseño, nos manda un diseño nuevo en el que todo el texto, vamos a ponerle pink de vuelta, e ya ese nombre de esa clase se nos queda raro. Tenemos que hacerlo de una forma fácil, e que cambiando un solo atributo, se modifique. Cómo podemos hacerlo? O lugar del color violeta, podemos decir que sea color accent, un color acentuado, e ya me da igual el valor que tenga esa propiedad. Esto lo aplicamos a niveles mayores, de nostros padres o abuelos, e aí que vaya para abajo. Xuleta número 1, fuera, herencia, importantísimo, aburrido, largo, pero súper importante para no tener que ir todos los hijos declarando una e outra vez distintas propiedades. Segundo valor súper importante, propiedad importante CCS cascada, que de hecho es una de las letras de CCS, cascade style sheet, ¿si? Cascada, ¿qué significa cascada? Bueno, allá cuando salió CCS, foi una forma de darle colorines a la página web. Entonces, los navegadores tenían que, de alguna manera, leer este fichero nuevo, este código nuevo, para darle estilo a ese HTML antiguo de los 90 de los primeros internet. De alguna manera, tiene que leerlo e aplicar a sus elementos los colores. Entonces, cascada es un atributo que dice que el navegador va a empezar a leer desde arriba aplicar estilo hasta abajo, pero todo lo que esté abajo, si estamos duplicando o seleccionando algo igual, va a tener má ponderancia lo que esté por debajo. Vamos a ver un ejemplo. A ver, ejemplo. Tenemos aquí los contenedores, es decir, que los contenedores, container, ahora van a tener un background color gris. Se ve bien el código, no? Bueno, accesibilidad cero en esta demo, en este año en las que vienes. Vamos a suponer que aquí tenemos un montón de otro código CCS. Un montón de otro código, me falta el acento CCS. Perfecto. E por algún motivo, aquí volvemos a poner color coral. Ahí estamos viendo se tenemos dos background color pero se está aplicando o último de los casos. Esto es dentro de una misma clase de un mismo selector, pero inclusive poderia pasar de que no sé, acá trabajamos, hacemos para un P, acá trabajamos para un D, como se estilo a las imágenes. E por algún motivo, a ver, background gray, vamos a poner acá color pink. Acá decimos, h title color green. Perfecto. Nosotros estamos acá trabajando en esta parte del código e queremos ponerle al título, perdona, todo el contenedor que sea de color rosa, sin embargo vemos que el título es verde nos sabemos por qué. Le decimos, no, no, quiero que sea, a ver, vamos a probar con outro brown e vemos que sigue cambiando todo menos el título. Básicamente es porque tenemos un poco más debajo del mismo CCS, outro valor que está afectando a ese valor. Solución, ahora veo, le voy a mostrar como podemos encontrar este problema. Si lo ponemos por debajo, non me está funcionando porque esto es más específico. Si lo ponemos aquí container. Ahí lo tenemos, sí? Simplemente por estar se lo volvamos a poner arriba volveríamos a tener el problema. Por qué no? É aquí cuando usted empiezan a divertirse e ya a sufrir. container, color brown tenemos un container abajo color green. Vale, está aplicando todo lo de aquí abajo. Perfecto. Está bien, está bien, está bien el ejemplo. Yo estoy trabajando acá e digo, pero si le estoy poniendo color gris ¿por qué no se aplica? Unha forma fácil le dáse cuenta de estos problemas quando estamos enfrascados aí en ese código e no vemos el error, es decir, al inspector de elemento. Si? Lo podemos hacer. Non voy a utilizar el short cut. Clique secundario, Inspeccionar elemento. No posicionamos en la clase o en el selector en este caso es container que está aquí. Y vemos que tenemos el color verde, está muy pequeñito vamos a subir un poco. Ahí está. Está aplicando en primer lugar el verde e abajo tenemos lo mismo, pero el brown está tachado. Lo ven, no? O sea, el inspector de elemento nos dá indicio de dónde puede estar el error. Tengo aí uno que me está fallando. Entonces automáticamente vamos a dónde se está poniendo el brown que es aquí o green lo corregimos e ahora sí ya se aplica el brown, sí? Con el inspector de elemento podemos ver rápidamente cuál es la propiedad que se está aplicando la cascada tal como lo lee los navegadores. Hay una pequeña excepción que la vamos a ver más adelante inclusive con ejemplos. Importantísimo, punto número 3 el box model el modelo de boxeimo, herencia, cascada y ahora vamos a ver el box model. Tenemos que ver las páginas de web, nos tenemos que abstraer un pouco sobre todo cuando los diseñadores nos dan uno de estos ficheros e empezar a verlo como una cajita de legos. Como una caja de lego. Pero es todo un lego gigante pero ese lego lo dividimos entre cabecera, el body y el footer. Bien, ya tenemos tres legos pero podemos agarrar el header, el encabezado e a su vez en dividirlo en un montón de otros legos. Esos legos son las cajitas las propias cajitas que implementa CSS o como trata cada uno de esos elementos. E quais son las propiedades que tienen esas cajitas? Tiene propiamente su contenido dentro de su contenido que puede dar un espacio o un relleno o el padding. Fuera desse relleno podemos asignarle un borde de todo tipo e luego de asignarle ese borde podemos decir que tengo un margen con respecto a las otras cajas. Acá tengo un pequeno ejemplo no estamos viendo todas las capas que contiene esta caja en particular pero nuevamente si vamos a inspeccionarlo e le voy a mostrar lo bueno que está esto nos posicionamos sobre el box model y ya vemos o que se vea bien o azul seria el contenido o siguiente color que no se ve muy bien que es un verde seria el relleno, el padding o siguiente naranja fuerte es el margen e o último es la ubicación que tiene esta caja en particular se no lo quieren ver de esa manera de toda forma nos posicionamos sobre esa clase o ese elemento e nos vamos abaixo de todo del inspector hay veces que este scroll puede ser quilométrico se llegamos abaixo de todo tenemos lo mismo ese elemento en particular tiene este model box el contenido que son unos 500 píxeles el padding, el relleno el borde e el margen entonces aí podemos estar viendo fácilmente donde pode estar nuestro problema de porque má sancho menos sancho de porque no estamos dándole suficiente relleno a ver se tenia algún ejemplo para esto vamos a cambiar xifres, cierro el inspector aqui tenemos el container box model que esta aqui automáticamente aquí si le decimos 4 se modificó ahi va, va un poco lento por aí va vemos que el tamaño del contenido sigue siendo el mismo pero el relleno se va expandiendo, lo mismo podemos decir para el borde en vez de 20 le decimos un 30 tambien podriamos cambiarle el color si quisiéramos o el margen en este caso el único que vamos a ver es que esta cajita se aleja del header, si ponemos ahí por ejemplo un 5 un 5 o un 10 lo que esta haciendo es agregar má margen en su zona superior lo mismo queremos verificarlo se eso esta bien inspeccionamos vamos a ese valor en particular y vemos que tiene má zona naranja en la parte superior podriamos bajarlo un poco solo monitor forma de podere inspeccionando el box model importantísimo este valor este valor que vaya expandiéndose todo menos el contenido non viene por defecto quando empezamos a hacer una página web hay que especificarlo al comienso de nuestro ccs para ello tenemos que hacerlo aqui vamos a decir todos los elementos con el asterisco solamente los asterisco sino también asterisco before que son los pseudo elementos e after, ahí se lo dejo porque esto también da para una charla completa vamos a decir que todos los elementos de nuestra página web va a tener un box sizing de border box así es como funciona verdaderamente se ahora yo le digo por ejemplo al box model que tiene en vez de 500 tiene 800 píxeles de ancho lo que está haciendo está tomando el contenido el relleno el borde y el margen sumándolo todo para que esa caja sea 800 píxeles de ancho super fácil no tenemos que hacer ningún cálculo en la forma como trabajamos antes por favor no utilicen esta propiedad porque sí que es una locura era el box content a ver si me permite el cursor el box content lo que está diciendo es los 800 píxeles dáxelo al contenido pero yo todo lo que sea margen, padding, borde e eso non me encargo actúo el cálculo que quieras con las cajitas que estén al lado ya lo tienes que calcular tú por eso nos encarregamos de ponerle el border box que sea la sumatoria total en este caso de los píxeles que queramos e solucionado vamos bien están todos vivos todavía genial box model, importantísima xuleta e esta me encanta porque la palabra es horrible e sobre todo decirla en español a español en inglés es specificity en inglés argentino especificidad es un trabalengua terrible les dije que los navegadores leen por cascada van arriba e implementan todo hasta lo último en el último lugar con el mismo selector obviamente es el que aplica pero puede haber un excepción podemos decir no no uno que está acá arriba tiene má importancia que el que está aquí abajo seria romper un poco la cascada e es la especificidad como trabaja la especificidad vamos a dar un poquito de espacio a esto porque tiene sentido que lo veamos así bueno, los navegadores van a leer todo ese ss van a entender todos los selectores que hay e después va a ejecutar una sumatoria de elementos para saber quá le aplica e ya después se aplica la cascada pero primero va a aplicar esto como funciona? un selector de elemento html como el primer ejemplo vemos un img todas las imágenes que estén en este html bueno, ese tiene un valor de 0001 se ve un selector del tipo clase es 0010 un identificador es 00000 o xe el estilo está aplicado directamente sobre el html 10000 que hace con estos valores en navegador? bueno, tiene mucho má peso el que está a la izquierda e menor peso el que está a la derecha esto es importante porque a veces nos quedamos enfrascados en un código porque no se aplica este padding porque no se aplica este margen es probable porque en otro lugar de ss inclusive que hace un selector que tenga má peso con el que estu está trabajando acá tengo unos ejemplos buenísimos se queren aprender puntualmente sobre este tema les dejo una charla mía que di en la work on dirun en donde trato en profundidad este tema sobre todo aprenderle a especificidad lo que va a ayudarle es a que no pongan exclamación importante en todos lados en esta charla lo dejo bien claro ahí echenle un ojo me voy a mostrar un par de ejemplos que di en esta charla bueno, máis claro no puede ser o máis débil es el trooper hasta llegar al otro e ha sido un juego de sumatoria de elementos, de clases para ver quien ganaba a quien esto es uno de los ejemplos que puse una tontería pero bueno sirve para entender un poco máis el ejemplo nos pide aquí que dice tenemos una lista de personajes yo digo, utilizando la clase favorito para que resalte un background amarillo e el texto sea negro para resaltarlo de alguna manera fantástico, mi personaje favorito es Yoda lo voy a marcar favorito se refresca e absolutamente no pasa nada, queda igual y ahí es donde está el fronter diciendo porque no funciona que es lo que pasa con esta clase vamos a ver SS tenemos acá el favorito que estamos dicendo, invierte los colores pón el color del background que sea amarillo e el texto negro para que marcar ese personaje sea el importante pero por algún motivo no está funcionando no está funcionando porque este tiene unha especificidad de clase que es 0 0 1 0 e este de aquí arriba que machea con ese selector tiene un identificador e un elemento ya con el identificador solamente ele ganaria pero pasa que se yo aquí busco solamente personajes no estaría seleccionando bien el valor entonces tengo que buscar de alguna manera de que esta clase favorito tome el valor están viendo, no hay el choque de problemas que tenemos, no, de estilo entonces como lo podemos hacer bueno, poderíamos hacer simplemente con agregarle unha identificador acá estaríamos ganando porque seria ponerle 1 1 0 perdón, aí no va eso, eso va aquí ya está, aí funcionaria se quisieramos ser aún má especifico porque algo que nos sigue dando problema pues le podemos poner el li entonces aí tendríamos un 1 1 1 máis claro e imposible a especificidad, máis claro e imposible acuórense, cuando tengan algún problema vamos a verlo con algún ejemplo a ver, el país.com por que nos está poniendo X estilo en este título de aquí vamos a inspeccionar, aí vemos una clase que ya hablaremos sobre este tema de los nombramientos de clase, fíjese como se llama, C guión bajo T xo un frontender agarra esto e dice que es esto, C guión bajo T en fin, vemos que ese H2 está haciendo tiene un estilo, simplemente con una clase 0 0 1 0 se quisieramos poner algo con má valor vamos hacer aquí un elemento nuevo ya con ese elemento que nos crea funcionaria color pink ya funcionaria porque le estamos agregando 0 1 1 0 no me estoy equivocando es 0 0 1 1 tiene má fuerza que la anterior seguimos vivos avanzamos la charla de esta acuada en sexta en Wordpress TV Wordpress TV es como youtube de Wordpress hay charlas de todo o mundo en español, ingles e el idioma que quieran, sobre todo los temas relacionados no solamente con Wordpress frontendseo marketing wordpress.tv no está de má mencionarlo seguimos adelante no sé si me dará tiempo, como me motivamos bien fantástico, este era outro ejemplo que había puesto en especificidad e me encanta me encanta voy a quitar primeiro todo esto para que se entienda bien lo dejo en el clipboard en el porte de papeles ahí está tengo un simple párrafo un simple párrafo que dice quén será má fuerte vamos hacer una lucha de especificaciones que es má fuerte 100 clases de estilo toda junta 100 clases o un identificador de párrafo 100 clases vamos a poner las 100 clases que acabo de borrar que están ahí clases guión bajo 1 guión bajo 2, lo que sea vamos a ver el estilo para eso e vemos que la sumatoria de todas esas clases sí, tiene que estar toda, se falta una no se aplica el color rojo pero si están todas esas clases en un elemento HTML aplicamos el rojo e ahora yo pregunto el idea Darf al párrafo le levanto a mano lo que creen que se pone azul vamos a verlo vamos a verlo tenemos las 100 clases ahí en el párrafo e le vamos agregar el identificador Darf sin duda Darf veider es má fuerte esto es por la temática de la charla de Iroon que utilizaba todo este mundillo para darle un poco má desentido a menos que venga alguien e diga porque? el exclamación importa non es que esté mal el exclamación importa en existen ccs e hay veces que es porque ya tenemos muchos selectores de otros elementos e hay algo que sí o sí lo tenemos que implementar normalmente se utiliza bueno, se recuerdan en la antigua en la antigua maquetación de páginas web cuando no teníamos las posiciones que ahora vamos a ver e hacíamos todo con float left, clear both que utilizábamos para volver a que a página funcionara ese tenia que ser exclamación importante porque no podría ser sobre escrito por nada, tenia que funcionar sin tener en cuenta todo o que hubiera a su alrededor, con lo cual no está mal el exclamación importante pero tenemos que saber utilizarlo, que tiene que ser algo un elemento muy simple o un estilo muy simple de posicionamiento o de estilo de contenido pero que se tiene que aplicar sí o sí quando se agrega esa clase o cuando es invocado con alguno de sus selectores genial, non quería pasar por alto este ejemplo aquí volvemos al tema del naming outro punto importante, tal vez no es tan importante para saberlo para programar bueno, se programa en ccse vamos encerar el programar para evitar toda esta discusión el naming no es necesario para aprender a programar o maquetar con ccse básicamente este es un ejemplo de cara a que tenemos que desarrollar un proyecto que tiene que ser mantenido todos os proyectos ya se le digo que todos os sitios web entonces hagamos no primero la vida sencilla a nosotros mismos e também pensemos en el Mauricio del futuro que tiene que volver a agarrar este código e entenderlo, con lo cual e como vimos en el ejemplo del periódico que como ésto quede agravado non quero hacerle peor en publicidad evitemos todo el tipo de clase A1, A2 como tenemos aquí la charla inclusive ésa de ireun explico una metodología de ccse lo mismo es una metodología como una regla de juego que nos inventamos sobre como nombrar las cosas para que este todo má sordenado para que este en paz entonces, se vamos a trabajar con un elemento e es un párrafo inclusive, se non nos acordamos el nombre pues xamémole párrafo les puedo asegurar de que hay veces que pierdo má tiempo paso má tiempo buscando el nombre de un elemento, de un componente que haciendo el estilo en sí mismo chega a pasar éso así que non quiero saber nada con A1 e ésto é un párrafo vamos a ponerle quixote box já sabemos que é una cajita que va a hablar va a tener algo de el ejemplo que acabo de dar no é non está bien porque non va a acorde con o que quere implementar vamos a llamar de simplemente párrafo párrafo e párrafo ya simplemente con llamarle párrafo tiene un pouco má de sentido que punto A1 punto A2 luego má sa delante en ésa charla pueden ver de que si é ese párrafo a súbes tiene algún hijo podemos decirle guión bajo guión bajo imagen, entonces rápidamente por estas reglas que le digo é un párrafo pero que tiene un hijo imagen e le vamos a aplicar agunos estilos en particular distintos tipos de estilos sempre dentro de um párrafo podemos utilizar o decorador este guión guión para decir boa esta imagem no se está flotando ou está fija ou está sticky aí é, lo dicho, imaginación e a utilizar nombres en la jerga del fronten ya hay un montón de nombres que tampoco tenemos que romper na la cabeza un hero ya sabemos que é un encabezado grande pode haber un subtítulo tenemos tool tips tenemos lightbox milas pero, bueno, tenemos que empezar a trabajar ir viéndolo trabajar también codo a codo con outros profesionales e vamos a estar leyendo seu código ah, por que le llamo hero e luego te pones a investigar na internet e te das cuenta de que todos os encabezados se llaman de esa manera se aprende punto importante, no llamarle a 1, a 2 super importante también já perdí un pouco la lista de todo o que venimos hablando layouts afortunadamente con la introducción del ccs3 la estandarización quando un grupo de personas ya por fin se juntó e dijeron, tenemos que poner un pouco de orden a ésto que está sendo un caos, este navegador lo implementa de esta maneira e é este de outra quando salió el estándar de a poquito ya se foi planteando los white papers para ver como íamos a trabajar para definir estructuras antes de que esto existiera trabajamos con tablas trabajamos con floatless e éso era un lío terrible así que, hoje en día con ccs3 las dos tecnologías que tienen que aprender son grid e flex grid e flex en ccs para hacer estructura e se le tengo que decir una para aprender porque sí que son extensas de aprender, grid comienzan con grid va a ser muy simples porque en nuestra cabeza funcione como una tabla e ya luego con tiempo se ponen con flex rápidamente, no sé nos dice el diseñador o diseñador nos da el fichero e esas tres cajitas no están unas abajo de la outra sino que están en columnas no voy a mostrar como lo hacíamos antes por cuestión de tiempo pero vemos que tenemos una lista desordenada de cajas e a súbes las list items los ítem de lista es su clase caja bien, que podemos implementar vamos implementar el layout de grid nos vamos a caja e decimos display grid e automáticamente vemos que no hace nada no hace nada porque grid necesita de outros atributos también para funcionar se pusiéramos aquí flex se funcionaria pero lo dicho, de momento vamos a dejar ejemplos de grid que me gusta má e aquí lo que tenemos que decir va a tener unas plantillas de columnas de una fraxión una fraxión y una fraxión tal vez por estos motivos también grid asusta un pouco a los frontender porque tiene unidades de valores que son específicas solamente dessa propiedad de grilla no vamos a ver aquí se pueden também poner porcentajes EMS, píxeles pero que lo vemos en LFR ya nos asusta un pouco e no sabemos que es simplemente piénselo como de todo tu ancho divide-lo en una fraxión, una fraxión que es exactamente lo mesmo que decir, repite tres veces una fraxión fantástico, pero está un o muy pegado alo del otro bueno, no pasa nada, le podemos poner un pequeño gap de un ren e automáticamente nos agrega ese pequeño espacio de columnas solamente también podremos ponerlo para la fila bien, con row gap o si necesitamos el mismo valor para ambos casos, simplemente con gap punto importante, el gap lo está poniendo solamente en los dos elementos internos en las partes de afuera de la tabla, no está si vemos aquí el inspector de elemento está genial porque ya los navegadores han implementado entienden lo que es el grid de CSS a ver si puedo tirar esto un poquito máis para abajo ahí, entonces se nos vamos al UL vemos que ya cambia un poco el box model que le estaba mostrando el gap ya lo muestra como con un color violeta e aí como un pequeño delineado nos arma una tabla básicamente se aquí hubiésemos dicho que los leads estaban todos pegados sin ese gap, y hubiésemos dicho no que mis hijos tengan un margen derecho de un REM o 10 píxeles o lo que sea el último hijo también tendría ese margen lo cual no seria un tabla perfecta se nos quedaría un espacio en blanco ahí al costado, así que column gap un minuto vamos con el último caso lo dicho, si quieren aprender sobre flexbox e grid explico todos os ejemplos en una charla que di en la workham de canarias lo mismo, la buscan en workpress.tv se quieren pueden buscar a mí como ponente e aí están todos este está genial porque hago la charla con el artista Mondrian e punto importante es saber definir, no voy a ser el ejemplo porque no llego es saber diferenciar el CSS de layout e de contenido se vamos a definir un grid en ese caso para las cajitas no pongamos en esa clase propiedades de estilo no digamos de que todo o que este e adentro tiene seu contenido desde color negro o tiene un fondo de color amarillo a menos que sea el fondo propiamente de todo o padre vamos a mantener en lo posible las propiedades cada uno en sus valores hagamos un ejemplo básico ahí vemos la caja rosa que tiene su valor pink se esto lo pusiéramos aquí arriba interia obviamente absolutamente todo e seria un estilo propiamente del padre talveno foi o mejor ejemplo pero bueno sepan diferenciar los estilos de estructura de lo que son de los estilos para que el luego no sea mucho máz fácil de trabajar e poder mantener páginas web gente, eso ha sido todo le agradezco por estar acá, muchísimas gracias e no le tenga miedo a CSS, a flex e a grid porque es lo máz maravilloso que tenemos en la gente en internet para trabajar, muchas gracias hay tiempo para dos preguntas alguna valiente máu tú has estado ahí con un html e un css pero normalmente nos peleamos con warpre que tiene una jerarquía infernal de cosas cuando llega ese momento en que te llega a la tentación de meter el importan ya sí o sí porque no encuentras la forma de cambiar algo e no terminas de entender que está pasando incluso el importan ni te funciona que consejo nos das para encontrar que es lo que está pasando e onde está hay veces que pasa en una web que implementa, esto suele pasar mucho un framework tipo bootstrap o esto que mete todas las clases a veces terminamos para un simple identificador con 15 clases entonces no sabemos dónde agregar nuestro estilo porque no logramo de que se aplique o que yo suelo hacer en esos casos e a modo de excepción e pongo un comentario arriba de esto es horrible directamente voy hasta ese elemento en particular lo inspecciono con el navegador copio todo ese valor vamos a suponer que sea el de arriba que se está aplicando totalmente copio todo ese valor e le agrego un valor máis para que tenga máis peso e aí te evitas el importan porque se le pusiéramos el importan con el mismo selector e el día mañana tenemos que agregar outro cambio no va importar el importan va a tener el uno supera a la izquierda e va a tener siempre má fuerza que cualquier cosa que pongas abajo arriba da igual te encuentres con un elemento que tiene 15 clases un identificador y a todo lo pegas en el ccs bien feo te dispones en el comentario de esto no es culpa mía tava así e le pones un elemento máis un elemento, unha clase obviamente que tengas sentido con lo que estás eligiendo a veces se vuelve un poco complicado pero así lo resolvo yo te va a ayudar menos tiempo que ponerte a arreglar toda la maraña de código que hai aí dando vuelta se non hay máis preguntas os invito a todos a las fotos de familia e bueno grácia