dominios y alojamiento web en hostalia

Maquetación CSS 960gs, fin del ejemplo

19 de junio de 2009
Valoración del artículo:
Enviar un comentario
Ver comentarios del artículo (23)
Terminamos de crear en XHTML y CSS la plantilla del diseño de ejemplo para mostrar el funcionamiento de 960 Grid System, con vídeo incluido para ilustrar el proceso.
Por Miguel Angel Alvarez
Atención: Contenido exclusivo de DesarrolloWeb.com. No reproducir. Copyright.
El objetivo de este artículo es terminar con las explicaciones y demostración de uso del framework CSS 960 Grid System. En pasados artículos ya explicamos qué es 960 Grid System y comenzamos a crear un diseño de muestra que hemos maquetado paso a paso, en varios artículos del Manual de maquetación web con CSS y 960 Grid.

El diseño de la web que estamos maquetando se puede ver aquí. En artículos anteriores hemos podido llegar hasta este punto. Ahora nos queda maquetar la parte final del cuerpo de la página y además, vamos a crear un pie de página para completar nuestro ejercicio de diseño web. Si lo deseas, puedes ver el aspecto final que tendrá el ejemplo que estamos construyendo.

Además, para ilustrar de una manera gráfica y visual a los lectores de DesarrolloWeb.com, hemos publicado todo el proceso de maquetación en vídeo, lo que esperamos sirva para que esta práctica de diseño web se pueda entender por cualquier persona. Al final de este artículo veréis el vídeo de esta última etapa, que también contiene muchas explicaciones que serán sin duda útiles para entender cómo se ha realizado este ejemplo de maquetación web.

Parte final del cuerpo de la página

La parte final del cuerpo la vamos a colocar en el contenedor general del cuerpo (que habíamos colocado antes con un DIV con la clase CSS container_12. Ver el anterior artículo). En ella debemos colocar un titular, y más abajo 3 contenedores para 3 recuadros distintos. El titular lo colocamos ocupando todo el ancho disponible, pues es el único integrante de una fila, en una caja grid_12. Crearemos luego las divisiones para colocar los 3 recuadros de abajo, en DIV con clases CSS grid_3, grid_3 y grid_6. Y recordemos que después de cada fila hay que colocar un DIV con class="clear".

El esquema principal sería el siguiente:

<div class="grid_12">
   Titular que ocupa todo el ancho disponible.
</div>
<div class="clear"></div>

<div class="grid_3">
   Primera caja del fin del cuerpo, anchura de 3 columnas.
</div>
<div class="grid_3">
   Segunda caja del fin de cuerpo, con anchura de 3 columnas.
</div>
<div class="grid_6">
   Tercera caja, con anchura de 6 columnas.
</div>
<div class="clear"></div>

Con esta estructura conseguimos que el framework 960 Grid System cree unos espacios como los que necesitábamos. Ahora se trata de introducir contenidos en esos espacios para conseguir el diseño de cajas que habíamos planeado en Photoshop.

Dentro de las divisiones creadas con 960 grid colocamos a su vez otras divisiones para albergar los distintos recuadros. Esas partes me las voy a saltar en este texto, pero podéis ver cómo se crean en el vídeo que acompaña al artículo. Pero lo que sí quiero decir es que todos los estilos para formatear estas cajas se deben colocar, no en las capas que tienen class grid_x, sino en los DIV que metemos dentro de estas.

Maquetamos el pie de página

Al final de este diseño debemos colocar un pie. En el diseño que habíamos hecho con Photoshop no llegamos a definir el aspecto y los contenidos del pie, pero nosotros vamos a crear uno sobre la marcha para que nuestra página quede completa.

Para empezar, hemos decidido colocar el pie en un nuevo contenedor con class="container_12", pues le queremos asignar estilos distintos de los que tiene el cuerpo de la página.

Luego, vamos a crear dos divisiones en el pie, una con 8 columnas de anchura y otra con 4 columnas. Y para acabar esta fila el ya típico DIV con class="clear". La estructura será la siguiente:

