Foros del Web » Creando para Internet » Diseño web »

Orientación - maquetación pagina web.

Estas en el tema de Orientación - maquetación pagina web. en el foro de Diseño web en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 11/07/2011, 11:54
 
Fecha de Ingreso: mayo-2006
Ubicación: Bogotá
Mensajes: 2.025
Antigüedad: 10 años, 8 meses
Puntos: 50
Orientación - maquetación pagina web.

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,
  #2 (permalink)  
Antiguo 11/07/2011, 16:05
Avatar de Uncontroled_Duck
Colaborador
 
Fecha de Ingreso: mayo-2011
Ubicación: Málaga [Spain]
Mensajes: 806
Antigüedad: 5 años, 8 meses
Puntos: 261
Respuesta: Orientación - maquetación pagina web.

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,
__________________
Todos agradeceremos que pongas el código en su respectivo Highlight
  #3 (permalink)  
Antiguo 11/07/2011, 17:36
Avatar de YeisonSoto  
Fecha de Ingreso: enero-2011
Ubicación: Cali, Colombia, Colombia
Mensajes: 116
Antigüedad: 6 años
Puntos: 4
De acuerdo Respuesta: Orientación - maquetación pagina web.

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> 
  #4 (permalink)  
Antiguo 11/07/2011, 17:48
 
Fecha de Ingreso: diciembre-2010
Mensajes: 7
Antigüedad: 6 años
Puntos: 0
Respuesta: Orientación - maquetación pagina web.

Pues hay muy buenos cusros en internte yo te recomiendo en siguiente:
http://miweben30minutos-sergio.blogspot.com/
  #5 (permalink)  
Antiguo 11/07/2011, 18:03
Avatar de ZoroRoronoa  
Fecha de Ingreso: marzo-2011
Ubicación: California, USA
Mensajes: 823
Antigüedad: 5 años, 9 meses
Puntos: 116
Respuesta: Orientación - maquetación pagina web.

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).
__________________
Programador jQuery & PHP
  #6 (permalink)  
Antiguo 12/07/2011, 01:47
Avatar de Uncontroled_Duck
Colaborador
 
Fecha de Ingreso: mayo-2011
Ubicación: Málaga [Spain]
Mensajes: 806
Antigüedad: 5 años, 8 meses
Puntos: 261
Respuesta: Orientación - maquetación pagina web.

Cita:
Iniciado por ZoroRoronoa Ver Mensaje
..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,
__________________
Todos agradeceremos que pongas el código en su respectivo Highlight
  #7 (permalink)  
Antiguo 12/07/2011, 13:57
 
Fecha de Ingreso: mayo-2006
Ubicación: Bogotá
Mensajes: 2.025
Antigüedad: 10 años, 8 meses
Puntos: 50
Respuesta: Orientación - maquetación pagina web.

gracias a todos por sus respeustas... hare caso uno a uno de sus consejos ....Saludos
  #8 (permalink)  
Antiguo 12/07/2011, 22:05
Avatar de lgga  
Fecha de Ingreso: octubre-2004
Mensajes: 443
Antigüedad: 12 años, 3 meses
Puntos: 37
Respuesta: Orientación - maquetación pagina web.

Cita:
Iniciado por ZoroRoronoa Ver Mensaje
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.
__________________
Breaking the LAW
TSM

Etiquetas: diseño, photoshop
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 13:58.