Contenido de la categoría Turoriales

« Entradas anteriores Siguientes entradas »

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

Utilizar un dominio con blogger

Y no lo digo yo, que lo dicen otros:

canutgeek.uni.cc/traspasar blog de blogger a dominio propio/

Y lo pongo porque me ha hecho gracia que utilicen CDmon.

Encapsular código en javascript

Una forma sencilla de encapsular un código de javascript es mediante objetos (JSON):

JavaScript:
  1. capsula={funcion1:function(){}}

Lo malo es que te ves forzado a llamar a dicho objecto para ejecutar el código:

JavaScript:
  1. capsula.funcion1();

una técnica más elemental y que no permite llamar a la función (ya que es anónima) es la siguiente (no se que nombre recibe):

JavaScript:
  1. (javascript(){...})()

Se usa principalmente para encapsular código que se ejecutará posteriormente en bookmarklets, aunque siempre es útil de conocerlo para crear un entorno de ejecución para bloques de códigos estructurales.

Esto lo he utilizado esta misma mañana en un script, ya que si no, me hubiera sobrescrito el nombre de una función por culpa de mi falta de organización jeje :P. Ahora tendría que saltar por aquí don Zigotica diciendo que los namespaces son la solución a ese problema ... POZI! (JSON)

$PHP_SELF ¡Peligro a la vista!

Leyendo Buayacorp.com me he encontrado con algo que creo necesario compartir.
Mucha gente usa la variable de PHP $PHP_SELF para apuntar los formularios hacia la misma página. El problema que tiene PHP_SELF es que se puede trampear para añadir javascripts en la página, con lo que se puede conseguir robar sesiones y otras cosas típicas del XSS.

Me explico:

Tenemos un formulario

HTML:
  1. <form method="POST" action="<?=$PHP_SELF?>"></form>

Y desde la barra de navegación cargamos la página que contiene el formulario añadiendo una barra al final y el script a ejecutar

HTML:
  1. /formulario.php/"><script type="text/javascript">alert("Hackme");</script><form action="

Con lo que el contenido de la página cambia:

HTML:
  1. <form method="POST" action="/marc/hack/formulario.php/formulario.php/"><script type="text/javascript">alert("Hackme");</script><form action=""></form>

Venga, ¿alguien propone soluciones?

-Yo propongo escapar $PHP_SELF con un urlencode:

PHP:
  1. <? $PHP_SELF=urlencode($PHP_SELF); ?>

Acentos, codificación y expresiones regulares

Ultimamente estoy viciado a las expresiones regulares, facilitan el trabajo de una forma asombrosa. De momento os dejo una que os servirá para filtrar un nombre de persona (con acentos y tal). Es codificación Latin-1, así que no esperéis que valide caracteres chinos ni japoneses, pero la idea va por aquí.

