Web a SmartPhones

[rirs]

Buenos días.

Francamente no sé si ésto debería ir aquí. Bueno, la situación es la siguiente:

Estaba buscando como programar páginas desde cero a un teléfono celular, va. Leí y encontré que se usa WML (WAP), me bajé un programa para editar códigos e intenté una prueba, visualicé en un navegador WinWap, pero... entiendo que eso es para celulares pequeños.

Entonces me puse a busar para SmartPhones, pero no encuentro más que páginas que te hacen tu web, y lo que deseo es más bien aprenderlas desde cero. Lo único que encontré por ahí es que algunas manejan Xhtml, o CSS (como ayuda), pero nada más. Así que me encuentro en la dificultad de entenderle. Manipulo lenguajes como el Html, el PHP y algo de Java (soy diseñadora, no programadora, así que intento esforzarme en el campo), pero no encuentro diferenias entre el Xhtml, y el Html, además de que tampoco encuentro algo que me diga que para un SmartPhone hay que respetar ciertas medidas de resolución, o el código que se utiliza en la página que uno visualiza por su computadora y te reenvía, si entras por celular, a la página para celular.

¿Podría alguien informarme un poco?

Gracias de antemano y que tengan un excelente día.

[emprear]

fijate lo que comente en este post

http://www.forosdelweb.com/f4/html-q...5/#post4071085


WML es obsoleto

Saludos

[rirs]

Emprear, muy buenos días.

Primeramente gracias por tu respuesta. Ando revisando y leyendo a ver qué encuentro, aunque me surge la pregunta:

Entiendo lo de las celdas para que te respete diferentes tamaños de las dos páginas que se sugieren en el post, y sobre lo que es el desarrollo en web y los cambios que se han ido efectuando. Y por último entiendo que debo rehacer la página con diferentes características de manera que la navegación sea más amable y menos compleja. Pero no encuentro sobre el código que debo colocarle para que me lo lea como celular. Es decir, ya tengo una página realizada (que contiene mainframes, flash, etc.), bien, debo ahora rehacerla con las diferentes medidas de pantallas, en Xhtml (la mía es html), pero... ¿cómo debe llamarse la primera? ¿También index? ¿Dónde podría informarme para el código que te pide (en la versión pc) para que me envíe a la otra?

Diculpa tanta lata. Llevo ya un rato estancada en el tema y comienzo a frustrarme.

Gracias de antemano, y que tengas un excelente día.

[emprear]

lo ideal para eso es hacer una redirección, es decir, tener 2 archivos (o carpetas, la cosa es diferenciarlos)

ejemplo,
tenes index.html --> que es la version para PC
y tenes

mov.html -- > que es la pagina para móviles

para hacer la redir. podés valerte de esta script
http://detectmobilebrowsers.com/

