domenica 23 settembre 2007

Textpattern: Breve Guida per Iniziare

Mi è capitato recentemente di dover mettere mano ad un sito realizzato con Textpattern. Di solito non uso questo cms e avevo avuto modo di darci solo una rapida occhiata diverso tempo fa. Devo dire che la seconda impressione è stata migliore della prima e mi è venuta voglia di buttare giù qualche riga sull'argomento.

Tanto per evitare di parlare solo di noiosa teoria ho pensato di usare Textpattern per creare un mini sito partendo da zero e mostrando l'intera procedura passo passo, per quanto possibile.

I più volenterosi (a dire così sembra di essere a scuola) possono provare a creare lo stesso sito in diretta leggendo l'articolo. Potete lavorare in locale se avete installati sul vostro PC Wamp Xampp o simili, o comunque Apache + PHP + MySql, oppure online se disponete di uno spazio web.

Io ho creato per questo scopo un sito di esempio su Netsons.org in modo che anche coloro che hanno meno voglia di lavorare possano vedere il risultato finale.

La miglior cosa è cominciare dall'inizio.

Installazione

Per chi è abituato a cms ben più corposi (come ad esempio Joomla) un pacchetto di installazione di poco più di 300 KB fa una certa impressione. Non dico che un cms debba valutarsi a peso, ma viene da chiedersi come possa esserci tutto quello che serve. E' una cosa che è molto facile scoprire.

L'installazione è semplice. Poniamo abbiate decompresso il pacchetto di installazione e copiati via FTP tutti i file in una cartella textp del vostro dominio, sarà sufficiente aprire il browser e visitare l'indirizzo www.vostrodominio.ext/textp/textpattern/ per avviare l'installazione via web.

Selezionata la lingua desiderata, si devono fornire le usuali informazioni: indirizzo server MySql, nome database MySql, utente MySql con privilegi sul database specificato e relativa password. Il database e l'utente devono essere già esistenti quindi vanno creati in precedenza con PHPMyAdmin o altro strumento di amministrazione del database messo a disposizione dall'host.

Devono essere poi forniti l'indirizzo del sito e il percorso alla cartella di Textpattern. Basta di solito confermare i dati già proposti.

Fatto questo, alla pagina successiva ci viene chiesto di creare un file config.php copiarci dentro i dati della configurazione presentati in una casella di testo e inserire poi il file nella cartella www.vostrodominio.ext/textp/textpattern/

Se vi state chiedendo per quale ragione il file di configurazione non possa essere generato automaticamente dallo script fate pure, ma non lo chiedete a me perché è quello che mi sono chiesto anch'io.

L'ultimo passaggio è inserire il nome, email, login e password dell'amministratore (meglio non perdersele).

Terminata l'installazione si può accedere all'area di amministrazione di Textpattern all'indirizzo www.vostrodominio.ext/textp/textpattern/ mentre la parte pubblica del sito è all'indirizzo www.vostrodominio.ext/textp/

Organizzazione del contenuto

In Texpattern la principale suddivisione logica dei contenuti del sito è costituita dalle sezioni.

Se per esempio volessimo realizzare con Textpattern un portale informativo potremmo creare le seguenti sezioni: Chi Siamo, Articoli, Risorse, Contatti.

Creare una sezione

Una volta effettuato il login come amministratore del sito selezionare le linguette

Aspetto -> Sezioni

L'installazione dovrebbe aver creato due sezioni about e article. Il sito di prova ci piace in italiano per cui cambiamo il campo Nome sezione rispettivamente in chi-siamo (i nomi delle sezioni non possono contenere spazi) e articoli. Cambiamo poi il campo Titolo sezione in Chi Siamo (gli spazi vanno bene nei titoli delle sezioni) e Articoli.

Infine modifichiamo il campo Usa la pagina della sezione articoli da archive a default. Le modifiche devono essere salvate separatamente per ogni sezione.

Per il momento non ci serve creare altre sezioni. Se volessimo farlo basterebbe scegliere il nome della sezione e premere Crea. La sezione viene creata ed aggiunta alla fine dell'elenco. Solo a questo punto se ne possono modificare le proprietà.

Inserire articoli

Predisposte le sezioni che ci interessano si possono inserire gli articoli.

Contenuti -> Scrivi

Textpattern non utilizza alcun editor WYSIWYG. gli articoli possono essere formattati includendo direttamente i tag html oppure si può utilizzare Textile.

Textile

Textile consente di formattare il testo con una sintassi semplificata. I marcatori Textile saranno poi convertiti in XHTML.

Per esempio una porzione di testo racchiusa tra asterischi sarà visualizzata in grassetto.

