sitoctt/Pages/index.pug

// Title: 🏠 ~Home~
// HTMLTitle: <span class="twa twa-house"><span>🏠</span></span> ~Home~
// Order: 10
// Image: [HTML: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!

p
	| Come puoi vedere dalla vuotezza generale del sito, tutto questo ambaradan è ancora pesantemente in costruzione.
	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 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. Chissà se usando un browser antico si rompe roba in giro, eh...
	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. Ephiphany usa anche meno RAM di Firefox, ma al costo del doppio della CPU..
	br
	| Direi che la scelta non è tra il migliore ma tra il meno peggio..

p Codici JavaScript, al momento in cui sto scrivendo questa pagina, non ne uso neanche uno, 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-I-Documenti-Non-Devono-Diventare-Applicazioni.html') <span class="twa twa-page-facing-up"><span>📄</span></span> I documenti non devono diventare applicazioni].

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, 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, 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 / Stampa su carta normale, zero supporto CSS 
	dd (Ma che è sto schifo?!?!)

h2 Ma di che si tratta?

p Su questo spazio web metterò di tutto. Spero.

p Per ora, sicuramente metto articoli che per un blog normale (come quello che al momento ho su noblogo) sono troppo corti o poco caratterizzati, ma voglio 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 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..

h2 Disponibilità del sito

p Al momento, questo sito è disponibile per la navigazione a 2 indirizzi diversi (i contenuti sono identici).

ul
	li Sul Web, sui server di #[span(style='Color:#fc6d26;') GitLab]: #[small #[del #[a(href='https://octtspacc.gitlab.io/sitoctt') octtspacc.gitlab.io/sitoctt]]] #[a(style='Color:#5555ff;' href='https://sitoctt.octt.eu.org') sitoctt.octt.eu.org] #[i(style='Color:#9090ff;') (Nuovo dominio!)].
	li Sulla rete #[span(style='Color:#59316b;') Tor], sui server di Replit: #[small #[del #[a(href='http://onmfrk2acl4xdeawfjg3nfepq7gcufolctmhiwwxpcknazus5bxzxhqd.onion') onmfrk2acl4xdeawfjg3nfepq7gcufolctmhiwwxpcknazus5bxzxhqd.onion]]] #[a(style='Color:#a060c0;' href='http://sitoctt2fxjvx3lc2iqqef2aeulflprjaasv2xl4zi7sxxbmvjy5b5yd.onion') sitoctt2fxjvx3lc2iqqef2aeulflprjaasv2xl4zi7sxxbmvjy5b5yd.onion] #[i(style='Color:#9090ff;') (Nuovo dominio!)]. 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).. speriamo solo non vada offline, è un problema con Replit non immediato da arginare.

p
	| Tralaltro, il nome è di recente cambiato in sitoctt da postoctt, perché il vecchio nome mi dava l'impressione di qualche servizio postale...
	br
	| Dovrei pensare anche a qualche altro 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 per ora il sito è vuoto, dovrei un po' riempirlo prima di pensare a sta roba.

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
	| Consiglio: se usi Friendica, puoi copiare il link al feed e incollarlo nella barra di ricerca, per poterlo seguire come se fosse un profilo!

p
	| In alternativa, se usi una qualunque piattaforma del Fediverso ActivityPub (Mastodon, Pleroma, Misskey, ...), puoi semplicemente seguire il mio profilo Friendica. Pubblico anche altre cose ogni tanto, ma ho soprattutto la pubblicazione automatica dei link ai miei articoli, quando ne creo di nuovi.
	br
	| Vai a 
	a(href='./Chi-Sono.html#-I-miei-contatti') Chi-Sono#-I-miei-contatti
	|  per scoprire di più.

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 Espandi la lista di crediti e ringraziamenti speciali a chi ho preso materiale in prestito
	div
		p Titolo animato ad onda: #[a(href='https://codepen.io/jh3y/pen/WNrXqYz' target='_blank' rel='noopener') Waaaves di jh3y]
		p Famiglia caratteri: #[a(href='https://fonts.google.com/specimen/Space+Mono' target='_blank' rel='noopener') Space Mono di Colophon Foundry]
		p Pacchetto emoji: #[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]
		p Alcuni bottoni 88x31: #[a(href='https://cyber.dabamos.de/88x31' target='_blank' rel='noopener') 88x31 GIF Collection di cyber.dabamos.de]