Contenido de la categoría Turoriales

« Entradas anteriores

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

Palabras reservadas

Hace unos días nos llegó una queja de un usuario de CDmon donde decía que en Opera no funcionaba bien el gestor de correo electrónico y nos pusimos manos a la obra para ver que problema había. Después de debugar el script utilizando la consola de errores, vimos el siguiente error:

JavaScript - correo.php
Inline script compilation
Syntax error while loading: line 6 of inline script at correo.php :
window.goto=290;
-------------^

¿goto? y que problema da goto... ¿será algo de Opera?... pues no, es algo tan sencillo como que es una palabra reservada. Me siento incluso un poco tontaina por no haber caído en eso antes.

¿Reservada? Si, eso significa que no se puede utilizar ya que puede ser que en futuras versiones de los navegadores haya nuevas implementaciones de javascript las cuales incluyan dichas palabras "reservadas". Entonces, Opera parece que se lo toma muy en serio y directamente lanza error cuando se utilizan estas palabras.

Me comenta Zigotica que hace un tiempo él tuvo problemas con Firefox y la palabra reservada "class".

JavaScript:
  1. //Esto no funciona
  2. function blah(class){
  3. }

Parece que aquí cada uno permite lo que le da la gana.

Os dejo un listado de palabras que figuran en la referencia ECMAScript las cuales están reservadas:

Extracto del PDF::Página 14-15
Reserved Keywords

break else new var case finally return void catch for switch while continue function this with default if throw delete in try do instanceof typeof

Future Reserved Words

abstract enum int short boolean export interface static byte extends long super char final native synchronized class float package throws const goto private transient debugger implements protecte

A continuación os dejo unos enlaces que contienen información con las palabras que NO debéis usar para definir ni variables, ni propiedades, ni métodos, ni ná!.

Palabras reservadas javascript
Referencia ECMAScript, página 14 del PDF

« Entradas anteriores

Get Adobe Flash playerPlugin by wpburn.com wordpress themes