Programação Web

Fundamentos da web

Desenvolvimento web

Agenda Fundamentos da Web

  • Cliente/Servidor
  • Protocolo
  • Requisições
  • Domínio/DNS
  • Servidores de aplicação
  • Aplicação web
  • Desenvolvimento back-end x front-end

Clientes

  • Acessa algum recurso do servidor
  • Identificador IP
  • Independe do sistema operacional,
  • Informação implícitas
    • localização,
    • versão de software
  • Comunicação baseada em protocolo
  • Agente ativo

Servidores

  • Computadores físicos ou virtualizados
  • Identificador IP
  • Linux, Windows, Unix...
  • Servidor físico locais
  • Servidores virtuais VPS (Virtual Private Server)
    • AWS
    • Google Cloud
    • Azure
  • Agente passivo

Protocolos

  • Conjunto de regras e procedimentos
  • HTTP (Hypertext Transfer Protocol)
  • REST (Representational State Transfer)

Requisições

Domínio

  • Nome (Apelidos) mais fácil de memorizar do que um IP
  • Aquisição via CPF ou CNPJ

DNS

  • Domain Name Server
  • Resolve nomes de domínios em IPs
  • Sem ele a internet pararia de funcionar

Servidores de Aplicação

  • Software que prover o acesso aos recursos da aplicação web

Aplicação Web

  • Protocolo HTTP
  • Fonte dos recursos
    • Páginas
    • Imagens/Videos
    • Envio de e-mail
    • Operações/Cálculos
    • Cadastros/Banco de dados
    • API

Aplicação Web

História

Cliente

Server

Domínio

DNS

Servidor de aplicação

Aplicação web

Browser

Arquitetura para uma Aplicação Web

Dev. front end x Dev. back end

Back end

  • Python, PHP, Java, Ruby, C#
  • Bancos de dados e SQL, NoSQL
  • Web services
  • Apache, NGinx, IIS
  • Algoritmo
  • Lógica de Programação
  • Servidores
  • Linux, Windows

Front end

  • HTML5
  • CSS3
  • Javascript
  • Bootstrap
  • Design
  • Teoria de cores
  • Usabilidade
  • Tipografia
  • UX

Desenvolvimento Web

  • HTML
  • CSS
  • JavaScript
  • Bootstrap
  • jQuery
  • Frameworks

Front-end

HTML / HTML5

  • HTML Descreve a estrutura de uma página Web
  • Composto por uma série de elementos
  • Elementos HTML diz ao Browsers como exibir o conteúdo
  • Elementos HTML são representados por tags
  • Tags HTML rotular pedaços de conteúdo, como "título", "parágrafo", "tabelas", e assim por diante
  • Browsers não exibir as tags HTML, mas usá-los para processar o conteúdo da página

Hyper Text Markup Language

HTML / HTML5

Hyper Text Markup Language

HTML / HTML5

Hyper Text Markup Language

<tagname>content goes here...</tagname>

ABRE Tag

FECHA Tag

HTML / HTML5

Hyper Text Markup Language

DOM

Document Object Model

<!DOCTYPE html>
<html>
  <head>
    <title>Page Title</title>
  </head>
  <body>

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

  </body>
</html>

HTML / HTML5

  • É uma linguagem de marcação 
  • É fácil de aprender
  • É divertida

HTML / HTML5

  • Principais tags

    •     títulos <h>
    •     textos - <p> parágrafos <br /> e <hr />
    •     listas - <ul> <ol>
    •     links <a href>
    •     imagens <img src>
    •     botões <button on>
    •     tabelas* <table>

HTML / HTML5

  • Principais atributos

    • href,

    • source,

    • nome

    • id,

    • class,

    • style,

    • with, ---> <div>

    • height, 

    • title,

    • style

HTML / HTML5

  • Tags de formatação

    • <b> - Texto em negrito
    •     <strong> - texto Importante
    •     <i> - O texto em itálico
    •     <em> - texto enfatizado
    •     <mark> - texto marcado
    •     <small> - texto pequeno
    •     <del> - texto excluído
    •     <ins> - Texto inserido
    •     <sub> - Texto Subscrito
    •     <sup> - texto sobrescrito

  • Comentário

HTML e CSS

  • Uso correto de indentação

  • É recomendada a adição de comentários antes da abertura e pós o fechamento de tags estruturais (que conterão outras tags)

  • Evitar usar !important 

  • Usar html semântico sempre possível

  • Folhas de estilo no <head> e scripts JS ao final do <body>

  • Estrutura lógica básica

    • css/

    • js/

    • intex.html

Boas práticas

CSS / SCSS

  • CSS é uma linguagem que descreve o estilo de um documento HTML.

  • CSS descreve como elementos HTML deve ser exibido

Cascading Style Sheets

Quando tags como <font> e atributos de cor foram adicionados à especificação HTML 3.2, começou um pesadelo para os desenvolvedores web. Desenvolvimento de grandes sites, onde fontes e cores informações foram adicionadas para cada página, tornou-se um processo longo e caro.

Para resolver este problema, o World Wide Web Consortium (W3C) criou CSS.

CSS removeu o estilo de formatação da página  feita no HTML!

CSS / SCSS

Cascading Style Sheets

As definições de estilo são normalmente

guardados em arquivos .css externas.

CSS / SCSS

Cascading Style Sheets

CSS / SCSS

Cascading Style Sheets

  • Seletores

    • seletores simples
      • selecionar elementos com base no nome, id, classe
    • seletores de combinadores
      • selecionar elementos com base em uma relação específica entre eles
    • Seletores pseudo-classe
      • selecionar elementos com base em um determinado estado
    • Pseudo-elementos seletores
      • seleccionar e estilo de uma parte de um elemento
    • Seletores de atributos 
      • selecionar elementos com base em um atributo ou valor de atributo

CSS / SCSS

Cascading Style Sheets

  • Formas de inserção 

    • External CSS

    • Internal CSS

    • Inline CSS

  • Comentários

body {
  background-color: lightblue;
}

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

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

CSS / SCSS

  • É uma linguagem de estilização 
  • Descreve como os elementos devem aparecer
  • É possível generalizar estilos

Cascading Style Sheets

CSS / SCSS

  • Atividade:

    • estilizar a <table>
    • estilizar a <div> transformar em um circulo

Cascading Style Sheets

CSS

  • Propriedades tipográficas e fontes

Cascading Style Sheets

h1 {
    font-family: serif;
}
h2 {
    font-family: sans-serif;
}
p {
    font-family: monospace;
    text-transform: uppercase;
}
body {
    font-family: "Arial", "Helvetica", sans-serif;
}

CSS

  • Alinhamento e decoração de texto

Cascading Style Sheets

p {
    line-height: 3px;    /* tamanho da altura de cada linha */
    letter-spacing: 3px; /* tamanho do espaço entre cada letra */
    word-spacing: 5px;   /* tamanho do espaço entre cada palavra */
    text-indent: 30px;   /* tamanho da margem da primeira linha do texto */
}

CSS

  • Bordas

Cascading Style Sheets

body {
  border-color: red;
  border-style: solid;
  border-width: 1px;
}

CSS

  • Cores

Cascading Style Sheets

h1 {
    background-color: yellow;
}

h3 {
    color: rgb(255, 200, 0);
}

h4 {
    background-color: #F2EDED;
}

CSS

  • Espaçamento, Margem e Dimensões

    • Dimensões
    • Margin
    • Padding

Cascading Style Sheets

CSS

  • Dimensões

Cascading Style Sheets

p {
    background-color: red;
    height: 300px;
    width: 300px;
}

CSS

  • Margin

Cascading Style Sheets

p {
    margin: 1px 2px 3px 4px;
    margin-top: 3px;
    margin-right: 3px;
    margin-left: 3px;
    margin-bottom: 3px;
}

CSS

  • Padding

Cascading Style Sheets

p {
    padding: 1px 2px 3px 4px;
    padding-top: 3px;
    padding-right: 3px;
    padding-left: 3px;
    padding-bottom: 3px;
}

