Responsividade para sites - @Curso em Vídeo HTML5 e CSS3

eu esqueci é mais um vídeo sobre o capítulo 17 do nosso material onde a gente está querendo o nosso Mini para já tá [Aplausos] E aí [Música] o Olá tudo bem com você seja bem-vindo seja bem-vinda a mais um vídeo aqui no seu corpo dela primeiro o CSS e agora a gente vai começar a conversar sobre responsividade basicamente responsabilidade é um conceito de simples que é adaptar o tamanho e o conteúdo do seu site ao tamanho de telas diferentes Então quando você abre um vídeo ou um site em um computador já tem uma tela bem

maior ainda mais quando você usa dentro de um celular né no celular quando você vai consumir conteúdo de texto você deixa a tela impressa em quando você vai construir conteúdo de vídeo você deita é normalmente a gente deita então assim você precisa adaptar o seu conteúdo a esse tipo de variação a isso a gente chama de responsabilidade o seu site vai responder né se adaptando ao tamanho da tela onde ele está sendo exibido Então essa é a ideia principal responsabilidade e um dos recursos mais simples a gente tem recursos muito mais avançados a gente vai

vir mais para frente mas um dia cursos bem simples a limitar o tamanho mínimo e o tamanho máximo de interfaces e exatamente para isso a gente veio falar nesse vídeo então diretamente para o computador e vou te explicar melhor sobre que eu tô falando nessa aula aqui o recado que eu vou te passar é da hostnet mais uma vez e nos recados anteriores eu falei que a Rosinete pode criar o seu próprio site para você seja ele um site e uma loja uma plataforma de Educação a Distância e nos comentários do vídeo aparecer uma coisa

do tipo ah mas eu já tenho um site mas eu queria levar para Rosinete porque ela especializada em WordPress ou porque em um outro recado eu falei e quem é assinante decerto os planos ganha cursos venha também ferramentas depoimento tem muita gente entrou em contato falando Poxa mas eu já tenho hospedagem em um outro lugar e queria migrar para Rosinete Isso é muito difícil pois o recado que ele vieram daqui para você não não é nada difícil você consegue fazer sozinho com alguns tutoriais que a gente tem mas se você não se sente apto ou

apta a realizar esse processo você Ah tá com atendimento da hostnet também E aí que desse suporte deles vai realizar essa migração toda adaptação de um outro local para o local da hostnet E aí você passa a ter acesso a todos esses recursos para você na sua hospedagem Então se por acaso você está hospedado em um outro local e que a migrar para a hostnet até nisso os caras te ajuda vamos voltar a nossa aula normal Então esse foi o nosso. Aqui que a gente chegou na última aula a gente fez algumas configurações globais tá

vendo aqui ó a gente fez algumas configurações de variáveis a gente fez margem perdem a gente zero margem pede para todas as medidas do que fez e as margens sumissem se a gente não tivesse isso daqui ó o nosso resultado teria um pouco diferente seria algumas folgas que existem aqui no meio que a gente fez essa configuração se você não entendeu direito que tá acontecendo aqui se você não viu o vídeo anterior ou você não prestou atenção então volta lá porque o vídeo entendeu é muito importante e o que eu vou fazer aqui é o

seguinte eu vou fechar que ocorre eu vou te mostrar uma coisa quando a gente faz esse aqui e o nosso site se conhecerem por cento tá vendo ali ele responde razoavelmente bem ao tamanho da tela então presente quando eu volto menor tamanho de tela aqui que eu vou colocar que no caso aqui que o Chrome permite 500 de largura se eu não me engano ele fica na razoavelmente adaptado só que a gente tem um problema ele começa a ter uma rolagem lateral ó a nossa imagem tá vazando tá dando robozinho a imagem da criadora né

da Irina também tá vazando o nosso vídeo o nosso vídeo também tá vazando e vai ser bem pouco mas que tá vazando não é isso nosso objetivo então eu não posso ter esse tipo de rolagem lateral rolagem vertical ela é natural né você vai com o dedo na tela do celular com o seu dispositivo e coloca outro grande problema que eu não vou conseguir representar tão bem assim aqui é telas muito grandes então por exemplo se você ampliar você começa a perceber se o texto meio que perde o sentido da vendo você fica lendo um

