DEV Community: fullsnacker

Proyecto Node.js con TypeScript y Clean Architecture para Gestión de Usuarios

fullsnacker — Wed, 14 May 2025 16:04:05 +0000

Vamos a implementar un sistema de autenticación desde terminal usando Clean Architecture (Link al repositorio del proyecto).

Aquí te presento la estructura del proyecto:

Estructura del Proyecto

src/
├── core/                    # Capa de dominio
│   ├── entities/           # Entidades de negocio
│   ├── repositories/       # Interfaces de repositorios
│   ├── usecases/           # Casos de uso
│   └── interfaces/         # Interfaces adicionales
├── infrastructure/         # Capa de infraestructura
│   ├── repositories/      # Implementaciones concretas de repositorios
│   ├── cli/               # Interfaz de línea de comandos
│   └── security/          # Utilidades de seguridad
├── application/           # Capa de aplicación (coordinadores)
└── main.ts                # Punto de entrada

Implementación paso a paso

1. Configuración inicial

Primero, instala las dependencias necesarias:

npm init -y
npm install typescript ts-node @types/node bcryptjs inquirer chalk figlet uuid @types/uuid @types/bcryptjs @types/inquirer @types/figlet --save-dev
npx tsc --init

2. Entidad de Usuario (Capa de Dominio)

src/core/entities/user.ts:

export interface User {
  id: string;
  username: string;
  passwordHash: string; // Nunca almacenar contraseñas en texto plano
  createdAt: Date;
}

3. Interfaz del Repositorio (Capa de Dominio)

src/core/repositories/user.repository.ts:

import { User } from "../entities/user";

export interface UserRepository {
  createUser(user: User): Promise<User>;
  findByUsername(username: string): Promise<User | null>;
  findAllUsers(): Promise<User[]>;
  verifyPassword(password: string, hash: string): Promise<boolean>;
}

4. Casos de Uso (Capa de Dominio)

src/core/usecases/auth.usecase.ts:

import { UserRepository } from "../repositories/user.repository";
import { User } from "../entities/user";

export class AuthUseCase {
  constructor(private readonly userRepository: UserRepository) {}

  async register(username: string, password: string): Promise<User> {
    if (!username || !password) {
      throw new Error("Username and password are required");
    }

    const existingUser = await this.userRepository.findByUsername(username);
    if (existingUser) {
      throw new Error("Username already exists");
    }

    const user: User = {
      id: this.generateUserId(),
      username,
      passwordHash: password,
      createdAt: new Date(),
    };

    return this.userRepository.createUser(user);
  }

  async login(username: string, password: string): Promise<User> {
    const user = await this.userRepository.findByUsername(username);
    if (!user) {
      throw new Error("User not found");
    }

    const isValid = await this.userRepository.verifyPassword(password, user.passwordHash);
    if (!isValid) {
      throw new Error("Invalid password");
    }

    return user;
  }

  private generateUserId(): string {
    return "temp-id";
  }
}

5. Implementación del Repositorio (Infraestructura)

src/infrastructure/repositories/user.file.repository.ts:

import { UserRepository } from "../../core/repositories/user.repository";
import { User } from "../../core/entities/user";
import * as fs from "fs";
import * as path from "path";
import * as bcrypt from "bcryptjs";
import { v4 as uuidv4 } from "uuid";

const FILE_PATH = path.join(__dirname, "../../../data/users.json");

export class UserFileRepository implements UserRepository {
  private users: User[] = [];

  constructor() {
    this.ensureFileExists();
    this.loadUsers();
  }

  private ensureFileExists(): void {
    if (!fs.existsSync(FILE_PATH)) {
      fs.writeFileSync(FILE_PATH, "[]", "utf-8");
    }
  }

  private loadUsers(): void {
    const data = fs.readFileSync(FILE_PATH, "utf-8");
    this.users = JSON.parse(data || "[]");
  }

