Saltar al contenido principal

¿Qué es la codificación? 🔐

En el desarrollo web, a menudo escuchas términos como "codificación", "Base64", "codificación URL". ¿Qué es exactamente la codificación? ¡Vamos a explicarlo de manera muy simple!

¿Comparar la codificación con la vida cotidiana?​

Comparemos la codificación con una traducción.

La historia de la traducción 🌏​

Convirtamos "Hola" en español a diferentes formas:

  • En inglés: "Hello" (codificación en inglés)
  • En números: "72 111 108 97" (codificación numérica)
  • En emojis: "👋😊" (codificación emoji)

Codificación = Convertir datos a otro formato

Definición de codificación​

Codificación (Encoding)

  • Proceso de convertir datos a un formato específico
  • Propósito: para transmisión, almacenamiento, visualización, etc.

Decodificación (Decoding)

  • Proceso de restaurar los datos codificados a su estado original
Datos originales → [Codificación] → Datos convertidos → [Decodificación] → Datos originales
     "Hola"            →           "Hola"                  →         "Hola"

¿Por qué es necesaria la codificación?​

1. Transmisión segura 📤​

Los caracteres especiales o acentuados pueden corromperse en Internet.

Original: "Hola"
Codificación URL: "Hola"
→ ¡Transmisión segura en Internet!

2. Convertir datos binarios a texto 🖼️​

Puedes convertir imágenes o archivos a texto para transmitirlos.

Archivo de imagen → Codificación Base64 → Cadena de texto
→ ¡Puede incluirse en JSON o HTML!

3. Manejo de caracteres especiales ✨​

Hay caracteres que no se pueden usar en las URL.

Espacio: " " → "%20"
&: "&" → "%26"
#: "#" → "%23"

Principales tipos de codificación​

1. Codificación Base64 📦​

¡Se usa para convertir imágenes o archivos a texto!

Texto original:

Hello World

Codificado en Base64:

SGVsbG8gV29ybGQ=

Características:

  • Convierte datos binarios a texto
  • Se usa en correos electrónicos, JSON, HTML
  • Aumenta el tamaño de los datos en aproximadamente 33%
  • ¡No es cifrado! (Cualquiera puede decodificarlo)

Ejemplo de uso:

<!-- Incluir una imagen directamente en HTML -->
<img src="data:image/png;base64,iVBORw0KGgoAAAA..." />

2. Codificación URL (Codificación por porcentaje) 🔗​

¡Para incluir caracteres especiales o españoles de forma segura en las URL!

URL original:

https://example.com/search?q=Hola España

Codificación URL:

https://example.com/search?q=Hola%20Espa%C3%B1a

Caracteres que necesitan codificación:

Espacio:             " " → "%20" o "+"
Caracteres españoles: "ñ" → "%C3%B1"
                     "á" → "%C3%A1"
Caracteres especiales: "?" → "%3F"
                      "&" → "%26"
                      "=" → "%3D"
                      "#" → "%23"

Caracteres seguros (no necesitan codificación):

A-Z, a-z, 0-9, -, _, ., ~

3. Codificación de entidades HTML 📝​

¡Para mostrar caracteres especiales en HTML!

HTML original:

<div>Hello & Goodbye</div>

Entidad HTML:

&lt;div&gt;Hello &amp; Goodbye&lt;/div&gt;

Entidades principales:

<  →  &lt;
>  →  &gt;
&  →  &amp;
"  →  &quot;
'  →  &apos;
espacio → &nbsp;

4. Codificación UTF-8 🌏​

¡Una codificación capaz de representar todos los idiomas del mundo!

Características:

  • Puede representar todos los caracteres: español, chino, emojis, etc.
  • Codificación estándar de la web
  • Inglés: 1 byte, español: 1-2 bytes, chino: 3 bytes

Ejemplos:

Inglés "A": 1 byte
Español "ñ": 2 bytes
Emoji "😊": 4 bytes

Ejemplos prácticos​

Ejemplo 1: URL de búsqueda 🔍​

El usuario busca:

"aprender JavaScript"

URL que envía el navegador:

https://google.com/search?q=aprender+JavaScript

Ejemplo 2: Convertir imagen a Base64 📸​

Imagen original:

logo.png (10KB)

Codificación Base64:

iVBORw0KGgoAAAANSUhEUgAAAAUA... (13KB de texto)

Uso en HTML:

<img src="data:image/png;base64,iVBORw0KGgo..." />

Ejemplo 3: Archivos adjuntos en correos electrónicos 📧​

Los correos electrónicos solo pueden enviar texto. ¡Los archivos se codifican en Base64 antes de enviarlos!

Archivo → Codificación Base64 → Incluido en el cuerpo del correo → Decodificado por el destinatario

Usar herramientas de codificación​

¡Prueba la codificación/decodificación directamente con las herramientas de nuestro sitio!

Codificación/Decodificación Base64​

Base64 Encoder

  • Convertir texto a Base64
  • Convertir Base64 a texto
  • Convertir imágenes a Base64

Codificación/Decodificación URL​

URL Encoder

  • Convertir a cadena segura para URL
  • Verificar el original con decodificación URL

Conversión de entidades HTML​

