Imagens que se adaptam sozinhas - @Curso em Vídeo HTML5 e CSS3

e vamos continuar os vídeos do Capítulo 11 mas não se esquece no vídeo anterior a gente criou três imagens Você vai precisar ter elas para poder fazer esse exercício aqui então dá mole assistir o vídeo anterior para poder assistir e [Aplausos] E aí [Música] o Olá tudo bem com você seja bem-vindo seja bem vindo a mais um vídeo do seu curso de html com CSS aguento mais falar essa frase Mas vamos prosseguir aqui nós estamos no Capítulo 11 eu fiz um anterior nós falamos sobre tamanho de imagem a importância de você ter na consciência de

que o seu usuário vai acessar o seu site em múltiplos dispositivos equipe você tem que se preocupar com isso porque se você deixar o seu site lento o conta de uma imagem pesada sem tratar essa imagem sem pensar no usuário o Google né ferramentas de busca como todos mas principalmente o Google que a maior ferramenta de busca do Mundo no momento que eu tô gravando aqui é você não vai simplesmente aparecendo esse mecanismo de busca e todo mundo que apareça no Google porque todo mundo quer fazer um site que este site Seja visualizado e no

vídeo anterior nós fizemos isso aqui ó dá uma olhada eu vou dar uma pausa rapidinho na sua aula para contar uma história muito especial que a Record trouxe aqui para gente E como você sabe a Record tem iniciativas pelo Brasil inteiro o objetivo de preparar a galera para o mercado de trabalho EA história que eu trouxe o O que é do Rafael Silva que é morador aqui do Rio de Janeiro na comunidade do Quitanda aqui em costa barros e ele participou de uma das grandes iniciativas da Record que a Record próprio ele foi um dos

selecionados ganha um treinamento completo de desenvolvimento fustec no fim de todo o processo ele foi contratado e hoje trabalha no setor de desenvolvimento de um grande Banco Nacional se você quiser conhecer a história toda do Rafael Silva é só você apontar a câmera do seu celular para esse código QR que tá aparecendo na sua tela e na nossa página especial que foi criada pela recold vai dar o vídeo completo que a gente mostrou só algumas cenas aqui e também vários links para você conhecer todas as iniciativas que a Record traz para você se você preferir

o link que está aparecendo aqui também está na descrição do vídeo Obrigado repouso pelo patrocínio do curso e parabéns a toda equipe e principalmente pelo Rafael pela grande com quem é bom então vou abrir aqui os meus documentos a dentro de documentos nós temos estudos HTML desafios não exercícios no Exercício exercícios 11 e aqui ele tem a pasta de imagens eu queria que 3 imagens uma imagem Pequena que essa daqui para abrir no celular uma imagem média para ver um tablet por exemplo é um pouquinho maior em Vargem Grande padrinho computadores TVs em tudo mais

pode ser até mais tá assim a Guanabara pode tirar quatro cinco seis tamanhos diferentes Pode só tem que adaptar seu código HTML e a gente vai aprender isso agora tão importante não estava nem dizer se você não tiver essas imagens né não faz sentido você tentar fazer se ver e não se esquece também elas estão dentro da pasta a imagem Então vamos lá você vai voltar aqui pra pasta de exercícios para clicar com o botão direito na pasta 1711 que vai mandar Abrir Vamos abrir quando ele abrir com Cold já vai ter a parte mais

gente tá não abre ela não para você não criar o html no lugar errado você abrir aqui ó ele pode criar dentro da paz então vamos clicar aqui ó do lado de fora fica aqui e vou dar novo arquivo Vamos criar o nosso lindo esse. a minha beleza discar o código base aquele negócio de sempre pt-br nos crer aqui ó mídias em HTML 5 de 45 quis botar th1 imagem dinâmica e vou pegar um parafusinho aqui ó tente abrir esse site em vários dispositivos diferentes ou simplesmente aumente e diminua o tamanho do seu navegando Olha

só vamos começar a maneira bem simples nós vamos criar uma tag da tag nova tá Chama peixer a essa tem Pixar ela aparece uma imagem todos que ela tem um MG dentro mas ela permite que você crie vários torces várias Fontes isso é essa imagem vai aparecer uma imagem que a gente tá dizendo nesse código é vai aparecer uma imagem agora qual imagem vou te dizer mostra Simone aqui ó MG src aí pela contra o espaço e vamos colocar aqui ó dentro da pasta imagem eu tenho foto como e aqui com a foto hoje tem

