Design para web simplificado: aprenda Bootstrap Studio em 12 horas

1. Introdução: Olá e bem-vindo a este curso. Neste curso, vamos aprender tudo sobre o software de desktop chamado bootstrap Studio. Bootstrap Studio é um front-end de arrastar e soltar ou designer de site. Podemos usá-lo para criar facilmente sites bonitos e responsivos sem a necessidade de escrever qualquer código. Nesta classe, estaremos criando um site responsivo como este. Vamos começar o curso aprendendo o básico de HTML e CSS. Ter uma compreensão dessas noções básicas tornará os capítulos restantes muito mais fáceis de seguir. Em seguida, vamos nos familiarizar com a interface do usuário, aprendemos a adicionar algum conteúdo simples e formatação. E depois disso, vamos aprender a adicionar alguns componentes mais avançados, como a barra de navegação e um carrossel e muito mais. Vamos aprender sobre o uso de linhas e colunas para criar grade responsiva. E vamos aprender sobre o estilo personalizado. Também aprenderemos sobre a mancha negra, e aprenderemos a criar nosso próprio componente personalizado, e aprenderemos a adicionar componentes interativos. Finalmente, vamos aprender a publicar nosso site em um domínio de estúdio gratuito do Bootstrap para seguir este curso, primeiro, certifique-se de que você tem um bootstrap Studio instalado em seu computador. Você pode o software a partir deste site. Este curso é projetado para ser acessível a pessoas que não têm experiência em web design ou qualquer codificação de experiência. Se você já tem alguma experiência, isso é ótimo e você provavelmente será capaz de acelerar através do curso. Mas mesmo que você seja um iniciante completo, este curso é acessível para você. Você só precisa de um pouco de paciência e persistência e você estará fazendo belos sites responsivos em nenhum momento. Então, se você quer criar um site para sua pequena empresa ou você gostaria apenas de criar algo para o seu hobby. Ou mesmo se você está apenas interessado em aprender uma coisa nova, então vamos começar. 2. Projeto do curso e como seguir este curso: Este curso está estruturado em 12 capítulos de tamanho mordido, começando de forma simples e progressivamente mais avançada. Como regra geral, cada capítulo deve levar, muito grosso modo, cerca de uma hora para ser concluído. Mas, claro, cada indivíduo é diferente e é melhor estudar ao seu próprio ritmo. Se você é um aprendiz lento e estável que gosta entender tudo perfeitamente como eu, você pode demorar um pouco mais e você é, se você é um daqueles alunos que apenas zoom fluido, você provavelmente é um pouco mais rápido. Como você segue o curso é completamente com você. Mas eu recomendo que você o siga na ordem dada. E eu recomendo que você siga junto com todos os exemplos para obter alguma experiência prática. Quando você segue, é melhor não me copiar com precisão, mas usar sua própria criatividade e engenhosidade para dar seu próprio talento às coisas. Experimentar e brincar com as coisas é uma ótima maneira de aprender coisas novas. Como nosso projeto de classe, você deve usar as ferramentas que aprendemos para criar seu próprio site simples ou elaborado. Ou, alternativamente, você pode criar seu próprio componente personalizado. Por exemplo, você pode projetar seu próprio rodapé ou cabeçalho, ou um relógio, ou um modelo para um CV ou currículo ou o que quiser enquanto você trabalha para o curso É uma boa idéia manter na parte de trás da sua mente o que você pode querer criar como um projeto de sala de aula. Dependendo de quanto você gostaria de sair deste curso, você pode tornar seu projeto tão simples ou elaborado quanto você gostaria. Mas eu recomendo que você compartilhe pelo menos um projeto, porque criar seu próprio projeto requer muita aprendizagem ativa, que é uma maneira muito melhor de aprender do que aprendizagem passiva, obter apenas observando as explicações. Além disso, estou ansioso para ver o que você inventou. Quando você terminar com o projeto. Publique-o em um domínio estúdio Bootstrap gratuito. Publique um link como um projeto. Na verdade, sinta-se à vontade para fazer upload de um projeto sempre que você achar precisa de feedback ou mesmo se você quiser apenas mostrar o que você criou. Então, ansioso para ver o seu projeto, vê-lo no próximo vídeo. 3. Hora 1 - HTML explicado: Html significa Hypertext Markup Language. Um arquivo HTML é simplesmente um arquivo de texto simples, que pode ser facilmente escrito por um ser humano e também pode ser facilmente compreendido por qualquer navegador web. Para criar um arquivo HTML simples. Siga os próximos passos. Inicie um editor de texto simples e crie um novo arquivo. Por exemplo, no Windows você pode usar o Bloco de Notas. Eu estou no Linux, então eu vou usar g edit, salvar o arquivo como página simples ponto HTML em uma pasta conveniente em seu disco rígido. Adicione o seguinte texto. Encontre o arquivo e abra-o com seu navegador favorito. Tile que editor de texto e um navegador da Web lado a lado no monitor, você deve obter resultados semelhantes a este. Você deve ter notado algumas coisas interessantes. O fogo começa com um colchete, um colchete HTML e termina com o mesmo, exceto com uma barra invertida na frente da parte HTML. Estes são exemplos de tags. A primeira tag sem uma barra invertida é uma tag inicial. A tag com a barra invertida está terminando tag. Tudo entre essas duas tags é código HTML. Primeiro, usamos uma espiral com o navegador. Nós só vemos o texto entre as duas tags, e nós não vemos as duas tags em si. Em seguida, modifique o texto adicionando outro par de tags. Em seguida, atualize o navegador. Consegues ver o que as etiquetas p e barra B fizeram? Isso é certo. Eles deixaram o texto entre os dois em negrito. Em seguida, isso é modificado. O arquivo assim. Veja se consegue identificar todas as etiquetas que estamos usando e veja se consegue adivinhar o que elas fazem. Peguei-os todos. Aqui está uma cabeça de resumo. Tudo entre estas duas tags é informação sobre a página web sem ser parte da própria página web. Todo o tipo de informação pode ser colocado aqui. Por exemplo, neste caso, eu coloquei o título da página da Web. Os navegadores geralmente colocam o título da página da Web aqui na aba. Também temos estas duas etiquetas corporais. Tudo entre essas duas tags é parte do corpo ou a parte principal da página da Web, que contém o conteúdo da página web. Um significa que os textos entre essas duas tags é um cabeçalho. 1 é o tipo mais importante de título, mas você também tem títulos menos importantes como indo para o título PRE, et cetera. P significa que o texto é um parágrafo. senhor quer dizer que o texto deve ser sublinhado e eu quero dizer que o texto deve estar em itálico. E basicamente isso é tudo o que há para ele, para HTML. Tudo o que realmente é é um arquivo de texto simples com tags especiais para informar o navegador sobre formatação especial. Na verdade, há um grande número de tags em HTML e você pode fazer todo tipo de coisas como mudar a cor de fundo, adicionar imagens e links web e coisas assim. Mas se você usar uma ferramenta de criação de web arrastar e soltar como o Bootstrap studio. Você não precisa saber nada disso. Se você está curioso, porém, se você tem uma mente curiosa, você, Eu recomendo o site www w w preschools.com. Ele tem algumas lições interativas bastante úteis que ajudam você a aprender mais sobre HTML. 4. Hora 1 - CSS explicados: Usando HTML, é possível adicionar muita formatação a uma página da Web, mas isso pode ser bastante ineficiente. A maioria dos sites consiste em várias páginas, muitos parágrafos e muitos títulos. Então, se você fosse definir o formato para cada página individual, cada cabeçalho individual, e cada parágrafo individual, et cetera, et cetera. Seria demorado. Sem mencionar que se você ou seu cliente quisessem fazer uma mudança, você teria que voltar para cada um individualmente, alterar a formatação de cada elemento. Então é aí que o CSS entra. Css significa folhas de estilo em cascata. E, essencialmente, nada mais é do que uma maneira de definir o formato para todos os animais de um estilo específico de uma só vez. Vamos dar uma olhada no seguinte arquivo HTML. À esquerda temos o arquivo aberto em um editor de texto. E à direita temos ele aberto no Firefox. Podemos ver algumas coisas. Primeiro, aprendemos que sou uma péssima cozinheira, mas essa não é a questão agora. Em segundo lugar, vemos que era muito fácil usar parágrafos e títulos para configurar o conteúdo deste site. No entanto, ainda pode usar muita formatação. Então, vamos adicionar uma folha de estilo a ele. Adicione um elemento de estilo ao cabeçalho do documento. Nós também poderíamos adicionar isso em um documento separado, mas para mantê-lo simples, vamos apenas mantê-lo na cabeça do mesmo documento, digite p para mostrar que estamos afetando apenas os parágrafos agora. E use colchetes. E entre os colchetes nós definimos a cor como azul assim, e nós definimos a fonte como sans serif. A letra P permite ao navegador saber que devemos aplicar este mostrador ou este formato a cada parágrafo da página. Então, vamos salvar o arquivo de texto e atualizar o navegador. E como podem ver, todos os parágrafos ficaram azuis. Em seguida, vamos definir a cor de fundo do corpo do documento para azul claro. E vamos definir a fonte do título também para enviar serif. O problema é, é claro, que você não quer necessariamente que todos os parágrafos sejam os mesmos. Talvez você gostaria de diferentes tipos de parágrafo. Neste caso. Por exemplo, talvez você queira um tipo especial de formato para o teste de introdução e um tipo especial para especificamente para as receitas. Para fazer isso, adicionamos um atributo de classe às tags relevantes. Em seguida, modificamos o código CSS para criar um formato específico para as tags que têm este atributo classe. Você pode pensar em uma classe como um tipo de identificador para o navegador saiba que tipo de formatação dar a cada elemento. Primeiro, modificamos o HTML para adicionar uma classe chamada instruções a cada parágrafo contendo uma instrução de receita. Faça isso adicionando a classe de texto é igual a instruções. Em seguida, adicionamos uma entrada de estilo específica para formatar qualquer elemento com a classe de instruções. Como você pode ver a partir do exemplo adicionado texto recuo 40 pixels. Isto significa que todos os textos, que tem o atributo de classe instruções serão recuados à direita por 40 pixels, altura da linha, cinco pixels, definir o espaçamento entre estes parágrafos para cinco pixels. A cor vermelha define a cor do texto como vermelha. E isso é realmente tudo o que há para ele algum código CSS simples no elemento de estilo na cabeça do seu documento HTML é uma maneira simples de adicionar formatação elaborada, mas consistente para sua página. E o mais importante, também é fácil modificar e experimentar o estilo sem ter que alterar o estilo e a formatação de cada elemento individualmente. 5. Hora 1 - Bootstrap explicado: Durante muito tempo, HTML e CSS foi mais do que suficiente para criar sites muito bons. Mas tudo mudou quando telefones e tablets se tornaram comuns. Um site claro e fácil de usar em um monitor grande com teclado e mouse pode não ser fácil de usar em uma pequena tela sensível ao toque. Então foi aí que sites responsivos se tornaram populares. Com sites responsivos, o design e o layout do site mudam dependendo do tipo de dispositivo que você está usando para visualizar o site. Dê uma olhada nesta página da Web. Quando eu visualizo a página da Web em uma ampla janela, então eu tenho três parágrafos dispostos em três colunas. Mas quando eu faço a janela mais estreita, por exemplo, se eu estivesse olhando para ela em um telefone, então os parágrafos são empilhados verticalmente. Eu não precisava escrever dois sites separados para implementar isso. Eu só usei o framework Bootstrap. Este código mostra como escrevi esta página web. Nós não precisamos olhar muito em um lado técnico das coisas agora. Mas como você pode ver, eu tenho um link para o framework Bootstrap na cabeça do documento. E eu tenho uma série de atributos de classe em meus elementos, que dizem ao framework Bootstrap como eu quero que esses elementos se comportem. Por exemplo, eu tenho uma classe chamada container e uma classe chamada linha, e uma classe chamada para. Como eu disse, não precisamos entrar nos detalhes técnicos por enquanto. Vamos aprender mais sobre como isso funciona em um vídeo futuro. Então, o que é Bootstrap Studio? Bootstrap Studio é um editor de site de arrastar e soltar. A interface do usuário é usada para criar o layout e a formatação do site da mesma forma que se usaria um processador de texto para escrever um relatório. Nós clicamos e arrastamos elementos como títulos, parágrafos, imagens, links, barras de ferramentas, etc., para o lugar. O software bootstrap irá então criar todos os códigos HTML, CSS e Bootstrap necessários para você. E essa é toda a informação de fundo que precisamos para começar a aprender sobre o estúdio Bootstrap nos próximos capítulos. Vejo você então. Tchau-tchau. 6. Hora 2 - interface para usuário: Então, finalmente, estamos prontos para começar a aprender sobre o Bootstrap studio. Em seguida, vamos nos familiarizar com a interface do usuário e aprender a criar uma página simples. Mas primeiro, vamos criar nosso primeiro projeto. Ao abrir o Bootstrap Studio pela primeira vez, você terá a opção de criar um novo design ou carregar um existente. Clicando no novo design, vemos que há muitos modelos prontos para escolher. Para manter as coisas simples, vamos escolher um modelo vazio. Defina o nome do seu projeto, escolha a versão mais recente do framework Bootstrap e clique em Criar para continuar. E, em seguida, a interface do usuário aparece. Vamos ver o que podemos ver. Primeiro de tudo, no meio temos a tela. É aqui que vamos criar um site. À esquerda temos uma coluna. A coluna contém o painel Componentes, onde podemos encontrar todo tipo de elementos. Simples como parágrafo e cabeçalho, e também mais complexos como uma galeria ou uma apresentação de slides ou coisas assim. E abaixo disso temos uma visão geral da estrutura do documento. Este painel fornece uma visão geral útil de quais elementos e componentes foram adicionados à página. Você pode não estar vendo essa coluna, mas você pode estar vendo uma lista de ícones. Se for esse o caso, você pode simplesmente redimensionar esta coluna clicando e arrastando a borda aqui. Se olharmos aqui para cima, vemos uma fileira de ícones. Esses ícones são uma maneira rápida de alternar entre exibições. Por exemplo, visualização de telefone, visualização tablet, visualização de área de trabalho. Do lado direito, também temos uma coluna. Novamente, se você vir isso como uma lista de ícones, basta clicar e arrastar para ampliar o tamanho da coluna. E no topo, temos três abas que podem ser usadas para formatar diferentes elementos, aparência, opções e animações. E aqui em baixo temos design. Nesta guia, vemos os recursos associados à página. Isso inclui os arquivos HTML, os arquivos CSS, os arquivos JavaScript, fontes e imagens. 7. Hora 2 - adicionar e esde elementos simples: Em seguida, adicionaremos algum conteúdo básico à página. Vá para a guia do estúdio na coluna da esquerda e procure o título. Clique e arraste a erin para a tela. Você verá que o título aparece na tela e também no painel de visão geral na parte inferior da coluna esquerda. Repita as últimas etapas para adicionar um parágrafo abaixo do título. Selecione um parágrafo. Vários ícones aparecem acima do parágrafo. Mova para mover o parágrafo para outro local. Selecione pai. O pai de um elemento é elemento dentro do qual ele está contido. Você pode encontrá-lo facilmente no painel de visão geral. Neste caso, o elemento corpo é aparente do parágrafo e o elemento HTML é aparente da parte em que modifica o texto no parágrafo. Duplicar, faz uma cópia do elemento selecionado. Hyde torna o elemento selecionado invisível e excluir, remove os elementos selecionados. Vamos editar o parágrafo. Você também pode fazer isso clicando duas vezes no elemento em Canvas. Vamos digitar o seguinte texto. Uma barra de formatação de texto simples é exibida. E vamos fazer o mesmo com a dor de cabeça. Quando você seleciona o título, você percebe uma opção extra que podemos usar para definir o nível do cabeçalho. Vamos mantê-lo em um por enquanto, e vamos mudar o texto para ser bem-vindo. Agora que sabemos como adicionar alguns elementos básicos, Vamos também aprender a fazer algum componente elétrico formatação básica e ir para o painel de aparência. Vemos o seguinte. Na parte superior do painel, vemos o elemento atualmente selecionado em azul, bem como seus pais. Abaixo disso, temos um menu suspenso com o atributo de estilo de opção. atributo Style nos permite formatar o bloco selecionado no momento. Abaixo disso, temos todos os tipos de opções de formatação categorizadas sob vários títulos, incluindo layout, fonte, etc. Você pode clicar nos triângulos para abrir ou recolher as categorias. Então, primeiro de tudo, selecionamos o parágrafo e certifique-se de que o atributo de estilo está selecionado na lista suspensa na cor da fonte, podemos definir a cor do texto. Eu fui dito cor da minha fonte para azul. Você pode escolher qualquer cor que você quiser. Em seguida, definiremos a cor de fundo da festa. Selecione um corpo no painel de visão geral. Sob a cor BG de fundo. Clique no quadrado branco para selecionar uma cor não padrão. Vou definir a cor de fundo do meu plano de fundo também. Distintivo de luz Há muitas outras coisas que podemos formatar aqui. A maioria dessas coisas são auto-evidentes e aqueles que não são tão evidentes, você pode facilmente encontrar informações sobre eles pesquisando-os no Google. Neste curso, vamos cobrir muitas dessas opções, mas nenhuma, todas elas. Como você sabe, o site que fizemos acabará por ser explorado para arquivos HTML e CSS. Esses arquivos podem ser inspecionados com bastante facilidade nos estúdios Bootstrap. Na parte inferior da janela, você verá um painel contendo duas abas, HTML e estilos. Clique e arraste a parte superior da borda do Panopto, puxe-a para cima. Na guia HTML, você verá o código HTML do documento. Clique nos triângulos para abrir e recolher elementos diferentes. Não é necessário entender muito aqui, mas espero que você reconheça pelo menos algumas das tags. Ao adicionar novos componentes à tela, o código HTML será atualizado automaticamente. Abaixo do painel HTML, há um painel de atributos aqui você pode adicionar um inspecionar as classes ID e outros atributos. A guia Estilos mostra toda a formatação relevante para o elemento selecionado. Selecionando o parágrafo, você verá que o elemento herda algum estilo do pai. E também a margem foi definida pelo framework Bootstrap. Nós também vemos onde temos colorido a fonte azul. Então, uma coisa boa sobre trabalhar dessa maneira é que é super fácil aprender mais sobre HTML e CSS. Então, se você está em um humor curioso, basta arrastar e soltar algum inflexível, entrar na sua página e ver como isso afeta o código. Então eu acho que isso é suficiente para um vídeo. No próximo vídeo, aprenderemos mais sobre margens e preenchimento. Vejo você então, tchau. 8. Hora 2 - marcas e preenchimento: Olá a todos. Neste vídeo vamos aprender sobre margens e preenchimento. Margens e preenchimento, nossas propriedades básicas HTML traçado CSS, que podemos usar para modificar o layout dos elementos e seu conteúdo. Cada elemento ocupa uma certa quantidade de espaço em nossa página. Para visualizar quanto espaço podemos facilmente adicionar uma borda e uma cor de fundo para cada elemento. Vamos fazer isso para o parágrafo, primeiro parágrafo eleito, na tela ou no painel de visão geral, na coluna do lado esquerdo. No painel de aparência sob o plano de fundo, podemos escolher uma cor de fundo. Eu escolheria verde. Próximo na fronteira. Você pode definir o estilo da borda, a cor, fazê-lo, etc. Vou definir o estilo de borda para uma linha sólida e foi na cor para azul. Como resultado, vemos que a borda e a cor do campo mudaram. Vemos que a largura do elemento ocupa toda a página e a altura do elemento é basicamente tão alta quanto o seu conteúdo. O esquema aqui em cima dá uma rápida visão geral das margens atuais e do preenchimento. A largura está atualmente definida para a mesma largura de uma página. O valor padrão da altura depende do tamanho da fonte e quantas linhas de textos ou R. E aqui temos margem e preenchimento. Então, qual é a diferença entre margem e preenchimento? Margem especifica a distância externa. Em outras palavras, até que ponto o elemento é afastado de outros elementos. Vemos que o parágrafo é empurrado para dentro e para baixo em 10 pixels, o tamanho do elemento precisa diminuir para fornecer mais espaço para as margens. O preenchimento, por outro lado, é a distância interna. Ele especifica a distância entre a borda e o conteúdo. Como você pode ver, o texto é empurrado para a direita e a altura do elemento aumenta para fornecer espaço suficiente para o preenchimento. Se você quiser definir margens e preenchimento específicos para as bordas superior, inferior, esquerda e direita. Você pode clicar na seta aqui e definir os valores aqui. Aliás, se você estiver interessado em definir a largura máxima ou mínima e altura, você pode clicar nas setas aqui. By the way, uma coisa útil em CSS é que você pode definir a margem para auto. As margens esquerda e direita serão automaticamente definidas para centralizar o elemento no meio da página. Neste exemplo, eu defino a margem para 10 pixels barra de espaço auto. Isso significa que as margens verticais nas margens superior e inferior, em outras palavras, são definidas como 10 pixels. Por que as margens esquerda e direita são definidas automaticamente para se certificar de que o elemento está centralizado no meio da página. Então é isso por enquanto. Obrigado por assistir. No próximo vídeo, vamos explorar como adicionar componente mais complexo, a barra de navegação. Vejo você lá. Tchau-tchau. 9. Hora 3- adicionar a barra: Até agora temos trabalhado com elementos muito simples. Em seguida, é um elemento mais complexo, a barra de navegação. Vamos adicionar uma barra de navegação básica. Vamos adicionar uma lista suspensa à barra de navegação, e estaremos explorando as opções básicas da barra de navegação. Em seguida, no próximo vídeo, vamos adicionar várias páginas a um projeto e vinculá-los na barra de navegação. Nós também estamos indo para copiar a barra de navegação para as outras páginas e nós estamos indo para testar a página usando a visualização. Então, vamos começar a adicionar a barra de navegação no painel Componentes. Procure por navbar. Clique e arraste o componente para o topo da tela ou para o painel de visão geral. A barra de navegação é significativamente mais complexa do que a que usamos até agora. Olhando no painel de visão geral, vemos que a barra de navegação contém a marca navbar. Vou nomear o meu. Pausar página. A alternância da barra de navegação é para o ícone Menu. Quando a largura da página é pequena o suficiente, a barra de navegação irá mostrar o ícone de menu em vez dos itens de navegação. O elemento navbar-collapse contém um ar, que por sua vez contém os itens de navegação. Cada item de navegação, por sua vez, contém um link. Podemos facilmente adicionar em mais itens nav por duplicação e podemos facilmente removê-los, excluindo-os. Você verá na barra de formatação que você pode definir esses itens estreitos como ativos ou inativos. Por enquanto, para evitar confusão, vamos desativar todos eles. No meu caso, eu vou adicionar elementos de navegação livre e eu vou configurá-los para galeria de casa e sobre mim. Às vezes, é útil adicionar lista suspensa à barra de navegação. Existem algumas maneiras de fazer isso. Uma maneira é adicioná-lo a partir da coluna do componente. Vá para o painel Componentes e pesquise o menu suspenso. Clique e arraste o componente para o painel de visão geral, certificando-se de que ele está colocado entre os dois itens de navegação. O componente suspenso contém um link e um menu. E o menu contém três itens de menu. Vamos editar o texto para o menu suspenso e os itens de menu. Como exemplo, adicionarei os downloads de texto, software e recursos. E eu apagaria o terceiro item do menu. A barra de navegação vem com algumas opções específicas. Vamos dar uma olhada. A parte superior do painel. Temos as opções específicas para a barra de navegação. Podemos definir o fundo e a cor do texto. Podemos mantê-lo por padrão, ou temos uma escolha de muitas cores diferentes do tema. Nós também pode definir a posição, incluindo padrão, fixo no topo, fixar a parte inferior e parte superior pegajosa. Apetece-me vender o meu top muito pegajoso. Fluid significa que a largura do conteúdo da barra de navegação mudará gradualmente à medida que a largura da janela muda. Se o fluido for desativado, a largura do conteúdo também mudará dependendo da largura da janela. Mas em passos discretos. Com expandido, podemos definir quando preferimos ver o ícone de menu ou os itens de navegação. Neste caso, ele mostrará os itens de navegação para janelas de tamanho médio e acima. E mostraremos o ícone de menu para tamanhos de tela menores que médios. Finalmente, o estado ativo inteligente determina se a barra de navegação mostra qual página está ativa no momento. Em outras palavras, o link do item da barra de navegação para a página atual será definido como ativo. Com os setters restantes inativos. Vou pôr o meu braço desta forma. O usuário será capaz de ver rapidamente qual página usa atualmente visualizando. Então, essa foi uma visão geral rápida deles barra de navegação. No próximo vídeo, vamos adicionar mais algumas páginas e vamos vinculá-las. Nós também estamos indo para copiar este componente barra de navegação para as outras páginas de uma forma que quando nós alterar um deles ou os itens barra de navegação vai mudar. Vejo vocês no próximo vídeo. Tchau por agora. 10. Hora 3 - vinculando outras páginas e testes: Neste vídeo, vamos pegar os itens de link barra de navegação que criamos no vídeo anterior. E nós vamos realmente ligá-los. Mas antes de fazermos isso, vamos primeiro fazer as novas páginas. Você verá no canto superior direito que estamos trabalhando em uma página chamada index.html. Index.html é o que chamamos de página inicial. Clique na seta ao lado de index.html e clique em nova página, uma nova página chamada HTML ponto sem título aparece. Vá para o painel de design na coluna inferior direita e encontre a página da Web sob o título da página. Clique com o botão direito ou pressione F2 para renomear o arquivo. Vou renomear meu para sobre mim, esse HTML. Vou repetir o processo para criar uma série de novas páginas web. Um para cada item da barra de navegação. Vou criar galeria que HTML. Baixar software que HTML, e baixar recursos que HTML. Em seguida, vamos voltar para index.html. Selecione o link em um dos itens da barra de navegação e vá para a guia Opções na coluna do lado direito. Sob as opções de link título, podemos definir o URL. Url é outro termo para link. Especificamente, é abreviação de link universal de recursos. Você pode adicionar qualquer endereço web aqui, incluindo sites externos como o site de seus irmãos ou irmãs ou o site de parceiros de negócios ou qualquer outra coisa. Neste caso, queremos escolher a partir de páginas web internas. Nós os escolhemos clicando em nosso triângulo aqui, e então podemos escolhê-los nesta lista suspensa. Vamos adicionar um link para cada um dos itens da barra de navegação. Em seguida, vamos copiar esta barra de navegação para o topo de cada página do nosso site. Para fazer isso, vá para o painel de visão geral e selecione um componente Barra de navegação, clique com o botão direito do mouse e escolha Copiar e colar. Copiar. Em seguida, vá para cada página uma a uma, mouse em uma tela e escolha Copiar e colar, Colar vinculado. Desta forma, se mais tarde quisermos fazer uma alteração na barra de navegação, podemos fazer a alteração para apenas uma das cópias e ela será atualizada em todas elas. Finalmente, gostaríamos de testar para ter certeza de que não cometemos nenhum erro. Ou adicionando os links. Afinal, todos cometem erros. Então é por isso que o teste é uma parte muito importante de um desenvolvimento web. A maneira mais simples de testar esses links agora é criar uma visualização. No canto superior direito, clique no botão de visualização, uma janela aparece, clique em Alternar para ativar a visualização. Clique em Abrir no navegador para visualizá-lo. E isso é tudo por enquanto. Obrigado por assistir. No próximo vídeo, vamos aprender a personalizar o formato da barra de navegação. 11. Hora 4 - Carrossel: Olá a todos e bem-vindos ao próximo capítulo. Neste capítulo, vamos adicionar quatro componentes avançados para o nosso site. Esses componentes são carrossel, galeria, Google Map e lista de artigos. Então, neste vídeo, vamos começar com o carrossel. Carrossel é essencialmente uma apresentação de slides que pode ser usada para percorrer uma série de fotos, slides ou infográficos. Adicionar um carrossel no Bootstrap Studio é uma questão simples. Finalmente, carrossel entre os componentes e arraste-o para o painel de visão geral. O carrossel consiste em slides e controles. Como de costume, você pode facilmente adicionar e remover esses itens duplicando ou excluindo. Os controles incluem os botões seguinte e anterior, bem como o indicador para ilustrar qual imagem está sendo exibida no momento. Gostaríamos de adicionar imagens a este carrossel, mas primeiro precisamos importá-las. Para demonstrar que vou escolher algumas fotos de Paxos e vou importá-las para o estúdio Bootstrap clicando e arrastando os arquivos para o painel de design. Eles aparecem sob as imagens de cabeçalho. Em seguida, selecione a imagem em um dos slides e clique duas vezes. É mais fácil usar o painel de visão geral para isso. Uma janela aparece com uma lista de imagens importadas. Selecione a imagem desejada e pressione, Ok, repita as etapas anteriores para adicionar as outras imagens ao carrossel expandir automaticamente para ocupar toda a largura da página. Para alterar isso, no painel de aparência, defina as margens esquerda e direita para 50 pixels. O cursor vem com algumas opções. Podemos modificar essas opções usando o painel de opções. Aqui podemos definir todos os tipos de opções como o intervalo, pausa ao passar o mouse, tipo de transição, etc. E isso é realmente tudo o que há para ele. Em seguida, vamos aprender sobre a galeria. 12. Hora 4 - galeria: Uma galeria é uma maneira útil de mostrar seu portfólio. Consiste em uma grade de imagens que o usuário pode clicar para vê-lo em uma visão maior. Siga estes passos simples para adicionar uma galeria à sua página Web. Vamos adicionar um componente de galeria de farol à página. Podemos editar todo o texto da maneira usual. Olhando para o painel de visão geral, vemos que a galeria é bloco, que contém um recipiente. O recipiente contém uma div e uma linha. Uma div é abreviação de divisão, e pode ser usada para agrupar diferentes elementos juntos. Um contêiner é simplesmente uma div com o atributo de classe contêiner. Vamos aprender mais sobre a classe de contêiner no futuro. Nós também temos uma linha que contém um número de colunas. Linhas e colunas são bastante úteis para criar grades responsivas como esta, vamos aprender sobre como linhas e colunas funcionam em um capítulo futuro. Para alterar uma das imagens, basta clicar duas vezes sobre ela e selecionar a imagem. Certifique-se de ter importado a imagem que deseja importar primeiro, basta clicar e arrastar a imagem do seu gerenciador de arquivos para o painel de design no bootstrap studio. Vamos adicionar uma dica de ferramenta para cada imagem. Selecione uma imagem, vá para o painel Opções e vá para dicas de ferramentas. Habilitar dicas de ferramentas. Finalmente, vamos adicionar uma animação. Vá para o painel Animação na coluna superior direita. Em gatilhos, selecione o cursor do mouse. Desta forma, a animação será acionada sempre que o usuário passar o mouse sobre ele, você pode selecionar o tipo de animação para. Por exemplo, vamos selecionar swing. Essa é muito divertida. Você pode obter uma visualização da animação usando o botão Reproduzir e você pode testá-la na visualização. Então, como você pode ver, adicionar uma galeria no estúdio Bootstrap é super fácil. Em seguida, vamos adicionar uma lista de artigos. 13. Hora 4 - mapas: Então, bem-vindo de volta. Neste vídeo, vamos explorar um componente mais avançado que podemos arrastar e soltar em nosso site usando o Bootstrap studio. Vamos explorar o Google Maps. Isso é super útil quando estamos tentando ajudar os clientes a nos encontrar. Vamos começar simplesmente arrastando e soltando o componente Map em nossa tela. Vemos que antes de podermos ativar este componente, precisamos definir a chave API. Uma chave de API é simplesmente um número de identificação. O Google Maps usa esse número de identificação apenas para rastrear a frequência com que você está usando o serviço deles. Com uma chave API gratuita, seu projeto pode carregar 25 mil mapas por dia. Se você precisa de mais do que isso, então você vai ter que pagar. Mas para 99 por cento das pessoas normais, isso é suficiente, certo? Criar uma chave é bastante fácil. Basta certificar-se de que você tem o mapa selecionado e, em seguida, qualquer painel de opções, clique em Criar chave API. Somos redirecionados para o Google Cloud Platform. Você precisa fazer login com sua conta do Google se você ainda não estiver conectado como íon, precisamos criar ou selecionar um projeto primeiro. Isso é simplesmente para que o Google saiba qual projeto está tentando acessar o Google Maps. Uma vez que eu tenho apenas uma chave, é meio irrelevante em qual produto eu vou armazená-la. Na verdade, não tenho projetos sérios em execução no Google Cloud Platform, então vou escolher um aleatoriamente. Podemos definir o nome da chave aqui e podemos adicionar alguma restrição. Há sempre um pequeno risco de alguém pegar o código de série da sua chave e depois usar todas as suas cargas de mapa. Portanto, é melhor restringi-lo ao seu site. Vou usar essa chave para demonstrar o Google Maps, mas depois disso, vou excluí-la imediatamente. Então, para mim, eu posso apenas manter a chave como irrestrita. Só me faça um favor e me lembre de apagá-lo mais tarde. Obrigado. Ok, seguindo em frente. Vamos clicar em Criar. E uma vez que o fazemos, ele gera os detalhes da nossa chave. Clique em Copiar aqui para copiar o número de série de uma chave e colá-la neste campo. E como você pode ver, nós automaticamente recebemos uma atualização ao vivo em nosso Canvas. Atualmente está definido para marcas de Paris, mas eu vou vendê-lo para a minha localização real, que é Timbuktu, Mali. Podemos alterar o tipo de mapa aqui, por exemplo, roteiro ou satélite. Podemos definir a largura e o termo de altura aqui. Podemos definir a alavanca de zoom padrão aqui. Neste momento, não tenho um endereço exacto colocado no mapa. Na maioria dos lugares, o Google Maps suporta facilmente a adição de endereços exatos, mas em lugares como Timbuktu, nem sempre funciona. Ou, por exemplo, se você estiver hospedando um evento no meio de um campo, você também não poderá inserir seu endereço exato. É melhor colocar as coordenadas. Você pode facilmente procurar as coordenadas no Google Maps e copiá-los para o bootstrap studio. E agora temos este pequeno marcador vermelho com a minha localização exacta. Bem compreendido. A propósito, eu não tenho nenhum vivo em Timbuktu. Certo, vamos arrumar um pouco. Parece muito bom. Potencialmente, ele pode parecer bastante profissional em seu site. Mas quanto a mim, vou removê-lo porque não tenho clientes que precisem encontrar o meu endereço. Então eu não devo esquecer de excluir minha chave API. Obrigado por me lembrar. Vou voltar a iniciar sessão na minha nuvem de consola. E eu vou clicar neste botão para excluí-lo. Então é isso de mim, por enquanto. Vejo você no próximo vídeo. 14. Hora 4 - lista de artigos: Uma lista de artigos é uma ótima maneira de direcionar os surfistas para conteúdo mais específico em seu site. Ele combina miniaturas, descrições e links em uma grade responsiva. Como de costume, basta encontrar a lista de artigos no painel Componentes e arrastá-la e soltá-la na página ou no painel de visão geral. Assim como com a galeria, temos um layout flexível em que a grade de imagens reorganiza dependendo da largura das páginas. Mas neste caso, também temos uma descrição e um link. Olhando para o painel de visão geral, vemos que a lista de artigos consiste em uma div e uma linha. A div contém o título e a introdução. A linha contém colunas. Cada coluna contém um link com uma imagem, um traçado de cabeçalho, parágrafo e um link com um ícone. Para alterar a imagem, basta clicar duas vezes na imagem, selecionar a imagem desejada, mas certifique-se de que a imagem foi importada para o bootstrap Studio primeiro. Vamos editar este texto. E podemos definir os links de URL selecionando o link e indo para o painel Opções. Finalmente, vamos mudar esses ícones. Basta clicar duas vezes no ícone. Vemos que todos os tipos de ícones estão disponíveis em diferentes categorias. Vou definir os ícones pré procurando por máscara, avião e coração. Então isso é tudo por este capítulo. Espero que este capítulo tenha demonstrado a você como é fácil adicionar alguns componentes bastante avançados ao seu site. No próximo capítulo, vamos aprender um pouco mais sobre como eles funcionam. Começando com linhas e colunas explicadas. Se você tem uma compreensão aproximada de como eles funcionam, você poderá facilmente personalizar esses componentes e até mesmo criar componentes próprios. 15. Hora 5 - carreiras e colunas explicados: A maneira padrão no Bootstrap de criar uma grade responsiva é usar linhas e colunas. A grade está definida para ser responsiva porque o layout depende da largura da tela antes de começar, uma explicação líder seria bastante útil aqui. Os termos linha e coluna são um pouco enganosos neste caso porque sugere que o número de colunas na grade é estático e as linhas e colunas são iguais e equivalentes. Na verdade, este não é o caso. E pode ser uma vantagem, confuso para cor-de-rosa até as coisas em termos de linhas e coluna. Na verdade, você pode pensar em uma linha mais como uma caixa. E você pode pensar em uma coluna mais como um item que está organizado dentro dessa caixa. Então uma linha é como uma caixa contendo um número de itens. Cada item tem uma certa largura e prefere ser organizado horizontalmente da esquerda para a direita. Enquanto houver espaço suficiente, todos esses itens serão organizados em uma única linha. Se não houver espaço suficiente, quaisquer itens posteriores serão despejados para a próxima linha. Então, por exemplo, se você tiver uma caixa contendo um item que tem uma largura de 25% da página, ela caberia facilmente. Na verdade, você poderia caber quatro desses itens e todos eles seriam dispostos em uma única linha. Mas se fôssemos adicionar um quinto item, não haveria espaço suficiente na linha, modo que esse item precisaria ser bombeado para a próxima linha. Na estrutura Bootstrap que o desenvolvedor pode escolher a largura de cada item dependendo da largura da tela. Assim, por exemplo, o desenvolvedor pode definir a largura de cada coluna para 100% para telas pequenas, para 33% para telas de tamanho médio e para 25% para gritos grandes e extra grandes. Isso significa que apenas um caberia prolina em telas pequenas. Itens gratuitos caberiam lado a lado em verdes de tamanho médio. E quatro cuspiam lado a lado em telas extra-grandes. Em seguida, vamos criar um exemplo simples para tornar a explicação um pouco mais intuitiva e um pouco menos abstrata. Neste exemplo, vamos usar linhas e colunas para criar uma grade responsiva simples na página sobre mim. Primeiro, vamos para a página e arraste uma linha para a tela. Em seguida, vamos adicionar três colunas à regra. Podemos ver que as três colunas estão dispostas um ao lado do outro. Quando esperamos que o HTML gerado, vemos que as linhas e colunas são divs simples, mas com a linha de atributos de classe e col adicionado. Selecione a primeira coluna em Opções, você pode definir a largura da coluna. Definindo a largura como um, define a largura como 1 12 da largura disponível. Isso deixa mais espaço para as outras duas colunas. E eles vão se expandir. Definindo a largura como 12, define a largura para 100% do disponível. Com. Isso empurra as outras duas colunas para baixo. Definir a largura para seis define a largura disponível para 50%. Isso deixa muito menos para as outras duas colunas. Aliás, é bastante interessante ver como alterar a largura da coluna afeta o código HTML. Em seguida, vamos definir a largura para diferentes tamanhos de tela. Primeiro, defina a largura da coluna como nenhuma. Quando expandimos essas opções, vemos que podemos definir a largura da coluna para diferentes tamanhos de tela. Para tamanhos de tela pequenos, Vamos definir a largura de cada coluna para 12. Isso significa que cada coluna ocupará 100% do espaço disponível. Telas de tamanho médio. Gostaríamos de organizar as duas primeiras colunas lado a lado. E gostaríamos de empurrar a terceira coluna para baixo. Então vamos definir a largura para 66 e 12 respectivamente. E, finalmente, para telas grandes e extra grandes, gostaríamos que as colunas pré dispostas um ao lado do outro. Mas gostaríamos que a largura da terceira coluna fosse maior do que a largura das duas primeiras. Então vamos definir a largura para Bree, Bree e seis respectivamente. Então agora temos uma grade responsiva básica que tem uma camada diferente dependendo do dispositivo que você está usando. Em seguida, vamos adicionar algum conteúdo e estilo. Vamos começar adicionando um cabeçalho e um parágrafo a cada coluna. Em seguida, vamos adicionar uma borda a cada coluna. Você pode manter pressionado o botão Control para selecionar vários elementos ao mesmo tempo. Como podem ver, as colunas estão tão próximas que se tocam. Poderíamos adicionar algum espaço entre eles aumentando a margem, mas isso causa um problema. O espaço extra ocupado pelas margens empurra a segunda coluna para a próxima linha. E isso estraga a camada que pretendíamos. Uma solução melhor seria agrupar o conteúdo da coluna em uma div e adicionar uma borda à div em vez disso. Desta forma, podemos facilmente alterar a margem sem nos preocupar em estragar o layout. Gostaríamos também de adicionar algum espaço entre as bordas da página e o conteúdo das colunas. Uma maneira simples de conseguir isso é usando um contêiner. Um recipiente é um elemento muito útil. É um elemento div simples com propriedades especiais. O contêiner está sempre centralizado no meio da página. Vamos arrastar e soltar um recipiente no corpo. E, em seguida, simplesmente arraste e solte a linha no contêiner. Finalmente, vamos ajustar cada coluna para adicionar os toques finais. Primeiro, vou adicionar um pouco de preenchimento a cada div. E a nossa configuração de um raio limite de 20 pixels. Afinal, acho que vou remover a borda desses divs e mudar a cor de fundo. Em vez disso. Vou adicionar uma imagem de perfil à primeira coluna em vez do texto. Vou editar o texto e as colunas. Você pode pressionar Shift Enter para adicionar uma nova linha dentro de um elemento de parágrafo. Finalmente, vou definir a altura de cada div manualmente para garantir que a altura permaneça a mesma para cada coluna. E é assim que fazer um básico responsivo criado usando linhas e colunas no Bootstrap. Em seguida, vou fazer outro exemplo em que eu criar um rodapé como este. 16. de 5 — linhas e colunas (criação de votos): Como um segundo exemplo, vamos usar linhas e colunas para criar um rodapé simples. O rodapé conterá duas colunas, que serão sempre organizadas lado a lado. A segunda coluna conterá uma grade responsiva própria. Ele será organizado verticalmente se a largura da página for pequena o suficiente e os ícones serão organizados lado a lado se a largura da página for larga o suficiente. Primeiro adicione os seguintes itens. Adicione um rodapé. Adicione um contêiner dentro do rodapé e uma linha dentro do contêiner. E adicionar duas colunas dentro de uma linha de elemento rodapé é apenas um rótulo. Poderíamos deixá-lo de fora e usar um div em vez disso, mas mantê-lo simplesmente torna o código HTML mais fácil de ler. Já vimos o contêiner antes. Adiciona automaticamente margens apropriadas ao flutter. Ao lado da primeira coluna, vamos adicionar dois ícones e dois parágrafos. Nabr clique no primeiro ícone e alterá-lo para o mapa, que podemos encontrar em Font Awesome Five. Clique duas vezes no segundo ícone e alterá-lo para masculino, que podemos encontrá-los itens CSS. Modifique o texto dos parágrafos. By the way, você pode pressionar Shift Enter para ir para uma nova linha dentro do mesmo parágrafo. Agora vamos adicionar algum conteúdo à segunda coluna. Adicione uma linha e uma coluna. Adicione um link para a coluna. Solte um ícone, exclua o texto no link. Duplicar a coluna duas vezes. Podemos mudar o ícone para alguns ícones de mídia social, como Twitter, Snapchat ou o que quiser. Eu mudaria o meu para YouTube, Facebook e LinkedIn. Você pode definir o URL de cada link no painel Opções. Estes ícones são um pouco no lado pequeno. Podemos ampliá-los aumentando o tamanho da fonte. Em seguida, vamos definir a largura das colunas. Quero empurrar os ícones das redes sociais um pouco para a direita. Então eu vou definir a largura da primeira coluna 29 para garantir que os ícones de mídia social permaneçam no lado direito da página e nunca sejam empurrados para baixo para a próxima linha. Eu iria definir a largura da segunda coluna 2. Queremos empilhar os ícones de mídia social verticalmente para telas pequenas. E queremos organizá-los lado a lado para telas médias e maiores. Assim, para todas as três colunas, defina a parte d com 212. Em seguida, defina a largura MD 24. Finalmente, notamos que os ícones no lado direito e para cima um pouco mais baixo do que o texto no lado esquerdo. Podemos corrigir isso selecionando a primeira linha e definindo o alinhamento y para centralizar no painel Opções. E assim fizemos uma grade responsiva agradável para usar como rodapé. É uma questão simples copiá-lo para as outras páginas. Lembre-se de usar colar vinculado para que quaisquer alterações em qualquer uma das cópias sejam aplicadas automaticamente às outras. E isso é tudo para este capítulo. No próximo capítulo, vamos criar algum estilo personalizado para formatar este rodapé, bem como outros elementos na página. Vejo você no próximo capítulo. Tchau-tchau. 17. Hora 6 - importando temas: Até agora temos usado as cores padrão do Bootstrap, fontes, etc. E temos mudado manualmente o formato dos elementos individuais. No entanto, é possível alterar a aparência geral e o estilo do site como um todo sem a necessidade de alterar manualmente cada elemento. Podemos conseguir isso alterando o tema ou podemos modificar o estilo usando CSS. Os temas são estilos, layouts e formatos predefinidos de uma página. Usar temas pré-existentes pode ser uma maneira rápida de mudar a aparência geral do site. Para demonstrar, primeiro a nossa barra de navegação selecionada. No painel de opções, vemos que temos várias opções diferentes para a cor de fundo. Vou configurá-lo para primário. Em seguida, vou selecionar o parágrafo e ir para o fundo da aparência. Atualmente tenho um verde não-padrão selecionado. Clique no quadrado colorido ao lado da caixa de entrada e escolha o design da guia. Passar o mouse sobre essas cores dá o nome da variável. Vou escolher o verde com o sucesso nome da variável. Agora que nós vinculamos a cor da barra de navegação e a cor do parágrafo para o tema que muda o tema. Clique em configurações. E em temas Bootstrap, você pode escolher qualquer número de feixes da lista. Vou escolher sombrio e salvar. Como você pode ver, a barra de navegação e um parágrafo, bem como a cor do texto mudaram de acordo com o novo tema. Observe que a cor do plano de fundo da página foi definida manualmente e não está vinculada a uma cor de tema. A menos que redefinamos a cor do fundo, ele não mudará, não importa o que aconteça. Você escolhe. 18. Hora 6 - estilos personalizados: Como vimos, é uma questão simples definir as cores da fonte, margens, etc, de cada elemento usando o painel de aparência. Mas isso significa que se queremos mudar a aparência geral e estilo, teríamos que voltar e disse que a formatação para cada item. Isso pode, obviamente, ser muito casual e demorado. Uma maneira melhor seria criar um estilo CSS e vincular o estilo aos elementos relevantes usando atributos de classe. A seguir, vamos criar um blog estilo CSS que define a cor de fundo para patch. Em seguida, aplicaremos esse estilo a todos os elementos relevantes. Vá para index.html, selecione o corpo e puxe o inspetor de código. No painel CSS USE uma série de blocos CSS. O primeiro bloco é um estilo de ponto elemento. Este show para formatação direta temos feito usando o painel de aparência. Alguns dos blocos têm um cadeado mostrando que eles não podem ser editados. No painel HTML. Puxe a guia de atributos, adicione uma nova classe chamada item de plano de fundo. Esta classe vamos identificar todos os itens onde queremos definir a cor de fundo. Vamos abrir o arquivo styles.css. Vá para o painel de design, clique duas vezes em styles.css para abrir o arquivo, uma guia chamada styles.css aparece no painel Estilos. Clique em Criar, um novo bloco CSS aparece. Vou adicionar a mesma cor de fundo aqui. Então agora a discagem direta que aplicamos usando o painel de aparência tornou-se irrelevante. Este é o código que podemos ver um elemento desse estilo. Podemos removê-lo clicando nos três pontos no canto superior direito do bloco e selecione Limpar. Em seguida, vá para a página sobre mim que HTML. Selecione o corpo e adicione o elemento de fundo do texto aos nomes das classes. Como você pode ver, a cor de fundo é aplicada a esta página 2. Vamos adicionar o mesmo nome de classe aos corpos de todas as outras páginas. Quando o adicionamos à página, baixar recursos ponto HTML, vemos um pequeno problema. Vemos que uma grande parte da página permanece branca. Isso ocorre porque a lista de artigos tem um fundo branco por padrão. Podemos resolver isso selecionando o bloco e, em seguida, adicionando o elemento de fundo classe para este animal também. Como você pode ver neste caso, o bloco tem mais de uma classe. Então, em resumo, neste caso, eu simplesmente criei um bloco CSS chamado item de fundo, que simplesmente definir a cor de fundo ou animais que contêm este atributo de item de fundo. Temos a cor de fundo definida. Se eu quiser mudar a cor do fundo, tudo o que eu preciso fazer é mudar a cor aqui e ela será modificada para todos os elementos relevantes. Como uma multa de pagamento. Gostaria apenas de mencionar que mesmo que eu tenha digitado todo o código CSS neste exemplo, não precisamos digitar, mas também podemos usar o painel de aparência. Para fazer isso. Primeiro, certifique-se de que você selecionou um item que contém este atributo. E então você pode selecioná-lo nesta lista suspensa na parte superior do painel de aparência. A partir daí, podemos modificar o bloco CSS de qualquer maneira que acharmos melhor. Então é isso por enquanto. Obrigado por assistir. No próximo vídeo, vamos falar sobre estilo responsivo. Ou seja, vamos criar estilos diferentes para diferentes dispositivos. Em outras palavras. 19. Hora 6 - estilos responsivos: Também podemos adicionar estilo, que depende do tamanho da tela. Por exemplo, podemos aplicar pequenas margens se o site estiver sendo visualizado em um telefone, e grandes margens se o site estiver sendo visualizado em um computador desktop. Conseguimos isso usando uma consulta de mídia. Vamos começar adicionando o estilo padrão. Adicione um atributo de classe chamado rodapé à primeira linha dentro da foto. Verifica se o arquivo styles.css está aberto. Crie um novo bloco clicando em Criar e renomeá-lo para rodapé ponto. Aqui vamos adicionar o estilo padrão. Vamos dar-lhe uma fronteira sólida. Raio de 10 pixels, preenchimento de 20 pixels e margem de cinco pixels. Usando esse padrão, o estilo parece bom para telas médias e grandes, mas em telas menores parece um pouco esmagado. E as nossas maiores telas , estão um pouco espaçadas demais. Então vamos aumentar o preenchimento para as maiores criptas. Primeiro de tudo, duplique o bloco de estilo do rodapé do ponto clicando nos pontos vermelhos e selecionando Duplicar. Em seguida, em um bloco inicial duplicado, adicione uma consulta de mídia clicando nos três pontos e escolha adicionar uma consulta de mídia. O texto adiciona mídia, largura mínima, cem, duzentos pixels aparece. Isso significa aplicar o estilo somente quando a largura da janela tiver pelo menos cento e duzentos pixels de largura. Bootstrap estúdio escolheu uma pessoa, 200 pixels, porque estamos atualmente visualizando a tela em uma pessoa para um 100 pixels. Vamos mudar o bloco de estilo para alterar o preenchimento, a esquerda, o preenchimento, a parte superior do preenchimento direito e a parte inferior do preenchimento. Lembre-se, você também pode fazê-lo usando o painel de aparência, se preferir. Em seguida, vamos remover a borda e diminuir a margem e o preenchimento para telas menores. Duplicar o bloco CSS mais uma vez e modificar a consulta para ler. Adicionar mídia de largura máxima 768. Modifique o estilo duplicado para definir a margem e preenchimento como 0 e remova a borda. E lá temos. Agora temos um rodapé que não tem borda e muito pouco preenchimento quando visto em telas pequenas. E que tem um monte de preenchimento quando visto em telas grandes. Em nosso próximo vídeo, vamos usar variáveis para definir e aplicar uma nova paleta de cores para o nosso site. Vejo-te em breve. Tchau-tchau. 20. Hour 6 — definindo estilos: Quando definimos a cor de fundo, escolhemos diretamente. Se quisermos usar essa cor com mais frequência, é uma boa idéia dar a cor e fácil de lembrar o nome. Neste vídeo, vamos definir um número de cores que usaremos em nosso site. E vamos ligá-los aos vários elementos. Ter as principais cores do nosso site em um só lugar torna mais fácil escolher cores rosa e modificar o design geral do site mais tarde. Primeiro de tudo, verifique se o arquivo styles.css está aberto. Crie um novo bloco clicando em Criar e renomeá-lo para raiz de dois pontos. E este bloco raiz, definimos uma nova cor chamada cor de fundo. Agora que definimos a cor, vamos usá-lo no bloco CSS chamado elementos de fundo ponto. Modifique o código para incluir um var, colchetes abertos, cor de fundo, colchetes fechados. Desta forma, aplicamos a cor que definimos na rota para todos os elementos que contêm o elemento de fundo classe, podemos definir qualquer número de cores desta forma. Então, por exemplo, vamos definir algumas das cores que usaremos em capítulos posteriores. Agora, vamos adicionar as seguintes cores. Tinha a cor do pé, a cor de fundo do cabeçalho, e o rodapé, a cor do pairar do pé da cabeça. Esta vai ser a cor dos elementos de cabeçalho e rodapé. Quando o mouse passa sobre ele. Tinha colocado a cor do texto. A cor do texto do cabeçalho e rodapé tinha a cor do mouse do texto do pé, a cor do texto do cabeçalho. Quando passamos o mouse sobre ele, tinha colocado sombra, esta será a cor do efeito de sombra que vamos usar. Podemos definir esses valores de cor aqui manualmente, ou podemos clicar neste quadrado colorido para escolher a cor. Agora que definimos nossa paleta de cores, Vamos aplicar as novas cores para a barra de navegação e rodapé. Crie um novo bloco de estilo chamado pé de cabeça de ponto. Este bloco conterá nosso estilo personalizado para a barra de navegação e a foto. Defina a cor do plano de fundo para a cor do pé da cabeça, defina a cor do texto para a cor do pé e defina o abrigo de impostos para ler p x dx, sombra do pé da cabeça. Novamente, podemos digitá-lo manualmente ou podemos usar o painel de aparência para adicionar o estilo. Agora que criamos este bloco CSS, podemos vinculá-lo à barra de navegação e ao rodapé adicionando o CSS BlockName no painel de atributos. Você provavelmente notou que a cor do texto na barra de navegação e os ícones e o rodapé ainda têm sua cor padrão. Isso ocorre porque essas cores já foram definidas em outro bloco CSS. Podemos resolver isso substituindo esses blocos CSS. Mas esse é um tópico para o próximo capítulo. Por enquanto, vamos terminar este capítulo fazendo uma pequena limpeza rápida no rodapé. Na verdade, não gosto da aparência desta borda quando está em amarelo. Então vamos removê-lo completamente e vamos substituí-lo por uma sombra. Vamos selecionar o atributo de rodapé no painel de aparência e, em seguida, usar o painel de aparência para fazer as alterações necessárias. Podemos ver as mudanças à medida que acontecem de uma forma séria aqui em baixo. Também precisamos criar um pouco mais de espaço no rodapé. Então vamos selecionar o rodapé e aumentar o preenchimento inferior, bem como o preenchimento superior. Então é isso para este capítulo. Espero que tenha se divertido e te vejo no próximo capítulo. Tchau-tchau. 21. Hora 7 - substituindo estilos: Olá a todos, como vai? Neste vídeo, vamos falar sobre sobreposição. Você, sem dúvida, terá notado que muitos dos blocos de estilo estão bloqueados. Em teoria, é possível editá-los, mas isso não é uma boa idéia. Isso ocorre porque quando o framework Bootstrap é atualizado, você perderá todas as alterações feitas nesses arquivos do Bootstrap. Melhor seria substituí-los. Para substituir-nos aqui diz plug, primeiro precisamos determinar qual bloco CSS substituir. Então, vamos começar substituindo a marca navbar, que determina a formatação desse elemento. Selecionado. E puxe o inspetor HTML e puxe a guia de atributos. Vemos que a marca navbar tem um atributo de classe chamado marca navbar. Passando por esta guia de diodo, temos uma visão geral de todos os blocos CSS que afetam a marca navbar. Estamos procurando aquele que define a cor da fonte. Rolando através, vemos que é este. Não podemos editar este bloco, então precisamos substituí-lo. Clique nos três pontos no canto superior direito e selecione Copiar para styles.css. Uma duplicata aparece no arquivo styles.css. Vamos editar a duplicata. Vamos repetir isso com os elementos restantes. O link ativo tem um ClassName, nav link ativo. Novamente, estamos procurando o bloco CSS que define uma cor. Este é o que gostaríamos de substituir. Impacto para o link ativo, Vamos não só mudou a cor da fonte, mas também vamos alterar a cor do plano de fundo. Também gostaríamos de substituir os links de navegação. Também gostaríamos de substituir o item suspenso. E gostaríamos de alterar a cor de fundo do menu suspenso. Você pode estar se perguntando por que há tantos atributos nesses blocos CSS. Isso ocorre porque não são apenas os atributos mencionados aqui, mas também os atributos dos pais e avós, etc. Então você pode ser tentado a modificar esta linha para torná-la um pouco mais simples. Mas há uma grande chance de que, isso vai estragar o estilo que você aplicou. Isto é por causa do que é chamado de especificidade. É um pouco além do escopo deste curso para ensiná-lo sobre especificidade. Mas se você estiver interessado, você pode conferir algumas leituras extras neste site. Se estiver interessado. Se não, continue me acompanhando. Em seguida, vemos que ainda temos que substituir essa cor azul nos ícones e rodapé. À medida que percorrer os estilos associados a este elemento, vemos que a cor é definida por um bloco CSS chamado a. Em CSS, este é realmente o estilo que é aplicado a todos os links. E o ícone herda esse atributo porque o pai do ícone é um link. Se tivéssemos que substituir este bloco css, ele mudaria a formatação de todos os links na página. É óbvio que não é o que queremos. Então, neste caso, é uma idéia melhor adicionar mais um atributo de classe chamado ícone de pé de cabeça e definir a cor da fonte lá. E vamos adicionar esse atributo a cada um dos ícones. Então, nesta lição, aprendemos a substituir os elementos CSS bloqueados que vêm com o framework Bootstrap. No próximo vídeo, vamos definir o estilo para esses elementos para quando passarmos o mouse sobre eles. E nós também vamos mudar o estilo deste ícone de menu, que parece ser muito teimoso e precisa de atenção especial. 22. Hora 7 — sobrepondo o hover: Ok, a seguir queremos definir o nosso estilo de pairar. Este estilo será aplicado sempre que o mouse passar sobre o item em questão. Definir um estilo de Harvard é exatamente o mesmo que definir um estilo normal. A única coisa é que precisamos adicionar um cursor de dois pontos no final do nome do atributo. Assim, por exemplo, no vídeo anterior, criamos alguns estilos para esses ícones e o rodapé. Vamos copiar este bloco de discagem. E no final do nome do atributo, adicione o cursor duplo do mouse. E para passar o mouse, vamos definir a cor do ícone como branco. Quando olhamos para os outros elementos, como a marca navbar, vemos que o estilo do pairamento já foi definido. Então, para atualizar essas inclinações pairando, precisamos substituir essas caixas CSS, como sabemos a partir do vídeo anterior. Para fazer isso, tudo o que precisamos fazer é copiá-los para o bloco styles.css e atualizá-los com a formatação que precisamos. Finalmente, vemos que este item de menu ainda não é a cor que queremos. Para resolver isso, vamos remover a imagem e substituí-la por um ícone. Quando olhamos para o CSS, vemos que o URL de imagem de fundo SVG, substituir este bloco, copiando-o para styles.css e substituir URL SVG por nenhum para remover a imagem. Em seguida, adicionamos um ícone em seu lugar. Arraste e solte um ícone na extensão. Clique duas vezes no ícone e encontre a barra chamada em Font Awesome 4. Vamos encontrar o bloco certo para substituir e mudar a cor da fonte para amarelo. E, finalmente, vamos aumentar o tamanho do ícone aumentando o tamanho da fonte. Então isso é tudo para estilizar e formatar. Espero que tenha sido interessante para você e espero que tenha se divertido aprendendo sobre isso. No próximo capítulo, vamos seguir em frente com algo completamente diferente. Vamos falar sobre Flexbox. Então, vemo-nos no próximo capítulo. Tchau por agora. Tchau tchau. 23. Hora 8 - Flexbox Explained: Olá a todos e bem-vindos ao próximo capítulo do Bootstrap Studio. Neste capítulo, vamos aprender tudo sobre Flexbox. Flexbox é uma maneira fácil de especificar o espaçamento entre diferentes elementos em uma grade. Neste primeiro vídeo, vamos ter uma explicação rápida. E, em seguida, no próximo vídeo, vamos colocar esse conhecimento em bom uso, elaborando um exemplo no qual distribuímos ícones livres em uma coluna. No terceiro vídeo, usaremos flexbox para garantir que empurramos o rodapé para a parte inferior da página. Então vamos começar. Primeiro de tudo, vamos preparar as coisas. Vamos começar adicionando uma div simples à página. E dentro dessa div, vamos adicionar três parágrafos. E vamos editar o texto para nomeá-los parágrafos 1, 2 e 3. Para ajudar a visualizar as coisas, vamos adicionar uma pequena margem à div. Aumente a altura da div e adicione uma borda. E também, vamos definir o fundo dos parágrafos para vermelho, verde e azul. Vá para Opções. Aqui vemos esse título, Flexbox. E vemos uma série de listas suspensas. Podemos usar essas listas suspensas para definir qualquer uma das propriedades da caixa, que é, neste caso, a div. Ou podemos definir propriedades dos elementos dentro da caixa, que é, neste caso, os três parágrafos. Vamos dar uma olhada em algumas das propriedades da caixa que podemos definir. Então, antes de tudo, certifique-se de que a div esteja selecionada. E encontre a flexbox de cabeçalho no painel Opções. Vamos começar definindo o contêiner flexível para flexionar. Em seguida, vamos definir a direção para a linha. Como você pode ver, os parágrafos agora estão dispostos lado a lado em vez de verticalmente. Também podemos definir a direção para a linha inversa. Então, todas as colunas invertem para alterar a ordem dos parágrafos. Usando a lista suspensa justificar conteúdo, podemos alterar a disposição destes parágrafos dentro de seu recipiente. Podemos usar início e sem centralização para colocar os parágrafos para o início, o fim e o centro da linha. Podemos usar entre, que coloca o primeiro parágrafo no início e o último parágrafo no final. E entre parágrafos igualmente espaçados entre eles. E podemos usar ao redor com espaços ou elementos igualmente. Note que justify também funciona quando definimos a direção para coluna. Mas neste caso, a justificação funciona verticalmente em vez de horizontalmente. Pode ser divertido brincar com estes apenas para ter uma sensação para ele. Também podemos definir o alinhamento. alinhamento funciona da mesma forma que justificar, mas funciona na direção perpendicular à direção que estabelecemos aqui. Por exemplo, se o definirmos para o centro, os parágrafos são enviados para o meio da div. Algumas dessas listas suspensas não se aplicam ao contêiner, mas aplicadas aos elementos dentro do contêiner, os parágrafos neste caso, por exemplo, podemos definir se o elemento deve crescer ou não para preencher o espaço disponível. Essa é uma visão geral rápida da configuração do flexbox. Ainda há mais a aprender sobre o Flexbox. Mas para o bem deste curso, acho que vamos deixar assim por enquanto. Se você está interessado em aprender mais, eu recomendo o seguinte site. Mas para mim, por enquanto, vou me despedir. No próximo vídeo, vamos aplicar o que aprendemos a este exemplo simples no qual usamos flexbox para aplicar um espaçamento consistente entre esses pré ícones em cada coluna. Vejo vocês no próximo vídeo. Tchau por agora. 24. Hora 8 - Exemplo de Flexbox - Arranging Ícones: Olá, todo mundo tem uma chance. Espero que esteja tendo um ótimo dia e seja bem-vindo ao próximo vídeo. Neste vídeo, vamos aplicar o que aprendemos sobre flexbox no vídeo anterior para garantir um espaçamento igual entre esses três ícones em cada uma dessas colunas. Então vamos começar. Vá para a página, baixe o software que HTML, arraste e solte o artigo é para a página entre o cabeçalho e rodapé. Exclua a introdução e exclua dois dos artigos. Arraste e solte e div no artigo restante logo após o parágrafo. Exclua o link que contém o ícone. Arraste e solte um novo link na div. Edite o texto, arraste e solte um novo ícone no link. Vamos definir o tamanho da fonte do link para 32 pixels. E vamos duplicar o link duas vezes. Nossa definir meus ícones para o pinguim Linux, o logotipo do Windows. E ao código. Finalmente, vamos configurar a div selecionada da flexbox e ir para o painel Opções. Defina o contêiner flexível para flexionar, definir, justificar o conteúdo para torno. Agora temos um modelo para o nosso artigo. Podemos facilmente duplicar isso para preencher a lista de artigos. E a seguir podemos editar os detalhes de cada entrada. Então, neste exemplo, usamos flexbox para mostrar como podemos facilmente adicionar um espaçamento responsivo entre esses três ícones para que os ícones sejam distribuídos uniformemente independentemente do tamanho da tela que estamos usando. No próximo exemplo, vamos usar flexbox para empurrar este rodapé até a parte inferior da página, novamente, independentemente do tamanho da janela. Vejo vocês no próximo vídeo. Tchau, por enquanto. 25. Hora 8 - Exemplo de Flexbox — empurre o retorno para a parte inferior da página: Olá a todos e bem-vindos ao próximo vídeo. Você deve ter notado que o rodapé nem sempre atinge a borda inferior da página. Uma maneira fácil de resolver isso é usando flexbox. Em primeiro lugar, vamos definir a altura do elemento do corpo para cem. Cem vh significa, na verdade, 100% da altura vertical disponível. Isso garante que o elemento body é tão grande quanto o espaço disponível em uma página da web. Em seguida, definir as propriedades flexbox do corpo foram disse recipiente flexível para flex irá definir a direção para coluna e estamos definido justificado para entre. E agora temos o rodapé firmemente enviado para a parte inferior da página. Bastante fácil, certo? Vamos aplicar isso aos elementos do corpo das outras páginas também. Às vezes, ele bagunça o layout dos outros elementos na página embora. Por exemplo, e a página de índice, parece um pouco muito direto para fora. Neste caso, podemos colocar o título e um parágrafo em um div juntos para que eles sejam agrupados juntos. E a flexbox os trata como um único elemento. Podemos até agrupá-los junto com a barra de navegação para empurrá-los até o topo da página, logo abaixo da barra de navegação. Então isso é tudo de mim, por enquanto. No próximo vídeo, vamos falar sobre a criação de nossos próprios componentes personalizados. Vejo você então, tchau. 26. Hora 9 — adicionando componentes personalizados à biblioteca: Olá a todos, como vai? Espero que esteja se divertindo. Até agora temos visto uma série de elementos simples e elaborados na biblioteca do estúdio. Mas não precisamos nos limitar aos componentes que podemos encontrar em uma biblioteca. Neste capítulo, vamos aprender tudo sobre como fazer nossos próprios componentes personalizados e encontrar componentes personalizados on-line. Também aprendemos no código HTML personalizado para o site. Mas vamos começar adicionando um de nossos próprios componentes personalizados existentes à biblioteca. Talvez tenhamos feito uma componente de que realmente gostamos e queremos utilizá-la também noutros projectos. A maneira mais fácil de fazer isso é adicionando-o à biblioteca. Como exemplo, vamos pegar o rodapé que criamos e adicionamos à biblioteca. No painel de visão geral, clique com o botão direito do mouse no rodapé e selecione Adicionar à biblioteca. Uma janela aparece. Podemos definir o nome do componente, e também podemos selecionar os recursos que precisam ser incluídos. Bootstrap Studio pode descobrir alguns dos recursos que precisam ser incluídos. Por exemplo, os blocos CSS que estão diretamente vinculados aos elementos no rodapé serão automaticamente incluídos aqui. Também podemos adicionar blocos adicionais e JavaScript que precisa ser vinculado. Neste caso, havia um bloco que não vinculamos diretamente, que é o bloco raiz de dois pontos. É um bloco onde definimos as cores do paladar. Então precisamos coletar este bloco especificamente. Na biblioteca. Podemos encontrar o nosso novo componente no usuário pasta. Vamos testá-lo para ver se funciona em outros projetos. Para criar um novo projeto em branco. E arraste e solte o novo rodapé na página. Funciona muito bem. Nós também podemos ser bons e fazer upload deste componente. Esperemos que seja útil para outras pessoas também. Também podemos encontrar um monte de componentes muito úteis que são os usuários carregaram aqui. Assim, podemos fazer bastante combinando componentes no painel de visão geral. Mas às vezes pode ser útil adicionar nosso próprio código HTML e bootstrap Studio nos permite fazer isso também. Usamos o bloco de código personalizado. O bloco de código personalizado é um bloco muito útil. É simplesmente um bloco vazio no qual você pode digitar ou colar seu próprio código. Isso pode ser muito útil porque muitos sites e plataformas oferecem a oportunidade de gerar código que você pode então incorporar em seu próprio site. Em seguida, vamos servir para o YouTube. Quero encontrar um vídeo que quero incorporar no meu site. Outro vídeo, você minou o botão compartilhar, clique nele, e em seguida clique em incorporar. Uma janela com algum código, aparece, selecione o código e copie-o para a área de transferência. Voltar e Bootstrap Studio, clique duas vezes em um elemento de código personalizado e cole o código no espaço disponível. Infelizmente, o código personalizado não aparece em uma tela. Para testar o resultado, precisamos criar uma visualização. Para tornar as coisas um pouco mais estática. Vamos ao centro do vídeo. Então, como você pode ver, é muito simples incorporar algum código personalizado em nosso site Bootstrap studio. Também podemos adicionar código SVG em linha da mesma maneira. Para aqueles que não sabem, SVG significa Scalable Vector Graphics. E é uma maneira muito boa de incluir gráficos em seu site. Vamos aprender mais sobre isso no próximo vídeo. Então vou ver a célula bipolar. 27. Hora 9 - Inline SVG: Olá a todos, como está indo? Bem-vinda de volta. Neste vídeo, vamos aprender tudo sobre SVG inline. Inline SVG nos dá a capacidade de incorporar gráficos vetoriais diretamente em nosso site. Svg é um exemplo de um formato gráfico. Quando se trata de gráficos, você pode escolher gráficos raster como PNG ou JPEG ou bitmap, por exemplo. Gráficos vetoriais As imagens raster são essencialmente apenas uma grade de pixels e cada pixel tem um valor de cor. Os gráficos vetoriais, por outro lado, são um conjunto de instruções de forma e cor. O tipo mais comum de formato de arquivo gráfico vetorial é chamado SVG. Svg significa Gráficos Vetoriais Escaláveis. De um modo geral, quando se trata de web, é melhor usar gráficos vetoriais em vez de gráficos raster. Isso ocorre porque geralmente, gráficos vetoriais são de tamanho de arquivo menor. Eles são independentes de resolução, então você não precisa se preocupar com o tamanho da tela que você está usando. Além disso, qualquer tipo de texto incluído na imagem será identificado como texto, que significa que pode ser facilmente apanhado pelo motor de busca, por exemplo. E um último benefício do tipo de arquivo SVG é que é razoavelmente fácil, para um ser humano lê-lo. Como HTML. Consiste em elementos e tags e propriedades. Assim, ela pode ser mais ou menos compreendida pelos seres humanos e também pode ser interpretada de forma inequívoca por um computador. Para o propósito deste tutorial, criei um logotipo simples no Inkscape. Inkscape é um software livre e de código aberto que pode ser usado para criar gráficos vetoriais. É uma das minhas peças favoritas de software. E também acontece que eu tenho cursos sobre o Inkscape para os quais você pode encontrar no Udemy Skillshare. Ou você pode encontrar alguns dos meus tutoriais gratuitos no YouTube. Quando se trata de importar imagens SVG, podemos arrastá-las e soltá-las como fazemos com outras imagens. Uma maneira melhor, porém, seria copiar o código SVG em um bloco personalizado. Desta forma, temos acesso direto ao conteúdo da imagem. Para fazer isso, primeiro abrimos o arquivo SVG em um editor de texto simples. Tendo aberto o arquivo SVG, vemos que há muito que entendemos. Quero dizer, não me entenda mal. Há um monte de abracadabra no cabelo. Mas podemos ver à primeira vista bastante, que é claro para qualquer um. Depois de abrir um editor de texto, vamos selecionar todo o texto pressionando Controlar um e copiá-lo para a área de transferência pressionando Control C. Em seguida, voltar para o estúdio bootstraps e colá-lo em um componente de código personalizado como nós aprendeu a fazer em um vídeo anterior. Agora temos este código SVG incorporado em nosso HTML. Isso é chamado de SVG em linha. Infelizmente, o bootstrap studio não pode interpretar esse código ao vivo agora, então precisamos criar uma visualização para ver como ele se parece. Então, uma coisa boa sobre o uso de SVG inline é que o texto está incorporado no site. Por exemplo, quando se trata de Search Engine Optimization, esta é a grande vantagem. E outra grande vantagem é que podemos manualmente fazer edições simples no texto com bastante facilidade. Por exemplo, vamos alterar o texto no logotipo, apenas pesquisado para encontrar um texto e editado. Também é bastante simples mudar a cor de qualquer um dos objetos no logotipo. Só precisamos mudar a propriedade de preenchimento. Podemos até vincular essas cores às cores variáveis, que definimos em um vídeo anterior. Desta forma, se decidirmos mudar o nosso paladar, o logótipo será atualizado. E outro muito legal pagar sobre SVG inline é que podemos até mesmo usar JavaScript para controlar as propriedades dos elementos SVG. No caso de você estar interessado em JavaScript, vamos aprender mais sobre JavaScript em um capítulo futuro. Uma coisa que devemos estar cientes, porém, é que, como este é um código personalizado, não podemos usar o painel de aparência para definir o estilo. Mas há uma maneira rápida de contornar isso. Podemos facilmente definir a classe manualmente e, em seguida, iniciar o estilo. Então isso é tudo por enquanto. Obrigado por assistir. No próximo capítulo, vamos aprender tudo sobre a adição de formulários. E nós vamos aprender sobre como adicionar formulários inteligentes, em que o usuário é capaz de enviar o formulário preenchido diretamente para o nosso endereço de e-mail. Então isso é tudo por enquanto. Obrigado por assistir. Te vejo lá. Tenha um bom dia. Tchau-tchau. 28. Hora 10 - formulários: Olá a todos. Espero que esteja se divertindo. Bem-vindo ao próximo vídeo. Neste vídeo, vamos fazer um formulário simples usando os itens de formulário do bootstrap studio. Então vamos começar. Primeiro, vamos arrastar um contêiner para a página. E vamos arrastar um formulário para dentro do contêiner. Colocamos um título dentro e renomeamos o arenque para a forma de pedido. Vamos começar dando a esta forma alguma formatação básica. Por exemplo, vamos adicionar uma borda e uma sombra para torná-la um pouco mais agradável de olhar. Isso também é usar algumas linhas e colunas para criar um layout simples. E vamos preencher nossas linhas e colunas largura, botões de rádio e rótulos. Então, no final, temos duas colunas com cada uma com quatro botões de rádio. O primeiro é o tamanho e o segundo é a cor. Ok, nós temos uma forma muito, muito básica. Vamos ver se funciona. Iniciando a pré-visualização. Funciona mais ou menos, mas temos um problema. Podemos selecionar qualquer número de botões de rádio que queremos. Normalmente, os botões de opção funcionam de tal forma que, quando você seleciona um, ele automaticamente desmarca outro. Podemos fazer isso no painel Opções dando um nome aos botões de opção. Botões de opção com o mesmo nome pertenceriam ao mesmo grupo. E você só poderá selecionar um dentro de um grupo de cada vez. Então agora temos dois grupos, um para o tamanho e um para a cor. Vamos testá-lo. Sim, muito melhor. Ok, em seguida, vamos adicionar outra linha e duas colunas. E vamos preencher as colunas com um rótulo e uma entrada de e-mail. Também podemos definir a largura relativa 2, 3 e 9. Uma vez que adicionamos uma entrada de e-mail no formulário, só aceitará uma entrada na forma de um endereço de e-mail. Em outras palavras, ele precisa ter esse símbolo de adição. Vamos duplicar a linha. Nesta linha, vamos dar ao usuário uma opção para adicionar um logotipo personalizado. Vamos substituir a entrada de e-mail pelo campo de entrada de arquivo. Agora o usuário tem a opção de anexar um arquivo. Vamos adicionar uma div e fazer essa div na parte inferior. Podemos definir o alinhamento para alinhar, para escrever, para ter certeza de que o botão é pressionado para a direita. E vamos mudar o texto do botão para enviar. Certo, agora temos um botão funcional. Podemos clicar nele, mas não faz nada. Mas podemos clicar nele. Então essa é a coisa principal, certo? E só a brincar, só a brincar. Não, vamos fazer com que quando o usuário clicar neste botão, todos os dados que o usuário preencheu aqui serão enviados para o nosso endereço de e-mail. Vamos usar formas inteligentes para conseguir isso, que é muito fácil, mas não vamos fazer isso agora. Vamos fazer isso no próximo vídeo. Enquanto isso, vamos apenas fazer o formulário parecer um pouco mais agradável limpando apenas um pouco usando o painel de aparência. Então lá temos uma forma básica. Nós demos uma olhada nos botões de rádio e entrada de e-mail e uma entrada de arquivo, mas há mais itens de formulário disponíveis. Basta olhar sob o título do formulário na biblioteca. Também temos uma série de formulários pré-fabricados disponíveis, que você pode encontrar em formulários de interface do usuário. Como mencionei no próximo vídeo, vamos transformar esse formulário em uma forma ativa. Obrigado por assistir, e te vejo no próximo vídeo. 29. Hora 10 - formulários inteligentes: Olá a todos. Como é que está a correr? No vídeo anterior, criamos uma forma melhor como esta, que parece legal, mas não faz nada. Então, neste vídeo vamos usar formulários inteligentes para que o usuário possa preencher este formulário e clicar no botão Enviar. Quando o usuário clicar neste botão de envio, um e-mail com todos os dados será enviado para o nosso endereço de e-mail. No Bootstrap Studio. Na verdade, é bastante simples implementar isso. Então, vamos começar. Primeiro de tudo, vá para o painel de visão geral e selecione um formulário. Em seguida, vá para o painel Opções. E togas formas inteligentes. Aqui, podemos selecionar o endereço de e-mail para onde os dados do formulário serão enviados. Eu já tenho um endereço de e-mail aqui. Mas se você não tem um, você precisa clicar em gerenciar para adicionar um. Digite o endereço aqui e clique em Criar. Você precisa verificar o endereço de e-mail usando o código de verificação que o Bootstrap Studio enviará para você. Como eu já adicionei um destinatário, o nosso pulou um passo. Depois de adicionar o destinatário, volte ao painel de opções e escolha-o nesta lista suspensa. Para se certificar de que o usuário não deixe nenhum dos campos em branco. Podemos usar este campo de validação. Se o definirmos como obrigatório, o usuário receberá uma mensagem de erro. Se deixarem em branco. Vamos selecionar todos esses botões de opção usando a tecla de controle para selecionar mais de um de cada vez e ir para validação e selecionar necessário. E vamos fazer o mesmo com o campo de entrada de e-mail. Finalmente, é importante para nós definir o tipo de padrão para enviar. Certo, agora estamos prontos. Vamos ver a inação do smartphone criando uma pré-visualização. Como você pode ver quando tentamos enviar sem preencher os campos apropriados, recebemos uma mensagem de erro. Precisamos até ter certeza de que é um endereço de e-mail válido. Podemos fazer upload de um arquivo. Quando clicamos no botão Enviar, temos esta captura para provar que não somos robôs tentando dominar o mundo naturalmente. Ok, nosso e-mail chegou. Vamos verificar nossa caixa de entrada para ver mais especificamente o que ela diz. O e-mail contém três informações e o anexo. Dissemos os nomes dos botões de rádio para tamanho e cor. Então é por isso que vemos tamanho e cor aqui. Quando olhamos para o valor, vemos que realmente não faz sentido. Temos S de tamanho e de cor. Além disso, o nome do endereço de e-mail não faz sentido. Então vamos voltar ao estúdio bootstrap para consertar isso. Vamos definir um valor apropriado para cada botão de opção. E para o endereço de e-mail. Vamos definir o nome. Certo, vamos testar em uma prévia. Ótimo, como você pode ver, agora é muito mais fácil entender o novo envio de formulário. Então, como você pode ver, Bootstrap Studio torna muito fácil adicionar um formulário inteligente ao nosso site. Podemos usar isso para criar nossos próprios formulários de contato estão em formulários orais, et cetera, et cetera. Mas se quisermos criar uma funcionalidade mais avançada, precisaremos usar JavaScript. E é sobre isso que o próximo capítulo será. Vamos começar desativando este endereço de e-mail e adicionar uma caixa de seleção opt in. Muita gente se sente intimidada por codificar, mas garanto que não há necessidade. Codificar é realmente muito divertido, mas não vamos precisar dele para o resto do curso. Então, se você acha que JavaScript não vai ser útil para você, ou se você já sabe script Java, ou mesmo se você simplesmente não se sentir como ele ou qualquer razão epi sentir como pular o próximo capítulo, então vá em frente e Ignore isso. E verei vocês no último capítulo sobre exportação e publicação. Se, por outro lado, você está entusiasmado em aprender um pouco sobre JavaScript, então eu vou vê-lo no próximo capítulo. Por enquanto, tchau, tchau. 30. (Opcional) Hora 11 - Javascript: dicas para noobs: Neste vídeo, vamos aprender um pouco sobre JavaScript. Neste capítulo, você será capaz de seguir junto com os passos para criar esta caixa de seleção opt in, que pode ativar e desativar esta entrada de e-mail. Neste capítulo, eu vou assumir que você é um iniciante completo. Então vamos ser bastante meticulosos. Mas antes de começarmos, gostaria de cobrir rapidamente dicas para programadores iniciantes. Dica número um é ser preciso, muito preciso. Acontece que os computadores não são muito inteligentes. Mesmo o que parece ser um erro de digitação insignificante poderia quebrar seu código. Então, se o seu código não está fazendo o que você espera, é muito possível que ele simplesmente porque você fez um erro de digitação, ele pode ser muito frustrante para iniciantes. Mas receio que essa seja apenas uma das realidades da codificação. E à medida que você ficar mais experiente, você vai se acostumar a ser preciso o tempo todo. Dica número dois, teste o código. Muitas vezes, para iniciantes, não é exagero testar o código para cada linha que você adicionar. Afinal, é muito mais fácil encontrar um erro de digitação em uma única linha de código, em vez de em 100 linhas de código. E dica número três, pense como um robô. Em outras palavras, tente pensar de forma muito lógica e sistemática. Codificar é um ótimo exercício para o cérebro. Quanto mais você codifica, mais prática você começa a pensar lógica e sistematicamente. Porque essa é a melhor maneira de descobrir por que seu código não está fazendo o que você queria fazer. E dica número 4, estar online o tempo todo. Codificar não é como aprender uma língua onde você basicamente tem que aprender muito de cor. É mais sobre entender roupas e estruturas. E é mais sobre ser capaz de procurar como fazer as coisas. E o melhor lugar para procurar coisas é internet. Certo, então com essas quatro dicas em mente, vamos começar. 31. (Opcional) Hora 11 - Javascript: (Optional): Bem-vindos de volta a todos. Neste vídeo, vamos adicionar esta caixa de seleção e vamos usar JavaScript para detectar, sempre que alguém clicar em uma caixa de seleção. Solte uma caixa de seleção com um rótulo e ajuste a mão-de-obra para ler. Por favor, envie-me boletins informativos e material promocional e todas essas coisas. Em seguida, selecione a entrada de e-mail. E sob o estado no painel Opções. Alternar desativado. Idiota para adicionar o arquivo JavaScript no painel de design, vá para o cabeçalho JavaScript. Clique com o botão direito do mouse no cabeçalho e escolha Novo e escolha JS file. Planeje usar apenas um arquivo JavaScript. Então vamos ser muito imaginativos e nomeá-lo java script.js. Então, o objetivo por agora é criar uma função simples que é executada sempre que o usuário clica em uma caixa de seleção, clique duas vezes em um arquivo JavaScript para editá-lo. E a função a seguir, caixa de seleção função clicado abrir colchetes , colchetes, alerta, colchetes abertos, Olá, feche colchetes. Deixe-me explicar isso rapidamente. Acabamos de definir uma função e o nome dessa função é chamado caixa de seleção clicado cada ping entre os colchetes é o que a função faz. Neste caso, temos apenas uma linha em nossa função. Ele cria uma caixa de alerta com o texto Olá. Então criamos uma função que faz algo, mas nunca chamamos essa função. Então o que gostaríamos de fazer é que gostaríamos de acionar essa função às vezes, digamos que toda vez que alguém clica em uma caixa de seleção, isso desencadeia disfunção. Para fazer isso, marque a caixa de seleção e abra o painel de atributos. Vamos adicionar um onclick com a caixa de seleção de valor clicada. Então, sempre que clicarmos nesta caixa de seleção, ele vai acionar a caixa de seleção função clicada. Observe que o valor dessa chave precisa ser exatamente o mesmo que o nome da função. Se há um pequeno erro de digitação, não vai funcionar. Vamos criar uma pré-visualização para testá-la. Funciona, ótimo. Agora que sabemos que funciona, podemos passar para o próximo passo. O próximo passo é descobrir se esta caixa de seleção está marcada ou não. Vamos fazer isso no próximo vídeo. Vejo você lá. 32. (Opcional11 (Javascript: o elemento id, se se e mais: Olá a todos e bem-vindos de volta. No vídeo anterior, criamos uma função simples e usamos o atributo no clique para acionar a função toda vez que alguém clica em uma caixa de seleção. Neste vídeo, vamos estender essa função para que a função nos informe se a caixa de seleção foi clicada não no arquivo JavaScript. Crie uma nova variável chamada check. Use document.getElementById para vincular a caixa de seleção à variável. Esta função getElementByID liga o elemento com este ID e armazena todas as informações nesta variável de verificação. Vamos adicionar um alerta para ver se a caixa de seleção está marcada ou não. Neste caso, marcado é uma das propriedades da verificação variável. E pode ser verdadeiro ou falso. Vamos criar uma pré-visualização. E como você vê, quando clicamos na caixa de seleção, o resultado é verdadeiro. E quando desmarcamos a caixa de seleção, o resultado é falso. Em seguida, vamos adicionar uma condição simples. Usaremos uma chamada cláusula IF. A propósito, podemos usar duas barras invertidas como esta para comentar o código. Isso significa que o navegador simplesmente ignoraria o código. Podemos usar esses comentários para manter algumas dicas e explicações para nós mesmos quando olhamos para este código novamente mais tarde ou para outras pessoas quando eles estão examinando nosso código, eu vou apenas manter esta linha de código em como um comentário porque eu sou responsável esquecer como configurar uma caixa de alerta e eu não quero ter que procurá-lo novamente mais tarde online. Então eu vou deixar isso aqui como um lembrete. Comece com a palavra-chave if, seguido por um par de colchetes. Entre esses dois colchetes de grupo, temos uma expressão que pode ser verdadeira ou falsa. Neste caso, marcado ou desmarcado pode ser verdadeiro ou falso. E vamos adicionar um alerta. alerta só aparecerá se o ponto de verificação da expressão verificado for igual a true. Então, em outras palavras, se a caixa de seleção foi realmente marcada, e vamos testá-la. Então agora temos a situação em que a caixa de seleção está marcada coberta. E se a caixa de seleção não estiver marcada? Para isso, podemos usar a palavra-chave mais. Else é sempre usado em combinação com if. Neste caso, temos se a caixa de seleção estiver marcada, então faça isso em todos os outros casos para isso. E vamos testá-lo para ver se funciona. Então agora temos uma estrutura clara que pode determinar se a caixa de seleção foi clicada ou não. Mas não gostaríamos apenas de enviar alertas, gostaríamos de ativar e desativar a caixa de entrada de e-mail. E é isso que vamos fazer no próximo vídeo. Mas para nós, é hora de fazer uma pausa. Então vá em frente e faça uma pausa curta ou longa. E eu vou te ver no próximo vídeo. Tchau-tchau. 33. (Opcional) Hora 11 (Optional) - Javascript: Desativando o campo de entrada de e-mail: Olá a todos. No vídeo anterior, adicionamos um JavaScript simples que detecta sempre que alguém clica em uma caixa de seleção e também determina se a caixa de seleção está ou não clicada no momento. Aprendemos sobre como escrever funções e acioná-las com a palavra-chave onclick. Aprendemos sobre encontrar um elemento por seu ID usando uma função chamada get element by ID. E aprendemos sobre a criação de condições simples usando as palavras-chave if e else. Neste vídeo, vamos estender o script para ativar e desativar o campo de entrada de e-mail dependendo do valor da caixa de seleção. Então, vamos começar. Primeiro precisamos colocar todas as informações dessa caixa de entrada em uma variável deve ser mais preciso. Precisamos de uma variável que aponte para a caixa de entrada de e-mail. Então vamos dar a caixa de entrada de e-mail e ID e usar document.getElementByID para criar uma variável que aponta para essa caixa de entrada de e-mail. E agora que temos uma variável apontando para essa caixa de entrada específica, podemos definir suas propriedades. Nós dissemos que a propriedade desabilitada para forçar no caso de a caixa de seleção estar ativa. E definimos como true se a caixa de seleção não tiver sido marcada. E lá temos. Adicionamos uma funcionalidade simples a este formulário. Se eu marcar a caixa de seleção, ela ativa a entrada EMA. E se eu desmarcar a caixa de seleção, ela a desativa. Então devemos estar orgulhosos de nós mesmos. No entanto, temos um efeito colateral não intencional. O formulário redefine automaticamente a caixa de seleção após o envio, mas não define o campo de entrada de e-mail também desativado. Para corrigir isso, podemos escrever um script que redefine o formulário da maneira que queremos. E podemos acionar esse script sempre que alguém clicar no botão enviar, criar uma nova função chamada enviada e vinculá-la ao botão enviar adicionando um atributo onclick. Lembre-se, ele precisa ser exatamente o mesmo que o nome da função. Vamos testá-lo. Certo, funciona, mas infelizmente resulta em outro problema não intencional. Quando desativamos o campo, também desabilitamos a validação. Isso significa que criamos uma situação na qual alguém pode inserir um endereço de e-mail inválido. Para resolver isso, vamos escrever nossa própria função de verificação de e-mail. Parece difícil, mas não se preocupe com uma pequena ajuda da Internet, é realmente muito fácil. Espero que se juntem a mim no próximo vídeo onde terminaremos nosso formulário. Vejo-te em breve. Tchau-tchau. 34. (Opcional) Hora 11 (Javascript: de o Javascript: Verificar o endereço de e-mail válido: Olá a todos e bem-vindos de volta. Nos últimos dois vídeos, criamos este formulário e criamos esta caixa de seleção que ativa ou desativa este campo de entrada. Mas temos um pequeno problema. Resumindo, precisamos escrever um script curto que verifica se este é ou não um e-mail válido. único problema é que não faço ideia de como fazer isso. Mas isso é bem baixo, é para isso que serve a Internet. Então vamos fazer uma pesquisa rápida on-line e procurar Java Script, verificar e-mail válido. Muito rápido. Encontramos o seguinte site. Desnatando através. Vemos este trecho de código que precisamos. Se você estiver interessado, você pode ler todo o artigo. É bastante curto, e também é informativo. Mas, por enquanto, vamos copiar e colar esse trecho de código em nosso arquivo JavaScript. Vamos examinar rapidamente o código e verificar as coisas mais importantes. Primeiro de tudo, é uma função chamada e-mail é válida. Em segundo lugar, vemos aqui que temos de lhe dar um contributo. Precisamos fornecer um endereço de e-mail. E, finalmente, vemos que a função retorna algo. Em outras palavras, há uma saída para esta função. A saída é true ou false, true se for um email válido e false se não for um email válido. Então, ele permite usar essa função para determinar se há um e-mail válido sobre isso. E em nossa própria função submetida, vamos combinar isso com uma cláusula if. Só desativaremos o campo de e-mail se o e-mail fornecido for um e-mail válido. Então vamos dar uma olhada no que fizemos aqui. Primeiro de tudo, temos a palavra-chave se. Para avaliar a condição da palavra-chave if, primeiro chamamos a função e-mail é válido. Lembre-se que a função email é válida, requer uma entrada. Nesse caso, usamos uma das propriedades do campo de entrada de e-mail. Especificamente, usamos a propriedade value. E-mail é válido função retorna true se a entrada é um e-mail válido e ele retorna false se a entrada não é um e-mail válido. Então, no caso em que descobrimos que é um e-mail válido, podemos ir em frente e desativar o campo de entrada de e-mail. Se não for um e-mail válido. Nesse caso, nada acontecerá. E, desde agora, o campo de entrada de e-mail não foi desativado. O processo de verificação de bootstrap foi ficar em vigor. E lá temos. Vamos testá-lo. Sim, finalmente funciona. Então isso é tudo de mim sobre codificação. Se você está interessado em aprender mais codificação, eu recomendo este site. Quanto a nós, vamos avançar com o capítulo final, que é sobre exportação e publicação. Vejo-te em breve. Tchau-tchau. 35. Hora 12: Configurações de exportação e publicação: Bem feito. Chegamos ao capítulo final. Neste capítulo, vamos aprender sobre publicação e exportação. Vamos começar com algumas configurações de publicação e exportação. Vamos começar por dar uma olhada em algumas das configurações. Clique no ícone Configurações na barra superior. Sob o título SEO, vemos que podemos definir o título e a descrição. O título e a descrição podem ser vistos na página de resultados da pesquisa. Portanto, escrever um título e uma descrição úteis é muito importante para fazer com que seu público-alvo clique em seu site. Podemos criar um sitemap para. O sitemap ajuda o mecanismo de pesquisa a obter uma visão geral da estrutura do seu site. Podemos usar ícones fav para criar um ícone para o nosso site. Na visualização, vemos como o ícone e o título foram adicionados à guia do navegador. Olhando no código HTML, podemos encontrar isso de volta na cabeça do documento. E também podemos adicionar Meta tags. Meta tags simplesmente fornecem informações sobre o site e esta informação é bastante útil para os motores de busca. Vemos que já temos a descrição entre as nossas Meta tags. Vamos adicionar algumas palavras-chave. E também vou adicionar uma etiqueta de autor. Também podemos adicionar outros tipos de Meta tags, por exemplo, o idioma da página web e outros. Se você quiser saber mais sobre os diferentes tipos de Meta tags que existem, eu recomendo este site. Quando se trata do código HTML gerado, podemos encontrar toda essa informação na cabeça do nosso HTML. Ok, a seguir, vamos publicar o site. 36. Hora 12: publicação: Ok, a seguir, vamos publicar o site. Vamos publicá-lo através do estúdio Bootstrap. Isso é muito bom porque desta forma, nem precisamos nos preocupar com hospedagem. Para publicar, primeiro precisamos configurar um nome de domínio. Clique em Publicar, clique no botão, gerencie o site e clique em Adicionar site. Podemos usar um subdomínio de estúdio bootstrap, ou podemos vincular um domínio existente. Se escolhermos um subdomínio, nosso site terminará em dot bss dot design. Também precisamos escolher quanto tempo manter o domínio. Se quisermos mantê-lo indefinidamente, podemos escolher nunca. Mas talvez você já tenha um domínio para carregar o site com um domínio existente, você pode primeiro exportar tudo o que vamos aprender no próximo vídeo. Ou você pode usar o Cloudflare para criar um novo registro DNS. Clique no botão Verificar e siga as instruções fornecidas. Podemos encontrar instruções mais detalhadas neste site. Então, se você usar o subdomínio do estúdio do Bootstrap ou se você usou um domínio existente. Depois disso. Clique em Fechar. Agora que temos um domínio configurado no menu suspenso, escolha o domínio que acabamos de criar e clique em Publicar. Lá temos ele. Nosso site está agora disponível online. Bastante fácil, certo? Algumas pessoas, no entanto, podem preferir exportar o site primeiro e depois carregá-lo para um servidor se você preferir essa forma de fazê-lo. É sobre isso que vamos aprender no próximo vídeo. Vejo você lá. Tchau por agora. 37. Hora 12: Exportação: Exportar o projeto para HTML, CSS e JavaScript no Bootstrap Studio é uma questão simples. Basta clicar em Exportar. Caso queira incluir um sitemap, certifique-se de incluir o URL do seu site. Selecione o diretório de destino e clique no botão Exportar. Vamos para a pasta de exportação para inspecionar nossos resultados. Podemos ver todos os nossos arquivos HTML e podemos testar os arquivos HTML abrindo-os em um navegador. Ou podemos inspecionar o código HTML gerado abrindo-os em um editor de texto simples. Também temos uma pasta de ativos. A pasta de ativos contém todos os recursos do site, incluindo imagens, arquivos CSS, JavaScript, etc. Mas agora gostaríamos de colocar este site online. Para fazer isso, precisamos de um host web. Eu mesmo tenho um host web chamado nuvem BAA. Outros hosts populares da web incluem Host, Gator, Bluehost e muitos mais. Certifique-se de que o host que você escolher inclui pelo menos ver painel C para é o que usamos para carregar o site exportado para o servidor ser uma nuvem oferece FTP. Podemos usar FTP com um cliente como FileZilla para compartilhar facilmente arquivos entre um servidor e seu computador. Mas nem todos os hosts oferecem FTP. Então, neste vídeo, vou demonstrar como podemos fazer upload do nosso site usando painéis C ou Gerenciador de Arquivos. Cpanel é um gerenciador de arquivos bastante básico. É um pouco complicado carregar várias estruturas de pastas. Para simplificar isso, vou primeiro compactar meu site exportado. E então eu só preciso fazer upload de um arquivo. E uma vez carregado, extraia os arquivos aqui. E agora o nosso site está online. Por enquanto, é isso. Vejo você no próximo e último vídeo, meu Bye. 38. Conclusão e considerações finais: Bom trabalho a todos. Chegamos ao fim deste curso. Espero que tenha gostado. Lembre-se, ao aprender um novo ping, geralmente é uma boa idéia obter experiência prática para solidificar o que você aprendeu. Como um projeto, crie seu próprio site ou página web e publique-o. Ou, alternativamente, você pode criar seu próprio componente avançado. Quando terminar, publique um link para exibi-lo. Dessa forma, eu posso lhe dar alguns comentários e você pode compartilhar sua criação com outras pessoas. Neste curso, aprendemos bastante. Aprendemos quase tudo o que o estúdio bootstrap tem para oferecer. Mas lembre-se, ainda há um monte de coisas úteis e divertidas para aprender lá fora. Como aprendizes ao longo da vida provavelmente nunca vai ficar sem coisas úteis e interessantes para LA. Então isso é tudo de mim, por enquanto. Boa sorte e boa aprendizagem. Tchau-tchau.