Web Avançado

Chrysthian Simão

Fundamentos

Acompanhe as aulas

https://slides.com/chrysthian/web-avancado-1​

https://slides.com/chrysthian

Oi, eu sou o CH!

Formado em Sistemas de Informação pela OPET (com coordenação de um certo xará)

 

Pós Graduado em Desenvolvimento de Jogos para Computador pela Universidade Positivo

 

Desenvolvedor há 19 anos

Arquiteto front-end nos últimos 7 anos

Oi, eu sou o CH!

Quais nerdices você curte?

SIM!

https://github.com/digihaus/monogatari

http://digi.haus/demo/zombies/

Primeiro, uma demo legal

Web Avançado

Construir Soluções Web

 

  • Frontend com React e TS
     
  • Backend com Node
     
  • Integração com Banco de dados NOSQL MongoDB

Convenções do CH

(e da disciplina)

  • Codificar em inglês
     
  • Formatter é a critério do aluno
     
  • Apresentar os trabalhos em um repositório do GIT (se você não tem um, vamos criar e aprender a usar juntos)
     
  • Os temas dos trabalhos são a critério de vocês, podem usar quaisquer recursos para construir eles desde que consiga defender seu projeto na frente da turma

Particularidades do JS

Boolean

let y = true; 
let x = false;
let z = null;

z = 3 > 2;    // true

// resultados assumindo uma chamada 
// a função teste(z) aqui do lado -->

z = y && x;      //false
z = undefined;   //false
z = null;        //false
z = "";          //false
z = "bolovo";    //true
z = 0;           //false
z = NaN;         //false
z = 10;          //true
z = {};          //true
z = [];          //true

function teste( z ){
    if( z ){
        alert("true");
    } else {
        alert("false");
    }
};

Nada muito novo ali em cima, mas igualdade é uma coisa mais delicada!

String

let a = "Laranja";
let b = "Batata";

console.log(a > b); // true

console.log(a.localeCompare(b)); // -1

console.log(b.localeCompare(a)); // 1

console.log(a.localeCompare(a)); // 0

Array

let a = new Array();  //usamos um construtor para criar um array
let a = [];           //também é um construtor válido

let cars = new Array("Fusca", "Palio", "BMW");
let cars = ["Fusca", "Palio", "BMW"];

let name = cars[0];     //'Fusca'

let x = cars.length;    // obtem o número de elementos (3)
let y = cars.sort();    // ordenação nativa

let fruits = ["Banana", "Laranja", "Maçã", "Manga"];
fruits.push("Limão");                  // adiciona um elemento ao array
fruits[fruits.length] = "Abacate";     // Também funciona

Array

let wtf = [];

wtf["a"] = "abacate";

wtf[0];     // undefined
wtf["a"];   // 'abacate'

function mensagem( str ){ 
    alert( str ); 
}

wtf["funcao"] = mensagem;
wtf["funcao"]("bolinho"); // que diabos!?

Ponteiros

Javascript usa ponteiros (ou referências de memória, como preferir). É um conceito importante para escrever um código otimizado.

 

Os ponteiros do Javascript funcionam da mesma forma que em Java com contagem de referência.

Ponteiros

Assim como no Java, no JS tudo são ponteiros, a própria declaração de uma variável acontece da seguinte forma:

  let a = [];
  • O código é interpretado por uma linguagem de baixo nível
  • Memória é alocada para guardar a informação
  • A variável recebe o ponteiro de memória contendo a informação

Ponteiros

let a = 2; 
let b = a;

// Só há um espaço reservado em memória com o nosso objeto
// No entanto há duas referências ("a" e "b") para o mesmo
// endereço de memória

b = null;

// Isto faz com que a referência ao objeto da variável "b" 
// deixe de existir mantendo apenas uma referência em "a"

a = null;

// Agora sem as duas referências o valor alocado em memória 
// pode ser sinalizado para garbage collection

