<!doctype html><html lang="pt"><head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>CaraChat – o chat Caramail dos anos 2000, recriado em PHP (grátis, online)</title> <meta name="description" content="O CaraChat recria em PHP o cliente de chat do Caramail de 2002: salas, privados, nicks coloridos, texto arco-íris e ondulado, e os smileys desenhados originais. Grátis, no navegador."> <link rel="canonical" href="https://{{DOMAIN}}/pt/"> <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 – o chat Caramail dos anos 2000"> <meta property="og:description" content="Salas, privados, cores, arco-íris e os smileys originais: o chat de 2002 recriado em PHP."> <meta property="og:url" content="https://{{DOMAIN}}/pt/"> <meta property="og:image" content="https://{{DOMAIN}}/images/og.png"> <meta property="og:locale" content="pt_PT"> <meta name="twitter:card" content="summary_large_image"> <meta name="twitter:title" content="CaraChat – o chat Caramail dos anos 2000"> <meta name="twitter:description" content="Salas, privados, cores, arco-íris e os smileys originais: o chat de 2002 recriado em 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": "O cliente de chat Caramail de 2002 recriado em PHP com JumPHP: salas, privados, cores, texto arco-íris e ondulado, smileys desenhados originais.", "url": "https://{{DOMAIN}}/pt/", "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": "Como se faz um smiley?", "acceptedAnswer": {"@type": "Answer", "text": "Como em 2002: olhos, nariz e boca, por exemplo :-) ;-) 8-) :o) ou :#) para o Pai Natal. O nariz é obrigatório. Um número depois do smiley muda-lhe a cor (:-)2), #c ou #d acrescenta uma mão. De #00 a #14 são desenhos: #13 é um coração."}}, {"@type": "Question", "name": "É preciso um servidor?", "acceptedAnswer": {"@type": "Answer", "text": "Sim: o servidor de chat CaraChat Serveur (PHP, sem base de dados) arranca em Docker em qualquer máquina; depois indica-se o seu endereço e a sua porta (4500) na janela de ligação."}} ]} </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="O smiley a piscar o olho do 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> <a href="../es/" lang="es" hreflang="es">Español</a> <a href="../de/" lang="de" hreflang="de">Deutsch</a> <a href="../it/" lang="it" hreflang="it">Italiano</a> <strong lang="pt" aria-current="page">Português</strong> <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>O chat dos anos 2000 está de volta</h1> <p class="lead">O CaraChat recria em PHP o applet de chat do Caramail de 2002: as salas, os privados, os nicks cor-de-rosa e azuis, o texto <span class="rainbow"><span>a</span><span>r</span><span>c</span><span>o</span><span>-</span><span>í</span><span>r</span><span>i</span><span>s</span></span>e ondulado, e os smileys desenhados exatamente como na altura.</p> <a class="play" href="../play/?lang=pt">Entrar no chat</a> <figure> <img src="../images/chat.png" alt="A sala Accueil (Início) do CaraChat: frases coloridas, smileys, lista de presentes e separadores" width="1024" height="700"> <figcaption>Uma sala: as frases a cores, o arco-íris, os smileys, os presentes à direita e um privado a piscar a laranja.</figcaption> </figure> <h2>Os separadores do applet</h2> <div class="shots"> <figure><img src="../images/rooms.png" alt="O separador Salons: as salas permanentes, a criação de uma sala pública ou privada" width="1024" height="700" loading="lazy"><figcaption>Salons (salas): as salas permanentes e as dos membros, a criação de uma sala.</figcaption></figure> <figure><img src="../images/search.png" alt="O separador Connecté(e)s: a lista de ligados e a pesquisa por nick, idade, sexo" width="1024" height="700" loading="lazy"><figcaption>Connecté(e)s (ligados): pesquisa por nick ou por cidade, idade e sexo.</figcaption></figure> <figure><img src="../images/private.png" alt="Um diálogo privado com as suas opções e a paleta de smileys especiais" width="1024" height="700" loading="lazy"><figcaption>Um diálogo privado, as suas opções e os smileys especiais.</figcaption></figure> <figure class="phone"><img src="../images/phone.png" alt="O CaraChat num telemóvel" width="390" height="760" loading="lazy"><figcaption>No telemóvel.</figcaption></figure> </div> <h2>O que está de volta</h2> <div class="grid"> <div class="card"> <ul> <li><strong>A interface do applet</strong>, redesenhada de forma idêntica: separadores Salons (salas), Connecté(e)s (ligados), Options e Ami(e)s (amigos), a sala e um separador por privado (20 no máximo) que fica laranja, molduras « Dialogue » e « Membres du salon » (membros da sala), « Message privé » (mensagem privada), « Pas de nouveaux PVs » (sem novos privados), « Problème de comportement » (problema de comportamento).</li> <li><strong>No telemóvel</strong> também, e em 14 idiomas (o do navegador, que se muda no separador Options).</li> <li><strong>As salas</strong> permanentes e as dos membros, públicas ou privadas; uma sala cheia (40) transborda para « Salon* ».</li> <li><strong>Os privados</strong>: duplo clique num nick, ou <code>/nick mensagem</code> a partir da sala.</li> <li><strong>A pesquisa</strong> por nick ou por cidade, com faixa etária e sexo.</li> <li><strong>As cores</strong> (12, incluindo o arco-íris) e os tamanhos (incluindo a onda), nicks coloridos consoante o perfil, o seu nick a negrito quando falam consigo.</li> <li><strong>A moderação</strong>: expulsão, chamar um moderador, ignorar alguém, « sem novos privados », ocupado.</li> </ul> </div> <figure> <img src="../images/login.png" alt="A janela de ligação: nick, idade, cidade, sexo e servidor" width="520" height="447"> <figcaption>A ligação: o seu perfil e o servidor.</figcaption> </figure> </div> <h2>Os smileys originais</h2> <p>Não eram imagens mas código de desenho: esse código foi lido no applet e reproduzido ao pixel. Uns olhos <code>:;8B%</code>, um nariz que escolhe a cabeça <code>-o#!*$</code> (palhaço, Pai Natal, caneca, máscara…), uma boca <code>)(DPO|</code>: <code>:-)</code>, <code>;-)</code>, <code>8-)</code>, <code>:o)</code>, <code>:#)</code>. Um número dá cor à cara (<code>:-)2</code>), <code>#c</code> / <code>#d</code> acrescentam uma mão, e de <code>#00</code> a <code>#14</code> são desenhos: bomba, ursinho, abeto, golfinho, coração <code>#13</code>… E as 60 imagens da paleta « Smileys » (o hambúrguer <code>@00</code>, o coração <code>@11</code>, o bolo <code>@09</code>…) vêm do <code>smiley.gif</code> original.</p> <figure> <img src="../images/smileys.png" alt="Frases da sala com os smileys desenhados: caras, coração, abeto, nota musical" width="900" height="319"> </figure> <h2>O manual de utilização original</h2> <p>A ajuda em linha do chat em direto do Caramail (1999), tal e qual, em francês: <a href="../aide.html">o que é o chat em direto, a criação de salas públicas ou privadas, o envio de mensagens privadas (ajuda em francês)</a>.</p> <h2>O servidor</h2> <p>O servidor <strong>CaraChat Serveur</strong> foi reescrito em PHP 8 a partir das fontes de 2012, sem base de dados, e corre em Docker em jumphp.net. Fala exatamente o protocolo do applet (uma linha por trama, campos separados por tabulações), em TCP como na altura ou em WebSocket na porta 443 (<code>wss://caramail.jumphp.net/ws</code>): a ligação passa em todo o lado, mesmo atrás de uma firewall.</p> <a class="play" href="../play/?lang=pt">Abrir o CaraChat</a></main><footer class="wrap">O CaraChat é uma recriação não oficial, feita com JumPHP. O applet original (net.spray.chat, 2002) e o servidor PHP « NewCaraChat » (2012) pertencem aos seus autores.</footer></body></html>