Archivo

Archivo para Agosto, 2009

¡La web a mi gusto!

Viernes, 21 de Agosto de 2009 blakeyed Sin comentarios

A menudo, encontramos páginas web que pueden no ser compatibles con el navegador que estamos utilizando, o el sistema operativo en el que nos encontramos. Por ejemplo, últimamente, estoy usando Firefox 3.5 sobre Gentoo GNU/Linux. Es normal encontrarse webs diseñadas para Internet Explorer, o incluso puede que por las tipografías utilizadas no encajen bien en nuestro sistema.

En mi caso, hay una web que visito muy a menudo, y es la de mi proveedor de hosting en la que a veces, por ejemplo cuando quiero mandar un ticket; me veo obligado a utilizar el scroll horizontal, ya que al no especificar el ancho del textarea como propiedad en el CSS, lo han hecho en caracteres (con la propiedad COLS); veo un textarea mucho más grande que mi pantalla y cuando quiero revisar el mensaje que estoy mandando tengo que desplazarme constantemente de derecha a izquierda.

La solución fácil, sería que ellos cambiaran la forma en la que dimensionan el textarea, pero hay multitud de ocasiones en las que eso no se puede pedir. Tenemos el ejemplo del Manifiesto de Apoyo al autónomo de Punto Radio; la página, internamente está muy mal diseñada, y tras varios emails con el webmaster y éste decirme que la página no fallaba (la solución sería añadir un estilo a los input text del nombre y los apellidos, y ahí especificar el tamaño en pixels, se seguiría viendo igual en todas partes).
Punto Radio
Pero para nosotros y para andar por casa, vamos a utilizar el DOM Inspector (en el menú Herramientas), desde el que, como vemos más abajo hemos podido modificar la propiedad size de los input text en cuestión. (Para seleccionar el textbox pulsamos en el botón de arriba a la izquierda de la nueva ventana y luego pinchamos sobre el elemento dentro de la página; tras ello nos dejará seleccionar y modificar las propiedades con el botón derecho).
Punto Radio - Ahora se ve bien

Esto está bien para una web que vas a visitar una vez nada más. Pero hay veces que tienes que visitar una web de este tipo muchas veces, y es en este punto cuando tenemos que recurrir a extensiones como Chickenfoot o GreaseMonkey; estos dos, nos permiten ejecutar código javascript y dispararlo en un momento determinado, por ejemplo, al entrar en una web.

Para eso hice este script, que voy a utilizar para cuando tenga que enviar un ticket a mi proveedor de hosting:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
var alltags = new Array();

function redimensionalo(que)
{
    que.style.width='600px';
}

function CogeElementoPorClase(tipo, clase, quehacer)
{
  var alltags=document.getElementsByTagName(tipo);

  for (i=0; i<alltags.length; i++)
  {
    if (alltags[i].className==clase)
    {
    quehacer(alltags[i]);
    }
  }
}

CogeElementoPorClase('textarea', 'ClaseTextarea', redimensionalo);

El script, cogerá el textarea que tenga la clase ‘ClaseTextarea’ y llamará a la función redimensionalo que modificará su ancho y le establecerá 600px (como el elemento no tiene id no podemos utilizar getElementById). Gracias a una de las dos extensiones que mencioné antes, podremos hacer que ese script se ejecute nada más entrar en la sección de tickets de mi proveedor.

Aunque no termina todo ahí, podemos automatizar muchas acciones con estos dos programas, extraer información, hacer clicks en ciertas zonas de las páginas, etc; muchas veces necesitamos hacer tareas repetidas veces y estas extensiones pueden solucionarnos el día.

Script para subir archivos rápidamente (y actualizarlos)

Jueves, 13 de Agosto de 2009 Gaspar Fernández 2 comentarios

