Imagens Dinâmicas - @Curso em Vídeo HTML5 e CSS3

Já chegamos agora aos estudos do seu Capítulo 11 então acesso ao repositório Abra o material vamos começar a estudar o [Aplausos] E aí [Música] o Olá tudo bem com você seja bem-vindo seja bem vindo a mais um capítulo aqui do seu material eu tô um pouquinho diferente essa quarentena não tá me fazendo tão bem mas eu tô tentando manter aqui a minhas qualidades mas vamos começar agora ao nosso Capítulo 11 a gente vai falar sobre mídias como tudo eu já falei sobre imagens em capítulos anteriores e agora eu vou falar sobre imagens dinâmicas a gente

vai falar esse capítulo também sobre áudio e subir vídeo é uma tem bastante vídeo aí para você poder acostumar a trabalhar com mídias né gente vai fazer várias aulas aqui pra você poder exercitar bastante beleza aquele mesmo esquema sempre anotando tudo é bastante comando é bastante informação mantém as suas anotações aí no caderno ou na última folhinha do material caso você tem pressa o nosso PDF e mantém tudo que sendo praticado faz os exercícios aí tudo aquilo que eu começar a falar sobre os assuntos você faz aí também e a nota as informações mais importante

a gente começa o capítulo falando sobre adaptação de material para múltiplas mídias e tamanhos de tela Isso é uma realidade hoje em dia você acessa bastante site o seu celular o seu Tablet também acesso a sites de computador uma porcentagem bem pequenininha da população acessa via televisões na Smart TVs e tudo mais então todo o seu conteúdo tem que se adaptar ao seu público principal E aí leva uma coisa importante porque o seguinte quando você trabalha com imagens principalmente que eu acho que a gente vai começar a trabalhar aqui a gente tem a tendência a

achar que o ideal é trabalhar com maior tamanho de imagem possível aí eu vou pegar a imagem na melhor resolução possível porque eu quero que meu site fique muito lindo fiquei muito bonito a gente já discutimos sobre isso nos Capítulos anteriores A gente já fez um levantamento de que você não pode gerar a maior resolução possível por isso vai lá o seu site vai gerar um site pesado hein já discutiu sobre isso também se você quiser uma referência volta lá para os vídeos do Capítulo 6 do Capítulo 6 gente discutiu bastante sobre tamanho de imagem

e isso faz com que tem O que é você botar uma imagem grande e depois de reduzir por CSS que a gente vai para mim depois você não diminui o tamanho do arquivo a carga do arquivo Continua pesada e site eventos são bem prejudicadas pelo Google bem prejudicadas mesmo e aí você vai cansar sem Ah não então tá bom aquela a gente aprendeu no capítulo 6 vou deixar ele um tamanho razoável para a média quanto ela pequenininha ou tela média tela grande eu vou botar numa média e nem sempre Isto é satisfatório nem sempre isso

é suficiente Então o que eu vou te ensinar agora nesse início do Capítulo 11 que a gente viu lá no materno PDF nós vamos ver aqui no vídeo aqui na prática você vai ver na frente dos seus olhos acontecendo é que a gente vai trabalhar com múltiplas imagens para tamanhos de telas diferentes e o próprio HTML vai se virar com isso isso é bem legal então eu diretamente para o computador e vamos aprender a trabalhar com essas imagens vão começar nesse capítulo criando essas imagens nosso recado mais uma vez aqui nessa aula é do estudo

na alta e dessa vez eu vim falar sobre um curso muito maneiro e precisa de conhecimento de programação e não é para criação de sites ele é um curso especial que te ensina produção de vídeos você está assistindo esse curso desde o início você sabe que eu tô gravando esse curso dentro do meu apartamento daqui a um pequeno cômodo que eu uso como escritório e o transformei ele completamente um estúdio de gravação e dentro do Studio na alta nós temos um curso nós temos vários módulos Na verdade até o momento são seis módulos lançados que

