MARATONA ROCKETSEAT

 DISCOVER 

 Como funciona a Web ->

Nesta aula iremos aprender como funciona a Web, ela é mais

complexa do que apenas digitar o site no navegador, existe todo um
processo por trás e é isso que veremos.

A Web como as pessoas normais conhecem é somente digitar o

nome do site e entrar, esse seria o caminho fácil, mas não se limita
a somente isso, veremos agora o caminho avançado, onde você
digita por exemplo https://rocketseat.com.br, agora temos uma
URL e por de trás dos panos o que temos é o http é um protocolo
que significa "Hypertext Transfer Protocol", que possui como
função trocar mensagem entre computadores essa mensagem será
enviada a um computador em diversos pedaços que chamamos de
"chunks" e então temos a URL, que significa "Uniform Resource
Locator", localizador e identificador de recursos, nesse caso o site.
Essa primeira parte é apenas o processo de digitar e pressionar
ENTER, então haverá o uso do protocolo para começar a
comunicação.

Após o primeiro processo é então iniciada uma linha de

comunicação, através de um outro protocolo chamado TCP, entre o
cliente, que é o computador, dispositivo ou aplicativo que fez o
pedido, no nosso caso o Browser, e o servidor, computador
configurado para receber os pedidos e enviar respostas aos
pedidos, e o TCP, que significa "Transmission Control Protocol",
que tem como função garantir que os pacotes (chunks) cheguem
corretamente ao destino, já que eles vêm em diversos pedaços.

Então a linha de comunicação foi criada, fazendo esse início, mas

quando você apenas digita rocketseat.com o endereço precisa ser
convertido em endereço de IP, através do DNS. IP significando
"Internet Protocol", mais um conjunto de regras, que possui como
função endereçar os computadores, todos os computadores que
 estão conectados à internet possuem um IP, e DNS significando
"Domain Name Servers", tendo a função de converter um domínio
em um endereço IP, domínio sendo de maneira simples, uma forma
mais fácil de lembrarmos o IP, sem precisar digita-lo, apenas
digitando o nome.

A linha de comunicação foi feita, o endereço convertido em IP e

agora você quer que esse pedido seja feito, no nosso caso
queremos ver o site, está percorrendo por diversos Proxys, Proxy é
qualquer dispositivo no meio do caminho entre o computador e o
servidor, sendo ele Modem, outros computadores, são tantos que
nem sabemos quantos, tendo a função de encaminhar os pacotes,
passando de um para o outro, até chegar ao servidor.

O servidor analisa seu pedido e te dá a resposta, no caso positiva, a

resposta retorna pela linha de comunicação em também diversos
pedacinhos até o dispositivo, Browser, montando o site para você, e
esse processo ocorre diversas vezes para um único pedido, já que
cada recurso (html, css, javascript, imagens, etc) é feita uma nova
conexão.

Isso foi apenas uma visão geral de como funciona a Web, neste caso
o que ocorre quando digitamos um endereço de site e
pressionamos o ENTER, esse processo ocorre em aplicativos de
smartphone também.

 MODULO 2
COMPUTADOR, SOFTWARE, HARDWARE
 HARDWARE -> O hardware é um termo técnico que se refere a parte física
de computadores e outros sistemas microeletrônicos.
 SOFTWARE-> um conjunto de instruções que permite controlar um
aparelho eletrônico.
Parte logica do computador

 FIRMWARE -> a função do firmware é armazenar todas as informações para

que o equipamento funcione corretamente.
 O firmware é armazenado permanentemente num circuito integrado (CHIP)
de memória de hardware no momento da fabricação do componente.
 DRIVERS -> a função dos drivers é ser a ponte entre o sistema operacional e
o firmware dos dispositivos eletrônicos.
 O driver é instalado no computador quando há a necessidade de se
conectar com um novo dispositivo.
 SISTEMAS OPERACIONAIS -> um sistema operacional é responsável pelo
gerenciamento de todo o hardware do seu computador. É ele que vai dizer,
por exemplo, para o programa em execução, quando poderá utilizar o
processador e por quanto tempo, quando te de memória RAM será usada,
gerenciamento de SSD/HD etc.
 PROGRAMAS ->
 SOFTWARE > programa de computador
