Lo bueno de los SVG es que puedes modificarlos mediante CSS directamente en el HTML, el único problema es que el SVG debe estar incrustado en el HTML, no mediante una imagen <img>, ni mediante la propiedad content de CSS.
Encontré un script muy bueno que te modifica una etiqueta img que contiene un SVG por su contenido SVG real. El problema viene cuando yo añado el SVG como una propiedad content:
.class {
content: url('imagen.svg');
}
Para ello he modificado el script anterior para que coja la propiedad content de los selectores CSS que se indiquen y añada el SVG directamente al elemento:
jQuery(document).ready(function() {
var replaceWithSVG = function(selector, url) {
jQuery('').appendTo('head');
jQuery.get(url, function(data) {
// Replace image with new SVG
jQuery(selector).prepend(data.replace(/<\?xml[^>]+>/, ''));
}, 'text');
}
var selectors = ['.site-title a', '.btn-video']
for(var i in selectors) {
var selector = selectors[i];
var url = window.getComputedStyle(
document.querySelector(selectors[i]), ':before'
).getPropertyValue('content');
url = url.replace(/url\(["']?([^'"\)]+)["']?\)/, '$1');
replaceWithSVG(selectors[i], url);
}
});
El spam ha condicionado muchas prácticas que originariamente eran tan sencillas y poderosas como enlazar tu mail en la web.
Un truqui para evitarlo que en su día lo descubrimos en 604th.net:
function nospam(name,domain){
window.location = 'mailto:' + name + '@' + domain;
}
Cópialo tal cual sin cambiar nada y súbelo como emailnospam.js. Recomendamos subirlo a una carpeta en la que guardes los javascripts como por ejemplo la carpeta js. Si no te apetece crearla, súbelo a la raíz de tu ftp.
Luego añade lo siguiente entre la línea <head> y </head> de los documentos de tu web:
Ya solo queda que escribas tu mail enlazado en la parte de la web que quieras sustituyendo la palabra ejemplo y dominio.com por lo que corresponda a tu cuenta de email:
FancyZoom es un script que nos permite realizar zoom de nuestras imágenes mediante Javascript. Hace aparecer la imagen mediante un zoom progresivo y transparencia. Además muestra el title del enlace en un recuadro.
Las imágenes ser precargan automáticamente cuando el ratón pasa por encima de la imagen, por lo que se reduce la demora en la persentación. El único fallo que encuentro es que hay que añadir un onload en el body, pero bueno, podemos cambiar la librería para que se haga automáticamente. FancyZoom
Ahora solo falta crear el controlador para las rutas de usuarios, dos en este caso:
GET /user/[user] para recuperar un usuario
PUT /user para crear un nuevo usuario
Lógicamente aún no hay nada de autenticación, por lo que cualquiera puede crear un usuario realizando una llamada PUT a la URL indicando userName, email y password.
Para comprobar la validez de los datos introducidos, usaremos joi. Usando las opciones de la ruta, indicaremos las reglas que deberá cumplir cada parámetro introducido. Así, para recuperar un usuario, se comprobará que user sea string, alfanumérico y que tenga una longitud de 3 a 20 caracteres:
Por último mostrar el código para crear un nuevo usuario. Primero se comprueba si existe un usuario con ese nickname o email. Si es así, se devuelve error usando boom, si no, se genera la contraseña encriptada (aquí no me he molestado mucho en ello, ya lo haré más adelante), y se crea el usuario usando el método create de moongose:
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.
Una librería para MooTools que permite realizar flash en los elementos. Permite indicar el color de origen, final, el número de repeticiones y el tiempo del efecto y la posibilidad de incluir propiedades al elemento (por ejemplo backgroud-color).
Su uso es sencillo y nos ofrece ejemplos de cómo utilizarlo:
/* flash on click */
$('flash-link').addEvent('click', function () {
$('flash-me').flash('#fff','#fffea1',5,'background-color',500);
});
/* flash on ajax complete */
$('flash-link-ajax').addEvent('click', function () {
//make the ajax call
var req = new Request({
method: 'get',
url: 'element-flashing.php',
data: { 'do' : '1' },
onRequest: function() { },
onComplete: function(response) {
$('flash-me-ajax').set('text', response).flash('#fff','#fffea1',5,'background-color',500);
}
}).send();
});
/* flash on scroll completion */
$('flash-link-scroll').addEvent('click', function() {
var scroller = new Fx.Scroll(window, {
onComplete: function() {
$('scroll-to-me').flash('#fff','#fffea1',10);
}
}).toElement('scroll-to-me');
});
Eso sí, no olvidar que no hay que abusar de este efecto.