|

Escribir en ficheros mediante XUL

Leyendo la entrada de aNieto2K sobre logs en Javascript, me he acordado de que hace tiempo que quiero comentar cómo escribir en ficheros mediante XUL en extensiones para Firefox.

Aunque la principal función puede ser la escritura de opciones o ficheros de configuración o guardar datos, el motivo por el que yo lo busqué era para hacerme unos logs que me faciliten el trabajo del desarrollo de una extensión para Firefox (de aquí la asociación con el post de aNieto2K).

var savefile = "c:\\displaynotes.log.txt";
try {
netscape.security.PrivilegeManager.enablePrivilege("UniversalXPConnect");
} catch (e) {
alert("Permission to save file was denied.");
}
var file = Components.classes["@mozilla.org/file/local;1"]
.createInstance(Components.interfaces.nsILocalFile);
file.initWithPath( savefile );
if ( file.exists() == false ) {
alert( "Creating file... " );
file.create( Components.interfaces.nsIFile.NORMAL_FILE_TYPE, 420 );
}
var outputStream = Components.classes["@mozilla.org/network/file-output-stream;1"]
.createInstance( Components.interfaces.nsIFileOutputStream );
// Suponemos que existe una variable con el texto llamada content
outputStream.init( file, 0x04 | 0x10, 420, 0 );
var result = outputStream.write( content, content.length );
outputStream.close();

En el init del outputStream nos encontramos con una serie de flags para abrir el fichero que se usan como máscara. Estos flags tienen los siguientes posibles valores:

RDONLY         0x01
PR_WRONLY      0x02
PR_RDWR        0x04
PR_CREATE_FILE 0x08
PR_APPEND      0x10
PR_TRUNCATE    0x20
PR_SYNC        0x40
PR_EXCL        0x80

A parte, existe un parámetro para indicar el modo del fichero, válido únicamente para entornos Unix:

00400   Read by owner.
00200   Write by owner.
00100   Execute (search if a directory) by owner.
00040   Read by group.
00020   Write by group.
00010   Execute by group.
00004   Read by others.
00002   Write by others
00001   Execute by others.

No recuerdo de dónde saqué esta información, por lo que no os puedo poner la referencia.

| |

Laboratorio: cómo hacer un plugin para WordPress

Post2PDFAlgo que nos gusta hacer en Sentido Web es explicar cómo se hacen las cosas, no solo mostrar scripts que encontramos o que inventamos, para así que quienes estén interesados, puedan aprender cómo hacerlo ellos mismos.

El otro día sacamos a la luz el plugin para WordPress Post2PDF y hoy vamos a explicar que es lo que hicimos para desarrollarlo.

El plugin consta de dos archivos principales (a parte de los de la librería), el plugin en sí y un script que es llamado por el plugin que es el que se encarga de la exportación a formato PDF.

Read More “Laboratorio: cómo hacer un plugin para WordPress”

| |

Laboratorio: borrar filas de una tabla en HTML y en la BD

Ayer contábamos como borrar una fila de una tabla en HTML, y en los comentarios, Escael nos preguntaba cómo se podría hacer para que también se borrara de la base de datos.

Pues siguiendo con el modo en que se hace en la administración de WordPress, primero haremos el difuminado del color actual de la fila al color rojo y mientras se realiza el borrado en la tabla de la base de datos, haremos que parpadee el color de la fila. Cuando se haya realizado el borrado en la tabla de la base de datos, se eleminará la fila de la tabla HTML y se mostrará un mensaje de aviso de que se ha borrado de la BD.

Read More “Laboratorio: borrar filas de una tabla en HTML y en la BD”

Incluye tu propio YouTube en tu blog

Aunque es cierto que los servicios como YouTube son muy buenos y nos quitan muchas complicaciones, también es cierto que si quieres colgar un video en tu blog, queda más serio que sea mediante tu propio servicio que usando YouTube.

En este caso vamos a usar una aplicación llamada FlowPlayer, que simula el streaming, ya que permite mostrar los vídeos (FLV o SWF) mientras se están cargando, por lo que no es necesario un servidor de streaming.

Su uso es sencillo, tan solo tendremos que incluir un fichero SWF que contiene el reproductor de vídeos en nuestra página, e indicarle la ruta del vídeo. Será también necesario pasarle al swf un parámetro para indicarle el archivo js que contiene la configuración del reproductor.

<object type="application/x-shockwave-flash" data="FlowPlayer.swf" width="450" height="430" id="FlowPlayer">
<param name="allowScriptAccess" value="sameDomain" />
<param name="movie" value="FlowPlayer.swf" />
<param name="quality" value="high" />
<param name="scale" value="noScale" />
<param name="wmode" value="transparent" />
<param name="flashvars" value="configFileName=flowPlayer.js" />
</object>

En el archivo js, a parte de muchas otras cosas, podremos indicar cuales son los archivos que queremos reproducir, permitiendo que sea una lista y no un único archivo.

playList: [
{ name: 'Uno', url: 'uno.flv' },
{ name: 'Dos', url: 'dos.flv' }
]

El siguiente problema con el que os podéis encontrar es el de saber cómo crear ficheros FLV. Para ello nada más fácil que bajarnos la aplicación Riva FLV Encoder (hay una versión gratuita) y usarlo para convertir nuestro video (mpeg) en FLV.

