 con los maravillosos diseñadores, Rana y Javi, con el taller más práctico de la WorkCAN, restyling de tu web en 90 minutos. Te atreves? Muchas gracias. Gracias, Alba. Buenas tardes. Buenas tardes. Muchas gracias por estar en nuestro taller, nos presentamos en forma breve. Aquí estamos con Javi Díaz Agudo, yo tengo suerte de compartir este taller con él. Es profesional, diseño web freelance, se dedica a la formación que, si estáis en Barcelona, os invito a que alguna vez aprovechéis sus cursos. En cuanto a diseño, es un pixel perfect. ¿Qué más? Vamos a aprender mucho junto a él con él en este taller. Muchas gracias Rana. Pues para mí es un placer dar este taller contigo, porque además conocimos el año pasado en Zaragoza también y vimos un taller suyo de diseño que, bueno, que yo creo que nos encantó a todos los que estábamos allí. Bueno, Rana es diseñadora web, así que si en Zaragoza necesitáis sus servicios, además, por lo que sé, también pinta cuadros y bueno, he podido ver algunos. Aquí no hemos venido a hacer publicidad. Es un artista increíble. Muy bien. Bueno, lo de enlace lo iba a comentar. Los que estáis aquí, si queréis participar de una forma activa en nuestro taller, probablemente os habéis enterado que a través de Twitter, a lo largo de la mañana han publicado que en la web de WorldCamp, en la página de nuestro taller, hay un enlace. Si os interese a trabajar junto a nosotros, tenéis que entrar en este enlace y descargar dos ficheros, que es una carpeta zip y también un fichero XML. Entonces, si queréis aprovechar este rato, mientras que hacemos un breve preámbulo, prepararos, descargar estos ficheros y ya comentáis. Exacto. Mira, como podéis ver, son estos dos ficheros que veis aquí, que es el XML y el Zaragoza zip, que ha comentado Rana, porque la idea es que sea totalmente práctico y que, sobre todo, claro, los que tengáis el portátil aquí, pues bueno, si os animáis a seguirnos un poco y, sobre todo, a dar las ideas que queremos hacer para el styling. Vale, pues nada, a descargarlo todos y seguimos con la presentación. Muy bien. Bueno, vamos a hacer una presentación muy breve, intentó no superar más de cinco minutos, simplemente para situarnos en el taller. Bueno, aquí tenemos una cifra, 50 milisegundos. Esta cifra, probablemente muchos que estáis aquí habéis oído sobre estas cifras, sobre las últimas investigaciones, es el espacio de tiempo que tiene un usuario que, por primera vez, aterriza navep en este tiempo decide si quiere permanecer en un navep o abandonarlo. Este tiempo, quiero decir, si lo queremos aumentar responsable de que el usuario decide quedarse en la web o abandonarlo, en mayor parte de tiempo somos los diseñadores, porque en este tiempo tan breve al usuario no le da tiempo enterarse del contenido de la web. Judga la web por su apariencia y lo que ve. Si se encuentra en torno, que se encuentra cómodo y piensa que es a su gusto, probablemente conseguimos aumentar, hasta que empieza a interactuar con la web. En ese momento ya empieza el juego de un buen contenido y eso, pero a la primera vista lo que afecta a la decisión del usuario es el aspecto, lo que llamamos diseño. En este taller, cuando utilizamos la palabra diseño, nos referimos a apariencia al aspecto de una web, no en concepto de diseño que siempre engloba el tema de funcionalidad, de experienciidad de usuario, no. Aquí simplemente estamos hablando de la apariencia. Para que podamos generar una web con un aspecto suficientemente agradable, para que el usuario permanezca más rato en esta web, tenemos que considerar una serie de principios. Lo hemos intentado resumir en ocho principios. Para empezar, una web, cuando alguien aterrisa una web, tiene que encontrarse en un entorno lo más simple posible. La frase famosa que dicen menos es más es muy importante. En una web, por ejemplo, el usuario tiene que saber a qué le estamos informando y qué le estamos pidiendo. Probablemente en una página así, no sabe qué tiene que hacer. Hay muchos estímulos. Mientras que si tiene una página muy bien clasificada, muy clara que ni sobre nada, ni falte nada, le podemos conducir hacia donde le queremos llevar. Un buen diseño tiene que ser consistente. Tenemos que tener un criterio bien claro a la hora de diseñar. No podemos estar en un diseño que tenga, bueno, ahora me apetece poner unos espacios rectangulares, luego unos círculos en algunos sitios, el texto lo voy tecleando. En otro sitio, el texto lo incluye en la imagen. En un solo pantalla eso es que tengo tantos estímulos que otra vez no puedo aclararme de qué va. Mientras que si reduzco las posibilidades para presentar mi mensaje, al final estoy transmitiendo un mensaje mucho más claro al usuario. Y el usuario puede decidir, puede ser bueno, aquí tengo más facilidad de ir a leer y ir a otras partes. Siguiente es la tipografía. Al final la tipografía es el responsable de transmitir el contenido. Una tipografía básicamente tiene que ser legible y tener cierto contraste, cierta jerarquía para que el usuario pueda ir hacia las partes que es más importante, quiera recibir el mensaje o no. En un sitio así la verdad es que se confunde bastante, pero en un sitio, que es por ejemplo esa es la página de gobierno de Reino Unido, aunque no tenemos ninguna imagen, hay suficientes puntos de atención para que el usuario pueda decidir intervenir en la web. La paleta de colores es otro elemento que pueda afectar a la decisión del usuario. Un uso inteligente de colores ayuda al usuario que de nuevo decida, le puede llevar a tomar decisiones, seguir interactuando con la web. En el uso de los colores siempre sabemos que no tenemos que exceder mucho, no tenemos que tener muchos colores, pero también siempre tenemos que tener un criterio. Por ejemplo si utilizamos muy pocos colores eso tampoco está bueno porque estamos presentando algo tan uniforme que al final no aclara que por ejemplo donde queremos poner la énfasis. Mientras que hay otro sitio que por ejemplo tiene muchos colores pero lo tiene muy bien justificado, entonces de nuevo cada usuario se identifica con qué parte quiere quedarse. Una web tiene que ser responsivo, es que eso es súper claro. Ya sabemos que al final navegamos más por dispositivos móviles. Si tu diseño no cumple esta norma es que has perdido la batalla ante tus competidores. La velocidad de carga también es otra vez absolutamente clara, a nadie le gusta estar esperando hasta que se cargue una página. Así que todos los elementos que están en la página tienen que estar muy bien optimizados. A continuación tenemos una navegación fácil, eso también es bastante obvio. Si tenemos un sitio con cantidades de menús verticales, horizontales, abajo, arriba, al final no sabemos a dónde dirigirnos, pero un menú super reducido, minimalista, al final nos cierra a dónde nos interesa. Y por último es que una vez tiene que claramente buscarte lo que tú estás buscando. Lo que estás buscando a un golpe de vista tienes que saber y volvemos a esto. Tenemos menos temén un segundo para tomar decisiones que si ahí podemos encontrar lo que buscamos o no. Si volvemos a repasar estos ocho principios, eso es la lista que acabo de comentar, de estos ocho principios hay cinco que lo podemos controlar los diseñadores a través de los ficheros CSS. Es lo que vamos a hacer en este taller, además si obviéráis que podéis tener un mismo web pero modificando ficheros CSS podemos tener webs con aspectos absolutamente diferente cada uno que estamos en este espacio. Exacto, entonces lo que ha ocurrido para esta workam, los tenemos una práctica que hacer en conjunto y es que nos ha llegado esta web que se llama Saves CSS, donde hay un contenido y donde a priori podemos pensar que nos gusta más o menos, pero cumple su función de contenido y demás, pero la realidad es que hay muchas cosas que le faltarían y es lo que vamos a tratar de retocar y ajustar mediante CSS. Entonces, para seguir el taller, todos aquellos que se hayan descargado el xml y el theme, si no tenéis una instalación creada de WordPress os recomiendo que os vayáis a un site que se llama Pupilife, que sale la caquita y parece muy divertido porque ahora empezará a moverse. Entonces simplemente le damos aquí y nos crea una instalación limpia de pruebas que ellos lo llaman el sandbox. Así que en esta instalación, así me podéis seguir los que lo habéis descargado, la caquita va dando vueltas. Y sí que vamos a hacer un par de cambios, no todos los que ha comentado que haces en su charla porque serían demasiado, pero sí que vamos a hacer algunos cambios, pues por ejemplo al que ya le está bien que esté en inglés, ningún problema, pero para hacerlo más genérico y que todos nos entendamos, nos vamos al panel de settings y en general, es que va un poquito Pupilife a su nivel también. Entonces, en site language nos vamos al español, lo guardamos y luego sí que nos vamos a ir también a enlaces permanentes y aquí, por mi me molesta mucho personalmente lo de que me ponga la fecha, los días y todo eso, no son amigables a sus redes, entonces lo dejamos por nombre de la entrada y lo guardaríamos. Muy bien, a partir de ahora tenemos una instalación limpia con los sims que trae por defecto warp y demás, pero lo que vamos a hacer es vamos a instalar nuestro sim que nos hemos descargado. Vale, para eso nos vamos a apariencia, vale, sims, bueno aquí tenemos los básicos de warp, los que ya sabemos 17, 16, 15, vale y vamos a subir nuestro tema que se llama Zaragoza sim, super original. Seguramente si ya tenéis una instalación activa en vuestro hosting o propiamente local, pues va a funcionar mucho más rápido, vale, perfecto, nos iríamos a temas y aquí nos aparece lo activaríamos, el screenshot se corresponde al tema, así que bien, vale y ahora lo que tendríamos que hacer es importar todo el contenido, que sería ese xml, que es todo el contenido, pues todas las entradas, todas las páginas, toda la info de los menús, vale, para eso nos tenemos que venir a herramientas dentro de herramientas, nos vamos a la parte de importar, nos venimos a la parte abajo donde aparece WordPress, instalar ahora que es el ejecutador o el importador de WordPress propiamente, vale, y desde aquí cogemos ese xml que hemos dejado, yo lo tengo aquí en esta carpeta y ahora vamos a ver qué pasa, si no lo voy a importar no sube nada, vale, en este caso me da igual el tema de usuarios, ni quiero cambiar, le voy a poner que descargue importe los archivos adjuntos, vale, porque simplemente quiero que cojo contenido, pero no me importa ni quién lo ha creado ni nada, vale, entonces como ya tenemos el tema activo, y ya hemos puesto el contenido, si yo me voy a páginas, ya tengo cargadas todas las páginas, ya tengo cargadas las entradas, y demás, que es lo que ocurre entonces, si por ejemplo me voy un poquito dentro, vale, aquí tenemos todo el contenido que hemos visto antes, vale, si que hay una cosa que faltaría cambiar y es el menú, porque tiene una posición designada, vale, y se lo tenemos que mover, entonces nos vendríamos en la parte de menú, en este sim lo que hemos hecho es, hemos puesto una sección arriba con el menú principal y otro trabajo, fijaos dónde se verá menú principal y menú secundario, vale, pues nada, le vamos a poner menú principal, muy bien, entonces con esto nosotros ya podríamos empezar a trabajar y a modificar ese diseño que aparentemente nos gusta, pero no, y esto ocurre mucho, ocurre que bueno, pues a lo mejor tenemos un sim que nos lo ha hecho un amigo, nos lo ha hecho el cuñado, quien sea, y creemos que está bien, pero realmente no convierte lo suficiente como comentaba Rana con sus diapositivas, ¿no? Entonces para seguir el taller, o bien, lo tocamos con la herramienta del navegador propiamente, vale, si teniendo cuidado que el lealado no nos moleste para que se nos cierra el navegador, pedraremos todos los cambios, o lo podríamos hacer con el editor de WordPress, yo en mi caso lo haré con Sublime, pero igualmente lo vamos a ver todo a través del firebook, o si tienes el Chrome con la herramienta de inspeccionar el mento, vale, que para en el caso del Firefox, no, a llegar a él, tendría que ir a sección de desarrollador web, inspector, y aquí ya puedo jugar con viendo las clases y retocando el CSS, y en el caso de Chrome lo vamos a ver por si alguno lo quiere hacer por ahí, yo soy raro, que utilizo Firefox, pues alguna pega tenía que tener, ¿no? Vale, entonces nos iríamos a más herramientas y herramientas de desarrolladores, vale, y sería lo mismo aquí. Muy bien, Rana, qué cambios le ves aquí que te parece si de momento minimizamos el inspector, volvemos entre todos a mirar la página, a ver si como hemos comentado podéis participar perfectamente, si os parece echamos un vistazo rápido a la página entera de arriba abajo, y si alguien quiere comentar algo, alguna crítica, alguna mejora que haría en esta web, lo vais comentando. ¿Te importa quién me ponga así ese lado para no llegar tanto? No, no, no creo que me ponga, ¿sí? ¿Veis algo que modificaríais? Sí, que me suele molestar que la cabecera tenga tanta imagen que desplace el contenido tan, tan abajo que la imagen no te diga mucho más y no parezca lo primero que ves es una foto muy grande. Bueno, a ver, en realidad, claro, el diseño final también es objetivo, ¿no? Normalmente estas cabeceras ya empezaría a ser de hace seis o siete años, en el sentido de que cada vez se tiende más a que las cabeceras sean bastante, bastante grandotas, pero yo entiendo lo que dices, ¿sí? Que puede ocurrir, ¿no? Que para ti dice, hostia, si ya me basta con mucho menos. De todos modos la cabecera tiene una cosa que sí que le ocurre y es que se está repitiendo, ¿no? Eso sí que es un fallo gordo porque tendría que ocupar el cien por cien, ¿vale? Que lo iremos arreglando, ¿vale? Del orden que ha dicho Rana, ¿nos parece que hay algo que sería quizá lo primero cuando yo me enfrento a un diseño o... Sí, básicamente cuando me enfrento a proponer un diseño, ¿qué sería por lo que se suele empezar? Mira, si yo quiero interactuar con la página, por ejemplo, me dirijo hacia la barra de navegación, la barra me parece un poco estrecha, luego estoy viendo el logotipo Save CSS, luego muy pegado al borde del escritorio, a mí me gustaría que tengamos algún margen a la derecha izquierda, incluso darle un poco más espacio para que... ¿Y en tipografía? Tipografía de la página, yo lo veo demasiado básico, es que yo creo que no transmiten nada, es un... Vale, pues exacto, ¿no? Probablemente cuando empezamos a plantear un diseño, lo primero que nos fijamos es la tipografía, ¿vale? Si empezamos a investigar un poco, vemos que hay una taoma, bueno, básicamente no se suele utilizar ya para temas de web, casi nos recuerda al antiguo Word, por así decir, entonces no nos convierte demasiado o a la vista ya no nos es agradable, ¿no? Entonces, nosotros lo que hemos hecho es en vuestro sim tenéis cargados dos tipografías ya, una sería la Mary Gweather y la otra sería la Montserrat. Nos vamos a jugar con estas dos, una la vamos a tener de principal y la otra como secundaria, ¿no? Sobre todo haciendo referencia, una... Vamos a utilizar el logotipo como si fuera tipográfico, o sea, será tipográfico, ¿vale? De hecho ya lo es y también para titulares y otra más bien para contenidos y menús, ¿vale? Entonces, por ejemplo, en el 6 CSS que sería el nombre de nuestra página y a la vez nuestro H1, como yo ya tengo cargado por aquí, no sé si se ve la Mary Gweather, ¿no? Pues simplemente le haría un cambio, ¿vale? Y a partir de aquí ya podría jugar con el tamaño y demás. Una cosa que me ha comentado Rana, que es bastante importante, no puedo tener un logo totalmente pegado a la izquierda y al final, creo que lo comentábamos en otra Workam, concepto de que respire, ¿no? Que el contenido respire y que siento que quiero comprar, que quiero ir a clicar el call to action, que me es atractiva navegar por esa web, ¿vale? Entonces, yo voy dando algunas palabras de CSS, que pues... Bueno, espero que los que sepáis más lo podáis seguir, ¿vale? Y simplemente son propiedades básicas, ¿eh? Tampoco va a ser nada tan elaborado, ¿vale? Los vamos a dar un poco de espacio, que se hace con la propiedad padding, ¿vale? Y, por ejemplo, lo que estamos haciendo aquí, exacto, ¿no? Le damos un poquito de derecha y, sobre todo, que me crezca el contenedor, para que me dé un poco más de volumen, ¿vale? Lo que vamos a hacer, por el contrario, con el menú, es pasarlo a la otra tipografía que tenemos y hemos cargado en el sistema, que es la Montserrat. Activo la desactivada taoma y le pongo la Montserrat, ¿vale? Y le voy a jugar con el peso, porque todas estas tipografías ahora mismo las hemos cargado por Google Fonts, para que sea más sencillo, a lo hora de hacer el sim. Y vamos a jugar con el peso, con la propiedad del PhoneWave, ¿vale? Y le vamos a poner un valor de 400, que yo creo que pues está bien. ¿Por qué donaciones? ¿Qué resulta el botón este de donaciones? No sé, no sé si se ve bien. ¿Estamos en la página de donaciones o es un... Mejor, ¿no? Vale, no se ve porque es... ¿Se pueda pagar estas luces? Igual se ve mejor la pantalla. Claro, sí. Bueno, arriba vale en el menú, en el último botón, que podría haber contacto, pero hay un botón de donaciones que está con un fondo amarillo, pues amarillo y el, y en aranjita este rojo pues no pega mucho, ¿no? Además tenemos un call-to-action aquí de donaciones, cosa que sería repetido, ¿no? Entonces vamos a sacar ese destacado que no tiene sentido. Nos vendríamos aquí, ¿vale? Nosotros ya tenemos declarado que el hijo, el cuarto hijo de la lista, ¿vale? Pues tenga esta propiedad del background, ¿no? Simplemente eso lo vamos a quitar. Y otra cosa para que no tenga tanta presencia el tema del color, que a lo mejor es demasiado, ¿vale? Vamos a hacer un cambio. Vamos a coger y este color que ya no sirve, ¿vale? Porque lo que estamos haciendo es, estamos partiendo, o sea, la estructura no se va a cambiar en ningún momento. El HTML es el que es y el contenido es el que es. Lo único que vamos a cambiar es la apariencia con el diseño, ¿vale? Entonces si nos venimos a la parte a la clase de top brown, ¿vale? Y vamos a copiar ese código de color y aquí le vamos a dejar el blanco, ¿vale? Lo que vamos a hacer en el logo, tengo que ir con cuidado porque si refresco se va toda la mierda, ¿vale? Entonces por eso estoy callado. Entonces le vamos a dejar... ¿Cómo? Se va el popi a la mierda, ¿no? Vale. Y entonces, bueno, ya tenemos el logo que de alguna manera también con el contraste con la foto, no sé qué le parece a Rana, pero como que queda mejor. Yo no sé si pondría el logo tipo un poco más grande. Un poco más grande. Para mí tiene el mismo tamaño de letra que de tipo que ayudan a evolucionar, no sé, probamos a ver cómo queda. Bueno, aquí podéis opinar perfectamente. Sí. De hecho, el que esté haciendo la práctica puede cambiar todo, o sea, las distancias, los colores, pues evidentemente las tipografías están preparadas, así que mejor vas a osen esa, pero lo podéis hacer a vuestro gusto 100%. Por ejemplo, lo del header que decías, si tú estuvieras con un ordenador haciéndolo, lo podrías dejar ese tamaño, ¿vale? Si que propiedad es que sí que habría que cambiar, porque si no nos van a decir, este tío no sabe, ¿vale? Porque él ha puesto así directamente, ¿no? Y en referencia a eso también viene lo que decía Rana, ¿no? De cuando hacemos el diseñador, tiene la responsabilidad del diseño, pero, ostia, el maquetador también tiene cierta responsabilidad, porque quizá, bueno, pues tiene que ajustar o darle esos toques finales, ¿vale? Y se trata de cada uno ser responsable de su trabajo. Vale, nos vamos al menú que lo hemos perdido, porque lo hemos puesto blanco, ¿vale? Y le vamos a dar el color negro. Lo tenemos dentro de la clase top brown, ¿vale? En el first menu, nos vendríamos aquí, ¿vale? Y le vamos a poner un color negro, ¿vale? Y vamos a bajar un poquito la opacidad, que siempre queda bien con el negro, a 0.8 con la propiedad opacidad, ¿vale? Entonces, bueno, pues lo tenemos un poquito más fino, ¿no? Vale, vamos a ir un momento con lo del banner que decía él, así lo arreglamos, ¿vale? Yo lo voy a poner al modo que yo pienso que está bien, ¿vale? Ahora mismo está con 350 píxeles, ¿vale? No sé si todo el mundo le parece que está bien de tamaño, ¿vale? Pero yo lo voy a poner más grande. No sé si lo veis, pero la foto que aparece ahí es Darío, que es aquí un abrazo que, aunque no he podido venir, pues, bueno, está presente en la work, anda de alguna manera. En esta misma sala. Y está vivo, ¿eh? No, que parece que lo... ¿vale? Sí, es verdad, y en esta misma sala. Sí. Eso es muy guay. Vale, entonces ¿por qué se está repitiendo? ¿vale? Primero, tiene que tener la propiedad background size cover, ¿vale? No contains sino cover. Sólo que hace es que da igual como sea mi dispositivo, mi pantalla, si se me va a adaptar al 100%. ¿vale? La otra, ¿vale? Sería la posición. Yo puedo modificar la posición por CSS de la imagen, ¿vale? Yo le puedo decir center, center, ¿vale? Y lo que me está cogiendo es que justamente lo que me mueve la imagen para el medio, tanto de abajo arriba como de izquierda a derecha, para que se me se me posicione. ¿vale? Y la que quería remarcar más, que de hecho si saca esto, se vuelve a pasar, es la de background, repeat, no repeat. ¿vale? ¿Qué ocurre? Que aquí está en center y no tengo el size cover, pero si lo activo, ¿vale? Esto es, nunca se me va a ver mal esta imagen, ni en móvil, ni en desktop, ni en tablet, ni nada por el estilo, ¿vale? ¿vale? Dime, sí, sí, sí. Sí, se podría hacerse, o sea podría hacerse con 100 vh, por así decir, lo que esté. Sí, sí, sí, es totalmente, totalmente de acuerdo. Esas son opciones. Quiero decir, si la ponemos, es por no hacer scroll. Sí, claro. Por ejemplo, decirle ahora mismo, estaría viendo unos 600, los primeros 600 pixels. Claro, a ver, es que todo depende también de la resolución de tu pantalla. Claro, con esa unidad sabemos la altura que tiene el dispositivo, entonces podemos decir que sea el 100% menos la altura que tiene. El que la hace el cal, que este... Y luego, si queremos decir que se muestren nuestras acciones, si está lo ponemos, se podría hacer. 80% menos esto. Ya tengo que lo hago lo más básico para, sí, sí, para que todo el mundo lo siga. Si no, la práctica que dices está muy bien, ¿vale? Entonces, ¿qué más le faltaría por aquí, Ranaver, o alguien más? ¿Cambiaríais algo más las tipografías, por ejemplo, de las cabeceras? Sí, sí, sí. La tipografía de un pequeño cambio que no es muy legible, no es... Vamos a mirar qué es. Sí, aparte, está un poco descompensada con lo que sería el resto. Al mejor porque es Serif, no sé. Bueno, realmente está cogiendo la tipografía que le da el sistema, porque no tiene ninguna declarada. Y, claro, al ser Serif en pequeño, bueno, como que no convierte, ¿no? Vale, pues le vamos a utilizar la Montserrat. La vamos a coger del menú de arriba, porque sin duda tengo que escribir mucho, y ya queda mejor. También vamos a sacarle el underline, ¿vale? Los estáis viendo bien, lo amplí un poquito más. Ahora mejor, ¿no? Vale. Pues, yo aprovecharía también para el H2, que es el ayuda no sé evolucionar, ponerlo más grande, pero sobre todo con la tipografía principal, que es la Meriwether, ¿no? Vale, aquí la tendríamos cargada, y lo vamos a exagerar. Le vamos a poner algo así, ¿vale? Al final, de lo que se trata el CSS también, intentándolo hacer de esta manera, ¿no? De jugar un poquito y de ver cómo nos queda, ¿no? Al menos esto ya nos empieza a dar como un rollo gráfico, pues más chulo, que tendría un poquito más imagen de marca. Le vamos a decir que el claim de un pequeño cambio es un gran cambio, ¿vale? Que está como spam, sea un poquito más pequeño. Por ejemplo, lo vamos a poner a 22, ¿vale? Y un poquito más pequeño también, ¿vale? Darias un poco más de cuerpo. Yo no sé si es por el contraste con la luz que se ve ahora en la pantalla, pero... A la ayuda no se va a evolucionar, ¿no? No, a un pequeño cambio. Ahí, ahí, ayudarme, ayudarme. Pues, ¿vale? Le vamos a dar, por ejemplo, la propiedad... Uy, la tengo arriba muchas veces. Vale, le vamos a dar 500, por ejemplo, ¿no? Lo llegáis a ver ahora, sí, con 400. Vale, si no, tenemos el recurso que es ponerle una capa intermedia, que ya la tenemos declarada, que es, bueno, pues ponerle un overlay con un negro a una opacidad, ¿vale? Para que se me vean mejor las letras y pierda un poco de información de la imagen. ¿Vale? Yo tengo declarado a crearse overlay, ¿vale? Para hacer esto, le vamos a poner un background black, ¿vale? Le vamos a poner una altura de 100%, ¿vale? Una altura de 100%, ¿no os asustéis, ¿vale? Le vamos a poner una posición absoluta, le vamos a poner una opacidad del 0.5, ¿vale? Lo que tiene que tener siempre la clase que haya encima es la posición relativa, ¿vale? Porque si no, pues claro, se nos está montando un poco al aire, ¿no? La posición relativa de encima nos la encajona. Encajona no sé si es la palabra, pero es en 10. Vale, entonces nosotros aquí tenemos la clase intro, ¿vale? La cual le vamos a dar un z-index de 1000, ¿vale? Y aquí le vamos a dar un z-index, por ejemplo, de 10, simplemente para que esté ponen encima, ¿vale? Acordaos que, aparte, pues siempre es efectivo esto, ¿no? Pero acordaos de ajustar la opacidad, porque a lo mejor nosotros pensamos que está muy bien, pero estamos perdiendo demasiada información, ¿vale? Entonces simplemente vendríamos jugando para aquí hasta convertirlo totalmente en algo negro, ¿no? Vale, pues lo podemos bajar, por ejemplo, ¿vale? Sí que, por ejemplo, lo que está muy bien de esta imagen es que por un lado está Darío, que le está dando los focos de luz como estos y le queda toda la imagen de los restos de público negro por detrás, ¿vale? Entonces al final es empezar a replicar y acoger ese diseño que nosotros pensábamos que estaba bien con ese SIM, intentar darle esa vuelta. Por ejemplo, otra cosa, ¿dónde deberíamos aplicar más cambios? Mel, call to action, donaciones, está todavía muy verde. Bueno, naranja. Digo, ¿dónde has visto verde? Vale, pues tiene tierra sonrana como no, ¿vale? Y lo que vamos a hacer aquí es sobre la marcha, ¿eh? Vamos a copiar este color y ya entra, le vamos a dar un color transparent, ¿vale? Lo que vamos a hacer es le vamos a dar un border, que es 2 pixels solid, ¿vale? Con el color este que hemos declarado. Además, la propiedad, no sé si lo he guardado, me lo ha gustado. Además tiene un border radius, ¿vale? Que es bastante exagerado. ¿Has probado poner el call to action totalmente cuadrado? Lo vamos a probar. Por ejemplo, también sería una opción, ¿vale? Yo aumentaría un poco el border de... ¿Sí? Si ahora cuántos pixels tiene, 2. Ah, tiene 2. Yo pondría 3. Otra cosa que vamos a hacer es para que nos resalte y no perdamos el contenido del botón, lo vamos a poner en blanco. Pero para ir al blanco, nos tenemos que ir aquí, al botón y al link. ¿Y el comportamiento del botón cómo será? El comportamiento del botón, ¿cómo lo quieres hacer? Bueno, pasando el ratón por encima, fondo naranja, el texto que permanezca blanco, ¿o tenéis alguna otra? Sí, ¿queréis algún comportamiento para el botón? Bueno, le estamos poniendo la tipografía de Montserrat aquí también, ¿vale? Que sería la segunda y le vamos a dar un poquito más de tamaño, ¿vale? ¿Cómo queda? ¡Uy, demasiado! ¿Qué os parece? Hago por así, ¿vale? Mira, buena. ¿Vale? Pues esto se hace con la propiedad... Letter spacing. Exacto. Si lo pongo 2 pixels, pero podría ser, podría ser, me gusta. Quizás no tan exagerado, pero algo así está muy bien. Vamos a darle el comportamiento del botón, ¿vale? Ahora mismo está que cuando... Bueno, lo tenemos de manera normal, lo que, por ejemplo, podemos creer es que cuando pasamos por encima, todo se nos trasfonda, se nos transforma en el color en alargita, ¿vale? Y bueno, nos hace ese efecto de lower, ¿no? Vamos a coger el color, ¿vale? Y ya nos está cogiendo un poquito el efecto, ¿vale? También podríamos hacer que cuando nosotros tenemos uno verde botón, nos cambia el color del color del link, ¿vale? Que nos lo hace negro, por ejemplo, ¿vale? Por decir algo. Javier dejaría el texto en blanco. ¿El texto en blanco? ¿Al pasar el ratón? ¿Sí? ¿No? ¿Sí? También. ¿Vale? Y ya me lo estaría cogiendo. Vamos a eliminar lo que nos han dicho aquí, ¿vale? Y podríamos seguir replicando. Bueno, hemos conseguido bastante cambio en el bloque tanto barra navegación como el banner. De hecho, yo aquí mantengo la navegación. Claro, esto es la opción que teníamos antes. Eso sería el inicio, bueno, el sector de sandbox, ¿vale? Lo que sería el titular, ¿vale? Hombre, pues ya empieza a tener un poquito de desarrollo, ¿vale? Y este cambio es solo tocando el artículo. Sí, sí, sí. Vale, vamos a seguir con los titulares para darle las propiedades que queremos, ¿vale? Luego veremos alguna, no sé cómo vamos de tiempo, porque veremos alguna cosilla un poquito más avanzada para los que controlen más, ¿vale? Muy bien, pues nada, nos vendríamos a nuestras acciones, que aquí tenemos la taboma, ¿vale? Lo vamos a cambiar por nuestra forma principal, que al final es ésta. Lo hago todo por aquí porque creo que si voy a estar copiando y pegando por el sublime, pues va a ser un poco aburrido para vosotros. Vale, ya nos lo ha cogido y lo que vamos a hacer es aumentar un poco. Bueno, en esta parte tenéis alguna sugerencia, alguna modificación propondréis. Más margen, por supuesto. Muy buena. Vale, porque precisamente lo que decíamos, ¿no? No, no respira nada. Vale, lo que tendríamos que hacer... Aparte de más margen también creo que cuerpo de página igual un poco más, más ancha, porque respecto a lo que tenemos el banner, es que parece muy comprimido. Sí, mira, nosotros ahora tenemos 980 pixels, que es lo que había en la otra web, que ya normalmente no se utiliza tanto y se utilizan más bien, bueno, pues mil 100, mil 200. Entonces lo vamos a convertir. Nosotros tenemos una clase que es la container, que es la que nos está englobando todo lo que sería contenido, ¿vale? Vamos a poner, sin miedo, mil 200 pixels, ¿vale? Y como decía Rana, aquí vamos a aumentar y también decía la chica por ahí arriba, es aumentar las distancias, ¿vale? Porque si no, ¿vale? Y luego también vamos a aumentar por aquí, no tanto, ¿vale? Pero o así. Vale, genial. Sí, aparte yo creo que tenemos que trabajar un poco más el tamaño del tipo. Exacto, lo que vamos a hacer es... ¿Y el color? ¿Quedamos con el negro? Yo lo cambiaría, no sé qué opina la gente, pero sí que lo cambiaría porque nos está definiendo el de arriba, el logotipo principal con la tipografía, ¿no? Como aquí ya tenemos el blanco con el contraste negro, pues sería mejor ponerlo en naranja ya que el fondo lo tenemos en blanco, ¿vale? Veamos aquí, ¿vale? Y lo cambiaríamos. Además, vamos a hacer un cambio más... ¿Qué te parece Javier? ¿Salir de este formato tan simétrico? Por ejemplo, poner nuestras acciones alineado a la izquierda. Vale, vamos a decir que justamente este H3 lo alineamos a la izquierda, ¿vale? Y también jugaría con el destacado, ¿vale? Y lo alinearíamos así. Pero, claro, volvemos a lo mismo, estaría muy pegado con el titular, ¿vale? Lo que vamos a hacer es le vamos a cambiar la fuente por la monsegrada y vamos a montar el tamaño para que rompa un poco el formato, ¿vale? Por ejemplo... Si igual le podemos poner algo así, ¿vale? Y lo que decíamos, le damos al revés, ¿no? Primero pondríamos lo que sería vertical o horizontal, ¿vale? Le daríamos algo así, ¿vale? Esto no se me ha acabado de ajustar el alineamiento, pero bueno... No sé qué más cambios os gustaría aplicar por aquí abajo, si queréis, empiezo a bajar para... Pues no, no, no, no. De hecho, podríamos hacer una cosa, si no sé si te he entendido bien, ¿eh? Pero se podría ligar con el logo, por ejemplo, si yo le pongo un borde de dos píxeles, ¿vale? Y ahora utilizo este elemento, ¿vale? Para ponerlo abajo. ¿Te referías a algo así, verdad? A poner una línea que me destaque del resto, ¿no? Una... Pero la línea de dónde vendría, de dónde empezaría. Ah, vale, pero tú estás hablando de cada imagen, ¿no? No, claro, contenedor. Yo no lo veo, eso. Sí, sí, sí, eso no creo que quede muy bien, ¿vale? Aumentar el margen entre los tres bloques. Están muy tabados. Por ejemplo, las tres imágenes te refieren, ¿no? Sí, sí. Sí, ahora lo tenemos a hier y es relativamente poco. Mejor. Vale, vamos a replicar, vamos a seguir replicando las fuentes, ¿vale? Aquí tenemos taoma, vuelve a hacer un título, entonces volvamos a coger la tipografía de la Meriweather y lo vamos a replicar en los H4. Volvimos aquí, ¿vale? Y lo vamos a poner. De hecho, vamos a jugar con esto que comentabais antes y vamos a dar un poquito de padding y siempre cuando es negro es mejor ponerlo a una opacidad reducida, porque, bueno, para la vista un negro a 100% siempre sería demasiado, a 08 siempre queda un poquito más amigable. Cada vez estamos modificando esto, o sea, lo que tenemos, nuestra estructura no está cambiando en ningún momento, ¿vale? Entonces, ¿qué más? ¿Qué más podemos hacer? A veces un elemento que es interesante hacer, por ejemplo, para romper el formato, ¿vale? Podemos utilizar de destacar un párrafo, ¿vale? De resto. Y no harías nada con el tamaño de fuente del cuerpo de página. Habría que cambiarlo a Montserrat, ¿no? Sí, demasiado largo, es que... ¿Vale? Miras esta roboto que lo coge del sistema, ¿vale? Entonces, lo que vamos a hacer es vamos a cogerle y ponerle Montserrat, pero con otro tamaño. Con un 17, ¿vale? A vos parece que lo podéis leer mejor, ¿no? Pero, claro, quizá sigue teniendo poco juego. Lo que le vamos a hacer para romper el formato es ponerle un pán izquierdo, ¿vale? Que haga, bueno, que se salga un poco de la línea, ¿no? Ahora lo podríamos leer bien, ¿ya, ¿no? Vale, lo que decías es el tema justificado, que esto es horrible. Muchas veces ocurre, seguro que esto se ha hablado Ana Cirujano en cuanto a tipografía, que es cierto que, bueno, que la justificación es, pues, a no sé qué sea un libro cuadrado donde, bueno, donde tenemos las páginas marcadas, pues visualmente es mucho más difícil de leer. De hecho, casi te lo rechaza el ojo, ¿no? Lo alineamos siempre a la izquierda. De hecho, el editor de WordPress ya ha eliminado el botón justificado el texto. Y no sé qué más. ¿Qué más se os ocurre, Ana? Yo, muchísima distancia entre este párrafo a los tres bloques. Vale. ¿Algún cambio más se os ocurre? A ver, tres cambios. Venga. Vamos a probar, pero igual os complico un poco la vida. Bueno, el diseño se trata de eso, de probar cuáles de aquí llegues. Y es que desde que lo he visto, a mí me está pidiendo estos tres bloques de aquí, además es como bastante obsoleto el destacar con imágenes, están tantos casi. Para mí es poner la imagen de la izquierda a sangre con la izquierda, hacerle un formato más rectangular y el título que llevan los vínculos de la comunidad lo pondría a la derecha pisando un poco la imagen con un background blanco en este caso. No sé si me seguís. Entonces, la imagen de la izquierda rompería lo que es la estructura y la del centro la bajaría abajo poniéndola a la derecha. O sea, de tal forma que haría un mensaje tipo landing page teniendo el slider, bueno, no es slider, el destacado principal que hemos visto y después los vínculos de la comunidad con ya la pieza en sí generaría diseño. Vale, tú integrarías los vínculos de la comunidad con la imagen, quieres decir. Sí, haciéndolo como digamos horizontal, más apaisado, empezando en la sangre de la izquierda y terminando la imagen más o menos por el centro. Ah, vale, ya te entiendo. Me explico. Sí, te veo un poco bloques de Gutenberg ahí. Javi, eso no es más de maquitación, quieres decir, con lo que estamos haciendo y es únicamente tocar ficheros de CSS. En este caso nos encantaría probarlo pero igual. Está muy bien, lo único que sí que tendría que tocar un poquito de html, no me quiero meter ahí. Tenías que tocar sobre todo el content para romper. Sí, bueno, a ver, en realidad seguro que algunos se lo preguntan o si está hecho con CSS Grid o con Flexbox. Bueno, está hecho con Flexbox pero al final, el taller no es de cómo está hecho, sino de, bueno, de meternos en la cabeza de que si no tenemos, a veces no tenemos presupuesto para gastarnos en un nuevo SIM, por así decirlo, pues lo podemos modificar o podemos hacer ciertos ajustes en aquel que tenemos. Lo que ocurre es que html, si me pongo a tocar, ya es un poco cristo. Pero sí, sí, se podría hacer. Claro. Sí, tú dirías, por ejemplo, un padding superior negativo. Se puede hacer así. Javi, ¿tú concederías una buena práctica a poner un padding negativo? Casi te diría que menos ponerle importan, todo es posible, porque todos hemos puesto padding negativo en ocasiones no para poder salvar. Sí que se puede, es que en ocasiones si es poquito, es lo típico, ¿no? Vale, lo mando para arriba pero... Ah, vale, claro, porque está con el articol, sí. Sí, esto va a dar rica. Se podría hacer, ¿eh? Se podría hacer algo así, poniendo de, me lo voy a inventar, 50%. Sí, sí, le puedo poner voto 20 pixels y me quedaría abajo. Sí, pero voy a hacer otra, otra cosa que me encaja más con esto. La puta es que no, como no puedo refrescar la página. Sí, si lo vamos a tener que empezar a hacer. Nosotros tenemos aquí, vale, otra clase que se llama overlay cart, ¿vale? Que la podemos utilizar también como hemos utilizado la imagen de arriba con el fondo, ¿no? Vale, 0, ¿vale? Y lo podríamos hacer, le podríamos hacer alguna animación, ¿vale? Por ejemplo, no sé si conocéis, bueno, se puede hacer la típica animación de coger y transformar la imagen de escala, ¿vale? Cuando pasemos por encima, por ejemplo, ¿vale? Por ejemplo, no hemos puesto como enlace, lo que sí que hemos puesto como enlace son las últimas noticias que serían como un post. Aquí lo hemos metido, bueno, lo hemos metido hardcore directamente y sin enlace, porque no lo, no, necesitaríamos, pero la propiedad de over me puede funcionar. Sí, no es una enlace. Claro, a ver, la teoría sería que podría ser perfectamente una enlace, sí. Vale, por ejemplo, podría poner la opción a 0, aquí le podría decir una transición de 4 segundos. Vamos a ponerle, a ver si nos lo coge, lo estoy padeciendo. Lo vamos a seguir con el resto. Y luego vamos a ver las animaciones. Vale, ¿qué más cambiaríamos? Esta, ¿no? Sí, los mismos estilos, ¿no? Que tenían mismo radio, grosores, etcétera. Vamos a ir veniendo por aquí. Javi, ¿qué te parece modificar el estilo del botón que tenemos abajo? Es que me parecen muchos botones en esta zona. Ah, vale, vale. Aparte, justamente él me decía este. Vale, vamos a utilizar nuestra clase center para cambiar esta propiedad, border radius, vamos a ponerle. Pero bueno, al final, en realidad la idea, ¿vale? Es que lo probéis en directo, por eso es el tema del taller, ¿no? Es que lo probéis probando con el portátil, ¿vale? Para ir ajustando los cambios y que cada uno vaya aplicando los suyos. Vale, por ejemplo, aquí lo que vamos a hacer es quitarle el bordero. No se está dejando. Si empieza a tener ya demasiados cambios en el CSS sin haber guardado, ¿vale? Y acogería este. ¿Qué más cambiamos? Para mí, de hecho, yo directamente los quitaría. Es decir, creo que, como bien decía ella, hay muchos botones y unete al equipo, para mí es más un titular, más que un botón, más que un call to action. Quizás haría el ayudarnos a seguir más grande, quitaría el recuadro, lo haría como un mensaje. Vale. Y ahí sí que lo dividiría en voluntarios y donaciones porque realmente decir unete al equipo el call to action lo vamos a tener abajo y la llamada de atención va a ser en el propio mensaje de ayudarnos a seguir. Replicamos las tipografías en el ayudarnos a seguir, ¿no? Yo creo que sí. Y quizás lo haría más grande en dos líneas para llamar más la atención, quitaría el recuadro este naranja y ahí sí ya visto los botones de voluntario y donaciones y los segmento de esa manera. Por ejemplo, utilizamos el mismo formato de bajar la opacidad, podemos hacer algún detallito aquí, como mv solid, le podríamos poner, ¿vale? Y podríamos ir replicando el formato, ¿no? de las cajas. Por ejemplo, a mí me llama mucho la atención la parte abajo que bueno que realmente se ve muy mal porque como decía Rana, los espaciados no pueden tener contenido pegado literalmente a las cajas, entonces eso se tiene que arreglar, ¿vale? Para arreglar esto, pues aquí le vamos a dar, ¿vale? Simplemente y vamos a corregir el tema de, por ejemplo, esto. Te dejarías el borde de las tarjetas. Ni esto ni si también se lo haría más grande. Sí. Por ejemplo, podría ser algo así, ¿vale? Luego las fuentes, lo mismo. Esto es demasiado antiguo, ¿no? O sea, de hecho lo puedes ver que se ve de otra época. Por ejemplo, aquí lo podemos sacar todo el borde directamente, ¿vale? Luego podemos hacer alguna sombra o un degradado, ¿vale? Y aquí volvemos a replicar. Oye, porque los titulares no lo estamos teniendo negro, lo estamos teniendo en naranja, ¿no? Pues vamos a utilizar, los cogemos, los replicamos aquí, ¿vale? Y bueno, la fuente pues no puede ser tan pequeñita. Por ejemplo, se ha hecho grande, ¿eh? Revolve, os habéis asustado. Podría quedar bien algo así, ¿no? ¿Vale? Recordad que... Pero en esta zona, últimas noticias y titulares de noticias también están en color naranja, igual la usamos un poco, ¿no? Quizá lo que ocurre es que, bueno, está demasiado junto, demasiado pegado también todo, ¿no? ¿Por qué no probamos últimas noticias en negro para que se diferencie del bloque que tiene esa arriba? Las neos y jugamos como siempre con la opacidad, ¿vale? Si, nosotros le damos... Si, si necesitas el micrófondo. Al raíz de lo que comenta Rana de los colores, hay una práctica que a veces se hace mal uso y es el tema de utilizar, por ejemplo, el color corporativo en naranja y ponerlo a titulares y a todo en naranja y, por ejemplo, los links también. Y una de las cosas que se recomienda es que todo lo que sea un hipervínculo, un link, tenga siempre un color. Si se utiliza el corporativo, el corporativo, pero que no se repita en otras zonas como, por ejemplo, titulares de últimas noticias y demás, ¿por qué? Tú ya socias que algo de que sea de color naranja es clicable, entonces cuando ves últimas noticias te piensas que también es clicable, que lo podrías hacer clicable a esa categoría que te mostrará a todas, pero si no va a ser, es mejor no utilizarlo. No sé qué pensáis, ¿eh? Igual... Bueno, al final es seguir un poco la jerarquía, ¿no? O sea, en el caso de los links podrías jugar un poquito más, en el caso de los titulares, si tú has definido un color, pues está bien, está bien mantenerlo, ¿no? Si quieres ver que nosotros hemos abusado de naranja, entonces, bueno, pues hacemos un cambio. Nadie tiene su portátil conectado y está haciendo un cambio. Decidme que alguien lo está haciendo. Claro, porque si no, el taller deja de ser taller y pasa a ser, pues, más abolidito. Por acá, a ver, ¿me haciendo cambios? Pues pierda, tía, la gracia. No sé si ha habido alguien que se ha termino de descargar los archivos que hemos puesto en la web. Vale, por ejemplo, en la parte de abajo sí que no está cogiendo la fuente, entonces, por ahí, por ahí bien, ¿vale? Y vamos a tratar de, en el caso del claim, sí que estamos abusando del naranja, pero los botones, como decís, sí que tienen que ir en naranja porque lo estamos perdiendo totalmente, ¿no? De hecho, tampoco se ven demasiado. Y aquí tengo estas clases declaradas, ¿vale? Y lo que vamos a hacer es le vamos a poner un, ¿vale? Le vamos a poner el color blanco, la tipografía, porque si no nunca nos vas a resaltar, ¿vale? Personalmente que haya el tema de los, de decoration, pues no me gusta demasiado. Si va siendo un botón, es que también te vas a resaltar. Ya es directamente un poco, ¿vale? Y le vamos a poner, ¿vale? Para que tengamos un poco, un poco más de aire. Vale, le vamos a quitar este invento. Podemos hacer otro juego de colores y es que, a ver cómo queda, este F6, F6, F6, ¿vale? Se lo podemos replicar aquí, ¿vale? Que no queda mal. Y también podemos hacer un juego con los bordes, ¿vale? Nosotros aquí tenemos los titulares y lo que vamos a hacer es, le hemos declarado como article h4, vamos a dejarlo en negro y le vamos a hacer que este article nos tenga y nos tenga un bordel izquierdo, como hemos intentado hacer con el logo, ¿vale? Javier, ahora estás con tus toques personales, ¿no? Sí, pero dime, dime cambios hacer, ¿eh? Bueno, nos gustaría que nos propongáis. Sí, nos gustó. Tenemos cinco listos. Es cierto que hay límites por el cao. Vuelve lo que decían, no podemos tocarlo. Yo, a ver, una cosa, yo en cuanto a los colores, sí que parece que nos dio un poco de miedo si nuestro logótipo es naranja, utilizar otros colores y hace que estemos obligados a ceñernos al naranja y al negro y al gris. En cambio, creo que puede aportar, digamos, más vida de salir de unos colores, de hacer un diseño bicolor y buscar un color complementario que refresque un poco también, ¿no? Pues yo, con ese naranja, igual podía ir bien un cian en algunos toques, en algunos títulos, en alguna cosa. Si no, puede ser, el hecho de que sea bicolor puede ser un poco, creo, ¿eh? Puede cansar el color naranja. Claro, es básicamente que tienes que hacer un estudio previo bastante bien hecho para que tengas tres colores y los puedas ir complementando y funcione de la manera adecuada, ¿no? Pero, sí, lo que quieres incluir... Luego, bueno, no te preocupes. Claro, o sea, ahora incluir un cian, tenéis que reestructurar todo, ¿no? ¿Dónde lo meto? Lo meto, al mejor, los overs. Claro, también hay que poner unos límites por hacerlo básico, porque si metemos tres colores ya o tres tipografías, pues empezaría a ser un poco loco todo. También hay una cosa que ocurre a ustedes en el mundo de diseño. Los diseñadores, hay veces que no tenemos total libertad y eso a veces tiene su ventaja, a sentirnos... En este proyecto en concreto no podíamos tocar nada más que sea CSS y la limitación de tipografía era dos tipos de tipos que teníamos y con colores es lo que hay, lo que estamos permitidos a cambiar. Os voy a enseñar. Por supuesto, si es un proyecto personal que yo tengo paleta de color delante, ahí sí que hago mi juego, pero aquí tenemos una serie de limitaciones que no podemos salir. Eso trabajando diariamente, yo creo que pasa muchas veces. Os voy a enseñar el mismo proyecto, el cerrado, dijéramos, acabado y guardando en sublime todo y demás, ¿vale? Fijaos, es lo mismo que estamos viendo, ¿vale? Y, hombre... Bueno, ¿de dónde venimos? Venimos de aquí, venimos de aquí, ¿vale? Esta sería la web que nos han dado, ¿vale? Con Darío a cabecera y estamos aquí. Y todos estos CSS, de hecho, si yo le paso, ¿vale? Aquí lo que tengo son propiedades de CSS de movimiento que me genera una animación, animaciones de izquierda a derecha a infinitas, ¿vale? Que se le pueden crear keyframes porque la hoja de estilos permite hacer ese tipo de animaciones. Además, también tengo lo que comentaba de los overs con las imágenes, ¿vale? En la cual está cambiando la opacidad de dentro, pero además está transformando la escala sin ningún tipo de javascript que pide más. Además, con las cajas de los articles, ¿vale? También tengo este estilo que me lo resalta de alguna manera, ¿vale? Entonces, simplemente es eso. O sea, que a veces podemos rescatar o salvar, pues, un diseño que no está un sim, que no está del todo bien apurado, ¿no? Sí, la podemos ver. No le ha ajustado tanto porque como no es un proyecto en el cual me den un dinero brutal, pues, no quería perder tanto tiempo, pero más o menos está ajustada. No le he puesto al menú hamburguesa porque ya, ¿vale? Lo fíjate, más o menos, ¿no? Habría que, ¿vale? Pero ahí la tienes. Siempre, bueno, pues hay que ir ajustando. En este caso me pasa de tres a dos, ¿vale? Y aquí, sí, he quitado contenido abajo, de hecho, se suele hacer mucho. Porque a mí me cansa cuando tengo, bueno, cuando tengo parafus y tal, que mejor en móvil no me apetece tanto ver, ¿no? Quienes un enlace y ya está. Pues no sé qué más hay que añadir. No sé, alguna cosa que os apetezca comentar, todavía no hemos pasado a las preguntas, pero bueno, si quieres se vuelva, por favor, a la presentación. Sí. Bueno, nos quedamos aquí. Hemos pasado esto, a esto, ¿vale? Vale, esto es un poco el ejercicio de antes y después, únicamente retocando el fichero CSS, nada más. Muchas gracias. Muchas gracias. Bueno, si hay alguna pregunta, no sé cuánto tiempo tenemos, dos minutos, uno. Ocho. Ocho, ah, bien. Bueno, bien. Entonces, espera, que voy a hacer una foto. Ocho, no. Y cuáles? Vale. Habla con Rana. Si pone de verdad, ¿eh? Hostia, hay, venga, va, hay demasiada gente aquí, ¿eh? Bueno, luego. ¿Alguna pregunta que se va patiendo? Hola, sí, sí, yo, bueno, solo tengo una pregunta aquí. Vale, vale, vale. Vale, sí, sí, lo entiendo. No, me gusta mucho y la verdad es que es muy práctico lo que habéis hecho, pero los cambios los haríais en un tema hijo, en una hoja CSS aparte, porque si no contactualizas el tema, generalmente te machaca todo, ¿no? Todos los archivos, el CSS, pierdes todo esto, no se lo tengas aparte. Bueno, claro. Esa es la única pregunta, ¿dónde los pondríais? Claro, podrías crear una hoja de estilo independiente, ¿vale? Que eso sería, creo que la mejor opción. Igualmente, claro, yo siempre al trabajar una medida ya no pienso en child theme y directamente lo hago de cero, pero claro, si estás partiendo de un theme ya, muchas veces tienes ya creado un style custom, ¿vale? Que lo podrías poner ahí y sobre todo, que esto lo voy a enseñar, porque claro, a ver, es un poco complicado hacer un, digéramos, con el sublime en directo el serie, pero fíjate que al final tienes que tenerlo todo súper bien formateado, ¿no? Si tú tienes un custom, pues sobre todo, en este caso, esta es la web mala, ¿vale? Digéramos, tampoco hay muchas líneas de código, pero sí que procura todos esos cambios, tenerlos bien comentados, porque si no, pues va a ser un buen drama. Entonces, buscaría si tuviera una hoja de estilo custom y si no, que rearía mi hoja de estilo custom al child theme, sí, sí, totalmente correcto. Bueno, pues ya se ha acabado el tiempo, ya falta nada más, bueno, ha estado muy bien, ¿no? Ha quedado mucho mejor el diseño con CSS y nada, pues cualquier pregunta que tengáis, pues los pilláis por aquí, que estarán toda la tarde y mañana. Venga, gracias. Muchas gracias.