Come pubblicare in modo veloce usando il css (e molto altro)

Versione Completa   Stampa   Cerca   Utenti   Iscriviti     Condividi : FacebookTwitter
EFP » EFP » Altro » Altro
thors
00venerdì 25 dicembre 2020 16:33
Almeno due persone diverse hanno espresso il loro apprezzamento per come impagino le storie: tanto basta per farmi montare la testa e desiderare di rendere edotto il mondo che mi circonda.

Scherzi a parte, noto spesso errori grammaticali che si potrebbero facilmente evitare usando un programma di scrittura come Word (Office) o Writer (Libre Office), e questo mi porta a chiedermi quali strumenti siano stati usati per scrivere la storia.

So poi che alcuni passano molto tempo a trasformare il proprio testo in codice html, quando un testo semplice senza immagini o elementi grafici particolari può essere pubblicato in pochi e veloci passaggi.

Il succo di quel che voglio proporvi è questo:
  • scrivere la storia con un programma di scrittura tipo Word o Writer;
  • generare l'HTML utilizzando l'editor offerto da EFP;
  • sistemare le parti "centrate" e poche altre cose;
  • copiare l'HTML sulla pagina della vostra nuova storia;
  • aggiungere le regole css (che una volta personalizzate a vostro piacere saranno sempre le stesse).


Questo articolo continua nei messaggi successivi, e qui vi propongo una tavola dei contenuti, così che possiate cercare e trovare direttamente quel che vi interessa:
  • Passo 1 - Scrivere il capitolo
  • Passo 2 - Convertire il testo in HTML
  • Passo 3 - Riformattare tutto con il css
  • Altri font (lista di font forniti dall'editor EFP)
  • Campagna di sensibilizzazione a favore dei lettori
  • Evitare il rientro della prima linea
  • Elemento di divisione (con caratteri allineati al centro)
  • Aggiungere una riga vuota
  • Note a fondo pagina
  • Linea di divisione (linee orizzontali in vari stili)
  • Censura
  • Evidenziare citazioni "nascoste"



Passo 1 - Scrivere il capitolo

Un paio di programmi li ho già nominati, io uso il secondo, ma sicuramente esistono anche altri editor di testi utilizzabili.

Per quando mi riguarda, uso una interlinea singola, e il ritorno a capo è sempre invio.
Non uso mai "shift + invio" per andare a capo perché fa casini mostruosi con il testo giustificato.

Altro consiglio che posso darvi è quello di definire nell'editor di testo uno stile simile a quello che volete ottenere nell'HTML. Nel mio caso si tratta di impostare:
  • rientro prima riga 0,50 cm
  • interlinee 1,15 righe
  • allineamento giustificato



Passo 2 - Convertire il testo in HTML

Il testo va quindi copiato nell'Editor di EFP

Qui bisogna però fare attenzione, perché alcune caratteristiche del testo originale vengono perse, mentre altre vengono mantenute.

Si mantengono:
  • Grassetto
  • Corsivo
  • Sottolineato
  • Barrato
  • Apice e Pedice


Si perdono:
  • Font particolari
  • Allineamento al centro e a destra
  • Testo giustificato


Nota: per il testo giustificato non ci dovrebbero essere problemi, dato che può essere facilmente impostato con il css.


Dopo aver apportato le correzioni sull'editor di EFP, basta cliccare su "Codice Sorgente" e copiare tutto.

Nota: qui bisogna assicurarsi che ogni paragrafo del testo sia racchiuso tra i tag HTML "p":

tag "p"

Lorem ipsum dolor sit amet, ... qui officia deserunt mollit anim id est laborum.



Altrimenti il css, per come lo propongo io, non potrà funzionare.

Nota: sull'editor di EFP, il testo non sarà degno di alcun apprezzamento, in particolare ci saranno distanze eccessive tra i paragrafi, ma questo va bene così e non va ritoccato perché sarà il css a apportare le correzioni.




Passo 3 - Riformattare tutto con il css

Si tratta semplicemente di aggiungere in testa all'HTML alcune righe di testo.
Quel che vi riporto qui sotto è ciò che uso attualmente, e ve lo propongo principalmente per darvi un'idea di cosa dovreste aggiungere in ogni capitolo.


Il mio css personale
<style>
/* Stile di default dei paragrafi */
 p {
	font-size: 1.5em;
	text-align: justify;
	line-height: 1.5; 
	padding-left: 3em; 
	padding-right: 3em;
	text-indent: 2em;
	margin: 0px;
 }


/* Titolo 2 */
h2 {
	padding-left: 3em; 
	padding-right: 3em;
}

/* Titolo 3 */
h3 {
	padding-left: 3em; 
	padding-right: 3em;
	font-size: 1.5em;
}

/* Citazione su singola riga, tipo la frase che si mette a inizio storia  */
blockquote {
	padding-left: 3em; 
	padding-right: 3em;
	font-size: 1.5em;
	text-align: justify;
	line-height: 1.5;
	font-style: italic;
}
</style>


Il testo della storia, con lo stile qui sopra riportato, è definito dalla regola "p" che viene applicata a tutti i paragrafi, ossia a tutto il contenuto dei tag HTML:

Lorem ipsum dolor sit amet, ... qui officia deserunt mollit anim id est laborum.



Per spiegarlo:

font-size: 1.5em;ingrandisce del 50% la dimensione dei catatteri
text-align: justify;giustifica il testo
line-height: 1.5;imposta una interlinea un po' più... spaziosa
padding-left: 3em;impone un margine sinistro (che resta bianco) di 6 (2x3) caratteri
padding-right: 3em;  come sopra, ma per il margine destro.
text-indent: 2em;fa rientrare la prima riga di 4 (2x2) caratteri
margin: 0px;margin e padding sono due cose diverse, ma spesso producono lo stesso risultato.
Avendo deciso di usare solo il padding, ho fissato a 0 il margin

Le altre regole vengono usate per definire i formati dei titoli ("Titolo 2" e "Titolo 3" per il programma di scrittura). Nulla vi vieta di definire e usare anche il "Titolo 1", ma io lo uso solo per l'intestazione di una storia con più capitoli, e quindi non lo faccio comparire su EFP (non nell'HTML di un capitolo, almeno).

