1 00:00:00,000 --> 00:00:02,160 Muy bien, es tan técnicamente hemos 2 00:00:02,160 --> 00:00:04,410 terminado de construir nuestra página web. 3 00:00:04,410 --> 00:00:05,840 Tenemos la página de inicio, 4 00:00:05,835 --> 00:00:07,335 tenemos la página del blog, 5 00:00:07,335 --> 00:00:09,305 y también tendremos una página de contacto 6 00:00:09,300 --> 00:00:11,550 así como el encabezado y pie de página. 7 00:00:11,550 --> 00:00:12,840 Pero hay una cosa muy, muy 8 00:00:12,840 --> 00:00:14,670 importante que tenemos que cuidar y 9 00:00:14,670 --> 00:00:17,970 que va a ser diseño receptivo. 10 00:00:17,969 --> 00:00:20,129 Recuerda siempre que tantas personas 11 00:00:20,130 --> 00:00:24,060 hoy en día usan sus teléfonos móviles para navegar por Internet. 12 00:00:24,060 --> 00:00:25,640 Y si alguien tropeza, 13 00:00:25,635 --> 00:00:28,665 tropeza con tu sitio web en el teléfono móvil, 14 00:00:28,665 --> 00:00:31,455 quieres asegurarte de que se vea bien. 15 00:00:31,455 --> 00:00:33,065 Entonces lo que vamos a hacer en 16 00:00:33,060 --> 00:00:34,380 el resto de esta sección es que te voy a 17 00:00:34,380 --> 00:00:37,760 mostrar cómo puedes reconstruir el encabezado, la página de inicio, 18 00:00:37,755 --> 00:00:39,275 el pie de página, 19 00:00:39,270 --> 00:00:41,640 y las otras páginas para lucir receptivas. 20 00:00:41,635 --> 00:00:44,285 Para que si se ve en un dispositivo tablet 21 00:00:44,285 --> 00:00:47,285 o en un dispositivo móvil, se verá bien. 22 00:00:47,285 --> 00:00:48,205 Lambdas te dan una demostración muy, 23 00:00:48,200 --> 00:00:49,430 muy rápida en este momento 24 00:00:49,430 --> 00:00:51,470 esto es para la vista de la tableta. 25 00:00:51,470 --> 00:00:52,870 Se puede ver que he reducido 26 00:00:52,865 --> 00:00:55,265 el tamaño de mi pantalla al de una tableta. 27 00:00:55,265 --> 00:00:56,755 Y se puede ver en este momento que todavía 28 00:00:56,750 --> 00:00:58,510 se ve muy, muy, muy bien. 29 00:00:58,505 --> 00:01:00,865 No tenemos ningún problema con el espacio en el encabezado. 30 00:01:00,860 --> 00:01:01,870 Se ve bien. 31 00:01:01,865 --> 00:01:03,625 La sección de notas de testimonio se ve bien. 32 00:01:03,620 --> 00:01:04,930 La foto se ve bien. 33 00:01:04,925 --> 00:01:06,865 Pero ahora si me desplaza todo el camino hacia abajo 34 00:01:06,860 --> 00:01:08,900 hasta el tamaño de pantalla más pequeño, 35 00:01:08,900 --> 00:01:11,260 que normalmente será tu teléfono móvil. 36 00:01:11,255 --> 00:01:13,345 Déjame volver a la cima ahora se puede 37 00:01:13,340 --> 00:01:15,260 ver que el encabezado se ve diferente. 38 00:01:15,260 --> 00:01:16,720 Tenemos un fondo negro. 39 00:01:16,715 --> 00:01:18,845 Sí tenemos nuestro logo. 40 00:01:18,845 --> 00:01:21,115 Tenemos aquí el menú principal, 41 00:01:21,110 --> 00:01:23,030 que ahora es el menú de hamburguesas, 42 00:01:23,030 --> 00:01:24,580 que ya has visto muchas veces antes. 43 00:01:24,575 --> 00:01:26,125 Y luego si vuelvo a desplazar hacia abajo, 44 00:01:26,120 --> 00:01:28,520 puede ver que se ve bien 45 00:01:28,520 --> 00:01:31,820 todo el camino aquí abajo hasta el pie de página. 46 00:01:31,820 --> 00:01:34,490 Por lo que el diseño receptivo es extremadamente importante. 47 00:01:34,490 --> 00:01:36,200 Así que viniendo, te voy a mostrar cómo puedes 48 00:01:36,200 --> 00:01:38,980 hacer cambios en tu sitio web para 49 00:01:38,975 --> 00:01:44,125 que se vea bien en cualquier dispositivo móvil. 50 00:01:44,120 --> 00:01:45,730 Lambda también menciona rápidamente 51 00:01:45,725 --> 00:01:47,275 que cuando se trata de un diseño receptivo, 52 00:01:47,270 --> 00:01:49,610 hay algunos conceptos que deben tener en cuenta. 53 00:01:49,610 --> 00:01:52,880 Uno implicaría hacer cosas como reducir 54 00:01:52,879 --> 00:01:54,469 los márgenes son los patrones que has 55 00:01:54,470 --> 00:01:56,420 agregado en la versión de escritorio. 56 00:01:56,420 --> 00:01:59,420 Por ejemplo, te acuerdas ahí con el banner de la página de inicio. 57 00:01:59,420 --> 00:02:01,280 Para esta sección, tuvimos que sumar 58 00:02:01,280 --> 00:02:02,450 una cantidad escandalosa de 59 00:02:02,450 --> 00:02:03,590 margen negativo y creo que fue 60 00:02:03,590 --> 00:02:08,050 menos de dos a dos píxeles cuando se trata de versiones móviles. 61 00:02:08,050 --> 00:02:10,340 Por lo que las versiones responsivas, es posible 62 00:02:10,340 --> 00:02:12,970 que tengas que reducir ese tamaño o Mabou, 63 00:02:12,965 --> 00:02:16,435 o tal vez incluso en ciertas situaciones aumenten el tamaño. 64 00:02:16,430 --> 00:02:19,040 Será necesario ajustar a las imágenes o patrones. 65 00:02:19,040 --> 00:02:21,170 Además, hay momentos en los que solo necesitas 66 00:02:21,170 --> 00:02:23,690 ocultar tipos de elementos de configuración 67 00:02:23,690 --> 00:02:26,420 cuando se ve en un dispositivo móvil porque 68 00:02:26,420 --> 00:02:29,390 podría verse muy bien en el escritorio. 69 00:02:29,390 --> 00:02:30,830 Un ejemplo sería un editor de video 70 00:02:30,830 --> 00:02:32,410 se verá muy bien en el escritorio. 71 00:02:32,405 --> 00:02:33,995 Pero en un dispositivo móvil, 72 00:02:33,995 --> 00:02:36,425 puede que no necesariamente sea tan grande. 73 00:02:36,425 --> 00:02:39,265 Lo mismo aplica con las animaciones también. 74 00:02:39,260 --> 00:02:41,210 Y las medidas se verán bien en un escritorio, 75 00:02:41,210 --> 00:02:42,650 las pasarelas en un escritorio, 76 00:02:42,650 --> 00:02:44,210 pero el teléfono móvil podría tener 77 00:02:44,210 --> 00:02:46,010 problemas para mostrar esa animación. 78 00:02:46,010 --> 00:02:49,780 Entonces todo el punto de este diseño masivo es el sacrificio. 79 00:02:49,775 --> 00:02:53,845 Haces cambios, eliminas ciertas características para que 80 00:02:53,840 --> 00:02:57,830 cuando se vea en un dispositivo móvil sea Uber grid. 81 00:02:57,830 --> 00:02:59,030 Entonces eso es todo por 82 00:02:59,030 --> 00:03:01,870 la muy rápida introducción induct al diseño sensible. 83 00:03:01,865 --> 00:03:05,165 Empecemos ahora con él.