<div class="container_12" id="pie">
   <div class="grid_8">
      Enlaces del pie
   </div>
   <div class="grid_4">
      Logotipo del pie
   </div>
   
   <div class="clear"></div>
</div>

En la división de 8 columnas colocaremos los enlaces del pie de página y en la parte con 4 columnas de anchura colocaremos un logotipo del sitio web. Para ver cómo asignar estilos a estos dos elementos, os referimos al vídeo, donde lo podréis ver todo con detalle.

CSS y XHTML completos de esta última parte del diseño

Ahora voy a colocar el código HTML de esta última parte del diseño, para que se vea no sólo la estructura de cajas conseguida con 960 Grid System, sino también las etiquetas que utilizamos para maquetar nuestro ejemplo.

La última parte del cuerpo:

<div class="container_12" id="cuerpo">
   
   Este primer DIV abre el cuerpo. Pero aquí falta todo el código de la primera parte del cuerpo que vimos en el artículo anterior.

   <div class="grid_12">
      <div class="titlateral">
      <img src="images/tit-secciones-detalle.png" width="266" height="25" alt="Secciones al detalle" />
      </div>
   </div>
   
   <div class="clear"></div>
   
   <div class="grid_3">
      <div class="titcaja2"><img src="images/tit-noticias.png" width="96" height="15" alt="Noticias" /></div>
      <div class="cuerpocaja2">
      <div class="cuerponoticias">
      + <a href="#">Título de una noticia</a>
      <br />
      + <a href="#">Otro título de prueba</a>
      <br />
      + <a href="#">Más cosas de interés...</a>
      <br />
      + <a href="#">La última noticia</a>
      <br />
      [<a href="#">...</a>]
      </div>
      </div>
   </div>
   <div class="grid_3">
      <div class="titcaja2"><img src="images/tit-otrasecc.png" width="148" height="15" alt="Otra sección" /></div>
      <div class="cuerpocaja2">
         <div class="otrasecciontit"><a href="#">Título de una noticia</a></div>
         <div class="otraseccioncuerpo">
         Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam enim nulla, condimentum ut, adipiscing in, rutrum ut, neque.
         <br />
         <a href="#">Ver más</a>.</div>
      </div>
   </div>
   <div class="grid_6">
      <div class="titcaja2"><img src="images/tit-comunidad.png" width="133" height="15" alt="Comunidad" /></div>
      <div class="cuerpocaja2 cajacomunidad">
      <img src="images/comunidad.jpg" width="452" height="138" alt="" />
      </div>
   </div>
   
   <div class="clear"></div>
</div>

Y ahora muestro el código completo del pie de página.

<div class="container_12" id="pie">
   <div class="grid_8">
      <div id="enlacespie">
      <a href="#">Portada</a> | <a href="#">Acerca de</a> | <a href="#">Contacto</a> | <a href="#">Copyright</a>
      </div>
   </div>
   <div class="grid_4">
      <div id="logopie">
         <img src="images/logopie.png" width="286" height="20" alt="Diseño desde cero" />
      </div>
   </div>
   
   <div class="clear"></div>
</div>

Los estilos CSS que hemos definido para conseguir que estos contenidos se muestren como queríamos son los siguientes:

.titcaja2{
   margin: 10px 0 0 3px;
}

.cuerponoticias{
   line-height: 20pt;
}
.otrasecciontit{
   margin-bottom: 3px;
   font-weight: bold;
}
.cuerpocaja2{
   border: 2px solid #929191;
   padding: 10px;
}
.cajacomunidad{
   background-color: #333333;
   padding-right: 0px;
   padding-left: 2px;
}
#enlacespie{
   font-size: 8pt;
   margin: 6px 0 10px 0;
}
#enlacespie a{
   color: #fff;
}
#logopie{
   margin: 8px 0 10px 10px;
}
#pie{
   background-color: #260505;
}

El resultado final de este diseño lo podemos ver en una página aparte.

Vídeo del final de la maquetación CSS

