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

2
00:00:04,879 --> 00:00:11,307
Front-end Web UI Frameworks estão se tornando sua abordagem ideal para

3
00:00:11,307 --> 00:00:16,320
projetar e implementar seus sites recentes.

4
00:00:16,320 --> 00:00:20,220
Vamos nos perguntar o que exatamente são Frameworks de interface do usuário da Web front-end

5
00:00:20,220 --> 00:00:24,150
e aprender um pouco mais de detalhes sobre eles.

6
00:00:24,150 --> 00:00:27,700
Em seguida, então, obviamente,

7
00:00:27,700 --> 00:00:33,090
nesta lição vamos nos perguntar, o que são frameworks front-end?

8
00:00:33,090 --> 00:00:34,050
O que eles contêm?

9
00:00:35,130 --> 00:00:38,780
Quais são algumas das estruturas de interface do usuário de front-end populares?

10
00:00:38,780 --> 00:00:44,130
E por que precisamos fazer uso de estruturas de interface do usuário front-end quando projetamos

11
00:00:44,130 --> 00:00:46,460
nossos sites?

12
00:00:46,460 --> 00:00:50,410
Então, o que são frameworks front-end da interface web?

13
00:00:50,410 --> 00:00:52,800
Vamos dar um passo para trás e

14
00:00:52,800 --> 00:00:57,580
imaginar que você conhece apenas HTML, CSS e JavaScript.

15
00:00:57,580 --> 00:01:03,540
Se você fosse solicitado a projetar um novo site, você obviamente iria sobre a construção

16
00:01:03,540 --> 00:01:08,510
e implementação de todo o site usando as habilidades técnicas que

17
00:01:08,510 --> 00:01:13,490
você tem com base em seus conhecimentos de HTML, CSS e JavaScript.

18
00:01:13,490 --> 00:01:16,880
Muitas vezes você perceberia que existem muitos

19
00:01:16,880 --> 00:01:21,580
componentes repetidos que você usaria em seu site.

20
00:01:21,580 --> 00:01:27,590
E você acabaria projetando seu próprio conjunto de classes CSS.

21
00:01:27,590 --> 00:01:30,730
Você estará projetando componente baseado em JavaScript.

22
00:01:30,730 --> 00:01:34,940
E então, uma vez que você obtém um grupo desses juntos,

23
00:01:36,180 --> 00:01:40,770
toda vez que você precisa projetar um novo site, você estaria fazendo uso desses

24
00:01:40,770 --> 00:01:45,670
conjuntos predefinidos de classes CSS e

25
00:01:45,670 --> 00:01:49,549
componentes baseados em JavaScript para implementar rapidamente um novo site.

26
00:01:50,740 --> 00:01:53,480
Por que não levar isso à sua conclusão lógica?

27
00:01:54,750 --> 00:02:00,610
Que tal, se projetarmos uma estrutura inteira que consiste em

28
00:02:00,610 --> 00:02:07,522
componentes de interface do usuário web prontos para usar HTML, CSS e JavaScript colocados.

29
00:02:07,522 --> 00:02:12,930
Então, aqui, um framework front-end web UI

30
00:02:12,930 --> 00:02:17,850
pode definir um monte de classes CSS que

31
00:02:17,850 --> 00:02:22,905
nos permitirá incluir componentes como Botões,

32
00:02:22,905 --> 00:02:27,985
Tabelas, Barras de navegação, Dropdowns, Alertas,

33
00:02:27,985 --> 00:02:32,615
Modals, Tabelas, Acordeões e muito mais.

34
00:02:33,687 --> 00:02:39,027
E rapidamente nos permite projetar e implementar um site.

35
00:02:39,027 --> 00:02:43,887
Então, isso é o que um framework de interface do usuário web front-end realiza.

36
00:02:43,887 --> 00:02:47,693
É uma coleção de todos esses componentes.

37
00:02:47,693 --> 00:02:51,903
Não só isso, ele lhe dá um método de definição de

38
00:02:52,903 --> 00:02:58,443
tipografia consistente que você pode usar para todo o seu design do site.

39
00:02:59,611 --> 00:03:05,702
E permite que você

40
00:03:05,702 --> 00:03:09,501
andaime rapidamente um site ou o campo.

41
00:03:10,651 --> 00:03:15,191
Se você procurar por frameworks web front-end,

42
00:03:15,191 --> 00:03:20,341
você encontraria uma infinidade deles lá fora na Internet.

43
00:03:21,750 --> 00:03:26,387
Agora, várias pessoas fizeram seu próprio serviço de

44
00:03:26,387 --> 00:03:30,573
todas essas diferentes estruturas de interface do usuário da web, e

45
00:03:30,573 --> 00:03:37,170
publicaram suas dez principais listas de frameworks de interface do usuário front-end.

46
00:03:37,170 --> 00:03:40,290
Este é um tal que você

47
00:03:40,290 --> 00:03:45,707
pode ou não concordar com este ranking, mas

48
00:03:45,707 --> 00:03:53,920
Bootstrap é o mais popular entre todos os frameworks front-end web UI. O

49
00:03:53,920 --> 00:03:57,140
Bootstrap classifica consistentemente como o número um

50
00:03:57,140 --> 00:04:01,380
em muitas das listas de frameworks de interface do usuário web front-end.

51
00:04:01,380 --> 00:04:06,879
O restante entre esta lista pode variar, mas muitas vezes você encontraria Semântic-UI,

