DEV Community: Hermann Pollack (hpollack95)

Simple pero poderoso: CRUD dinámico con Flask, Javascript y Fetch API.

Hermann Pollack (hpollack95) — Sun, 07 Jun 2026 04:13:25 +0000

Con tantas herramientas para el desarrollo web, nos volvemos locos. Sin embargo en las de toda la vida se puede lograr efectos bastante interesantes. Por ejemplo, un crud que use el poder Javascript para generar efectos muy similares al actualizar una parte de la pantalla, sin tener que recurrir a un refresco completo de esta.

El ejemplo que presentaré es una pantalla CRUD con un formulario básico, que gestionará la información a través de la técnica AJAX usando fetch API. el estándar actual de JS para obtener la información desd eel backend y que lleguen a la presentación. Como he estado trabajando con Flask, el backend será ese.

La vista

<section class="section">
    <div class="row">
        <div class="col-md-12">
            <div class="card">
                <div class="card-body">
                    <div class="card-title">Datos Bancos</div>
                    <form id="bancoForm">
                        <div class="row g-3 mb-4">
                            <div class="col-md-4">
                                {% if session.usuario[4] == 1 and session.usuario[5] == 1%}
                                    <select name="idempresa" id="idempresa" class="form-select form-select-lg">
                                        <option value="">Seleccione empresa...</option>
                                        {% for empresa in empresas %}
                                            <option value="{{ empresa.id }}">{{ empresa.nombre }}</option>
                                        {% endfor %}
                                    </select>
                                {% else %}
                                    <input type="hidden" name="idempresa" id="idempresa" value="{{ session.usuario[5] }}" readonly>
                                {% endif %}
                                <input type="hidden" name="idbanco" class="form-control form-control sm" id="idbanco" >
                            </div>
                        </div>
                        <div class="row g-3 mb-4">
                            <div class="col-md-4">
                                <input type="text" name="nombre" placeholder="Nombre del banco" id="nombre" class="form-control bank" required>
                            </div>
                            <div class="col-md-4">
                                <input type="text" name="ncuenta" placeholder="Numero de cuenta" id="ncuenta" class="form-control bank" required>
                            </div>
                            <div class="col-md-4">
                                <select name="tipo_cuenta_bancaria" placeholder="Tipo de cuenta" id="tipo_cuenta_bancaria" class="form-select bank" required>
                                    <option value="">Seleccione tipo de cuenta</option>
                                    {% for cuenta in tipo_cuenta %}
                                        <option value="{{ cuenta.id }}">{{ cuenta.tipo_cuenta }}</option>
                                    {% endfor %}                                    
                                </select>
                            </div>
                            <div class="col-md-4">
                                <select name="tipo_moneda" placeholder="Tipo de moneda" id="tipo_moneda" class="form-select bank" required>
                                    <option value="">Seleccione tipo de moneda</option>
                                    <option value="CLP">Pesos</option>
                                    <option value="USD">Dolares</option>
                                    <option value="EUR">Euros</option>
                                </select>
                            </div>
                            <div class="col-md-4">
                                <input type="checkbox" name="estado" id="estado" class="form-check-input bank">
                                <label class="form-check-label" for="estado">Activo</label>
                            </div>
                        </div>
                        <div class="row g-3 mb-4">
                            <div class="col-md-8">
                                <button type="submit" class="btn btn-primary mb-2" id="grabar"><i class="fa fa-save"></i> Grabar</button>
                                <button type="reset" class="btn btn-warning mb-2 limpiar"><i class="fa fa-eraser"></i> Limpiar</button>
                                <button type="button" class="btn btn-danger mb-2" id="cancelar"><i class="fa fa-times"></i> Cerrar</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
            <br>
            <div class="card">
                <div class="card-body">
                    <div class="card-title">Datos Bancos</div>
                    <div class="table-responsive">
                        <table class="table table-bordered table-striped" id="lista_bancos">
                            <thead>
                                <th>#</th>
                                <th>N&deg; Cuenta</th>
                                <th>Banco</th>
                                <th>Tipo de Cuenta</th>
                                <th>Tipo de Moneda</th>
                                <th>Estado</th>
                                <th>Acciones</th>
                            </thead>
                            <tbody>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
</section>

En este html, tenemos en dos card distintas, primero el formulario en la superior y la tabla vacía en el inferior. Esto es el esqueleto aun sin datos, salvo una validación con Jinja2 para traer un select con una lista.

Javascript

Por otra parte, tenemos el JS de turno. Aquí es donde ocurrirá la magia.

function traeDatosBanco(idempresa) {
    listaBancos.innerHTML = ""
    fetch('/traebancos', {
        method : 'POST',
        headers : {
            'Content-type' : 'application/json'
        },
        body : JSON.stringify({idempresa: idempresa})
        })
    .then(response => response.json())
    .then(data => {
        console.log(data.msg)
        if (data.resp == 1) {
            let linea = ''
            let i = 1
            let colorTextEstado = ''
            data.msg.forEach(dato => {
                colorTextEstado = dato.estado == 'Activo' ? 'text-success' : 'text-danger'
                linea = `<tr>
                <td>${i++}</td>
                <td>${dato.numero_cuenta}</td>
                <td>${dato.nombre_banco}</td>
                <td>${dato.tipo_cuenta_bancaria}</td>
                <td>${dato.tipo_moneda}</td>
                <td class="${colorTextEstado}"><b>${dato.estado}</b></td>
                <td>
                    <button type="button" class="btn btn-primary btn-sm dropdown-toggle" id="opciones" data-bs-toggle="dropdown" aria-expanded="false">
                        <i class="fa fa-gear"></i>
                    </button>
                    <ul class="dropdown-menu" aria-labelledby="opciones">
                        <li>
                            <button type="button" class="btn btn-link btn-block dropdown-item editar" data-id="${dato.id}"><i class="fa fa-pencil text-primary"></i>  Editar</button>
                        </li>
                        <li>
                            <button type="button" class="btn btn-link btn-block dropdown-item eliminar" data-id="${dato.id}" data-estado=${dato.estado == 'Activo' ? 'I' : 'A'}>
                            <i class="fa ${dato.estado == 'Activo' ? 'fa-eye-slash text-danger' : 'fa-eye text.success'}"></i> ${dato.estado == 'Activo' ? 'Desactivar' : 'Activar'}</button>
                        </li>
                    </ul>
                </td>
                </tr>
                `
                listaBancos.insertAdjacentHTML('beforeend', linea)
            })
            cargaTabla('#lista_bancos')
        } else {
            console.log(data.msg)
        }
    })
    .catch(error => {
        console.log(error)
    })
}

Esta función es la que que tendrá comunicación con el backed para traer la información. En este caso, una lista de cuentas y las cargará en la tabla de la vista. ¿Cómo lo hará? de dos maneras: usando el select visto en el HTML y la otra a la hora de rellenar y enviar el formulario.

idempresa.addEventListener('change', function() {
    let idempresa = this.value
    console.log(idempresa)
    grabar.disabled = false
    habilitar('.bank')
    // Se invoca a la función. refrescará la tabla en cada elección
    traeDatosBanco(idempresa)
})

En cuanto a lo que hace, la función hace el llamado asíncrono al backend y generalas filas de la tabla con los datos y acciones a usar dentro de ella. Con esto le damos una dinámica en que, cada evento de creacion y/o actualización. Lo mismo pasa en botón de envío del formulario.

formBancos.addEventListener('submit', function(e) {
    e.preventDefault()
    // Sentencias y validaciones
    fetch('/enviadatos', {
        method : 'POST',
        headers : {
            'Content-type' : 'application/json'
        },
        body : datos
    })
    .then(response => response.json())
    .then(data => {
        if (data.resp == 1) {
            // si la respuesta es positiva, vuelve a cargar la tabla
            traeDatosBanco(idempresa.value)
        }
    })
    .catch(error => {console.log(error)})
})

La ventaja al ser una función, es que se puede invocar en cualquier evento. La tabla se refrescará con los datos que el backend responda.

Backend.

El backend fue escrito dividiendo rutas, controladores y modelos, que es uno de los estándares de Flask para trabajar de mejor manera, al separar las responsabilidades.

route

La ruta es básicamente la "pasarela" entre la vista y el controlador.

@contab.route('/traebancos', methods=['POST'])
@login_required
def get_lista_bancos():
    data = request.get_json()
    empresa = data.get('idempresa', '') if data.get('idempresa', '') else session['usuario'][5]
    res = contableController.get_lista_bancos(empresa)
    return jsonify(res)

controller

En el controlador, tenemos la lógica de negocio que permite procesar la información.

@staticmethod
    def get_lista_bancos(empresa):
        res = contableModel.get_lista_bancos(empresa)
        if res:
            return {'resp': 1, 'msg': res}
        return {'resp': 0, 'msg': 'No se encontraron resultados'}

model

En cuanto al modelo, hace la conexion con la base de datos y trae el resultado, mediante una consulta SQL cruda. (no uso ORM en este ejemplo).

def get_lista_bancos(empresa):
    conexion = DBConn.conexion()
    string = '''select cb.numero_cuenta, cb.nombre_banco, tcb.tipo_cuenta_bancaria, cb.tipo_moneda, e.nombre,
    case
        when cb.estado = 'A' then 'Activo'
        else 'Inactivo'
    end as estado, cb.id
    from public.cuentas_bancarias cb 
    join public.tipo_cuenta_bancaria tcb on (cb.tipo_cuenta_bancaria = tcb.id)
    join public.empresa e on (cb.empresa = e.id) where e.id = %s;
    '''
    try:
        with conexion:
            with conexion.cursor() as sql:
                sql.execute(string, (empresa,))
                return [{'numero_cuenta': row[0], 
                         'nombre_banco': row[1], 
                         'tipo_cuenta_bancaria': row[2], 
                         'tipo_moneda': row[3],
                         'empresa': row[4], 
                         'estado': row[5], 
                         'id': row[6]} for row in sql.fetchall()]
    except psycopg2.DatabaseError as e:
        Utils.errorLog(f'Error get_lista_bancos => {str(e)}')

El resultado se puede ver en el siguiente video.

En resumen, lo que se hizo es lo siguiente:

Creamos una función que reciba los datos desde el backend y escriba las filas de la tabla.
Al ser una función, se puede utilizar en dos eventos distintos: la lista seleccionble y los eventos DML para crear y/o actualizar los datos.
Evitamos el tener que recargar constantemente la página.

Si bien, existen frameworks que hacen exactamente lo mismo, aprender lo básico de javascript, permite entender el funcionamiento y hasta evitar recargar con tantas librerías que hagan lo mismo, cuando se pueden programar con el lenguaje mismo.

Minimax, Teoría de Juegos y el "gato"

Hermann Pollack (hpollack95) — Thu, 14 May 2026 04:57:43 +0000

Corría el año 2014, en mi final de semestre de Programación Orientada a Objetos en la Universidad Católica del Maule. El profesor nos planteó crear un juego del gato (o tres en raya). Mi aplicación se desvió un poco de lo pedido, pero investigué herramientas para que la CPU jugara de manera eficiente. El resultado: un juego imposible de ganar para un humano.

El gato es un juego simple pero entretenido. Lo jugaba de niño con compañeros: 9 casillas, una X para un jugador y una O para el otro. Gana quien complete una línea horizontal, vertical o diagonal.

Teoría de Juegos

La Teoría de Juegos es una rama de las matemáticas y la economía que estudia la toma de decisiones estratégicas. Su objetivo es entender cómo se comportan individuos, empresas o naciones cuando el resultado de sus acciones depende de las acciones de los demás. En simple: analiza la interdependencia.

Ejemplos:

En el gato, tu decisión depende de lo que el rival escoja.
En el trabajo, muchas acciones de mis colegas dependen de lo que yo autorice en una máquina.
En el fútbol, la estrategia depende de la habilidad de los jugadores y las decisiones que toman en la cancha.

En el gato, las posibilidades matemáticas son 255.168 combinaciones desde el quinto turno (pues antes no se puede completar una línea). Se denota con la fórmula:

\large S_{total} = \sum_{t=5}^{9} \text{Ganadas}(t) + \text{Empatadas}(9)

Tabla de secuencias posibles

Turno (t)	Jugador que mueve	Secuencias que terminan aquí	Resultado
5	X	1.440	Victoria de X
6	O	5.328	Victoria de O
7	X	47.952	Victoria de X
8	O	72.576	Victoria de O
9	X	81.792	Victoria de X
9	-	46.080	Empate
TOTAL		255.168	Caminos posibles

