WEBVTT

00:00:00.036 --> 00:00:04.486 align:middle
Si descargas el código del curso desde la
página en la que estás viendo este vídeo,

00:00:04.796 --> 00:00:07.436 align:middle
después de descomprimirlo,
encontrarás un directorio start/

00:00:07.546 --> 00:00:12.136 align:middle
que contiene la misma aplicación nueva
de Symfony 6 que hemos creado antes.

00:00:12.876 --> 00:00:19.446 align:middle
En realidad no necesitas ese código, pero contiene
un directorio extra llamado tutorial/, como el que

00:00:19.896 --> 00:00:20.936 align:middle
tengo aquí.

00:00:21.866 --> 00:00:23.916 align:middle
Este contiene algunos
archivos que vamos a utilizar.

00:00:24.746 --> 00:00:30.076 align:middle
Así que hablemos de nuestro siguiente objetivo:
hacer que este sitio parezca un sitio real...

00:00:30.496 --> 00:00:33.446 align:middle
en lugar de parecer algo
que he diseñado yo mismo.

00:00:33.816 --> 00:00:39.406 align:middle
Y eso significa que necesitamos una verdadera
maquetación HTML que incluya algo de CSS.

00:00:40.506 --> 00:00:43.956 align:middle
Sabemos que nuestro archivo de
diseño es base.html.twig...

00:00:44.446 --> 00:00:49.636 align:middle
y también hay un archivo base.html.twig
en el nuevo directorio tutorial/.

00:00:50.516 --> 00:00:51.166 align:middle
Copia eso...

00:00:51.676 --> 00:00:54.746 align:middle
pégalo en las plantillas, y anula el original.

00:00:56.336 --> 00:01:00.746 align:middle
Antes de ver eso, copia
también los tres archivos .png

00:01:01.026 --> 00:01:03.246 align:middle
y ponlos en el directorio public/...

00:01:03.536 --> 00:01:06.236 align:middle
para que nuestros usuarios
puedan acceder a ellos.

00:01:07.476 --> 00:01:08.866 align:middle
Muy bien.

00:01:08.866 --> 00:01:12.076 align:middle
Abre el nuevo archivo base.html.twig.

00:01:12.806 --> 00:01:14.636 align:middle
Aquí no hay nada especial.

00:01:15.226 --> 00:01:21.056 align:middle
Traemos algunos archivos CSS externos de
algunos CDN para Bootstrap y FontAwesome.

00:01:21.986 --> 00:01:27.866 align:middle
Al final de este tutorial, refactorizaremos esto
en una forma más elegante de manejar el CSS...

00:01:28.106 --> 00:01:31.226 align:middle
pero por ahora, esto funcionará muy bien.

00:01:32.046 --> 00:01:34.876 align:middle
Por lo demás, todo sigue estando codificado.

00:01:35.156 --> 00:01:39.206 align:middle
Tenemos una navegación
codificada, el mismo bloque body...

00:01:39.646 --> 00:01:41.146 align:middle
y un pie de página codificado.

00:01:41.146 --> 00:01:43.756 align:middle
Vamos a ver qué aspecto tiene.

00:01:44.186 --> 00:01:45.326 align:middle
Refresca y ¡vaya!

00:01:45.786 --> 00:01:49.096 align:middle
Bueno, no es perfecto, pero sí mejor

00:01:50.146 --> 00:01:55.186 align:middle
El directorio tutorial/ también contiene un
archivo app.css con CSS personalizado. Para que

00:01:56.466 --> 00:02:01.186 align:middle
esté disponible públicamente, de modo que el
navegador de nuestro usuario pueda descargarlo,

00:02:01.456 --> 00:02:04.866 align:middle
tiene que estar en algún
lugar del directorio public/.

00:02:05.386 --> 00:02:09.116 align:middle
Pero no importa dónde o cómo
organices las cosas dentro.

00:02:09.816 --> 00:02:11.676 align:middle
Vamos a crear un directorio styles/...

00:02:13.116 --> 00:02:15.306 align:middle
y luego copiemos app.css...

00:02:15.716 --> 00:02:16.756 align:middle
y pégalo allí.

00:02:18.776 --> 00:02:22.406 align:middle
De vuelta en base.html.twig,
dirígete a la parte superior.

00:02:24.876 --> 00:02:30.846 align:middle
Después de todos los archivos CSS externos, vamos a
añadir una etiqueta de enlace para nuestro app.css.

