Curioso ejemplo para jQuery que permite personalizar mensajes en nuestra página según la página de origen (referrer). Es una buena opción si tienes tráfico originado por alguna página en particular y quieres agradecerles el que visiten tu página con un mensaje personalizado.
// URLs usando expresiones regulares que quieres que detecte
var msgs = [
// null url : tráfico directo
{'url':null, 'msg':'I am glad you remember my site URL, enjoy your stay'}
// Mi url!
,{'url':/^http:\/\/(\w+\.)?midominio\.com/, 'msg':null}
// Otras
,{'url':/^http:\/\/(\w+\.)?google\.com/, 'msg':'Welcome googler, Hope you will find what you looking for'}
,{'url':/^http:\/\/(\w+\.)?dzone\.com/, 'msg':'Welcome fellow dzone reader, if you like it please vote it up'}
,{'url':/^http:\/\/(\w+\.)?digg\.com/, 'msg':'Welcome digger, if you like it please digg it'}
,{'url':/^http:\/\/(\w+\.)?propeller\.com/, 'msg':'Welcome propeller user, hope you will like it here'}
//generic pattern: to show generic message for referrers that you did not specify one for
// URL genéricas
,{'url':/^http:\/\//, 'msg':'Hello their.. Hope you will find what you looking for'}
];
function DetectReferrer(){
var div = $('#WelcomePlaceHolder');
// Si no existe la capa no se muestra el mensaje
if (!div.length) return;
var ref = document.referrer.toLowerCase();
var msg = findMatch(ref);
// Si existe mensaje
if(msg) {
// Añade un botón para cerrar
div.html( '<a href="javascript:void(0)" class="CloseButton">X</a>' + msg).show('slow',function(){
$('.CloseButton',div).click(function(){ div.hide() })
});
}
}
function findMatch(ref) {
for(var i=0; i<msgs.length; i++)
if( ( ref=='' && msgs[i].url==null) || (ref>'' && ref.match(msgs[i].url) ) )
return msgs[i].msg;
return null;
}
// Llama al detector de referrers cuando se carga en DOM
$(DetectReferrer);
Se podría hacer algo parecido para el navegador del usuario, por si usa IE recomendarle que cambie a Firefox, Opera, Safari o Chrome.
Esta parte es solo frontend, aún no está configurado para que interactúe con el servidor.
Lo más destacado de este ejemplo es el uso de vue-router, paquete que permite la realización de SPA de forma sencilla. Como la aplicación será gestionada por un único fichero (index.html), es necesario configurar el servidor de webpack para que gestione las URLs que acceden a otras partes de la aplicación para que no devuelva un error 404.
Esto es fácil, tan solo hay que añadir historyApiFallback y ponerlo a true en la configuración del servidor.
Lógicamente habrá que instalar el paquete vue-router.
Vale, ya está todo instalado, ahora solo hace falta configurar vue-router para que acepte distintas URLs y que muestre distintos controladores según sea el caso.
Para ello creamos un fichero router.js que posteriormente añadiremos a nuestra instancia de Vue:
Es fácil de entender, importamos los distintos controladores y configuramos las rutas (‘/‘ y ‘/login‘), a las que les asignaremos el controlador correspondiente.
Para indicar a Vue que vamos a usar vue-router, debemos importarlo en la instancia de la aplicación:
import App from './components/App.vue';
import router from './router';
Vue.use( VueRouter );
new Vue( {
el: '#app',
router,
components: {
App,
},
render: ( c ) => c( 'app' ),
} );
El siguiente paso es modificar el controlador principal de la aplicación (App.vue) para que muestre la cabecera (que tendrá su propio controlador) y la vista principal de vue-router (<router-view>):
Como no soy diseñador, pues usaré Buefy (basado en Bulma) y Material Design icons (no sé por qué le tengo algo de manía a FontAwesome).
Existe un paquete especial para usar Material Design en vue (vue-material-design-icons), que para funcionar con Buefy necesitará usar la fuente de letras de Material Design (@mdi/fonts). Instalamos todo y ya estará todo listo para empezar a diseñar nuestra página.
La cabecera (<v-header>) mostrará el logo, el menú principal y otro secundario para loguearse. No explicaré ni las clases Bulma (que yo casi ni conozco) y cómo se muestra el menú al clickar en el burger icon, ya que estos tutoriales son para llevar yo un diario de cómo desarrollar una app web con Hapi.js y Vue.js.
linkNotify es un plugin jQuery que permite modificar enlaces y mostrar un texto personalizado que indica que el enlace se está cargando. Algo que puede ser muy útil para aplicaciones en la que el usuario es algo básico y pincha y pincha en el enlace eternamente hasta que ve algún resultado sin esperar a que cargue la primera vez.
$('a').linkNotify('Espera mientras carga la pagina...');
Aquellos que usamos Firebug para depurar nuestras aplicaciones, podemos cometer el error de dejar una traza (console.log())y que al subirlo a producción el usuario tenga un error de Javascript. Para evitar esto, podemos incluir en nuestro script lo siguiente:
PaintbrushJS is a lightweight, browser-based image processing library that can apply various visual filters to images within a web page.You use it by applying a class to an element on the page and setting a few parameters with some extra HTML attributes. If the element is an img or it has a background-image set in your CSS, PaintbrushJS will create …