De todas formas, si tenéis alguna duda, podéis consultar la siguiente página: WWW FAQs: How do I add video to my web site? en el que se detalla más el proceso necesario.

| | |

Detectar cambio de tamaño de letra en Javascript

La verdad es que lo sencillo es lo mejor, y para cuando estés en la necesidad de detectar si se produce un cambio en el tamaño de la letra, nada mejor que el script que nos ofrece la gente de A List Apart.
Te puedes preguntar por qué vas a querer detectar el cambio de tipo de letra. Si te interesa tener un sitio accesible a gente con discapacidades, pues es buena idea que pienses en ello, ya que suele ser algo que pueden hacer con frecuencia.
Además de detectar ese cambio, puede ser necesario realizar alguna acción. Por ejemplo, si usamos una imagen para un botón, si cambiamos el tamaño de la letra, la imagen no cambia, por lo que el botón quedará demasiado pequeño para el resto del texto, ¿solución?, si hay cambio de tamaño de letra, sustituimos la imagen por un elemento input botón.
Al principio decía que la solución es sencilla, lo cual la hace aún mejor. Se trata de crear una capa que contenga un espacio dentro y que esté oculta. Se guarda el tamaño de la capa y cada cierto tiempo se detecta si ha habido un cambio en este tamaño, si es así, se ha producido un cambio en el tamaño de la letra.
Text-Resize Detection
Demo
Código y ejemplos

| | |

Laboratorio: acceder a contenido dinámico de forma estática (caché)

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.

| | |

Laboratorio: búsqueda y reemplazo masivo en ficheros

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”

|

Triggers en MySQL

mysql.pngLa verdad es que tenía pendiente hacer un pequeño manual de triggers (disparadores) en MySQL después de haber hablado de las novedades de MySQL 5, pero siempre falta tiempo y por eso aprovecho a comentar el artículo que he encontrado.

Los triggers son algo muy útil sobre todo si queremos actualizar datos de forma automática. Imaginemos una tabla con los datos de un usuario, que pueden ser modificados desde distintas partes de nuestra aplicación, y es necesario que cuando se actualiza algún dato del usuario, se tenga que actualizar los datos de otra tabla. Podríamos actualizar los datos de la segunda tabla mediante código en cada uno de los casos en los que se actualiza la tabla del usuario en la aplicación, o bien podríamos crearnos un trigger que cuando se actualice la tabla de usuario (aunque sea “a mano”) se actualice directamente los datos de la otra tabla.

Un ejemplo para la creación de un trigger sería el siguiente:

CREATE TRIGGER disparador
AFTER INSERT ON usuarios
FOR EACH ROW
UPDATE tabla2
SET campo = valor;

Más información

Ease database management and automate functions with triggers in MySQL

Disparadores (triggers)

Vía / dzone

| |

Laboratorio: control input selector para HTML

Uno de los controles que he visto en alguna aplicación (sobre todo de tipo editor gráfico), es aquella en la que el valor numérico de una caja de texto se puede modificar mediante botones y mediante una barra de progreso.
input-selector.png
La versión que he realizado modifica los input type=”text” que haya en la página que tengan el atributo rel el valor selector[min,max], siendo min y max los valores mínimos y máximos que permite el controlador.

Entre otras cosas, el controlador permite modificar el valor mediante la forma tradicional (usando la caja de texto), usando las flechas, pinchando en la barra de progreso o haciendo drag en la misma barra.

Read More “Laboratorio: control input selector para HTML”

| |

Selecciona tu hoja de estilos mediante PHP

En 456 Berea Street nos muestran una forma muy interesante para poder mostrar tu página con diferentes hojas de estilo. Tiene el inconveniente de que solo admite dos estilos entre los que elegir.

Funciona aunque el javascript esté desactivado, pero no cuando estan desactivadas las cookies, pero no daría error, tan solo visitaríamos siempre la misma página.

El funcionamiento es sencillo, disponemos de dos directorios, cada cual con las hojas de estilo que nos interesa. Habrá un enlace a una página que cuando accedemos a ella nos cambiará de directorio, guardará el valor en una cookie y nos devolverá a la página a la página desde la que hemos hecho la llamada o a la raíz si no existía esa página. Y luego en cada página deberemos obtener el valor del directorio de las cookies y usarlo para recuperar la hoja de estilo correspondiente.

El script que se encarga de cambiar de directorio es el siguiente:

<?php
$layout = (isset($_COOKIE['layout']) && ($_COOKIE['layout'] == "zoom")) ? "main" : "zoom";
setcookie("layout", $layout, time()+31536000, '/');
$ref = (isset($_SERVER['HTTP_REFERER'])) ? $_SERVER['HTTP_REFERER'] : "http://{$_SERVER['SERVER_NAME']}/";
header("Location: $ref");
?>

Y luego en cada página tendremos que incluir lo siguiente:

Para recuperar el directorio.

$layout = (isset($_COOKIE['layout']) && ($_COOKIE['layout'] == "zoom")) ? "zoom" : "main";

Para seleccionar el estilo correcto.

<style type="text/css" media="screen,projection">
@import '/css/<?php echo $layout; ?>.css';
</style>

Build your own PHP style sheet switcher