1
00:00:00,000 --> 00:00:04,879
[MUSIC]

2
00:00:04,879 --> 00:00:11,307
Los marcos de interfaz de usuario web front-end se están convirtiendo en su enfoque habitual para

3
00:00:11,307 --> 00:00:16,320
diseñar e implementar sus sitios web recientes.

4
00:00:16,320 --> 00:00:20,220
Preguntémonos qué son exactamente los marcos de interfaz de usuario web front-end,

5
00:00:20,220 --> 00:00:24,150
y aprenda un poco más de detalles sobre ellos.

6
00:00:24,150 --> 00:00:27,700
A continuación, por lo que obviamente

7
00:00:27,700 --> 00:00:33,090
en esta lección nos vamos a preguntar, ¿qué son los marcos front-end?

8
00:00:33,090 --> 00:00:34,050
¿ Qué contienen?

9
00:00:35,130 --> 00:00:38,780
¿ Cuáles son algunos de los marcos de interfaz de usuario front-end populares?

10
00:00:38,780 --> 00:00:44,130
¿ Y por qué necesitamos hacer uso de marcos de interfaz de usuario front-end cuando diseñamos

11
00:00:44,130 --> 00:00:46,460
nuestros sitios web?

12
00:00:46,460 --> 00:00:50,410
Entonces, ¿qué son los marcos de interfaz de usuario web front-end?

13
00:00:50,410 --> 00:00:52,800
Demos un paso atrás e

14
00:00:52,800 --> 00:00:57,580
imaginemos que solo conoces HTML, CSS y JavaScript.

15
00:00:57,580 --> 00:01:03,540
Si se le pide que diseñe un nuevo sitio web, obviamente iría a construir

16
00:01:03,540 --> 00:01:08,510
e implementar todo el sitio web usando las habilidades técnicas que

17
00:01:08,510 --> 00:01:13,490
usted tiene basadas en su conocimiento de HTML, CSS y JavaScript.

18
00:01:13,490 --> 00:01:16,880
A menudo te darías cuenta de que hay muchos

19
00:01:16,880 --> 00:01:21,580
componentes repetidos que usarías en tu sitio web.

20
00:01:21,580 --> 00:01:27,590
Y terminarías diseñando tu propio conjunto de clases CSS.

21
00:01:27,590 --> 00:01:30,730
Estará diseñando componente basado en JavaScript.

22
00:01:30,730 --> 00:01:34,940
Y luego, una vez que obtenga un grupo de estos juntos,

23
00:01:36,180 --> 00:01:40,770
cada vez que necesite diseñar un nuevo sitio web estaría haciendo uso de estos

24
00:01:40,770 --> 00:01:45,670
conjuntos predefinidos de clases CSS y

25
00:01:45,670 --> 00:01:49,549
componentes basados en JavaScript para implementar rápidamente un nuevo sitio web.

26
00:01:50,740 --> 00:01:53,480
¿ Por qué no llevar esto a su conclusión lógica?

27
00:01:54,750 --> 00:02:00,610
¿ Qué tal si diseñamos un marco completo que consiste en

28
00:02:00,610 --> 00:02:07,522
componentes de interfaz de usuario web listos para usar HTML, CSS y JavaScript colocados.

29
00:02:07,522 --> 00:02:12,930
Por lo tanto, aquí, un marco de interfaz de usuario web front-end

30
00:02:12,930 --> 00:02:17,850
puede definir un montón de clases CSS

31
00:02:17,850 --> 00:02:22,905
que nos permitirán incluir componentes como botones

32
00:02:22,905 --> 00:02:27,985
, tablas, barras de navegación, desplegables, alertas,

33
00:02:27,985 --> 00:02:32,615
modales, pestañas, acordeones y muchos más.

34
00:02:33,687 --> 00:02:39,027
Y rápidamente nos permiten diseñar e implementar un sitio web.

35
00:02:39,027 --> 00:02:43,887
Entonces esto es lo que logra un marco de interfaz de usuario web front-end.

36
00:02:43,887 --> 00:02:47,693
Es una colección de todos estos componentes.

37
00:02:47,693 --> 00:02:51,903
No sólo eso, le da un método para definir una

38
00:02:52,903 --> 00:02:58,443
tipografía consistente que puede utilizar para todo el diseño de su sitio web.

39
00:02:59,611 --> 00:03:05,702
Y le permite andamiar rápidamente

40
00:03:05,702 --> 00:03:09,501
un sitio web o el terreno de juego.

41
00:03:10,651 --> 00:03:15,191
Si busca marcos web front-end,

42
00:03:15,191 --> 00:03:20,341
encontrará una gran cantidad de ellos en Internet.

43
00:03:21,750 --> 00:03:26,387
Ahora varias personas han hecho su propio servicio de

44
00:03:26,387 --> 00:03:30,573
todos estos diferentes marcos de interfaz de usuario web, y

45
00:03:30,573 --> 00:03:37,170
han publicado sus diez listas principales de marcos de interfaz de usuario front-end.

46
00:03:37,170 --> 00:03:40,290
Este es uno de tales que

47
00:03:40,290 --> 00:03:45,707
puede o no estar de acuerdo con este ranking, pero

48
00:03:45,707 --> 00:03:53,920
Bootstrap resulta ser el más popular entre todos los marcos de interfaz de usuario web front-end.

49
00:03:53,920 --> 00:03:57,140
Bootstrap se clasifica consistentemente como el número uno

50
00:03:57,140 --> 00:04:01,380
en muchas de las listas de marcos de interfaz de usuario web front-end.

51
00:04:01,380 --> 00:04:06,879
El resto de esta lista puede variar, pero a menudo encontrará Semantic-UI,