parágrafo muito grande se você tiver vendo uma televisão por exemplo imagina essa tela você tá vendo aí agora tá vendo uma televisão de 60 polegadas você vai começar a ler assim você e era para aqui vai mexer na cabeça vai mexer na cabeça vendo ele vai passando e o peixe fica muito grande então o ideal é a gente bota mais ou menos o ideal em 1200 1200 pixels de largura acima de 1200 pixels de largura a gente já vai criar um bloco que seja adaptável mas que ele não vai ser muito largo Então deixa eu

abrir uma dica que eu já dei para você o botão direito em inspecionar aí ele vai abrir o débito e aí a partir do momento em que você abre débitos você pode aumentar e diminuir o tamanho do seu navegador que lá em cima aqui em cima da minha cabeça vai aparecer é meio do rato das vezes não aparece vou mostrar aqui pra você a outra venda aparece lá em cima o tamanho da tela então normalmente nós vamos fixar em mil tá ó vê se em mil pixels isso aqui essa Renata com mil pixels de largura

apareceu aqui ó volta no vídeo apareceu aqui em cima a medida e já tá mais adaptável já tá mais um pouco mais cômodo o ideal seria a gente dá uma centralizada uma aumentada o blocos aqui de imagem tá vendo aqui já tá aí é tranquilo para ler menos que isso até aqui ele se adaptou bem até esse momento aqui que foi Deixa eu ver a medida aqui do 101 até 800 ficou legal tá 800 ficou ok também pode até fixarem 800 se vocês acharem melhor vamos vamos vamos ver aqui que a gente já dá todos

os santos assumiu o tamanho máximo só que quando diminui 800 já começa a quebrar diminuir um pouquinho de 800 já começou a quebrar as imagens e aí não é isso que eu quero Então vamos aprender um recurso que é a largura máxima e a largura mínima que a gente viu no capítulo 17 no texto mas eu vou te mostrar aqui na prática criando um exercício Então vou fechar isso tudo aqui vou abrir a minha pasta do desafio a gente está trabalhando um desafio né pela primeira vez eu desafio resolvido passo a passo né dentro dos

estudos desafio é o nosso desafio 10 Então vamos abrir o desafio daí com o visual Studio code não eu abrir a pasta de desafio desafio 10 oi Google fala o que eu vou fazer o seguinte eu vou fechar esses dois arquivos que estão abertas são um desafio e eu vou criar um secundário aqui um arquivo secundário só para te explicar Exatamente porque a no exercício que a gente tá fazendo ele tem muitos componentes - componentes você poder entender então que eu vou fazer aqui que é um arquivo novo que eu vou chamar de responsivo controle

a teníase é só um teste response de responsabilidades na nossa exercício vai ficar responsável uma coisa interessante é o seguinte antigamente algum tempo atrás alguns poucos ainda fazem isso eles criam um site já para dispositivos móveis um site todo para dispositivos móveis em um site todos para de possíveis grandes não é legal isso tá você acaba tendo que manter vários códigos o irá você tornar um código único response Vamos criar esse responsivo aqui o código base português no Brasil Vou botar aqui Fast de responsividade e aqui nós vamos criar um código Man e dentro do

Meio vou criar um H1 testando responsividade e um parágrafo com é só como criar vários Lauren tá dentro de um mesmo parágrafo criei três ordem vamos abrir a pasta no desafio 10 e vamos abrir o arquivo responsivo beleza tá aqui se você não fizer nada ele já é meio responsivo tá vendo ele vai o texto vai se espremendo E vai um criando porque a gente tem um modelo de blocos esse aqui é um bloco isso aqui é outro bloco e os blocos por padrão o cupom sem por cento da tela aquilo que a gente falou

