Loading...

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.

Funcionamento técnico

Implementando o JS

Como descrito na página inicial, para utilizar a Nova, basta adicionar o código abaixo na <head> e utilizar:

<script 
	type="text/javascript" 
	src="https://sv.www5.fgv.br/fgvonline/framework_html5/framework_nm_v3/js/framework.js" 
	id="framework">
</script>
<link rel="stylesheet" type="text/css" href="https://sv.www5.fgv.br/fgvonline/framework_html5/framework_nm_v3/css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="https://sv.www5.fgv.br/fgvonline/framework_html5/framework_nm_v3/css/fgv-nm-default.css">

Por padrão o framework está hospedado em https://sv.www5.fgv.br/fgvonline/framework_html5/framework_nm_v3/ e sua versão de desenvolvimento e testes em http://ead4.fgv.br/recursos/codigos/nm_dev_3/.

Caso utilize o Dreamweaver você pode utilizar o arquivo de Template para a página padrão e instalar a biblioteca de Snippets para os componentes.

Como funciona?

Componentes HTML+CSS+JS

Cada componente é o amalgama pré-estruturado de HTML, CSS e Js para criar e reutilizar elementos com layout e comportamentos complexos de forma fácil.

Na tela da biblioteca de componentes pode-se ver os itens comuns e seus métodos de aplicação.

Para aplicá-los, basta copiar os códigos HTML correspondentes que o framework localizará e instalará os JS´s e CSS´s necessários.

Fluxo de funcionamento JS

O framework funciona atravéz de um sistema que carregamento progressivo por requisição, utilizando a biblioteca RequireJS para gerenciar esse carregamento.

Para a incorporação de uma das bibliotecas pré-registradas é feita através de um atributo data-active em qualquer elemento do body.

<div data-active="personagem"></div>

Para scripts pontuais existe um modelo de eventos para gerenciar dependências. Ele é constituido de duas funções, uma para registro de funções e outra para chamar funções salvas.

  • nm.ready - listenners
  • nm.loaded - trigger

<script>
	// SAVE LISTENNER
	nm.ready( 'core', function( pack, $) {
		$('body').html("Sistema básico iniciado com sucesso!");
	});
	nm.ready( 'before.nm_ui', function( pack, $) {
		$('body').append( $('<div/>').append( 'nm_ui_start' ) );
	});
	nm.ready( 'after.nm_ui', function( pack, $) {
		$('body').append( $('<div/>').append( 'nm_ui_complete' ) );
	});
	nm.ready( 'scorm', function( pack, $) {
		$('body').append( $('<div/>').append( nm.scorm.status ) );
	});
	// CALL SAVED LISTENNERS
	nm.loaded( 'scorm', nm.$, nm.scorm );
</script>

ATENÇÃO

O Nova salva o estado da chamada para reutilizar. Então, caso um novo listenner seja salvo após o trigger tenha sido chamado ao menos uma vez, ele será chamado imediatamente com os argumentos da última chamada.