Lo bueno es que iPhone usa Safari como browser (hasta ahora, único). Estoy muy acostumbrado con su uso y manejo, así que conozco bien sus potenciales. Para ser específico, el motor de iPhone es el WebKit 419.3, (el que correspondería al de Safari 2 para plataformas Mac OS X). Es posible crear sitios que sólo sean vistos por este Safari, tal como una hoja de estilos media="handheld" es leída sólo por dispositivos móviles; ya iPhone no lo interpreta, utiliza por defecto la hoja de estilos principales (sea media="all" ó media="screen").
Entonces ¿cómo lo hace?
Para crear estilos sólo para iPhone, podemos linkear una hoja de estilos externa pero con un cambio en el atributo media:
<link href="estilos_iphone.css" rel="stylesheet" media="only screen and (max-device-width: 480px)" />
Este cambio en media es propio de CSS3, una de las ventajas de Safari. Dice precisamente que para anchos de pantalla de hasta 480px (que es el ancho máximo del iPhone en apaisado) utilice tal hoja de estilos. Ahora, para los otros anchos (computadores personales):
<link href="estilos_iphone.css" rel="stylesheet" media="only screen and (min-device-width: 481px)" />
Nuevamente, esto sólo funcionará en Safari 2+ para Mac OS X ó Windows; para que se comporte debidamente en todos los browsers, recomiento primero linkear la hoja de estilos general como siempre lo han hecho (media="screen"), y a continuación la del iPhone con el media="only screen and (max-device-width: 480px)" que ya mostré.
La otra manera (que utilizaré en los ejemplos, los que podrás notar diferencia si los ves con un iPhone, claro) ya la había mencionado en un artículo anterior, y se usan juntos del mismo estilo:
@media screen {
// estilos para todos los browsers
}
@media screen and (max-device-width: 480px) {
// estilos sólo para iPhone
}
También puedes detectar si el sitio se está leyendo desde el iPhone y redireccionarlo a otra página mediante PHP (que fue lo q usé para CSSLab), como por ejemplo:
if (stristr($_SERVER['HTTP_USER_AGENT'], ‘iPhone’)) {
// redirecciona
}
Otro punto a tener en cuenta es la etiqueta <meta> y el valor viewport. Con él podemos manejar varias propiedades al momento de cargar la página en sus iPhone. Sus valores son:
- width: controla el ancho el cual la página se mostrará en primera instancia. Cuando cargas una página, Safari la adapta para el el 100% del alto y del ancho para que quepa dentro de la primera vista. Si el ancho de tu sitio es de 800px, pero quieres que al momento de cargar la página se desplieguen los primeros 400px, lo defines mediante este valor.
- height: similar al anterior, la página se cargará mostrando el alto que determinemos en primera instancia, aunque éste sea mayor.
- user-scalable: determina si el usuario puede o no hacer zoom (in-out) a la página. El valor por defecto es ‘yes’.
<meta name="viewport" content="width=300, user-scalable=no" />
Otro punto es la capacidad de esconder la barra de URL que tiene Safari, y desplegar la página sin ella. A través de Javascript podemos hacer ese desplazamiento apenas la página cargue, de la siguiente manera:
setTimeout(function(){
window.scrollTo(0, 1);
});
Esto funciona sólo si el alto de la página es mayor al de la ventana al momento de cargarse.
Otro punto a considerar es la capacidad de interactuar con elementos propios de iPhone a través de simple HTML y enlaces, por ejemplo:
- Para hacer una llamada telefónica a través de un link:
<a href="tel:6666666">Hacer llamado</a>
- Para enviar un e-mail:
<a href="mailto:usuario@dominio.com">Envia un e-mail</a>
- Para buscar un lugar en Google Maps:
<a href="http://maps.google.com/maps?q=santiago+chile">Santiago, Chile</a>
El ultimo punto que mencionaré en este artículo, es el poder de Safari cuando hablamos de estilos. Principalmente, cuando queremos aplicar estilos para elementos de formulario. WebKit tiene propiedades propias que podemos finalmente utilizar sin vergüenza: radio, opacidad y sombras, entre otros:
Finalmente, algunos aspectos técnicos sobre Safari y la plataforma misma iPhone.
Aspectos técnicos:
- HTML 4.01
- XHTML 1.0
- CSS 2.1 y algo de CSS 3
- Javascript 1.4
- Manipulación del DOM
- Ajax
Sobre dimensiones:
- el ancho de la pantalla es de 320px.
Sobre imágenes:
- Soporte para GIF animados (aunque no deben pasar de 2mb), JPG, PNG y TIFF (hasta 8mb).
Sobre medios:
- Soporte para PDF y Quicktime.
- No soporta Java ó películas Flash.
Sobre Javascript:
- Limitado a 5 segundos, 10mb y máximo 8 documentos al mismo tiempo.
- Algunos eventos no son soportados: mouseover, mouseout, onmouseenter, onmouseleave, onmousemove, onSelect, onresize y onScroll.
- No permite cortar/copiar/pegar, drag&drop y selecccionar texto/elementos.
Sobre estilos:
- Safari para iPhone no reconoce los media types print y handheld.
- Soporta estilos propios de WebKit.
- No soporta pseudoclass :hover.
- Las tipografías soportadas son American Typewriter, Arial, Arial Rounded MT Bold, Courier, Courier New, Georgia, Helvetica, Helvetica Neue, Marker Felt, Times New Roman, Trebuchet MS, Verdana y Zapfino.
Sobre HTML:
- No soporta subida de archivos <input type="file" /> (se deshabilita).
- Enlaces pueden ser directos para números telefónicos, emails y mapas de Google.
- No soporta tooltips, aunque muestra el contenido del atributo title="" si mantienes presionado el enlace.
Algunas buenas prácticas a considerar:
- Siempre separar HTML y CSS
- Usar HTML bien estructurado y válido
- Escalar y optimizar imágenes apropiadamente, no a través de estilos o atributos HTML.
- Evitar uso de <frameset>.
- Utilizar columnas para mejor manejo de zoom (evitar ancho completo).
Links:
]]>Usualmente se especifican los medios al cual apuntan las hojas de estilos como atributo de la etiqueta <link />, de la siguiente forma:
<link href="estilos/layout.css" rel="stylesheet" type="text/css" media="screen" />
<link href="estilos/print.css" rel="stylesheet" type="text/css" media="print" />
Sin embargo existen otros 2 métodos, los cuales pueden ser utilizados dentros mismo de las hojas de estilos. El segundo mediante @import:
@import url("sintetizado.css") aural;
Y el tercero, a través de la regla @media:
@media print {
body { font-size: 14pt }
}
Con esta regla, podemos definir dentro de nuestras hojas de estilos las propiedades y valores para cada medio, sin necesidad de linkear otras hojas de estilo externas:
@media screen {
body {
color: #666;
font-size: 12px;
padding: 15px 0;
}
}
@media print {
body {
background-color: #fff
color: #000;
padding: 1cm;
}
}
Para entregar información más completa, todos los medios disponibles en CSS 2 son:
- all
- todos los medios
- aural
- para sintetizadores de voz
- braille
- para dispositivos táctiles que usan braille
- embossed
- utilizada para impresoras para braille
- handheld
- dispositivvos móviles
- material impreso
- projection
- proyectores o impresores de transparencias
- screen
- pantallas en color en general
- tty
- medios con caracter en grilla, como teletipos, terminales o dispositivos móviles con capacidad limitada. Al tener nula resoución, no se debe usar la unidad de pixeles.
- tv
- dispositivos de televisión (baja resolución)
Link:
]]>Tamaños de pantallas:
Aquí comienzan los problemas. Claro, nada es perfecto. La mayoría de las pantallas son verticales; las menos apaisadas, y menos aún las que puedes escoger entre ellas. El tamaño más común hoy en dia corresponden a 176 x 208px. Algunos más antigos tienden al cuadrado (128 x 128px y 120 x 144px). PDA’s usualmente usan VGA (480 x 640px). Otros tamaños comunes son de 200 x 640px y 320 x 640px.
Peso de imágenes:
La mayoría de los móviles no soportan millones de colores, como las pantallas. así que usar GIF en 32 colores, bien manejados, será suficiente. Simplificar al máximo los tonos utilizados será importante, ya que la pequeña pantalla y las condiciones en que el sitio será visto (en oscuro, a contraluz, caminando, acostado, etc.) no serán las mismas que en un computador, donde lo que se pretende es tener la mejor orientación posible del monitor.
Browsers:
Opera lleva la delantera. Sus browsers v7 han destacado por su simplicidad, y se presentan con gran cobertura en sus diferentes soportes: Symbian, Windows CE. Además, tiene buen soporte y renderizado de CSS 2.
Adaptando tu sitio:
Tan fácil como crear una nueva hoja de estilos. Aquí, deberás simplificar el contenido, mostrando sólo lo importante y esencial que quieres que el usuario vea. Nada de parafernalia. Importante es darle la propiedad al HTML que pertenezca a esta nueva hoja de estilo. A continuación:
Screen: para desktops
<link rel=”stylesheet” type=”text/css” href=”pantalla.css” media=”screen” />
HandHelds: para celulares, PDA´s, etc
<link rel=”stylesheet” type=”text/css” href=”moviles.css” media=”handheld” />
display: none; es lo que usarás para ocultar div, p o lo que sea necesario. Mejor dicho, no necesario. Por ejemplo:
#super_imagen {
display: none;
}
No necesitamos que una imagen gigante se van en nuestro celular. No lo queremos tampoco.
width: 240px; será necesario formatear el ancho al deseado. max-width: 208px; también es importante, ya que permite que la columna o el contenedor no se pase de ese ancho.
body {
max-width: 208px;
}
Probándolo:
No necesitas utilizar un celular para ello. Opera trae una opción llamada Small Screen, donde te permite visualizar tu sitio con el media="handheld". Muy útil.