Esse conteúdo foi desenvolvido para ser melhor visualizado em navegadores modernos.
Para um melhor aproveitamento, por favor atualize o seu navegador ou utilize o Chrome, Firefox ou Edge atualizado.
Os infográficos são uma solução simples de integração de novas funcionalidades pontuais dentro de uma página na Nova v3.
Infográficos consistem na junção, opcional, de três arquivos: HTML / SVG, CSS e JS que serão inseridos dentro do contexto da página dinamicamente. O infográfico não funciona dentro de um iframe, por isso ele está sujeito a todo o contexto da página Nova e, portanto, deve ser desenvolvido dentro de uma.
Os infográficos devem ser salvos na pasta extras na raíz do curso, dentro de uma pasta com o nome (ID) do inforgráfico.
Todos os arquivos relativos a um mesmo infográfico devem ter o mesmo nome, diferenciados somente pela extensão apropriada.
Infográfico desenvolvido em HTML5 / JS / CSS
O código HTML abaixo deverá ser inserido na página do curso, no local onde o infográfico aparecerá:
<div id="infografico" class="loading" data-active="infografico" data-template="../extras/infografico_html/infografico.html" data-style="../extras/infografico_html/infografico.css" data-script="../extras/infografico_html/infografico.js" data-init="infograficoScript" >Carregando...</div>
Os scripts podem estar contidos na página template ou em um arquivo separado.
Para garantir as dependências, ao final do load dos componentes uma função de inicialização será buscada no escopo global ( window ) com o nome igual ao ID da tag de chamada, ou o nome declarado no atributo data-init do mesmo.
Para garantir a manutenção fácil do formulário, devesse seguir a seguinte estrutura o máximo possível.
window.idInfografico = function ($base) {
var idInfografico = {
// declaração de propriedades
exemplo: 'value',
// métodos básicos
init: function(){ this.addEvents(); },
addEvents: function(){ },
render: function(){ }
};
idInfografico.init();
};
A fim de evitar qualquer conflito entre os estilos do infográfico com a páginas e outros infográficos, todas as regras devem estar, prioritáriamente, atreladas ao ID do mesmo, conforme o exemplo abaixo.
#idInfografico { background: #cdcdcd; }
#idInfografico form { border: 1px solid #333; }
Uma excessão é no raro cenário em que o infográfico precisa aparecer diversas vezes na mesma página. Nesse caso deve-se usar a class .[nomeInfografico]-info.
O coração do infográfico é o seu arquivo de conteúdo, o template. Ele será importado e inserido dentro da tag de chamada e, portanto, pode e deve ser constituído de uma estrutura HTML ou SVG.
<form action="#" class="infografico" id="info-html-exemplo">
<div class="info-html-exemplo-label">Elemento do infográfico</div>
</form>
<svg id="info-svg-exemplo" viewbox="0 0 300 100" width="300" height="100"> <circle x="0" y="50" cx="50" cy="50" r="40" stroke="#555555" stroke-width="2" fill="#cccccc" /> <rect x="100" y="10" height="80" width="80" stroke="#555555" stroke-width="2" fill="#cccccc" /> <polygon points="190,90 282.376,90 236.188,10 190,90" stroke="#555555" stroke-width="2" fill="#cccccc" /> O seu navegador não suporta SVG. </svg>
Uma das formas mais simples de se trabalhar o template do SVG é exportá-lo diretamente de uma ferramenta gráfica. Por padrão utilizamos o Adobe Illustrator e caso esse seja usado, o arquivo .ai deve ser salvo na pasta junto com os demais arquivos do infográfico com o mesmo nome da ID.