Para un humano es imposible calcular todas esas variantes mentalmente. Una máquina sí puede, incluso con un Pentium 4, porque no cae en la trampa psicológica que afecta a los jugadores humanos (como en el póker, donde las expresiones son clave). Al ser un juego de dos, siempre tiende a ser de suma cero: cada victoria de uno ( $+ 1$ ) es la derrota del otro ( $- 1$ ).

Minimax

Concepto

El algoritmo Minimax es un método de decisión usado en Inteligencia Artificial y en juegos de suma cero como el gato. Busca el movimiento óptimo, asumiendo que ambos jugadores juegan de manera perfecta.

Su representación matemática es:

\begin{cases} \text{utilidad}(s) \; \Rightarrow \text{ es un estado terminal} \\ \max_{a \in A(s)} V(\text{resultado}(s, a)) \; \Rightarrow \text{el jugador es MAX} \\ \min_{a \in A(s)} V(\text{resultado}(s, a)) \; \Rightarrow \text{ el jugador es MIN} \end{cases}

Donde:

$V (s)$ : valor de utilidad del estado actual.
$u t i l i d a d (s)$ : valor final del juego (+1 victoria, -1 derrota, 0 empate).
$M A X$ : jugador que busca maximizar (CPU).
$M I N$ : jugador que busca minimizar (oponente).
$A (s)$ : conjunto de movimientos legales.
$res u lt a d o (s, a)$ : nuevo tablero tras aplicar la acción.

En simple:

Si el juego terminó, el valor es el resultado.
Si es turno de MAX: la CPU calcula todos los tableros y escoge el más beneficioso.
Si es turno de MIN: la IA asume que el humano elegirá la opción que más la perjudique.

Implementación en Python

def __minimax(self, player):
    if self.won():
        if player:
            return (-1, None)
        else:
            return (+1, None)
    elif self.tied():
        return (0, None)
    elif player:
        best = (-2, None)
        for x, y in self.fields:
            if self.fields[x, y] == self.empty:
                value = self.move(x, y).__minimax(not player)[0]
                if value > best[0]:
                    best = (value, (x, y))
        return best
    else:
        best = (+2, None)
        for x, y in self.fields:
            if self.fields[x, y] == self.empty:
                value = self.move(x, y).__minimax(not player)[0]
                if value < best[0]:
                    best = (value, (x, y))
        return best

Explicación paso a paso

Caso base

El algoritmo es recursivo: se llama a sí mismo en cada movimiento.

if self.won(): si el juego terminó, retorna -1 si ganó el humano, +1 si ganó la CPU.
elif self.tied(): si hay empate, retorna 0.

Maximizador (`elif player:`)

La IA simula sus movimientos buscando maximizar el resultado.

Inicializa best = (-2, None) como valor centinela.
Explora casillas vacías.
Simula un movimiento y llama recursivamente a __minimax.
Si el valor obtenido es mayor al mejor actual, lo guarda.

Minimizador (`else:`)

La IA simula al oponente, que busca minimizar el resultado.

Inicializa best = (+2, None).
Explora casillas vacías.
Simula un movimiento y llama recursivamente a __minimax.
Si el valor obtenido es menor al mejor actual, lo guarda.

Propagación de valores

La línea clave es:

value = self.move(x, y).__minimax(not player)[0]

Esto construye un árbol de decisiones:

Los nodos MIN eligen el valor más bajo.
Los nodos MAX eligen el valor más alto.

Así, la IA explora todas las ramas posibles y selecciona siempre la jugada óptima. En consecuencia, nunca pierde.

Conclusión.

Este trabajo ya hace 12 años, me inició en el conocimiento de lo que se conoce como Inteligencia Artificial, que hoy es muy común y sorprendente para el usuario común, pero que algunos ya conocíamos desde la época de los videojuegos arcade. Ahora bien, mas que razonar, lo que hace este algoritmo es simular en base a la probabilidad, toda opción en base a la opción de su oponente humano, eligiendo la que más le conviene (máximo beneficio y mínimo riesgo).

Debo decir que no me saqué la mejor nota (un 5.6 de 7), pero le gustó la explicación de lo que hice, porque en realidad, el conocer un método como este, me hizo darme cuenta, como hacer "pensar" a la CPU.

En fin, antes de irme, estoy ya terminando de ver la serie Persona de Interés a la que le hice reseña. Eso, Dejó un pequeño video del resultado de este juego. Lo iré refactorizando y lo subiré a mi repositorio pronto. Que estén bien.

Optimización en Flask: Conexión Individual vs. Pool de Conexiones.

Hermann Pollack (hpollack95) — Thu, 16 Apr 2026 15:19:18 +0000

Cuando una aplicación, sea web o API, empieza a crecer en su uso, siempre hay que tener en cuenta la cantidad de llamadas y conexiones, especialmente hacia los datos. Hay muchas formas de minimizar el impacto en el servidor, pero un factor crítico son las transacciones con las bases de datos, especialmente en sistemas donde se realizan múltiples llamadas por método.

Para este ejemplo usaremos PostgreSQL. Aunque el estándar web suele asociarse a MariaDB, prefiero PostgreSQL por ser más robusto y escalable, a pesar de que en ciertos escenarios de transacciones web simples no siempre iguale la velocidad de opciones más ligeras.

1. Forma individual

La forma común de conectarse a la base de datos en Flask es abrir y cerrar la conexión física en cada petición. Esto es: se hace la llamada, se abre una conexión, se realiza la transacción y se cierra.

import psycopg2 
from config import config

# Conexión normal
def conn():
    try:
        params = config()
        conexion = psycopg2.connect(
            host=params['hostname'],
            database=params['database'],
            user=params['username'],
            password=params['password']
        )
        return conexion
    except Exception as e:
        print(f"No se pudo conectar: {e}")

# Llamada común a la base de datos
def get_empresa():
    conexion = conn()
    query = "SELECT id, nombre FROM public.empresa;"
    try:
        cursor = conexion.cursor()
        cursor.execute(query)
        data = cursor.fetchall()
        return data
    except psycopg2.DatabaseError as e:
        print(e)
    finally:
        if conexion:
            conexion.close()

En esta modalidad, se abre una conexión física por cada consulta. Para aplicaciones pequeñas es normal; sin embargo, siempre ocupa un hilo por usuario. Si tenemos 100 usuarios simultáneos, son 100 conexiones físicas negociándose, lo que aumenta significativamente el uso de CPU y memoria.

El problema de las múltiples llamadas

Un controlador típico en Flask puede realizar múltiples llamados a la base de datos para renderizar una sola vista:

@user.route('/usuarios')
@login_required
def usuarios():
    # Solo aquí ya hay 4 posibles aperturas de conexión física
    menu = DBUtils.get_menu(3) 
    perfil = usuarioModel.get_perfil()
    empresas = usuarioModel.get_empresa()
    lista = usuarioModel.get_lista()

    if menu is None:
        return redirect(url_for('auth.login'))

    DBUtils.set_history(session['usuario'][0], 'registro_usuario', 'Ingreso al módulo de usuarios')
    return render_template('usuario/usuario.html', **menu, perfiles=perfil, empresas=empresas, lista=lista)

Con 100 usuarios, esto se traduce en 400 llamadas de apertura y cierre. Los recursos de hardware podrían empezar a colapsar y el servidor empezaría a cerrar conexiones para "protegerse".

2. Forma de Pools (Agrupamiento)

Un pool de conexiones es un conjunto de conexiones abiertas que están "vivas" y en espera.

Hagamos una analogía con un restaurante. Si en cada petición tuviéramos que fabricar la mesa, tomar el pedido y luego desarmar la mesa, sería una pérdida de tiempo. Es mejor dejar varias mesas armadas para que el cliente simplemente se siente y sea atendido.

El pool organiza los hilos y los cede a cada usuario. Si defino 20 hilos para 20 usuarios y llega el número 21, este esperará un tiempo mínimo a que uno de los hilos sea liberado. Con esto garantizas que todos consuman la data y que el servidor no explote.

3. Creación de la conexión de Pools

Utilizaremos ThreadedConnectionPool de la librería psycopg2:

import psycopg2
from psycopg2 import pool 
from config import DBconfig

class DBConn:
    __pool = None

    @classmethod
    def initialize(cls):
        if cls.__pool is None:
            try:
                params = DBconfig()
                # Definimos un mínimo de 1 y un máximo de 20 conexiones
                cls.__pool = psycopg2.pool.ThreadedConnectionPool(
                    1, 20,
                    host=params['HOSTNAME'],
                    database=params['DATABASE'],
                    user=params['USERNAME'],
                    password=params['PASSWORD']
                )
                print("Pool de conexiones creado exitosamente")
            except Exception as e:
                print(f"Error al crear el pool de conexiones: {str(e)}")

    @classmethod
    def conexion(cls):
        if cls.__pool is None:
            cls.initialize()
        return cls.__pool.getconn()

    @classmethod
    def liberar_conexion(cls, conexion):
        if cls.__pool is not None:
            cls.__pool.putconn(conexion)

    @classmethod
    def cerrar_pool(cls):
        if cls.__pool is not None:
            cls.__pool.closeall()
            print("Pool de conexiones cerrado")

Implementación en el modelo

Lo único que cambia es el método de obtención y cierre de la conexión:

def get_empresa():
    conexion = DBConn.conexion()
    query = "SELECT id, nombre FROM public.empresa;"
    try:
        cursor = conexion.cursor()
        cursor.execute(query)
        data = cursor.fetchall()
        return data
    except psycopg2.DatabaseError as e:
        print(f"Error: {e}")
    finally:
        # Liberamos la conexión al pool sin cerrarla físicamente
        DBConn.liberar_conexion(conexion)

Conclusión

Mantenemos los hilos en espera (sleep) hasta que aparezca otra petición. Esto permite que el hardware mantenga una estabilidad de CPU y RAM sin súbitos consumo de recursos.

Aunque existen herramientas ORM como SQLAlchemy que ya manejan esto automáticamente, entender cómo funciona "bajo el capó" es una excelente práctica para optimizar el rendimiento de cualquier backend profesional.

Contador de tiempo de sesion en Flask + Javascript

Hermann Pollack (hpollack95) — Tue, 14 Apr 2026 02:52:58 +0000

Cuando se trabaja en sistemas con acceso de usuarios, cada lenguaje y/o framework asociado, tiene sus formas de manipular las sesiones de estas. Ahora bien, también se puede visualizar el tiempo restante de sesión de forma interactiva y vistosa. Acá hice un pequeño ejercicio para entender dos cosas: el manejo de tiempo de sesión en Flask y el como visualizarlo "contando hacia atrás", con Javascript.

Manejo de sesiones.

En Flask, el módulo de sesiones viene incluido en el framework. Esto lo invocamos en encabezado en los archivos de rutas. Como por ejemplo:

from flask import Blueprint, request, session, redirect, url_for, flash, render_template

En el método de autenticación, podemos usar la lógica siguiente.

if data:
    session.permanent = True
    session['usuario'] = data
    DBUtils.set_history(session['usuario'][0], 'login', 'Inicio de Sesion Correcto')
    usuarioModel.set_ultimo_acceso(session['usuario'][0], 'login')
    return redirect(url_for('auth.home'))

Donde podemos ver lo siguiente: despues de extraer la data, la verificamos y si existe, se crean la sesion. En session.permanent, al darle valor True, se mantiene activa, mientras que en la tupla session['usuario'], llenamos los datos de sesion. Esto sería lo básico para manejar las sesiones de usuario en un sistema tanto en Flask, como en otros frameworks como Django.

Ahora bien ¿Y si solo queremos unos minutos de sesion por seguridad? Podemos hacer eso de la siguiente manera. Ya que sabemos que session.permanent = True, permite que la sesión continúe activa aun cerrando el navegador, crearemos un límite usando otro método del núcleo de flask, que se invoca en el archivo principal.

Definir límite de tiempo de sesión.

Python

Lo primero es importar del núcleo de flask, el método current_app, que nos permitira crear una instancia válida para cualquier archivo de rutas, donde usamos sesiones.

from flask import current_app

Luego, llamamos el siguiente método propio de flask

app.permanent_session_lifetime = timedelta(minutes=10)

Este método, es el que maneja el tiempo de sesión. Para el ejemplo dejaremos 10 minutos, como límite. Ahora para invocarlo en todos los controladores, como ya habíamos mencionado, haremos lo siguiente: crearemos un contexto y definiremos una función en el archivo principal, que usara current_app para aplicarlo a todo el sitio.

@app.context_processor
def traer_restante():
    try:
        restante = int(current_app.permanent_session_lifetime.total_seconds())
    except Exception:
        restante = 600  # Valor por defecto (10 minutos)
    return {"restante": restante}

Javascript: crear reloj contador "hacia atrás".

Ya que tenemos definido el tiempo de sesión, traeremos el valor de la funcion de contexto y lo aplicaremos al front creando un contador de tiempo hacia atrás. Para ello definiremos una función en javascript que nos dará ese efecto.

