1 00:00:01,440 --> 00:00:03,080 Este va a ser un video bastante rápido. 2 00:00:03,090 --> 00:00:07,800 Solo quiero resaltar algunas de las herramientas de desarrollador que Google Chrome nos brinda para trabajar 3 00:00:07,800 --> 00:00:09,710 con cada equipo y ver evaluar. 4 00:00:09,720 --> 00:00:12,260 Esta es la lista de tareas pendientes que hicimos en el último video. 5 00:00:12,360 --> 00:00:16,950 Todavía es tan feo como lo era entonces y quiero resaltar dos cosas. 6 00:00:17,130 --> 00:00:23,040 Entonces, lo primero que podemos ver es la fuente de la página tal como lo hicimos con otras personas. 7 00:00:23,040 --> 00:00:28,210 Cada uno salió al principio de este curso, pero eso no es tan útil. 8 00:00:28,230 --> 00:00:35,400 Realmente no podemos cambiar esto ni nada, pero lo que podemos hacer es hacer clic derecho y hacer clic en inspeccionar elemento. 9 00:00:37,110 --> 00:00:40,170 Y lo que esto hará es lanzar el inspector de elementos. 10 00:00:40,320 --> 00:00:43,170 Entonces verán que tenemos esta nueva vista aquí. 11 00:00:43,530 --> 00:00:47,080 Entonces, hay un montón de pestañas que vamos a aprender sobre todo esto a tiempo. 12 00:00:47,160 --> 00:00:50,270 Por ahora solo estamos comenzando en la pestaña de este elemento. 13 00:00:50,370 --> 00:00:56,700 Entonces, ¿qué es esto? Es en realidad una buena representación interactiva de todos los elementos. 14 00:00:56,700 --> 00:00:59,280 Entonces puedes ver que tenemos nuestro doctype. 15 00:00:59,370 --> 00:01:03,600 Cada equipo tendrá la cabeza del cuerpo. 16 00:01:03,840 --> 00:01:11,970 nosotros y nuestros aliados, así como las entradas, y lo primero que quiero que noten es al pasar sobre estos elementos. 17 00:01:11,970 --> 00:01:13,650 O cada uno de 18 00:01:13,710 --> 00:01:15,420 Así que pasemos sobre este H-1. 19 00:01:15,690 --> 00:01:17,810 En realidad está resaltado aquí. 20 00:01:18,000 --> 00:01:23,230 Así que coloco el cursor aquí y se resalta para mostrarme que aquí está el que está hablando. 21 00:01:23,260 --> 00:01:27,960 Aquí está la UL o aquí está la casilla de verificación de entrada. 22 00:01:28,290 --> 00:01:30,020 Aquí está el texto, etc. 23 00:01:30,120 --> 00:01:32,790 Entonces esto es útil en sí mismo. 24 00:01:32,790 --> 00:01:38,340 cosas y ver qué espacio está ocupando un elemento y dónde cae en el flujo de un documento. 25 00:01:38,340 --> 00:01:39,100 Solo para depurar 26 00:01:39,360 --> 00:01:44,140 Pero lo que realmente quiero enfocar es la pestaña CSSA aquí la pestaña de estilos. 27 00:01:44,190 --> 00:01:45,890 Entonces, seleccionemos una de estas cosas. 28 00:01:46,080 --> 00:01:51,600 Seleccionemos este aliado con la clase completada la parte superior o la segunda. 29 00:01:51,810 --> 00:01:53,000 Y voy a hacer clic en él. 30 00:01:53,160 --> 00:02:00,600 Y aquí estoy viendo una vista interactiva de todos los estilos que este elemento le ha 31 00:02:00,600 --> 00:02:01,700 aplicado actualmente. 32 00:02:02,070 --> 00:02:10,620 a la clase completa tiene esta línea de decoración de texto debido al código de vuelo que escribí para todos los aliados. 33 00:02:10,770 --> 00:02:12,540 Entonces vemos que debido 34 00:02:12,540 --> 00:02:16,500 Tiene un borde rojo y lo que podemos hacer es encenderlo o apagarlo. 35 00:02:16,920 --> 00:02:21,360 Así que ahora he desactivado todos los aliados con bordes rojos. 36 00:02:21,390 --> 00:02:29,800 Puedo volver a encenderlos y puedo cambiar esto en vivo aquí para que sea de 6 píxeles o 10 o un píxel. 37 00:02:30,210 --> 00:02:35,050 Puedo hacer clic en el color y elegir un nuevo color para darle un borde azul. 38 00:02:35,100 --> 00:02:38,900 Una cosa que destacaré es que esto en realidad no cambia nuestro archivo en absoluto. 39 00:02:38,910 --> 00:02:44,360 Esto solo está en el navegador tan pronto como actualice esta página o cierre la ventana, mis cambios desaparecerán. 40 00:02:44,370 --> 00:02:47,340 Entonces esto es útil en dos formas diferentes. 41 00:02:47,340 --> 00:02:54,150 Una de ellas es trabajar en su propio código en su propia página y probar cosas y ver qué sucede cuando cambia el color 42 00:02:54,420 --> 00:02:59,180 o si cambia el borde o si cambia algún otro atributo de alguna de sus propiedades y 43 00:02:59,340 --> 00:03:01,320 simplemente lo ve de forma visual inmediatamente. 44 00:03:01,320 --> 00:03:05,990 La otra cosa que es útil es mirar el código de otra persona. 45 00:03:06,150 --> 00:03:09,570 Entonces, tengo MVNO abierto solo en la página de inicio. 46 00:03:10,200 --> 00:03:14,910 Digamos que quería saber un poco más sobre este texto aquí mismo. 47 00:03:15,270 --> 00:03:20,790 Lo que puedo hacer es hacer clic derecho en él y hacer clic en inspeccionar elemento. 48 00:03:21,360 --> 00:03:25,000 Y si hago clic en un elemento en particular, en realidad se destacará para mí. 49 00:03:25,350 --> 00:03:31,670 Entonces puede ver que saltó de inmediato a la etiqueta correcta, que es un conocimiento compartido H-1. 50 00:03:31,680 --> 00:03:33,430 Y luego hay un lapso allí también. 51 00:03:33,450 --> 00:03:34,920 Dice para la web abierta. 52 00:03:35,240 --> 00:03:37,190 Así que echemos un vistazo a la H-1. 53 00:03:37,470 --> 00:03:40,530 Y aquí obtengo todos los estilos. 54 00:03:40,650 --> 00:03:41,980 Entonces el primero es color. 55 00:03:42,210 --> 00:03:46,630 Si cambio, el color de ese H-1 cambia. 56 00:03:46,890 --> 00:03:54,390 poder desplazarme hacia abajo y en algún momento alguien que Mazola escribió los estilos que aplica una fuente. 57 00:03:54,720 --> 00:03:57,360 Digamos que quería saber la fuente para 58 00:03:57,360 --> 00:04:03,060 Aquí está el asunto y esto es en lo que nos vamos a enfocar en los próximos videos es que 59 00:04:03,060 --> 00:04:06,030 esto podría ser heredado de otro selector en alguna parte. 60 00:04:06,030 --> 00:04:11,200 Por lo tanto, podría haberse aplicado directamente a todo el cuerpo, no solo a H-1. 61 00:04:11,250 --> 00:04:13,940 Entonces, si te desplazas hacia abajo, parece que está aquí. 62 00:04:13,950 --> 00:04:21,640 La familia de fuentes abierta envía luz a un sentido muy real si y eso parece que lo hace. 63 00:04:22,560 --> 00:04:25,010 Así que esto no es para mostrar cómo hacemos la fuente. 64 00:04:25,020 --> 00:04:26,950 Es un video por separado que aparecerá pronto. 65 00:04:26,970 --> 00:04:31,800 Esto es solo para mostrarte que si querías encontrar algo sobre una página digamos 66 00:04:31,800 --> 00:04:35,810 que quería saber qué tipo de elemento tienen estos botones aquí. 67 00:04:35,900 --> 00:04:45,330 El papel del ícono que puedo seleccionar es una lupa y colocar el cursor sobre las cosas y hacer clic y me 68 00:04:45,330 --> 00:04:47,250 mostrará justo aquí un ojo. 69 00:04:47,340 --> 00:04:52,790 Entonces, un ojo es otra etiqueta utilizada para iconos y podemos ver todos los estilos aquí. 70 00:04:52,880 --> 00:04:57,810 Lo mismo si quiero ver qué elemento es aquí, puedo hacer clic en él 71 00:04:57,810 --> 00:05:03,080 una vez que tienen la lupa y veo que es una etiqueta de anclaje y parece. 72 00:05:03,090 --> 00:05:08,730 es una etiqueta de anclaje que debe significar que están configurando una imagen de fondo en algún lugar y veamos dónde está. 73 00:05:08,960 --> 00:05:11,190 Por lo tanto, no es una etiqueta de imagen, 74 00:05:11,270 --> 00:05:11,850 Aquí vamos. 75 00:05:11,850 --> 00:05:14,860 Están configurando la imagen de fondo para que sea esta imagen aquí. 76 00:05:15,090 --> 00:05:20,130 Así que para resumir todo esto, solo quería demostrar que puede abrir este Inspektor en Google Chrome 77 00:05:20,130 --> 00:05:26,550 y puede ver la HMO y puede ver la evaluación y no solo puede verla, sino que puede manipularla, puede interactuar 78 00:05:26,550 --> 00:05:31,260 con ella. puede intentar cambiar cosas y puede hacerlo en sus propios sitios o puede hacerlo 79 00:05:31,260 --> 00:05:33,100 en el sitio de otra persona. 80 00:05:33,150 --> 00:05:37,740 útil cuando quieres salir y replicar el diseño de alguien donde quieras replicar en efecto. 81 00:05:37,740 --> 00:05:39,130 Por lo tanto, es muy 82 00:05:39,150 --> 00:05:43,500 Y cuando llegamos a Javascript, realmente vemos que podemos hacer exactamente lo mismo con JavaScript.