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

2
00:00:04,717 --> 00:00:09,290
Hoje em dia, no mundo do desenvolvimento web, muitas vezes ouvimos as pessoas

3
00:00:09,290 --> 00:00:14,721
mencionando os termos design responsivo e primeira abordagem móvel.

4
00:00:14,721 --> 00:00:18,558
Vamos tentar entender o que se entende por esses termos e

5
00:00:18,558 --> 00:00:23,480
como eles afetam a maneira como você cria seus sites e seus aplicativos da web.

6
00:00:25,490 --> 00:00:30,745
Sua pergunta óbvia vai ser por que considerar um design responsivo?

7
00:00:30,745 --> 00:00:38,040
Para nos ajudar a entender isso, vamos considerar como as pessoas acessam sites atualmente?

8
00:00:38,040 --> 00:00:42,980
Tradicionalmente, quando os sites foram projetados pela primeira vez, você poderia praticamente assumir

9
00:00:42,980 --> 00:00:47,100
que as pessoas estarão navegando em seus sites a partir de um computador.

10
00:00:48,170 --> 00:00:55,694
Atualmente, seus sites podem ser visitados de um smartphone, tablet ou

11
00:00:55,694 --> 00:01:02,250
computador com diferentes tamanhos de tela e resoluções de tela.

12
00:01:02,250 --> 00:01:09,350
Como renderizamos nossos sites de forma consistente em dispositivos de diferentes tamanhos de tela?

13
00:01:10,530 --> 00:01:14,570
O tamanho único se adapta a todas as abordagens que

14
00:01:14,570 --> 00:01:19,020
os designers de sites tradicionais tomaram conta não fixa mais.

15
00:01:19,020 --> 00:01:24,338
Precisamos de uma abordagem melhor, uma abordagem que

16
00:01:24,338 --> 00:01:30,940
adapte automaticamente o seu site ao tamanho da tela em que ele está sendo visualizado.

17
00:01:30,940 --> 00:01:38,190
É aqui que temos que adotar uma abordagem para se adaptar à porta de visualização do usuário.

18
00:01:38,190 --> 00:01:42,890
Isso deve ser incorporado no design e desenvolvimento do seu site para

19
00:01:42,890 --> 00:01:49,000
que ele se adapte automaticamente ao visor do dispositivo do usuário.

20
00:01:50,260 --> 00:01:53,437
Para ajudá-lo a apreciar melhor a necessidade de

21
00:01:53,437 --> 00:01:57,170
endereçar dispositivos de diferentes tamanhos de tela.

22
00:01:57,170 --> 00:02:03,273
Estou tomando a ajuda das opções de desenvolvedor que pode Safari navegador

23
00:02:03,273 --> 00:02:10,110
fornece que me permite visualizar o site com telas de tamanhos diferentes.

24
00:02:10,110 --> 00:02:15,470
Então, espero que convença de você de por que fizemos web design responsivo.

25
00:02:15,470 --> 00:02:19,622
Então aqui você vê que o site Coursera sendo

26
00:02:19,622 --> 00:02:24,476
renderizado em um 1920 por 1080 sites de tela.

27
00:02:24,476 --> 00:02:32,088
Este seria um desktop grande típico ou uma tela de laptop de alta resolução.

28
00:02:32,088 --> 00:02:38,810
Então vamos considerar o mesmo site sendo visualizado usando uma tela menor como.

29
00:02:38,810 --> 00:02:44,126
Assim, você vê automaticamente o layout da tela está

30
00:02:44,126 --> 00:02:49,214
se ajustando ligeiramente ao tamanho da janela de exibição do seu dispositivo, a

31
00:02:49,214 --> 00:02:52,281
mesma coisa em 800 por 600.

32
00:02:52,281 --> 00:02:59,708
Então vamos para baixo em tamanhos de tela, esta é uma visão próxima do iPad do mesmo site.

33
00:02:59,708 --> 00:03:05,826
Este é um tamanho iPad Air 2, este é um tamanho iPad Mini 4,

34
00:03:05,826 --> 00:03:10,125
observe a transição de um

