Tutorial COMPLETO para Principiantes: Crear Software para PC con HTML

INTRODUCCIÓN PARA PRINCIPIANTES ABSOLUTOS

¿Qué vamos a hacer exactamente?

Vamos a transformar un simple archivo HTML (que normalmente se abre en el navegador) en un programa real para Windows que puedes ejecutar como cualquier software instalado en tu computadora.

PASO 1: Entender QUÉ es Electron y POR QUÉ lo usamos

¿Qué es Electron?

Imagina que Electron es como una cápsula mágica que envuelve tu archivo HTML y lo convierte en un programa independiente. Es como poner tu página web dentro de una ventana especial que no necesita Chrome o Firefox para funcionar.

¿Por qué usar Electron?

Sin navegador: Tu HTML se ejecuta como programa, no como página web
Acceso completo: Puede acceder a archivos de tu computadora
Ventana real: Se ve y se siente como software profesional
Multiplataforma: El mismo código funciona en Windows, Mac y Linux

¿Cómo funciona?

Electron combina dos cosas:

Chromium: El motor de Google Chrome para mostrar HTML
Node.js: Un sistema para acceder a archivos y funciones del sistema

PASO 2: Preparar el Terreno – Instalar Node.js

¿Qué es Node.js?

Es como el motor que necesita Electron para funcionar. Sin Node.js, Electron no puede ejecutarse.

Cómo descargarlo e instalarlo:

Ve a: https://nodejs.org
Descarga la versión que dice «LTS» (Recommended For Most Users)
Ejecuta el archivo descargado (node-vxx.x.x-x64.msi)
Sigue el instalador:

Click «Next»
Marca «I accept the terms»
Sigue haciendo «Next»
Finalmente «Install»

Verificar que funcionó:

Presiona Tecla Windows + R
Escribe cmd y presiona Enter
En la ventana negra, escribe: node --version
Debe aparecer un número como «v18.17.0»

¿Por qué hacemos esto? Porque Electron necesita Node.js para funcionar, igual que un coche necesita gasolina.

PASO 3: Crear nuestra Carpeta de Proyecto

¿Por qué necesitamos una carpeta especial?

Porque vamos a crear varios archivos que deben estar organizados juntos, como una receta de cocina donde todos los ingredientes están en el mismo lugar.

Cómo crear la carpeta:

Ve al Escritorio de tu computadora
Click derecho → Nuevo → Carpeta
Nombra la carpeta: mi-primer-software
Abre la carpeta haciendo doble click

Explicación: Esta carpeta será el «hogar» de nuestro software. Aquí guardaremos todos los archivos necesarios.

PASO 4: Crear nuestro Archivo HTML

¿Qué es HTML?

HTML es el «esqueleto» de tu programa. Define qué texto, imágenes y botones aparecen en pantalla.

Cómo crear el archivo HTML:

Dentro de tu carpeta, haz click derecho → Nuevo → Documento de texto
Cambia el nombre a index.html (importante la extensión .html)
Click derecho → Abrir con → Bloc de notas
Copia y pega este código:

<!DOCTYPE html>
<html>
<head>
    <title>Mi Primer Software</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            text-align: center;
            margin: 50px;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
        }
        .container {
            background: rgba(255,255,255,0.1);
            padding: 30px;
            border-radius: 15px;
            box-shadow: 0 8px 32px rgba(0,0,0,0.3);
        }
        button {
            background: #4CAF50;
            color: white;
            padding: 15px 30px;
            border: none;
            border-radius: 8px;
            font-size: 18px;
            cursor: pointer;
            margin: 10px;
        }
        button:hover {
            background: #45a049;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>🎉 ¡Mi Primer Software!</h1>
        <p>Este programa fue creado con HTML y Electron</p>
        <button onclick="mostrarMensaje()">Haz Click Aquí</button>
        <p id="mensaje"></p>
    </div>

    <script>
        function mostrarMensaje() {
            document.getElementById('mensaje').innerHTML = 
                '✅ ¡Funciona! Has creado tu primer software.';
        }
    </script>
</body>
</html>

¿Qué hace este código?

Crea una ventana con colores bonitos
Muestra un título y texto
Tiene un botón que al hacer click muestra un mensaje
Usa CSS (estilos) para hacerlo atractivo

PASO 5: Crear el Archivo Package.json

¿Qué es package.json?

Es como el DNI o documento de identidad de nuestro software. Le dice a Electron cómo llamarse, qué versión es, y qué archivo abrir primero.

Cómo crearlo:

En la misma carpeta, click derecho → Nuevo → Documento de texto
Nombra package.json
Abre con Bloc de notas y pega:

{
  "name": "mi-primer-software",
  "version": "1.0.0",
  "description": "Mi primera aplicación con Electron",
  "main": "main.js",
  "scripts": {
    "start": "electron .",
    "build": "electron-builder"
  },
  "author": "Tu Nombre",
  "license": "MIT"
}

Explicación línea por línea:

"name": El nombre de tu software
"version": La versión (1.0.0 = primera versión)
"main": Le dice a Electron qué archivo ejecutar primero
"scripts": Comandos para ejecutar y construir el software

PASO 6: Crear el Archivo Principal (main.js)

¿Qué es main.js?

Es el cerebro de nuestra aplicación. Controla cómo se abre la ventana, qué tamaño tiene, y gestiona todo el programa.

Cómo crearlo:

Nuevo documento de texto en la misma carpeta
Nombra main.js
Abre con Bloc de notas y pega:

const { app, BrowserWindow } = require('electron');
const path = require('path');

function createWindow() {
  // Crear la ventana principal
  const win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true,
      contextIsolation: false
    },
    icon: path.join(__dirname, 'icon.png') // Opcional: añadir icono
  });

  // Cargar nuestro archivo HTML
  win.loadFile('index.html');

  // Abrir las herramientas de desarrollo (opcional)
  // win.webContents.openDevTools();
}