CSS

  • Fluxo do documento e float

Cascading Style Sheets

#imagem {
  margin-left: auto;
  margin-right: auto;
  width: 550px;
}

div {
  float: left;
}

CSS

  • Cascata e herança

Cascading Style Sheets

<div id="pai">
    <h1>Sou um título</h1>
    <h2>Sou um subtítulo</h2>
</div>

<style>
    #pai {
        color: blue;
    }
</style>

CSS

  • Display inline-block

Cascading Style Sheets

.painel li {
    display: inline-block;
    vertical-align: top;
    width: 140px;
    margin: 2px;
    padding-bottom: 10px;
}

CSS

  • Seletores inteligentes

Cascading Style Sheets

input[type="text"] {
    border-radius: 4px;
}

div[class|="menu"] {
    border-radius: 4px;
}

input[value~="problema"] {
    color: #CC0000;
}

CSS

  • Seletores inteligentes

Cascading Style Sheets

/* busca por inputs com valor de "name" iniciando em "usuario" */
input[name^="usuario"] {
    color: #99FFCC;
}

/* busca por inputs com valor de "name" terminando em "teste" */
input[name$="teste"] {
    background-color: #CCFF00;
}

/* busca por inputs com valor do atributo "name".
    contendo "tela" em qualquer posição */
input[name*="tela"] {
    color: #666666;
}

CSS

  • CSS Reset

Cascading Style Sheets

  • Quando não especificamos nenhum estilo para nossos elementos do HTML, o navegador utiliza uma série de estilos padrão, que são diferentes em cada um dos navegadores. Em um momento mais avançado dos nossos projetos, poderemos enfrentar problemas com coisas que não tínhamos previsto

https://meyerweb.com/eric/tools/css/reset/

HTML Semântico 

User Experience Design - UX 

ou Interaction Design (IxD)

  • Um projeto de site ou aplicação web envolve muitas disciplinas em sua execução, pois são diversas características a serem analisadas diversas as possibilidades apresentadas pela plataforma.
  • Devemos conhecer muito bem as características do público alvo, pois ele define qual a melhor abordagem para definir a navegação, tom linguístico e visual a ser adotado. 
organizando o caos com HTML5

HTML Semântico 

<body>
    <div id="cabeclaho">
        <!-- Conteúdo do cabeçalho -->
    </div>
    <div id="side-bar">
        <!-- Conteúdo do menu lateral -->
    </div>
    <div id="content">
        <!-- Conteúdo conteudo principal -->
    </div>
    <div id="destaques">
        <!-- Painéis com destaques -->
    </div>
    <div id="footer">
        <!-- Conteúdo do rodapé -->.
    </div>
</body>
organizando o caos com HTML5

HTML Semântico 

<body>
    <header>
        <!-- Conteúdo do cabeçalho -->
    </header>
    <nav>
        <!-- Conteúdo do menu lateral -->
    </nav>
    <main>
        <!-- Conteúdo conteudo principal -->
    </main>
    <aside>
        <!-- Painéis com destaques -->
    </aside>
    <footer>
        <!-- Conteúdo do rodapé -->.
    </footer>
</body>
organizando o caos com HTML5

HTML Semântico 

organizando o caos com HTML5

  • Mais <tags>

<header>
<section>
<article>
<nav>
<aside>
<main>

<figure>
<footer>
<time>

  • Wireframes

Desafio Petshop

Crie uma pagina de exposição de serviços oferecidos por um Petshop

JavaScript

  • É uma das 3 línguas que todos os desenvolvedores web devem aprender:

       1. HTML para definir o conteúdo de páginas da web

       2. CSS para especificar o layout de páginas da web

       3. JavaScript para programar o comportamento de páginas da web

     

  • Páginas da web não são o único lugar onde o JavaScript é usado. Muitos programas de desktop e servidor usam JavaScript. Node.js é o mais conhecido.

  • Alguns bancos de dados, como MongoDB (JSON) e CouchDB, também usam JavaScript como sua linguagem de programação.

JavaScript

  • JavaScript e Java são completamente diferentes idiomas, tanto no conceito e design.
  • JavaScript é uma linguagem scripting e interpretada.
  • Foi inventado por Brendan Eich, em 1995, e tornou-se um padrão ECMA em 1997.
  • ECMA-262 é o nome oficial da norma. ECMAScript é o nome oficial da língua. 
  • É fácil de aprender
  • Existem "infinitas" possibilidades 

ECMAScript é uma especificação de linguagem de programação baseada em scripts, padronizada pela Ecma International na especificação ECMA-262 e ISO/IEC 16262

JavaScript

  • Outra característica comum nas linguagens de scripting é que normalmente elas são linguagens interpretadas, ou seja, não dependem de compilação para serem executadas.
  • Essa característica é presente no JavaScript: o código é interpretado e executado conforme é lido pelo navegador, linha a linha, assim como o HTML.
  • O scripting JavaScript pode mudar HTML
  • Um dos muitos métodos JavaScript HTML é getElementById().
  • Este método "encontra" um elemento HTML no DOM e podemos trabalhar com esse elemento.
<!DOCTYPE html>
<html>

<body>

    <h2>My First JavaScript</h2>

    <button type="button" onclick="document.getElementById('demo').innerHTML = Date()">
        Click me to display Date and Time.</button>

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

</body>

</html>

JavaScript

  • Exemplo básico

JavaScript

<!DOCTYPE html>
<html>
<body>

    <h2>What Can JavaScript Do?</h2>
    <p>JavaScript can change HTML attribute values.</p>
    <p>In this case JavaScript changes the value of the src (source) attribute of an image.</p>

    <button 
	onclick="document.getElementById('myImage').src='https\:\/\/www.w3schools.com\/js\/pic_bulbon.gif'">
          Turn on the light
    </button>

    <img id="myImage" 
	src="https://www.w3schools.com/js/pic_bulboff.gif" style="width:100px">

    <button 
	onclick="document.getElementById('myImage').src='https\:\/\/www.w3schools.com\/js\/pic_bulboff.gif'">
          Turn off the light
    </button>

</body>
</html>
  • Exemplo básico, mais legal!

JavaScript

A tag <script>

  • Em HTML, o código JavaScript deve ser inserido entre <script>e </script>.
  • Vamos modificar o exemplo da lampada...

Funções e Eventos de JavaScript

  • function é um bloco de código JavaScript, que pode ser executado quando "chamado" para.
  • Por exemplo, uma função pode ser chamada quando um evento ocorre, como quando o usuário clica em um botão.
  • Corrigir o exemplo da lampada...

JavaScript

Syntax

  • Operadores
  • Variáveis
  • Tipos de dados
    • Number
    • String
    • Listas
    • Objetos (JSON)
  • Funções

É possível omitir o ponto e vírgula no final de cada declaração. A omissão de ponto e vírgula
funciona no JavaScript devido ao mecanismo chamado automatic semicolon insertion (ASI).

JavaScript

Syntax básico

let x;           
x = 5;           
x = "John";      
x = {firstName:"John", lastName:"Doe"};

typeof(x);

typeof("John");
typeof(3.14);
typeof(true);
typeof(false);
typeof(y);

JavaScript

Syntax listas (Arrays)

let cars = ["Saab", "Volvo", "BMW"];
let cars = new Array("Saab", "Volvo", "BMW");

cars.toString();
cars.pop(); 
cars.push("Ferrari");
cars.shift(); 
cars.unshift("Mercedes")
cars.sort();
cars.reverse();

JavaScript

O DOM

  • Para permitir alterações na página, ao carregar o HTML da página, os navegadores carregam em memória uma estrutura de dados que representa cada uma das nossas tags no JavaScript. Essa estrutura é chamada de DOM (Document Object Model). Essa estrutura pode ser acessada através da variável global document
  • O termo document é frequentemente utilizado em referências à nossa página. No mundo front-end, documento e página são sinônimos.

JavaScript

O DOM

  • Para permitir alterações na página, ao carregar o HTML da página, os navegadores carregam em memória uma estrutura de dados que representa cada uma das nossas tags no JavaScript. Essa estrutura é chamada de DOM (Document Object Model). Essa estrutura pode ser acessada através da variável global document
  • O termo document é frequentemente utilizado em referências à nossa página. No mundo front-end, documento e página são sinônimos.

JavaScript

querySelector

  • Acessar via JavaScript, elementos do DOM que queremos alterar.
  • Capacidade de usar os seletores para encontrar os elementos na página.
document.getRootNode()

// CONSULTA DE ELEMENTO(S)
document.getElementById("id")

document.getElementsByClassName("")

document.getElementsByName("")

document.getElementsByTagName("")

// CONSULTA DE SELETORES
document.querySelector("h1")

document.querySelector(".class")

document.querySelector("#id")

document.querySelectorAll("div")

JavaScript

Funções e os eventos do DOM

  • Apesar de ser interessante a possibilidade de alterar o documento todo por meio do JavaScript, é muito comum que as alterações sejam feitas quando o usuário executa alguma ação, como por exemplo, mudar o conteúdo de um botão ao clicar nele e não quando a página carrega.
  • Porém, por padrão, qualquer código colocado no <script>  é executado assim que o navegador lê ele.
  • Para guardarmos um código para ser executado em algum outro momento, por exemplo, quando o usuário clicar num botão, é necessário utilizar alguns recursos do JavaScript no navegador.

JavaScript

Funções e os eventos do DOM

  • oninput: quando um elemento input tem seu valor modificado
  • onclick: quando ocorre um click com o mouse
  • ondblclick: quando ocorre dois clicks com o mouse
  • onmousemove: quando mexe o mouse
  • onmousedown: quando aperta o botão do mouse
  • onmouseup: quando solta o botão do mouse (útil com os dois acima para gerenciar drag'n'drop)

JavaScript

Funções e os eventos do DOM

  • onkeypress: quando pressionar e soltar uma tecla
  • onkeydown: quando pressionar uma tecla
  • onkeyup: quando soltar uma tecla
  • onblur: quando um elemento perde foco
  • onfocus: quando um elemento ganha foco
  • onchange: quando um input, select ou textarea tem seu valor alterado
  • onload: quando a página é carregada
  • onunload: quando a página é fechada
  • onsubmit: disparado antes de submeter o formulário (útil para realizar validações)

JavaScript

Funções e os eventos do DOM

function mostraAlerta() {
    alert("Funciona!");
}

var botao = document.querySelector("#meuBotao");
botao.onclick = mostraAlerta;

JavaScript

console.log e Funções anonimas

console.log("texto...", variavel, [], {});


var botao = document.querySelector("#meuBotao");

botao.onclick = function () {
    alert("Funciona!");
};

botao.onclick = () => alert("Funciona!");

JavaScript

JavaScript no <head> ou <body>

  • Você pode colocar qualquer número de scripts em um documento HTML.
  • Os scripts podem ser colocados no <body>, ou na <head>seção de uma página HTML, ou em ambos.

Qual é a melhor opção?

boas práticas JavaScript 

JavaScript

Boas práticas JavaScript 

  • Separar os scripting em arquivos .js
  • Boa indentação
  • Utilize o operador === e não ==
  • Não declare variáveis com o operador var
    • ​No ES6 foram criados os operadores let e const)
  • ​Coloque os Scripts no fim da tag <body>
  • Clean Code

Desafio Petshop

Na pagina de exposição de serviços oferecidos por um Petshop, ao clicar em um produto ou serviço apresente o valor do produto para o usuário;

<!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>

Bootstrap

  • É um framework para o desenvolvimento da web responsiva
  • É fácil de aprender
  • É divertida 
<!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>

jQuery

  • É uma biblioteca JavaScript para facilitar a programação

Frameworks

Angular https://angular.io/

Vuejs https://vuejs.org/

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

Made with Slides.com