Poner en práctica este tema me ha costado mucho tiempo de documentarme, de pruebas y errores. Si te vas a aventurar en este medio, creo importante que tengas claro algunos puntos y otros que se los transparentes al cliente, todo para evitar posteriores decepciones:
Desde que salió el iPhone, se abrió una nueva manera de tratar sitios web para móviles. Se pensaba que con el marcado WML y estilos básicos bastaban, pero Apple demostró que se puede hacer mucho más y mejor en tan poco espacio. Google ofrece mucho con su navegador basado en Webkit, Opera soporta XHTML en su Opera Mini. Es importante que sepas cómo y qué te ofrece cada dispositivo, y eso se lo traspasas a tu cliente.
Básicamente iPhone es el que tiene mayores diferencias en la manera de tratar el código fuente, así que es mejor hacer una versión del sitio sólo para este dispositivo. Agrupa los smartphones (Blackberry, Nokia) y crea una versión con buen HTML y estilos sobrios; cuida que el HTML sea sencillo para el resto de los browsers más limitados (Palm, Windows Mobile). Para detectarlos, te recomiendo un sencillo pero útil script en PHP que hace el trabajo por tí.
He tenido grandes decepciones con las versiones del browser de Blackberry y Nokia: suelen comportarse diferente entre modelos inmediatos, y esas diferencias son sustanciales. Lamentablemente, te recomiendo que uses HTML 4 y CSS1 para asegurarte con todos los modelos de estas marcas.
Si debes validar campos de formularios, déjaselo al servidor y no al browser. Al contrario de iPhone, muchos teléfonos traen Javascript deshabilitados por defecto. No esperes que el usuario los haya habilitado manualmente; si puedes, evítalo.
Una lástima, pero te recomiendo que le agregues a tu lista de amigos, el modelo y versión de teléfono celular que tiene cada uno para que te ayuden a probar tus desarrollos. Sólo así tendrás certeza del correcto funcionamiento que esperan tú y tu cliente.
Si crees que por ser sitios menores te será fácil, te decepcionarás: son muchas más las variables que debes tener presente, y probablemente el esfuerzo será mayor. Planifica muy bien con tu cliente lo que él espera ver e interactuar mediante un móvil, aterrízalo con las limitaciones que encuentres y lleguen a un acuerdo razonable para ambos.
Shadowbox es una ventana modal escrita enteramente en Javascript. Puede desplegar una amplia gama de archivos gráficos (imágenes, películas, etc.). Es crossbrowser, multiplataforma, de código limpio, relativamente bien documentado (aunque es nuevo).
Más prestaciones:
Impresionante, ¿no? Pero lo que más me llamó la atención fue otro detalle:
Lo implementé en un nuevo proyecto personal llamado Rulz, y realmente muy potente. Lo mejor es que actúa mediante la asignación del atributo rel="shadowbox" dentro de <a>, lo que a contrario de Thickbox (que fue el que estaba usando), no me interfiere en el enlace ya que estaba ya pasando algunos parámetros de geo-ubicación (para Google Maps, pueden probarlo si entran a alguna reseña y presionan "Ver mapa de ubicación").
Tercer artículo influenciado directamente del videocast. En esta ocasión, les presento una hoja de estilos que utilizo para proyectos de gran envergadura (cuando con más de 40 páginas y no son alimentadas a mano, sino mediante un CMS). Se trata de un CSS Reseter, una serie de propiedades CSS que resetean las propiedades a su estado original. Conocido por todos es que por defecto los browsers tienen algunas diferencias de estilos en ciertas etiquetas HTML, principalmente <body>, <iframe>, <h1>, <h2>…., <p>, <blockquote>, <fieldset>, <label>, <legend>, etc.
Influencia directa de 3 fuentes: Yahoo UI Reset CSS, Eric Meyer’s Reworked Reset y mi experiencia personal para ir adaptándola a mis necesidades.
Esta hoja de estilos no es para nada de corta, por lo que comentar cada estilo sería eterno. Me gustaría sí mencionar elementos importantes a considerar:
:focus {
outline: 0;
}
Esto ya lo había mencionado en el artículo El contorno de la discordia.
a img, iframe {
border: none;
}
Las imágenes linkeadas en algunos browsers suelen tener el borde heredado de la propiedad del link. Aquí, lo anulamos definitivamente.
input, textarea, select, button {
font-size: 100%;
font-family: inherit;
}
Esta hoja se hizo esencial para diagramar formularios, donde la diferencia de estilos entre browsers es crítico. Ahora, se hizo bastante más fácil adaptarlos a todos. En este caso, vemos que obligamos que <input> y <textarea> hereden el font-family.
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
Finalmente, algo como clearfix que se ha hecho esencial, creo que es el lugar perfecto para dejarlo declarado.
]]>