// Cuando Electron termine de inicializarse
app.whenReady().then(createWindow);

// Salir cuando todas las ventanas estén cerradas
app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') {
    app.quit();
  }
});

app.on('activate', () => {
  if (BrowserWindow.getAllWindows().length === 0) {
    createWindow();
  }
});

¿Qué hace este código?

BrowserWindow: Crea una ventana de 800×600 píxeles
win.loadFile('index.html'): Abre nuestro archivo HTML
app.whenReady(): Espera a que Electron esté listo
app.quit(): Cierra la aplicación completamente

PASO 7: Instalar Electron en Nuestro Proyecto

¿QUÉ ES LA «VENTANA DE COMANDOS»?

¿Qué es?
Es una ventana negra (o blanca) donde escribimos instrucciones directamente a la computadora, sin usar el mouse ni interfaces gráficas.

¿Por qué la necesitamos?
Porque necesitamos ejecutar comandos para instalar Electron, no algo que hacemos con clicks.

Cómo abrir la ventana de comandos:

Método Fácil:

Presiona Tecla Windows + R
Escribe: cmd
Presiona Enter

Navegar a tu carpeta del proyecto:

En la ventana negra que se abrió, escribe:

cd Desktop\mi-primer-software

Presiona Enter

¿Qué significa?

cd = «change directory» (cambiar de carpeta)
Desktop = la carpeta Escritorio
mi-primer-software = tu carpeta del proyecto

Verificar que estamos en la carpeta correcta:

Escribe:

dir

Presiona Enter

Deberías ver tus archivos: index.html, main.js, package.json

Instalar Electron:

Ahora escribe:

npm install electron --save-dev

Presiona Enter

¿Qué está pasando?

npm: Es el gestor de paquetes de Node.js
install electron: Descarga Electron
--save-dev: Guarda la información en package.json

Verificación: Aparecerá una nueva carpeta node_modules en tu proyecto.

PASO 8: Probar Nuestra Aplicación

¡Momento de la verdad!

En la misma ventana de comandos, escribe:

npm start

Presiona Enter

¿Qué debería pasar?

Se abrirá una ventana con tu interfaz HTML, pero como un programa real:

Tiene barra de título de Windows
Puedes minimizar, maximizar, cerrar
El botón funciona
¡No necesita navegador!

Explicación: npm start ejecuta el comando que definimos en package.json, que abre Electron con nuestro proyecto.

PASO 9: Convertir a .EXE Ejecutable

¿Por qué necesitamos un .EXE?

Para poder distribuir tu software a otras personas sin que tengan que instalar Node.js o usar comandos.

Instalar Electron Builder:

En la MISMA ventana de comandos (asegúrate de estar todavía en tu carpeta), escribe:

npm install electron-builder --save-dev

Presiona Enter

¿QUÉ HACE ESTE COMANDO EXACTAMENTE?

npm: El «gestor de paquetes» de Node.js
install: Le dice que instale algo
electron-builder: Es el programa que convierte nuestro proyecto en .EXE
--save-dev: Guarda la información en nuestro package.json

TIEMPO DE ESPERA

¡Esto puede tomar varios minutos! (2-10 minutos)

¿Por qué tanto tiempo?

Está descargando electron-builder y todas sus dependencias
Son cientos de archivos que se necesitan para crear el .EXE
Se están creando carpetas nuevas en tu proyecto

Mientras esperas, verás:

Texto desplazándose
Porcentajes de descarga
Nombres de paquetes instalándose

¡NO CIERRES LA VENTANA! Déjala trabajar.

Modificar package.json:

Abre package.json de nuevo en Bloc de notas
REEMPLAZA todo el contenido con:

{
  "name": "mi-primer-software",
  "version": "1.0.0",
  "description": "Mi primera aplicación con Electron",
  "main": "main.js",
  "scripts": {
    "start": "electron .",
    "build": "electron-builder --win"
  },
  "author": "Tu Nombre",
  "license": "MIT",
  "build": {
    "appId": "com.tunombre.mi-primer-software",
    "productName": "Mi Primer Software",
    "directories": {
      "output": "dist"
    },
    "win": {
      "target": "nsis",
      "icon": "icon.ico"
    }
  }
}

Generar el .EXE:

En la misma ventana de comandos, escribe:

npm run build

Presiona Enter

¿Dónde está mi .EXE?

Busca en tu carpeta una nueva carpeta llamada dist. Dentro encontrarás:

mi-primer-software Setup 1.0.0.exe (instalador)
mi-primer-software-1.0.0-win.zip (versión portable)

PASO 10: Probar el Software Final

Prueba el instalador:

Ejecuta mi-primer-software Setup 1.0.0.exe
Sigue el asistente de instalación
Busca el programa en el Menú Inicio
Ábrelo y ¡funciona!

Prueba la versión portable:

Descomprime el archivo ZIP
Ejecuta mi-primer-software.exe directamente
¡Listo! Sin instalación necesaria

SOLUCIÓN DE PROBLEMAS COMUNES

Error: «npm no se reconoce»

Solución: Node.js no está instalado correctamente

Error al navegar a la carpeta

Solución: Verifica el nombre exacto de tu carpeta

Comando se queda «trabado»

Solución: Espera 15 minutos, es normal que tome tiempo

No se genera el .EXE

Solución: Revisa que package.json tenga exactamente el formato correcto

RESUMEN DE LO APRENDIDO

Node.js: El motor que permite ejecutar JavaScript
Electron: Convierte HTML en aplicaciones de escritorio
Ventana de comandos: Donde ejecutamos instrucciones al sistema
npm: El gestor que instala y ejecuta todo
Electron Builder: Crea el .EXE final

Descubre más desde Clasenet

Suscríbete y recibe las últimas entradas en tu correo electrónico.

INTRODUCCIÓN PARA PRINCIPIANTES ABSOLUTOS

¿Qué vamos a hacer exactamente?

PASO 1: Entender QUÉ es Electron y POR QUÉ lo usamos

¿Qué es Electron?

¿Por qué usar Electron?

¿Cómo funciona?

PASO 2: Preparar el Terreno – Instalar Node.js

¿Qué es Node.js?

Cómo descargarlo e instalarlo:

Verificar que funcionó:

PASO 3: Crear nuestra Carpeta de Proyecto

¿Por qué necesitamos una carpeta especial?

Cómo crear la carpeta:

PASO 4: Crear nuestro Archivo HTML

¿Qué es HTML?

Cómo crear el archivo HTML:

¿Qué hace este código?

PASO 5: Crear el Archivo Package.json

¿Qué es package.json?

Cómo crearlo:

Explicación línea por línea:

PASO 6: Crear el Archivo Principal (main.js)

¿Qué es main.js?

Cómo crearlo:

¿Qué hace este código?

PASO 7: Instalar Electron en Nuestro Proyecto

¿QUÉ ES LA «VENTANA DE COMANDOS»?

Cómo abrir la ventana de comandos:

Navegar a tu carpeta del proyecto:

Verificar que estamos en la carpeta correcta:

Instalar Electron:

¿Qué está pasando?

PASO 8: Probar Nuestra Aplicación

¡Momento de la verdad!

¿Qué debería pasar?

PASO 9: Convertir a .EXE Ejecutable

¿Por qué necesitamos un .EXE?

Instalar Electron Builder:

¿QUÉ HACE ESTE COMANDO EXACTAMENTE?

TIEMPO DE ESPERA

Modificar package.json:

Generar el .EXE:

¿Dónde está mi .EXE?

PASO 10: Probar el Software Final

Prueba el instalador:

Prueba la versión portable:

SOLUCIÓN DE PROBLEMAS COMUNES

Error: «npm no se reconoce»

Error al navegar a la carpeta

Comando se queda «trabado»

No se genera el .EXE

RESUMEN DE LO APRENDIDO

Comparte esto:

Descubre más desde Clasenet

Miguel Ángel Urbaez

Deja un comentarioCancelar respuesta

Otros Software que te pueden interesar