PROGRAM> programa de computador ou aplicativo

 Um programa é um conjunto de instruções que descrevem uma tarefa e/ou

trabalho especifico no seu computador
 São ferramentas desenhadas para o usuário realizar ações.
 POR DENTRO DO COMPUTADOR
 MEMORIA RAM -> a memória RAM é um espaço temporário de
informações operacional e de aplicativos em uso.
Quando uma tarefa e concluída por algum software, os arquivos que
estavam em uso são movidos da memória RAM ou HD ou SSD para serem
mantidas.
Quando o computador é desligado a memória é limpa automático.

 HD/SSD ->
 O HD e o SSD são dispositivos de armazenamento de dados.
 O HD usa pratos mecânicos e um cabeçote móvel de leitura /gravação para
acessar dados
 O SSD não possui partes moveis, apenas chips de memória.
 PROCESSADOR -> o processador é o cérebro do computador
 Transforma informações em uma linguagem que o computador
entende”01010101000011111010101”
 Ele transforma dados em informações, por exemplo, carregar páginas, faz
download, abrir arquivos e executar programas.
 A velocidade que seu computador abre ou executa programas é em partes
responsabilidade do processador.

Internet, Roteadores e Servidores

 O que é a Internet -> A internet são redes interligas pelo mundo
todo
 Uma rede tem como objetivo interligar computadores para
fornecer aos usuários acesso a diversas informações
 A internet é feita de cabos que conectam o mundo inteiro.
 REDE DE COMPUTADORES E COMUNICAÇÃO
 Rede de computadores é a conexão de dispositivos para permitir
a transição de dados
 A comunicação na internet é feita de protocolos (conjunto de
regras)
 IP E MAC ADDRESS
 Internet Protocol é um número identificador dado ao seu
computador, ou roteador, pelo provedor de internet no
momento que se conecta na rede
 MAC Address é um número de série identificador gravado no
dispositivo de rede.
 Através do IP que seu computador pode enviar e receber dados
da internet.
 SERVIDORES
 Um servidor é um computador equipado com um ou mais
processadores, portas de comunicação, software, algum sistema
para armazenamento de dados como HD’s e ouSSDs.
 Fornece serviços a uma rede de computadores, chamada de
clientes. Esses serviços podem ser, por exemplo, hospedagem de
site, provedor de e-mails, entre outros.
 DNS
 Os servidores DNS (DOMAIN NAME SYSTEM, OU SISTEMA DE
NOMES DE DOMINIO) são os responsáveis por localizar e traduzir
para números de IP os endereços dos sites que digitamos nos
navegadores.
 O DNS permite que você acesse um site digitando um endereço
nominal em lugar de números e pontos.
 HTTP
 Hypertext Transfer Protocol, sigla HTTP
 HTTP é um protocolo de transferência de dados.
 No momento que o usuário digita um URL em algum navegador,
o navegador cria uma requisição HTTP e manda para o servidor
correspondente ao IP da URL e então o servidor responde
através do HTTP enviando todos os dados necessários para exibir
o site ao usuário no navegador.
 O HTTPS - Hypertext Transfer Protocol secure adiciona uma
criptografia as informações enviadas ou recebidas de um site.

Sistemas Operacionais

 O QUE É UM SISTEMA OPERACIONAL

 Interface entre o usuário e a maquina
 Programa que irá controlar seu aparelho (computador, celular)
 Gerenciamento de dispositivos (hardware)
 Gerenciamento de aplicativos e programas (software)
 Gerenciamento de tarefas – conversar com o computador em
linguagem de maquinas.
 CARACTERISTICAS E OBJETIVO DE UM SISTEMA OPERACIONAL
 Fácil entendimento para o usuário -> Experiência do usuário
 Controle de Hardware -> Uso de periféricos, memorias, HD.
 Gerenciamento dos Softwares.
 GRUPO DE SISTEMAS OPERACIONAIS
 Os dois grupos mais conhecidos
 Unix -> Linux – OS X, Android, IOS
 Windows -> Windows 7 – 10 – Windows server
 TIPOS DE INTERFACE GRAFICAS
 GUI -> Graphical User Interface
 Interface gráfica, elementos gráficos -> Cursor do mouse ou
