Lucy Daiviva

TORNAR

Introducció

L’internet ha estat cooptat per les grans empreses. Ens han tancat en entorns controlats, patis de joc on ells posen les normes, la vigilància i els anuncis. Sembla que, per existir al món virtual, hem de passar necessàriament per aquest adreçador. Però hi ha qui treballa per l’alternativa: per un internet descentralitzat, indie, on poder viatjar entre portals únics i on no tot sigui la mateixa quadrícula blanca.

Recomano, en el cas dels col·lectius socials, visitar la pàgina de LaFurgo. Allà s’explica com mudar-se a les xarxes socials autogestionades i al món del Fedivers. També vull destacar el moviment Indie Web, una tendència que busca precisament la construcció d’espais virtuals personals i descentralitzats, amb dominis propis, tot promovent el "fes-ho tu mateixa".

Últimament, programar pàgines web s’ha convertit en arrossegar elements i utilitzar plantilles prefabricades amb plataformes com Wix o Hostinger, amb la condició de passar per caixa cada mes. Si la teva pàgina web no té la intenció de generar un benefici, l'opció de pagar no té cap sentit. O si estàs pelada com jo. Per això, amb aquest document vull donar-te les bases perquè puguis construir la teva web "a l’antigua", picant codi. I, creu-me, és més senzill del que penses; ho pots fer amb l’ordinador més xusta que tinguis.

En aquest document no hauràs d’estudiar només teoria: aprenem mentre fem. A continuació, et diré tot el que necessites per posar-te mans a l'obra.

Fes la teva primera web en un minut

Crea un document de text i obre’l amb el bloc de notes de l’ordinador. Copia el següent codi:

<!DOCTYPE html>
<html lang="ca">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Web en un minut</title>
</head>
<body>
<h1>AL FASCISME NO SE’L DEBAT, SE’L DESTRUEIX</h1>
<h3>- Buenaventura Durruti</h3>
</body>
</html>

Després, guarda la nota i canvia-li el nom a index.html. Obre l’arxiu amb el navegador. Aquí tens una web bàsica. Pots canviar el text del títol modificant el contingut dels tags: <h1>contingut</h1> i <h3>contingut</h3>.

L’editor de text

Escriure codi és molt feixuc si ho fas amb el bloc de notes. Per això hi ha programes fets per a programar que et faciliten la vida. Et donen dreceres que t’autocompleten el codi, pots veure bé les carpetes i t’avisen quan el codi té un error de sintaxi.

Hi ha moltes ofertes en aquest àmbit. Jo he estat utilitzant Sublime Text. És de pagament, però te’l pots descarregar de manera gratuïta i, si no pagues, simplement et surten avisos dient que has de pagar el programari. Però no us el recomano; jo em vull canviar a una opció més ètica i de programari lliure. En aquesta línia, us recomano VSCodium o Zed. Tots dos són programari lliure i són molt senzills per començar.

Els ossos: l’HTML

Per entendre com funciona el codi que forma una pàgina web, imaginem-nos una cara. L’estructura més essencial són els ossos: l’estructura facial. És el que sustenta les altres parts. Després ve la pell, el maquillatge, les celles, els llavis... que marquen com es veu la cara. Això seria el CSS, que designa com es veuen els elements de l'HTML. I llavors tindríem el cervell, que seria el JavaScript.

Per construir aquest esquelet, fem servir etiquetes. Imagina-les com a contenidors. Quasi totes les etiquetes tenen una obertura i un tancament (que es diferencia per una barra inclinada /).

<h1> Això és un títol important </h1>
<p> Això és un paràgraf de text. </p>

Tot document HTML es divideix en dues grans cavitats:

  • El <head> (El cap): Aquí és on la web "pensa" però no "mostra". És la part invisible per a l'usuari. Aquí hi posem el títol que surt a la pestanya del navegador, l'idioma i les connexions amb el maquillatge (CSS).
  • El <body> (El cos): Aquí és on passa tota la màgia visible. Si vols que la gent vegi una imatge, un text o un botó, ha d'anar aquí dins.