00:02:31.406 --> 00:02:35.206 align:middle
Así que <link rel="stylesheet" y href="".

00:02:36.226 --> 00:02:42.486 align:middle
Como el directorio public/ es la raíz de nuestro documento,
para referirse a un archivo CSS o de imagen allí,

00:02:42.486 --> 00:02:46.466 align:middle
la ruta debe ser con respecto a ese directorio.

00:02:47.126 --> 00:02:52.076 align:middle
Así que esto será /styles/app.css.

00:02:52.116 --> 00:02:52.846 align:middle
Vamos a comprobarlo.

00:02:53.206 --> 00:02:54.856 align:middle
Actualiza ahora y...

00:02:55.186 --> 00:02:56.336 align:middle
¡aún mejor!

00:02:57.206 --> 00:02:58.636 align:middle
Quiero que te des cuenta de algo.

00:02:59.116 --> 00:03:07.466 align:middle
Hasta ahora, Symfony no interviene para nada en cómo
organizamos o utilizamos las imágenes o los archivos CSS.

00:03:07.846 --> 00:03:13.046 align:middle
No. Nuestra configuración es muy sencilla:
ponemos las cosas en el directorio public/...

00:03:13.446 --> 00:03:15.736 align:middle
y luego nos referimos a ellas con sus rutas.

00:03:16.236 --> 00:03:21.366 align:middle
Pero, ¿tiene Symfony alguna función interesante
para ayudar a trabajar con CSS y JavaScript?

00:03:21.816 --> 00:03:22.706 align:middle
Por supuesto.

00:03:23.146 --> 00:03:26.246 align:middle
Se llaman Webpack Encore y Stimulus.

00:03:26.526 --> 00:03:29.946 align:middle
Y hablaremos de ambas hacia
el final del tutorial.

00:03:30.486 --> 00:03:35.516 align:middle
Pero incluso en esta sencilla configuración -en la que
sólo ponemos archivos en public/ y apuntamos a ellos-

00:03:36.036 --> 00:03:40.356 align:middle
Symfony tiene una característica
menor: la función asset().

00:03:41.206 --> 00:03:49.266 align:middle
Funciona así: en lugar de usar
/styles/app.css, decimos {{ asset() }} y luego,

00:03:49.446 --> 00:03:52.726 align:middle
entre comillas, movemos nuestra ruta allí...

00:03:53.246 --> 00:03:55.076 align:middle
pero sin la apertura "/".

00:03:55.076 --> 00:03:59.226 align:middle
Así, la ruta sigue siendo
relativa al directorio public/...

00:03:59.276 --> 00:04:02.006 align:middle
sólo que no necesitas incluir la primera "/".

00:04:02.006 --> 00:04:05.276 align:middle
Antes de hablar de lo que hace esto...

00:04:05.746 --> 00:04:07.196 align:middle
vamos a ver si funciona.

00:04:07.676 --> 00:04:08.936 align:middle
Refresca y...

00:04:09.786 --> 00:04:10.886 align:middle
¡no funciona!

00:04:11.286 --> 00:04:17.606 align:middle
Error: Función desconocida: ¿te has olvidado
de ejecutar composer require symfony/asset.

00:04:18.406 --> 00:04:20.626 align:middle
Sigo diciendo que Symfony empieza con poco...

00:04:21.066 --> 00:04:24.286 align:middle
y luego va instalando cosas
a medida que las necesita.

00:04:24.746 --> 00:04:30.736 align:middle
¡Aparentemente, esta función asset() viene
de una parte de Symfony que aún no tenemos!

00:04:31.336 --> 00:04:33.186 align:middle
Pero conseguirla es fácil.

00:04:33.646 --> 00:04:38.846 align:middle
Copia este comando composer require,
pásalo a tu terminal y ejecútalo:

00:04:40.236 --> 00:04:44.966 align:middle
Es una instalación bastante sencilla:
sólo descarga este paquete...

00:04:45.476 --> 00:04:47.706 align:middle
y no hay recetas.

00:04:49.106 --> 00:04:50.646 align:middle
Pero cuando probamos la página ahora...

00:04:51.776 --> 00:04:55.416 align:middle
¡funciona! Comprueba el código fuente HTML.

00:04:57.166 --> 00:05:04.666 align:middle
Es interesante: la etiqueta link href sigue
siendo, literalmente, /styles/app.css.

00:05:05.606 --> 00:05:07.996 align:middle
¡Es exactamente lo que teníamos antes!

