Laboratorio: teclado para pantalla táctil de Iphone o Ipod

ByLuis

Algo de lo que más me gusta del Iphone o el Ipod Touch es el teclado que tiene, el cual muestra la tecla que pulsas por encima de tu dedo. Los que tenemos los dedos un poco grandes y somos un poco patosos, en las pantallas táctiles, a no ser que el teclado que ofrecen sea muy grande, hay veces que no vemos muy bien que tecla estamos pulsando. La gente de Apple nos ha quitado esta duda de un plumazo, resaltar y mostrar por encima de tu dedo la tecla que se pulsa.

ipod.png

Si tenemos que hacer una aplicación web que se vaya a usar en pantallas táctiles, este truco puede seros muy útil. Se trata únicamente de cambiar los estilos a los enlaces cuando están activos (a:active), haciendo que el tamaño de la letra sea más grande, y la caja que ocupa sea más grande y se desplace hacia arriba.

Si tenemos un teclado de la siguiente manera:

<ul>
<li><a href="#ndo">º</a></li>
<li><a href="#1">1</a></li>
<li><a href="#2">2</a></li>
<li><a href="#3">3</a></li>
...
</ul>

Lo que tendremos que hacer es darle a los li el estilo de bloque y float a la izquierda y los enlaces cuando esten activos cambiarles el estilo, así la tecla flotará sobre las otras:

ul {
clear: both;
}
li {
margin: 5px;
display: block;
width: 50px;
height: 50px;
float: left;
background: #008585;
text-align: center;
vertical-align: middle;
}
a {
background: #008585;
color: #FFFFFF;
text-decoration: none;
text-transform: uppercase;
font-family: Verdana;
font-size: 175%;
}
a:active {
display: block;
background: #E1E8CD;
color: #008585;
width: 100px;
height: 150px;
position: relative;
top: -100px;
left: -25px;
font-size: 275%;
}

Quien lo quiera probar en la Ipod o Iphone no le va a funcionar, ¿por?, pues no lo sé, quizas el Safari que lleva tiene alguna limitación, o simplemente en Safari no funciona, no lo sé, lo he probado en Firefox nada más.

Ejemplo

|

Evitar el caché en las hojas de estilo

ByLuis

Algo que suele ocurrir con frecuencia es que al realizar cambios en la hoja de estilos, estos no se vean reflejados en la página por el caché del navegador.

Para evitar esto, tan solo es necesario un script que cargue los estilos y que le añada un parámetro GET que sea único para que el navegador lo entienda como un fichero nuevo. En este caso el parámetro es la fecha.

function loadStyleSheets(stylelist) {
var head = $$("head")[0];
var date = new Date();
var dateString = Date.parse(date.toString());
for(var i = 0; i < stylelist.length; i++) {
var link = document.createElement("link");
link.href="style/" + styleList[i] + "?" + dateString;
link.type = "text/css";
link.rel = "stylesheet";
head.appendChild(link);
}
}

En este caso el autor hace uso de la función de Prototype $$, pero se podría hacer sin el uso de este framework.

Como consejos sobre el mismo tema yo añadiría dos:

  • si estás trabajando en local y no ves los cambios, carga en el navegador directamente el fichero .css que hayas modificado, así los cambios aparecerán, luego los podrás ver en la página.
  • si la página se crea mediante PHP le puedes añadir a la etiqueta link el parametro GET directamente:
<link rel="stylesheet" href="estilos.css?refresh=<?php echo time(); ?>" />

How to avoid caching and dynamic load of stylesheets

links for 2007-11-07

ByLuis