Vamos a construir nuestro sitio móvil revisando las principales diferencias con un sitio web tradicional. Los cambios más notables están en el header. En este tutorial veremos la estructura básica de una web móvil.
Esta es la tercera parte de Cómo crear sitios web móviles. En la segunda hablamos de emuladores y herramientas de desarrollo móvil.
DOCTYPE XHTML para móviles
Asumo que la mayoría esta familiarizada con el término, pero para definirlo brevemente, el Doctype hace parte de la estructura XHTML y es una instrucción que permite vincular nuestro archivo con un tipo específico de documento, asi los browsers interpretan sus características basados en reglas específicas.
Por ejemplo, Cristalab.com usa XHTML 1.0 Transitional y usa este Doctype :
Código :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Prácticamente todos los SmartPhones tienen soporte para manejar este tipo de documentos, pero como hemos mencionado anteriormente, los SmartPhones (al momento de escribir esto) no son la mayoría del mercado móvil y debemos tratar que nuestro sitio sea accesible para la mayor cantidad de equipos, por eso, la W3C tiene un subset específico para dispositivos móviles: el XHTML 1.1 Basic , este es el doctype que usa:
Código :
<?xml version="1.0"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML Basic 1.1//EN" "http://www.w3.org/TR/xhtml-basic/xhtml-basic11.dtd">
Por otro lado la OMA ( Open Mobile Alliance ) antiguamente, guardian del WAP, tiene su propio doctype : el XHTML Mobile Profile, que es también un subset de XHTML y su doctype se ve así:
Código :
<?xml version="1.0"?> <!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd">
Ambos son muy similares, son perfectamente standard y tienen un amplio soporte en dispositivos móviles, personalmente te recomiendo usar el Mobile Profile, he descubierto tiene mejor soporte con dispositivos mas restringidos.
Content-Type XHTML para teléfonos móviles
Para que nuestro documento se pueda visualizar consistentemente en la mayoría de dispositivos móviles y aumentar aun mas su compatibilidad, debemos definirle el tipo de contenido que vamos a mostrar y el encodeado que utilizaremos, esto lo logramos agregando esta instrucción
Código :
<meta http-equiv="Content-Type" content="application/xhtml+xml;charset=utf-8" />
Recomendaciones de Cache al hacer sitios móviles
El ancho de banda es un asunto serio para desarrollo móvil , no todos los usuarios tienen planes ilimitados de datos y un sitio pesado puede tener un costo monetario alto. Si tu sitio se vuelve costoso, alejarás a tus visitantes. Usando cache ayudamos a nuestros usuarios a ahorrar ancho de banda al no bajar varias veces los mismos datos. En todo sitio móvil se recomienda como buena práctica incluir una instrucción de cache, en este caso le daremos 24 horas de cache a nuestro contenido.
Código :
<meta http-equiv="Cache-Control" content="max-age=86400"/>
Código de nuestra primera pagina para móviles! 
Uniendo los elementos que acabamos de revisar, por fin podemos hacer la base de lo que sera nuestro primer sitio móvil, este es el código:
Hemos analizado las principales modificaciones que debemos hacerle a un sitio para aumentar al máximo su compatibilidad y soporte, a partir de ahora ya sabes como hacer un sitio verdaderamente orientado a todo tipo de dispositivos móviles y no solo para SmartPhones. Pero como todo buen geek sabe, con un gran poder viene una gran responsabilidad...
En la próxima parte vamos a hablar sobre el contenido del sitio: cuales elementos se pueden usar con seguridad y cuales no.
¿Sabes SQL? ¿No-SQL? Aprende MySQL, PostgreSQL, MongoDB, Redis y más con el Curso Profesional de Bases de Datos que empieza el martes, en vivo.
Lo que está ocurriendo ahora mismo es que nos estamos acostumbrando a tener diferentes maneras de acercarnos a la web según el dispositivo desde el que lo hagamos, no lo contrario, Mago.ozkuro
Por siddharta el 05 de Enero de 2011
Mago.ozkuro :
Excelente comentario Mago.ozkuro, me alegra que alguien lo hiciera porque estoy seguro que muchísimas personas piensan igual, yo mismo no puedo estar mas de acuerdo con que EL FUTURO esta en que el móvil se adapte a la web, de hecho los smartphones ya lo hacen con relativo éxito.
Sin embargo, como lo mencione en la primera parte, la web móvil no se trata de los smartphones unicamente, ya mencioné los detalles, pero en resumen, para este momento de la historia solo el 20% de los equipos móviles con acceso a Internet son smartphones, si aplicamos tu metodología, dejamos por fuera el 80% de los móviles con capacidad de Internet, pero analicemos un poco mas estas cifras, para que veas lo grande que es el movimiento móvil y lo peligroso que es relativizarlo a la comodidad de trabajar solo para smartphones.
Los números aumentan constantemente , pero aproximadamente hay unos 2 700 000 000 (2.7billones) de equipos móviles con browser y capacidad de conectarse a Internet, si haces un sitio para smartphones, en el que solo el 20% de esas personas puedan entrar, dejarías por fuera unos 2 160 000 000 (2.1 billones) de usuarios. Esa es la cantidad de personas que ahora mismo no podrán ver tu sitio correctamente, y no solo estoy hablando de equipos marca patito de hace una década, allí esta la mayoría de los blackberrys, nokias, samsung , sony-erickson y demás.
Es una cifra muy alta, pero se vuelve preocupante si tomamos en cuenta que apenas hay unas 850 000 000 (850millones) de PC's en el mundo! todos los ordenadores de la tierra no llegan a la mitad de los móviles a los que les das una mala experiencia en tu sitio, solo por tomar el camino fácil y darte por servido con el hecho que en TU móvil todo se vea bien.
Otro aspecto que se debe tomar en cuenta es que la web móvil no se comporta igual que la web tradicional, hacer una mejora de software no es tan fácil como instalar el ultimo firefox o ubuntu. generalmente la mejora viene solo cuando el usuario cambia de equipo,eso es costoso y puede tardar años en suceder, asi que créeme tenemos dispositivos limitados para rato.
la idea de este curso no es hacer sitios web simples y restringidos para móviles de porquería, es hacer que tu web amplíe exponencialmente su rango de cobertura y ofrezca una experiencia consistente en cualquier plataforma
siddharta :
Mago.ozkuro :
Excelente comentario Mago.ozkuro, me alegra que alguien lo hiciera porque estoy seguro que muchísimas personas piensan igual, yo mismo no puedo estar mas de acuerdo con que EL FUTURO esta en que el móvil se adapte a la web, de hecho los smartphones ya lo hacen con relativo éxito.
Sin embargo, como lo mencione en la primera parte, la web móvil no se trata de los smartphones unicamente, ya mencioné los detalles, pero en resumen, para este momento de la historia solo el 20% de los equipos móviles con acceso a Internet son smartphones, si aplicamos tu metodología, dejamos por fuera el 80% de los móviles con capacidad de Internet, pero analicemos un poco mas estas cifras, para que veas lo grande que es el movimiento móvil y lo peligroso que es relativizarlo a la comodidad de trabajar solo para smartphones.
Los números aumentan constantemente , pero aproximadamente hay unos 2 700 000 000 (2.7billones) de equipos móviles con browser y capacidad de conectarse a Internet, si haces un sitio para smartphones, en el que solo el 20% de esas personas puedan entrar, dejarías por fuera unos 2 160 000 000 (2.1 billones) de usuarios. Esa es la cantidad de personas que ahora mismo no podrán ver tu sitio correctamente, y no solo estoy hablando de equipos marca patito de hace una década, allí esta la mayoría de los blackberrys, nokias, samsung , sony-erickson y demás.
Es una cifra muy alta, pero se vuelve preocupante si tomamos en cuenta que apenas hay unas 850 000 000 (850millones) de PC's en el mundo! todos los ordenadores de la tierra no llegan a la mitad de los móviles a los que les das una mala experiencia en tu sitio, solo por tomar el camino fácil y darte por servido con el hecho que en TU móvil todo se vea bien.
Otro aspecto que se debe tomar en cuenta es que la web móvil no se comporta igual que la web tradicional, hacer una mejora de software no es tan fácil como instalar el ultimo firefox o ubuntu. generalmente la mejora viene solo cuando el usuario cambia de equipo,eso es costoso y puede tardar años en suceder, asi que créeme tenemos dispositivos limitados para rato.
la idea de este curso no es hacer sitios web simples y restringidos para móviles de porquería, es hacer que tu web amplíe exponencialmente su rango de cobertura y ofrezca una experiencia consistente en cualquier plataforma
Es frase de "consistente en cualquier plataforma" es lo que digo que tu web pueda ser vista igual que en una pc en tu movil, me gusta eso que dijiste que la misma pagina normal solo que optimizada cuando se entre con un movil, ese ya es otro tema, porque una web orientada solo a moviles apestaria...
De todos modos creo que eso de futuro queda muy grande mas bien creo que estamos atrasados y ese deberia ser el presente, porque ya ves como va evolucionando la telefonia movil.
El 20% que usa smartphones como ser android, iphone, BB etc. ES SEGURO QUE UTILIZAN EL INTERNET, en cambio el 80% que tiene telefonos normales digamos cuantos de ellos utilizan realmente el internet y no utilizan su telefono solo para musica, sms, llamadas ? , Desde mi punto de vista no creo que sea EL FUTURO, pero si es una buena salida para la mayoria que no tiene smartphones.
Por Raxiro el 05 de Enero de 2011
Es sólo mi opinión, gracias x los artículos sid
Por siddharta el 05 de Enero de 2011
Por sgb004 el 06 de Enero de 2011
Por Raxiro el 06 de Enero de 2011
Porque html5 es más que nada compatible con los smartphones de ahora, quizás en algún nokia no tan viejo.
Raxiro-blog :
Porque html5 es más que nada compatible con los smartphones de ahora, quizás en algún nokia no tan viejo.
Por siddharta el 06 de Enero de 2011
Porque no usé HTML5? primero porque no lo he probado en todos los equipos y entornos como para recomendarlo, comprendo la retrocompatibilidad de HTML5 pero los equipos moviles son temperamentales, he visto sitios derretirse solo por el doctype. La segunda razón es porque yo estoy hablando de buenas practicas y standares, por eso muestro las recomendación especifica para móviles que hace la división especializada de la W3C.
siddharta :
Por Carlos el 20 de Febrero de 2011
O bien DOCTYPE para movil 1.0 puede funcionar para un escritorio aun que deberiamos de maquetear el tamaño para los moviles.
Que me sugieres hacer.
Por luis alberto el 25 de Abril de 2011
Por Mariana el 14 de Julio de 2011
¿Falta la última parte o yo no la encontré?
Si está, por favor pongan el link
Por el 04 de Septiembre de 2011
Gracias y exito, lastima que no soy programador pero muy buen tutorial.
LAE Enrique Márquez L.
Por Adolfo Beato el 18 de Octubre de 2011
Gracias por los tutoriales.
Adolfo Beato
Por ignacio85r el 19 de Diciembre de 2011
Por marberdo el 16 de Enero de 2012
Con los mobiles ocurre lo mismo. Ver una web no adaptada al movil es horrible, hacer zoom sobre algo supone perder toda la perspectiva de la pagina, tener que moverse de manera no natural por ella.
Una aplicacion como la de la Caixa es el futuro. Si los usuarios de la caixa tuvieran que usar linea abierta en su formato web, no lo usaria nadie. Se adaptaron al formato movil, hicieron su aplicacion (está bien , no es una pagina web, pero podria serlo perfectamente) y el resultado es maravilloso.
Entiendo que no se puede adaptar la web a cada dispositivo nuevo y distinto que salga, pero el smartphone es un aparato que ya usan 8 de cada 10 nuevos usuarios, con su correspondiente conexion a internet, asi que se puede ir considerarando ya un estandar para estos cacharros.
En definitiva, cualquier pagina web que quiera llegar lejos, debe considerar tener un formato mobile en condiciones.
Por desarrollador el 21 de Junio de 2012
Por Mariano el 25 de Junio de 2012
The Fricky! :
Lo que está ocurriendo ahora mismo es que nos estamos acostumbrando a tener diferentes maneras de acercarnos a la web según el dispositivo desde el que lo hagamos, no lo contrario, Mago.ozkuro
Nanotecnologia !
Por cOoLISH el 27 de Junio de 2012
Por xavier fajardo el 16 de Agosto de 2012
Por Jorge el 27 de Octubre de 2012
con el mismo link o dirección web
Por miguelcarre77 el 13 de Febrero de 2013
Por Leosonic256 el 20 de Febrero de 2013
Por raquel el 07 de Mayo de 2013