<!doctype html><html lang="it"><head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>CaraChat – la chat Caramail degli anni 2000, ricreata in PHP (gratis, online)</title> <meta name="description" content="CaraChat ricrea in PHP il client chat di Caramail del 2002: stanze, privati, nickname colorati, testo arcobaleno e a onda, e gli smiley disegnati originali. Gratis, nel browser."> <link rel="canonical" href="https://{{DOMAIN}}/it/"> <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 – la chat Caramail degli anni 2000"> <meta property="og:description" content="Stanze, privati, colori, arcobaleno e gli smiley originali: la chat del 2002 ricreata in PHP."> <meta property="og:url" content="https://{{DOMAIN}}/it/"> <meta property="og:image" content="https://{{DOMAIN}}/images/og.png"> <meta property="og:locale" content="it_IT"> <meta name="twitter:card" content="summary_large_image"> <meta name="twitter:title" content="CaraChat – la chat Caramail degli anni 2000"> <meta name="twitter:description" content="Stanze, privati, colori, arcobaleno e gli smiley originali: la chat del 2002 ricreata in 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": "Il client chat Caramail del 2002 ricreato in PHP con JumPHP: stanze, privati, colori, testo arcobaleno e a onda, smiley disegnati originali.", "url": "https://{{DOMAIN}}/it/", "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": "Come si fa uno smiley?", "acceptedAnswer": {"@type": "Answer", "text": "Come nel 2002: occhi, naso e bocca, per esempio :-) ;-) 8-) :o) o :#) per Babbo Natale. Il naso è obbligatorio. Una cifra dopo lo smiley ne cambia il colore (:-)2), #c o #d aggiunge una mano. Da #00 a #14 sono disegni: #13 è un cuore."}}, {"@type": "Question", "name": "Serve un server?", "acceptedAnswer": {"@type": "Answer", "text": "Sì: il server di chat CaraChat Serveur (PHP, senza database) si avvia in Docker su qualsiasi macchina, poi si indicano il suo indirizzo e la sua porta (4500) nella finestra di connessione."}} ]} </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="Lo smiley che fa l'occhiolino dell'applet" width="40" height="40"><strong>CaraChat</strong></div></header><main class="wrap"> <nav class="langs" aria-label="Lingue"> <a href="../" lang="fr" hreflang="fr">Français</a> <a href="../en/" lang="en" hreflang="en">English</a> <a href="../es/" lang="es" hreflang="es">Español</a> <a href="../de/" lang="de" hreflang="de">Deutsch</a> <strong lang="it" aria-current="page">Italiano</strong> <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>La chat degli anni 2000 è tornata</h1> <p class="lead">CaraChat ricrea in PHP l'applet di chat di Caramail del 2002: le stanze, i privati, i nickname rosa e blu, il testo <span class="rainbow"><span>a</span><span>r</span><span>c</span><span>o</span><span>b</span><span>a</span><span>l</span><span>e</span><span>n</span><span>o</span></span>e a onda, e gli smiley disegnati esattamente come allora.</p> <a class="play" href="../play/?lang=it">Entra nella chat</a> <figure> <img src="../images/chat.png" alt="La stanza Accueil (Home) di CaraChat: frasi colorate, smiley, elenco dei presenti e schede" width="1024" height="700"> <figcaption>Una stanza: le frasi a colori, l'arcobaleno, gli smiley, i presenti a destra e un privato che lampeggia in arancione.</figcaption> </figure> <h2>Le schede dell'applet</h2> <div class="shots"> <figure><img src="../images/rooms.png" alt="La scheda Salons: le stanze permanenti, la creazione di una stanza pubblica o privata" width="1024" height="700" loading="lazy"><figcaption>Salons (stanze): le stanze permanenti e quelle dei membri, la creazione di una stanza.</figcaption></figure> <figure><img src="../images/search.png" alt="La scheda Connecté(e)s: l'elenco dei connessi e la ricerca per nickname, età, sesso" width="1024" height="700" loading="lazy"><figcaption>Connecté(e)s (connessi): la ricerca per nickname o per città, età e sesso.</figcaption></figure> <figure><img src="../images/private.png" alt="Un dialogo privato con le sue opzioni e la tavolozza di smiley speciali" width="1024" height="700" loading="lazy"><figcaption>Un dialogo privato, le sue opzioni e gli smiley speciali.</figcaption></figure> <figure class="phone"><img src="../images/phone.png" alt="CaraChat su un telefono" width="390" height="760" loading="lazy"><figcaption>Su telefono.</figcaption></figure> </div> <h2>Cosa ritorna</h2> <div class="grid"> <div class="card"> <ul> <li><strong>L'interfaccia dell'applet</strong>, ridisegnata identica: schede Salons (stanze), Connecté(e)s (connessi), Options e Ami(e)s (amici), la stanza e una scheda per ogni privato (al massimo 20) che diventa arancione, riquadri « Dialogue » e « Membres du salon » (membri della stanza), « Message privé » (messaggio privato), « Pas de nouveaux PVs » (nessun nuovo privato), « Problème de comportement » (problema di comportamento).</li> <li><strong>Anche su telefono</strong>, e in 14 lingue (quella del browser, da cambiare nella scheda Options).</li> <li><strong>Le stanze</strong> permanenti e quelle dei membri, pubbliche o private; una stanza piena (40) trabocca in « Salon* ».</li> <li><strong>I privati</strong>: doppio clic su un nickname, oppure <code>/nickname messaggio</code> dalla stanza.</li> <li><strong>La ricerca</strong> per nickname o per città, con fascia d'età e sesso.</li> <li><strong>I colori</strong> (12, compreso l'arcobaleno) e le dimensioni (compresa l'onda), nickname colorati in base al profilo, il tuo nickname in grassetto quando ti parlano.</li> <li><strong>La moderazione</strong>: espulsione, chiamata di un moderatore, ignorare qualcuno, « nessun nuovo privato », occupato.</li> </ul> </div> <figure> <img src="../images/login.png" alt="La finestra di connessione: nickname, età, città, sesso e server" width="520" height="447"> <figcaption>La connessione: il tuo profilo e il server.</figcaption> </figure> </div> <h2>Gli smiley originali</h2> <p>Non erano immagini ma codice di disegno: quel codice è stato letto nell'applet e riprodotto al pixel. Degli occhi <code>:;8B%</code>, un naso che sceglie la testa <code>-o#!*$</code> (clown, Babbo Natale, boccale, maschera…), una bocca <code>)(DPO|</code>: <code>:-)</code>, <code>;-)</code>, <code>8-)</code>, <code>:o)</code>, <code>:#)</code>. Una cifra colora il viso (<code>:-)2</code>), <code>#c</code> / <code>#d</code> aggiungono una mano, e da <code>#00</code> a <code>#14</code> sono disegni: bomba, orsacchiotto, abete, delfino, cuore <code>#13</code>… E le 60 immagini della tavolozza « Smileys » (l'hamburger <code>@00</code>, il cuore <code>@11</code>, la torta <code>@09</code>…) provengono dall'originale <code>smiley.gif</code>.</p> <figure> <img src="../images/smileys.png" alt="Frasi della stanza con gli smiley disegnati: facce, cuore, abete, nota musicale" width="900" height="319"> </figure> <h2>Le istruzioni originali</h2> <p>L'aiuto in linea della chat dal vivo di Caramail (1999), ripreso così com'è, in francese: <a href="../aide.html">cos'è la chat dal vivo, la creazione di stanze pubbliche o private, l'invio di messaggi privati (aiuto in francese)</a>.</p> <h2>Il server</h2> <p>Il server <strong>CaraChat Serveur</strong> è riscritto in PHP 8 a partire dai sorgenti del 2012, senza database, e gira in Docker su jumphp.net. Parla esattamente il protocollo dell'applet (una riga per frame, campi separati da tabulazioni), in TCP come allora o in WebSocket sulla porta 443 (<code>wss://caramail.jumphp.net/ws</code>): la connessione passa ovunque, anche dietro un firewall.</p> <a class="play" href="../play/?lang=it">Apri CaraChat</a></main><footer class="wrap">CaraChat è una ricreazione non ufficiale, fatta con JumPHP. L'applet originale (net.spray.chat, 2002) e il server PHP « NewCaraChat » (2012) appartengono ai loro autori.</footer></body></html>