Pagine in allestimento

• Psicopatol.: Peter
• FTP 2 Patologia: Peter
• PT 1.2 Oncologia: Peter
• PT 6.3 Pat.Gen.: Peter
• PT 3.2 DistOrgSensi: Peter
• PT 3.3 DistEndocrini: Peter
• PT 2.2 MalatOssee: Peter
• TeraPostur indici
• PT 2.1 indici
• PT 6.1 indici
• MmP indici
• Strumenti indice
• Lucidi indice
• Dispense indice
• MN 3.4
• Terapie alternative
• Pediatria
• Galenica
• Foglietti illustrativi
• Erboristeria.GiorgioValli?
• Enciclopedia.Home
• FTP 1

Strumenti

• Indice del sito (Groups)
• Categorie recenti
• Redazione bozza
• Peter's HomePage
• Snippets
• Sabbiera
• SabbieraDani
• TruccioliDani
• SabbieraRafy

PmWiki

• Basic Editing
• Documentation Index

pmwiki.org

• Cookbook (addons)

• Vedi
• Edit
• Storia
• Stampa
• Puntano qui

Esercizi tipografici

Su questa pagina ... (sopprimi) 1. Nome e titolo della pagina 1.1 Nome di una nuova pagina, ... 1.2 Modificare il nome di una pagina, ... 1.3 Titolo della pagina 2. Categoria 3. Indice 4. Titoli dei capitoli e sottocapitoli 5. Calligrafia, liste, tabelle 6. Links 7. Ancore 8. Tabelle 8.1 Tabella "semplice" 8.2 Tabella "sofisticata" 9. Immagini 9.1 Ricerca di immagini e loro indirizzi 9.2 Formattazione di immagini 9.3 Posizionare orizzontalmente l'immagine 10. Relazioni tra immagini e testo 10.1 Testo intorno a un'immagine 10.2 Testo a capo 10.3 Leggende 10.4 Links su leggende 10.5 Links dall'immagine stesso 10.6 Centrare immagine e didascalia 11. Casella di commento 12. Piè di pagina 12.1 Links di collegamento contesto 12.2 Copyright 13. Altre funzioni