Touch – Area de trabalho – Criar arquivos e pastas
 CLI -> Command –Line Interface
 Linha de comando
 Emitir comandos de texto para o computador -> criar arquivos e
pastas
 MODULOS DO SISTEMA OPERACIONAL
 KERNEL -> Componente central, o cerner do S.O
 Primeiro modo a ser inicializado.
 Permanece executando enquanto o S.O estiver ligado.
 Responsabilidades – Gerenciamento da memória, processos,
armazenamentos e dispositivos.
 GERENCIADOR DE PROCESSOS
 Processo é um programa em execução
 Agendamento de processos (scheduling) -> qual processo está
executando agora.
 Thread
 A divisão de um processo para melhor performance
 Um pedacinho do processo
 Poderá executar em paralelo
 Gerenciador de arquivos
 File System
 Organização e armazenamento dos arquivos -> Vídeos, imagens,
documentos
 Diretórios (pastas)
 Tipos de sistema de arquivos -> FAT, NTFS – ext3,ext4 –
HFS+,APFS, os arquivos anteriores são criados quando
formatamos nosso disco.
LINGUAGENS DE PROGRAMAÇÃO
 O que é codar -> Escrever para o computador – seguir regras
– linguagem humana x maquina
IF=SE
INPUT = ENTRADA
PASSWORD=SENHA
ELSE=SENAO
TryAgain = tente novamente
 Linguagem de programação ->
 Input e Output -> O Input e o comando de entrada “botão
de ligar o computador” e o Output e o retorno desse
comando “imagem na tela do computador”
 Abstração->
 Transformação de Linguagem
 Podemos entender uma linguagem de programação
 Nós precisamos aprender a linguagem de programação
Inglês
Existem inúmeras
São ferramentas para um determinado objetivo
Games – I.A – Machine Learning – Web
 Low-Level – High-Level
Significa baixo nível
É mais difícil para ler e escrever
É mais rápida
Existe pouca interferência de tradução
A programação começou com baixo nível
Exemplo: Assembly
 High-Level ->
Mais próxima da comunicação humana
o If, else,function,object,class
Leva mais tempo para a máquina traduzir e entender
o Compilar ou interpretar
o Nada mais que milissegundos
Exemplo:
o JavaScript,Python,Rust
 Sintaxe
Conjunto de regras e escrita
Cada linguagem tem suas regras
Símbolos
o {} /() / ; / = / ++ / --
Palavras reservadas
o If,else,while,for,var,let,const
TIPO DE APLICAÇÕES WEB
 WebPage
 Pagina Web
 Acessado pelo navegador
 Encontrado pelo endereço universal URL
https://rocketseat.com.br/discovery
 Resposta dada pelo servidor é uma cópia da pagina
o HTML – Hyper Text Markup Language
 Links destacado de azul dentro de textos
 o CSS – Cascading Style Sheet
 Fundo temas e cores dos sites
o JacaScript
 Botões e comandos dentro dos sites
 Website
 Sites
 Agrupamento, estruturado (arquitetado) de várias páginas
Web.
 Pode ser:
o Estático
o Dinâmico
 Um usuário comum não sabe diferenciar entre estático ou
dinâmico.
 Website Dinâmico
 Conteúdo da página Dinâmico
 Interage com o banco de dados
o Dados + modelo de página = página dinâmica

 Modificação sem precisar mexer no código

 Com o mesmo modelo de página, é gerada uma página em
tempo real.
 Website Estático
 Páginas estáticas
o A página é sempre a mesma.
o Alteração direto no código de quem a criou
 Não interage com o banco de dados
 WEB APPLICATION = APLICAÇÃO WEB
 Um programa, um software que vive no servidor
o Linguagens de programação
o Banco de dados
 Utilizados através de páginas WEB e pelo navegador
 É mais completo e possui mais requisitos
 Exemplo: Facebook,Gmail,Youtube,Figma
 Front-End VS Back-End

 Front-End
 Cliente (cliente-side)
 Browser