function contadorTiempo() {
    if (restante >= 0) {
        var minutos = Math.floor(restante / 60)
        var segundos = restante % 60
        document.getElementById('contador').innerText = `Tiempo de sesión restante: ${minutos}m ${segundos}s`
        restante--
        setTimeout(contadorTiempo, 1000)
        if (restante === 60) {
            alerta(2, 'Tu sesión terminará en un minuto')
        }
    } else {
        jconfirm({
            title: 'Sesión expirada',
            content: 'Tu sesión ha expirado. Por favor, inicia sesión nuevamente.',
            type: 'blue',
            buttons: {
                cerrar: {
                    btnClass: 'btn-info ripple',
                    action: function() {
                        window.location.href = '/login'
                    }
                }
            }
        })
    }
}

Esta función toma el valor dela variable "restante" que definiremos a posteriori en la vista/template. Como no uso moment.js (que es una libreria útil para estas cosas, pero para el ejemplo no es necesario), aplicaremos el método Math.floor() para dividir el tiempo en minutos y segundos y colocarlos en un elemento del DOM de id contador, restando el valor de uno en uno y seteamos que el tiempo transcurra segundo a segundo con setTimeout().

Por último, creamos dos alertas. La primera es cuando quede menos de un minuto, una advertencia y el último, el que indica que la sesión expiro.

Ahora, debemos mostrar el resultado y para ello recurriré a un elemento div con id "contador" (en este caso, en el navbar), y al pie del archivo html se colocará el llamado a la función.

<div id="contador" class="ms-2"></div>
<!-- Bajo el </body> y los scripts usados se coloca el llamado a la funcion  -->
<script>
    // Como estamos llamando a valor del backend, usamos el formato de Jinja para traerlo.
    var restante = {{ restante|default(600)|int }}
    contadorTiempo() 
</script>

El resultado final, será un contador de minutos y segundos que se verá algo así en la barra de navegación.

Conclusión.

Si bien, como mencioné antes, existen librerías como moment.js que simplifican esto, el realizarlo de esta manera sirve para entender mejor el manejo de sesiones y tiempo de vida de estas. Algo simple pero "inquebrantable" (o casi).

Les dejo un video del proceso.

Usando Websocket IO, con Flask y Javascript.

Hermann Pollack (hpollack95) — Fri, 08 Aug 2025 20:35:20 +0000

Uno de los aspectos de los Sistemas Web que empezaron a masificarse, fueron las notificaciones en "tiempo real". Esto y más la necesidad de contar con la información, lo más pronto posible, hicieron que los desarrolladores crearan e implementaran herramientas para tal fin. Tal es el caso de los Web Socket, que permiten, mostrar salidas de información en el momento en que esta es procesada.

La tecnología de Sockets no es nueva. Es la base de los chats en tiempo real, desde la época de ICQ incluso. Las redes sociales como Facebook y X, las usan hace mucho tiempo, dentro de sus plataformas web. En el caso que nos compete, un WebSocket funciona de la misma manera, pero bajo un socket único con protocolo TCP, que nos permite una comunicación bidireccional y full-duplex, permitiendo poder tener información en tiempo real de cualquier actividad.

En Flask, micro framework de Python para Web, que he estado usando (y aprendiendo), hice una pequeña prueba con notificaciones toast, las cuáles, al realizar una acción que amerite una, se desplegara apenas esté ejecutada la tarea. Los pasos para implementarlo fueron los siguientes.

Instalación de WebSocket IO.

Esta se realiza tanto en el backend como en el front.

Dentro del directorio de la aplicación, se añade desde el gestor de paquetes pip, lo siguiente.

pip install flask-socketio

Esto instalará los archivos necesarios para activar el socket.

En la vista debe ir la librería socketio, la cual llamaré con su correspondiente CDN

<script src="https://cdn.socket.io/4.6.1/socket.io.min.js"></script>

Ambas librerías son necesarias para la comunicación efectiva entre cliente-servidor.

Como he estado desarrollando una aplicación, la integré en esta de la siguiente manera. Por ejemplo. poseo un archivo Utils.py con funciones que reutilizo dentro del código principal. Importo la librería en este.

from flask_socketio import SocketIO

# creo la instancia del web socket
socketio = SocketIO()

Con esto ya podemos implementarlo en nuestro backend.

Implementación.

Backend: Python Flask.

En el controlador, se creará una instancia que notifique.

Controlador con su correspondiente ruta.

from models import documentosModel, usuarioModel
from utils import Utils 

@docu.route('/notificardocu', methods = ['POST'])
def notificar_docu():
    response = {}

    if request.method == 'POST':
        req = request.get_json()
        usuario = req.get('usuario')
        empresa = req.get('empresa')
        tipo = req.get('tipodocu')
        idocu = req.get('id')
        resp = notificar_docu_aut(usuario, empresa, tipo, idocu)

        if resp == 1:
            response = {'resp' : 1, 'msg' : 'Notificacion enviada exitosamente'}
        else:
            response = {'resp' : 0, 'msg' : 'Ocurrio un error al enviar la notificacion'}

# Logica de negocio para notificaciones automaticas.
def notificar_docu_aut(usuario, empresa, tipo, idocu):
    fecha = Utils.fecha_actual()
    hora  = Utils.hora_actual()
    tipodocumento = documentosModel.get_tipo_documento_id(tipo)
    docu = documentosModel.get_detalle_docu(idocu, empresa, tipo)
    titulo = f"Notificación de  {str(tipodocumento[1])} N°  {str(docu[0])}" 
    cuerpo = f'''<p>Se ha creado una  {str(tipodocumento[1])}  Número {Utils.lpad(str(docu[0]), 5)} </p> 
    <p>
        <ol>
            <li>Creado por: {str(session['usuario'][2])}</li>
            <li>Valor Total + IVA: {str(docu[1])} </li>
        </ol>
    </p>        
    '''
    estado = 'N'
    resp = usuarioModel.set_notificacion(usuario, empresa, fecha, hora, titulo,cuerpo, estado)

    if resp == 1:
        Utils.socketio.emit('notificacion_toast', {'msg' : cuerpo})
        return 1
    else:
        return 0

Explicación:

En este controlador tengo dos funciones. La que se comunica con la vista enviando un response y la función que crea la notificación. En esta última, si la respuesta es positiva (valor 1), invocaremos al socket implementado en Utils.socketio.emit() con la clave 'notificacion_toast' y cuyo valor es el JSON generado con HTML para la notificación.

También debemos hacer una modificación en el archivo principal.

from flask import Flask
from utils import Utils # Incluimos la librería
from controllers import init_controllers

app = Flask(__name__, static_folder='static')
app.secret_key = 'holamundo'

init_controllers(app)
# Llamamos a socketio que será quien inicialize la aplicación
Utils.socketio.init_app(app)

if __name__ == '__main__':
    Utils.socketio.run(app, debug=True)

Aquí hacemos los siguientes cambios.

Importamos la librería Utils para traer la instancia de socketio
Modificamos el inicializador. Para esto, usamos Utils.socketio.init_app() y reemplazamos app.run() por Utils.socketio.run(). Con esto, el WebSocket queda habilitado.

Frontend: Javascript.

En el Javascript de la vista, creamos el toast y lo cargamos con lo que viene desde el backend.

Como a mí me gusta separar código, la función para crear el toast, lo utilizo en un archivo de funciones útiles.

// Funcion para crear HTML de notificacion toast. El parámetro es el mensaje a desplegar.
function toastNotificacion(mensaje) {
    const toastContainer = document.querySelector('#toast-notif')
    const toast = document.createElement('div')
    toast.className = 'toast align-items-center bg-white border-0 show';
    toast.ariaLive = 'assertive'
    toast.ariaAtomic = true
    toast.role = 'alert'
    toast.innerHTML = `
        <div class="toast-header">
            <strong class="me-auto">Notificacion</strong>
            <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
        </div>
        <div class="d-flex">
            <div class="toast-body">${mensaje}</div>
            <button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast"></button>
        </div>`
    toastContainer.appendChild(toast)

    setTimeout(() => {
        toast.remove()
    }, 5000)    
}

En el archivo principal main.js agregamos lo siguiente.

// llamamos a la instancia de socket.io.min.js
const socket = io() 

// Funcion para probar si esta conectado.
 socket.on('connect', () => {
        console.log('Conectado')
})

// implementamos la llamada a la funcion creada y le pasamos el mensaje.
socket.on('notificacion_toast', (data) => {
        toastNotificacion(data.msg)
})

El método on() del socket, "abre" la conexión hacia el backend, recibiendo la data en JSON, la cual se entregará a la vista. Con el socket ya abierto, la notificación aparecerá a quien esté dirigida, en el mismo instante en que se ha creado dicha notificación.

El resultado lo pueden ver aquí.

Terminando.

Los Web Socket son útiles si quieres enviar información en tiempo real. Pueden hacerse desde llamados a notificaciones, como a seguimiento en tiempo real de gráficos y otras informaciones que se irán generando. Con este ejemplo básico, quise mostrar esta herramienta potente que sirve mucho para dinamizar nuestras aplicaciones web, dándoles un toque moderno, con algo que, si bien ya existía, no todos la implementan. Nos vemos en otro post.

Administrador Web de Servidores Webmin: Concepto e instalación.

Hermann Pollack (hpollack95) — Sat, 19 Jul 2025 21:00:06 +0000

Mucho de trabajo en el área de la informática, tiene que ver con la administración de servidores. Como desarrollador, no nos es ajeno, que debemos conocer los ambientes en que se despliegan las aplicaciones a los cuales se accede, por lo general, desde la consola de comandos. Y en un mundo gráfico como el de hoy, no siempre es suficiente. (pero si esencial).

Sin embargo, a veces por necesidad y celeridad en algunas cosas, es más factible hacerlo de forma gráfica. Existen en el mercado, herramientas que permiten la administración de dichas máquinas de esta forma, normalmente usando tecnología web. De estas, la primera que conocí es Webmin, una herramienta escrita en Perl, que permite monitorear y administrar de forma gráfica, todo el aspecto del servidor de forma muy completa y amigable.

Breve historia.

En el año 1997, Jamie Cameron lanzó este desarrollo con la finalidad de simplificar la administración de sistemas Linux y otros de Tipo Unix, orientado principalmente a gente que posee conocimientos de Linux, más no estaban entrenados plenamente en la administración. Rápidamente fue adoptado por la comunidad, debido a las múltiples herramientas que posee y que alivió en gran medida, el trabajo de muchos.

Posee herramientas y funcionalidades, que permiten levantar rápidamente, servidores Web, motores de Bases de datos, reglas de usuarios, entre otras funcionalidades. Tiene una comunidad muy activa en su versionado. Hoy incluso posee una interfaz web responsiva, que permite poder trabajar incluso desde aparatos móviles.

Instalación.

El proceso de instalación es muy simple. En la web oficial, encontrarán este apartado, donde estan las instrucciones, que, de igual manera, dejaré aquí.

En la consola, con privilegios de super usuario, colocamos lo siguiente.

curl -o webmin-setup-repo.sh https://raw.githubusercontent.com/webmin/webmin/master/webmin-setup-repo.sh
sh webmin-setup-repo.sh

Este comando, descarga un script que realiza la descarga de la última versión estable del proyecto. Dependiendo de que versión de Linux o BSD estén ocupando, se ejecuta el comando de instalación.

# Ubuntu Debian
apt install webmin
# CentOS Rocky RedHat
dnf install webmin

Una vez instalado, podemos acceder por la dirección de nuestra máquina, de la siguiente forma: https://<tu_direccion_web_o_IP:10000.

Al acceder por primera vez, encontraremos la pantalla de login. Las credenciales son las mismas del sistema operativo.

Nota: existen tambien usuarios propios de webmin, que puede ser creados a partir de dichas cuentas o viceversa: crear usuarios webmin y transformalos en usuarios del S.O. Además de poder administrar privilegios tanto de la plataforma como del sistema operativo.

Interfaz de administración.

En la imagen, podemos ver el dashboard de administración, en la barra principal, podemos ver:

