Criando e personalizando seu Web App
Este é um tutorial para auxiliar na criação e personalização de um Web app para a sua aplicação. Para este tutorial, utilizaremos o Render para criar o Web App (tutorial para o Render). Dois templates de Web App também estão disponíveis, um para a criação de um classificador de imagens e outro para a classificação de um texto.
Inicialmente iremos apresentar conhecimentos básicos de CSS e HTML, afim de facilitar o entendimento do tutorial.
O HTML é uma das linguagens que utilizamos para desenvolver websites. Os elementos HTML são representados por tags, as tags rotulam partes do conteúdo, como ‘cabeçalho’, ‘parágrafo’, entre outros. Utilizando as tags, nós dizemos para o navegador o que é cada informação. Algumas das tags contidas no código HTML do Web App são:
- O
<title>elemento especifica um título para o documento - O
<h1>elemento define um cabeçalho grande - O
<p>elemento define um parágrafo - A
<div>define uma divisão ou seção em um documento HTML
No código HTML, adicionamos a informação que desejamos entre tags, tendo uma tag no início e outra no fim, como no exemplo ao lado. No exemplo temos uma tag <div> no início e uma tag </div> que termina a seção iniciada na primeira tag, e de modo semelhante temos a tag <p> que inicia um parágrafo e outra </p> que termina. Além disso, pode-se observar o elemento ‘class’ dentro da tag <p>, este elemento é uma forma de identificar um grupo de elementos. Através dele, pode-se atribuir formatação a um ou VÁRIOS elementos de uma vez por meio do CSS.
O CSS é o responsável por descrever como os elementos HTML devem ser exibidos na tela, papel ou em outra mídia. Normalmente, uma folha de estilos externa é usada para definir o estilo para muitas páginas HTML.
Utilizando-se um folha externa para definir o estilo de uma página, deve-se escrever o CSS da seguinte forma:
No exemplo ao lado, temos dois elemento ‘body’ e ‘.sua_classe’. Como o próprio nome diz, o elemento ‘sua_classe’ é a classe que você criou no seu código HTML e contêm entre chaves ‘{}’ as características do elemento a ser exibido. O elemento ‘body’ contêm as caraterísticas gerais da página, como a cor da página, entre outros.
Abaixo pode-se observar algumas das características que podem ser determinadas pelo CSS.
Outras características do site também podem ser alteradas como, cor do fundo, cor de botão, entre outros.
Editando o template para o seu próprio Web App:
Como foi explicado acima existem classes para os elementos HTML que as quais utilizamos para atribuir formatação a esses elementos.
Primeiramente devemos configurar o backend do Web App para funcionar com nossa aplicação. Depois de ter exportado seu modelo treinado, devemos editar as seguintes informações do arquivo ‘server.py’, de acordo com o seu modelo:
A seguir iremos editar o HTML e CSS da aplicação para ficar de acordo com o desejado.
No HTML, devemos editar o nome e descrição da aplicação nos espaços já reservados para isso. Além disso, também existem espaços reservados para escrever informações adicionais ao Web App, como explicações a respeito do modelo, exemplos, links para contato, entre outros.
Nas linhas 18, 21 e 25, do arquivo index.html contido na pasta ‘\nome do_modelo\app\view’ deve-se editar/completar o título, nome e descrição do Web App, respectivamente, e nas linhas 38 à 42 pode-se, opcionamente, adicionar informações extras a respeito do modelo e/ou projeto.
O template disponibilizado tem a seguinte aparência:
No arquivo CSS contido na pasta ‘\nome do_modelo\app\static’, podemos editar algumas características do template. Podemos alterar, sem muitas modificações no código, as cores dos elementos da página e algumas características que ocorrem com a ação do usuário.
Podemos modificar na as cores de cada elemento buscando sua classes no arquivo CSS. Para mudar a cor do ‘cabeçalho’ da página, a cor do centro da aplicação e do ‘rodapé’ da página, devemos modificar o elemento background-color, respectivamente, da classe ‘header’, ‘all’ e ‘body’, com a cor desejada, podendo esta ser escrita em rgb e hexadecimal.
Para modificar as características do título, descrição ou do texto contido no ‘rodapé’ devemos alterar as classes ‘title’, ‘text’ e ‘more’, respectivamente, de acordo com o que está descrito no figura “Exemplo 2 de CSS”.
Por fim, para editarmos as características dos botões devemos modificar duas classes, a ‘choose-file-button’ e a ‘analyze-button’. Além das características já citadas, pode-se alterar no botão o ‘arredondamento’ do botão border-radius e a cor de contorno do botão border.
Podemos ainda editar algumas características visíveis apenas quando o mouse está em cima do botão, para isso devemos procurar por outro elemento no CSS que contêm o nome da classe do botão seguido por ‘:hover’. Encontrado esse elemento podemos editar as mesmas informações que escrevemos no anterior.
Chegamos ao fim deste tutorial, a quem desejar se aprofundar mais nesse assunto, existem diversos tutoriais a respeito disso, como no site w3schools. Não recomendo alterar os códigos do template, além do explicado neste tutorial, caso não tenham experiência prévia nestas linguagens. Caso desejem mudar algo além do descrito neste tutorial, podem acessar o site citado anteriormente ou entrar em contato diretamente comigo.
