Comunidad de diseño web y desarrollo en internet online

Diseño de sitios web para teléfonos móviles: Estructura HTML

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! :jedi:


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.

Publica tu comentario

o puedes...

¿Estás registrado en Cristalab y quieres
publicar tu URL y avatar?

¿No estás registrado aún pero quieres hacerlo antes de publicar tu comentario?

Registrate