  private saveUsers(): void {
    fs.writeFileSync(FILE_PATH, JSON.stringify(this.users, null, 2), "utf-8");
  }

  async createUser(user: User): Promise<User> {
    const salt = await bcrypt.genSalt(10);
    const passwordHash = await bcrypt.hash(user.passwordHash, salt);

    const newUser: User = {
      ...user,
      id: uuidv4(),
      passwordHash,
      createdAt: new Date(),
    };

    this.users.push(newUser);
    this.saveUsers();
    return newUser;
  }

  async findByUsername(username: string): Promise<User | null> {
    return this.users.find((u) => u.username === username) || null;
  }

  async findAllUsers(): Promise<User[]> {
    return [...this.users];
  }

  async verifyPassword(password: string, hash: string): Promise<boolean> {
    return bcrypt.compare(password, hash);
  }
}

6. CLI Interface (Infraestructura)

src/infrastructure/cli/auth.cli.ts:

import inquirer from "inquirer";
import chalk from "chalk";
import figlet from "figlet";
import { AuthUseCase } from "../../core/usecases/auth.usecase";
import { User } from "../../core/entities/user";

export class AuthCLI {
  private currentUser: User | null = null;

  constructor(private authUseCase: AuthUseCase) {}

  async start() {
    console.log(chalk.green(figlet.textSync("Auth System", { horizontalLayout: "full" })));

    while (true) {
      if (!this.currentUser) {
        await this.showMainMenu();
      } else {
        await this.showUserMenu();
      }
    }
  }

  private async showMainMenu() {
    const { action } = await inquirer.prompt([
      {
        type: "list",
        name: "action",
        message: "What do you want to do?",
        choices: ["Login", "Register", "Exit"],
      },
    ]);

    switch (action) {
      case "Login":
        await this.handleLogin();
        break;
      case "Register":
        await this.handleRegister();
        break;
      case "Exit":
        process.exit(0);
    }
  }

  private async showUserMenu() {
    const { action } = await inquirer.prompt([
      {
        type: "list",
        name: "action",
        message: `Welcome ${this.currentUser!.username}, what do you want to do?`,
        choices: ["Logout", "Exit"],
      },
    ]);

    switch (action) {
      case "Logout":
        this.currentUser = null;
        console.log(chalk.blue("You have been logged out"));
        break;
      case "Exit":
        process.exit(0);
    }
  }

  private async handleLogin() {
    const { username, password } = await inquirer.prompt([
      {
        type: "input",
        name: "username",
        message: "Enter your username:",
      },
      {
        type: "password",
        name: "password",
        message: "Enter your password:",
        mask: "*",
      },
    ]);

    try {
      this.currentUser = await this.authUseCase.login(username, password);
      console.log(chalk.green("Login successful!"));
    } catch (error) {
      console.log(chalk.red(`Error: ${(error as Error).message}`));
    }
  }

  private async handleRegister() {
    const { username, password } = await inquirer.prompt([
      {
        type: "input",
        name: "username",
        message: "Choose a username:",
      },
      {
        type: "password",
        name: "password",
        message: "Choose a password:",
        mask: "*",
      },
    ]);

    try {
      await this.authUseCase.register(username, password);
      console.log(chalk.green("Registration successful! You can now login."));
    } catch (error) {
      console.log(chalk.red(`Error: ${(error as Error).message}`));
    }
  }
}

7. Punto de Entrada

src/main.ts:

import { UserFileRepository } from "./infrastructure/repositories/user.file.repository";
import { AuthUseCase } from "./core/usecases/auth.usecase";
import { AuthCLI } from "./infrastructure/cli/auth.cli";

// Configuración e inyección de dependencias
const userRepository = new UserFileRepository();
const authUseCase = new AuthUseCase(userRepository);
const authCLI = new AuthCLI(authUseCase);

// Iniciar la aplicación
authCLI.start().catch((error) => {
  console.error("Application error:", error);
  process.exit(1);
});

