cefet_web

Introdução à Programação Web

História e conceitos básicos

Roteiro

  1. Web == Internet?
  2. O que é a Web
  3. As proezas de Tim
  4. Minha primeira página web

Web == Internet?

A Web é a mesma coisa que a Internet?

Fatos importantes

Surgimento: ~ A Internet surgiu em 1969 com o nome de ARPANET ~ A Web surgiu entre 1989 e 1993

Criadores: ~ A Internet foi criada por pesquisadores nos EUA ~ A Web foi criada por um pesquisador na Europa

Fato: ~ A Internet é a maior rede de computadores ~ A Web é “um dos programas” (o maior) na Internet

Dúvidas: ~ (a) Internet é com “I” ou com “i”? ~ (b) Como surgiu a Internet?

Alguns personagens

Linha do Tempo

1969 ~ Larry Roberts estabelece 1º link da ARPANET

ARPANET

Havia pouquíssimos computadores com capacidade de pesquisa nos EUA e muitos pesquisadores que deveriam ter acesso a eles estavam geograficamente separados. (Charles Herzfeld, diretor da ARPA)

22:30 de 29 de outubro de 1969

We set up a telephone connection between us and the guys at SRI... We typed the L and we asked on the phone:
Leonard Kleinrock
"Do you see the L?"
Guys at SRI
"Yes, we see the L," came the response.
We typed the O, and we asked,
Leonard Kleinrock
"Do you see the O."
Guys at SRI
"Yes, we see the O."
Then we typed the G, and the system crashed... Yet a revolution had begun...

Fonte: Estradas e Encruzilhadas da História da Internet (em inglês)

Em 1969, a ARPANET era uma conexão entre 4 universidades apenas.

A configuração da ARPANET em 1969 era de apenas 4 universidades

A partir de 1969 e durante a década de 1970, a ARPANET cresceu e se conectou com várias outras grandes redes.

Contudo, a falta de padrão de protocolos de rede impedia o avanço. Além disso, os protocolos em vigência deixavam a REDE como responsável pela confiabilidade.

Linha do Tempo (1/2)

1969 ~ Larry Roberts estabelece 1º link da ARPANET

1974 ~ Bob Kahn e Vint Cerf especificam os protocolos TCP/IP

1983 ~ Bob Kahn e Vint Cerf implantam a família de protocolos TCP/IP na ARPANET

1974 - 1990 ~ Outras grandes redes se conectaram a ARPANET (CSNET, NIPRNET, SPAN, NSN, ESNet, NSFNET, MILNET, SATNET, WIDEBRAND)

::: figure .embedded-caption

A Internet em 1986

Diagrama lógico da ARPANET em 1986 :::

Linha do Tempo (2/2)

1988 - 1989 ~ Surgimento dos primeiros provedores de acesso ao público geral (ISP), dando forma à Internet (case-sensitive)

1992 ~ O governo americano permitiu a conexão da Internet com outras redes que não eram exclusivamente de pesquisa

1989 - 1993 ~ Tim Berners-Lee cria a WWW em CERN (European Organization for Nuclear Research) e a deixa aberta ao público geral

Dúvida…

Mas se a Web surgiu apenas em 1989, o que era a Internet antes dela?

::: figure .floating-portrait-container O Filosoraptor :::

A era Pré-web

::: figure Tela do cliente de E-mail ELM

Cliente de E-mail ELM (1986)

:::

::: figure Tela do cliente de E-mail Pine

Cliente de E-mail Pine (1989)

:::

::: figure Tela do BBS Koala Country

BBS Koala Country (1989)

:::

::: figure

Usenet GNUs

Tela do Usenet GNUs :::

::: figure

Gopher de Jospeh Maistre

Tela do gopher de Jospeh Maistre :::

A era Pré-web

O que é a Web

Definição e Composição

Definição (informal) de Web

1ª definição ~ É o que estamos vendo e interagindo quando abrimos um navegador (Chrome, Firefox etc.)

2ª definição ~ Um conjunto de documentos de hipermídia interconectados, tipicamente acessados pela Internet. Esses documentos são as páginas web. - Hipermídia: conteúdo digital que envolve texto, imagens, sons, vídeos etc. - Interconectado: um documento contém “links” (referências) a outros (daí a ideia de teia :spider_web:)

Definição (formal) de Web

Segundo Andrew Tanembaum (autor de vários livros de Computação):