Webmin: aquí encontramos las configuraciones y controles de Webmin, entre ellas, la creación de usuarios, el cambio de lenguaje y tema (apariencia), la configuración general, etc.
System: acá vemos lo relacionado con la configuración misma de la máquina y el S.O, tal como la administración de usuarios y grupos Linux-Unix, el sistema de archivos, rotación de logs, tareas del cron, etc.
Servers: Aquí se administran los servidores instalados, como el servidor web, el motor de base de datos, servidor de nombres de dominio, de correo, etc. Todo con formularios de administración para las configuraciones, además de editores de texto, si queremos hacerlo manual.
Tools: todo el apartado de herramientas y opciones de administración, como el de archivos, comandos hasta una consola embebida (de hecho, tiene una que se despliega sobre la interfaz). Muy útil si necesitas rapidez a la hora de realizar tareas.
Networking: Acá encontramos herramientas de monitoreo de red, donde podemos administrar los cortafuegos, monitores de ~~bando de ancha~~ ancho de banda etc.
Hardware: Herramientas de administración de impresoras, la fecha y hora del sistema y las particiones del disco.
Cluster: Webmin puede crear y administrar clúster de servidores de manera sencilla, en este apartado, si lo que quieres es armar algo más grande.
Unused Modules: Webmin registra los módulos que no están siendo utilizados y que, desde este apartado y de ser necesario, puedes instalar.

En la parte central, en su index, nos muestra de forma gráfica, el estado en tiempo real de la máquina (Memoria, CPU, Uso de Disco, etc). Además de información de últimos accesos, estado de la red y el uso de disco.

Consola integrada.

Webmin trae un acceso a la consola de forma integrada, la cual, en las últimas versiones, permite emular perfectamente, la funcionalidad completa de la misma. En la barra lateral, al presionar el ícono de la consola, se desplegará cubriendo la pantalla de administración.

Esta no es la única consola. En el apartado Tools, podemos desplegar la opción opción terminal, que nos llevara a una pantalla con la consola integrada en el sistema.

Editor interno.

Cuando necesitemos modificar archivos de manera rápida, podemos acceder a un editor interno, integrado en el File Manager. Para ello, navegamos por él, al directorio y archivo que queremos modificar, click derecho y elegir Edit y se abrira en una ventana modal.

Nota: también en algunas opciones del sistema, como la configuración de apache, trae editores integrados que se despliega dentro de la plataforma invocando el archivo de configuración. Esto, si no queremos usar los formularios.

Apreciación General.

Webmin es una excelente herramienta, aunque no la única. Existen varias enfocadas a aspectos más globales como Free Ipa, que centraliza la administración de usuarios y máquinas, si hablamos de una infraestructura más grande, pero más cercana a Webmin, esta Cookpit, el cual es una interfaz liviana y plugins que puedes añadir. Sin embargo, Webmin la supera con creces, porque centraliza toda la administración en una sola interfaz.

Existe, además, dos plataformas anexas que se integran con Webmin: Virtualmin, que sirve para "Virtualizar" servidores, dando herramientas adicionales para manejar de mejor manera, dominios, cuotas de recursos etc. y Usermin que es una interfaz orientada al usuario, con casillas de correo, configuraciones entre otras, sin necesidad de acceder al sistema completo.

De mi parte, cuando conocí esta herramienta, hace ya más de una década, pude aprender mejor el tema de administración de sistemas. A veces, de forma gráfica no solo trabajas mejor, si no que aprendes mejor. Eso sí, la consola siempre será más poderosa y nunca está demás, aprender comandos, especialmente si administras sistemas. Por lo pronto, les dejo esta herramienta que seguro, les servirá.

Pasos para desplegar aplicacion Flask con mod_wsgi y Apache.

Hermann Pollack (hpollack95) — Thu, 10 Jul 2025 20:46:32 +0000

Apache es el servidor web por excelencia, para desplegar aplicaciones y paginas web. Sin embargo, su funcionamiento en otros stacks, como por ejemplo Python Flask, se comporta bastante diferente. Sin embargo, existen varias formas de usarlo y las útil que encontré, que no requiere demasiadas configuraciones, es usar el módulo WSGI que este servidor posee, lo que permite conectar la aplicación desde donde esté ubicada e interpretarla para que sea usable en producción (y también desarrollo).

Ambiente.

Requerimientos.

Sistema Operativo: Ubuntu 24
Version de Apache: 2.4.58-1ubuntu8.6
Versión de Flask: 3.1.1
Base de Datos: PostgreSQL 16.9
Ruta de la aplicación: /home/user/flask

Configuración.

Vamos a preparar el entorno para habilitar Apache. Para esto, requerimos instalar lo siguiente.

En primer lugar, hay que instalar mod_wsgi en el ambiente. Esto debe hacerse con el entorno virtual activado (Despues se desactiva, ya que apache tomara el mando y desplegará la aplicación).

# Activa el entorno virtual
source venv/bin/activate
# Descargar paquete mod_wsgi
pip install mod_wsgi
# Desactivar el entorno virtual
deactivate

Lo siguiente es instalar el paquete mod_wsgi en Apache y habilitarlo

sudo apt install libapache2-mod-wsgi-py3
# Habilitar 
sudo a2enmod wsgi
# Reiniciar apache
sudo systemctl restart apache2
# Verificar
apache2ctl -M | grep wsgi
# La salida debe ser algo como esto
 wsgi_module (shared)

El próximo paso, es crear el archivo app.wsgi, dentro del directorio donde se encuentra la aplicación (/home/user/flask) que será el que apache utilizará para conectar con la aplicación.

vim app.wsgi

El archivo debe llevar lo siguiente.

import sys
sys.path.insert(0,'/home/user/flask') # Aqui va la ruta de la aplicacion
from flaskapp import app as application # El nombre de la aplicacion, debe coincidir con el de la app.py, en este caso flaskapp.py

Lo siguiente es crear el VirtualHost en la configuración de Apache. Dependiendo de la distribución, se encuentra en distintos lugares. En el caso de Ubuntu, por lo general está en /etc/apache2/site-avalaibles/. Debe llevar lo siguiente.

sudo vim /etc/apache2/sites-available/flask.conf

<VirtualHost *:5000>
    ServerAdmin webmaster@localhost

    WSGIDaemonProcess flaskapp user=user group=www-data threads=5 python-home=/home/user/flaskapp/venv
    WSGIScriptAlias / /home/user/flaskapp/flaskapp.wsgi
    WSGIProcessGroup flaskapp

    <Directory /home/user/flaskapp>
        Require all granted
    </Directory>

    Alias /static/ /home/user/flaskapp/static/
    <Directory /home/user/flaskapp/static/>
        Require all granted
    </Directory>

    ErrorLog ${APACHE_LOG_DIR}/flaskapp-error.log
    CustomLog ${APACHE_LOG_DIR}/flaskapp-access.log combined
</VirtualHost>

Este archivo contiene lo siguiente:

En encabezado, Virtualhost *:5000 que habilita el puerto 5000, aunque puede ser cualquiera que deseen utilizar. Se debe comprobar si el puerto objetivo esta abierto para escuchas con netstat o ss.

# Net stats
sudo netstats -tulnp|grep *:5000 # Puede ser cualquier otro puerto
# SS
sudo ss -tulnp|grep *:5000

En WSGIDaemonProcess, se debe agregar lo siguiente.

el nombre de la aplicación, en este caso flaskapp
el usuario dueño del directorio.
el grupo al que pertenece, en este caso debe ser si o si www-data
en la ruta python-home, se agrega la ruta donde se encuentra la aplicación. Debe apuntar al directorio venv que es el que activa el entorno virtual y guarda las dependencias.

En WSGIScriptAlias, apuntamos a la ruta de nuestra app.wsgi, que es el puente entre Apache y la aplicación.

Por ultimo en Alias, se apunta al directorio static, el cual almacena los archivos estáticos como imágenes, hojas de estilo y scripts de Javascript que la web utiliza.

Una vez realizado esto, se deba aplicar el comando a2ensite flaskapp, para que agregue el nuevo archivo .conf se vuelve a reiniciar Apache, para que tome los cambios.

Se debe asegurar que el puerto sea escuchado. Para eso, abrimos /etc/apache2/ports.conf y agregamos la siguiente línea

Listen 5000

Se agrega la aplicacion.

# Añade la aplicacion al entorno de apache
sudo a2ensite flaskapp

Ahora, hay que considerar los permisos del directorio. Si están trabajando con git, pueden tener ciertas dificultades, si el usuario que administra el control de versiones no es el duelo del directorio. Lo mejor en este caso, es agregarlo al grupo www-data.

# Se agrega 
sudo chown -R hpollack:www-data /home/user/pyerp
# Se dan permisos de lectura y ejecucion
sudo chmod -R 755 /home/user/flaskapp

Por último, se recarga Apache.

sudo systemctl reload apache2

Con esto, ya estamos listos para el despliegue, salvo una cosa.

Normalmente, Apache, toma en consideración la ruta absoluta de los archivos, por lo que es imperativo, realizar ciertos cambios en la configuración misma de la aplicación. En este caso, la aplicación tiene dos archivos que hacen función de eso: config.ini y config.py. En este últimos nos centraremos.

Para empezar, la configuración básica es la siguiente. Definimos en el .ini, los parámetros que serán llamados:

# En este archivo, se agregan los parámetros. Pueden ser varios, los cuales se pueden llamar en constantes dentro de cualquier otro archivo de la aplicacion.
[postgresql]
HOSTNAME = localhost
PORT = 5432
USERNAME = usuario
PASSWORD = clave
DATABASE = basededatos

Luego tenemos el .py que lo llama.

from configparser import ConfigParser

def DBconfig(filename='config.ini', section='postgresql'):
    parser = ConfigParser()
    parser.read(filename)
    db = {}

    if section in parser:
        for key in parser[section]:
            db[key.upper()] = parser[section][key]
    else:
        raise Exception(f'La seccion {section} no existe en el archivo {filename}')
    return db 

if __name__ == '__main__':
    DBconfig()

La función de este ultimo archivo, es llamar a config.ini y cargar dentro de la aplicación, los parámetros que son leídos por cada sección. Normalmente, se escribe como en el ejemplo de arriba, pero Apache puede que no encuentre la ruta y vaya hacia otro lado.

Para asegurar que eso no pase, se agrega lo siguiente

def get_path(filename):
    return os.path.join(os.path.dirname(__file__), filename)

Esta función, nos trae la ruta absoluta, donde se encuentra el archivo config.ini, lo que hará que Apache lo encuentre sin problemas. El archivo entonces quedará asi.

import os # importamos las funcionalidades que usa el sistema operativo.
from configparser import ConfigParser

# Generamos la ruta absoluta, basada en la del directorio de la aplicacion
def get_path(filename):
   return os.path.join(os.path.dirname(__file__), filename)

def DBconfig(filename='config.ini', section='postgresql'):
   parser = ConfigParser()
   # aqui llamamos a la funcion que trae la ruta.
   parser.read(get_path(filename))

   db = {}
   if section in parser:
       for key in parser[section]:
           db[key.upper()] = parser[section][key]
   else:
       raise Exception(f'La seccion {section} no existe en el archivo {filename}')
   return db

Actualización.

En algunas ocasiones, Apache bloquea por defecto el despliegue dándonos un error 403, por lo que es necesario, aplicar el siguiente cambio

chmod o+x /home
chmod o+x /home/user

Esto nos permitirá que Apache pueda "explorar" dentro del directorio donde se encuentra la aplicación y permitir su salida, por el puerto asignado. Una vez realizado, solo se aplica systemctl restart apache2 y la aplicación se desplegará.

Consideraciones finales.

Este ejemplo, se hizo en un ambiente de desarrollo. Para desplegar en producción, hay otros detalles adicionales que se deben considerar. Aun así está configuración mínima, permite desplegar una aplicación, rápidamente y con mayor eficiencia.

Existen otras herramientas como gunicorn, que realiza la misma función, pero en este post, quise dar un ejemplo de algo que ya existe y que además, es el más masivo en su uso.

Espero que les sirva. Saludos.

Exportar a excel con ExcelJS y Vanilla Datatables

Hermann Pollack (hpollack95) — Sat, 05 Jul 2025 05:01:24 +0000

He ido poco a poco, deshaciéndome de dependencias de JQuery. En vez de Jquery Datatables, uso la versión Vanilla Datatables, la que, lamentablemente, no trae módulo para exportar a Excel por defecto. Por esa razón, buscando en Internet, di con SheetJS, una herramienta en Javascript, que permite exportar, de manera simple, reportes en este formato. Les explicaré como se usa a continuación.

Ambiente.

Usare una aplicación en flask, pero como es solo front end, omitiré las llamadas a datos desde el model y nos centraremos en la vista.

HTML.

en la sección de scripts agregamos los siguientes CDN

<!-- Vanilla Datatables  -->
<script src="https://unpkg.com/vanilla-datatables@latest/dist/vanilla-dataTables.min.js" type="text/javascript"></script>
<!-- SheetJS  -->
<script src="https://cdn.jsdelivr.net/gh/SheetJS/sheetjs@0.17.0/dist/xlsx.full.min.js"></script>

En la vista, tengo esta tabla.

