1 00:00:00,550 --> 00:00:08,050 Bienvenidos en esta clase vamos a ver los recursos estáticos web para utilizar dentro de nuestra aplicación 2 00:00:08,140 --> 00:00:14,950 en las pistas en el HTML, como por ejemplo incluir imágenes, incluir hojas, estilos JavaScript, 3 00:00:15,130 --> 00:00:17,050 incluso HTML estático. 4 00:00:17,110 --> 00:00:23,990 Todos estos archivos estáticos se guardan dentro de resources en los recursos en la carpeta estática. 5 00:00:24,220 --> 00:00:32,290 Acá vamos a guardar todo lo que son archivos CSS 10 o scrip imágenes, cualquier recurso estático. 6 00:00:32,410 --> 00:00:43,150 Vamos a crear una carpeta dentro static click derecho new folder CSS Finalizar Dentro de esta carpeta 7 00:00:43,210 --> 00:00:46,150 vamos a crear un archivo new otro. 8 00:00:46,660 --> 00:00:52,960 Nos vamos a web y buscamos CSS Effi un archivo de hojas estilo siguiente. 9 00:00:53,830 --> 00:00:55,270 Le vamos a llamar style. 10 00:00:56,800 --> 00:01:00,010 Finalizar bien, vamos a quitar esto que viene por defecto. 11 00:01:00,070 --> 00:01:05,920 Vamos a crear una clase, un estilo aplicado a los títulos, a la H1 y al H2. 12 00:01:06,070 --> 00:01:14,230 Entonces con H1 el nombre del elemento punto para indicar para implementar el nombre de una clase de 13 00:01:14,230 --> 00:01:18,460 un estilo color rojo las llaves. 14 00:01:19,030 --> 00:01:30,250 Acá indicamos el color del texto color 2 punto raed un color por defecto css bien otro más h2 punto 15 00:01:31,270 --> 00:01:39,120 color azul color blood blood también es un color propio de CSS. 16 00:01:39,490 --> 00:01:40,600 Bien, vamos a guardar. 17 00:01:42,040 --> 00:01:47,740 Ahora tenemos que aplicar estos colores en la vista index del controlador index. 18 00:01:47,770 --> 00:01:49,690 Controlás nos vamos a template. 19 00:01:50,020 --> 00:01:51,130 Nos vamos a index. 20 00:01:51,410 --> 00:01:53,140 HTML el que está en la raíz. 21 00:01:53,950 --> 00:01:58,240 Acá tenemos el H1 con el atributo class. 22 00:01:58,900 --> 00:02:04,450 Indicamos el estilo a través del nombre que le dimos color rojo. 23 00:02:05,260 --> 00:02:07,960 También un h2 para el ejemplo 24 00:02:10,780 --> 00:02:14,950 color azul y un texto como por ejemplo decorando con estilo CSS 25 00:02:20,530 --> 00:02:21,910 recursos estáticos. 26 00:02:22,000 --> 00:02:26,800 Bien, pero ahora tenemos que enlazar este documento html, el index. 27 00:02:26,890 --> 00:02:30,370 HTML a este recurso estático, a esta hoja de estilo. 28 00:02:30,490 --> 00:02:34,770 Para eso utilizamos el elemento, la etiqueta link. 29 00:02:35,890 --> 00:02:46,390 Dentro del Geet del HTML Link con atributos, por ejemplo, rel rel es bien importante, ya que indica 30 00:02:46,480 --> 00:02:52,330 la relación entre este HTML, el index con la hoja de estilos que vamos a incluir. 31 00:02:52,450 --> 00:02:58,930 La relación justamente tiene que ir como valor style chit espacio. 32 00:02:59,650 --> 00:03:04,600 El tipo de contenido del tipo texto es larch se es es. 33 00:03:04,780 --> 00:03:10,990 Y luego la ubicación de este recurso estático dentro de proyecto lo tenemos en static, pero esto está 34 00:03:10,990 --> 00:03:12,920 configurado por defecto en Springwood. 35 00:03:13,090 --> 00:03:20,740 Entonces la ruta es a partir de CSS, ya que estatica en la raíz para estos recursos estáticos usándote 36 00:03:20,740 --> 00:03:23,140 h href una ruta. 37 00:03:23,260 --> 00:03:29,260 Por lo tanto, igual que cualquier ruta de nuestro proyecto, como lo vimos con los controladores rutas 38 00:03:29,350 --> 00:03:34,180 a los métodos handler del controlador se escriben con el arroba y las llaves. 39 00:03:34,630 --> 00:03:36,400 Comienza siempre con el art. 40 00:03:37,210 --> 00:03:45,010 La carpeta en este caso CSS y el nombre del archivo hasta el punto C es y guardamos. 41 00:03:45,160 --> 00:03:52,420 Usamos el arroba y las llaves para cualquier ruta, ya sea recursos estáticos o rutas hacia métodos 42 00:03:52,510 --> 00:03:57,700 del controlador mapeados con QUET mapping o con request mapping, tal como lo hemos visto. 43 00:03:57,790 --> 00:04:06,220 Pero acá aplicado a recursos estáticos, también vamos a incluir una imagen y emerge un elemento HTML 44 00:04:06,220 --> 00:04:07,540 para incluir imágenes. 45 00:04:08,290 --> 00:04:13,630 Usamos el atributo C RC Por supuesto, primero con Taime LIF. 46 00:04:14,520 --> 00:04:19,870 También es una ruta, por lo tanto con el arroba, las llaves y la ubicación de esta imagen. 47 00:04:20,050 --> 00:04:29,890 Bien, vamos a crear una carpeta en static con click derecho new folder image o imágenes como le queramos 48 00:04:29,890 --> 00:04:33,360 llamar finalizar y dentro de image. 49 00:04:33,820 --> 00:04:37,720 Vamos a copiar cualquier imagen que tenga jpg o PNG. 50 00:04:38,680 --> 00:04:42,940 En mi caso copié una imagen de Spring punto png. 51 00:04:43,600 --> 00:04:44,320 Acá la tengo. 52 00:04:44,500 --> 00:04:55,840 Entonces la idea es incluir esta imagen debajo del H2, la ruta images y el nombre spring punto png. 53 00:04:55,960 --> 00:04:57,430 El nombre del archivo. 54 00:04:57,670 --> 00:05:00,250 Bien, vamos a guardar y vamos a levantar. 55 00:05:03,450 --> 00:05:11,640 En el navegador nos vamos a localhost 80 80 app de que la raíz del index controles llega, tenemos el 56 00:05:11,640 --> 00:05:20,580 h1 de color rojo, el H2 de color azul y laimagen recursos estáticos, hoja de estilos, imágenes y 57 00:05:20,580 --> 00:05:25,530 también podríamos incluir JavaScript, cosa que vamos a ver después durante el curso. 58 00:05:25,590 --> 00:05:31,590 Por ejemplo, para trabajar con Vickery, con librerías JavaScript, también vamos a trabajar con pústula 59 00:05:31,740 --> 00:05:33,780 para dar estilos a nuestras listas. 60 00:05:33,870 --> 00:05:40,500 También vamos a incluir estos CSS dentro de static, pero por ahora nada más nos vemos.