7/25/2019 Doc02 Diseo HTML

1/2

http://www.cristalab.com/tutoriales/diseno-de-sitios-web-para-telefonos-moviles-estructura-html-c90383l/

Diseo de sitios web para telfonos mviles:

Estructura HTML

Porsiddhartael 05 de Enero de 2011 con 49,619 visitasHTML, CSS y JavascriptOtros tutoriales porsiddharta.

Vamos a construir nuestro sitio mvil revisando las principales diferencias con un sitio web tradicional. Los

cambios ms notables estn en el header. En este tutorial veremos la estructura bsica de una web mvil. Estaes la tercera parte deCmo crear sitios web mviles.En la segunda hablamos deemuladores y herramientas

de desarrollo mvil.

DOCTYPE XHTML para mviles

Asumo que la mayora esta familiarizada con el trmino, pero para definirlo brevemente, el Doctype hace

parte de la estructura XHTML y es una instruccin que permite vincular nuestro archivo con un tipoespecfico de documento, asi los browsers interpretan sus caractersticas basados en reglas especficas. Por

ejemplo, Cristalab.com usa XHTML 1.0 Transitional y usa este Doctype :

Cdigo :

Prcticamente 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 mayora del mercado

mvil y debemos tratar que nuestro sitio sea accesible para la mayor cantidad de equipos, por eso, la W3C

tiene un subset especfico para dispositivos mviles: el XHTML 1.1 Basic, este es el doctype que usa:

Cdigo :

Por otro lado la OMA (Open Mobile Alliance) antiguamente, guardian del WAP, tiene su propio doctype :

elXHTML Mobile Profile, que es tambin un subset de XHTML y su doctype se ve as:

Cdigo :

Ambos son muy similares, son perfectamente standard y tienen un amplio soporte en dispositivos mviles,personalmente te recomiendo usar el Mobile Profile, he descubierto tiene mejor soporte con dispositivos mas

restringidos.

http://www.cristalab.com/tutoriales/diseno-de-sitios-web-para-telefonos-moviles-estructura-html-c90383l/http://www.cristalab.com/tutoriales/diseno-de-sitios-web-para-telefonos-moviles-estructura-html-c90383l/http://revolucion.mobi/http://revolucion.mobi/http://revolucion.mobi/http://www.cristalab.com/tutoriales/4-html-css-y-javascript/http://www.cristalab.com/tutoriales/4-html-css-y-javascript/http://www.cristalab.com/usuario/2793-siddhartahttp://www.cristalab.com/usuario/2793-siddhartahttp://www.cristalab.com/usuario/2793-siddhartahttp://www.cristalab.com/usuario/2793-siddhartahttp://www.cristalab.com/tips/como-crear-sitios-web-optimizados-para-moviles-introduccion-c90168l/http://www.cristalab.com/tips/como-crear-sitios-web-optimizados-para-moviles-introduccion-c90168l/http://www.cristalab.com/tips/como-crear-sitios-web-optimizados-para-moviles-introduccion-c90168l/http://www.cristalab.com/tips/como-crear-sitios-web-moviles-emuladores-y-herramientas-c90263l/http://www.cristalab.com/tips/como-crear-sitios-web-moviles-emuladores-y-herramientas-c90263l/http://www.cristalab.com/tips/como-crear-sitios-web-moviles-emuladores-y-herramientas-c90263l/http://www.cristalab.com/tips/como-crear-sitios-web-moviles-emuladores-y-herramientas-c90263l/http://www.cristalab.com/curso-html/estructura-xhtml/http://www.cristalab.com/curso-html/estructura-xhtml/http://www.openmobilealliance.org/http://www.openmobilealliance.org/http://www.openmobilealliance.org/http://www.openmobilealliance.org/http://www.cristalab.com/curso-html/estructura-xhtml/http://www.cristalab.com/tips/como-crear-sitios-web-moviles-emuladores-y-herramientas-c90263l/http://www.cristalab.com/tips/como-crear-sitios-web-moviles-emuladores-y-herramientas-c90263l/http://www.cristalab.com/tips/como-crear-sitios-web-optimizados-para-moviles-introduccion-c90168l/http://www.cristalab.com/usuario/2793-siddhartahttp://www.cristalab.com/usuario/2793-siddhartahttp://www.cristalab.com/tutoriales/4-html-css-y-javascript/http://revolucion.mobi/http://www.cristalab.com/tutoriales/diseno-de-sitios-web-para-telefonos-moviles-estructura-html-c90383l/

7/25/2019 Doc02 Diseo HTML

2/2

Content-Type XHTML para telfonos mviles

Para que nuestro documento se pueda visualizar consistentemente en la mayora de dispositivos mviles 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 instruccin

Cdigo :

Recomendaciones de Cache al hacer sitios mviles

El ancho de banda es un asunto serio para desarrollo mvil , 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, alejars 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 mvil se recomienda como buena prctica incluir una instruccin de cache, eneste caso le daremos 24 horas de cache a nuestro contenido.

Cdigo :

Cdigo de nuestra primera pagina para mviles!

Uniendo los elementos que acabamos de revisar, por fin podemos hacer la base de lo que sera nuestro primer

sitio mvil, este es el cdigo:

Hemos analizado las principales modificaciones que debemos hacerle a un sitio para aumentar al mximo su

compatibilidad y soporte, a partir de ahora ya sabes como hacer un sitio verdaderamente orientado a todo tipo

de dispositivos mviles y no solo para SmartPhones. Pero como todo buen geek sabe, con un gran poder

viene una gran responsabilidad...

En la prxima parte vamos a hablar sobre el contenido del sitio: cuales elementos se pueden usar con

seguridad y cuales no.

Cristalab y Mejorando.la te traen el increbleCurso de Estrategia Digital y Marketing.Online, a tu ritmo,con diploma de certificacin y clases en vivo.

http://goo.gl/Eru2V4http://goo.gl/Eru2V4http://goo.gl/Eru2V4http://l4c.me/fotos/siddharta/helloe-wold-mobile/sizes/ohttp://goo.gl/Eru2V4