00:05:08.536 --> 00:05:12.296 align:middle
Entonces, ¿qué diablos
hace esta función asset()?

00:05:12.786 --> 00:05:14.026 align:middle
La respuesta es...

00:05:14.266 --> 00:05:17.996 align:middle
no mucho. Pero sigue siendo
una buena idea utilizarla.

00:05:18.576 --> 00:05:21.096 align:middle
La función asset() te
ofrece dos características.

00:05:21.206 --> 00:05:26.346 align:middle
En primer lugar, imagina que te despliegas
en un subdirectorio de un dominio.

00:05:26.826 --> 00:05:31.206 align:middle
Por ejemplo, la página de inicio vive
en https://example.com/mixed-vinyl.

00:05:32.186 --> 00:05:37.296 align:middle
Si ese fuera el caso, para que
nuestro CSS funcione, el href tendría

00:05:37.296 --> 00:05:42.916 align:middle
que ser /mixed-vinyl/styles/app.css.

00:05:42.996 --> 00:05:48.696 align:middle
En esta situación, la función asset()
detectaría el subdirectorio automáticamente

00:05:49.076 --> 00:05:50.926 align:middle
y añadiría ese prefijo por ti.

00:05:52.066 --> 00:05:55.916 align:middle
Lo segundo -y más importante-
que hace la función asset()

00:05:56.246 --> 00:06:00.116 align:middle
es permitirte cambiar fácilmente
a una CDN más adelante.

00:06:00.786 --> 00:06:05.196 align:middle
Como esta ruta pasa ahora por
la función asset(), podríamos,

00:06:05.376 --> 00:06:08.326 align:middle
a través de un archivo de
configuración, decir: ¡Eh, Symfony!

00:06:08.586 --> 00:06:13.366 align:middle
Cuando saques esta ruta, ponle
como prefijo la URL de mi CDN.

00:06:14.536 --> 00:06:21.336 align:middle
Esto significa que, cuando carguemos la
página, en lugar de href="/styles/app.css,

00:06:21.666 --> 00:06:28.976 align:middle
sería algo como
https://mycdn.com/styles/app.css.

00:06:30.016 --> 00:06:34.036 align:middle
Así que la función asset() puede
que no haga nada que necesites hoy,

00:06:34.566 --> 00:06:39.776 align:middle
pero siempre que hagas referencia a un archivo
estático, ya sea un archivo CSS, un archivo JavaScript,

00:06:39.876 --> 00:06:42.646 align:middle
una imagen, lo que sea, utiliza esta función.

00:06:43.916 --> 00:06:47.836 align:middle
De hecho, aquí arriba, estoy
haciendo referencia a tres imágenes.