Normalmente, cuando estoy desarrollando aplicaciones para Facebook, primero, las hago Offline, ejecutándolas en mi servidor local y, una vez que funcionan, las subo al servidor desde las que se ejecutarán, aunque muchas veces hay ciertos problemas una vez se está ejecutando la aplicación de forma definitiva, que requieren hacer algunas modificaciones más, y con esto, subir varias veces los archivos de los scripts.

Por otra parte, a veces, en ciertas aplicaciones web, es necesario introducir cierta información nueva (que hago fuera de línea) y cuando todas las novedades han sido introducidas procedo a subirlo todo junto.

También es importante, sobre todo para proyectos más o menos grandes, que sólo se suban al servidor los archivos nuevos o modificados antes de la última actualización, es muy importante, ya que la ejecución puede eternizarse si tenemos que subir 10Mb de datos cada vez que queremos actualizar, por lo tanto, almacenamos en un archivo el momento en que se ejecutó el script por última vez, y cada vez que buscamos archivos, lo hacemos con los que han sido actualizados a partir del momento que almacenamos en el fichero anterior.

Para eso creé este script (aún queda mucho trabajo por hacer), pero por ahora hace bastante bien el apaño. Yo llamo a este archivo (autoftp):

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
#!/bin/bash

servidor=$1
ruta_serv=$2
ruta_local=$3
endline="
"

dir_actual=`pwd`
cd $3

if [ -e $ruta_local"/last_update" ]; then
    f_locales=`find . -newer $ruta_local/last_update`
else
    f_locales=`find .`
fi

function cierratodo()
{
    kill $ftp_pid
    kdialog --msgbox $1
}

function estadoman()
{
    while read estado
    do
        estadonum=`echo $estado | cut -d' ' -f1`
        echo $estado
        if [[ $estado != "Not connected" ]]; then
            if [[ $estadonum == "226" ]]; then
                subidos=$(($subidos+1))
                kdialog --passivepopup "Subido archivo "$subidos" de "$total_archivos 2
            elif [[ $estadonum == "221" ]]; then
                cierratodo "Los archivos se subieron con éxito"
                date +%s > $ruta_local"/last_update"
            # Fin del programa
               
            fi
        else
            echo "Cerrandooo"
            cierratodo "La conexión se cerró inesperadamente"
        fi
    done
}

to_do="pass"$endline"cd $ruta_serv"$endline;
last_dir="";
total_archivos=0
for i in $f_locales
do
        arch_relat=${i:2}
        if [ ! -z $arch_relat ]; then
            nombre_dir=`dirname $arch_relat`
            if [[ $nombre_dir == "." ]]; then
                nombre_dir=""
            fi
                if [ -d $arch_relat ]; then
                    to_do=$to_do"cd $ruta_serv/$nombre_dir"$endline
                    to_do=$to_do"mkdir $ruta_serv/$arch_relat"$endline
                else
#                   echo "*"$nombre_dir"="$last_dir"*";
                    if [[ $last_dir != $nombre_dir ]]; then
                        last_dir=$nombre_dir
                        to_do=$to_do"cd $ruta_serv/$nombre_dir"$endline
                    fi

                    to_do=$to_do"put $ruta_local/$arch_relat "`basename $arch_relat`$endline
                    total_archivos=$(($total_archivos+1))
#                     to_do=$to_do"put $3/$arch_relat\n"
                   echo "FICHERO --- $arch_relat";
                fi
        fi
done

OLDIFS=$IFS
IFS="
"

to_do=$to_do"quit"$endline

if [[ $total_archivos > 0 ]]; then
    for j in $to_do ; do echo $j;done;

    rm /tmp/ftp_pipe > /dev/null 2>&1
    mkfifo /tmp/ftp_pipe > /dev/null 2>&1

ftp -v totaki.com > /tmp/ftp_pipe <<EOF &
`for j in $to_do ; do echo $j;done;`
EOF

    ftp_pid=$!

else
    kdialog --msgbox "No hay archivos para subir"
fi
cd $dir_actual
IFS=$OLDIFS