no capítulo anterior Só que tem um problema vamos adicionar aqui também que a registrar na parte dos Desafios a imagem tá Irina por exemplo a dentro de imagens Irina e na Block normal daqui menina Block quando eu atualizo aqui tem a foto da Helena e ela não é adaptável ao tamanho tá vendo ela aumenta diminui ou copiar esse parágrafo daqui vou colocar na parte de baixo da imagem também vai ficar um parágrafo em cima e um parágrafo embaixo beleza a responsabilidade aqui já começa a ser comprometida Por que a imagem quando estiver no final da

já causa a acao rolagem lá o filme não desejo a responsabilidade Então vamos lá vamos começar a trabalhar o estilo aqui para configurar antes de começar o estilo eu gosto de mostrar para você o seguinte aqui a gente já tem alguns plugins na alguns algumas extensões do Chrome que palavras e nós vamos criar essa aqui também Chrome Web Store é abre a Chrome Web Store Chrome Web Store a gente vai instalar esse daqui é o Windows which size Windows size mostrar o ícone deles cara aqui ó Windows size vamos clicar em usar no Chrome vamos

adicionar a extensão Beleza a gente vai ter que dar algumas autorizações aí ele aqui deixa eu te mostrar ó ele ficou aqui em cima tá em cima da minha cabeça instalar o Windows size eu vou clicar e aí ó dá Clique agora eu vou te explicar como é que funciona e nós vamos fazer o seguinte o primeiro vamos ligar esse vizinho aqui ele vai dizer que você tem que fazer algumas configurações algumas autorizações Tá ok na verdade é uma outra ligação só que vai colocar esse aqui ó permitir acesso aos url de arquivos presente beleza

e pode fechar janela e tá aqui ó a partir de agora eu posso clicar aqui ele vai ficar aqui embaixo a minha viewport o tamanho da minha viewport eu consigo diminuir Agora ficou mais fácil de ver tá vendo 800 700 até 800 deixa eu ver aqui em 110 800 até 807 ele não quebrou aquele já quebrou Então nós vamos fazer o seguinte esse pudim aqui não faz para isso não tá isso porque a gente faz muito mais coisas por exemplo que você pode clicar nesse botão aqui ó nesse segundo botão e ver como vai ficar

o seu site no celular vendo ele mostra que ele cria um mini celularzinho ó Celular maior um tablet como vai ficar então ele consegue organizar muito melhor seu conteúdo ou fechar aqui aí em vez de você ficar só de diminuindo e aumentando aqui a gente vai trabalhar sim mas você agora tem Windows size também consegue botar aqui embaixo um tamanho de tela especial tá específico mas basicamente isso a gente vai usar Tá então vamos nessa vamos voltar o estilo aqui primeira coisa que eu vou botar é o seletor E aí e vou botar um background

nele nós vamos color outra que em verificar o fundo cinza beleza vou fazer com que o meu mente tenha background-color e branco para ele ficar de limitada aqui na tela certo vou criar um pedem aqui também de 20 pixels e vou criar um border-radius 10px na frente poder ver o momento e que ele quebra pantalla certo tá aqui isso daqui vai fazer o seguinte isso aqui tá sem configuração nenhuma Extra telas muito grandes e fica grande demais telas Muito pequenas eles ficam muito pequenas tá na imagem quebrou aqui é importante seu seguinte ele não quebrou

a dívida né eu boto essa borda redondinho aqui em cima para você saber em que momento ele quebra também daqui não quebrou tá redondinho aqui pode ele quebrar esse redondinho vai vai sumir você vai entender já já se eu colocar de tamanho fixo por exemplo vamos supor e a gente entrou num acordo aqui que 800 é o tamanho perfeito para o nosso conteúdo para a gente pode fazer isso aqui ó a e vai ser 800 pixels eu botei a largura e 800 pixels estão tá lá aumentando ele fica lá normal quando diminui ele quebra a

ele quebra geral tá vendo ó tá a foto fica perfeito o conteúdo não quebra porém ele cria a rolagem lateral é a outra coisa que eu posso fazer ele crescer muito mais do que 800 eu posso botar o conteúdo alinhado ao centro Como que eu faço isso a gente já viu anteriormente é só a gente colocar uma margem alto só de botar margem alto ou as margens laterais automáticas ele já fica Centralizado Então olha só isso quando eu estou visitando um site normalmente tá lá eu consigo ler o conteúdo se eu botar numa televisão gigante

