qTip es un plugin jQuery que nos permite crear y personalizar tooltips en nuestra página web. Se trata de un plugin muy completo que tiene las siguientes características:
Compatible con IE6+, Firefox 2+, Opera 9+, Safari 3+, Chrome 1+, Konqueror 3.5+
Esquinas redondeadas sin necesidad de imágenes
Posibilidad de indicar la esquina donde se quiere situar el tip (elemento del bocadillo que enlaza con el elemento)
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:
jQuery Graceful Websocket es un plugin jQuery que nos permite comunicarnos con el servidor usando websockets de HTML5. El problema es que tan solo Chrome permite los websokets (creo que Firefox los tiene desactivados por defecto por temas de seguridad), además se necesita que el servidor los pueda tratar, por lo que este plugin permite una alternativa mediante Ajax transparente al desarrollador.
// Si el servidor no admite websockets sustituye el ws:// por http://
var ws = $.gracefulWebSocket("ws://127.0.0.1:8080/");
// Envía datos al servidor.
// Si el servidor no admite websockets lo envía mediante POST
ws.send("message to server");
// Recibe datos del servidor
// Si el servidor no admite websockets hace un polling mediante GET
ws.onmessage = function (event) {
var messageFromServer = event.data;
};
Leyendo una entrada de Korsarios.net sobre la lista de países en SQL, recordé que no hace mucho yo también me tuve que crear una lista parecida, pero esta vez de idiomas. Por eso hemos pensado que no estaría mal ofrecer una serie de recursos sobre idiomas y países, que podamos usar en nuestras páginas web.
Suele ser muy útil cuando queremos mostrar un desplegable con los todos los países que existen. Existe el estándar ISO 3166 para definir los países y sus subdivisiones, codificados mediante dos letras, tres letras o de forma numérica.
También puede ser necesario disponer la lista de países en la base de datos, para eso nada mejor que lo que nos ofrece Korsarios.net, las sentencias sql para la lista de países en español y en inglés.
En otras ocasiones puede que necesitemos ir a distintas páginas según el idioma o país desde dónde se visite la página. El idioma se puede detectar mediante PHP o Javascript. Aunque el idioma no siempre es siempre lo más característico, porque puede tratarse de algo específico del país y no del idioma (por ejemplo, una tienda). Para ello lo mejor es detectar el país según la IP, habiendo dos formas, mediante acceso a BD o sin acceso a BD.
En el caso de que querer la lista de idiomas, tendremos que tener en cuenta el ISO 639, codificado con dos letras y tres letras. Como no, siempre es bueno también tener todos los datos de los idiomas en la BD, en este caso somos nosotros quienes os ponemos en disposición el sql necesario: Idiomas sql
Para aquellos que necesiten ofuscar su código Javascript para que sea más difÃcil de entender a los usuarios, les vendrá bastante bien esta lista de aplicaciones que modificarán nuestro código:
Jasob 2: modifica los nombres de variables, borra comentarios y elimina espacios entre muchas otras cosas.
Javascript Obfuscator: trata los scripts y ficheros js contenidos en una página html, modificando los espacios, comentarios, nombres de variables y funciones y lo escribe todo en una única lÃnea, añadiendo punto y coma cuando sea necesario. Existe versión online.
Imaginaros que tenemos un elemento HTML que es realmente un nodo de texto (pensad en DOM, no en innerHTML), por ejemplo:
var elem = document.createTextNode('Esto es una prueba');
document.body.appendChild(elem);
Ahora queremos cambiar “es una” por “es una“. Lo que tendrÃamos que hacer es dividir en texto en tres partes “Esto “, “es una”, ” prueba”, crearemos tres objetos de texto, cada una con cada trozo de texto y luego un elemento STRONG en el que incluiremos el texto del medio. Por último incluimos los elementos nuevos y eliminamos el anterior.
// Obtenemos primera parte de texto
var parte = elem.nodeValue.substring(0,
elem.nodeValue.indexOf("es una"));
// Creamos elemento de texto con contenido "Esto "
var obj = document.createTextNode(parte);
// Insertamos nuevo elemento
elem.parentNode.insertBefore(obj, elem);
// Obtenemos segunda parte de texto
parte = elem.nodeValue.substring(elem.nodeValue.indexOf("es una"), elem.nodeValue.indexOf("es una")+6);
// Creamos elemento de texto con contenido "es una"
obj = document.createTextNode(parte);
// Lo añadimos a un objeto STRONG
var negrita = document.createElement("STRONG");
negrita.appendChild(obj);
// Insertamos nuevo elemento
elem.parentNode.insertBefore(negrita, elem);
// Obtenemos tercera parte de texto
parte = elem.nodeValue.substring(elem.nodeValue.indexOf("es una")+6);
// Creamos elemento de texto con contenido "es una"
obj = document.createTextNode(parte);
// Insertamos nuevo elemento
elem.parentNode.insertBefore(obj, elem);
// Eliminamos elemento anterior
elem.parentNode.removeChild(elem);