"blockquote" è lo stile delle citazioni che compaiono prima del capitolo oppure di testi più lunghi (lettere, biglietti, targhe) citati dentro alla storia.
Va allineata al centro o a destra tramite l'editor di EFP, se è questo che desiderate, e dovrebbe risultare in un HTML di questo tipo (senza paragrafi "p"):

“Ci sono momenti che ci cambiano per sempre. Alcuni dolori non si dimenticano.”
(Adam)


Nota: Impostando come "citazione" una o più frasi del testo nell'editor di scrittura, l'editor EFP dovrebbe riconoscerle correttamente come citazioni e poi trasformarle in un HTML simile a quanto appena mostrato.

Posso consigliarvi di fare una prova usando il css che vi ho fornito, modificare qualcosina e generare l'anteprima finché non avrete il risultato che desiderate.
Una volta ottenuto un css di vostro gusto, potrete copiarlo pari pari in ogni vostro capitolo.




Altri font

Se intendete modificare il carattere di paragrafo, titoli, bockquote, eccetera, vi consiglio di utilizzare uno di questi valori come "font-family":

Arialfont-family: arial,helvetica,sans-serif
Comic Sans MSfont-family:comic sans ms,cursive
Courierfont-family:courier new,courier,monospace
Georgiafont-family:georgia,serif
Lucidafont-family:lucida sans unicode,lucida grande,sans-serif
Tahomafont-family:tahoma,geneva,sans-serif
Times new roman  font-family:times new roman,times,serif
Trebuchet MSfont-family:trebuchet ms,helvetica,sans-serif
Verdanafont-family:verdana,geneva,sans-serif

Questi sono quelli proposti dall'editor di EFP, pertanto potrete verificare lì come appaiono.

Per essere un po' più chiaro, se volete che la vostra storia sia scritta in "Comic Sans MS" (scelta forse discutibile...) doveste modificare il css in questo modo:

<style>
/* Stile di default dei paragrafi */
 p {
	font-size: 1.5em;
	text-align: justify;
	line-height: 1.5; 
	padding-left: 3em; 
	padding-right: 3em;
	text-indent: 2em;
	margin: 0px;
	font-family:comic sans ms,cursive;
 }






Campagna di sensibilizzazione a favore dei lettori

Non risparmiate sulla dimensione dei font ed evitate di usare dimensioni assolute come:

Non fatelo!
font-size: 12px;


perché impediscono il funzionamento della funzione "aumenta carattere" del sito EFP.

"em" vi sareà più che sufficiente, ma se volete un riferimento completo delle unità di misura, allora potete vedere qui: w3schools - css units

Evitante anche di usare colori particolari o font troppo arzigogolati.





Evitare il rientro della prima linea

Per evitare il rientro della prima riga, ad esempio nella parte delle note (perché magari sono solo due righe per paragrafo e il rientro risulta fastidioso):

