# Interface do Usuário

# Modelo de página para desenvolvimento de Sistemas IFPE

##### [](http://gitlab.ifpe.edu.br/filipe/guia-software-institucional/wikis/desenvolvimento-interface-usuario#sum%C3%A1rio)Sumário

1. [Logotipo](https://wiki.ifpe.edu.br/books/an%C3%A1lise-e-desenvolvimento-de-sistemas/page/interface-do-usu%C3%A1rio-6da#bkmrk-logotipo)
2. [Manual](https://wiki.ifpe.edu.br/books/an%C3%A1lise-e-desenvolvimento-de-sistemas/page/interface-do-usu%C3%A1rio-6da#bkmrk-manual)
3. [Navbar](https://wiki.ifpe.edu.br/books/an%C3%A1lise-e-desenvolvimento-de-sistemas/page/interface-do-usu%C3%A1rio-6da#bkmrk-navbar)
4. [Footer](https://wiki.ifpe.edu.br/books/an%C3%A1lise-e-desenvolvimento-de-sistemas/page/interface-do-usu%C3%A1rio-6da#bkmrk-footer)
5. [Exemplo](https://wiki.ifpe.edu.br/books/an%C3%A1lise-e-desenvolvimento-de-sistemas/page/interface-do-usu%C3%A1rio-6da#bkmrk-exemplo)

---

### [](http://gitlab.ifpe.edu.br/filipe/guia-software-institucional/wikis/desenvolvimento-interface-usuario#logotipo)Logotipo

<div class="image-container" id="bkmrk--0">[![ifpelogo.png](https://wiki.ifpe.edu.br/uploads/images/gallery/2017-09-Sep/scaled-840-0/ifpelogo.png)](https://wiki.ifpe.edu.br/uploads/images/gallery/2017-09-Sep/ifpelogo.png)</div>### [](http://gitlab.ifpe.edu.br/filipe/guia-software-institucional/wikis/desenvolvimento-interface-usuario#manual)Manual

Manual de Identidade Visual do IFPE

[Download](http://gitlab.ifpe.edu.br/cadt/guia-software-institucional/uploads/1ec0caf75ad510b27d9634de5f0604da/Manual_todos_os_Campi.pdf)

### [](http://gitlab.ifpe.edu.br/filipe/guia-software-institucional/wikis/desenvolvimento-interface-usuario#p%C3%A1gina-estrutura)Página (Estrutura)

Recomenda-se usar [bootstrap](http://getbootstrap.com/) como *framework* para desenvolvimento *front-end*.

##### [](http://gitlab.ifpe.edu.br/filipe/guia-software-institucional/wikis/desenvolvimento-interface-usuario#navbar)Navbar

```code

<nav class="navbar navbar-inverse">
  <div class="container-fluid">
    <div class="navbar-header">
    <a href="#"><img class="img-responsive"       
        src="ifpelogo.png"></a>
    </div>
    <ul class="nav navbar-nav">
      <li class="active"><a href="#">Início</a></li>
      <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Page 1 <span class="caret"></span></a>
        <ul class="dropdown-menu">
          <li><a href="#">Page 1-1</a></li>
          <li><a href="#">Page 1-2</a></li>
          <li><a href="#">Page 1-3</a></li>
        </ul>
      </li>
      <li><a href="#">Page 2</a></li>
    </ul>
    <ul class="nav navbar-nav navbar-right">
      <li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Entrar</a></li>
      <li><a href="#"></span> Sobre</a></li>      
    </ul>
  </div>
</nav>

```

##### [](http://gitlab.ifpe.edu.br/filipe/guia-software-institucional/wikis/desenvolvimento-interface-usuario#footer)Footer

```code
<footer class="text-muted">
      <div class="container">
        <p>&copy; 2016 DADT<p>Todos os direitos reservados</p>
      </div>
</footer>

```

##### [](http://gitlab.ifpe.edu.br/filipe/guia-software-institucional/wikis/desenvolvimento-interface-usuario#exemplo)Exemplo

[index.html](http://gitlab.ifpe.edu.br/cadt/guia-software-institucional/uploads/ea1f528a623de395928295742465efa6/index.html)

### [](http://gitlab.ifpe.edu.br/filipe/guia-software-institucional/wikis/desenvolvimento-interface-usuario#emag-modelo-de-acessibilidade-em-governo-eletr%C3%B4nico)eMAG - Modelo de Acessibilidade em Governo Eletrônico

Todos os sistema desenvolvidos para o IFPE devem ser adaptados ao Modelo de Acessibilidade em Governo Eletrônico para garantir a acessibilidade de todos.

O Modelo de Acessibilidade em Governo Eletrônico (eMAG) tem o compromisso de ser o norteador no desenvolvimento e a adaptação de conteúdos digitais do governo federal, garantindo o acesso a todos. As recomendações do eMAG permitem que a implementação da acessibilidade digital seja conduzida de forma padronizada, de fácil implementação, coerente com as necessidades brasileiras e em conformidade com os padrões internacionais.

Recomendamos o uso da ferramenta [*Tota11y*](http://khan.github.io/tota11y/) para verificar automaticamente a acessibilidade do sistema desenvolvido.

O manual completo do eMAG pode ser encontrado no [site](http://emag.governoeletronico.gov.br/) do Departamento de Governo Eletrônico.