o Digita a URl e faz um pedido (request) para o servidor
 Tecnologias
o HTML,CSS, JavaScritp, Imagens
o Frameworks e Bibliotecas
 Back-End
 Servidor (Server-Side)
 Recebe pedidos do Front-End
o Entende e processa o pedido e devolve para o Front-End
o Regras de negócio e aplicação
 Tecnologias
o PHP,Java,Python,JavaScript
o Banco de dados
 Aplicação WEB Tradicional VS SPA
 Aplicação WEB tradicional
 Recarregar a página para ter conteúdo atualizado
 Front-End e Back-End numa só aplicação
 Servidor processa e devolve toda a página de uma só vez.
 SPA
 Single Page Application
o A sensação e de ter uma página única.
 Não precisa recarregar a página para ter o conteúdo
atualizado.
 Front-End e o Back-End são aplicações diferentes
 Servidor responde a aplicação front-end
o Front-end feito com uso de FrameWorks
o Back-End é no formato de API.
 Alinhamento de Jornada
 Sites estáticos
o Front-End, construção de site, ferramentas
HTML,CSS,JavaScript
 Aplicações Web tradicional
o Aprendendo o Back-End, Banco de dados criação de
conteúdos para funcionar no servidor.
 Single Page Application
o Tende de ter maior aprendizado, nível de dificuldade
maior e mescla de conteúdos Front e Back-End.

Guia Estelar de HTML

 O que é o HTML -> HTML é um acrônimo para Hypertext

(hipertexto) Markup (marcação) Language (linguagem), ela
não é uma linguagem de programação em si, porém é uma
linguagem na forma de escrever, tendo sintaxe e semântica,
Hypertext é uma marcação especifica que nos leva a outro
texto, isso mais no passado, agora sendo relacionado a
imagens, a videos. Bastante simples usar o HTML, podemos
ver ele clicando com o botão direito na página e selecionar a
opção "view Page Source". Agora vamos ver mais sobre o
HTML.
 Comentários - Comentários servem para nos ajudar a não nos
perder em nossos códigos, sendo bem simples abrir um
comentário, dessa forma:
<!-- comentários -->
O que há em um comentário não afetará o código.
 Anatomia das Tags - As Tags funcionam da seguinte forma:
<h1> TÍTULO </h1>
Você faz a abertura delas, coloca o nome da Tag e as fecha
como no exemplo. No caso dessa Tag, seu conteúdo é a de
título, juntando a abertura, fechamento e o conteúdo,
teremos um Elemento HTML.
Há também Elementos vazios que diferente do exemplo
acima não se fecha daquela forma, mas assim:
<img src=" " alt=" ">
Essa sendo para imagem possuindo atributos, que veremos
mais tarde seu funcionamento.
 Atributos - Há também os atributos booleanos, que não
precisam de conteúdo, booleano significando que apenas
possuem dois tipos de valores, sendo eles verdadeiro ou falso,
não havendo texto, apenas essas duas opções.
<input type="text" disabled>
Outro fator que devemos levar em consideração são as aspas,
recomendado apenas o uso das aspas duplas, para não
desencadear problemas no código.
 Atributos Globais - Atributos globais são atributos aplicáveis
em todas as Tags, sendo as principais:
class — além de classificar as Tags, é usada para aplicar estilo css
e também para acessar com o Java Script.
<div class="conteúdo">
</div>
contenteditable — usado para editar o conteúdo da página,
porém não é mantido após salvar.
<div contentedtable="true">
</div>
data-* — usado para expandir os tipos de atributos que podemos
usar para fazer mais tarde lógica no Java Script , utilizado em css
também.
<div data-qualquercoisaaqui="">
</div>
Escrito com "-" ou tudo junto.
hidden — usado para esconder uma Tag.
<div class="carrinho" hidden>
conteúdo
</div>
id — usado apenas 1 por Tag para identificação, para também
mais tarde usar no Java Script e css.
<div id="texto">
conteúdo
</div>
<div id="texto2">
conteúdo
</div>
style — aplica a estilização na Tag, normalmente não se usa
"style" dentro da Tag, mas sim em arquivos externos.
<div style="color: red">
tabindex — usado para ordenar o Tab na página.
<div tabindex="3">
</div>
<div tabindex="1">
</div>
<div tabindex="2">
</div>
 title — serve para definir um título para a Tag, quando
