HTML e JSON na Web: Fundamentos de Intercâmbio de Dados

Texto original

O texto original pode conter falhas de gramática ou de concordância, isso ocorre porque ele foi obtido por um processo de extração de texto automático.

Texto extraído do video Algoritmos e Programação de Computadores II - HTML e JSON

O Lá pessoal, bem-vindos novamente, nossa disciplina de algoritmos e programação de computadores 2.
Nesta semana, a gente está vendo uma aplicação específica que é a Web.
Na aula passada, a gente viu alguns conceitos principais da Web e de Internet, incluindo o RL, o esquema, o roste, entre vários outros conceitos que a gente viu, que são importantes para entender esta aplicação.
E nesta visual, a gente vai aprender um pouquinho sobre HTML e JSON, onde o HTML, principalmente, é usado pela aplicação Web para fazer a comunicação, a troca de mensagens e a exibição do conteúdo formatado para o uso ar.
Então, é importante a gente entender um pouco sobre o intercângu de dados.
Então, a troca de informações entre diferentes aplicações permite que os programas sejam bem aceitos e difundidos.
Então, se você cria um programa para, por exemplo, fazer gravação ou fazer a reprodução de vídeos, e você usa um formato próprio para esses vídeos, não vai ser bem aceito o seu programa, porque a gente tem hoje em dia diversas câmeras, diversas aplicações, comerciais ou não, que fazem a manipulação de vídeos, e são mais aceitos do que a tua aplicação.
Então, a sua aplicação para ela ser utilizada por outros usuários, ela deve obedecer algumas especificações, alguns padrões que já são bem difundidos.
Então, para fazer intercâmbio de dados, as padrões ações são bastante importantes, que vão definir exatamente como qual que é o formato, daquele vídeo, daquela imagem, daquele áudio, que as aplicações deverão seguir, deverão obedecer.
Então, para a viabilizar essa comunicação, é necessário que as aplicações sigam esses padrões que foram previamente especificados.
E dois desses padrões que a gente vai ver nessa videoaula, que é o HTML e o JSON.
Então, no caso do HTML, a gente viu na aula anterior, que a gente viu duas mensagens de requisição em resposta, entre o cliente, o servidor, então, no caso, essa seria a mensagem de requisição e essa mensagem de resposta do servidor.
Reparem que aqui a gente tem o código em HTML, que é o conteúdo daquela página, que o cliente requisitor.
Então, se o cliente for uma vegador web, que daí pode ser qualquer navegador, porque os navegadores, eles, certeza que eles vão entender a linguagem HTML, ele vai conseguir interpretar essa resposta e apresentar o conteúdo na tela de uma maneira formatada, com cores, com textos sublinhados, com imagens, com plano de fundo diferente, é sim por diante.
Além do conteúdo em si, uma página web contém esses elementos que vão definir o layout da página, como também cabeçalhos, imagens, vídeos e perlinx.
Então, eu vou mostrar um exemplo aqui para vocês, que é o mesmo que está nessa figura.
Eu tenho aqui uma página HTML, que é essa que está definida nesse oRL aqui em cima.
Esta página, então, eu especificei esse indireço aqui no meu navegador.
O navegador fez a busca por esta página, lá no fez a requisição por esta página, lá no servidor, e o servidor me retornou a resposta, que contém um código HTML, e esse código em HTML foi processado pelo meu navegador, e eles ibi o conteúdo aqui processado na minha tela.
Tanto é que eu posso vir aqui no meu navegador, clicar em View Developer e ver o Search.
Nesse caso, eu estou pedindo para o meu navegador mostrar para mim o código HTML que ele processou.
Então, reparem que aqui eu tenho o código em HTML daquela página que eu mostrei para vocês.
Então, reparem que aqui eu tenho, por exemplo, as tags HTML, tenho a minha tag, por exemplo, que é para criar um hyperlink, um formulário entre outras tags, aqui, que são tags específicas do HTML, que especifica uma determinada formatação para aquele conteúdo que vem a seguir.
Então, o HTML é uma linguagem que permite definir cabeçalhos, listas, imagens, vídeos e perlins em uma página web.
Então, a gente vai usar o que a gente chama de elementos HTML, que cada um desses elementos vai ter uma função específica, um elemento pessoal possui esse formato que está aqui.
Então, a gente tem o nome da do elemento, a gente, o elemento em si é composto por tags, a gente tem uma tag de início e uma tag de fim.
Repare que o nome da tag é o mesmo para início e fim, sendo que a tag de fechamento, ela tem a sabarra indicando que eu estou finalizando aquele elemento.
E dentro da tag de início, a gente pode ter um ou mais atributos referentes a esta tag.
E esses atributos têm o nome do atributo igual e o valor daquele atributo.
E aí, no meio dessas duas tags, a gente tem o conteúdo em si, que é o conteúdo, os dados, que estão envolvidos por essas tags.
Tudo isso é o que a gente chama de elemento HTML.
E aí, cada elemento HTML vai ter uma função específica.
Por exemplo, aqui eu tenho neste figura, o apagna já processada.
Tenho, por exemplo, esse informação W3Micham.
A gente verifica que este texto está aqui, né? Está no código HTML.
Então, para a gente poder exibir este texto aqui em letras maiores e negritos, a gente está usando o elemento H1 aqui envolvendo o texto.
A gente tem a tag P, que indica um novo parágrafo.
A gente tem a tag H2, que indica também uma outra formatação de um cabeçalho.
Temos aqui também uma lista com esses bullets, que a gente usa as tags URL e LI.
Entri várias outras tags que eu não vou falar de todas.
Sugiro que vocês dêem uma pesquisada para entender essas outras tags, esses outros elementos, da linguagem HTML.
Um elemento HTML pode estar contido em um outro elemento.
Então, por exemplo, você tem aqui o elemento title.
Que tem o fechamento dele aqui embaixo.
E esse elemento title está contido dentro do elemento red.
Então, quando a gente tem um elemento dentro do outro, a tag title, por exemplo, tem que ser fechada antes da gente fechar a tag do elemento que está a nível acima.
Isso é importante.
Tomar esse cuidado para que você consiga seguir a especificação do HTML de uma maneira correta.
E os elementos de um documento HTML podem ser vistos com uma árvore hierarca.
Então, eu imagino que eu tenho aqui, na esta figura, uma página HTML.
Eu consigo representar esta página por meio de uma árvore.
Então, eu tenho a minha tag HTML, que inicia aquela página.
Dentro dessa tag HTML, eu tenho uma outra tag red.
Dentro do red, eu tenho um title.
E dentro desse title, eu tenho um texto em si, que é o W3CMichon.
Depois, eu tenho uma outra elemento que é o bar.
Esse bar tem alguns elementos contidos ali, como o H1, o P, o H2, o L e o A.
E aí, cada um deles também pode ter mais elementos inseridos ou o próprio texto.
Aí entra um elemento que é bastante importante, que é a âncora.
Então, esse elemento âncora serve para criar textos que vão ser, na verdade, perlinx, para outras páginas que, quando zoar o clicar, o navegador vai acessar esta outra página.
Então, um elemento âncora, o tag desse elemento é o A.
E a gente tem um atributo desse A, que é o HF, que a gente coloca a URL desse novo recurso, que esse texto aqui, que é o hyperlink, vai estar apontando.
Então, quando você vai visualizar esta página que é processada no navegador, a gente vai ter esse texto em hyperlink, em uma forma tada diferente, normalmente sublinhado em azul.
E aí, quando você clica com o mouse em cima desse texto, o navegador vai acessar a outra página.
Imagina aqui, então, por exemplo, naquele que eu mostrei antes para vocês.
Eu tenho essa tag A, que ela aponta para uma outra URL, que, na verdade, é um caminho relativo em relação ao A.
E aí, eu tenho um texto aqui, standards, que vai estar lá no meu, na minha página.
Então, se a gente voltar aqui na página já processada, a gente vai ter em algum lugar aqui.
Então, o standard está aqui embaixo.
Então, quando a gente clica em standards, a gente vai acessar aquela página que está sendo apontada por aquele hyperlink.
Então, aqui mais um exemplo para vocês visualizar, que é um link para uma outra página.
Beleza.
E aí, a gente tem agora o JSON, que é uma linguagem também, de intercambio de dados, que define um formato padrão para descrever, em formato texto, objetos como dicionários, listas, números e strings.
Então, uma maneira de você dar um objeto, por exemplo, na linguagem Python, como uma lista, uma objeto qualquer, é uma maneira de você representar esse objeto, seguindo uma podronização conhecida em formato texto.
E aí, esta representação pode ser processada por outras linguagens, como uma linguagem C, que já estava entre outras linguagens, que entendem a especificação de JSON.
E por conta disso, você consegue comunicar os dados do teu programa numa determinada linguagem com uma outra linguagem em qualquer.
E aí, a maioria das linguagens de programação possui biotecas para produzir processados no formato de JSON.
Então, vamos ver um exemplo aqui.
Então, a gente tem um módulo de JSON, que a gente tem que importar ele.
E aqui é um exemplo onde eu estou criando um dicionário, coloquei aqui alguns elementos neste dicionário.
E eu vou usar a linguagem ou a especificação de JSON para criar uma representação textual, seguindo a especificação de JSON deste objeto de que eu creei.
E para isso, a gente usa a função dumps, passando o objeto comparando.
E aí, agora, eu tenho aqui o jd, que é o formato à representação textual em JSON deste meu objeto de que é um dicionário.
A gente pode usar essa função dumps, tanto para adicionários como para listas, como para valores inteiros.
Então, não é específico para adicionar.
Você pode usar qualquer objeto aí.
E desse lado, eu tenho o processamento de uma variável de um conteúdo em JSON.
Então, aquela minha variável jd está em JSON e aí, eu estou processando por meio da função loads.
E essa função vai ler este arquivo, este, esta variável, que é uma estrinha, e vai processar isso e vai criar para mim o meu dicionário, que eu estou colocando aqui nessa variável dd.
E reparem aqui, pessoal, que eu estou consultando o tipo destas, os tipos de cada uma dessas variáveis.
Então, no caso do jd, ele vai me retornar um ST, que é uma string, embora essa string esteja no formato de JSON.
E aqui embaixo, eu estou consultando o d, que é o objeto, que eu crie aqui em cima, que é do tipo de sonário, e ele me retorna aqui também o tipo, que é do tipo d, e se a gente fizer type de d,d, que é esta aqui de cima, também ele vai me retornar um d, porque a função loads é a processa, essa string, e já converte para o tipo correspondente.
Muito bem, pessoal, então, esta foi a nossa videoaula sobre HTML e JSON.
Na próxima videoaula, a gente vai aí sim colocar a mão na massa, e vai, a gente vai ver então algumas de biotecas para fazer processamento de elementos, de conteúdos da Web.
Então, obrigado pela atenção de vocês, a gente se vê na próxima videoaula dela.