<div class="table-responsive">
    <table class="table table-bordered table-striped table-light" id="listadocu">
        <thead>
            <tr>
                <th>#</th>
                <th>N&deg; Documento</th>
                <th data-type="date" date-format="DD-MM-YYYY">Fecha</th>
                <th>Receptor</th>
                <th>Total Neto</th>
                <th>IVA</th>
                <th>Total Documento</th>
                <th>Estado</th>
                <th>Acciones</th>
            </tr>
        </thead>
        <tbody>
            {% for fila in documentos %}
                <tr>
                    <td>{{ loop.index }}</td>
                    <td>{{ fila[0] }}</td>
                    <td>{{ fila[1] }}</td>
                    <td>
                        <small>
                            <span class="fs-9"><b>{{ fila[2] }}</b></span> -
                            <span class="fs-9">{{ fila[3] }}</span> -
                            <span class="fs-9">{{ fila[4] }}</span>
                        </small>
                    </td>
                    <td>$ {{ fila[5] }}</td>
                    <td>$ {{ fila[6] }}</td>
                    <td><b>$ {{ fila[7] }}</b></td>
                    <td>
                        {% if fila[9] == 'Pendiente' %}
                            <span class="badge bg-secondary">Pendiente</span>
                        {% elif fila[9] == 'Nulo' %}
                            <span class="badge bg-danger">Anulado</span>
                        {% else %}
                            <span class="badge bg-success">Aprobado</span>
                        {% endif %}
                    </td>
                    <td>
                        <button type="button" class="btn btn-primary btn-sm dropdown-toggle" id="opciones" data-bs-toggle="dropdown" aria-expanded="false">
                            <i class="fa fa-gear"></i>
                        </button>
                        <ul class="dropdown-menu" aria-labelledby="opciones">
                            <li>
                                <button type="button" class="btn btn-link btn-block dropdown-item notif" data-bs-toggle="modal" data-bs-target="#form_notificacion" data-empresa="{{ session.usuario[5] }}" data-id="{{ fila[8] }}" data-tipo="{{ tipo }}">
                                    <i class="fa fa-bell text-success"></i> Notificar
                                </button>
                            </li>
                            <li>
                                <button type="button" class="btn btn-link btn-block dropdown-item mdocu" data-bs-toggle="modal" data-bs-target="#verdocu" data-id="{{ fila[8] }}" data-tipo="{{ tipo }}" data-empresa="{{ session.usuario[5] }}">
                                    <i class="fa fa-eye text-warning"></i> Ver Documento
                                </button>
                            </li>
                            <li>
                                <button type="button" class="btn btn-link w-100 dropdown-item download" data-id="{{ fila[8] }}" data-tipo="{{ tipo }}" data-empresa="{{ session.usuario[5] }}">
                                    <i class="fa fa-file-pdf-o text-danger"></i> Descargar PDF
                                </button>
                            </li>
                            {% if fila[9] == 'Pendiente' %}
                                <li>
                                    <button type="button" class="btn btn-link dropdown-item aprob" data-id="{{ fila[8] }}"  data-tipo="{{ tipo }}" data-numdocu="{{ fila[0] }}" data-estado="A">
                                        <i class="fa fa-check text-success"></i> Aprobar
                                    </button>
                                </li>
                                <li>
                                    <button type="button" class="btn btn-link dropdown-item anul" data-id="{{ fila[8] }}"  data-tipo="{{ tipo }}" data-numdocu="{{ fila[0] }}" data-estado="N">
                                        <i class="fa fa-times text-danger"></i> Anular
                                    </button>
                                </li>
                            {% endif %}
                            {% if fila[9] == 'Aprobado' %}
                                <li>
                                    <button type="button" class="btn btn-link dropdown-item otro" data-id="{{ fila[8] }}" data-tipo="{{ tipo }}"><i class="fa fa-plus text-primary"></i> Cargar en nuevo documento</button>
                                </li>
                            {% endif %}                                                       
                        </ul>
                    </td>
                </tr>
            {% endfor %}                                        
        </tbody>
    </table>
</div>

Fuera de la tabla (arriba o abajo, según deseen), añadiremos un botón.

<button type="button" class="btn btn-success mt-4" id="completo"><i class="fa fa-file-excel-o"></i> Exportar</button>

Javascript

En el documento JS que se llamara listadocumentos.js, colocaremos lo siguiente.

// Renderizamos la tabla 
const tabla = new DataTable('#listadocu', {
    labels: {
        placeholder: 'Buscar...',
        perPage: '{select} registros por página',
        noRows: 'No se encontraron registros',
        info: 'Mostrando {start} a {end} de {rows} registros',
    }
})

// Creamos el evento del boton. 
 document.querySelector('#completo').addEventListener('click', function () { 
    tabla.perPage = 9999
    tabla.update()
    setTimeout(() => {
        const datos = tabla.data
        let encabezados = Array.from(document.querySelectorAll('#listadocu thead th')).map(th => th.textContent.trim())
        encabezados = encabezados.slice(0, encabezados.length - 2)
        const filas = datos.map(filas => {
            const celdas = Array.from(filas.querySelectorAll('td')).map(fila => fila.textContent.trim())
            return celdas.slice(0, celdas.length - 2)
        })
        const todos = [encabezados, ...filas]
        const hoja = XLSX.utils.aoa_to_sheet(todos)

        const anchoColumnas = encabezados.map((enc, i) => {
            const anchoMaximo = Math.max(...filas.map(fila => (fila[i] ? fila[i].length : 0)))
            return Math.max(enc.length, anchoMaximo)
        })

        hoja['!cols'] = anchoColumnas.map(ancho => ({wch : ancho + 2}))

        const libro = XLSX.utils.book_new()
        XLSX.utils.book_append_sheet(libro, hoja, 'Datos')
        XLSX.writeFile(libro, 'documentos.xlsx')
    }, 100)
})

Explicación.

La constante const tabla = new DataTable(), llama a la librería de Vanilla Datatables y la renderiza, con los valores por defecto. Esto es, con un paginado seleccionable de 10 filas mínimo. Tomemos esto último en consideración, ya que el script, exportará todos los datos cargados en el front.

tabla.perPage = 9999
tabla.update()

Estos dos métodos de Vanilla Datatables, nos permiten re-renderizar la tabla. la propiedad tabla.perPage nos permite definir la cantidad de filas a mostrar, en este caso con el valor 9999, las trae todas. Por otra parte, tabla.update() actualiza los valores de la tabla con la propiedad entregada. Esto no se refleja en el front, ya que es para exportar el Excel.

Ahora, dentro del evento setTimeOut(), que usaremos para darle tiempo a Datatables, de volver a renderizar, definimos lo siguiente:


// extrae la información de la tabla-
const datos = tabla.data
// Mapea encabezados y guarda en array
let encabezados = Array.from(document.querySelectorAll('#listadocu thead th')).map(th => th.textContent.trim())

// Mapea las filas de datos
const filas = datos.map(filas => {
    const celdas = Array.from(filas.querySelectorAll('td')).map(fila => fila.textContent.trim())
    return celdas.slice(0, celdas.length - 1)
})

La constante datos extrae la información de la tabla usando la propiedad tabla.data. La variable encabezado mapea los encabezados de la tabla en un array.

Por último filas mapea los datos de la tabla. Aquí se ve una característica adicional. Como no se quiere, la columna con el botón de opciones, se declara la constante celdas, la cual guardará los datos en el array correspondiente y se devolverán sin la columna final.

Lo siguiente es definir el libro y la hoja

const todos = [encabezados, ...filas]
const hoja = XLSX.utils.aoa_to_sheet(todos)

// Definimos el ancho de las columnas
const anchoColumnas = encabezados.map((enc, i) => {
    const anchoMaximo = Math.max(...filas.map(fila => (fila[i] ? fila[i].length : 0)))
    return Math.max(enc.length, anchoMaximo)
})


hoja['!cols'] = anchoColumnas.map(ancho => ({wch : ancho + 2}))

// Se crea el libro, donde iran los datos, en la hoja del mismo nombre
const libro = XLSX.utils.book_new()
XLSX.utils.book_append_sheet(libro, hoja, 'Datos')
// Exporta el excel
XLSX.writeFile(libro, 'documentos.xlsx')

En todos, creamos un array, donde iran por separado, los encabezados y los datos. con anchorColumnas, definimos el ancho de las columnas, adaptados a la extensión del texto de cada encabezado, calculando el largo del texto, el cual se mapea, dándole el ancho + 2 espacios adicionales.

Finalmente llamamos al objeto XLSX el cual crea el libro y la hoja definida con sus propiedades y escribe la información.

El resultado, se puede observar en el siguiente video.

Terminando.

SheetJS es una buena herramienta si quieres conseguir resultados rápidos para reportes, especialmente desde el Front, lo que hace que la carga hacia el servidor sea menor.

Tiene más herramientas, pero hay que seguir averiguando. Nos vemos en otra.

Creando un drag and drop con javascript y css y algo de python.

Hermann Pollack (hpollack95) — Fri, 27 Jun 2025 21:43:05 +0000

Las aplicaciones web han evolucionado tanto que hoy no solo tenemos, herramientas y frameworks e distintos lenguajes, si no que además, se han hecho mas amigables con el usuario, si lo comparamos como era en los 2000.

Pues bien, una herramienta útil, es el "arrastrar y soltar". Este concepto no es nuevo, y han existido librerías Javascript para crear el efecto. Sin embargo, desde las especificaciones de Ecmascript 6, el usar Javascript puro (Vanilla Javascript para los conocedores), no solo se ha vuelto más fácil, si no que no necesitas depender de extensiones o librerías externas, como lo fue por ejemplo JQuery.

Como ejemplo, usaré un proyecto personal que he estado desarrollando este tiempo. Sin embargo, el concepto en general, se puede aplicar a cualquier aplicación web que estén desarrollando.

Estructura base.

HTML.

Vamos a crear el campo donde arrastraremos el archivo, en este caso, la imagen.

 <div class="drop-zone" id="fotoperfil">
    <span class="fa fa-upload"> Arrastre la foto o haga click para seleccionar archivos</span>
</div>
<input type="file" name="imagen" id="imagen" class="form-control">

El código de arriba, crea un <div> con la clase .drop-zone y el id fotoperfil, que es la que manejará el evento de arastre. Fuera de este, colocaremos el <input> con la propiedad file, el cual tendra el id imagen. Teniendo definido esto, le damos estilo con CSS.

En la zona donde se verá la imagen una vez cargada, al ser Flask, nuestro backend, usamos el motor Jinja2, para renderizar. Esto debe quedar asi

<div class="card-body profile-card pt-4 d-flex flex-column align-items-center">
    {% for user in datausuario %}
    <!-- Aquí validamos si existe la url de la imagen. Si es el caso, se muestra  -->
        {% if user[13] %}
            <img src="{{ url_for('static', filename='img/profile/' ~ user[13]) }}" alt="Profile" class="rounded-5 img-fluid profile-image">
        {% else %}
            <img src="{{ url_for('static', filename='img/profile/avatar.png') }}" alt="Profile" class="rounded-5 img-fluid">
        {% endif %}

        <h2>{{ user[1] }} {{ user[2] }}</h2>
        <h3>{{ user[3] }} </h3>
        {% if user[13]  %}                        
            <button type="button" class="btn btn-danger mb-4" id="quitaimagen"><i class="fa fa-times"></i>  Eliminar imagen</button>
        {% endif %}
        <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#nuevaimagen"><i class="fa fa-upload"></i>  Cargar Nueva Imagen</button>
    {% endfor %}
</div>

CSS.

Procedemos a darle estilo.

.drop-zone {
    height: 150px;
    border: 2px dashed #aaa;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #666;
    cursor: pointer;
    transition: 0.2s;
}

.drop-zone.draggable {
    border-color: #333;
    background-color: #fff;
}

/* Si solo quieres que sea un campo y no todos en el proyecto,
puedes utilizar el id del campo */
input[type="file"] {
    display: none;
}

En .drop-zone definimos el alto que tendrá el campo -el ancho lo dejamos a criterio-. con un borde segmentado de dos pixeles y un color gris. Le añadimos el cursor pointer -👆- para darle la visualización de que el campo es mas grande.

El truco de esto es que ocultamos el campo tipo "file", que es el que recibe la imagen. En este caso, el campo va dentro de un Modal de Bootstrap 5

Javascript.

Ahora, hay que programar el evento. Lo primero es definir los selectores html.

const zonaFoto = document.querySelector('#fotoperfil')
const campoFoto = document.querySelector('#imagen')

Con estas constantes, escogemos #fotoperfil del div de la zona de arrastre vista mas arriba e #imagen, del campo tipo "file".

Lo siguiente es definir la función que tomara los archivos. Esto se puede hacer al final de script.