Características implementadas:

Clean Architecture:
- Capa de dominio (core) con entidades, repositorios y casos de uso
- Capa de infraestructura con implementaciones concretas
- Desacoplamiento mediante interfaces
Seguridad:
- Encriptación de contraseñas con bcrypt
- Nunca se almacenan contraseñas en texto plano
Persistencia:
- Almacenamiento en archivo JSON (data/users.json)
- Fácil migración a base de datos cambiando el repositorio
Interfaz de usuario:
- CLI interactiva con inquirer
- Menús para registro, login y logout

Cómo ejecutar el proyecto:

Instala las dependencias como se indicó al principio
Crea la estructura de directorios y archivos
Ejecuta con: npx ts-node src/main.ts

Posibles mejoras:

Migrar a base de datos (solo implementar nuevo repositorio)
Añadir más validaciones (fortaleza de contraseña, etc.)
Implementar JWT para sesiones más robustas
Añadir tests unitarios e integración

Este proyecto sigue los principios de Clean Architecture manteniendo las capas bien separadas y las dependencias apuntando hacia el centro (dominio).

[🔗 Conéctame para más contenido técnico] [👨‍💻 Visita mi GitHub]

📢 ¡Feedback y contribuciones son bienvenidos! ¿Qué funcionalidades añadirías? ¿Has implementado algo similar? Hablemos en los comentarios 👇

HL7 (Health Level Seven)

fullsnacker — Tue, 03 Sep 2024 18:19:12 +0000

HL7, conocido también como Health Level 7, es un estándar de mensajería y normas clínicas utilizado para la integración, intercambio, gestión y recuperación de información electrónica en distintos sistemas de salud. Es un protocolo basado en transacciones que se activan por eventos, como la admisión de un paciente en un hospital. HL7 facilita el intercambio de información en el ámbito de la salud pública.

Se trata de un estándar ampliamente aceptado a nivel internacional para el intercambio de datos en el sector de la salud, siendo independiente de la plataforma y tecnología utilizada.

¿Por qué utilizar HL7?

Los sistemas de atención médica suelen emplear diferentes aplicaciones, desarrolladas en distintos lenguajes de programación y con funcionalidades variadas. Por ejemplo, los hospitales suelen tener sistemas complejos y personalizados, mientras que los médicos generales suelen utilizar software de gestión de consultas ya listo para su uso. Los institutos de investigación médica, por su parte, pueden utilizar software que forma parte de una red más amplia, como la de una universidad. En muchas ocasiones, estas instituciones necesitan intercambiar datos sobre los pacientes.

El propósito de HL7 es permitir a las organizaciones de salud generar datos uniformes, accesibles para cualquier persona autorizada, independientemente del sistema que utilicen. La interoperabilidad entre organizaciones sanitarias requiere que las interfaces de los distintos sistemas utilicen un protocolo común como HL7.

¿Quién utiliza HL7?

Hospitales
Centros de imagen médica
Doctores
Clínicas gubernamentales
Laboratorios
Residencias
Farmacias, entre otros

Tipos de Mensajes HL7

ACK — Reconocimiento general
ADT — Admisión, alta y transferencia de pacientes
BAR — Creación/cambio de cuenta de facturación
DFT — Transacción financiera detallada
MDM — Gestión de documentos médicos
MFN — Notificación de archivos maestros
ORM — Orden (Farmacia/tratamiento)
ORU — Resultado de observación (no solicitado)
QRY — Consulta, modo original
RAS — Administración de farmacia/tratamiento
RDE — Orden codificada de farmacia/tratamiento
RGV — Administración de farmacia/tratamiento
SIU — Información de programación no solicitada

Mensajes ADT más comunes:

ADT-A01: Ingreso del paciente.
ADT-A02: Transferencia del paciente.
ADT-A03: Alta del paciente.
ADT-A04: Registro del paciente.
ADT-A05: Preingreso del paciente.
ADT-A08: Actualización de la información del paciente.
ADT-A11: Cancelación de la admisión del paciente.
ADT-A12: Cancelación de la transferencia del paciente.

