1

Diseo CSS




Enero 2014




Versin <1.2>
2



Diseo CSS



CODIGO

VERSIN:
1.2

EMISIN:


REVISIN:


PGINA 2 de 15





Historia de Revisin

Fecha Versin Descripcin Autor
23/01/2014 1.0 Se crea la versin
inicial del documento
Diseo CSS
Lic. Alberto Raaz
23/01/2014 1.1 Se registran
correcciones por
parte de Arian
Macias
Lic. Alberto Raaz
24/01/2014 1.2 Se agregan
correcciones por
parte de Luis
Hernndez
Lic. Alberto Raaz















3

INDICE

1. Men ...................................................................................................... 5
1.1 Jerarqua de Men ..................................................................................... 5
1.2 Tipos de Mens....6
2. Elementos Grficos ..................................................................................... 7
3. Tipografa ................................................................................................ 9
4. Esquema de Distribucin de Elementos Layout .................................................. 11
5. Tecnologas de Diseo Grfico para Web.......... 13
6. Software 14
7. Estructura de Carpetas.. 15



























4

1. Introduccin
La interfaz grfica de usuario (GUI), es el artefacto tecnolgico de un sistema interactivo que
posibilita, a travs del uso y la representacin del lenguaje visual, una interaccin amigable con
un sistema informtico.

La seleccin de las tecnologas de desarrollo de interfaz grfica para Sistema de Informacin
Agropecuario se hizo en funcin de los casos de uso del proyecto y en orden a las ltimas y
mejores practicas de diseo y estilos web.
El desarrollo de la interfaz grfica del proyecto comprende la elaboracin del diseo grfico
(edicin de texto, objetos, imgenes) y la programacin del diseo web (manejo de hojas de
estilos, librerias jquery, javascript, entre otros)
A continuacin se detallen los elementos grficos, esquemas de diseo, software aplicaciones,
tecnologas y tcnicas para el desarrollo de la interfaz grfica de usuario del Sistema de
Informacin Agropecuario MIDA.
























5

1. Mens: GUI de seleccin de opciones del sitio web
1.1. Jerarqua de Mens

Login














Imagen de Referencia. Jerarqua de Mens, Men Principal del Usuario, Men de Agricultura,
Men de Ganadera.














Agricultura
Ganadera
Agricultura Ganadera
1.Registro de Parcela
2.Registro de Siembra
3.Registro de Cosecha
1.Establecimiento
2.Diagnstico
3.Inventario
6

1.2. Tipos de mens:
a. Men Vertical: mediante una lista de palabras que describen indican la pgina a mostrar.











Imagen de Referencia. Men Principal del Usuario, Rol Extensionista.

Colores Institucionales del MIDA:
Blanco HEX: #FFFFFF
Verde HEX: #ECF0F1
Verde HEX: #337A32
Negro: HEX: #000000


b. Mens Horizontal: mediante una lista de palabras que describen indican la pgina a
mostrar.


Imagen de Referencia. Men Horizontal de la Pgina Principal de Direccin Nacional de
Agricultura.
Colores:
Gris: HEX: ##E4E4E4
Verde HEX: #ECF0F1
Verde HEX: #DBECB8


7

2. Elementos Grficos
2.1. Botones: indican las acciones que puede realizar el usuario


Imagen de Referencia. Botn Guardar.
Color: Verde HEX: #4C984C



Imagen de Referencia. Botn Cancelar
Color: Verde HEX: #4C984C



Imagen de Referencia. Botn Imprimir
Color: Verde HEX: #4C984C



Imagen de Referencia. Botn Descargar
Color: Verde HEX: #4C984C




Imagen de Referencia. Botn Acceder Pgina Login
Color: Verde HEX: #4C984C


Imagen de Referencia. Enlaces
Color Azul HEX: # #06C


8

2.1. Botn Opciones:

Imagen de Referencia. Botn de Opcin de Sexo en el Formulario de Registro de Persona
Color: Verde HEX: #38C5A9

2.2. Botn Seleccin:


Imagen de Referencia. Botn de Seleccin Tipo de Persona en el Formulario de Registro de
Persona
Color: Verde HEX: #38C5A9

2.3. Elemento de Entrada de texto:

Imagen de Referencia. Entrada de texto del Login
Color: Azul HEX: #6CB1E9

2.4. Indicadores de Secuencia


Imagen de Referencia. Indicadores de Secuencia Proceso Registro de Fases de Parcela
Color: Azul HEX: #E2ECF5

2.5. Barra de Progreso

Imagen de Referencia. Barra de Progreso para Procesos
Color: Verde HEX: #64BA64






9

2.6. Dropdown list

Imagen de Referencia. Dropdown list Criterios de Bsqueda
Color: Azul HEX: #E2ECF5

2.7. Panel

Imagen de Referencia. Panel Registro de Persona
Color: Azul HEX: #D6E9C6

2.8. Alertas
Imagen de Referencia. Alerta confirmacin de Registro
Color: Azul HEX: #D6E9C6

2.9. Banner Principal:


Imagen de Referencia. Banner Principal, Seccin Header
2.9.1 Favicon:


Imagen de Referencia. Favicon, logotipo MIDA


10

3. Tipografa

3.1. Ttulos Pgina de Inicio


Imagen de Referencia. Ttulo de Pgina de Inicio.
Fuente: Verdana Bold
Tamao: 18
Color: Negro: HEX: #000000


3.2. Subttulo Pgina de Inicio

Imagen de Referencia. Subttulo Pgina de Inicio
Fuente: Verdana Bold
Tamao: 16
Color: Negro: HEX: #000000


3.3. Ttulos Pginas Internas

Imagen de Referencia. Ttulo Pginas Internas
Fuente: Verdana Bold
Tamao: 14
Color: Negro: HEX: #000000