ele fica de uma maneira onde ele vai aproveitar o meu ponto de leitura que é o centro da tela mas ele não vai quebrar o site agora a gente tem um problema se a gente ficar menor que 800 Aí Já Era Eu tenho rolagem lateral meu site não está responsivo Vamos aprender as e quando você em vez de usar só wieder você tem duas propriedades que são mais responsivos que é o valor mínimo de largura é um meda e o valor máximo de altura que é o Max Líder na verdade é o seguinte o tamanho

máximo que ele vai ocupar mesmo numa tela gigante é 800 um botar aqui 800 fixo e o tamanho mínimo que ele vai ocupar eu vou colocar aqui 320 porque 320 320 é largura de um celulares bem antigos é largura máxima quando a tela está em pé quando aquela tá assim ó essa largura é 320 não nos celulares mais modernos já celular é razoavelmente antigos essa largura aqui na tela é 320 pixels eu vou botar aqui o tamanho mínimo 320 o tamanho máximo é 800 vamos atualizar E aí olha só o que ele vai fazer tá

normal tá vendo tá 800 quando eu até lá diminuir de 800 Deixa eu ligar aqui eu liguei até ela tá 948 da tá ó quando ele diminui aí ó olha isso a imagem tá quebrando tá vendo a imagem está indo direto só que o conteúdo olha só ele tá se adaptando até o tamanho de 320 Óbvio tá vendo Então quando eu aumento aqui ó eu deixo o meu site mais cômodo para ver eu tenho que resolver a imagem ainda mais ó tá vendo eu consigo dar uma diminuída aqui só que a imagem quebrou Vamos tentar

resolver a imagem aqui simples eu vou fazer o MG Eu acho que só botar largura de 100 porcento já resolve ó atualizei e olha isso Olha isso quando ele aumenta ele fica no tamanho de 800 que a largura normal vai imagem e quando diminui Ó olha isso ele já vai reduzindo na verdade verdade verdadeira eu fiz um negócio mais legal para você eu vou fazer o seguinte vou te mostrar um negócio que a gente já viu anteriormente eu vou pegar essa imagem aqui e eu vou envelopar ela controu o envelopar tá aqui eu vou envelopar

num picture ali já já escreveu pizza aqui só que ele fica aqui em cima e já sugeriu picha vou dar enter ele já colocou aqui essa picture eu vou conseguir criar aqui um forte diferente que eu posso voltar aqui sorte já com mídia aqui eu vou trabalhar eu não gostava da largura mínima tá vendo aqui a mesma propriedade que a gente tá fazendo vou trabalhar com máxima o máximo que ele vai ter É só botar 800 o botão 800 aqui e a minha imagem vai ser tá vendo a parte de imagem barra Irina blog pq

é o nome do arquivo que eu tenho lá infelizmente um contra o espaço não funciona aqui nessa rc-7 vai entender então o que que vai acontecer aqui ó eu vou ter a imagem normal quando chegar aos 800 ele vai carregar a Helena menor tá vendo eu eu fiz essa imagem aqui tá se você olhar lá dentro das imagens ó eu tenho ele na Block normal essa daqui deitada e ele na Block pq é pq e para larguras mais curtas eu cortei essa aqui é para larguras maiores eu fiz uma expansão aqui no meu corte poderia

ter ampliado mais pega aqui o pescoço dela enfim mas não não optei por não fazer e aqui eu tirei as laterais para dispositivos sem muita largura eu gerei essas duas imagens né usando 20 mas agora olha só olha como é que o meu meu site está mais responsivo tá vendo Então quando eu coloco isso daqui não quebrou né mas eu tô achando essa aqui muito grande dava ainda para dar uma diminuída eu vou botar aqui e lá 600 você vem 600 ela quebra vamos ver aqui ó normal tá diminuindo chegou no momento incômodo já tá

