HTML5

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.

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.

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:

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.

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:

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.

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

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.

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:

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

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.

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

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.

A partir do link (https://adminlte.io/themes/AdminLTE/index2.html) é possível ter um Live Preview do template e testar todas as suas funcionalidades antes de realizar seu download.

O download da ferramenta pode ser feito através do link: https://adminlte.io/

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 permite que este template seja utilizado nos mais diversos projetos.

A partir do link (https://coreui.io/demo/#main.html) é 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.

Seu download pode ser feito através do link: https://coreui.io/

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.

É possível acessar sua Live Preview através do link (https://demos.creative-tim.com/light-bootstrap-dashboard/).

Seu download pode ser realizado acessando o link: https://github.com/creativetimofficial/light-bootstrap-dashboard

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.

Sua Live Preview pode ser acessada no link (https://demos.creative-tim.com/material-dashboard/examples/dashboard.html?_ga=2.925873.104232430.1547748278-1145022817.1547748278) 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 do link: https://www.creative-tim.com/product/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.

A partir do link (http://www.bootstrapdash.com/demo/star-admin-free/jquery/index.html) é possível acessar a Live Preview deste template e seu download, feito através do link: https://www.bootstrapdash.com/product/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.

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

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

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 e GitHub - Controle de versão
Curso de Git e GitHub - Controle de versão
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:

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:

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:

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.

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