Y ahora os dejamos con el vídeo explicado paso a paso para terminar esta práctica de diseño web. Son casi 50 minutos intensivos de maquetación y aplicación de estilos CSS. Esperamos que os guste y que os conteste todas las dudas que puedan haber quedado al leer las anteriores líneas.


Este videotutorial se puede ver también en vídeo publicado en el sitio de Youtube:

Si lo deseas, puedes ver una práctica similar en vídeo, pero con el framework Blueprint.

Compartir en redes sociales

MANUAL: Maquetación CSS con 960 Grid System
Maquetación CSS con 960 Grid System, Parte II
Comentarios
Enviar un comentario al artículo
Fueron enviados 23 comentarios al artículo
23 comentarios revisados:

Elfowan
Gracias
28/6/2009
Considero que todos los articulos sobre el Framework 960 grid han sido super instructivos, y los videos explicativos me han parecido bastante claros y concisos, además me ha gustado que se muestren en el video los fallos, y como corregirlos.
Gracias por todos estos articulos.

paco_ba...
Estos Videos son excelentes
02/7/2009
Muchas Gracias por estos videos, realmente me gusto mucho la serie de videos me aclaro mucho la forma de trabajar con este Framework de 360, sigan asi, saludos.

sergio_...
magnifico
03/7/2009
magnifico el tutorial, no le veia mucho sentido al principio pero creo que realmente se puede ganar algo de tiempo y claridad, probare a usarlo ¡¡¡¡¡

Jashk
Exelente ejemplo
03/7/2009
No creo que el tutorial pudiese ser más claro de lo que fue.

Muy recomendable sobre todo para administrar el contenido dentro del diseño.
chido
Por: zarate
07/7/2009
esta muy bien la informacion dan buenos tips para diseño web y programacion web me gustaria q explicaran diseño en photoshop seria chido para imagenss trasnparentes en las aplicaciones web .
Artigos muito bons
Por: Safarix
09/7/2009
Os artigos estão muito bons. Estava com algumas dificuldades em entender o grid 960, mas graças aos vossos exemplos consegui. Muito obrigado.

friedl_...
MUY BUENO!!!
11/7/2009
Muy muy muy bueno el video tutorial . me gustaria ver otros ejemplos de maquetacion un poquito mas ... para aprender algunos trucos extras ,sobre maquetacion...pues me apasiona y aun soy nuevo en esto de maquetar webs
GRACIAS!!!!

eugim
Por donde queréis que continuemos?
16/7/2009
Hola!

Ante todo, muchísimas gracias por vuestros comentarios! de verdad que es una motivación muy especial encontrar que nuestro trabajo vale la pena y que hay personas a las que les sirve.

Yo había pensado en dejar esta línea de artículos por aquí, pero si me sugerís otros temas que os gustaría ver sobre la maquetación CSS, me parecería interesante para continuar. Ya veo que hay algunas ideas, como la utilización de imágenes transparentes, pero cualquier propuesta adicional será bien recibida.

Gracias y hasta pronto!

claudio_...
No se ven los videos
02/8/2009
Muchas Gracias por los artículos, era uno de los principales inconvenientes que tenia, el poder maquetar poniendo cada cosa en su lugar con estos artículos he podido comprender mejor y aplicar lo enseñado acá.

Solo que en estos momentos no tengo acceso a los videos, no se ven en la página, yo utilizo Iceweasel en Debian, será ese el inconveniente?.

Me pueden decir donde conseguir los videos.

Muchas Gracias y Un cordial saludo
Deseo ver los videos!
Por: Mateo
16/8/2009
Quiero ver los videos pero Vimeo me informa que ya se han eliminado, sería bueno que trataran los bordes redondeados de los divs... Saludos..