A Web é um arcabouço arquitetural para acessar
conteúdo relacionado que está espalhado em milhões
de computadores pela Internet.

“Arcabouço arquitetural” ~ Conjunto de regras para a descrição, visualização e transmissão das páginas web

“Conteúdo relacionado” ~ As páginas podem conter referências (links, ou melhor, hyperlinks) para outras páginas

O que compõe uma página web?

::: figure . height: 90%

racas-raras.html

:::

Logomarca do HTML racas-raras.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>Raças Raras de Ovelhas</title>
    <link rel="stylesheet" href="estilos.css">
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
  </head>
  <body>
    <h1>Raças <strong>Raras</strong> de Ovelhas</h1>
    <p>O interessante animal da espécie <em>Ovis aries</em> (vulga ovelha) é
      tipicamente produzido (pela natureza) em raças distintas. Em cada uma
      delas, os indivíduos ovelhísticos possuem características fisiológicas e
      comportamentais diferentes.</p>
    <p>A seguir, veja alguns exemplos dessas raças.</p>
    <h2>Algod-ovelha</h2>
    <img src="algod-ovelha.jpg" alt="" class="circular foto-ovelha">
    <p>Em vez de lã, esta ovelha é uma exímia produtora de algodão e
      muito apreciada pela indústria têxtil chinesa.</p>
    <p>Pessoas pagam milhões para poder criar destas em suas casas.</p>
    <h2>Pirá-tovelha</h2>
    <img src="pira-tovelha.jpg" alt="" class="circular foto-ovelha">
    <p>Ovelha marinha-saqueadora frequentemente vista nas ilhas caribenhas
      (seu habitat) navegando embarcações de madeira.</p>
    <p>Ao avistar uma destas, gire o leme completamente a estibordo, ice as
      velas e fuja para terra firme.</p>
    <h2>Ovelhopixel</h2>
    <img src="ovelhopixel.png" alt="" class="circular foto-ovelha">
    <p>Uma ovelha digital formada por um conjunto de quadradinhos coloridos.</p>
    <p>Ela precisa se recarregar de tempos em tempos.</p>
    <h2>Outras</h2>
    <ul>
      <li>Robôvelha</li>
      <li>Ninjo-velha</li>
      <li>Legovelha</li>
    </ul>
    <figure id="ovelha" class="sprite">
      <img src="sheep-sprite.png" alt="" draggable="false">
    </figure>
    <script src="shake.js" charset="utf-8"></script>
    <script src="ovelhinha.js" charset="utf-8"></script>
  </body>
</html>

Logomarca do CSS estilos.css

body {
  margin: 0 auto;
  max-width: 600px;
  border-left: 3px double silver;
  border-right: 3px double silver;
}

h1 {
  margin-top: 0;
  font-family: "Comic Sans", cursive;
  font-weight: normal;
  color: purple;
}

h2 {
  clear: both;
  color: black;
  font-family: "Comic Sans", cursive;
  background-image: linear-gradient(to right, yellow 1%, rgba(255,255,255,.5) 1%, transparent);
  padding: 0.15em 0.15em 0.15em 1em;
}

.circular {
  border-radius: 50%;
  shape-outside: circle(50%);
}

.foto-ovelha {
  display: inline-block;
  width: 125px;
  border: 2px solid yellow;
  box-shadow: 3px 3px 3px silver;
}

p {
  text-align: justify;
  line-height: 1.5em;
}

ul {
  list-style-image: url(ovelhinha.gif);
}

.sprite {
  width: 40px;
  height: 40px;
  overflow: hidden;
  position: fixed;
  bottom: 0;
  right: 0;
  margin: 0;
  cursor: move;
}

.sprite.invertido {
  transform: rotateY(.5turn);
}

.sprite > img {
  position: absolute;
  top: calc(-1*40px);
  left: calc(-3*40px);
}

.sprite.parado > img {
  top: calc(-1*40px);
  left: calc(-3*40px);
  animation: parado 1.5s steps(1) 1;
}

@keyframes parado {
  100% { left: calc(-3*40px); }
}

Logomarca do JavaScript ovelhita.js

const ANIMACOES = ['parado', 'andando', 'correndo', 'rolando', 'virando',
  'adormecendo', 'dormindo', 'despencando', 'despencado', 'pendurada'];

