Stili basilari

Redazione MedPop R10 ?

Versione: .php .html .pdf Autori: Peter & Daniela Categoria: Redazione

1.  Allineamento di paragrafi

align → allineamento bottom → in fondo center → centrato left → a sinistra middle → in media right → a destra top → in alto

Gli attributi per l'allineamento di paragrafi (center, right, ... ) sono anche usati in altre variabili.

Per la definizione dell'alineamento di paragrafi per il web si usa al solito le notazioni:

Scorciatoia:
%(Variabile:) left; center; right% tratto di testo (paragrafo). %%
oppure (meglio, perché si tratta comunque di paragrafi):
>>align=left; center; right<<
tratto di testo (paragrafo).
>><<

Cosa si scrive

Cosa si vede

'-''in notazione "scorrevole" (poco
elegante):''-'
%left% Testo &rarr;%%

%center% &larr; Testo &rarr;%%

%right% &larr; Testo%%

'-''oppure (meglio) in notazione
"paragrafo":''-'
>>left<<
Testo &rarr;
>><<
>>center<<
 &larr; Testo &rarr;
>><<
>>right<<
 &larr; Testo
>><<

in notazione "scorrevole" (poco elegante): Testo →

← Testo →

← Testo

oppure (meglio) in notazione "paragrafo":

Testo →

← Testo →

← Testo

2.  Calligrafia

La calligrafia è definita di dimensione, tipo, peso e stile del carattere. Non formattando niente viene usato come default Arial 11pt peso e stile "normale". I seguenti capitoli fanno vedere come si può variare queste caratteristiche.

bold → grassetto default → valore implicite family → tipo, famiglia font → calligrafia italic → corsivo (inclinato) pt → "punti" size → dimensione small → piccolo smaller → più piccolo style → stile weight → peso

2.1  Dimensione

La dimensione implicite ho impostato a 11pt. Degli appunti, prologi, epilogi scrivo spesso in 10pt (small), ogni tanto in 9pt (smaller). Le dimensioni più grandi si trovano maggiormente in titoli e sottotitoli e vengoni impostati automaticamente. Uso raramente delle formattazioni maggiori "imposte", perché rendono "irrequieto" un testo se non usate con misura.

'-''in notazione "scorrevole"''-':\\
'- Testo* (9pt)-'\\
%font-size=small% Testo (10pt) %%\\
Testo (default 11pt)\\
[+ Testo* (13pt)+]\\
[++ Testo* (15pt)++]\\

%font-size=18pt% Testo (18pt) %%

'-''oppure in notazione "paragrafo":''-'
>>font-size=smaller<<
Testo* (9pt)
>><<
>>font-size=small<<
Testo* (10pt)
>><<
Testo (default 11pt)
>>font-size=13pt<<
Testo (13pt)
>><<
>>font-size=15pt<<
Testo (15pt)
>><<
>>font-size=18pt<<
Testo (18pt)
>><<
%right%'-* scorciatoie!-'

in notazione "scorrevole":
Testo* (9pt)
Testo (10pt)
Testo (default 11pt)
Testo* (13pt)
Testo* (15pt)
Testo (18pt)

oppure in notazione "paragrafo":

Testo* (9pt)

Testo* (10pt)

Testo (default 11pt)

Testo (13pt)

Testo (15pt)

Testo (18pt)

* scorciatoie!

2.2  Tipo di carattere

Come tipo di carattere implicite ho impostato Arial' regular 11pt. Per il testo non uso quasi mai altri caratteri salvo ogni tanto come distinzione dal testo regolare in inserti o immagini:

  • Comic Sans MS spesso per immagini
  • Courier per distinguere quello che si scrive da quello che si vede in esti didattici

Frequenti cambiamenti di carattere rendono molto irrequieto il testo e non adatto a testi non pubblicitari.

Testo Arial (default 11pt)

'-''in notazione "scorrevole"''-':\\
%font-family='Times'% Testo Times (11pt)
%%\\
%font-family='Courier'% Testo Courier
(11pt) %%\\\

'-''oppure in notazione "paragrafo":''-'
>>font-family='Comic Sans
MS'<<
Testo Comic Sans MS (11pt)
>><<
>>font-family='Verdana'<<
Testo Verdana (11pt)
>><<
>>font-family='Papyrus'<<
Testo Papyrus (11pt)
>><<
>>font-family='Zapfino'<<
\\\

