<!doctype html><html lang="es"><head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>CaraChat – el chat Caramail de los años 2000, recreado en PHP (gratis, en línea)</title> <meta name="description" content="CaraChat recrea en PHP el cliente de chat de Caramail de 2002: salas, privados, nicks de colores, texto arcoíris y ondulado, y los smileys dibujados originales. Gratis, en el navegador."> <link rel="canonical" href="https://{{DOMAIN}}/es/"> <link rel="alternate" hreflang="fr" href="https://{{DOMAIN}}/"> <link rel="alternate" hreflang="en" href="https://{{DOMAIN}}/en/"> <link rel="alternate" hreflang="es" href="https://{{DOMAIN}}/es/"> <link rel="alternate" hreflang="de" href="https://{{DOMAIN}}/de/"> <link rel="alternate" hreflang="it" href="https://{{DOMAIN}}/it/"> <link rel="alternate" hreflang="pt" href="https://{{DOMAIN}}/pt/"> <link rel="alternate" hreflang="nl" href="https://{{DOMAIN}}/nl/"> <link rel="alternate" hreflang="pl" href="https://{{DOMAIN}}/pl/"> <link rel="alternate" hreflang="ru" href="https://{{DOMAIN}}/ru/"> <link rel="alternate" hreflang="uk" href="https://{{DOMAIN}}/uk/"> <link rel="alternate" hreflang="tr" href="https://{{DOMAIN}}/tr/"> <link rel="alternate" hreflang="ja" href="https://{{DOMAIN}}/ja/"> <link rel="alternate" hreflang="zh" href="https://{{DOMAIN}}/zh/"> <link rel="alternate" hreflang="ko" href="https://{{DOMAIN}}/ko/"> <link rel="alternate" hreflang="x-default" href="https://{{DOMAIN}}/"> <link rel="icon" href="../images/favicon.png"> <meta property="og:type" content="website"> <meta property="og:title" content="CaraChat – el chat Caramail de los años 2000"> <meta property="og:description" content="Salas, privados, colores, arcoíris y los smileys originales: el chat de 2002 recreado en PHP."> <meta property="og:url" content="https://{{DOMAIN}}/es/"> <meta property="og:image" content="https://{{DOMAIN}}/images/og.png"> <meta property="og:locale" content="es_ES"> <meta name="twitter:card" content="summary_large_image"> <meta name="twitter:title" content="CaraChat – el chat Caramail de los años 2000"> <meta name="twitter:description" content="Salas, privados, colores, arcoíris y los smileys originales: el chat de 2002 recreado en PHP."> <meta name="twitter:image" content="https://{{DOMAIN}}/images/og.png"> <script type="application/ld+json">{ "@context": "https://schema.org", "@type": "WebApplication", "name": "CaraChat", "description": "El cliente de chat Caramail de 2002 recreado en PHP con JumPHP: salas, privados, colores, texto arcoíris y ondulado, smileys dibujados originales.", "url": "https://{{DOMAIN}}/es/", "applicationCategory": "CommunicationApplication", "operatingSystem": "Web browser, Linux, Windows, macOS", "image": "https://{{DOMAIN}}/images/og.png", "screenshot": ["https://{{DOMAIN}}/images/chat.png", "https://{{DOMAIN}}/images/rooms.png", "https://{{DOMAIN}}/images/search.png", "https://{{DOMAIN}}/images/private.png", "https://{{DOMAIN}}/images/phone.png", "https://{{DOMAIN}}/images/login.png"], "isAccessibleForFree": true, "offers": {"@type": "Offer", "price": "0", "priceCurrency": "EUR"}, "potentialAction": {"@type": "UseAction", "target": "https://{{DOMAIN}}/play/"}} </script> <script type="application/ld+json">{ "@context": "https://schema.org", "@type": "FAQPage", "mainEntity": [ {"@type": "Question", "name": "¿Cómo se hace un smiley?", "acceptedAnswer": {"@type": "Answer", "text": "Como en 2002: ojos, nariz y boca, por ejemplo :-) ;-) 8-) :o) o :#) para Papá Noel. La nariz es obligatoria. Un número después del smiley cambia su color (:-)2), #c o #d le añade una mano. Del #00 al #14 son dibujos: #13 es un corazón."}}, {"@type": "Question", "name": "¿Hace falta un servidor?", "acceptedAnswer": {"@type": "Answer", "text": "Sí: el servidor de chat CaraChat Serveur (PHP, sin base de datos) se ejecuta en Docker en cualquier máquina; después se indica su dirección y su puerto (4500) en la ventana de conexión."}} ]} </script> <style> :root { --gris: #c0c0c0; --bleu: #0000ff; --nuit: #1a1a8c; --rose: #ff00c8; } * { box-sizing: border-box; } body { margin: 0; font-family: Helvetica, Arial, sans-serif; background: var(--gris); color: #000; line-height: 1.5; } header { background: #404040; color: #fff; padding: 12px 16px; } header .wrap { display: flex; align-items: center; gap: 12px; } header img { width: 40px; height: 40px; image-rendering: pixelated; } header strong { font-size: 1.4rem; color: #fff; } .wrap { max-width: 1040px; margin: 0 auto; } main { padding: 0 16px 40px; } .langs { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 13px; margin: 10px 0 0; padding: 0; } .langs a { color: var(--nuit); } h1 { color: var(--bleu); font-size: 2.2rem; margin: 28px 0 8px; } h2 { color: var(--nuit); border-bottom: 2px solid #808080; padding-bottom: 4px; margin-top: 40px; } .lead { font-size: 1.15rem; max-width: 760px; } .play { display: inline-block; background: var(--bleu); color: #fff; font-weight: bold; font-size: 1.25rem; padding: 14px 28px; border-radius: 6px; text-decoration: none; margin: 12px 0 24px; } .play:hover { background: var(--nuit); } figure { margin: 0; background: #fff; border: 1px solid #808080; padding: 6px; } figure img { display: block; width: 100%; height: auto; } figcaption { font-size: .9rem; color: #646464; padding: 6px 2px 0; } .grid { display: grid; grid-template-columns: 2fr 1fr; gap: 16px; align-items: start; } .card { background: #fff; border: 1px solid #808080; padding: 12px 16px; } code { background: #eeeeff; padding: 1px 4px; border-radius: 3px; } .help h3 { color: #990000; font-size: 1.05rem; margin: 18px 0 6px; } .help .note { color: #646464; font-size: .9rem; } .rainbow span:nth-child(9n+1) { color: #ff00c8 } .rainbow span:nth-child(9n+2) { color: #6e265f } .rainbow span:nth-child(9n+3) { color: #7d0000 } .rainbow span:nth-child(9n+4) { color: #1a1a8c } .rainbow span:nth-child(9n+5) { color: #0000ff } .rainbow span:nth-child(9n+6) { color: #147300 } .rainbow span:nth-child(9n+7) { color: #9b9b14 } .rainbow span:nth-child(9n+8) { color: #ff9d00 } .rainbow span:nth-child(9n) { color: #ff0000 } .shots { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; } .shots .phone img { max-width: 260px; margin: 0 auto; } @media (max-width: 720px) { .shots { grid-template-columns: 1fr; } } footer { font-size: .85rem; color: #404040; padding: 24px 16px; border-top: 1px solid #808080; } @media (max-width: 720px) { .grid { grid-template-columns: 1fr; } h1 { font-size: 1.7rem; } } </style></head><body><header><div class="wrap"><img src="../images/favicon.png" alt="El smiley guiñando un ojo del applet" width="40" height="40"><strong>CaraChat</strong></div></header><main class="wrap"> <nav class="langs" aria-label="Idiomas"> <a href="../" lang="fr" hreflang="fr">Français</a> <a href="../en/" lang="en" hreflang="en">English</a> <strong lang="es" aria-current="page">Español</strong> <a href="../de/" lang="de" hreflang="de">Deutsch</a> <a href="../it/" lang="it" hreflang="it">Italiano</a> <a href="../pt/" lang="pt" hreflang="pt">Português</a> <a href="../nl/" lang="nl" hreflang="nl">Nederlands</a> <a href="../pl/" lang="pl" hreflang="pl">Polski</a> <a href="../ru/" lang="ru" hreflang="ru">Русский</a> <a href="../uk/" lang="uk" hreflang="uk">Українська</a> <a href="../tr/" lang="tr" hreflang="tr">Türkçe</a> <a href="../ja/" lang="ja" hreflang="ja">日本語</a> <a href="../zh/" lang="zh" hreflang="zh">中文</a> <a href="../ko/" lang="ko" hreflang="ko">한국어</a> </nav> <h1>El chat de los años 2000 ha vuelto</h1> <p class="lead">CaraChat recrea en PHP el applet de chat de Caramail de 2002: las salas, los privados, los nicks rosas y azules, el texto <span class="rainbow"><span>a</span><span>r</span><span>c</span><span>o</span><span>í</span><span>r</span><span>i</span><span>s</span></span>y ondulado, y los smileys dibujados exactamente como entonces.</p> <a class="play" href="../play/?lang=es">Entrar al chat</a> <figure> <img src="../images/chat.png" alt="La sala Accueil (Inicio) de CaraChat: frases de colores, smileys, lista de presentes y pestañas" width="1024" height="700"> <figcaption>Una sala: frases en color, el arcoíris, los smileys, los presentes a la derecha y un privado que parpadea en naranja.</figcaption> </figure> <h2>Las pestañas del applet</h2> <div class="shots"> <figure><img src="../images/rooms.png" alt="La pestaña Salons: las salas permanentes, la creación de una sala pública o privada" width="1024" height="700" loading="lazy"><figcaption>Salons (salas): las salas permanentes y las de los miembros, la creación de una sala.</figcaption></figure> <figure><img src="../images/search.png" alt="La pestaña Connecté(e)s: la lista de conectados y la búsqueda por nick, edad, sexo" width="1024" height="700" loading="lazy"><figcaption>Connecté(e)s (conectados): búsqueda por nick o por ciudad, edad y sexo.</figcaption></figure> <figure><img src="../images/private.png" alt="Un diálogo privado con sus opciones y la paleta de smileys especiales" width="1024" height="700" loading="lazy"><figcaption>Un diálogo privado, sus opciones y los smileys especiales.</figcaption></figure> <figure class="phone"><img src="../images/phone.png" alt="CaraChat en un teléfono" width="390" height="760" loading="lazy"><figcaption>En el teléfono.</figcaption></figure> </div> <h2>Lo que vuelve</h2> <div class="grid"> <div class="card"> <ul> <li><strong>La interfaz del applet</strong>, redibujada idéntica: pestañas Salons (salas), Connecté(e)s (conectados), Options y Ami(e)s (amigos), la sala y una pestaña por privado (20 como máximo) que se pone naranja, marcos « Dialogue » y « Membres du salon » (miembros de la sala), « Message privé » (mensaje privado), « Pas de nouveaux PVs » (sin nuevos privados), « Problème de comportement » (problema de comportamiento).</li> <li><strong>En el teléfono</strong> también, y en 14 idiomas (el de tu navegador, que se cambia en la pestaña Options).</li> <li><strong>Las salas</strong> permanentes y las de los miembros, públicas o privadas; una sala llena (40) desborda en « Salon* ».</li> <li><strong>Los privados</strong>: doble clic en un nick, o <code>/nick mensaje</code> desde la sala.</li> <li><strong>La búsqueda</strong> por nick o por ciudad, con rango de edad y sexo.</li> <li><strong>Los colores</strong> (12, incluido el arcoíris) y los tamaños (incluida la onda), nicks coloreados según el perfil, tu nick en negrita cuando te hablan.</li> <li><strong>La moderación</strong>: expulsión, avisar a un moderador, ignorar a alguien, « no más privados », ocupado.</li> </ul> </div> <figure> <img src="../images/login.png" alt="La ventana de conexión: nick, edad, ciudad, sexo y servidor" width="520" height="447"> <figcaption>La conexión: tu perfil y el servidor.</figcaption> </figure> </div> <h2>Los smileys originales</h2> <p>No eran imágenes sino código de dibujo: ese código se leyó en el applet y se reprodujo píxel a píxel. Unos ojos <code>:;8B%</code>, una nariz que elige la cabeza <code>-o#!*$</code> (payaso, Papá Noel, jarra, máscara…), una boca <code>)(DPO|</code>: <code>:-)</code>, <code>;-)</code>, <code>8-)</code>, <code>:o)</code>, <code>:#)</code>. Un número colorea la cara (<code>:-)2</code>), <code>#c</code> / <code>#d</code> añaden una mano, y del <code>#00</code> al <code>#14</code> son dibujos: bomba, osito, abeto, delfín, corazón <code>#13</code>… Y las 60 imágenes de la paleta « Smileys » (la hamburguesa <code>@00</code>, el corazón <code>@11</code>, la tarta <code>@09</code>…) vienen del <code>smiley.gif</code> original.</p> <figure> <img src="../images/smileys.png" alt="Frases de la sala con los smileys dibujados: caras, corazón, abeto, nota musical" width="900" height="319"> </figure> <h2>El manual de uso original</h2> <p>La ayuda en línea del chat en directo de Caramail (1999), tal cual, en francés: <a href="../aide.html">qué es el chat en directo, la creación de salas públicas o privadas, el envío de mensajes privados (ayuda en francés)</a>.</p> <h2>El servidor</h2> <p>El servidor <strong>CaraChat Serveur</strong> está reescrito en PHP 8 a partir de las fuentes de 2012, sin base de datos, y funciona en Docker en jumphp.net. Habla exactamente el protocolo del applet (una línea por trama, campos separados por tabuladores), en TCP como entonces o en WebSocket por el puerto 443 (<code>wss://caramail.jumphp.net/ws</code>): la conexión pasa por todas partes, incluso detrás de un cortafuegos.</p> <a class="play" href="../play/?lang=es">Abrir CaraChat</a></main><footer class="wrap">CaraChat es una recreación no oficial, hecha con JumPHP. El applet original (net.spray.chat, 2002) y el servidor PHP « NewCaraChat » (2012) pertenecen a sus autores.</footer></body></html>