Testo prima riga ...





Elemento di divisione

Quelli che uso io sono centrati e regolarmente mi ricordo di averli usati solo guardando l'anteprima. Tornare sull'editor di EFP, correggere e generare di nuovo l'HTML sarebbe una rottura di scatole... perciò li sistemo nella pagina di aggiunta/modica capitolo.

***



Oppure:

§



E certo potete anche mettere il carattere che volete voi al posto di "***" o "§".




Aggiungere una riga vuota

Anche questa è una necessità che può comparire guardando l'anteprima. Risolverla è banale, ma può creare davvero una bella confusione se non si capisce un "trucco".

Questo produce una riga vuota:

&nbsp;



Dopo aver premuto il bottone "anteprima", scoprirete però che il codice è cambiato:



Qui dovete fare attenzione, perché il carattere bianco non è lo spazio normale creato dalla barra spaziatrice, ma qualcos'altro.
Se provaste a scriverlo voi di sana pianta, da tastiera e senza fare un copia & incolla, vi accorgereste che non ottenete lo stesso effetto nell'anteprima e potreste diventar pazzi prima di capirne il motivo. Perciò vi consiglio di scrivere la versione con &nbsp; sapendo che poi diventerà uno "strano" spazio bianco che però funziona.




La spiegazione continua qualche post più sotto con "Altri elementi per palati raffinati" (linee di divisione decorate, note a fondo pagina con link di ritorno e anche un sistema di censura attivabile dal lettore).

Spero le mie indicazioni siano sufficienti. In caso di imprecisioni, passaggi incomprensibili, errori, o altro ancora, non esitante a segnalare o a chiedere. Io proverò a correggere e a rispondere.
Ghostro
00sabato 26 dicembre 2020 11:24
Allora mi accodo alle persone che ti hanno fatto i complimenti. Quando ho letto la tua storia per valutarla, l'impaginazione mi ha fatto salire l'invidia xD

Sono consigli preziosi. Nel prossimo capitolo proverò sicuramente a seguire questo schema. Mi faccio uno screenshot.
thors
00sabato 26 dicembre 2020 12:07
Ottimo! Sono felice che qualcosa della mia storia ti sia rimasto impresso! 😄

Occhio che ho appena fatto una aggiustatina (mancava il tag di chiusura "</style>" nel codice css).
thors
00sabato 26 dicembre 2020 16:23
Altri elementi per palati raffinati


Comincio con le note a fondo pagina che quando il lettore va a vederle trova anche un link per tornare alla riga dove stava leggendo.
Nel vostro editor di testo scrivere una cosa come:


dell'uomo nello scafandro non rimase che qualche osso1.



A fine capitolo, invece, scriverete qualcosa come:


[1] Il fatto è realmente accaduto.



Gli apici verranno trasformati dall'editor EFP nel tag <sup>, e voi, una volta copiato l'HTML, dovrete aggiungervi i collegamenti:

dell'uomo nello scafandro non rimase che qualche osso1


[1] Il fatto è realmente accaduto.



Dove "nota1" è il nome dell'ancora a fondo pagina, mentre "ret_nota1" è il nome dell'ancora dentro il capitolo.
Se aveste anche una seconda nota, allora dovreste usare due nuovi nomi: "nota2" e "ret_nota2".
Per la terza nota userete il "3", e così via...



Vi propongo ora una alternativa alla linea di divisione <hr>.
Il succo del discorso è definire nel blocco di stile una nuova regola per questo tag, ad esempio:

effetto sfumato
hr { 
  border: 0; 
  height: 1px; 
  background-image: -webkit-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0);
  background-image: -moz-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0);
  background-image: -ms-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0);
  background-image: -o-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0); 
}


Oppure:

doppia riga con del testo in mezzo
hr {
	overflow: visible; /* For IE */
	padding: 0;
	border: none;
	border-top: medium double #333;
	color: #333;
	text-align: center;
}
hr:after {
	content: "§";  /* Questo è il testo che comparirà in centro */
	display: inline-block;
	position: relative;
	top: -0.7em;
	font-size: 1.5em;
	padding: 0 0.25em;
	background: white;
}


Potrete trovare molti altri stili a questi link:


thors
00sabato 26 dicembre 2020 19:29
Censura del testo


Qui propongo un sistema di censura, anche questo basato esclusivamente su regole css.

Al lettore verrà offerta la possibilità di oscurare il testo che voi avete marcato come censurabile semplicemente cliccando su un checkbox (il quadratino in cui cliccando compare un "v", insomma).


