Contenido de la categoría Turoriales

« Entradas anteriores

Formas de acortar un condicional de varios elementos

Estaba mirando stackoverflow cuando he encontrado la pregunta que da nombre a esta entrada, me ha encantando ver que tanta gente añade sus propuestas y hay tantas que no me he podido resistir las ganas de compartir esto con vosotros.
NOTA: Los créditos de toda la entrada se van a stackoverflow y a sus respectivos usuarios.

Imaginemos que tenemos un condicional largo como el siguiente:

if (value == 1 || value == 16 || value == -500 || value == 42.42 || value == 'something' ) {
// blah blah blah
}

Y queremos acortarlo para que nos sea más fácil de mantener y gestionar, bien, a continuación varias formas de tratar ese condicional de una forma un poco alternativa:

Primera opción (no compatible con IE)

var a = [1, 16, -500, 42.42, 'something'];
var value = true;
if (a.indexOf(testVar) > -1){
// blah blah blah
}

Lo que hace es utilizar la función indexOf de Array, la cual nos retorna la posición del elemento que estemos buscando, si el array no contiene lo que buscamos devuelve -1. Podéis obtener más información del siguiente enlace: pulsa aquí.

Basicamente la mejora sería implementar un indexOf manualmente.
Object.prototype.in = function(){
for(var i = 0; i < arguments.length; i++){
if (this == arguments[i]) return true;
}
return false;
}

if (value.in(1, 16, -500, 42.42, 'something')){
// blah blah blah
}

Otra alternativa menos sofisticada, el mítico switch:

switch (value) {
case 1 :
case 16 :
case -500 :
case 42.42:
case 'something'
//código
break;
}

Basicamente es como el if pero a lo vertical.

Otra opción será creando un objeto, y luego accediendo directamente al indice del mismo:

var accept = { 1: true, 16: true, '-500': true, 42.42: true, something: true }; //mas corto cambiando el true por un 1
if (accept[value]) {
// blah blah blah
}

Sinceramente esta me parece una idea muy original, pero menos practica que las otras.

Pues listos, 3 métodos alternativos para comprobar si un array contiene un elemento dado.

… por cierto 3 no son tantas :P

Lo bueno de FireBug para Internet Explorer 6+

Buxplorer es un pequeño bookmarklet (unas 700 líneas de chatarra) que te iniciará una barra inferior en tu Internet Explorer y que te permitirá recorrer el código HTML viendo los margenes y los paddings de cada elemento, de la misma forma que lo hace Firebug. Es un excelente complemento para la developer toolbar (que tan solo te bordea el elemento).

Hace más de un año que tengo esto pendiente de terminar, naturalmente es una beta que funciona con pinzas, pero funciona:

HTML:
  1. javascript:scScript=document.createElement('script');scScript.src='http://www.javascript.es/bmk/buxplorer.js?nocache='+Math.random();scScript.type='text/javascript';void(document.getElementsByTagName('head')[0].appendChild(scScript));

Recuerda, el bookmarklet que os propongo sólo funciona con Internet Explorer 6.

A ver si alguien se anima a meterle un empujón :), y si lo pruebas, me das tu opinión (O el gran FSM colgará un Ubuntu al azar).

Configurar VirtualHost para tener varios dominios con su directorio cada uno en Apache

Esto me lo dejo aquí a modo de recordatorio para configurar el dichoso httpd.conf para poder tener varios sitios en local con su correspondiente dominio (local tambien).

Primero añadimos los dominios en el archivo hosts:

127.0.0.1 local.dominio-1.org
127.0.0.1 local.dominio-2.net

Y luego añadimos las siguiente líneas a nuestro querido httpd.conf:

