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

pagina web para moviles

Estas en el tema de pagina web para moviles en el foro de Diseño web en Foros del Web. hola, tengo que diseñar una pagina web en version movil, mas que una pagina es la info de contacto de la empresa, mapa de google, ...
  #1 (permalink)  
Antiguo 02/05/2011, 00:36
Avatar de yonaida  
Fecha de Ingreso: marzo-2011
Ubicación: Barcelona
Mensajes: 123
Antigüedad: 13 años
Puntos: 20
pagina web para moviles

hola, tengo que diseñar una pagina web en version movil, mas que una pagina es la info de contacto de la empresa, mapa de google, y poco mas, en resumen 1 sola pagina.

mi duda es referente a la resolucion de dicha pagina, pues he estado leyendo aqui y los post que hay son antiguos. quiero hacerla xhtml y css sin mucha complicacion.

si alguien por favor me puede sugerir algo, se lo agradezco, pues nunca he diseñado nada para moviles. gracias
__________________
Everybody Else It's Doing It, So Why Can't We?
  #2 (permalink)  
Antiguo 02/05/2011, 02:35
Avatar de jomaruro
Colaborador
 
Fecha de Ingreso: junio-2002
Ubicación: Naboo
Mensajes: 5.442
Antigüedad: 21 años, 8 meses
Puntos: 361
Respuesta: pagina web para moviles

Hola:

Al ser algo tan sencillo, te diría que la maquetaras en % así se adaptará siempre al tamaño y resolución de la pantalla.

Saludos.

  #3 (permalink)  
Antiguo 02/05/2011, 04:21
Avatar de yonaida  
Fecha de Ingreso: marzo-2011
Ubicación: Barcelona
Mensajes: 123
Antigüedad: 13 años
Puntos: 20
Respuesta: pagina web para moviles

eso he pensado pero en el tema de las imagenes y demas pues al variar la resolucion, veo que me pierde calidad o se me desmadra el contenido. pongo aqui el enlace del resultado que quiero de la pagina para moviles.
http://alconza.com/test_movil

he utilizado la pagina http://offermobi.com/page/tools/ que ofrece un emulador de varios moviles (actuales) para emular como se veria la pagina en cada uno de los moviles que elijas. lo dejo como nota por si a alguien le interesa.

este es el codigo css que tengo actualmente:
Código:
*	 {
	margin:0px;		
	padding: 0px;
	}
body {
	margin: 0;
	text-align:center;
	background-color:#fff;	
	font-family: Verdana, Arial, 
                          Helvetica, sans-serif;
}

#contenedor {	
 	margin-top:1% ;   	
	background-color:white;
	text-align:left;
	max-width:440px;
	} 
#contenido{
	margin-left:2%;
	margin-right:2%;
	}
#direccion{
	float:right;
	margin-top:10%;
	font-size:12px;
}
#iconos{
	float:left;
}
#contenido p.texto{
	padding-left: 10%;
	color:blue;
	font-size:12px;	
	margin:2%;
}
#pie p.texto_pie{
	text-align:left;
	font-size:11px;
}
__________________
Everybody Else It's Doing It, So Why Can't We?

Última edición por yonaida; 02/05/2011 a las 04:24 Razón: añadir codigo css
  #4 (permalink)  
Antiguo 04/05/2011, 00:25
Avatar de yonaida  
Fecha de Ingreso: marzo-2011
Ubicación: Barcelona
Mensajes: 123
Antigüedad: 13 años
Puntos: 20
Respuesta: pagina web para moviles

problema resuelto. tal y como indicaba jomaruro hay que trabajar en %
hacer el body y el resto de contenido al 100% incluida las fotos, las letras y todos los divs, por gigante que se vea en el monitor normal es asi como se hace.

aqui dejo el css que utilize y el link de la pagina para que vean el resultado en el movil : http://alconza.com/movil

para comprobar como se ve en la mayoria de resoluciones de moviles actuales,
pueden usar este emulador:
http://offermobi.com/page/tools/ (mobile preview) (compare 4 mobile devide preview)



Código:
*	 {
	margin:0px;		
	padding: 0px;
	}
body {
	width:100%;	
	background-color:#fff;	
	font-family:Verdana, Arial,
				Helvetica, sans-serif;
}
a:link, a:visited, a:active{
	text-decoration: none;
	color:blue;
}
a:hover { color:black; text-decoration:none;}

#contenedor {
	max-width:100%;
	min-width:50%;
 	margin:1% ;   	
	background-color:white;
	text-align:left;	
	} 
#cabecera img.logo{
	width:100%;
}	
#contenido{
	
	margin-left:2%;
	margin-right:2%;
}
#contenido p.direccion{
	text-align:center;	
	font-size:100%;	
}
#iconos img.foto{
	width:100%;	
}
#mapa{	
	margin:1%;
}
#contenido p.texto{
	margin-left:15%;
	color:blue;
	font-size:100%;
}
#pie p.texto_pie{
	text-align:center;
	font-size:80%;
	margin-bottom:1%;
	color:blue;
}
__________________
Everybody Else It's Doing It, So Why Can't We?
  #5 (permalink)  
Antiguo 22/05/2011, 23:19
 
Fecha de Ingreso: abril-2010
Mensajes: 182
Antigüedad: 13 años, 11 meses
Puntos: 8
Respuesta: pagina web para moviles

entonces solo cambiando los tamaños a porcentajes se va a ajustar a los diferentes dispositivos moviles? y asi me qdaria mi version web????
  #6 (permalink)  
Antiguo 24/05/2011, 01:57
Avatar de yonaida  
Fecha de Ingreso: marzo-2011
Ubicación: Barcelona
Mensajes: 123
Antigüedad: 13 años
Puntos: 20
Respuesta: pagina web para moviles

exactamente, tienes que trabajar con un body en 100% y todo lo demas en % nada de pixeles.
veras que la web se ve enorme en el pc pero en el movil ya se adapta adecuadamente.
la cuestion de la pagina web es que no deberias meter tooodo el contenido de una web normal, pues igualmente se veria todo pequeño, la idea es reducir el contenido poniendo lo mas importante, y añadir tambien un enlace para que pueda ver la pagina normal, si asi lo prefiere el usuario.

suerte y saludos.
__________________
Everybody Else It's Doing It, So Why Can't We?

Etiquetas: moviles
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 08:03.