// % Title = 🏠 ~Home~ // % HTMLTitle = 🏠 ~Home~ // % Template = WM.html // % Style = @import "[staticoso:Site:RelativeRoot]Assets/Pages/index.css"; // % Index = True // % Order = 10 // % Image = [staticoso:Folder:Assets:AbsoluteRoot]/RichPreview/index.png // % UpdatedOn = 2023-02-17 h1 Ciao!! (UwU) p | Sei entrat span(class='BlinkA') a span(class='NoDisplay') / span(class='BlinkO') o | nel... // Credits: https://codepen.io/jh3y/pen/WNrXqYz div(style='Position:Relative;') br h1(class='NoTitle WavyText' style='--x: 6; --y: -6;') for letter, index in '✨sitoctt✨'.split('') span(style=`--index: ${index}; --alpha-l: 0.125; --alpha-u: 0.25;`)= letter h1(class='NoTitle WavyText' style='--x: 3; --y: -3;') for letter, index in '✨sitoctt✨'.split('') span(style=`--index: ${index}; --alpha-l: 0.25; --alpha-u: 0.5;`)= letter h1(class='NoTitle WavyText') for letter, index in '✨sitoctt✨'.split('') span(style=`--index: ${index}; --alpha-l: 0.5; --alpha-u: 1;`)= letter br p | Esatto, il strong(class='twa twa-sparkles twa-✨') ✨ strong(class='MainIdTextGradientL') sitoctt strong(class='twa twa-sparkles twa-✨') ✨ | . Letteralmente il mio sito, perchè io sono octt e quindi #[i(style='Color:#8040d0;') sito] + #[i(style='Color:#d000d0;') octt] = strong(class='twa twa-sparkles twa-✨') ✨ strong(class='MainIdTextGradientR') sitoctt strong(class='twa twa-sparkles twa-✨') ✨ | (#[i #[a(href='[staticoso:Folder:Assets:AbsoluteRoot]/Media/sitoctt-pronuncia.flac' target='_blank' rel='noopener') pronuncia: "sitòctt"]]). br | Se preferisci, puoi chiamarlo #[i(class='MainIdTextGradientL') sitocto]. O anche #[i(class='MainIdTextGradientR') postoctt]! È pur sempre un posto questo - il mio posto - anche se virtuale! h2 Collegamenti rapidi p Sul sito, ormai, un po' di roba c'è. Dovresti navigare il menu principale per poter accedere a tutto (leggi il seguito) ma, se proprio non sai da dove partire, allora perché non dare un'occhiata ai miei post più recenti, dalla finestrella in alto a sinistra? Altrimenti, magari vai a qualcosa tra..

✉️ PicoBlog

,

📓️ Blog

, o

📒 MicroBlog