CODE:
  1. NameVirtualHost  127.0.0.1
  2. <VirtualHost local.dominio-1.org>
  3.     ServerName    local.dominio-1.org
  4.     DocumentRoot    "D:/www/dominio-1.org/web/"
  5.     DirectoryIndex  index.php
  6.     AccessFileName  .htaccess
  7.     ErrorLog        "D:/www/dominio-1.org/logs/error.log"
  8.     LogLevel        warn
  9.     CustomLog      "D:/www/dominio-1.org/logs/access.log" combined
  10.     <Directory "D:/www/dominio-1.org/web/">
  11.         Options -Indexes FollowSymLinks
  12.         AllowOverride AuthConfig FileInfo
  13.         Order allow,deny
  14.         Allow from all
  15.     </Directory>
  16. </VirtualHost>
  17.  
  18. <VirtualHost local.dominio-2.net>
  19.     ServerName    local.dominio-2.net
  20.     DocumentRoot    "D:/www/dominio-2.net/web/"
  21.     DirectoryIndex  index.php
  22.     AccessFileName  .htaccess
  23.     ErrorLog        "D:/www/dominio-2.net/logs/error.log"
  24.     LogLevel        warn
  25.     CustomLog      "D:/www/dominio-2.net/logs/access.log" combined
  26.     <Directory "D:/www/dominio-2.net/web/">
  27.         Options -Indexes FollowSymLinks
  28.         AllowOverride AuthConfig FileInfo
  29.         Order allow,deny
  30.         Allow from all
  31.     </Directory>
  32. </VirtualHost>

Y listos! ideal para los que no se aclaran ni p'atrás (como yo :P).

NOTA: modificad las comillas “...” por las de SHIFT+2.
NOTA 2: Creo que nadie lo ha probado, ya que había un fallo en el paste y no se veía el código VirtualHost ...

Cómo crear un archivo vacío en Windows y Linux/BSD

Para sistemas Linux/BSD:

dd if=/dev/zero of=nombre_archivo.txt bs=1024 count=1

donde 1024, podemos poner el valor que queramos (por defecto son bytes). Podemos usar 100M para crear un archivo de 100MB o 3G para crear un archivo de 3GB.

Y en sistemas windows:

fsutil file createnew nombre_archivo.txt 1024

donde 1024 es el tamaño en bytes.

En ambos, el nombre del archivo creado será el especificado en "nombre_archivo.txt"

Mis datos son mios, y mi navegación tambien, ¿ok?

Estamos sentados en una cómoda butaca del congreso webmasters y nos hemos puesto a charlar con una pareja muy simpática que nos ha comentado una historia muy triste del robo de varios dominios por culpa de gmail (después de esto aconsejo NO usar gmail para el contacto administrativo de un dominio). Aunque eso no es del tema que quiero hablar, me ha hecho decidir a explicar un poco la opinión que tengo de la gran mano que todo lo cubre de Google. Me explico:
En un principio, Google era mi gran amigo. Google me facilitaba la información que necesitaba (confirmo que aún uso su buscador, insuperable). Google me proporcionaba una serie de herramientas que, aunque nunca me he decidido a utilizar (a excepción de Adsense) me parecían muy bien.
El problema vino el día que me empecé a preocupar por el hecho que casi cada página que visito tiene publicidad de Google, o estadísticas de Google, o uno de esos cientos de servicios "gratuitos" que nos ofrece a los internautas y webmasters. Me dije: Vaya! si Google me está espiando por todas bandas!!, si encima uso gmail, y gcalendar y todo eso, y saben por donde navego, y mis intereses, y mis busquedas... ostia... yo no se vosotros, seguro que ya habíais llegado a esta conclusión, pero...sinceramente me sentí muy iluso y muy confiado.
Llegado a este punto os preguntaréis a donde quiero llegar y yo me pregunto si pensaréis que estoy loco o que tengo razón, o incluso sabiendo esto creéis que Google aún es vuestro amigo, pues quiero llegar al punto de explicar cómo capé Google de mi vida y cómo sólo le permito saber qué busco (por como buscador es insuperable):

Explicación fácil:

Hay un archivo en nuestro sistema operativo (si usamos Windows o Linux, desconozco en MAC) llamado hosts.
Este archivo contiene una serie de redirecciones de hosts (dominios y subdominios) y IPs asociadas.
Lo que hace el sistema operativo para saber qué dirección IP tiene un dominio, es primero consultar este archivo y si no existe el host, pues consulta el servidor DNS.
El archivo hosts está en:

  • Windows 95/98/Me: C:\Windows\hosts
  • Windows NT/2000: C:\WINNT\System32\drivers\etc\hosts
  • Windows XP: C:\WINDOWS\system32\drivers\etc\hosts
  • Windows 2003: C:\WINDOWS\system32\drivers\etc\hosts
  • Windows Vista: C:\WINDOWS\system32\drivers\etc\hosts
  • Unix (en general): /etc/hosts
  • Linux (en general): /etc/hosts
  • MacOS (en general): /etc/hosts

lo editáis.
Lo que vamos a hacer es añadir un listado de servidores de publicidad y monitorización, tanto de google como de otras empresas y la apuntaremos hacia una IP local (127.0.0.1):

127.0.0.1 www.google-analytics.com
127.0.0.1 googlesyndication.com
127.0.0.1 pagead.googlesyndication.com
127.0.0.1 pagead2.googlesyndication.com
127.0.0.1 advertising.com
127.0.0.1 smartadserver.com
127.0.0.1 r1.beta.ace.advertising.com
127.0.0.1 uac.advertising.com
127.0.0.1 bannerfarm.ace.advertising.com
127.0.0.1 doubleclick.net
127.0.0.1 ad.z5x.net
127.0.0.1 ad.yieldmanager.com
127.0.0.1 fastclick.net
127.0.0.1 ssl.google-analytics.com
127.0.0.1 as.casalemedia.com
127.0.0.1 ad.doubleclick.net
127.0.0.1 ads1.msn.com
127.0.0.1 ads.sup.com
127.0.0.1 dehp.myspace.com
127.0.0.1 demr.myspace.com
127.0.0.1 desk.myspace.com
127.0.0.1 delb.myspace.com
127.0.0.1 delb2.myspace.com
127.0.0.1 debr.myspace.com
127.0.0.1 view.atdmt.com
127.0.0.1 rad.msn.com
127.0.0.1 themis.geocities.yahoo.com
127.0.0.1 impes.tradedoubler.com
127.0.0.1 code.impresionesweb.com

¿Hay alguien que piense como yo?

Actualización

Pablo de tintapixel.com.ar propone en los comentarios hacer una copia de seguridad. Es buena idea.
Lesm.es me comentó que sería necesario cambiar los permisos del archivo hosts a 'solo lectura' o 440.

Gracias Oscar por el host en los comentarios.

Añadidos tradedoubler y impresionesweb.

Distancia entre dos puntos en AS2

Estamos desarrollando con Joan Garnet una cosita que ya enseñaré y he montado una función para detectar la distancia entre el centro del Stage y el ratón, ahí va:

Actionscript:
  1. import flash.geom.Point;
  2.  
  3. var punt_centre_x:Number=Stage.width/2;
  4. var punt_centre_y:Number=Stage.height/2;
  5.  
  6. var punt_centre:Point=new Point(punt_centre_x,punt_centre_y);
  7.  
  8. function check_distance(){
  9.     var punt_mouse_x:Number=this._xmouse;
  10.     var punt_mouse_y:Number=this._ymouse;
  11.    
  12.     var punt_mouse:Point=new Point(punt_mouse_x,punt_mouse_y);
  13.     var dist:Number=Point.distance(punt_centre,punt_mouse);
  14.    
  15.     distancia.text=dist+"px";
  16. }
  17.  
  18.  
  19. this.onMouseMove=check_distance;

MI PUNTO DE VISTA: Fórmulas – Por Rolf Ruiz

Rolf Ruiz, uno de los maestros de la escena Flashera hispana se curró hace 6 años y medio un PDF donde explicaba como programar animaciones en Flash. Por ese entonces aún no había aparecido el dichoso Robert Penner con sus super formulas de easing, y los pobres autodidactas como yo nos teníamos que apañar con cualquier cosa.

La sencillez de uso de estas formulas me ha hecho echarlas de menos durante mucho tiempo y estoy muy contento de poder colgarlas aquí a modo de copia de seguridad.

MI PUNTO DE VISTA: Fórmulas - Por Rolf Ruiz

Gracias Rolfito!

Fast getElementById

Es una tontería, pero cuando llevas muchos te ahorras un espacio considerable:

JavaScript:
  1. function d(e){return document.getElementById(e);}

Y luego:

JavaScript:
  1. var salida = d("salida");

appendChild, frames y Internet Explorer

Para los que tengáis que trabajar con frames y DOM, tened en cuenta que con Internet Explorer no se pueden crear los elementos en la página contenedora del frameset para luego insertarla en un frame. Para poder hacerlo correctamente, tan solo se tiene que crear el elemento dentro del frame, con lo que para insertarlo ya no se tendrá que hacer entre marcos.

Como lo he hecho:

JavaScript:
  1. var marco=window.nombredelmarco.frameElement.contentWindow;
  2. var capa=marco.document.createElement("div");
  3. marco.document.body.appendChild(capa);

Perfecto!! :)

Con Firefox si se puede, así que de momento entenderemos que no hay documentación clara al respecto en lugar de achacarlo a un fallo del citado explotador :P.

Creador de Paletas de colores en JavaScript

Hace mucho tiempo hice un método para el objeto MovieClip de Flash, el cual te creaba una paleta de colores en el lugar indicado de la película (ideal para CMSs entre otras utilidades).

Hoy rascando en el baúl de los recuerdos me he encontrado con el script en la página de proto.layer51.com y ni corto ni perezoso me he decidido a rehacerlo para que funcione en javascript.

El resultado es el siguiente:

Podéis pulsar sobre los colores para que se ejecute la función de retorno (callBack).

El código es muy sencillo, un tiple bucle con tirabuzón y mortal para atrás :P

JavaScript:
  1. var ancho=10;
  2. var alto=10;
  3. var sep=1;
  4. creaPaleta=function(element,callBack){
  5.     var clip,col,top,left;
  6.     var aColors=["00","33","66","99","CC","FF"];
  7.     for(var x=0;x<6;x++){
  8.         for(var y=0;y<6;y++){
  9.             for(var z=0,d=0;z<6;z++,d++){
  10.                 col="#"+aColors[z]+aColors[x]+aColors[y];
  11.  
  12.                 clip=document.createElement("a");
  13.                 clip.href="Color: "+col;
  14.                 clip.funcio=callBack;
  15.                 clip.onclick=function(){
  16.                     this.funcio(this.color);
  17.                     return false;
  18.                 }
  19.                 cs=clip.style;
  20.                 cs.backgroundColor=clip.color=col;
  21.                 top=sep+y*(alto+sep);
  22.                 cs.top=top+"px";
  23.                 left=sep+(z*((sep+ancho)*6))+(x*(ancho+sep));
  24.                 cs.left=left+"px";
  25.                 cs.width=ancho+"px";
  26.                 cs.height=alto+"px";
  27.                 cs.position="absolute";
  28.                 cs.overflow="hidden";
  29.  
  30.                 element.appendChild(clip);
  31.             }
  32.         }
  33.     }
  34.     element.style.position="relative";
  35.     element.style.height=(6*(alto+sep)+1)+"px";
  36.     element.style.width=(6*6*(ancho+sep)+1)+"px";
  37. }
  38. function funcionRetorno(e){alert(e);}
  39. creaPaleta(document.getElementById("paleta"),funcionRetorno);

Los parámetros configurables son:

ancho y alto: para definir el tamaño de los botones
sep: para definir la separación entre botones

Para crear una paleta se tiene que ejecutar la función creaPaleta pasandole dos argumentos:

element: el cual requiere un elemento HTML (si puede ser un DIV mejor :))
callBack: la función que se ejecutará al pulsar sobre del color seleccionado.

La función es MUY escalable, si queréis añadir efectos rollOver y rollOut solo tenéis que añadirlo en donde figura "clip.onclick=function(){" y ahí le podéis pasar cualquier evento válido para javascript.

Oh! que no lo he dicho! es compatible con FF1.0+,IE5.0+,Opera7.0+ y Safari beta 3 windows, si podéis probarlo con otros navegadores y comentarme si va o no me haréis un grato favor :)

¿Que os parece? :P

« Entradas anteriores

Get Adobe Flash playerPlugin by wpburn.com wordpress themes