35
00:03:10,125 --> 00:03:15,610
tamanho iPad Mini 4 para um iPhone 6S Plus no modo retrato.

36
00:03:15,610 --> 00:03:23,090
Agora você notará que o Bot de Navegação agora entrou em um botão aqui,

37
00:03:23,090 --> 00:03:28,850
que quando você clicar irá revelar as opções do seu Bash de Navegação.

38
00:03:28,850 --> 00:03:35,027
E vamos olhar para a mesma coisa em nosso iPhone 6S

39
00:03:35,027 --> 00:03:40,990
no modo paisagem, observe como a tela se adota.

40
00:03:40,990 --> 00:03:46,578
Da mesma forma para um iPhone 6S no modo paisagem e

41
00:03:46,578 --> 00:03:52,300
ir até um iPhone SE, e você vê como o site

42
00:03:52,300 --> 00:03:56,941
mudou a maneira como ele está sendo processado.

43
00:03:56,941 --> 00:04:03,395
Então, espero que este exemplo tenha ilustrado como e

44
00:04:03,395 --> 00:04:07,357
por que precisamos de web design responsivo.

45
00:04:07,357 --> 00:04:12,240
O segundo conceito relacionado que você ouvirá é móvel primeiro.

46
00:04:12,240 --> 00:04:17,749
A primeira abordagem móvel, em vez disso, olha para projetar um site para

47
00:04:17,749 --> 00:04:19,725
um dispositivo móvel primeiro.

48
00:04:19,725 --> 00:04:27,465
Portanto, considere como você satisfaria as restrições de tela do seu dispositivo móvel.

49
00:04:27,465 --> 00:04:32,472
E, à medida que o tamanho da tela se expande, você

50
00:04:32,472 --> 00:04:38,162
iniciaria automaticamente um aplicativo no seu site para os tamanhos de tela maiores e maiores.

51
00:04:38,162 --> 00:04:41,548
Talvez, você esteja disposto mais e mais do conteúdo.

52
00:04:41,548 --> 00:04:47,050
De modo a tirar proveito do aumento imobiliário tela.

53
00:04:47,050 --> 00:04:51,974
Assim, o mesmo site ao ver em um dispositivo móvel pode ter apenas

54
00:04:51,974 --> 00:04:56,091
partes das informações que estão sendo reveladas ao usuário.

55
00:04:56,091 --> 00:05:00,754
Mas, em seguida, quando renderizado em um desktop fledge completo ele

56
00:05:00,754 --> 00:05:05,960
pode mostrar uma versão muito mais detalhada do site.

57
00:05:05,960 --> 00:05:11,020
Agora isso tem que ser adaptado automaticamente com base nas informações

58
00:05:11,020 --> 00:05:16,180
que você obtém do dispositivo do qual seu site está sendo visualizado.

59
00:05:16,180 --> 00:05:18,519
Então, como obtemos essa informação?

60
00:05:18,519 --> 00:05:23,610
Felizmente, fazer web design responsivo é suportado por

61
00:05:23,610 --> 00:05:29,950
muitas das modernas estruturas de interface do usuário web front-end, incluindo Bootstrap.

62
00:05:29,950 --> 00:05:37,230
Então, quando olhamos para a definição do Bootstrap em sua página web, ele diz,

63
00:05:37,230 --> 00:05:41,128
primeira abordagem móvel responsiva.

64
00:05:41,128 --> 00:05:43,985
Sim, como vamos fazendo web design responsivo?

65
00:05:43,985 --> 00:05:49,858
Portanto, existem vários conceitos que são incorporados em suas

66
00:05:49,858 --> 00:05:57,170
estruturas de interface do usuário web frame time que vêm em auxílio quando você precisa fazer web design responsivo.

67
00:05:57,170 --> 00:06:00,819
Em primeiro lugar é o que é chamado é um sistema de grade?

68
00:06:00,819 --> 00:06:05,624
Vamos olhar para o sistema Bootstrap Grid com mais detalhes na próxima

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

70
00:06:06,319 --> 00:06:11,201
Para que possamos entender exatamente como podemos aproveitar isso para ser capaz de fazer

71
00:06:11,201 --> 00:06:13,720
web design responsivo.

