Chegou a hora da imersão Dev da Alura com o Google Gemini! Estou muito feliz que você deu esse passo para aprender desenvolvimento de software e inteligência artificial. Sou o professor Guilherme Lima, estou ao lado de pessoas incríveis.
Eu sou a Rafaella Ballerini, criadora de conteúdo de tecnologia e também sou instrutora front-end na Alura e estou muito ansiosa para dar esse mergulho com vocês. E aí, pessoal? Sou o Luciano Martins, Developer Advocate de AI no Google.
E estou empolgado para aprender junto com vocês, com a Rafaela e o Gui, como fazer a junção de aprendizado de desenvolvimento com IA. [♪] Para começar o nosso desafio, tem duas informações importantes. Primeiro, para você ter acesso ao seu certificado, você vai precisar assistir às cinco aulas da imersão Dev.
Segundo, para acessar o Gemini, é necessário que você use o link que estou mostrando na tela, goo. gle/Alura, com A maiúsculo, Gemini, tudo junto, com G maiúsculo também. Dois assuntos importantes, não se esqueçam disso, porque isso é fundamental para ter acesso ao seu certificado.
Assistir todas as aulas e acessar o Gemini através desse link. Só reforçando, que é Google quebrado no meio, é goo, ponto, gle, barra, AluraGemini. Eu vou clicar para acessar, vamos dar uma olhada.
Eu já estou logado com a minha conta do Gmail, que é necessário, é a única coisa que precisamos. Exatamente, o uso do Gemini é gratuito. Todo mundo que tem o seu email pessoal no Gmail, é só abrir o Gemini App, como chamamos o site do Gemini, pelo link que o Gui acabou de mostrar e continuar.
Aqui, temos o famoso prompt, com o qual conseguimos interagir com a inteligência artificial. O desafio que temos é construir uma aplicação na qual você vai poder escolher o tema que desejar, por exemplo, eu quero criar uma base de conhecimento sobre música, série, filme, esportes. Eu gosto muito de esporte.
- Você gosta de esporte, Rafa? - Gosto. Mas eu não sei como criar uma aplicação e como uso a inteligência artificial para me ajudar a criar um site, por exemplo?
Basicamente, na ferramenta que você está, Guilherme, é como se você estivesse interagindo, conversando com o modelo do Gemini. A ideia é que, nessa caixa onde você tem "digite uma pergunta ou um comando", você vai escrever o que quer saber, sempre direcionando alguma ação. Então, se você quer saber como algo funciona, você faz uma pergunta.
Como eu entendo mais sobre as Olimpíadas? Ou quais são as regras de algum esporte? Você sempre tem que direcionar qual ação que você quer que o modelo tome.
O interessante é que posso escrever qualquer coisa. Literalmente qualquer coisa, sempre lembrando que esse literalmente qualquer coisa, pode lhe ajudar ou lhe atrapalhar. Se você faz uma pergunta ampla demais, por exemplo, estamos na cidade de São Paulo, se eu peço para o modelo simplesmente escrever sobre a cidade de São Paulo, ele pode falar sobre a geografia, a cultura, os esportes, porque ele tem muita informação, foi treinado com muita informação.
Quanto mais pudermos direcionar que área de conhecimento ou que tipo de detalhe queremos na resposta, melhor será a resposta que vamos receber. A ideia é a seguinte, eu quero criar um site, e um site envolve algumas tecnologias. Eu posso perguntar quais tecnologias?
Você pode perguntar, por exemplo, quais tecnologias preciso aprender para criar o meu primeiro site. "Quais tecnologias preciso aprender para criar o meu site? " Ele pensou um pouco e mandou que as tecnologias para criar um site, depende do tipo de site que queremos criar.
Sobre os fundamentos da web, ele listou três. Essas são as três principais linguagens que utilizamos. De linguagem de programação, vemos aí o JavaScript, temos o HTML como linguagem de marcação e o CSS como linguagem de estilização.
Vamos entender, porque usaremos os três dentro dessa imersão, entenderemos para que cada um existe. Por exemplo, o HTML é a linguagem de marcação, ele é todo o esqueleto da página. Vamos escrever todos os elementos, estruturar, aqui é um parágrafo, aqui é um título, aqui é uma imagem.
Já o CSS é uma linguagem de estilização, vamos deixar bonito, colocar uma cor para o título, deixar a imagem um pouco para um lado ou outro, arredondada. Podemos fazer tudo o que quisermos com CSS. O JavaScript é a linguagem de programação que dá movimento para a página, é onde vamos colocar realmente a lógica, quando for buscar alguma informação, o que vai aparecer, precisamos filtrar as informações também.
HTML é o esqueleto, CSS é como se fosse a pele, a maquiagem, e o JavaScript é o músculo. Certo, eu estou aprendendo agora com vocês, assim como quem está nos acompanhando. Mas se você fala que é uma linguagem de programação, CSS, JavaScript, em algum lugar, eu preciso escrever esse tipo de código.
O código nada mais é do que realmente palavras. Assim como utilizamos o Word para fazer os nossos trabalhos de escola, vamos descobrir o que se utiliza para escrever código. Vamos perguntar para o Gemini.
Como eu posso elaborar essa pergunta para o Gemini? Você pode perguntar "qual ferramenta eu posso utilizar para começar a escrever o código do meu site". [murmúrios] Acho que o que acabamos de fazer é algo interessante, que as pessoas não precisam copiar exatamente como você está fazendo.
O Gemini entende a linguagem que utilizamos, entende o português, então você não precisa copiar o que aparece na sua tela que o Gui escreveu. Você pode falar com as suas palavras, com o seu jeito de digitar que está tudo certo. Eu acho que também vale o teste, de ficar praticando.
Exatamente. Vamos ver editores de texto. Ele deu alguns nomes que eu tenho a impressão, por amigos que trabalham com desenvolvimento, que são conhecidos, principalmente um deles.
O Sublime Text, que é conhecido, mas nem é tanto. Agora, esse Visual Studio Code, a maioria usa. - Vocês usam no dia a dia?
- Sim. Eu uso os dois, para ser honesto, uso Sublime e VSCode. - Eu uso o Visual Studio Code.
- Eu também. Gosto bastante. Ele fala que é um editor de texto poderoso e gratuito.
Não precisa pagar absolutamente nada para usar. Olha que curioso! Vamos usar HTML, CSS, JavaScript e não vamos pagar nada.
Estamos usando o Gemini, não vamos pagar nada. É uma oportunidade muito importante, quer dizer, muito legal, - É bem acessível. - Exatamente.
Essa é a palavra. Eu quero instalar o Visual Studio Code. Vamos fazer isso?
- Vamos? - Vamos nessa! Eu vou pesquisar, deixa eu acessar, por Visual Studio Code.
Aparece o Visual Studio Code, vou clicar nesse primeiro link mesmo. Eu quero fazer o download dele, vou clicar em "Download". E aí, repara que com base no seu sistema operacional, se for Windows, Linux ou Mac, no caso, eu estou usando o Windows, e ele está fazendo o download, está carregando um pouco.
Eu imagino, você falou do Word. . .
Talvez gera um pouco de ansiedade nas pessoas. Mas o que vamos ver, dentro do Visual Studio Code, é um local para escrever o nosso texto, que no fundo é um código. No fim, se a gente fizer um paralelo, da mesma forma que o editor de texto, o Google Docs, o Word, nos ajuda com a linguagem de comunicação a acentuar da forma certa, corrigir uma escrita, temos o editor de código para ajudar com a linguagem do código.
Qual a melhor forma de posicionar as coisas, o quê que vem na sequência de quê, então, é mais ou menos o mesmo tipo de ajuda. Então, tem um termo de licença gigante, eu posso confiar? - Só vai.
- Só vai? Estou confiando em você, Rafa. Então, vou colocar que eu aceito.
Next, next, próximo, próximo, próximo e instalar. Essas configurações, se você entende um pouco melhor de arquivos e passos, você pode fazer da forma como você preferir, mas vamos sempre colocar o padrão. O padrão funciona.
E a instalação até que não é tão demorada. Eu ia falar só porque eu falei, mas deu certo. Ele já está com um botão, quando eu clicar em "Concluir", ele abre o Visual Studio Code para ver a cara dele.
Abriu e apareceu o Visual Studio Code. Pessoal, esse é o local onde vamos escrever o nosso código. Eu estou colocando "Ctrl+Mais", só para conseguir visualizar melhor tudo que tem na tela.
O próximo desafio agora é o seguinte. Vimos que são necessárias, para criação de um site do zero, três tecnologias, HTML, CSS e JavaScript. E a Rafa falou que a espinha dorsal, a estrutura do site é feita com HTML.
Então, nosso próximo desafio será criar um documento HTML. - Vamos fazer isso? - Vamos fazer isso.
Primeiro lugar, eu preciso, para criar esse projeto. . .
Vamos supor que eu vou criar um texto, tenho uma pasta "escrevendo um livro de receitas do Guilherme", e deixo todas as receitas nessa pasta. Isso faz sentido para o código também? Sim, senão vai ficar avulso no seu computador.
Vamos criar uma pasta para colocar todas as informações do projeto, os arquivos que vamos fazer. Então, vou minimizar todas as abas, vou clicar com o botão direito, vou criar uma pasta do zero. Ir aqui em "Nova pasta".
Vou chamar essa pasta. . .
Qual nome posso dar para esse projeto? - Imersão? - Pode ser.
Então, qual é a ideia? Por que criamos uma pasta? Porque quero manter todo o código referente à imersão, ao meu projeto, dentro dessa pasta.
- Isso é importante no dia a dia também. - Sem dúvida. Vou pegar o Visual Studio, vou arrastá-lo um pouco para o lado.
Vou arrastar um pouco para o lado e pegar essa pasta e arrastá-la para o Visual Studio Code. Repara que ele colocou o nome "Imersão", que é o nome da nossa pasta, e não temos nenhum arquivo, não tem nada nessa pasta, ela está vazia. Vamos criar o primeiro documento HTML.
Como eu faço isso? Normalmente, quando colocamos o principal arquivo HTML, damos o nome de index. Index.
html. Esse ". html" é a extensão que indica que esse arquivo será do tipo HTML.
Então, quando a gente quiser criar o arquivo direto no Visual Studio Code, temos a opção, por exemplo, de clicar com o botão direito do mouse e colocar "New file", ou novo arquivo, se tiver em português, ou também podemos ir, ao lado de onde está escrito imersão, na pasta imersão, temos a figura de um arquivo com um mais no canto inferior direito, podemos clicar ali para adicionar um novo arquivo. Então, vamos fazer isso. Eu vou clicar no ícone ao lado de imersão mesmo, "New file", e vou escrever esse nome, index.
html. Ele até colocou um ícone ali do lado. Um ponto curioso sobre isso.
Então, quer dizer que um arquivo, um documento HTML, ele é reconhecido por conta da sua extensão. Assim como quando escrevemos um arquivo de texto, pode ser . txt ou .
doc, quando estamos usando PDF, imagem JPG. É assim que conseguimos saber mesmo. Na minha cabeça, eu pensava que eu precisaria instalar algo para ter o HTML, e não é isso.
Não, o HTML não é uma linguagem que precisa instalar nada. Não depende de uma ferramenta adicional. Vou dar um "Enter" e ele criou o HTML.
Ele está vazio, não tem nada. O que eu escrevo agora para criar a minha página? Agora, você está no momento que começará a construir o seu esqueleto.
Dentro do seu HTML, você começa a ter, como em um esqueleto que você tem partes, você tem a cabeça, o tronco e os membros do esqueleto, você tem a sua estrutura do HTML também. Para começar a escrever toda a estrutura do esqueleto, podemos escrever do zero ou podemos utilizar um atalho que todo mundo conhece e você vai conhecer neste momento, que é apenas escrever um ponto de exclamação. - E o site está pronto?
- Não. [risos] A estrutura mais básica possível do HTML estará pronta e está escrito, logo que se coloca o ponto de exclamação, Emmet Abbreviation para mostrar que é uma abreviação que já vem no VS Code. Por um segundo eu pensei "é muito fácil programar", é só colocar um ponto de exclamação no VS Code e está tudo certo.
Mas, a estrutura básica já estará pronta, vamos ver como vai ficar. Vou pressionar o "Enter" e ele gerou uma série de informações. Muita coisa doida.
Para conseguir visualizar melhor, eu vou fechar o Explorer com "Ctrl+B", fecho ali do lado, só para visualizar isso. Eu estou aprendendo com vocês. Ele deu uma série de código que eu não faço ideia do que significa, talvez na linha 2, o lang, pode ser próximo a idioma.
O resto eu não faço ideia. O charset, viewport. O título que abre e fecha, essa forma que ele escreve.
Mas, por ser um atalho, a impressão que eu tenho é que isso é muito comum em muitos sites. Em vez de, toda hora que for criar uma aplicação ou página, digitar isso, põe um atalho que é a exclamação, "Enter" e aparece lá. Não é como a minha expectativa, que era o site inteiro pronto, mas dá para ter uma ideia.
Quem está vendo isso a primeira vez, pode se assustar com esse padrão de estrutura, esses nomes, html, head e body. Basicamente, essa é a estrutura fundamental de qualquer site que vocês forem criar daqui para frente. Com o tempo, vamos nos acostumando, igual quando se aprende qualquer conceito novo.
Vamos sempre ver essa estrutura, não importa qual tipo de site ou aplicação web estamos desenvolvendo. É uma questão de prática e exercício. Eu poderia usar o Gemini para me ajudar a entender um pouco melhor?
Sem dúvida. Você pode interagir com o Gemini de duas formas. Dá para você testar as duas nesse momento.
Você pode mandar uma imagem para o Gemini e pedir para ele explicar algo ou tomar alguma ação a partir dessa imagem, ou você pode mandar o código como texto. - Fica a seu critério qual forma mandar. - Pode escolher, Rafa.
Achei muito legal esse negócio da imagem! Ele já consegue pegar o texto da imagem? - Exatamente.
- Acho que podemos fazer desse jeito. Eu vou ensinar um atalho para vocês agora. Repara que ele está cortando o initial-scale.
Então, o texto é maior do que o espaço da tela. Vou pressionar "Alt+Z' para juntar e quebrar a linha quando chegar no limite. Vamos tirar um print agora.
Print do index com todo o nosso código. Ou tem a segunda opção para selecionar todo o código, "Ctrl+A", seleciona tudo e faz um "Ctrl+C". Vamos lá para o Gemini e vamos colocar aqui essa imagem.
Ele está carregando a imagem e eu passo um prompt além disso? Basicamente, você está mandando duas informações. É como se estivéssemos conversando e eu tivesse uma imagem de algo, por exemplo, da cidade onde vocês moram, eu mostrasse essa foto e falasse "Guilherme, me fala sobre esse lugar?
" É basicamente essa interação que teremos com o Gemini. Você está enviando uma imagem como contexto e, baseado nesse contexto, você pede para ele responder algo. Vou falar "estou criando meu HTML, poderia me ajudar a descrever o que cada linha representa ou faz?
" - Pode ser? - Perfeito. Vamos dar "Enter".
Olha que interessante! Passamos uma imagem. - Isso abre muitas possibilidades.
- Exatamente. De novo, da mesma forma, se você não quer ter esse trabalho de tirar um screenshot, salvar a imagem e tal, você podia simplesmente pegar o código todo, colar no seu prompt aí na sua janelinha onde você escreve a sua pergunta, você cola o código e embaixo pergunta "Me explica esse código" Vamos tentar depois fazer as duas formas? Acho que é bacana.
Aí ele está falando aqui, eu não vou ler todas as etapas, por quê? Porque isso é comum. Esse é um desafio para você.
Dê uma lida para entender o que cada linha faz. Vamos entender duas linhas. Então a linha 1, que é <!
DOCTYPE html>. Ele fala assim: essa linha informa para o navegador que o documento a seguir é um documento HTML5, ou seja, é uma versão do HTML que estamos querendo usar, a mais atualizada. E assim por diante.
A linha 2. Então, tudo isso que estamos vendo de código é para ele falar assim: "Usa o HTML5". É só isso, não tem mais nada.
A linha 2, que é esse <html lang="en">. Então, "a tag html define a raiz de todo documento", ou seja, aqui que está começando tudo. "O atributo.
. . ", ah, isso tem um nome!
Essa forma que estamos vendo aqui, tem o html e passamos mais uma informação, é chamada de atributo. ". .
. especifica a língua principal do conteúdo da página, nesse caso o inglês. " Aí temos um problema, porque não é o meu objetivo, não estou criando uma página para ser acessada pelo idioma inglês, eu preciso deixar com o idioma em português do Brasil, especificamente, não português de outras regiões.
Então isso é uma coisa que já poderíamos mudar no nosso código. Vamos lá no código, então. Você pode perguntar para o Gemini.
Vamos! Ótimo! Outra coisa interessante que você tem nesse mecanismo que você está usando é que ele mantém o histórico das coisas que você está conversando.
Então agora você não tem que enviar a imagem novamente, falar que é um código novamente, você pode simplesmente perguntar: como eu mudo a linguagem da minha página para português do Brasil? Boa! Sabe o que eu tinha pensado de fazer?
Eu tinha pensado em colocar o código e depois falar: como eu mudo. . .
? Pode ser também? Pode ser também!
Estou pressionando "Shift+Enter" para pular de linha, eu posso interagir de uma forma maior. Sim, sem dúvida! Meu site é para o público brasileiro que fala o idioma português.
Como eu altero para esse idioma? É muito legal isso, que eu tenho vocês dois de base e estou usando a assistência da inteligência artificial. Ele falou que estou com o inglês.
. . Ah, olha só, ele me deu um trecho de código.
Isso, ele primeiro explicou novamente as tags e as configurações para você, você tem que encontrar a tag HTML, dentro da tag HTML você tem que achar o atributo lang e colocar a linguagem que você quer. E embaixo ele colocou um exemplo de como ficaria para português brasileiro. É o português do Brasil, pt-br.
E por curiosidade ele até explica porque pt-br. Ah, olha só: "pt é abreviação do português e o br é abreviação do Brasil. " Olha, ele fala também sobre outros assuntos mais complexos.
Acessibilidade, SEO. Outras coisas que são importantes também. Então, vou falar assim: o público do meu site é o português do Brasil.
Isso aí! Beleza! Fechou!
Eu tenho agora um problema, Rafa, que é o seguinte, olha só: criamos 11 linhas de código com aquele atalho que você falou, o mágico, mudei o idioma para o português, beleza. Eu consigo visualizar algo dessa página? Pode sim, Gui, conseguimos utilizar algumas ferramentas para ajudar no nosso desenvolvimento para podermos ter essa visualização do HTML direto no navegador, para isso, vamos baixar uma extensão.
E isso nós fazemos aqui dentro do VS Code mesmo, no canto esquerdo existe um íconezinho de quadradinhos, que é Extensions ou Extensões. Pode clicar aí, Gui. E ele dá até o atalho, "Ctrl+Shift+X", para abrir.
Então nós pesquisamos "Live" ou "Live Server", vamos achar várias extensões, mas a correta é a que tem o íconezinho roxo. E aí o que podemos fazer para poder utilizá-la? Instalar.
Então é só clicar no botão Install, aqui no caso o Gui já tem instalado. Não, eu cliquei rapidinho, Rafa. Ah, tá, eu não vi!
O Gui está ansioso! [risos] Clicamos em "Instalar" e aí ela já vai estar funcionando. Se não tiver funcionando, pode ser que esteja escrito "Enable", outro botãozinho ao lado esquerdo de Install.
Aí você clica em Enable que é para poder ligar, fazer funcionar. Vamos utilizar esse Live Server, o que precisamos fazer? Volta lá no arquivo, podemos clicar no primeiro ícone do canto esquerdo, clica no nosso arquivo index.
html para visualizá-lo novamente. Cliquei com o botão direito. Aí eu coloco abrir com Live Server?
Pode ser, pode ser. Uma forma de abrir. Vamos lá.
Dá um "Enter". E. .
. Temos uma página em branco! Uhul!
É isso mesmo, gente? Tá certinho? Tá certo.
Eu achei que ia aparecer a página mesmo. Ainda não? Colorida, cheia de botões, animações.
Não, né? Nesse ponto você está com um esqueleto muito básico do site. Então aí você validou que o seu esqueleto está certinho, que o seu navegador consegue abrir o arquivo, mas não tem nada definido.
Para não dizer que não tem nada, tem um campo, que é o título da página, onde está escrito "Document". E lá na sua aba dá para ver "Document", que ele leu do arquivo. Além disso, o seu arquivo não tem nada mais.
Ah, pera aí, que agora ativou o modo curioso do Guilherme. Calma aí. Então quer dizer que se eu altero esse título aqui, aquela abinha vai mudar ali em cima?
Vou colocar, por exemplo, "Olimpíadas". Se eu volto lá na aplicação. .
. - Você salva, né? - É, salvei.
"Ctrl+S" para salvar. Mudou! Olimpíadas.
Bom, eu gostei de colocar o title e ele alterar o titulozinho, aquela abinha. É importante. Todo site tem esse nomezinho.
O próprio "Gemini", alguém colocou lá no title do Gemini, um íconezinho e outras coisas bacanas. Rafa, eu queria de verdade criar o conteúdo da página. Sim.
Eu confesso que a minha expectativa está um pouco difícil, porque quando eu coloquei "! + Enter", eu imaginei que a página ia aparecer. E não.
O que temos até agora é uma página HTML estruturada, mas o documento, o conteúdo da página, ainda não foi feito. Então, é isso que vamos fazer agora. Acho que é importante destacar que, como usamos o ponto de exclamação, já veio com a estrutura básica do HTML duas tags que realmente definem o que será de informação para o navegador e o que é de informação para aparecer visualmente na página.
Podemos ver ali na linha 3 que está escrito "head". Essa tag é a tag em que conseguimos colocar todas as informações para o navegador. Então, essa tag abre na linha 3 e fecha na linha 7.
Ela abre com o sinal de "menor que" (<), head, fecha com "maior que" (>). E aí, lá embaixo na linha 7, ela tem o <, a barra para indicar que está fechando a tag, e aí depois tem o "head" e o >. Então, todas as informações da linha 4, 5, 6, e tudo mais que adicionássemos ali, são chamados metadados.
São dados que não aparecem visualmente no corpo da página, eles são informações para o navegador. Então, como conseguimos adicionar coisas no corpo da página? É só colocar o nosso código a partir da linha 9.
Por que a linha 9? Porque ela vai estar dentro dessa tag chamada "body", que é o corpo da página. A página tem o head e tem o body.
Vamos adicionar aí o conteúdo do corpo da página. Beleza. A ideia é só eu sair escrevendo?
Na verdade, precisamos ter uma noção de como a nossa página será estruturada. O que vai estar em cima, no meio, o que vai estar embaixo. E normalmente, qualquer página web que virmos, as maiores e mais famosas que encontramos por aí, elas são normalmente divididas em cabeçalho, em conteúdo principal e também, lá embaixo, um rodapé, que tem aquela parte de direitos e tudo mais.
Vamos definir também, dessa forma, o nosso projeto. O que você acha? Eu acho que é legal porque, assim, na estrutura principal, temos a parte superior da página, o conteúdo e um rodapé.
Isso. No final das contas, é interessante a pergunta que você fez, porque é como estruturar um documento de texto, voltando ao paralelo que fizemos. Se você começar a escrever dentro do body, vai aparecer lá na sua página, mas é como escrever um documento de texto sem formatação.
Você sempre coloca um cabeçalho com a fonte maior, você ajeita um parágrafo. Aqui, essa estruturação que a Rafa está explicando é como você começa a estruturar de uma forma que faça mais sentido a informação que você quer pôr na página, entendeu? Chamamos esses nomezinhos - body, head, doctype, html - de tags.
Vamos nos acostumar, a partir de agora, com essa nomenclatura. Quais são as tags para desenvolver esse corpo com essa estrutura de três partes? Como utilizamos no HTML a língua inglesa, por mais que o conteúdo da página seja em português, as tags são escritas em inglês, nós programamos em inglês.
Vamos colocar primeiro o cabeçalho, que será a tag header, cabeçalho em inglês. Diferente de head, né? Exatamente.
E eu posso usar o Emmet? Pode usar o Emmet. Eu gostei do Emmet.
Eu gostei muito dele. Olha, realmente. O que ele faz?
Ele abriu o header, e foi o que a Rafa falou: aqui, nesse espacinho, eu vou colocar todo o conteúdo. Repara que o meu código está ficando assim: tem o body, aí tem o espaço e o header. Dentro do header, vai ter outro espaço que eu vou colocando essa formatação, né?
Isso, isso. Então, beleza. Vamos escrever algo no header?
Vamos, podemos escrever. É só eu escrever qualquer coisa e já era? Vamos testar.
- Quer escrever? - Quero. O que você quer colocar no header?
Eu quero colocar, por exemplo, uma base de conhecimento que fale sobre atletas do Brasil. Então, por exemplo, vai falar sobre diversos atletas, então eu vou escrever aqui: atletas do Brasil. Então, você quer colocar o título ali no cabeçalho?
Legal. Isso. Vamos ver lá na página.
Expectativa e realidade. É um pouco triste, assim, mas ele apareceu escrito pequenininho no canto esquerdo, Atletas do Brasil. Sim.
Eu queria que tivesse mais destaque. Sim, boa. Então, aí entra a ideia de utilizar as tags que estamos aprendendo para fazer também a formatação do nosso texto.
Da mesma forma que no documento de texto nós escolhemos o tamanho da fonte ou o destaque da fonte, conseguimos usar isso dentro do HTML também, certo, Rafa? Certo. E não é só importante para a parte visual, mas também para o nosso navegador entender o que é título, o que será uma imagem, o que é um parágrafo.
Se só escrevermos texto em vários lugares, é muito mais complicado, até porque tem gente que precisa utilizar ferramentas de acessibilidade para poder ler as páginas web, e é assim que ele entende o que é cada coisa. Então, para isso precisamos de uma tag que represente o título. Mas porém, todavia, temos ali na linha 6 uma tag title.
É essa que vamos utilizar? Não. Teoricamente, a title vai representar a aba, o documento, aquele textinho que é o título do nosso projeto no total.
Agora, para o título que queremos adicionar na nossa página, utilizamos uma tag h1. Vou tentar escrever essa no modo roots, sinal de menor <, h1, aí eu fecho o sinal. Só de eu fechar o sinal, ele já colocou o outro h1 fechando.
Isso aqui, teoricamente, está errado, porque eu teria que colocar isso, "Atletas do Brasil", entre esses dois textos, então eu escrevo aqui: Atletas do Brasil. Eu posso tirar esse outro. Agora sim, bem melhor, gente.
Deixa eu dar um zoom. Isso aqui é 150 de zoom? Maravilha.
Eu queria que no meu site, Rafa, tivéssemos a possibilidade de digitar o nome do atleta que queremos buscar na nossa base de conhecimento. Então, para poder colocar esse campo, eu não acho legal colocar isso tudo no cabeçalho. No cabeçalho podemos deixar apenas o título da página e aí colocamos na parte do meio, na parte do conteúdo principal, essa parte do campo de pesquisa, um botãozinho para poder pesquisar.
Então, assim como temos a tag header para o cabeçalho, vamos criar uma tag chamada main, que é o conteúdo principal. Lembrando que será do lado de fora do header, porque não vai fazer parte do cabeçalho, é uma tag irmã. Certo, então temos o header, o main, e como eu sei qual tag eu tenho que usar?
Eu tenho que aprender todas as tags do HTML para depois criar uma aplicação, um site, ou eu posso pesquisar por tags? Eu acredito que, com o tempo, você estudando, você praticando, você vai se acostumar a usar algumas tags mais comuns, mas algo que você pode usar como uma ferramenta para lhe ajudar é o próprio Gemini. Você pode até perguntar de uma forma mais aberta, assim, por exemplo, você comentou sobre ter um campo para as pessoas fazerem uma busca na sua base de conhecimento.
Você pode perguntar para o Gemini, sem muita tecnicalidade na pergunta: Eu estou escrevendo o meu arquivo HTML, qual tag eu posso utilizar para permitir que o usuário escreva uma busca na minha página? Então eu vou fazer isso, vou clicar aqui no "+", e digitar: Estou criando um HTML e preciso de um campo para as pessoas digitarem uma pesquisa. Pode ser?
O que você pensou, Rafa? Digitarem palavras para poderem fazer uma busca? .
. . palavras para realizar uma busca em minha base de conhecimento.
Aí usando aquela boa prática de sempre direcionar uma ação, você pode fazer uma pergunta: qual tag HTML eu posso usar? Qual tag HTML eu posso usar? Beleza.
Então, isso é um ponto legal, gente. . .
Ele falou: no HTML, a tag para criar um campo onde o usuário pode digitar palavras para realizar uma busca é o input. Ele fala, ele explica o porquê do input. Sempre uma ação que você quer colocar na sua aplicação, no seu código HTML, e você não sabe exatamente a tag que você precisa para aquela determinada ação, que provavelmente vai existir uma tag para o que vamos querer fazer, podemos usar o Gemini para descobrir essas tags.
Ele dá um exemplo para nós aqui. Input, o tipo de texto, e coloca aqui, eu vou chutar esses nomes aqui, type e esse placeholder são atributos, né? Certo.
- Eu posso copiar esse código? - Manda ver. Vou copiar, "Ctrl+C" desse código aqui, vamos lá no nosso projeto, "Ctrl+V".
"Digite a sua busca". Não é a busca. "Digite o nome do atleta", pode ser?
Isso. Então, voltando lá no nosso projeto das Olimpíadas. .
. Digite o nome! Nossa, está muito legal, gente, isso aqui.
Agora, para finalizar bonito, sabe o que eu queria? Eu queria um botão. Para isso, podemos utilizar uma tag chamada "button", botão em inglês, e a gente pode colocar logo abaixo do input, para ficar mais organizado.
Tenho uma dúvida, Rafa, apareceram vários, tem o button:b, button:button, button:d. . .
Pode ir no primeiro mesmo! Vamos colocar primeiro o botão. E podemos colocar alguma coisa escrita nesse botão.
O que eu ponho? Pode ser "Pesquisar" já que vamos pesquisar atletas. Vamos ver como ficou.
Melhor, né? Já atualiza o LinkedIn com o HTML, pessoal, porque está muito bom! E eu acho que agora, para finalizar, podemos colocar só um rodapé lá no final da página, colocando coisas como direitos autorais e contato.
Para isso, é só adicionar a tag footer, do lado de fora do main. Certo. O "footer", é rodapé em inglês.
E aqui eu ponho o quê? Um parágrafo? Podemos pôr um parágrafo.
A tag de parágrafo é a tag p, então vamos criá-la. E aí dentro escreve o que você achar legal de colocar no rodapé. Eu aceito sugestões nesse momento, Rafa.
Acho que a gente podia colocar o ano, 2024, atletas do Brasil. . .
E um "todos os direitos reservados". No mesmo parágrafo? Pode ser.
Pode pôr um ponto e colocar todos os direitos reservados. Podemos também adicionar outro parágrafo, se você quiser. Talvez um "entre em contato pelo seguinte e-mail".
Entra em contato pelo e-mail, dois pontos, aí você coloca aí um e-mail. Vou colocar guilherme@atletas. com.
Legal. Espero que não exista esse e-mail, gente. Se alguém receber esse e-mail, por favor, me perdoe, mas é o guilherme.
atletas. com. br, Legal.
Vamos ver como ficou. Voltando lá na nossa aplicação. .
. Está muito profissional isso aqui. Mas parece que ele está sem brilho.
Não mexemos com cor, nem com posicionamento. Nada. Parece que é tudo a mesma coisa.
Não tem separação do header, do footer, a fonte toda preto. O que precisamos fazer agora é mudar com o CSS, como comentamos antes. O HTML é a linguagem de marcação, agora vamos usar uma linguagem de estilização para poder deixar tudo mais bonito!
Como a gente começa a fazer isso? Primeiro, precisamos criar um arquivo lá no nosso projeto. Interessante.
Então, se queremos um arquivo HTML fica ". html". Se queremos um arquivo JavaScript, será ponto seguido de alguma coisa.
Um arquivo CSS é ". css". Certo.
Aí temos um problema. Dou o nome de "index. css" para ele?
Não. Como se trata de estilos, podemos colocar "style. css".
Em inglês. Isso é comum, pessoal. A gente coloca esse nome porque é padrão, vários projetos estão dessa forma.
É "styles", no plural. E é curioso que, aqui embaixo, ele já está reconhecendo, ele está deixando CSS e HTML ali embaixo. O Visual Studio Code já vai reconhecer.
Os ícones dos arquivos são diferentes também. Isso ajuda. Para cada linguagem, temos um formato de escrita.
Com o HTML, vimos aquele negócio de abertura e fechamento, maior que, menor que, barra. . .
Isso é HTML. No CSS, a gente lida de uma forma completamente diferente. O que a gente faz?
A gente pega qual elemento, qual tag queremos estilizar, e escrevemos ela, e depois a gente coloca todas as estilizações que queremos fazer. Vamos pegar, por exemplo, uma tag. Vamos pegar uma tag para estilizar e vocês entenderem esse formato.
Vamos começar pelo body? Pelo body. Então, teoricamente, não preciso de abertura e fechamento no CSS.
Vamos só escrever "body. " Legal. E agora?
Para a gente fazer as estilizações, também precisamos indicar que tudo que vem a seguir está nesse body, é a estilização do body. Então, a gente abre e fecha as chaves. Aí eu dei um "Enter" e ele está piscando ali.
Isso. Beleza. O que precisamos fazer agora para mudar o visual?
Existem inúmeras e inúmeras propriedades para cada coisa que queremos no CSS. Vamos começar pelas mais utilizadas. Primeira delas: background-color, ou seja, cor de fundo.
Podemos colocar dentro das chaves: background-color. Assim que se escreve no CSS. Ele até preenche.
Ah, que legal. Depois dis dois pontos aparece um monte de cores. Posso escolher qualquer uma dessas?
Sim, pode escolher. Vou escolher a coral. Se eu for na aplicação, já mudou?
Precisa salvar. Depois de salvar, vamos para o navegador ver como ficou. O fundo ainda está branco.
. . Estranho, né?
Como que o nosso HTML consegue entender que esse arquivo CSS se refere aos elementos que escrevemos no HTML? Precisamos fazer um link entre esses dois arquivos! Nós criamos um HTML e criamos um CSS, mas eles estão separados.
Esse CSS não está errado. Não. Eu preciso falar assim: "HTML, usa esses estilos".
Beleza. Como eu faço isso? Eu vou chutar que não é no body.
Porque o body é o conteúdo que queremos ver. Provavelmente é em algum lugar. .
. Ali dentro do head. No head.
Para fazer o link, vamos utilizar a tag link. Então pode aí escrever link e aparece "link:css". É esse mesmo que queremos.
Vou dar um "Enter". É isso mesmo. Então ele está referindo a uma stylesheet, que é um arquivo de CSS.
Ele está colocando aquele atributo href para fazer a referência a qual arquivo queremos linkar. Perfeito. Vamos ver se funcionou.
Não funcionou ainda. E eu tenho um palpite aqui. O nosso arquivo se chama styles, no plural, e aqui está no singular.
Perfeito. Você aí de casa deve estar pensando: "nossa, eles colocaram errado". Não, gente.
Isso foi totalmente planejado desde o começo. O que queremos fazer? Esse nome que vai estar no href deve ser exatamente o nome do arquivo que criamos.
E não está assim. Aqui ele está no plural e aqui ele está no singular. Então eu tenho duas opções.
Ou deixo esse aqui no plural ou aquele no singular. Eu vou fazer o contrário, vou nomear esse no singular. Vou clicar com o botão direito, pedir para renomear e vou tirar o S, vai ficar só "style".
Agora, a cor de fundo da aplicação mudou. Mas essa cor é um pouco demais, para a gente ver. Rafa, você sugere alguma outra cor?
Acho que a gente poderia deixar algo mais cinza claro, uma cor mais interessante. Podemos adicionar outra cor. Como você tinha feito, está ali a palavra "coral".
Mas, assim como podemos utilizar cores que ele já deixa pré-definida em texto, podemos utilizar também os hexadecimais, cores em hexadecimal. Para isso a gente coloca o símbolo de hashtag, jogo da velha, seguido do valor em hexadecimal. No caso, a gente podia pôr um cinza meio claro, o hexadecimal dele é: #DDDDDD.
São 6 D's. Fácil de decorar. Pode ser maiúsculo.
Beleza. Vai ficar uma corzinha diferente. É importante termos essa referência da representação por código hexadecimal.
O VS Code deixa bonitinho com esse quadradinho da cor, mas eventualmente vamos ver código em outros lugares, no GitHub, na internet, e vai ver só o código, não vai aparecer esse exemplo do quadrado colorido. Se você ficou curioso em saber paletas de cores, combinações de cores, acho que era um momento bacana de usar o assistente Gemini para pedir sugestões de, por exemplo, três cores que façam sentido pra aplicação. Inclusive, a gente já resolveu o background-color, mas se você perguntasse para o Gemini: "Estou escrevendo o arquivo CSS do meu site e quero mudar a cor de fundo.
Qual tag eu posso usar de CSS? " Ele pode ajudar. Já mudamos a cor, se a gente quer mudar o alinhamento, por exemplo, podemos perguntar para ele.
Legal. Eu quero mudar. Eu vou fazer esse teste aqui.
Vou fazer o seguinte prompt: Estou criando um projeto com HTML e CSS e gostaria de alinhar todos os meus textos ao centro da tela. Posso usar o nome "atributo" para essa pesquisa? Não, no caso, o atributo era o que a gente tava vendo ali no HTML, por exemplo, href, aquelas palavras dentro da tag, que não são a tag.
No CSS, o que queremos mudar são as propriedades. Como o background-color. .
. Vamos ver agora aí qual propriedade podemos usar para alinhar. "Qual propriedade eu posso usar para isso?
" Dei um "Enter", e ele passouum exemplo. text-align, dois pontos, center. Legal.
Vamos testar isso. Vamos digitar. Não peguem só o "Ctrl+C" e o "Ctrl+V" e coloquem, digitem, principalmente se você estiver no começo.
Então, text-align. . .
dois pontos. . .
Center. Ponto e vírgula. Lembrando que no CSS temos ponto e vírgula a cada linha.
É sempre propriedade, dois pontos, o valor, e aí o ponto e vírgula. Eu não faço ideia de como ficou o projeto, vamos dar uma olhada? Três, dois, um.
. . Nossa!
Bem mais legal já. Tá ficando muito profissional. Já pode atualizar o LinkedIn agora com HTML e CSS.
E o próximo desafio. . .
Rafa, está todo mundo juntinho. Seria legal se a gente pudesse melhorar o posicionamento agora, os espaçamentos e essas outras informações. Eu realmente gostei muito do desafio do CSS de alterar a cor, posicionar os elementos, porém, no mundo real, um projeto vai exigir muitas propriedades, né, Rafa?
Muitas. Então, milhares, centenas de linhas de código. E o objetivo não é a gente ficar desenvolvendo CSS desde o zero.
Entendemos que o HTML precisa de uma estrutura. Então temos o header, temos o main. .
. Só um ponto, Rafa. No main, geralmente, ele tem mais de um conteúdo.
Tem mais informações ali dentro, não tem só um conteúdo. De alguma forma, seria bom se a gente conseguisse dividir esse código do main. Sim, podemos agrupar algumas tags, dentro de outras.
Então, se a gente fosse colocar outras tags dentro do main, sei lá, uma imagem, depois um parágrafo enorme embaixo, vamos agrupando cada uma das tags para colocar cada coisa no seu lugar, principalmente usando o CSS. Então, podemos, por exemplo, colocar aí uma tag section, uma tag que vai informar que aqui é uma seção. A seção de pesquisa, que tem dentro o input e tem o botão.
Pode adicionar essa tag. Coloquei a section, ela abre e fecha. Vou tirar essa parte que ela fecha e colocar embaixo no fim do bloco.
Vou selecionar todo o código com "Ctrl+A. E usar o "Ctrl+Alt+F" para ele identar o código, vai organizar a formatação. Isso ajuda até a pessoa que vai trabalhar nesse projeto.
Ajuda a ler o código, entender o código, com certeza. Maravilha, a gente criou essa section. Vamos usar aquele CSS mágico?
Vamos! Esse CSS vai ficar disponível para você no link da descrição, que tem um monte de código, é um monte de código CSS. "Ctrl+C" de todo esse código, vou lá no nosso projeto, no style.
css, vou deletar esse body que eu tinha feito e dar "Ctrl+V". Antes de visualizar a aplicação. .
. para a gente entender. Ele importou uma fonte, lá do Google Fonts, Olha que interessante.
Ele trouxe aqui uma fonte diferente, isso é curioso. Você pode usar o Gemini para perguntar como importar uma fonte do Google Fonts e ele vai mostrar o passo a passo para você conseguir utilizar. Estamos utilizando essa fonte que foi importada, a cor do background é a mesma que estamos utilizando.
Está usando o Flexbox, que é outra forma para a gente conseguir posicionar os elementos na tela. Aí tem um monte de coisa. Tem font-size, o tamanho da fonte, a cor que vamos usar na fonte, então existem duas propriedades interessantes.
Se queremos alterar a cor de fundo, background-color. Se queremos alterar a cor do texto, é só color. E assim vai.
Pessoal, não precisa, nesse primeiro momento, memorizar todo esse script. Se você tiver tempo, deixa eu ir digitando para ver passo a passo que cada uma dessas propriedades estão fazendo é uma boa. Se não, pode copiar e colar esse código no projeto de vocês.
O código já tem alguns comentários. Fica bem intuitivo de entender. Ou também você pode pegar um trecho e pedir pro Gemini explicar.
Pedir para ele explicar o que esse trecho de CSS faz. Ele pode expandir um pouco mais o que você já colocou no comentário da linha. Vamos fazer isso?
Acho que seria bacana. Vou copiar esse trechinho só para a gente dar uma olhada lá no Gemini. Uma prática que eu já vi também é colocar o código dentro de três crases.
Três crases no início e três crases no final, e conseguimos identificar que tipo de arquivo é esse. Por exemplo, CSS. Posso escrever assim: "Tenho um CSS com essas propriedades, pode me explicar o que cada uma delas faz?
" Dá "Enter". Interessante, esse text-decoration a gente não tinha visto ainda. O item-resultado é o seletor que vamos usar, que a gente nem criou ainda, mas vamos usar na próxima aula.
É quase um spoiler isso aqui. Tem um text-decoration, a propriedade que controla a decoração do texto. E o none, que é um valor pra gente não incluir essa decoração, esse sublinhado, no item-resultado.
Vale a gente perguntar quais outros valores podemos utilizar para text-decoration? Boa, vamos fazer isso. Uma coisa que eu acho que podemos indicar muito vocês fazerem é brincar com esses códigos todos que estamos passando pra vocês.
Se quiser mudar a cor do CSS. . .
Vai lá, pesquisa aqui, pergunta para o Gemini, qual que é o hexadecimal para uma cor rosinha? Ele vai te colocar algumas opções, você pode escolher dessa forma e vai programando a sua página conforme você quer. Fica até o convite para galera, conforme for brincando com essa customização, com esse estilo, compartilhar com a galera lá no Discord, da imersão, que vamos ver também, as outras pessoas que estão na imersão vão poder compartilhar essas ideias e colaborar.
Nossa, vai ficar bem legal. Vamos ver o projeto? Bonito!
Vou dar um zoom para ficar mais bonito ainda. Vamos visualizar melhor. Lembrando que o projeto não se trata da mesma base de conhecimento para todo mundo.
A base que vamos usar será sobre os atletas do Brasil. O tema é esse, pessoal. Mas você que está em casa, você pode escolher o seu tema, você quer falar sobre séries, filmes, cartas de jogos de tabuleiro.
. . Você pode fazer o projeto com essa base de conhecimento.
Qual será o nosso próximo desafio antes de encerrar a nossa aula de hoje? A gente criou aqui a estrutura com HTML e aplicou uns estilos com CSS. O próximo desafio é: vamos precisar exibir os resultados dessa busca e o que a gente vai querer mostrar.
Você vai poder escolher o que vai mostrar como resultado da sua base de conhecimento. Quero mostrar o link do Instagram de um determinado atleta ou quero abrir informações de outro site desse atleta. .
. Você vai poder fazer isso. Ou da base de conhecimento que você estiver criando.
Então, é sobre isso que nós estamos falando, gente! Aprender desenvolvimento com inteligência artificial. Que oportunidade única, né, Luciano?
Sem dúvida. E uma das coisas que eu recomendo bastante é se habituar, como você demonstrou enquanto a gente estava exercitando, você não simplesmente usar o Gemini para gerar algo, copiar e colar. E sim usar como ferramenta para você entender o conceito por trás da linha de código ou por trás daquela estrutura.
E ainda, eu acho legal o exercício que você fez, de não usar o "Ctrl+C", "Ctrl+V", até para você praticar mecanicamente aquilo que foi sugerido. Então, viu, entendeu, achou legal a ideia que foi dada pelo Gemini, vai no seu VSCode, vai no seu código e digita manualmente para se habituar com aquela estruturação. É isso aí, é sobre isso!
Lembre-se que essa foi a nossa primeira aula e para que você tenha acesso ao seu certificado é necessário que você assista às cinco aulas. Além de acessar o Gemini usando o link que está aqui embaixo. Eu espero que você tenha gostado muito dessa aula, não deixe de fazer parte da nossa comunidade do Discord, converse com outras pessoas, veja o código de outras pessoas também, às vezes pega um trecho lá que não entendeu, copia e cola lá no Gemini, e pergunta o que esse código faz.
Tenta aprender, tenta procurar, porque isso será um fator muito diferencial para a sua carreira também. E compartilha lá o que vocês construírem, que vamos estar lá pelo Discord também. Vamos estar trocando ideia com vocês e será massa ver o que vocês estão construindo.
É isso aí! Se prepara que amanhã temos o desafio do dia 2.
