PROGRAMAÇÃO WEB

(ESOFT5S-N-A)

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

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;

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 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!");

Desafio Petshop

Na pagina de exposição de serviços oferecidos por um Petshop, passar o mouse em um produto ou serviço apresente o valor do produto usando a função alert()

Implemente a logica dentro da tag <script>;

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

Style Guide e convenção de código

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

JavaScript - Style Guide

  • Nomeação e declaração para variáveis e funções
  • Uso de espaçamento, indentation (recuo) e comentários
  • Melhorar a leitura do código
  • Deixar a manutenção mais fácil

JavaScript - Style Guide

Nome de variáveis

  • camelCase x PascalCase x under_score_case
firstName = "John";
lastName = "Doe";

price = 19.90;
tax = 0.20;

fullPrice = price * tax;

Espaço nos operadores

  • sempre use espaço nos operadores aritiméticos

JavaScript - Style Guide

Indentation (recuo)

Utilize ; no final da linha

Operações complexas use () 

function toCelsius(fahrenheit) {
    return (5 / 9) * (fahrenheit - 32);
}

JavaScript - Style Guide

Objetos JSON

  • Abre e fecha {}
  • Separação dos atributos por ,
  • Propriedades por chave-valor 
var person = {
  firstName: "John",
  lastName: "Doe",
  age: 50,
  eyeColor: "blue"
};

var person = {firstName:"John", lastName:"Doe", age:50};

JavaScript - Style Guide

Inicialize suas variáveis

let firstName = "",
	lastName = "",
	price = 0,
	discount = 0,
	fullPrice = 0,
	myArray = [],
	myObject = {}
	flag: true;

Não use new Object()

  • Use {} instead of new Object()
  • Use "" instead of new String()
  • Use 0 instead of new Number()
  • Use false instead of new Boolean()
  • Use [] instead of new Array()
  • Use /()/ instead of new RegExp()
  • Use function (){} instead of new Function() 

Inicialize suas variáveis

Desafio BinaryGap

  • Um Binary Gap é qualquer sequência máxima de zeros consecutivos, cercada por um em ambas as extremidades na representação binária, dentro de um número inteiro positivo N.
  • Por exemplo, o número 9 tem representação binária 1001 e contém uma Binary Gap de comprimento 2. O número 529 tem representação binária 1000010001 e contém duas Binary Gap: uma de comprimento 4 e outra de comprimento 3. O número 20 tem representação binária de 10100 e contém um Binary Gap de comprimento 1. O número 15 tem representação binária 1111 e não possui Binary Gaps. O número 32 tem representação binária 100000 e não possui Binary Gaps.

Desafio BinaryGap

  • Escreva uma função JS que:
    • Dado um número inteiro positivo N, retorna o comprimento de seu maior Binary Gap.
      • A função deve retornar 0 se N não contiver um Binary Gap.
    • Por exemplo, dado N = 1041, a função deve retornar 5, porque N tem representação binária 10000010001 e, portanto, seu maior Binary Gap é de comprimento 5. Dado N = 32, a função deve retornar 0, porque N tem representação binária '100000' e, portanto, sem Binary Gaps.

Utilize as boas práticas de programação JS

Bootstrap

Bootstrap é um framework web com código-fonte aberto para desenvolvimento de componentes de interface e front-end para sites e aplicações web usando HTML, CSS e JavaScript, baseado em modelos de design para a tipografia, formulários, botões, tabelas, navegação, modais, carrosséis de imagem, e vários outros componentes, melhorando a experiência do usuário (UX) em um site amigável e responsivo.

https://getbootstrap.com/

Wikipedia

Bootstrap

Frameworks CSS 

são conjuntos de componentes que provêm uma estrutura básica de elementos reutilizáveis, tendo uma arquitetura consistente de funcionalidade genérica sob a qual a aplicação será construída.

https://www.mockplus.com/blog/post/css-framework

https://www.treinaweb.com.br/blog/os-principais-frameworks-css/

Bootstrap

  • Fácil de usar: Qualquer um com apenas conhecimento básico de HTML e CSS pode começar a usar o Bootstrap
  • Características Responsiva: ajusta CSS sensíveis do Bootstrap para telefones, tablets e desktops
  • Mobile-first abordagem: Em Bootstrap, mobile-first estilos fazem parte do quadro de núcleo
  • Compatibilidade do navegador: Bootstrap 4 é compatível com todos os navegadores modernos (Chrome, Firefox, Internet Explorer 10+, EDGE, Safari, e Opera)

Bootstrap

Por onde começar?

Há duas maneiras para começar a usar Bootstrap em seu próprio Web site.

  • Incluir Bootstrap de um CDN
  • Baixar Bootstrap de getbootstrap.com

https://getbootstrap.com/docs/4.4/examples/

https://pt.wikipedia.org/wiki/Rede_de_fornecimento_de_conte%C3%BAdo

Rede de fornecimento, entrega e distribuição de conteúdo

Bootstrap

Uma vantagem do uso da CDN:

  • Muitos usuários já baixaram o Bootstrap do CDN ao visitar outro site.
  • Dessa forma, ele será carregado do cache do navegador quando eles visitarem o site, o que leva a um tempo de carregamento mais rápido.
  • Além disso, a maioria das CDNs garantirá que, assim que um usuário solicitar um arquivo, ele será veiculado no servidor mais próximo, o que também leva a um tempo de carregamento mais rápido.

Bootstrap

jQuery?

  • O Bootstrap usa jQuery para componentes JavaScript (como modais, dicas de ferramentas, popovers etc.).
  • No entanto, se você apenas usa a parte CSS do Bootstrap, não precisa deles!

Bootstrap

Layout

  • Container
  • Sistema de Grid
    • Linhas e colunas

Bootstrap - Container

https://getbootstrap.com/docs/4.4/layout/overview/

Bootstrap - Grid system

https://getbootstrap.com/docs/4.4/layout/grid/

Bootstrap - Components

Bootstrap - Components

  • Alerts
  • Badge
  • Breadcrumb
  • Buttons
  • Button group
  • Card
  • Carousel
  • Collapse
  • Dropdowns
  • Forms
  • Input group
  • Jumbotron
  • List group
  • Media object
  • Modal
  • Navs
  • Navbar
  • Pagination
  • Popovers
  • Progress
  • Scrollspy
  • Spinners
  • Toasts
  • Tooltips

jQuery

  • O jQuery é uma biblioteca JavaScript leve, "escreva menos, faça mais".
  • O objetivo do jQuery é facilitar o uso do JavaScript no seu site.
  • O jQuery pega muitas tarefas comuns que exigem muitas linhas de código JavaScript para ser executadas e as agrupa em métodos que você pode chamar com uma única linha de código.
  • A biblioteca jQuery contém os seguintes recursos:
    • Manipulação HTML / DOM
    • Manipulação de CSS
    • Métodos de evento HTML
    • Efeitos e animações
    • AJAX
    • Serviços de utilidade pública
<!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

  • jQuery é fácil de aprender.

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

  • jQuery é fácil de aprender.

Ajax

  • AJAX é o acrônimo para Asynchronous JavaScript and XML.
  • Termo empregado em 2005 por Jesse James Garrett para descrever uma nova forma de utilizar em conjunto algumas tecnologias, incluindo HTML ou XHTML, CSS, JavaScript, DOMl, XML, XSLT, e o mais importante: objeto XMLHttpRequest.
  • Quando essas tecnologias são combinadas no modelo AJAX, as aplicações web são capazes de fazer rapidamente atualizações incrementais para a interface do usuário sem recarregar a página inteira do navegador. Isso torna a aplicação mais rápida e sensível às ações do usuário.
  • Embora a letra X em AJAX corresponda ao XML, atualmente o JSON é mais utilizado que o XML. Ambos (JSON e XML) são utilizados ​​para obter informações do pacote no modelo AJAX.

Ajax - como funciona

  1. Um evento ocorre em uma página da web (a página é carregada, um botão é clicado)
  2. Um objeto XMLHttpRequest é criado por JavaScript
  3. O objeto XMLHttpRequest envia uma solicitação para um servidor web
  4. O servidor processa a solicitação
  5. O servidor envia uma resposta de volta à página da web
  6. A resposta é lida por JavaScript
  7. Ação apropriada (como atualização da página) é executada pelo JavaScript

Ajax - XMLHttpRequestobjeto

  • Todos os navegadores modernos suportam o XMLHttpRequestobjeto.

  • O XMLHttpRequestobjeto pode ser usado para trocar dados com um servidor da web nos bastidores. Isso significa que é possível atualizar partes de uma página da web, sem recarregar a página inteira.

Desafio Web-Scraping Hub

[
    {
        "nome": "Pacote Maceió + Maragogi + Porto de Galinhas",
        "desconto": "50%",
        "valor": "R$999"
    },
    {
        "nome": "Pacote Orlando + Miami - 2021",
        "desconto": "50%",
        "valor": "R$1299"
    }
]