/^[\ \'\-\.A-Za-z\xc0-\xfc]{3,64}$/

Tengo ganas de hablar más de las expresiones regulares, pero no tengo ni tiempo ni Internet en casa, así que de momento voy jodido.

Entorno de prueba para desarrolladores web (Windows)

Todo buen desarrollador web tiene la necesidad de probar todas sus creaciones - ya sea maquetación, programación, velocidad de renderizado, etc.. – en varios navegadores. Hasta ahora la opción más sencilla era la virtualización de sistemas operativos, instalando una versión de cada navegador en cada uno de ellos, así podríamos tener un Windows 95 con el IE3, el Netscape 4 y el Opera 6.06, el Windows 98 con el IE4, el Netscape 5 y el Opera 7.54, el Windows 2000 con el IE5 o 5.5, el Firefox 1.0.8 o 1.5.0.11 y el Opera 8.54 y finalmente el Windows XP con el IE6 o 7 con la última versión del Firefox y la última de Opera.

Sencillamente esta formula es costosa de mantener y utilizar, ya que abrir tantos sistemas operativos en una misma máquina es casi imposible si no disponemos de un ordenador con toneladas de RAM.

Lo que vengo a proponer es una solución que ya se ha visto en otros sitios, pero añadiendo aparte del Internet Explorer, el Firefox y el Opera (con las correspondientes versiones). De hecho, el motor de renderizado de dichos navegadores es el mismo tanto en Windows 95 como en Windows XP.

Mis accesos directos!

Desgraciadamente de momento no podremos cubrir todas las necesidades (Linux y MAC OS) pero eso se puede solucionar virtualizando ambos sistemas y siguiendo un patrón similar.

A continuación podéis ver las estadísticas de nbsp.es por navegadores. Como podréis ver no vale la pena instalar según que versiones (como el IE3, IE4, Opera 6 y 7 y FF1.0.8 o inferiores):

Stats navegadores

Si quieres seguir leyendo: (más...)

La web semántica (The Machine is Us/ing Us)

Soy el hombre desactualizado, seguro que este vídeo lo habéis visto todos ya menos yo :( (visto en vidadigital)

Pura publicidad de lo que se nos vendrá encima.

VFX Librería visual para cargar contenido en AJAX sobre una ventana modal

Este fin de semana he estado trabajando en un nuevo proyecto personal, un poco parecido a redz.es, donde me he visto en la necesidad de usar un efecto que he visto en algunos blogs, donde se muestra un contenido por sobre de la página, ocultando esta detrás de un velo oscuro, para que os hagáis a la idea:

Ejemplos

VFX es una librería que permite ocultar la página tras un velo del color deseado, para mostrar encima un contenido, pudiendo ser este publicidad, formularios de contacto|registro|entrada de usuario, ventanas de ayuda, o incluso para dificultar la navegación a nuestros visitantes.

Lo mejor de la librería es que permite cargar cualquier contenido en una capa sobre de la transparencia, pudiendo crear páginas super-dinámicas para mostrar desde galerías de fotos|vídeos|audios hasta información altamente relevante para el usuario.

Os remarco las características más interesantes:

  • Color de fondo personalizable
  • Transparencia de fondo desde 0% hasta 100%
  • Carga de contenido dinámico con AJAX
  • Puede cargar cualquier tipo de contenido
  • Facilidad de uso
  • Compatibilidad con Firefox y Internet Explorer (*)

*: Si alguien puede probarlo en otros navegadores|sistemas operativos y darme un toque, me haréis un favor, en casa no tengo apenas herramientas de prueba.

Pódeis descargar todo lo necesario aquí: librería VFX

Para utilizarlo es muy sencillo, sólo tenéis que añadir estas líneas de código en la cabecera:

HTML:
  1. <script type="text/javascript" src="vfx.js"></script>
  2.     <script type="text/javascript" src="loadVars.js"></script>
  3.     <!--[if IE]> <style type="text/css">@import url(vfxie55.css);</style> <![endif]-->
  4.     <style type="text/css">@import url(vfx.css);</style>

Y luego le añadís un evento onClick a un botón para que llame a la función vfx.carga();

JavaScript:
  1. vfx.carga(true,"archivo.php");

Con eso se os cargará la página sobre un manto de color.

La función carga acepta 3 argumentos:

Display: es un booleano (true|false) que indica si se va a mostrar u ocultar la ventana vfx.
URL: la dirección de la web que vamos a cargar.
callback: este es un argumento opcional, y es la función que se ejecuta una vez cargado el contenido de la ventana vfx.

Ejemplo de uso con callback:

JavaScript:
  1. carga_ok=function(){alert("OK");}
  2. vfx.carga(true,"archivo.php",carga_ok);
  3.  
  4. //o bien:
  5.  
  6. vfx.carga(true,"archivo.php",function(){alert("OK");});

Si tenéis cualquier duda, podéis dejar un comentario o mandar un correo en la dirección que figura en la cabecera del archivo vfx.js

Espero vuestros comentarios, críticas y sugerencias.

Conversión rápida de tipos en JS

Leo en el fantástico blog de Choan Gálvez una serie de accesos rápidos para hacer conversiones de tipos, como por ejemplo:

JavaScript:
  1. var x = 123;
  2. // de forma tradicional:
  3. x = String(x);
  4. //acceso rápido
  5. x = x+"";

Os dejo el enlace para ver el resto de accesos rápidos:

Conversión rápida de tipos en JavaScript

Función en JS para extraer el radio button que está activo de un grupo

Manolo (el ca...bra que tiene la WII y comparte blog conmigo) me ha pedido una función en javascript, la cual devuelva el radio button que está activo de un grupo de ellos. La idea es que sólo pasando el nombre del grupo devuelva el activo, para ello le he montado esta función (seguro que se puede optimizar, pero para lo que me ha comentado va supersobrado).

JavaScript:
  1. <script type="text/javascript">
  2. function dimeActivo(grupo){
  3.     inputs = document.getElementsByTagName("input");
  4.     for(i=0,tope=inputs.length;i<tope;i++){
  5.         e=inputs[i];
  6.         if(e.name == grupo && e.checked == true){
  7.             alert("el elemento es: " +e.value);
  8.             return true;
  9.         }
  10.     }
  11.     return false; //si no encuentra ningún elemento activo devuelve false.
  12. }
  13. </script>

HTML:
  1. Manzana: <input type="radio" name="fruta" value="manzana" /><br />
  2. Pera: <input type="radio" name="fruta" value="pera" /><br />
  3. Kiwi: <input type="radio" name="fruta" value="kiwi" /><br />
  4. Sandia: <input type="radio" name="fruta" value="sandia" /><br />
  5. <input type="button" value="Dime el activo!" onClick="dimeActivo('fruta');" />

« Entradas anteriores Entradas siguientes »

Get Adobe Flash playerPlugin by wpburn.com wordpress themes