Archivo de octubre de 2014

HTACCESS – Redirección con Ancla

Publicado por Iván Gajate el 30 de octubre de 2014 en Desarrollo Web | 1 comentario »

Si queremos redirigir una url que contenga un hash (ancla) utilizando htaccess podemos usar el flag NE (noscape) para que no nos convierta la almohadilla (#) en %23

RewriteRule .* https://example.com/sample/#tag [R=301,NE,L]

Y el resultado sería este

https://example.com/sample/#tag

Visto en https://revolvedmedia.com/htaccess-rewrite-changes-anchor-tag-hash-%23-destination-url/#-destination-url/

JS – Métodos Estáticos en JavaScript

Publicado por Iván Gajate el 26 de octubre de 2014 en JavaScript | Los comentarios están cerrados.

A veces podemos necesitar que una clase que instanciemos muchas veces guarde alguna variable o método a nivel de clase, no a nivel de instancia (variables estáticas).
Podemos usar las clausuras para ello:

http://jsfiddle.net/yporqueno/h1n2gk2d/

var Persona = function (){
    // Variable de clase (estatica)
    var count = 0;
 
    // Constructor de la clase Persona
    var fn = function(){
        var _api = {};
        _api.saluda = function(){
            alert('Hola #'+count);
        };
        count++;
        return _api;
    };
 
    // Metodo estatico de Persona
    fn.getCount = function(){
        alert('Numero de personas '+count);
    }
 
    return fn;
}();

De esta manera la variable “count” solo se crea una vez, y queda accesible para cada instancia que creemos de la clase Persona.
Ahora podemos crear tantas instancias como queramos de Persona y acceder al conteo que lleva la clase de forma centralizada.

var manolo = new Persona();
manolo.saluda();
 
var pepe = new Persona();
pepe.saluda();
 
// Metodo estatico de la clase Persona
Persona.getCount();

Gracias Javi por la idea!! 🙂

CSS – Centrar Vertical y Horizontalmente un Elemento

Publicado por Iván Gajate el 14 de octubre de 2014 en css | 1 comentario »

Hay otras formas para centrar un objeto en pantalla, pero esta me resulta la más cómoda.

position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
display: table;

Es importante el display table para que lo centre verticalmente.

Ejemplo en JSfiddle

Lo bueno, es que no necesita tener un tamaño especificado para funcionar bien.
Por supuesto se puede usar para centrar solo verticalmente.
Gracias Irene! 🙂

Timeline – Parámetro Position

Publicado por Iván Gajate el 6 de octubre de 2014 en Desarrollo Web, JavaScript | Los comentarios están cerrados.

Sigo siendo super fan del TweenMax como herramienta para animar, y cuando utilizas a fondo el TimelineMax se pueden hacer animaciones que nunca pensaste hacer en HTML 🙂
Hay un parámetro extra al final del todo que nos da mucha flexibilidad. Position:

.to( target, duration, vars, position )

Lo que hace es “sacar” esa animación de su flujo normal en el timeline y fuerza a que empiece en otro momento que nosotros queramos.
Podemos decirle que empiece en un tiempo concreto desde que empezó el timeline, un segundo, dos segundos… o relativo a lo que sería su tiempo normal de comienzo, “+=1” por ejemplo empieza un segundo después de lo que le correspondería.
También se puede crear un label como haríamos en Flash para referirnos a ese momento con mayor facilidad.

Algo así:

 

tl.to(element, 1, {x:200})
  //1 second after end of timeline (gap)
  .to(element, 1, {y:200}, "+=1")
  //0.5 seconds before end of timeline (overlap)
  .to(element, 1, {rotation:360}, "-=0.5")
  //at exactly 6 seconds from the beginning of the timeline
  .to(element, 1, {scale:4}, 6);

Se explica muy bien en el propio vídeo de Greensock.

Hay ejemplos muy chulos como este.