Viendo el otro dÃa la entrada de aNieto2K, recordé el efecto que usa WordPress para resaltar que se ha borrado una fila de una tabla en las herramientas de administración. Se trata de pintar progresivamente la fila en rojo y luego borrarla, consiguiendo asà que el usuario se percate de qué ha pasado.
Read More “Laboratorio: borrar filas de una tabla en Javascript”
En muchas páginas he visto como se indica que un enlace va a abrirse en una ventana nueva con un icono que suele ser una flecha. También se suele indicar que el enlace es a una página en otro idioma mostrando la bandera del paÃs o con un texto.
La verdad es que si tenemos que incluir la imagen en cada enlace que creamos, nos podemos volver locos, a parte de aburrirnos bastante. Una solución sencilla es mediante estilos, para ello usaremos los selectores de atributos y los pseudo-elementos.
Contaremos con dos imágenes: una para indicar un enlace externo (
) y otra para indicar el paÃs (inglés en este caso 
). También tendremos en cuenta que es posible que el enlace se abra en otra ventana y que sea en inglés.
Para poder realizarlo mediante estilos necesitamos el pseudo-elemento :after, el cual nos permite incluir contenido después del propio contenido del elemento, usando para ello también la propiedad content. También será necesario asignar el estilo de los elementos según sus atributos usando para ello selectores de atributos. Usaremos el atributo hreflang para indicar el idioma y si contiene el atributo target supondremos que es un enlace externo.
a[target]:after {
padding-left: 4px;
content: url(abrir.gif);
}
a[hreflang="en"]:after {
padding-left: 4px;
content: url(gb.png);
}
a[target][hreflang="en"]:after {
padding-left: 4px;
content: url(gb.png) " " url(abrir.gif);
}Funciona en Firefox y en Opera, en Safari supongo que también. En nuestro amigo IE no funciona, al menos en la versión 6, si alguien me puede confirmar en Safari y en IE7, se lo agradeceré en el alma.
La verdad es que el tÃtulo puede ser un tanto difÃcil de entender. Pero explicando que es lo que quiero decir, supongo que será fácil de entender. En este caso se trata totalmente de “laboratorio”, ya que es una idea que se me ha ocurrido y que su implementación puede que no se pueda necesitar, ya que se tratarÃa de un ejemplo muy a la medida. Aunque bien pensado, se trata de una caché.
El problema de acceder a contenido dinámico (sobre todo pasa en Java) es sobrecargar el acceso a un mismo script (o JSP), a parte de que el acceso a contenido estático es mucho más rápido que el acceso a un contenido dinámico. El problema es cuando queremos acceder a contenido dinámico de forma estática.
Imaginemos un mapa tipo Google Maps, tenemos la Tierra totalmente vectorizada y dividimos el mapa en cuadrÃculas (x e y). Para acceder a una imagen queremos que sea de forma estática para agilizar la carga de la página y no sobrecargar el servidor, pero la imágen no se puede cargar porque no existe, se tiene que crear dinámicamente.
¿Cual es la solución?, controlar la página de error 404, para que cuando no exista la imagen que deseamos la cree y asà la próxima vez ya podamos acceder a ella de forma estática.
Para ello tendremos que modificar el fichero .htaccess para que cuando no encuentre la imagen la cree y la devuelva.
ErrorDocument 404 /sentidoweb/imagenes-estaticas/createimage.php
Y tendremos que crear un script PHP para que cree la imagen y la devuelva. En este caso hemos añadido unas condiciones, y es que la imagen tiene que ser png y que tiene que tener el nombre con el siguiente formato (en expresión regular): /\d{1,2}_\d{1,2}\.png/ .
<?php
$url = $_SERVER["REQUEST_URI"];
// Si es una imagen PNG
if (preg_match("/\.png$/", $url)) {
$nombreImagen = substr($url, strrpos($url, "/")+1);
// Si el nombre de la imagen tiene el formato que deseo
if (preg_match("/^\d{1,2}_\d{1,2}\.png$/", $nombreImagen)) {
// Obtengo que imagen tengo que crear
$aux = substr($nombreImagen, 0, strlen($nombreImagen)-4);
$coords = split("_", $aux);
// Creo la imagen
header("Content-type: image/png");
$img = imagecreate(50, 50);
$cFondo = imagecolorallocate($img, 0, 133, 133);
$cTexto = imagecolorallocate($img, 255, 255, 255);
imagestring($img, 1, 5, 5, '['.$coords[0].', '.$coords[1].']', $cTexto);
imagepng($img, $nombreImagen);
imagepng($img);
}
}
?>Está claro que esto no funcionarÃa para nada si el contenido dinámico se actualiza con frecuencia.
Debido a la compra de Ideasapiens.com y para no perder el contenido actual, Jose Luis Antunez ha querido migrarlo a ideasapiens.blogsmedia.com.
El problema que se encontró fue tener que editar del código fuente de cada documento web la secuencia de texto www.ideasapiens.com a ideasapiens.blogsmedia.com. De esa forma los enlaces apuntarÃan al subdominio y accesos internos correspondientes donde ahora se alojarán los contenidos.
Para realizar esa búsqueda y reemplazo masivo, antes de pensar en alguna aplicación de escritorio que lo realizara, pensamos en un script para la shell de Linux que con una simple lÃnea se pudiera hacer. Bueno, tan simple no nos resultó y gracias a la ayuda de Dani lo pudimos sacar (tenÃamos la shell un tanto oxidada).
find . -type f -name "*.php" -exec sed -i s/www\.ideasapiens\.com/ideasapiens\.blogsmedia\.com/g {} \;Viendo las complicaciones que estábamos teniendo con la shell (por una tonterÃa, dicha sea la verdad), Gabriel nos pasó el siguiente PHP, obteniendo el mismo resultado.
Read More “Laboratorio: búsqueda y reemplazo masivo en ficheros”
Algo que me suele gustar bastante es que cuando tengo que introducir una dirección IP en un formulario o ventana de Windows, no tenga que estar dándole al tabulador para cambiar de caja de texto. Lo mismo es aplicable cuando se trata de un serial number. Tambien suelo agradecer que hacer un copy/paste, no tenga que ir haciéndolo caja a caja.
Siempre viene bien hacernos un control para direcciones IP, que permita pegar toda la dirección ip y que se rellenen las cajas correctamente y que al pulsar el punto se mueva de caja, y la verdad es que tampoco es muy difÃcil de hacer.
Algo a lo que suelo estar acostumbrado es a usar el teclado para realizar ciertas acciones (shortcuts), cuando estás 8 horas diarias delante de un ordenador, si no haces uso de los shortcuts, perderás mucho tiempo moviendo el ratón de un lado para otro.
Antes el uso estaba más restringido a las aplicaciones de escritorio (CTRL + S para guardar el documento, ALT + F4 para cerrar la ventana, …), pero ahora que cada vez se usa con más frecuencia aplicaciones web, se echan en falta estas facilidades. Aunque hay que decir que últimamente se ven con más frecuencia: TAB + INTRO para enviar un correo en GMail (claro que esta no se programa), CONTROL + S para guardar una entrada en Blogger, …
Leyendo una de las entradas de Usolab, en la que habla de colocar filtros en las tablas: Icono para el control “filtrar”, no he podido resistirme a llevar a cabo tan buena idea.
En el ejemplo voy a seleccionar una tabla, y modificarla para admitir ordenación por columnas, filtrado mediante expresiones regulares y distinción de filas alternas. Además de incluir un icono en el filtro que indica el estado de filtrado.
Lo primero que debemos hacer es seleccionar la tabla en cuestión y tratarla, modificando la cabecera (th) incluyendo un enlace para poder ejecutar la acción de ordenar, un icono que indica qué columna está ordenada y en qué sentido y una caja de texto para indicar el filtrado.
La caja de texto tiene la particularidad de mostrar un icono que indica el estado del filtro, cuanto más lleno esté de “lÃquido”, más mostrará. Para lo cual usamos una imagen como fondo de la caja de texto e iremos moviendo verticalmente para mostrar los distintos estados.
Leyendo un comentario en una entrada de Minid.net, en el que preguntaba cómo redirigir a una url especÃfica según el idioma del navegador, se nos ha ocurrido explicarlo según lo harÃamos nosotros.
Se trata de que la url se redirija a otro directorio según el idioma que nos viene por la cabecera HTTP, por ejemplo: si accedemos a www.dominio.com y nuestro lenguaje es el español, que nos redirija a www.dominio.com/es, y si el idioma es el inglés que acceda a www.dominio.com/en. En nuestro caso, si el idioma no está en la lista de idiomas disponibles accederemos a un idioma por defecto (en).
Algo que suele ser interesante es cuando realizamos una búsqueda en Google, que en la página a la que accedemos desde los resultados de Google, nos resalte las palabras que hemos buscado, aunque la barra de Google ya te da la oportunidad de hacerlo.
El proceso es sencillo, tenemos que capturar la URL desde la que nos llaman, dada por $_SERVER[‘HTTP_REFERER’], obtener las palabras que hemos puesto a buscar el Google (vienen en el parámetro q) y después capturar la salida, como se realizaba en el caso de la caché, y cuando tenemos lo que vamos a enviar por la salida, sustituir cada una de las palabras por el código HTML que queramos que resalte la palabra en cuestión.
<?php
// Filtro para el array para quedarnos solo con la QUERY
function filtro($val) {
return strpos($val, 'q=') === 0;
}
// Obtenemos la página desde la que nos llaman
$url = $_SERVER['HTTP_REFERER'];
// Nos quedamos solo con los parámetros
$url = parse_url($url);
$url = $url['query'];
// Nos quedamos solo con el parámetro que nos interesa
$parametros = split("&", $url);
$cadena = array_filter($parametros, "filtro");
$cadena = urldecode(substr(array_shift($cadena), 2));
// Cacheamos la salida
ob_start();
?>
...
Página HTML
...
<?php
// Recuperamos el buffer de salida
$html = ob_get_clean();
// Por cada palabra de la cadena de búsqueda, la sustituimos por el HTML necesario para resaltar
$palabras = split(" ",$cadena);
foreach ($palabras as $palabra) {
$html = preg_replace('/('.$palabra.')/i', '<b>$1</b>', $html);
}
// Mostramos el buffer por la saliad
echo $html;
?>El otro dÃa contábamos como realizar drag&drop de elementos HTML y en el ejemplo lo que hacÃamos era recolocar los elementos dentro del HTML. Indicábamos que una buena utilidad para este efecto podrÃa ser para realizar comparativas de productos en una tienda.
Read More “Laboratorio: Comparar productos mediante drag & drop”