vão te ensinar a produzir o seu conteúdo em vídeo nesse curso existem módulos que vão te ensinar a tratar a iluminação captação de som de vídeo vai te ensinar também a editar vídeos no Premiere né fazer os cortes esses passos que você vê acontecendo aí inclusive que acabou de acontecer um também vai aprender a fazer pequenas animações com After Effects e também a utilizar o Photoshop para criar sua Tumblr E para isso é só você se tornar aluno do estudo na alta e pagando o valor mensal pequenininho vai ter acesso a todos esses módulos ea

o módulo de outros cursos que eu sempre vem apresentando aqui para você é só você acessar esse link que está aqui ó apontando a câmera do seu celular para esse QR Code e lá você vai ter maiores informações inclusive um cadastro de reserva caso as nossas vagas tenham se encerrado temporariamente o grande abraço hoje tudo na alta Obrigado aí pelo Patrocínio e voltamos agora a nossa aula normal Então é só já estou aqui no meio ambiente primeira coisa que eu vou fazer a gente já tem aqui o guia instalado você não está louco que você

pulou coisas lá atrás no curso né Eu recomendo que você utilize o INPI daqui eu uso no meu dia a dia muito photoshop mas eu tenho a licença né eu tenho aqui por conta do curso em vídeo por conta do estudo na alta eu tenho uma assinatura na equipe Então para mim é bem tranquilo usar o Photoshop mais eu não posso obrigar ninguém a ter o Photoshop porque ele realmente é bem caro Apesar de que para mim com o professor para você como aluno ele tem um descontinho mas não é um desconto absurdo não é

você vai abrir o seguinte os três arquivos nesses arquivos eu vou fazer o seguinte você vai clicar em arquivo nova ele aqui é um novo documento e aqui ele já vai colocar aqui largura altura padrão e opções avançadas você vai abrir tudo isso aqui perto Você clicou aqui na opção avançar nós vamos colocar o primeiro arquivo com 300 de largura perfeito tabi 300 de altura alto gerando uma imagem 300 por 300 na hora que você digitar você aperta o tabi passar próximo a minha resolução 13 anos é muita coisa eu vou botar aqui 80 quando

eu dou e tenta ele já calcula aqui ó porque tá ligado essa escadinha 80 por exemplo Então você clica 80 clica aqui muda de três anos 80 aperto Tab ele já vai adaptar aqui você pode botar inteiro de 8 bits pode deixar como inteiro de 8 bits no meu caso se tiver diferente você pode mudar o seu também a preencher com cores de fundo Ok vamos criar o arquivo 300 por 300 Esse é meu primeiro Arquivo ele vai ser uma imagem que eu vou simular qualquer coisa para quando eu tiver trabalhando no celular celular que

não tá pequenininha vou gerar uma uma imagem 300 portuguesa beleza gerei a primeira vamos ver a segunda vai fazer não sei na tua casa E agora se você abriu para fazer a poção ele já Manteve as configurações anteriores Vamos criar um arquivo 700 por 700 eu vou ter que 700 deitado e 700 deitar deixa 80 por 80 aqui ok já gerei uns um arquivo maior 700 600 que eu vou abrir um tablet sei lá e para notebook TVs isso mais vou criar um arquivo mil por mil a outra tá aqui ó mil e mil ouvir

aqui na configuração avançada já tá 80 por 80 mesma resolução e Beleza então eu tenho uma imagem Pequena uma imagem média e uma imagem grande só vou postar essa imagem grande que ficou menor não é porque ele tá visualizando aqui em 66 por cento aqui embaixo se eu botar 100% aqui aí ele tá visualizando eu tenho uma imagem grande uma média é uma pequena perto ficar aqui ó pode ver as porcentagens colocar de sessenta e Seis por cento aqui também vou botar 66 porcentos nem dá para digitar aqui você precisa de por cento tá isso

aqui não aumenta nem diminui o tamanho do arquivo tá isso aqui é só azul eu vou fazer o seguinte eu tenho que média e grande vamos Aquela pequena e vamos colocar uma letra P entendeu Vou mudar aqui acordar o domingo está na sua casa então o que eu fiz cliquei aqui na cor e só achei o mouse e cliquei arrastei Preto aqui se quiser pode vir aqui botar 000 000 na notação HTML é que aquela notação hexadecimal eu vou fazer o seguinte eu vou clicar aqui nesse componente aqui que a ferramenta de texto fiquei nele