function tomaArchivos(archivos) {
    const transfer = new DataTransfer()
    for (const archivo of archivos) {
        if (archivo.type.startsWith('image/')) {
            const lector = new FileReader()
            lector.onload = function(e) {
                zonaFoto.style.backgroundImage = `url(${e.target.result})`
                zonaFoto.style.bacgroundSize = 'contain'
                zonaFoto.style.bacgroundPosition = 'center'
                zonaFoto.style.bacgroundRepeat = 'no-repeat'
            }

            lector.readAsDataURL(archivo)
            transfer.items.add(archivo)
        } else {
            alerta(3, 'Solo se permiten imagenes')
        }
    }

    campoFoto.files = transfer.files
    console.log(campoFoto.files)
}

La función tomaArchivos() es la que evaluará y procesará la imagen, usando el método startsWith() con el tipo mime image/. Este solo dejará pasar los archivos que sean tipo imagen (se puede incluso definir la extensión de esta forma image/png si solo quieres de ese tipo).

El FileReader(), nos mostrará la imagen cargada en el campo de arrastre. Fuera del bucle for le pasamos la información con DataTransfer() al campo oculto.

Por último, nos queda definir los eventos.

// Creamos el evento click para el div drop-zone
zonaFoto.addEventListener('click', () => {
    campoFoto.click()
})

// Los dos eventos siguientes crean y deshacen el arrastrar
zonaFoto.addEventListener('dragover', (e) => {
    e.preventDefault()
    e.stopPropagation()
    zonaFoto.classList.add('draggable')
})

zonaFoto.addEventListener('dragleave', () =>{
    zonaFoto.classList.remove('draggable')
})

// Una vez que la imagen se deposita en la zona, se remueve la clase que genera el drag, toma el archivo y lo deja en el campo tipo file
zonaFoto.addEventListener('drop', (e) => {
    e.preventDefault()
    e.stopPropagation()
    zonaFoto.classList.remove('draggable')
    const foto = e.dataTransfer.files
    tomaArchivos(foto)
})

// Por último, el campo file, detecta si hubo un cambio y toma la imagen guardándola.
campoFoto.addEventListener('change', () => {
    tomaArchivos(campoFoto.files)
})

Estos eventos, son dragover, que crea el "arrastrar" y dragleave que lo quita, esto moviendo la clase .dragabble, sea el caso. El siguiente, drop, desactiva el arrastrar, dejando el archivo depositado en la zona y transfiriéndolo al campo tipo file, que detecta el cambio y lo guarda.

Con esto, ahora creamos el evento para subirlo.

/* En este evento, invocaremos al método fetch API que subirá la imagen mas un dato adicional, esto para que el backend lo tome y procese */
document.getElementById('uploadimagen').addEventListener('submit', function(e) {
    e.preventDefault()
    cargaLoader()
    const form = new FormData()
    form.append('file', document.querySelector('input[type="file"]').files[0])
    form.append('idusuario', usuario)

    fetch('/subirimagen', {
        method : 'POST',
        body : form
    })
    .then(response => response.json())
    .then(data => {
        modal.hide()
        if (data.resp == 1) {
            cierraLoader()
            jconfirm({
                title: 'Realizado',
                content : data.msg,
                type : 'green',
                buttons : {
                    aceptar : {
                        btnClass : 'btn-success ripple',
                        action : () => {
                            window.location.reload()
                        }
                    }
                }
            })
        } else  {
            cierraLoader()
            alerta(3, data.msg)
        }
    })
    .catch(error => {
        console.log(error)
    })
})

Con este evento en el botón, el formulario donde se encuentra el drag and drop, subirá la imagen al backend.

Backend Python Flask.

Ahora iremos por el lado del backend. Ya definidos los eventos en el front, ahora debemos procesar la imagen que esta ya cargada en buffer.

@user.route('/subirimagen', methods = ['POST'])
def upload_image():
    if request.method == 'POST':
        idusuario = request.form['idusuario']
        nombrearchivo = ''

        if 'file' not in request.files and 'idusuario' not in request.form:
            return json.dumps({'resp' : 0, 'msg' : 'No se encontraron datos'})
        else:
            file = request.files['file']

            if file.filename == '':
                return json.dumps({'resp' : 0, 'msg' : 'No se ha seleccionado ningun archivo'})
            else:
                    # Esta esa funcion aparte, que se describe mas abajo.
                extension = Utils.validar_extension(file.filename)

                if not extension:               
                    return json.dumps({'resp' : 0, 'msg' : 'El archivo no es permitido'})
                else:
                    extension = file.filename.rsplit('.', 1)[1].lower()

                    if extension not in {'png', 'jpg', 'jpeg'}:
                        return json.dumps({'resp' : 0, 'msg' : 'Este archivo no es una imagen valida'})
            directorio = UPLOAD_PROFILE_IMAGE
            upload = os.path.join(directorio, file.filename)

            try:
                file.save(upload)
                nombrearchivo = file.filename
                # Una vez arriba el archivo, se procede a guardar su nombre y extensión.
                resp = usuarioModel.update_url_img_profile(idusuario, nombrearchivo)                

                if resp == 1:
                    Utils.set_history(session['usuario'][0], 'paginausuario', f'Se subio foto de perfil para usuario  {str(idusuario)}')
                    return json.dumps({'resp' : 1, 'msg' : 'Imagen subida correctamente'})
                else:
                    return json.dumps({'resp' : 0, 'msg' : 'Ocurrio un error al intentar subir el archivo'})
            except Exception as e:
                Utils.errorLog(f'Error al guardar el archivo {str(e)}')
                return json.dumps({'resp' : 0, 'msg' : f'Error al guardar el archivo'})

En este controlador, validamos la imagen y el parámetro asociado, para entregarselo al model que ingresara la url a la base de datos.

Definimos una constante UPLOAD_PROFILE_IMAGE, que guarda la url donde quedara. Se pone por lo general en el encabezado antes de las funciones o en caso de ser OPP, fuera de la clase. Para este caso, usaremos una ruta estática definida en el backend.

UPLOAD_PROFILE_IMAGE = 'static/img/profile/'

Lo otro a considerar es Utils.validar_extension(file.filename) que es una función parte de una librería interna para validar las extensiones almacenadas en un diccionario. Se detalla a continuación.

#Utils.py
# Aqui se definen las extensiones permitidas. 
ALLOWED_EXTENSIONS = {'xslx', 'png', 'jpg', 'jpeg'}

# Funcion que valida si la extensión está dentro del diccionario.
def validar_extension(archivo):
    return '.' in archivo and archivo.rsplit('.', 1)[1].lower() in ALLOWED_EXTENSIONS

En cuanto al modelo, el método será de actualización del campo en específico, donde el parámetro idusuario es el identificador.

def update_url_img_profile(idusuario, ruta):
    conexion = conn()
    string = "update public.usuarios set imagenperfil = %s where id = %s;"

    try:
        sql = conexion.cursor()
        sql.execute(string, (ruta, idusuario))
        sql.close()
        conexion.commit()
        return 1
    except psycopg2.DatabaseError as e:
        conexion.rollback()
        Utils.errorLog(str(e))
        return 0
    finally:
        conexion.close()

El resultado final será:

Se podrá arrastrar y soltar una imagen dentro del recuadro.
Se subirá al backend, guardando la imagen y mostrándola en la zona donde va el avatar.

El resultado, pueden verlo en el siguiente video.

Docker: Concepto e Instalación

Hermann Pollack (hpollack95) — Tue, 03 Jun 2025 02:52:38 +0000

Si eres de los que entraron a la profesión computacional e informática, sabrás que cada día salen nuevas herramientas que es necesario aprender. Entre ellas, el concepto de contenedores de Linux, que nos permiten construir y desplegar aplicaciones de manera mas eficiente. Docker es una herramienta necesaria de conocer en ese sentido, así que explicaré de que se trata después del salto.

Contenedores

La mayor parte de la tecnología existen de Internet hoy, se basa en el paradigma cliente-servidor, donde una máquina envía una petición de información (cliente) a otra que procesa y envía la respuesta (servidor). En estas últimas, lo ideal es saber dividir y administrar los procesos, aplicaciones y servicios para que la respuesta sea rápida y concisa a las necesidades del cliente.

Ahora bien, ya existen aparte del sistema de contenedores, otras de realizar la separación, mediante máquinas y host virtuales, Las grandes diferencias existentes eso si. están en que, mientras la máquina virtual, es un servidor dentro de otro, el virtual host es un espacio, con su propio usuario, dentro del mismo servidor web. Algo como lo que podría ejemplificar abajo.

Virtual Host: Separa las aplicaciones web por usuario y directorios, pero siempre ocupan el mismo servidor web (apache o nginx).
Virtual Machine: Una máquina virtual, "virtualiza" un servidor dentro del real. Pueden ser varias dentro del mismo, con todo lo que este conlleva, compartiendo eso si, recursos de la máquina huésped.
Contenedores: Son imágenes que que trabajan en conjunto dentro del servidor, muy parecidas a las VM, con la salvedad que tienen lo necesario para trabajar ciertas partes de la aplicación y pueden comunicarse entre si de manera mas fácil que dos VM. La diferencia con las anteriores es que son una imagen con solo lo necesario para el despliegue.

En los sistemas basados en Linux, que son los más usados en el mundo, poseen varias herramientas a la hora de administrar las peticiones del servidor, entre ellas lo que se conocen como virtual host para web y los contenedores. Estos últimos son "imágenes" del sistema con lo necesario para que un web-server, una base de datos relacional , sistema de archivos etc., puedan funcionar independientemente dentro del servidor. Como son algo complicados de utilizar, es que aparece la solución, de entre varias similares, conocida como Docker.

¿Qué es Docker?

Docker es un conjunto de herramientas de software que se utilizan para el despliegue y mantenimiento de aplicaciones y su función principal, está basado en el paradigma de los contenedores. Permite crear imágenes con lo necesario para ejecutar dichas aplicaciones. Cada versión viene con Linux, por lo genera Ubuntu, con los archivos necesarios para la ejecución, que se llaman imágenes, las cuales se pueden ejecutar y administrar en paralelo, de forma independiente, pero que pueden interconectarse entre si.

Esto permite varias cosas entre las que se destacan, el poder aislar y comunicar los distintos componentes de una aplicación, por ejemplo, la aplicación web, de la API y/o las bases de datos, mayor facilidad en el despliegue e incluso en el control de versiones. Eso sin contar que posee una gran biblioteca de imágenes creadas, tanto por la comunidad, como por empresas que gestionan software libre.

Instalación.

El proceso de instalación de Docker es sencillo. Aquí explicaré su instalación en Ubuntu.

Lo primero es actualizar el gestor de paquetes

sudo apt update

Lo siguiente es instalar los paquetes necesarios para la certificación HTTPS

sudo apt install apt-transport-https ca-certificates curl software-properties-common

Se agrega la key GPG del repositorio oficial de Docker.

curl -fsSL https://download.docker.com/linux/ubuntu/gpg | sudo gpg --dearmor -o /usr/share/keyrings/docker-archive-keyring.gpg

Y luego se agrega el repositorio al gestor de paquetes.

echo "deb \[arch=$(dpkg --print-architecture) signed-by=/usr/share/keyrings/docker-archive-keyring.gpg\] https://download.docker.com/linux/ubuntu $(lsb_release -cs) stable" | sudo tee /etc/apt/sources.list.d/docker.list > /dev/null

Se vuelve a actualizar el gestor de paquetes y se revisa cual es la versión estable.

sudo apt update

Se procede a la instalación.

sudo apt install docker-ce

Una vez instalado, se comprueba si el demonio se ha inicializado.

sudo systemctl status docker

La salida

Output
● docker.service - Docker Application Container Engine
     Loaded: loaded (/lib/systemd/system/docker.service; enabled; vendor preset: enabled)
     Active: active (running) since Fri 2022-04-01 21:30:25 UTC; 22s ago
TriggeredBy: ● docker.socket
       Docs: https://docs.docker.com
   Main PID: 7854 (dockerd)
      Tasks: 7
     Memory: 38.3M
        CPU: 340ms
     CGroup: /system.slice/docker.service
             └─7854 /usr/bin/dockerd -H fd:// --containerd=/run/containerd/containerd.sock

Por último, se asigna un usuario a Docker.

sudo usermod -aG docker ${USER}
# Una vez el usuario esta con privilegios.
su - ${USER}

Usando Docker.

Si bien tiene varios comandos. Acá se solo mostraré los esenciales para su uso. Docker en su repositorio oficial tiene varias imagenes ya creadas que nos serán esenciales. Aquí explicare el uso básico para el despliegue de una simple aplicación web.

