mirror of https://gitlab.com/octtspacc/sitoctt
272 lines
18 KiB
Plaintext
272 lines
18 KiB
Plaintext
// % Title = 🏠 ~Home~
|
|
// % HTMLTitle = <span class="twa twa-house twa-🏠">🏠</span> ~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 = 2022-10-27
|
|
|
|
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..
|
|
|
|
<span>
|
|
<h3 class="Inline NoWrap"><a href="./Categories/Blog.html"><span class="twa twa-notebook twa-📓️"><span>📓️</span></span> Blog</a></h3>,
|
|
<h3 class="Inline NoWrap"><a href="./Categories/MicroBlog.html"><span class="twa twa-ledger twa-📒"><span>📒</span></span> MicroBlog</a></h3> o
|
|
<h3 class="Inline NoWrap"><a href="./PicoBlog.html"><span class="twa twa-envelope twa-✉️"><span>✉️</span></span> PicoBlog</a></h3>.
|
|
</span>
|
|
|
|
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 (<big class='twa twa-books twa-📚'>📚</big>) 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 (<big class='twa twa-bookmark-tabs twa-📑'>📑</big>) 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 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') <span class="twa twa-page-facing-up"><span>📄</span></span> 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: #[i Al momento, nessuno attivo!]
|
|
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, lo sarà a breve])
|
|
|
|
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 • Browser Web, con supporto completo a CSS3
|
|
dd (Perfetto!)
|
|
dt • Stampa su carta olografica, GIF e CSS3 completamente renderizzati nel possibile
|
|
dd (Richiede muovere il foglio a mano ma ottimo!)
|
|
dt • Browser Web, con supporto incompleto a CSS3
|
|
dd (Meh, OK..)
|
|
dt • Stampa su carta normale, animazioni CSS3 e GIF non renderizzate
|
|
dd (Buuu, mancano le animazioni..)
|
|
dt • 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 clearweb, sui server di #[span(style='Color:#fc6d26;') GitLab]: #[a(href='https://sitoctt.octt.eu.org') sitoctt.octt.eu.org].
|
|
li Sull'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, una console Nintendo Switch con Ubuntu).
|
|
|
|
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 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]!
|
|
|
|
h2 Sorgenti e licenze
|
|
|
|
h3 Licenze dei contenuti
|
|
|
|
<p>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 <a href="https://creativecommons.org/licenses/by-sa/4.0/deed.it" target="_blank" rel="noopener">"Creative Commons Attribuzione - Condividi allo stesso modo 4.0 Internazionale" (CC BY-SA 4.0) (<span class="CCIcons"><img src="[staticoso:Folder:Assets:AbsoluteRoot]/Media/Icons/CC/CC.svg"> <img src="[staticoso:Folder:Assets:AbsoluteRoot]/Media/Icons/CC/BY.svg"> <img src="[staticoso:Folder:Assets:AbsoluteRoot]/Media/Icons/CC/SA.svg"</span>)</a>, una licenza libera che promuove la condivisione, e non intacca i legittimi diritti alla cultura e la collaborazione dell'umanità in generale.</p>
|
|
|
|
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 .]]
|
|
|
|
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].
|
|
|
|
h3 Crediti speciali
|
|
|
|
details
|
|
summary 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://github.com/SebastianAigner/twemoji-amazing' target='_blank' rel='noopener') Twemoji-Amazing di SebastianAigner]
|
|
li Alcuni bottoni 88x31: #[a(href='https://cyber.dabamos.de/88x31' target='_blank' rel='noopener') 88x31 GIF Collection di cyber.dabamos.de]
|
|
|
|
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].
|
|
|
|
<p class="Center">
|
|
<a href="https://fediring.net/previous?host=sitoctt.octt.eu.org"><big>←</big></a>
|
|
<span> </span>
|
|
<a href="https://fediring.net/"><img title="Fediverse Logo Proposal, Eukombos, CC0, Wikimedia Commons" src="[staticoso:Folder:Assets:AbsoluteRoot]/Media/Icons/Fediverse.svg"> Fediring</a>
|
|
<span> </span>
|
|
<a href="https://fediring.net/random">[<span class="twa twa-🎲">🎲</span>]</a>
|
|
<span> </span>
|
|
<a href="https://fediring.net/next?host=sitoctt.octt.eu.org"><big>→</big></a>
|
|
</p>
|