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

Guía inicial al uso de un control de versiones

ByLuis

Aunque a mí me sorprenda, hay gente que cuando desarrolla un proyecto, ya sea profesional o personalmente, no utiliza un software de gestión de versiones.
En el artículo que os presento, nos comentan las ventajas que tendremos cuando usamos un gestor de versiones, sobre todo si se trata de un proyecto con varios desarrolladores.
Nos recomienda el uso de Subversion (SVN) y las aplicaciones para escritorio TortoiseSVN para Windows y SCPlugin para Mac. Aunque prefiero SVN a CVS, y sobre todo a SourceSafe u otros peores, la verdad es que algún problema da, sobre todo a la hora hacer commit cuando ha habido commits de otros usuarios anteriormente.
Además nos ofrece una explicación, incluso mediante explicación gráfica del funcionamiento de SVN. Algo importante también es la diferencia entre export y checkout, aunque dependiendo del programa, puede llamarse update y commit o checkin y checkout (cuando se trata de estos términos los no controlamos el inglés, nos liamos un poco).
Una lectura muy importante para aquellos no iniciados.
What is Source Control and Why Should I Use It?

Consejos para escribir menos código PHP

ByLuis

Escribir menos código puede suponer dos mejoras en nuestra aplicación: código más limpio y fácil de seguir, y código más eficiente.

Usar operadores lógicos (or y and) en vez de if

Si queremos ejecutar una instrucción dependiendo del resultado booleano de una instrucción anterior, como por ejemplo:

$status = fwrite($h, 'texto');
if (!$status) {
log('Error al escribir');
}

Podremos hacerlo de la siguiente manera:

fwrite($h, 'texto') or log('Error al escribir');

Uso del operador ternario

Cuando queremos asignar un valor a una variable dependiendo del resultado de una condición:

$var = $ok? 'Correcto' : 'Falso';

Usar for antes que while

Mientras que con el while sería:

$i = 0;
while ($i < 100) {
$var[] = $aux[$i];
$i += 2;
}

Con el for sería así:

for ($i = 0; $i < 100; $var[] = $aux[$i+=2]);

Uso de funciones por referencia

Cuando una función nos devuelve un array, no es imposible acceder directamente al contenido del array:

$ext = pathinfo('file.png')['extension'];
// Parse error: syntax error, unexpected '[' in ... on line ...

Para evitar este error podemos crearnos un juego de funciones como estas:

// Devuelve la referencia al objeto
function &r($v) { return $v; }
// Devuelve la posición del array
function &a(&$a, $i) { return $a[$i]; }

Y por último un par de consejos: intenta conocer las funciones de PHP, hay muchas que harán justo lo que tu necesitas, por lo que no tendrás que implementarlo. Antes de escribir más código para que se lea con facilidad, añade un comentario explicativo.

6 PHP coding tips to write less code

Vía / dzone

links for 2007-11-06

ByLuis

mysqlslavesync: clona slaves en MySQL

ByLuis

mysqlslavesync es un script que permite clonar servidores slaves de MySQL (o maestros) para ponerlo en un nuevo servidor slave con mínima interacción.
Se conecta al nodo del origen y realiza un mysqldump o mysqlhotcopy para transferir los datos, recuperar los datos y poner a punto todos los parámetros para la replicación. Empezando entonces la replicación del nuevo slave con el master.
Se trata de una versión inicial, pero nos puede ayudar mucho a la hora de crear un nuevo slave, ya que en poco tiempo tendremos todo funcionando.
mysqlslavesync

PopBox: zoom mediante Javascript

ByLuis

PopBox es un script que nos permite añadir el zoom a nuestras imágenes y poder apliarlas o reducirlas (con efecto de transición) de forma sencilla.
Su uso es simple, pero tiene un problema, que necesita atributos para su funcionamiento que hay que añadir a la etiqueta img, que hace que no valide el XHTML.
popbox.png
La verdad es que no es un script que me guste mucho, no valida, hay que añadir demiasados atributos y eventos, pero pensando en la gente que necesita este tipo de efectos y no les importa mucho la validación, quizás les sea interesante y realmente es fácil de usar.
PopBox
Vía / WebAppers

links for 2007-11-05

ByLuis