72
00:06:13,720 --> 00:06:21,110
O segundo aspecto são imagens fluidas, de modo que suas imagens que você incluir em seu

73
00:06:21,110 --> 00:06:26,940
site se adaptem automaticamente ao tamanho da tela.

74
00:06:26,940 --> 00:06:34,890
E a terceira parte é o que é chamado de consultas de mídia CSS do seu código CSS.

75
00:06:34,890 --> 00:06:41,110
Você pode consultar o tamanho da mídia e, em seguida, ajustar adequadamente suas classes CSS

76
00:06:41,110 --> 00:06:46,230
para se ajustar ao tamanho da tela do dispositivo.

77
00:06:46,230 --> 00:06:48,730
Agora, como funcionam as consultas de mídia?

78
00:06:48,730 --> 00:06:50,950
Vamos ver isso a seguir.

79
00:06:50,950 --> 00:06:55,080
As consultas de mídia são suportadas em CSS como este.

80
00:06:55,080 --> 00:07:00,930
Assim, a tecnologia permite que você faça uma consulta de mídia para especificar a largura mínima

81
00:07:00,930 --> 00:07:07,730
da tela sob a qual este conjunto particular de classes CSS estará ativo.

82
00:07:07,730 --> 00:07:12,267
Então, isso seria especificado em seu arquivo CSS como @media e, em

83
00:07:12,267 --> 00:07:17,187
seguida, dentro de colchetes, você especifica, por exemplo, min-width.

84
00:07:17,187 --> 00:07:21,231
Há muito mais opções para as consultas de mídia do que o que estou mostrando aqui.

85
00:07:21,231 --> 00:07:28,750
Este é apenas um exemplo de como você construiria uma consulta de mídia em seu código CSS.

86
00:07:30,060 --> 00:07:34,990
Olhando para o próprio código CSS do Bootstrap,

87
00:07:34,990 --> 00:07:40,910
vamos entrar e ver como as consultas de mídia estão sendo usadas pelo Bootstrap.

88
00:07:40,910 --> 00:07:45,789
Então, aqui você vê um exemplo de uma consulta de mídia onde ele diz, @media e

89
00:07:45,789 --> 00:07:47,854
576 pixels de largura mínima.

90
00:07:47,854 --> 00:07:54,906
E, em seguida, ele especifica que aqueles recipiente de chamada classe CSS particular,

91
00:07:54,906 --> 00:07:59,960
que vamos aprender mais sobre na próxima palestra,

92
00:07:59,960 --> 00:08:04,150
e também no exercício que se segue.

93
00:08:04,150 --> 00:08:12,640
Veremos que a largura do recipiente é definida com base na largura da tela.

94
00:08:12,640 --> 00:08:17,590
Da mesma forma, para uma tela de largura maior, a largura do contêiner é ajustada automaticamente.

95
00:08:17,590 --> 00:08:22,251
Então, isso é o que permite que sua estrutura de interface do usuário da web

96
00:08:22,251 --> 00:08:25,604
suporte a web design responsivo.

97
00:08:25,604 --> 00:08:30,762
Assim, fazendo consultas de mídia, sua estrutura de interface do usuário da web é capaz de

98
00:08:30,762 --> 00:08:36,928
estabelecer em que tipo de dispositivo você está renderizando seu site.

99
00:08:36,928 --> 00:08:41,849
E, de forma correspondente, ajuste as classes CSS para

100
00:08:41,849 --> 00:08:46,401
se adequar ao tamanho da tela de dispositivos específicos.

101
00:08:46,401 --> 00:08:50,821
Então, obviamente, a próxima pergunta que virá em sua mente é como

102
00:08:50,821 --> 00:08:52,870
fazemos isso na prática?

103
00:08:52,870 --> 00:08:56,540
Felizmente, se você começar com um

104
00:08:56,540 --> 00:09:01,700
framework de interface web front-end bem projetado como Bootstrap, as coisas se tornam muito simples.

105
00:09:01,700 --> 00:09:08,023
Aprenderemos mais sobre isso na próxima palestra e no exercício que se segue.

106
00:09:08,023 --> 00:09:13,999
[ MUSIC]