1 00:00:03,780 --> 00:00:07,090 Es hora de pasar al siguiente ejercicio. 2 00:00:07,090 --> 00:00:10,005 En este ejercicio vamos a tratar las imágenes, 3 00:00:10,005 --> 00:00:13,660 cómo incluimos imágenes en nuestras páginas web 4 00:00:13,660 --> 00:00:21,030 y cómo podemos hacer uso del objeto multimedia en nuestra página web. 5 00:00:21,040 --> 00:00:23,240 Como primer paso, 6 00:00:23,240 --> 00:00:27,890 vaya a las instrucciones de ejercicio y descargue el archivo image.zip, 7 00:00:27,890 --> 00:00:34,550 y luego guárdelo en su carpeta de confusión. 8 00:00:35,890 --> 00:00:42,360 Y luego descomprima el archivo para obtener una carpeta llamada, img, 9 00:00:42,360 --> 00:00:44,210 y dentro de ella encontrarás 10 00:00:44,210 --> 00:00:49,175 algunas imágenes que vamos a utilizar en este ejercicio. 11 00:00:49,175 --> 00:00:53,115 Todas las imágenes están en formato png en esa carpeta. 12 00:00:53,115 --> 00:00:58,785 Ahora vamos a trabajar para añadir algunas imágenes a la página. 13 00:00:58,785 --> 00:01:02,310 Primero, agreguemos el logotipo de nuestro restaurante. 14 00:01:02,310 --> 00:01:06,360 Entonces, yendo a la página index.html, en el Jumbotron, 15 00:01:06,360 --> 00:01:11,130 verás que el segundo div aquí tiene el col-sm. 16 00:01:11,130 --> 00:01:17,295 Por lo tanto, vamos a arreglar eso agregando a este div, 17 00:01:17,295 --> 00:01:24,030 y alinear el auto centro a este div. 18 00:01:24,030 --> 00:01:26,620 Ahora, a este div, 19 00:01:26,620 --> 00:01:28,515 vamos a agregar una imagen. 20 00:01:28,515 --> 00:01:33,790 Entonces, déjame usar la imagen con la fuente, img. 21 00:01:33,790 --> 00:01:40,710 Ya hemos puesto la carpeta de imágenes que contiene las imágenes en nuestro proyecto. 22 00:01:40,710 --> 00:01:49,150 Entonces, a partir de ahí, agregaré el archivo logo.png como la imagen aquí. 23 00:01:49,150 --> 00:01:58,140 Además, voy a agregar la clase como fluido de imagen, para 24 00:01:58,140 --> 00:02:06,410 que esta imagen responda automáticamente y se adapte al tamaño de la pantalla. 25 00:02:07,160 --> 00:02:09,634 Vamos a guardar los cambios. 26 00:02:09,634 --> 00:02:14,810 Vamos a aplicar el mismo cambio a la página aboutus.html, 27 00:02:14,810 --> 00:02:19,855 y también a la página contactus.html en el Jumbotron. 28 00:02:19,855 --> 00:02:23,350 Ahora, cuando eches un vistazo más de cerca a tu página web, 29 00:02:23,350 --> 00:02:26,350 verás que en el Jumbotron, 30 00:02:26,350 --> 00:02:29,210 justo después de estas palabras, 31 00:02:29,210 --> 00:02:34,120 verás la imagen de nuestro restaurante insertada allí. 32 00:02:34,120 --> 00:02:36,905 A continuación, vamos a ir a la barra de navegación, 33 00:02:36,905 --> 00:02:41,750 y luego donde tenemos esto para la marca navbar, 34 00:02:41,750 --> 00:02:47,915 voy a reemplazar estas palabras para el restaurante con el logotipo correspondiente. 35 00:02:47,915 --> 00:02:57,650 Entonces, estas palabras voy a reemplazar eso con img, 36 00:02:57,650 --> 00:03:03,280 y la fuente es logo.png. 37 00:03:03,280 --> 00:03:13,750 Además, voy a especificar un atributo de altura de 30 38 00:03:14,310 --> 00:03:20,950 y un atributo de ancho de 41 a este logotipo. 39 00:03:20,950 --> 00:03:28,530 Este tamaño es adecuado para la marca navbar allí. 40 00:03:28,530 --> 00:03:30,330 Por lo tanto, vamos a guardar los cambios. 41 00:03:30,330 --> 00:03:35,895 Voy a ir y hacer el mismo cambio en la página aboutus.html, 42 00:03:35,895 --> 00:03:39,745 y también en la página contactus.html. 43 00:03:39,745 --> 00:03:41,790 Echando un vistazo a la página web ahora, 44 00:03:41,790 --> 00:03:44,900 verá que el nombre del restaurante ha sido 45 00:03:44,900 --> 00:03:49,835 reemplazado por el logotipo del restaurante en tamaño pequeño allí. 46 00:03:49,835 --> 00:03:53,280 Ahora verá que cuando navegue a la página Acerca de, 47 00:03:53,280 --> 00:03:56,720 verá la imagen que se incluye allí 48 00:03:56,720 --> 00:03:59,700 y, de manera similar, en la página Contacto, 49 00:03:59,700 --> 00:04:04,995 verá que la imagen se ha actualizado volviendo a la página principal. 50 00:04:04,995 --> 00:04:07,080 Ahora, lo que vamos a hacer, 51 00:04:07,080 --> 00:04:13,980 es usar un objeto multimedia en lugar de estas descripciones que tenemos aquí, 52 00:04:13,980 --> 00:04:19,095 y luego usar el objeto multimedia para reemplazarlos 53 00:04:19,095 --> 00:04:25,370 con la descripción y también una imagen a incluir. 54 00:04:25,370 --> 00:04:29,890 Eso da una mejor vista de nuestra página web. 55 00:04:29,890 --> 00:04:32,725 Entonces, sigamos adelante y hagamos ese cambio. 56 00:04:32,725 --> 00:04:37,695 Para hacer uso del objeto multimedia en nuestra página index.html, 57 00:04:37,695 --> 00:04:40,555 iremos a la primera fila de contenido aquí. 58 00:04:40,555 --> 00:04:44,930 Y luego, justo allí, en el segundo div, 59 00:04:44,930 --> 00:04:51,380 voy a introducir un nuevo desarrollo con los medios de la clase, 60 00:04:51,380 --> 00:04:57,500 y encerrar el contenido dentro de este div allí, 61 00:04:57,500 --> 00:05:01,245 cerrando el div. 62 00:05:01,245 --> 00:05:04,940 Ahora, dentro de este div, 63 00:05:04,940 --> 00:05:10,820 voy a introducir una imagen para ser usada allí. 64 00:05:10,820 --> 00:05:14,840 Aquí entro y digo clase de imagen, 65 00:05:14,840 --> 00:05:20,120 y para usar una imagen en un objeto multimedia, 66 00:05:20,120 --> 00:05:26,820 necesitamos aplicar algunas clases relacionadas con flex adicionales aquí, 67 00:05:26,820 --> 00:05:31,545 así que aplico el d-flex, y luego mr-3. 68 00:05:31,545 --> 00:05:40,035 Entonces, M significa margen derecho con el número 3. 69 00:05:40,035 --> 00:05:43,625 Esto da suficiente margen a la derecha de esta imagen, de 70 00:05:43,625 --> 00:05:53,205 modo que la descripción está ligeramente separada de la imagen en la página web. 71 00:05:53,205 --> 00:05:59,370 Y luego usaré la miniatura de la imagen para esta imagen, 72 00:05:59,370 --> 00:06:08,650 y luego también usaré align-self-center para la imagen, 73 00:06:08,650 --> 00:06:16,350 y luego escribiré el origen de la imagen, que es img, 74 00:06:16,350 --> 00:06:23,570 y puedes 75 00:06:23,570 --> 00:06:30,680 buscar el nombre de la imagen en la carpeta img, 76 00:06:30,680 --> 00:06:34,340 y déjame darle una alternativa allí, 77 00:06:36,240 --> 00:06:39,005 y cerrar la imagen. 78 00:06:39,005 --> 00:06:43,465 Esto ahora incluirá la imagen en mi objeto midi. 79 00:06:43,465 --> 00:06:49,830 Además, voy a crear el cuerpo de los medios para esta imagen 80 00:06:49,830 --> 00:06:56,840 diciendo cuerpo de medios de la clase div, 81 00:06:56,840 --> 00:07:06,055 y luego encerré este h2 y p que contiene la descripción dentro de este div allí. 82 00:07:06,055 --> 00:07:10,365 Entonces, déjame sangrar el contenido allí, 83 00:07:10,365 --> 00:07:16,395 y luego cerrar ese div aquí. 84 00:07:16,395 --> 00:07:23,395 Con eso, mi descripción está encerrada dentro del cuerpo de los medios de comunicación. 85 00:07:23,395 --> 00:07:25,430 Además de este h2, 86 00:07:25,430 --> 00:07:30,955 voy a introducir una clase como mt-0. 87 00:07:30,955 --> 00:07:37,785 Con esto, esta clase dice margen superior cero. 88 00:07:37,785 --> 00:07:44,940 Este título se alineará con la parte superior de este objeto multimedia en particular aquí. 89 00:07:44,940 --> 00:07:48,120 Con estos cambios, vamos a guardar los cambios y 90 00:07:48,120 --> 00:07:51,705 luego ir y echar un vistazo rápido a nuestra página web. Al 91 00:07:51,705 --> 00:07:53,930 ir a nuestra página web, 92 00:07:53,930 --> 00:07:56,980 usted notará inmediatamente el cambio en la página web. 93 00:07:56,980 --> 00:08:00,115 Ahora puede ver que hay una posición de imagen aquí, 94 00:08:00,115 --> 00:08:03,650 y luego la descripción 95 00:08:03,650 --> 00:08:08,375 que estaba antes en esa ubicación se ha colocado correctamente aquí. 96 00:08:08,375 --> 00:08:13,280 Contraste esto con las dos filas restantes, 97 00:08:13,280 --> 00:08:17,290 y ahora empezarás a ver cómo el objeto multimedia nos ayuda 98 00:08:17,290 --> 00:08:23,545 a transformarlo en algo más vibrante. 99 00:08:23,545 --> 00:08:30,270 Voy a hacer lo mismo en la tercera fila. 100 00:08:30,270 --> 00:08:38,155 La segunda fila se dejará como un ejercicio para usted en la asignación. Al 101 00:08:38,155 --> 00:08:40,680 ir a ese tercer ejercicio, 102 00:08:40,680 --> 00:08:48,730 voy a aplicar un cambio similar a esta tercera fila para introducir el objeto multimedia aquí. 103 00:08:48,730 --> 00:08:51,595 Permítanme presentar el objeto multimedia allí, 104 00:08:51,595 --> 00:08:54,240 y luego a este div, 105 00:08:54,240 --> 00:08:57,115 vaya al objeto multimedia 106 00:08:57,115 --> 00:09:01,290 y luego introduzca la imagen que voy a usar aquí. 107 00:09:01,290 --> 00:09:05,410 Uso la clase como d-flex mr-3. 108 00:09:05,410 --> 00:09:08,830 Si está posicionando la imagen hacia el lado derecho, 109 00:09:08,830 --> 00:09:14,060 entonces necesita dar un margen como ml-3 para ella. 110 00:09:14,060 --> 00:09:20,560 Además, voy a agregar en la clase de miniatura de imagen a esto, 111 00:09:20,560 --> 00:09:26,005 y luego también decir, alinear-auto-centro. 112 00:09:26,005 --> 00:09:31,010 Estas son las clases que voy a agregar a esta imagen. 113 00:09:31,010 --> 00:09:35,670 Y luego, especifiquemos el origen de esta imagen, 114 00:09:35,760 --> 00:09:46,880 img y alberto.png, y luego especificaré la alternativa. 115 00:09:52,060 --> 00:09:57,400 Y después de esto, este h2 y h4 y el p, 116 00:09:57,400 --> 00:10:07,140 voy a cerrarlos dentro de un div de cuerpo de medios aquí, 117 00:10:07,760 --> 00:10:11,845 cerrando el div del cuerpo de los medios. 118 00:10:11,845 --> 00:10:17,845 Ahora hemos completado el objeto multimedia en la tercera fila. 119 00:10:17,845 --> 00:10:19,230 Vamos a guardar los cambios, 120 00:10:19,230 --> 00:10:22,700 y luego ir y echar un vistazo a nuestra página web a continuación. 121 00:10:22,700 --> 00:10:25,480 Ahora, echando un vistazo a nuestra página web, 122 00:10:25,480 --> 00:10:30,685 notarás que tenemos la descripción del plato allí. 123 00:10:30,685 --> 00:10:32,760 Ahora, si se mueve a la tercera fila, 124 00:10:32,760 --> 00:10:37,705 ahora verá cómo también se ha redefinido la tercera fila. 125 00:10:37,705 --> 00:10:40,425 Tenga en cuenta el uso del medio izquierdo, 126 00:10:40,425 --> 00:10:45,210 lo que significa que la imagen se coloca en el lado izquierdo de este objeto multimedia 127 00:10:45,210 --> 00:10:52,230 y, a continuación, la página media coloca la imagen en el centro de la descripción. 128 00:10:52,230 --> 00:10:55,760 También puede utilizar los medios superior e inferior, 129 00:10:55,760 --> 00:11:01,970 para alinear la imagen con la parte superior e inferior de esta descripción. 130 00:11:01,970 --> 00:11:05,185 Con esto, completamos este ejercicio. 131 00:11:05,185 --> 00:11:12,970 En este ejercicio, analizamos el uso de imágenes y objetos multimedia en nuestra página web. 132 00:11:12,970 --> 00:11:14,535 Este es un buen momento, de nuevo, 133 00:11:14,535 --> 00:11:16,365 para hacer un buen comentario, 134 00:11:16,365 --> 00:11:19,960 con el mensaje, las imágenes y los medios de comunicación.