Realizar um web-scraping na pagina do Hub (https://www.hurb.com/br) e montar uma lista com as promoções da pagina principal

Desafio POST e GET com AJAX

[
    {
        "nome": "Pacote Maceió + Maragogi + Porto de Galinhas",
        "desconto": "50%",
        "valor": "R$999"
    },
    {
        "nome": "Pacote Orlando + Miami - 2021",
        "desconto": "50%",
        "valor": "R$1299"
    }
]

Consultar o API de promoção do Hub do servidor

https://server-node-example.herokuapp.com/promotios-hub

e montar uma pagina para apresentar as promoções com os dados de retorno da chamada ajax.

Frameworks de Desenvolvimento Web

Front-end

Seminário de Frameworks para o Desenvolvimento Web

  • Contextualização
  • Principais Características
  • Mantenedor e players
  • Conclusão (opinião do grupo)

https://medium.com/front-end-weekly/10-most-popular-web-frameworks-in-2020-167b9103e08a

Frameworks de Desenvolvimento Web

Back-end

Agenda Fundamentos da Web

  • Arquitetura Cliente/Servidor
  • Protocolos de Rede
  • Modelos de Requisições
  • Endereçamento IP/Domínio/DNS
  • Servidores de aplicação
  • Browser
  • Aplicação web
  • Desenvolvimento backend e frontend
  • Versionamento, Empacotamento (build) e Deploy
  • Cloud Computing

Arquitetura em camadas Cliente/Servidor

  • Camada Cliente
  • Camada web
  • Camada lógica
  • Camada dados

Cliente

Servidor

Clientes

  • Acessa algum recurso do servidor
  • Possui um identificador único (IP)
  • Independe do sistema operacional,
  • Possui Informação implícitas
    • localização,
    • versão de software
    • etc...
  • Comunicação é baseada em protocolo
  • Chamado de Agente ativo

Servidores

  • São computadores físicos ou virtualizados
  • Também Possui um identificador único (IP)
  • Redundância de energia, internet, monitoramento
  • SO: Linux, Windows, Unix...
  • Podem ser servidor físico locais (LAN)
  • Servidores virtuais VPS (Virtual Private Server)
    • AWS, Google Cloud, Azure, etc...
  • Chamado de Agente passivo

Protocolos de Rede

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

Modelos de Requisições

  • Protocolo HTTP
    • Recursos web (estáticos e dinâmicos)
    • Tipos de recurso: páginas HTML, registro do banco de dados,  Música, PDF
    • Modelo Request vs Response
      • Request: Cliente, ativo
      • Response: Servidor de aplicação, passivo
    • Modelo URL (Uniform Resource Locator)

Modelos de Requisições

 

Modelos de Requisições

Convencional (HTTP)

Modelos de Requisições

REST (API - application programming interface)

Endereçamento

  • 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

Domínio

Endereçamento

IP - Internet Protocol

  • Base de endereços na web
  • representa o endereço do host seja client ou server
  • Pode ser estático ou dinâmico
  • IPv4 e IPv6

Endereçamento

  • Nome (Apelidos) mais fácil de memorizar do que um IP
  • Destinado para diferentes tipos
    • Países
    • Educacionais
    • Organizacionais
  • Aquisição via CPF ou CNPJ

Domínio

Endereçamento

DNS - Domain name server

  • 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 - replicação DNS
    • Tabela ANS (Authoritative Name Server)
      • Resolve o IP do servidor
  • Sem ele a internet pararia de funcionar

Endereçamento

DNS - Domain name server

Servidores de Aplicação

  • Software que é instalado num servidor físico
  • Prover o acesso aos recursos da aplicação web
  • Expõem app em portas do servidor

Browser

  • Também chamado de User Agent
    • Aplicação que age em nome do usuário
  • Outros exemplos:
    • cURL
    • Telnet
  • Navegadores modernos
    • Chrome, Firefox, Opera, Safari, Internet Explorer, Ice Web
    • Tem a capacidade de se comunicar com aplicações web por meio dos protocolos de rede
    • São Software complexo
    • Console do desenvolvedor

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 
  • Podem haver mais de uma aplicação web em
    um único servidor de aplicações

Aplicação Web

Aplicação Web

Aplicação Web

História das principais ferramentas de desenvolvimento

Cliente

Server

Domínio

DNS

Servidor de aplicação

Aplicação web

Browser

Frontend vs Backend

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

Versionamento

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

Versionamento

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/

Empacotamento - build

  • É a compilação que juntar todos os arquivos e recursos do projeto e transforma em um arquivo (artefato).
  • Vantagens:
    • O software pode ser desenvolvido em qualquer sistema operacional.
    • Facilidade do transporte do artefato para os processos de CI/CD
    • Validação mais detalhada do código fonte (Lint)

AULA REMOTA
TRANSMISSÃO AO VIVO

Made with Slides.com