Testo Zapfino (11pt)
>><<

Testo Arial (default 11pt)

in notazione "scorrevole":
Testo Times (11pt)
Testo Courier (11pt)

oppure in notazione "paragrafo":

Testo Comic Sans MS (11pt)

Testo Verdana (11pt)

Testo Papyrus (11pt)



Testo Zapfino (11pt)

2.3  Peso

Il peso dei caratteri è un'importante fattore per rendere più leggibile un testo. D'altronde un'esagerato uso ricorda al comportamento di una persona che sgrida spesso.

Per la definizione del peso del carattere per il web si usa al solito la notazione:

scorciatoia: '''tratto di testo'''
oppure: %font-weight=bold% tratto di testo %%
Testo (default normal)\\\

'-''in notazione "scorrevole"''-':\\
'''Testo*'''\\

%font-weight='bold'% Testo %%\\\

'-''oppure in notazione "paragrafo":''-'
>>font-weight='bold'<<
Testo
>><<

'-* scorciatoia!-'

Testo (default normal)

in notazione "scorrevole":
Testo*
Testo

oppure in notazione "paragrafo":

Testo

* scorciatoia!

In notazione html/CSS si usa più estese possibilità per il peso del testo come:

  • bold → grassetto
  • bolder → grasso
  • lighter → minuto
  • valori numerici da 100 (iperminuto) a 900 (ipergrasso).
  • normal → normale peso del carattere (font-wight:...)

2.4  Stile

Lo stile corsivo è spesso usato per delle citazioni ma anche per distinguere singole parole in un testo in un modo meno pesante del "grassetto".

Testo (default normal)\\\

'-''in notazione "scorrevole"''-':\\
%font-style=italic% Testo %%\\
''Testo*''

'-''oppure in notazione "paragrafo":''-'
>>font-style=italic<<
Testo
>><<

%right%'-* scorciatoia!-'

Testo (default normal)

in notazione "scorrevole":
Testo
Testo*

oppure in notazione "paragrafo":

Testo

* scorciatoia!

3.  Colori

Colori sono un'ottimo strumento per strutturare delle pagine e per renderle più leggibili. Nei nostri domini non sono invece usati per motivi "estetici" ma prevalentemente per motivi funzionali. L'abuso e il maluso rendono una pagina irrequietante e/o disgustosa: meglio di limitare la propria creatività in questo settore.

Come ovunque in internet si usa il sistema RGB → RedGreenBlueRossoVerdeBlù in notazione triplice esadecimale per definire i colori.
Esadecimale significa che invece di 10 cifre (da 0 ... 9) si usana 16 cifre (da 0 ... 9 e poi a→10 b→11 c→12 d→13 e→14 f→15).
Le cifre indicano la luminosità di ognuno dei tre colori basilari. Si usano una notazione abbrevviata di 3x1 cifra e la notazione completa di 3x2 cifre con il prefisso # per indicare che segue un numero di colore.

Esempi:
I colori basilari sono definiti: #f00 = #ff0000 = red → #f00 = #ff0000 = red; #0f0 = #00ff00 #0f0 = #00ff00; #00f = #0000ff #00f = #0000ff.
Per attenuare il colore si aumenta la luminosità dei colori non presenti (0) come #f99 #f99 o #fee #fee .
Per scurire il colore si diminuisce la luminosità del colore dominante come #a00 #a00 o #600 #600 .

Per ottenere colori tra le basilari si "mescolano" come p.es. "giallo" tra "rosso" e "verde" #ff0 #ff0 , viola tra rosso e blù #f0f #f0f e blù-verde #0ff #0ff o arancio #ff8000 #ff8000 o marrone (arancio scuro) #910 #910 . Un'arancio più pallido "puro" di #ff8000 non è realizzabile con questa notazione di colori, perché il rosso ff è al massimo e aumentando il verde 80 si sposta l'arancio verso il giallo: arancio #f80 #f80 #fa0 #fc0 #fe0 #ff0 .

