 Muy buenas a todos, estáis en el último taller de hoy. Aquí está Ana Cirujano, una chica muy hiper conocida en la comunidad. Buena amiga mía también, es un gustazo poder presentarla hoy. Os digo Ana Cirujano es diseñadora gráfica especializada en WordPress desde hace muchísimos años. Ella está especializada en diseño editorial, sobre todo. Muchos de aquí la conoceréis porque ha dado numerosas charlas meetup, tras meetup, work on, tras work on en el 2018 especializada sus exponencias en tipografía. Y hoy nos trae algo diferente. Va a hablar de cómo modificar imágenes sin que haga falta utilizar Photoshop o programas externos simplemente con un poquito de CSS. Y bueno, remarcar que no se me olvide, Ana también va a ser ponente en Work on Europe junto a otros representantes de españoles. Va a ser Ana, nos va a representar en Europa. No sé si lo sabéis, pero es una de las work on más grandes que existen comparándola, claro, está con Estados Unidos y tal. Y bueno, y poco más, os dejo con ella. Por favor, un fuerte aplauso y disfrutar mucho. Muchas gracias Jaime. Me gustaría, bueno, primero dar las gracias a todos por estar aquí. Darles las buenas tardes y agradeceros que hayáis elegido este taller y no las charlas tan interesantes que hay en los otros tracks. Así que muchísimas gracias de verdad por estar aquí. Gracias a la organización por haber confiado en mi propuesta porque mucha gente se quedó fuera, o sea que de verdad es un privilegio estar aquí ahora y aprovecharlo. Me gustaría saber el perfil que tenéis, un poco, porque esta charla la puedo ir adaptando, ya que es un taller y no tengo 20 minutos ni tengo que darme mucha prisa. Así que me gustaría ir adaptando un poco a lo que queráis. ¿Quiénes de vosotros sois desarrolladores? ¿Puedo levantar la mano, por favor? Vale, bien, sois poquitos. Lamento comunicaros que vais a aprender más bien poco porque es una charla de iniciación para principantes pero espero que por lo menos lo paséis bien. Porque yo me lo voy a pasar bien y espero contagiar mi buen rollo y por lo menos que paséis un buen momento. Pero no es una charla para programadores porque lo que voy a enseñar DCS o de Frontend creo que es bastante básico. ¿Cuántos diseñadores hay en la sala? Basta antes, vale. Igual un poquito más que desarrolladores. Gestores de contenidos que utilizáis WordPress para publicar para vosotros es esta charla. Y bueno, gente que sé que hay marketing online. También sois gestores de contenidos, ¿no? Gestores WordPress y publicáis cosas para vosotros. Y hay gente que no ha levantado... Ah, SEOs, por ejemplo, ¿vale? ¿Has levantado la mano? Bueno, sí, por gestores de contenidos, ¿no? Claro, vale, bien. Pues sí, para vosotros. Y sobre todo para vuestros clientes, ¿vale? No me he traído el mando y tengo que estar moviendo. Ah, tenemos mando. Perdón, me estoy moviendo mucho, lo siento. Me ha presentado Jaime muy bien. Lo que le ha faltado decir es que organizo la mitad de Collado Villalba junto con Fernando Tellado y la de Torrelojones. Así que os invito a que vengáis, que hacemos una charla mensual y son muy guais. Y sigo. ¿Vale? ¿Qué es WordPress? Fijaos, que voy a empezar por ahí, ¿eh? Para tacharla, es para principiantes. Ay, muy bien, muchas gracias. A ver, sí, fenomenal. ¿Qué es WordPress y cómo funciona? WordPress nació hace 15, casi 16 años. Matt Mullenberg, que era un chaval estadounidense, hizo un fork de otro gestor de contenidos, V2cafelog, lo mejoró y lo puso a disposición de la comunidad para que cualquiera pueda ver el código y mejorarlo, ¿no? WordPress está hecho con HTML, CSS, JavaScript, PHP y MySQL. HTML y CSS son lenguajes de, no son lenguajes de programación, son lenguajes de etiquetado, de marcado. Esto es para gente de letras, no es para programadores, es para diseñadores, gente de letras. JavaScript le dice al navegador cómo tienen que comportarse los elementos de la página, esto ya sí que es para un poco más de números, aunque hay cosas sencillas que se pueden hacer. PHP es lo que hace que las webs sean dinámicas. Lo golemos un poco más. Y MySQL es el sistema de base de datos. Entonces, ¿qué es lo bueno de WordPress? Y aquí ya voy a empezar a sentarme y hacer cosillas. Bueno, me vais a permitir que utilice mi blog para el ejemplo. Es... Vamos a ver, voy a entrar al admin. Tengo admin o tengo... No mireis, que te cambio esto. Ay, no tengo internet. Pues aquí lo siento, pero tengo que conectarme. Pero no tardo nada. Voy a usar mi propia conexión, que ya tengo la contraseña y todo. Vale. A ver un segundo. Vale, tengo esto. Perfecto. Esto lo conocéis. Es el panel de administración de una web chat con WordPress. Esto lo conocemos todos. ¿Hay alguien aquí que nunca haya visto WordPress por dentro? Nadie, ¿no? Esto es la herramienta de la que llevamos hablando todo el día. Es muy guay. Usa la. Te va a gustar. Tengo muy pocas visitas. Los analytics. WordPress tiene una cosa muy guay, que es que separa perfectamente lo que es el contenido. Vale. No se ve muy bien. Se corta. Separa muy bien lo que es el contenido. Las entradas. Los medios y las páginas. Es nuestro contenido. Los comentarios también lo podemos considerar como contenido. El diseño, la apariencia con los temas y la funcionalidad. Con los plugins, la gestión de usuarios, las herramientas y los ajustes. Este orden no es casual. Es intencionado. Es de lo que vamos a hablar hoy aquí. De esta separación tan importante que se hace del contenido y del diseño. El hecho de que esto esté separado nos permite que tengamos un diseño yo tengo este diseño. Vale. Y porque tengo instalado un tema... Uy, perdón. Qué molesto esto. Tengo instalado un tema de esos gratuitos que hay en el repositorio de WordPress. Cualquiera puede tener una web igual que la mía. Bueno, la tipografía está un poco mejorada, pero el diseño es de un tema gratuito del repositorio. Y yo ahora mismo puedo irme a apariencia temas y cambiar el último tema que ha hecho WordPress. Yo activo el tema y sin perder los contenidos actualizo. Perdón. Vale. Y ha cambiado totalmente el diseño de mi web, ¿no? No tiene nada que ver con lo que había. Ahora siga viendo el mismo contenido. Están listadas todas las entradas. Una encima de otra. Pero en vez de tener el diseño de rejilla con las fotos, el título y el extracto las tengo una encima de otra. Pero, ¿esto por qué es así? Si yo le he cambiado el tema, le puedo tener un diseño diferente y el contenido es el mismo. Esto es maravilloso, ¿no? Es un gestor de contenido WordPress. Esto es así porque el contenido voy a ir subiendo de dificultad, ¿eh? Ya sé que esto es muy básico. Las entradas, esto Work on Granada fue una pasada. Hace mucho que no escribo en el blog. Nadie es perfecto. Este contenido está en la base de datos. Sin embargo, el diseño está en los archivos del tema. Por eso, lo que hago cuando cambio el tema es cambiar esos archivos. Cambio una carpeta con esos archivos por otra. Pero la base de datos sigue siendo la misma. Vais viendo que está todo separado y la importancia que tiene que lo esté, ¿no? Porque de esta manera puedo cambiar el diseño sin perder los contenidos. Si yo en el diseño perdón, en los contenidos introduzco algo que tiene que ver con el diseño, me estoy cargando esta gran posibilidad que nos da WordPress. Y esto es algo básico que cualquier persona que ha estudiado programación web lo sabe, ¿no? Que hay que separar el contenido de la apariencia. El HTML del CSS. Quiero hacer el disclaimer que ningún animal ha sido mal tratado durante la realización de esta ponencia. Voy a hacer una introducción muy básica, ¿vale? Para los de letras. ¿Vosotros cuando los gestores de contenidos, ¿vale? No lo sé, eso es muy cracks y muy técnicos. Los gestores de contenidos, puros y duros que no saben nada de código. Cuando veis esto vosotros hacéis así, ¿no? Normalmente en el inspector de elementos y sacáis esto, ¿no? Para ver un poco cómo está está la web. Lo soléis hacer, ¿no? Sí. Cuando veis esto y dices, ¡uh! Madre mía, ¿esto qué es? Matrix, ¿no? Vale, pues yo quiero que a partir de ahora digáis, ¡ah! Vale, vale. Entendáis un poco mejor cómo no vais a salir sabiendo css pero vais a saber un poco qué es eso del css qué es el html y un poco cómo funciona, ¿no? Voy a volver a poner el otro tema, ¿vale? porque luego lo voy a necesitar donde vi lo que se me olvide. Un tema hijo de Garfun, ¿vale? Normalmente, por ejemplo, no sé si puedo hacer zoom así, perfecto. Vale. Fijaos, tenemos un header no tenemos por qué saber lo qué es solo para que entendáis un poco. Voy a hacer una pequeña aproximación, ¿vale? De no saber nada, de verlo todo, ¡uh! No entiendo nada, no veo nada, ¡ah! Intentar empezar a ver algo, ¿vale? Estudiarse en ese punto, ¿no? Con el inspector de elementos, ¿no? El navegador Chrome me ayuda a ver un poco cómo está hecha la web, ¿no? Yo selecciono aquí tengo una etiqueta que es el header y al seleccionar me selecciona, el navegador me ayuda a ver cómo está hecha la web y además me selecciona en azul el contenido de la caja y en verde el padding, ¿no? Que es una especie de margen, un relleno. ¿Vale? Me lo selecciona visualmente y luego aquí me dice lo que el desarrollador frontend ha escrito, ¿no? El estilo que le ha dado un padding de un em no voy a entrar en los ems no tranquilos pero es una unidad de medida, ¿vale? Que es proporcional los pixels serían absolutos y los ems son relativos ¡ah! Se me ha habido de decir una cosa si alguien se quiere ir a las otras salas yo no voy a pensar que os estáis aburriendo es que os queréis ir a las otras salas, ¿vale? Que aquí venimos voluntariamente a compartir conocimiento no enfadarnos si os vais, soy yo contenta a las otras charlas, ¿vale? Y ahora volvemos aquí le decimos que tenga un em de padding, ¿vale? Entonces primero seleccionamos el elemento porque tiene una clase side header, lo vemos aquí esto es el html esto es el css tiene la clase side header, yo le digo el elemento que tiene la clase side header dale un padding de un em ¿Se entiende esto? Isa poco chungo, ¿no? has desconectado, pues voy a pasar rápido ¿Alguien que no tenía idea del html y css ha pillado algo? ¿Sí? ¿Sí? ¿Eh? Vale examen por ejemplo vamos a ver sí, porque esto es y luego ya lo vamos todo más fluido por ejemplo, aquí selecciono seleccionado este área que ya empieza con el título del post y el contenido del post, ¿no? vale, esto está en azul Google Chrome me lo selecciona en azul vale, y ahora esto es el html vale, yo tengo algo seleccionado porque se me ha puesto en azul porque lo he seleccionado, ¿vale? esto es el html, contenido y esto es el css, el estilo vale, ¿qué es seleccionado y qué propiedades tiene? ¿Este es de ahí? ¿Sí? ¿Sí? ¿Sí? ¿Has levantado la mano? todos los demás saben mucho, la única que he preguntado es si quien no tiene idea ha levantado tu la mano ¿Qué clase tiene el elemento que es seleccionado? ya sabes html ¿Y qué propiedades de css le hemos dado a ese side content ¿No tiene M? tiene varias como overflow hidden por ejemplo no tiene unidades porque simplemente todo lo que sobre esconde lo, porque en css no se lo dicen cosas que tienen unidades también se dice esto muestra lo, esto no lo muestres vale, perfecto, bien vamos bien, bien, general vale vale, pues y esto es lo que hemos visto hay un selector que es la clase y luego con css le damos un valor a una de las propiedades ¿Cómo sabemos qué propiedades le podemos dar al elemento? pues porque hay tu lo buscas en google y te sale pues oye css tricks otras páginas que te dicen todas las propiedades css que podemos darle un elemento vale, seguimos vale, ahora ya entramos un poco después de esta introducción al html css y ya entramos un poco al contenido, al core de la charla, del taller ¿Cuántos de vosotros utilizáis Photoshop o Paint o algún programa para retocar imágenes? todos general, yo voy a intentar que después de este taller no lo utilicéis tanto y haya algunas cosas para las que no lo utilicéis vale, sigo basando Photoshop Paint ¿Para qué sí hay que utilizar los programas de retoque fotográfico? pues para hacer este tipo de cosas para arreglar las fotos antiguas para hacer montajes superchulos jugando con las proporciones las perspectivas para alguien triste y viejo pues hacerle alegre menos de macrado y con los ojos más bonitos para ponerle a las de mariposa un elefante para esto sí hay que utilizar Photoshop porque aquí estamos modificando el contenido de la imagen pero otras veces simplemente estamos a lo mejor cambiando el color de una imagen por ejemplo pero no lo queremos hacer con el contenido sino que lo queremos hacer por motivos de otro tipo de diseño que después veremos cuáles entonces en ese caso no por ejemplo, para poner una imagen en blanco y negro aunque hay casos en los que sí queremos que la imagen esté en blanco y negro que sería este, por ejemplo aquí no es una chica mirando hacia abajo es una chica triste melancólica por eso las fotos en blanco y negro fueron una parte del contenido de la imagen y además siempre queremos que esté en blanco y negro porque es así la imagen es así pero hay otras vamos a ver los filtros hay otras veces otras ocasiones en las que queremos que las imágenes no estén en color estén en blanco y negro por ejemplo en este caso habréis visto un montón de veces patrocinadores y aparecen los logotipos de todos los patrocinadores y como no queremos que un logotipo destaque más que otro si hay un logotipo rojo pues va a destacar siempre por encima de un logotipo que sea amarillo por ejemplo entonces como queremos darle a todos los patrocinadores la misma importancia porque han puesto el mismo dinero pues lo que hacemos es ponerlos todo gris también no sólo con este tipo de cosas sino cuando queremos que no destaque una imagen sobre otra unificamos el color y podemos presentar esto que chilla tanto y hacia direcciones tan distintas lo ponemos en blanco y negro y así se uniformiza esto se hace con ceses y fijaos que sencillo seleccionamos la clase de la imagen y le decimos que nos ponga un filtro de escala de grises al 100% esto ya sabéis hacerlo es sencillo pero si lo hacemos con fotos ah venga lo quiero vamos a poner en la web que primero estén los logos en color y que cuando yo pase el ratón por encima se pongan en blanco y negro o al revés que estén todos en blanco y negro y cuando pase el ratón por encima se me pongan en color sólo el logotipo que yo seleccione y lo que yo he visto muchas veces lo que me he encontrado es que me dan el cliente te pasa una foto en color si esto se hace con ceses fijaos que sencillo si lo hacemos de la otra manera primero estamos cargando dos imágenes para que se cargue las imágenes tenemos que descargar dos imágenes y hacer dos peticiones al servidor con lo cual estamos ralentizando la web y además que ocurre que muchas veces hombre en este caso si son dos imágenes seguimos teniendo la imagen en color pero muchas veces le metemos un filtro azul porque la estidad corporativa es azul para que sea azul y negro por ejemplo y ya nos hemos cargado la imagen original y si el cliente dice ah no pero cuando pase el ratón por encima que se ponga en su color original o que cuando pase el ratón por encima se pase a blanco y negro es que he cogido fotosov lo he hecho con fotosov ya he machacado la imagen no tengo manera de entonces nunca podemos poner filtros de ese tipo o no debemos mejor dicho con fotosov la posibilidad de hacer cambios y los clientes piden muchos cambios hay que dejarles que los pidan ¿no? fijaos todo lo que se puede hacer con css no es sólo cambiarle pasarlo a blanco y negro es que podemos el desenfoque el brillo, el contraste, ponerle una sombra paralela esto lo habéis hecho con fotosov todos esto no se hace con fotosov cambiar el tono invertirlo, la opacidad que no se vea y que cuando pase el ratón se cambia la opacidad y se vea que incluso podemos animarlo podemos hacer que poco a poco y despacito se vaya cambiando su opacidad todas estas propiedades si lo hacemos con css las podemos animar podemos hacer que vaya de valor 0 a valor 100 y muy sencillo vamos a ver también después como se anima transiciones fijaos que sencillo el código de una transición vamos a mi blog os voy a enseñar lo que son las transiciones porque lo tengo así no se porque se me ha quedado pillado esto es windows, voy a actualizar para que me cambie la apariencia el tema lo cambié antes fijaos aquí cuando yo paso el ratón por encima cambiado la opacidad y no sé si lo apreciáis pero se pone un poco blanco pero no se pone blanco de golpe sino que hay una transición no sé si lo notáis eso para que sea todo más agradable para el usuario es algo que se suele hacer y las transiciones se hacen así es que es así de sencillo no voy a explicarla porque eso ya en casa vais a hacer ese tricks y veis el código pero que sepáis que se puede hacer degradados fijaos voy a voy a copiar este código y lo voy a pegar en la imagen que tengo de fondo en mi header en esta en esta foto mía de la workout en vez de la imagen de fondo que tengo le voy a pegar este código lo voy a copiar desde aquí porque el otro es el selector eso no hay que copiarlo porque lo tengo hasta las comillas apretando hasta el punto y coma y aquí tiene esta propiedad le decimos que a ese header le pongo una imagen de fondo es lo que ya sabemos que dice pues ahora le voy a quitar esta propiedad porque yo ahora puedo editarlo le quito esto y me pone la imagen que tiene predeterminada este tema de Garfankel que está en el repositorio de WordPress entonces yo ahora eso lo cambio por esta otra perdón que es que me copiaba aquí el punto y coma me ha copiado aquí un punto y coma no dos puntos antes y esto no me vale voy a volver a hacerlo voy a actualizar porque no me ha salido bien me lo voy a añadir abajo y luego quito este porque no me lo respeta background no, si es background image porque le estoy añadiendo la imagen pero no se que estoy copiando que no me si si, lo coge si si no se que estoy copiando background image si, le digo que a esa imagen le ponga el degradado es que me hace el degradado en la imagen de hecho esto esa funciona ah, estos dos puntos vale, no tengo que copiar ah, es que me los añade esto también es normal hay que tener mucha paciencia para ser frontend me añade aquí estos dos puntos le voy a quitar esto primero o espera, voy a ir aquí y le copio sólo esto venga pero no se si me va a dejar no se porque ya ya ya para ver el error al pegarlo le pudo un salto de línea yo por darle al intro vale, o sea que aquí si yo ahora cojo sólo hasta aquí ah, esto ah, el salto de línea vale, vale, vale o sea que tiene que haber más saltos de línea claro, por eso tengo el punto y coma este los dos puntos estos pero esto vale, vale vale, vale voy a pegarlo en un este claro, claro, muy bien muy bien chicos somos un equipo vale, perfecto aquí estamos vale, vale, vale el arte de copiar y pegar voy a actualizar otra vez por si acaso es que propiedad que no incorrecta pero está correcto url si, pero este espacio no pasa nada por ponerlo background image cierra aparentesis y luego la imagen url pero voy a pegar esto voy a pegar la propiedad esta en donde está la imagen voy a pegarlo aquí entonces es esto y luego una coma realmente es así aquí sería esto, coma, ahí está lo habéis visto, no? lo conseguí vale joder pero si vais a tocar el css que sepáis que esto es así una coma pero a mí es que me apasiona me encanta habéis visto que guay lo que se puede hacer, que está hecho en la imagen es muy guay ¿no? ¿tú como harías esto con photoshop? ya no y si en vez de poner el azul arriba y el moro abajo lineal, me lo hace radial y me pones el no amarillo y diría, espérate que photoshop no tengo la imagen original de 10 al cliente no se puede no se puede esto es contra el no se puede claro que se puede, cambias los valores del código copias, pega si se puede vale, seguimos ¿qué más? recortes claro, podéis decir vale, para poner filtros o para poner degradados de colores lo entiendo, pero si quiero recortar una imagen por ejemplo perdona que me ponga a mí misma pero es que no, yo que sé cuando esté el pdf rulando por ahí que se sepa que es que soy yo esto es súper habitual súper habitual de hecho, últimamente me voy a encontrar en una web es muy fácil súper común encontrarte el edad webs que tengan esto hecho con photoshop se suele utilizar para el equipo quiénes somos y pones las imágenes de la gente o para poner servicios pero las imágenes para ser un poco más original o para que vayan con la de tía corporativa lo recortamos entonces nada, abrimos fotos sobre le ponemos un fondo transparente y lo subimos como png vale y mañana en vez de ponerle un círculo le quiero poner un rombo y que hacemos entonces nada no vale necesitar la imagen original porque te falta esta información lo has recortado las has eliminado el fondo tendríamos un problema el cliente no se puede y luego además le hemos puesto un borde de este color porque es nuestro color de nuestra identidad corporativa y además se le hemos puesto con photoshop claro, y si le queremos quitar el borde o lo queremos cambiar de color que hacemos abrimos con photoshop, borramos eso ya nunca queda bien siempre se te queda un poco de color por la esquina te cargas la imagen y además el archivo de origen no lo tienes porque la web la has heredado tú porque puedes decir no, yo sí yo lo guardo en mi ordenador en el disco duro nunca puedes pensar que siempre vas a tener el disco duro las imágenes ahí almacenadas para luego total, que esto no se hace con photoshop es muy tan sencillo hacerlo con css a ver que me voy para atrás fijaos, que fácil esto es, redondeame la imagen le pones el identificador, en este caso sería todas las imágenes porque no le pongo ninguna clase, le digo todas las imágenes ponme un borde de radios de 50% esto significa redondeame las esquinas completamente hasta que sea un círculo y ya sabéis hacerlo y si mañana queréis quitarle el redondeado simplemente borráis esta clase y hasta se vuelven a hacer cuadradas que me voy para atrás vale pero puedes decir, pero es que yo no quiero redondear la imagen yo quiero recortar la imagen exactamente en un punto y además quiero que sea cuadrada quiero recortar una imagen lo que se dice recortar la imagen como yo quiera en este caso habrá casos en los que sí lo haremos con Photoshop porque nos interese pero también hay casos que lo queremos hacer con CSS por ejemplo en WordPress es muy habitual que en un post utilizamos por ejemplo esta imagen de Madrid utilizamos para la cabecera del post la parte de arriba del post utilizamos en una imagen más o menos apaisada pero luego para el listado de post para el archive utilizamos la misma imagen cuadrada con este formato pero es la misma foto entonces nosotros que hacemos subimos la imagen entera para la cabecera y ya por CSS mostramos solo la imagen en panorámica y luego recortamos en Photoshop bueno, esto no hay que hacerlo pero lo haríamos así recortamos en Photoshop una imagen cuadrada una para la imagen en miniatura del listado y otra para la cabecera hay temas que nos permiten hacer esto bueno, pues esto no se hace con Photoshop esto se hace por CSS es decir, yo subo una única imagen y en la hoja de estilos del tema le digo la imagen de cabecera es panorámica y la otra me la recortas cuadrada y si lo hicieramos directamente si le dijéramos cambiame el alto y el ancho esta imagen le cambiaremos solo el ancho para que fuera cuadrada, lo que hacemos es distorsionar la imagen entonces antiguamente antes de que se pudiera utilizar la propia CSS que os voy a enseñar ahora lo que hacíamos era poner la imagen de fondo le decíamos, ponme una imagen de fondo y adaptate al ancho del contenedor pero ahora ya se puede utilizar una propiedad muy chula, muy útil de CSS que es Object Fit aquí, algún frontender le he sorprendido lo sé la charla era muy básica pero esta propiedad no todos la conocemos y fijaos que mira, en este caso lo que estamos haciendo es que se adapte al contenedor lo de content también lo podemos hacer con el background image pero también podemos decirle cover entonces ahora no tenemos una imagen de fondo tenemos una imagen directamente en el HTML en el contenido y por CSS directamente aunque no esté de background porque las imágenes background las poníamos por CSS era de estilo pero las imágenes que van en el HTML son contenido entonces la imagen de miniatura normalmente va en el HTML no sé qué la metamos por CSS que sería un poco raro pero a partir de ahora sí podemos porque ya esta propiedad está soportada es compatible con todos los navegadores y además fijaos de aquí mirad del autobús está colocado ahí porque está centrado pero lo queremos mover veis el autobús para que veáis el autobús que es rojo que llama la atención porque yo digo ahí es que hay un autobús aquí que quiero que se muestre entonces puedo incluso mover un poco la imagen lo que hacía cuando estaba en el background oye exposition 15% y me lo mueve a la derecha un 15% vale 0% es el eje de ordenadas tenemos el eje de acisas y el eje de ordenadas 15% a la derecha y 0% porque de arriba abajo ya da el tamaño de la imagen recordad que está adaptada al contenedor vale incluso fijaos lo que se puede hacer vale vale pero si rectángulo cuadrado no no podemos hacer la forma que queramos porque ahora podemos hacer polígonos con el la propiedad clip path vamos haciendo un polígono y le decimos el porcentaje las coordenadas de donde queremos que funcionen los puntos os ha gustado esto mora mucho podemos hacer una estrella incluso podemos hacer la forma de nuestro logotipo o lo que queramos hay una herramienta el clip path maker incluso en firefox se puede también utilizar que se mueves los nodos y te dice abajo el codiguito que tienes que pegar cuidado al pegar que no se os separen como ya hemos visto y pero fijaos podéis hacer estas estas formas o como decía la forma que queráis y luego como además como CSS podemos hacer animaciones entonces esto aquí ya no me pilláis con el copiar y pegar el estavemo si no me lo ocurra mucho tampoco dice nada pero para que veáis que podemos hacer una animación súper sencilla de una manera muy fácil no tenemos que ser programadores para poder hacer esto simplemente indicarle los nodos y como queremos que vaya de un sitio a otro perdón de un sitio a otro como queremos que el nodo se mueva en la animación simplemente le decimos aquí ya no veis matrix esto ya es muy es muy fácil de leer es muy fácil bueno lo de arriba es para que la estrella estuviera centrada en el navegador es como colocar pero luego le decimos creamos una animación y le decimos como queremos que esté colocada la figura las coordenadas de la figura de posición 0 al 0% de la duración de la animación las coordenadas de como queremos que se coloquen los nodos en el 50% de la animación y en el 100% entonces ahí has visto que cambiaba tres veces de estado natural a un estado y luego a otro y así la estrella en realidad son sólo tres formas distintas y el navegador se encarga de renderizar el resto de la animación la interpolación tú lo dices simplemente los fotogramas son clave y el navegador se encarga de hacer la animación entonces le decimos que dure tres segundos y que cambie de una a otra de esa manera de la interpolación y que no pare infinito sin problema sí, sí funcionan hoy en día todos los navegadores tienen animaciones y el clippad no hay problema y creo que esto es todo si no recuerdo mal creo que esto es todo y ahora seguro que tenéis un montón de preguntas que hacer muchas gracias alguna pregunta bueno Ana, muchas gracias por la reunión te quería preguntar no hay un modo de diseño de hacer todo eso sin tener que tocar el código me refiero, todo eso que nos has enseñado de los porcentajes de cada uno de los nodos de la estrella supongo que no las puesto a mano que hay una manera de hacerlo de una manera más visual para los que nos llevamos también con el código como se hace hay una herramienta parece que no tenemos preparado clippad maker esta herramienta te permite tu puedes subir tu propia imagen aquí en si este código a mi me da igual el código quiero hacer un rombo o un trapezoide y exactamente que llegue hasta aquí y después simplemente me da este código lo copio me voy a mi es open source es gratuito es gratuito si tiene código abierto no lo sé pero es free vamos directamente es que no se por qué no me pone la url pero está en la presentación hay un enlace en la presentación y los otros ejemplos que has comentado los filtros de las fotos también voy a hacer una demo como estamos en un taller y puedo demostrarlo vamos al blog yo quiero que esta imagen tenga la forma que acabo de copiar me veo en especial de elemento tengo que averiguar qué clase tiene esta imagen en el html selecciono la imagen directamente quiero averiguar la clase lo voy a hacer de verdad no aquí en el navegador sino que de verdad se quede en feature media ya sé que es a la clase ataco ya está aplicado y ahora esto está en el navegador si tú visitas mi web no sale, esto está en el navegador eres crom en el que me lo da yo con esto ya sé que es feature media le voy a aplicar a todas las imágenes que tengan esa clase esta forma me voy a mi panel de administración me voy a apariencia personalizar esto está en todos los WordPress sea la versión que sea aunque siempre tiene que ser la última pongo punto porque es una clase no es una idea ni un selector genérico era un guión media me parece lo voy a comprobar que no quiero feature media sí, pero la clase lo tengo copiado me copia también property of those esto lo he copiado de este le doy a publicar error, tienes que arreglar antes de que lo quieres actualizar aquí me falta 280 a 280 sobra el punto y coma es lo último le doy a publicar y me lo aplica a todas las imágenes ahora visito mi blog y está en todas las imágenes que tienen esa clase hay que saber código no, te pones este vídeo como se está grabando WordPress TV te pones este vídeo y hasta ahí lo haces paso por paso no pasa nada, hay que saber código copias, pegas, lo de los filtros de la misma manera lo único que hay que saber puede haber complicaciones porque el CSS significa hoja de estilos en cascada que significa que todos los elementos heredan las propiedades de su padre como hacemos contenedores en el HTML siempre hay cosas que están dentro de otras y hay propiedades que se las das al padre, propiedades que se las das al hijo para que vayan heredándose las propiedades y no tener que escribir cosa por cosa es para, no te arrepites a ti mismo que dicen los programadores hay que saberse la jerarquía de las propiedades la jerarquía de CSS, de la cascada como va la cascada si yo le he dado una propiedad al padre la hereda al hijo eso tengo que conocerlo pero en principio habéis visto que si la imagen tiene una clase concreta y tu atacas a esa clase en principio va a funcionar si no funciona para eso está la comunidad WordPress vas a una meetup te lo explica esto está basado en hechos reales si es mucho rollo si es mucho jaleo te pasarán por su puestillo pero bueno te lo hace y los filtros igual mira a saber qué clase tiene la imagen lo pruebas primero en el navegador a ver cómo funciona le pones el valor que quieras te vas al personalizador y le pones tu CSS guarda y ya está y no usas Photoshop no sé si a tiempo te va a preguntilla yo creo que sí si alguien quiere es que no me oigo es una pregunta técnica más que nada cuando has hecho el tema de recortar la imagen y dejarla en un cuadrado supongo que para que definir la forma cuadrada esa altura se aplica a la imagen o al contenedor en este caso a la imagen porque la imagen no es una imagen de fondo es una imagen que está en el contenido en la HTML y en este último caso de la forma poligonal se lo ha aplicado directamente a un div creo por lo que he visto en la consola de Chrome en este caso feature media está en un div si incluso yo podría darle esta forma al contenedor y a la imagen de dentro darle otra porque esto no está de fondo está dentro de ese div pero no es un background es una imagen dentro de ese div podría poner un marco de la imagen de esta forma y luego la imagen de otra ya hay esa imaginación si si hace lo que quieras vale gracias hola por este taller lo primero mi parte me ha venido fenomenal me alebro te lo prometo bueno ya está porque yo de programación nada Photoshop lo que tú quieras y esto es que dijo madre muchas gracias si el de las fotos una pregunta que no se tendrá sentido no yo por ejemplo quiero poner marcas de agua en mis fotos porque estoy hasta aquí de que me la roben si lo puedo hacer con css si claro debes hacerlo a ver si luego se baja la imagen se pierde si estaba pensando en lo de los precios es que eso cuando pones un precio encima mucha gente y eso es uno de los ejemplos que no hay que hacer pero en tu caso si tú quieres modificar el contenido de la imagen ahí sí, usamos Photoshop es como si hicieras un montaje te las van a robar igual si yo tengo un marco de agua ya puedo decir perdona que es que me la he currado yo yo te diría que compartir a ti te interesa hacerlo con Photoshop en este caso no te interesa ni cambiar ni animar para poder modificar es contenido ya entraría entraría en el debate si te interesa poner la marca de agua a pesar de que te la van a seguir robando o no poner la marca de agua, no manchar el contenido de tu imagen es que te la van a robar igual pero lo de la marca de agua si tú compartes la imagen no sé pero que es otro para otro día si eso lo vemos pero muchas gracias alguien más otra cosa más algo que me has preguntado tú de cómo lo hago además de lo del identificador y todo esto perdón del personalizador de el personalizador y el css el código personalizado que está en el personalizador de WordPress además de eso también se puede hacer con editores visuales que hay en WordPress hay muchos plugins que son editores visuales y que te permiten hacer todas estas cosas ya contemplan esta posibilidad por ejemplo Divi es uno de ellos te permite mediante deslizadores Divi es un plugin para editor visual para no tener que utilizar código sobre todo por si te ocurre las propiedades de la cascada es que no se me cambia es que hice lo que me dijiste y no se cambia y tengo que ponerlo en importancia y me han dicho que eso no hay que hacerlo puedes utilizar editores visuales que mediante deslizadores y configuración de opciones te dan la posibilidad no machacas tu imagen y con lo cual paradigicamente no generas la dependencia de la imagen y de la herramienta que lo he pensado cuando me lo he dicho y luego se me ha habido pues no sé tenemos tiempo pero no hay más preguntas yo tenía una duda con la compatibilidad del filter vamos a verlo yo cuando lo uso tengo la duda vamos a verlo la verdad es que no lo he mirado Can I use es una web para esto puede usar esta propiedad está soportada o no hay compatibilidad con los navegadores filter Internet Explorer 11 no si tu cliente te pide soporte con Internet Explorer 11 no pero vemos que no hay problema más o menos está bien soportada yo creo que sí da te cuenta que es un filtro es diseño no afecta al contenido no se te vas a colocar la página simplemente los que tengan Internet Explorer 11 van a ver el logotipo con color no en blanco y negro están usando Internet Explorer 11 te encuentras la hora de usarlo que puede fallar en ese momento o sea que actualicen pero quiero decir que hay otras propiedades que dices no pues todavía no vamos a usarlo porque no puede acceder al contenido tú la imagen la ves lo que pasa es que no la ves en blanco y negro con el filtro no la ves recortada pero ves la imagen a ver si pensamos en países en desarrollo utilizando ordenadores antiguos que utilizan todavía sistemas operativos antiguos y navegadores antiguos por lo menos esas personas de países en el bien de desarrollo van a acceder al contenido también podemos pensar en ese tipo de público bueno pues no lo van a ver pero bueno el resto sí no es crítico no es crítico, exacto, yo creo que no es crítico por nada yo creo un aplauso para Ana muchas gracias