¿Cómo se transmiten los mensajes HL7?

Generalmente, los mensajes HL7 se transmiten mediante el protocolo TCP/IP a través de una red local, como dentro de la red de un hospital. Los datos TCP/IP se envían como un flujo de bytes, lo que permite el envío de múltiples mensajes en un flujo continuo. Esto puede generar confusión, por lo que es necesario definir claramente el punto de inicio y final de cada mensaje. Para esto, se utiliza el Protocolo Mínimo de Capa Inferior (MLP), que añade un encabezado y un pie de página a cada mensaje.

El Protocolo Mínimo de Capa Inferior (MLP) se refiere a un protocolo básico que opera en las capas inferiores de la pila de red, como la capa física o de enlace de datos. Proporciona las funciones fundamentales necesarias para la comunicación entre dispositivos de red, especificando cómo envolver un mensaje HL7 con un encabezado y un pie de página para garantizar que se identifique correctamente el inicio y fin de cada mensaje, así como el comienzo del siguiente.

Ejemplo básico de un programa en Java que toma un mensaje HL7, lo guarda en un objeto y luego imprime sus detalles en la consola:

public class HL7Message {
    private String message;

    public HL7Message(String message) {
        this.message = message;
    }

    public String getMessageType() {
        return message.split("\\|")[8];
    }

    public String getPatientID() {
        return message.split("\\|")[3];
    }

    public String getPatientName() {
        return message.split("\\|")[5];
    }

    public void printDetails() {
        System.out.println("HL7 Message Details:");
        System.out.println("Message Type: " + getMessageType());
        System.out.println("Patient ID: " + getPatientID());
        System.out.println("Patient Name: " + getPatientName());
    }

    public static void main(String[] args) {
        String hl7Message = "MSH|^~\\&|HIS|RIH|EKG|EKG|202308120830||ADT^A01|MSG00001|P|2.5|"
                          + "PID|1||123456||DOE^JOHN^A||19680219|M|||123 MAIN ST^^ANYTOWN^OH^12345|(555)555-1234|||M|NON|||123-45-6789";

        HL7Message message = new HL7Message(hl7Message);
        message.printDetails();
    }
}

Explicación:

HL7Message Class: Esta clase contiene el mensaje HL7 y proporciona métodos para extraer y mostrar algunos detalles básicos como el tipo de mensaje, el ID del paciente, y el nombre del paciente.

getMessageType: Este método extrae el tipo de mensaje del HL7 (campo 9).

getPatientID: Este método extrae el ID del paciente (campo 4).

getPatientName: Este método extrae el nombre del paciente (campo 6).

printDetails: Este método imprime los detalles del mensaje HL7.

main: En el método main, se define un mensaje HL7 de ejemplo, se crea un objeto HL7Message con el mensaje, y se imprimen los detalles.

Este programa es básico y solo maneja un mensaje HL7 muy simple. Dependiendo de los requerimientos, podrías necesitar una implementación más avanzada para manejar la estructura completa de los mensajes HL7.

Programa básico en Java que genera un mensaje HL7 a partir de un objeto HL7Message que se llena previamente:

public class HL7Message {
    private String sendingApplication;
    private String sendingFacility;
    private String receivingApplication;
    private String receivingFacility;
    private String messageDateTime;
    private String messageType;
    private String messageControlID;
    private String processingID;
    private String versionID;
    private String patientID;
    private String patientLastName;
    private String patientFirstName;
    private String patientDOB;
    private String patientGender;
    private String patientAddress;
    private String patientPhoneNumber;
    private String patientSSN;