52
00:04:06,879 --> 00:04:12,450
Fundação por Zerp, Materialize, Material UI e

53
00:04:12,450 --> 00:04:17,249
alguns desses outros aparecendo em muitas dessas listas de topo.

54
00:04:18,330 --> 00:04:20,060
A próxima pergunta óbvia é,

55
00:04:20,060 --> 00:04:24,230
por que você gostaria de usar frameworks front-end web UI?

56
00:04:24,230 --> 00:04:30,830
Em primeiro lugar, eles fornecem uma maneira consistente de projetar sites.

57
00:04:30,830 --> 00:04:34,010
E, a maioria dessas estruturas front-end

58
00:04:34,010 --> 00:04:36,730
suportam o que é chamado de web design responsivo.

59
00:04:38,040 --> 00:04:43,299
Vamos examinar mais sobre web design responsivo na próxima lição, mas

60
00:04:43,299 --> 00:04:50,610
resumindo rapidamente, você não percebe que seu site pode ser acessado a partir

61
00:04:51,780 --> 00:04:56,320
de vários tipos de dispositivos

62
00:04:56,320 --> 00:05:01,850
de proteções de tela diferentes, desde pequenos telefones celulares até um desktop completo.

63
00:05:01,850 --> 00:05:07,070
Você quer ser capaz de projetar seu site para se adaptar automaticamente para

64
00:05:07,070 --> 00:05:12,260
atender às restrições de tamanho de cada um desses

65
00:05:12,260 --> 00:05:16,490
diferentes dispositivos, a partir dos quais seu site está sendo acessado.

66
00:05:16,490 --> 00:05:21,870
Então web design responsivo está preocupado com este aspecto.

67
00:05:21,870 --> 00:05:26,310
A segunda questão que a maioria desses frameworks Franken tenta

68
00:05:26,310 --> 00:05:30,740
abordar é a compatibilidade entre navegadores.

69
00:05:30,740 --> 00:05:35,790
Se você já jogou com navegadores, tanto quanto eu fiz,

70
00:05:35,790 --> 00:05:38,930
tenho certeza que você chegou a perceber que

71
00:05:38,930 --> 00:05:43,090
não há dois navegadores renderizar o mesmo site exatamente da mesma maneira.

72
00:05:43,090 --> 00:05:46,710
Então, quando você cria um site para renderizar consistentemente em

73
00:05:46,710 --> 00:05:51,466
muitos navegadores diferentes, você estará enfrentando uma batalha difícil.

74
00:05:51,466 --> 00:05:56,980
Agora, esses frameworks front-end conseguiram abordar a maioria dessas

75
00:05:56,980 --> 00:06:02,930
idiossincrasias dos diferentes navegadores de tal forma que você pode fornecer

76
00:06:02,930 --> 00:06:09,740
renderização consistente de seu site em diferentes navegadores.

77
00:06:09,740 --> 00:06:13,290
Então, essa é a segunda razão pela qual você pode querer recorrer ao

78
00:06:13,290 --> 00:06:17,000
uso de uma estrutura de interface do usuário da Web Front-End.

79
00:06:17,000 --> 00:06:22,930
E o terceiro aspecto, é claro, é que quando você precisa projetar um site,

80
00:06:22,930 --> 00:06:27,050
você sempre estará sob uma terrível pressão de tempo.

81
00:06:27,050 --> 00:06:29,680
Aumentar sua produtividade para

82
00:06:29,680 --> 00:06:35,450
que você não perca sua energia e tempo em

83
00:06:35,450 --> 00:06:40,600
problemas de configuração desperdiçados desses componentes individuais do seu site.

84
00:06:40,600 --> 00:06:43,470
Em vez disso, deixe que isso seja cuidado

85
00:06:43,470 --> 00:06:47,430
por uma estrutura de interface de usuário web front-end consistentemente projetada.

86
00:06:47,430 --> 00:06:53,400
Assim, você economiza muito tempo em termos de implementação do seu site.

87
00:06:53,400 --> 00:06:54,850
Eles foram demitidos.

88
00:06:54,850 --> 00:06:56,450
E, finalmente, é claro, a

89
00:06:56,450 --> 00:07:03,010
maioria dessas estruturas de interface do usuário front-end que estão lá tem sua própria comunidade.

90
00:07:03,010 --> 00:07:08,900
Eles são usuários que usam esses frameworks para implementar sites.

91
00:07:08,900 --> 00:07:14,700
Assim, esta comunidade de usuários irá fornecer-lhe uma

92
00:07:14,700 --> 00:07:19,560
maneira muito eficiente de ser capaz de resolver problemas que você pode

93
00:07:19,560 --> 00:07:25,050
encontrar quando você está aplicando qualquer um desses frameworks para o design do seu site.

94
00:07:25,050 --> 00:07:30,610
Então, dadas essas vantagens diferentes,

95
00:07:30,610 --> 00:07:36,080
por que você não iria querer recorrer ao uso de uma estrutura de interface do usuário web front-end?

96
00:07:36,080 --> 00:07:40,697
Com essa compreensão de frameworks front-end web UI,

97
00:07:40,697 --> 00:07:45,315
vamos agora avançar para saber mais sobre o Bootstrap,

98
00:07:45,315 --> 00:07:48,840
a estrutura de interface de usuário web front-end mais popular.

99
00:07:48,840 --> 00:07:51,809
[ MUSIC]