duas maneiras você começa aquela foto G ou você começa a falar pela foto pele tá tem duas maneiras de explicar eu acho que é mais tranquilo entendeu dessa maneira a corrupção mesmo você se quiser estudar conversando pela pena fizesse seus testes aí na sua casa pode fazer tem que pensar no esforços que vão estar sem a faz que nem eu tô fazendo aqui depois que faz experiências eu vou botar aqui ó a imagem flexível Beleza se você abre seu código tá outro exercício 11 tá lá ainda ex-escravo a única que tem que tá aqui não

pode fazendo demais clique em duas vezes ele vai abrir o navegador só colar aqui no cantinho e voltem aqui olha só que que tá acontecendo aqui ele simplesmente abriu a minha imagem grande e alisa eu tô navegando e rolando para o lado aqui parada esquisita no meu caso aqui eu acho que o ideal seria carregar a imagem e me aí carregar imagem que tivesse média para poder caber para almoçar ficar fazendo essa rolagem lateral se incomoda as pessoas galera parece quando você começa a desenvolver sites falar cômoda nada aumenta a tela aí se vira primeiro

cara pode estar no celular e como aumentar de me na tela outra coisa se você não se preocupa com o tamanho da imagem um rolagem lateral os olhos se incomodam muito com rolagem lateral principalmente em dispositivos móveis ele que que você usar vai fazer e vai embora e são usuários foram embora isso aumenta uma taxa que o Google chama de Barros rei ou taxa de rejeição essa taxa de rejeição ela é uma medida para dar valor ou desvalorizar o seu site se o seu usuário busca por uma coisa ele cai no seu site ele fala

não é vai embora e São alto bons traz altos bons Reis Por causa do Google é visto como um site ruim então ele vai parar de indicar o seu site para outras pessoas Deu para entender como é que funciona a ideia da origem do Google então sempre se preocupe com o usuário usuário em primeiro lugar certo o que nós vamos fazer aqui é o seguinte eu não te criar dentro da tag picture um elemento uma uma tag chamada torce E aí você vai ter vários formatos aqui tá nós vamos escolher aqui media-type academia tá aqui

hoje à tarde ele já sugere aqui que você coloque o a Largo a mínima Eu gosto de trabalhar com a largura máxima eu vou mudar aqui para Maxi sweater a aqui o Maxwell vai ser o seguinte por padrão ele vai carregar que eu tô dizendo aquela preocupada ele vai carregar imagem grande mas se por acaso a imagem é o seu navegador tiver menos de mil Essa bota assim amigo PX pra que é o tamanho da imagem média lembra a gente tem uma imagem tá vendo a imagem grande perdão Então as d300 d700 e de mil

essa que tá aparecendo aqui é mil é o tamanho máximo sendo mil eu vou carregar a minha foto e me ponto png aqui no sorte 7 infelizmente contra o espaço não funciona tá ele não tá permitindo mas eu vou colocar aqui a imagem/foto e me ponto.png só seguir o mesmo padrão daqui tá então que ele tá fazendo aqui ele vai carregar a foto grande mas se ele for menor do que mil é sempre chegar a menos de mil ele vai carregar a foto e me faltou colocar aqui ó tá em png Oi de novo tá

vendo ele tá na imagem e me se eu aumentar ó e ele já pula para Jean uma coisa que tá acontecendo ele cria a barra de rolagem lateral tá vendo ó Ele criou a barra de rolagem Aí depois ele diminuiu Então existe um uma folguinha aqui ó então não posso botar exatamente mil eu vou colocar aqui eu sempre Boto mais ou menos 50 pixels a mais que geralmente a largura da barra de rolagem eu vou botar aqui ó 1050 Olha só vamos ver se ele vai o seu aumentar Ele carrega a gente vai cair boa

G eu diminuí ó já foi para m tá vendo Então agora eu já tenho uma daquelas grandes Ele carrega a imagem grande até os médicos também lado e não ficou a barra de rolagem de momento nenhuma lá já deu esse número 50 pixels foram ótimos mas eu diminui demais ó ele volta a ter rolagem lateral vamos fazer isso para imagem Pequena vamos botar aqui ó tá na imagem média eu vou criar acima dele tem que ser a cima tá um outro sócio do tipo media-type aqui eu vou botar Max Williams e aqui eu vou botar

em vez de 700 pixels já sei que eu vou ter que botar 750 porque tem que ter essa folguinha a imagem que eu vou carregar tá dentro de imagens/foto P ponto.png tem que mudar aqui ó Cuidado para não esquecer png beleza atualizei aquela foto média seu aumentar a tela para foto grande se eu diminuir mais falar Posso pequena vamos média pequena o viu então isso vai abrir no celular vamos poucos aqui fosse um celular né é fininho cumprido ele vai carregar imagem Pequena se aumentar um pouquinho ele vai carregar a imagem média se aumentar mais

