Forem: Code Chappie

Cómo crear un Wallpaper dinámico con la Hora y Fecha usando Python

Code Chappie — Sat, 30 Nov 2024 18:30:56 +0000

Si alguna vez has querido tener un wallpaper (fondo de pantalla) que se actualice automáticamente con la hora y la fecha actual, este tutorial es para ti. Usaremos Python y algunas bibliotecas como PIL (Pillow) para generar una imagen, agregar texto dinámico con la hora y la fecha, y luego establecer esta imagen como fondo de pantalla en Windows.

¿Qué necesitamos?

Python instalado: Si aún no tienes Python instalado, puedes descargarlo desde python.org.
Instalar bibliotecas:
- Pillow: Para trabajar con imágenes.
- ctypes: Para interactuar con el sistema operativo y cambiar el fondo de pantalla en Windows.

Puedes instalar Pillow ejecutando el siguiente comando en tu terminal o cmd: pip install pillow

Un archivo de fuente: Necesitamos una fuente TrueType (.ttf) para renderizar el texto en la imagen. En el código de ejemplo, usamos la fuente FiraCode, pero puedes utilizar cualquier fuente que prefieras.

1. Importaciones y configuración inicial

Al comienzo del script, importamos las bibliotecas necesarias y definimos algunos parámetros iniciales como el color de fondo, el color del texto, el tamaño de la fuente y la ruta del archivo de la fuente:

from PIL import Image, ImageDraw, ImageFont
import ctypes, os, time, io
from datetime import datetime

background_color = (0, 0, 0)  # Color de fondo (negro)
text_color = (22, 230, 69)  # Color del texto (verde)
font_size = 30
font_path = r"c:/Users/david/Desktop/FiraCodeRegular.ttf"  # Ruta de la fuente
font = ImageFont.truetype(font_path, font_size)

screen_width = 1920
screen_height = 1080

Pillow (Image, ImageDraw, ImageFont) se utiliza para crear la imagen y dibujar el texto.
ctypes se usa para cambiar el wallpaper en Windows.
time y datetime nos permiten manejar los tiempos y fechas.
background_color y text_color son los colores que usaremos para el fondo y el texto.

2. Formateo de la fecha y hora

Definimos una función para asegurarnos de que los números de la fecha y la hora se formateen siempre con dos dígitos:

def two_digits_format(number):
    return f"0{number}" if number < 10 else number

Por ejemplo, el día "5" se formateará como "05", y lo mismo ocurrirá con la hora, minuto y segundo.

3. Generar la imagen con la fecha y hora

La función agregar_texto_a_imagen() crea una nueva imagen en blanco con el tamaño de la pantalla (en este caso, 1920x1080) y dibuja el texto en el centro:

def agregar_texto_a_imagen():
    now = datetime.now()

    texto = f"""{{
    "date": {{
        "day": {two_digits_format(now.day)},
        "month": {two_digits_format(now.month)},
        "year": {now.year}
    }},
    "time": {{
        "hour": {two_digits_format(now.hour)},
        "minute": {two_digits_format(now.minute)},
        "second":  {two_digits_format(now.second)},
        "meridiem": "{now.strftime("%p")}"
    }}
}}"""

En esta función, obtenemos la fecha y la hora actual utilizando datetime.now(), y luego formateamos el texto en formato JSON. Esto se renderiza en la imagen que generamos.

Después, calculamos el centro de la pantalla para colocar el texto allí:

bbox = draw.textbbox((0, 0), texto, font=font)
ancho_texto = bbox[2] - bbox[0]
altura_texto = bbox[3] - bbox[1]
posicion_x = (ancho_imagen - ancho_texto) // 2
posicion_y = (altura_imagen - altura_texto) // 2
posicion = (posicion_x, posicion_y)

4. Establecer la imagen como fondo de pantalla

La función establecer_como_wallpaper() guarda la imagen generada como un archivo temporal y luego la establece como el fondo de pantalla:

def establecer_como_wallpaper(imagen_bytes):
    temp_path = r"C:/Users/david/Pictures/temp_wallpaper.bmp"
    if os.path.exists(temp_path):
        os.remove(temp_path)

    with open(temp_path, "wb") as f:
        f.write(imagen_bytes.read())

    ctypes.windll.user32.SystemParametersInfoW(
        20, 0, temp_path, 3
    )  # Establecer la imagen temporal

Aquí, ctypes.windll.user32.SystemParametersInfoW es una función de Windows que permite cambiar el fondo de pantalla.

5. Actualización continua del wallpaper

En el ciclo while True:, la imagen se genera y se establece como fondo de pantalla una vez por segundo:

while True:
    start_time = time.time()
    imagen_bytes = agregar_texto_a_imagen()
    establecer_como_wallpaper(imagen_bytes)
    elapsed_time = time.time() - start_time

    if elapsed_time < 1:
        time.sleep(1 - elapsed_time)
    else:
        time.sleep(1)