Lo primero que haremos es instalar el contenedor oficial de apache.

docker search apache

La salida nos mostrará algo así.

Output
NAME                             DESCRIPTION                                     STARS     OFFICIAL   AUTOMATED
httpd                            The Apache HTTP Server Project                  4583      \[OK\]
tomcat                           Apache Tomcat is an open source implementati…   3600      \[OK\]
maven                            Apache Maven is a software project managemen…   1529      \[OK\]
zookeeper                        Apache ZooKeeper is an open-source server wh…   1391      \[OK\]
cassandra                        Apache Cassandra is an open-source distribut…   1501      \[OK\]
solr                             Apache Solr is the popular, blazing-fast, op…   968       \[OK\]
flink                            Apache Flink® is a powerful open-source dist…   405       \[OK\]
groovy                           Apache Groovy is a multi-faceted language fo…   144       \[OK\]
tomee                            Apache TomEE is an all-Apache Java EE certif…   113       \[OK\]
storm                            Apache Storm is a free and open source distr…   195       \[OK\]
spark                            Apache Spark - A unified analytics engine fo…   19        \[OK\]
...

El comando anterior, nos busca la imagen por nombre desde el repositorio oficial de docker. Aparte de este, hay muchos otras imagenes customizadas por la comunidad, pero por ahora usaremos esta.

docker pull httpd

Nota: el comando anterior permite descargar la imagen, sin embargo, podemos hacerlo directamente con el comando docker run *nombre de la imagen*

Una vez descargada veremos las imágenes que tenemos con el siguiente comando:

docker images

Nos dará la siguiente salida:

REPOSITORY TAG IMAGE ID CREATED SIZE  
httpd latest 181007c9adb9 4 weeks ago 77.8MB  
portainer/portainer-ce latest d7f7a88e1acc 6 weeks ago 294MB  
postgres latest f7d9a0d4223b 7 weeks ago 417MB

En este caso, tengo 3 imágenes instaladas. En la lista se detalla lo siguiente.

Repository: el nombre del repositorio de la imagen.
TAG: nos indica que la última versión disponible.
Image ID: Es el identificador de la imagen.
Created: Los días que lleva creado el sistema.
Size: El tamaño de la imagen.

Para instalar un contenedor a partir de una imagen, se usa el siguiente comando.

docker run --webserver test -it httpd # el tag --name es el nombre del contenedor

Con el siguiente comando, veremos los contenedores creados y sus status

docker ps -a
# Salida
CONTAINER ID IMAGE COMMAND CREATED STATUS PORTS 31679f076b43 postgres "docker-entrypoint.s…" 11 days ago Up 10 minutes 5432/tcp database  
181007c9adb9 httpd "/bin/bash" 11 days ago Exited (137) 10 days ago webserver  
cab1cfd94b3c portainer/portainer-ce:latest "/portainer" 11 days ago Up 2 hours 0.0.0.0:9000->9000/tcp, :::9000->9000/tcp, 8000/tcp, 0.0.0.0:9443->9443/tcp, :::9443->9443/tcp portainer

En esta salida, podemos apreciar lo siguiente:

Container ID: el identificador del contenedor.
Image: La imagen utilizada para crearlo.
Command: el comando requerido para ingresar a el (opcional al /bin/bash/)
Created: dias y horas en que fue creado.
Status: el estado en que se encuentra (indica los días y horas en que fue ejecutado si esta detenido)
Ports: los puertos que utiliza. Si aparecen son los puertos públicos. Algunas imagenes traen los puertos configurados. Para arrancar los contenedores se requiere el siguiente comando.

docker start 181007c9adb9

donde al lado de start, pondremos la ID del contenedor. En nuestro caso, arranqué httpd y postgres.

Dentro del contenedor.

Una vez inicializado el contenedor, para ingresar a el, necesitamos el siguiente comando.

docker exec -it 181007c9adb9 /bin/bash

En nuestro caso, ingresamos al del servidor web. Dentro de este, podremos gestionar todo lo que será la aplicacion web. Ahora bien ¿Qué pasa si quiero separar la aplicacion web, de la base de datos? Por defecto, Docker posee una subred que actúa de puente y que utiliza por defecto, la IP 172.17.0.0/16 o 172.17.0.1/16. Se puede verificar con el comando ip adress en el host principal.

docker0: &lt;BROADCAST,MULTICAST,UP,LOWER_UP&gt; mtu 1500 qdisc noqueue state UP group default  
link/ether 02:42:29:ab:78:66 brd ff:ff:ff:ff:ff:ff  
inet 172.17.0.1/16 brd 172.17.255.255 scope global docker0  
valid_lft forever preferred_lft forever  
inet6 fe80::42:29ff:feab:7866/64 scope link  
valid_lft forever preferred_lft forever

Las ips asignadas dentro del rango de IP's del contenedor, van siendo realizadas por orden de creación y siempre son las mismas. Aquí por ejemplo, veremos la IP de uno de los contenedores.

docker inspect -f \\

La salida sería la siguiente

'{{range .NetworkSettings.Networks}}{{.IPAddress}}{{end}}' \\  
31679f076b43 // el contenedor de la base de datos

Cada contenedor posee su propia IP, por lo que es fácil conectarla. Vamos entonces a conectar la aplicacion web con la base de datos usando las IP

Ingresamos al config.php de la aplicacion.

$cfg = new stdClass();

$cfg->url = 'http://ipmaquina:81/erp'; // en cuanto se asigne un dominio, se cambia

$cfg->dbhost = '172.16.0.4'; // La IP del contenedor de base de datos. En este caso PostgreSQL $cfg->dbport = '5432';  
$cfg->dbuser = 'nombreusuario'; $cfg->dbpass = 'claveusuario';  
$cfg->dbname = 'nombrebasededatos';

// $cfg->log = 'C:\\\\tools\\\\Apache24\\\\htdocs\\\\erp\\\\logs\\\\'; $cfg->log = $\_SERVER\['DOCUMENT_ROOT'\].'/erp/logs/';

Una vez terminado, la aplicación se estará ejecutando.

Concluyendo.

Docker tiene muchas otras herramientas que no detallaré aquí, pero con esto, pueden desplegar una aplicacion web, API o cualquier servicio de manera simple. Es una forma eficaz de trabajar sin tener que sobrecargar el servidor.

Por cierto, tambien tiene una herramienta gráfica llamada Portainer, la cual muestra el estado de los contenedores y permite gestionar Dockers desde la web, lo que facilita mucho el uso.

En fin, esto es más que nada para comenzar a utilizar el poder de los contenedores y administrar mejor los recursos del server. Nos vemos en otro post.

Crear PDF a partir de HTML y Python.

Hermann Pollack (hpollack95) — Mon, 02 Jun 2025 22:17:58 +0000

Lo admito. En mis más de 10 años en el rubro de la programación –bello y estresante a la vez-, si hay algo a lo que siempre le he buscado la vuelta es a construir documentos en PDF. Buscando alternativas en mis tiempos libres, encontré una forma más amigable, que parte de un archivo HTML, para crear dichos documentos, usando Flask, wkhtmltopdf y pdfkit en Python.

Python es uno de los lenguajes más usados en la actualidad, tanto por su performance, como su facilidad de uso y abundantes librerías. Aun así, para crear PDF, me encontraba con la misma dificultad de otros lenguajes Open Source como php: había que hacer todo a mano. Claro, aparte de ser un trabajo de largo aliento, los resultados de por sí, no eran del todo satisfactorios.

Sin embargo, gracias a la magia de Internet y la infinidad de recursos que puedes encontrar, podemos crear PDF a partir de un HTML, el cual, se genera mediante linea de comandos con el paquete estándar wkhtmltopdf. Para ellos hay que instalarlo de la siguiente manera:

# En Windows, usamos chocolatey
 choco install wkhtmltopdf
 # EN Linux, el gesto de paquetes correspondiente a la distro. En este caso Ubuntu
 apt install wkhtmltopdf

En python Flask, micro framework para el desarrollo de aplicaciones web, incluiremos el paquete pdfkit, el cual servirá de “puente” entre wkhtmltopdf y la aplicación.

 pip install pdfkit

La vista.

Creamos un vista html, usando los marcadores de Jinja, para el paso de los parámetros.

<div class="mb-10">
        <div class="p-4 text-center" style="float: right; border:#ff0000 solid 6px">
            <h1 style="text-align: center;"><span style="color: #ff0000; font-weight: bold;">{{ documento }}</span></h2>
            <h1 style="text-align: center;"><span style="color: #ff0000; font-weight: bold;">N&deg; {{ numdocu }}</span></h2>
        </div>
        <div>
            {% if logo %}
                <img src="{{ request.url_root }}static/img/logos/{{ logo }}" alt="logo">
            {% else %}
                <img src="{{ request.url_root }}static/img/simplerp/loader.png" sizes="50" alt="logo">
            {% endif %}
        </div>
        <div class="mt-3">
            <strong>{{ rutemisor }}</strong><br>
            <strong>{{ razonsocial }}</strong><br>
            <strong>{{ direccion }}</strong><br>
            <strong>{{ telefono }}</strong></p>
        </div>
    </div>

Como se puede ver, los valores encerrados en {{}} serán los parámetros que el controlador le pasará a la vista una vez procesados los datos desde el Modelo.

if(e.target.closest('.download')) {
            let el = e.target.closest('.download')
            let tipo = el.getAttribute('data-tipo')
            let emisor = el.getAttribute('data-empresa')
            let id = el.getAttribute('data-id')

            let params = JSON.stringify({tipo : tipo, empresa : emisor, idocu : id})
            cargaLoader()

            fetch('/generarpdf', {
                method : 'POST',
                headers : {
                    'Content-type' : 'application/json',
                    'Accept' : 'application/json'
                },
                body : params
            })
            .then(response => {
                cierraLoader()
                if (response.ok) {
                    return response.blob();
                } else {
                    return response.json().then(data => {
                        throw new Error(data.msg);
                    })
                }
            })
            .then(blob => {
                cierraLoader()
                const url = window.URL.createObjectURL(blob)
                document.getElementById('verpdf').src = url
                modalPdf.show()
            })
            .catch(error => {
                cierraLoader()
                console.log(error.message)
                alerta(3, 'Ocurrio un error al intentar generar el documento.')
            })
        }

La función Javascript descrita aquí está en un botón de la lista, que genera el documento. Aquí interactuamos con con el controlador, usando Fetch API, para procesar de forma asíncrona la información.

Controlador

En el controlador, se procesan los datos que el response del Modelo entrega. Me centraré en la generación del documento.

data = {
                'documento' : documento,
                'numdocu' : numdocu,
                'rutemisor' : rutemisor, 
                'razonsocial' : razon_social, 
                'direccion' : direccion, 
                'telefono' : telefono, 
                'rutreceptor' : rutreceptor, 
                'razonreceptor' : razonreceptor, 
                'direceptor' : direceptor, 
                'telreceptor' : telreceptor,
                'fecha' : fecha,
                'nota' : nota,
                'items' : items,
                'neto' : Utils.agregaPuntos(sumatotal),
                'iva' : Utils.agregaPuntos(iva),
                'total' : Utils.agregaPuntos( total)                 
            }

            renderizado = render_template('empresa/documentos/plantilladocu.html', **data)

            opciones = {
                'page-size' : 'A4',
                'encoding' : 'UTF-8',
                'user-style-sheet' : 'static/css/pdf.css'
            }
           return response

El diccionario data, asocia a una clave, al valor que viene desde el Modelo ya procesado. En la siguiente línea, renderizamos el template de ejemplo y le entregamos las opciones a usar, en este caso, un tamaño de papel A4 y codificado en UTF-8, que es el estándar universal.

pdf = pdfkit.from_string(renderizado, False, options=opciones)
            salida = uploads['UPLOAD_DOCUMENTOS'] + '/' + str(documento) + '-' + str(numdocu) + '.pdf'

            response = make_response(pdf)
            response.headers['Content-type'] = 'application/pdf'
            response.headers['Content-Disposition'] = f'inline; filename={salida}'

En las siguientes líneas, generamos el pdf. El método from_string, toma el HTML renderizado con los parámetros ya pasados a la vista y las opciones generales. El valor False, va por defecto.

Al final en el último headers del response, agregamos inline, para que no fuerce la descarga.
El resultado es el siguiente.

Resumiendo: si bien crear documentos PDF con librerías tipo FPDF y otras, es una buena alternativa, a veces hay que ahorrar tiempo, y si tienes herramientas que permitan trabajar de forma óptima y los resultados son ídem, bien vale conocerlas. Un saludo a todos.

El algoritmo.

Hermann Pollack (hpollack95) — Thu, 22 May 2025 17:22:07 +0000