. h2 Stato del sito e come navigare p | Nonostante abbia già un po' più di sostanza, tutto questo ambaradan è ancora pesantemente in costruzione. E lo sarà per sempre, perché avrò sempre roba nuova da condividere. #[del E, quando sarò morta, sarà comunque non finito perché nella mia vita non avrò scritto tutto lo scibile universale teoricamente possibile sul sitoctt.] br | Gli aggiornamenti al sito sono di diverso tipo: la pubblicazione di nuovi articoli di blog succede, boh, 3 volte al mese, è una buona idea usare i #[a(href='#-Feed-e-notifiche') feed] che metto a disposizione; le modifiche per pagine normali sono continue e avvengono a caso, quindi dovresti controllare magari ogni settimana quelle che ti interessano, se ti aspetti novità. p | #[b Da tenere a mente] (da Web): quando ci sono per lo schermo i seguenti tastini, è perché possono nascondere menu collassabili. | Possono stare in posizioni diverse su pagine diverse, perché mi piace sperimentare con diversi temi; però cerco di mantenere il loro significato coerente ovunque. br | Un'icona con l'emoji di una pila di libri (📚) segnala il menu principale del sito, fondamentale per poterlo navigare saltando tra pagine completamente diverse e non collegate. | Invece, l'icona con l'emoji di un foglio con un segnalibro (📑) indica l'elenco delle sezioni della pagina corrente - non è essenziale, ma può tornare utile per saltare tra parti diverse di un lungo testo. details summary: h4 Note sulla compatibilità dei browser (Espandi) div: p | Per la migliore esperienza #[span(style='Color:#d00000;') DEVI] usare un browser con supporto almeno a CSS3 e alle immagini in formato AVIF (quest'ultima cosina, almeno finché non riesco a far funzionare il polyfill). | Se usi un browser antico ti garantisco che troverai tanta, tanta roba rotta (ma comunque il sito dovrebbe essere navigabile lo stesso). br | Essendo che questo sito, per l'appunto, contiene immagini AVIF, assicurati che il tuo browser sia aggiornato e decente. Safari di Apple, per esempio, mi dicono che non supporta AVIF, quindi #[span(style='Color:#d00000;') buttalo via]. br | Preferibilmente #[i non] usare Chromium, che ha degli strani memory leak su pagine con animazioni complesse, e ha qualche #[i glitch particolare]. #[b Firefox] non ha questo problema, ma usa molto di più la CPU. br | Direi che la scelta non è tra il migliore ma tra il meno peggio.. br i Nota: se scegli Firefox, non usare la versione ESR! È per sua natura vecchia, fossilizzata, e manca sempre di funzionalità moderne - per esempio, al giorno d'oggi ancora non supporta AVIF. h3 Script client-side p | Il sito Web non usa alcuno script client-side per le funzioni di base, perché non voglio costringere chi (per validi motivi di sicurezza e non solo) non vuole attivare JavaScript ad avere un'esperienza degradata. A proposito della questione spinosa, ho scritto anche un articolo: #[a(href='Posts/2022-06-14-0000-I-Documenti-Non-Devono-Diventare-Applicazioni.html') 📄 I documenti non devono diventare applicazioni]. br | Ad ogni modo, però.. per fornire alcune funzionalità extra, devo per forza avere del JS, c'è poco da fare. Qui sotto, la lista di cosa uso. #[i Tutti i file sono caricati dai server del mio sito, quindi è difficile che enti malevoli possano nasconderci malware dentro]. details summary: h4 Lista di script client-side usati nel sito Web (Espandi) div: ul li Script interni, scritti da me: Auto-espansione dei menu sulle pagine con tema sitoctt in modalità desktop (sto cercando di sistemarlo..), Visualizzazione a schermo intero degli sfondi delle pagine. li #[del Polyfill per supportare le immagini AVIF su vecchi browser: #[a(href='https://github.com/Kagami/avif.js' target='_blank' rel='noopener') avif.js di Kagami]] (#[i Non ancora attivato... #[del lo sarà a breve] #[small quando cavolo lo farò? Sono mesi che rimando, il problema è che non è una soluzione plug-and-play, devo prima capirla e poi creare uno script di wrapping 😭]]) p Di seguito, metto la mia classifica dei possibili modi per visualizzare questo sito, dal migliore al peggiore. Per standardizzazione, tutti presuppongono supporto completo ai colori (nel possibile). details summary: h4 Mie inutili digressioni su modi assolutamente assurdi di consultare il sitoctt (Espandi) div: dl dt: b • Browser Web, con supporto completo a CSS3 dd (Perfetto!) dt: b • Stampa su carta olografica, GIF e CSS3 completamente renderizzati nel possibile dd (Richiede muovere il foglio a mano ma ottimo!) dt: b • Browser Web, con supporto incompleto a CSS3 dd (Meh, OK..) dt: b • Stampa su carta normale, animazioni CSS3 e GIF non renderizzate dd (Buuu, mancano le animazioni..) dt: b • Browser vecchio (Web vecchio, Web testuale, o Gemini) / Stampa su carta normale, zero supporto CSS dd (Ma che è sto schifo?!?!) h2 Ma di che si tratta? p Su questo mio spazio di Internet metterò di tutto. Spero. p Per ora, sicuramente metto paginine superficiali su argomenti specifici, ma anche articoli di blog lunghi e discorsivi. Voglio, inoltre, mettere anche tante raccolte sulle cose che mi piacciono, in forma sia testuale che di media. Una specie di galleria sulle cose che per me valgono. p | Oltre che degli effettivi contenuti, però, voglio che il sito (la versione Web, ovviamente) sia galleria di sé stesso. Voglio creare qualcosa che abbia un suo carattere unico, come i siti Web amatoriali degli anni 1995-2005, dove ogni luogo di Internet aveva sempre un'atmosfera diversa da tutto ciò visitato un attimo prima. br span(style='Color:#404040;') L'ascesa dei social come li abbiamo oggi ha purtroppo rovinato il web sotto questo punto di vista, portando alla standardizzazione completa e alla morte della creatività espressa con la forma. br | Voglio che questo mio spazio web sia diverso da tutti gli altri, caratterizzati da testo monocromatico e temi riciclati, perché è un peccato avere strumenti potentissimi e non sfruttarli davvero. p | Per questo, cercherò di inventarmi di continuo modi di abbellire le pagina con il CSS, non solo con layouting o effetti del testo fissi, ma soprattutto con le animazioni. br | Al resto della forma, come l'ordine ad albero delle pagine nel sito o dei paragrafi nelle pagine, non penserò molto, altrimenti mi distraggo dal creare contenuti e la voglia mi passa. p Ricapitolando, le mie intenzioni attuali sono queste, poi non lo so cosa ci finirà qui sopra col tempo per davvero.. considerando anche che questa pagina può subire, ha subito, e subirà, lente modifiche. h2 Disponibilità del sito p | Al momento, questo sito è disponibile per la navigazione su vari indirizzi diversi (i contenuti sono sempre identici). br | Per chi non sapesse, comunque, il nome è da un mesetto cambiato in sitoctt da postoctt, perché il vecchio nome mi dava l'impressione di qualche servizio postale... br | Dovrei pensare anche a molti altri mirror in cloud da diversi provider (ovviamente gratuiti), se voglio che il sitocto sopravviva ad octt stessa me medesima e superi la prova del tempo... Ma questa è una questione lunga. h3 Web p Il sito Web è disponibile da diverse fonti. ul li Sul #[b clearweb] HTTPS, sui server di #[span(style='Color:#fc6d26;') GitLab]: #[a(href='https://sitoctt.octt.eu.org') sitoctt.octt.eu.org]. li Sull'#[b Onion Web] (#[span(style='Color:#59316b;') Tor]), sui server di Replit: #[a(href='http://sitoctt2fxjvx3lc2iqqef2aeulflprjaasv2xl4zi7sxxbmvjy5b5yd.onion') sitoctt2fxjvx3lc2iqqef2aeulflprjaasv2xl4zi7sxxbmvjy5b5yd.onion]. Alla fine non è più ospitato in casa mia, ma forse è meglio così, è un carico in meno per il povero serverino di fortuna che ho (al momento, #[del una console Nintendo Switch con Ubuntu] il Raspberry Pi 3). details summary: h4 💾 Opzioni di compatibilità per sistemi obsoleti o esotici (Espandi) div: dl dt: b • Versione HTTP di base dd | Il sito include funzioni CSS complesse e relativamente moderne, per poter fornire effetti grafici (e funzionali) epici. Ironia della sorte, per quanto visualizzando le pagine su browser veramente vecchi, che mancano di supporto CSS totale o quasi, il tutto si vede brutto ma è leggibile.. su browser che sono #[i sia troppo vecchi e sia troppo nuovi] si presentano bug parecchio gravi, che rendono impossibile usare alcuni menù o addirittura leggere il testo! br | Oltre al fatto che (nel possibile) voglio supportare sistemi vecchi, 'ste maledette rogne si presentano anche su dispositivi meno popolari ma attuali, tipo il Kindle! Insomma, per i troppi browser che non includono un'impostazione per disattivare completamente il CSS, era d'obbligo fare quello che ho fatto: al percorso #[a(href="./Plain") /Plain] sui miei domini del clearweb c'è una root parallela, e pagine con uguale contenuto ma CSS ridotto all'osso. dt: b • HTTP non cifrato dd Per evitare problemi ci ho dedicato un sottodominio dedicato, tenendo HTTPS forzato sul principale; ma, visto che non mi richiede manutenzione, ho fatto si che dal dominio di quinto (!) livello "#[span(style="Font-Style: Monospace;") http]" si acceda al sito tramite HTTP non cifrato (ospitato da GitHub, stavolta): in poche parole, l'indirizzo è #[code(style="Text-Decoration:Underline;") http://http.sitoctt.octt.eu.org]. I contenuti sono identici, ovviamente, ma finalmente si può navigare il sitoctt su roba come #[i Internet Explorer 4] direttamente contattando il server. h3 Gemini p | Da ora, inoltre, il sitoctt è disponibile come capsula Gemini. Per andarci, si deve usare un browser Gemini. br | Ovviamente (per chi conosce Gemini), è tutto più castrato, e la forma non è esattamente la migliore perché tutte le pagine sono una diretta conversione dall'HTML del sito Web (e il programma su cui mi appoggio per farla è un po' rotto, per giunta). br | Vai alla octocapsula, gentilmente ospitata da koyu.space: #[a(href='gemini://koyu.space/octt') gemini://koyu.space/octt] h3 Feed e notifiche p Da ora il sitocto (il blogoctt e il MicroBlog, nello specifico) ha dei feed integrati, che vengono automaticamente aggiornati quando pubblico un nuovo articolo! p b(style='color:#ff6a00;') Feed Atom | (moderno, #[b consigliato], contiene post completi): b #[a(href='./feed/atom.xml') feed/atom.xml] br | Feed RSS (obsoleto, disponibile per compatibilità): a(href='./feed/rss.xml') feed/rss.xml p | Ti serve un aggregatore di feed compatibile per usarli. br | - Su PC desktop consiglio a(style='Color:#0080FF;' href='https://thunderbird.net' target='_blank' rel='noopener') Thunderbird | o a(style='Color:#003399;' href='https://www.seamonkey-project.org' target='_blank' rel='noopener') SeaMonkey Mail | . br | - Su Android consiglio a(href='https://f-droid.org/packages/com.nononsenseapps.feeder' target='_blank' rel='noopener') Feeder | o a(href='https://f-droid.org/packages/com.poloure.simplerss' target='_blank' rel='noopener') Simple Rss | . br | - Se vuoi usare un dispositivo come un lettore di e-book e-ink, l'unico software universale che - tra le altre cose - include un aggregatore di feed, che conosco e posso consigliare, è a(href='https://github.com/koreader/koreader' target='_blank' rel='noopener') KOReader | . br | - Suggerimento: se usi Friendica, puoi copiare il link al feed e incollarlo nella barra di ricerca, per poterlo seguire come se fosse un profilo! p #[del Inoltre, se usi una qualunque piattaforma del #[b Fediverso ActivityPub] (Mastodon, Pleroma, Misskey, ...) puoi seguire il bot del sitoctt, così da ricevere nel tuo feed Home i nuovi post: #[a(href='https://botsin.space/@sitoctt' target='_blank' rel='me noopener') @sitoctt@botsin.space]!] Per alcune complicazioni iniziate a fine agosto 2022, il bot non è accessibile dalla più grande istanza Mastodon italiana, #[i mastodon.uno], quindi è quasi praticamente inutile ora. Non lo tolgo di mezzo solo perché mi costerebbe di più fare ciò che lasciarlo dov'è #[b :P]; comunque ne dovrei creare uno nuovo, prima o poi. h2 Sorgenti e licenze h3 Licenze dei contenuti

Tutto il contenuto presente su questo sito che ho creato io (i miei testi, media originali, e maggior parte del codice sorgente) è rilasciato sotto licenza "Creative Commons Attribuzione - Condividi allo stesso modo 4.0 Internazionale" (CC BY-SA 4.0) ( ), una licenza libera che promuove la condivisione, e non intacca i legittimi diritti alla cultura e la collaborazione dell'umanità in generale.

p | Sono presenti, però, anche contenuti non miei. br | In ogni caso, se qualcosa viene dalla mia mano, non avrà nessuna indicazione di crediti vicino. br | Per la roba presa in prestito, invece, verrà sempre indicata la fonte da cui ho prelevato e la licenza, che sia questa di dominio pubblico, Creative Commons, o non specificata. br | Occhio, che i crediti per le cosine HTML e CSS spesso li lascio soltanto nei sorgenti della pagina.. Quindi, in caso, controlla lì per questo genere di crediti. Per cose come immagini o testi, invece, spesso eventuali crediti sono parte visibile della pagina, vicini all'oggetto preso in prestito (come una descrizione); altre volte, lo stesso oggetto è un link che, se cliccato, riporta alla fonte. br | Comunque, ho pensato di creare una sezione della pagina #[a(href='#-Crediti-speciali') qui sotto], dedicata a crediti speciali (che compilo quando mi ricordo). h3 Codice sorgente p | Parlando dei sorgenti del sito, quelli HTML dell'effettiva pagina caricata dal browser potrebbero essere difficili da leggere. Questo è perché in realtà non scrivo direttamente l'HTML completo per comporre le pagine. br | Non solo sarebbe un casino replicare le mie varie barre e sezioni di navigazione su tutte le pagine, e se devo fare modifiche a queste poi è un inferno replicare la cosa ovunque, ma la sintassi HTML è sporca e faticosa da scrivere. p | Proprio per questi motivi, ho creato un mio generatore di siti statici (anche quello, come questo sito stesso, incompleto ma aggiornato di tanto in tanto quando mi serve), che preprocessa il mio codice sorgente per includere le mie barre in tutte le pagine, generare le sezioni della pagina (che appaiono nel menu a destra), generare la lista di pagine del sito (del menu a sinistra), e #[i altre cosette]. Passaggio importante, eventuali file Markdown o Pug vengono tradotti in HTML per essere comprensibili da normali browser, ed ecco qua. br | Ah, si, sto dicendo "#[i altre cosette]" perché si tratta di roba che al momento della scrittura di questo capitolo della pagina è assente o incompleta, e scrivendo come scrivo mi paro le chiappette e non devo fare future modifiche. #[pre(class='Inline') #[i H e h .]] h4 Prendi tutto! p | Per terminare, trovate tutti i miei sorgenti sulle rispettive repo Git. br | Quelli del mio sito (divisi in repo multiple per tenere la cronologia pulita), alle condizioni descritte sopra: a(href='https://gitlab.com/octtspacc/sitoctt' target='_blank' rel='noopener') gitlab.com/octtspacc/sitoctt | ; a(href='https://gitlab.com/octtspacc/sitoctt-assets' target='_blank' rel='noopener') sitoctt-assets | . br | Quelli del mio generatore, anche questo rilasciato sotto una licenza libera, la AGPL: #[a(href='https://gitlab.com/octtspacc/staticoso' target='_blank' rel='noopener') gitlab.com/octtspacc/staticoso]. p Altra cosa: in caso possa interessare, per conservare e/o condividere in modo immediato (esclusi i file che sono sulle repo a parte, perché linkati in modo assoluto) copie offline del sito, si può scaricare uno zip contenente tutte le pagine compilate qui! h3 Crediti speciali details summary: h4 Lista di crediti e ringraziamenti speciali a chi ho preso materiale in prestito (Espandi) div: ul li Lista di #[a(href='#-Script-client-side') script client-side], tra cui alcuni di terzi li Titolo animato ad onda: #[a(href='https://codepen.io/jh3y/pen/WNrXqYz' target='_blank' rel='noopener') Waaaves di jh3y] li Famiglia caratteri: #[a(href='https://fonts.google.com/specimen/Space+Mono' target='_blank' rel='noopener') Space Mono di Colophon Foundry] li Pacchetto emoji CSS: #[a(href='https://twemoji.twitter.com' target='_blank' rel='noopener') Twemoji di Twitter], via #[a(href='https://gitlab.com/octtspacc/twemoji-astonishing' target='_blank' rel='noopener') Twemoji Astonishing] li Alcuni bottoni 88x31 non identitari: #[a(href='https://cyber.dabamos.de/88x31' target='_blank' rel='noopener') 88x31 GIF Collection di cyber.dabamos.de] h2 Riservatezza e trasparenza p In quanto mio interesse legittimo, in questo sito web utilizzo un servizio di analitica; sia per poter migliorare ciò che faccio, che per soddisfare la mia pura curiosità di scoprire dati. p Il servizio di analitica è basato su software completamente #[a(href='https://github.com/arp242/goatcounter/blob/master/LICENSE' target='_blank' rel='noopener') libero ed open-source], ospitato gratuitamente per siti a basso traffico da #[b GoatCounter.com]. p A quanto pare, con GoatCounter non serve includere un avviso a schermo che disturba gli utenti per essere in regola con il GDPR (si veda goatcounter.com/help/gdpr), ma, per onestà e trasparenza, sto scrivendo comunque questo paragrafo. p Solo i dati non-personali vengono raccolti, in forma anonima, per i soli fini di statistica generale, e non di tracciamento individuale. Il servizio non utilizza cookies, e i dati non vengono ceduti a terze parti. Per ulteriori informazioni, non posso fare altro che consigliare di leggere la Privacy policy di GoatCounter. br hr div#RingsDiv span.Center h2 Rings p | Se dei link tra questi sotto non funzionano, vuol dire che chi amministra i ring non ha ancora accettato il mio sito negli stessi. br | L'attesa sta uccidendo più me che te, fidati. br | #[i O, magari, si tratta di un problema temporaneo].

← Fediring [🎲] →

br hr small(style="Float:Right; Opacity:0.7;"): i ❤️ Copying is an act of love. Please copy and share.