Plugins

Quería comentar que a partir de ahora voy a trabajar de una forma distinta a la hora de dar códigos, para solucionar alguno de los problemas más comunes que me he encontrado:

  • Eficiencia. Aunque siempre me planteo hacer los códigos de la forma más eficiente posible, sí es cierto que existen formas desaprovechadas de hacer que los códigos que publico carguen prácticamente al instante en vuestros foros.
  • Corrección de errores o puestas a punto. Todo el mundo tiene errores y, si en algún momento quiero corregir algo o cambiar alguna parte del código para hacerlo más eficiente, todas aquellas personas que ya lo hayan instalado en su foro no tendrán el código actualizado a no ser que lo vuelvan a hacer.
  • Abstracción. Muchas veces los códigos pueden resultar complicados y muy largos. A la vista de una persona que no entienda qué está pasando ahí, editarlos para que sean únicos a vuestro foro puede ser algo un poco complejo. A pesar de que siempre intento que mis códigos sean lo menos modificables posibles y que se adapten a los foros de forma automática, no siempre esto es posible.

Para corregir estos problemas he encontrado una solución perfecta para todos. A partir de ahora los códigos que publique tendrán un formato plugin y serán hospedados en un CDN propio. ¿Qué significa esto para los anteriores problemas?

  • En cuanto a la eficiencia, utilizar un CDN permite que cuanta más gente utilice mis códigos, menos probabilidades haya de que los códigos siquiera se tengan que cargar en tu foro. ¿Qué significa esto? Pues que si un visitante ya ha entrado a un foro que utilice cierto código mío, al entrar a tu foro no tendrá que volver a cargarlo porque ya va a estar en su ordenador. Es decir, el código cargará prácticamente al instante. Esto se lleva haciendo en el desarrollo web desde hace tiempo. Por ejemplo, Foroactivo carga jQuery de la misma forma, utiliando el CDN de Google.
  • En cuanto a la corrección de errores, tener el código hospedado en un servidor me permite corregir errores y mejorar los códigos de manera que el usuario (vosotros) no tengáis que hacer nada. Vuestros foros tendrán siempre la mejor versión de los códigos totalmente funcional sin tener que hacer nada.
  • Por último, la abstracción que permiten los plugins me permite pasar de lo que hacía hasta ahora, que era proporcionar los códigos con la parte editable y la no editable, a daros los códigos con tan sólo la parte editable. Lo he estado probando y es que es todo mucho más simple y fácil.

Por otro lado, aprovecho también para comentar algo que muchas personas me han preguntado y la verdad es que me gusta que se pregunte. Es sobre los créditos.

Veréis, a mí en este momento me dá bastante igual si me ponéis en los créditos de vuestro foro. Siempre se agradece si me enlazáis a este Tumblr, pero quiero dejar constancia que no es obligatorio. Lo que sí que no me gusta es que cambiéis partes de los códigos que hacen referencia a “flerex” o comentarios que tienen el propósito de demostrar la autoría del código. Son cosas que ningún usuario va a ver a no ser que indigue en el código fuente de la página, asi que no debería haber ningún problema.

Dicho esto, ya tengo un plugin preparado para estrenar este nuevo sistema. Esperemos que vaya todo perfecto lel.

Cambiar el diseño del foro dependiendo del grupo del usuario

Vale, no voy a introducir el tema porque el título es bastante self-explanatory.

La forma en la que funciona el código es muy simple: básicamente añade una clase especial a body dependiendo de en qué grupo estés. Gracias a esto puedes aplicar un código CSS a un grupo en específico añadiendo antes del selector de dicho código el body con la clase especial.

Por ejemplo, si tenemos la clase “.forabg” y queremos que para los usuarios del grupo “Gryffindor” tenga un borde rojo, tendríamos que hacer, simplemente:

body.flerex-gryffindor .forabg {
    border: 10px solid red;
}

Instalación

Para instalar el código debes seguir los siguientes pasos.