    // Constructor
    public HL7Message(String sendingApplication, String sendingFacility, String receivingApplication,
                      String receivingFacility, String messageDateTime, String messageType,
                      String messageControlID, String processingID, String versionID, String patientID,
                      String patientLastName, String patientFirstName, String patientDOB, String patientGender,
                      String patientAddress, String patientPhoneNumber, String patientSSN) {
        this.sendingApplication = sendingApplication;
        this.sendingFacility = sendingFacility;
        this.receivingApplication = receivingApplication;
        this.receivingFacility = receivingFacility;
        this.messageDateTime = messageDateTime;
        this.messageType = messageType;
        this.messageControlID = messageControlID;
        this.processingID = processingID;
        this.versionID = versionID;
        this.patientID = patientID;
        this.patientLastName = patientLastName;
        this.patientFirstName = patientFirstName;
        this.patientDOB = patientDOB;
        this.patientGender = patientGender;
        this.patientAddress = patientAddress;
        this.patientPhoneNumber = patientPhoneNumber;
        this.patientSSN = patientSSN;
    }

    // Método para generar el mensaje HL7
    public String generateHL7Message() {
        StringBuilder hl7Message = new StringBuilder();

        // MSH Segment
        hl7Message.append("MSH|^~\\&|")
                  .append(sendingApplication).append("|")
                  .append(sendingFacility).append("|")
                  .append(receivingApplication).append("|")
                  .append(receivingFacility).append("|")
                  .append(messageDateTime).append("||")
                  .append(messageType).append("|")
                  .append(messageControlID).append("|")
                  .append(processingID).append("|")
                  .append(versionID).append("\r");

        // PID Segment
        hl7Message.append("PID|1||")
                  .append(patientID).append("||")
                  .append(patientLastName).append("^")
                  .append(patientFirstName).append("||")
                  .append(patientDOB).append("|")
                  .append(patientGender).append("|||")
                  .append(patientAddress).append("|")
                  .append(patientPhoneNumber).append("|||||||")
                  .append(patientSSN).append("\r");

        return hl7Message.toString();
    }

    public static void main(String[] args) {
        // Llenar los datos del objeto HL7Message
        HL7Message message = new HL7Message(
            "HIS",               // sendingApplication
            "RIH",               // sendingFacility
            "EKG",               // receivingApplication
            "EKG",               // receivingFacility
            "202308120830",      // messageDateTime
            "ADT^A01",           // messageType
            "MSG00001",          // messageControlID
            "P",                 // processingID
            "2.5",               // versionID
            "123456",            // patientID
            "DOE",               // patientLastName
            "JOHN",              // patientFirstName
            "19680219",          // patientDOB
            "M",                 // patientGender
            "123 MAIN ST^^ANYTOWN^OH^12345", // patientAddress
            "(555)555-1234",     // patientPhoneNumber
            "123-45-6789"        // patientSSN
        );

        // Generar y mostrar el mensaje HL7
        String hl7Message = message.generateHL7Message();
        System.out.println("Generated HL7 Message:\n" + hl7Message);
    }
}

Explicación:

HL7Message Class: Esta clase contiene los campos necesarios para un mensaje HL7 simple, incluyendo información sobre la aplicación que envía, la aplicación que recibe, y detalles del paciente.

generateHL7Message: Este método construye el mensaje HL7 usando los campos proporcionados y los formatea en un formato estándar HL7. Aquí se están generando dos segmentos: MSH (encabezado del mensaje)

Crea una app en react en 5 minutos.

fullsnacker — Thu, 22 Sep 2022 00:44:42 +0000

Vamos a crear una app en React y levantarla en cuestión de solo unos minutos con Vite.js.

¿Que es Vite.js?

ViteJS es una herramienta de compilación creada por Evan You (creador de VueJS) que nos ayudará a crear aplicaciones frontend y tener a nuestra disposición una serie de herramientas para desarrollar nuestras aplicaciones web. Se centra en la velocidad y el rendimiento mejorando la experiencia de desarrollo.

ViteJS consta de las siguientes características:

