1
00:00:00,000 --> 00:00:04,717
[MÚSICA]

2
00:00:04,717 --> 00:00:09,290
En estos días, en el mundo del desarrollo web, a menudo escuchamos a la gente

3
00:00:09,290 --> 00:00:14,721
mencionar los términos «diseño responsivo» y «enfoque móvil».

4
00:00:14,721 --> 00:00:18,558
Intentemos comprender qué se entiende por estos términos y

5
00:00:18,558 --> 00:00:23,480
cómo afectan a la forma en que diseñas tus sitios web y tus aplicaciones web.

6
00:00:25,490 --> 00:00:30,745
Su pregunta obvia será ¿por qué considerar el diseño receptivo?

7
00:00:30,745 --> 00:00:38,040
Para ayudarnos a entender esto, consideremos cómo la gente accede a los sitios web en estos días?

8
00:00:38,040 --> 00:00:42,980
Tradicionalmente, cuando los sitios web se diseñaron por primera vez, se podría suponer

9
00:00:42,980 --> 00:00:47,100
que las personas navegarán por sus sitios web desde un ordenador.

10
00:00:48,170 --> 00:00:55,694
En estos días, sus sitios web pueden ser visitados desde un smartphone, una tableta o

11
00:00:55,694 --> 00:01:02,250
un ordenador con diferentes tamaños de pantalla y resoluciones de pantalla.

12
00:01:02,250 --> 00:01:09,350
¿ Cómo renderizamos nuestros sitios web consistentemente en dispositivos de diferentes tamaños de pantalla?

13
00:01:10,530 --> 00:01:14,570
El único tamaño se adapta a todos los enfoques que

14
00:01:14,570 --> 00:01:19,020
los diseñadores de sitios web tradicionales han tomado ya no factura fija.

15
00:01:19,020 --> 00:01:24,338
Necesitamos un enfoque mejor, un enfoque que

16
00:01:24,338 --> 00:01:30,940
adapte automáticamente su sitio web al tamaño de la pantalla en la que se está visualizando.

17
00:01:30,940 --> 00:01:38,190
Aquí es donde tenemos que adoptar un enfoque para adaptarnos al puerto de vista del usuario.

18
00:01:38,190 --> 00:01:42,890
Esto tiene que ser incorporado en el diseño y desarrollo de su sitio web para

19
00:01:42,890 --> 00:01:49,000
que se adapte automáticamente a la ventana gráfica del dispositivo del usuario.

20
00:01:50,260 --> 00:01:53,437
Para ayudarle a apreciar mejor la necesidad de

21
00:01:53,437 --> 00:01:57,170
abordar dispositivos de diferentes tamaños de pantalla.

22
00:01:57,170 --> 00:02:03,273
Estoy tomando la ayuda de las opciones de desarrollador que podría Safari navegador

23
00:02:03,273 --> 00:02:10,110
proporciona que me permite ver el sitio web con pantallas de diferentes tamaños.

24
00:02:10,110 --> 00:02:15,470
Así que espero convencer de usted de por qué hemos hecho un diseño web sensible.

25
00:02:15,470 --> 00:02:19,622
Así que aquí se ve que Coursera sitio web se

26
00:02:19,622 --> 00:02:24,476
renderiza en un 1920 por 1080 sitios de pantalla.

27
00:02:24,476 --> 00:02:32,088
Esto sería un escritorio grande típico o una pantalla portátil de alta resolución.

28
00:02:32,088 --> 00:02:38,810
Entonces vamos a considerar el mismo sitio web que se está viendo usando una pantalla más pequeña como.

29
00:02:38,810 --> 00:02:44,126
Así que verá automáticamente su diseño de pantalla se

30
00:02:44,126 --> 00:02:49,214
ajusta ligeramente al tamaño de la ventana gráfica de su dispositivo,

31
00:02:49,214 --> 00:02:52,281
lo mismo en 800 por 600.

32
00:02:52,281 --> 00:02:59,708
Así que vamos a bajar en tamaños de pantalla, esta es una vista cercana del iPad del mismo sitio.

33
00:02:59,708 --> 00:03:05,826
Este es un tamaño iPad Air 2, este es un tamaño iPad Mini 4,

34
00:03:05,826 --> 00:03:10,125
tenga en cuenta la transición de un

35
00:03:10,125 --> 00:03:15,610
tamaño iPad Mini 4 a un iPhone 6S Plus en modo vertical.

36
00:03:15,610 --> 00:03:23,090
Ahora notarás que el robot de navegación se ha contraído en un botón aquí,

37
00:03:23,090 --> 00:03:28,850
que al hacer clic revelará las opciones de tu Navegación Bash.

38
00:03:28,850 --> 00:03:35,027
Y veamos lo mismo en nuestro iPhone 6S

39
00:03:35,027 --> 00:03:40,990
en modo horizontal, observe cómo la pantalla se adopta a sí misma.

40
00:03:40,990 --> 00:03:46,578
Del mismo modo para un iPhone 6S en modo horizontal y

41
00:03:46,578 --> 00:03:52,300
vaya a un iPhone SE, y verá cómo el sitio web

42
00:03:52,300 --> 00:03:56,941
ha cambiado la forma en que se está renderizando.

43
00:03:56,941 --> 00:04:03,395
Así que, con suerte, este ejemplo te ha ilustrado cómo y

44
00:04:03,395 --> 00:04:07,357
por qué necesitamos un diseño web sensible.

45
00:04:07,357 --> 00:04:12,240
El segundo concepto relacionado que escucharás es el móvil primero.

46
00:04:12,240 --> 00:04:17,749
El primer enfoque móvil en su lugar se centra

47
00:04:17,749 --> 00:04:19,725
primero en diseñar un sitio web para un dispositivo móvil.

48
00:04:19,725 --> 00:04:27,465
Por lo tanto, considere cómo satisfaría las limitaciones de pantalla de su dispositivo móvil.

49
00:04:27,465 --> 00:04:32,472
Y luego, a medida que el tamaño de la pantalla se expande, usted

50
00:04:32,472 --> 00:04:38,162
iniciaría automáticamente una aplicación a su sitio web a los tamaños de pantalla más grandes y más grandes.

51
00:04:38,162 --> 00:04:41,548
Tal vez, usted está dispuesto más y más del contenido.

52
00:04:41,548 --> 00:04:47,050
Con el fin de aprovechar el aumento de la pantalla de bienes raíces.

53
00:04:47,050 --> 00:04:51,974
Por lo tanto, el mismo sitio web cuando se ve en un dispositivo móvil puede tener sólo

54
00:04:51,974 --> 00:04:56,091
partes de la información que se revela al usuario.

55
00:04:56,091 --> 00:05:00,754
Pero luego, cuando se representa en un escritorio completo,

56
00:05:00,754 --> 00:05:05,960
podría mostrar una versión mucho más detallada del sitio web.

57
00:05:05,960 --> 00:05:11,020
Ahora esto tiene que ser adaptado automáticamente en función de la información

58
00:05:11,020 --> 00:05:16,180
que obtiene del dispositivo desde el que se está viendo su sitio web.

59
00:05:16,180 --> 00:05:18,519
Entonces, ¿cómo obtenemos esta información?

60
00:05:18,519 --> 00:05:23,610
Afortunadamente, hacer un diseño web adaptable es compatible con

61
00:05:23,610 --> 00:05:29,950
muchos de los marcos de interfaz de usuario web front-end modernos, incluyendo Bootstrap.

62
00:05:29,950 --> 00:05:37,230
Así que cuando miramos la definición de Bootstrap en su página web, dice,

63
00:05:37,230 --> 00:05:41,128
enfoque móvil sensible primero.

64
00:05:41,128 --> 00:05:43,985
Sí, ¿cómo vamos haciendo un diseño web sensible?

65
00:05:43,985 --> 00:05:49,858
Por lo tanto, hay varios conceptos que están integrados en sus

66
00:05:49,858 --> 00:05:57,170
marcos de interfaz de usuario web de tiempo de fotograma que vienen en la ayuda cuando necesita hacer un diseño web sensible.

67
00:05:57,170 --> 00:06:00,819
En primer lugar, lo que se llama es un sistema de cuadrícula?

68
00:06:00,819 --> 00:06:05,624
Vamos a ver el sistema de Grid de Bootstrap con más detalle en la próxima

69
00:06:05,624 --> 00:06:06,319
conferencia.

70
00:06:06,319 --> 00:06:11,201
Para que entendamos exactamente cómo podemos aprovechar eso para poder hacer un