eugim
Los vídeos nos los borraron, pero los hemos restaurado ya
21/8/2009
Este videotutorial, con otros vídeos que teníamos publicados en Vimeo fueron borrados por los administradores de ese sitio web, pensando que eran contenido comercial. Es un error que han tenido los de Vimeo, pues nada más lejos de la realidad. En verdad no es contenido comercial ni nada de eso, porque están publicados en abierto y se acceden sin pago alguno. En cualquier caso, en DailyMotion nos apoyan permitiendo publicar estos videotutoriales, que hemos recuperado y se encuentran ya a disposición de todos los interesados.
Gracias por el tutorial y el videotutorial
Por: Turianet
11/9/2009
Hola.
Agradecer a Eugin este videotutorial y el manual.
Aunque me dedico a esto es bueno ver como lo hacen los demás esto te enseña mucho y ayuda a mejorar.
Yo he realizado un rediseño de mi web http://turianet.com/rediseyo/turianet.jpg (esto solo es el gráfico, aunque ya he enmaquetado con css).
Mi fuerte es más la programación en php, pero esto me ha ayudado en la parte de diseño....
En breve tendré la web rediseñada, pero con cakePhp.
Gracias por vuestra ayuda.
Haced un listado de Errores
Por: Paco Rey
23/9/2009
Me pareceria una exelente y util forma de ramatar con toda esta exelente guia, si posteais un anexo o articulo con una especie de referencia de los errores mas comunes al utilizar 960GS, pq aveces mi caso me lio un poco al deectar las fallas y creo que esto a parte de ayudarme a mi, ayudaria a uno que otro despistado mas.


Gracias y saludos

isanvi
Vistas distintas
04/12/2009
Porque en Ie se ve distinto que en Mozilla?
En IE se ve como yo quiero sin embargo en mozilla no
Tengo al principio del pagina lo siguiente:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
Excelente Video
Por: Luis C
26/12/2009
Sin duda un excelente tutorial. Buen trabajo. He aprendido mucho acerca del 960!

mikem33
Problema con class "clear"
09/1/2010
Hola Eugim, vengo a pedirte ayuda después de darle un montón de vueltas al tema... Tengo el mismo problema que tú en el vídeo con el tema de los class "clear" a la hora de realizar el pie de la página... el problema es que SÍ que tengo puestos los <div class="clear"></div> y sigue sin aparecerme el color de fondo del pie...

A la página podéis acceder desde aquí: "http://www.mikemsite.com/piesfelices/".

Y el código es el siguiente:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Pies Felices</title>

<link rel="STYLESHEET" type="text/css" href="css/style.css" />
<link rel="STYLESHEET" type="text/css" href="css/960.css" />
<link rel="STYLESHEET" type="text/css" href="css/reset.css" />
<link rel="STYLESHEET" type="text/css" href="css/text.css" />
</head>

<body>

<div id="header" class="container_16">
<div id="logo" class="grid_7 suffix_1">
<img src="images/logo.png" width="406" height="112" alt="Pies Felices" />
</div>
<div id="nav" class="grid_8">
<ul>
<li><a href="#" title="Acerca de">Acerca de</a></li>
<li><a href="#" title="Contacto">Contacto</a></li>
<li><a href="#" title="Articulos">Artículos</a></li>
<li><a href="#" title="Servicios">Servicios</a></li>
<li><a href="#" title="Inicio" class="current_short">Inicio</a></li>
</ul>
</div>

<div id="idioma">
<ul>
<li><a href="#" title="Deutsch"><img src="images/deutsch.gif" width="36" height="18" alt="Deutsch" /></a></li>
<li><a href="#" title="English"><img src="images/english.gif" width="36" height="18" alt="English" /></a></li>
<li><a href="#" title="Català"><img src="images/catala.gif" width="36" height="18" alt="Català" /></a></li>
</ul>
</div>
<div class="clear"></div>

<div id="imagen_header" class="grid_16">
<img src="images/header.png" width="960" height="210" alt="main_image" />
</div>
</div>

<div class="container_16">
<div id="content" class="grid_11 suffix_1">
<h1>Reflexología Podal</h1>
<p> ¿A quién no le gusta recibir un masaje?
<p>Los de reflexologia podal te encantarán, suelen realizarse en los pies y, además de relajarnos, son excelentes para
mantener el bienestar y prevenir todo tipo de dolencias.</p>