Este ciclo asegura que el fondo de pantalla se actualice cada segundo con la hora y la fecha actuales.

Código completo aquí: GitHub

Conclusión

Este código ofrece una manera sencilla de generar un fondo de pantalla dinámico que siempre muestra la hora y la fecha actual. Puedes personalizar la apariencia del fondo de pantalla ajustando los colores, la fuente y el tamaño de la imagen. Además, el código está diseñado para ser eficiente, con la actualización del fondo de pantalla ocurriendo cada segundo.

Si estás buscando una forma divertida de aprender sobre manipulación de imágenes en Python y cómo interactuar con el sistema operativo, este proyecto es un excelente punto de partida.

5 series imperdibles para Desarrolladores e Informáticos

Code Chappie — Sat, 29 Jun 2024 06:48:19 +0000

¡Hola a todos! Si te gusta la tecnología o el mundo de la informática, existen cinco series que no puedes perderte. Estas series nos sumergen en mundos fascinantes y nos hacen reflexionar sobre el impacto de la tecnología en nuestra sociedad, cultura y psicología. Prepárense para disfrutar de historias originales, sorprendentes y cautivadoras.

Comenzando con "Silicon Valley", una comedia que sigue las peripecias de un grupo de programadores luchando por triunfar en el competitivo mundo tecnológico. Te reirás y te maravillarás con las ambiciones, rivalidades y contradicciones de la industria de internet.
Luego tenemos "Mr. Robot", un tecno-thriller protagonizado por Elliot Alderson, un ingeniero de seguridad informática y pirata informático con problemas de identidad y trastornos mentales. Conoce su lucha contra la corrupción corporativa y su participación en el mundo del hacktivismo.
Otra serie fascinante es "Halt and Catch Fire", un drama histórico ambientado en el auge de la revolución del ordenador personal en el Texas de 1983. Acompaña a Joe MacMillan, Gordon Clark, Cameron Howe y Donna Clark mientras buscan crear una computadora portátil que compita con IBM.
Si prefieres el humor, te recomiendo "The IT Crowd", una divertida sitcom británica que nos sumerge en las peculiares situaciones de tres miembros del departamento informático de Industrias Reynholm. Prepárate para reírte con las situaciones absurdas y caóticas que viven estos personajes.
Por último, pero no menos importante, está "Black Mirror", una antología de ciencia ficción que nos muestra realidades alternativas o cercanas al presente, donde la tecnología se enfrenta a nuestros instintos más oscuros. Explora los efectos colaterales y las consecuencias inesperadas del uso de dispositivos y aplicaciones tecnológicas en cada episodio.

Espero que encuentren estas series tan fascinantes como yo y se animen a ver alguna de ellas. También pueden visitar otros apartados de mi página web y seguirme en mis redes sociales para más contenido relacionado. ¡Hasta pronto, mundo!

10 frases que suelen decir los developers (Parte 2)

Code Chappie — Sat, 29 Jun 2024 06:42:59 +0000

Continuando con nuestra exploración del lenguaje único de los desarrolladores, aquí tienes otras 10 frases comunes que reflejan su experiencia y perspectiva en el campo del desarrollo de software:

"En mi anterior trabajo lo hacíamos de otra manera."
"Voy a refactorizar este código más tarde."
"Solo falta documentarlo."
"¿Ya le preguntaste a Chat GPT?"
"No es un bug, es una feature."
"Voy a dejar este comentario aquí para después."
"Esto es temporal, lo cambiaré luego."
"Es un problema de cache."
"Este código necesita un rewrite completo. ¿Quién lo escribió? Ah yo 😔"
"Lo hice a las 3 am, así que no garantizo nada."

Estas frases capturan la esencia del humor y los desafíos diarios de los desarrolladores. ¿Te resultan familiares?

Visita mi blog

10 frases que suelen decir los developers (Parte 1)

Code Chappie — Sat, 29 Jun 2024 06:37:18 +0000

Los desarrolladores tienen su propio lenguaje y humor que reflejan su día a día en el mundo tecnológico. Aquí te presentamos 10 frases que seguramente reconocerás si eres parte de esta comunidad o te interesa el desarrollo de software:

"Funciona en mi máquina."
"¿Has probado reiniciar?"
"Está en producción."
"Está en beta."
"Solo voy a hacer un pequeño cambio."
"Este código es una obra de arte."
"Funciona, pero no sé por qué."
"Funcionaba ayer."
"Solo necesito un poco más de café y termino."
"Es un error de usuario."

Visita mi blog

Formas de truncar texto en CSS

Code Chappie — Fri, 28 Jun 2024 18:36:22 +0000

Cuando se trata de mostrar contenido textual de manera concisa y atractiva, truncar el texto es una técnica crucial. Para leer más: Blog CodeChappie

Descarga: The Pragmatic Programmer: your journey to mastery

