Episódio 07: Extraindo texto da página de referência usando ferramentas de desenvolvedor

Para solicitar alterações no Chat-GPT com base no site de referência, é importante encontrar o script utilizado no site de referência.

Mesmo que você se esforce para explicar, haverá coisas que você sentirá falta. Por exemplo, é difícil explicar a animação de alternância e se ela é executada de forma síncrona ou assíncrona com um script que a altera para compartilhar quando o botão de alternância é pressionado e desativa o compartilhamento quando o botão é pressionado novamente. Primeiramente gostei da forma como funcionou no site de referência, então expliquei da mesma forma, mas o script que roda pode não estar otimizado por ser um código gerado recentemente. No caso de referências num serviço comercial, casos de exceção, como quando ações que se desviam da política, já estão incorporadas no código com base no feedback do utilizador.

Atualmente, a partir de 2024, não haverá novas tecnologias no funcionamento de todos os serviços da web. Claro, existem melhorias de código e novas tecnologias CSS para efeitos de animação, mas se você observar o princípio de funcionamento, não há quase nada de novo. Em outras palavras, conseguir consertar algo que já foi fabricado pode ser uma habilidade importante.

A tela que você vê agora é o campo de entrada de endereço da Amazon.com. Assumimos que entre esses campos de entrada de endereço, indicamos o campo de entrada País.

Clique nos três pontos no canto superior direito do navegador Chrome.

Selecione Mais ferramentas > Ferramentas do desenvolvedor. A tecla de atalho é F12 ou Alt+Ctrl(Command)+I.

Clique na engrenagem vermelha.

Verifique as configurações na parte superior para indicar o código js.

Clique na caixa vermelha no canto superior esquerdo das Ferramentas do desenvolvedor. Esta ferramenta é a ferramenta de seleção de itens. Depois de ativar a ferramenta de seleção de itens, passe o mouse sobre a área que deseja apontar.

Dessa forma, quando você passa o mouse sobre um item, apenas aquela área é exibida. Podemos especificar os elementos HTML, CSS e JS usados ​​nesta região usando seletores¹ que definem a região.

READ  Na aquisição de “apartamento de herança conjunta” é possível herdar a filiação sindical do falecido?

Escolha o identificador mais exclusivo usado. No exemplo, o código do país parece ser o mais distintivo.

Assim, pesquise digitando o código do país no campo de pesquisa.

Como você pode ver, você pode importar código CSS (estilo) e JS.

Solicite isso ao ChatGPT para análise.

Desta forma, o GPT pode analisar o código utilizado na área que desejamos. Agora, se você quiser submetê-lo ao nosso serviço com base nisso, você precisa explicar que ele precisa ser consertado para se adequar ao nosso serviço.

Dessa forma, mesmo os formandos que não são de desenvolvimento podem fazer desenvolvimento profissional por meio do Chat-GPT.

¹Em HTML, seletores de classe são usados ​​para aplicar estilos ou comportamento a elementos específicos em uma página da web, fornecendo aliases a esses elementos. Usando esses aliases, você pode definir e gerenciar facilmente elementos específicos durante a programação.

Como usar o seletor de categoria:

Defina uma categoria: Adicione um atributo de categoria ao elemento HTML desejado e atribua um alias a este elemento. Por exemplo, O botão recebe o apelido de Botão Vermelho.

Definindo uma classe em CSS: Em CSS, você pode usar um ponto (.) para especificar este alias (classe) e aplicar um estilo a este elemento. Por exemplo, .redbutton { color: red; } Define a cor do texto de todos os botões com a classe Red Button como vermelho.

Os seletores de classe são ferramentas úteis no desenvolvimento web que ajudam a diferenciar efetivamente os elementos e aplicar facilmente estilos e comportamentos.

Você pode identificar padrões definindo categorias dentro de tags. Os delimitadores de categoria começam com um ponto (.), seguido pelo nome da categoria. Exemplo: .box { cor de fundo: azul; } Define a cor de fundo de todos os elementos com a classe Box para azul.

READ  Instituto de Recursos Geológicos, desenvolvimento completo da tecnologia de utilização de recursos espaciais

Deixe um comentário

O seu endereço de email não será publicado. Campos obrigatórios marcados com *