<p>¡Decídete a prestar un poco de atención a tus pies, veras como todo tu cuerpo se sentirá mejor!</p>

<p>Es una terapia natural que consiste en aplicar un masaje sobre determinadas zonas de los pies. Ahí tenemos unos
puntos reflejos que corresponden a cada órgano o parte del cuerpo. Cuando existe un desequilibrio, estos puntos
se vuelven dolorosos al hacer presión sobre ellos, indicando entonces un trastorno en el órgano que reflejan.
Problemas de estomago, riñones, hígado, bazo, páncreas, se puede aliviar con la reflexologia podal.</p>

<p>?Divertida y eficaz para todos?</p>

<p>La reflexologia podal es apta para todo el mundo, e ideal para los más pequeños y también para los mas mayores .
El masaje en los pies estimula las defensas (sistema inmunológico) y alivia dolencias tan comunes como el estreñimiento, dolores de cabeza,
dolencias de espalda, incontinencia, trastornos del sueño, mejora la circulación en el organismo, colabora en la eliminación de toxinas,
también en problemas de retención de líquidos, ayuda a aliviar el estrés y la tensión (sistema nervioso) etc.</p>

<p>Pero no es necesario que estén enfermos para que lo disfruten, puede ser un juego que al mismo tiempo les
ayuda a estimular su energía y estrechar lazos familiares.
Contribuye al bienestar general del cuerpo, y nos hará conscientes de lo importantes que son los pies para
nuestro desarrollo diario ya que nuestra andadura por la vida se la debemos a ellos, cuidemos de ellos como se
merecen.</p>

<p>La reflexologia les hará ver la vida de un modo más relajado.</p>
</div>
<div id="sidebar" class="grid_4">
<div class="artret">
<img src="images/sidebar-tit.gif" width="240" height="35" alt="Artículos Recientes" />
<ul>
<li><a href="#">-Funcionamiento de la Reflexologia Podal</a></li>
<li><a href="#">-Yoga y Salud</a></li>
<li><a href="#">-Yoga para Niños</a></li>
<li><a href="#">-Yoga para la Tercera Edad</a></li>
<li><a href="#">-Yoga y embarazo</a></li>
</ul>
</div>
<div class="links">
<img src="images/sidebar-tit2.gif" width="240" height="35" alt="Enlaces" />
<ul>
<li><a href="#">-Ramiro Calle</a></li>
<li><a href="#">-Orenda - Centro de Terapias</a></li>
<li><a href="#">-Carmen Benito</a></li>
<li><a href="#">-Portal Turístico Denia</a></li>
<li><a href="#">-Ayuntamiento de Denia</a></li>
<li><a href="#">-Photom</a></li>
<li><a href="#">-Salud Alma Librería</a></li>
</ul>
</div>
</div>
<div class="clear"></div>
</div>

<div id="footer" class="container_16">
<div class="grid_12">
<div id="izq">
<h2>Juanma Toledo Buigues</h2>
<p>Técnico Especialista en Reflexología Podal</p>
<p>pies.felices@hotmail.es</p>
<p>+34 696 33 20 30</p>
</div>
</div>
<div class="grid_4">
<div id="der">
<p>2009 &copy; <a href="#">XHTML</a> | <a href="#">CSS</a> | <a href="#">Firefox</a></p>
<p><a href="http://www.piesfelicesdenia.com" title="Pies Felices">Pies Felices</a> está diseñado por</p>
<p><a href="http://www.mikemsite.com/wordpress/">Miguel Morera Ribes</a></p>
</div>
</div>
<div class="clear"></div>
</div>

</body>
</html>

La hoja de estilos propia es esta:

/*CSS Document*/
/*Comencen els estils de la pàgina*/