Code Chappie — Fri, 28 Jun 2024 17:48:57 +0000

Dale click a la imágen para ver los enlaces de descarga:

10 Alternativas al uso de
en HTML

Code Chappie — Sat, 07 Aug 2021 20:51:43 +0000

El elemento

es fundamental en HTML para dividir y estructurar el contenido de una página web. Para leer más: Blog CodeChappie

Github Pages - Alojamiento gratuito

Code Chappie — Sat, 07 Aug 2021 17:32:11 +0000

¿Sabes lo que es Github Pages?

Es un servicio que brinda GitHub y nos permite subir repositorios de nuestro código para almacenarlo y pueda servir

Configuración básica de Github

Primero que todo, instala Git en tu máquina. Este es el software del sistema de control de versiones subyacente en el que GitHub funciona.
Seguido, Regístrate para una cuenta de GitHub. Es simple y fácil.
Una vez te hayas registrado, inicia sesión en github.com con tu nombre de usuario y contraseña.

Aquí puedes encontrar un tutorial explicado a detalle:

Excel como Base de Datos de lectura.

Code Chappie — Tue, 27 Jul 2021 00:06:17 +0000

Hola a todos, soy Chappie. Y el día de hoy utilizaremos una hoja de cálculo creada en Google Drive como una Base de datos de lectura.

¿Por qué?

Hay proyectos pequeños en los que tal vez no necesites hacer consultas o relaciones complicadas, por lo cual es posible que esta solución te pueda servir. De hecho, es muy simple de implementar y lo puedes usar en cualquier entorno de desarrollo, en esta ocasión crearemos un ejemplo sencillo tan solo con HTML y JavaScript. Utilizaremos CSS pero solo para que el ejemplo final se vea estilizado. Así que, empecemos…

1. Crear y configurar una hoja de cálculo.

Primero nos dirigimos a Drive y creamos una hoja de cálculo y le colocamos cualquier nombre para tener una idea de que contenido guardará. Luego vamos a configurar nuestra hoja de cálculo. Para ello le damos click a “Archivo” y después click en la opción “Publicar en la web”.

Dejamos las opciones que vienen por defecto y le damos click al botón que dice “Publicar”. Debes revisar que esté publicado todo el documento como página web.

Ahora vamos a colocar la información que queremos almacenar. Recuerda que la primera fila serán los nombres de las columnas y de la segunda fila para abajo el contenido que deseamos guardar.

Luego en la parte final veremos que tenemos una pestaña, a esa pestaña le colocaremos un nombre. En mi caso le pondré productos (Este nombre de la pestaña lo usaremos luego).

Si deseas puedes agregar más pestañas dando click al botón +. Para este ejemplo vamos a agregar una pestaña más que contendrá la información de una “empresa”.

Ahora que toda la información de prueba está lista vamos a juntar los datos de este documento que nos servirán para extraer la información del documento de Excel.

Lo primero es obtener el ID del documento, ese id se encuentra en el enlace (URL) del documento. Exactamente se encuentra entre ‘d/’ y ‘/edit’ en mi caso la que pueden visualizar a continuación: https://docs.google.com/spreadsheets/d/1xjqX3ybnY27E-SNo1qydYNmVYZmuYqK80ohuTsPHbDI/edit

ID=1xjqX3ybnY27E-SNo1qydYNmVYZmuYqK80ohuTsPHbDI
Pestañas:
- productos
- empresa

Ya que tenemos todo listo vamos a empezar con el código:

2. Traer los datos de Excel

Empezamos con la estructura básica HTML:
y antes de la etiqueta </head> colocamos la CDN de TableTop.

<!-- CDN de TableTop -->
<script src='https://cdnjs.cloudflare.com/ajax/libs/tabletop.js/1.5.1/tabletop.min.js'></script>

Ahora antes de la etiqueta </body> colocaremos el siguiente script. En este script vamos a reemplazar el ID que aparece entre d/ y /pubhtml por nuestro ID. Luego crearemos una función init donde inicializamos Tabletop y le pasaremos un key, este será nuestro publicSpreadsheetUrl y en callback le pasaremos una función showInfo que recibirá data y tabletop. Lo que realmente nos importa ahora es data. Así que haremos un console.log() de data, luego a simpleSheet le pasamos como valor false. Por último, con la última línea de código le indicamos que ejecute la función init cuando la página cargue.

<script type='text/javascript'>
        const publicSpreadsheetUrl = 'https://docs.google.com/spreadsheets/d/1xjqX3ybnY27E-SNo1qydYNmVYZmuYqK80ohuTsPHbDI/pubhtml';

        function init() {
            Tabletop.init({
                key: publicSpreadsheetUrl,
                callback: showInfo,
                simpleSheet: false
            })
        }

        function showInfo(data, tabletop) {
            console.log(data)
        }

        window.addEventListener('DOMContentLoaded', init)