mais difícil de ver aí gostei gostei disso aqui olha isso Olha isso olha aqui praticidade perto então eu consigo fazer o meu site ficar responsivo vamos com o nosso pudim na verdade plugin não né o nosso extensão aqui do Chrome vamos explicar aqui eu vou clicar aqui ó essa polpa essa menina está essa parte aqui em Isaac também e também tá uma coisa que é interessante eu não sei se você sabe você pode vir aqui se você quer Minimizar alguma coisa tá aqui não é isso aqui que eu quero então você pode simplesmente pegar a

janela e dá uma sacudida nela vocês acorda é a única janela que fica assim eu vou abrir só falta janela aqui para colocar e quando eu saco da janela de novo ó ó ele volta otimo Estado então vamos testar aqui ó no telefone falar um ele deu uma quebrada aqui em assim porque que ele deu uma quebrada que lembra que eu falei que a largura é 320 só que ele tem os prédinhos aqui do lado eu vou colocar 300 Então vou voltar aqui não é 320 eu vou botar é porque você a gente tem a

margem a nossa margem foi de 10 pixels Então vou botar lá 280 vão ver se ele atualiza a gente vai ter que fechar atualizar aqui no Google Chrome e vou clicarem abrindo a viewport luminis aqui agora ele ainda tá causando uma rolagem bem pequenininha mas ó aqui já não causa tá vendo certo então você consegue e a responsabilidade do teu site claro que existem outras técnicas existem flexbox né existem outras formas da gente conseguir organizar nosso conteúdo Mas esse momento inicial a gente está querendo nosso primeiro mini projeto esse recurso de você conseguir a utilizar

um a largura mínima e a largura máxima é dependendo do a sua disposição é dependendo da sua organização do conteúdo É bem interessante claro que o presa topo do site a gente vai deixar ele totalmente responsivo com os cem porcento de largura como ele é normalmente naturalmente beleza e aqui a gente já viu essa coisa de usar o pinscher como um recurso de responsabilidade já se a tela for muito fininha ele já carrega imagens diferentes a gente já viu isso no capítulo sobre imagens também você encontra esse capítulo na nossa playlist completa de acompanhamento do

material e ela fica sempre aqui ó em cima da minha cabeça não entendi a interatividade do YouTube é Oi e aí tá gostando do curso tá achando legal a ideia desse curso Ele tá dando um trabalhão para gente desenvolver eu vim aqui te pedir um e-mail por favor para divulgar esse curso eu creio jeito bem legal de também talvez divulgar o seu trabalho isso porque no repositório que eu vou falar várias vezes no curso além do nosso material de apoio todos os exercícios também vai ter uma pasta chamada ajude na divulgação se você quiser pode

entrar lá baixar essa pasta inteira e aí você vai encontrar várias imagens em vários formatos para ajudar na divulgação Eu particularmente vou fazer uma versão mas você que artista Você que sabe desenhar que sabe ilustrar o que manja muito de Photoshop no Estreito pode criar uma arte baseada nos tamanhos né gente vai ter o tamanho deitado o tamanho pé e também quadradinho você pode criar essas Artes e mandar para gente Para esse e-mail aqui ó que é arte@curso em video ponto com não tem ponto br no final e a idade de selecionadas vão ser divulgadas

no meu Instagram pessoal e no Instagram do Conselho estão aparecendo aqui embaixo e o artista pode ajudar a gente criando Artes pode produzir o seu conteúdo que a gente ajuda a divulgar e se você não é bom com artes não tem problema é só se essa pasta ajude na divulgação do nosso repositório escolher um ou mais imagens e divulgar nas suas redes sociais grupos e tudo mais valeu mesmo já agradeço antecipadamente pela sua divulgação o que vai tornar Com certeza esse curso muito grande que vai ajudar muitas pessoas Então é isso encerramos esse vídeo aqui

no próximo vídeo a gente vai adaptar esse conceito de responsabilidade ao nosso exercício original que vamos começar a fazer algumas configurações no cabeçalho para poder deixar ele organizadinho tá gente então é isso a gente se vê no próximo vídeo Um grande abraço para tica aí na sua casa não se esquece de anotar tudo e a gente se vê na próxima [Música] [Aplausos] [Música] E aí E aí [Aplausos] [Música]