Ya hablamos en su dÃa de FireBug, una extensión que nos permite depurar nuestras aplicaciones web. La nueva versión tiene una gran novedad, “debuguear” Javascript. Ahora es posible poner puntos de ruptura, ejecutar el código paso a paso, inspeccionar variables, comprobar código, … Si antes ya era indispensable, ahora es totalmente obligatorio para cualquier desarrollador (vale, quizás me he pasado). A parte de el debugger hay otra serie de cambios que no dejan de tener importancia. FireBug
VÃa / SitePoint
Incluir vÃdeos, del tipo que sean, en nuestras páginas web suele traernos dificultades, sobre todo si queremos que sean vistas en cualquier navegador y si queremos seguir los estándares. Si os encontráis con este problema nada mejor que echarle un ojo a este artÃculo, en el cual se indica como incluir mediante el uso de la etiqueta object vÃdeos de distintos formatos, ya que embed no es estándar.
Entre los distintos tipos de vÃdeos que incluye están los que usa el Flash Player, como YouTube o Google Video, pelÃculas en formato Windows Media y QuickTime.
Ya no tienes excusa para seguir los estándares. Bye, Bye <embed>
El otro dÃa contábamos como realizar drag&drop de elementos HTML y en el ejemplo lo que hacÃamos era recolocar los elementos dentro del HTML. Indicábamos que una buena utilidad para este efecto podrÃa ser para realizar comparativas de productos en una tienda.
GlassBox es una librería Javascript que permite añadir bordes transparentes, con transparencias y con sombreado. Es muy sencillo de usar, admite skins, bien documentado y funciona en IE 6, Firefox 2, Opera 9 y Safari 3.
Algo bastante importante en un proyecto es la configuración y cómo se gestiona. Para facilitar la gestión usaremos dos librerías dotenv y confidence, la primera permite usar ficheros .env en nuestro entorno de desarrollo para simular variables de entorno. La segunda nos ayudará a recuperar las variables de un objeto permitiendo usar filtros, por ejemplo según de las variables de entorno.
Instalaremos los paquetes:
npm i dotenv
npm i confidence
Confidence necesitará un criterio que nos permitirá obtener distintos resultados según su valor. Imaginemos que tenemos el siguiente criterio:
Si queremos acceder al nivel de debug, al ser env igual a development, obtendíamos INFO.
Vale, ¿y cómo lo usamos en el proyecto? Primero creamos una carpeta config, donde crearemos el fichero index.js que tendrá toda la configuración del servidor:
const Confidence = require( 'confidence' );
const Dotenv = require( 'dotenv' );
Dotenv.config( { silent: true } );
// NODE_ENV is used in package.json for running development or production environmentconst criteria = {
env: process.env.NODE_ENV,
};
const config = {
port: 3001,
};
const store = new Confidence.Store( config );
exports.get = function( key ) {
return store.get( key, criteria );
};
exports.meta = function( key ) {
return store.meta( key, criteria );
};
Dotenv simplemente se usa para obtener de las variables de entorno de servidor el valor de NODE_ENV. Por ahora solo tendremos la variable port, pero ya estará preparado para poder añadir otras variables de configuración posteriormente.
Creamos un store de Confidence y exportaremos los métodos get y meta.
Haremos algo parecido para el manifest necesario para Glue, creando el fichero manifest.js dentro del directorio config:
Esto puede dar mucho juego, pero tan solo funciona en Firefox 3.6+, por lo que no podemos depender de este script en nuestras aplicaciones. A partir de la versión 3.6, Firefox permite realizar drag&drop de ficheros en nuestra web y mediante Javascript poder obtener los ficheros o textos que se arrastren contra un elemento específico.
Su uso es muy sencillo:
dropzone.addEventListener("drop", function(event) {
event.preventDefault();
// Ready to do something with the dropped object
var allTheFiles = event.dataTransfer.files;
alert("You've just dropped " + allTheFiles.length + " files");
}, true);
Y dispone de una API tanto para el drag&drop como para los ficheros.
Recomiendo ver el código fuente de este ejemplo para tener una librería que te hace todo el trabajo.
SAJA es una librerÃa para usar Ajax en PHP de forma segura, sin necesidad de crear ningún Javascript y dando soporte a PHP4 y PHP5.
Está diseñado para crear de forma rápida aplicaciones Ajax secillas, seguras y fáciles de mantener.
Se trata de crear funciones PHP que se encarguen de todo, no es necesario registrar callbacks, ni de importar otras funciones. Tan solo se escribe una función y se llama.
La seguridad que nos ofrece es debido a que las peticiones SAJA sólo son válidas si el usuario está actualmente en la página desde donde proviene la petición. A parte, para darle mayor seguridad, se puede encriptar los datos de entrada del usuario antes de que se envÃen al servidor.
Tan solo ocupa 14K y 3.8K para el usuario final. No utiliza XML debido a que pesa demasiado y a que parsearlo requiere más proceso que con datos normales. No es necesario escribir código Javascript a no ser que quieras hacer algo fuera de lo común. SAJA
VÃa / Ajaxian