Framework Nova Modelagem
A Nova Modelagem é um framework de componentes e metodologias para a agilização do seu desenvolvimento dos cursos à distância .
Foi desenvolvido no ano de 2015 pela equipe de SOL - FGV tendo como base as metodologias e demandas dos cursos a serem implementados no 2DL, em página individuais e em pacotes SCORM
Detalhes técnicos
- HTML - HTML 5, Bootstrap 3
- CSS - CSS 3, Bootstrap 3
- JS - RequireJS, JQuery 2, Bootstrap 3
Usando
Para utilizar o NM, basta adicionar o código abaixo na <head> e utilizar :
- os elementos pré-definidos - elementos de formatação e tabulação de conteúdos
- os componentes - elementos de conteúdo com interação rica
<script type="text/javascript"> var framework_url = 'http://sv.www5.fgv.br/fgvonline/framework_html5/framework_nm_v2/'; </script>
<script type="text/javascript">
var init_script = document.createElement('script');
init_script.setAttribute('src', framework_url + 'js/require.js' );
init_script.setAttribute('data-main', framework_url + 'js/framework' );
document.head.appendChild(init_script);
</script>
Por padrão o framework está hospedado em http://sv.www5.fgv.br/fgvonline/framework_html5/framework_nm_v2/ e sua versão de desenvolvimento e testes em http://ead4.fgv.br/recursos/codigos/nm_dev/.
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 existem duas funcões chaves que podem ser declaradas em cada conteúdo para serem executadas após o carregamento do framework
- cached - rodará depois das bibliotecas básicas
- cachedBefore - rodará antes das bibliotecas básicas
<script>
var cached = function( $, _, nm_ui ){
/* seu código */
}
</script>
Estrutura de arquivos
FRAMEWORK
- framework
- css
-
js
- framework.js
- require.js
- basics_libs
- jquery
- canvas
- fgv
- bootstrap
- fonts
- img
CONTEÚDO
- curso
-
css
- estilo-grid.css
- animations.css
- personagem_napoleao.css
- js
-
pag
- _._._.html
- img
- videos
-
data
- simulado.xml
- hipertexto.xml
- mapa_conceitual.json
- artigos
-
Templates
- template.dwt
-
css