Ponteiros

Algumas coisas começam a fazer sentido agora como por exemplo, porque consideram o operador "new" computacionalmente caro, é porque ele aloca fisicamente memória.

 

Isso não é só sobre JS mas linguagens num geral.

 

Se a linguagem usa uma VM inteligente, ela gerencia a própria memória e consegue amenizar o impacto em tempo de execução.

Null e Undefined

Null e Undefined são coisas diferentes para a linguagem, mas são logicamente iguais (então por isso é comum confundir).

 

Uma variável declarada vazia, sem atribuição é undefined, porque nenhuma memória foi alocada para ela ainda.

 

Se a variável recebe a atribução de null, significa que ela continha algo e está pronta para ser coletada no Garbage Collector porque ela não será mais usada.

Entendendo a árvore do DOM

Objeto Math

https://developer.mozilla.org

Math.sqrt(16);   //4
Math.PI;         //3.141592653589793
Math.cos(1);     //0.5403023058681398
Math.ceil(1.2);  //2
Math.floor(1.2); //1
Math.random();   //Um número aleatório entre 0 e 1

//esta função retorna um valor aleatório entre um mínimo e um máximo
function getRandom(min, max) {
  return Math.floor(Math.random() * (max - min)) + min;
}

Objeto document

<html>
    <head>
        <title>My Title</title>
    </head>

    <body>
        <h1 id="header">My header</h1>
        <a href="http://www.google.com.br" id="myLink">My link</a>
    </body>
</html>

<script>
    console.log( document.getElementById("myLink") );
</script>

https://developer.mozilla.org

Objeto document

//Retorna uma lista de elementos com o nome de tag HTML fornecido.
document.getElementsByTagName();

function encontrarTagP() {
  const all = document.getElementsByTagName('p');
  let num = all.length;
  alert('Existem ' + num + ' parágrafos neste documento');
}

Objeto document

//Retorna uma lista de elementos com o nome de classe CSS fornecido.
document.getElementsByClassName();

<p class="test">hello</p>
            
<script>
   var test = document.getElementsByClassName("test");
   console.log(test);
</script>

Interagindo com Tags

Tags HTML podem ser manipuladas normalmente com JS, é o uso mais comum da linguagem.

 

Atributos, valores e eventos podem ser manipulados programaticamente

Interagindo com Tags

<html>
    <head>
        <title>My Title</title>
    </head>

    <body>
        <h1 id="header">My header</h1>
        <a href="http://www.google.com.br" id="myLink">My link</a>
    </body>
</html>

<script>
    console.log( document.getElementById("myLink").href );
</script>

Eventos do Navegador

<html>
    <head>
        <title>My Title</title>
    </head>

    <body>
        <h1 id="header">My header</h1>
        <a href="http://www.google.com.br" id="myLink">My link</a><br>
        <input type="button" value="Click me!"
         onclick="exibirConsole()">
    </body>
</html>

<script>
    function exibirConsole(){
        console.log( document.getElementById("myLink").href );
    }
</script>

Manipulando HTML

<html>
<body>

<h1 id="header">Você não clicou no botão</h1>

<input type="button" value="Clique em mim!" onclick="change()">
<script>

let count = 0;

function change(){
    let element = document.getElementById("header");
    count++;
    element.innerHTML = "Você clicou no botão " + count + " vez(es)!";

    console.log(window.count);
}

</script>
</body>
</html>

Manipulando HTML

<html>
<body>

<form action="">
  <input type="radio" name="language" value="java"> JAVA <br>
  <input type="radio" name="language" value="csharp"> C# <br>
  <input type="button" value="Click Me" onclick="check()">
</form>

</body>
</html>

<script>

function check(){
	console.log(document.getElementsByName("language")[0].value);
   	console.log(document.getElementsByName("language")[1].checked);
    console.log(document.getElementsByName("language")[2]);
}

</script>

Manipulando HTML

