Archivo

Archivo para la categoría ‘Javascript’

Conocer la posición de un objeto (Javascript)

Domingo, 4 de Abril de 2010 Gaspar Fernández Sin comentarios

Posteo un par de funciones para saber la posición absoluta (x,y) de un objeto en Javascript:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
function getX( oElement )
{
  var iReturnValue = 0;
  while( oElement != null ) {
    iReturnValue += oElement.offsetLeft;
    oElement = oElement.offsetParent;
  }
  return iReturnValue;
}

function getY( oElement )
{
  var iReturnValue = 0;
  while( oElement != null ) {
    iReturnValue += oElement.offsetTop;
    oElement = oElement.offsetParent;
  }
  return iReturnValue;
}

Encontré la función getY en este foro.

Con estas funciones podremos saber la posición de los objetos con respecto a la ventana del navegador.

Categories: Javascript Tags: , , ,

Funciones con nombres raros, y cortos (PHP, Javascript ,C)

Viernes, 12 de Marzo de 2010 Gaspar Fernández Sin comentarios

El objetivo de la programación, además de escribir poco (ya sabemos que todos los que programamos no queremos dejarnos las manos escribiendo), es hacer nuestro código mantenible, y para eso es necesario que nuestras funciones y métodos tengan nombres descriptivos.
Es decir, podemos definir 20 funciones: a(), b(), c(),… y mientras hacemos el programa tener un mapa mental de todas ellas, y utilizarlas, pero dentro de 6 meses, cuando vayamos a hacer la versión 2.0 de nuestro programa, ¿nos acordaremos de para qué valía cada función? Seguramente no; pero siempre que hacemos un for, lo más normal es escribir: “for (i=0;….”, “for (j=0;……)”, etc, eso sí que sale automático :)

Podemos, por ejemplo, tener nombres descriptivos, pero tal vez sean demasiado largos y muchos de ellos empezarán por las mismas letras, lo cual podemos considerarlo improductivo.

Si habéis curioseado prototype o JQuery, veréis cómo hay una llamada que se repite: $() y ella sola, con lo corta que es, hace maravillas para obtener objetos en Javascript. Los que hayan curioseado gettext recordarán la función _(), que sirve para traducir un mensaje. Estas funciones tienen en común que no vamos a parar de llamarlas en nuestros programas, sabemos lo que hacen y necesitamos una forma corta de llamarlas, ya que si desde nuestro programa llamamos a la función gettext() unas 2000 veces, estaríamos escribiendo 12000 caracteres de más, y en Javascript, si por ejemplo queremos llamar a document.getElementById(), con $() (no es lo único que hace) unas 60 veces, estaremos escribiendo unas 1320letras de más (y en Javascript eso se traduce en más transferencia por nuestra parte).

Pero cuando vamos a hacer una aplicación, todo se utiliza más o menos a un ritmo similar, aunque encontraremos tal vez funciones de formateo que llamemos constantemente, y esas funciones podrán tener un nombre raro que puede ser un símbolo. Pero con lo caprichosos que son los lenguajes de programación, ¿qué símbolos podemos utilizar? Deben ser caracteres con los que podamos empezar una función.
Aquí van algunos ejemplos para funciones PHP:

  • €();
  • ¡();
  • ç();
  • º();
  • ½();
  • _(); Pertenece a gettext
  • ł();
  • ¶();
  • ŧ();
  • ←();

C sólo permite el uso de _()

En Javascript, tenemos por ejemplo los siguientes:

  • $() Ojo con jquery y prototype
  • _()
  • º()
  • ª()
  • ß()
  • ð()
  • ŋ()
  • ħ()
  • ł()

Hay algunos más, pero no es plan de abusar, y no quiere decir que tenemos que usarlos, sólo que tenemos esa posibilidad; también muchos caracteres dependen de la codificación que utilicemos, por lo tanto pueden darnos ciertos problemas en el futuro (sobre todo en Javascript).

La web a mi gusto: Descargar contenidos de Moodle rápidamente

Viernes, 12 de Febrero de 2010 Gaspar Fernández Sin comentarios

Quiero continuar con una serie de posts que llevarán una temática parecida: muchas páginas web funcionan de una forma fija, pero a mí me incomoda bastante esa forma de funcionar, pero como necesito cubrir mis necesidades, intento que funcionen como yo quiero.
Tras esa gran descripción, quiero introducir mi problema:
Moodle es un sistema ampliamente aceptado como solución web académica, tiene muchas opciones y está muy bien, personalmente, en la Universidad, los profesores cuelgan apuntes, ejercicios y más material a la web, lo malo es que cuando llego a una página, me gusta descargar a mi disco duro todos los contenidos (pdfs, documentos, etc), y para ello invierto mucho tiempo.
Para ello viene bien una extensión para Firefox: Chickenfoot, también podemos utilizar Greasemonkey (también hay extensiones para IE y Safari).

Sin más preámbulos, el script utilizado para que Moodle descargue los contenidos más rápido es el siguiente:

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
var alltags = new Array();

function detecta_pdf(cont)
{
  var url_match = /https?:\/\/([-\w\.]+)+(:\d+)?(\/([\w/_\.]*(\?\S+)?)?)?/;
  var contenido=cont.match(url_match);
  document.location=contenido[0];
}

function pdfplay(que)
{
  var cont=que.innerHTML;
  que.innerHTML='';
  detecta_pdf(cont);  
}

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('div', 'resourcepdf', pdfplay);

La función CogeElementoPorClase() es la misma que utilicé en este post anterior para modificar la web de mi proveedor de hosting.

Tras ello debemos crear un trigger, es decir será el evento con el que se disparará automáticamente el script que acabamos de hacer; por ejemplo, para la Universidad de Málaga podemos decir que el script se dispare cuando la página a la que accedemos sea: http://*.cv.uma.es/mod/resource/view.php?id=*.

En principio el script fue pensado para los PDFs (el acrobat reader tarda bastante en abrirse cuando tienes que abrir más de 10 PDFs), pero puede servir para cualquier contenido. Por otra parte, aunque no está muy optimizado (la necesidad me llevó a hacer el script rápidamente) espero que os sea útil.

Caché+Compresión+Palabras clave en ficheros CSS y JS

Viernes, 22 de Enero de 2010 Gaspar Fernández Sin comentarios

Cuando nos aventuramos en un proyecto web con más o menos visitas, queremos que sea lo más rápido para el usuario y para ello enviar la menor cantidad de información (si nuestro hosting nos cobra además por transferencia también ganamos por esto), para ello podemos comprimir la información (y ya lo soportan la mayoría de los navegadores).
Aunque tenemos que tener en cuenta que si comprimimos información (la compresión es un proceso algo pesado), estamos gastando recursos de CPU que, si lo pensamos, estar comprimiendo la misma información a cada petición que nos hagan de un fichero Javascript es tontería; por tanto, una vez que lo comprimamos, lo almacenamos en disco, que este tipo de información no ocupa tanto.
Por otra parte, si eres de los que realizan una plantilla más o menos completa y la publica con pequeñas modificaciones en diferentes webs, o incluso estar preparados para que un cliente nos cambie la gama de colores y no echarnos las manos a la cabeza; o por ejemplo cuando tenemos que tener en cuenta el mismo color tanto en el código CSS como en el Javascript, podemos escribir ciertas palabras clave dentro del fichero CSS y Javascript que nuestro script PHP traducirá antes de enviar la información al usuario final.

Para ello, y para poco más es el siguiente script:

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
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
<?
/* tcjs.php versión 0.05 Copyright 2010 Gaspar Fernández*/

/* Inclusión de keywords y compresión de archivos JS y CSS */

/* El código fuente se entrega tal cual, sin garantía para ser */
/* estudiado y utilizado en cualquier entorno libre y no libre. */
/* Eso si, agradecería que me comunicárais si lo usáis en un proyecto */
/* mandando un mail a blakeyed@totaki.com; sólo para saber que esto  */
/* se está usando en algún lugar del mundo :) */

/* Configuración del script */

/* $basepath normalmente es la ruta donde se encuentra el script. Es la ruta base
absoluta a partir de la cual se encuentran todos los archivos. Esta ruta será padre
de la ruta donde se encuentre el fichero CSS o JS que llamaremos. */

$basepath = '/home/gaspy/proyectos/www/poesiabinaria/tests/';
/* $httppath es la URL base de nuestra web o sección, normalmente será la dirección con la que
abriremos el directorio web correspondiente a $basepath. */

$httppath = 'http://localhost/poesiabinaria/tests/';
/* $cachedir es el directorio donde se encontrarán los cachés de los ficheros JS y CSS */
$cachedir = $basepath.'var/gzcache/';
/* $excluded_files es un archivo de texto donde se encuentran (uno por línea) todos los ficheros
que no pasarán por el procesador. Sólo serán comprimidos y guardados en caché. */

$excluded_files = $basepath.'var/excluded';
/* $definiciones_file es un archivo php que incluiremos cargando las definiciones necesarias para
completar el contenido de los CSS y JS. Puede haber un fichero de definiciones tanto raiz como
en el directorio donde se encuentra el CSS o JS a procesar.*/

$definiciones_file = 'lib/tcjc_defs.php';
/* FIN de Configuración del script */

function gf_getgz_cachefile($file)
{
/* Obtenemos un nombre de fichero único para los archivos de cache */
global $cachedir;
$getstr = $file.sizeof($file).filemtime($file);
$hash = base_convert(md5($getstr),16,36); /* Hash en base36 */

return $cachedir.$hash;
}

function add_ending_slash($path)
{
/* Añade una barra al final de la ruta del directorio */
$sep = (PHP_OS == 'Windows')? '\':'/';
$path .= (substr($path,-1) == $sep)? '':$sep;
return $path;
}

function genera_y_cachea($file, $cachefile)
{
/* Genera el cache, sustituyendo las definiciones */
global $basepath, $definiciones_file, $httppath;

$definiciones = array ('%%http_path%%' => $httppath);
/* Si tenemos un archivo auxiliar para incluir definiciones */
if (file_exists($basepath.$definiciones_file))
require_once($basepath.$definiciones_file);

$local_defs = add_ending_slash(dirname($file)).$definiciones_file;

if (file_exists($local_defs))
require_once($local_defs);

$triggers = array_keys($definiciones);
$reemplaz = array_values($definiciones);
$contenidos = file_get_contents($file);
$contenidos = str_replace($triggers, $reemplaz, $contenidos);
file_put_contents($cachefile, $contenidos);
$gz = gzopen($cachefile.".gz","wb5");
gzwrite($gz, $contenidos);
gzclose($gz);
}

function comprime($file, $cachefile)
{
/* Símplemente comprime el archivo */
$contenidos = file_get_contents($file);

file_put_contents($cachefile, $contenidos); /* Hacemos un backup también */
$gz = fopen($cachefile.".gz","wb");
fwrite($gz, gzencode($contenidos));
fclose($gz);
}

function interpretar($file)
{
/* Mira el archivo de excluidos y si no debo interpretarlo, devuelve false */
global $excluded_files;
if (file_exists($excluded_files))
{
$excl = file ($excluded_files);
return (!in_array($file, $excl)); /* Si la encontramos, devolvemos FALSE */
}
return true;
}

$type = (isset($_GET['type']))?$_GET['type']:false;
$file = (isset($_GET['file']))?$_GET['file']:false;

// Nos aseguramos de que las dos esté especificadas
if (($type) &amp;&amp; ($file))
{

/* Establecemos las cabeceras http necesarias */
switch ($type)
{
case 'css': header("Content-type: text/css; charset=utf-8"); break;
case 'js' : header("Content-type: text/javascript; charset=utf-8"); break;
}
header("Cache-Control: must-revalidate");

if (file_exists($basepath.$file))
{
$origftm = filemtime($basepath.$file);
$cachefile = gf_getgz_cachefile($basepath.$file); /* Genera un nombre de archivo de caché único */

@$destftm = filemtime($cachefile); /* No daremos error si no existe el archivo */

if ($origftm>$destftm)
{
/* Si el fichero original es más nuevo que su caché, lo procesamos todo de nuevo */
if (interpretar($file))
genera_y_cachea($basepath.$file, $cachefile);
else
comprime ($basepath.$file, $cachefile);
}

if ( (isset($_SERVER['HTTP_ACCEPT_ENCODING'])) &amp;&amp; (strstr($_SERVER['HTTP_ACCEPT_ENCODING'], 'gzip')))
{
header("Content-Encoding: gzip");
header("Content-Length: ".filesize($cachefile.".gz"));
readfile ($cachefile.".gz"); /* Si el navegador permite contenidos gzipeados... */
}
else
readfile ($cachefile);
}
/* else ERROR no existe el fichero CSS o JS */
}
/* else ERROR, no se ha especificado tipo de fichero o el fichero */
?>

También puedes descargarlo directamente: aquí: tcjs.php.gz (2.2Kb)
Lo que pretendo es que con este script sólo tengamos que copiar el archivo, definir un par de cosas y funcionar, y que sea totalmente transparente, tanto que nos olvidemos de que lo estamos usando.

Para instalarlo, podemos copiarlo en el directorio raiz de nuestro servidor, el ejemplo que muestro es para Apache (y es necesario tener mod-rewrite), y crear un archivo .htaccess que contenga lo siguiente:

1
2
3
4
RewriteEngine On
RewriteBase /
RewriteRule ^(.*\.css) tcjs.php?type=css&amp;file=$1
RewriteRule ^(.*\.js) tcjs.php?type=js&amp;file=$1

También tenemos que prestar atención a las primeras líneas de código del script tcjs.php:

  • $base_directory será el directorio raiz de todos los css, js, definiciones y caches (no es estrictamente necesario que sea de estos últimos). Es decir, si nuestra web está en /home/www/public_http/ no debemos llamar a nada que esté en un nivel inferior (podrán estar dentro de subdirectorios pero a partir de este punto); es más, los CSS y JS estarán por ejemplo en /home/www/public_http/js; en este caso $base_directory=’/home/www/public_http/
  • $httppath será la dirección web de menor nivel que vayamos a llamar; por ejemplo: http://www.midominio.com/
  • $cachedir será el lugar donde creemos los ficheros de caché, este directorio tiene que tener permisos para que el servidor web pueda escribir en él.
  • $excluded_files será el nombre de un archivo cuyo contenido serán todos los ficheros que no queramos que sean procesados, sólo serán comprimidos. Por ejemplo, si el fichero es /home/www/public_http/js/nieve.js y nuestro $base_directory es /home/www/public_http/, el texto que deberíamos incluir en el archivo será js/nieve.js
  • $definiciones_file es la ruta relativa a un archivo PHP que se cargará cuando vayamos a generar un CSS o JS. Puede haber dos tipos de archivo de definiciones, el global, situado en $base_directory.$definiciones_file y el local situado en (el mismo directorio que el archivo CSS a procesar).$definiciones_file. Por ejemplo:
    • $base_directory=’/home/www/public_http/’
    • El fichero JS que cargamos estará en /home/www/public_http/js/mijavascript.js
    • $definiciones_file=’defs/definiciones.php
    • tcjs.php cargará dos ficheros de definiciones situados en /home/www/public_http/defs/definiciones.php y en /home/www/public_http/js/defs/definiciones.php

El fichero de definiciones (que ya hemos visto donde está contendrá un array llamado $definiciones, pero no lo crearemos de nuevo, sino que lo continuaremos, por ejemplo:

1
2
3
4
...
$definiciones['color_base'] = '0ff00f';
$definiciones['ruta_static'] = 'http://estaticos.miservidor.com/';
$definiciones['visibilidad_mensajes'] = ($debug)?'visible':'hidden';

Podemos utilizarlo por ejemplo para definir un color de objeto desde PHP y que el CSS lo incluya (puede que debamos usarlo desde PHP también, por ejemplo para generar una imagen con ese color de fondo); para una ruta de ficheros estáticos en un servidor (normalmente en mi servidor local será otra ruta), para mostrar directamente una capa que está oculta mientras estamos programando algunas opciones en Javascript, y para muchas cosas más.

Andanzas en Facebook: Publicando en los perfiles II

Sábado, 19 de Diciembre de 2009 Gaspar Fernández 6 comentarios

Hace unos meses hice un post sobre la publicación en los perfiles del usuario en Facebook desde nuestras aplicaciones. Bien, desde el día de hoy (20/12/2009) han cambiado los métodos.

Llevan amenazando ya un tiempo, pero hasta ayer no les hice caso, y es que los nuevos métodos (aunque prometen unificar todo el sistema de publicaciones de Facebook, autopublicaciones en perfiles, para los amigos, metadatos y lectura desde nuestras aplicaciones (más info. aquí), tienen detalles que no a todo el mundo le gustan. Como por ejemplo las publicaciones multi línea, el uso de palabras clave {*actor*}, {*mensaje*}, {*palabraquemeacabodeinventar*} dentro de todos los campos de publicación y la limitación de los action links a 1 !!!!!!! :(

Lo que sí han hecho es simplificarlo todo: no tenemos que crear un template para luego utilizarlo, y el hecho de que podamos definirlo todo por código y llamarlo cuando queramos, además, no tenemos límite de publicaciones distintas, ya que como las tenemos que crear cada vez que publiquemos, podemos hacer lo que queramos (antiguamente había un límite de 100 templates por usuario, suficientes, pero a lo mejor alguien necesitaba más).

Se potencia el uso de JSON (como los arrays en Javascript), y es que si es desde Javascript desde donde llamamos a la función, lo vamos a necesitar.

Aquí incluyo un fragmento de código para una publicación (he acompañado cadenas largas y palabras clave en todas partes para ver el comportamiento de Facebook con ellas, observar qué límites tenemos y demás):

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
var actionlinks=[{"text":"Mi minuto filosófico","href":"http://apps.facebook.com/minutofilosofico/"},{"text":"Ésta frase en mi perfil!","href":"http://apps.facebook.com/minutofilosofico/?frase=1234"}]

var attachment = {'name': '{*actor*} No sé si funciona aquí, veamos si aparece un enlace, o también, en caso de un texto realmente largo qué pasa, porque lo mismo me pongo a escribir letras, y pasa como en el caption, que sólo sale un par de líneas, y me quedo con las ganas de que salga más texto, pero bueno, el caso es que tengo que probar tanto por el tutorial como por mis aplicaciones.',
          'properties':{0:{'text':'enlace 1',
                    'href':'http://www.totaki.com'},
                                   1:{'text':'enlace 2',
                    'href':'http://www.totaki.com'},
  },
          'description': 'Una descripcion \nlarga que incluye un enlace que \nno funciona bien: <a href="http://www.totaki.com/">con un enlace</a> y una <strong>negrita</strong> que<br/> tampoco funciona, porque Facebook ha limitado lo que puede salir en estos sitios; además, mi\n mensaje es lo suficientemente largo como para que aparezca el texto de Mostrar más. {*actor*} aquí no funciona',
          'href':'http://www.totaki.com',
          'caption': '{*actor*} está probando algunas cosillas, pero ya puestos vamos a probar un caption largo largo largo, para probar la capacidad de estos nuevos métodos que tiene Facebook para publicar en los perfiles de la gente. Tal vez el caption se corte, tal vez, muestre el texto de ver más, o tal vez el texto ni se publique por ser demasiado largo, veamos qué pasa.',
          'media':[{'type':'image',
                'src':'http://www.totaki.com/unafoto.jpg',
                'href':'http://www.totaki.com'},

],
                  };
Facebook.streamPublish('Texto para el usuario', attachment, actionlinks, null, 'Otra frase');

Nos aparece algo así:
Publicando en Facebook (tamaño completo)
En donde nos damos cuenta que:

  • Sólo caption acepta la palabra clave {*actor*} y según la documentación, sólo esa palabra clave
  • No se aceptan retornos de carro en description, sólo se aceptarán en name.
  • Nuestra publicación puede ser un enlace (pinchando en el nombre)
  • Description no acepta fbml, es texto plano, aunque resalta los enlaces

Más adelante, cuando publicamos, nos damos cuenta de que sólo se permite un action link (enlaces que acompañan a Comentar y Me gusta), en Facebook llevaban reduciendo los action links unos días para todas las publicaciones.

Aunque un detalle importante es la inclusión de las propiedades (properties), es un array que puede contener textos y enlaces que los acompañen, y se publican, he podido hacer una publicación con 12 propiedades sin problemas.

El código superior puede servir como plantilla para vuestras publicaciones.

Pero, ¿qué pasa si quiero incluir el nombre del usuario que publica en name o description? debemos recurrir a la API de Facebook, podríamos pensar que desde fbml podemos hacerlo, pero no lo permiten en estos nuevos métodos, por lo que tendremos que recurrir a un lenguaje de servidor como PHP; de la siguiente forma:

1
$yo = $facebook->api_client->users_getInfo($user_id, "uid, name, first_name");

$user_id tiene que estar previamente definida y ser la id del usuario actual (para ello, sólo hay que seguir el ejemplo que te da Facebook para crear una aplicación, copiado y pegado).
El dato que queremos, es decir el nombre, lo encontraremos en $yo[0]['first_name'], por lo que, en mitad del código fbjs anterior, si nos encontramos en un archivo PHP podemos hacer lo siguiente:

1
2
3
var attachment = {'name': '<? echo $yo[0]['first_name']; ?> sí que funciona aquí, veamos si aparece un enlace, o también, en caso de un texto realmente largo ...',
          'properties':{0:{'text':'enlace 1',
                    'href':'http://www.totaki.com'},

¡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.

Visita otras webs de la red