Apresentação

Esta é a documentação do layout AGETIC. A seguir serão apresentadas, além dos componentes, a lista das tecnologias utilizadas para construção deste layout e a forma de instalar e executar os pré-processamentos deste layout.

Este layout tem o intuito de facilitar o desenvolvimento das interfaces dos sistemas da DIDS/NTI/UFMS, de modo que todos os sistemas adotem interfaces de usuário semelhantes.

Segue os links para CDN e o botão para o download do arquivo compactado: Download

Para baixar o projeto com bower:

bower install http://git-agetic.ufms.br/agetic/layout.git

Opcionalmente pode-se solicitar uma versão específica:

bower install http://git-agetic.ufms.br/agetic/layout.git#v1.0.0

Template

Segue o template básico para criação de páginas utilizando o layout da AGETIC.

<!DOCTYPE html>
<html lang="pt-br">

<head>
    <title>Layout AGETIC</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.ufms.br/layout/latest/dist/css/styles.css" rel="stylesheet" />
</head>

<body>
    <header>
        <!-- Cabeçalho da página -->
    </header>
    <div class="wrapper">
        <section class="content">
            <div class="main-view">
                <!-- Conteúdo da página-->
            </div>
            <footer class="main-footer">
                <!-- Rodapé da página -->
            </footer>
        </section>
    </div>
    <script src="https://cdn.ufms.br/layout/latest/dist/js/vendor.js" type="text/javascript"></script>
    <script src="https://cdn.ufms.br/layout/latest/dist/js/scripts.js" type="text/javascript"></script>
</body>

</html>

Observação sobre o arquivo vendor.js: Este arquivo contêm todas as dependências javascript do layout de forma minificada, segue lista de dependências:

bower_components/jquery/dist/jquery.js
bower_components/bootstrap-sass/assets/javascripts/bootstrap.js
bower_components/bootstrap-sass-datepicker/js/bootstrap-sass-datepicker.js
bower_components/bootstrap-timepicker/js/bootstrap-timepicker.js
bower_components/bootstrap-touchspin/src/jquery.bootstrap-touchspin.js
bower_components/bootbox.js/bootbox.js
bower_components/jquery-mask-plugin/dist/jquery.mask.js
bower_components/remarkable-bootstrap-notify/dist/bootstrap-notify.js
bower_components/typeahead.js/dist/typeahead.bundle.js
bower_components/datatables.net/js/jquery.dataTables.js
bower_components/datatables.net-bs/js/dataTables.bootstrap.js
bower_components/jstree/dist/jstree.js
bower_components/clipboard/dist/clipboard.js

Instalação

Primeiramente é necessário intalar o Node.js para poder instalar o Gulp e o Bower. Caso esteja no Ubuntu Linux 16.04 ou superior, basta utilizar o comando: sudo apt-get install nodejs npm. No Windows faça o download do instalador em: https://nodejs.org. Após a instalação deve ser possivel executar o comando npm no terminal do Linux ou no prompt do Windows.
Com o npm instalado adequadamente, proceda com a instalação do Bower: npm install -g bower, e do Gulp: npm install --global gulp-cli
Procederemos agora com a instalação do Compass. É necessário ter o Ruby instalado, caso não tenha execute o seguinte comando no Ubuntu: sudo apt-get install ruby-full. Caso esteja no Windows faça o download do instalador em http://www.ruby-lang.org/en/documentation/installation/.
Com o Ruby instalado, execulte: gem update --system e logo em seguida: gem install compass

Finalmente va até a pasta raiz do projeto do Layout e execute:
npm install
bower install
gulp
Caso tudo ocorra normalmente, a pasta dist será criada com a seguinte estrutura:

|_ dist
    |_ css
    |    |_ 32px.png
    |    |_ 40px.png
    |    |_ nti.css
    |    |_ nti.css.map
    |    |_ throbber.gif
    |_ fonts
    |    |_ fontawesome-webfont.eot
    |    |_ fontawesome-webfont.svg
    |    |_ fontawesome-webfont.ttf
    |    |_ fontawesome-webfont.woff
    |    |_ fontawesome-webfont.woff2
    |    |_ glyphicons-halflings-regular.eot
    |    |_ glyphicons-halflings-regular.svg
    |    |_ glyphicons-halflings-regular.ttf
    |    |_ glyphicons-halflings-regular.woff
    |    |_ glyphicons-halflings-regular.woff2
    |_ js
    |    |_ nti.js
    |    |_ vendor.js
    |_ json
         |_ dataTable_pt-br.json

Tecnologias

A seguir é dada uma lista das tecnologias utilizadas para construção deste layout:

Bootstrap (http://getbootstrap.com):: Como o proprio site do projeto diz: Bootstrap é o mais popular framework HTML, CSS e JavaScript para desenvolver projetos responsivos e mobile first na web. Todas as funcionalidades do Bootstrap estão presentes no layout da AGETIC, e funcionam de forma identica a documentação apresentada no site https://getbootstrap.com.

Gulp (http://gulpjs.com/):

É um automatizador de tarefas que possibilita: pré-processar css, minificar arquivos css e javascript, copiar arquivos, entre outros. Possibilita, através do uso de plugins, integar as diversas ferramentas listadas aqui para construção deste layout.
Segue a lista de plugins utilizados:

gulp-clean
gulp-compass
gulp-concat
gulp-filter
gulp-load-plugins
gulp-minify-css
gulp-release-tasks
gulp-sourcemaps
gulp-uglify
gulp-zip
pump

* Plugins podem ser instalados com a utilização do comando: npm install [nome-do-plugin] --save-dev

Compass (http://compass-style.org/):: É outro framework CSS, que utiliza a linguagem SASS para gerar folhas de estilo. A diferença básica do Bootstrap é que este não tem componentes prontos. Compass oferece uma bilioteca de helpers que facilitam a estilização de diversos elementos HTML.

Bower (https://bower.io/):

É uma ferramenta de gerência de pacotes para web. Atravês de um arquivo de configuração, o bower.json, o Bower controla as dependências de um projeto, o que facilita a utlização de código fonte de terceiros dentro das nossas aplicações.
Segue a lista de plugins utilizados:

bootstrap-sass
components-font-awesome
bootstrap-timepicker
bootstrap-touchspin
typeahead.js
bootbox.js
jquery-mask-plugin
remarkable-bootstrap-notify
ab-datepicker
datatables.net
datatables.net-bs
jstree

Controle de Versão

Execute o comando a seguir:

bower version patch -m "Gerando versão %s com correções."

Automaticamente a versão do bower.json será incrementada na terceira casa (gerando assim um "patch": v0.0.1 => v0.0.2), no caso de "minor" (incremento na segunda casa: v0.0.2 => v0.1.0) e "major" (incremento na primeira casa: v1.0.0 => v0.1.0) deve-se rodar o comando a seguir:

bower version minor -m "Gerando versão %s com melhorias."
ou
bower version major -m "Gerando versão %s com novas funcionalidades."

Este comando execulta a troca de versão no arquivo bower.json e cria uma nova tag. Após é necessário fazer o push para o repositório conforme o comando a seguir:

git push origin master --tag

Desta forma quando executado o comando do bower, conforme visto na primeira seção desta página, será baixada esta última tag.

Gerar Versão Compactada

Para gerar a versão compactada basta rodar o comando a seguir:

gulp zip

Outros Comandos do Gulp

gulp: Roda a task default configurada no gulpfile.js. Esta task faz a limpeza do projeto e gera novamente o diretório dist.
gulp watch: Este comando fica em loop observando alteraçõe no diretório src, quando alguma alteração ocorre a task default é executada.
gulp clean: Exclue os diretórios dist e .temp.
gulp build: Gera os diretório dist.
gulp serve: Roda o projeto com o browserSync.

Apresentação

Template

Instalação

Tecnologias

Controle de Versão

Gerar Versão Compactada

Outros Comandos do Gulp

Exemplos

Página interna

Página externa

Página de login

Listagem de dados

Listagem de dados 2

Listagem de dados com Grid

Página de cadastro

Página de Visualização

Página de Acessibilidade