body{
background-color: #fff;
}
#content{
background: #fff url(../images/fondo-content.png) no-repeat;
margin:0 67px 10px 10px;
padding:0;
}
#content p{
font-family:Arial;
font-size:11pt;
margin-bottom:10px;
}
#content h1{
font-size:18pt;
font-weight:bold;
margin-bottom:10px;
}
#header{
background: #fff url(../images/fondo-header.gif) repeat-x;
}
#logo img{
margin:0;
padding: 5px 0 0 0;
}
#imagen_header{
margin:0 0 20px 0;
padding:0;
}
#idioma{
margin:0;
}
#idioma ul{
float:right;
list-style: none;
margin:21px 0 9px 0;
padding:0;
}
#idioma ul li{
float:right;
margin:0 7px 0 0;
padding:0;
}
#idioma ul li a{
float:right;
margin:0;
padding:0;

}
#nav ul {
text-align:center;
padding:0;
margin:0;
list-style: none;
float: right;
}

#nav ul li {
float: right;
display: inline; /*IE6 HACK*/
margin: 0 10px 0 0px;
padding: 55px 0 0 0;
}

#nav ul li a {
background: url(../images/long-button.png) no-repeat;
text-decoration: none;
height:24px;
width:80px;
float:right;
color: #fff;
cursor: pointer;
font-size: 11pt;
font-family: "Arial", Helvetica, sans-serif;
font-weight: bold;
}
#nav ul li a.short {
background: url(../images/short-button.png) no-repeat;
width:60px;
}
#nav ul li a.current_short {
background: url(../images/short-button-hover.png) no-repeat;
width:60px;
}
#nav ul li a.current_short:hover{
background: url(../images/short-button-hover.png) no-repeat;
width:60px;
}
#nav ul li a.current_long{
background: url(../images/long-button-hover.png) no-repeat;
}
#nav ul li a:hover{
background: url(../images/long-button-hover.png) no-repeat;
}
#sidebar{
float:right;
width:241px;
margin:0;
padding:0;
}
.artret{
border: #a81b2b 1px solid;
margin: 0 0 20px 0;
padding:0;
}
.artret ul{
margin: 15px 15px 20px 20px;
padding:0;
list-style:none;
}
.artret ul li{
margin:5px 0 0 0;
padding:0;
}
.artret ul li a{
font-size:8pt;
text-decoration:underline;
color: #ff6c06;
cursor:pointer;
margin:0;
padding:0;
}
.links{
border: #a81b2b 1px solid;
margin:0;
padding:0;
}
.links ul{
margin: 15px 15px 20px 20px;
padding:0;
list-style:none;
}
.links ul li{
margin:5px 0 0 0;
padding:0;
}
.links ul li a{
font-size:8pt;
text-decoration:underline;
color: #ff6c06;
cursor:pointer;
margin:0;
padding:0;
}
#footer{
background-color:#fff;
}
#footer p{
margin-bottom:5px;
}
#footer h2{
color:#870512;
font-size:13pt;
margin:10px 0 5px 0;
}
#footer a{
color:#870512;
}
#izq{
font-size:9pt;
margin: 6px 0 10px 0;
}
#der{
font-size:9pt;
margin: 20px 0 10px 0;
}

Espero tu respuesta. Gracias de antemano.

malo363...
Gracias
29/3/2010
eugim la neta carnal te volaste la barda con este videotutorial, estoy iniciando en este mundo del diseño web y me habia calentado mucho la cabeza con algunas cosas que tu aki pusiste tan facil con la maquetacion.
Gracias por el aporte y sigue subiendo videos como este que para novatos como yo estan exelentes
Felicitaciones
Por: Caligrama
19/5/2010
Excelente tutorial de los mejores que he visto. Gracias por compartir lo que sabes. Ahora si siento que estoy progresando en entender este rollo.

pedro_o...
Excelente
01/7/2010
No tenia idea del manejo de estas herramientas, eres una persona espectacular y quiero aprovechar tus enseñansas, gracias. Me gustaria conocer el manejo de formularios con esta técnica de ser posible. De nuevo gracias y salu2
960 pixeles de ancho?
Por: mabel
04/7/2010
Hola! en 1ra, felicitaciones por los tutoriales, son excelentes! gracias por aportar tanto conocimiento!