00:06:48.616 --> 00:06:51.436 align:middle
Vamos a utilizar asset: {{ asset()...

00:06:52.256 --> 00:06:54.916 align:middle
¡y entonces se autocompleta la ruta!

00:06:55.316 --> 00:06:56.666 align:middle
¡Gracias plugin Symfony!

00:06:57.446 --> 00:06:59.836 align:middle
Repite esto para la segunda imagen...

00:07:00.576 --> 00:07:02.126 align:middle
y la tercera.

00:07:03.876 --> 00:07:06.186 align:middle
Sabemos que esto no hará
ninguna diferencia hoy...

00:07:06.726 --> 00:07:10.596 align:middle
podemos refrescar la fuente HTML
para ver las mismas rutas...

00:07:10.986 --> 00:07:13.396 align:middle
pero estamos preparados
para un CDN en el futuro.

00:07:14.296 --> 00:07:16.546 align:middle
¡Así que el diseño ahora se ve muy bien!

00:07:17.256 --> 00:07:19.556 align:middle
Pero el contenido de nuestra
página de inicio está...

00:07:19.556 --> 00:07:21.346 align:middle
simplemente colgando...

00:07:21.346 --> 00:07:22.346 align:middle
con un aspecto extraño...

00:07:22.496 --> 00:07:23.846 align:middle
como yo en la escuela secundaria.

00:07:24.686 --> 00:07:27.906 align:middle
De vuelta al directorio tutorial/, copia
la plantilla de la pá gina de inicio...

00:07:28.096 --> 00:07:30.096 align:middle
y sobrescribe nuestro archivo original.

00:07:34.456 --> 00:07:35.166 align:middle
Ábrelo.

00:07:36.386 --> 00:07:39.166 align:middle
Esto sigue ampliando base.html.twig...

00:07:39.576 --> 00:07:41.916 align:middle
y sigue sobreescribiendo el bloque body.

00:07:42.736 --> 00:07:47.236 align:middle
Y además, tiene un montón de
HTML completamente codificado.

00:07:47.276 --> 00:07:49.986 align:middle
Vamos a ver qué aspecto tiene.

00:07:50.616 --> 00:07:51.706 align:middle
Actualiza y...

00:07:52.126 --> 00:07:54.016 align:middle
¡se ve increíble!

00:07:54.406 --> 00:07:55.406 align:middle
Excepto que...

00:07:55.406 --> 00:07:57.686 align:middle
está 100% codificado.

00:07:58.546 --> 00:07:59.436 align:middle
Vamos a arreglar eso.

00:08:00.876 --> 00:08:05.826 align:middle
En la parte superior, aquí está el nombre
de nuestro disco, imprime la variable title.

00:08:05.826 --> 00:08:09.036 align:middle
Y luego, abajo para las canciones..

00:08:09.826 --> 00:08:12.126 align:middle
tenemos una larga lista de HTML codificado.

00:08:12.826 --> 00:08:14.046 align:middle
Vamos a convertir esto en un bucle.

00:08:14.046 --> 00:08:18.906 align:middle
Añade {% for track in tracks
%} como teníamos antes.

00:08:19.576 --> 00:08:21.676 align:middle
Y... al final, endfor.

00:08:24.886 --> 00:08:27.986 align:middle
Para los detalles de las
canciones, utiliza track.song...

00:08:29.336 --> 00:08:31.176 align:middle
y track.artist.

00:08:32.676 --> 00:08:35.656 align:middle
Y ahora podemos eliminar todas
las canciones codificadas.

00:08:40.976 --> 00:08:44.346 align:middle
¡Genial! Vamos a probarlo.

00:08:45.936 --> 00:08:48.356 align:middle
¡Hey! ¡Está cobrando vida, gente!

00:08:49.336 --> 00:08:50.446 align:middle
¡Falta una página más!

00:08:50.666 --> 00:08:52.256 align:middle
La página /browse.

00:08:53.146 --> 00:08:59.236 align:middle
Ya sabes lo que hay que hacer: copiar
browse.html.twig, y pegar en nuestro directorio.

00:09:02.436 --> 00:09:08.966 align:middle
Esto se parece mucho a la página de inicio:
extiende base.html.twig y anula el bloque body.

00:09:10.246 --> 00:09:14.446 align:middle
En VinylController, no hemos
renderizado antes una plantilla...

00:09:14.676 --> 00:09:15.956 align:middle
así que hagámoslo ahora:

00:09:16.836 --> 00:09:24.866 align:middle
return $this->render('vinyl/browse.html.twig')
y pasemos el género.

00:09:25.646 --> 00:09:30.756 align:middle
Añade una variable para eso:
$genre = y si tenemos un slug...

00:09:31.046 --> 00:09:37.546 align:middle
utiliza nuestro elegante código de mayúsculas
y minúsculas, si no, ponlo en null.

00:09:38.206 --> 00:09:40.716 align:middle
Luego borra lo de $title...

00:09:40.716 --> 00:09:42.826 align:middle
y pasa genre a Twig.

00:09:46.006 --> 00:09:49.036 align:middle
De vuelta en la plantilla,
utiliza esto en el h1.

00:09:50.056 --> 00:09:53.476 align:middle
En Twig, también podemos utilizar
una sintaxis extravagante.

00:09:54.136 --> 00:10:01.246 align:middle
Así que si tenemos un genre, imprime
genre, si no imprime All Genres.

00:10:03.306 --> 00:10:04.376 align:middle
Es hora de probar.

00:10:04.756 --> 00:10:09.986 align:middle
Dirígete a /browse:
"Examinar todos los géneros"

00:10:10.446 --> 00:10:15.216 align:middle
Y luego /browse/death-metal:
"Examinar el Death Metal ".

00:10:15.216 --> 00:10:19.316 align:middle
Amigos, ¡esto empieza a
parecerse a un sitio real!

00:10:19.806 --> 00:10:22.686 align:middle
Excepto que estos enlaces en el navegador...

00:10:22.866 --> 00:10:23.926 align:middle
¡no van a ninguna parte!

00:10:24.486 --> 00:10:28.856 align:middle
Vamos a arreglar eso
aprendiendo a generar URLs.

00:10:29.646 --> 00:10:35.066 align:middle
También vamos a conocer la mega-poderosa
herramienta de línea de comandos bin/console