pasosdeJesus/msip

# Personalización de diseño visual, logo y favicon

Una maquetación (layout) por omisión para todas las páginas se ubica 
en ```app/views/layouts/msip/application.html.erb``` y una página 
portada por omisión en `app/views/msip/hogar/index.html.erb` , incluyen 
soporte para:
* Encabezado fijo, pie de página y espacio para el contenido
* Una imagen de portada que debe ubicar en `app/assets/images/logo.jpg`
* Favicons de diversos tamaños. Podrás generalos desde <https://favicomatic.com/> 
  a partir de una imagen de al menos de 310x310.  
  Ubicalos en el directorio ```app/assets/images``` con los nombres dados por 
  esa página.
* Un titulo que te recomendamos especificar en `config/initializers/msip.rb` 
  para que aparezca como título de la página y al lado izquierdo de la 
  barra de navegación
* Diseño adaptable (responsive) basado en bootstrap, que reubica menus como 
  desplegables en dispositivos móbiles y escala imagen de portada
* Un menú que se puede especificar en el contenido con nombre ```menu```
* Una guía-rastro (breadcrumb) especificable en el contenido con 
  nombre ```breadcrumb```
* Espacio para las notificaciones (flash)
* Contenido principal de la página

Desde tu aplicación lo usas en ```app/views/layouts/application.html.erb``` 
que debe tener los contenidos organizados así:

```
<% content_for :titulo do %>
    <%= Msip.titulo %>
<% end %>

<% content_for :menu do %>
  <%= menu_group do %>
    <% if !current_usuario.nil? %>
      <%= menu_item "Carne1", "/" %>
    <% end %>
  <% end %>
  <%= menu_group :pull => :right do %>
    <%= menu_item "Documentacion", "https://gitlab.com/pasosdeJesus/msip/wiki" %>
    <% if current_usuario %>
      <%= menu_item "Clave", msip.editar_registro_usuario_path %>
      <%= menu_item "Usuarios", msip.usuarios_path %>
      <%= menu_item "Tablas Básicas", msip.tablasbasicas_path %>
      <%= menu_item "Salir #{current_usuario.nusuario}", msip.sign_out_path %>
    <% else %>
      <%= menu_item "Acerca de", msip.acercade_path %>
      <%= menu_item "Iniciar Sesión", msip.new_usuario_session_path %> 
    <% end %>
  <% end %>
<% end %>

<% content_for :piedepagina do %>
  <p><span class='derechos'><a href="http://www.pasosdejesus.org/dominio_publico_colombia.html">Dominio Público de acuerdo a Legislación Colombiana</a><br/>
    Desarrollado por <a href="http://www.pasosdeJesus.org" target="_blank">Pasos de Jesús</a>. 20xx. 
  </span></p>
<% end %>

<%= render template: "layouts/msip/application" %>
```


Puedes personalizar los colores con temas o creando por ejemplo un 
archivo  ```app/assets/stylesheets/personaliza.css``` con un contenido 
como el siguiente:

* Personalización del color de la barra de navegación, degrade de blanco a 
  acre, pero color acre en navegadores que no soportan degrade:
```css
.navbar {
  background-image: linear-gradient(rgb(255, 255, 255), rgb(135, 43, 0));
  color: #872b00;
}
```

# Elementos del diseño visual para sistemas de información web

Recomendamos 
<https://gitlab.com/pasosdeJesus/msip/blob/main/doc/elementos_dise%C3%B1o_visual.md>