vou clicar aqui ó e vou colocar uma letra P que vai ser minha imagem Pequena plano quando eu coloquei a letra P ele me permitiu escolher aqui ó a fonte que eu vou deixar Arial bold e aqui o tamanho que eu vou botar 150 eu vou ter que selecionar aqui na selecionei o p aí eu tenho que botar 150 tá Daí a gente ele tá aqui eu quero que esse perfil aqui na metade do arquivo exe no arquivo é 300 por 300 certo vai fazer você vai botar o mouse aqui ó por fora da régua

tá vendo ele tá exatamente aqui em cima da régua vou arrastar para baixo e vou colocar aqui ó a guia seja 300 vou colocar gheno 150 olha aqui embaixo Quer ver Deixa eu botar 150 aqui já vou te mostrar onde ele tá ele coloquei 150 Se você olhar vai ser exatamente aquilo que eu passei um mouse tá e botar um 911, seis kabaite que é o tamanho do arquivo que vai me gerar mas quando você arrasta ele vai mudar isso daqui para um valor quer ver ó vou vir com o mouse aqui para fora em

cima da régua lateral e vou arrastar pro lado também ó ele agora já tá mostrando adicionar ria 150 Vamos botar no 150 que eu tenho certeza que ele vai estar na metade tá agora eu vou mudar a ferramenta aqui para essa setinha vou pegar esse p e você vai ver que ele vai colar ele já gruda tá vendo ele gruda para ficar exatamente no meio Ficou show e da minha imagem Pequena outra coisa que eu vou fazer essa minha camada do pequeno aqui ó tá uma opacidade de 100 porcento eu vou clicar uma vez e

vou digitar aqui ó 50 ficar cinquenta por cento vou dar entrada já tá com uma cidade de cinquenta por cento sobre ficar um bem fraquinho na tela vou tentar o fundo dessa imagem também deixa deixar o primeiro botar um m e um dia aqui nas outras imagens depois eu penso com essa ferramenta selecionada que essa senhora câmera aqui que você pode ver aqui ó movimento eu posso pegar esse oi vem aqui clico e tu arrastando o mouse para arrastar para cá para cima e vou largar ele aqui para lavar em qualquer lugar ele já ficou

no meio porque ele considerou que estava na metade do anterior também vou pegar esse mesmo Pedro aqui e vou arrastar para terceira imagem ela rastreio para cá soltei ele ficou um te no meio claro que esse aqui é a new age pequena essa aquele imagem média Então vamos mudar Clique na ferramenta de texto você vai selecionar aqui ó selecionei só arrastei hoje tá M nem a imagem média vou vir aqui na última imagem ainda com a ferramenta de texto selecionada cliquei arrastei para selecionar o botar o dinheiro amanhã a imagem grande então eu fiz uma

imagem Pequena ou imagem média imagem grande problema que elas estão em branco mas não com fundo branco eu tenho que modificar o fundo para eu poder diferenciar se ficar com fundo branco vai ficar no fundo branco do navegador e você não vai conseguir enxergar então nessa imagem aqui eu vou pintar aí capim tal você vai clicar no Balde no Balde Zinho aqui e aqui eu vou escolher no lugar de preto a cor que eu quero tentar até eu vou ter que pintar aqui no fundo a tem que selecionar aqui a camada de fundo vou vir

no baldinho aqui eu tenho preto eu não quero Preto fiquei eu vou botar aqui um código porque eu já deixei a minha colinha aqui ó FB digita tudo minúsculo tá FB é 91 já é a essa vai ser a cor clique em Ok e Kiko aqui em pintar Se você não se por acaso você clicar em um pintar porque você não selecionou o fundo aqui cria um fundo amarelinho bem fraquinho só para diferenciar na média ou pintar de outro jeito de outra cor né selecionei baldinho cliquei aqui vou botar a segunda cor que é um