Un servidor de desarrollo que proporciona amplias mejoras de características sobre los módulos ES nativos, por ejemplo, Hot Module Replacement (HMR) extremadamente rápido.
Un comando de compilación que agrupa su código con Rollup, preconfigurado para generar activos estáticos altamente optimizados para producción.

ViteJS nos proporciona ajustes preestablecidos para:

Vanilla
Vue
React
Preact
Lit
Svelte

¿Para qué sirve ViteJS?

ViteJS nos ayudará a tener un servidor de compilación para nuestros frameworks frontend. Es decir, ViteJS tomará nuestro proyecto de cualquier framework (React, Vue, Svelte, etc) y lo compilará y empaquetará a módulos ESM nativos con el fin de optimizar nuestra aplicación para los navegadores web de hoy en día.

Actualmente hay muchísimas opciones para poder compilar y transpilar código JavaScript, sin embargo, te contaré un poco de contexto para que podamos entender porque ViteJS es una buena propuesta.

Antes que los módulos ES (ECMAScript) estuvieran disponibles en los navegadores, nosotros los desarrolladores web no teníamos un mecanismo totalmente nativo para hacer nuestras aplicaciones modulares, por eso, se crearon diferentes herramientas como webpack que rastrean, procesan y compilan nuestros proyectos y los transpilan a módulos JS a través de un método llamado “concatenación”.

Sin embargo, a medida que el tiempo va pasando, los desarrollos de aplicaciones se han vuelto cada vez más grandes y complejos, lo que se traduce en archivos o módulos muy pesados por lo tanto, nuestras aplicaciones se vuelven cada vez más lentas y difíciles de procesar en navegadores de baja gama.

¿Por qué utilizar ViteJS?

Una de las cosas por las cuales utilizar ViteJS podría ser un buen punto para tus proyectos es tener aplicaciones modernas altamente optimizadas.

Otra de las cosas por la cual podría ser beneficioso para tus proyectos, es la compatibilidad para TypeScript, ViteJS es una herramienta que se puede utilizar con o sin TypeScript sin ningún problema.

La tercera ventaja que encuentro en ViteJS es que puedes compilar casi cualquier framework de JavaScript, por lo cual, puedes simplificar y unificar los métodos de compilación para todos tus proyectos, ahorrando un tiempo considerable en temas de mantenimiento de tu aplicación.

Creemos una app de React

Para crear una app de React con ViteJs tenemos que seguir los siguientes pasos, dependiendo de la versión de npm que estemos utilizando:

# npm 6.x
npm create vite@latest my-react-app --template react

# npm 7+, extra double-dash is needed:
npm create vite@latest my-react-app -- --template react

Aquí estamos creando una app con el nombre "my-react-app" utilizando el template "react".

Una vez ejecutemos lo anterior, en tan solo unos segundos, veremos que vite nos indica los pasos a continuación:

Done. Now run:

  cd my-react-app
  npm install
  npm run dev

Siguiendo estos pasos, entramos en nuestra carpeta "my-react-app".

Ejecutamos "npm install" (O "npm i").

Una vez instaladas las dependencias, podemos levantar la apliación con "npm run dev" y vemos que ya esta disponible en el puerto indicado:

  VITE v3.1.3  ready in 511 ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose

Podemos ver la aplicación creada desde nuestro navegador, entrando a la url indicada y... !Tenemos nuestra app funcionando!

Espero que este artículo te haya sido de ayuda!

Si te ha gustado o quieres saber más sobre esta o cualquier otra tecnología puedes hacérmelo saber a través de los comentarios o siguiéndome en cualquier red social a @fullsnacker!

Anatomia de tags HTML

fullsnacker — Tue, 07 Jun 2022 01:20:34 +0000

Hoy hablaremos de la anatomia y estructura de un tag HTML para poder utilizarla en nuestro sitio.

<!DOCTYPE html>
<html>
 <head>
 </head>
 <body>
   <h1>Hola Mundo!</h1>
 </body>
