Diseñar páginas web para móviles

Kal-El

Kal-El

LANero Kryptoniano
22 Sep 2005
11,869
Hola a todos los LANeros

He diseñado una página web y debido al masivo uso de móviles para navegar en internet como el iPhone, el BlackBerry, etc, quiero saber como puedo adaptarla para que cuando sea vista en un pc muestre una "versión" del diseño (completa) y cuando se ingrese desde un móvil se vea otra (más sencilla y liviana).

La página es esta, pero todavía no la he subido toda. Maneja consultas en PHP y una galería de imágenes en XML, además de CSS, JS y de pronto algo de Flash.

Muchas gracias por la ayuda.
 
Podría manejarla por directorios, por ejemplo:

Código: 
[url]http://calidomicilios.com/[/url]
[url]http://calidomicilios.com/mobiles[/url]

También por subdominios:

Código: 
[url]http://mobiles.calidomicilios.com/[/url]
 
la forma mas facil es mediante CSS ya que subdominio implicaría duplicar los archivos (la mayoría de las veces)

existe una opcion en CSS que se llama MEDIA
http://www.w3.org/TR/CSS2/media.html

cuando se quiere especificar el tipo de dispositivo donde se muestra la pagina web, se agrega esta opción bien sea al link al stylesheet

<LINK REL="stylesheet" TYPE="text/css" MEDIA="handheld" HREF="foo.css">

o se utiliza el @media dentro del CSS

@media handheld {
body { font-size: 10pt }
}

handheld
Intended for handheld devices (typically small screen, limited bandwidth).
 
[sC+].ADSerna dijo:
...Maneja consultas en PHP y una galería de imágenes en XML, además de CSS, JS y de pronto algo de Flash...
Haz clic para expandir...
Ciao

Te vas a encontrar que el 90% de los móviles no leen Js y Flash, por otro lado ten en cuenta que la resolución de los browsers de movil va desde los 240 pixel de ancho, por tanto te aconsejo hacer la página a lo alto y con links (menus) en href al principio y a final.

Con el Css hay que ir con mucho cuidado porque no lo cumple al 100% nadie y cada navegador coge las instrucciones que le interesa

Lo que dice arthvrian de los contenidos duplicados és verdad, pero cuadrar una pagina web en 240 x 295 pixel cuesta, creo que si pretendes simutanear las dos cosas, tendrás que pensartelo bastante antes de empezar, si te puede dar una idea, mirate mis webs y compara la versión para Pc y la versión para móvil
 
Hola, lo mejor es por CSS... de hecho en el foro de CSS habia puesto algo sobre esto, te dejo esa parte...

Detectando el iPhone y el iPad con CSS

Se pueden detectar los distintos dispositivos y navegadores de muchas maneras (a nivel servidor con PHP, a nivel servidor con .htaccess, a nivel cliente con Javascript…) pero una muy efectiva es usar CSS.

A continuación las reglas CSS para usar distintos archivos de estilos según que dispositivo:
Código: 
 <link rel=”stylesheet” media=”all and (max-device-width: 480px)” href=”iphone.css”>
    <link rel=”stylesheet” media=”all and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait)” href=”ipad-vertical.css”>
    <link rel=”stylesheet” media=”all and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape)” href=”ipad-horizontal.css”>
    <link rel=”stylesheet” media=”all and (min-device-width: 1025px)” href=”ipad-horizontal.css”>
Haz clic para expandir...

si tienes alguna duda sobre css pasate por aca http://www.laneros.com/showthread.php?t=186615 e intentaremos resolverlo... saludos!
 
Gracias a todos por la ayuda... Me gusta la idea de hacerlo con un subdominio así toque hacer una "versión" de la página para móviles. Me parece la mejor opción ya que me dá más libertad de trabajar y no me pone a cuadrar la página para ambas opciones.

Ahora, alguien tiene un JS o una rutina en PHP que me indique desde qué tipo de dispositivo se está accediendo a la página y así mismo enviar al usuario a la vista correspondiente? O sea, si el usuario ingresa a la página desde un PC me deje en http://calidomicilios.com y si está ingresando desde un móvil me mande a http://m.calidomicilios.com

------

Encontré esta página muy buena en donde se testea las páginas que tienen versión de móvil y muestra como se puede visualizar en varios equipos:

mobiReady
 
[sC+].ADSerna dijo:
Gracias a todos por la ayuda... Me gusta la idea de hacerlo con un subdominio así toque hacer una "versión" de la página para móviles. Me parece la mejor opción ya que me dá más libertad de trabajar y no me pone a cuadrar la página para ambas opciones.