colocamos o mouse descansando em cima do conteúdo da
página.
Se você quiser estudar outros Atributos Globais vá ao
site https://developer.mozilla.org/pt-BR/ .
 Aninhamento de Hierarquia - Aninhamento em HTML
significa colocar uma tag dentro da outra, porém não é
qualquer tag que podemos colocar dentro de outra, existe
uma hierarquia por trás delas, por exemplo:
<p>
<em>texto<em>
<p> texto2</p>
</p>
Podemos ver no exemplo acima que a tag <em></em>(usada
para dar ênfase em um texto) é pertencente a
Tag <p></p>(usada para criar um parágrafo).
Também é possível notar que há um fluxo, onde as tags são lidas
por ordem de cima para baixo.
Por fim o posicionamento de elementos, podemos ver que a
tag <em></em> não está em uma outra linha como na
tag <p></p>, existem tags que quebram a linha, então mesmo
que colocarmos a tag <p></p> uma do lado da outra,
visualmente vai dar quebra de linha.
 Praticando - Vamos colocar em prática o que aprendemos
nessas ultimas aulas.
Escreva 2 parágrafos, dando ênfase e importância para algumas
palavras , e adicione um link de saiba mais.
— use a tag <em> </em> para ênfase
— use a tag <strong></strong> para importância
— o link pode levar para o google.
ex:
<p>
Lorem <em>ipsum</em> dolor sit amet consectetur
<strong>adipisicing</strong> elit. A eligendi nesciunt mollitia
<strong>provident </strong> explicabo cum, adipisci magnam?
<b>Itaque</b> quae suscipit pariatur sit? Tempore odio autem
repellat, voluptate eius perspiciatis similique.
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. A
eligendi nesciunt mollitia provident explicabo cum, adipisci
magnam? Itaque quae suscipit pariatur sit? Tempore odio
autem repellat, voluptate eius perspiciatis similique.
</p>

<a href="https://google.com">Saiba mais</a>

 Caracteres reservados - Caracteres reservado são caracteres
usados no próprio HTML, como < > & " " ' ', não podemos usar
nas tags, pois dão erro, mesmo aparecendo na preview o
navegador vai tentar ler esses caracteres de alguma forma
que faça sentido. Para usarmos precisamos troca-los por
outras formas de escrever.
<p>
&lt;
os espaços
&gt;
&amp;

<br>
&quot; que colocamos
&quot;
<br>
&apos; além das quebras de linha são
ignorados

</p>
 Anatomia Documento - Estaremos vendo nesta aula sobre a
Anatomia do documento HTML e como ver o nosso HTML,
além do preview.
Se abrirmos o documento .html pelo navegador estaremos
vendo a nossa página e se clicarmos em ver o código fonte
dela, estaremos vendo o HTML que escrevemos no VSCode.
Agora na parte de anatomia de um documento HTML, temos
este exemplo.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Anatomia do Documento</title>
</head>

<body>
<h1>Título</h1>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Officiis saepe similique perferendis mollitia a assumenda
doloribus omnis, quidem tempore accusamus repudiandae.
Accusamus, rem dolorum ad repellendus distinctio blanditiis
praesentium nulla?
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Officiis saepe similique perferendis mollitia a assumenda
doloribus omnis, quidem tempore accusamus repudiandae.
Accusamus, rem dolorum ad repellendus distinctio blanditiis
praesentium nulla?
</p>
</body>
</html>
O padrão seria esta forma.
<!DOCTYPE html> — diz ao navegador que estamos a
trabalhar com HTML 5.<html></html> — o próprio HTML,
elemento raiz, o inicio da cadeia.<head></head> — contém
configurações importantes para página, mas não ainda o que
o usuário vai ver.
<meta> — onde vai representar vários tipos de metadados da
página.
<title></title> — título da página.<body></body> — onde
haverá conteúdo visual da página.
Se quiser facilitar tudo digitando! O emmet irá completar
automaticamente.