Do zero ao Mashup com CSS, JS e HTML! :)
Afinal, oque é mashup? Como fazer um? Para que serve?
Segundo o Help da Qlik, “No contexto do desenvolvimento web, um mashup é uma página da web ou aplicativo web que usa conteúdo de mais de uma fonte para criar um novo serviço único exibido em uma única interface gráfica. ”
Em minha experiência, mashup é uma estruturar web que possibilitar a exibição de um ou mais painéis de Business Inteligencie (BI), criados em Qlik Sense e seus respectivos objetos.
Estrutura?
Depois de criado o mashup no “Dev-Hub”, irão ser criado 2 arquivos dentro da pasta do mashup, sendo eles:
NomeDoMashup.js : Arquivo javascript, onde será colocado o id do Painel e o Id dos objetos do Painel.
NomeDoMashup.html : Arquivo html, onde vão ser estruturado o local onde um determinado objeto aparecerá na pagina web.
Obs 01: Para determinar o tamanho que cada objeto irar ocupar dentro da pagina é necessário criar um arquivos .CSS e referencia-lo ao html.
Obs 02: A pasta do mashup fica em C:\Users\NomeDoUsuario\Documents\Qlik\Sense\Extensions\
HTML?
É uma linguagem de marcação de texto que utiliza de tags para informar o que deve ser apresentado na internet, por exemplo, tags de links, de imagens e de textos.
Sobre: w3 w3schools html
JavaScript?
Javascript não é Java. Apesar da confusão que as pessoas normalmente fazem sobre essas duas linguagens, Java e Javascript não possuem nenhuma ligação direta uma com a outra a não ser o java no nome. Tendo isso em mente, vamos para a definição de o que é Javascript.
O JS ou JavaScript é uma linguagem de programação de alto-nível, criada no meio da década de 90, mais precisamente em 1996 pelo lendário(dizem..) programador Brendan Eich que, além de criar o JavaScript, foi também um dos fundadores da Mozilla Corporation.
Ele criou a linguagem quando ainda trabalhava na Netscape Communications Corporation, originalmente criado para funcionar no navegador Netscape Navigator, seu objetivo era facilitar processos dentro de páginas web, tornado a programação de animações e alertas muito mais simples.
Pouco tempo depois, cerca de 1 ano depois do seu lançamento, a Microsoft começou a aceitar esta linguagem em seu navegador da época, o que foi um dos grandes impulsionadores para consolidar o que é Javascript como uma das principais linguagens de programação dos dias de hoje.
Desse tempo para cá, o Javascript vem sofrendo diversas funções e aplicações diferentes, ficando mais versátil e completo de acordo com o tempo. Hoje, por exemplo, já é possível usar Javascript para criar aplicativos Desktop e Mobile, não só aplicações baseadas em web e navegadores.
Introdução: w3 js
CSS?
É uma linguagem de folha de estilos, que tem o papel de tornar uma página apresentável na web, relacionada diretamente com o design e aparência. Ou seja, o CSS é uma camada que se usa para controlar o estilo da sua página da web.
Sobre: w3 Css
Bootstrap?
É um kit de ferramentas de código aberto para desenvolvimento com HTML, CSS e JS.
Sobre: GetBotstrap
OBS: Quando o mashup é criado, o link é referenciado a versão 3 do bootstrap, atualmente já estamos na versão 4.
Oque fazer? E agora, Josué?
- Referenciar
Depois e entender a estrutura e necessário referenciar o(s) painel(s) e seus repetitivos objetos no arquivo javascript com mesmo nome do mashup.
2. Determinar local na a pagina
Utilizando a estrutura de grids do Bootstrap para referenciar o local onde o objeto do painel será exibido.
3. Determinar espaço
No arquivo css será determinado a largura, altura e alguns comportamentos quanto a resolução que o determinado objeto irar ocupar na pagina.
Boas Praticas e Dicas :)
- Crie o mashup dentro de uma estrutura de single page application, ou seja, invés de criar uma dezena de paginas diferentes para exibir objetos diferentes, crie apenas uma e utilize o Javascript para manipular a exibição do objeto dentro desta mesma pagina.
- Tente particionar o carregamento do objetos ao máximo, afinal você geralmente vai está trabalhando com grandes volumes de dados e o usuário não gosta de ficar esperando…
- Mesmo utilizando o sistema de grids do bootstrap, que teoricamente vai deixar a pagina responsiva, teste o mashup em resoluções diferentes para ver o seu comportamento. lembrando que cada objeto tem uma resolução minima para exibição, abaixo disso, este objeto simplesmente não vai aparecer.
- Deixe seus arquivos dentro da pasta do mashup, referencia externa a um arquivo sempre acontece alguma coisa, o diretório muda…
Esse artigo é um pouco daquilo que aprendi, fiz e acredito para desenvolver e que considero boas praticas na hora de criar mashups, se você tem alguma opinião divergente ou gostaria de acrescentar alguma coisa, por favor comente. Sua opinião vale muito! :)
Quem sou eu?