questa *parola* è evidenziata -> questa parola è evidenziata.

Il link Aiuto Textile sulla pagina inserimento articolo mostra l'elenco completo dei tag Textile che è possibile utilizzare.

Sinceramente io preferisco preparare il contenuto in un editor html esterno e fare poi un copia e incolla. Se avete la stessa abitudine selezionate il link Opzioni avanzate sulla sinistra e modificate l'impostazione da Usa Textile a Non intervenire sul testo sia per Codice articolo che per Codice sommario.

Sezione e categorie articolo

Ogni articolo è assegnato ad una sezione. La sceglieremo da una lista delle sezioni che abbiamo precedentemente creato che si trova nella colonna destra della pagina inserimento articolo.

Alcune sezioni tendono ad essere molto più affollate di altre. La sezione Chi Siamo conterrà probabilmente un solo articolo di presentazione dell'autore/i del sito, mentre la sezione Articoli può contenere centinaia di articoli.

Per questo Textpattern offre un'ulteriore criterio di classificazione dei contenuti, la categoria. Immediatamente al di sopra della lista sezioni si possono selezionare fino a due categorie per l'articolo. Seguendo il link Modifica a fianco della lista di selezione della prima categoria si viene indirizzati alla pagina di inserimento/modifica categorie (accessibile anche tramite le linguette: Contenuti -> Categorie).

Quelle che ci interessano per ora sono le Categorie Articoli (prima colonna).

Per il nostro sito creiamo le seguenti categorie: PHP, Javascript, Ajax.

Creare queste categorie è facile. Basta inserire il nome nella casella di testo e premere Crea. Si possono inoltre rimovere le categorie di prova create dall'installazione che con ogni probabilità non ci sono utili.

Stato articolo

Prima di salvare un articolo bisogna impostarne lo stato da una lista che si trova nella colonna destra della pagina inserimento articolo. Se si desidera salvare una versione preliminare dell'articolo non visibile nella parte pubblica del sito in modo da poterla editare in seguito, si imposta uno stato di Bozza, quando l'articolo è pronto per la pubblicazione si imposta uno stato di Visibile. Per il momento possiamo trascurare gli altri possibili stati.

Nel sito di prova ho creato due articoli (chiaramente finti!)

  • Chi Siamo (sezione Chi Siamo, nessuna categoria)
  • Introduzione al PHP (sezione Articoli, categorie PHP)

Createli anche voi scrivendo le prime fesserie che vi vengono in mente, tanto servono solo da riempitivo.

Inserire un'immagine nell'articolo

Volete non mettere una foto dell'autore e/o prorietario del sito nell'articolo Chi Siamo? Direi sarebbe quasi imperdonabile per cui ecco come si fa (a dire il vero questo è uno dei modi per farlo).

Siamo sempre nell'area di amministrazione. Selezionare

Contenuti -> Immagini

In alto a fianco della casella Carica immagine premere Sfoglia, selezionare un'immagine dal vostro hard disk, premere poi Carica.

Nella pagina successiva dovreste vedere la vostra immagine. Per quello che ci serve adesso è necessario preoccuparsi di riempire solo questi campi.

  • Nome immagine si può lasciare il nome del file
  • Testo Alternativo inserire ad es. Una mia fotografia

Premere Salva. Se tutto è andato bene, tornati alla schermata precedente, dovreste vedere il nome dell'immagine nell'elenco. Annotatevi il suo numero di ID (il valore sotto la prima colonna).

Visualizzare poi l'elenco articoli

Contenuti -> Articoli

Cliccare nell'elenco l'articolo Chi Siamo. Si apre la schermata di modifica articolo. Selezionare Opzioni avanzate, inserire nel campo Immagine articolo il numero di ID (attenzione che inserire il nome non va bene) dell'immagine caricata in precedenza e salvare.

A questo punto abbiamo assegnato l'immagine all'articolo, resta da impostare dove debba essere visualizzata. Selezionare

Aspetto -> Moduli

Accertarsi (controllando al di sotto della casella di testo al centro della pagina) che il nome del modulo selezionato sia default e la tipologia article. Altrimenti sul lato destro della pagina cliccare default sotto la colonna Modulo.

Modificate la casella di testo in questo modo (la riga in grassetto è l'unica da inserire, le altre devono esserci già altrimenti siete sul modulo sbagliato!)

<h3><txp:permlink><txp:title />
</txp:permlink> &#183; <txp:posted /></h3>
<txp:article_image class="article-image" />
<txp:body />
<p>&#8212; <txp:author /></p>
<txp:comments_invite wraptag="p" />
<div class="divider">
<img src="<txp:site_url />images/1.gif" width="400" 
height="1" alt="---" title="" /></div>

In pratica modifichiamo il formato di default di un articolo dicendo a Textpattern di includere un'eventuale immagine assegnata all'articolo prima del corpo dell'articolo (<txp:body />) stesso.

Non dimenticate di salvare il modulo.

I tag in Textpattern

<txp:article_image class="article-image" /> è un tag.

Un tag, con una certa semplificazione, perché come vedremo ci sono tag che svolgono una diversa funzione, è un segnaposto. Rappresenta cioè posizione ed attributi di una qualche entità che fa parte del contenuto.

I tag consentono di creare modelli della struttura di ogni tipologia di contenuti ed altri elementi del nostro sito.

Il modulo che abbiamo appena modificato rappresenta la struttura predefinita di un articolo del sito.

  1. Titolo con link alla pagina dell'articolo (permalink).
  2. Data
  3. Immagine
  4. Testo articolo
  5. Nome autore
  6. Sezione Commenti
  7. Separatore

Questo modello serve a Textpattern per determinare posizione ed attributi dei vari elementi quando un articolo viene visualizzato.

Da notare che nel nostro esempio usiamo lo stesso modulo per ogni articolo, ma è possibile creare quanti moduli vogliamo ed assegnare ad articoli diversi moduli diversi.

Tornando al tag <txp:article_image />, la sua funzione è di indicare la posizione dell'immagine assegnata all'articolo (ricordiamo che questo si fa inserendo l'ID dell'immagine nel campo Immagine articolo sotto Opzioni avanzate nella schermata di inserimento/modifica articolo).

Quando l'articolo è visualizzato, Textpattern inserisce al posto del tag il codice html necessario alla visualizzazione dell'immagine (<img src="..." />).

Abbiamo anche incluso un attributo del tag (class="article-image") che indica di assegnare al tag html <img> che visualizza l'immagine la classe article-image.

Modificare attributi immagine nel foglio di stile

Nel modulo abbiamo inserito l'immagine sopra il corpo dell'articolo, ma se lasciassimo tutto così l'effetto sarebbe veramente brutto: vogliamo che l'immagine sia allineata a sinistra con il testo che scorre a destra e sotto di essa.

Per ottenere questo dobbiamo modificare il foglio di stile. Selezionare

Aspetto -> Stile

Aggiungere alla fine del foglio di stile di default (c'è solo quello per cui non si può sbagliare)

.article-image {
  float:left;
  margin: 0 10px 10px 0;
}

Creare un menu di navigazione

Vogliamo a questo punto inserire un menu di navigazione nella colonna di sinistra con i link alle sezioni che abbiamo creato. Selezioniamo.

Aspetto -> Pagine

Accertiamoci che quella visualizzata sia la pagina di default e facciamo questa modifica (la riga da inserire è solo quella in grassetto, riporto le righe immediatamente precedenti e successive per consentirvi di trovare con facilità il punto dove fare la modifica).

...
<!-- left -->
<div id="sidebar-1">
<txp:section_list break="li" wraptag="ul" />
<txp:linklist wraptag="p" />
</div>
...

Abbiamo usato un altro tag, <txp:section_list />. Questo tag viene rimpiazzato con la lista dei titoli delle sezioni ovviamente collegati alle rispettive pagine. L'attributo break="li" indica che ciascun elemento (titolo sezione) sarà racchiuso tra i tag html <li> e </li>, mentre l'attributo wraptag="ul" indica che l'intero blocco sarà racchiuso tra <ul> e </ul>.

Salvate e visualizzate il sito (linguetta Mostra il sito). Dovreste vedere una lista delle sezioni sulla colonna di sinistra. Se usate l'opzione Visualizza sorgente pagina del vostro browser vi renderete conto del codice html con cui Textpattern ha rimpiazzato il tag.

In conclusione (per ora)

Riassumendo abbiamo visto:

  • Come installare Textpattern
  • Come creare sezioni
  • Come scrivere un articolo con Textile o in html
  • Come creare categorie
  • Come gestire lo stato di pubblicazione di un articolo
  • Come caricare un'immagine ed assegnarla all'articolo
  • Come aggiungere tag a modulo e pagina di default e modificare il foglio di stile

Il risultato di quello che abbiamo fatto è visibile sul sito di esempio. Certo molto bello da vedere non è, ma all'estetica possiamo pensare in seguito.

Per ora è tutto.

Nessun commento:

Posta un commento

Nota. Solo i membri di questo blog possono postare un commento.