ainda ou tá no computador uma TV já bota uma imagem melhor para ele então assim isso daqui galera você não tem noção do quanto facilita a vida do seu usuário dificulta nossa né para ficar produzindo mais e mais e mais imagens e Mas não pense assim ah dane-se usuário eu vou é criar meu site eu quero que meu site bonito cara adapte o tamanho das suas imagens ao tamanho da tela do seu usuário Principalmente as imagens porque isso vai fazer Total diferença na experiência do usuário ao acessar seu site EA experiência do usuário sendo boa

demora mais para sair e vai consumir melhor o seu conteúdo você vai diminuir o seu bom sujeito não é a taxa de desistência do usuário eo Google os mecanismos de busca como tudo vão valorizar o seu site na frente dos outros fechou e com certeza Existem várias maneiras de você apoiar o canal do curso em vídeo mais uma das mais importantes é entrando no site do curso em vídeo é esse aqui que tá aparecendo aqui do lado e clicando na parte de cima do link seja um apoiador você ajuda muito projeto assim manter gratuito e

como recompensa a gente oferece alguns vídeos exclusivos alguns vídeos de backstage algumas coisas exclusivos como um curso básico de programação usando portugol Studio algumas aulas adiantadas do curso de html que você tá vendo aqui e de quebra muito em breve também vamos oferecer certificados para quem é apoiador então aperta tempo você pode ajudar a gente acesso a curso em video. Com e clica no link que está na parte superior do site Seja um apoiador então a gente acabou de aprender como trabalhar 1 milhão de tamanhos diferentes utilizando a tag picture nunca se esquece a base

é a imagem padrão que você quer carregar acima dela você vai colocando o esforços na ordem na faz uma experiência na sua Oi gente inverter o Store cê vem aqui vem aqui no computador pra gente ver olha só você pegar esse sócio aqui na imagem Pequena eu tirar ele daqui ó contra o X vou colocar ele aqui embaixo control ver puxar lhe pagar Então eu inverti ia aqui tá a média aqui em cima e a pequena embaixo vamos atualizar e vamos ver se vai funcionar ver e me o que já não pegou tá vendo Então

assim toma cuidado porque a ordem tem que ser assim seguida obedecido senão não funciona tirar aqui 4x vou dar um controle aqui para ele voltar para o lugar aí tá na hora então na foto grande tá aqui a foto média pra cima ou pequena tá em cima de uma menor ainda acima dele Beleza então organiza tudo bonitinho para você poder trabalhar atualizando aqui agora já vai funcionar imagem grande imagem média imagem Pequena faz uns testes aí na sua casa tenta fazer com outras imagens tenta pegar uma imagem sua e faz um cropped no clipe ou

no photoshop para você sei lá e lá vai tar ocupada dos lados porque o celular não tem muita lateral e se você deitar o celular pode ser que ele carrega a imagem média porque ele já vai aumentar a largura a gente tá trabalhando com Mary Wilder que é largura não pode ser quando o celular tiver em pé Ele carrega aí mais encorpada quando ele deitar ele já carrega uma imagem com as laterais em um pouco mais abertas isso é sensacional tô HTML faça seus testes aí porque essa solução aqui que a gente tá vendo É

só com HTML não tem CSS não tem já descritos não tem nada depois java script CSS podem facilitar a tua vida te dando mais funcionalidade mas essa HTML5 decisão até repetir é novidade E a gente tá trazendo aqui pra você beleza fechou a Tainá eu treinar a nota faz anotações faz testes e treinar com uma imagem sua tropa imagem gera várias versões da mesma imagem né Não só aumentar e diminuir a imagem cropar elas tipo você tá me vendo naquela achei aqui você pode mostrar só no celular pode aparecer só esse lado aqui no tablet

pode aparecer um pouquinho mais e se você tiver um é uma tela é maior você pode mostrar à toa então Copa a imagem né usa a ferramenta de cropped do seu editor de desenhos de imagem para cortar a imagem eliminasse a parte aqui de fora Caso seja o celular aqui se foi o tablet como aquela grandona faz isso aí na sua casa inclusive é um dos Desafios vou te mostrar aqui no final desse Capítulo fechou um grande abraço boas práticas aí não esquece Ela traz informações e a gente se vê no próximo vídeo a gente

vai falar sobre outro tipo de mídia que são usados [Música] [Aplausos] E aí E aí [Música]