</html>

Si probamos este código, vemos que se muestra en el sitio la frase "Hola Mundo!", esto es gracias a la linea de nuestro código:

   <h1>Hola Mundo!</h1>

Aquí podemos ver un tag de apertura y un tag de cierre del tipo Heading 1 (O "h1").

Entre esos tags está el contenido al que queremos aplicar esa estructura (Nuestra frase "Hola Mundo")

Estos tags hacen solicitudes al navegador pidiéndole que estructure y muestre nuestro texto sin formato en la forma en que queremos que se visualice (En este caso, queremos que se vea la frase como un título de tamaño grande).

Otro tipo de tag que precisamos ver es el de tags que no tienen cierre. Como por ejemplo "
" para especificar un salto de línea.

Pero, ¿cómo averiguamos si algo requiere un tag de cierre o se cierra automáticamente?

Podemos dirigirnos a la documentación Aquí.

Si echamos un vistazo a la documentación de los elementos de encabezado, puede ver que hay una parte en la tabla que dice omisión de tag y dice que tanto la tag inicial como la final son obligatorias para qué puede especificar a qué parte de su texto desea aplicar esta estructura.

Si echamos un vistazo al br o al elemento de salto de línea, puedes ver eso bajo omisión de tags, dice que debe tener un tag de inicio y no debe tener un tag de finalización.

Sabemos que la primera parte de la tag es el elemento HTML y es br, hr o lo que sea que quieras usar.

La segunda parte dentro de nuestro tag se llama un atributo HTML y básicamente da más información al navegador para especificar modificaciones a ese elemento HTML.

¿Qué es HTML, cómo se usa y con que se come?

fullsnacker — Tue, 31 May 2022 01:29:23 +0000

HTML significa Hyper*Text **MarkupL*anguage (O lenguaje de marcado de hipertexto).

Tal vez has oído hablar de otros lenguajes de marcado como XML (E*xtensible **Markup **Language - Lenguaje de Marcado Extensible) o **YML* (Yet Another Markup Language - Otro lenguaje de marcado más).

Sin importar el navegador que usas (Chrome, Safari o Firefox), tienen un solo propósito y es interpretar sus archivos. Como los archivos HTML,CSS y JavaScript del sitio web que debe mostrarse.

Por ejemplo, aquí tenemos un poco de código HTML que dice que nuestro sitio web debe tener un título llamado “Mi Sitio” y en el cuerpo debe haber un encabezado que diga “Hola Mundo!”.

<html>
   <head>
       <title>Mi Sitio</title>
   </head>
   <body>
       <h1>Hola Mundo!</h1>
   </body>
</html>

Felicidades! Con esto ya has hecho tu primer sitio web!

Si pasamos ese código a nuestro navegador, lo abrirá y lo mostrará así con el título del sitio web generalmente en la barra superior y ese H1 o ese “gran encabezado” que aparece en el cuerpo de nuestro sitio web.

Para poder practicar fácilmente con HTML, podemos usar un sitio llamado codepen.io. Puedes registrarte en el sitio de forma gratuita con tu cuenta de mail, twitter, facebook o github (Recomendado)

Una vez iniciada la sesión, como puedes ver se te permite ingresar HTML, CSS y JavaScript.

Los tres tipos de archivos se interpretarán y se mostrarán debajo como su sitio web.

Ahora vamos a necesitar algún texto con el que trabajar o tener algo a lo que podamos darle estructura.

Si vas a La Isla Del Tesoro, podrás ver el libro “LA ISLA DEL TESORO“.

Como puedes ver, el libro se encuentra como texto sin formato. Tiene todos sus textos, pero absolutamente ninguna estructura.

Copiando la primera parte del libro a nuestro editor en codepen, podemos darle formato utilizando los tags de HTML como se muestra aqui debajo (Haz click en “HTML” para ver el código)

En el próximo artículo, revisaremos la anatomía de los tags de HTML!