No se puede negar. Todos han escuchado alguna vez, ya sea en las noticias o redes sociales, que hablan de "el algoritmo de X". Incluso aquellos con sus cadenitas, que buscan engañarlos. Si, en la era de la información, estamos dentro de lo que llamaríamos, la dictadura de los algoritmos. El gran problema es que muchos internautas, ni siquiera saben lo que es, salvo que tengas una profesión donde te toque tratar con ellos, como es mi caso. En fin, como a mi me gusta que el conocimiento sea libre, voy a tratar de explicar con peras y manzanas el concepto de algoritmo.

Vamos a partir por algo básico. Cualquier tarea que realicemos, sigue una serie de pasos, desde que la comenzamos, hasta terminarla -claro, habemos algunas que ni eso-. Dentro de esa serie, hay momentos en que tenemos que tomar una decisión sobre que hacer en caso de que se presente algo que no esperábamos, lo que llamaremos condición, y a eso le agregamos que hay algunas que se harán una y otra vez, lo que conoceremos como bucle. En esencia, esta es la descripción más básica y simple de lo que es un algoritmo.

Voy a darles un ejemplo: levantarse en la mañana. El primer paso es -obviamente- abrir los ojos. Luego siguen: estirarse, ir a la ducha. Si hace mucho frio, usamos agua caliente, si no, agua tibia. Volvemos a vestirnos, escogemos la ropa, nos la colocamos y vamos a desayunar. Estos pasos pueden denotarse de la siguiente manera.

Inicio:
    Abrir los ojos
    Levantarse
    Ir a la ducha
    Si hace frio:
        Abrir agua caliente
    Si no:
        Abrir agua tibia
    Fin Si
    Secarse
    Escoger ropa
    Si es dia laboral:
         Ropa de trabajo
    Si no:
        Ropa informal
    Fin Si
    Ir a desayunar
Fin

Como pueden ver estimados lectores, la sencilla tarea de levantarse, se puede secuenciar en un algoritmo.

¿Pero de donde nace este concepto?

El algoritmo es un concepto matemático. Si bien los griegos ya lo conocían, al parecer fue en edad de oro de Medio Oriente, donde se formuló la primera explicación de este. En el siglo X, un matemático persa de nombre Al-Juarismi, describió las reglas del álgebra, como una serie de pasos a seguir para resolver problemas abstractos. En esencia los algoritmos, van muy de la mano de las matemáticas, con el correr de los siglos. En el mundo digital, desde los inicios de la computación moderna, han estado presente, pasando desde Kurt Gödel, hasta Alan Turing, aunque gran parte de las bases fueron cimentadas, por George Boole y su álgebra binaria.

Y en esencia, las computadores, celulares y cualquier instrumento electrónico, entiende solo un idioma: ceros y unos. En base a eso, podemos hacer cosas desde usar una simple calculadora a tener juegos de gráficas deslumbrantes, pasando por la navegación de Internet. Ahora bien, hacer todo en base a ceros y unos, es algo complicado, por lo que durante gran parte del siglo XX, se trabajó en formas, más sencillas de interactuar con las máquinas, usando el lenguaje natural. De ahí nacen los lenguajes de programación, que permiten desarrollar lo mencionado anteriormente y muchas otras cosas mas. Todas basadas en algoritmos.

Las partes de un algoritmo.

En esencia, los algoritmos cuenta de forma general con 3 partes.

Entrada: Son los datos que se ingresan para que el algoritmo pueda operar.
Proceso: La operación lógica formal en que el algoritmo trabajará con los datos de entrada
Salida: Los datos del resultados que el algoritmo entrega.

Con lo anterior, podemos ver que los programas computacionales (software) son un conjunto de algoritmos, que procesan datos de entrada, para darnos una salida. El ejemplo mas sencillo es cuando subes una foto desde tu teléfono (entrada) a alguna aplicación como Instagram para que se vea en el perfil (salida), donde además podremos rellenar una caja de texto. En la parte que el usuario no ve, estos campos -la foto y el texto- el programa almacena esos datos en espacios de memoria, llamados variables. Una vez almacenadas, empiezan los procesos internos, que analizan el contenido de éstas, para luego publicarla. En estos procesos encontramos varios otros conceptos que describen un algoritmo las cuales comento a continuación.

Variables: Las mencionadas arriba, son espacios de memoria que almacenan los datos de entrada para su procesamiento por los algoritmos y también la información de salida (lo que se ve en pantalla). Pueden ser desde números hasta multimedia.
Constantes: Similares a las variables, con la salvedad que son valores que no cambian dentro del programa, a menos que el programador haga un ajuste al algoritmo. Estos valores, por lo general, funcionan como valores de control dentro del algoritmo.

Ahora bien, hay que recordar que los datos de entrada, sea texto, números, hasta fotos y videos, son codificados en secuencias numéricas y traducidas al lenguaje binario, con el que la máquina realiza cálculos. Un ejemplo es si la subida de fotos tiene un límite de peso (por ejemplo 2 megabytes), evaluará esta y procederá al proceso correspondiente (si subirla, como está, reducirla de tamaño y calidad, o bien, devolver un mensaje de advertencia u error, dependiendo del caso). Para que esto ocurra, dentro de la estructura del algoritmo, existen los denominados operadores, los cuáles se utilizan para calcular, ordenar y evaluar los valores de variables y constantes.

Un ejemplo básico es el de la suma.

Inicio
   Int a = 2
   Int b = 2
   Int suma = a + b
   Imprimir Suma
Fin

Lo que realiza el algoritmo de arriba es una suma basica entre dos valores. Se usan 3 variables: a, b y Suma, que es el resultado que se vería en pantalla. Podemos cambiarles los valores y devolverá la suma de estos. Ahora un poco más complicado, con la operación de la división que tiene condiciones especiales. Primero no usaremos numeros enteros, porque habrá ocasiones en que devolverá decimales (ejemplo sería el 10 dividido por 3). Además agregaremos una condición.

Inicio
   Float a
   Float b
   Si b <> 0:
       Float division = a / b
       Imprimir division.
   Si no:
       Imprimir "No se puede dividir por cero"
   Fin Si
Fin

En este ejemplo, podemos ver que agregamos la llamada condición. Estas se usan para evaluar situaciones en que se pueden dar errores. En este caso, por regla matemática, no existe la división por cero, por lo que, en caso de que un valor en el divisor, sea cero, enviará un mensaje de error. Esto es como escoger dos caminos distintos en una intersección. Dependerá de donde se quiera ir, será la respuesta (o bien la más conveniente). Volviendo a la división, lo que evaluamos es que el valor de b, sea distinto (<>) a 0, para realizar la operación. En caso contrario, se saltará ese paso y advertirá que no se puede.

Entramos entonces a dos nuevos conceptos que se definen a continuación.

Operadores: Son los símbolos que nos permiten evaluar y resolver, valga la redundancia, operaciones presentadas dentro del diseño de un algoritmo. Los hay aritméticos: suma (+), resta (-), multiplicación (*) y división (/), pero también los condicionales: mayor (>), menor (<), mayor igual (>=), menor igual (<=), igual (= o == dependiendo del lenguaje de programación), distinto (<> o !=, dependiendo del lenguaje) y lógicos, también llamados booleanos (and, or y not, entre otros).
Condiciones: son también llamadas decisiones. Se denotan con un si, y se aplica algún operador de los mencionados mas arriba (condicionales) que comparan dos o mas valores, para decidir que opción tomar dentro del algoritmo, para llegar a la resolución de un problema.

Ahora bien, retomemos el algoritmo de levantarse, visto anteriormente. Es una tarea que hacemos, prácticamente todos los días. Y como cualquier tarea diaria organizada, solemos tener un horario determinado para realizarlas. Pues bien, dentro del mismo día, hacemos varias tareas, algunas incluso que se repiten una y otra vez, hasta que se complete o bien ocurra algo que nos haga saltar a otra. En la computación y en los algoritmos propiamente tal, las tareas repetitivas son conocidas como ciclos o bucles. De por si, el hecho de encender un dispositivo es un bucle donde se activan todas las tareas y procesos necesarios para su funcionamiento. Y muchas de ellas, están separadas del proceso principal, siendo invocadas al momento de utilizarse. Son las subrutinas o funciones, que permiten separar tareas que realizaremos mas de una vez en el algoritmo principal.

Tomemos el ejemplo siguiente: al ingresar un numero, el programa debe resolver si es un número primo o no.

Inicio:
    Subrutina esPrimo (numero):
        Entero num = numero
        Entero contador = 0;
        Entero x = 1

        Mientras x <= num:
           # Utilizamos una función computacional que extrae el resto de una división. Para que el contador suba, debe quedar en cero. Esto es, si un numero no es primo, habrán otros valores cuyo resto de la división, será 0  
            Si num Mod 2 == 0:
                contador = contador + 1
            Fin Si
            x = x + 1
        Fin Mientras

        Si  contador == 2:
            retorna Verdadero
        Si no:
            retorna Falso
        Fin Si
    Fin Subrutina

    Entero numero
    String respuesta
    Escribe "Ingresar numero: " -> numero
    Leer numero

    respuesta = esPrimo(numero)
        Si respuesta == Verdadero:
            Imprime "Es primo"
        Si no:
            Imprime "No es primo" 
    Fin Si
Fin

En el ejemplo de arriba, se incluyen los dos conceptos mencionados anteriormente. La subrutina como tal, es un algoritmo separado del principal y que este último, solo invoca cuando es requerido. En la mayoría de las aplicaciones, muchas tareas se realizan más de una vez (como subir una foto a Instagram), por lo que se separan del programa principal y son llamados en los momentos en que se requieren. Además dentro del algoritmo que busca los números primos se usa un bucle, el cual consiste en un proceso que se repite hasta que la condición indicada, en este caso, que la constante x tenga un valor menor o igual al numero que ingresa por parámetro (entre paréntesis en la subrutina), se detendrá el proceso y pasará al siguiente bloque de instrucciones. En esencia, un bucle de este tipo lo vemos cuando encendemos el dispositivo o entramos en una aplicación. A menos que la cerremos, seguirá funcionando y haciendo las tareas dentro de este.

Terminando.

Ciertamente se me quedan varias cosas en el tintero, como los tipos de bucle y condición y todo lo que tiene que ver con otros paradigmas de programación, pero la idea de este post, es mostrarles lo que hay detrás de la palabra algoritmo que tanto mencionan en los medios (que son más complejos, pero cuya base es la que les he mostrado en este post). Sin más que agregar, les dejo un ejemplo en javascript del algoritmo de números primos para que puedan verlo y comprobar su funcionamiento, el que encontrarán pinchando aquí.

DEV Community: Hermann Pollack (hpollack95)

Simple pero poderoso: CRUD dinámico con Flask, Javascript y Fetch API.

La vista

Javascript

Backend.

route

controller

model

Minimax, Teoría de Juegos y el "gato"

Teoría de Juegos

Tabla de secuencias posibles

Minimax

Concepto

Implementación en Python

Explicación paso a paso

Caso base

Maximizador (elif player:)

Minimizador (else:)

Propagación de valores

Conclusión.

Optimización en Flask: Conexión Individual vs. Pool de Conexiones.

1. Forma individual

El problema de las múltiples llamadas

2. Forma de Pools (Agrupamiento)

3. Creación de la conexión de Pools

Implementación en el modelo

Conclusión

Contador de tiempo de sesion en Flask + Javascript

Manejo de sesiones.

Definir límite de tiempo de sesión.

Python

Javascript: crear reloj contador "hacia atrás".

Conclusión.

Usando Websocket IO, con Flask y Javascript.

Instalación de WebSocket IO.

Implementación.

Backend: Python Flask.

Frontend: Javascript.

Terminando.

Administrador Web de Servidores Webmin: Concepto e instalación.

Breve historia.

Instalación.

Interfaz de administración.

Consola integrada.

Editor interno.

Apreciación General.

Pasos para desplegar aplicacion Flask con mod_wsgi y Apache.

Ambiente.

Requerimientos.

Configuración.

Actualización.

Consideraciones finales.

Exportar a excel con ExcelJS y Vanilla Datatables

Ambiente.

HTML.

Javascript

Explicación.

Terminando.

Creando un drag and drop con javascript y css y algo de python.

Estructura base.

HTML.

CSS.

Javascript.

Backend Python Flask.

Docker: Concepto e Instalación

Contenedores

¿Qué es Docker?

Instalación.

Usando Docker.

Dentro del contenedor.

Concluyendo.

Crear PDF a partir de HTML y Python.

La vista.

Controlador

El algoritmo.

¿Pero de donde nace este concepto?

Las partes de un algoritmo.

Terminando.

Maximizador (`elif player:`)

Minimizador (`else:`)