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

 

ifpelogo.png

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


Revisão #4
Criado 26 June 2017 17:07:50 por JACKSON YANNO ARAUJO DE CARVALHO
Atualizado 15 January 2018 17:17:23 por Filipe Arruda