Criando um site com versão para impressora - @Curso em Vídeo HTML5 e CSS3

e esse aqui é o segundo vídeo do Capítulo 25 falando sobre o Media Player eu quero deixar aviso importante se você não viu o vídeo anterior assista porque eu te mostrei o que que é uma mídia kiwi e quais são os arquivos que você vai baixar para poder acompanhar esse capítulo 1 [Aplausos] [Música] o Olá tudo bem com você seja muito bem vindo muito bem vindo a mais um vídeo aqui do seu curso de HTML e CSS nós estamos no capítulo de mídia Onde nós estamos aprendendo como adaptar o nosso conteúdo o nosso site há vários tipos de mídia a vários tamanhos de tela a várias formas de lá impressora e como eu disse lá no início do vídeo se você não viu o vídeo anterior você não sabe o que é o nome já colhi você não sabe Para que que serve essa tecnologia Então volta lá e assim inclusive você deve ter perdido se perdeu a vídeo onde você tem que baixar as imagens que a gente vai utilizar durante os exercícios desse Capítulo e não serão poucos exercícios vamos diretamente do computador vamos atualizar o nosso repositório local e remoto e vamos começar criando o nosso primeiro exemplo vou interromper mais uma vez a sua aula que só um minutinho para passar mais um recado da Record E durante todos esses módulos aqui do curso de html eu venho falando sobre vários cursos que a Record oferece gratuitamente para você e dessa vez não vai ser diferente curso que eu trouxe agora é o de análise de dados com ferramentas a técnica tive até que olhar para baixo nome é bonito e bem Comprido ele é um curso de carga horária sugerida de 60 horas é ótimo para quem tá procurando o certificado sair e essa formação vai te ensinar criar relatórios de análise de dados utilizando ferramentas Como o Power bi ai o Google de estúdio e muito mais e nesses cursos você vai aprender a criar indicadores Como eu disse relatórios e vai aprender a Gerar visualizações da informação de uma maneira profissional usando as ferramentas de Business intelligence se você quer se enveredar por essas informações e muitas outras não se esquece Acesso aqui no QR Code que tá aparecendo o site da Record e lá na parte de cima ele tem cursos lá você vai ver todas as formações que a Record oferece Muito obrigado pela sua paciência em escutar a gente e vamos voltar Natal então já estou aqui no ambiente vou abrir o meu bit of desktop na aula anterior a gente copiou os arquivos tá vendo algumas imagens e tal todas as imagens depois eu vou falar foram baixadas em sites gratuitos né ela E essas que a gente o Pixel que a gente viu lá na aula de imagens no capítulo de imagens e vou fazer uma atualização do repositório local aqui vou botar lá criei pasta para o capítulo 25 comentei isso é fez atualização do repositório local que quem poste fazendo aqui agora a atualização do repositório remoto tá jogando lá para o kit Rubi para ficar tudo organizadinho lá ele vai levar alguns segundos depois atualizado você vai mandar abrir no visual Studio code e já vou carregar aqui também em mostrar no Explorer para gente poder abrir os arquivos aqui caso seja necessário no visual Studio code a gente já tem o exercício 26 aqui olha que aquela pasta inclusive como ele tem uma pasta dentro ali já cria aqui é meio esquisito ensino. de Cold Mas enfim você vai clicar no Exercício 26 e vai criar o seguinte cara nesse capítulo a gente vai fazer alguns exercícios eu preciso que os exercícios tem um pasta dentro do exercício então cada gente não vai ser o HTML vai ser uma pasta nova então clique aqui e 26 já vou te explicar porque eles vêm seis você vai criar uma nova pasta e não novo arquivo vamos ter uma nova pasta eu vou chamar de amiga crio né então vou botar aqui mq01 tá não bota a ponta não nome da pasta tá agora eu tenho aqui no meu exercício 26 eu tenho a pasta imagem e eu tenho a parte da riqueza e usaram clica na pasta mt001 e vamos criar um novo arquivo que se vai ser index. hu sopra Organização das nossas mídias crio está porque eu vou precisar gerar bastante CSS vai ter uma pastinha para poder ficar organizar Então vamos lá vou te mostrar aqui pra que explora como é que ficou abre exercícios abre a pasta 26 eu vou ter a pasta de imagem que eu vou copiar e jogar dentro de outras pastas mais pra frente mas cada exercício vai ser aqui ó mt001 aqui eu vou abrir o index vai ficar aquela branca óbvio que eu não tenho nada vou dividir a tela aqui boletinho pra poder organizar tudo certo aqui ó beleza vamos começar criando nosso código base aquele negócio de sempre português Brasil esse capítulo é de mídia ó e vou botar aqui o lado tá só para tá funcionando beleza e eu vou começar mostrando para vocês a media-create para uma simulação de site de notícia exatamente que a gente viu que no vídeo anterior Claro medidas as proporções eu não vou ficar um site completam O que é um site de exemplo aqui eu vou ter que tirar entregar um daqui vou criar o meu site com o seguinte eu vou ter um Rider é um cabeçalho dentro desse header eu vou ter um H1 vai ser notícias eu vou ter um menu tá Depois a gente vai fazer as opções do menu embaixo do header eu vou ter meu conteúdo principal dentro desse conteúdo principal vou criar um artigo isso aqui são HTML semântico né a gente viu isso aí para caramba porque é um H2 que vai ser o título da Notícia Sei lá estou aprendendo a criar mídia crimes lembra isso aqui é singular isso aqui é plural até lá notícias estou aprendendo muito orgulho e vou criar parágrafos aqui com Glória em só para fazer volume de texto A gente já tá acostumada a fazer isso daqui para caramba né só mais um parágrafo Tá beleza então tá lá tá aqui o meu site de notícias vou querer aqui o meio rapidinho o l&l só para fazer os itens eu tenho notícias de esportes política e vou ter de tecnologia beleza também vai fazer aqueles itenzinhos aqui tudo mais beleza agora eu vou te mostrar como aplicar mídia Cruz porque aqui ó eu tô com ele aberto né o site tá tá aberto aqui no botão em tela cheia Se eu der control-p para imprimir ele vai imprimir e usar Olha isso aqui isso aqui eu não fiz no dia que eu não diferença aí por exemplo não faz sentido mostrar o menu aqui tá não faz sentido botar o mesmo tipo de letra a letra para você ler na tela é um jeito a letra para você ler na impressora na no papel é é mais recomendado outro tipo de leite então exatamente isso que a gente vai fazer a partir de agora então acompanha aí comigo como você vai fazer isso só colar esse daqui você vai vir aqui em cima no Cairo em baixo do tá eu devo nada pode ser dentro de em cima do trabalho tá eu vou botar aqui embaixo a gente vai tá certo o link para acesso a gente já aprendeu a fazer isso para o chip e tal e eu vou querer o seguinte ó eu vou criar uma pasta estilos é por isso que eu criei uma pasta para o exercício e não um arquivo separado e eu vou botar aqui ó mídia Isso é esse arquivo tá eu conto CSS a gente saiu não vou chamar de tela.

