Posts da Tag: HTML5 - Blog da TreinaWeb

HTML

O que é DOM, Virtual DOM e Shadow DOM?

Olá Web Developers! Vamos entender de forma simplificada o que é o DOM e qual a diferença entre ele e os tão falados Virtual DOM e Shadow DOM.

O que é o DOM?

DOM significa Document Object Model (Modelo de Objeto de Documento). Ele é uma API que nos permite acessar e manipular documentos HTML e XML válidos.

Vamos usar o seguinte código como exemplo:

<!DOCTYPE html>
<html>
    <head>
        <title>Minha Página</title>
    </head>
    <body>
        <h1>Olá Web Developers!</h1>
        <p>E mais um texto aqui</p>
    <script type="text/javascript">window.NREUM||(NREUM={});NREUM.info={"beacon":"bam.nr-data.net","licenseKey":"NRJS-e7d61b56663ee7a3078","applicationID":"463033615","transactionName":"Y1FWYRZZV0NTUhUIXlobYUcNF05AHUYRTFBQWV1bS0hWQ0YfEQlB","queueTime":0,"applicationTime":871,"atts":"TxZVF15DRE0=","errorBeacon":"bam.nr-data.net","agent":""}</script></body>
</html>

Ele pode ser representado pela seguinte estrutura em árvores de nós (Node Tree):

Mesmo que se pareça muito com nosso código, o DOM não é exatamente igual a ele. Quando o HTML não é válido, os navegadores tentam arrumá-lo, gerando um DOM um pouco diferente. O DOM também não é exatamente o que vemos nas DevTools. Um exemplo são os pseudo-elementos criados com CSS. Não podemos acessá-los com JavaScript porque não fazem parte do DOM.

React - Tópicos Avançados
Curso de React - Tópicos Avançados
CONHEÇA O CURSO

O que é Shadow DOM?

O Shadow DOM é uma tecnologia do navegador projetada para podermos criar componentes que contém uma aparência e comportamento sem influenciar os demais elementos a sua volta, escondendo sua estrutura.

Um exemplo bem simples: se você trabalha com HTML, provavelmente já viu a tag <video>, certo? Criei um arquivo apenas com esta tag. Mas ao mandar o navegador exibir o Shadow DOM, veja o que aparece:

Esta é toda a estrutura escondida dentro da tag <video>. Note que há várias <div>. Deixei selecionado no código um elemento, que é a barra de progresso do vídeo. Veja que ela é feita por um <input> do tipo range. E há vários outros elementos responsáveis pela estrutura e funcionamento da tag <vídeo>.

E não precisamos saber do que o elemento de reproduzir os vídeos é feito, como ele funciona ou como é estilizado. O Shadow DOM nos permite criar elementos assim, que possuem estrutura, estilo e comportamento encapsulados. Então o JavaScript e CSS de um componente não corre o risco de afetar outro componente. Basicamente essa é a diferença com o DOM comum: encapsulamento.

O que é Virtual DOM?

Quando estamos desenvolvendo aplicações com HTML, é por meio do DOM que podemos manipular os elementos presentes nele. Porém, cada acesso ao DOM leva um pequeno tempo, e cada alteração obriga o navegador a renderizar novamente a parte da tela afetada. Então se tivermos muitas coisas para atualizar, nossa aplicação terá problemas de perfomance.

É aí que entra o Virtual DOM (VDOM). Ele é uma representação do DOM mantida em memória. Assim, quando precisamos fazer alguma alteração, ela é feita no Virtual DOM, que é bem mais rápido que o DOM. Com isso ele analisa todos os lugares que serão afetados e sincroniza com o DOM em um processo chamado Reconciliação. A vantagem disso é que essa análise permite que haja o menor número possível de acessos ao DOM, melhorando muito a performance das aplicações.

Lembrando que o Virtual DOM não é algo do navegador, e sim, um conceito implementado por bibliotecas como o React.

Por ser algo feito em memória, e não algo preso ao DOM criado pelo navegador, o Virtual DOM também permite que a gente crie páginas no servidor. Hoje em dia é comum que algumas aplicações renderizem a tela inicial no servidor para enviar um HTML pronto com os dados ao usuário, passando a impressão de que tudo já foi carregado, para só então carregar o resto da aplicação. Isso pode ser feito utilizando bibliotecas e frameworks como Angular, React e Vue. Um caso bem famoso que utiliza esta técnica é a Netflix.

Desenvolvedor React
Formação: Desenvolvedor React
O React é utilizado por várias empresas em suas aplicações por sua simplicidade e poder, como Facebook, Instagram, Whatsapp, Netflix e DropBox. Nesta formação veremos todo poder desta biblioteca tão poderosa.
CONHEÇA A FORMAÇÃO

Desenvolvimento Front-end

Começando com SVG no Front-End – Parte 3 – Animações com mo.js (Motion Graphics)

Olá Web Developers! Vamos ver como criar animações incríveis de elementos SVG usando o mo.js. Esse é o terceiro post de três sobre como começar a usar SVG.

Na segunda parte vimos como iniciar na criação de SVG com o Inkscape. Agora veremos como fazer animações de SVG com JavaScript.

O que é mo.js?

mo.js é uma biblioteca JavaScript para criar belas animações com ótima performance com uma API bem simples. Podemos animar elementos HTML, mas sua principal função é animar elementos SVG. No exemplo abaixo podemos ver o poder desta biblioteca, tudo feito com SVG e utilizando apenas o mo.js.

Sim, isso é um SVG animado com JavaScript, não é um vídeo!!!

Iniciando com mo.js

Instalação

Primeiro é preciso inserir a biblioteca do mo.js no seu projeto. Você pode adicionar com <script src="https://cdn.jsdelivr.net/npm/@mojs/core"></script> ou instalando com o npm executando npm i @mojs/core e importando com import mojs from '@mojs/core.

Criando Formas

Vamos começar criando um círculo (circle). Para isso utilizamos o método .Shape(), para o qual passamos um objeto com algumas configurações.

new mojs.Shape({
    shape: 'circle',
    fill:  '#F64040',
    radius: 20,
    isShowStart: true,
})

Há outras formas como rect, polygon, line, cross, equal, curve e zigzag. Também podemos criar nossa própria forma com SVG e registrar com o nome que quisermos, nos permitindo animá-la.

O código acima terá o seguinte resultado:

Vamos entender o que passamos para o método .Shape():

  • shape indica a forma que queremos criar. Pode ser uma das já existentes ou o nome de uma forma que nós registramos com nosso próprio SVG.
  • fill indica a cor de preenchimento do elemento, assim como vimos nos posts anteriores. Então você pode usar aqui outras propriedades do SVG, como stroke, strokeWidth, etc
  • radius é usado para indicar o raio da forma
  • isShowStart indica se a forma deve iniciar visível na tela, pois você pode querer que a forma apenas seja exibida quando a animação iniciar

No exemplo que fizemos, o círculo foi criado e injetado no corpo da nossa página, mas provavelmente você vai querer ter controle sobre onde nossa forma será inserida. Para isso basta adicionar ao objeto de configuração a propriedade parent. Você pode passar o seletor do elemento que receberá a forma, como “#meu-id”, ou passar o próprio elemento HTML.