rm /tmp/ftp_pipe > /dev/null 2>&1

Para su uso, son necesarios tres parámetros:

  • Dirección del servidor
  • Ruta donde se colocan los archivos en el directorio remoto
  • Ruta de donde se buscarán los archivos en el directorio local

Requerimientos:

  • kdialog (Se puede modificar el script para utilizar otro fácilmente)
  • ftp (Este programa se encargará de subir los archivos)

Para configurar el script es necesario editar el archivo .netrc localizado en nuestro home y donde irá el nombre de usuario y contraseña del FTP (este fichero es leído por ftp automáticamente y así no necesitamos incluir passwords ni en la línea de comando ni en el propio script, que quedan muy feos). El fichero .netrc tiene la siguiente estructura:

machine [servidor] login [usuario] password [contraseña]

Por ejemplo podemos hacer un .netrc que contenga:

machine www.servidor.com login pepito password josefina

Una vez completado esto, podemos asociar una tecla al script, y con ello simplemente pulsando esa tecla se subirán los archivos al servidor.
Por último, yo lo tengo configurado en Fluxbox con Mod4+F5 o lo que es lo mismo la tecla de Windows y F5; basta con crear un script lanzador que incluya lo siguiente (yo lo llamo ftp_upload):

1
2
3
4
#!/bin/bash
# Modelo
#/home/gaspy/.scripts/autoftp [servidor] [ruta interna] [ruta_local]
#/home/gaspy/.scripts/autoftp ftp.servidor.com http_docs/pruebas /home/yomismo/proyectos/pruebas

añadir al fichero keys dentro de /home/[usuario]/.fluxbox/ la siguiente línea:

Mod4 F5 :execcommand ~/.scripts/ftp_upload

Andanzas en Facebook: Publicar en el muro personal fácilmente

Martes, 11 de Agosto de 2009 Gaspar Fernández 25 comentarios

Desde el 20/12/2009 este método de publicación no está permitido por Facebook, para ver el nuevo método, ver este artículo.

Una de las cosas más comunes cuando se hace una aplicación para Facebook es la publicación de contenidos en el muro de la persona que ha ejecutado la aplicación. Esto al final es como un resultado de la ejecución de dicha aplicación (de hecho el objetivo de muchas de ellas es la publicación de un mensaje en el perfil), y de paso nos sirve como promoción para que más gente nos conozca.

La API de Facebook nos proporciona las herramientas para poder utilizar esta característica, que por ejemplo podemos llamar desde FBJS de la siguiente manera:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<script>
var template_id = xxxxxxxxx; // Es el identificador de nuestra plantilla de publicación, más adelante se explica cómo se obtiene este ID. (Sustituir las xxxxxxxxx con ese número).
// En la ventana de publicación, el texto que saldrá para pedirle a los usuarios que publiquen el resultado.
var user_message_prompt = "Comenta algo... si quieres";
// El texto de muestra que saldrá a la hora de publicar.
var user_message = {value: ""};

// La información que introducimos en la plantilla, por ejemplo imágenes y textos fijos que acompañarán nuestro mensaje
var template_data={"cuantagente":"0.04", "images":[{"src":"archivo.jpg", "href":"enlace"}]}
var body_general="Mensaje que aparecerá en el perfil junto a las fotos";

var continuation = function() {
// Podemos dejarlo en blanco si lo deseamos
};

Facebook.showFeedDialog( template_id, template_data, body_general, '', continuation, user_message_prompt, user_message );
</script>

Con este código, ya se mostraría la pantalla de publicación, podemos introducirlo dentro de otros scripts para que se dispare en el momento que nosotros queramos.

En la imagen vienen explicados algunos elementos:
Elementos en la publicación

