Tincr: CSS and JAVASCRIPT browser extension

A aquellos de vosotros que, como desarrolladores, os guste tener multitud de plugins en los navegadores que faciliten vuestra labor, aquí os traigo un plugin que ha caido en mis manos y que he encontrado muy interesante.

Se trata de un plugin para editar las características CSS y JAVASCRIPT, directamente desde la consola del navegador Lamentablemente está solo disponible para Chrome, pero espero que algún día lo preparen para el resto de navegadores.

¿Y qué diferencia puede tener respecto a otros plugins similares, como Firebug, EditCSS, Web Developer Toolbar, etc? Pues, en principio, una bastante importante... Es capaz de guardar cada uno de nuestros cambios.

En la mayoria de las ocasiones, tenemos la necesidad de ir modificando multitud de elementos CSS en nuestras páginas, para ir viendo cómo va quedando el resultado final. El problema que nos encontramos entonces, es "pasar" todas las modificaciones realizadas a la página de estilo final.

Es entonces, cuando podemos perder alguna modificación porque no encontremos TODAS las actualizaciones que hemos realizado.

¿Y como viene Tin.cs a solucionar todos estos problemas?
Muy sencillo. Él solito se encarga de almacenar cada cambio que vamos haciendo, directamente en el archivo original del proyecto.

Por fin podemos realizar todos nuestros cambios y, al mismo tiempo que se ven reflejados en la página, se van almacenando en su página .css correspondiente. Ya no tenemos que buscar, copiar y pegar cada modificación que hemos efectuado.

PONIENDO EN MARCHA Tincr:
· INSTALACIÓN: Para poder empezar a utilizar Tincr, debemos descargarnos el plugin para Chrome (disponible aqui).
· CONFIGURACIÓN: Para configurar el plugin, debemos abrir la consola de desarrollador (Ctrl+Shift+i) y pulsar el botón de configuración de Tincr. En la ventana que se nos abre, seleccionamos el tipo de proyecto "Configuration File" y luego, indicamos la ruta a nuestro proyecto.
Sólo nos queda incluir en nuestro proyecto el archivo de configuración en donde le indicamos al plugin qué archivos debe controlar.
· INCLUSIÓN DEL ARCHIVO tincr.json: Dentro de la carpeta del proyecto, debemos incluir el archivo tincr.json (que utiliza el plugin), con el código fuente que indica dónde están nuestros archivos css y js, para que la gestión de los mismos se efectúe correctamente.

Aquí os pongo un ejemplo de cómo sería este archivo:

CÓDIGO JSON DE CONFIGURACIÓN:

{
       "toFile" : [
             {"from": "/js/(.+\\.js)",
              "to": "/js/$1"},
             {"from": "/css/(.+\\.css)",
              "to": "/css/$1"}
       ],
       "fromFile" : [
             {"from": "(\\\\|/)app\\1assets\\1(?:javascripts|stylesheets)\\1(.+(\\.js|\\.css))(\\.[a-zA-Z]+)?$",
              "to": "/assets/$2?body=1"}
       ]
}

Y YA ESTÁ:
Ya podemos empezar a utilizar la consola de desarrollador, y hacer cuantos cambios sean necesarios. Todos y cada uno de ellos, se almacenarán automáticamente en los archivos correspondientes.

Si tenéis abierto el programa con el que normalmente desarrolláis vuestras aplicaciones (Visual Studio en mi caso), podréis rechazar los cambios que el plugin haya realizado, simplemente con regresar a vuestro editor y cancelar el aviso que os indica que el archivo '...ha sido modificado fuera del editor...'.

Espero que os ayude en vuestros desarrollos, y os permita ganar tiempo a la hora de actualizar los diseños de vuestras aplicaciones.

Un saludo a todos!

REFERENCIAS:
Tincr site
Reference Docs
[...]

Leer más >>

CODE SNIPPET: Google Traking

Cuando la mayoría de los clientes te pide un proyecto, acaba solicitando también un completo estudio de visitas, páginas vistas, eventos, descargas, ect.

Google ofrece un gran abanico de posibilidades de gestión para dicha información. Si ya tienes una cuenta de Google, podrás acceder a este servicio. Sino, puedes generarte una y empezar a investigar en Google Analytics