CSS esse arquivo tela com CCS ele é para a tela na rua pelas é se é somente para tela se eu quiser não é para tudo do jeito que tá aqui é o a este Ou serve para tudo beleza vou botar aqui vou criar uma outra mídia vou querer aqui embaixo com outro link para CSS que eu vou chamar de estilos/impressora e ele vai ter um mídia que vai ser o print disso é eu tenho esse CSS para tela e eu tenho esses SS essas esse essa China vereadores esse arquivo CSS para impressora com isso aqui eu já tô utilizando minha cuidado eu já estou criando o tipos diferentes para meios diferentes fechou Deu para entender como é que funciona negócio agora nós vamos fazer o seguinte você vai segurar o controle vai clicar Nutella CSS ele vai dar o erro você quer criar o arquivo ele já criou a pasta já volto lá show de criar o cartaz aqui eu já volto lá para te mostrar como é que ficou o teu F8 eu vou recomendar que você faça assim ó bota um comentário CSS não pode ser aqui não cachorro recomendável que a gente coloca em baixo aqui vou botar aqui estilo para telas e eu vou botar aqui o estilo para telas vou voltar no meu endereço segurar o controle clicar em impressoras ISS que eu disse que não achou manda criar o criar também aqui o meu cassete utf-8 passa o dia eu falo oito digito nós e é que eu vou botar estilo para impressoras Ok beleza deixa eu te mostrar como é que ficar os meus arquivos aqui ó eu tô aqui nos exercícios exercícios 26 E aí eu tenho o meu primeiro exercício mt001 por que que eu joguei dela pasta porque eu quero que ele tenha o Windows e o siste o exercício meu não é cada um dos exercícios durante esse curso vai ter uma pastinha de estilos então eu não quero compartilhar mesma pasta de estilos para todos os projetos e é exatamente por isso que eu tô fazendo desse jeito beleza vamos fazer o seguinte para tela Vamos fazer um negócio doido aqui vamos dar um reset aqui tá margem Então fique seus e pedem zero take seus vou fazer com que o meu HTML tenha bons Family a tela né Você quer pra tela vou botar uma fonte sem serifa e o Font size para 1 m lá para ficar certinho nos atualizar aqui tá lá tá tudo grudadinho tá vou vir aqui na impressora e vou fazer o seguinte aqui ó no meio reset eu já vou botar aqui margem de 10 pixels e pedem de 10 pixels fica bem de passarinho vou fazer aqui no meu HTML Isso é coisa diferente tá só pra gente poder entender vai ter o Font Family aqui é para impressora Então vou usar esse daqui com escolher né que é uma fonte monoespaçada e conseguir se você não sabe o que é e tem que ser em volta lá no capítulo que tem que falar sobre Fontes essas fontes monoespaçadas e conseguir pois são muito fáceis de se ler no papel tá e nós vamos fazer o seguinte o fonte faz vai ficar um ponto 5 cm e online AIDS vai ficar 1. 5 é ele também ele vai ficar com espaçamento entre linhas a gente viu isso também diferente se você atualizar visualmente não aconteceu absolutamente nada só que se a gente aumentar aquilo dá uma metade aqui vou mandar imprimir quando eu mandar imprimir olha só que ele vai fazer ó ele já me gerou um formato diferente para a impressão ele já tá aqui ó com a fonte serifada já tá aqui com o tamanho 1. 5 Se você quiser a vou voltar aqui para um a vou botar o tamanho normal aqui não adianta atualizar não tem que cancelar atualizar e mandar imprimir de novo você percebe que ó agora é só atualizei a minha kiwi do do modo de impressão a cima não faz sentido eu ter esse menino aqui não faz sentido Então beleza não me é a impressora eu vou vir aqui ó e vou botar menu né Não não é a tag menino aqui que eu tenho ó aqui meu menino essa parte aqui então assim esse menino você tiver mais ou menos você específica pela né mas por exemplo menu para impressora não faz sentido mostrar então que eu vou fazer vou botar aqui display que significa display Nani não vai ser exibido aquela falar assim ó beleza atualizei a água na boca tá errado mesmo tá aparecendo aqui tá aparecendo porque na tela não tem essa configuração essa configuração de mesmo display não é somente para impressoras Então vou atualizar vou mandar imprimir e aí só desse jeito eu vou perceber que não tem medo entendeu como é que funciona Deu para entender como é que a gente fez essa essa configuração lembra que lá no site do New York Times é ele mora lá qual foi o dia da impressão tudo mais foi impresso no site como é que você vai fazer isso você vai vir aqui ó na impressora tá você vai fazer o seguinte vamos organizar Aqui eu tenho o meu partido o final do meu artigo no final do Norte e eu quero mostrar que ele foi impresso no dia tal e estava no site tava nem não botar em dia vou botar assim ó Ártico era o boto:: After trás depois do artigo eu vou botar o seguinte ó um contém é bem limitada Dinho Mas por que a gente precisa tá ótimo vou tá aqui contém botar assim ó esse artigo foi impresso através do site www curso em video ponto com você quiser pode botar aquele importador né se você quiser você pode botar aquela barra notícia eu só para ficar sabendo Então vamos lá atualizei ele não apareceu esse artigo foi impresso não apareceu que se eu der contra o pé ó ele imprimiu e olha olha aqui embaixo da matéria ó ó esse artigo foi impresso através do site ou servidor então assim isso daqui cara é muito interessante você conseguir configurar a parte de impressora diferente da parte da tu vem por aqui na parte da você pode fazer o seu header ficar sei lá com background color Light Grey Red Black Grey of já ficou like Break não é conhecida nesse Leite Rei um aparece seis vezes no no vídeo já apareceu lá eu quero por exemplo o meu header o meu H1 que tá dentro vai ter Flex align Center para ele ficar centralizar Dinho eu quero que o meu menino ó o Hélio né os itens do menu tenham Style Type nam ele perder a bolinha já perdeu a Bolinha Bolinha tá aqui aparecendo aqui no finalzinho também vou botar sei lá coisa simples background-color vou botar Grey aqui para ficar mais escuro Ó vou botar display inline-block e ficar um do lado do outro na verdade um do lado do outro tem que fazer esse display inline-block não aqui eu tenho que fazer no menu ele é minha lista aqui é minha lista principal né é Melissa principal aqui é cada bom então vou botar aqui display inline-block e ficam lá do outro é a tudo bonitinho posso criar um pede de 10 pixels verificar tá maiorzinha aqui eu vou fazer o seguinte esse background-color vou tirar daqui vou deixar esse daqui a pouco mais escuro Então vou tá aqui vai aqui onde color Dark Gray Dark Rain navid Rihanna vou fazer dar Break vamos falar bonitinho e vou botar o Color White só planeta fica branca lá no menu vou fazer também por exemplo esse artigo aqui ficar com a largura menor igual a no New York time fazer aqui ó o meu Ártico vai ter wieder de sei lá 400 pixels das pouco botar aqui 600 fixos vai ter 600 pixels e vai ter o margem no outro display lotes para ele poder Centralizado né com o margem alto eu tô fazendo aqui mais rápido porque eu Já ensinei nessa que a gente já viu anteriormente Então você fica com o site ó adaptado Na verdade ele não fica e fala né porque na verdade tá aqui zoado por quê texto ficou Comprido demais mas a gente depois vai resolver isso né você passo a passo vira o caso aqui por exemplo não impressora não faz sentido ter essa largura limitada então vou fazer o seguinte o meu artigo vai ter um líder de 100 porcento ele vai ocupar largura toda do papel na impressora tá vestindo 40 e soro o atualizar aquele tá Aline tadinho - vinho aparecendo notícias aqui em cima se eu mandar imprimir um tropeiro partir de agora eu tenho notícias vou ter o texto e aqui no final aí certinho foi impresso através do site tal então assim eu acabei de te mostrar como você cria se referiu mídia Cris Na verdade nada mais é ou Nada mais são do que esses caras aqui ó aqui começa as chamadas de ninja clima então eu consegui fazer duas linhas tanto a mídia tela quanto a mídia impressor isso acaba me dando um bom trabalho porque eu tenho que meio que criar dois Estilos diferentes mas para vencer aprendi que você não precisa os filmes completamente diferente mas é esse primeiro exemplo o seguinte eu usei isso aqui para mim isso aqui para meio-dia frente beleza faz as suas anotações aí eu sei que é chato ficar interromper esse vídeos toda hora para ficar dando recadinho mas é que eu preciso passar um recado para vocês não consegui vídeo não se esquece que você pode fazer esse módulo e todos os outros módulos anteriores diretamente pelo nosso site então acessando agora o site www.

consul. com.