Interface do Usuário

Modelo de página para desenvolvimento de Sistemas IFPE

Sumário

1. Logotipo
2. Manual
3. Navbar
4. Footer
5. Exemplo

---

Logotipo

 

Manual

Manual de Identidade Visual do IFPE

Download

Página (Estrutura)

Recomenda-se usar bootstrap como framework para desenvolvimento front-end.

Navbar

<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>

Footer

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

Exemplo

index.html

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 para verificar automaticamente a acessibilidade do sistema desenvolvido.

O manual completo do eMAG pode ser encontrado no site do Departamento de Governo Eletrônico.