MARATONA ROCKETSEAT - ESTUDO PARALELO

Prévia do material em texto

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
· If, else,function,object,class
Leva mais tempo para a máquina traduzir e entender
· Compilar ou interpretar
· Nada mais que milissegundos
Exemplo:
· JavaScript,Python,Rust
· Sintaxe
Conjunto de regras e escrita
Cada linguagem tem suas regras
Símbolos
· {} /() / ; / = / ++ / --
Palavras reservadas
· 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
· HTML – Hyper Text Markup Language
· Links destacado de azul dentro de textos
· CSS – Cascading Style Sheet
· Fundo temas e cores dos sites
· JacaScript
· Botões e comandos dentro dos sites
· Website
· Sites
· Agrupamento, estruturado (arquitetado) de várias páginas Web.
· Pode ser:
· Estático
· 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 
· 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
· A página é sempre a mesma.
· 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 
· Linguagens de programaçã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
· Digita a URl e faz um pedido (request) para o servidor
· Tecnologias
· HTML,CSS, JavaScritp, Imagens
· Frameworks e Bibliotecas
· Back-End
· Servidor (Server-Side)
· Recebe pedidos do Front-End
· Entende e processa o pedido e devolve para o Front-End
· Regras de negócio e aplicação
· Tecnologias
· PHP,Java,Python,JavaScript
· 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
· 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
· Front-end feito com uso de FrameWorks
· Back-End é no formato de API.
· Alinhamento de Jornada
· Sites estáticos
· Front-End, construção de site, ferramentas HTML,CSS,JavaScript
· Aplicações Web tradicional
· Aprendendo o Back-End, Banco de dados criação de conteúdos para funcionar no servidor.
· Single Page Application
· 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.
image1.png