3.4. Contenido pginas internas

Imagen de Referencia. Contenido Pginas Internas
Fuente: Verdana Bold
Tamao: 12
Color: Negro: HEX: #000000


11

4. Esquema de Distribucin de Elementos Layout
4.1. Pgina de Login


Imagen de Referencia. Pgina de Inicio Login

Comprende el conjunto de marcos:
-Marco Principal: Secciones header y content
Header (encabezado): contiene el banner principal del sitio
Content: contiene el formulario de acceso al sitio
-Marco Inferior: Seccin footer
Footer (pie de pgina): contiene informacin sobre los derechos de la pgina y la
declaracin de privacidad.

Background Page Color:
Blanco HEX: #FFFFFF

Footer Color:

Verde HEX: #ECF0F1


- Header -
- Content -
- Footer -
12


4.2. Pgina Men Principal del Usuario



Imagen de Referencia. Set de Marcos del Men Principal del Usuario, Rol Extensionista

Comprende el conjunto de marcos:
Marco Superior: Pgina seccin del header, contiene el banner principal del sitio.
Marco Derecho: Pgina seccin del men principal del usuario.
Marco Principal: Pgina de contenidos












- Marco Superior -
-Marco Derecho -
- Marco Principal -
13


5. Tecnologas de Diseo Grfico para Web
La seleccin de las tecnologas de desarrollo de diseo web para el proyecto MIDA se hizo
obedeciendo a los casos de uso de cada direccin y sobre las ltimas y mejores prcticas en
diseo grfico para web, para ofrecer una mejor experiencia de cara al usuario.
5.1. HTML5
HTML5 establece una serie de nuevos elementos y atributos que reflejan el uso tpico de los
sitios web modernos. Algunos de ellos son tcnicamente similares a las etiquetas <div>y <span>,
pero tienen un significado semntico, como por ejemplo <nav> (bloque de navegacin del sitio
web) y <footer>. Otros elementos proporcionan nuevas funcionalidades a travs de una interfaz
estandarizada, como los elementos <audio> y <video>. Mejora el elemento <canvas>, capaz de
renderizar elementos 3D en los navegadores ms importantes (Mozilla, Chrome, Opera, Safari e
IE).
5.2. CSS3
Una de las ventajas que nos ofrece esta tecnologa es permitir desarrollar webs ms accesibles
y ms interactivas. Podemos crear efectos y animaciones combinndolas con Javascript,
consiguiendo un efecto mucho ms visual y profesional, mejorando la experiencia de usabilidad
por parte del usuario y facilitando la depuracin del cdigo web.
Ventajas de la maquetacin con CSS:
Separacin de forma y contenido. Generalmente CSS y HTML se encuentran en archivos
separados, lo que facilita el trabajo en equipo porque diseador y programador pueden trabajar
independientemente. Por otro lado, permite el acceso a distintos navegadores y dispositivos.
Trfico en el servidor. Las pginas pueden reducir su tamao entre un 40% y un 60%, y los
navegadores guardan la hoja de estilos en la cach, sto reduce los costos de envo de
informacin.
Tiempos de carga. Por la gran reduccin en el peso de las pginas, mejora la experiencia del
usuario, que valora de un sitio el menor tiempo en la descarga.
Precisin. La utilizacin de CSS permite un control mucho mayor sobre el diseo, especificando
la ubicacin y tamao de los elementos en la pgina. Tambin se pueden emplear medidas
relativas o variables para que la pantalla o la caja contenedora se acomode a su contenido.
Mantenimiento. Reduce notablemente el tiempo de mantenimiento cuando es necesario
introducir un cambio porque se modifica un solo archivo, el de la presentacin, sin tener que
tocar las pginas que contienen la estructura con el contenido.
Diseo unificado y flexibilidad. Es posible cambiar completa o parcialmente el aspecto de un
sitio con slo modificar la hoja de estilos. Por otro lado, el tener el estilo de una web en un solo
archivo permite mantener la misma apariencia en todas las pginas.
Posicionamiento. Las pginas diseadas con CSS tienen un cdigo ms limpio porque no
llevan diseo, slo contenido. Esto es semnticamente correcto y la pgina aparecer mejor
posicionada en los buscadores. Google navega obviando el diseo.

5.3. Librera Jquery 1.9
Facilidad en funciones con efectos visuales e interacciones dinmicas (Ajax, auto-completar,
elementos que aparecen/desaparecen, animaciones)

5.4. Recursos Flat Design
Recursos Flat Design para una mejor experiencia visual y rapidez en los navegadores y sobre la
tcnica de diseo web adaptable adaptativo (Resposive Web Design).
14


6. Software

Adobe Dreamweaver CS6
Software de edicin de pginas web.
Permite agregar rapidamente diseos y funcionalidad de cdigo a las pginas.

Sublime Text 3
Editor de cdigo multiplataforma
Soporta el uso de Snippets, Plugins y sistemas de construccin de cdigo.

Adobe Photoshop CC
Software de edicin de imgenes y elementos grficos.

Netbeans 7.4
IDE Java

Axure RP Pro 6.5
Software de diseo y desarrollo de wireframes




















15


7. Estructura de Carpetas
La organizacin de las pginas web, hojas de estilo, imgenes y librerias se define bajo el mismo
patrn del IDE Netbeans JAVA

CSS: carpeta que almacena todas las hojas de estilos CSS
- login.css
- nav_bar.css

IMAGES: carpeta que almacena todas las imgenes del sitio web
- logo_mida.png
- logo_gobierno.png

JQUERY: Carpeta que almacena archivos .JS librera jquery v.1.9

JSP: Carpeta que almacena las pginas web .JSP, HTML