HTML Entity Converter

  • Convertir caracteres especiales a entidades HTML
  • Convertir entidades HTML a caracteres especiales

Práctica: Pruébalo tú mismo​

Práctica 1: Codificación Base64​

  1. Abrir Base64 Encoder
  2. Ingresar "Hello World"
  3. Hacer clic en el botón Encode
  4. Resultado: SGVsbG8gV29ybGQ=
  5. ¡Verificar nuevamente "Hello World" con Decode!

Práctica 2: Codificación URL​

  1. Abrir URL Encoder
  2. Ingresar "Hola"
  3. Verificar el resultado de la codificación
  4. ¡Verificar el original con la decodificación!

Codificación vs Cifrado​

Codificación 🔄​

  • Propósito: Conversión del formato de datos
  • Seguridad: Ninguna (cualquiera puede decodificar)
  • Ejemplos: Base64, codificación URL
"Hello" → Base64 → "SGVsbG8="
¡Cualquiera puede decodificarlo! 🔓

Cifrado 🔐​

  • Propósito: Protección de datos
  • Seguridad: Sí (requiere clave secreta)
  • Ejemplos: AES, RSA
"Hello" → Cifrado → "x8f2k9a..."
¡Imposible descifrar sin la clave secreta! 🔒
advertencia

Importante: ¡Base64 no es cifrado! Cualquiera puede decodificarlo fácilmente, por lo que no debes proteger contraseñas o información importante solo con Base64.

Casos de uso comunes​

1. Desarrollo web 🌐​

// Codificación URL
const query = encodeURIComponent('Hola');
// "Hola"

// Codificación Base64
const encoded = btoa('Hello World');
// "SGVsbG8gV29ybGQ="

2. Comunicación API 📡​

{
  "image": "data:image/png;base64,iVBORw0KGgo...",
  "query": "Hola"
}

3. Almacenamiento de datos 💾​

Archivo de imagen → Base64 → Almacenado como texto en la base de datos

Errores comunes y soluciones​

❌ Error 1: Usar caracteres especiales directamente en las URL​

// Método incorrecto
fetch('https://api.com/search?q=Hola')  // ❌ Puede causar errores

✅ Método correcto:​

const query = encodeURIComponent('Hola');
fetch(`https://api.com/search?q=${query}`)  // ✅ Correcto

❌ Error 2: Confundir Base64 con cifrado​

// ¡Base64 no es cifrado!
const password = btoa('mypassword123');  // ❌ Vulnerable
// ¡Cualquiera puede decodificar con atob(password)!

✅ Método correcto:​

// Usar hash para contraseñas
import bcrypt from 'bcrypt';
const hashed = await bcrypt.hash('mypassword123', 10);  // ✅

❌ Error 3: Codificación duplicada​

const text = 'Hola';
const encoded1 = encodeURIComponent(text);
const encoded2 = encodeURIComponent(encoded1);  // ❌ ¡Duplicado!

Preguntas frecuentes (FAQ)​

Q1: ¿Por qué Base64 termina con "="?​

R: ¡Es relleno (padding)! Se usa para alinear la longitud de los datos a un múltiplo de 4.

"A" → "QQ=="  (2 caracteres de relleno)
"AB" → "QUI=" (1 carácter de relleno)
"ABC" → "QUJD" (sin relleno)

Q2: ¿Por qué los espacios en codificación URL son "+" o "%20"?​

R: ¡Hay dos métodos!

  • Form URL Encoded: espacio → +
  • Percent Encoding: espacio → %20 Ambos son normales, pero %20 es más estándar.

Q3: ¿Qué es UTF-8?​

R: Es una codificación que puede representar todos los idiomas del mundo. ¡Es el estándar de la web!

Q4: ¿La codificación aumenta el tamaño de los datos?​

R: ¡Sí!

  • Base64: aumenta aproximadamente un 33%
  • Codificación URL: los caracteres españoles aumentan aproximadamente un 300%
  • Inglés: casi sin cambios

¿Qué codificación usar y cuándo?​

SituaciónCodificaciónHerramienta
Incluir imagen en HTML/JSONBase64Base64 Encoder
Caracteres especiales/españoles en URLCodificación URLURL Encoder
Mostrar <, >, & en HTMLHTML EntityHTML Entity Converter
Representación de caracteres internacionalesUTF-8Estándar web (automático)

Próximos pasos 🚀​

Si has entendido la codificación:

  1. ✅ Base64 Encoder - Practicar codificación Base64
  2. ✅ URL Encoder - Practicar codificación URL
  3. ✅ HTML Entity Converter - Conversión de entidades HTML
  4. ✅ Conocer la estructura de URL - Cómo se componen las URL
  5. ✅ Image to Base64 - Conversión de imágenes a Base64

Conclusión​

¡La codificación no es difícil! Es simplemente convertir datos a otro formato.

Puntos a recordar:

  • Base64: Binario → Texto (¡no es cifrado!)
  • Codificación URL: Caracteres especiales/españoles → Caracteres seguros para URL
  • HTML Entity: Caracteres especiales HTML → Códigos de entidad
  • UTF-8: Representación de todos los caracteres del mundo

¡Te acostumbrarás rápidamente experimentando directamente con las herramientas! 🎉