Esercizi I seguenti capitoli contengono esercizi per autocontrollare se si sa fare una determinata operazione di "markup" (il sapere viene più tardi, all'inizio bisogna saper fare). Non bisogna fare necessariamente gli esercizi in ordine numerico: si può fare benissimo quando serve.

1.  Nome e titolo della pagina

1.1  Nome di una nuova pagina, ...

creare una nuova pagina

[[Main.PeterSabbiera]] 

Il nome di una pagina serve per l'organizzazione interna automatica del sito. Per cui è legato a diverse condizioni:

• meglio scriverlo in una parola p.es. invece di "Sabbiera di Peter" => SabbieraPeter
• sempre abbinarlo al gruppo voluto, diviso con un punto, p.es. Main.PeterSabbiera

Il nome di una nuova pagina si può fare, scrivendo il suo nome nella casella di redazione {Edit) di un'altra pagina come link: p.es. [[Main.PeterSabbiera]]. Su Preview oppure Save, il programma cerca la pagina e non la trova. Scrive quindi un punto interrogativo all'apice della parola. Cliccando su questa parola si apre la casella di redazione di redazione della nuova pagina e si può subito iniziare a stilare l'articolo.

Le attuali divisioni (gruppi, groups) del sito sono elencati sulla pagina Group.Group o si trova nella colonna a sinistra di questa pagina.

1.2  Modificare il nome di una pagina, ...

cancellare una pagina

Questo non si fa, perchè non è fattibile con semplici mezzi, apposto, perchè potrebbe creare casini nell'organizzazione del programma. Se c'è il bisogno,

• si crea prima una nuova pagina
• si copia il contenuto della vecchia pagina in quella nuova
• poi si cancella la vecchia pagina, cancellando tutto e poi scrivendo delete sulla pagina (con niente d'altro, neanche uno spazio). Sul suseguente Save, il programma annuncia, che la pagina non esiste più.

1.3  Titolo della pagina

(:title Sabbiera di Peter:)

Come non si può modificare il nome di una pagina, il suo titolo invece è sempre impostabile o modificabile senza ulteriori conseguenze: si scrive semplicemente l'istruzione (:title titolo della pagina:) con uno spazio tra "title" e la seguente parola, p.es. (:title Sabbiera di Peter:) fa apparire Sabbiera di Peter. Il nome della pagina rimane "SabbieraPeter".

2.  Categoria

%right%'-Categoria: [[!Guestbook]]-'

Categorie servono per ritrovare delle pagine appartenenti a un determinato tema. Una pagina senza categorie è "orfana": nel peggior dei casi, nessuno non la trova mai più. Per questo sito scriviamo almeno una (o più) categorie in minuscolo in cima della pagina a destra. Si può formularlo ca. così: %right%; allineamento a destra; (left=sinistra; center=centrata} '-: minuscolo; (apostrofo/trattino) Categoria: argomento; p.es. [[!Tentativi]]: categoria; [[! ]] indica: link alla lista dei nomi di pagina della categoria ... -': fine minuscoli Scritto in lingua Wiki sarebbe semplicemente: %right%'-Categoria: [[!Tentativi]]-'.
Bigino: %right%'-Categoria: [[!?]]-'

Al momento ho fissato le seguenti:

Si può creare in ogni momento nuove categorie, non dovessere bastare le presenti: semplicemente scrivendo la nuova categoria in [[!...]]. Avendo fatto questo, appare automaticamente in tutti gli elenchi per le categorie.

3.  Indice

(:toc:)

Delle pagine Web non sono sfogliabili come un libro, e anche nei libri si fa un indice iniziale, per capire senza ricerche, cosa si trova nel testo. A questo scopo ho infilato un'istruzione, che crea automaticamente un indice a partire dai titoli principali: Listruzione è (:toc:) e viene rappresentato come si può vedere p.es. all'apice di questa pagina.

Ho definito l'indice in maniera che appaiono solo i due primi livelli di titoli, anche se nel testo si trovano livelli inferiori. Questo per evitare indici troppo lunghi. Se sotto un titolo di livelle due (!!!...) si trovano sottocapitoli, li elenco sotto e li connetto ai relativi titoli con àncore.

Gli indici non solo servono per capire coasa si trova sulla pagina, ma cliccando su di loro, la pagina si sposta immediatamente sul titolo nel testo. Così si evita "voli di notte".

4.  Titoli dei capitoli e sottocapitoli

scrivendo in <Edit Section>:

• [!!Titolo] appare Titolo
• [!!!Titolo] appare Titolo

Titoli si definiscono con uno o più punti esclamativi all'inizio di una linea. Un punto esclamativo da il titolo più grande, due un pò minore e così via. Personalmente, i miei titoli più grandi sono di due punti esclamativi !!, il primo sottotitolo di tre e così via.

È importante di marcare titli con punti esclamativi

• per permettere una struttura del testo "dietro le quinte": il programma crea un <Edit Section↓> prima di ogni titolo definito con punti esclamativi
• per generare degli indici automatici

5.  Calligrafia, liste, tabelle

->'''Questo''' '-capitolo-' [+è+] %red%''per''%% giocare.

Le possibilità di variare la calligrafia vengono maggiormente fatti, mettendo le parole da evidenziare tra apostrofi e altri segni. Dettagli vedi "Istruzioni". Personalmente non faccio evidenziare nella prima scrittura, perchè rimane più leggibile il testo. solo verso la fine "abbellisco" il testo con questi mezzi (minuscolo, maiuscolo, grassetto, corsivo, sottolineato, cancellato, colori, apici, pedici). Un riassunto dei marcatori ho messo sotto ogni casella di redazione.
Su Allegato: Variazioni di calligrafia si trovano qualche esempio illustrativo. Pure negli allegati a questa pagina si trovano le istruzioni per fare liste e tabelle.

6.  Links

[[http://www.pforster.ch/ | Enciclopedia]]\\
[[mailto:pforster@nikko.ch | Peter]]

Links (connessioni) sono uno strumento principale di pagine Web: si allega a una parola o frase l'indirizzo di un'altra pagina o di un indirizzo di mail. così, uno che intende a vedere questa pagina, clicca semplicemente sulla parola e appare la nuova pagina. Dei links sono evidenziati in colore blu.

Per creare un link, si scrive [URL | argomento]] argomento?, dove al posto di URL viene messo l'indirizzo di destinazione del link e al posto di "argomento" la parola o frase da evidenziare. Esempio: su [[http://www.pforster.ch/ | Enciclopedia]] appare Enciclopedia. Si può naturalmente anche connettersi in questa maniera con pagine all'interno del sito come p.es. [[Main.HomePage | MedPop wiki]] o a una mail come p.es. [[mailto:pforster@nikko.ch | Peter]].

7.  Ancore

...\\
[[#tempo | Contabilità del tempo]]\\
...\\
[[#tempo]]\\
...

Àncore sono parole marcate in maniera, che formano dei links all'interno di una pagina. Personalmente li uso, per fare degli indici di sotto-sottocapitoli (che non appaiano nell'indice principale della pagina, perchè ho limitato quest'ultimo a due livelli). Un'àncora ha sempre due punti dove va infilato:

• sul punto di partenza, marcata come link evidenziato in blu p.es. [[#tempo | Contabilità del tempo]]
• sul punto di arrivo (invisibile) p.es. [[#tempo]] una linea prima del posto dove comincia il riferimento.
• la parola di riferimento (nell'esempio "tempo" va scelto liberamente: è comunque meglio di scegliersi parole senza accenti o segni speciali.

8.  Tabelle

Le tabelle sono forse l'elemento stilistico più importante per delle pagine in rete, perché altre funzioni di disposizione di elementi e oggetti sono molto limitati.

In PmWiki ce ne sono due modi di fare delle tabelle, uno chiamato "semplice" e l'altro "completa". Personalmente trovo più semplice il modo "completo".

Frequente variabili in tabelle sono:

• width=... : in % o in px: larghezza come p.es. width=20% oppure width=200
• align=... : center o right: allineamento orizzontale come p.es. align=right (destra) align=center (centrale
• valign=... : top o middle o bottom: allineamento verticale come p.es. valign=top (in alto) valign=bottom (in basso) valign=middle (a metà)
• bgcolor=#...... : colore di fondo come p.es. bgcolor=#ddffdd (verde pallido)
• border=. : spessore del bordo in px come p.es. border=1
• cellspacing=. : distanza tra le celle in px come p.es. cellspacing=1
• cellpadding=. : distanza tra cella e testo come p.es. cellpadding=3
• colspan=. : una cella occupa più di una colonna come p.es. colspan=2
• rowspan=. : una cella occupa più di una riga come p.es. rowspan=2

I seguenti esempi dimostrano l'uso di variabili in tabelle.

8.1  Tabella "semplice"

Le tabelle semplici usano due lineette verticali || (sul mio ordinatore alt7) come elemento di strutturazione. Sulla prima riga si scrive all'inizio || e poi ev. variabili della tabella.
Le prossime righe contengono tante || come celle più una || per terminare la riga.
Uno spazio tra lineetta e testo indica il posizionamento orizzontale. L'esempio dimostra come funziona:

%comment% Tutte le variabili nella prima riga sono facoltative e possono
semplicemente mancare (la prima riga consisterebbe in questo caso solo di
||):

||align=center width=30% bgcolor=#ddffff border=1 cellspacing=0
cellpadding=3 
||Questo || è || una||
||%red%'''tabella'''%% || semplice. || ||

8.2  Tabella "sofisticata"

Le tabelle "sofisticate" iniziano con una riga d'istruzione (:table:) e finiscono con una riga (:tableend:). Ogni cella ha una riga, che inizia con (:cellnr:) se si tratta di una nuova riga oppure con (:cell:) se si tratta di una cella sulla stessa riga. In queste istruzioni (:istruzione variabile1 variabile2 ... :) possono essere inclusi delle variabili di formattazione come lo dimostra il seguente esempio.

(:table border=1 cellspacing=3 cellpadding=3 bgcolor=#dddddd align=center:) (:cellnr colspan=2 bgcolor=#ffdddd:)Questa (:cell align=right:)è (:cellnr:)una (:cell rowspan=2 align=center valign=middle bgcolor=#ddffdd:)%red% '''tabella''' %% (:cell align=right:)più (:cellnr valign=middle:)completa. (:cell align=right valign=middle:) %width=30% [[http://medpop.googlepages.com/IconMmP.jpg | http://medpop.googlepages.com/IconMmP.jpg]] (:tableend:)

Questa è una tabella più completa.

9.  Immagini

Gli immagini, oltre ad illustrare un testo sono anche un'ottimo mezzo didattico. Rendono un testo tecnico meno noioso e facilitano l'orientamento visivo.

Malauguratamente occupano tanta memoria e possono essere soggetto di brutti scherzi. Per questo motivo mi sono deciso di permettere su questo sito unicamente "immagini linkati": cioè di accettare solo dei links a immagini che si trovano su tutt'altri siti.

9.1  Ricerca di immagini e loro indirizzi

La ricerca di immagini è molto efficace da Google: Ricerca immagini.

• si infila nella casella il nome dell'oggetto che serve e si parte: <Cerca immagini>
• appare una pagina con una filastrocca di icone in merito
• si sceglie uno che può andare e si clicca sull'icona
• appare una pagina che dimostra un sacco di cose da studiare poi, ma che in alto a sinistra riporta ancora l'icona.
• Si clicca su questa e appare una pagina con solo l'immagine che evidentemente porta anche l'indirizzo dell'immagine (nella casella dell'indirizzo)
• si copia questo indirizzo e si torna alla pagina di redazione.

(:nospacewikiwords:) (:nolinkwikiwords:) %comment% solo perché qui è in markup. Normalmente non si scrive http://medpop.googlepages.com/IconMmP.jpg | '-MedPop-'

solo perché qui è in markup. Normalmente non si scrive MedPop

Per sicurezza si incolla l'indirizzo subito e com'è per non perderlo.

Se fa adesso <preview>, vede l'immagine nelle dimensioni come si trova sul sito originale. si tratta di seguito di

• dare un formato adeguato
• posizionarlo
• fare una leggenda
• ev. linkarlo e
• determinare la relazione al testo

9.2  Formattazione di immagini

Si può definire o la larghezza o l'altezza di un'immagine per un istruzione precedente all'indirizzo (URL). Il programma lo formatta poi automaticamente in proporzione. La dimensione è espresso in px (pixel): 100 corrispondono a ca 25 mm. Le istruzioni:

• %width=...% http://... : definisce la larhezza dell'immagine
• %height=...% http://... : definisce l'altezza dell'immagine
• %thumb% http://... definisce un'"icona" di 100px di larghezza

%width=30% http://medpop.googlepages.com/IconMmP.jpg

9.3  Posizionare orizzontalmente l'immagine

Per questa funzione ci sono tre possibili comandi:

• %center% http://...: mette l'immagine nel centro della riga in quale si trova il comando
• %right% http://...: mette l'immagine a destra sulla riga in quale si trova il comando
• %left% http://...: mette l'immagine a sinistra sulla riga in quale si trova il comando

Il comando funziona anche consecutivamente come p.es. %center%%width=...%, ma il posizionamento deve trovarsi prima della dimensione

%width=50% %right% http://medpop.googlepages.com/IconMmP.jpg

10.  Relazioni tra immagini e testo

Istruzione PmWiki: Inserimento e formattazione di immagini

scrivendo in <Edit Section>:

Scrivendo d'avanti alle istruzioni per piazzare l'immagine, il testo prosegue normalmente. %rfloat width=70% [[http://www.pforster.ch/ | http://www.pforster.ch/BBlogPics/IconMmP.jpg]] Andando avanti a scrivere dopo l'istruzione, il testo "fluisce" intorno all'immagine. Per interrompere il flusso del testo si scrive [[<<]] E dopo va avanti normalmente sotto l'immagine

Scrivendo d'avanti alle istruzioni per piazzare l'immagine, il testo prosegue normalmente. Andando avanti a scrivere dopo l'istruzione, il testo "fluisce" intorno all'immagine. Per interrompere il flusso del testo si scrive E dopo va avanti normalmente sotto l'immagine

appare questo sulla pagina dopo <Preview> o <Save>

Definendo gli immagini con posizione e dimensione come spiegato fino adesso, l'immaggine occupa il posto della sua altezza sulla pagina. Il testo si trova o prima o dopo l'immagine.

10.1  Testo intorno a un'immagine

Ci sono due comandi con variazioni che determinano, se il testo deve automaticamente andare intorno l'immagine:

• %float% URLImmagine: testo intorno immagine senza cornice
• %frame% URLImmagine: testo intorno immagine con cornice

Per definire, se l'immagine deve trovarsi a destra o a sinistra, bisogna scrivere una r (right=destra) o una l (left=sinistra) davanti float o frame. frame sopporta anche una c (center=centrato). Con questo cadono in questo caso le altre definizioni di posizionamento orizzontale. E per definire nella stessa istruzione anche le dimensioni dell'immagine, si aggiunge dopo uno spazio vuoto le definizione height=...px, width=...px o thumb, dopo float o frame. L'istruzione viene aperta e chiusa con %. P.es. %rframe width=100% http://... significa: posizionare l'immagine a destra con una larghezza di 100px in una cornice con il testo che circonda l'immagine.

%rfloat width=30% http://medpop.googlepages.com/IconMmP.jpg Il susseguente testo "fluisce" intorno all immagine. Lorem ipsum dolor Lorem ipsum dolor Lorem ipsum dolor Lorem ipsum dolor Lorem ipsum dolor Lorem ipsum dolor Lorem ipsum dolor Lorem ipsum dolor Lorem ipsum dolor Lorem ipsum dolor Lorem ipsum dolor Lorem ipsum dolor Lorem ipsum dolor Lorem ipsum dolor Lorem ipsum dolor Lorem ipsum dolor Lorem ipsum dolor Lorem ipsum dolor

Il susseguente testo "fluisce" intorno all immagine. Lorem ipsum dolor Lorem ipsum dolor Lorem ipsum dolor Lorem ipsum dolor Lorem ipsum dolor Lorem ipsum dolor Lorem ipsum dolor Lorem ipsum dolor Lorem ipsum dolor Lorem ipsum dolor Lorem ipsum dolor Lorem ipsum dolor Lorem ipsum dolor Lorem ipsum dolor Lorem ipsum dolor Lorem ipsum dolor Lorem ipsum dolor Lorem ipsum dolor

10.2  Testo a capo

Se a un certo punto di "testo intorno" si vuole che riprenda da capo sotto limmagine, si usa l'istruzione [[<<]].

%rfloat width=30% http://medpop.googlepages.com/IconMmP.jpg Il susseguente testo "fluisce" intorno all immagine. [[<<]] Lorem ipsum dolor Lorem ipsum dolor Lorem ipsum dolor Lorem ipsum dolor Lorem ipsum dolor Lorem ipsum dolor Lorem ipsum dolor Lorem ipsum dolor Lorem ipsum dolor Lorem ipsum dolor Lorem ipsum dolor Lorem ipsum dolor Lorem ipsum dolor Lorem ipsum dolor Lorem ipsum dolor Lorem ipsum dolor Lorem ipsum dolor Lorem ipsum dolor

Il susseguente testo "fluisce" intorno all immagine. Lorem ipsum dolor Lorem ipsum dolor Lorem ipsum dolor Lorem ipsum dolor Lorem ipsum dolor Lorem ipsum dolor Lorem ipsum dolor Lorem ipsum dolor Lorem ipsum dolor Lorem ipsum dolor Lorem ipsum dolor Lorem ipsum dolor Lorem ipsum dolor Lorem ipsum dolor Lorem ipsum dolor Lorem ipsum dolor Lorem ipsum dolor Lorem ipsum dolor

10.3  Leggende

Per scrivere una leggenda sotto un'immagine si scrive una linea verticale (alt7) dopo uno spazio vuoto dopo l'indirizzo dell'immagine, poi un'altro spazio vuoto e poi la leggenda. Per passare al testo, si va "a capo" nella casella di redazione.

%rframe thumb% http://www.sciencephoto.com/images/showIOTW.html?img_name=030906.jpg | '-Echeveria-'

Echeveria

10.4  Links su leggende

Volendo fare un link sulla leggenda, si fa il solito link nel posto della leggenda. La leggenda viene poi evidenziato in blu e cliccando, si arriva alla pagina linkata. Lo uso spesso per far vedere più in grande un icona nel testo. In questo caso, il link di immagine e leggenda sono gli stessi. Per l'esempio sopra risulterebbe.

%rframe thumb text-align=center% http://www.sciencephoto.com/images/showIOTW.html?img_name=030906.jpg | [[http://www.sciencephoto.com/images/showIOTW.html?img_name=030906.jpg | '-Echeveria-']]

Echeveria

10.5  Links dall'immagine stesso

Si può anche includere un link direttamente in un'immagine (senza leggenda). La struttura è:
[[URLlink | URLimmagine"ev.titolo"]]. Indirizzo del link | Indirizzo dell'immagine ed eventualmente un titolo dell'immagine che non viene mostrato (serve ai motori di ricerca) incluso in " ... " (stavolta non sono apostrofi). Il seguente esempio usa lo stesso indirizzo come link e come immagine.

(:nospacewikiwords:) (:nolinkwikiwords:) %comment% indica di scrivere normalmente MedPop %rframe width=50 text-align=center% [[http://medpop.googlepages.com/ | http://medpop.googlepages.com/IconMmP.jpg"Icona Enciclopedia di medicina popolare"]] | '-MedPop-'

indica di scrivere normalmente MedPop MedPop

Personalmente preferisco questa variante.

10.6  Centrare immagine e didascalia

k'ü hrtspülk rth btlh btl dbgrp dbfg %cframe width=50 text-align=center% [[http://www.pforster.ch/BBlogPics/IconMmP.jpg | http://www.pforster.ch/BBlogPics/IconMmP.jpg]] | '-Medpop-' j0990 baghk'üp0 bv düfpkl vbd ükp dbvüfp dvüfp dfb bvdfk dfb

k'ü hrtspülk rth btlh btl dbgrp dbfg Medpop j0990 baghk'üp0 bv düfpkl vbd ükp dbvüfp dvüfp dfb bvdfk dfb

11.  Casella di commento

Oltre alla possibilità di redigere lo scritto, bisogna anche dare la possibilità di commentare la pagina. Per cui ho infilato un motore di commento online. Si può (e si dovrebbe) aggiungerlo a ogni pagina, scrivendo l'istruzione commentbox tra (: e :), preferibilmente verso la fine della pagina. tutto il resto fa il programma.

12.  Piè di pagina

Un lettore di una pagina che l'ha trovata p.es. tramite Google, si interessa probabilmente di trovare la Home Page (che si trova nella lista a sinistra), ma anche il contesto dello scritto. anche i motori di ricerca tengono conto di questi collegamenti.

12.1  Links di collegamento contesto

Per facilitare la faccenda, ho fatto un semplice riassunto di links per la "Medicina popolare. Per infilare si da la seguente istruzione:

%center% '-(:includeurl
http://www.pforster.ch/BBlogPics/FooterLinks.html:)-'

Significa, che il programma infili (:includeurl una pagina http:// ... .html in minuscolo'- ... -' e centrato %center%.

12.2  Copyright

I diritti sono al solito da stabilire per dare al lettore una indicazione sulle sue possibilità d'uso della fonte. Quella di Bianca e me sono al solito:

%center% © Cc by P. Forster & B. Buser nc-2.5-it

Significa che il diritto d'autore è definito secondo le regole di "Creative commons tipo 2.5 in italiano" per Peter e Bianca come "nc = no commerce" non per scopi di lucro.

13.  Altre funzioni

Ce ne sono tante altre funzioni, ma penso di aver spiegato le elementari per stilare e redigere una pagina. Per informazioni approfondite è da consultare la documentazione (in inglese). Chi ha qualsiasi domanda o problema in merito, si rivolga a Peter o lo metta nalla casella di commento della pagina principale.

Un apprendistato favoloso è di curiosare in pagine di altri autori e di imparare da loro, come risolvono i loro compiti "stilistici". Un'esercizio di questo tipo: