Album de Imagenes

Temática

Queridos lectores en esta ocasión vengo a proponer una de las tantas soluciones que se le puede dar al momento de querer colocar en nuestro sitio web, varias imágenes una seguida de la otra, ya bien sea para una especie de album de imágenes o solo colocar una sección con 2 imágenes una seguida de la otra.

Problemática

La problemática que se suele presentar es que, las imágenes que disponemos para colocar en nuestro sitio, no sean exactamente de las mismas dimensiones, ocasionando que nuestro sitio se vea algo desorganizado al colocarlas. Podría verse algo como esto:

album imagenes

y lo que deseamos es que se vea esto (con las mismas imágenes sin importar las dimensiones que se tengan):

album imagenes

Mas organizado no?

Muchos cometen el error de asignarle por CSS valores a los atributos width y height de tal manera que las 2 imagenes tengan las mismas dimensiones. Tamaño error dado que puede distorsionar la imagen y el efecto seria devastador.

Hay otras soluciones que les suelen dar que son erradas pero no las comentaré todas (Cualquier cosa me comentan y les doy respuesta).

Solución

Para solucionar esto, vamos a crear unos DIV con el mismo tamaño donde irán las imágenes. Usaré las propiedades width y height del DIV, no de la imágen (etiqueta img) porque distorsionaría la imagen:

album imagenes

Hasta ahora tenemos 2 DIV con un ancho y un alto especifico. Como los 2 tienen la misma clase (box-imagen), estos tendrán el mismo tamaño.

Ahora insertamos las imágenes:album imagenes

Calma, hasta ahora no hemos solucionado. La clave está en cubrir todo el espacio de los DIV con la imagen correspondiente. Y por lógica podremos usar las propiedades de CSS llamadas, min-height y min-width. Con ellas haremos que las imágenes tengan un mínimo de ancho igual al 100% del ancho de su contenedor (DIV) y un minimo de height igual al 100% de su contenedor. Con esto obligamos a que las imágenes no tengan un tamaño menos a esto porque quedará un espacio vacío dependiendo de las dimensiones de la imagen:

album imagenes

Adicional a esto, para que las imágenes mantengan sus justas proporciones (no se distorsionen) debemos agregar un valor al width de la imagen y el valor de “auto” al height de la imagen. En este caso le daremos un width del 100% ya que necesitamos que cubra todo el ancho de su contenedor. También le colocaremos la propiedad overflow con el valor de “hidden” al contenedor de las imágenes , ya que las imágenes no necesariamente tendrán las mismas proporciones que el contenedor y provocará que las imágenes se salgan del área de su contenedor provocando la problemática del principio:

album imagenes

Hasta hace poco pensé que me había ganado el cielo con esto pero no, me resolvió en imágenes mas anchas que altas pero cuando coloqué una imagen mas alta que ancha, se echó a perder. Averiguando encontré una propiedad CSS llamada object-fit. Esta toma valores parecidos a la propiedad background-size (en un tiempo solucionaba esta temática con el background-size pero me di cuenta que el SEO de los sitios no actúa en imágenes que aparecen como background sino en las etiquetas IMG). El valor que necesitamos para nuestro caso es el “cover” que cubre la totalidad del contenedor sin distorsionar la imagen. Por último haremos que nuestras imágenes queden centradas tanto vertical como horizontal dentro de su contenedor. Usaremos el position con el valor “absolute” para nuestra imagen y position con el valor de “relative” para el contenedor, luego le diremos que nuestra imagen estará a 50% del lado izquerdo (left) y a 50% del techo (top) del contenedor. También aplicaremos la propiedad transform en las que usaremos las funciones de CSS llamadas translateX() y translateY(). En nuestro caso le daremos a translateX() el valor de -50% y a translateY() el valor de -50%:

album imagenes
Ya con esto quedaría solucionado nuestro tamaño de las imágenes sin distorsionar sus proporciones ni afectar el diseño y vistosidad de nuestro sitio.

Espero les sirva de algo. Se que el tema con respecto a este tipo de cosas es extenso. Trataré de extenderme en el tema con otros post. Agradecería comenten los problemas que se les presenten y trataremos de solucionarlos. Hasta la próxima.

Diseño web: Centrado vertical de elementos

Es muy común tratar de centrar elementos de forma vertical en una página web. Para aquellos que conocemos un poco de HTML, probablemente nos encontramos con este tipo de diseños aparentemente básicos pero lleva su trabajo dependiendo del efecto que se desee.

Un Ejemplo

Para poner un ejemplo, un caso muy particular es cuando se tiene un “Banner” en un sitio web y se desea colocar un mensaje en el medio de este.

Banner de Ejemplo

Vamos a tratar al banner como si estuviese definido como background de una etiqueta div en HTML:

 codigo

Crearemos otra etiqueta div para colocar el texto dentro del div banner:

 codigo

 

Por ahora tendriamos algo asi:

banner ejemplo

Para centrar el texto en su línea horizontal no es mucho cuento, solo colocas la propiedad CSS llamada text-align con el valor de center:

codigo

Ahora a lo que vinimos, a centrarlo de forma vertical. Como te podrás haber dado cuenta, el div de la imagen le hemos estado dando una altura de 300px, por lo que explicaré algunas de las formas de centrarlo en varios escenarios (sin altura definida o con altura definida).

Banner con altura definida

Aprovechando que en el ejemplo antes planteado nos encontramos en presencia de este caso, les explicaré lo que a mi parecer son las mejores maneras de hacerlo:

  1. Se define una propiedad CSS en el div de la imagen llamada display con el valor de flex y la propiedad margin con el valor de auto en el div del texto:codigo

    Te quedaría de esta manera:
    banner ejemplo

  2. El mismo efecto lo obtendrás si le colocas al div de la imagen la propiedad display:table; width:100%; y al div del texto display:table-cell; vertical-align:middle;codigo