Ahora, alguien tiene un JS o una rutina en PHP que me indique desde qué tipo de dispositivo se está accediendo a la página y así mismo enviar al usuario a la vista correspondiente? O sea, si el usuario ingresa a la página desde un PC me deje en http://calidomicilios.com y si está ingresando desde un móvil me mande a http://m.calidomicilios.com
Haz clic para expandir...

creo que te estas complicando la vida, ya que si optas por crear todo nuevamente, entonces te tocaria crear el php... y ademas el css...

Si lo haces como te sugerimos, solo tienes que crear un stylecel.css (por decir un nombre) y nada mas. asi no te toca duplicar la programacion...

recuerda que estamos solo hablando de estilo... es lo bueno del css.. puedes crear tantos css como quieras que no afectara el funcionamiento... solo la parte visual... que es lo que necesitas...

bueno es solo mi opinion, saludos, y mucha suerte con eso!
 
eL-pEkE dijo:
...Si lo haces como te sugerimos, solo tienes que crear un stylecel.css (por decir un nombre) y nada mas. asi no te toca duplicar la programacion...
Haz clic para expandir...
Ciao

La programación la va a tener que aumentar de todos modos, porque no ès lo mismo la grafica de una pagina para un ipad de 1024 pixels, que para un iphone de 320 px, o para otro celular de 240 pixel, sin contar que tampoco és lo mismo para un browser safari, para un miniopera o para un windows mobile

Por lo que he leido, tengo la impresión que no has hecho páginas para telefonos moviles, en éstos no todo se soluciona con el css, sino que para muchos telefonos moviles el 90% de las propiedades css no sirve para nada porque no las interpretan (1), la solución del subdominio és una buena solución, aunque no la unica, porque (después de dos webs para telefonos móviles que he hecho) me he encontrado que la parte de contenido común para Pc y movil no llega al 33%

(1) por ejemplo, la instrucción <LINK REL="stylesheet" TYPE="text/css" MEDIA="handheld" HREF="foo.css"> que citaba arthvrian, ya te la puedes olvidar, ha quedado obsoleta y ya no la tienen en cuenta

Ciao

En la pagina Detect Mobile User Agents & Browsers podéis encontrar un codigo php personalizable para desviar los distintos user agent
 
Hola!!

La programación la va a tener que aumentar de todos modos, porque no ès lo mismo la grafica de una pagina para un ipad de 1024 pixels, que para un iphone de 320 px, o para otro celular de 240 pixel, sin contar que tampoco és lo mismo para un browser safari, para un miniopera o para un windows mobile
Haz clic para expandir...

pero es que tu mismo lo estas diciendo, la grafica no es la misma para un iphone, ipad etc, la grafica se define en css... no en la programacion.

lo que yo digo es que no debe hacer la programacion de nuevo, pero si crear diferentes templates para las distintas resoluciones de moviles...


Por lo que he leido, tengo la impresión que no has hecho páginas para telefonos moviles, en éstos no todo se soluciona con el css, sino que para muchos telefonos moviles el 90% de las propiedades css no sirve para nada porque no las interpretan (1), la solución del subdominio és una buena solución, aunque no la unica, porque (después de dos webs para telefonos móviles que he hecho) me he encontrado que la parte de contenido común para Pc y movil no llega al 33%
Haz clic para expandir...

no te equivocas, nunca e realizado una web para moviles... hablaba en base a los 11 años que llevo realizando sitios webs normales... porque segun tengo entendido lo que varia en la visualizacion de una web en moviles... son las dimenciones y estilos que se pueden definir en un archivo de estilos.

de todos modos si lo que quiere es hacerlo por php quizas por aqui deba empezar...

Código: 
Description¶

Mobile_Detect is a simple PHP class for easy detection of the most popular mobile devices platforms: Android, Blackberry, Opera Mini, Palm, Windows Mobile, as well as generic ones.
Usage¶

Include and instantiate the class:

include("Mobile_Detect.php");
$detect = new Mobile_Detect();

Check for a specific platform:

if ($detect->isAndroid()) {
    // code to run for the Google Android platform
}

Available methods are isAndroid(), isBlackberry(), isOpera(), isPalm(), isWindows(), isGeneric(). Alternatively, if you are only interested in checking to see if the user is using a mobile device, without caring for specific platform:

if ($detect->isMobile()) {
    // any mobile platform
}

fuente: http://code.google.com/p/php-mobile-detect/

pero bueno, de eso se trata todo esto, que aprendamos de otros... yo nunca he hecho webs para moviles, pero si estoy errado en algo que e dicho pido disculpas y seria bueno que gente que lleve experiencia en este campo hable al respecto..
 

Los últimos mensajes

Los últimos temas

Arriba Pie
Atrás