Animando Formas

Quando executamos o método .Shape() teremos como retorno um objeto com as configurações que criamos e métodos que podemos usar para executar a animação. Então vamos salvar esse retorno:

const animation = new mojs.Shape({
    ...

Para iniciar a animação basta executar o método .start() do retorno que salvamos em animation. Então vamos criar um botão para executarmos a animação quando quisermos.

<button onclick="startAnimation()" >Iniciar</button>
function startAnimation(){
    animation.start();
}

Obviamente que não acontecerá nada, pois nós ainda não indicamos quais propriedades queremos animar. Para animar uma propriedade nós passamos um objeto, onde a chave será o valor inicial e o valor será o valor final.

Pense como exemplo a propriedade radius, que indicamos o valor inicial como 20. Se quisermos animar esta propriedade, precisamos mudar o 20 para um objeto. Vamos fazer algumas alterações e depois entender o que foi feito:

const animation = new mojs.Shape({
  shape: 'circle',
  fill: {
    '#F64040': '#FC46AD'
  },
  radius: {
    20: 80
  },
  duration: 2000,
  isYoyo: true,
  isShowStart: true,
  easing: 'elastic.inout',
  repeat: 1,
})

Mudamos o valor de fill de apenas #F64040 para um objeto que possui como chave #F64040 e #FC46AD como valor. Isso fará a animação iniciar com o valor da chave e ir para o valor de #FC46AD.

O mesmo fizemos com o radius, fazendo com que na animação ele vá de 20 para 80.

Adicionamos a propriedade duration, indicando que queremos uma animação com duração de 2 segundos (2000 milisegundos).

Também adicionamos outras propriedades que podem ajudar a deixar a animação interessante: isYoyo indica se queremos que a animação, ao chegar ao final, faça o caminho inverso, voltando ao estado inicial. easing nos permite indicar uma função de animação e repeat indica quantas vezes queremos que a animação seja repetida.

Teremos o seguinte resultado:

Dentro do objeto de configuração também podemos passar funções que serão executadas a cada momento da animação, como onProgress, onStart, onFirstUpdate, onUpdate, onComplete, etc, nos possibilitando ter mais controle da animação.

Burst

Também temos outras funcionalidades que nos facilitam a criação de animações mais complexas. O Burst nos ajuda a criar um efeito parecido com uma explosão, como no exemplo abaixo:

Para conseguir esse resultado, primeiro vamos mudar o .Shape para .Burst e mudar um pouco as nossas configurações:

const animation = new mojs.Burst({
  radius: { 0: 100 },
  count: 5,
  angle: { 360: 0 },
  children: {
    shape: 'circle',
    fill: { '#F64040': '#FC46AD' },
    radius: { 20: 80 },
    duration: 2000
  }
})

Veja que as propriedades relacionadas à nossa forma circle foram para dentro de um campo children. Agora ele é um elemento filho da nossa animação.

Na parte de fora nós configuramos a explosão. radius do lado de fora indica o tamanho do elemento da explosão, enquanto o radius dentro de children está indicando o raio de cada um dos círculos.

Usamos angle para girar o nosso elemento, e count nos permite indicar quantos círculos nós queremos.

Esta foi uma introdução bem simples ao mo.js. Brinque com suas propriedades e veja exemplos que há no site da biblioteca para ter ideias. Compartilhe aí nos comentários com a gente a sua criação.


Desenvolvimento Front-end

Começando com SVG no Front-End – Parte 1

Olá Web Developers! Vamos ver a importância do SVG para o desenvolvimento web e como começar a usá-lo. Esse é o primeiro post de três sobre como usar SVG.

O que é SVG?

O nome SVG vem de Scalable Vector Graphics (Gráficos Vetoriais Escaláveis). Ele é basicamente um formato de imagem vetorial suportado pelos navegadores e que pode ser animado/modificado por CSS e JavaScript. Para saber mais sobre imagens vetoriais e a diferença em relação às imagens comuns, dê uma olhadinha no nosso post sobre O que são imagens vetoriais?.

Quais as vantagens do SVG?

O SVG possui várias vantagens, como:

  • podem ser animados por CSS e modificados por JavaScript
  • por serem imagens vetoriais, você pode alterar o tamanho livremente sem perda de qualidade da imagem
  • podem ser embutidos no HTML, diminuindo a quantidade de requisições
  • você não precisa de um super editor de imagens para trabalhar com SVG. Algumas coisas simples você pode editar com o seu próprio editor de código ou usar até mesmo um programa gratuito online
  • possui várias funcionalidades que ainda são impossíveis ou muito complexas de se fazer com HTML e CSS, nos permitindo criar formas e efeitos mais complexos para nossas páginas web
  • como pode ser integrado com CSS, podemos usar Media Queries para criar imagens responsivas

Começando com SVG

Não precisamos de editor de imagem para começar com SVG. Você pode usar o mesmo programa que usa para escrever seu HTML.

Podemos criar uma imagem SVG em um arquivo .svg e depois chamar em nosso HTML usando a tag <img>, mas também pode-se, dentro do seu próprio HTML, criar uma tag <svg> e começar a escrever o código dentro dele.

Vamos começar a declarar um retângulo. Para isso usamos o elemento <rect>.

<svg>
     <rect width="200" height="100"  fill="red" x="10" y="30" stroke="green" stroke-width="5" ></rect>
</svg>

Teremos o seguinte resultado:

Vamos entender o que fizemos:

  • <rect> declara que queremos criar um retângulo
  • width e height servem para declararmos a largura e altura do elemento
  • fill serve para declararmos a cor do preenchimento do elemento
  • x e y servem para indicarmos a posição do elemento
  • stroke nos permite declarar a cor da linha de contorno do elemento
  • stroke-width declara a grossura da linha de contorno do elemento

Outro elemento muito comum é o <circle>, que serve para criar um círculo.

<svg>
    <circle r="30" cx="50" cy="40" fill="blue" stroke="orange" stroke-width="5" ></circle>
</svg>

Vamos entender o que fizemos:

  • <circle> declara que queremos criar um círculo
  • r indica o raio do círculo, então é por aqui que indicamos o tamanho
  • ao invés de posicionarmos o círculo com x e y, são usadas as propriedades cx e cy

Há outros elementos também como line, polyline, polygon, path e text.

SVG com CSS e JavaScript

Como dito anteriormente, o SVG pode facilmente ser integrado com CSS e JavaScript, permitindo que a gente o controle como quisermos.

Como exemplo, vamos criar um outro círculo, mas ao invés de escrever as propriedades diretamente na tag <circle>, vamos adicionar uma classe CSS e escrever essas propriedades no CSS.

<svg>
  <circle class="meu-circulo" ></circle>
</svg>
.meu-circulo{
  r: 30;
  cx: 50;
  cy: 40;
  fill: lightgreen;
  stroke: orange;
  stroke-width: 5;
}

Lembre-se que podemos fazer animações com CSS. Vamos criar uma transição simples para quando passarmos a seta do mouse por cima do círculo, mudando sua posição e cores:

.meu-circulo{
  r: 30;
  cx: 50;
  cy: 40;
  fill: lightgreen;
  stroke: orange;
  stroke-width: 5;
  transition: all 1s ease;
}

.meu-circulo:hover{
  cx: 70;
  fill: green;
  stroke-width: 10;
}

Também podemos integrar com JavaScript. Vamos pegar esse <circle> e criar uma função que aumente o r dele ao clicarmos:

const circle = document.querySelector('.meu-circulo');
let r = 30;

circle.addEventListener('click', () => {
    r += 10;
    circle.style.r = r;
})

Teremos o seguinte resultado:

É importante saber que só podemos integrar o SVG com CSS e JavaScript se ele estiver no corpo do HTML, como fizemos. Se você chamar uma imagem SVG com a tag <img> não dará certo.

No próximo post veremos como começar a trabalhar com o Inkscape, um software gratuito para a criação de imagens vetoriais que utiliza o SVG como formato de arquivo.


Desenvolvimento Front-end

Vídeos Picture-in-Picture com JavaScript

Olá Web Developers! Hoje vamos ver como permitir o usuário assistir a um vídeo da sua página web fora do navegador.

O que é PIP?

Picture-in-Picture (PIP), também conhecida aqui como Imagem sobre Imagem, é quando temos a imagem de uma tela sendo exibida em cima de outra imagem.

Um exemplo são monitores para computador que também possuem funcionalidade de TV. Com PIP você pode trabalhar e ao mesmo tempo deixar a imagem da TV no canto da tela.

Monitor - TV - PIP

PIP no HTML5

A API de Picture-in-Picture permite que páginas da web peguem um vídeo qualquer presente em seu corpo e o exiba em uma pequena janela flutuante que ficará sempre em cima das outras janelas. Assim o usuário poderá continuar assistindo enquanto faz outras tarefas.

Na imagem abaixo estamos com um vídeo comum no YouTube:

Ao ativar o PIP o vídeo passa a ser reproduzido em uma janela flutuante que você pode mover e redimensionar. Mesmo que você abra outras janelas, o vídeo continua em cima de todas as outras janelas.

Na imagem abaixo vemos um exemplo de navegação em nosso blog enquanto o vídeo do YouTube permanece visível. Claro que você pode minimizar as janelas do navegador e abrir qualquer outro programa.

Esta funcionalidade está sendo adotada também em smartphones, o que nos permite continuar assistindo a um vídeo do navegador enquanto utilizamos outros aplicativos.

Como iniciar o PIP?

Para iniciar o Picture-in-Picture é necessário acessar o elemento HTML <video> que está com o vídeo que você quer que flutue. Imagine que a gente tenha o seguinte HTML:

<button onclick="iniciarPIP()">Picture in Picture</button>

<video src="./meu-video.mp4" id="meu-video" controls></video>

Criamos um botão para iniciar o PIP e adicionamos um vídeo. Agora basta pegar o elemento <video> e executar o método .requestPictureInPicture(). Este método retorna uma Promise.

async function iniciarPIP(){
    const video = document.querySelector('#meu-video');
    await video.requestPictureInPicture();
}

Você pode ver o resultado abaixo:


Desenvolvimento Desenvolvimento Front-end

Hospedando o Portfólio criado com o Pingendo

No artigo anterior, Criando um Portfólio com o Pingendo, utilizamos a ferramenta para criar um Portfólio simples e rápido, para que você possa utilizá-lo para compartilhar suas experiências de maneira mais organizada na web.

Neste artigo estaremos hospedando este Portfólio de maneira gratuita.

Git - Fundamentos
Curso de Git - Fundamentos
CONHEÇA O CURSO

Ferramenta utilizada

Utilizaremos o GitHub Pages para realizar esta hospedagem do nosso Portfólio.

O GitHub Pages é um website para que você possa hospedar seus projetos diretamente do seu repositório do GitHub.

Criando o repositório

O primeiro passo após logar em sua conta do GitHub é criar o repositório. Para isso, vamos até a página https://github.com/new e configuramos as preferências do repositório (nome, descrição e privacidade), como mostra a imagem abaixo:

Criando repositório github

Subindo a página

Neste passo será obrigatório o uso do Git instalado em sua máquina. Caso não o possua, você pode ver o processo de instalação e primeiros passos no seguinte artigo: Primeiros passos com Git.

Com o Git instalado e configurado, precisamos commitar o código-fonte da nossa página. Para isso, no GitBash e dentro da pasta do Portfólio, utilizamos os seguintes comandos:

git init
git remote add origin https://github.com/nome_do_usuario/nome_do_repositorio.git
git add .
git config --global user.email “seuemail@dominio.com”
git commit -m “Commit inicial”
git push -u origin master

Lembrando que você terá que alterar o nome do usuário e nome do repositório com base nas informações que foram obtidas no momento da criação do repositório, como mostra a imagem abaixo.

Comandos Git

Git e GitHub - Controle de versão
Curso de Git e GitHub - Controle de versão
CONHEÇA O CURSO

Ativando o GitHub Pages

Após commitar o código-fonte do Portfólio, vamos até a aba “Settings” e ao, final dela, ativaremos o GitHub Pages. Para isso, selecionamos a “Branch Master” como mostra as imagens abaixo:

Ativando GitHub Pages

Configurando GitHub Pages

Com isso, o Portfólio já está hospedado e disponível no seguinte endereço: https://nome_do_usuario.github.io/nome_do_repositorio/

Portfólio

Concluindo

Nesta série de artigos, vimos o quão fácil pode ser a criação e hospedagem de um Portfólio totalmente gratuito utilizando o GitHub Pages e Pingendo.

Desenvolvedor Front-end
Formação: Desenvolvedor Front-end
HTML, CSS e JavaScript são a base de toda a web. Tudo o que você está vendo aqui agora depende deste tripé. Nesta formação vamos iniciar aprendendo lógica. Em seguida veremos todos os aspectos do HTML, CSS e JavaScript. Por fim, aprenderemos Sass, Google Analytics, empacotar nossas aplicações com Webpack, criação de aplicações Desktop com Electron, UX/UI e uma introdução aos frameworks mais utilizados no mercado: Angular, React, Vue e Ember.
CONHEÇA A FORMAÇÃO

CSS

CSS Flexbox – Um Guia Interativo (Parte 2 – Itens)

Olá Web Developers!

No post anterior vimos as propriedades que usamos no container ao trabalhar com Flexbox. Agora veremos as propriedades que utilizamos nos itens do container.

Itens

Lembre-se que temos propriedades CSS para trabalhar com o elemento que possui nossos itens (container ou elemento pai) e propriedades para os nossos itens (elementos filhos).

Neste post veremos as propriedades que ficam nos elementos filhos.
Teremos basicamente um container com alguns itens dentro.

HTML5 e CSS3 - Desenvolvimento web Básico
Curso de HTML5 e CSS3 - Desenvolvimento web Básico
CONHEÇA O CURSO

Para vermos a diferença das propriedades aplicadas em um item específico, vamos adicionar a este item a classe .selected.

<div class="container" >
    <div class="item" ></div>
    <div class="item selected" ></div>
    <div class="item" ></div>
</div>

order

Por padrão, os itens de um Flex Container são exibidos na ordem presente no HTML.

Com a propriedade order nós podemos alterar a ordem dos elementos. O valor deve ser um número inteiro, negativo ou positivo.

flex-grow

Indica o quanto um item pode crescer caso seja necessário. Deve ser um número inteiro positivo.

Isso significa que se todos os itens tiverem o valor 1, o espaço disponível será distribuído igualmente a todos eles.

Caso um dos itens tenha o valor 2, este item poderá ter duas vezes mais espaço do que os outros.

flex-basis

Define o tamanho padrão de um elemento antes do espaço disponível ser distribuído. O valor pode ser em px, %, em, etc.

Se o valor for auto, ele irá olhar para o valor de width e height do item.

Se o valor for content, ele irá olhar para o tamanho do conteúdo do item.

flex-shrink

Indica o quanto um item pode encolher caso seja necessário. Deve ser um número inteiro positivo.

Isso significa que se todos os itens tiverem o valor 1, o espaço disponível será distribuído igualmente a todos eles.

Caso um dos itens tenha o valor 2, este item poderá ter metade do espaço do que os outros.

flex

Esta propriedade é apenas um atalho para flex-grow, flex-shrink e flex-basis, nos permitindo declarar os valores em uma única propriedade.

.item.selected{
    flex: 2 4 50px;
}
HTML5 e CSS3 - Desenvolvimento web Básico
Curso de HTML5 e CSS3 - Desenvolvimento web Básico
CONHEÇA O CURSO

align-self

Você deve se lembrar da propriedade align-items que vimos no post sobre as propriedades do container.

A propriedade align-self nos permite sobrescrever o valor desta propriedade para um único item. Assim podemos, por exemplo, colocar um único item no final de uma linha enquanto todos os outros estão no começo.


CSS

CSS Flexbox – Um Guia Interativo (Parte 1 – Containers)

Olá Web Developers!

Há um bom tempo que os navegadores já suportam bem o Flexbox. Porém, ainda há pessoas com algumas dúvidas sobre o seu funcionamento. Por isso desenvolvi um guia interativo para te ajudar a entender como o Flexbox funciona.

Se estiver com dúvidas entre usar Flexbox ou CSS Grid, confira o nosso post de comparação: https://www.treinaweb.com.br/blog/flexbox-ou-css-grid/

HTML5 e CSS3 - Desenvolvimento web Básico
Curso de HTML5 e CSS3 - Desenvolvimento web Básico
CONHEÇA O CURSO

O que é Flexbox?

O Flexbox (Flexible Box) nos permite organizar, alinhar e distribuir itens dentro de um container. Com ele fica mais simples definir o tamanho e o alinhamento vertical e horizontal de itens.

Primeiro de tudo temos que saber que teremos propriedades CSS para trabalhar com o elemento que possui nossos itens (container ou elemento pai) e propriedades para os nossos itens (elementos filhos).

Container

Neste primeiro post veremos as propriedades que ficam no elemento pai dos nossos itens, o container.
Teremos basicamente um container com três itens dentro.

<div class="container" >
    <div class="item" ></div>
    <div class="item" ></div>
    <div class="item" ></div>
</div>

display

Primeiro precisamos definir que o nosso container é do tipo “flex”; Fazemos isso com a propriedade “display”.
No exemplo abaixo, utilize o checkbox para ligar/desligar o Flexbox.

flex-direction

Indica a direção dos itens, definindo o que vamos chamar de eixo principal (main-axis).

  • row (padrão): da esquerda para direita
  • row-reverse: inverso de row
  • column: de cima para baixo
  • column-reverse: inverso de column

flex-wrap

O comportamento padrão dos itens de um elemento flex é ficar em uma única linha. Se a largura total de todos os itens for maior do que o espaço disponível, os itens continuarão na mesma linha.

Esta propriedade permite que os itens sejam jogados em outra linha caso não haja mais espaço na linha.

  • nowrap (padrão): todos os itens ficam em uma única linha
  • wrap: os itens que não cabem na linha são jogados para baixo
  • wrap-reverse: os itens que não cabem na linha são jogados para cima

flex-flow

Esta propriedade é apenas um atalho para flex-direction e flex-wrap, nos permitindo declarar o valor de ambos em uma única propriedade.

.container{
    display: flex;
    flex-flow: row wrap;
}

justify-content

Define o alinhamento dos itens ao longo do eixo principal.

  • flex-start (padrão): os itens ficam junto no começo da linha
  • flex-end: os itens ficam juntos no final da linha
  • center: os itens ficam centralizados na linha
  • space-between: os itens são distribuídos igualmente no espaço disponível. O primeiro item fica no começo da linha e o último fica no final.
  • space-around: os itens são distribuídos igualmente no espaço disponível ao redor deles.
  • space-evenly: os itens são distribuídos igualmente no espaço disponível.

flex-direction: column

Lembre-se que esta propriedade alinha os itens em relação ao eixo principal. Isso significa que se você mudar o valor de flex-direction, a direção do posicionamento será outra.

align-items

Define o alinhamento dos itens perpendicularmente em relação ao eixo principal.
Pense nele como um justify-content, mas que alinhará os itens no outro eixo.

  • stretch (padrão): estica os elementos para preencherem o container.
  • flex-start: os itens ficam junto no começo do eixo perpendicular
  • flex-end: os itens ficam juntos no final do eixo perpendicular
  • center: os itens ficam centralizados no eixo perpendicular
  • baseline: parecido com o center, mas usando a base da linha como referência. No exemplo abaixo, note como os textos dos itens ficam alinhados.

flex-direction: column

Lembre-se que esta propriedade alinha os itens em relação ao eixo principal. Isso significa que se você mudar o valor de flex-direction, a direção do posicionamento será outra.

align-content

Alinha as linhas do container.
Por alinhar as linhas, esta propriedade só tem efeito quando há mais de uma linha.

  • stretch (padrão): estica as linhas para preencherem o espaço restante.
  • flex-start: as linhas ficam juntas no começo do container
  • flex-end: as linhas ficam juntas no final do container
  • center: as linhas ficam centralizadas no container
  • space-between: as linhas são distribuídas igualmente. A primeira linha fica no começo do container e a última fica no final.
  • space-around: as linhas são distribuídas igualmente no espaço disponível ao redor delas.

flex-direction: column

Lembre-se que esta propriedade alinha os itens em relação ao eixo principal. Isso significa que se você mudar o valor de flex-direction, a direção do posicionamento será outra.

HTML5 e CSS3 - Desenvolvimento web Básico
Curso de HTML5 e CSS3 - Desenvolvimento web Básico
CONHEÇA O CURSO

Playground

Para testar, brinque um pouco com cada uma das propriedades para ver as possibilidades:


CSS Desenvolvimento Front-end HTML Javascript

Templates gratuitos para aplicações administrativas

Com a necessidade da criação de aplicações em um menor tempo possível, é cada vez mais viável a utilização de templates prontos para reduzir o tempo de desenvolvimento. Por isso, diversos templates, principalmente para áreas administrativas, foram sendo criados e compartilhados na internet, dos quais veremos alguns neste artigo.

Django - Templates
Curso de Django - Templates
CONHEÇA O CURSO

AdminLTE

O AdminLTE é um template administrativo css gratuito todo construído sobre o Bootstrap 3. Em sua recente atualização, algumas novidades foram adicionadas, tais como: Reescrita completa do JavaScript, suporte NPM e Bower, além de sua documentação. Open source, o AdminLTE é uma excelente opção aos desenvolvedores que buscam componentes responsivos e reutilizáveis.

Painel do adminLTE

A partir dá página Demo do AdminLTE é possível ter um Live Preview do template e testar todas as suas funcionalidades antes de realizar seu download.

O download e informações do template podem ser obtidos pelo site oficial do AdminLTE.

CoreUI

O CoreUI é um template gratuito baseado no Bootstrap 4 para criação de interfaces administrativas funcionais e sofisticadas. Trabalha com uma grande variedade de frameworks, tais como: Angular, Laravel e [React](O que é o React Native? “React”), o que permite que este template seja utilizado nos mais diversos projetos.

A partir da página Demo do CoreUI é possível ter um Live Preview do template e analisar sua vasta biblioteca de componentes, que trás consigo as vantagens em adicionar diversos botões, formulários e muitos outros componentes para facilitar o desenvolvimento.

Painel do CoreUI

Seu download pode ser feito através da página oficial do CoreUI.

Laravel - Framework PHP (Parte 1/3)
Curso de Laravel - Framework PHP (Parte 1/3)
CONHEÇA O CURSO

Light Bootstrap

Seguindo a mesma linha dos dois templates citados anteriormente, o Light Bootstrap é um template administrativo gratuito baseado no Bootstrap 4, desenhado para ser bonito e simples, além de facilitar a criação de aplicações administrativas. Provê uma grande coleção de elementos que possibilita a criação de apps das mais variadas formas.

Sua barra lateral pode ser alterada entre 6 cores diferentes (preto, azul, verde, laranja, vermelho e roxo), tornando sua experiência muito mais confortável.

Painel do bootstrap light

É possível acessar sua Live Preview através dá página Demo do Light Bootstrap.

Seu download pode ser realizado acessando o Github do Light Bootstrap.

Material Dashboard

O Material Dashboard, apesar de ser construído utilizando o Bootstrap 4, possui uma interface inspirada nos padrões de design do Google, o Material Design.

Seu visual é limpo e elegante, tornando-se uma ótima alternativa. Além disso, o Material Dashboard possui 60 componentes dos mais variados tipos e três páginas de exemplo para você iniciar seus projetos.

Painel do Material Dashboard

Sua Live Preview pode ser acessada na página demo do Material Dashboard, onde é possível ter uma breve visualização do template, antes de realizar seu download.

Após analisar suas funcionalidades, o download pode ser feito através da página do Material Dashboard.

Star Admin

Com uma aparência fantástica, o Star Admin é, com certeza, uma ótima opção a considerar quando queremos desenvolver um sistema administrativo. Também construído utilizando o Bootstrap 4, este template possui um visual único e arrojado, tornando sua aparência um ponto fortíssimo.

Além disso, o Star Admin possui uma grande coleção de widgets e componentes para os mais variados usos.

Painel Star Admin

A partir da página Demo do Star Admin é possível acessar a Live Preview deste template e seu download, feito através da página Star Admin Free.

Java - Criação de aplicações web com Spring Boot
Curso de Java - Criação de aplicações web com Spring Boot
CONHEÇA O CURSO

Conclusão

Neste artigo vimos alguns templates para utilizarmos no desenvolvimento de aplicações administrativas e o quanto eles agilizam a criação de novos projetos.

Desenvolvedor Front-end
Formação: Desenvolvedor Front-end
HTML, CSS e JavaScript são a base de toda a web. Tudo o que você está vendo aqui agora depende deste tripé. Nesta formação vamos iniciar aprendendo lógica. Em seguida veremos todos os aspectos do HTML, CSS e JavaScript. Por fim, aprenderemos Sass, Google Analytics, empacotar nossas aplicações com Webpack, criação de aplicações Desktop com Electron, UX/UI e uma introdução aos frameworks mais utilizados no mercado: Angular, React, Vue e Ember.
CONHEÇA A FORMAÇÃO

Django Python

Estilizando formulários automáticos do Django com Bootstrap

No artigo passado “Criando formulários automaticamente com Django“, vimos o quão simples é a criação de formulários automáticos com o Django. Porém, os formulários gerados utilizam HTML puro, ou seja, não há nenhuma estilização para melhorar o visual da aplicação. Sendo assim, neste artigo veremos como estilizar os formulários gerados automaticamente com o Django utilizando o Bootstrap.

Instalando e configurando o crispy-forms

O primeiro passo para estilizar os formulários de uma aplicação é instalar a biblioteca crispy-forms, é ela quem irá estilizar os formulários da nossa aplicação. Para isso, vamos até a aba Project Interpreter do PyCharm, buscamos por django-crispy-forms e instalamos a biblioteca:

Após isso, vamos até o arquivo settings.py do projeto e registramos a biblioteca. Para isso, no array INSTALLED_APPS, adicionamos a seguinte linha:

INSTALLED_APPS = [
    ...
    'crispy_forms',
    'app',
]

Com isso, indicamos ao nosso projeto que faremos uso da biblioteca crispy-forms. O próximo passo é determinar qual framework utilizaremos para estilizar nossos formulários. O crispy-forms possui suporte aos seguintes:

  • bootstrap
  • bootstrap3
  • bootstrap4
  • uni-form
  • foundation

Para definir qual será utilizado, precisamos adicionar a configuração CRISPY_TEMPLATE_PACK logo após o array INSTALLED_APPS do arquivo settings.py e determinar qual framework será utilizado. Neste artigo usaremos o bootstrap4, conforme podemos ver abaixo:

INSTALLED_APPS = [
    ...
    'crispy_forms',
    'app',
]
CRISPY_TEMPLATE_PACK = 'bootstrap4'

Estilizando os formulários

Após instalar e configurar o crispy-forms, precisamos configurar o formulário para utilizar o bootstrap4. Para isso, no arquivo responsável por renderizar o formulário de cadastro de usuários, precisamos carregar a biblioteca crispy-forms, importar o bootstrap via CDN e, por fim, indicar que usaremos o a biblioteca para estilizar o formulário do Django. No final, o conteúdo do formulário possuirá a seguinte estrutura:

<!DOCTYPE html>
{% load crispy_forms_tags %} ## Carregando a biblioteca
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Cadastro</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous"> ## Importando o bootstrap
</head>
<body>
<main class="container">
{{ form|crispy }} ## Determinando que usaremos o crispy forms
<button class="btn btn-primary">Cadastrar</button>
</main>
</body>
</html>

Ao final, o formulário que antes era assim:

Será renderizado assim:

Tudo isso, novamente, de forma automática e sem escrever uma única linha de código HTML. 😀


Desenvolvimento Django HTML Python

Criando formulários automaticamente com Django

A criação dos formulários de uma aplicação pode se tornar um processo demorado e cansativo, caso tenhamos diversas entidades com vários atributos. Por exemplo, imagine criar os formulários de uma aplicação que possui 20 cadastros com 50 campos cada… É muito HTML, certo!?

Com o Django, podemos simplificar todo este processo criando formulários automaticamente a partir de como os models estão definidos. E é isso que veremos neste artigo 😀

Django - Fundamentos
Curso de Django - Fundamentos
CONHEÇA O CURSO

Entendendo a aplicação

Vamos partir de uma aplicação pronta que possui apenas uma entidade definida em nosso arquivo models.py, como pode-se ver abaixo:

class Usuario(models.Model):
    SEXO_CHOICES = [
        ["F", "Feminino"],
        ["M", "Masculino"],
        ["N", "Nenhuma das opções"]
    ]

    nome = models.CharField(max_length=20, null=False)
    email = models.EmailField(null=False)
    sexo = models.CharField(max_length=1, choices=SEXO_CHOICES)

Além disso, a aplicação inicial possui um método no arquivo views.py que renderiza o template form.html, o qual nós usaremos para carregar o formulário automático:

from django.shortcuts import render

def cadastrar_usuario(request):
    return render(request, "form.html")

Já o arquivo form.html possui a seguinte estrutura:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Cadastro</title>
</head>
<body>

Aqui será renderizado o formulário de cadastro

</body>
</html>

Criando forms.py

Agora, para gerar nosso formulário de cadastro com base nos campos que definimos no arquivo models.py, precisamos criar o arquivo forms.py. É ele quem é o responsável por determinar quais campos possuirá nosso formulário de cadastro de usuários.

Para criar nosso formulário, utilizaremos como base os tipos e regras de validação que definimos no arquivo models.py. Sendo assim, o arquivo forms.py terá o seguinte conteúdo:

from django import forms
from .models import *

class UsuarioForm(forms.ModelForm):
    class Meta:
        model = Usuario
        fields = ["nome", "email", "sexo"]

Gerando formulário automaticamente

Após criar o arquivo forms.py, podemos utilizá-lo para renderizar nosso formulário sem escrever uma única linha de HTML. Para isso, alteramos o método cadastrar_cliente do arquivo views.py da seguinte forma:

from django.shortcuts import render
from .forms import *

def cadastrar_usuario(request):
    form = UsuarioForm()
    return render(request, "form.html", {'form':form})

Com isso, estamos criando uma instância nova da nossa classe UsuarioForm e a enviando até o arquivo form.html. É lá que renderizamos nosso formulário de cadastro, como podemos ver abaixo:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Cadastro</title>
</head>
<body>
{{ form.as_p }}
</body>
</html>

Apenas utilizando o {{form.as_p}} conseguimos renderizar nosso formulário de cadastro completo. Isso se dá porque o Django converte o código definido no arquivo models.py e cria, para cada atributo da classe Usuario, um input HTML. No final, o resultado da página HTML é o seguinte:

Além disso, cada input gerado possui as regras de validação que determinamos no arquivo models.py, ou seja, todos eles são required e o input de e-mail só irá aceitar um e-mail válido como valor.

Concluindo

Uma das tarefas mais cansativas quando estamos criando aplicações web é a criação dos formulários de cadastro. Com o Django, conseguimos renderizar um formulário automaticamente, poupando tempo no desenvolvimento. Há também formas de estilizar este formulário automaticamente, mas veremos em um artigo futuro. Até lá! 😀

Django - Fundamentos
Curso de Django - Fundamentos
CONHEÇA O CURSO

Desenvolvimento Desenvolvimento Front-end Git

Criando páginas para repositórios com o GitHub Pages

O GitHub é uma das maiores ferramentas para armazenamento e gestão dos nossos projetos. Ele possui um recurso bem interessante que facilita a divulgação e apresentação dos projetos lá hospedados. Este recurso é o GitHub Pages, que permite que criemos uma página web para nossos repositórios totalmente gratuita. Legal né? Então fica ligado que neste artigo veremos como criar uma página de apresentação para um repositório.

Git - Fundamentos
Curso de Git - Fundamentos
CONHEÇA O CURSO

Criando o repositório:

A primeira coisa a se fazer é criar um repositório no GitHub para que consigamos gerar a página web para ele. Para isso, vamos até a rota https://github.com/new e configuramos todas as suas preferências:

novo repositorio github

Nesta página vamos informar o nome do repositório, sua descrição e o tipo de visibilidade (público ou privado). Feito isso, clicamos no botão verde “Create repository”.

Ativando o GitHub Pages:

Após isso, o repositório será criado e seremos redirecionados para sua tela inicial. Lá, clicamos no botão “Settings” no menu superior da tela. A partir disso, seremos redirecionados para a tela de configurações do repositório que, dentre diversas configurações, existe uma seção chamada “GitHub Pages”, conforme podemos ver abaixo:

Configuração Github Pages

Nesta seção há duas opções. Podemos criar uma página a partir de um código presente no próprio repositório ou por meio de um modelo disponibilizado pelo próprio GitHub. Caso você queira desenvolver sua própria página, selecione a branch que você quer salvar seu arquivo index.html e clique no botão save (primeira parte da seção).

Selecionando o tema

Para este artigo, vamos selecionar um modelo disponibilizado pelo próprio GitHub. Sendo assim, clicamos no botão “Choose a theme”. Feito isso, uma nova página será aberta onde podemos ver a lista de todos os temas disponíveis para uso:

Selecionando o tema

Agora é só selecionar o que você prefere e clicar no botão verde “Select Theme”. Feito isso, uma janela para que possamos customizar a página do nosso repositório será aberta. Vale lembrar que as informações são escritas em Markdown, por isso precisamos seguir este formato.

Repositório Github pages index

Após editar o conteúdo da nossa página, vamos até o final da mesma e clicamos em “Commit Changes”. Isso irá gerar um novo commit com as mudanças feitas.

Finalmente, após todos estes passos, já podemos acessar a página do repositório através da rota:

https://treinaweb.github.io/repositorio_teste_github_pages/

Concluindo:

Com isso, notamos o quão fácil é criar uma página de apresentação para nossos repositórios de forma totalmente gratuita. Podemos, também, utilizar projetos um pouco mais complexos utilizando HTML, CSS e JavaScript, mas isso fica para um próximo artigo, ok? 🙂

Um abraço e até lá!

Git e GitHub - Controle de versão
Curso de Git e GitHub - Controle de versão
CONHEÇA O CURSO

Desenvolvimento de Jogos

Como um jogo digital é criado?

Olá, Web Developers!

Hoje vou mostrar como um jogo é criado. Para podermos ver ele funcionando aqui no navegador, usaremos JavaScript, mas esse conceito é basicamente o mesmo na criação de jogos com outras linguagens, frameworks e ferramentas, então nem é preciso conhecer a linguagem para entender.

Depois, mostrarei como os conceitos apresentados aqui estão presentes em ferramentas profissionais.

Vamos lá!

A tela (canvas)

Um jogo precisa de um lugar que nos possibilite exibir imagens. Normalmente esse elemento é chamado de canvas, que significa “tela de pintura”. Esse é um elemento que nos permite desenhar e renderizar imagens nele.

No Java e no C# por exemplo, temos a classe Canvas. No HTML5 possuímos o elemento <canvas>, que é o que iremos usar. Será o nosso único HTML. Todo o resto será desenhado no canvas.

Também teremos um CSS simples só para alinhar o canvas no meio da tela.

<canvas id="myCanvas" width="400" height="200" ></canvas>
canvas{
    border: 1px solid black;
    margin: 0 auto;
    display: block;
}

Agora todo o resto será JavaScript!

Desenhando na tela

Vamos fazer um simples desenho no canvas.

// primeiro selecionamos o elemento canvas
const canvas = document.querySelector('#myCanvas');
/* depois pegamos o contexto, que irá nos fornecer as funções
para desenhar no canvas.
*/
const ctx = canvas.getContext('2d');

/* a função "fillRect()" nos permite desenhar um retângulo.
Passamos a posição x, posição y, largura e altura.
*/
ctx.fillRect(25, 25, 50, 50);

Quadrado no Canvas

O que é uma animação?

Uma animação é basicamente a apresentação de várias imagens ligeiramente diferentes. Isso nos passa a ilusão de movimento.

Kirby Walking Sprite

Kirby Walking Sprite

No exemplo acima temos várias imagens que, ao serem exibidas uma após a outra, nos fazem pensar que estamos vendo o personagem se mover.

Cada imagem é chamada de frame(quadro). Quanto mais frames por segundo (FPS), mais natural será a ilusão de movimento. Os jogos hoje em dia costumam trabalhar em 60 FPS.

Então, o que acontece se pegarmos o canvas, limpá-lo, desenhar, limpá-lo novamente e fazer um desenho levemente diferente? Isso mesmo! Teremos a ilusão do movimento.

Para isso, basta desenharmos o quadrado com uma posição diferente a cada momento. Então podemos armazenar a posição em uma variável e criar um looping.

O Looping

Como os jogos são basicamente uma tela de desenho com vários elementos sendo desenhados a todo instante, uma das partes principais de um jogo é o Looping.

Basicamente teremos um Looping Infinito que limpa a tela, desenha os elementos no canvas baseado nas variáveis que possuímos e repete esse processo sem parar.

Vamos mudar um pouquinho o nosso código para ver o que acontece.

const canvas = document.querySelector('#myCanvas');
const ctx = canvas.getContext('2d');
/* declaramos uma variável que armazenará a posição
x do nosso quadrado.
*/
let x = 0;
/* o "setInterval()" repete a execução de uma
função de acordo com um tempo que passamos.
Neste caso, a função se repeta a cada 50 milissegundos.
Isso significa que desenharemos no canvas 20 vezes por
segundo, ou seja, teremos 20 frames por segundo.
*/
setInterval(function(){
    // aqui estamos limpando o canvas inteiro
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    // após limpar o canvas, desenhamos o quadrado
    // na posição x
    ctx.fillRect(x, 25, 50, 50);
    // após desenhar o quadrado, alteramos nossa
    // variável x
    x+= 1;
    /* só para não perdermos o quadrado de vista,
    fiz com que o x volte a 0 caso o quadrado
    saia do canvas
    */
    if(x > canvas.width){
        x = 0;
    }
}, 50);

Isso fará com que o quadrado ande pela tela, como você pode ver logo abaixo:

Observação: No JavaScript, ao fazer animações, é recomendado o uso da função requestAnimationFrame() ao invés de setTimeout() ou setInterval();

Carregando imagens

Jogos utilizam vários recursos como áudio e imagens. Vamos criar uma função que irá carregar imagens.

Se tentarmos desenhar a imagem antes dela ter sido carregada, ocorrerá um erro. Então vamos aproveitar as Promises do JavaScript para iniciar o desenho no canvas apenas quando a imagem já estiver carregada.

// ...
/* essa função receberá o endereço de uma imagem
*/
function loadImage(src){
    /* ela retorna uma promise, que permite a
    execução de uma função apenas quando ela
    for resolvida
    */
    return new Promise(resolve => {
        /* criamos um elemento de imagem para
        carregar a imagem.
        */
        var img = document.createElement('img');
        /* criamos um listener que será executado
        assim que a imagem for carregada. Quando a
        imagem terminar de ser carregada, resolvemos
        a promise, retornando a imagem.
        */
        img.addEventListener('load', () => { 
            resolve(img); 
        });
        /* pegamos o elemento de imagem e passamos
        o endereço da imagem. Isso iniciará o
        carregamento
        */
        img.src = src;
    });
}

/* iniciamos o carregamento da imagem. Assim que
a imagem for carregada, a promise é resolvida e
a função seguinte é executada.
*/
loadImage('https://i.imgur.com/WyqxuaD.png')
    .then(function(sprite){
        setInterval(function(){
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            // desenhamos a imagem ao invés do retângulo
            ctx.drawImage(sprite, x, 25, 50, 50);
            x+= 1;
            if(x > canvas.width){
                x = 0;
            }
        }, 50);
  })

Com isso teremos o Kirby passando pela tela.

Para não termos que tratar a criação de uma animação, usei aqui uma imagem estática mesmo.

Organizando o código: O objeto Game

Até agora só fizemos bagunça. Vamos organizar mais o nosso código, o que nos permitirá ter mais controle também.

const canvas = document.querySelector('#myCanvas');

/* alterei levemente a função de carregar
imagens. Agora ele recebe um objeto em
que armazenaremos a imagem carregada,
e também passamos o nome do campo
em que a imagem será armazenada.
*/
function loadImage(src, storage, field){
    return new Promise(resolve => {
        var img = document.createElement('img');
        img.addEventListener('load', () => {
            storage[field] = img;
            resolve(img);
        });
        img.src = src;
    });
}
/* Todo o código que controla o jogo
ficará dentro desse objeto "Game"
*/
const Game = {
/* guardei o contexto do canvas dentro de Game
*/
    ctx : canvas.getContext('2d'),
/* a função start() será responsável por iniciar
o jogo. Ela executa a função load() e, quando
tudo estiver carregado, inicia o looping.
*/
    start(){
        this.load().then(() =>{
        /* guardo o interval na variável timer.
        Assim seremos capazes de parar o looping do
        jogo caso seja necessário.
        */
            this.timer = setInterval(() => {
            /* o looping executa essas duas funções.
            Logo veremos o que elas fazem.
            */
                this.update();
                this.draw();
            }, 30);
        })
    },
    /* a função stop() limpa o nosso interval, fazendo
    o jogo parar de ser executado.
    */
    stop(){
        clearInterval(this.timer);
    },
    /* a função load() é onde nós iremos carregar nossas
    imagens. Quando tudo é carregado, ele retorna uma promise.
    Assim garantimos que o jogo só será inicado quando
    todos os recursos estiverem carregados.
    */
    load(){ 
        return loadImage('https://i.imgur.com/k6heF1k.png', Game, 'background');
    },
    /* criei a função clear() para facilitar a limpeza do canvas.
    */
    clear(){
        this.ctx.clearRect(0, 0, canvas.width, canvas.height);
    },
    /* a função draw() será responsável por executar
    tudo o que for relacionado em desenhar algo no canvas.
    Em sua primeira linha nós já executamos o clear().
    */
    draw(){
        this.clear();
        this.ctx.drawImage(this.background, 0, 0, canvas.width, canvas.height);
    },
    /* a função update() serve para atualizarmos algum valor.
    Imagine que você queira criar um "relógio". Como a 
    função update() fica sendo executada pelo looping,
    podemos ir atualizando o tempo nela. Com o valor
    alterado, a função draw() cuidará do resto.
    */
    update(){
    }
}

/* chamamos essa função para iniciar o jogo.
Por enquanto tiramos o Personagem. Temos só
o fundo. Criaremos o personagem a seguir.
*/
Game.start();

Criando um personagem: O objeto Character

Agora que temos o objeto Game cuidando de tudo, está mais fácil criarmos outros objetos que estarão presentes no nosso jogo.

Vamos criar um personagem que poderemos controlar.

Em um jogo real, para poder reutilizar o código, seria mais comum criarmos uma classe. Mas como a ideia aqui é simplificar só para fins didáticos, eu vou criar um objeto literal mesmo.

// criamos o objeto Character para o nosso personagem
const Character = {
/* declaramos algumas variáveis que nos permitirão
ter mais controle do personagem.
Ao criar o seu jogo, poderá criar as variáveis que quiser.
*/
    x: 50, // controla a posição horizontal
    y: 125, // controla a posição vertical
    speed: 5, // controla a velocidade do movimento
    /* a função start() é executada apenas uma vez
    quando o personagem é inserido na tela
    */
    start(){
    /* aqui aproveitamos a funçõa start() para
    começar a escutar eventos do teclado.
    Verificamos se determinada tecla está sendo
    pressionada, e assim alteramos o valor da
    variável x, que fará com que o personagem
    seja desenhado em uma posição diferente,
    dando a ilusão de movimento.
    */
        window.addEventListener('keypress', (event) => {
            const key = event.key;
            switch(key){
                /* note que alteramos o valor
                da variável de posição com o valor
                que indicamos na variável de velocidade.
                */
                case 'a': this.x -= this.speed; break;
                case 'd': this.x += this.speed; break;
            }
        });
    },
    /* a função draw recebe o contexto do canvas e
    desenha a imagem do personagem, armazenada na
    variável sprite.
    Veja que desenhamos com base nas variáveis
    que declaramos.
    */
    draw(ctx){
        ctx.drawImage(this.sprite, this.x, this.y, 32, 30);
    },
    /* e também declaramos uma função update() caso
    seja preciso.
    */
    update(){
    }
}

Inserindo o personagem no jogo

Agora que temos um objeto Character pronto para ser usado, temos que inseri-lo no jogo. Vamos então fazer algumas alterações no objeto Game para inserir nosso personagem no jogo.

const Game = {
    // ...
    start(){
        // chamamos o start() do personagem.
        Character.start()
        this.load().then(() =>{
            this.timer = setInterval(() => {
                this.update();
                this.draw();
            }, 30);
        })
    },
    // ...
    load(){
    /* agora estamos fazendo com que o load()
    aguarde o carregamento do sprite do personagem
    e do background do jogo.
    */
        return Promise.all([
            /* carregamos o sprite do personagem
            e armazenamos a imagem na propriedade
            sprite dentro de Character
            */
            loadImage('https://i.imgur.com/WyqxuaD.png', Character, 'sprite'),
            loadImage('https://i.imgur.com/k6heF1k.png', Game, 'background'),
        ]);
    },
    // ...
    draw(){
        this.clear();
        this.ctx.drawImage(this.background, 0, 0, canvas.width, canvas.height);
        /* Adicionamos a chamada da função draw()
        de Character
        */
        Character.draw(this.ctx);
    },
    // ...
}

Agora sim temos a seguinte tela:

Kirby - Green Greens

E com as teclas “A” e “D” você pode controlar o Kirby para a direita e esquerda.

O que aprendemos sendo usado na prática

Vamos ver o que aprendemos sendo usado por ferramentas profissionais.

Phaser

Phaser

Uma ferramenta muito usada para criar jogos com JavaScript é o Phaser.

https://phaser.io/examples/v2/games/breakout

No link acima temos um exemplo de um jogo clássico. Se você olhar o código que está junto, verá que o funcionamento é bem parecido com o código que criamos manualmente:

var game = new Phaser.Game(800, 600, Phaser.AUTO, 'phaser-example', { preload: preload, create: create, update: update });
/*
Iniciamos um novo jogo com a função "Phaser.Game()".
Para essa função, passamos o tamanho do canvas
(800x600).
No final, temos um objeto que passa as funções
preload(), create() e update().
preload() serve para carregar os recursos do
jogo antes dele ser iniciado, e para isso chamamos
"game.load".
create() é a função executada uma única vez
quando o jogo é criado.
update() é a função que é executada várias
vezes enquanto o looping estiver ativo.
*/

Game Maker

GameMaker Studio

O GameMaker é muito conhecido por possibilitar que as pessoas criem jogos sem saber programar. Você pode simplesmente arrastar ícones para criar a lógica do seu jogo.

Apesar disso, o GameMaker possui uma linguagem de programação própria que é bem simples de se aprender, possibilitando fazer coisas bem mais avançadas.

GameMaker IDE

Note que na edição da lógica temos a parte “Events”. Nele temos o evento “Create” (igual ao que conhecemos) e o evento “Step” (igual ao update). Vários outros eventos podem ser adicionados.

Unity3D

Unity3D

Outra ferramenta bem conhecida é o Unity3D, uma ferramenta bem completa para a criação de jogos e que exporta código nativo para mais de 25 plataformas. A linguagem usada é o C#.

Adam

Vamos dar uma pequena olhada em uma classe criada com C# para o Unity:

using UnityEngine;
using System.Collections;

public class Character : MonoBehaviour {

    public float speed = 0.5f;

    // Use this for initialization
    public void Start () {
        // ...
    }

    // Update is called once per frame
    public void Update () {
        // ...
    }
}

Com o Unity temos uma IDE completa para o desenvolvimento de jogos. Note que ainda temos funções como Start() e Update().
Agora você já sabe o que essas funções fazem né?

Também temos outros métodos que são chamados em determinados momentos, que facilitam muito na hora de desenvolver as ações. Um exemplo é o Awake(), OnGUI(), OnDestroy(), etc.

Conclusão

Entender como um jogo funciona é uma ótima base para conseguirmos entender como as ferramentas para a criação de jogos funcionam, facilitando o aprendizado.

Vimos então que jogos possuem um looping que desenha em uma tela com base nas variáveis, as quais podem ser alteradas de acordo com nossas ações. E esse conceito está presente em todas as ferramentas de desenvolvimento de jogos, desde as mais simples até as mais profissionais.

As ferramentas nos ajudam a tratar o carregamento de arquivos, como executar áudio e vídeo, como renderizar imagens, simular física (colisões, gravidade, atrito, etc), construção de cenários e posicionamento de objetos, desenvolvimento de animações, gerenciamento dos controles, otimização de memória, etc.