Banner con altura no definida

En el caso anterior el banner es de altura definida porque tiene un tamaño en pixeles (300px), que sería lo mismo si el tamaño viene dado en porcentajes (70% por ejemplo), pero si estamos en presencia de un banner al que no se le define altura, podrías hacer un poco de matemáticas, nada complicado.

Por ejemplo, la altura del banner puede venir dada por el texto contenido dentro:

banner ejemplo

Si te fijas, el banner se expande en altura según su contenido y el texto se mantiene centrado. Esto se logra usando la propiedad padding, especificamente padding-top y padding-bottom en el div de la imagen. Las únicas matemáticas que hay que hacer es, colocar la misma cantidad de padding tanto en el top, como en el bottom para lograr el efecto de estar centrado:

codigo

Estos son los que a mi parecer son los casos mas comunes, pero siempre habrán casos que tratar.

Si les ha sucedido algo parecido y no han podido resolverlo, les agradecería comenten el planteamiento y posiblemente suba otro artículo con la solución.

Caminando por la Programación

Mi comienzo

Algoritmo, la primera palabra que escuché sobre la programación. De momento no la entendí pero al poco tiempo me di cuenta de qué se trataba.

Se cree que la programación es difícil de aprender, yo creo que no. Como todo, la tardanza es empezar, en este caso a conocer el mundo de la programación.

Nunca me hubiese imaginado programando, nunca supe si quiera un poco del tema, de esa área, algún indicio sobre este mundo, fue en la universidad que me enfrente a ese mundo nuevo para mi. Tal vez porque actualmente la tecnología está invadiendo todos los espacios que es imposible evadirla por mas que se desee. Me he encontrado con estudiantes o profesionales de otras área en las que han tenido que ver algo de programación en el transcurso de su carrera, o bien, les ha tocado siendo profesionales aprender acerca de este mundo.

Si eres de los que aun no sabe del tema, o ya sabe del tema pero no lo comprende muy bien, te invito a que te sumes y tengas paciencia al adentrarte en la programación. Yo no empecé nada bien, en la universidad pasé con lo justo mis primeras calificaciones, pero todo cambio a lo que nos empezaron a dar las clases en un laboratorio de computación, fue cuando empecé a comprender todo lo que me había explicado mi profesor sobre algoritmos. El mundo necesita mas programadores, por medio de ella he aprendido un poco de la lógica que llevan algunos procesos en el mundo que nos rodea, no es necesario hacer parte de un sistema para saber como funciona este, con una simple observación a la distancia podrás saber cómo funciona y cómo mejorarlo tal vez.

experiencias programacion

En mi corta vida he tratado de trabajar en todo lo que me ofrecen porque siempre me ha gustado aprender de todo un poco y me he dado cuenta que la programación me ha servido para ayudar en algo a médicos que necesitan realizar un estadístico de pacientes según su condición o a contadores que necesitan sacar conclusiones a partir de una base de datos.

Mejorando en la Programación

La programación no es algo que se termina de aprender, constantemente me doy cuenta que pude haber hecho mejor algo que hice en el pasado y en base a eso, realizo la mejora en mi próximo proyecto. Es como la misma vida, aprendes con cada experiencia buena o mala, mas de las malas diría yo, como la misma vida.

Recomendaciones

Actualmente me dedico a la programación web, es un área bastante interesante y que últimamente se está usando mucho para dar a conocer cualquier tipo de información que alguien desee por medio de la internet.

HTML CSS JS

Son numerosas las herramientas que se pueden utilizar en la programación web, pero si te interesa al menos un poco, a mi parecer las básicas y necesarias son los lenguajes de programacion HTML, CSS JAVASCRIPT; las dos primeras son más que todo de diseño (me ha tocado aprender de diseño para entrar a este mundo), en la tercera si tendrás que aplicar algoritmos de programación con la lógica adecuada para realizar alguna operación en especifico.

Es todo un mundo la programación. Se aplica en la robótica, física, en las matemáticas, química, un sin fin de aplicaciones en las cuales me encantaría involucrarme.

Entretenimiento

No soy de ver muchas películas pero las que me gustan las veo varias veces porque creo que son buenas y traen su mensaje. ¿A que viene esto? Pues, la famosa película MATRIX nunca me interesó antes de conocer la programación, las veces que la intenté ver no la entendía y como no la entendía, todo era ficción y tonterías. Ahora que conozco un poco la programación, un buen amigo que está en el área un día hizo un comentario acerca de la película y me interesé en verla. Como toda película, tiene su ficción, efectos especiales y escenas muy llamativas (me disculpan que comente sobre la película aunque creo ya ha pasado tiempo suficiente desde su lanzamiento para permitirme el abuso) pero la temática trata de un mundo que fue programado tan bien, que la súper computadora en la que fue programada tomó control de la vida humana al punto que la misma raza humana no se daba cuenta de que esto sucedía. Son pocos los que se iban dando cuenta de que esto sucedía, estas personas son HACKERS (individuos que por medio de algoritmos, acceden a información privada de los sistema de computo) y a partir de esto se empiezan a desarrollar las tres películas que se sacaron de esta saga.

En una escena de la película, uno de los hackers le da a elegir al protagonista entre dos píldoras: Una de color rojo y otra de color azul. Si elegía la de color azul, se quedaba en el mundo que solía conocer como el resto de la humanidad; si elegía la roja, se adentraba en el mundo real controlado por la MATRIX lleno de programación. ¿Qué crees tú que eligió? Pues la roja, sino la película no la hubiesen realizado wink_icon-icons-com_67813

Ahora te hago una pregunta a ti lector que lograste leer este artículo hasta este punto ¿Qué píldora quieres elegir?