vermelho bem clarinho quase Rosa F4 the 9c 2 ok já ficou a cor meio rosadinha aqui eu tenho aqui para fundo através do seu clicar aqui não pinta eu queria aqui ó Fundo de Quintal já fiquei bem rosinha aqui e hoje eu vou botar Verde então vou clicar aqui no Rosa vou colocar a cor porque aqui abc7 sabe Ok já ficou verdinho vou pintar o fundo então clica no fundo e pinta olha só que é uma imagem média animais em grandes Claro tomar quintal uma imagem vai pegar uma imagem profissional vai cortar ela em tamanhos

diferentes para poder caber Inclusive tem um desafio para você poder fazer isso lá no material de desafios mas no caso aqui do exercício estou fazendo de uma maneira mais simples vamos salvar que a minha imagem Pequena imagem média me imagem grande o aplicativo do pequeno antes eu tenho que ler a pasta né Vamos criar minha parte aqui então é só vim aqui no meio explorador de arquivos vou vir aqui ó cê: não meus documentos e Estudos HTML CSS vamos nos exercícios eu vou criar o exercício 11 aqui ó o botão direito novo pasta nuclear ex-01

um exercício 11 e tem lá no repositório também que você dá uma olhada Talvez seja um pouquinho diferente mas vamos salvar as imagens aqui dentro eu vou abrir aqui visite 11 ou clicar com o botão direito e vou criar novo pasta e o nome da pasta vai ser imagens isso é eu tenho dentro de exercícios o exercício 11 e dentro há 11 eu tenho a pasta de imagens eu vou salvar essas três imagens que eu desenhei aqui no Gimp dentro dessa pasta como arquivo exportar certo ele já vai sugerir o formato png tá perfeito eu

vou aqui em documentos meus estudos meu HTML CSS meus exercícios exercícios 11 imagens aí eu vou criar aqui ó me chamar ele de foto tudo minúsculo tá para evitar sem sem acento sem nada foto tracinho sinal de menos ter ponto.png até a foto sinal de menos p.mg clique em exportar ele vai me perguntar algumas coisas aqui tá vamos salvar a cor de fundo isso só isso só mandei essas configurações assim do jeito que tá e clique em exportar já exporter a imagem Pequena vamos exportar a imagem média erro exportar já para na mesma pasta né

se não parar tá lá e meus documentos documentos estudos HTML exercício exercício 11 não esquece a pasta de mágica aqui duas vezes agora eu vou ter aqui a foto pagar e a foto p e vou botar a foto e me o nome do arquivo exportar vai perguntar de novo mas não exportar vamos agora a última imagem que a imagem G vamos salvar como não exportar e agora nós vamos colocar aqui ou foto e o pênis suportar também pergunta a mesma coisa cortar Beleza então meninas aqui e ver se as imagens estão lá eu tenho a

minha foto grande verdinha é a minha foto média Rosinha tem minha foto pequena Amarelo certo olha só já fiz as minhas três imagens de tamanho diferente celular tablet e computador Beleza então já que nós temos essas imagens eu vou encerrar esse vídeo por aqui e no próximo eu vou te mostrar como fazer para carregar essas imagens usando um HTML especial utilizando bactéria especial que a tag Pinscher 1 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 particulamente 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 selecionadas vão ser divulgadas no meu Instagram pessoal e no Instagram do Conselho vídeo que 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 mas não esquece você tem que fazer essas imagens para você poder ter a possibilidade de fazer o Próximo exercício não esquece que você tem que salvar na pasta bonitinho conforme eu te indiquei aqui durante esse vídeo se você tiver alguma dúvida volte aqui para assistir o vídeo novo e vai por

mim assistir o celular na mão vai assistindo aqui e vai fazendo no seu computador é muito mais prático do que só você assistir vídeo só assistir já falamos sobre isso não adianta praticamente nada beleza fechado então a gente se vê no próximo vídeo já cresci os arquivos aí organiza Suas pastas bonitinhas pelo próximo and vai abrir o editor de começar a trabalhar um grande abraço e até já já E aí [Música] [Aplausos] E aí [Aplausos] [Música]