Bianco è la massima luminosità di tutti colori: #fff #fff e nero l'assenza di tutti colori: #000 #000 . La scala dei grigi si muove tramezzo come p.es. #ccc #ccc o #666 #666

Per maggiori informazioni su colori in internet c'è da consultare la pagina Colori

bgcolor → colore sfondo black → nero blue → blu gray → grigio color → colore green → verde maroon → marrone navy → blu scuro purple → porpora red → rosso silver → argento white → bianco yellow → giallo

3.1  Lettere

Testo\\
%red% Testo* %%\\
%color=#f00% Testo° %%\\


%right%'-*scorciatoia; °notazione
esadecimale 3x1-'

Testo
Testo*
Testo°

*scorciatoia; °notazione esadecimale 3x1

3.2  Sfondo

Testo\\
%bgcolor=yellow% Testo* %%\\
%bgcolor=#ff0% Testo° %%\\


%right%'-*scorciatoia; °notazione
esadecimale 3x1-'

Testo
Testo*
Testo°

*scorciatoia; °notazione esadecimale 3x1


3.3  Paragrafi

>>color=#ff0 bgcolor=#606
font-size:small font-weight:bold
padding=10px<<
Lorem ipsum dolor sit amet, consectetur
adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis
nostrud exercitation ullamco laboris
nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit
in voluptate velit esse cillum dolore eu
fugiat nulla pariatur. Excepteur sint
occaecat cupidatat non proident, sunt in
culpa qui officia deserunt mollit anim
id est laborum.
>><<

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

4.  Inserti

border → cornice frame → inserto margin → margine padding → distanza right → destra left → sinistra top → in alto bottom → in fondo

4.1  Generali

'-''incluso nel testo:''-'\\
'-Questo è il contesto -' %margin=5px
border='1px dotted red'
padding=2px%Testo%% '-della parola
testo-'\\\

'-''oppure come paragrafo:''-'\\
'-Questo è il contesto -' 
>>margin=5px border='1px dotted
red' padding=2px<<
Testo
>><<
'-della parola testo-'

incluso nel testo:
Questo è il contesto Testo della parola testo

oppure come paragrafo:
Questo è il contesto

Testo

della parola testo

4.2  Finestrine

'-''incluso nel testo:''-'\\
'-Questo è il contesto -' %frame%Testo%%
'-della parola testo.-'

'-''oppure come paragrafo:''-'\\
'-Questo è il contesto -'
>>frame<<
Testo
>><< 
'-della parola testo.-'

incluso nel testo:
Questo è il contesto Testo della parola testo.

oppure come paragrafo:
Questo è il contesto

Testo

della parola testo.

4.3  Applicazioni di inserti testuali

Si salva una finestra di redazione
cliccando sul pulsante %margin=2px
border='1px solid gray' padding=1px
bgcolor=#f7f7f7%'-Save-'%% mentre si
prevede il risultato cliccando sul
pulsante %frame%'-Preview-'%%.\\
Il comando abbreviato per stampare una
pagina è %margin=2px border='1px solid
green' padding=1px color=green
bgcolor=#eeffee%&#8984;P%% mentre si
raggiunge la pagina principale cliccando
su %margin=2px border='1px solid maroon'
padding=1px color=maroon
bgcolor=#ffffdd%[[Redazione.Redazione |
'-HOME-']]%%

Si salva una finestra di redazione cliccando sul pulsante Save mentre si prevede il risultato cliccando sul pulsante Preview.
Il comando abbreviato per stampare una pagina è ⌘P mentre si raggiunge la pagina principale cliccando su HOME

4.4  Inserti in tabelle

inserti in tabelle devono essere del tipo "frame" o "float" e possono essere testuali oppure di pargrafo:

