En esta entrada vamos a explicar cómo desarrollar un scrolling de texto usando para ello una miniatura del texto que se va a mostrar. Dispondremos de una capa con el texto y otra capa con la minuatura del texto, la cual remarca que parte del texto se está enseñando.
Este efecto ha sido testeado en IE6 y en Firefox 1.5 bajo Windows XP, en Opera es posible que no funcione debido a un bug que lleva arrastrando bastante tiempo.
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:
Interesante librería que nos permite trabajar con DOMDocument de una forma sencilla, permite xpath y namespaces. La librería me recuerda a QueryPath, la cual realiza funciones similares.
ThickBox is a webpage UI dialog widget written in JavaScript on top of the jQuery library. Its function is to show a single image, multiple images, inline content, iframed content, or content served through AJAX in a hybrid modal.
Todos nos hemos encontrado con errores de javascript y normalmente la única información que obtenemos es el número de lÃnea en el que se da el error, y a veces ni es esa lÃnea (por ejemplo el famoso error en la lÃnea 1 de IE). Por eso no nos viene mal tener una aplicación que nos ayude a limpiar nuestro código de errores:
Microsoft Script Debugger: Para IE, permite controlar el flujo de la ejecución del script y modificar el valor de variables entre otras cosas. No lo he usado, pero creo que es el que tienen algunos compañeros mÃos instalado, y te sustituye el icono amarillo de error y te salta cada vez que hay un error de Javascript, lo cual puede ser muy molesto.
SplineTech JavaScript HTML Debugger: Para IE y comercial, parece bastante completo, salvo que debes ejecutar la página web en la aplicación, no se integra con el explorador, lo cual suele ser una ayuda.
Firebug: Para Firefox, sin duda para mà el mejor de todos, lo que más me llega a gustar es su consola y la posibilidad de poder lanzar trazas en ella.
Hola, me ha servido mucho tu publicación, pero tengo una duda, como evito que un usuario, arrastre y coloque un texto desde alguna parte del sitio o inclusive de un texto en word o en otro programa?
Hola, me ha servido mucho tu publicación, pero tengo una duda, como evito que un usuario, arrastre y coloque un texto desde alguna parte del sitio o inclusive de un texto en word o en otro programa?