</script>

Si revisamos la consola podremos visualizar lo siguiente:

Si pueden apreciar aparece un objeto empresa y productos. Tal y como nombramos nuestras pestañas en el documento de excel. Contiene mucha información pero la que nos va a servir por ahora es elements. Por lo que si hacemos un console.log de data.productos.elements vamos a visualizar un arreglo de objetos, que es lo que utilizaremos.

3. Mostrar los datos en la página web

Debajo de la etiqueta <body> crearemos una estructura básica de una lista de productos

<div class="container page-wrapper">
        <div class="page-inner">
            <h1 class="text-center mt-5" id="companyName">Productos de la tienda</h1>
            <div class="row" id="myProducts">
                <div class="el-wrapper">
                    <div class="box-up">
                        <img class="img" src="https://realplaza.vtexassets.com/arquivos/ids/15567689-1600-auto?width=1600&height=auto&aspect=true" alt="">
                        <div class="img-info">
                            <div class="info-inner">
                                <span class="p-name">nombre</span>
                                <span class="p-company">categoria</span>
                            </div>
                            <div class="a-size">Descripción: <span class="size">descripcion</span></div>
                        </div>
                    </div>

                    <div class="box-down">
                        <div class="h-bg">
                            <div class="h-bg-inner"></div>
                        </div>

                        <a class="cart" href="#">
                            <span class="price">$ 100</span>
                            <span class="add-to-cart">
                                <span class="txt">Agregar</span>
                            </span>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>

Arriba de la etiqueta </head> pegaremos los estilos y las CDN de Bootstrap y Google Fonts:

<!-- CDN de TableTop -->
    <script src='https://cdnjs.cloudflare.com/ajax/libs/tabletop.js/1.5.1/tabletop.min.js'></script>
    <!-- CDN de Google Fonts -->
    <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,600" rel="stylesheet">
    <!-- CDN de Bootstrap -->
    <link rel="stylesheet"
        href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css">
    <!-- Minimalistic & Elegant eCommerce card creada por SilceCrowd
    https://codepen.io/slicecrowd/pen/GWJEZB -->
    <style>
        body,
        html {
            height: 100%;
        }

        .d-flex {
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
        }

        .align-center {
            -webkit-box-align: center;
            -ms-flex-align: center;
            align-items: center;
        }

        .flex-centerY-centerX {
            justify-content: center;
            -webkit-box-pack: center;
            -ms-flex-pack: center;
            justify-content: center;
            -webkit-box-align: center;
            -ms-flex-align: center;
            align-items: center;
        }

        body {
            background-color: #f7f7f7;
        }

        .page-wrapper {
            height: 100%;
            display: table;
        }

        .page-wrapper .page-inner {
            display: table-cell;
            vertical-align: middle;
        }

        .el-wrapper {
            width: 360px;
            padding: 15px;
            margin: 15px auto;
            background-color: #fff;
        }

        .el-wrapper .img {
            object-fit: contain;
            width: 80%;
            height: 80%;
        }

        @media (max-width: 991px) {
            .el-wrapper {
                width: 345px;
            }
        }

        @media (max-width: 767px) {
            .el-wrapper {
                width: 290px;
                margin: 30px auto;
            }
        }

        .el-wrapper:hover .h-bg {
            left: 0px;
        }

        .el-wrapper:hover .price {
            left: 20px;
            -webkit-transform: translateY(-50%);
            -ms-transform: translateY(-50%);
            -o-transform: translateY(-50%);
            transform: translateY(-50%);
            color: #818181;
        }

        .el-wrapper:hover .add-to-cart {
            left: 50%;
        }

        .el-wrapper:hover .img {
            webkit-filter: blur(7px);
            -o-filter: blur(7px);
            -ms-filter: blur(7px);
            filter: blur(7px);
            filter: progid:DXImageTransform.Microsoft.Blur(pixelradius='7', shadowopacity='0.0');
            opacity: 0.4;
        }

        .el-wrapper:hover .info-inner {
            bottom: 155px;
        }

        .el-wrapper:hover .a-size {
            -webkit-transition-delay: 300ms;
            -o-transition-delay: 300ms;
            transition-delay: 300ms;
            bottom: 50px;
            opacity: 1;
        }

        .el-wrapper .box-down {
            width: 100%;
            height: 60px;
            position: relative;
            overflow: hidden;
        }

        .el-wrapper .box-up {
            width: 100%;
            height: 300px;
            position: relative;
            overflow: hidden;
            text-align: center;
        }

        .el-wrapper .img {
            padding: 20px 0;
            -webkit-transition: all 800ms cubic-bezier(0, 0, 0.18, 1);
            -moz-transition: all 800ms cubic-bezier(0, 0, 0.18, 1);
            -o-transition: all 800ms cubic-bezier(0, 0, 0.18, 1);
            transition: all 800ms cubic-bezier(0, 0, 0.18, 1);
            /* ease-out */
            -webkit-transition-timing-function: cubic-bezier(0, 0, 0.18, 1);
            -moz-transition-timing-function: cubic-bezier(0, 0, 0.18, 1);
            -o-transition-timing-function: cubic-bezier(0, 0, 0.18, 1);
            transition-timing-function: cubic-bezier(0, 0, 0.18, 1);
            /* ease-out */
        }

        .h-bg {
            -webkit-transition: all 800ms cubic-bezier(0, 0, 0.18, 1);
            -moz-transition: all 800ms cubic-bezier(0, 0, 0.18, 1);
            -o-transition: all 800ms cubic-bezier(0, 0, 0.18, 1);
            transition: all 800ms cubic-bezier(0, 0, 0.18, 1);
            /* ease-out */
            -webkit-transition-timing-function: cubic-bezier(0, 0, 0.18, 1);
            -moz-transition-timing-function: cubic-bezier(0, 0, 0.18, 1);
            -o-transition-timing-function: cubic-bezier(0, 0, 0.18, 1);
            transition-timing-function: cubic-bezier(0, 0, 0.18, 1);
            /* ease-out */
            width: 660px;
            height: 100%;
            background-color: #3f96cd;
            position: absolute;
            left: -659px;
        }

        .h-bg .h-bg-inner {
            width: 50%;
            height: 100%;
            background-color: #464646;
        }

        .info-inner {
            -webkit-transition: all 400ms cubic-bezier(0, 0, 0.18, 1);
            -moz-transition: all 400ms cubic-bezier(0, 0, 0.18, 1);
            -o-transition: all 400ms cubic-bezier(0, 0, 0.18, 1);
            transition: all 400ms cubic-bezier(0, 0, 0.18, 1);
            /* ease-out */
            -webkit-transition-timing-function: cubic-bezier(0, 0, 0.18, 1);
            -moz-transition-timing-function: cubic-bezier(0, 0, 0.18, 1);
            -o-transition-timing-function: cubic-bezier(0, 0, 0.18, 1);
            transition-timing-function: cubic-bezier(0, 0, 0.18, 1);
            /* ease-out */
            position: absolute;
            width: 100%;
            bottom: 25px;
        }

        .info-inner .p-name,
        .info-inner .p-company {
            display: block;
        }

        .info-inner .p-name {
            font-family: 'PT Sans', sans-serif;
            font-size: 18px;
            color: #252525;
        }

        .info-inner .p-company {
            font-family: 'Lato', sans-serif;
            font-size: 12px;
            text-transform: uppercase;
            color: #8c8c8c;
        }

        .a-size {
            -webkit-transition: all 300ms cubic-bezier(0, 0, 0.18, 1);
            -moz-transition: all 300ms cubic-bezier(0, 0, 0.18, 1);
            -o-transition: all 300ms cubic-bezier(0, 0, 0.18, 1);
            transition: all 300ms cubic-bezier(0, 0, 0.18, 1);
            /* ease-out */
            -webkit-transition-timing-function: cubic-bezier(0, 0, 0.18, 1);
            -moz-transition-timing-function: cubic-bezier(0, 0, 0.18, 1);
            -o-transition-timing-function: cubic-bezier(0, 0, 0.18, 1);
            transition-timing-function: cubic-bezier(0, 0, 0.18, 1);
            /* ease-out */
            position: absolute;
            width: 100%;
            bottom: -20px;
            font-family: 'PT Sans', sans-serif;
            color: #828282;
            opacity: 0;
        }

        .a-size .size {
            color: #252525;
        }

        .cart {
            display: block;
            position: absolute;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            font-family: 'Lato', sans-serif;
            font-weight: 700;
        }

        .cart .price {
            -webkit-transition: all 600ms cubic-bezier(0, 0, 0.18, 1);
            -moz-transition: all 600ms cubic-bezier(0, 0, 0.18, 1);
            -o-transition: all 600ms cubic-bezier(0, 0, 0.18, 1);
            transition: all 600ms cubic-bezier(0, 0, 0.18, 1);
            /* ease-out */
            -webkit-transition-timing-function: cubic-bezier(0, 0, 0.18, 1);
            -moz-transition-timing-function: cubic-bezier(0, 0, 0.18, 1);
            -o-transition-timing-function: cubic-bezier(0, 0, 0.18, 1);
            transition-timing-function: cubic-bezier(0, 0, 0.18, 1);
            /* ease-out */
            -webkit-transition-delay: 100ms;
            -o-transition-delay: 100ms;
            transition-delay: 100ms;
            display: block;
            position: absolute;
            top: 50%;
            left: 50%;
            -webkit-transform: translate(-50%, -50%);
            -ms-transform: translate(-50%, -50%);
            -o-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
            font-size: 16px;
            color: #252525;
        }

        .cart .add-to-cart {
            -webkit-transition: all 600ms cubic-bezier(0, 0, 0.18, 1);
            -moz-transition: all 600ms cubic-bezier(0, 0, 0.18, 1);
            -o-transition: all 600ms cubic-bezier(0, 0, 0.18, 1);
            transition: all 600ms cubic-bezier(0, 0, 0.18, 1);
            /* ease-out */
            -webkit-transition-timing-function: cubic-bezier(0, 0, 0.18, 1);
            -moz-transition-timing-function: cubic-bezier(0, 0, 0.18, 1);
            -o-transition-timing-function: cubic-bezier(0, 0, 0.18, 1);
            transition-timing-function: cubic-bezier(0, 0, 0.18, 1);
            /* ease-out */
            -webkit-transition-delay: 100ms;
            -o-transition-delay: 100ms;
            transition-delay: 100ms;
            display: block;
            position: absolute;
            top: 50%;
            left: 110%;
            -webkit-transform: translate(-50%, -50%);
            -ms-transform: translate(-50%, -50%);
            -o-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
        }

        .cart .add-to-cart .txt {
            font-size: 12px;
            color: #fff;
            letter-spacing: 0.045em;
            text-transform: uppercase;
            white-space: nowrap;
        }
    </style>

