Todo lo que necesitas para crear tu web WAP 2.0.
Recientemente acabo de terminar la versión móvil de EscapadaRural (m.escapadarural.com) y he tenido que ponerme al día en estas nuevas tecnologías. Anteriormente había hecho páginas en i-Mode, pero había restricciones de peso terribles (aprox 10Kb), no permitía apenas personalización de diseño, no admitía hojas de estilo y dejaba sólo unas cuantas etiquetas html con las que jugar.
Con el Wap 2.0 podemos utilizar la potencia del XHTML sumado al CSS para conseguir más personalización de diseño. Todavía no tiene las mismas posibilidades que la web, pero todo se andará.
Algunos consejos para maquetar WAP 2.0. :
- Define el tamaño de las imágenes con html. Así se reserva el espacio en pantalla y carga más rápido.
- El tamaño de las imagines debe ser 200 x 150px.
- Pon todos los estilos en una hoja a parte y ponle un nombre corto, aquí todo byte cuenta.
- Pon nombres cortos a las clases que utilices.
- Utiliza em para los tamaños de textos.
- Utiliza un enconding utf-8:
<?xml version="1.0" encoding="UTF-8"?> - Utiliza un dtd XHTML Mobile:
<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd"> - Es obvio, pero hay que decirlo… no uses javascript.
- Utiliza un meta para cachear el contenido:
<meta http-equiv="Cache-Control" content="max-age=200" /> - No utilices tablas.
- Cuando termines, puedes tener una versión de la página sin saltos de línea para ahorrar unos cuantos bytes. Lo mismo con la hoja de estilo
Validador & Emulador para móvil:
Sin duda alguna esta aplicación me ha salvado. A parte de proporcionar emuladores de dos móviles (nokia y Ericsson), te proporciona validador de código, medidor de tiempos de carga y ayuda para solucionar los fallos.
http://ready.mobi/launch.jsp?locale=en_EN
Al final he conseguido sacar un 5 
Guías de xhtml para móvil:
- http://developer.openwave.com/documentation/xhtml_mp_css_reference/
- http://www.developershome.com/wap/xhtmlmp/
- http://www.passani.it/gap/
Ejemplos:
- m.gmail.com
- m.yahoo.com
- m.technorati.com
- m.ask.com
- m.flickr.com
- m.rememberthemilk.com
- m.30boxes.com
- m.posticky.com
- barcelonarestaurant.mobi
Está de moda utilizar dominios .mobi, aunque yo prefiero los subdominios m.
Por último, haz un sitemap:
Google permite también indexar las webs para móviles, a través de un formato especial de sitemaps.
http://www.google.com/support/webmasters/bin/topic.py?topic=9346
Comentarios
04 de July de 2007
[…] Todo lo que necesitas saber para crear tu web WAP 2.0 (Nedial.net) […]
05 de July de 2007
Hola,
Me gustarÃa saber en que te basas para afirmar esto:
El tamaño de las imagines debe ser 200 x 150px.
Ya que hay multitud de resoluciones diferentes. Por ejemplo mi móvil es 176×208
06 de July de 2007
>> El tamaño de las imagines debe ser 200 x 150px.
Hombre no, fijate si por ejemplo yo tengo un dispositivo con una resolución de 128×128, quedarÃa cortada la imagen, o si tuviera uno de 240×320 me sobrarÃa imagen.
Lo ideal (y costoso) es la adaptación de contenido en función del tipo de terminal móvil.
Saludos.
17 de July de 2007
La información del tamaño de las imágenes la saqué del validador:
http://ready.mobi/launch.jsp?locale=en_EN
supongo que dicen 200×150 de máximos horizontal y vertical a modo de media… Habrá dispositivos con más y menos pantalla.
05 de September de 2007
Hola.
Alguien conoce algun pluggin de sitemap wordpress wap ?
Saludos espero respuestas
24 de October de 2007
Hola, excelente artÃculo, lo estoy utilizando de referencia.
Mas tengo una duda, ojala me la pudieras resolver:
¿Si uno desarrolla para WAP 2.0 no dejo fuera una gran cantidad de moviles? o ¿Hoy por hoy la mayoria soporta XHTML?
Estoy utilizando PHP, pero como hacen portales WAP como Google o eBay para segun tu telefono generan la pagina adecuada, ya sea WML 1.0, WML 1.2 o XHTML?
saludos y gracias por compartir
23 de March de 2008
Yo tenia la idea de hacer un sitio wap pero No entiendo ni una weaa!!! igual gracias por el intento.
03 de April de 2008
[…] interesantes para crear una web WAP 2.0 de la mano […]