YT YouTube2Text

YouTube2Text → Transcripts → [UFMS Digital] Fundamentos de Web - Módulo 1 - Unidade 1

[UFMS Digital] Fundamentos de Web - Módulo 1 - Unidade 1 — Transcript

by AGEAD UFMS · 4,294 words · 735 segments · language en · Watch on YouTube

Open in transcriber Summarize with AI Download SRT/VTT

Full transcript

0:00[Música]
0:04Olá a todos. Eu me chamo Leonardo Silva,
0:07sou professor especialista da disciplina
0:09de fundamentos de web. Este é o primeiro
0:12módulo da nossa disciplina e nesta
0:14unidade vamos conversar um pouco a
0:16respeito da evolução da internet e a
0:19origem das linguagens de marcação, que
0:21são as linguagens que no futuro deram a
0:24nós a possibilidade de construir os
0:27sites, as páginas que hoje utilizamos.
0:30Eh, sempre que eu trabalho com essa
0:32disciplina, um questionamento que eu
0:34gosto de fazer aos alunos é que você
0:37pare por um minuto e se imagine há cerca
0:40de 30 anos atrás em um mundo onde a
0:44internet não existia ainda. Pense como
0:49seria sua rotina acadêmica trabalhando
0:53eh sem internet.
0:55No nosso caso em particular, não
0:57estaríamos aqui hoje aprendendo um novo
1:00conteúdo, porque usamos e estamos hoje
1:04dependentes 100% de toda essa tecnologia
1:07que agora vamos começar a trabalhar.
1:10Mas independente disso, imagine a sua
1:13rotina de se matricular em uma nova
1:15disciplina. Imagine sua rotina de ver a
1:18sua nota ao final do semestre. Imagine a
1:22sua rotina de precisar fazer um
1:24requerimento acadêmico solicitando o
1:26aproveitamento do de horas de estágio,
1:29as horas de extensão.
1:31Você precisaria, assim como muitos de
1:34nós eh fizemos no passado, ir até a sua
1:38unidade,
1:39eh muitas vezes pegar uma fila,
1:42preencher um formulário físico, andar
1:45atrás de assinaturas para que isso
1:47pudesse então ser processado.
1:51E nem ainda mencionei que posteriormente
1:53deveríamos voltar para retirar esse
1:55documento ou ver a resposta dessa dessa
1:59solicitação.
2:01Então, hoje vivemos em um mundo
2:03altamente conectado e que tem alterado a
2:06cada dia a maneira como trabalhamos,
2:09como nos relacionamos, como até
2:12estudamos. Veja que neste momento eh
2:16estamos reunidos em diferentes partes
2:18deste país, todos juntos.
2:21acessando este conteúdo que agora está
2:23sendo apresentado na área de tecnologia
2:26em especial, a evolução da internet, o
2:30surgimento da internet causa uma
2:32revolução.
2:34Eh, talvez você ainda não tenha
2:36consciência do quanto isso foi eh
2:40desafiador e causou mudanças profundas
2:43na maneira como os sistemas são
2:45pensados, como os sistemas são
2:47utilizados pelas pessoas. Eu gosto de
2:50citar, por exemplo, o caso do acesso ao
2:53banco que hoje temos no nosso celular.
2:56Eh, muitos de nós, eh, que são um
3:00pouquinho mais velhos, vamos nos lembrar
3:02que antigamente nós precisávamos ir até
3:05o banco, requisitar o software do banco,
3:09esse software deveria ser instalado em
3:11nossas máquinas. E então nós acessávamos
3:16por meio de uma rede de escada. Na época
3:19nós não tínhamos a internet abundante ou
3:22à disposição como temos hoje. E esse
3:26acesso então ocasionava a transferência
3:29de informações para que pudéssemos
3:31consultar o nosso saldo, ver o extrato
3:34da nossa conta. Hoje, a qualquer
3:37momento, de posse do nosso celular ou de
3:40um computador, podemos acessar o nosso
3:42banco, fazer transações, transações
3:45muitas vezes complexas,
3:48isso da nossa casa, do nosso trabalho,
3:51da rua, no momento em que estamos
3:54praticando um esporte, eh, de várias
3:57maneiras, certo? Mas neste começo, nesta
4:01unidade, vamos conversar um pouquinho de
4:03como chegamos até aqui. Para que
4:06possamos avançar no estudo dessas
4:08tecnologias, é importante saber de onde
4:10partimos. Para isso, acho que uma
4:13primeira
4:15questão que surge é, estamos falando de
4:19internet, da Worldide Web, do www, da
4:24web. Todos esses termos se referem à
4:27mesma coisa.
4:29Por que então que a nossa disciplina não
4:30se chama fundamentos de internet ou por
4:34ela tem o nome de fundamentos de web?
4:37Certo? Então, ao longo deste módulo em
4:40particular, nós vamos discutir um
4:42pouquinho desta evolução, entender como
4:45caminhamos para esse cenário que hoje
4:47vivenciamos.
4:50E para isso, voltamos lá nos anos 50.
4:53Estamos numa época eh de Guerra Fria.
4:57Vocês vão se lembrar das aulas de
4:59história que existia uma polarização
5:02entre Estados Unidos e naquela época a
5:05União das Repúblicas Socialistas
5:07Soviéticas, a ameaça de uma guerra
5:09nuclear era presente. Então, neste
5:13contexto, eh, surge um projeto militar
5:16nos Estados Unidos que partia da
5:19seguinte proposta: construir uma rede de
5:22pesquisa conectando eh instituições
5:27importantes dentro do país para que
5:31essas instituições tivessem a
5:32possibilidade de cooperar entre si.
5:36Esse projeto eh ficou a cargo da agência
5:39de projetos de pesquisa avançada dos
5:42Estados Unidos, a ARPA,
5:45que vem do inglês Advanced Research
5:48Projects Agency. E o objetivo era
5:51justamente esse, conectar diferentes
5:54instituições de pesquisa e
5:56universidades.
5:58A ideia aqui era que nós pudéssemos
6:01fazer o que estamos fazendo hoje,
6:03compartilhar conhecimento, facilitar o
6:06acesso dos pesquisadores
6:09ah ao conhecimento, à informações que
6:11eram produzidas nas universidades.
6:14Novamente convido a você a pensar como
6:17funcionava uma universidade nesses anos
6:2050. Nós tínhamos, por exemplo, não
6:23tínhamos computadores ainda à disposição
6:26para fazer o nosso TCC. fazer o trabalho
6:29de uma disciplina. Estamos falando de
6:31máquinas de datilografia,
6:33papel carbono,
6:35eh malotes, correios. Então, se eu
6:40conseguisse conectar essas essas redes,
6:43conectar essas informações, haveria a
6:46possibilidade de facilitar essa
6:48comunicação exatamente como acontece
6:51conosco nos dias de hoje. E esse projeto
6:54militar lá nos anos 50 é o que ajudou a
6:58estabelecer o protocolo TCPIP, que é a
7:01base da comunicação que nós usamos até
7:04os dias de hoje.
7:06Ainda dentro desse contexto histórico,
7:09ah, alguns historiadores, ou vocês vão
7:12encontrar na literatura notícias
7:14comentando a respeito eh de que este
7:18projeto, no fundo, o fundo militar dele
7:21ou o objetivo central dele partia de um
7:25seguinte da seguinte questão: como
7:29poderíamos manter o governo em
7:31funcionamento
7:33numa eventual guerra
7:35novamente, Estamos em 1950, Guerra Fria
7:39acontecendo,
7:41eh, os países investindo em tecnologia
7:43nuclear e eventualmente num ataque
7:46nuclear, como eu faria para que o
7:49governo ou o país não ficasse estagnado,
7:53ele não parasse o funcionamento dele? O
7:56que se entendeu naquela época que era
7:58importante ter uma rede que conectasse
8:01instituições que facilitasse essa
8:04comunicação e permitisse que o país
8:06continuasse funcionando mesmo numa
8:09situação bastante adversa como essa da
8:11guerra. Então, no final dos anos 60
8:16surge essa rede do projeto ARPA, que
8:19recebeu a denominação de Arpanet. E
8:22neste primeiro momento, ela conectava
8:24duas instituições bastante conhecidas
8:26nos Estados Unidos, a Universidade da
8:29Califórnia, a UCLA, e a Stanford
8:32Research Institute, ou a Universidade de
8:35Stanford, como a gente conhece
8:37normalmente, é mencionada atualmente.
8:41A ideia aqui era que a partir dessas
8:44duas primeiras instituições
8:47tivéssemos condições de ir conectando
8:50outras instituições de ensino, centros
8:53de pesquisa, que são bastante comuns no
8:56nos Estados Unidos, e formando essa
8:59grande rede que o projeto se propunha.
9:03Então, em 1969,
9:05o final de 1969,
9:08nós já tínhamos quatro instituições de
9:10ensino conectadas a essa grande rede que
9:13estava se formando, a Universidade da
9:16Califórnia, Stanford, a Universidade da
9:19Califórnia em Santa Bárbara e a
9:21Universidade de Utá.
9:24Rapidamente, ao longo dos anos, nós
9:26vamos vendo o crescimento dessa rede.
9:29Então, se em 69 nós tínhamos esses
9:32quatro nós, em junho de 1970, 6 meses
9:36depois, por assim dizer, nós já teríamos
9:39nove nós conectados a essa rede. Ao
9:42final do ano de 1970, nós teríamos três
9:46instituições conectadas nessa rede. em
9:49setembro de 71, quase um ano depois, 18
9:53nós conectados a essa rede. Lembrando
9:56que cada nó aqui representa uma
9:59instituição.
10:00Em 73, 40 instituições estavam já
10:04conectadas nessa rede e então ocorre uma
10:08abertura dessa rede para o mundo.
10:11instituições fora dos Estados Unidos
10:14passam a se conectar a essa rede, a
10:17Arpanet, e passam então a cooperar com
10:21conhecimento, com a disseminação do
10:22conhecimento, com essa rede de
10:25conhecimento que vinha sendo criada. Em
10:281981, nós já tínhamos mais de 200 nós ou
10:33200 instituições conectadas a essa rede.
10:37Ela se torna, então, uma grande rede
10:40mundial. conectando instituições ao
10:42longo de todo o mundo. Em 89, entende-se
10:48que esse projeto já cumpriu o objetivo
10:51dele. Então, entende-se 1989 como o fim
10:56da ARPANET e o surgimento então da
11:00internet. Internet para nós vai ser
11:03sempre a rede mundial de computadores,
11:06essa grande rede que conecta eh que tem
11:11pontos de conexão ao longo de todo o
11:15mundo, de todo o planeta.
11:19Aqui apenas uma imagem de 1974,
11:22como nós vimos aqui, que é quando a é o
11:26momento em que a Arpanet já está aberta
11:29para todo mundo, né? Então, nos Estados
11:31Unidos, nós já tínhamos essa
11:33configuração,
11:35várias instituições conectadas,
11:37cooperando e trabalhando juntas,
11:40disseminando conhecimentos,
11:42pesquisadores de uma universidade,
11:44podendo conversar com pesquisadores de
11:46outra universidade, trocar material,
11:49transferir arquivos e tudo mais.
11:54Mas como era navegar nessa internet?
11:58Veja que essa internet ainda não é a web
12:00que conhecemos.
12:02Eh, nós estamos falando aqui nos anos
12:0580, nos anos 90, eh, nós não tínhamos
12:08ainda essa popularização de computadores
12:11como temos hoje e nós não tínhamos os
12:15computadores que temos hoje. Essa
12:17interface, muitos de nós devemos estar
12:19conectados neste momento usando o
12:21sistema operacional Windows. essa ideia
12:25das janelas, de usar um cursor, de ter
12:28algo visual, ela vai se tornar popular
12:31um pouquinho depois disso, correto?
12:34Então, esse princípio da internet, ele é
12:39diferente do que a gente tá acostumado
12:41hoje. Ele teria muito mais essa
12:45aparência que vocês veem nessa imagem
12:47que está sendo apresentada no slide. era
12:51o modo texto.
12:54Se você abrir o seu computador ou um
12:57terminal no Mac ou um eh um comando de
13:01prompt no Windows, você vai ver aquela
13:04tela negra, preta e você normalmente
13:07interage com o sistema por meio de
13:09comandos.
13:11Era a mesma coisa que acontecia nessa
13:13época. Nesse tempo, normalmente usávamos
13:16sistemas Unix, que é um antecessor do
13:20Linux, como conhecemos hoje. E alguns de
13:23nós até utilizamos o sistema operacional
13:26Linux. E a interação se dava por meio de
13:29comandos em texto. Eu digitava o comando
13:34ou precisava digitar a sequência de
13:37comandos orientando as ações que eu
13:40gostaria de fazer. Essa imagem que está
13:43sendo apresentada aqui para vocês, ela
13:45representa, por exemplo, o envio de uma
13:48mensagem num terminal Linux.
13:51É possível ver ali que ele usa o comando
13:53mail. Esse comando existe até hoje. Quem
13:56usa Linux, quem usa Unix pode usar o que
14:00nós conhecemos hoje como web. E aqui
14:02fazendo um pequeno spoiler do que
14:04veremos a seguir. Eh, é uma interface, é
14:08uma casca que faz, que quebra a
14:11dificuldade muitas vezes que a grande
14:14maioria dos usuários enfrentava nessa
14:16época, a necessidade de conhecer vários
14:19comandos, eh, conhecer os parâmetros
14:23necessários para usar esse comando e a
14:26dificuldade de interação, certo?
14:30Nessa época também, eh, só para ficar
14:33claro, o principal uso dessa grande rede
14:37estava na troca de comunicações, no uso
14:39do e-mail. Eh, nós já tínhamos aqui
14:42presente ferramentas
14:45o avô dos dos mensageiros instantâneos,
14:49como eh conhecemos hoje. Eh, eram
14:53programas que funcionavam nessa nesses
14:56terminais que permitiam conversar
14:59com outro usuário que estivesse numa
15:01outra máquina conectada,
15:04desde que ele estivesse naquele momento
15:06para receber aquela informação. Não
15:09tínhamos ainda toda essa sofisticação
15:12que temos hoje de de repente ligar o
15:14nosso celular e conseguir recuperar as
15:16mensagens que nos mandaram.
15:19Eh, algo muito parecido com o SMS, tá
15:23certo?
15:24Outra utilidade bastante grande era para
15:28transferência de arquivos. Imagine vocês
15:31que nessa época, se você quisesse
15:34entregar um trabalho para o seu
15:36professor, você deveria digitar esse
15:39trabalho, datilografar esse trabalho, na
15:41verdade, colocar no correio, o professor
15:45deveria recebê-lo,
15:47então fazer a correção, postá-lo
15:50novamente no correio para que você
15:52pudesse receber essa correção.
15:55com a possibilidade de troca eletrônica
15:58de arquivos, nós tínhamos então a chance
16:01de fazer a transferência entre esses
16:03arquivos de maneira muito rápida.
16:07Nesse contexto, então, nós começamos a
16:09ver o surgimento da chamada linguagem de
16:12marcação.
16:14Da onde nasce a o a linguagem de
16:16marcação? A origem dela tá no desafio
16:19enfrentado pela publicação eletrônica,
16:23tá?
16:25como que funciona hoje, para grande
16:27maioria de nós, estamos acostumados a
16:29utilizar o processador, o editor de
16:31textos, Word, Libreoffice,
16:35eh, entre outras possibilidades que
16:37temos, inclusive o Google Docs, por
16:40exemplo, Google Documentos.
16:43Estes aplicativos, eles oferecem para
16:46nós uma uma abordagem onde nós somos
16:49apresentados a representação de uma
16:51folha de papel e vamos escrevendo e
16:55formatando o nosso texto eh no momento
16:58que estamos criando aquele texto. Se eu
17:01estou fazendo um resumo para o meu
17:04professor, por exemplo, uma atividade
17:06que me foi pedida,
17:09enquanto eu escrevo, eu tenho a
17:11possibilidade de destacando um texto em
17:14centralizando, colocando um
17:17itálico, usando marcadores e ao mesmo
17:21tempo eu vou vendo a aparência eh final
17:24desse documento.
17:26Isso apresenta uma série de desafios
17:29quando a gente pensa na publicação, na
17:31editoração eletrônica. Então, ah, lá em
17:3519, 1980,
17:37optou-se então por pensar numa maneira
17:40da gente separar o texto de sua
17:43apresentação. Por que isso? Porque um
17:47título, ele sempre vai ser um título.
17:49Não importa se eu estou imprimindo em
17:52retrato ou paisagem. ele sempre vai ser
17:55um título. Em geral, sempre vamos optar
17:58por colocar esse título numa fonte
18:00maior, com algum destaque muito
18:03provavelmente centralizado.
18:06Nesse momento, então,
18:09pesquisadores começaram então a procurar
18:11uma maneira da gente separar,
18:13diferentemente do que eu vejo no Word,
18:16onde eu faço e vejo o resultado, a ideia
18:20era me preocupar apenas com o texto,
18:23estruturar esse texto e depois
18:26posteriormente pensar na apresentação
18:28desse texto.
18:30É nesse contexto que surgem as
18:32linguagens de marcação,
18:35tá OK? E essa é a principal diferença
18:39das chamadas linguagens de programação.
18:42Talvez neste ponto do curso você já
18:44tenha tido algum contato com linguagens
18:47de programação.
18:49Eh, a linguagem de programação é uma
18:51sequência de passos eh únicos ordenados
18:55para que a gente possa executar uma
18:56tarefa. Neste caso aqui, a linguagem de
18:59marcação, ela nos permite definir a
19:02estrutura de um texto.
19:05Princípio de uso é o mesmo, mas a sua
19:07utilidade é diferente.
19:09A principal linguagem de marcação que
19:12surgiu nessa época ou que ficou mais
19:14popular é a SGML.
19:17Ela foi criada em 86
19:20e é uma linguagem padrão paraa
19:21estruturação de documentos. Ela tem a
19:24capacidade de descrever um documento.
19:27Nós podemos indicar o que é um título, o
19:30que é um subtítulo, o que é um
19:33parágrafo, o que é o item de uma lista
19:35ordenada, um item de uma lista não
19:38ordenada.
19:39E ela serve até hoje de padrão paraa
19:42definição de outras linguagens de
19:44marcação. Por isso, damos o nome a ela
19:47de uma meta ela permite a criação de
19:51outras linguagens.
19:53Nessa imagem gostaria de destacar a
19:56evolução do SGML. Uma das evoluções do
19:59SGML. Como eu acabei de mencionar, ela é
20:03uma metalinguagem, ela permite a criação
20:06de outras linguagens. Uma das primeiras
20:09linguagens que surgiu a partir do SGML é
20:12o HTML, que vai ser objeto de estudo
20:16aqui na nossa disciplina, porque o HTML
20:19é a linguagem que nós usamos até hoje
20:22como base para criação de páginas e de
20:25sites para web. Posteriormente tem uma
20:28outra sigla que vocês também já devem
20:31ter eh tido contato ao longo da vida de
20:34vocês, que é o XML.
20:36Então, quando o desafio o SGML lá em
20:401986 surge como uma resposta ao desafio
20:44da publicação eletrônica,
20:47em 1991,
20:49o HTML ele aparece para nós em resposta
20:55a essa necessidade então de colocar
20:58essas informações na web. Daqui a pouco
21:01a gente vai entender como é que a gente
21:03saiu daquela tela preta e já tá falando
21:05de web.
21:07E o XML surge alguns anos depois com o
21:10desafio para como uma resposta ao
21:13desafio de representação de dados. Eh,
21:18hoje muitas das tecnologias que usamos
21:21ou muitas das informações que trocamos
21:24na internet, elas estão baseadas em XML.
21:28é o XML que descreve, sabe, onde
21:31procurar o nosso nome, qual é a nossa
21:34informação,
21:36eh o número da nossa conta eventualmente
21:38numa transação, o que que é um item que
21:41foi comprado em uma compra online e
21:44assim por diante.
21:47Bom, 1986
21:51nós temos o SGML
21:53e o HTML, como eu falei, ele surge em
21:561991,
21:59tá? O SGML é anterior ao surgimento da
22:03web. A web ela nasce nesse
22:08nesse ao longo dessa dessa virada de ano
22:11de 1980 até 1990.
22:15Eh, nós temos o surgimento do que nós
22:18chamamos de web ou www
22:21ou worldde web, a grande teia mundial de
22:26computadores. Então aqui, eh, nós já
22:29conseguimos agora
22:31responder aquela indagação do início da
22:33nossa aula. Qual que é a diferença entre
22:36internet e web ou www ou worldde web? A
22:42diferença entre elas é o seguinte.
22:46Internet, quando nós mencionamos a
22:48grande rede de computadores, esse mundo
22:51conectado, nós estamos falando de
22:53internet.
22:55Quando nós falamos desta interface pela
22:57qual estamos nos comunicando, o uso de
23:00navegadores, o uso de tecnologias que
23:03fazem uso desse navegador, dessa
23:06aparência de janelas, de botões,
23:08formulários e tudo mais, aí nós estamos
23:12falando de uma parte específica dessa
23:14grande rede ao qual damos o nome de web.
23:18Então, dentro dessa disciplina, no
23:20contexto dessa disciplina, estaremos
23:23trabalhando as tecnologias necessárias
23:26para que possamos criar ambientes, criar
23:28páginas, criar sites e que estão por
23:31trás de todo eh esse aparato que nos
23:34permite hoje, que nos permite neste
23:37momento estarmos reunidos aqui, vocês me
23:40assistindo, acessando o material,
23:43entrando em contato com o seu tutor,
23:45enviando suas atividades.
23:48A linguagem de marcação HTML, ela surge
23:52ao longo desse, como resultado também
23:55desses, dessas pesquisas que aconteciam
23:58em relação à internet, buscando uma
24:00maneira mais amigável de nós termos
24:03acesso a essa grande rede.
24:06Como eu mencionei anteriormente, era
24:08necessário que nós decorássemos,
24:12soubéssemos ou tivéssemos anotado em
24:15algum lugar da nosso, do nosso material
24:17uma série de comandos. A interação com
24:21esse sistema era muito menos amigável do
24:24que simplesmente eu ir visualmente
24:26clicando em botões ou lendo um
24:29documento. Então, o HTML surgiu com essa
24:33proposta de facilitar a nossa interação,
24:38facilitar o nosso acesso com os
24:41conteúdos que antes trafegavam em modo
24:43texto por essa rede. Ela foi
24:46desenvolvida pelo Tim Berners Lee ao
24:50longo de 1989
24:52em conjunto com o primeiro navegador.
24:55Aqui temos que pensar o seguinte: não
24:57adianta eu ter estrada se eu não tenho
25:00um carro. Então, ao mesmo tempo em que
25:03as pessoas se preocuparam em construir
25:05essa linguagem que iria permitir que nós
25:08colocássemos, estruturássemos essas
25:10informações na internet, foi necessário
25:13também pensar em como elas iriam
25:15utilizar
25:17essas informações, como essas
25:19informações seriam acessadas e seriam
25:22vistas pelas pessoas. É neste contexto
25:25que vão surgir então os navegadores
25:28paraa web. Então, neste primeiro
25:31momento, eu quero que você guarde a
25:32seguinte informação. O HTML define a
25:36estrutura do documento e o navegador
25:40faz a apresentação final desse
25:43documento. É como se nós separássemos
25:46agora aquele nosso documento do nosso
25:48processador de texto favorito em dois
25:50momentos. Um, onde eu apenas escrevo e
25:54aí alguns autores vão dizer que isso é
25:57positivo porque eu reduzo a a carga
26:01cognitiva, eu não preciso me preocupar
26:03com a apresentação desse texto. E um
26:06outro momento onde eu vou visualizar
26:09esse texto pronto, a aparência final
26:11desse texto.
26:14ados lá no início dos anos 90, o
26:15conjunto inicial de marcações que
26:18frequentemente você vai ver sendo
26:20referenciado na literatura ou nos vídeos
26:24como tags, tinha 20 elementos. Essa
26:28linguagem HTML então tinha 20 elementos
26:31ou comandos ou possibilidades de uso
26:35para formatação, para estruturação de um
26:38texto. A definição aqui para nós é um
26:42sistema de informação que permite
26:43compartilhar conteúdo usando a internet
26:46por meio de recursos amigáveis. é uma
26:49interface mais amigável pro nosso
26:51conteúdo do que ler um fundo escuro com
26:57tela branca. Permite que documentos e
27:00outros recursos sejam acessados através
27:03da internet, por meio da internet, né,
27:05conforme as regras do protocolo que foi
27:08definido, que é o HTTP. Então, aquela
27:11informação que colocamos no início dos
27:13endereços web é o protocolo, é a forma
27:17como o nosso navegador conversa com essa
27:20rede para fazer a transferência desses
27:23documentos.
27:26Aqui nosso primeiro contato com a
27:29linguagem HTML.
27:32À esquerda você vai encontrar um arquivo
27:34HTML e à direita você vai ver a sua
27:37apresentação.
27:39Esse arquivo HTML que vai ser objeto da
27:42nossa próxima unidade, ele é composto
27:45então por alguns elementos HTML, como eu
27:48falei, as tags. A primeira delas que
27:51você observa ali é a tag HTML no início
27:54e no final.
27:56Existe duas áreas delimitadas, a área de
27:59cabeçalho, que é marcada pela marcação
28:02red, e o corpo da página, que é marcado
28:05pela marcação body.
28:08E dentro dessas áreas você é possível
28:10você ver que existe uma marcação
28:13indicando um título, onde o título, o
28:17texto que compõe esse título é chamado
28:19olá mundo, exclamação.
28:22E a área Bor tem um parágrafo
28:27definido o mundo. Chamo sua atenção que
28:31esse título que eu estou falando aqui,
28:33ele não se trata do título do meu
28:36documento, ele se trata daquela
28:38informação que aparece na barrinha da
28:40nossa janela.
28:42Observe muito provavelmente que na
28:45barrinha do da janela onde você está
28:48assistindo este conteúdo, vai aparecer o
28:50nome do programa e alguma informação
28:53sinalizando qual é o conteúdo que tá
28:55sendo apresentado.
28:57A área que vemos aqui na figura direita,
29:00essa área branca, corresponde à parte
29:03que está sendo apresentada aqui pelas
29:05tags eh de parágrafo dentro da área de
29:10corpo da nossa página.
29:13A partir desse momento, você já está
29:15formalmente apresentado a estrutura de
29:17um arquivo HTML. você poderá usar essa
29:21estrutura e você verá que usaremos essa
29:23estrutura em todas as nossas aulas a
29:26partir de agora. Então, o que que eu
29:29preciso que você guarde neste momento?
29:32Todas as tags, elas têm um início e tem
29:34um fim. Observe que a tag HTML, ela está
29:38lá no início do documento e ela tem o
29:41seu par lá no final do documento.
29:43Normalmente a tag de fechamento, a
29:46marcação de fechamento, ela vai ser
29:48indicada pela barra antes do nome da
29:51marcação. Da mesma forma, temos duas
29:55sessões no nosso documento. A área de
29:58cabeçalho, que é a área red, e a área do
30:01corpo da página, que é a área body. Tudo
30:05bem?
30:07Essa era a aparência do primeiro
30:09navegador que foi criado por Tim
30:12Bernersle lá nos anos 80, no final dos
30:16anos 80, e onde nós tínhamos a
30:18possibilidade de ver esse documento HTML
30:21sendo apresentado.
30:23Eh, o nome desse navegador é Mosaic,
30:28NCSA Mosaic. você pode fazer uma busca
30:31na internet a respeito disso. Eh,
30:34existem vídeos mostrando o
30:36funcionamento.
30:37Quando você acessar esse material,
30:40inclusive na curadoria dos recursos aqui
30:43do nosso curso, existem links para isso.
30:46Observe como as páginas eram compostas,
30:49como elas eram apresentadas.
30:52Vejam que elas eram muito mais simples
30:54do que encontramos hoje. Basicamente
30:57tínhamos a possibilidade de inserir a
31:00informação estruturada, o documento
31:01estruturado, algumas imagens, alguns
31:05recursos, como uma linha eh divisória
31:08entre partes do nosso documento.
31:10Tínhamos a possibilidade de trabalhar
31:13com recursos simples de formatação,
31:16centralização,
31:18formatação do texto, colocar bold,
31:20colocar itálico.
31:23Aqui uma outro exemplo num outro sistema
31:26dessa mesma página.
31:28E chegando ao final da nossa aula, desta
31:31primeiro encontro que tivemos, eu volto
31:33novamente a recomendar que você visite a
31:35sessão de curadoria do nosso curso. Tem
31:38um vídeo em especial que eu gostaria de
31:40convidá-lo a visitar que se chama
31:43Guerreiros da Internet, Warriors of the
31:46Net. Esse é um vídeo de 1999
31:50e ele foi utilizado para explicar ou ele
31:54apresentava os a quem assistia os
31:58elementos que compõem a internet. Então,
32:02nesse vídeo, você vai visualizar e você
32:04encontrará eh desde o momento em que
32:07você coloca um endereço na barra de
32:11endereços do seu navegador ou quando
32:14você clica sobre um link,
32:17você visualizará todo o caminho que
32:20acontece até que essa informação seja
32:23novamente apresentada
32:25eh para você no seu navegador.
32:28Eh, faça esse exercício, mas faça com
32:31óleos críticos.
32:33Observe, eh, estamos falando de um vídeo
32:37da área de tecnologia de 1999.
32:40observe os elementos que ele usa, eh, as
32:44explicações que ele dá, obviamente, mas
32:47procure eh, fazer esse paralelo com o
32:49que vivemos hoje. E esse é o convite que
32:53eu faço a você a partir de agora e ao
32:55longo de todo esse curso e, de certa
32:58maneira ao longo de sua vida
32:59profissional. Estamos numa área que
33:03evolui muito rapidamente.
33:05Então, uma disciplina de fundamentos de
33:08web não faria sentido no começo dos anos
33:112000, porque nós não tínhamos ainda essa
33:15concepção de desenvolvimento de páginas
33:18e de sites web. Então, em cerca de 30
33:21anos, nós saímos de praticamente uma
33:24pesquisa acadêmica para todo uma rede de
33:28conhecimento que sustenta hoje negócios,
33:32que sustenta hoje disseminação de
33:34conhecimento, de informações. E nós
33:37somos engren somos partes desta
33:39engrenagem. Então, é importante que
33:42tenhamos sempre esse olhar crítico,
33:44tenhamos sempre o entendimento de onde
33:46partimos para que possamos tentar
33:50entender para onde estamos indo, certo?
33:54Então, nesta unidade nós conhecemos a
33:56evolução um pouco da internet. Sabemos
33:59hoje que internet é a grande rede de
34:02computadores, que existe hoje,
34:04independente de nós, e que o web é essa
34:09parte da internet que normalmente
34:10acessamos hoje pelos nossos
34:12dispositivos,
34:14onde usamos formulários, onde grande
34:16parte dos sistemas funcionam
34:19e que nossa vida foi profundamente
34:22afetada por essa evolução. vocês hoje
34:25fazem um curso à distância que não seria
34:28possível anos atrás. Não que a educação
34:31à distância não existisse antes, mas ela
34:34era feita por meio de cursos enviados
34:37por correio, eh manuais que eram
34:40enviados pelo correio e assim por
34:42diante. Compreendemos também que existe
34:45um tipo de linguagem especial, que é as
34:48linguagens de marcação e que a SGML deu
34:52origem à linguagem HTML. que nos permite
34:56estruturar os documentos que serão
34:58apresentados na web. Nas próximas aulas
35:01vamos avançar um pouco nesse
35:03conhecimento.
35:04Convido a você a visitar as nossas
35:07referências, a conhecer um pouco mais
35:10sobre esse assunto, eh visitar o
35:12material de curadoria e entrar em
35:15contato em caso de dúvidas. Bons
35:17estudos.
35:20[Música]

About this transcript

This page contains the full transcript of [UFMS Digital] Fundamentos de Web - Módulo 1 - Unidade 1 by AGEAD UFMS, generated from the public captions YouTube serves with the video. The transcript has 4,294 words across 735 segments, with the original timestamps preserved so you can click any line to jump to that moment in the embedded player.

What you can do with it

Use the transcript to take notes, quote the speaker, build a study guide, generate a summary with ChatGPT or Claude via the YouTube Summary tool, or export it as a timed subtitle file with YouTube to SRT. You can also re-open it in the transcriber to translate the transcript into 100+ languages.

Free YouTube transcript tool

YouTube2Text is a free YouTube transcript generator — no signup, no daily limit. Paste any YouTube link and get the full transcript instantly, with timestamps, click-to-jump, translation to 100+ languages, AI prompts for ChatGPT, Claude, and Gemini, and exports to TXT, SRT, VTT, or Markdown.