Ya que tenemos la estructura básica vamos a colocar la información de una manera dinámica. Como sabemos, en nuestra función showInfo data contiene empresa y productos, por lo que podemos hacer una desestructuración:

const { productos, empresa } = data;

Debajo vamos a hacer referencia al elemento que contendrá todos los productos en este caso esa etiqueta div tiene el id myProducts y a la etiqueta <h1> con id companyName que tendrá el nombre de la tienda. Luego crearemos una variable que contendrá todo nuestro html de productos y lo declararemos como un template string vacío.

myProducts = document.getElementById("myProducts");
 companyName = document.getElementById("companyName");

let ProductHTML  = ``;

Luego mapearemos todos los productos y le colocaremos la información que deseamos mostrar de los productos así que podemos eliminar la parte del producto del html anterior y lo podemos reemplazar por una etiqueta de <p>cargando...</p>. (Puedes ver a detalle en el código final)

productos.elements.map(productos => {
                ProductHTML += `
            <div class="el-wrapper">
                    <div class="box-up">
                        <img class="img" src="${productos.imagen}" alt="">
                        <div class="img-info">
                            <div class="info-inner">
                                <span class="p-name">${productos.nombre}</span>
                                <span class="p-company">${productos.categoria}</span>
                            </div>
                            <div class="a-size">Descripción: <span class="size">${productos.descripcion}</span></div>
                        </div>
                    </div>

                    <div class="box-down">
                        <div class="h-bg">
                            <div class="h-bg-inner"></div>
                        </div>

                        <a class="cart" href="#">
                            <span class="price">$ ${productos.precio}</span>
                            <span class="add-to-cart">
                                <span class="txt">Agregar</span>
                            </span>
                        </a>
                    </div>
                </div>`
            })

Todos esos productos van a ir juntándose en la variable productsHTML que declaramos. Cuando el array se termine de recorrer vamos a insertar todo el html de productos y el nombre de la tienda de la siguiente forma:

myProducts.innerHTML = productsHTML;
companyName.innerHTML = empresa.elements[0].empresa;

