mirror of https://gitlab.com/octtspacc/sitoctt
256 lines
15 KiB
Plaintext
256 lines
15 KiB
Plaintext
// % Title: 🏠 ~Home~
|
|
// % HTMLTitle: <span class="twa twa-house"><span>🏠</span></span> ~Home~
|
|
// % Index: True
|
|
// % Order: 10
|
|
// % Image: [staticoso:Folder:*:AbsoluteRoot]/sitoctt-assets/RichPreview/index.png
|
|
|
|
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
|
|
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') #[span ✨]
|
|
strong(class='MainIdTextGradientL') sitoctt
|
|
strong(class='twa twa-sparkles') #[span ✨]
|
|
| . 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') #[span ✨]
|
|
strong(class='MainIdTextGradientR') sitoctt
|
|
strong(class='twa twa-sparkles') #[span ✨]
|
|
| .
|
|
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 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. 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 sono continui e avvengono senza preavviso, quindi dovresti rivisitare questo sito almeno qualche volta a settimana se ti interessano le novità sempre fresche.
|
|
br
|
|
| Ah, non so se hai notato, ma (da Web) negli angoli in alto dello schermo ci sono dei tastini. Lo sto scrivendo perché ho paura non si capisca, che devo fare... Vabbe, se premi lì puoi accedere ai menu ad albero, rispettivamente delle pagine del sito a sinistra (<big class='twa twa-books'><span>📚</span></big>),
|
|
| e delle sezioni della pagina a destra (<big class='twa twa-bookmark-tabs'><span>📑</span></big>).
|
|
| Quello di sinistra soprattutto è importante per navigare il sito.
|
|
|
|
p
|
|
| A tal proposito, per la migliore esperienza #[span(style='Color:#d00000;') DEVI] usare un browser con supporto almeno a CSS3 e alle immagini in formato AVIF. Se usi un browser antico ti garantisco che troverai troppa roba rotta (ma comunque il sito sarà 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 non usare Chromium, che ha degli strani memory leak su pagine con animazioni complesse, oltre ad andare a scatti. 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..
|
|
|
|
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 Lista di script client-side usati nel sito Web (Espandi)
|
|
div
|
|
ul
|
|
li Script interni scritti da me: per gestire la notifica sulla privacy
|
|
li 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])
|
|
li Sistema di distribuzione P2P dei file del sito a carico dei visitatori: #[a(href='https://github.com/xuset/planktos' target='_blank' rel='noopener') Planktos di xuset] (#[i Attivo per la fase di test])
|
|
|
|
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.
|
|
|
|
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 blogocto, 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 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='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') 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, controllate lì per questo genere di crediti. Per cose come immagini o testi, invece, eventuali crediti sono parte visibile della pagina, vicini all'oggetto preso in prestito.
|
|
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), 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] del sito Web
|
|
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.
|
|
|
|
<p class="Center">
|
|
<a href="https://fediring.net/previous?host=sitoctt.octt.eu.org">←</a>
|
|
<span> </span>
|
|
<a href="https://fediring.net/">Fediring</a>
|
|
<span> </span>
|
|
<a href="https://fediring.net/random">[🎲]</a>
|
|
<span> </span>
|
|
<a href="https://fediring.net/next?host=sitoctt.octt.eu.org">→</a>
|
|
</p>
|
|
|
|
<p class="Center">
|
|
<a href="https://webring.yesterweb.org/noJS/index.php?d=prev&url=https://sitoctt.octt.eu.org/">←</a>
|
|
<span> </span>
|
|
<a href="https://yesterweb.org/webring/">Yesterweb</a>
|
|
<span> </span>
|
|
<a href="https://webring.yesterweb.org/noJS/index.php?d=rand&url=https://sitoctt.octt.eu.org/">[🎲]</a>
|
|
<span> </span>
|
|
<a href="https://webring.yesterweb.org/noJS/index.php?d=next&url=https://sitoctt.octt.eu.org/">→</a>
|
|
</p>
|