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>

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

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

Um evento ocorre em uma página da web (a página é carregada, um botão é clicado)
Um objeto XMLHttpRequest é criado por JavaScript
O objeto XMLHttpRequest envia uma solicitação para um servidor web
O servidor processa a solicitação
O servidor envia uma resposta de volta à página da web
A resposta é lida por JavaScript
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

Django: https://djangoproject.com/
Ruby on Rails: https://rubyonrails.org/
Laravel: https://laravel.com/
Spring: https://spring.io/
Express: https://expressjs.com
Flask: https://flask.palletsprojects.com/

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

Domínio / subdomínio
- Endereço a um único recurso
  - https://www.google.com.br/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png
- Protocolo
- Domínio/endereço do servidor web,
- Caminho do recurso dentro do servidor,
- Recurso

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
- http://registro.br

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
- http://registro.br
- Diversas categorias

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

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

PROGRAMAÇÃO WEB

Desenvolvimento Web

HTML / HTML5

HTML / HTML5

HTML / HTML5

ABRE Tag

FECHA Tag

HTML / HTML5

DOM

HTML / HTML5

HTML / HTML5

Principais tags

HTML / HTML5

Principais atributos

HTML / HTML5

Tags de formatação

Comentário

HTML e CSS

CSS / SCSS

CSS / SCSS

CSS / SCSS

CSS / SCSS

Seletores

CSS / SCSS

Formas de inserção

Comentários

CSS / SCSS

CSS / SCSS

Atividade:

CSS

Propriedades tipográficas e fontes

CSS

Alinhamento e decoração de texto

CSS

Bordas

CSS

Cores

CSS

Espaçamento, Margem e Dimensões

CSS

Dimensões

CSS

Margin

CSS

Padding

CSS

Fluxo do documento e float

CSS

Cascata e herança

CSS

Display inline-block

CSS

Seletores inteligentes

CSS

Seletores inteligentes

CSS

CSS Reset

HTML Semântico

User Experience Design - UX

ou Interaction Design (IxD)

HTML Semântico

HTML Semântico

HTML Semântico

Mais <tags>

Wireframes

Desafio Petshop

JavaScript

JavaScript

JavaScript

JavaScript

JavaScript

JavaScript

A tag <script>

Funções e Eventos de JavaScript

Desafio Petshop

JavaScript

Syntax

JavaScript

Syntax básico

JavaScript