Mettere questo nel css (ah, la parte tra "/*" e "*/" è un commento e può essere rimossa).

/* checkbox per attivare la censura */
input#censureOn {
  margin-left: 8em;
  transform: scale(1.5); /* per accordare la dimensione del 
                            checkbox a quella del testo */ 
}

/* testo censurato (nero su nero) */
input#censureOn:checked~p .censurable {
  background-color: black;
  color: black;
}


Questo va messo sotto delle opportune note in cui informate il lettore della possibilità di oscurare il testo più violento:


applica censura



Dove "inline" serve a far stare il messaggio sulla stessa riga del checkbox.

E questo, infine, dentro ogni paragrafo da censurare:

<span class="censurable></span>


Ad esempio:

Testo adatto a ogni lettore. Testo censurabile.

Altro testo censurabile.



Nota: non c'è limite al numero di paragrafi che possono contenere del testo da censurare, ma fate molta attenzione perché basta dimenticarsi di chiudere un tag <span> per far sparire dalla pagina buona parte dell'intera storia.

Nota: il checkbox non può essere contenuto in nessun altro elemento per limiti delle regole css. Quindi in questo modo non funzionerebbe:

Esempio non funzionante!

applica censura



Perché il tag "p" contiene il checkbox.
thors
00mercoledì 10 febbraio 2021 12:22
Testo alternativo a quello censurato


Anche se me ne sono accorto tardi, è improbabile che censurando un pezzo di testo, quello che precede la censura e quello che la segue collimino alla perfezione, pertanto può essere utile mostrare qualche paragrafo di testo in più al posto di quelli censurati.

Per riuscirci, basta aggiungere queste regole nel css:

.censure_alternative {
	display: none;
}


input#censureOn:checked~.censure_alternative {
	display: block;
}



Mentre i paragrafi aggiuntivi, che appariranno solo quando il lettore cliccherà nella checkbox per attivare la censura, vanno inseriti dentro paragrafi con la classe di stile "censure_alternative", come da esempio:


Il mio testo alternativo...

thors
00sabato 13 marzo 2021 11:00
Evidenziare citazioni "nascoste"

A volte i contest richiedono di utilizzare una frase e, solitamente, concedono anche di effettuare delle modifiche per adattarla meglio al testo.
In due diverse occasioni avevo fuso le citazioni così bene... che i giudici han faticato a trovarle... Perciò, mi è venuto in mente di creare un meccanismo opposto alla censura che consenta di evidenziare la parte del testo che "esprime" la citazione richiesta.

Regole css necessarie:

/* highlight */
input#highlightOn {
	margin-left: 8em;
	transform: scale(1.5);
}


input#highlightOn:checked~p .highlightable {
	background-color: yellow; 
}



Codice html della storia (bisogna aggiungere il checkbox e la classe "highlightable" sulle parti da evidenziare):


 

evidenzia citazione "Cybervalentino"

«Non mi innamorerò mai di un androide, e tu non lo sei. Quel che penso è che non esista donna più meravigliosa di te. Mi innamorai la prima volta che ti vidi, nel parco. Oggi, per me, è un altro primo incontro, ed ora sono certo di essermi nuovamente infatuato di te. Allora credevo che eravamo destinati ad amarci, ma ora so che eri una parte di me che mi mancava per essere felice. In ogni luogo e in ogni momento noi ci incontreremo, tu sarai sempre parte di me.»

«E tu di me», rispose lei, in lacrime.



Non ho ancora utilizzato questo sistema in una mia storia, ma lo farò alla prossima occasione. Nel caso preso in esempio, la richiesta era di inserire una citazione parafrasata:


Gli amanti non si incontrano finalmente in qualche luogo. Sono sempre stati l’uno nell’altro.



Cliccando sulla checkbox, una parte del testo verrà evidenziata in giallo:


«Non mi innamorerò mai di un androide, e tu non lo sei. Quel che penso è che non esista donna più meravigliosa di te. Mi innamorai la prima volta che ti vidi, nel parco. Oggi, per me, è un altro primo incontro, ed ora sono certo di essermi nuovamente infatuato di te. Allora credevo che eravamo destinati ad amarci, ma ora so che eri una parte di me che mi mancava per essere felice. In ogni luogo e in ogni momento noi ci incontreremo, tu sarai sempre parte di me.»

«E tu di me», rispose lei, in lacrime.




Questa è la versione 'lo-fi' del Forum Per visualizzare la versione completa clicca qui
Tutti gli orari sono GMT+01:00. Adesso sono le 08:25.
Copyright © 2000-2024 FFZ srl - www.freeforumzone.com