71
00:06:11,201 --> 00:06:13,720
diseño web sensible.

72
00:06:13,720 --> 00:06:21,110
El segundo aspecto son las imágenes fluidas, de modo que las imágenes que incluya en su

73
00:06:21,110 --> 00:06:26,940
sitio web se adaptarán automáticamente al tamaño de la pantalla.

74
00:06:26,940 --> 00:06:34,890
Y la tercera parte es lo que se llama consultas de medios CSS desde su código CSS.

75
00:06:34,890 --> 00:06:41,110
Puede consultar el tamaño de los medios y, a continuación, ajustar adecuadamente sus clases CSS

76
00:06:41,110 --> 00:06:46,230
para ajustarse al tamaño de la pantalla del dispositivo.

77
00:06:46,230 --> 00:06:48,730
Ahora, ¿cómo funcionan las consultas de medios?

78
00:06:48,730 --> 00:06:50,950
Veamos eso a continuación.

79
00:06:50,950 --> 00:06:55,080
Las consultas de medios son compatibles con CSS como este.

80
00:06:55,080 --> 00:07:00,930
Por lo tanto, la tecnología le permite hacer una consulta de medios para especificar el ancho mínimo

81
00:07:00,930 --> 00:07:07,730
de la pantalla bajo la cual este conjunto particular de clases CSS estará activo.

82
00:07:07,730 --> 00:07:12,267
Entonces esto se especificaría en su archivo CSS como @media, y

83
00:07:12,267 --> 00:07:17,187
luego dentro del corchete, especifique, por ejemplo, min-width.

84
00:07:17,187 --> 00:07:21,231
Hay muchas más opciones para las consultas de medios que las que estoy mostrando aquí.

85
00:07:21,231 --> 00:07:28,750
Este es solo un ejemplo de cómo construiría una consulta de medios en su código CSS.

86
00:07:30,060 --> 00:07:34,990
Echando un vistazo al código CSS de Bootstrap

87
00:07:34,990 --> 00:07:40,910
en sí, vamos a ver cómo Bootstrap está utilizando las consultas de medios.

88
00:07:40,910 --> 00:07:45,789
Así que aquí puede ver un ejemplo de una consulta de medios donde dice @media y un

89
00:07:45,789 --> 00:07:47,854
ancho mínimo de 576 píxeles.

90
00:07:47,854 --> 00:07:54,906
Y luego especifica que los contenedores de llamadas de clase CSS en particular,

91
00:07:54,906 --> 00:07:59,960
sobre el que aprenderemos más en la próxima conferencia,

92
00:07:59,960 --> 00:08:04,150
y también en el ejercicio que sigue.

93
00:08:04,150 --> 00:08:12,640
Veremos que el ancho del contenedor se establece en función del ancho de la pantalla.

94
00:08:12,640 --> 00:08:17,590
Del mismo modo, para una pantalla de mayor ancho, el ancho del contenedor se ajusta automáticamente.

95
00:08:17,590 --> 00:08:22,251
Entonces, esto es lo que permite que su marco de interfaz de usuario web

96
00:08:22,251 --> 00:08:25,604
admita el diseño web receptivo.

97
00:08:25,604 --> 00:08:30,762
Por lo tanto, haciendo consultas de medios, su marco de interfaz de usuario web puede

98
00:08:30,762 --> 00:08:36,928
establecer en qué tipo de dispositivo está renderizando su sitio web.

99
00:08:36,928 --> 00:08:41,849
Y, en consecuencia, ajuste las clases CSS para

100
00:08:41,849 --> 00:08:46,401
adaptarse a ese tamaño de pantalla de dispositivos en particular.

101
00:08:46,401 --> 00:08:50,821
Entonces, obviamente, la siguiente pregunta que va a surgir en su mente es ¿cómo

102
00:08:50,821 --> 00:08:52,870
hacemos esto en la práctica?

103
00:08:52,870 --> 00:08:56,540
Afortunadamente, si comienza con un

104
00:08:56,540 --> 00:09:01,700
marco de interfaz de usuario web front-end bien diseñado como Bootstrap, las cosas se vuelven muy sencillas.

105
00:09:01,700 --> 00:09:08,023
Aprenderemos más sobre esto en la próxima conferencia y el ejercicio que sigue.

106
00:09:08,023 --> 00:09:13,999
[ MÚSICA]