Ver el código de «960 GRID SYSTEM»

{{Caso de Estudio
|Nombre=960 Grid System
|Autor=Nathan Smith
|Imagen=Fffff.jpg
|Ubicación=
|Período=2008
|Palabras Clave=framework,CSS, sistema de grillas, diseño de interfaz, diseño web
|Cursos Relacionados=Taller de Construcción DG 4 - 2012,
|Alumnos=Alison Saravia,
|URL=http://960.gs/
}}



=960 Grid System=




==¿Qué es un Grid System?==

Un grid system no es más que un archivo CSS que define una serie de estilos que te ayudan a organizar el contenido de tu página web. 
Se podría comparar con una plantilla o una hoja cuadriculada.


===Introducción===

960 Grid System es un Framework para CSS que consiste en un sistema de grillas a 960px,  utilizada para realizar maquetaciones de proyectos web. Existen dos variantes de grillas divididas en 12 y 16 columnas, que se pueden utilizar por separado o conjuntamente. 960 Grid System nos proveerá varios recursos que podremos descargar, desde un archivo Html con grillas, inclusive grillas para Photoshop en PSD, Grillas para fireworks en Png, omnigraffle, y visio (vs). 


===¿Por qué surge?===

Este grid se creó por la necesidad de tener un “estándar” en el ancho de los sitios web. En nuestros días ya es sólo un pequeño porcentaje de usuarios que utilizan resolución de 800 x 600 pixeles, mientras la mayoría ya utiliza resoluciones de 1024 x 768 px o mayores. Es por eso que un grupo de personas decidió crear este sistema de maquetado basado en 960px de ancho, con configuraciones de 12 y 16 columnas para poder combinar entre sí y así crear nuestros layout de una forma simple y rápida.



==Características==


*Diseño basado en retícula. El sistema utiliza columnas de tamaño fijo para establecer una retícula que sirva de base en la creación de los sitios web. Puede ser una combinación de 12 o 16 (Johnson, 2010). Otros diseñadores han modificado el sistema para utilizar 24 columnas.

*Compatibilidad. El sistema se creó contemplando desde el inicio la compatibilidad con los diferentes navegadores de Internet, pues utiliza etiquetas estándar de HTML (lenguaje de marcado de hipertexto) y CSS (hojas de estilo en cascada).

*Administración independiente de las tipografías. El sistema administra cómo se muestran las tipografías en el diseño del sitio web, mediante un archivo externo llamado text.css.

*Tipografía definida en pixeles. El sistema utiliza pixeles (contrario a tamaños relativos) para definir el tamaño de las tipografías, pues facilita más diseñar con ellas, ya que se pueden manejar tamaños absolutos en el diseño.

*Estructura básica sin diseño. El sistema no incorpora previamente elementos de diseño como colores de fondo o texto. Deja esta tarea a quienes utilicen el sistema.

==Estructura==
combinación de 12 o 16 columnas para obtener un marco de 960 pixeles en total.

La esencia del sistema es que todas las columnas tengan anchos específicos y constantes. Si se utiliza el diseño a 12 columnas, deben tener un ancho de 60 pixeles y si se utilizan 16 columnas, el ancho debe ser de 40 pixeles. Cada una de las columnas se separa de las demás con un margen de 10 pixeles a cada lado.


12 columnas
[[Archivo:12columas.png|400px]]






16 columnas
[[Archivo:16columnas.jpg|400px]]

==Ventajas de 960 Grid System==






*'''Compatibilidad.''' El 960 Grid System es compatible con la mayoría de los navegadores más utilizados como el Mozilla Firefox, Google Chrome, Safari, Internet Explorer y Opera.
  
*'''Estructura previa.''' El sistema ofrece una estructura para la diagramación de los sitios web, pues evita el proceso de creación de una nueva estructura cada vez que se inicia un proyecto.
  
*'''Experiencia visual.''' Un sistema como este ofrece una retícula que mejora el balance, la alineación y el espacio para lograr una mejor experiencia visual.
 
*'''Reemplaza el uso de tablas.''' La retícula puede ser un buen sustituto para la diagramación de sitios web con tablas utilizadas por los diseñadores en los inicios de Internet. Se debe señalar que en la actualidad las tablas son solamente recomendadas para mostrar datos en las páginas web.
   
*'''Mayor velocidad de desarrollo.''' El uso de un sistema como el 960 Grid System agiliza el proceso de creación de sitios web.




==Desventajas de 960 Grid System==





*'''Es una estructura rígida.''' El sistema ofrece una retícula rígida para la diagramación de los sitios web que no permite variantes para lograr otras formas de mostrar el contenido.
  
*'''Limita la creatividad.''' Relacionado con el aspecto anterior, el uso continuo de una retícula como esta limita la creatividad en el diseño y la diagramación de sitios web.
  
*'''Nuevas dimensiones de pantalla.''' El sistema funciona muy bien con resoluciones de hasta 1024 pixeles; sin embargo, cada vez las pantallas permiten mayores resoluciones y el sistema no se adapta satisfactoriamente a resoluciones superiores.
   
*'''Difícil implementación.''' El sistema no está creado para que sea fácil de implementar por cualquier diseñador web. Si alguna persona desea usarlo, debe tener conocimientos de HTML y CSS.

==Ejemplos==

Ejemplos de páginas web que han utilizado 960 Grid System.

Drupal.org    
                   
[[Archivo:Drupal.jpg|450px]]  



Fedoraproject.org  

[[Archivo:Fedora.jpg|450px]]



Woothemes.com
 
[[Archivo:Grilla16.png|450px]]



Lulu.com

[[Archivo:Lulu.jpg|450px]]