La mejor manera de maquetar una web

omarinfinito · #1 (**permalink**) 13/09/2013, 15:01

Hola amigos de FDW, queria ver que opinan ustedes acerca del tema de la estructura de mi web, iniciare un nuevo proyecto, hare el diseño en psd y lo pasare a HTML+ CSS ETC...

Mis webs Anteriores fueron maquetadas con Tablas, pero eh leido que no es recomendable, y queria saber cual es la mejor forma de hacerlo:
Tablas, Divs o cualquier otro elemento

Gracias

pzin · #2 (**permalink**) 13/09/2013, 15:10

Las tablas se deben de usar solamente para una estructura de datos tabulados, que usualmente son números. Hace algunos años, más de diez, la costumbre era hacer webs mediante tablas.

La maquetación debería de hacerse mediante CSS, es decir, usando divs y también, los elementos estructurales de HTML5, como nav, header, section, footer, etc. Funcionan igual que div, pero a diferencia de este, que su significado es solamente una división, tienen un significado más semántico.

omarinfinito · #3 (**permalink**) 13/09/2013, 15:15

Gracias Pzin, la verdad no conozco NADA de html5, pero tendre que averiguar, gracias de nuevo.
Edito: Ya almenos encontre como maquetar, lo demas lo aprendere como los otros lenguajes que Pseudo se (En el transcurso)

omarinfinito · #4 (**permalink**) 13/09/2013, 15:40

Acabo de maquetar una prueba me podrias decir que tal este codigito?

Código CSS:

Ver originalaside {
top:0;
right:0;
position:fixed;
width:15%;
height:100%;
background:blue;
}
aside2 {
top:0;
left:0;
position:fixed;
width:15%;
height:100%;
background:blue;
}
html {
left:15%;
width:70%;
position:absolute;
}
header {
background:lime;
}
nav{
background:orange;
}
section{
background:green;
}
footer{
background:purple;
}

Código HTML5:

Ver original<html lang="es">
<header> <hgroup> <h1>El Blog de Freddie Mercury</h1> <h2>Este Blog es un homenaje a la vida profesional de Freddie Mercury</h2> </hgroup></header><nav> Aquí va la Barra de navegación con sus botones</nav><section> <article>Aquí va un post, con su titulo en h1</article> <article>Aquí va un post, con su titulo en h1</article> <article>Aquí va un post, con su titulo en h1</article></section><aside> Barra lateral con cosas que nadie lee, como cuentas de twitter, facebook, posts anteriores, etc.</aside><aside2> Barra lateral con cosas que nadie lee, como cuentas de twitter, facebook, posts anteriores, etc.</aside2><footer> Pie de página, copyright, avisos legales, etc.</footer>
</html>

PD: Viva queens
PD2: Use todos los valores en % para que fuera lo mas adecuada a la resolucion de la pantalla posible (Responsive si no me equivoco)

pzin · #5 (**permalink**) 13/09/2013, 16:23

Muy mal.

Eso de usar posiciones absolutas para poner cada cosa en un sitio como si fuesen pegatinas que vas pegando en la pantalla es un error que en los últimos años abunda mucho. Según dice Rafael, son cosa de Dreamweaver.

Mírate cómo flotar elementos, a día de hoy es más de la mitad de cómo realizar la maquetación de un sitio.

omarinfinito · #6 (**permalink**) 13/09/2013, 16:31

¿Que me recomiendas para solucionarlo? ¿ponerle fixed?

Mariano_Floyd · #7 (**permalink**) 14/09/2013, 11:05

Usar elementos flotantes, utiliza la propiedad float.

omarinfinito · #8 (**permalink**) 15/09/2013, 17:46

Pero el problema es si usar Position:Fixed o Position: Absolute, o cualquier otra.

ananda · #9 (**permalink**) 15/09/2013, 18:12

Cita:

Iniciado por omarinfinito

Pero el problema es si usar Position:Fixed o Position: Absolute, o cualquier otra.

Has de usar position: relative;

Rafael · #10 (**permalink**) 15/09/2013, 18:32

No, no.

El estructurar una web debería en primer lugar seguir un flujo natural.

Solo al hacer layouts de columnas es cuando se pueden flotar elementos o usar inline-block.

Olvídense de position absolute, hay que usarlo solamente "por expertos", o sea cuando realmente está uno conciente que hace falta, no cuando se cree que es el único recurso.

Position fixed solamente una o dos veces por web, por ejemplo para fijar el scroll de un menú y ya.

¡Position relative hay que usarlo con más cuidado aún que el absolute! este es para hacer pequeños ajustes o para ciertas combinaciones especiales para modificar el flujo.

omarinfinito · #11 (**permalink**) 16/09/2013, 09:50

Gracias a todos, averiguare lo de Inline-block Rafael
Edito: Ya lo hize con inline-block y encerio hace maravillas.