<html>
<body>
<form action="">
  <input type="checkbox" name="coffee" value="latte"> Latte<br>
  <input type="checkbox" name="coffee" value="capuccino"> Capuccino<br>
  <input type="checkbox" name="coffee" value="expresso"> Expresso<br>
  <input type="button" value="Click Me" onclick="check()">
</form>
</body>
</html>

<script>
function check(){
	console.log(document.getElementsByName("coffee")[0].value);

        document.getElementsByName("coffee")[0].checked = 
!document.getElementsByName("coffee")[0].checked;

        console.log(document.getElementsByName("coffee")[1].checked);
        console.log(document.getElementsByName("coffee")[2].value);
}
</script>

Adivinhe a cor

Criando componentes HTML

// cria um elemento <button>
let btn = document.createElement("button");        

// cria um nó de texto
let t = document.createTextNode("Clique em mim");  

// adiciona o nó de texto ao objeto <button>
btn.appendChild(t);

// adiciona o nó <button> no corpo <body> da página HTML
document.body.appendChild(btn);

https://developer.mozilla.org

Navegando pelos nós do DOM

if (element.hasChildNodes()) {
  // primeiro checamos se o objeto não está vazio
  let children = element.childNodes;

  for (let i = 0; i < children.length; i++) {
    // faz algo com cada nó filho ( children[i] )
  }
}

https://developer.mozilla.org (Node.childNodes)

Removendo componentes HTML

<html>
    <div id="top" align="center" style="background: #F00">A
      <div id="elementoAninhado" style="background: #0F0">B</div>
    </div>

    <input type="button" value="Magic" onclick="magic()">
</html>

<script>
function magic(){
    // Removendo um elemento sabendo o nó pai
    let d = document.getElementById( "top" );
    let aninhado = document.getElementById( "elementoAninhado" );
    let noRemovido = d.removeChild( aninhado );
}
</script>

https://developer.mozilla.org  (document.removeChild())

Removendo componentes HTML

<html>
    <div id="top" align="center" style="background: #F00">A
      <div id="elementoAninhado" style="background: #0F0">B</div>
    </div>
    <input type="button" value="Magic" onclick="magic()">
</html>
<script>
function magic(){
	// Removendo um elemento sem precisar especificar o nó pai
	let node = document.getElementById("elementoAninhado");

	// node.parentNode encontra o nó que é pai deste elemento
	if (node.parentNode) {
  		node.parentNode.removeChild(node);
	}
}
</script>

https://developer.mozilla.org  (document.removeChild())

Removendo componentes HTML

<div id="top" align="center">
  <div>A</div>
  <div>B</div>
  [...]
  <div>Z</div>
</div>

https://developer.mozilla.org  (document.removeChild())

// Removendo todos os filhos de um elemento
let element = document.getElementById("top");

while (element.firstChild) {
  element.removeChild(element.firstChild);
}

Talk is Cheap.

Show me the code!

Jogo do 1 erro

Fundamentos de Design

Ugh! Design :P

Posso entender as pessoas mais focadas em backend estarem com essa cara, e é compreensível.

 

MAS esses princípios são importantes e vamos nos basear em algumas *regras* básicas que podem ser facilmente aplicadas.

Cores Importam!

Cores passam sentimentos, são associadas e estímulos e podem definir a sua ideia de marca ou ideia ao apresentar seus trabalhos

Cores

Sinceridade, pureza, limpeza, simplicidade, paz, higiene

Maciez, calor

Força, estímulo, criatividade, agilidade

Cores

Vivacidade, energia, extroversão

Otimismo, amizade, extroversão, fome, felicidade

Competência, inteligência, seriedade, confiança, lógica

Cores

Poder, sofisticação, glamour, dignidade

Luxo, autenticidade, qualidade

Natureza, segurança

Cores Importam!

Baseado em teoria de cores o design de uma solução se baseia em uma *paleta*.

 