Código final

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Excel como BD</title>
    <!-- CDN de TableTop -->
    <script src='https://cdnjs.cloudflare.com/ajax/libs/tabletop.js/1.5.1/tabletop.min.js'></script>
    <!-- CDN de Google Fonts -->
    <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,600" rel="stylesheet">
    <!-- CDN de Bootstrap -->
    <link rel="stylesheet"
        href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css">

    <!-- Minimalistic & Elegant eCommerce card creada por SilceCrowd
    https://codepen.io/slicecrowd/pen/GWJEZB -->
    <style>
        body,
        html {
            height: 100%;
        }

        .d-flex {
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
        }

        .align-center {
            -webkit-box-align: center;
            -ms-flex-align: center;
            align-items: center;
        }

        .flex-centerY-centerX {
            justify-content: center;
            -webkit-box-pack: center;
            -ms-flex-pack: center;
            justify-content: center;
            -webkit-box-align: center;
            -ms-flex-align: center;
            align-items: center;
        }

        body {
            background-color: #f7f7f7;
        }

        .page-wrapper {
            height: 100%;
            display: table;
        }

        .page-wrapper .page-inner {
            display: table-cell;
            vertical-align: middle;
        }

        .el-wrapper {
            width: 360px;
            padding: 15px;
            margin: 15px auto;
            background-color: #fff;
        }

        .el-wrapper .img {
            object-fit: contain;
            width: 80%;
            height: 80%;
        }

        @media (max-width: 991px) {
            .el-wrapper {
                width: 345px;
            }
        }

        @media (max-width: 767px) {
            .el-wrapper {
                width: 290px;
                margin: 30px auto;
            }
        }

        .el-wrapper:hover .h-bg {
            left: 0px;
        }

        .el-wrapper:hover .price {
            left: 20px;
            -webkit-transform: translateY(-50%);
            -ms-transform: translateY(-50%);
            -o-transform: translateY(-50%);
            transform: translateY(-50%);
            color: #818181;
        }

        .el-wrapper:hover .add-to-cart {
            left: 50%;
        }

        .el-wrapper:hover .img {
            webkit-filter: blur(7px);
            -o-filter: blur(7px);
            -ms-filter: blur(7px);
            filter: blur(7px);
            filter: progid:DXImageTransform.Microsoft.Blur(pixelradius='7', shadowopacity='0.0');
            opacity: 0.4;
        }

        .el-wrapper:hover .info-inner {
            bottom: 155px;
        }

        .el-wrapper:hover .a-size {
            -webkit-transition-delay: 300ms;
            -o-transition-delay: 300ms;
            transition-delay: 300ms;
            bottom: 50px;
            opacity: 1;
        }

        .el-wrapper .box-down {
            width: 100%;
            height: 60px;
            position: relative;
            overflow: hidden;
        }

        .el-wrapper .box-up {
            width: 100%;
            height: 300px;
            position: relative;
            overflow: hidden;
            text-align: center;
        }

        .el-wrapper .img {
            padding: 20px 0;
            -webkit-transition: all 800ms cubic-bezier(0, 0, 0.18, 1);
            -moz-transition: all 800ms cubic-bezier(0, 0, 0.18, 1);
            -o-transition: all 800ms cubic-bezier(0, 0, 0.18, 1);
            transition: all 800ms cubic-bezier(0, 0, 0.18, 1);
            /* ease-out */
            -webkit-transition-timing-function: cubic-bezier(0, 0, 0.18, 1);
            -moz-transition-timing-function: cubic-bezier(0, 0, 0.18, 1);
            -o-transition-timing-function: cubic-bezier(0, 0, 0.18, 1);
            transition-timing-function: cubic-bezier(0, 0, 0.18, 1);
            /* ease-out */
        }

        .h-bg {
            -webkit-transition: all 800ms cubic-bezier(0, 0, 0.18, 1);
            -moz-transition: all 800ms cubic-bezier(0, 0, 0.18, 1);
            -o-transition: all 800ms cubic-bezier(0, 0, 0.18, 1);
            transition: all 800ms cubic-bezier(0, 0, 0.18, 1);
            /* ease-out */
            -webkit-transition-timing-function: cubic-bezier(0, 0, 0.18, 1);
            -moz-transition-timing-function: cubic-bezier(0, 0, 0.18, 1);
            -o-transition-timing-function: cubic-bezier(0, 0, 0.18, 1);
            transition-timing-function: cubic-bezier(0, 0, 0.18, 1);
            /* ease-out */
            width: 660px;
            height: 100%;
            background-color: #3f96cd;
            position: absolute;
            left: -659px;
        }

        .h-bg .h-bg-inner {
            width: 50%;
            height: 100%;
            background-color: #464646;
        }

        .info-inner {
            -webkit-transition: all 400ms cubic-bezier(0, 0, 0.18, 1);
            -moz-transition: all 400ms cubic-bezier(0, 0, 0.18, 1);
            -o-transition: all 400ms cubic-bezier(0, 0, 0.18, 1);
            transition: all 400ms cubic-bezier(0, 0, 0.18, 1);
            /* ease-out */
            -webkit-transition-timing-function: cubic-bezier(0, 0, 0.18, 1);
            -moz-transition-timing-function: cubic-bezier(0, 0, 0.18, 1);
            -o-transition-timing-function: cubic-bezier(0, 0, 0.18, 1);
            transition-timing-function: cubic-bezier(0, 0, 0.18, 1);
            /* ease-out */
            position: absolute;
            width: 100%;
            bottom: 25px;
        }

        .info-inner .p-name,
        .info-inner .p-company {
            display: block;
        }

        .info-inner .p-name {
            font-family: 'PT Sans', sans-serif;
            font-size: 18px;
            color: #252525;
        }

        .info-inner .p-company {
            font-family: 'Lato', sans-serif;
            font-size: 12px;
            text-transform: uppercase;
            color: #8c8c8c;
        }

        .a-size {
            -webkit-transition: all 300ms cubic-bezier(0, 0, 0.18, 1);
            -moz-transition: all 300ms cubic-bezier(0, 0, 0.18, 1);
            -o-transition: all 300ms cubic-bezier(0, 0, 0.18, 1);
            transition: all 300ms cubic-bezier(0, 0, 0.18, 1);
            /* ease-out */
            -webkit-transition-timing-function: cubic-bezier(0, 0, 0.18, 1);
            -moz-transition-timing-function: cubic-bezier(0, 0, 0.18, 1);
            -o-transition-timing-function: cubic-bezier(0, 0, 0.18, 1);
            transition-timing-function: cubic-bezier(0, 0, 0.18, 1);
            /* ease-out */
            position: absolute;
            width: 100%;
            bottom: -20px;
            font-family: 'PT Sans', sans-serif;
            color: #828282;
            opacity: 0;
        }

        .a-size .size {
            color: #252525;
        }

        .cart {
            display: block;
            position: absolute;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            font-family: 'Lato', sans-serif;
            font-weight: 700;
        }

        .cart .price {
            -webkit-transition: all 600ms cubic-bezier(0, 0, 0.18, 1);
            -moz-transition: all 600ms cubic-bezier(0, 0, 0.18, 1);
            -o-transition: all 600ms cubic-bezier(0, 0, 0.18, 1);
            transition: all 600ms cubic-bezier(0, 0, 0.18, 1);
            /* ease-out */
            -webkit-transition-timing-function: cubic-bezier(0, 0, 0.18, 1);
            -moz-transition-timing-function: cubic-bezier(0, 0, 0.18, 1);
            -o-transition-timing-function: cubic-bezier(0, 0, 0.18, 1);
            transition-timing-function: cubic-bezier(0, 0, 0.18, 1);
            /* ease-out */
            -webkit-transition-delay: 100ms;
            -o-transition-delay: 100ms;
            transition-delay: 100ms;
            display: block;
            position: absolute;
            top: 50%;
            left: 50%;
            -webkit-transform: translate(-50%, -50%);
            -ms-transform: translate(-50%, -50%);
            -o-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
            font-size: 16px;
            color: #252525;
        }

        .cart .add-to-cart {
            -webkit-transition: all 600ms cubic-bezier(0, 0, 0.18, 1);
            -moz-transition: all 600ms cubic-bezier(0, 0, 0.18, 1);
            -o-transition: all 600ms cubic-bezier(0, 0, 0.18, 1);
            transition: all 600ms cubic-bezier(0, 0, 0.18, 1);
            /* ease-out */
            -webkit-transition-timing-function: cubic-bezier(0, 0, 0.18, 1);
            -moz-transition-timing-function: cubic-bezier(0, 0, 0.18, 1);
            -o-transition-timing-function: cubic-bezier(0, 0, 0.18, 1);
            transition-timing-function: cubic-bezier(0, 0, 0.18, 1);
            /* ease-out */
            -webkit-transition-delay: 100ms;
            -o-transition-delay: 100ms;
            transition-delay: 100ms;
            display: block;
            position: absolute;
            top: 50%;
            left: 110%;
            -webkit-transform: translate(-50%, -50%);
            -ms-transform: translate(-50%, -50%);
            -o-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
        }

        .cart .add-to-cart .txt {
            font-size: 12px;
            color: #fff;
            letter-spacing: 0.045em;
            text-transform: uppercase;
            white-space: nowrap;
        }
    </style>
