WEBVTT 00:00:01.176 --> 00:00:04.196 align:middle Vamos muy bien pero, Cielos! 00:00:04.376 --> 00:00:06.656 align:middle Nuestro sitio está muy feo. 00:00:06.996 --> 00:00:08.086 align:middle Es hora de arreglarlo. 00:00:08.086 --> 00:00:14.006 align:middle Si descargas el código del curso en esta página, después de que lo descomprimas, 00:00:14.116 --> 00:00:18.466 align:middle encontrarás el directorio start/ con el directorio tutorial/ ahí dentro: 00:00:18.616 --> 00:00:20.826 align:middle el mismo directorio tutorial/ que ves aquí. 00:00:21.386 --> 00:00:25.116 align:middle Vamos a copiar algunos archivos de ahí en los próximos minutos. 00:00:25.116 --> 00:00:28.696 align:middle El primero es base.html.twig. 00:00:29.486 --> 00:00:38.596 align:middle Lo voy a abrir, copiar el contenido, cerrarlo, y luego abriré nuestro templates/base.html.twig. 00:00:39.176 --> 00:00:40.596 align:middle Pega el nuevo contenido aquí. 00:00:41.426 --> 00:00:45.566 align:middle Esto no fué un gran cambio: sólo agregó algunos archivos CSS - 00:00:45.716 --> 00:00:49.266 align:middle incluyendo Bootstrap - y un poco de HTML básico. 00:00:49.976 --> 00:00:55.356 align:middle Pero tenemos los mismos bloques que antes: {% block body %} en el medio, {% block javascripts %}, 00:00:55.356 --> 00:01:03.286 align:middle {% block title %}, etc. Date cuenta que los link tags están dentro del bloque llamado stylesheets. 00:01:03.936 --> 00:01:06.126 align:middle Pero eso aun no es importante. 00:01:06.696 --> 00:01:09.526 align:middle Explicaré porque está hecho de esa forma dentro de poco. 00:01:10.176 --> 00:01:14.686 align:middle Uno de los link tags está apuntando a /css/app.css. 00:01:15.536 --> 00:01:18.976 align:middle Ese es otro archivo que vive en el directorio tutorial/. 00:01:19.316 --> 00:01:25.336 align:middle De hecho, selecciona el directorio images/ y app.css y cópialos. 00:01:25.336 --> 00:01:29.676 align:middle Ahora, selecciona el directorio public/ y pégalos. 00:01:31.546 --> 00:01:36.906 align:middle Agrega otro directorio css/ y mueve app.css adentro. 00:01:40.006 --> 00:01:43.436 align:middle Recuerda: el directorio public/ es nuestro documento raíz. 00:01:43.436 --> 00:01:49.726 align:middle Así que si necesitas que un archivo sea accesible por un usuario del navegador, entonces necesita vivir aquí. 00:01:50.506 --> 00:01:58.196 align:middle La ruta /css/app.css cargará el archivo public/css/app.css. 00:01:59.056 --> 00:02:00.336 align:middle Vamos a ver como se ve! 00:02:00.996 --> 00:02:03.266 align:middle Muévete hacia tu navegador y refresca. 00:02:03.946 --> 00:02:05.096 align:middle Mucho mejor. 00:02:05.546 --> 00:02:07.776 align:middle El centro aun se ve terrible... 00:02:07.986 --> 00:02:12.636 align:middle pero eso es porque no hemos agregado ninguna etiqueta HTML al template para esta página. 00:02:12.636 --> 00:02:15.226 align:middle Así que hagamos una pregunta... 00:02:15.406 --> 00:02:22.186 align:middle y respondámosla: que funcionalidad nos ofrece Symfony cuando se trata de CSS y JavaScript? 00:02:22.976 --> 00:02:23.836 align:middle La respuesta es... 00:02:24.146 --> 00:02:26.446 align:middle ninguna... o muchas! 00:02:26.446 --> 00:02:31.996 align:middle Symfony tiene dos niveles diferentes de integración con CSS y JavaScript. 00:02:32.516 --> 00:02:35.256 align:middle Por el momento estamos usando el nivel básico. 00:02:35.706 --> 00:02:42.026 align:middle De hecho, por ahora, Symfony no está haciendo nada por nosotros: creamos un archivo CSS, 00:02:42.306 --> 00:02:46.276 align:middle luego le agregamos un link tag muy tradicional con HTML. 00:02:46.916 --> 00:02:50.356 align:middle Symfony no está haciendo nada: todo depende de ti. 00:02:51.146 --> 00:02:57.156 align:middle El otro tipo de integración de mayor nivel es utilizar algo llamado Webpack Encore: 00:02:57.156 --> 00:03:01.926 align:middle una fantástica librería que maneja minificación de archivos, soporte de Sass, 00:03:02.216 --> 00:03:05.526 align:middle soporte a React o VueJS y otras muchas cosas. 00:03:05.966 --> 00:03:10.226 align:middle Te voy a dar un curso rápido sobre Webpack Encore al final de este tutorial. 00:03:10.626 --> 00:03:15.346 align:middle Pero por ahora, lo vamos a mantener simple: Crearás archivos CSS o de JavaScript, 00:03:15.716 --> 00:03:20.656 align:middle los pondrás dentro del directorio public/, y luego crearás un link o script tag que apunte a ellos. 00:03:21.346 --> 00:03:25.006 align:middle Bueno, de hecho, incluso con esta integración "básica", 00:03:25.096 --> 00:03:28.656 align:middle hay una pequeña funcionalidad de Symfony que debes de utilizar. 00:03:29.146 --> 00:03:32.366 align:middle Antes de mostrartelo, en PhpStorm abre preferencias... 00:03:32.886 --> 00:03:36.826 align:middle y busca de nuevo por "Symfony" para encontrar el plugin de Symfony. 00:03:36.826 --> 00:03:39.446 align:middle Ves esa option de directorio web? 00:03:39.926 --> 00:03:45.086 align:middle Cambiala a public/ - solía ser llamada web/ en versiones anteriores de Symfony. 00:03:45.746 --> 00:03:47.946 align:middle Esto nos ayudará a tener un mejor autocompletado próximamente. 00:03:48.546 --> 00:03:54.306 align:middle Presiona "Ok". Así es como funciona: cada vez que hagas referencias a un archivo estático en tu sitio - 00:03:54.426 --> 00:04:02.086 align:middle como un archivo CSS, JavaScript o imagen, en vez de solo escribir /css/app.css, 00:04:02.536 --> 00:04:06.076 align:middle debes de usar la función de Twig llamada asset(). 00:04:06.076 --> 00:04:16.426 align:middle Entonces, {{ asset() }} y luego la misma ruta que antes, pero sin la / inicial: css/app.css. 00:04:17.416 --> 00:04:20.696 align:middle Qué es lo que hace está increíble función asset()? 00:04:21.316 --> 00:04:22.626 align:middle Prácticamente.. nada. 00:04:23.216 --> 00:04:30.306 align:middle De hecho, esto va a retornar exactamente la misma ruta que antes: /css/app.css. 00:04:31.356 --> 00:04:35.316 align:middle Entonces porque nos molestamos en utilizar una función que no hace nada? 00:04:35.916 --> 00:04:38.436 align:middle Bueno, en realidad hace dos cosas... 00:04:38.516 --> 00:04:40.806 align:middle las cuales pueden o no interesarte. 00:04:40.806 --> 00:04:46.656 align:middle Primero, si decides instalar tu aplicación en un subdirectorio de un dominio - 00:04:46.996 --> 00:04:51.376 align:middle como por ejemplo ILikeMagic.com/cauldron_overflow, 00:04:51.806 --> 00:04:58.256 align:middle la función asset() automáticamente agrega el prefijo /cauldron_overflow a todas las rutas. 00:04:58.866 --> 00:04:59.806 align:middle Grandioso! 00:04:59.976 --> 00:05:00.656 align:middle si es que te interesa. 00:05:01.386 --> 00:05:08.346 align:middle La segunda cosa que hace es más útil: si decides instalar tus assets a un CDN, 00:05:08.946 --> 00:05:12.956 align:middle con agregar una linea a un archivo de configuración, repentinamente, 00:05:13.116 --> 00:05:17.506 align:middle Symfony agregará el prefijo en todas las rutas con la URL de tu CDN. 00:05:17.506 --> 00:05:23.626 align:middle Asi que... en realidad no es tán importante, pero si utilizas asset() en todos lados, 00:05:24.016 --> 00:05:25.936 align:middle serás feliz en caso de que luego lo necesites. 00:05:26.546 --> 00:05:29.226 align:middle Pero... si refrescamos... 00:05:29.226 --> 00:05:32.146 align:middle sorpresa! El sitio exploto! 00:05:32.816 --> 00:05:36.546 align:middle Acaso olvidaste correr composer require symfony/asset? 00:05:36.956 --> 00:05:38.406 align:middle La función asset no existe. 00:05:38.946 --> 00:05:40.036 align:middle Que tan genial es eso? 00:05:40.576 --> 00:05:45.976 align:middle Recuerda, Symfony empieza en pequeño: instalas las cosas sólo cuando las necesitas. 00:05:45.976 --> 00:05:50.066 align:middle En este caso, estamos tratando de utilizar una funcionalidad que no está instalada... 00:05:50.126 --> 00:05:54.646 align:middle por lo tanto Symfony nos da el comando exacto que tenemos que correr. 00:05:55.206 --> 00:06:05.256 align:middle Copialo, abre la terminal y ejecuta: composer require symfony/asset Cuando termine... 00:06:06.076 --> 00:06:07.606 align:middle regresa al navegador y... 00:06:07.846 --> 00:06:14.066 align:middle funciona. Si observas la fuente HTML y buscas app.css... 00:06:14.066 --> 00:06:18.546 align:middle Asi es! está imprimiendo la misma ruta que antes. 00:06:19.916 --> 00:06:22.196 align:middle Hagamos que el centro de nuestra página se vea un poco mejor. 00:06:22.846 --> 00:06:29.106 align:middle De vuelta en el directorio tutorial/, abre show.html.twig, copia el contenido, ciérralo, 00:06:29.546 --> 00:06:34.876 align:middle luego abre nuestra versión: templates/question/show.html.twig. 00:06:35.496 --> 00:06:36.486 align:middle Pega el nuevo código. 00:06:37.346 --> 00:06:40.586 align:middle Recuerda, aquí no está pasando nada importante: 00:06:41.046 --> 00:06:44.046 align:middle seguimos sobreescribiendo el mismo bloque title y body. 00:06:44.416 --> 00:06:50.246 align:middle Estamos usando la misma variable question y seguimos haciendo el mismo ciclo sobre answers aquí abajo. 00:06:50.646 --> 00:06:53.166 align:middle Solo tenemos mucha más sintaxis HTML... 00:06:53.406 --> 00:06:54.496 align:middle lo cual... tu sabes... 00:06:54.696 --> 00:06:55.756 align:middle hace que luzca bien. 00:06:56.946 --> 00:06:58.046 align:middle Al refrescar... 00:06:58.416 --> 00:06:59.766 align:middle mira! Hermoso! 00:07:01.506 --> 00:07:05.656 align:middle De vuelta en el template, nota que esta página tiene algunas tags img... 00:07:06.046 --> 00:07:08.796 align:middle pero no están usando la función asset(). 00:07:09.186 --> 00:07:09.876 align:middle Hay que arreglarlo. 00:07:10.396 --> 00:07:11.966 align:middle Utilizaré un atajo! 00:07:12.406 --> 00:07:15.766 align:middle Simplemente escribo "tisha", oprimo tab y... 00:07:16.016 --> 00:07:18.336 align:middle boom! el resto se agrega solo! 00:07:18.336 --> 00:07:19.936 align:middle Buscar por img... 00:07:21.686 --> 00:07:24.516 align:middle y reemplaza también esta con "tisha". 00:07:25.246 --> 00:07:26.746 align:middle Te preguntas quien es tisha? 00:07:27.406 --> 00:07:32.676 align:middle Oh, es solo una de los multiples gatos que tenemos aquí en el staff de SymfonyCasts. 00:07:32.676 --> 00:07:34.426 align:middle Esta controla a Vladimir. 00:07:35.076 --> 00:07:40.236 align:middle por cierto, en una aplicación real, en vez de que estas imágenes sean archivos estáticos en el proyecto, 00:07:40.276 --> 00:07:42.636 align:middle podrían ser archivos que los usuarios suben. 00:07:43.276 --> 00:07:47.826 align:middle No te preocupes: tenemos todo un tutorial sobre como manejar la subida de archivos. 00:07:48.546 --> 00:07:50.246 align:middle Asegurate de que esto funciona y... 00:07:50.636 --> 00:07:55.306 align:middle si funciona. La última página que no hemos estilizado es el homepage... 00:07:55.386 --> 00:07:56.486 align:middle la cual en este momento... 00:07:56.486 --> 00:07:58.966 align:middle imprime un texto. 00:07:58.966 --> 00:08:03.606 align:middle Abre el controlador: src/Controller/QuestionController.php. 00:08:03.606 --> 00:08:07.656 align:middle Asi es! Solamente retorna un nuevo objeto Response() y texto. 00:08:07.656 --> 00:08:08.346 align:middle Podemos hacerlo mejor. 00:08:08.816 --> 00:08:11.916 align:middle Cambialo por return $this->render(). 00:08:12.576 --> 00:08:15.886 align:middle Llamemos al template question/homepage.html.twig. 00:08:16.796 --> 00:08:18.316 align:middle y... por ahora... 00:08:18.416 --> 00:08:21.766 align:middle No creo que necesitemos pasar alguna variable al template... 00:08:22.046 --> 00:08:25.716 align:middle Asi que dejaré vacío el segundo argumento. 00:08:25.716 --> 00:08:31.246 align:middle Dentro de templates/question/, crea un nuevo archivo: homepage.html.twig. 00:08:32.476 --> 00:08:35.456 align:middle La mayoría de los templates empiezan de la misma forma. 00:08:35.956 --> 00:08:37.276 align:middle Genial consistencia! 00:08:38.046 --> 00:08:47.926 align:middle En la parte de arriba, {% extends 'base.html.twig' %}, {% block body %} y {% endblock %}. 00:08:47.926 --> 00:08:51.326 align:middle En medio, agrega más HTML para ver si esto funciona. 00:08:53.136 --> 00:08:55.776 align:middle Muy bien... refresca la página y... 00:08:55.776 --> 00:08:56.326 align:middle excelente! 00:08:56.906 --> 00:08:59.946 align:middle Excepto por la parte de que se ve horrible. 00:09:00.956 --> 00:09:04.486 align:middle Robemos algo de código del directorio tutorial/ una última vez. 00:09:05.136 --> 00:09:07.276 align:middle Abre homepage.html.twig. 00:09:07.806 --> 00:09:12.146 align:middle Esto es solo un montón de HTML estático para hacer que se vea mejor. 00:09:12.706 --> 00:09:15.886 align:middle Copialo, cierra ese archivo... 00:09:16.376 --> 00:09:20.786 align:middle y luego pegalo en nuestro código homepage.html.twig 00:09:21.236 --> 00:09:22.106 align:middle Y ahora... 00:09:22.516 --> 00:09:24.326 align:middle se ve mucho mejor. 00:09:24.326 --> 00:09:29.686 align:middle Así que esta es la integración básica de CSS y Javascript dentro 00:09:29.686 --> 00:09:32.876 align:middle de Symfony: tu te encargas de manejarlo. 00:09:32.876 --> 00:09:38.156 align:middle Claro, debes de utilizar la función asset(), pero no hace nada muy impresionante. 00:09:38.156 --> 00:09:41.006 align:middle Si quieres más, estás de suerte! 00:09:41.396 --> 00:09:45.056 align:middle En el último capítulo, llevaremos nuestros assets al siguiente nivel. 00:09:45.376 --> 00:09:46.876 align:middle Te va a fascinar. 00:09:46.876 --> 00:09:50.976 align:middle A continuación: nuestro sitio tiene algunos links! 00:09:50.976 --> 00:09:53.476 align:middle Y todos te llevan a ninguna parte! 00:09:53.986 --> 00:09:57.066 align:middle Aprendamos como generar URLs con rutas.