Activar los módulos (widgets) y poner en cualquier sitio el módulo «Conectarse»

En caso de que queráis ocultar los módulos porque no los queréis:

/* Si lo pusiste a la izquierda */
#left {
    display: none
}

/* Si lo pusiste a la derecha */
#right {
    display: none
}

Por favor, evitad hacer cosas chungas como ocultarlos poniendo ancho 0, que eso es como eliminarlos y no funcionaría.

Por otro lado, si lo que queríais es que no se viese en exclusiva el módulo de conexión, podéis hacer lo siguiente:

  1. Váis al template Portal → modlogin
  2. En la primera línea debería aparecer lo siguiente:
    <div class="module">

    Lo cambiáis por:

    <div class="module" style="display:none">

Desactivar el FAQ, al menos para los miembros. (Opcional)
Este paso es opcional. TOTALMENTE. Pero solo quiero decir que el código funcionará de forma más eficiente (en algunas zonas del foro) si lo tienes desactivado. En caso de que no quieras desactivarlo (la verdad es que no se hasta que punto merece la pena) no pasa nada. Yo no lo haría, solo lo comento para los más tiquismiquis. Aunque bueno, ya aviso que de nada sirve si después llenas el foro con tropecientas imágenes. XD

Modificar una plantilla

Ve a la plantilla Portal → mod_login y busca:

<!-- BEGIN switch_profile -->
<div class="h3">{USERNAME}</div><br>

Sustituimos por:

<!-- BEGIN switch_profile -->
<div class="h3"><span id="flerex-user">{USERNAME}</span></div><br />

Colocar el siguiente JS en el PA para todas las páginas

/* 
* A la izquierda, el nombre de la clase del grupo al que
*   corresponde el color (tal y como lo tengas en el PA)
*   de la derecha 
*/
var groups_id = [
    ['mod', '#3262BA'],
    ['admin', '#5AB07C'],
];

function getClassNameFromGroupColor(color) {
    for(var i = 0; i < groups_id.length; i++) {
        if(groups_id[i][1].toUpperCase() == color) {
            return groups_id[i][0];
        }
    }
    return 'default';
}

function setBodyClassByUser(usr) {
    var groupcolor = usr.children().first().attr('style');
    groupcolor = groupcolor.substr(groupcolor.lastIndexOf('#'));
    var classname = 'flerex-' + getClassNameFromGroupColor(groupcolor);
    $('body').addClass(classname);
}

$(function() {
    
    if(_userdata['user_id'] != -1) {

        var usr = $('#flerex-user');
        if(!usr.length) {
            $.get('/faq', function(data) {
                setBodyClassByUser($(data).find('#flerex-user'));
            });
        } else {
            setBodyClassByUser(usr);
        }
    } else {
        $('body').addClass('flerex-guest');
    }
});

Nótese que en las primeras líneas hay una parte que pone:

['mod', '#3262BA'],

Elimináis mis líneas de mod y admin y ponéis lo correspondiente a vuestro foro. A la izquierda poned el sufijo del classname que tendrá el body para el grupo al que corresponde el color de la derecha. Por ejemplo, en el ejemplo anterior (valga la redundancia), body sería accesible con:

body.flerex-mod

Tened en cuenta que los colores deben estar puestos exactamente igual que como los habéis puesto en el PA.

Sí, lo sé, es un coñazo poner todo a mano. Sí, lo sé, se podría automatizar. El problema es que he buscado la forma más eficiente de hacerlo y esta lo es sin duda.


Cualquier cosa, me habláis por chat de Tumblr. Si me he equivocado hacédmelo saber, porfa.

Y ya está. Me encantaría que me enseñáseis las cosas guapas que hacéis con esto.


PD: Se me olvidaba decir que he sido bueno y os he dejado dos clases por default para que hagáis lo que queráis. Estas clases son:

  • body.flerex-guest que se aplica a todos los invitados
  • body.flerex-default que se aplica a todos los grupos que no hayáis especificado en groups_id.