[Front-End] Creación de un “sticky” footer

Como desarrolladores front-end, de seguro que ya se nos ha presentado este problema durante el desarrollo de nuestros sitios web:

Problema -> “Una sección footer que no se encuentra en la ubicación correcta (parte inferior) debido a la poca información que contiene la página web que visualizamos”

Figura 1: Footer azul se encuentra ubicado en la mitad de la página web (error de ubicación)

Lo que buscamos es que el footer se encuentre siempre “pegado” (sticky footer) en la parte inferior de la página web, sin importar la cantidad de contenido que haya en dicha página.

Solución-> Sticky Footer utilizando el CSS3 Flexbox

Figura 2: Footer azul ubicado en la parte inferior a pesar de no existir suficiente contenido en la página web

Aclaraciones:

En la figura 3, el navegador web (Google Chrome, Firefox, etc) es representado por el recuadro negro. En el lado izquierdo vemos que el “sticky footer” está en la parte inferior de la ventana del navegador pues la página web no contiene información suficiente. Sin embargo en el lado derecho, como existe mucho contenido, éste “empuja” al footer a la parte más inferior posible.

Figura 3 – Comportamiento del Sticky Footer [3]

 

OJO: Sticky Footer es diferente a Fixed Footer

Figura 4 – Los 3 tipos de footers: Default, sticky y fixed [5]

 

¡Vamos a ver cómo lo hacemos!

Leer más

¡Alerta de Trackeadores!

Hoy me llevé un susto.

Alguien me dijo prácticamente “Sé lo que hiciste el verano pasado”. Las personas se están poniendo paranoicas con tantos plugins que para mí es una invasión a la privacidad.

Tener por cerca a una persona acosadora es realmente de temer. Alguien que sabe si leíste o no su e-mail, alguien que hace un seguimiento exhaustivo de tus movimientos en la red, no tiene otro nombre que … no lo diré mejor, cada quien coloque el adjetivo que desee.

Whatsap y Facebook poseen configuración de privacidad: Deseo mostrar mi hora de conexión? Deseo dar a conocer si leí o no el mensaje?. Bueno, Facebook no es un buen referente de seguridad de información (plop!), pero por lo menos sabemos que existe la opción.

Yo he probado Mailchimp y sí puedo hacer un tracking de los e-mails de campaña y existe un disclaimer para indicar ello. Sin embargo, que alguien sepa cuántas veces entraste a su mensaje (no necesariamente leer, porque ya estoy acostumbrada a “ver” sin leer cuando son cosas absurdas o SPAM) y que encima te diga “yo sé que me lees”: es de terror.

Alguien creó MailTrack, oh sí, alguien sin que tú lo hayas decidido (ni siquiera tener la oportunidad de aceptar o rechazar) sabe todos los movimientos que hagas sobre su mensaje

Pero se puede evitar 🙂

Leer más

Tip: Instalación de StarUml en ubuntu

A continuación unos pasos para instalar StarUML en ubuntu vía terminal de comandos. Sin algunos de los pasos (instalación estándar), no me fue posible instalar en mi computador, es por ello que hago una lista de todos los pasos que seguí para instalar con éxito:

1. Descargar el paquete libgcrypt11_1.5.3 (aquí)

2. Descargar el paquete de StarUML (aquí)

3. Instalar el paquete libgcrypt11_1.5.3 con dpkg

sudo dpkg -i libgcrypt11_1.5.3-2ubuntu4.2_amd64.deb

4. Instalar StarUML con dpkg

sudo dpkg -i StarUML-v2.7.0-64-bit.deb

5. Ejecutar el comando

sudo apt-get -f install