Ahora, tengo una pregunta. Yo estaba diseñando mi web tranquilamente cuando me topé con el 960 grid e intente acoplarlo a mi diseño, pero me di cuenta que no mide 960 pixeles de ancho, lo cual me imagino es el principio de todo - por aquello del 1024- y cuando lo acoplo a mi diseño, me deja ese margen en ambos lado que no deseo. Y por otra parte, en la maquetación de desarrollo web, que no está hecha en 960 grid, no deja ningun margen por ambos lados, que es lo que me gustaría lograr.

para acabar pronto... es posible editar el css del 960 para hacerlo del ancho que no deje margenes? y cual sería esta medida? pues yo pensaba que era 955 pxl, pero mido la ventana de desarrollo web y me salen 1000 px!! saben cual es la medida ideal para que no salga scroll ni margenes a los lados, y que el diseño abarque todo el ancho?

muchisimas gracias por su respuesta, y es que esta medida jamas la he sabido bien, unos me dicen 955, otros 960, otros 1000... y el 960 grid mide realmente 940 de ancho!

gracias :)

eugim
Anchura definitiva para un sitio web????
07/9/2010
Hola!

En 960 Grid System se utiliza una anchura de 960 píxeles, pero en otros frameworks CSS, como Blueprint, se utiliza una anchura de 950 píxeles. Nosotros en DesarrolloWeb.com, en el diseño que tenemos en el momento de escribir este artículo, utilizamos una anchura de 1000 píxeles. Además, otras personas prefieren páginas fluidas que se adapten a la anchura de la ventana del navegador de cada usuario.

Todo esto es relativo y pertenece a las decisiones de cada desarrollador. Todos, por el momento, hacemos diseños que ocupen menos que los 1024 píxeles de la definición de pantalla más corriente en este momento. De esos píxeles tenemos que descontar el espacio de las barras de desplazamiento, por lo que, por mucho que apuremos el espacio, tenemos que ocupar menos de esos 1024.

En DesarrolloWeb.com utilizamos los 1000 píxeles de anchura para apurar al máximo el espacio disponible. Nosotros no utilizamos un framework CSS para nuestro diseño, porque lo maquetamos con CSS con nuestras propias clases. Realmente os admito que ni siquiera conocía los frameworks CSS cuando nos pusimos a rediseñar el sitio por última vez y si los conocía, no los había puesto en funcionamiento nunca.

Pero en relación a los tamaños, yo creo que la mayoría de los casos no hará falta ser tan exactos. y con anchuras de 950-960 píxeles la verdad es que da espacio de sobra para todo.

Además, para el que lo desee, en Blueprint (el framework CSS que estamos estudiando para publicar un manual en DesarrolloWeb.com, del que ya llevamos bastantes artículos), os comento que existen herramientas para poder alterar la anchura de vuestros desarrollos.

Así pues, trabajar con las anchuras que mejor os vengan, sin preocuparos por lo que estén haciendo otros. Si os gusta 960 Grid System (que la verdad es que facilita el trabajo bastante) tendréis que adaptaros a esa anchura de página (960 píxeles), que yo veo bastante válida.

Imperat...
Excelente Artículo
16/8/2011
Muchas gracias por este artículo tan explícito y facil de aprender sigue asi

daniell...
gracias por articulo maquetacion css 960gs
29/8/2011
que decir.... son las 3 de la mañana y no logro dormir, todos estos tutoriales y articulos tan didacticos me han quitado el sueño. muchas gracias por mostrar que aun cuando puede ser muy dificil diseñar paginas web, no es imposible si le ponemos empeño.
no nos abandonen...
Enviar un comentario al artículo

Manuales relacionados
Maquetación CSS con 960 Grid System
(8 artículos)
Ver el índice del manual
Descargar el manual
Categorias relacionadas
El autor
Miguel Angel Alvarez
Director de DesarrolloWeb.com
http://www.desarrolloweb.com
Últimas noticias
Donaciones
Si piensas que te hemos ayudado y merecemos tu apoyo económico...