fijate que viene en versiones para diferentes lenguajes, lo ideal es que uses la de php ó la de .htaccess
Solo tenes que modificar
header('Location: http://tuweb.com/mov.html); poniendo la url de la página para móviles

Saludos

[rirs]

Alo Emprear, muy buenas tardes y felices fiestas antes que nada.

Muchas gracias por tus consejos, estoy trabajando en ello y de hecho me encontrado un sencillo scrip para delimitar las resoluciones del sitio:

body{width:90%;margin:auto;min-width:200px;max-width:700px} (la encontre aquí: http://es.kioskea.net/faq/3040-webmaster-adaptar-una-pagina-web-a-diferentes-resoluciones)

..., es un style que se coloca en las scc. Francamente no me ha parecido malo y es sencillo de usar porque por más que intenté entenderle a las del otro post fondation, cssgrid del cual me comentabas, sólo logré perder tiempo que es con lo que menos cuento por ahora.

Sigo intentando y viendo mañas. Hace unos momentos estaba revisando la página acorde a como me indicabas y hago pruebas visuales desde aquí: http://quirktools.com/screenfly/ aunque cuando la visualizaba en un blackberry real, me aparecía mucho más peque de lo que me visualiza el programa ¿sabrás la razón? Es que leía que alguna resolución adecuada para mover la página sería de 480px que es lo que mide de anchura su página, aunque la que me mostraba como ejemplo mi jefe era como si automáticamente la pantallita se adaptara en la anchura y quedara justa. ¿Habrá alguna aplicación para ello?

Otra cosa que he visto en páginas que te fabrican tu webcel gratuita es que, te colocan el teléfono y a un click puedes comunicarte sin necesidad de ingresar el número manualmente. Disculpa mi ignorancia pero ¿hay alguna programación especial para eso?

De antemano, muchas gracias. Que tengan un excelente inicio de año.

[rirs]

Buenos días.

Ya encontré, leyendo más en su foro, ésta mona formita para ajustar las imágenes acorde a la resolución de pantalla <img src="imagen.gif" width="100%" height="100%"> ..., debo decir que encantadoramente práctico a otras que he visto. Aunque tengo una duda, saliéndo un poco de lo que es móvil: si tengo dividido en dos frames mi página, ¿no se puede estándarizar las divisiones? Es que la página que trabajo se ve bien en monitores normales, pero en las notebooks se empalma.

Bueno, continuando con lo de la página web móvil, sigo haciendo pruebas pero sin descubrir como al colocar un número te marque en el teléfono de manera que al darle click te lo coloque como llamada.

Gracias y que tengan un excelente día.

[rirs]

Buenos días.

Felices fiestas (es más fácil que desglosarlo), espero se la hayan pasado bien.

Bueno, tras hacer pruebas y todo, estoy un poco trabada. Ya encontré cómo hacer la página para teléfonos, para que fotos se acoplen acorde al tamaño de la resolución, pero no logro que el código que pongo en mi index para computadora, reconozca para irse a un teléfono.

Estaba intentando usar este método: http://www.carlos-garcia.es/tutoriales/jquery-mobile.php#detect , pero francamente no entiendo en dónde debo poner el código. ¿Alguién podría explicarme?

Muchas gracias, que tengan un excelente día.

[emprear]

usá la script que indique en
http://www.forosdelweb.com/f4/web-sm...3/#post4074505

funciona perfectamente

SAludos

[rirs]

Buenos días Emprear.

Gracias por tu pronta respuesta.

Sep, lo hice, pero tampoco me funcionó. Me bajé el php que es:

<?php
$useragent=$_SERVER['HTTP_USER_AGENT'];
if(preg_match('/android.+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iem obile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|symbian|treo|up\.(browser|link )|vodafone|wap|windows (ce|phone)|xda|xiino/i',$useragent)||preg_match('/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar (ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|b umb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a |jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|e\-|e\/|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(di|rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|d o|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran |owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(4 0|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98 )|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|xda(\-|2|g)|yas\-|your|zeto|zte\-/i',substr($useragent,0,4)))
header('Location: http://detectmobilebrowser.com/mobile');?>


Entonces lo coloqué en el header y, en Location, coloqué el link que me sale en Otherwise, send them to:

<?php
$useragent=$_SERVER['HTTP_USER_AGENT'];
if(preg_match('/android.+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iem obile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|symbian|treo|up\.(browser|link )|vodafone|wap|windows (ce|phone)|xda|xiino/i',$useragent)||preg_match('/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar (ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|b umb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a |jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|e\-|e\/|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(di|rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|d o|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran |owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(4 0|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98 )|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|xda(\-|2|g)|yas\-|your|zeto|zte\-/i',substr($useragent,0,4)))
header('Location: http://detectmobilebrowser.com/www.temasis.com.mx/temasis2|www.temasis.com.mx/temasis2/mov.html');?>


..., pero intenté acceder por diferentes teléfonos y nada. ¿Estoy colocando algo mal?

Gracias nuevamente.

[emprear]

El uso es asi

creas un index.php (que vendria a ser la versión para PC), y comienza con

Código PHP:

<?php
$useragent=$_SERVER['HTTP_USER_AGENT'];
if(preg_match('/android.+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|symbian|treo|up\.(browser|link)|vodafone|wap|windows (ce|phone)|xda|xiino/i',$useragent)||preg_match('/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|e\-|e\/|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(di|rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|xda(\-|2|g)|yas\-|your|zeto|zte\-/i',substr($useragent,0,4))){
header('Location: version_movil.php');
}
?>
Aqui pones el contenido de la versión para PC
 

Importante, este archivo index no tiene que tener ni siquiera un espacio en blanco al inicio.

Y te creas un archivo en la misma carpeta de nombre
version_movil.php con el código para móviles
Si el agente de usuario del cliente contiene alguna de las cadenas listadas en la función preg_match(), te va a redirigir

Par ahacer pruebas exhaustivas te recomiendo usar Firefox con la extensión
http://chrispederick.com/work/user-agent-switcher/

Saludos

[rirs]

Jojojo, buenos días Emprear.

Muchas gracias por los consejos.

Veamos...

Mira, al final me instalé el aditivo de Firefox y revisaba pero no quería. Entonces como entiendo en Location, es la página a la que te debe redirigir si entras por bla bla que te dice el index. Entonces, como no me salía con la versión movil.php (ni cambiándole el nombre a la que tenía que era mov.php, decidí redirigirla al mov.html (donde no le puse ningún código. Francamente no sabía exsactamente qué código ponerle, si el mismo que index.php con la redirección a la misma página de mov) y bueno..., en el aditivo de Firefox se ve. Más tarde le pediré a alguien algun teléfono para revisarlo desde ahí.

Tendo dos preguntas, aprovechando.

1.- ¿Sabes cómo hacer que cuando ponga el teléfono y se vea por smartphone, al seleccionarlo se ponga para llamada y no como texto?

2.- Para Notebook y Ipad ¿se usa la misma manera que en los smarphones?

Gracias y que tengas un excelente día.

[rirs]

Muy buenas tardesss.

Ya había abandonado acá las dudas. Primeramente muchas gracias. Logré hacer la parte de móvil y lo redirige, tanto smartphones como en ipads, aunque tengo ciertas reticencias en cuanto a las medidas de cómo debería visualizarce para el ipad.

Sin embargo me queda una pregunta que no sé si pudiesen ayudarme:

Coloqué unos teléfonos en parte móvil, pero al dar click se selcciona el texto y no sé cómo colocarlo que, para al seccionar encima, te mande marcar llamada (aprovechando que está en teléfono). Lo he visto en ciertas páginas, pero francamente ya he buscado y quizás no me explico bien o no busco bien, porque no lo encuentro.

De antemano, muchas gracias por todo. Que tengan un excelente día.

[emprear]

ipad y notebook podes ponerlos en una categoría bastante diferente a la de los smartphones, en ipad la resolución es de 1024 x 768 si no recuerdo mal y el navegador nativo es safari(webkit), y estamos hablando de sistemas con navegadores más poderosos.
Por el otro tema , no sé, creo que s programación más avanzada, supongo que en aplicaciones para android vas a encontrar algo. Pero ya escapa a mis conocimientos, todos mis trabajos para moviles se basan en html/css + un poco de javascript

SAludos