WEBVTT 00:00:01.096 --> 00:00:05.006 align:middle Para que este correo electrónico tenga un aspecto realmente nítido, tenemos que mejorar el HTML y el CSS. 00:00:05.006 --> 00:00:07.116 align:middle Empecemos por el CSS. 00:00:07.526 --> 00:00:10.766 align:middle Con el CSS estándar de un sitio web, es probable que hayas utilizado un framework CSS 00:00:10.766 --> 00:00:14.196 align:middle como Tailwind (que utiliza nuestra aplicación), Bootstrap o Foundation. 00:00:14.596 --> 00:00:16.466 align:middle ¿Existe algo así para los correos electrónicos? 00:00:16.856 --> 00:00:20.116 align:middle Sí Y es aún más importante utilizar uno para los correos electrónicos porque hay 00:00:20.116 --> 00:00:22.596 align:middle muchos clientes de correo electrónico que los renderizan de forma diferente. 00:00:22.596 --> 00:00:27.456 align:middle Para los correos electrónicos, recomendamos utilizar Foundation, ya que tiene un marco específico para correos electrónicos. 00:00:27.846 --> 00:00:30.936 align:middle Busca en Google "Foundation CSS" y encontrarás esta página. 00:00:31.586 --> 00:00:33.736 align:middle Descarga el kit de inicio para la "Versión CSS". 00:00:34.306 --> 00:00:39.606 align:middle Este archivo zip incluye un archivo foundation-emails.css que es el "framework" real. 00:00:40.036 --> 00:00:42.266 align:middle Ya lo he incluido en el directorio tutorials/. 00:00:42.596 --> 00:00:44.416 align:middle Cópialo en assets/styles/. 00:00:48.166 --> 00:00:54.086 align:middle En nuestro booking_confirmation.html.twig, el filtro inline_css puede tomar varios argumentos. 00:00:54.446 --> 00:01:01.426 align:middle Haz que el primer argumento sea source('@styles/foundation-emails.css') 00:01:01.726 --> 00:01:07.306 align:middle y utiliza email.css para el segundo argumento: Esto contendrá estilos personalizados y anulaciones. 00:01:07.776 --> 00:01:16.136 align:middle Abriré email.css y pegaré algo de CSS personalizado para nuestro correo electrónico: Ahora tenemos que mejorar nuestro HTML. 00:01:16.386 --> 00:01:17.406 align:middle Pero ¡qué noticia más rara! 00:01:17.626 --> 00:01:21.076 align:middle La mayoría de las cosas que utilizamos para dar estilo a los sitios web no funcionan en los correos electrónicos. 00:01:21.076 --> 00:01:24.036 align:middle Por ejemplo, no podemos utilizar Flexbox ni Grid. 00:01:24.486 --> 00:01:26.676 align:middle En su lugar, tenemos que utilizar tablas para la maquetación. 00:01:26.996 --> 00:01:30.676 align:middle ¡Tablas! Tablas, dentro de tablas, dentro de tablas. 00:01:30.816 --> 00:01:35.166 align:middle ¡Qué asco! Por suerte, hay un lenguaje de plantillas que podemos utilizar para hacer esto más fácil. 00:01:35.166 --> 00:01:38.586 align:middle Busca "inky templating language" para encontrar esta página. 00:01:39.036 --> 00:01:41.396 align:middle Inky está desarrollado por la Fundación Zurb. 00:01:41.746 --> 00:01:43.366 align:middle Zurb, Inky, Fundación... 00:01:43.686 --> 00:01:45.806 align:middle ¡estos nombres encajan perfectamente con nuestro tema espacial! 00:01:45.806 --> 00:01:47.436 align:middle ¡Y todos funcionan juntos! 00:01:47.916 --> 00:01:50.206 align:middle Puedes hacerte una idea de cómo funciona en la vista general. 00:01:50.726 --> 00:01:53.236 align:middle Este es el HTML necesario para un simple correo electrónico. 00:01:53.456 --> 00:01:54.676 align:middle ¡Es un infierno de tabla! 00:01:55.156 --> 00:01:56.616 align:middle Haz clic en la pestaña "Cambiar a Inky". 00:01:57.586 --> 00:01:59.206 align:middle ¡Guau! ¡Esto es mucho más limpio! 00:01:59.556 --> 00:02:04.636 align:middle Escribimos en un formato más legible e Inky lo convierte en la tabla-horror necesaria para los correos electrónicos. 00:02:05.026 --> 00:02:11.026 align:middle Incluso hay "componentes Inky": botones, llamadas, cuadrículas, etc. En tu terminal, 00:02:11.026 --> 00:02:15.266 align:middle instala un filtro Twig de Inky que convierta nuestro marcado Inky en HTML. 00:02:15.656 --> 00:02:23.736 align:middle composer require twig/inky-extra En booking_confirmation.html.twig, 00:02:24.006 --> 00:02:29.736 align:middle añade el filtro inky_to_html a apply, canalizando inline_css a continuación: En primer lugar, 00:02:29.736 --> 00:02:32.896 align:middle aplicamos el filtro Inky y, a continuación, alineamos el CSS. 00:02:33.616 --> 00:02:35.836 align:middle Copiaré el marcado Inky para nuestro correo electrónico. 00:02:36.406 --> 00:02:38.856 align:middle Tenemos un , con y . 00:02:39.166 --> 00:02:42.946 align:middle Este será un correo electrónico de una sola columna, pero puedes tener tantas columnas como necesites. 00:02:43.406 --> 00:02:45.826 align:middle Este añade espacio vertical para respirar. 00:02:46.486 --> 00:02:47.966 align:middle ¡Veamos este correo electrónico en acción! 00:02:48.296 --> 00:02:56.586 align:middle Reserva un nuevo viaje para Steve, ¡ups, debe ser una fecha en el futuro, y reserva! 00:02:58.146 --> 00:02:59.766 align:middle Comprueba Mailtrap y encuentra el correo electrónico. 00:03:00.956 --> 00:03:02.656 align:middle ¡Vaya! ¡Esto tiene mucho mejor aspecto! 00:03:03.086 --> 00:03:07.536 align:middle Podemos utilizar este pequeño widget que Mailtrap proporciona para ver cómo se verá en móviles y tabletas. 00:03:08.476 --> 00:03:12.136 align:middle Mirando el "HTML Check", parece que tenemos algunos problemas, pero, 00:03:12.136 --> 00:03:16.106 align:middle creo que mientras estemos usando Foundation e Inky como es debido, deberíamos estar bien. 00:03:16.696 --> 00:03:17.516 align:middle Comprueba los botones. 00:03:17.986 --> 00:03:20.506 align:middle "Gestionar reserva", sí, funciona. 00:03:21.016 --> 00:03:23.556 align:middle "Mi cuenta", sí, también funciona. 00:03:24.056 --> 00:03:26.796 align:middle ¡Todo un éxito rápido gracias a Foundation e Inky! 00:03:27.416 --> 00:03:31.206 align:middle A continuación, vamos a mejorar aún más nuestro correo electrónico incrustando la imagen del viaje 00:03:31.206 --> 00:03:35.276 align:middle y haciendo felices a los abogados añadiendo un archivo adjunto en PDF con las "condiciones del servicio".