</head>

<body>



    <div class="container page-wrapper">
        <div class="page-inner">
            <h1 class="text-center mt-5" id="companyName">Productos de la tienda</h1>
            <div class="row" id="myProducts">
                <p>Cargando...</p>
            </div>
        </div>
    </div>


    <script type='text/javascript'>
        var publicSpreadsheetUrl = 'https://docs.google.com/spreadsheets/d/1xjqX3ybnY27E-SNo1qydYNmVYZmuYqK80ohuTsPHbDI/pubhtml';

        function init() {
            Tabletop.init({
                key: publicSpreadsheetUrl,
                callback: showInfo,
                simpleSheet: false
            })
        }

        function showInfo(data, tabletop) {
            const { productos, empresa } = data;
            // console.log(productos.elements)
            myProducts = document.getElementById("myProducts");
            companyName = document.getElementById("companyName");

            let productsHTML = ``;

            productos.elements.map(productos => {
                productsHTML += `
            <div class="el-wrapper">
                    <div class="box-up">
                        <img class="img" src="${productos.imagen}" alt="">
                        <div class="img-info">
                            <div class="info-inner">
                                <span class="p-name">${productos.nombre}</span>
                                <span class="p-company">${productos.categoria}</span>
                            </div>
                            <div class="a-size">Descripción: <span class="size">${productos.descripcion}</span></div>
                        </div>
                    </div>

                    <div class="box-down">
                        <div class="h-bg">
                            <div class="h-bg-inner"></div>
                        </div>

                        <a class="cart" href="#">
                            <span class="price">$ ${productos.precio}</span>
                            <span class="add-to-cart">
                                <span class="txt">Agregar</span>
                            </span>
                        </a>
                    </div>
                </div>`
            })

            myProducts.innerHTML = productsHTML;
            companyName.innerHTML = empresa.elements[0].empresa;
        }

        window.addEventListener('DOMContentLoaded', init)
    </script>
</body>

</html>