Unicode & UTF-8
El estándar que permite escribir cualquier idioma del mundo en una computadora: árabe, chino, español, emojis 😀 y mucho más.
📚 Teoría
En los años 80, cada empresa y cada país tenía su propia tabla de caracteres: ASCII (inglés), ISO-8859-1 (Europa Occidental), Windows-1252 (Microsoft), GB2312 (chino), Shift-JIS (japonés)… El resultado era caos: un archivo escrito en Windows en Japón se veía como basura en un Mac en Colombia.
Unicode nació en 1991 con una idea simple pero ambiciosa: un único número para cada carácter, sin importar la plataforma, el programa o el idioma. Hoy cubre más de 1.100.000 caracteres de todos los sistemas de escritura del mundo.
💡 Un code point es el número que Unicode asigna a cada carácter. Se escribe como U+ seguido de 4 a 6 dígitos hexadecimales. Ejemplo: U+00F1 = ñ, U+1F600 = 😀
Unicode define qué número es cada carácter. Pero no dice cómo guardarlo en disco o enviarlo por internet. Para eso existen los encodings. El más usado es UTF-8.
UTF-8 es brillante porque usa longitud variable: los caracteres comunes ocupan 1 byte y los más raros usan hasta 4. Así no desperdicia espacio con textos en inglés y aun así soporta todo.
| Rango Unicode | Bytes | Patrón de bits | Ejemplos |
|---|---|---|---|
| U+0000 – U+007F | 1 byte | 0xxxxxxx | A B C 0 1 @ # (ASCII) |
| U+0080 – U+07FF | 2 bytes | 110xxxxx 10xxxxxx | á é ñ ü € £ ¿ ¡ |
| U+0800 – U+FFFF | 3 bytes | 1110xxxx 10xxxxxx 10xxxxxx | 中 日 한 → ★ ♥ ♫ |
| U+10000 – U+10FFFF | 4 bytes | 11110xxx 10xxxxxx 10xxxxxx 10xxxxxx | 😀 🎉 ❤️ 🇨🇴 𝕳 |
Ejemplo paso a paso: ñ (U+00F1) → bytes UTF-8
- • 1 a 4 bytes por carácter
- • Ideal para texto en internet
- • Compatible con ASCII (1 byte)
- • Estándar de HTML, JSON, XML
- • 98% de las páginas web
- • 2 o 4 bytes por carácter
- • Usado internamente por Windows
- • JavaScript usa UTF-16 en memoria
- • Java y .NET también internamente
- • No compatible con ASCII directo
- • Siempre 4 bytes por carácter
- • Más fácil de procesar internamente
- • Desperdicia espacio en textos largos
- • Poco usado en producción
- • Solo en procesamiento interno
💡 Regla simple: Para la web, bases de datos, archivos y APIs → siempre UTF-8. Para programación interna en Java/.NET/JS, el lenguaje maneja UTF-16 automáticamente; tú no tienes que preocuparte.
El BOM (Byte Order Mark) es una secuencia de bytes invisibles que algunos editores añaden al inicio de un archivo para indicar el encoding y el orden de los bytes.
| Encoding | BOM (bytes al inicio) | ¿Obligatorio? | Problema común |
|---|---|---|---|
| UTF-8 | EF BB BF | ❌ NO recomendado | Puede romper archivos PHP, CSV, JSON |
| UTF-16 LE | FF FE | ✅ Recomendado | Necesario para indicar el orden de bytes |
| UTF-16 BE | FE FF | ✅ Recomendado | Necesario para indicar el orden de bytes |
| UTF-32 LE | FF FE 00 00 | Opcional | Raramente usado |
⚠️ Problema real: Notepad de Windows guardaba archivos UTF-8 con BOM hasta Windows 10. Si tu archivo PHP comenzaba con el BOM (EF BB BF), PHP enviaba esos bytes antes del HTML → error "headers already sent". Solución: guardar como "UTF-8 sin BOM" (VS Code lo hace por defecto).
Los emojis están en el rango U+1F000 a U+1FFFF (llamado "Plano Suplementario Multilingüe"), que requiere 4 bytes en UTF-8. Por eso en MySQL, si usas utf8 en lugar de utf8mb4, los emojis no se guardan — utf8 de MySQL solo soporta hasta 3 bytes.
MySQL utf8 (3 bytes máx)
VALUES ('Hola 😀');
-- Error: Incorrect string value
-- '\xF0\x9F\x98\x80'
MySQL utf8mb4 (4 bytes) ✅
CONVERT TO CHARACTER SET utf8mb4
COLLATE utf8mb4_unicode_ci;
-- Ahora sí acepta 😀 🎉 ❤️
🌐 HTML Entities
Forma segura de escribir caracteres especiales en HTML sin que el navegador los interprete como código.
| Carácter | Nombre | Decimal | Hex |
| < | < | < | < |
| > | > | > | > |
| & | & | & | & |
| ñ | ñ | ñ | ñ |
| © | © | © | © |
🔗 URL Encoding (%XX)
Las URLs solo permiten caracteres ASCII seguros. Los demás se codifican como % + dos dígitos hex de su byte UTF-8.
| Carácter | URL encoded |
| espacio | %20 o + |
| ñ | %C3%B1 |
| á | %C3%A1 |
| € | %E2%82%AC |
| 😀 | %F0%9F%98%80 |
📦 Base64
Convierte datos binarios en texto ASCII usando 64 caracteres seguros (A–Z, a–z, 0–9, +, /). Usado para enviar imágenes y archivos en texto.
SGVsYQ==
"ñ" (C3 B1) →
w7E=
Cada 3 bytes → 4 caracteres Base64. El = al final es relleno (padding).
🔧 Herramientas Interactivas
Escribe cualquier texto y observa cómo se transforma en cada sistema de codificación.
🔢 Codificador UTF-8 — Code point y bytes
Muestra el code point Unicode y los bytes UTF-8 exactos de cada carácter.
🌐 Convertidor HTML Entities
Convierte texto a entidades HTML seguras para usar en código web.
🔗 URL Encoding / Decoding
Codifica texto para usar en URLs seguras (como parámetros GET).
📦 Base64 Encode / Decode
Convierte texto a Base64 (usado en imágenes en HTML, tokens de autenticación, correos).
📊 Comparativa completa — un carácter en todos los sistemas
Escribe UN carácter y ve su representación en todos los sistemas a la vez.
📖 Diccionario de Términos
utf8mb4_unicode_ci ordena correctamente en español.utf8 de MySQL solo soporta 3 bytes (no admite emojis).<meta charset="utf-8"> en la primera línea del head.🎥 Videos Explicativos
Videos en español para reforzar los conceptos.
¿Cómo funciona la codificación de caracteres? ASCII y Unicode
¿Cómo convertir de Unicode a UTF-8? — Proceso paso a paso
Acentos y caracteres especiales en HTML — Entities
¿Qué es el código Base64? — Explicación clara
🧠 Cuestionario
10 preguntas aleatorias del banco de 50. Calificación de 0 a 100.
Tu calificación: