Orientación - maquetación pagina web.

helacer · #1 (**permalink**) 11/07/2011, 10:54

Buenas tardes.

Estoy diseñando mi primera web desde cero. Lo que estoy haceindo es generando el diseño completo del home en photoshop.

Estoy un poco enredado con la maquetación... e visto algunos tutos por hay pero son muy basicos o se si es que e buscado mal. Quisiera que me orientaran o si conocen un buen tuto o video tuto pro favor me comentaran donde encotrnarlo apra lo siguiente:

La forma adecuada de partir adecuadamente el "dibujo" o diseño de la página en photoshop
Como dejar las partes de los textos y/o impagenes dinámicas editable "de esto tengo idea pero pues si en algun lado lo explican mucho mejor"
Maquetar conrrectamente ese diseño en divs.

Agradezco cualquier aydua o aporte que me puedan brindar con este tema.

Saludos,

Uncontroled_Duck · #2 (**permalink**) 11/07/2011, 15:05

Sobre el tema de como funcionan los divs con css puedes echar un vistazo a esto.

Es muy básico, pero te despejará muchas dudas en cuando a colocación del los div anidados.
http://www.araudi.net/migracion/migr...sin_dolor.html

Consejo personal para esto, un libro... por lo menos para los conceptos básicos. Después las dudas mas concretas, o problemas que surjan podrás resolverlas en el foro o con Google.

Saludos,

YeisonSoto · #3 (**permalink**) 11/07/2011, 16:36

Amigo aunque el diseñar la interfaz de una pagina web con photoshop resulta muy facil , a la larga va a ser muy tedioso comprender.

Algunos inconvenientes son:

- Genera mucho codigo
- Resulta algo dificil su comprension
- Aumenta el tiempo de carga de la pagna

Puedes leer mas aqui

Lo mejor es que utilices los div para el diseño de tu pagina

Un pequeño ejemplo:

Código HTML:

<html>
<head>

<title>pagina con div</title>


<style type="text/css">

#contenedor {	
		width:1000px;	
		height:800px;		
}

#encabezado {		
		background-color:#000;	
		width:100%;
		height:20%;			
}


#columna_izq{
	float:left;
	background-color:#09F;
	width:20%;
	height:70%;	
}
	
#columna_der{
	float:right;
	background-color:#09F;
	width:20%;
	height:70%;	
	}	

#cuerpo {	
		background-color:#999;	
		width:100%;
		height:70%;			
}


#pie{
	    background-color:#000;	
		width:100%;
		height:10%;			
	}

</style>

</head>

<body>

<div id="contenedor">


    <div id="encabezado">
     <h1>ENCABEZADO</h1>
    </div>


    <div id="columna_izq">IZQUIERDA</div>
    
    <div id="columna_der">DERECHA</div>
    
    
    <div id="cuerpo">CUERPO</div>
    
    <div id="pie">PIE</div>

</div>

</body>
</html>

sergioar_pyasa · #4 (**permalink**) 11/07/2011, 16:48

Pues hay muy buenos cusros en internte yo te recomiendo en siguiente:
http://miweben30minutos-sergio.blogspot.com/

ZoroRoronoa · #5 (**permalink**) 11/07/2011, 17:03

Cita:

Algunos inconvenientes son:

- Genera mucho codigo
- Resulta algo dificil su comprension
- Aumenta el tiempo de carga de la pagna

OMG, hay algo que se llama accesibilidad web, cada quien se asegura de la calidad y formato del diseño, para no hacerlo tan pesado, si no tienes cuidado, haras tu pagina de 5 GB

No es dificil de comprender y no genera codigo basura, siempre y cuando el codigo lo hagas manual, sera tu ideologia y conocimiento lo que hara tu codigo limpio o tedioso.

-No uses dreamweaver (Este si te genera codigo basura).

Uncontroled_Duck · #6 (**permalink**) 12/07/2011, 00:47

Cita:

Iniciado por ZoroRoronoa

..No uses dreamweaver (Este si te genera codigo basura).

No hay que generalizar ni confundir al usuario ZoroRoronoa!!

Dreamweaver genera "código basura" dependiendo de como se utilice. Llevo utilizandolo varios años y nunca me ha hecho nada de eso...

No es el único, y quizás no sea el mejor, pero no podemos tacharlo de que no funciona correctamente si no lo hemos utilizado de forma adecuada.

Saludos,

helacer · #7 (**permalink**) 12/07/2011, 12:57

gracias a todos por sus respeustas... hare caso uno a uno de sus consejos ....Saludos

lgga · #8 (**permalink**) 12/07/2011, 21:05

Cita:

Iniciado por ZoroRoronoa

OMG, hay algo que se llama accesibilidad web, cada quien se asegura de la calidad y formato del diseño, para no hacerlo tan pesado, si no tienes cuidado, haras tu pagina de 5 GB

No es dificil de comprender y no genera codigo basura, siempre y cuando el codigo lo hagas manual, sera tu ideologia y conocimiento lo que hara tu codigo limpio o tedioso.

-No uses dreamweaver (Este si te genera codigo basura).

Nah tampoco seas exagerado con lo de 5 GB, sé que no lo dices en serio pero tampoco saques ejemplos absurdos. Helacer está preguntando sobre la maquetación nada más, eso obvio no incluye el contenido.

Esta aprendiendo y empezarle a decir "no uses" tal software sólo limita y confunde.

Dremweaver es bueno porque puedes ver el código y el diseño al mismo tiempo, así es más fácil ver si estas haciendo lo que quieres.