[MÚSICA]
Hoje em dia, no mundo do desenvolvimento web, muitas vezes ouvimos as pessoas
mencionando os termos design responsivo e primeira abordagem móvel.
Vamos tentar entender o que se entende por esses termos e
como eles afetam a maneira como você cria seus sites e seus aplicativos da web.
Sua pergunta óbvia vai ser por que considerar um design responsivo?
Para nos ajudar a entender isso, vamos considerar como as pessoas acessam sites atualmente?
Tradicionalmente, quando os sites foram projetados pela primeira vez, você poderia praticamente assumir
que as pessoas estarão navegando em seus sites a partir de um computador.
Atualmente, seus sites podem ser visitados de um smartphone, tablet ou
computador com diferentes tamanhos de tela e resoluções de tela.
Como renderizamos nossos sites de forma consistente em dispositivos de diferentes tamanhos de tela?
O tamanho único se adapta a todas as abordagens que
os designers de sites tradicionais tomaram conta não fixa mais.
Precisamos de uma abordagem melhor, uma abordagem que
adapte automaticamente o seu site ao tamanho da tela em que ele está sendo visualizado.
É aqui que temos que adotar uma abordagem para se adaptar à porta de visualização do usuário.
Isso deve ser incorporado no design e desenvolvimento do seu site para
que ele se adapte automaticamente ao visor do dispositivo do usuário.
Para ajudá-lo a apreciar melhor a necessidade de
endereçar dispositivos de diferentes tamanhos de tela.
Estou tomando a ajuda das opções de desenvolvedor que pode Safari navegador
fornece que me permite visualizar o site com telas de tamanhos diferentes.
Então, espero que convença de você de por que fizemos web design responsivo.
Então aqui você vê que o site Coursera sendo
renderizado em um 1920 por 1080 sites de tela.
Este seria um desktop grande típico ou uma tela de laptop de alta resolução.
Então vamos considerar o mesmo site sendo visualizado usando uma tela menor como.
Assim, você vê automaticamente o layout da tela está
se ajustando ligeiramente ao tamanho da janela de exibição do seu dispositivo, a
mesma coisa em 800 por 600.
Então vamos para baixo em tamanhos de tela, esta é uma visão próxima do iPad do mesmo site.
Este é um tamanho iPad Air 2, este é um tamanho iPad Mini 4,
observe a transição de um
tamanho iPad Mini 4 para um iPhone 6S Plus no modo retrato.
Agora você notará que o Bot de Navegação agora entrou em um botão aqui,
que quando você clicar irá revelar as opções do seu Bash de Navegação.
E vamos olhar para a mesma coisa em nosso iPhone 6S
no modo paisagem, observe como a tela se adota.
Da mesma forma para um iPhone 6S no modo paisagem e
ir até um iPhone SE, e você vê como o site
mudou a maneira como ele está sendo processado.
Então, espero que este exemplo tenha ilustrado como e
por que precisamos de web design responsivo.
O segundo conceito relacionado que você ouvirá é móvel primeiro.
A primeira abordagem móvel, em vez disso, olha para projetar um site para
um dispositivo móvel primeiro.
Portanto, considere como você satisfaria as restrições de tela do seu dispositivo móvel.
E, à medida que o tamanho da tela se expande, você
iniciaria automaticamente um aplicativo no seu site para os tamanhos de tela maiores e maiores.
Talvez, você esteja disposto mais e mais do conteúdo.
De modo a tirar proveito do aumento imobiliário tela.
Assim, o mesmo site ao ver em um dispositivo móvel pode ter apenas
partes das informações que estão sendo reveladas ao usuário.
Mas, em seguida, quando renderizado em um desktop fledge completo ele
pode mostrar uma versão muito mais detalhada do site.
Agora isso tem que ser adaptado automaticamente com base nas informações
que você obtém do dispositivo do qual seu site está sendo visualizado.
Então, como obtemos essa informação?
Felizmente, fazer web design responsivo é suportado por
muitas das modernas estruturas de interface do usuário web front-end, incluindo Bootstrap.
Então, quando olhamos para a definição do Bootstrap em sua página web, ele diz,
primeira abordagem móvel responsiva.
Sim, como vamos fazendo web design responsivo?
Portanto, existem vários conceitos que são incorporados em suas
estruturas de interface do usuário web frame time que vêm em auxílio quando você precisa fazer web design responsivo.
Em primeiro lugar é o que é chamado é um sistema de grade?
Vamos olhar para o sistema Bootstrap Grid com mais detalhes na próxima
palestra.
Para que possamos entender exatamente como podemos aproveitar isso para ser capaz de fazer
web design responsivo.
O segundo aspecto são imagens fluidas, de modo que suas imagens que você incluir em seu
site se adaptem automaticamente ao tamanho da tela.
E a terceira parte é o que é chamado de consultas de mídia CSS do seu código CSS.
Você pode consultar o tamanho da mídia e, em seguida, ajustar adequadamente suas classes CSS
para se ajustar ao tamanho da tela do dispositivo.
Agora, como funcionam as consultas de mídia?
Vamos ver isso a seguir.
As consultas de mídia são suportadas em CSS como este.
Assim, a tecnologia permite que você faça uma consulta de mídia para especificar a largura mínima
da tela sob a qual este conjunto particular de classes CSS estará ativo.
Então, isso seria especificado em seu arquivo CSS como @media e, em
seguida, dentro de colchetes, você especifica, por exemplo, min-width.
Há muito mais opções para as consultas de mídia do que o que estou mostrando aqui.
Este é apenas um exemplo de como você construiria uma consulta de mídia em seu código CSS.
Olhando para o próprio código CSS do Bootstrap,
vamos entrar e ver como as consultas de mídia estão sendo usadas pelo Bootstrap.
Então, aqui você vê um exemplo de uma consulta de mídia onde ele diz, @media e
576 pixels de largura mínima.
E, em seguida, ele especifica que aqueles recipiente de chamada classe CSS particular,
que vamos aprender mais sobre na próxima palestra,
e também no exercício que se segue.
Veremos que a largura do recipiente é definida com base na largura da tela.
Da mesma forma, para uma tela de largura maior, a largura do contêiner é ajustada automaticamente.
Então, isso é o que permite que sua estrutura de interface do usuário da web
suporte a web design responsivo.
Assim, fazendo consultas de mídia, sua estrutura de interface do usuário da web é capaz de
estabelecer em que tipo de dispositivo você está renderizando seu site.
E, de forma correspondente, ajuste as classes CSS para
se adequar ao tamanho da tela de dispositivos específicos.
Então, obviamente, a próxima pergunta que virá em sua mente é como
fazemos isso na prática?
Felizmente, se você começar com um
framework de interface web front-end bem projetado como Bootstrap, as coisas se tornam muito simples.
Aprenderemos mais sobre isso na próxima palestra e no exercício que se segue.
[ MUSIC]