const ESTADOS = {
  reflexiva: { loop: 'parado', proximo: ['dormindo', 'andando', 'reflexiva'] },
  dormindo: { loop: 'dormindo', pre: 'adormecendo', pos: { anim: 'parado', duracao: 500 }, proximo: ['andando', 'reflexiva'] },
  andando: { loop: 'andando', proximo: ['andando', 'reflexiva', 'virando', 'correndo'] },
  correndo: { loop: 'correndo', proximo: ['andando', 'correndo'] },
  virando: { loop: 'virando', proximo: ['reflexiva', 'andando'] },
  rolando: { loop: 'rolando', proximo: ['reflexiva', 'dormindo'] },
  pendurada: { loop: 'pendurada', proximo: ['despencando'] },
  despencando: { loop: 'despencando', pos: { anim: 'despencado', duracao: 2000 }, proximo: ['reflexiva']}
};

const vibraTela = () => {
  // chama a vibração da bateria, se houver
  if ('vibrate' in navigator) {
    navigator.vibrate(1000);
  }

  // faz os elementos dentro do tela tremerem
  document.body.classList.add('vibrando');
  document.body.addEventListener('animationend', function(e) {
    e.target.removeEventListener(e.type, arguments.callee);
    document.body.classList.remove('vibrando');
  });
};

let ovelha = {
  el: document.querySelector('#ovelha'),

  // estado inicial
  estado: ESTADOS.reflexiva,
  tempoNoEstado: 0,
  estadosAnteriores: [],
  orientacao: 1,

  // define qual animação será tocada
  defineAnimacao(nomeAnimacao) {
    ANIMACOES.forEach((anim) => this.el.classList.remove(anim));
    this.el.classList.add(nomeAnimacao);
  },

  // define se a ovelha está olhando para esquerda ou direita
  defineOrientacao(novaOrientacao) {
    if (novaOrientacao <= 0) {
      this.el.classList.add('invertido');
    } else {
      this.el.classList.remove('invertido');
    }
    this.orientacao = novaOrientacao;
  },

  largura: 40,
  altura: 40,
  // coordenadas definem a posição do centro da ovelha
  x: 20,
  y: 20,
  // sistema de coordenadas começa na direita e embaixo
  definePosicao(x, y) {
    this.x = x;
    this.el.style.right = `${x - this.largura/2}px`;
    if (!!y) {
      this.y = y
      this.el.style.bottom = `${y - this.altura/2}px`;
    }
  },

  // invocada quando quisermos trocar o estado
  mudaEstado(novoEstado) {    
    switch (novoEstado) {
      case ESTADOS.despencando:
        this.velocidadeY = 0;
        break;
    }

    this.estadosAnteriores.unshift(this.estado);
    while (this.estadosAnteriores.length > 3) {
      this.estadosAnteriores.pop();
    }
    this.estado = novoEstado;
    this.tempoNoEstado = 0;
  },

  sorteiaProximoEstado() {
    return ESTADOS[this.estado.proximo[Math.floor(Math.random() * this.estado.proximo.length)]];
  },

  bateuNaTela() {
    return (this.x - this.largura/2 < 0 || this.x + this.largura/2 > window.innerWidth);
  },

  saiuDaTela() {
    return (this.x + this.largura/2 < 0 || this.x - this.largura/2 > window.innerWidth);
  },

  revolucionaNaTela() {
    let newX;
    if (this.x - this.largura/2 < 0) {
      newX = this.x + window.innerWidth + this.largura/2;
    } else if (this.x + this.largura/2 > window.innerWidth) {
      newX = -this.largura/2;
    }
    this.definePosicao(newX);    
  },

  passouDoChao() {
    return (this.y - this.altura/2 < 0);
  },

  tempoAntes: 0,
  atualiza(tempo) {
    let delta = tempo - this.tempoAntes;
    this.tempoNoEstado += delta;

    switch (this.estado) {
      case ESTADOS.reflexiva:
        if (this.tempoNoEstado > 1000) {
          this.mudaEstado(this.sorteiaProximoEstado());
        }
        break;

      case ESTADOS.dormindo:
        if (this.tempoNoEstado > 4000) {
          this.mudaEstado(this.sorteiaProximoEstado());
        }
        break;

      case ESTADOS.andando:
        this.definePosicao(this.x += this.orientacao * .025 * delta);
        if (this.tempoNoEstado > 3000) {
          this.mudaEstado(this.sorteiaProximoEstado());
        }
        if (this.saiuDaTela()) {
          this.revolucionaNaTela();
        }
        if (this.bateuNaTela() && this.estadosAnteriores.indexOf(ESTADOS.virando) === -1) {
          this.mudaEstado(ESTADOS.virando);
        }
        break;

      case ESTADOS.correndo:
        this.definePosicao(this.x += this.orientacao * .085 * delta);
        if (this.tempoNoEstado > 2500) {
          this.mudaEstado(this.sorteiaProximoEstado());
        }
        if (this.saiuDaTela()) {
          // dá a volta na tela
          this.revolucionaNaTela();
        }
        break;

      case ESTADOS.virando:
        // 500ms é o mesmo tempo definido na animação em CSS
        if (this.tempoNoEstado > 500) {
          this.defineOrientacao(this.orientacao * -1);
          this.mudaEstado(this.sorteiaProximoEstado());
        }
        break;

      case ESTADOS.rolando:
        // rola até bater na tela
        this.definePosicao(this.x += this.orientacao * .085 * delta);
        if (this.bateuNaTela()) {
          this.mudaEstado(this.sorteiaProximoEstado());
        }
        break;

      case ESTADOS.despencando:
        // vai caindo até atingir o chão
        this.definePosicao(this.x, this.y += this.velocidadeY * .085 * delta);
        this.velocidadeY -= 0.025;
        if (this.passouDoChao()) {
          this.definePosicao(this.x, this.altura/2);
          vibraTela();
          this.mudaEstado(this.sorteiaProximoEstado());
        }
        break;        
    }

    if (!this.deveParar) {
      requestAnimationFrame(this.atualiza.bind(this));
    }
    this.deveParar = false;
    this.tempoAntes = tempo;
  },

  para: function() {
    this.deveParar = true;
  }
};