Essa paleta busca remeter aos valores da marca, harmonizar os elementos, chamando atenção para as coisas que importam guiando a atenção do usuário.

Teoria das cores

Color wheel é uma ferramenta para aplicar lógicas de cores, vamos dar só uma olhada rápida nesse momento.

Cores complementares

Cores dos lados opostos da "Color Wheel", trazem alto contraste e alto impacto, aparecendo de forma destacada.

Variação monocromática

Variação de um tom de uma mesma cor. É um design mais conservador, porém sólido, fácil de aplicar e harmonizar.

Cores análogas

Paleta versátil, porém pode ser um um pouco pesado. A recomendação é utilizar uma cor base e as outras cores como auxiliares.

Cores triádes

Cores com alto contraste, não tanto quanto as complementares, mas mais versáteis.

Cores quadráticas

Paleta que permite umdesign mais audacioso. A recomendação é utilizar uma cor como primária e as outras como auxiliares.

Formas

Linguagem das formas é um conceito usado em arte, animação e design para comunicar propósito, mostrar personalidade, trazer respostas emocionais e sensações baseado em formas geométricas familiares.

Círculos

Círculos e formas arredondadas, mesmo em pequenos detalhes e composições, criam um ar amigável, inocente, de união.

 

Ou vocês acham que é por acaso que interfaces abusam de bordas arredondadas.

Quadrados

Sensação de peso, segurança, equilíbrio, força, estabilidade, confiança, paz, segurança proteção.

Triângulos

"The Evil Shape"!

 

Movimento, harmonia, poder, conflito, força, progresso, propósito, hierarquia, lei, religião, tensão.

 

Apontando pra cima ou pra baixo, pode representar estabilidade ou a sua ausência.

Palette.html

(with some frontend magic)

Quanto mais cores, mais difícil é harmonizar!

Referências

https://www.canva.com/colors/color-wheel/

https://color.adobe.com/create/color-wheel

Let's get Ready to Rumble!

Antes de começar!

Alguém não está matriculado corretamente na disciplina?

 

Você não pode ser avaliado se não estiver corretamente matriculado!!!

Formula 1 - UP

Definir um projeto para um jogo de apostas em corridas F1 utilizando HTML, CSS e JS vanilla (sem bibliotecas auxiliares).

Formula 1 - UP

O jogador deve iniciar o jogo com um saldo de R$100 para apostar nos seus pilotos favoritos.

 

Ao apostar o jogador coloca o valor que quiser, sendo o mínimo R$5 e escolhe um dos 5 pilotos.

 

Se ele ganhar ele dobra o valor apostado, se perder... só perdeu o dinheiro.

Formula 1 - UP

A corrida consiste em dispor uma pista que vai em linha reta, com 5 carros.

 

A cada 50 milisegundos os carros andam em direção a linha de chegada um valor aleatório.

 

Quando o primeiro carro chegar na linha de chegada, informar o jogador do resultado e permitir correr e apostar novamente.

Formula 1 - UP

  • Pesquisem setTimeout(), setInterval(), clearInterval(), eles podem ser úteis...

 

  • KISS e motoserras! (Keep It Simple Stupid!)
     
  • Para testar "roube" pro carro escolhido ganhar

 

Dicas do CH

Formula 1 - UP

  • https://github.com/chrysthian/up
     
  • chrysthian.simao@gmail.com
     
  • Pode entregar até semana que vem!

Dicas do CH

Mais desafios? (OPCIONAIS!)

O jogador pode comprar 3 itens que ativam automaticamente na corrida, comprados com o saldo dele:

 

  • R$7: aumenta sutilmente a velocidade do carro apostado
     
  • R$5: reduz sutilmente a velocidade de um oponente aleatório durante a corrida.
     
  • R$10: reduz sutilmente a velocidade do oponente mais a frente, quando ele chegar na metade da corrida

Mario Kart Mode (WARNING!)

Made with Slides.com