# 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
[![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)
### [](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 ``` ##### [](http://gitlab.ifpe.edu.br/filipe/guia-software-institucional/wikis/desenvolvimento-interface-usuario#footer)Footer ```code ``` ##### [](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.