Criação de sites sem estresse com CARRD

1. Apresentação da aula 1: Bem-vindo ao nosso curso fundamental sobre cartões de masterização, onde estabeleceremos as bases para sua jornada no mundo da criação de sites Neste curso, vamos nos concentrar em entender a função básica dos elementos na interface do cartão sem a pressão de realmente criar um site. Como educador, ter uma sólida compreensão das ferramentas de criação de sites está se tornando cada vez mais importante Se você está pensando em criar um hub de sala de aula ou um portfólio profissional, saber como navegar plataformas como cartões é inestimável Ao longo deste curso, nos familiarizaremos com a interface de um cartão, explorando suas várias ferramentas e funcionalidades Aprenderemos como navegar pela interface de forma eficiente, entendendo a posição e o uso de diferentes ferramentas e entendendo o básico da personalização de elementos Ao investir seu tempo no domínio dessas habilidades fundamentais, você estará mais bem equipado para realizar cursos mais avançados que envolvam cartões em nossos próximos cursos envolvam cartões em , como atividades temporais criação de um plano de estudos on-line Criação de um site de sala de aula e muito mais. Compreender os meandros da plataforma agora não só economizará tempo e frustração no futuro, mas também fornecerá uma base sólida para liberar sua criatividade Ao concluirmos esta introdução, quero enfatizar a importância do que você está prestes a embarcar Mastering guard não se trata apenas de criar sites. Sobre desbloquear o mundo de possibilidades para sua jornada de ensino Imagine ter o poder de criar materiais didáticos interativos que transcendem os limites da sala de aula tradicional Com o Guard como parte de seu kit de ferramentas, você poderá criar recursos envolventes, planos de aula dinâmicos e tarefas interativas que mantêm seu aluno ativamente envolvido no Mesmo fora das quatro paredes da sala de aula, ao incorporar cartões em seu arsenal de ensino, você não apenas aprimorará a maneira como entrega conteúdo, mas também capacitará seus alunos a explorar, se envolver e aprender de maneiras novas e empolgantes Então, vamos embarcar nessa jornada juntos e aproveitar todo o potencial do cartão para revolucionar sua experiência de revolucionar Bem-vindo ao Card Basics. Te vejo na próxima. 2. Aula 2 Inscrição: Nesta lição, vamos falar sobre como se inscrever no cartão. Quando se trata de se inscrever, você tem duas opções. Primeiro, você pode usar seu endereço de e-mail pessoal. Essa é uma escolha adequada se você é professor em tempo parcial, lidando com responsabilidades em duas ou três escolas No entanto, se você é um professor em tempo integral dedicado a uma escola, recomendável utilizar o endereço de e-mail gerenciado pelos administradores da escola Isso garante que todos os anúncios, talvez do departamento de RH ou e-mails de seu reitor, bem como as comunicações com seus alunos sejam centralizados em um endereço de e-mail Bem, essa é minha recomendação. No entanto, se preferir, você pode se inscrever com seu endereço de e-mail pessoal, especialmente se planeja comprar o plano P ou o plano P plus, que começará de $19 por ano até $89 por É um investimento que vale a pena, especialmente para professores experientes em tecnologia que buscam aprimorar a interatividade cartão representa uma excelente opção para salas de aula combinadas ou combinadas Você pode começar selecionando um modelo na seção da guia Perfil para um site instantâneo ou explorar predefinições de uma página de destino para criar um site de sala de aula Observe que a seção Formulários está disponível exclusivamente na versão profissional e exige que você assine uma assinatura anual para uma assinatura anual para utilizar toda a versão profissional na guia Formulários Para começar, basta clicar em um modelo aqui embaixo. Certifique-se de selecionar o modelo gratuito. Se você encontrar uma versão pro, é fácil identificar o modelo P porque há uma etiqueta no canto superior direito do cartão que diz Pro. Ok, é uma indicação para considerar assinar, bem, um plano profissional Atualmente, você não encontrará links ou botões de preços na página inicial do cartão. Se quiser ver os vários planos profissionais, você precisará selecionar um modelo Pro e clicar em Selecionar. Os detalhes dos preços podem ser acessados clicando no botão Saiba mais. Então, se você quiser saber o preço, basta clicar neste botão. O Card oferece vários planos profissionais, desde o PLT, que permite três sites ou um site de 31 páginas, até um plano profissional que pode acomodar de 25 a 50 sites assinatura dos planos P plus fornecerá configurações avançadas, downloads do site e também este Essa é minha proteção de senha favorita para acesso a aulas particulares. Incentive você a explorar os benefícios dos cartões em sua sala de aula, e isso inclui nossa aula por enquanto, e espero vê-lo na próxima. 3. Aula 3 Pré-visualização, classificação e organização: Nesta lição, vamos explorar os botões que você vê na parte superior central desse painel. O primeiro aqui é esse botão de visualização , sem uma palavra melhor para esse botão. Deixe-me chamar isso de meu botão de pré-visualização. Aqui, você pode ver o número de sites que você criou. Então, agora eu tenho 25 sites. 19 deles é meu site publicado, e cinco é meu site de rascunho. E eu só tenho um modelo a partir desta gravação. E esse é o meu modelo de currículo on-line. Mas tenha um portfólio. Então, se você quiser organizar, você sempre pode adicionar uma pasta. Então, agora eu tenho duas pastas que eu criei , uma para portfólios Eu só tenho uma desta gravação, que é do fólio criativo do Sr. Sam Oxen E essa é uma pasta antiga. Quando eu estava ensinando na I Academy, criei 11 sites para meus alunos sobre suas atividades, sites de sala de aula, atividades sob pressão de tempo, tudo isso está dentro desta pasta Não tenho sites de arquivamento, mas se você quiser arquivar seu site, pode sempre consultar essa pasta para abrir o site com um cartão. Se você quiser adicionar uma pasta, basta clicar neste botão aqui. Está bem? Então, deixe-me clicar novamente no meu botão de visualização. E essa é para ordenar seus sites em ordem, por exemplo, se você quiser começar pelos sites mais novos que você criou ou pelos mais antigos e assim por diante, ok? Você também pode alterar a forma como visualiza todo o site do seu cartão clicando nesses três botões aqui. Se você tiver alguns sites criados, talvez este seja uma visão melhor, e se você tiver um número crescente de sites de cartões, talvez este o ajude. Na próxima lição, vamos explorar um novo site. Isso está tudo na próxima lição. Te vejo na próxima. 4. Lição 4 Explorando modelos: Nesta lição, vamos clicar no novo site. Está aqui no lado direito, canto superior direito do seu painel. Então, vamos clicar nisso. E dentro desta página. Se quiser começar em uma tela em branco, você pode clicar nesse botão. Então, por exemplo, você tem as ideias de layout que deseja aplicar em um site e, definitivamente, precisa começar do zero. Ok. Mas se você precisar de um site imediatamente, poderá escolher entre todos os sites incríveis que você vê aqui embaixo. Se você vir uma tag P na parte superior do modelo, significa que você só poderá acessar esse modelo se estiver na versão paga pois alguns dos elementos usados no site do cartão só estão disponíveis se você estiver na versão paga. Ok. Portanto, se você estiver na versão gratuita, não se preocupe, pois a versão gratuita também é dinâmica e oferece um site com aparência profissional. Está bem? Então, vamos até aqui e vamos explorar as categorias que você vê nesta página. Nós temos o perfil , então se você quiser criar talvez um site para professores ou seu próprio site pessoal, você pode escolher entre esses modelos. Novamente, se você vir uma etiqueta de versão profissional na parte superior do cartão, isso é apenas para a versão paga. Então, a próxima é uma landing page. Neste caso, se você quiser criar uma landing page, por exemplo, para sua sala de aula online, para seu currículo online, você pode clicar nessa aba e escolher entre os modelos disponíveis aqui embaixo, ok? Quanto ao resto, você pode explorar as guias como formulários. Portanto, se você estiver na versão paga, poderá ter formulários dentro do seu site. Assim como este, você pode pedir o nome e o endereço de e-mail deles e se quiser que eles se inscrevam no seu site. Então, tudo isso está disponível para você. Dentro da categoria do formulário, se você estiver na versão paga, por exemplo, se estiver em um plano P plus ou superior. Está bem? Você também tem seu portfólio aqui embaixo e seccionado Então, cartão, a principal característica do cartão é que você tenha um site de uma página. Mas você também pode gostar deste, você também pode simular várias páginas usando quebras de seção Discutiremos sobre quebras de seção nas próximas aulas deste curso, certo? Então é isso para este vídeo, e nos vemos na próxima lição. 5. Aula 5 Diferença entre as versões gratuita e paga dos modelos: Neste vídeo, mostrarei a diferença entre a versão gratuita e a paga. Vamos começar com a versão gratuita. Está bem? Portanto, se você quiser visualizar um site em um cartão, especialmente para os modelos, clique no botão de demonstração. Ele mostrará a versão publicada desse site. Está bem? Portanto, este é um modelo de versão gratuita. Assim, você pode acessar isso com sua conta se estiver usando a versão gratuita. Como você pode ver, temos a plataforma de mídia social aqui embaixo e três botões na segunda seção. E este é o título e o subtítulo deste site Você também tem um plano de fundo completo. Então essa é a versão gratuita. Como você pode ver, seu design é minimalista e muito funcional Tudo o que você precisa fazer aqui é alterar a imagem de fundo, alterar os links desses botões. E, claro, o texto que você vê aqui, porque agora é tudo maldito texto É tudo Lorem Ipsum, ok? Vamos voltar ao nosso painel e à nossa versão profissional ou à versão paga dos modelos. Se você estiver usando a versão gratuita, talvez não tenha acesso a este cartão aqui. Está bem? Se você clicar em Selecionar, ele não irá para sua página de edição, mas solicitará que você se inscreva em uma conta profissional. Então, vamos clicar na demonstração e mostrarei por que você não pode acessá-la com a versão gratuita. Como você pode ver, é quase o mesmo. Temos as plataformas de mídia social aqui embaixo e você também pode enviar e-mails para o proprietário deste site, e você pode clicar e mostrar seu trabalho, certo? Vamos voltar para a página Sobre. Ok, praticamente até este ponto, tudo é básico. Mas se você entrar em contato, isso estará disponível apenas para a versão paga. Está bem? Assim, você pode ter formulários dentro do seu site. Está bem? Então, vamos voltar para nossa página principal ou página de destino. Então essa é a diferença. Essa é a única diferença para isso, pelo menos para os dois sites que estou mostrando, certo? Vamos voltar ao painel. Portanto, se você deseja ter um site mais dinâmico, mais interativo, não é uma má ideia comprar a versão pro dessa plataforma. $19 por um ano é um preço muito razoável. E você pode obter todos os recursos. Você pode ter domínios personalizados. Você pode adicionar formulários, incorporar códigos e todas as coisas legais que um professor pode fazer com o cartão Então é isso, e nos vemos na próxima. 6. Lição 6 Personalizando cores e fontes: Existem dois métodos para criar um site, começando do zero ou escolhendo um modelo da seleção. Por exemplo, vamos escolher um modelo e personalizar elementos como cores, telefones e outros recursos importantes. Lembre-se de que, se você quiser modificar estilos, tamanhos de fonte ou cores em cada elemento, precisará acessar suas propriedades. Vamos começar navegando até a guia da nossa página de destino e selecionando esse modelo aqui embaixo Vamos começar clicando no botão Selecionar. Neste modelo, você tem diferentes tipos de elementos. O elemento de imagem, o elemento de texto e também o botão aqui embaixo. Vamos rolar para baixo para que você possa ver toda a disposição dos elementos. Aqui mesmo, você pode encontrar proximidade de diferentes tipos de elementos. Então, vamos começar aqui. Você tem a página de título ou subtítulos e, se selecionar o elemento de texto, as propriedades deslizarão da esquerda ou da direita da tela Basta ir até a guia de aparência e aqui embaixo você tem as cores. Você pode mudar isso clicando na miniatura, movendo o controle deslizante aqui e o controle deslizante aqui e seguida, alterando as cores dentro Mas, como você pode ver, todos os títulos estão mudando porque pertencem a um estilo chamado overline Então, vamos desfazer e voltar para nossa guia de aparência e alterar o estilo para nenhum Então, agora você pode mudar a cor desse texto. Então, vamos mudar isso para vermelho. E vamos até aqui. Vamos mudar isso de Roboto para RAM ou REM. E para o tamanho, talvez 2,75. E então diminua o peso e deslize tudo para a direita. Vamos ver. E quanto ao espaçamento entre linhas Vamos mover o controle deslizante com apenas um toque e também com espaçamento entre letras Você pode experimentar o recuo. Bem, isso não funcionou. E para as margens, vamos ver. Assim, você pode usar margens se quiser um espaço, especialmente na parte inferior do elemento de texto Você também pode alterar a aparência de maiúsculas para maiúsculas ou minúsculas. Você também pode usar letras maiúsculas. Mas, neste exemplo, vamos colocá-lo de volta em maiúsculas Você pode experimentar o alinhamento. Obviamente, ele não se moverá, mesmo se o colocarmos em um alinhamento à esquerda Vamos adicionar um gradiente. Vamos clicar dentro dessa caixa de texto e talvez alterá-la ou adicionar um gradiente verde à nossa cor base, que Você também pode alterar o ângulo deslizando-o da esquerda para a direita e observando o resultado E para modificar o gradiente ou a transição, você pode deslizar a etapa um e a etapa dois Ok, então fazendo isso, você pode separar o texto com cores diferentes. Você também pode adicionar um esboço. Então, vamos usar o azul e alterar a largura deslizando essa área aqui para baixo Se você terminar e , por algum motivo mudar de ideia e quiser voltar ao estilo original, basta ir até aqui e alterar a aparência para sobreposta. Vou clicar em Concluído. Vamos até o nosso botão. Para mudar a cor, vou usar a guia de aparência e descer até aqui. Para minha cor de fundo, vou mudar isso para laranja. Como você pode ver, quando eu movo meu ponteiro sobre o botão, ele muda para uma cor azulada porque há um valor dentro do campo de texto Hoover Se eu quiser mudar isso, tudo o que preciso fazer é clicar na miniatura Ok, deixe-me rolar até aqui para que possamos ver a paleta com mais clareza Vou mudar isso para preto. Agora, se eu passar o mouse sobre o botão, a cor de fundo mudará para preto OK. Você pode experimentar as propriedades aqui embaixo, mas como essa está definida como padrão, a alteração de uma cor afetará todas as cores dos elementos com o mesmo estilo. Deixe-me desfazer todas as minhas ações para preservar o valor do estilo padrão Então, enquanto o botão ainda está selecionado, vou para a seção de estilo de aparência e defino esses dois como nenhum. Então, se eu mudar a cor desse botão, isso afetará apenas os botões que eu selecionei. Isso não afetará todos os elementos com o mesmo estilo. Vou encerrar esta lição por enquanto e permitir que você experimente diferentes elementos dentro desta página ou com o modelo escolhido. Brinque com as propriedades e observe os resultados na tela. Isso ajudará você a se familiarizar com a função de propriedades do cartão e criar seu site no futuro Isso é tudo por enquanto, e nos vemos na próxima aula. 7. Lição 7 Adicionando seções e elementos: Nesta lição, falaremos sobre a adição de seções e elementos. Neste exemplo, temos diferentes tipos de elementos, o elemento de imagem, o elemento de texto e o elemento de botão aqui embaixo. E se rolarmos para baixo, você verá que este é um contêiner com duas colunas. No lado esquerdo está o texto e no lado direito está uma imagem, um espaço reservado Aqui embaixo, você tem uma divisória configurada zigue-zague com uma clara opacidade Agora, vou duplicar isso e você verá dois divisores. Vou selecionar o primeiro divisor e você notará que há um espaço entre esses dois elementos Enquanto o divisor ainda estiver selecionado, vou subir aqui para adicionar um elemento Vou clicar no sinal de mais. E selecione o contêiner. Por padrão, há somente uma coluna. Vou selecionar o divisor novamente e adicionar outro elemento, que é o elemento de texto Ele não entrará no contêiner porque o contêiner não foi selecionado quando eu adicionei o texto. Este será meu subtítulo para esta seção. E eu vou ligar para isso, fale conosco. Depois vou até aqui e procuro uma legenda como essa, e vou até a seção de aparência só para saber que tipo de estilo esse texto tem No momento, está definido para o título dois. Então, vou voltar para minha legenda, entrar em contato conosco e mudar isso para o título dois Ok, vou fechar isso e selecionar a seção de estilo de aparência novamente ou o botão de estilo e clicar em nenhum porque quero alterar o espaçamento entre linhas para um e o espaçamento entre letras para Ok, então eu vou clicar em Concluído. Ao definir o estilo como nenhum, isso não afetará o resto da legenda que está definida como título dois Só estou afetando esse título aqui. Vou clicar no contêiner e depois vou subir aqui para adicionar outro elemento. Talvez eu queira coletar informações dos visitantes do meu site. Então, vou adicionar um formulário. O formulário básico tem campos para nome, e-mail e uma seção de mensagem. Meu problema com este formulário é que, se eu for até aqui, você verá que os botões são arredondados. Na seção de aparência, você notará que o estilo disso está definido como padrão O que vou fazer aqui é copiar o código de cores desse botão da cor de fundo. Em seguida, vou voltar para a seção de aparência do elemento do formulário e navegar até a guia inferior para colá-lo aqui. Ok, acho que tem a mesma cor. Então, vou ajustar o arredondamento dos cantos para 1,875. E para a altura, vou diminuí-la para 3.875. Em seguida, vou até aqui e altero o estilo para rótulo mais ícone Em seguida, mudarei o ícone para a luz da seta para a direita. Portanto, ele terá a mesma estrutura de estilo do botão aqui embaixo Por fim, clicarei em Concluído. É isso mesmo. É muito minimalista, mas, ao mesmo tempo, esta seção aqui mantém a mesma consistência de design de toda a página, e pronto por enquanto, e nos vemos na próxima lição 8. Aula 8 Elementos fundamentais: Nesta lição, vamos explorar os elementos fundamentais de um site de cartões. Vamos começar com o plano de fundo. Você pode alterar a cor ou adicionar gradientes ao plano de fundo Você também pode adicionar uma imagem ou usar uma apresentação de slides Até mesmo vídeo, você pode usá-lo como plano de fundo. A seguir está a página. A página também tem propriedades diferentes que você pode modificar. Você pode alterar seu estilo a partir de uma caixa com fundo branco ou defini-la como padrão com fundo transparente. Além disso, você pode configurá-lo como uma caixa branca ou uma caixa alta. Dependerá do layout do design do seu site. Você também pode centralizar a página. Como você está vendo agora, a página está centralizada na tela Experimente a largura e outras propriedades no painel de propriedades, que discutiremos em detalhes nas lições a seguir enquanto continuamos explorando os recursos aqui no cartão. Em seguida, está o contêiner, que é o elemento mais importante a ser entendido ao criar um site em cartão. Ele conterá outros elementos como texto, imagens, vídeos e muito mais. Se você clicar no botão de adição para adicionar outro elemento, notará que ele sai do contêiner se o contêiner não tiver sido selecionado antes. Para garantir que os elementos sejam adicionados dentro do contêiner, clique e arraste-os para dentro do contêiner. Você pode modificar suas posições dentro do contêiner. Além disso, você pode alterar as propriedades do elemento de texto dentro do contêiner individualmente. Vamos mover o elemento de texto para fora do contêiner, para que ele seja o título geral do título da página. Outro elemento é o elemento de controle, que depende do estilo de controle definido para o site. Por exemplo, essa é uma quebra de seção, mas você pode alterá-la para um ponto de rolagem ou cabeçalho e rodapé Você pode adicionar mais contêineres em um site de uma página. Mas se você quiser navegar por seções diferentes com o uso de um botão, convém alterar o tipo de controle para um ponto de rolagem, enquanto a quebra de seção pode simular outra página ou várias páginas Vou selecionar o elemento de texto porque quero adicionar outro ponto de controle. Mas esse será o marcador do cabeçalho. Também definirei outro ponto de controle para ser meu marcador de rodapé Em seguida, adicionarei outro contêiner para armazenar todas as informações do rodapé do site Como você pode ver, agora você tem seções básicas completas de um site de página inteira. Você pode continuar adicionando mais contêineres para armazenar informações adicionais sobre seu site. Você pode adicionar elementos adicionais dentro do contêiner, como um espaço reservado para imagem, ou pode acessar o tipo de contêiner e defini-lo em duas colunas, o que fornecerá duas colunas por padrão Você pode ir para a coluna da direita e usá-la como espaçador. Você também pode adicionar texto à segunda coluna. Você também pode adicionar um ícone e outro, talvez, espaço reservado para imagem Você pode colocá-lo de volta ao tipo padrão, mas ele fornecerá uma coluna, que está um pouco cheia Portanto, se você quiser organizar as informações, sugiro que as coloque de volta em duas colunas. Além disso, você pode adicionar mais colunas clicando no botão Adicionar aqui, como eu fiz. Então, agora eu tenho cinco colunas com 20% de espaço para cada uma delas. Posso mover alguns dos elementos dentro dessas colunas e também posso definir a quinta coluna como meu espaçador. E é isso. Eu sugiro que você experimente colunas, contêineres, controles como quebras de seção e pontos de rolagem, para que você possa se familiarizar e ter uma base sólida para criar o layout do seu site. OK. É isso por enquanto, e nos vemos na próxima. 9. Texto da lição 9: Neste capítulo, vamos explorar alguns detalhes sobre certos elementos que você vê aqui no cartão. Vamos começar com o elemento de texto e também explicarei os elementos exclusivos da versão paga deste programa. Novamente, você pode acessar todos os elementos de que precisa aqui ao clicar no botão de adição. O primeiro na lista é o elemento texto. Não vou adicionar texto porque já tenho amostras que vou explicar para você. Vou clicar no primeiro aqui. Como você pode ver, o texto está em negrito por causa dos dois asteris nas duas extremidades do texto É um código simples que você pode encontrar aqui embaixo. Portanto, se você quiser colocar um grupo de texto em negrito, basta incluí-los com dois asteriscos O segundo exemplo está em itálico. O texto em itálico requer um asterisco nas duas extremidades. Se você quiser, por exemplo, colocar uma palavra ou frase em itálico, basta colocá-las com um asterisco O terceiro aqui tem um hiperlink. Às vezes, não precisamos criar um botão para nos vincular a outra página. Às vezes, precisamos apenas vincular uma palavra em nosso corpo de texto. Como o que você vê aqui. Então, a palavra aqui é hiperlink. Quando eu digo clique aqui, o visitante pode clicar na palavra e isso o conectará ao URL que você definiu para essa palavra. OK. No meu exemplo, a palavra aqui está entre colchetes Então essa seria a palavra a qual vamos aplicar um hiperlink E o URL está entre parênteses. Então, logo após o suporte fechado e aberto. Sem o espaço, você precisa adicionar o hiperlink ou o URL dentro dos parênteses de fechar e abrir Você pode clicar nesse link se quiser saber os tipos de URL permitidos. O quarto exemplo é igual ao hiperlink. Mas a única diferença é que quando você clica no link, ele abre em outro navegador, deixando a página original em outro navegador. Isso é útil se você quiser que seu visitante vá para outra página em outra guia. Portanto, se você quiser abrir um link para outra página, basta repetir o processo em nosso exemplo de visualizações prévias sobre como criar um hiperlink No entanto, desta vez após o URL, você precisa adicionar uma barra, depois um símbolo e , em seguida, a palavra em branco E feche-o com parênteses, para que o código fique assim, que abrirá o link para Para mudar a cor da palavra ou de um grupo de textos, vamos combinar algumas das técnicas que aprendemos até agora. Neste exemplo, vamos delimitar a palavra laranja com dois asteriscos nas duas extremidades e depois fechá-la com colchetes para deixar a Além disso, estamos preparando essa palavra para ter uma cor diferente. Pode adicionar um código de cor ou a palavra real da cor. No meu caso, laranja, ou você pode colocar também vermelho ou azul, amarelo. Depende de você qual cor você deseja o visitante veja na sua página. E depois feche-o com chaves. Portanto, o código deve ficar assim. O último exemplo aqui é uma combinação de alterar a cor de uma palavra, adicionar um hiperlink e colocar a palavra em negrito Basta repetir o processo, fechar a palavra com o link para um URL com asterisco duplo, especificar a cor desejada com colchetes e colocar toda a equação Ao lado, você precisa fornecer o URL do site ao qual deseja conectar a palavra. Então, a equação deve ficar assim, e pronto. A última coisa que você precisa fazer agora é salvar seu trabalho e conferir o site publicado. Isso é tudo por enquanto, e nos vemos na próxima aula. 10. Lição 10 Imagem: Nesta lição, vou ensinar como criar cantos arredondados para imagens. Na verdade, é muito simples, se você pensar bem, mas eu só quero compartilhar um pouco da minha experiência em relação ao elemento imagem. Como você pode ver, eu tenho duas colunas. Agora, vou clicar no sinal de mais e adicionar uma imagem. Como o contêiner foi selecionado, a imagem foi adicionada dentro desse contêiner e foi diretamente para a primeira coluna. Agora, vou clicar nele e ir para a minha guia Imagem. Vou fazer o upload de uma imagem do diretório do meu computador clicando em Carregar e selecionando a imagem. Não quero cortar a imagem, então vou clicar duas vezes nesse ícone e depois clicar em Aceitar. Agora, enquanto a imagem ainda está selecionada, vamos para a seção de aparência e alteramos a propriedade de arredondamento dos cantos Elementos como imagem e contêiner têm uma propriedade chamada. Arredondamento de cantos. No entanto, para a imagem, é um pouco diferente. Você verá que a propriedade de arredondamento dos cantos desaparece quando eu deslizo a largura de ponta a ponta Então isso é uma limitação para a imagem. O arredondamento dos cantos desaparece em um determinado ponto. Se quiser arredondar os cantos da sua imagem, você pode deslizá-la para baixo até o máximo ou torná-la um pouco menor Para obter o máximo de arredondamento dos cantos, você pode deslizá-lo até a vazão total, mas certifique-se de que o recipiente tenha cantos arredondados , pois ele seguirá o formato do Você pode ajustar o tamanho dos cantos arredondados deslizando essa área Agora, aqui está outro exemplo. Vou selecionar esse contêiner depois desligarei o arredondamento dos cantos Enquanto o contêiner ainda estiver selecionado, adicionarei uma imagem clicando no botão Mais aqui em cima devido à minha ação anterior. A imagem é maior e agora está ocupando o recipiente de lã Ok, eu tenho um pouco de dificuldade porque você precisa de uma mão firme ao selecionar o recipiente Posteriormente, mostrarei uma maneira fácil de selecionar um contêiner. Agora, estamos dentro do contêiner porque a aparência indica que estamos dentro do contêiner. Vamos selecionar a imagem primeiro e fazer o upload de uma imagem. Vou selecionar a mesma imagem e não vou soltá-la, então vou clicar duas vezes nesse ícone e clicar em Aceitar. Dentro da seção de aparência para selecionar um contêiner, clique primeiro na imagem e depois diminua a escala. Então é hora de selecionar o contêiner. Simples assim. Agora, vamos voltar. O contêiner ainda está selecionado, vamos clicar na aparência e deslizar o canto arredondado para um Agora, selecione a imagem e deslize-a de ponta a ponta. E é assim que você adiciona arredondamentos de canto à sua imagem usando o contêiner Isso é tudo por enquanto, e nos vemos na próxima. 11. Vídeo da aula 11: Há várias maneiras de adicionar um vídeo ao cartão. Então, vamos começar com um plano de fundo, uma página e um contêiner. Vou até o meu sinal de mais e adicionarei um elemento de vídeo. O vídeo foi direto para dentro do contêiner porque o contêiner foi selecionado quando eu adicionei o vídeo. Dentro do painel de propriedades, você tem duas opções para adicionar vídeo dentro da placa. O primeiro é fazer o upload e o segundo é incorporar Com a opção de incorporação, tudo o que você precisa fazer é colar o URL do seu vídeo e clicar em Concluído para visualizá-lo em um site publicado Lembre-se de que apenas alguns URLs são permitidos ou aceitos quando você usa a opção de incorporação para vídeos, especialmente dentro das propriedades do elemento de vídeo Vamos voltar para fazer o upload. Em seguida, clicarei no botão Carregar e examinarei o diretório do meu computador. Aqui eu tenho um trecho de vídeo simples. Vou selecionar isso e clicar em Abrir. Vamos em frente e guarde isso. Mas antes de publicar o site, você precisa preencher as informações necessárias para este site. Então, vou avançar rapidamente este vídeo e clicar em Publicar. O URL não é importante neste momento, então vou clicar em Publicar. Em seguida, visualizarei o novo site, aguardarei o carregamento e clicarei em Play. O vídeo agora está no centro da nossa página e do nosso contêiner. Mas e se você quiser que seu vídeo não tenha controles e seja reproduzido. Então, vamos fazer isso. Vou postar esse vídeo e voltar para o meu cartão. Vou clicar em OK. Em seguida, clico no elemento de vídeo e , em seguida, desço até aqui abaixo das opções. Vou ativar a reprodução automática e a reprodução em loop. Também vou desativar a opção Mostrar controles do player. Vou até o site publicado e atualizo para ver o resultado Agora, você não tem mais os controles do player e ele simplesmente jogará. Então, vamos voltar ao nosso cartão. Vou clicar em OK, depois clicar no elemento de vídeo novamente e ir para minha seção de aparência. Vou ajustar o tamanho para a direita. Como você pode ver, não consigo completar o controle deslizante inteiro devido à restrição dentro do à restrição dentro do Então, vou reduzir isso talvez até 98%. Em seguida, seleciono o contêiner e, em seguida, volto para a guia de aparência. Vou deslizar essa área e adicionar o arredondamento dos cantos. Em seguida, clicarei no elemento de vídeo novamente e o deslizarei até o final desse controle deslizante Agora você tem um vídeo arredondado, então ele assumirá a forma do contêiner. Vou clicar em Concluído , salvar e ver o resultado do site publicado. Novamente, vou ao navegador e atualizo para ver o resultado Agora você tem um vídeo com cantos arredondados. Esteticamente, acho que esse parece bom. Você pode adicionar um título na parte superior do vídeo e também uma descrição abaixo para completar a página inteira. Vou voltar para o meu cartão. Vou clicar em OK. começar com o prato fresco. Vou selecionar o contêiner dentro da guia de aparência. Vou deslizar para baixo ou desligar o arredondamento dos cantos desse contêiner Em seguida, vou clicar no botão Mais aqui e adicionar um vídeo novamente. Vou mudar o tipo para incorporar. E então vamos ao nosso vídeo no YouTube. Este é um vídeo não listado. Clique com o botão direito do mouse no vídeo e copie o URL do vídeo e, em seguida, volte para o Cartão e cole-o aqui Em seguida, vou clicar em Concluído salvar este site e publicar as alterações. Em seguida, vou ao meu navegador, atualizo a página e reproduzo este vídeo Agora eu enviei um vídeo do meu canal do YouTube, que está configurado como não listado e o coloquei dentro desse contêiner Deixe-me voltar para o meu cartão. Vou selecionar o vídeo novamente, depois descer aqui e desmarcar os controles do show player, ativar a reprodução em loop e também a reprodução Em seguida, voltarei à minha guia de aparência e deslizarei o tamanho de ponta a ponta. Como você pode ver, não consigo percorrer todo esse controle deslizante Então, vou reduzir isso e selecionar o contêiner, deslizar o canto arredondado desse contêiner para 1,75 Em seguida, clique no vídeo novamente e deslize-o de ponta a ponta. Como você pode ver, mesmo que eu tente deslizar isso totalmente para a direita, o tamanho do contêiner me impediria de fazer isso. Mas meu objetivo neste exemplo é que meu vídeo tenha a forma e o arredondamento dos cantos desse contêiner, para que eu tenha um reprodutor ou quadro de vídeo com cantos lisos Vou clicar em Concluído, salvar este site e publicar as alterações. Novamente, vou ao meu navegador e atualizarei o site publicado Como você pode ver, este vídeo não está disponível após as alterações que fiz no cartão. Então, tudo o que posso fazer é clicar nesse ícone no canto inferior direito do vídeo, que ele vá para o YouTube. Deixe-me fechar este navegador e voltar para o meu cartão. Clique em OK e clique no elemento de vídeo novamente. Vá para a primeira guia e clique ou ative essa exibição de controles. Desative a reprodução em loop e a reprodução automática e clique em Concluído e clique em Concluído Salve isso e publique as alterações, acesse meu navegador e atualize a página Sempre que você tiver esse problema ou esse problema, basta voltar ao elemento de vídeo e ativar os controles de exibição e , em seguida, desativar a reprodução em loop e a reprodução automática Vou pausar esse vídeo por enquanto e voltar para o meu cartão Vou clicar em OK, selecionar o elemento de vídeo e excluir. Vou te mostrar outro exemplo. Selecionarei primeiro o contêiner e depois adicionarei um elemento incorporado Em seguida, vou ao meu vídeo no meu canal do YouTube. Novamente, este está definido como não listado. Em seguida, clicarei com o botão direito do mouse e copiarei a incorporação. Em seguida, volto ao meu cartão e dentro do painel de propriedades do meu elemento incorporado, vou rolar para baixo e procurar a propriedade do código Dentro da caixa de texto, vou colar o código do YouTube. Você também pode adicionar um rótulo para esse. Dentro do estilo, você tem duas opções embutidas ou ocultas. Eu uso o Hidden se estiver colando uma tag JavaScript ou HTML que não aparecerá na página, mas funcionará no back-end do meu site E como esse é um código de um vídeo dentro do meu canal do YouTube, vou configurá-lo como embutido Deixe-me adicionar um rótulo. Vou chamar isso de YT para o YouTube e depois subir aqui. Eu tenho dois tipos de seleção. Posteriormente, vou mudar isso para um código responsivo, então vou continuar com o código Vou descer e clicar em Concluído. Vou salvar isso e publicar as alterações. Novamente, vou voltar ao meu navegador e atualizar a página. Como você pode ver, o elemento de vídeo não é responsivo, então vou usar o chat GPT para gerar um código responsivo para Dentro do chat GPT, tudo o que você precisa fazer é digitar uma pergunta Torne esse código responsivo e, em seguida, cole o código, o código incorporado do seu vídeo do YouTube e, em seguida, cole-o dentro do chat GPT incluído em uma cotação o código incorporado do seu vídeo do YouTube e, em seguida, cole-o dentro do chat GPT incluído em uma cotação e clique em Enviar. Ele gerará um código para você, e tudo o que você precisa fazer é copiar e colar esse código na caixa de texto fornecida aqui no cartão. Depois disso, clique em Concluído, salve seu trabalho e publique as alterações. Você pode visualizar seu site a partir daqui ou voltar ao site publicado e atualizar a página E é isso. Obrigado por assistir, e nos vemos na próxima aula. 12. Galeria da aula 12: Se você quiser mostrar imagens em seu site pessoal ou no site da sala de aula, você pode usar os elementos da galeria Vamos começar clicando primeiro no contêiner, depois acessando nosso ícone de adição e selecionando Galeria. Agora, enquanto a galeria ainda está selecionada, vamos navegar até o painel de propriedades. Clique na primeira opção e escolha Carregar. Selecionarei minhas imagens favoritas e clicarei em Abrir. Não vou editar nada nessa janela, clique em Aceitar. Aqui embaixo está uma legenda sem título. Em vez de adicionar um título, prefiro adicionar uma frase dentro dessa legenda. Como ainda não preparei uma frase, vou usar texto fictício Vou até meu gerador de Lorem Ipsum e depois gero uma frase Já tenho uma frase gerada, então vou copiá-la e colá-la na caixa de legenda pressionando Control V. Você pode adicionar texto ou texto alternativo, que é uma boa prática E se você quiser vincular essa imagem a outro site como Pixabay ou Pexel, você pode adicionar o URL na Por enquanto, basta adicionar a imagem clicando no botão do anúncio e, em seguida, clicando em Carregar. Selecionarei uma imagem, clicarei em Abrir e, dentro dessa janela, clicarei em Aceitar. Em seguida, colarei o Domitex na legenda Ok, então vamos adicionar mais duas imagens. Vou acelerar esse processo. Não se preocupe A versão paga do cartão fornecerá alguma proteção, garantindo que suas imagens não possam ser baixadas do seu site. Basta marcar esta caixa aqui embaixo e você está pronto para ir. Vou deixar a configuração como padrão por enquanto. Você entenderá a diferença entre os dois modos mais tarde. Em seguida, clicarei na guia de aparência. Primeiro, vamos selecionar a galeria e, em seguida, alterar o estilo para caber. Você também tem opções de fixo e completo, mas deixo isso como padrão para este exemplo. Vou definir o alinhamento à esquerda apenas para ver o resultado na página Acho que vou deixar isso para a Auto por enquanto. Você pode experimentar isso mais tarde. Você também pode ajustar o espaçamento entre as imagens. Por quê? Voltando ao painel Imagem, adicionarei alguns arredondamentos nos cantos Por fim, clicarei na última guia nas propriedades de aparência. Atualmente, não há legendas para as imagens quando eu passo o mouse sobre elas Se quiser adicionar legendas, você pode optar por exibi-las abaixo da imagem No entanto, como minha legenda é muito longa, se eu mudar o estilo para baixo, ela será cortada aqui Mostre a frase inteira, selecionarei essa opção que permite que o texto se estenda por várias linhas. Por fim, há três opções de visibilidade como sempre passar o mouse e não passar o mouse Vamos começar com o mouse. Então, quando eu passar o ponteiro do mouse sobre a imagem, uma frase com fundo branco claro aparecerá abaixo Se mudarmos para não passar o mouse, será o oposto da nossa opção anterior Nesse caso, quando eu passar o ponteiro do mouse sobre a imagem, a legenda Acho que vou ficar com o mouse por enquanto, que significa que a legenda aparecerá quando eu passar o mouse sobre Vou mudar a visibilidade para sempre porque quero mudar a cor de fundo da minha legenda Em seguida, vou ajustar o plano de fundo, talvez alterando-o para vermelho ou tons de vermelho. Obviamente, vou manter a opacidade para que você ainda possa ver um pouco da imagem de fundo Em seguida, vou definir o desfoque para um e adicionar um pouco de preenchimento para a opção Em seguida, vou mudar isso para passar o mouse e alterar o estilo ou a posição da nossa legenda Vamos começar pelo topo ou talvez pelo centro. Que tal cheio? Ok, vou colocar este no centro. Em seguida, clicarei em Concluído, salve este site. Depois disso, publicarei as alterações. Como as imagens estão em resolução de quatro k, isso pode levar algum tempo, dependendo da sua conexão com a Internet. Agora, clicarei em Exibir site e aguardarei o upload das imagens. Vamos tentar o primeiro. Se eu passar o mouse, a legenda aparecerá no centro Vamos rolar para baixo para que o restante das imagens possa ser carregado e tentar passar o mouse sobre essas duas imagens. Tudo bem, vamos voltar ao nosso cartão e clicar em OK. Quero que essas imagens sejam exibidas em tela cheia. Como você pode ver, no site publicado, clicar neles não faz nada. Eu quero que eles preencham a tela. Então, vou voltar ao meu cartão, clicar na galeria e, na primeira guia, há dois modos. Atualmente, ele está definido como padrão. Vamos mudar isso para Lightbox e ver o que acontece. Depois de clicar em Concluído, salvarei este site e publicarei as alterações. Agora, quando eu vou ao site publicado e atualizo a página, se eu clicar na imagem, ela será exibida em uma apresentação em tela cheia E você também pode ver que há duas setas nos dois lados, permitindo que eu navegue pela galeria Para fechar a caixa de luz, basta clicar no botão fechar ou X no canto superior direito da tela e pronto. É assim que você usa o cartão interno da galeria. E isso é tudo por enquanto. Então , até a próxima aula. 13. Apresentação de slides da aula 13: Vamos falar sobre o primeiro recurso não incluído na versão gratuita, o elemento de apresentação de slides. Mostrarei o que esse recurso pode fazer pelo seu site. Então, depois de ver esses recursos, você pode decidir fazer o upgrade para a versão paga para liberar seu potencial e investir no aprimoramento do seu site Vá em frente e clique na apresentação de slides. Como não selecionamos o contêiner antes de adicionar o elemento, ele saiu do nosso contêiner. Então, deixe-me clicar e arrastar isso para dentro do contêiner. Vamos ver nossas propriedades de apresentação de slides. Vá para a primeira guia. No momento, não tem título. Mas você pode alterar isso mais tarde depois de carregarmos uma nova imagem. Vou clicar em Carregar. Em seguida, vou navegar até o diretório do meu computador e selecionar uma imagem aleatória. Bem, para fins de demonstração, depois de selecionar uma imagem, vou clicar em Abrir. Não vou mais editar isso, então vou clicar em Aceitar. Em seguida, alterarei a alternativa ou enviarei uma mensagem de texto para IMG one para Image one Em seguida, clicarei neste Twirl para me dar mais espaço e clicarei Agora, basta repetir o processo de upload da imagem. Em seguida, clique em Abrir e, em seguida, clique em Aceitar, altere o texto alternativo para a imagem dois ou IMG dois e, em seguida, adicione e faça o upload novamente. Acho que três imagens são suficientes para essa demonstração. Então, a melhor coisa sobre essa apresentação de slides na versão paga é que você tem esse recurso que protegerá sua imagem de downloads. Então, se você quiser proteger uma imagem, basta habilitar essa caixa aqui. Vou rolar para cima e depois selecionar o contêiner. Na guia de aparência, verificarei o valor de arredondamento do canto direito do meu contêiner Em seguida, selecionarei a imagem e deslizarei a largura de ponta a ponta. Em seguida, vou ajustar a altura, talvez deslizar a largura para baixo. Se você está tendo problemas com o arredondamento dos cantos do contêiner, por exemplo, a imagem não acompanhou o arredondamento dos cantos do A solução é alterar a forma da imagem e, em seguida, aumentar a largura de ponta a ponta. Não consigo mover isso para um tamanho extremo devido às restrições impostas pelo contêiner. Então, vou clicar em Concluído, salvar este site e publicar essas alterações. E espere que isso seja publicado e clique no site Button View. Mas como eu já tenho esse site publicado, vou até o site publicado e atualizo a página. E é isso. É assim que você adiciona uma apresentação de slides ao seu site. Também podemos adicionar botões nos dois lados dessa apresentação de slides para que seus visitantes possam clicar nos botões e ir para a próxima imagem da apresentação de slides Então, vamos adicionar botões à nossa apresentação de slides. Primeiro, você precisa selecionar a imagem ou o elemento da apresentação de slides Em seguida, na guia de aparência, role para baixo e procure a navegação. Altere isso para um botão mínimo ou navegação mínima. Como você pode ver, ele não tem nenhum design elaborado, setas ou direções para a esquerda e para a direita Você também pode mudar isso para círculos ou quadrados. Vamos voltar aos círculos e mudar o plano de fundo e a cor da navegação. Então, para a cor, digamos vermelho, e vamos dar a ela um fundo branco. Você também pode ajustar a espessura para, digamos sete e o tamanho para 3,25 Depois disso, basta clicar em Concluído, salvar o site e publicar as alterações. Neste exemplo, vou clicar em Exibir site e pronto. Agora você tem navegação para sua apresentação de slides para que seus visitantes possam clicar e controlar manualmente a transição. Isso é tudo por enquanto, e nos vemos na próxima. 14. Aula 14 Criando a barra de navegação no CARRD: Para este capítulo, começaremos com a criação de uma barra de navegação simples. Então, vou criar um novo site e dar uma olhada no modelo de destino. Vou rolar para baixo e escolher este modelo, que está na versão pro. A primeira coisa que vou fazer aqui é mudar o título do site. Embora você possa colocar ícones ou logotipos aqui. Para esta demonstração, vou apenas digitar o nome da escola. No entanto, como você pode ver, não consigo realmente ver o lado direito desta seção. Se eu clicar aqui ou selecionar esse contêiner, o tipo de contêiner será definido como colunas, mas o lado direito será coberto pela janela do menu ou pelo conjunto de ferramentas do menu Então, vou adicionar um contêiner temporário e arrastar esse contêiner sobre a barra de navegação principal. Agora, tenho uma visão clara desta seção contendo os links da minha barra de navegação e o nome da minha escola. Vou selecionar esse ícone e excluí-lo porque adicionarei um botão, que arrastarei para o lado direito dessa coluna. Vou selecionar um contêiner e rolar até aqui para garantir que as colunas esquerda e direita estejam definidas como 50%. O alinhamento da coluna esquerda irá para a esquerda e o alinhamento para a coluna direita será definido para a Em seguida, vou clicar na guia de aparência e garantir que a largura esteja definida como vazia total. A altura é definida como automática e o preenchimento vertical é reduzido para zero Pode usar o controle deslizante ou simplesmente clicar no valor e inserir o número zero Em seguida, vamos descer até o conteúdo e deslizar a largura para 100. Vou rolar para baixo e garantir que tudo esteja configurado como padrão. Em seguida, basta clicar em Concluído. Essa barra de navegação é somente para desktop. Então, vamos criar outro para a versão móvel. Se eu clicar no contêiner e ir para a seção de aparência, rolando para baixo até a seção móvel desse painel de propriedades, você não verá nenhum recurso que permita definir isso para desktop A única maneira de tornar isso visível apenas no desktop é acessar a configuração Stab e navegar até a visibilidade Em seguida, defina isso somente para desktop. Isso só pode ser feito pela versão paga do cartão. Depois disso, basta clicar em Concluído. Vamos passar para os botões. Vou clicar nesse botão para abrir o painel da propriedade e, em seguida, ir direto para a aparência. Como você pode ver, há algumas opções aqui ícone mais rótulo, rótulo mais ícone, ícone mais rótulo largo e assim por diante. No entanto, vou escolher apenas a etiqueta. Assim que eu ativar essa opção, você verá que todos os botões da página serão afetados porque sua aparência está definida como padrão. O que vou fazer é desfazer essa ação. Então, como você pode ver aqui embaixo, ele volta ao seu estilo original. Deixe-me clicar nesse botão novamente. Então, dentro da seção de aparência, mudarei o estilo para nenhum. Ou posso simplesmente adicionar um novo estilo e chamá-lo NA ou um termo curto para barra de navegação. Em seguida, vou clicar e definir isso apenas como rótulo. Rolando para baixo, mudarei a cor do plano de fundo. Não importa a cor, porque vou reduzir a opacidade até zero. Mas primeiro, deixe-me explicar isso até o fim, porque preciso copiar esse código. Controle C para copiar, então eu vou voltar e deslizar isso para zero. Em seguida, vou até aqui e colar o código de cores do plano de fundo original. Para o efeito hoover, eu já tenho um código de cores específico Vou apenas digitar aqui. É apenas um branco muito pálido com um toque de uma cor avermelhada muito clara Ou você pode simplesmente acessar qualquer texto aqui e depois acessar a aparência e copiar o código de cores do texto. Então, a cor do nosso primeiro botão aqui em cima será essa. E quando eu passar o mouse, ele apenas me mostra uma cor de fundo muito pálida. Agora, selecionarei o botão novamente e rolarei para baixo para poder definir o arredondamento dos cantos para zero ou desativar o arredondamento dos cantos Quando eu passo o mouse, ele apenas me mostra uma caixa com um botão de etiqueta dentro Vou rolar para baixo novamente e ir até o peso do texto. Vou definir isso como médio. Então, para o espaçamento entre letras, vou definir isso como 0,0 75 ou 0,0 75 Novamente, depende de você qual seria o espaçamento entre letras dos seus links de navegação Vou rolar para baixo novamente. Vou definir o espaçamento para zero. E para as margens, vou configurá-lo para 1,75 Depois disso, basta clicar em Concluído. Você pode testar o botão colocando o ponteiro sobre o botão Depois disso, vamos adicionar mais alguns e alterar o título desse botão. Vamos selecionar o botão para abrir o painel de propriedades. Dentro da primeira guia, clicarei nessa seta para baixo para poder alterar o nome da etiqueta para home. Deixe-me corrigir minha ortografia e torná-la H. Antes de fechar este acordeão, definiremos a URL Então, primeiro, vou digitar o sinal numérico e depois voltar para casa. Isso servirá como um nome para a quebra de seção dentro desta página. Vou clicar em Concluído e vou verificar meus links de navegação, dar uma olhada e tomar algumas decisões de última hora se eu quiser alterar o espaçamento ou algo parecido Então, por enquanto, não há nada a mudar. Então, vou voltar às propriedades novamente, clicar na seleção suspensa você possa ver o botão do anúncio. Está bem? Vou adicionar outro e mudar o rótulo para Classe. Você pode digitar qualquer link que tenha em mente, ou isso depende de como você cria ou estrutura o site da sua sala de aula. Mas para esta demonstração, vou apenas com a aula. Para o URL, vou usar a hashtag ou o sinal numérico novamente. Mas desta vez, é só um sinal numérico. Não vai a lugar nenhum e não interromperá a navegação ou os links dentro do site Ele simplesmente retornará à página inicial. Clique em Concluído e, novamente, verifique os links de navegação Nesse ponto, você pode mudar de ideia, alterar o espaçamento ou o espaçamento entre letras ou as margens E eu acho que não há nada aqui para mudar. Então, vou voltar ao meu painel de propriedades. Vou clicar nessa seta suspensa para fechar esta seção e clicar em Adicionar novamente para adicionar outro botão. Vou nomear essas atividades porque esta página abrigará todas as minhas atividades em sala de aula. E para o URL, vou apenas mudar isso para sinal numérico. Em seguida, clicarei em Concluído. Se você quiser adicionar mais botões, basta repetir o processo e revisar as gravações de vídeo ou aulas e discursos anteriores Não se esqueça de salvar seu trabalho, incluindo a descrição do título. E se você tiver uma pasta, poderá salvá-la lá. Se você estiver usando a versão paga do cartão, poderá escolher sua extensão ou extensão de domínio. Ou você pode publicá-lo com um domínio personalizado, que discutiremos no próximo capítulo deste curso. Depois de concluir todos os requisitos, basta clicar em Publicar. Como esse é um modelo, você precisará acessar cada elemento e adicionar imagens a todos os espaços reservados nesta página Isso é tudo por enquanto, e nos vemos na próxima aula. 15. Aula 16 Navbar responsiva para dispositivos móveis: Nesta lição, vamos criar uma barra de navegação para dispositivos móveis, como iPad e telefones celulares. Então, quando você abre isso em uma tela menor, como seu dispositivo móvel, ela transforma a barra de navegação em um menu de hambúrguer Isso alterará os links na sua barra de navegação. Então, a primeira coisa que você quer fazer aqui é clicar em Salvar. Deixe-me também mostrar outra maneira de visualizar seu site por meio deste botão aqui em cima. Então, novamente, salve seu trabalho e clique nesse botão. Como você pode ver, se eu redimensionar a janela do meu navegador, não haverá links de navegação até eu ajustar o tamanho A razão para isso é que, se eu fechar este navegador e acessar as configurações do contêiner da minha barra de navegação, você verá que, sob visibilidade, ele está configurado apenas para desktop. É por isso que a barra de navegação desaparece quando o tamanho da tela muda Se você clicar na seta para baixo, verá quatro opções, como normal, as duas restrições, que são desktop e celular, e uma exclui. Vamos configurar esses dois desktops por enquanto e ir para minha primeira guia. Quero duplicar isso porque esse será o nosso menu móvel Está bem? Deixe-me clicar e selecionar os botões e excluí-los porque vou mudar isso para um ícone. Ok, deixe-me arrastar o ícone dentro desta coluna. Como você pode ver, o painel de propriedades está cobrindo meu ícone. Então, deixe-me clicar nesse ícone esquerdo aqui em cima, para que o painel de propriedades se mova para o lado esquerdo da tela, permitindo que eu veja o ícone com mais clareza. Vou mudar o ícone para menu, especificamente o menu Hambúrguer Este parece um pouco ousado, então deixe-me mudar para a luz do menu. Também vou até um dos botões aqui embaixo e depois copiarei a cor de fundo da guia Aparência para manter a consistência com as cores do nosso site. Ao selecionar meu ícone, colarei o código sob a cor dos ícones. Tudo bem Agora eu tenho meu menu de hambúrguer Deixe-me clicar em Salvar e depois em publicar. Vou clicar em Exibir site e redimensionar a janela do meu navegador. Como você pode ver, agora existem duas barras de navegação. A segunda barra de navegação também está visível na versão para desktop. No entanto, quando reduzo o tamanho para uma tela menor, ela desaparece dessa versão da página Então, vou puxar isso de volta para o meu navegador voltar para o meu cartão. Clique no contêiner, acesse as configurações e altere a visibilidade para somente dispositivos móveis. Em seguida, clicarei em Concluído. Vou selecionar um contêiner para nossa barra de navegação somente para celular e adicionar um controle. Para este, vou chamá-lo de lar. Depois de clicar em Concluído, adicionarei outro controle, selecionando novamente a barra de navegação somente para celular. Vou clicar no botão de adição para adicionar outro controle. Desta vez, alterarei o tipo para marcador de cabeçalho e, em seguida, clicarei em Concluído Em seguida, salvarei meu trabalho e publicarei as alterações. Clique em Ok, retorne à página publicada e clique em Atualizar. Agora, como você pode ver, a barra de navegação móvel não está visível somente na visualização para desktop. No entanto, quando eu retiro isso do meu navegador e o redimensiono, agora tenho um menu de hambúrguer para uma tela menor Clicar nele retornará à minha página inicial. Então, quando eu clico no menu Hamburger, ele simplesmente volta para minha página inicial Então, deixe-me ir até o meu cartão. E se eu clicar no menu Hamburger e voltar para a primeira guia, há uma URL temporária, que eu selecionarei e mudarei para o menu móvel Vou clicar em Concluído. Vou rolar para baixo e selecionar a página inteira para adicionar um controle. Vou dar um nome a isso. Mas primeiro, retornarei ao ícone do meu menu, vou para o painel de propriedades e, abaixo da URL, copiarei o nome da seção que defini para esse menu e depois voltarei aqui. Vou rolar para baixo e selecionar a quebra de seção e colá-la aqui dentro desse preenchimento de texto. Passando para os botões, duplicarei os conjuntos e os arrastarei abaixo da quebra de seção Se posicioná-los for complicado, vou reverter o processo arrastando quebra do menu na parte superior dos botões Depois de fechar o painel da propriedade, selecionarei os botões e, em Aparência, clicarei em NN para garantir que seu estilo não afete os botões da barra de navegação principal Vou adicionar outro contêiner para esses botões. Como você pode ver, os botões estão configurados apenas para dispositivos móveis porque a última ação que fiz foi alterar a visibilidade do contêiner para apenas dispositivos móveis. Então, vou arrastar os botões para dentro do contêiner e vou mudar o tipo para colunas. Em seguida, arraste os conjuntos de botões para o lado direito desse contêiner. Vou colocar o esquerdo como espaçador. Em seguida, ajusto a largura do botão para 20 mais 20 a 23 ou na guia Aparência antes de clicar em Concluído. Agora, vou salvar meu trabalho e publicar o site. Voltando à página publicada, redimensionarei a janela do navegador para confirmar se o menu Hamburger aparece em telas menores E quando eu clico em Início, ele simplesmente volta para a página inicial Na próxima lição, refinaremos as configurações da nossa barra de navegação, seremos criativos com a animação e exploraremos maneiras diferentes de visualizar a barra de navegação em dispositivos móveis Isso é tudo por enquanto, e nos vemos na próxima aula. 16. Aula 17 NavBar fixa refinando a NavBar para dispositivos móveis: Deixe-me te mostrar uma coisa aqui. Quando eu retiro isso, redimensiono a página e percorro ela, você pode ver que a barra de navegação está incluída na estrutura de uma página do site No entanto, se quisermos que a barra de navegação permaneça na tela enquanto percorremos as páginas, essa será nossa lição de hoje. Podemos fazer com que ele permaneça na tela um dispositivo móvel enquanto percorremos as páginas? Vamos começar arrastando essa página para o nosso grupo de navegadores. Em seguida, selecionarei a barra de navegação de contêineres somente para dispositivos móveis . E no painel de propriedades, vamos navegar até as configurações. Por padrão, ele é definido como elemento e estilo. Essas são as duas guias que você pode ver aqui dentro das propriedades das configurações Se clicarmos em Estilo, ele nos mostrará mais duas opções. Quais são padrão e móveis. Vamos escrever esse código dentro das configurações do celular. Vamos até aqui e digitar um código. Esse é um código muito simples que você pode copiar e colar. Vou incluí-lo abaixo do vídeo para que você possa simplesmente copiá-lo e colá-lo aqui dentro deste campo de texto. Começamos com a posição. Vamos adicionar uma coluna e, em seguida, digitar fixo, seguido por ponto e vírgula Esse seria o formato desse código. E depois digitou no topo, que é zero. Para o lado esquerdo, esse também é zero. A largura, vou definir isso para 100%. Em seguida, adicionarei uma cor de fundo, que é branca. Se você optar pelas cores primárias, basta escrever o nome da cor. Se você tem uma cor específica em mente, basta escrever o código. Em vez de branco. Você pode simplesmente adicionar uma hashtag seguida por FF ou algo parecido Por fim, este é o índice Z, que está definido como número dois Esse código garantirá que os títulos ou a barra de navegação permaneçam na tela enquanto percorremos as páginas É como colocar essa barra de navegação em uma segunda camada. Portanto, a primeira camada será a página inteira e a segunda camada conterá a barra de navegação. Vou clicar em Concluído, salvar meu trabalho e publicar as alterações. Vou navegar até o site publicado e, em seguida, atualizar a página Vou retirá-lo para que ele flutue para que eu possa redimensionar a página Ao rolar para baixo, você verá que a barra de navegação permanece na tela. Voltarei ao editorial do meu cartão porque o próximo refinamento que precisamos fazer nosso site é modificar os links ou os links de navegação da tela do celular Role para baixo na parte inferior da página. Em seguida, selecionarei o contêiner para nosso menu móvel. Vamos tentar modificar alguma coisa aqui. Começarei com a primeira guia dentro do painel de propriedades do contêiner. Em seguida, alterarei a largura da coluna para 20% e alinharei a coluna da direita à direita Passando para a guia de aparência, selecionarei o conjunto de botões. Na guia de aparência novamente, definirei a largura para o máximo ou 30. Na verdade, vamos definir isso para um tamanho máximo. Em seguida, vou mudar isso para rótulo largo mais ícone. Em seguida, volto para a primeira guia e vou para o primeiro botão, alterando o ícone para home. Para o URL, vou mudar isso para sinal numérico ou hashtag home Passando para o segundo botão, mudarei o ícone para Jogar. Quanto ao URL, vou apenas digitar um sinal numérico Para o terceiro, vamos mudar o ícone para relógio. Novamente, uma tag de hash para o URL. Se você não tiver definido as quebras de seção ou os pontos de rolagem para esta página, clicarei em Concluído, salvarei meu trabalho e publicarei as alterações. Voltando ao site publicado, atualizarei a página e a retirarei. Conforme eu redimensiono a página, ela vai para a versão móvel Como você pode ver, ao clicar no menu Hambúrguer, você só pode ver dois botões. Nós vamos consertar isso. Isso é esperado porque precisamos dobrar algo dentro do painel da propriedade e adicionar outro contêiner dentro do editor de cartões Vou arrastar isso de volta para o nosso grupo de navegadores. Em seguida, retorne ao meu editor de cartões. Vou selecionar o contêiner do nosso menu móvel e navegar até a guia de aparência. Na seção de conteúdo, alterarei a largura para Automático. Em seguida, clicarei em Concluído e rolarei até o contêiner temporário que colocamos no topo da nossa página. Não precisamos mais disso, então podemos simplesmente deletar isso. Vou salvar meu trabalho e publicar as alterações. Agora, vou para a página publicada e a atualizarei. No momento, ainda estamos na seção do menu móvel. Vou simplesmente selecionar e excluir a palavra hashtag no menu móvel da minha barra de endereço. Tudo bem Vou puxar isso para baixo e redimensionar a página novamente. Como você pode ver, eu ainda tenho dois botões. Mas onde está o primeiro? O botão home. Como a barra de navegação está na camada dois, ela está cobrindo nosso primeiro botão. Portanto, a página inicial está nesta seção da barra de navegação Está bem? É por isso que só vemos dois botões aqui embaixo. Vou arrastar isso de volta ao nosso grupo de navegadores, voltar ao meu editor de cartões e rolar para baixo para selecionar o contêiner do nosso menu móvel. Em seguida, adicionarei outro contêiner e o colocarei antes do menu móvel. Isso funcionará como nosso espaçador para que possamos ver os links ou os links de navegação quando alterarmos o tamanho do nosso site O espaço fornecido na parte superior deste link de navegação móvel será o local que será ocupado pela barra de navegação da versão móvel. Deixe-me mostrar o que quero dizer. Vou clicar em Concluído, salvar meu trabalho e publicar as alterações. Agora, se voltarmos ao nosso site publicado novamente, apagarei a seção do menu móvel da barra de endereço Vou atualizar a página novamente apenas para ter certeza de ver isso em uma tela menor Agora, se eu clicar no menu Hamburger, podemos ver os três links da barra de navegação na versão móvel Vou arrastar isso de volta para o nosso navegador, voltar ao meu editor de cartões, selecionar o contêiner do menu móvel e talvez ajustar um pouco o preenchimento Vou clicar em Concluído e salvar as alterações. Então eu vou voltar para ver o resultado. Você pode modificar o espaçamento, as margens e os preenchimentos do menu do Você também pode ajustar as lacunas ou espaços entre os botões. Você pode alterar as cores ou o que quiser para o menu do celular. Na próxima lição, tentaremos ser criativos com as transições da visualização desktop para a visualização móvel em termos de links de navegação Isso é tudo por enquanto, e nos vemos na próxima aula. 17. Lição 18 Sendo criativo com os links da NavBar: Nesta lição, adicionaremos animação aos nossos links de navegação para a versão móvel. Esta é minha tentativa de adicionar criatividade à apresentação dos links de navegação quando acessados de um telefone ou tablet, tornando a experiência menos entediante para seus alunos enquanto eles navegam pelo site Vamos rolar até o final da página e selecionar os conjuntos de botões que você vê aqui embaixo. Em seguida, passaremos para as configurações de animação na propriedade visible. Alteraremos isso para deslizar para a esquerda e ajustar o valor de escalonamento de 0 a 0 0,5 Além disso, podemos aprimorar a aparência dos botões do menu móvel. Vamos criar um estilo, um novo estilo chamado Links Animation. Depois disso, basta fechar essa lista suspensa e clicar em Concluído. Você pode visualizar a animação clicando nos botões do conjunto de ferramentas no canto superior direito da tela. Se você estiver satisfeito com a animação, salve seu trabalho, publique as alterações e visualize seu site. Redimensione a página para imitar o tamanho da tela de um tablet ou telefone Ao clicar no menu Hamburger, você notará a animação em ação Você também pode passar o mouse sobre os links para verificar a animação dos botões H. Agora, vamos arrastar essa página de volta ao nosso grupo de navegadores. Como você pode ver, não há layout de página de destino aqui, exceto pela barra de navegação, porque atualmente estamos no menu móvel, que é visível somente em dispositivos móveis. Vou selecionar e apagar esse conjunto de links de seção em nossa barra de endereço e, em seguida, voltaremos ao nosso editor de páginas de cartões Vou clicar em OK. A partir daqui, avançarei rapidamente pelo vídeo gravado. Farei essa postagem experimentando diferentes configurações e valores na guia de aparência, ajustando as propriedades dos botões H até ficar satisfeito com o resultado Portanto, fique à vontade para explorar diferentes opções para sua animação móvel, e nos vemos na próxima. 18. Lição 19 Domínio personalizado: Nesta lição, vamos criar um domínio personalizado. Atualmente, estamos usando os domínios padrão ou predefinidos, como card.co, como em nosso projeto navbardmo.card.co em No entanto, se você quiser usar um domínio personalizado, podemos alterá-lo para algo como ww.slathd.com, e eu posso usá-lo No entanto, como eu já uso esse site para outro site, só posso usar um subdomínio para este Portanto, vou usar um subdomínio chamado classroom.slerthd.com Vou explicar como fazer isso nesta lição. Se você quiser adicionar um domínio personalizado, a primeira coisa que você precisa fazer é salvar seu trabalho. Em seguida, no painel Propriedades, role para baixo até encontrar a propriedade da ação. Atualmente, estou usando um nome de domínio, ETB Navbar demo.or.card.co. Muitos. OK. Então, se você quiser ter um domínio personalizado, basta clicar nessa opção aqui. S. Deixe-me apagar o que está no livro didático para que possamos Como você pode ver, há uma área cinza aqui embaixo, que não está disponível no momento Se você quiser que isso apareça, basta digitar seu domínio personalizado dentro desse campo de texto aqui. Agora, vou digitar classroom como meu subdomínio, e meu nome de domínio será slerthd.com Você notará que há um indicador logo abaixo do campo de texto mostrando que esse domínio está disponível. Novamente, Syler three D é meu domínio principal e meu subdomínio é a palavra Se eu mudar isso para www dot, isso indicará que esse nome de domínio não está disponível Porque eu já estou usando o ww slarthd.com Portanto, colocar ww slartd.com não funcionará. E o campo aqui embaixo permanecerá nivelado. Acabei de digitar na minha sala de aula dotslerd.com. Agora, como você pode ver, o campo de texto aqui embaixo agora está ativado. Tudo o que você precisa fazer é aplicar as informações que você tem aqui e configurá-las com o provedor de domínio de sua preferência. Para isso, usarei godaddy.com. Eu entro em ww godaddy.com dot ph. Portanto, as cobranças estão em peso filipino. Antes de se inscrever no go daddy, você pode simplesmente digitar o nome de domínio desejado neste campo de texto Vou digitar no meu site legal de sala de aula. Opa, deixe-me corrigir minha ortografia. E então eu clicarei em Enter. Como você pode ver, o primeiro aqui é meu site de sala de aula Cool dot pH, que é 969 pesos Eu acredito que isso é para o primeiro ano. Aqui embaixo é onde você pode encontrar mycolclassroomsite.com. Diz aqui que você só precisa pagar um peso ou 999 pesos por três anos Ok, deixe-me verificar isso. Então, tudo o que você precisa fazer é clicar no nome do domínio e, aqui embaixo, clicar em Torná-lo seu. Ok, dentro deste cartão, você pode ver que o padrão está definido para três anos. Então, vou mudar isso para um ano, e agora são 729 pesos Como você pode ver, não é um peso, certo? Então, só para ficar claro, não é um peso, mas 729 pesos para o primeiro ano Ok, você também pode adicionar uma proteção completa, que terá um custo adicional. E para o total , agora serão 1128 pesos Você também pode procurar um domínio muito mais barato. Se você rolar até aqui, há muitas opções para você. Basta clicar e adicionar isso ao seu cartão. Depois de se inscrever no Go Daddy, agora você pode acessar seu próprio painel A partir daqui, você pode digitar seu nome de domínio e adicioná-lo ao seu cartão. No momento, estamos dentro da minha conta do Go Daddy. Tenho alguns dos sites que comprei listados aqui. Um deles é o slertred.com. Deixe-me navegar até aqui e ir para o domínio myslertred.com Vou clicar em DNS. Se você estiver usando outro provedor, basta procurar as configurações de DNS Ok, agora estou no meu painel de gerenciamento de DNS. Aqui embaixo, você pode ver, deixe-me consertar meu navegador. Ok, agora eu tenho meu editor de páginas de cartões à esquerda e meu painel Go Daddy Syler three D à direita Então, como você pode ver, a primeira opção aqui é definir o tipo A. Então, vou definir isso como A, copiarei o segundo campo de texto, que é para o host. Se você estiver usando o Go Daddy, está sob o nome. Vou colar isso aqui. Certifique-se de que a palavra foi digitada corretamente para o destino Vou copiá-la e colá-la no campo de texto do valor Ok, acho que é só isso. Tudo o que você precisa fazer é clicar em Salvar e adicionar outro registro. Para este, será um nome C. Vou copiar o host novamente. Então, basta clicar neste ícone aqui para copiar e depois colar aqui, verificando a palavra “Estou copiando”. Está bem? Eu acho que isso é bom. Agora, para o destino, vou copiá-lo e colá-lo no campo de texto do valor. Em seguida, salve isso e eu voltarei ao painel. Ok, eu terminei com o Go Daddy. Vou voltar ao meu editor de páginas de cartões e vou publicar o site. Como você pode ver, o botão de visualização do site está desatualizado porque o site classroom.slerthd.com está sendo classroom.slerthd.com Então, tudo que você precisa fazer agora é esperar. Então, vou clicar em OK. E é isso para esta lição, e nos vemos na próxima. 19. Aula 20 Compartilhando seu site com QR: Compartilhar seu site com o Card é muito simples com um código QR. Basta acessar o painel e clicar no ícone de roda dentada, que é o ícone de gerenciamento do site. Em seguida, em visão geral, clique neste ícone aqui. Isso gerará um código QR para o seu site. Você pode baixar esse código QR e compartilhá-lo com seus alunos via PowerPoint, ou você pode imprimi-lo e colocá-lo no quadro negro ou no quadro branco Mas se você quiser que seu código QR seja mais impressionante, você pode usar um site que dará ao seu código QR um design mais criativo Então, vamos ao google.com e digite QR Monkey. Eu uso este site para gerar códigos QR para minhas atividades de classe e para o site que crio dentro do cartão Agora, vamos voltar ao nosso cartão e copiar o link. Em seguida, volte para armonkey.com e cole na guia URL. A próxima etapa é definir suas cores. Você tem duas opções, uma para o primeiro plano e outra para a cor do plano de fundo Para a cor do primeiro plano, vamos escolher azul. E para o fundo, vamos escolher vermelho. Agora, é uma escolha estranha de combinação de cores, mas eu só quero mostrar que haverá um aviso se as cores não tiverem contraste suficiente entre o fundo e o primeiro plano para funcionar com todos os leitores de códigos QR Por enquanto, vamos deixá-lo em azul e vermelho. A próxima guia é adicionar uma imagem de logotipo. Se você adicionar um logotipo, ele será colocado no meio do código QR. Essa é outra forma de personalizar seu código QR para seu aluno em uma atividade ou site específico Você também pode usar o logotipo da sua escola para manter a consistência com a identidade da sua escola. A seguir está a guia de design personalizado. Aqui você pode configurar o tipo de formato do corpo e o formato da moldura em torno do seu código QR. E aqui embaixo, você pode escolher a forma do globo ocular. Depois de pressionar oito códigos QR, ele gerará o código QR com base em sua Agora você tem um código QR azul e vermelho com uma moldura e formas de globo ocular ocupando os Eu sugiro que você experimente o QR Monkey e seja criativo com seus logotipos e cores É isso por enquanto, e nos vemos na próxima aula.