Sistemas Web

Fundamentos da web

Desenvolvimento web

Roteiro Fundamentos da Web

  • Servidor
  • Cliente
  • Protocolo
  • Requisições
  • IP
  • Domínio/DNS
  • Aplicação web
  • Browser
  • Hospedagem
  • Servidores de aplicação
  • Desenvolvimento back-end
  • Desenvolvimento front-end
  • Versionamento de código
  • Deploy
  • Ciclo de vida da aplicação (ALM)

Servidores

  • Computadores físicos ou virtuais
  • IP
  • Linux, Windows, Unix e etc...
  • Softwares instalados
    • Anti-virus, Firewall, Proxy, Backup
  • Redundância de energia, internet, monitoramento
  • Custos de um Servidor físico vs Servidores virtuais (VPS - AWS, Google, Azure, DigitalOcean, etc...)
  • Podem haver mais de um servidor de aplicação instalado num único servidor físico, cada um rodará em uma porta diferente (Altera a URL)
  • Agente passivo

Servidores

Clientes

  • Quem faz acesso a algum recurso do servidor
  • Também possui IP
  • Independe o sistema operacional,
  • localização, versão de software e etc..
  • Comunicação baseada em protocolo
  • Agente ativo

Clientes

Protocolos

  • Conjunto de regras e procedimentos
  • Abstrai a comunicação entre diferentes plataformas
  • Possibilita a troca de arquivos, textos, mensagens e etc…
  • HTTP (Hypertext Transfer Protocol)
    • HTTPS
  • FTP (File Transfer Protocol)
  • SMTP (Simple Mail Transfer Protocol)
  • XMPP (Extensible Messaging and Presence Protocol)
  • REST (Representational State Transfer)
  • SOAP (Simple Object Access Protocol)

IP

  • Base da web
  • Endereço do host
  • Seja client ou server
  • Pode ser estático ou dinâmico
  • IPv4 e IPv6

Domínio

  • Nome mais fácil de memorizar do que um IP
  • Diferentes tipos
    • Paises
    • Educacionais
    • Organizacionais
  • Aquisição via CPF ou CNPJ

DNS

  • Domain name server
  • Sem ele a internet pararia de funcionar
  • Resolve nomes de domínios em IPs
  • Diferentes levels
    • Server ROOT (https://www.iana.org/domains/root/servers)
    • TLD (Top level domain) 
      • Domain Register (Registrador de domínios)
        • No Brasil é o Registro.br, quando você compra um domínio ele atualiza essa informação em todos os TLD em um processo chamado replicação DNS
    • Tabela ANS (Authoritative name server)
      • Resolve enfim o IP do servidor

DNS

Servidores de Aplicação

  • Software que é instalado num servidor físico e este software vai prover o
    acesso a diferentes tipos de recursos web
    • Exemplos
      Apache
      NGinx
      GUnicorn
      IIS
  • Portas

 

Aplicação Web

  • Protocolo principal HTTP
  • Disponibilizar de recursos
  • Acessar páginas, enviar ou receber um email, realizar um cálculo, armazenar uma informação em um banco de dados
    • Site, servidor de mail, applet java, web service e etc...
  • Podem haver mais de uma aplicação web em
    um único servidor de aplicações

 

Aplicação Web

História

Aplicação Web

Aplicação Web

Requisições

  • HTTP
    • Recursos web (Estáticos e dinâmicos)
    • Música, PDF, Página HTML, Registro do banco de dados
    • Request vs Response
    • Request: Cliente, ativo
    • Response: Servidor de aplicação, passivo
    • URL
  • Domínio ou subdomínio
    • Endereço a um único recurso
    • http://mentorstec.com.br/assets/site/images/logo.png
    • Vermelho: Protocolo, Azul: Domínio/endereço do servidor web, Verde: Caminho do recurso dentro do servidor

Requisições

https://httpstatusdogs.com/

Browser

  • User agent
    • Aplicação que age em nome do usuário
  • cURL
  • Telnet
  • Navegadores modernos
    • Chrome, Firefox, Opera, Safari, Internet Explorer, Ice Web
    • Tem a capacidade de se comunicar com aplicações web através de vários protocolos
    • Software complexo
    • Console

Dev. front end x Dev. back end

Back end

Python, PHP, Java, Ruby

Bancos de dados e SQL

Linux

Web services

Apache, NGinx, IIS

Algoritimos

Lógica

Servidores

Front end

HTML5
CSS3
Javascript
Bootstrap
Design
Teoria de cores
Usabilidade
Tipografia

Dev. Frontend x Dev. backend

Versionamento

  • No ZIP
  • Rastreabilidade
  • Team work
  • Versões de software claramente definidas
  • Auditoria da qualidade
  • Backup
  • GIT, SVN, Jedi

Deploy 

  • Como colocar a aplicação no ar
  • Como subir uma nova versão
  • Deploy manual e automatizado
  • Deploy facilitado
  • Deploy padronizado e consistente
  • Cada nova aplicação que é colocada no ar tem um padrão de qualidade
  • Possibilidade de rollback caso algo saia errado
  • Gestão de dependências
  • Integração contínua
  • CI/CD 

(implantação)

Deploy 

(implantação)

https://jenkins.io/doc/book/pipeline/

Roteiro Desenvolvimento Web

  • HTML
  • CSS
  • JavaScript
  • Bootstrap
  • jQuery
  • Frameworks
    • ​Angular
    • Vue
    • Reacta
<!DOCTYPE html>
<html>
  <head>
    <title>Page Title</title>
  </head>
  <body>

    <h1>This is a Heading</h1>
    <p>This is a paragraph.</p>

  </body>
</html>

https://www.w3schools.com/html/default.asp

body {
  background-color: lightblue;
}

h1 {
  color: white;
  text-align: center;
}

p {
  font-family: verdana;
  font-size: 20px;
}

https://www.w3schools.com/css/default.asp

https://www.w3schools.com/js/default.asp

<button type="button" onclick="updateDate()">
Click me to display Date and Time.</button>

<p id="demo"></p>

<script>
  function updateDate() {
      return document.getElementById('demo').innerHTML = Date()
  }
</script>
<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>

<div class="jumbotron text-center">
  <h1>My First Bootstrap Page</h1>
  <p>Resize this responsive page to see the effect!</p> 
</div>
  
<div class="container">
  <div class="row">
    <div class="col-sm-4">
      <h3>Column 1</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
      <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
    </div>
    <div class="col-sm-4">
      <h3>Column 2</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
      <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
    </div>
    <div class="col-sm-4">
      <h3>Column 3</h3>        
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
      <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
    </div>
  </div>
</div>

</body>
</html>

https://www.w3schools.com/bootstrap4/default.asp

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("p").click(function(){
    $(this).hide();
  });
});
</script>
</head>
<body>

<p>If you click on me, I will disappear.</p>
<p>Click me away!</p>
<p>Click me too!</p>

</body>
</html>

https://www.w3schools.com/jquery/default.asp

Frameworks

Angular https://angular.io/

Vuejs https://vuejs.org/

React https://pt-br.reactjs.org/

Made with Slides.com