El elemento template_data, incluirá la información de las palabras clave que hemos incluído en nuestra plantilla, como por ejemplo cuantagente, más adelante se hablará de ello; y además, las imágenes que se incluyen así como un enlace en cada una, todo esto en notación JSON. Básicamente, para no leer mucho, es un formato para intercambio de datos, pero usado también para declarar objetos en Javascript y se utiliza de la siguiente manera:

1
var objeto={"clave1":"valor1", [{"clave2-1":"valor2-1"},{"clave2-2":"valor2-2"}], "clave3":"valor3"};

La función continuation, se llamará una vez se cierre el diálogo de publicación, ya sea tras publicar el contenido como al cerrar la ventana sin publicar. No es posible determinar si se ha publicado o no, al menos Facebook no nos va a dar esa información.

Como hemos visto, es necesaria una plantilla de publicación (feed template), y ésta tendrá un código identificador (template bundle id), para conseguirlo, tenemos que entrar en la zona de administración de nuestras aplicaciones de Facebook (www.facebook.com/developers/apps.php).
Crear plantilla de publicación
A continuación, seleccionamos la aplicación.
Antes de continuar, tenemos que tener en cuenta que, dado que son plantillas, se establecerán palabras clave, que a la hora de la publicación serán sustituidas por lo que realmente significan, y en Facebook estas palabras claves tienen la siguiente forma: {*palabraclave*}. Por ejemplo, la palabra clave {*actor*}, a la hora de publicar un mensaje en el muro, se traducirá por el nombre del usuario que ha realizado la acción, en este caso, el nombre del usuario que acaba de ejecutar nuestra aplicación.

Dicho esto, primero tenemos que crear plantillas de una línea (one line templates), éstas se utilizarán en los resúmenes de los perfiles y, como nos indican en la ayuda del sistema suelen empezar por la palabra {*actor*}, serán las pequeñas historias que se publican en una línea, podemos poner enlaces (a la aplicación por ejemplo), en incluso más palabras clave.

En la siguiente pantalla, configuraremos el mensaje que aparecerá en los muros (el grande, con fotos y todo; aunque por ahora no nos preocupemos de la foto):
Configurando la plantilla
En esta plantilla hemos creado la palabra clave {*cuantagente*}, y más abajo, donde pone plantilla de datos simple, tenemos que escribir la correspondencia en notación JSON.

Tras ello, podemos incluir un enlace de acción o action link, lo más común es utilizarlo como un enlace a nuestra aplicación, será el que aparezca aquí:
Action Link
Debemos configurar el texto del enlace (podemos utilizar también palabras clave) y el enlace en cuestión, y ya sólo publicarlo. Tras ello, aparecerá en el centro de la pantalla una ventana de diálogo con el ID de la plantilla, y ese dato es el que debemos copiar en el código de arriba.
También podemos acceder más adelante a ese número y ver las plantillas que tenemos registradas, si accedemos a Registered Templates Console.

Podemos ver cómo algunas aplicaciones tienen más de un Action Link, para poder hacerlo nosotros, tenemos que hacerlo por código, registrando la plantilla desde la API, para más información, podéis visitar la wiki de desarrolladores de Facebook.

Para la inclusión de imágenes en la publicación, siguiente el ejemplo, tenemos que manipular template_data, añadiendo el elemento “images”, con el siguiente valor:

1
2
3
4
5
6
7
var template_data={"dato1":"valor1", "<strong>images</strong>":[
{"src":"archivo.jpg", "href":"http://www.miweb.com"},   // Imagen 1
{"src":"archivo2.jpg", "href":"http://apps.facebook.com/mi_aplicacion/"},   // Imagen 2
{"src":"archivo3.jpg", "href":"http://www.totaki.com/poesiabinaria"},   // Imagen 3
......
]
}

ETA, DÉJANOS EN PAZ

Sábado, 1 de Agosto de 2009 Gaspar Fernández Sin comentarios

http://lahuelladigital.blogspot.com/2009/07/llamamiento-toda-la-blogosfera.html

Categories: General Tags: ,

Visita otras webs de la red