52
00:04:06,879 --> 00:04:12,450
Foundation by Zerp, Materialize, Material UI, y

53
00:04:12,450 --> 00:04:17,249
algunas de estas otras aparecen en muchas de esas listas de gama superior.

54
00:04:18,330 --> 00:04:20,060
La siguiente pregunta obvia es,

55
00:04:20,060 --> 00:04:24,230
¿por qué querría usar marcos de interfaz de usuario web front-end?

56
00:04:24,230 --> 00:04:30,830
En primer lugar, le proporcionan una forma consistente de diseñar sitios web.

57
00:04:30,830 --> 00:04:34,010
Y, la mayoría de estos marcos front-end

58
00:04:34,010 --> 00:04:36,730
admiten lo que se denomina diseño web receptivo.

59
00:04:38,040 --> 00:04:43,299
Vamos a examinar más acerca del diseño web adaptable en la siguiente lección,

60
00:04:43,299 --> 00:04:50,610
pero resumiendo rápidamente, usted no se da cuenta de que su sitio web puede ser accedido desde

61
00:04:51,780 --> 00:04:56,320
varios tipos de dispositivos de diferentes protectores de pantalla que van

62
00:04:56,320 --> 00:05:01,850
desde teléfonos móviles pequeños hasta un escritorio completo.

63
00:05:01,850 --> 00:05:07,070
Usted desea poder diseñar su sitio web para adaptarse automáticamente a

64
00:05:07,070 --> 00:05:12,260
las limitaciones de tamaño de cada uno de estos

65
00:05:12,260 --> 00:05:16,490
diferentes dispositivos, desde los que se accede a su sitio web.

66
00:05:16,490 --> 00:05:21,870
Así que el diseño web receptivo está preocupado por este aspecto.

67
00:05:21,870 --> 00:05:26,310
El segundo problema que la mayoría de estos marcos de Franken intentan

68
00:05:26,310 --> 00:05:30,740
abordar es la compatibilidad entre navegadores.

69
00:05:30,740 --> 00:05:35,790
Si ha jugado con navegadores tanto como yo lo

70
00:05:35,790 --> 00:05:38,930
he hecho, estoy bastante seguro de que ha llegado a darse cuenta de que

71
00:05:38,930 --> 00:05:43,090
no hay dos navegadores renderizan el mismo sitio web exactamente de la misma manera.

72
00:05:43,090 --> 00:05:46,710
Así que cuando diseñas un sitio web para renderizar consistentemente a través de

73
00:05:46,710 --> 00:05:51,466
muchos navegadores diferentes, vas a estar enfrentando una batalla cuesta arriba.

74
00:05:51,466 --> 00:05:56,980
Ahora estos marcos front-end han logrado abordar la mayoría de estas

75
00:05:56,980 --> 00:06:02,930
idiosincrasias de los diferentes navegadores de tal manera que usted puede ofrecer una

76
00:06:02,930 --> 00:06:09,740
representación consistente de su sitio web en diferentes navegadores.

77
00:06:09,740 --> 00:06:13,290
Entonces, esa es la segunda razón por la que es posible que desee recurrir al

78
00:06:13,290 --> 00:06:17,000
uso de un marco de interfaz de usuario web front-end.

79
00:06:17,000 --> 00:06:22,930
Y el tercer aspecto, por supuesto, es que cuando necesitas diseñar un sitio web,

80
00:06:22,930 --> 00:06:27,050
siempre estarás bajo una terrible presión de tiempo. De este

81
00:06:27,050 --> 00:06:29,680
modo, aumentar su productividad para

82
00:06:29,680 --> 00:06:35,450
que no pierda su energía y tiempo en

83
00:06:35,450 --> 00:06:40,600
problemas de configuración de esos componentes individuales de su sitio web.

84
00:06:40,600 --> 00:06:43,470
En su lugar, deje que se ocupe de eso

85
00:06:43,470 --> 00:06:47,430
con un marco de interfaz de usuario web front-end diseñado consistentemente.

86
00:06:47,430 --> 00:06:53,400
Así que eso le ahorra mucho tiempo en términos de implementación de su sitio web.

87
00:06:53,400 --> 00:06:54,850
Han despedido.

88
00:06:54,850 --> 00:06:56,450
Y finalmente, por supuesto, la

89
00:06:56,450 --> 00:07:03,010
mayoría de estos marcos de interfaz de usuario front-end que están todos allí tienen su propia comunidad.

90
00:07:03,010 --> 00:07:08,900
Son usuarios que utilizan estos marcos para implementar sitios web.

91
00:07:08,900 --> 00:07:14,700
Por lo tanto, esta comunidad de usuarios le proporcionará una

92
00:07:14,700 --> 00:07:19,560
forma muy eficiente de poder resolver los problemas que pueda

93
00:07:19,560 --> 00:07:25,050
surgir al aplicar cualquiera de estos marcos para el diseño de su sitio web.

94
00:07:25,050 --> 00:07:30,610
Entonces, dadas estas diferentes ventajas,

95
00:07:30,610 --> 00:07:36,080
¿por qué no querría recurrir al uso de un marco de interfaz de usuario web front-end?

96
00:07:36,080 --> 00:07:40,697
Con esta comprensión de los marcos de interfaz de usuario web front-end,

97
00:07:40,697 --> 00:07:45,315
vamos a seguir adelante para aprender más acerca de Bootstrap,

98
00:07:45,315 --> 00:07:48,840
el marco de interfaz de usuario web front-end más popular.

99
00:07:48,840 --> 00:07:51,809
[ MÚSICA]