ovelha.inicializa();

As três linguagens

A página das Raras Ovelhas

Estrutura de pasta e arquivos da página de ovelhas

Como surgiu a Web

O que levou ao seu surgimento

Tim, o Coração Valente

As 5 Façanhas de Tim 💓

Tim, o coração valente, tinha uma dúvida :one:

Quero que qualquer pessoa, em qualquer computador (arquitetura, sistema operacional, rede), em qualquer lugar, consiga visualizar documentos um do outro.

Mais que isso, os documentos podem referenciar um ao outro não necessariamente de forma hierárquica. E quero que eles possam conter imagens, tabelas, títulos e outras coisas legais.

HyperText Markup Language (HTML)

Um arquivo html completo

Evolução do HTML e outras alternativas

Versões ~ 1993: HTML 1.0 ~ 1995: HTML 2.0 ~ 1997: HTML 3.2 ~ 1997: HTML 4.0 ~ 2008 - hoje: HTML 5

Alternativas ~ 2000: XHTML 1.0 ~ 2001: XHTML 1.1

Tim, o coração valente, tinha uma dúvida :two:

Agora que especifiquei um formato de arquivo robusto, preciso de um programa que seja capaz de renderizar seu conteúdo e permitir a navegação de um arquivo html para outro.

Foto do navegador WorldWideWeb

Tim, o coração valente, tinha uma dúvida :three:

Até agora, consigo visualizar os arquivos .html no meu computador, usando um navegador. Mas quero poder acessar arquivos de qualquer um que se disponha a deixar o computador ligado, em qualquer parte do mundo.

Servidores Web

Tim, o coração valente, tinha uma dúvida

Quero poder transmitir essas páginas web de um servidor para meu navegador.

Tenho o protocolo TCP/IP à minha disposição, mas preciso transmitir mais do que apenas o conteúdo dos arquivos. Por exemplo, como faço caso o arquivo solicitado não exista? Em que “língua” que o servidor web e o navegador vão conversar?

HTTP

::: figure .http-diagram.flex-align-center.figure-slides.clean.no-margin.invert-colors-dark-mode

:::

  1. Resposta: 
    HTTP/1.1 200 OK
Date: Mon, 23 May 2005 22:38:34 GMT
Server: Apache/1.3.3.7 (Unix) (Red-Hat/Linux)
Content-Type: text/html; charset=UTF-8
Content-Length: 131

<!DOCTYPE html>
<html>
<head>
  <title>Twitter</title>
</head>
<body>
  Olá mundo, este é um tweet.
</body>
</html>

HTTP

Minha Primeira Página Web

Como cria-las, o que elas comem, seu habitat etc.

Ferramentas Necessárias

Referências