Les peces bàsiques que necessites conèixer

Aquestes són les etiquetes que més faràs servir:

  1. Títols (<h1> fins a <h6>): El <h1> és el títol principal (només n'hi hauria d'haver un per pàgina), i els altres són subtítols cada cop més petits.
  2. Paràgrafs (<p>): Per escriure els teus textos i reflexions.
  3. Imatges (<img>): Aquesta és especial, no es tanca! Es fa així: <img src="la-meva-foto.jpg">. El src és la "font" o on està guardada la foto.
  4. Enllaços (<a>): El més important de la web! Serveix per connectar amb altres portals: <a href="https://lafurgo.net">Visita LaFurgo</a>.
  5. Llistes (<ul> i <li>): Per fer llistes de coses, com els teus llibres preferits o els motius per fugir de les Big Tech.

Recursos per explorar

  • MDN Web Docs (Mozilla): És la "Bíblia" de la web. Està mantingut per Mozilla (els de Firefox). És documentació pura, detallada i molt ben explicada. Si una etiqueta existeix, aquí t'explicaran com fer-la servir. Està disponible en molts idiomes, inclòs el català (tot i que la versió en anglès és la més completa).
  • W3Schools: Un clàssic. El millor que té és el botó "Try it Yourself", on pots tocar el codi en una banda i veure el resultat a l'altra a l'instant. Molt visual i directe al gra.
  • Learn HTML de web.dev: Un curs interactiu creat per gent que sap molt de com fer webs que funcionin bé i siguin accessibles per a tothom.
  • FreeCodeCamp: Si vols un camí guiat amb exercicis pràctics des de zero, aquesta és la millor plataforma gratuïta i comunitària del món. El seu curs de "Responsive Web Design" comença precisament amb l'HTML.
  • pildorasinformaticas (YouTube): Té cursos molt estructurats i clars en castellà que van des del nivell zero fins a professional.
  • FalconMasters: Molt bo per entendre no només com es pica el codi, sinó com es dissenya amb una mica de gust.

Exercici: Venda de calces usades

Anem a posar el que hem après en un exercici pràctic i molt útil. Muntarem una pàgina de venda de calcetes usades. Serà una pàgina estàtica i senzilla, però ens servirà per entendre els bàsics de l’HTML.

Primer, crea un document de text i obre’l amb l'editor de text que t’hagis descarregat. Llavors, inserta el codi que han de tenir totes les pàgines web. És possible que, si escrius un “!”, l’editor et fiqui l’estructura bàsica. Si no, copia aquest codi:

<!DOCTYPE html>
<html lang="cat">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>

No cal que entenguis què és cada cosa; si t’interessa, ho pots buscar a internet, guapa.

Primer anem a dissenyar la web. Ho pots fer amb programes gratuïts com Affinity Designer, però amb un boli i un paper també va bé. Jo he fet aquest croquis bàsic:

Afegeix al <body> les etiquetes següents: el <h1> pel títol, el <h2> pel subtítol, <p> per la descripció i, dins d'aquesta, un enllaç. Després, col·loca una imatge i, a sota, un text <p>. Faltarà un botó per comprar sota del preu; pots afegir un altre enllaç buit on posi "Comprar". Per acabar, pots copiar la imatge, el paràgraf amb el preu i l’enllaç de comprar dos cops més i prou.

Recorda canviar el nom del document a index.html i que estigui en la seva pròpia carpeta. T’hauria de quedar una cosa així (he afegit l'etiqueta <br>, que no té tancament, per forçar un salt de línia):

<!DOCTYPE html>
<html lang="cat">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>CALCETES USADES</h1>
<h2>Les calcetes més pudentes</h2>
<p>Calcetes usades per les noies més irreverents, desavergonyides i brutes. <br> Portades durant una setmana i sense dutxar-se. Preu <a href="https://media1.giphy.com/media/v1.Y2lkPTc5MGI3NjExcmMzc3c0ODFoa2didW1iMmthZTd5ZTI5dGUxZGtldXpjZTIxM2dmYyZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/KzGCAlMiK6hQQ/giphy.gif">no</a> negociable</p>
<img src="https://www.pascogifts.com/en/media/cache/resolve/square/files/751397-58d528ea072d2.jpg">
<p>666€</p>
<a href="">comprar</a> <br>
<img src="https://www.pascogifts.com/en/media/cache/resolve/square/files/751397-58d528ea072d2.jpg">
<p>666€</p>
<a href="">comprar</a> <br>
<img src="https://www.pascogifts.com/en/media/cache/resolve/square/files/751397-58d528ea072d2.jpg">
<p>666€</p>
<a href="">comprar</a>
</body>
</html>

Veiem que el text està alineat a l’esquerra i les imatges estan ordenades verticalment. En definitiva, la pàgina web és més lletja que tu d’adolescent. No us sentiu ofeses. Això és perquè li falta un eyeliner, que una amiga xula li faci un bon tall de cabell, una dosi d’estrògens... Anem a yassificar la web amb el CSS, la fulla d’estil o style sheet en anglès.

El maquillatge: el CSS

El CSS funciona amb regles. Una regla diu: "agafa aquest element de l'HTML i posa'l de color lila". L'estructura d'una regla CSS sempre és la mateixa:

selector { 
    propietat: valor; 
}
  • Selector: A quina part de l'esquelet (HTML) vols aplicar el canvi? (Exemple: h1, p, body).
  • Propietat: Què vols canviar? (Exemple: color, background-color, font-size).
  • Valor: Com ho vols canviar? (Exemple: red, #ff008c, 20px).

Com es connecta amb l'HTML?

Tens tres maneres de fer-ho, però la "professional" (i la que manté el teu codi net) és crear un fitxer a part anomenat style.css i connectar-lo dins del <head> de la teva web amb aquesta línia:

<link rel="stylesheet" href="style.css">

Per crear el fitxer, fem com amb l'index.html: crees un document de text (.txt), l'obres amb l'editor de text i el guardes canviant-li el nom a style.css.

Conceptes clau que has de dominar:

  1. El "Box Model" (Model de caixes): Imagina que cada element (un títol, una imatge) està dins d'una caixa invisible. Pots controlar el contingut, l'espai interior (padding), la vora (border) i l'espai exterior entre caixes (margin).
  2. Colors: Pots fer servir noms (ex: red), codis hexadecimals (ex: #ff008c) o valors RGB.
  3. Flexbox i Grid: Són les eines modernes per moure les peces de la teva web com si fossin un trencaclosques. Serveixen per posar coses una al costat de l'altra o centrar-les (el gran mal de cap de les programadores).

Recursos per dominar el CSS

  • Flexbox Froggy: Un joc boníssim (i en català!) on has d'ajudar unes granotes a arribar als seus nenúfars escrivint codi CSS. Aprendràs a posicionar elements sense adonar-te'n.
  • Grid Garden: Semblant al de les granotes, però per aprendre a cultivar un hort fent servir el sistema de quadrícula (Grid).
  • CSS-Tricks: Un web mític amb articles i guies visuals. La seva "Guia completa de Flexbox" és el sant grial que totes les programadores tenim oberta en una pestanya.
  • MDN Web Docs - CSS: De nou, Mozilla és la font més fiable per saber exactament què fa cada propietat.
  • Google Fonts: El lloc on pots trobar tipografies (lletres) xules i gratuïtes per no haver de fer servir sempre l'Arial o la Times New Roman.
  • HTML5 UP!: Per mirar com estan fetes plantilles professionals i "robar" idees (recorda que a la web, copiar el codi per aprendre és la millor escola).

Exercici calces part 2

Anem a fer que estigui centrada, donar-li color, posar-li una tipografia divertida, fer que les imatges es vegin en graella i que l’enllaç de comprar sigui un botó.

Ja has creat el document de text style.css, l’has obert a l’editor i al <head> de l'HTML has ficat el link al stylesheet? Si és així, podem començar seleccionant el body, el contenidor més gran de tots, perquè tots els elements estan dins del body. Per seleccionar-lo escrivim:

body {
}

Entre les claus, canviem el color al que vulguis (jo escolliré un rosa pàlid). Pots escriure al cercador del navegador "color picker" per seleccionar un color i obtenir el codi hexadecimal. També afegirem la propietat color, que farà que les lletres canviin de color:

body {
    background-color: #0d0d0d;
    color: #ff008c;
}

Fixa’t a tancar la clau (}) i posar el punt i coma (;) després de cada valor. L’ordre a l’hora de programar la fulla d’estil és irrelevant, a no ser que hagis aplicat dos valors diferents a un mateix element; en aquest cas, tindrà més pes el valor que estigui més avall de la fulla.

Connectar la tipografia

Per canviar la tipografia, es pot fer amb una que tinguis guardada al teu ordinador. Has de crear una carpeta on tens l’HTML i el CSS i anomenar-la “fonts”. Allà hi fiques la "tipo"; és recomanable que sigui un arxiu .woff2 per temes d’optimització.

Et deixo una llista de llocs on trobar tipografies de codi obert:

Un cop tens descarregada la "tipo" i la tens ficada a la carpeta fonts, l'has de connectar al CSS. Recomano posar a dalt de tot el següent:

@font-face {
    font-family: 'EL-NOM-QUE-VULGUIS';
    src: url('fonts/LA-TEVA-TIPO.woff2') format('woff2');
}

I ara ja pots aplicar la "tipo" a un element, per exemple al h1. També pots canviar el pes de la font (font-weight) perquè sigui més fina (400) o més gruixuda (700 o 900).

Canvia la mida per fer-la gran amb font-size; com a valor pots utilitzar píxels (px), rem o vw. Sí, ho sé, és un embolic; podeu mirar què i per què utilitzar cada unitat aquí: W3Schools - Font Size.

El pacte amb el diable: les IA

Si valoreu el vostre temps i simplement no voleu estar estudiant hores per fer una simple pàgina web, es pot fer el "pacte amb el diable". Sí, a dia d’avui hi ha una eina que accelera per mil la programació web i l’aprenentatge. És una eina molt problemàtica pel seu ús de recursos energètics: parlo de les IA.

Jo he caigut en l'error d'utilitzar Gemini, la IA de Google. Però estic aprenent i he descobert que hi ha opcions més ètiques, començant per DeepSeek (l'opció xinesa) o la IA de DuckDuckGo, on pots triar els models Llama 3 o Mixtral. Després hi ha opcions una mica més complexes com Ollama + DeepSeek-Code o Qwen 2.5 Coder.

Si no entens com funciona una propietat, si no saps com fer un botó o com fer que el text del títol ocupi tota la pantalla, és l’opció més ràpida. També t’ajuda a resoldre errors de codi i, fins i tot, et pot fer la plantilla de la web si li expliques detall per detall com vols que sigui.

L’última capa de pintura

Per donar-li l'última capa de pintura i que la web quedi ben maca, has de fer el següent:

  • Títol adaptable: Per al títol principal (h1), utilitzes la unitat vw per fer que la mida de la lletra s'adapti a l'amplada de la pantalla i white-space: nowrap per evitar que salti de línia.
  • La graella de productes: L'estructura dels productes s'organitza amb una graella (display: grid) que crea columnes automàtiques segons l'espai disponible gràcies a repeat(auto-fit, minmax(250px, 1fr)).
  • Botons amb estil: Finalment, crees la classe .boto-compra per transformar els enllaços en botons visuals.
  • Disseny per a mòbils: Utilitzes una @media query al final de tot per ajustar la mida del títol específicament quan la web es visualitzi des de dispositius mòbils.

El codi queda així (HTML i CSS)

HTML:

<!DOCTYPE html>
<html lang="ca">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" type="text/css" href="style.css">
    <title>Calces usades</title>
</head>
<body>
    <header>
        <h1>Calces Usades</h1>
    </header>

    <main>
        <h2>LES CALCES MÉS PUDENTS</h2>

        <p class="descripcio">
            Calces usades per les noies més irreverents, desavergonyides i brutes.
            <br>
            Portades durant una setmana i sense dutxar-se.
            Preu <a href="https://media1.giphy.com/media/v1.Y2lkPTc5MGI3NjExcmMzc3c0ODFoa2didW1iMmthZTd5ZTI5dGUxZGtldXpjZTIxM2dmYyZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/KzGCAlMiK6hQQ/giphy.gif">no</a> negociable.
        </p>

        <div class="grid-container">
            <div>
                <img src="https://www.pascogifts.com/en/media/cache/resolve/square/files/751397-58d528ea072d2.jpg">
                <p>666€</p>
                <a href="" class="boto-compra">comprar</a>
                <br>
            </div>
            <div>
                <img src="https://www.pascogifts.com/en/media/cache/resolve/square/files/751397-58d528ea072d2.jpg">
                <p>666€</p>
                <a href="" class="boto-compra">comprar</a>
                <br>
            </div>
            <div>
                <img src="https://www.pascogifts.com/en/media/cache/resolve/square/files/751397-58d528ea072d2.jpg">
                <p>666€</p>
                <a href="" class="boto-compra">comprar</a>
            </div>
        </div>
    </main>
</body>
</html>

CSS (style.css):

/* --- 1. LES FONTS (L'estil de la lletra) --- */
@font-face {
    font-family: 'Interlope';
    src: url('Fonts/Interlope-Regular.woff2') format('woff2');
}

/* --- 2. CONFIGURACIÓ GENERAL DE LA WEB --- */
body {
    background: #0d0d0d;
    color: #ff008c;
    font-family: sans-serif;
    margin: 0;
}

/* --- 3. EL TÍTOL PRINCIPAL (Gegant i centrat) --- */
h1 {
    font-family: 'Interlope', sans-serif;
    font-size: 17vw;
    font-weight: normal;
    text-align: center;
    white-space: nowrap;
    margin-top: 40px;
}

/* --- 4. SUBTÍTOLS I DESCRIPCIONS --- */
h2, .descripcio {
    text-align: center;
    font-size: 1.5rem;
}

/* --- 5. LES GRELLES (Com organitzem els productes) --- */
.grid-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 30px;
    max-width: 1000px;
    margin: 50px auto;
    justify-items: center;
    text-align: center;
}

img {
    max-width: 100%;
    height: auto;
    margin-bottom: 15px;
}

/* --- 6. EL BOTÓ DE COMPRA --- */
.boto-compra {
    display: inline-block;
    background: #ff008c;
    color: #0d0d0d;
    padding: 10px 20px;
    text-decoration: none;
    font-weight: bold;
    border: 2px solid #ff008c;
    transition: 0.3s;
}

.boto-compra:hover {
    background: transparent;
    color: #ff008c;
}

/* --- 7. ADAPTACIÓ PER A MÒBILS --- */
@media (max-width: 600px) {
    h1 {
        font-size: 20vw;
    }
}

Les eines per a desenvolupadores

Un tip molt útil és saber fer anar les eines per a desenvolupadores. És la manera com pots veure el codi que hi ha darrere d’una pàgina web. Les tenen la majoria de navegadors. Parlant de navegadors, si en busqueu un d'antirrastreig i de programari lliure, jo recomano LibreWolf.

Per accedir a les eines per a desenvolupadores només cal fer clic dret —> Inspeccionar element, o prémer F12 a Windows o Cmd + Opt + I a Mac. Des d’aquesta pantalla podràs navegar pels diferents elements de l'HTML i, seleccionant l'element, et sortirà el CSS que l'afecta. També pots modificar en temps real el CSS afegint propietats o modificant valors per veure com hi afecten. Aquesta opció és molt interessant per a quan estàs programant la teva web i vols ajustar un valor o entendre per què no funciona alguna cosa. També serveix per a xafardejar el codi d’una altra web i, per què no, copiar-ne algun truc.

El cervell: el JavaScript

Si el CSS t’ha semblat complicat, agafa’t fort els pantalons. Jo, sincerament, no entenc gairebé res del JavaScript —de com programar-lo des de zero, vull dir—. Això sí, si em presentes un codi ja fet, puc endevinar què és cada cosa i modificar-ne alguna part per adaptar-la al que vull. No et preocupis: només cal entendre què és un bosc; no anirem al detall d'explicar cada espècie de flora i fauna que hi podem trobar.

El JavaScript és el cervell perquè és el que fa "viva" una pàgina web, la fa interactiva. Amb els dos llenguatges anteriors que hem vist, ens quedaria una simple revista (que, a vegades, ja és més que suficient, clar). Serveix per a coses com: Reaccionar a clics, càlculs matemàtics, validar formularis o efectes visuals.

Si tens el temps i les ganes d’aprendre aquest llenguatge de veritat, et deixo els següents recursos:

  • MDN Web Docs (Mozilla): És la "Bíblia" de la web. Està feta per la gent de Mozilla (els de Firefox). És una enciclopèdia gratuïta, oberta i traduïda a molts idiomes.
    Ideal per a: Consultar qualsevol dubte tècnic i seguir el seu curs de JS per a principiants.
  • Eloquent JavaScript: És un dels millors llibres del món per aprendre a programar des de zero, i l'autor el té totalment gratuït i obert a la web.
    Web: eloquentjavascript.net
    Estil: Molt pràctic i profund, ideal si vols entendre realment com pensa una programadora.
  • FreeCodeCamp: És una organització sense ànim de lucre que ofereix certificacions gratuïtes de codi obert.
    Ideal per a: Practicar directament al navegador amb exercicis curts. Tenen una comunitat gegant que t'ajuda si t'encalles.
  • The Odin Project: Si vols un camí clar de principi a fi (full stack), aquest projecte és 100% de codi obert i fet per la comunitat.
    Ideal per a: Gent que vol aprendre a programar com si anés a la universitat, però de forma lliure i col·laborativa.

Exercici calces part 3

Anem a aplicar un sistema nerviós a la nostra web de calces. Però us ensenyaré la manera ràpida de fer les coses. Primer, creem un nou document a la carpeta i l’anomenem main.js, igual que hem fet abans. Després, l’obrim a l’editor de text. Abans d'escriure res, hem d’enllaçar el JS al document index.html. Just abans de tancar l’etiqueta </body>, fica aquesta línia de codi:

<script src="main.js"></script>

Ja ho tens. Ara ve la màgia. Vols fer que a la pàgina es puguin vendre calces de veritat? Pots demanar-li a la teva IA: "Tinc aquesta pàgina web. Programa el JS perquè, quan li donis al botó comprar, surti un avís amb el meu Telegram i el meu PayPal, i un text que digui: 'Envia’m un missatge amb CALCES03, la teva informació d’enviament i ingressa’m 666€ al meu PayPal'".

En uns segons t'ho programa. I et fa una cosa així:

// 1. Seleccionem tots els botons que tenen la classe 'boto-compra'
const botonsCompra = document.querySelectorAll('.boto-compra');

// 2. Per a cada botó trobat, li afegim una "escolta" per al clic
botonsCompra.forEach(boto => {
    boto.addEventListener('click', function(event) {
        // Evitem que el botó intenti recarregar la pàgina
        event.preventDefault();
        
        // 3. Definim la informació que volem mostrar
        const telegram = "@LaTevaUsuariaTelegram";
        const paypal = "paypal.me/ElTeuUsuari";

        // 4. Mostrem l'avís (alert) amb les teves instruccions
        alert(
            "🛒 INSTRUCCIONS DE COMPRA:\n\n" +
            "1. Envia'm un missatge a Telegram (" + telegram + ") amb el codi: CALCES03.\n" +
            "2. Inclou la teva informació d'enviament completa.\n" +
            "3. Ingressa 666€ al meu PayPal: " + paypal + ".\n\n" +
            "Un cop rebut el pagament, prepararé el teu enviament!"
        );
    });
});

Efecte Matrix amb cors

O potser vols que la web tingui una animació tipus Matrix amb cors que van baixant per la pantalla? Fem-ho.

Afegeix això just després del tag <body> a l'HTML:

<canvas id="matrix"></canvas>

Afegeix això al CSS per posar-lo de fons:

#matrix {
    position: fixed; /* Es queda fixat encara que facis scroll */
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: -1; /* El posa darrere dels ossos i el maquillatge */
    background: #0d0d0d; /* El mateix fons que ja tenies */
}

I això ho has d'afegir al teu fitxer main.js:

const canvas = document.getElementById('matrix');
const ctx = canvas.getContext('2d');

// Fem que el canvas ocupi tota la finestra
function resize() {
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;
}
window.addEventListener('resize', resize);
resize();

const char = "<3"; // El caràcter que m'has demanat
const fontSize = 16;
const columns = canvas.width / fontSize; // Quantes columnes caben

// Creem un array per guardar la posició vertical (Y) de cada columna
const drops = [];
for (let i = 0; i < columns; i++) {
    drops[i] = 1; // Totes comencen a dalt de tot
}

function draw() {
    // EL TRUC DE LA CUA:
    // En lloc de netejar la pantalla, dibuixem un rectangle negre molt transparent.
    // Això fa que els cors antics es vagin fusionant amb el fons a poc a poc.
    ctx.fillStyle = "rgba(13, 13, 13, 0.1)"; // El teu color #0d0d0d amb transparència
    ctx.fillRect(0, 0, canvas.width, canvas.height);
    
    ctx.fillStyle = "#ff008c"; // El teu rosa fúcsia
    ctx.font = fontSize + "px monospace";

    // Dibuixem cada gota (cor)
    for (let i = 0; i < drops.length; i++) {
        // Dibuixem el text "<3" a la columna X i fila Y
        ctx.fillText(char, i * fontSize, drops[i] * fontSize);

        // Si el cor arriba al final o per atzar decidim reiniciar-lo a dalt
        if (drops[i] * fontSize > canvas.height && Math.random() > 0.975) {
            drops[i] = 0;
        }

        // Movem la gota cap avall
        drops[i]++;
    }
}

// Executem la funció "draw" cada 33 mil·lisegons (aprox 30 fotos per segon)
setInterval(draw, 33);

L’allotjament web o hosting

Val, ara ja tens una idea de com fer-te la teva pàgina web. Però de moment només la pots veure tu, perquè estàs carregant uns fitxers emmagatzemats al teu ordinador. Li hem de trobar una casa, un servidor, on allotjar-se. I suposo que no voldràs pagar ni un euro.

Hi ha opcions d’allotjament que et permeten pagar per un domini propi i tenir diversos GB d’emmagatzematge. Però l'opció gratuïta és neocities.org. No té anuncis, no ven les teves dades i fomenta la cultura del "fes-ho tu mateixa". El seu pla gratuït t’ofereix un GB, que és més que suficient, a menys que tinguis pensat penjar-hi moltes imatges d’alta qualitat o vídeos. El desavantatge és que el teu domini sempre tindrà .neocities.org després del teu nom.

Reconquerir l’internet

Ja tens tot el que et fa falta per construir el teu propi espai digital. El que et recomano és que segueixis aprenent a base de projectes. Què vols compartir amb el món? Hi ha un oceà de possibilitats que t’esperen.

Entre totes fem un internet interessant i personal: compartim idees, socialitzem coneixements i fem realitat idees boges. Connectem les pàgines entre elles i construïm comunitat. Si fas una pàgina després de llegir aquest document, no dubtis a escriure’m per enllaçar els nostres portals! I, si no t’importa, fes-me saber si t’ha estat útil aquesta guia i com es pot millorar.

Buf... muntem una pàgina de venda de calces real? Tinc diverses amigues (jo inclosa) a qui no ens aniria gens malament. Bé, ja veurem què ens depara la vida. Un petonàs. Déu meu, tens una capacitat d’atenció heavy per haver arribat fins aquí baix. T’estimo!