En este CODE SNIPPET os voy a pasar un breve código javascript con el que fácilmente podremos incluir nuestras páginas en las estadísticas de Google, sin necesidad de copiar el mismo código en todas nuestras páginas.

Lo primero que debemos hacer es crear un archivo de texto en nuestro proyecto web, y luego, copiar y pegar el siguiente CÓDIGO JAVASCRIPT:

/* GLOBAL CONTROL VARS */
varANALYTICS_KEY = 'XXXXXXXXXXX';
varANALYTICS_DOMAIN = 'mydomain.com';

var_gaq = _gaq || [];
_gaq.push(['_setAccount', ANALYTICS_KEY]);
_gaq.push(['_setDomainName', ANALYTICS_DOMAIN]);
_gaq.push(['_trackPageview']);

/**
* Function to tracking google analitics
*/
(function() {
    var ga = document.createElement('script');
    ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(ga, s);
})();

/**
* Function to track events, width params
* @param {String} categoria Category to track.
* @param {String} accion    Event to track.
* @param {String} etiqueta  Label to set what is tracking.
* @param {String} valor     Optional: Aditional tracking data.
* @return {void}
*/
function TrackingLink(category, action, label, val) {
    if (!valor) {
        _gaq.push(['_trackEvent', category, action, label]);
    } else {
        _gaq.push(['_trackEvent', category, action, label, val]);
    }

Para actualizar dicho código en cada proyecto futuro, simplemente deberemos cambiar las variables ANALYTICS_KEY y ANALYTICS_DOMAIN, con los valores reales, y incluir una referencia al archivo js en cada página que deseemos trackear.


REGISTRO DE EVENTOS EN GOOGLE ANALYTICS:

En el código que os incluyo, veréis que existe una función encargada de insertar eventos en Google Analytics. Pues bien, esta función permite insertar y parametrizar, desde cualquier parte de la aplicación, un nuevo evento para su posterior análisis.

Aunque Google tiene bastante información al respecto, simplemente comentar que con esa función podemos controlar desde 'Clicks' hasta 'MouseOver', 'ExternalLinks', ect.

Si por ejemplo quisiéramos controlar el número de descargas realizadas en una página de descargas de nuestra aplicación, simplemente añadiendo el siguiente fragmento a cada enlace, tendríamos un control completo de esa información:

< a href="downloads/poster.zip" onclick="TrackingLink('Descargas'Click', 'Poster');">POSTER</a>
< a href="downloads/libro.zip" onclick="TrackingLink('Descargas', 'Click', 'Libro');">LIBRO</a>
< a href="downloads/juego.zip" onclick="TrackingLink('Descargas', 'Click', 'Game');">GAME</a>

o por ejemplo, el control de los enlaces a redes sociales:

<a href="http://tuenti.com/mituenti" onclick="TrackingLink('Redes', 'Click', 'Tuenti');">MI TUENTI</a>
<a href="http://facebook.com/micuentafacebook" onclick="TrackingLink('Redes', 'Click', 'Facebook');">MI FACEBOOK</a>

Ahora hay que dejar volar la imaginación!

REFERENCIAS:
Google Analytics
Traking Events Google
Cómo realizar un evento

Un saludo a todos. [...]

Leer más >>

CKEditor.NET: Insert multiple events on instance

En este post vamos a ver cómo podemos incluir eventos en el editor de texto html CKEditor, en su versión de ASP.NET.

Dado que la documentación existente para este complemento es un poco escasa, creo que puede ser un post interesante, maxime cuando no he encontrado muchas referencias en la web, incluso buscando en "San Google".

Para controlar la inserción de nuevos eventos en CKEditor, tenemos la posibilidad de hacerlo vía javascript. El problema surge cuando en vez de utilizar la librería tal cual, y convertir nuestros Textarea a CKEditor, implementamos directamente los controles que ofrece la dll "CKEditor:CKEditorControl".

Tras una árdua búsqueda, y no encontrar nada más que la opción de código <INSTANCE>.config.CKEditorInstanceEventHandler, me encontré con la desagradable sorpresa de que el propio objeto CKEditorInstanceEventHandler sólo almacena el primer evento generado con la lista. Por tanto, si intentamos hacer algo similiar a esto...:

CODIGO ERRÓNEO

<INSTANCE>.config.CKEditorInstanceEventHandler = new System.Collections.Generic.List<object>();

<INSTANCE>.config.CKEditorInstanceEventHandler.Add(new object[] { "instanceReady", "MyInstanceReadyFunction" });

<INSTANCE>.config.CKEditorInstanceEventHandler.Add(new object[] { "paste", "MyPasteFunction" });

...observaremos que el segundo evento no se lanza jamás.

Llegados a este punto,sólo nos queda pensar cómo instanciar todos nuestros eventos, sobre todo cuando el control CKEditor:CKEditorControl lanza exclusivamente el primero.

Sorprendentemente la respuesta no podía ser más sencilla. Puesto que podemos implementar los eventos por javascript, lo único que nos restaría por hacer, es generar una función Javascript que realice ese trabajo, recibiendo como parametro el control a inicializar.

Con este fragmento de código, y modificandolo en funcion de nuestras necesidades, podremos añadir tantos eventos como sea necesario.

CODIGO ASP.NET

<INSTANCE>.config.CKEditorInstanceEventHandler = new System.Collections.Generic.List<object>();

<INSTANCE>.config.CKEditorInstanceEventHandler.Add(new object[] { "instanceReady", "MyInstanceReadyFunction" });

CÓDIGO JAVASCRIPT

/**

* Funcion que inicializa la instancia CKEditor, a partir del evento instanceReady

* @param {Event} Objeto a instanciar

*/

function MyInstanceReadyFunction (evt) {

    var maxLength = 255;

    evt.editor.on('paste', function (e) {

        e.data.html = strip_tags(e.data.html, tagsPermitidas);

        checkLength(e, maxLength);

    });

    evt.editor.on('key', function (e) {

        checkLength(e, maxLength);

    });

}

Concretamente en este ejemplo, la inicialización de eventos incluye:
· 'paste': que controla el texto que se va a pegar, y suprime los tags HTML que no permito en dicho campo,
· 'key': que controla la escritura de texto, hasta llegar a un nº máximo de caracteres establecidos.

Evidentemente, incluir o modificar éstos, es cuestión de cambiar el código.

Incluyo este ejemplo con 'paste' y 'key' porque sé que hay muchos ejemplos para incluir una limitación de caracteres en CKEditor, pero no es fácil encontrarlos.

Respecto a la función para eliminar los tags no permitidos, os adjunto el código un poco más abajo.

FUNCION PARA ELIMINAR TAGS NO PERMITIDOS

/* Variable global que controla los tags permitidos en la edición */

var tagsPermitidas = '<div><p><span><h1><h2><h3><h4><h5><h6><li><ul><ol><b><strong><small><u><i><em><a><sup><sub>';

/**

* Devuelve un codigo HTML limpio de etiquetas, salvo las permitidas

* @param {String} Cadena de entrada

* @param {String} Tags de apertura permitidos

* @return {String} Cadena limpia

*/

function strip_tags(input, allowed) {

    allowed = (((allowed || "") + "").toLowerCase().match(/<[a-z][a-z0-9]*>/g) || []).join(''); // making sure the allowed arg is a string containing only tags in lowercase (<a><b><c>)

    var tags = /<\/?([a-z][a-z0-9]*)\b[^>]*>/gi,

       commentsAndPhpTags = /<!--[\s\S]*?-->|<\?(?:php)?[\s\S]*?\?>/gi;

    return input.replace(commentsAndPhpTags, '').replace(tags, function ($0, $1) {

        return allowed.indexOf('<' + $1.toLowerCase() + '>') > -1 ? $0 : '';

    });

}

CODIGO PARA CONTROLAR EL TAMAÑO MÁXIMO checkLength: 
Referencia en el blog dotRody CKEditor Maximun Length.

NOTA: Tener en cuenta que el límite máximo indicado en la instancia, hace referencia al texto, y no al conjunto total con sus estilos y tags html. Si no se tiene en cuenta la dimensión del texto con éstos parámetros, nos podemos llevar una mala sorpresa al insertarlo en la DDBB, donde tendremos un error de 'Overflow'.

Espero que os sirva y os ahorre un buen tiempo de búsqueda.
Un saludo a todos!

[...]

Leer más >>

CODE SNIPPET: Advanced popup window

En este CODE SNIPPET, continuando y mejorando el anterior ‘Basic popup window’, voy a mostrar cómo se genera un plugin utilizando javascript y jquery, que muestre popup’s dinámicos.

Partiendo del código del post anterior y con el fin de reutilizar código para popup multiples, vamos a agrupar todo el contenido en un plugin que será el encargado de rellenar el popup e incluir toda la funcionalidad en un único archivo. De esta forma, tendremos la ventaja de poder generar popup’s de forma sencilla sin necesidad de repetir código.
Este pequeño plugin puede mostrar dos tipos de popups: bien una alerta estática de texto, bien un contenido de una capa.

Para ello, generaremos el código básico de un plugin, al que iremos añadiendo los distintos fragmentos de código, hasta completar el archivo.

Lo primero que haremos, será añadir los atributos base de nuestro plugin. Recordad que podemos ampliarlos, en función de nuestras necesidades. Por tanto, la primera aproximación queda así:

jQuery.fn.ShowPopup = function (options) {

    // atributos por dedecto, que extienden a options

    var settings = $.extend({

        cerrarText: '[X]', //texto para el botón de cerrar

        isAlert: false, //atributo que indica si es un popup de alerta o de objeto

        AlertText: undefined, //texto a mostrar en caso de tener una alerta estática

        onClose: undefined //callback a ejecutar tras cerrar el popup

    }, options);
    // creamos los metodos
    var methods = {};
    //creamos el plugin

    return this.each(function () {});

};

Como se puede ver, he incorporado una pequeña funcionalidad que puede ser útil, y es, la opción de pasar como parámetro una función para ejecutar cuando se cierra el popup. 

Una vez creados los atributos, procedemos a generar los métodos que utilizaremos para dar funcionalidad a nuestro plugin. Así, implementaremos tres métodos: open, close y destroy, encargados de abrir, cerrar y destruir el popup respectivamente:

    // creamos los metodos

    var methods = {

        open: function () { $('BODY &gt; .popup').fadeIn(300); },

        close: function () { $('BODY &gt; .popup').fadeOut(300, methods.destroy); },

        destroy: function (content) {

            //destruimos cualquier popup previo
            if ($('BODY &gt; .popup').length) $('BODY &gt; .popup').stop().hide().remove();

        }

    };

Con el método destroy, nos aseguramos de que sólo haya un popup en el body. La ventaja de utilizar estos métodos, reside en la facilidad para insertar animaciones y efectos a nuestro gusto, en las funciones de apertura y cierre (en este caso, unos simples efectos de alpha).

Por último, incorporamos el código que junta ambas partes y genera finalmente el popup:

//creamos el plugin

return this.each(function () {

    methods.destroy(); //destruimos cualquier popup previo

    //montamos las capas

    var wrapper = $('<div class="popup">');

    var popup = $('<div class="popup_window">');

    var closed = $('<div class="popup_close">');

    var content = $('<div class="popup_contenido">');

    //incorporamos los elementos al pop, y el pop al wrapper

    popup.append(closed).append(content);

    wrapper.append(popup);

    //incluimos el popup en el body

    $('body').append(wrapper);

    //inicializamos el boton cerrar

            

    closed.html(settings.cerrarText);

    closed.click(methods.close);

    if (jQuery.isFunction(settings.onClose)) closed.bind('click', settings.onClose);

    //incluimos el contenido (comprobamos si es texto o un objeto)

    if (settings.isAlert) {

    var alert_content = $('<div>' + settings.AlertText + '</div>');

    alert_content.addClass('contenido_alerta');

    content.html(alert_content);

    }

    else {

    //'Clone' de capa para no borrarla al 'destroy'

    var dinamic_content = $(this).clone();

    content.html(dinamic_content.show().addClass('contenido'));

    }

    //mostramos

    methods.open();

});

Sólo quedaría añadir los css y el código html para efectuar las llamadas que, a modo de ejemplo podrían ser:

<a href="#" onclick="$('#mipop').ShowPopup();">

Mostrar CAPA como popup

</a>

O con parámetros:

<a href="#" onclick="$('BODY').ShowPopup({cerrarText: 'CERRAR', isAlert:true, AlertText:$(this).html(), onClose:function(){alert('wow!');} });">

Mostrar alerta de nuevo un texto como popup, y avisar de su cierre.

</a>

En el siguiente enlace, podéis encontrar todo el código fuente de ejemplo.
Source Code

P.D: Mejorar y evolucionar este código queda ahora como algo más sencillo. Desde incluir varios botones, hasta personalizar todo el comportamiento. Sólo es cuestión de probar, fallar y al final encontrar qué es lo que mejor se adapta a nuestras necesidades.

Como siempre, espero que os sirva.
¡Un saludo a todos! [...]

Leer más >>

CODE SNIPPET: Basic popup window

Con esta entrada, pretendo iniciar una serie de post que, como el propio título indica, sea un conjunto de publicaciones con pequeños fragmentos de código que se suelen utilizar en la mayoría de los proyectos. En este caso, el uso de un popup basico en html y javascript

Si al igual que yo, muchos de vosotros reutilizáis vuestro código en múltiples proyectos, habréis descubierto lo engorroso que es ir buscando en las carpetas de las aplicaciones archivadas, hasta descubrir dónde se encuentra el dichoso código para después copiarlo y pegarlo en el nuevo.

Pues bien, intentando evitar la pérdida de ese tiempo precioso, intentaré ir subiendo poco a poco ese tipo de  código reutilizable, para tener aquí una referencia en dónde buscarlo.

Y como inicio de esta sección os indicaré el código para obtener de forma sencilla un popup general, que muestre un contenido concreto, en forma de ventana emergente por encima del contenido de una página.

CODIGO HTML

Para empezar necesitaremos el fragmento de código HTML, que genere las capas correspondientes tanto en ubicación como en contenido.

<div id="MiPopup" class="popup">

    <div class="popup_window">

        <div class="popup_close" title="Cerrar onclick="CierraPopup(this);">[cerrar]</div>

        <div class="popup_contenido"></div>

    </div>

</div>

Básicamente, la idea de este fragmento es la construcción de una capa base (‘popup’), que ocultará todo el contenido bajo ella, y otra centrada (‘popup_window’), con unas dimensones concretas que será la que muestre el contenido.

Las dos capas internas de la ventana centras son para separar el contenido a mostrar (‘popup_contenido’) del botón para cerrar el popup (‘popup_cerrar’).

NOTA: El tag ‘onclick’ de la capa ‘popup_close’ será el encargado de ocultar el popup al pulsarse. La función para realizarlo, la puedes obtener más abajo.

CODIGO CSS

Una vez que tenemos la estructura general montada, debemos darle el estilo CSS. Aquí está el código de ejemplo:

.popup {

    background-color:rgba(0,0,0, 0.5);

    display: none;

    height: 100%;

    left: 0;

    position: fixed;

    top: 0;

    width: 100%;

    z-index: 100000;

    color:#fff;

}

.popup_window {

    background-color:#333;

    box-shadow:0 0 12px 12px #FFF;

    height: 300px;

    margin: -150px auto 0;

    position: relative;

    top: 50%;

    width: 400px;

 }

.popup_window > .popup_close {

    cursor:pointer;

    position:absolute;

    right: 10px;

    top: 10px;

}

.popup_window > .popup_contenido {

    margin: 0 auto;

    text-align: center;

    width: 100%;

}

Evidentemente éste es solo un ejemplo, y en nuestro caso hemos generado una ventana centrada de 400x300 pixels. Cualquier parámetro puede ser modificado al gusto, e incluso podemos insertar imágenes de background para personalizar aún más el resultado.

CODIGO Javascript

Por último, sólo nos faltaría implementar el javascript para que la ventana se muestre y se oculte con la interacción del usuario. Para esto, simplemente añadimos el siguiente javascript:

<script type="text/javascript">

    function MuestraPopup(pop) {

        document.getElementById(capa).style.display = 'show';

    }

    function CierraPopup(pop_close) {

        pop_close.parentNode.parentNode.style.display = 'none';

    }

</script>

NOTA: Recomiendo utilizar algún framework de javascript, por la comodidad de programación, estructuración y modelado del código.

Simplemente restaría añadir en la página HTML un botón para mostrar dicho popup. Dado que se podría hacer de muchas formas, os indico la más simple, que sería añadir un link en la página:

<a href="#" onclick="MuestraPopup('MiPopup'); return false;">Abrir Pop-up</a>

NOTA: El return false; lo añado para evitar que se ejecute la navegación del href y se recargue la página.

Con este pequeño fragmento de código, ya podéis tener vuestras propias ventanas informativas, sin peligro de bloqueos de popup, ni nada por el estilo. Y además, totalmente personalizables.

Espero que os ayude.

¡Un saludo a todos!

[...]

Leer más >>