(:table cellpadding=5 border=1:)
(:cellnr valign=middle:)'-''incluso nel
testo:''-'\\
'-Questo è il contesto -'
%frame%Testo%%
'-della parola testo con [@%frame%@].-'
(:cell align=center:)'-''oppure come
paragrafo:''-'\\
'-Questo è il contesto -'
>>frame<<
[[http://medpop.googlepages.com/IconMmP.jpg
|
http://medpop.googlepages.com/IconMmP.jpg]]
>><< 
'-di un' immagine con
[@>>frame<<@].-'
(:cellnr align=center
valign=middle:)'-Questo è il contesto
ampliato-'
>>frame bgcolor=#f7ffff
border='1px dotted red'<<
[[http://medpop.googlepages.com/IconMmP.jpg
|
http://medpop.googlepages.com/IconMmP.jpg]]
>><< 
'-di un'immagine con
[@>>frame<<@] formattato.-'
(:cell:)'-Questo è il contesto
ampliato-'
>>rframe bgcolor=#f7ffff
border='1px dotted red'<<
[[http://medpop.googlepages.com/IconMmP.jpg
|
http://medpop.googlepages.com/IconMmP.jpg]]
>><< 
'-di un' immagine con
[@>>rframe<<@] formattato.-'
(:cellnr align=center
valign=middle:)'-Questo è il contesto
ampliato-'
>>float<<
[[http://medpop.googlepages.com/IconMmP.jpg
|
http://medpop.googlepages.com/IconMmP.jpg]]
>><< 
'-di un'immagine con
[@>>float<<@] non
formattato.-'
(:cell:)'-Questo è il contesto
ampliato-'
>>lfloat padding=5px bgcolor=#808
border='3px solid silver'<<
[[http://medpop.googlepages.com/IconMmP.jpg
|
http://medpop.googlepages.com/IconMmP.jpg]]
>><< 
'-di un' immagine con
[@>>lfloat<<@] formattato.-'
(:tableend:)
incluso nel testo:
Questo è il contesto

Testo della parola testo con %frame%.

oppure come paragrafo:
Questo è il contesto

di un' immagine con >>frame<<.

Questo è il contesto ampliato

di un'immagine con >>frame<< formattato.

Questo è il contesto ampliato

di un' immagine con >>rframe<< formattato.

Questo è il contesto ampliato

di un'immagine con >>float<< non formattato.

Questo è il contesto ampliato

di un' immagine con >>lfloat<< formattato.


5.  Inserti fluttuanti

Le seguenti istruzioni adattano automaticamente la dimensione della finestra (largezza, altezza) alle dimensioni del contenuto. Non dimenticare (se necessario) gli "a capo" delle righe p.es. con apositi "backslashs" \\.

center → centrato float → fluttuante height → altezza left → sinistra lfloat → fluttuante sinistra lframe → inserto fluttuante sinistra rframe → inserto fluttuante destra rfloat → fluttuante destra right → destra text-align → allineamento didascalia width → larghezza

5.1  ← Frame →

Testo

%rframe font-size=20pt
font-family='Papyrus' blue
bgcolor=#ffeeff padding=10px%''''' Testo
'''''%% 
'-Questo è il contesto della parola
testo.-'

Testo

Testo Questo è il contesto della parola testo.

5.2  ← Float →

Testo

%lfloat font-size=20pt
font-family='Papyrus' blue
bgcolor=#ffeeff padding=10px%''''' Testo
'''''%% 
'-Questo è il contesto della parola
testo.-'

Testo

Testo Questo è il contesto della parola testo.

5.3  Applicazioni di fluttuanti

%rframe height=20 text-align=center%
[[http://www.tempopernoi.org/images/VivConStile.jpg
|
http://www.tempopernoi.org/images/VivConStile.jpg]]
| '-Banca-'
%lframe height=20 text-align=center%
[[http://www.ifotografi.it/files/calligrafia.jpg
|
http://www.ifotografi.it/files/calligrafia.jpg]]
| '-Calli-'
%center%'-L'applicazione più frequente
di inserti fluttuanti sono  disposizioni
di immagini con un testo che scorre
intorno a loro.-'

'-È buon uso (verso l'autore) di linkare
gli immagini con le pagine (o gli
immagini) d'origine: cliccare sul
immagine per controllare!-'

Banca

Calli

L'applicazione più frequente di inserti fluttuanti sono disposizioni di immagini con un testo che scorre intorno a loro.

È buon uso (verso l'autore) di linkare gli immagini con le pagine (o gli immagini) d'origine: cliccare sul immagine per controllare!

Epilogo


Pagina tipo Riassunto

 

Commento 
Autore 
Enter code 911

Edit - History - Print - Recent Changes - Search
Page last modified on January 27, 2009, at 07:56 AM