Sviluppare un tema per Open Journal System 3+

Introduzione

Il sistema open source di gestione editoriale Open Journal System credo sia il più diffuso tra quelli destinati alla pubblicazione di riviste accademiche. Ne esistono altri da prendere in considerazione: Annotum, basato su wordpress, che trovo interesssante perché contiene un editor per la versione xml degli articoli scientifici sviluppato della National Library of Medicine, ora JATS, e Ambra sistema editoriale alla base delle riviste PLOS.

La nostra scelta è caduta su OJS per la grande quantità di plugin in grado di esportare metadati in tutti i formati più diffusi. Potremmo dire che OJS è una piattaforma destinata alla gestione, acquisizione e distribuzione di contenuti scientifici. Il lavoro di impaginazione dei file, nei diversi formati, viene svolto a parte con i consueti strumenti. In CLUEB utilizziamo un processo xml basato su DocBook.

Installare OJS 3+

Da qualche tempo è disponibile una versione di OJS (3.0 e successive) che, diversamente dalle precedenti, fa uso di Bootstrap. Questo framework consente lo sviluppo di temi personalizzati in modo semplice e veloce. Vediamo nelle linee generali come procedere.

Scaricate sulla vostra macchina una copia di OJS,

curl -O http://pkp.sfu.ca/ojs/download/ojs-3.0.1.tar.gz

dove il numero della versione naturalmente dovrà essere l’ultima disponibile, così da fare liberamente tutte le “prove” che vorrete prima di andare in “produzione” con un sito effettivamente aperto al pubblico. OJS su un server richiede linux ma in locale potete provare anche con macOS o l’ultimo windows 10 con la possibilità di utilizzare bash (dovrebbe funzionare ma non ho mai provato direttamente). Avrete bisogno anche di mysql, apache2 e php.

Estraete i file compressi

tar xzvf ojs-3.0.1.tar.gz

a questo punto copiate i file sulla directory del web server

sudo cp -a /tmp/ojs-3.0.1/. /var/www/html

Nella cartella

/var/www/html/docs

troverete una serie di file con descrizioni dettagliate su come fare l’installazione. Queste note comunque dovrebbero essere sufficienti.

Assegnate i file al gruppo www-data (che è quello del web server)

sudo chown -R claudio:www-data /var/www/html

al posto di ‘claudio’ mettete il nome dell’utente, che probabilmente sarà il vostro.

***************

Se avete dubbi su cosa siano o su come si gestiscano i permessi in linux leggete questo tutorial http://www.codecoffee.com/tipsforlinux/articles/032-1.html

***************
Consentite la scrittura sulle seguenti cartelle (e relative sottocartelle):

sudo chmod -R g+w /var/www/html/cache
sudo chmod -R g+w /var/www/html/public
sudo chmod g+w /var/www/html/config.inc.php

create quindi una cartella, inaccessibile agli utenti web, dove verranno caricati i file degli articoli ma con i diritti di scrittura (il nome è irrilevante, ad esempio usate

files

verrà scritto sul file di configurazione durante l’installazione iniziale)

sudo mkdir /var/www/files
sudo chmod -R g+w /var/www/files
sudo chown -R claudio:www-data /var/www/files

A questo punto OJS è pronto e dovete pensare al database MySQL. Controllate di avere un account con i diritti di accesso a MySQL.
Da terminal scrivete

mysql -u root -p

e quindi inserite la password che vi verrà chiesta. Se tutto funziona segnatevi i dati che tra un attimo vi verranno chiesti dal programma di installazione di OJS: il nome dell’host, che in questo caso sarà semplicemente localhost, l’account che accederà a MySQL che sarà probabilmente root, con relativa password. Il nome del database non è necessario perché verrà creato in un secondo tempo, ma se preferite potete crearlo subito, comunicando poi al momento dell’installazione che lo avete già creato.
Andate ora con un browser alla pagina localhost e vi comparirà una pagina di installazione. Seguite le indicazioni e installate OJS. Il sito è pronto e potrete iniziare a caricare i vostri articoli. I dettagli editoriali non sono pochi e potrete leggerne alcuni in queste pagine e più in generale in queste .

Controllate che tutti i pacchetti PHP necessari a OJS siano installati. Ad esempio su ubuntu 16.04 che di default presenta PHP 7.0  manca (novembre 2017) quello destinato all’xml e quello per l’mbstring.

sudo apt-get install php7.0-xml
sudo apt-get install php7.0-mbstring

Per rendere operativi questi programmi è necessario riavvare apache:

sudo systemctl restart apache2

Installare il tema bootstrap3

Andate nella directory

/var/www/html/plugins/themes

dove, tra i diversi plugins, troverete la cartella con i temi, qui troverete un tema denominato ‘default’, che vi servirà da guida nella costruzione del vostro. Ecco l’elenco dei file di un tema tipo:

Dovrete personalizzare, e lo vedremo meglio più avanti, i file

DefaultThemePlugin.inc.php, index.php e version.xml

aggiungendo inoltre, o modificando, i file css, javascript e i templates nelle cartelle corrispondenti.
Scarichiamo e installiamo il tema “bootstrap3” preparato da Nate Wright  di cui ci serviremo per costruire il tema child.

curl -O https://github.com/NateWr/bootstrap3/releases/download/x.x.x/bootstrap3-vx.x.x.x.zip

Fate attenzione, dovrete installare il tema corrispondente alla versione OJS 3+, sostiuendo le x con il valore che troverete sul sito.  L’installazione è molto semplice. Copiate la cartella del vostro tema come sottocartella di plugins/themes/ , quindi andate nella pagina dei plugin (Administration – Settings – Plugins), cliccate a fianco del nuovo tema che ora comparirà con gli altri e il gioco è fatto. Volendo, a partire dalla versione 3.0.1, potrete scegliere per ogni rivista temi diversi fra quelli installati, anche all’interno dello stesso sito web.
Il tema per OJS bootstrap3 consiste in realtà di una collezione di sottotemi, fra cui dovrete scegliere quello che preferite. Li troverete tutti elencati e selezionabili nella pagina dei settings. Per ulteriori informazioni sulle modalità di sviluppo e le caretteristiche dei css di questo tema visitate il sito https://bootswatch.com/ .

Creare un tema child

Per creare un tema child di bootstrap3 iniziate con il copiare l’intera cartella denominandola, ad esempio, bootchild. Caricate la cartella nella directory plugins/themes.

In quella che è la directory principale del nostro tema child troverete un file chiamato BootstrapThreeThemePlugin.inc.php, ridenominatelo con il nome del vostro tema child BootchildThemePlugin.inc.php.

Le prime due righe, dopo una serie di commenti che cambierete a vostro piacimento in un secondo tempo, sono le seguenti:

import('lib.pkp.classes.plugins.ThemePlugin');
class BootstrapThreeThemePlugin extends ThemePlugin {

modificate il nome della classe in BootchildThemePlugin e fate lo stesso nelle funzioni che troverete alla fine della pagina function getDisplayName() e function getDescription. Queste ultime servono a richiamare correttamente il nome del vostro tema nelle diverse pagine del pannello di amministrazione. Per far sì che il vostro tema compaia correttamente denominato andate nella cartella locale e modificate il file della lingua che vi interessa aggiungendo il nome del vostro tema. Ad esempio

<locale name="en_US" full_name="U.S. English">
	
	<message key="plugins.themes.bootstrap3.name">Bootstrap 3 Base Theme</message>
	<message key="plugins.themes.bootstrap3.description">A starter Bootstrap 3 theme for the reader frontend.</message>
</locale>

diventeranno

<locale name="en_US" full_name="U.S. English">
	<message key="plugins.themes.bootchild.name">Il mio bellissimo tema child</message>
	<message key="plugins.themes.bootchild.description">Ho sempre desiderato personalizzare un tema.</message>
</locale>

Ritorniamo al file che definisce la nostra classe BootchildThemePlugin.inc.php. Prendiamo ora in considerazione la funzione più importante

public function init() {

eliminate tutte le righe che non vi servono e mettete quella che determina il tema genitore

{$this->setParent('defaultthemeplugin');}

oppure

{$this->setParent('bootstrapthreethemeplugin');}

Aggiungete poi i file CSS, direttamente o nella versione LESS (questi verranno compilati automaticamente), o i file javascript che giudicherete utili per il vostro tema con i seguenti comandi:

{$this->addStyle('my-custom-style', 'styles/stylesheet.css')};
{$this->addStyle('other-custom-style', 'styles/index.less');}
{$this->addScript('my-javascript', 'js/main.js');}

questi path sono riferiti alla directory principale del tema in cui BootchildThemePlugin.inc.php si trova.
Ecco un esempio di come dovrebbe apparire alla fine il vostro file:

import('lib.pkp.classes.plugins.ThemePlugin');
class BootchildThemePlugin extends ThemePlugin {
	/**
	 * Initialize the theme's styles, scripts and hooks. This is only run for
	 * the currently active theme.
	 *
	 * @return null
	 */
	public function init() {
		$this->setParent('bootstrapthreethemeplugin');
		$this->modifyStyle('default', array('addLess' => array('less/head.less')));/* Questo è il nome di un file aggiunto*/
	}
	/**
	 * Get the display name of this plugin
	 * @return string
	 */
	function getDisplayName() {
		return __(' ');
	}
	/**
	 * Get the description of this plugin
	 * @return string
	 */
	function getDescription() {
		return __(' ');
	}
}

Modificate poi i file index.php e version.xml uniformando il nome della vostra classe tutte le volte che viene richiamato.
Per i template dovete invece semplicemente sostituirli con la nuova versione badando bene di conservarne i nomi e i path (cioè la struttura delle cartelle e i relativi nomi).
Ad esempio se volete che nella home page della vostra rivista compaiano anche i sottotitoli degli articoli, di default vi compaiono solo i titoli, aprite il file frontend/objects/article_summary.tpl (i template sono scritti in smarty, ma sono di facile lettura), cercate il punto che vi interessa

<a href="{url page='article' op='view' path=$articlePath}">
				{$article-&gt;getLocalizedTitle()|strip_unsafe_html}</a>

e modificatelo di conseguenza

<a href="{url page='article' op='view' path=$articlePath}">
				{$article->getLocalizedTitle()|strip_unsafe_html}<br />
				{$article->getLocalizedSubtitle()|strip_unsafe_html}
			</a>

ovviamente per sapere come viene chiamato il sottotitolo {$article->getLocalizedSubtitle()} non potete far altro che fare una ricerca sugli altri file o farvi aiutare dall’ottimo forum degli sviluppatori.

A questo punto non vi resta che abilitare il plugin che avete creato e applicarlo al vostro nuovo sito.

Per ogni informazione non esitate a scriverci. CLUEB e Open-word sono a vostra disposizione per lo sviluppo di soluzioni personalizzate di editoria digitale e siti web in generale.

Server Linux (appunti per il master in comunicazione storica)

Questa è una breve introduzione all’uso dei principali comandi linux indispensabili alla gestione di un piccolo server su cui installare i propri documenti o semplici applicazioni. Lo sviluppo del cloud computing ha modificato in maniera sostanziale non solo la modalità di distribuzione delle applicazioni ma anche il modo con cui procurarsi uno “spazio” web.

Questo tutorial richiede  una macchina linux, mac os o anche windows, purché  windows 10 con installato il sottosistema ubuntu (su linux in windows leggete questa pagina del sito Microsoft). Direttamente dalla vostra console potrete gestire un server, o gruppi di server a seconda delle vostre esigenze.

I servizi più ampi e articolati sono forniti da Amazon AWS, Google Cloud, Microsoft Azure. Noi ci limiteremo a installare un server web su un server remoto, pubblicamente accessibile, e sarà più semplice e veloce rivolgerci a digitalocean.com, linode.com o amazonlightsail.com. In questo tutorial utilizzeremo digitalocean.com.

I server (VPS in realtà) in digitalocean vengono chiamati ‘droplets’. Potete registrarvi gratuitamente e utilizzare un server per due mesi utilizzando questa pagina.

Create un server cloud utilizzando Ubuntu 16.04.02 e scegliete la dimensione d’ingresso:  512 MB di RAM, con un disco SSD da 20 GB. La zona geografica dove si troverà il server è abbastanza ininfluente, ma scegliete quella più vicina ai vostri futuri utenti, Francoforte nel nostro caso. Concludete ora la creazione del server saltando gli altri passaggi, ritorneremo presto sulla questione della chiave SSH.

Supponiamo che l’indirizzo IP del vostro server sia 11.11.11.11. Accedete via ssh digitando nella console:

ssh root@11.11.11.11

e digitate ora la password che vi sarà stata inviata per mail.

Leggete https://www.digitalocean.com/community/tutorials/initial-server-setup-with-ubuntu-16-04

Primo step: aprite un account github dove conserverete copia di tutti i file degli esercizi

Secondo step installate e impratichitevi con un editor di testo:

Sublime Text https://www.sublimetext.com/

Atom https://atom.io/

Bracket http://brackets.io/

Visual Studio Code https://code.visualstudio.com/

Da non dimenticare vim (o vi o nano) che troverete direttamente sui server, oppure il classico emacs, gedit o notepad++

Terzo step preparate una macchina su cui farete esperimenti sia di server web che sviluppo applicazioni.

Per qualsiasi informazione stackoverflow

manuale di bash https://www.gnu.org/software/bash/manual/bash.html

manuale di bash scripting http://tldp.org/LDP/Bash-Beginners-Guide/html/

manuale avanzato http://tldp.org/LDP/abs/html/

Per interagire con il sistema operativo si deve usare una shell (command-line interface).

L’amministratore di un sistema linux si chiama root

Root crea e gestisce tutti gli utenti, gli utenti sono suddivisi in gruppi. I gruppi che incontreremo sono, per ora, solo due. Il gruppo degli utenti che in qualche situazione particolare devono agire come root, gruppo ‘sudo’, il gruppo a cui appartiene il web server: www-data.

Per cambiare la passwd si deve digitare:

passwd
sudo passwd user #se volete cambiare la password di un 
# utente e avete l'autorità per farlo

Per creare un nuovo utente:

sudo adduser pippo

Per aggiungerlo al gruppo ‘sudo’ che autorizza i suoi membri a molte operazioni da ‘amministratore’ scrivete

sudo usermod -aG sudo pippo

 Per cambiare la passwd si deve digitare:

passwd
sudo passwd user #se volete cambiare la password di un 
# utente e avete l'autorità per farlo

Per creare un nuovo utente:

sudo adduser pippo

Per aggiungerlo al gruppo ‘sudo’ che autorizza i suoi membri a molte operazioni da ‘amministratore’ scrivete

sudo usermod -aG sudo pippo

Tutti i file (e le directory e i programmi) sono dotati di alcuni privilegi. I privilegi saranno diversi per l’autore del file (owner), per il gruppo a cui appartiene (group) e distinti da tutti gli altri utenti (others). I privilegi saranno quindi distinti in tre gruppi, ad esempio l’owner avrà diritto di scrittura, lettura ed esecuzione.

  • read 4
  • write 2
  • execute 1

In questo caso si attribuiscono i diritti di scrittura, lettura ed esecuzione all’owner del file (prima cifra) e solo read e write al gruppo e agli altri. I file web hanno in genere queste autorizzazioni con l’owner che appartiene al gruppo www-data o in cui l’owner è proprio www-data

chmod 755 file

Altri comandi:

mkdir
cd # cambiare directory
ls #lista dei file in una directory
ls -la # lista con dettagli sui file
ls -lt # lista con dettagli in ordine temporale (prima i nuovi)
rm file # cancella un file
rm -rf / # tipico esempio catastrofico, cancella in maniera 
# ricorsiva tutti i file partendo dalla directory root

Installate un server Apache2, un database mysql e caricate qualche semplice pagina web.

I più diffusi server web sono Apache e Nginx.

Installate un server Apache2, un database mysql (nel caso serva alla vostra applicazione) e caricate qualche semplice pagina web.

Per conoscere un po’ meglio un server Apache, guardiamo prima di tutto alla sua directory:

cd /etc/apache2/

e in particolare il file

000-default.conf

che contiene le indicazioni su dove si trovano i file ed eventuali link all’applicazione che genera file dinamici.

Quando si installa php è necessario effettuare una modifica nel file

 /etc/apache2/mods-enabled/dir.conf

Da:

<IfModule mod_dir.c>
    DirectoryIndex index.html index.cgi index.pl index.php index.xhtml index.htm
</IfModule>

a (spostando indix.php nella prima posizione)

<IfModule mod_dir.c>
    DirectoryIndex index.php index.html index.cgi index.pl index.xhtml index.htm
</IfModule>

Tutte le volte che si effettuano correzioni è necessario effettuare un controllo

sudo apache2ctl configtest

Il server normalmente si avvia automaticamente (daemon o servizio) ma se necessario si possono usare i seguenti comandi:

systemctl gestisce i comandi di systemd (gestore dei diversi servizi che vengono necessariamente avviati al boot del sistema)

sudo systemctl disable apache2
sudo systemctl enable apache2

Gli altri comandi necessari sono i seguenti:

sudo systemctl stop apache2
sudo systemctl start apache2
sudo systemctl restart apache2

A questo punto potete caricare i file via scp direttamente su /var/www/html .

Consultate

man scp

per le informazioni necessarie.

Se vorrete utilizzare un’applicazione nodejs bisognerà configurare il server web in modo leggermente differente.

https://www.digitalocean.com/community/tutorials/how-to-set-up-a-node-js-application-for-production-on-ubuntu-16-04 o qualcosa simile a

Nel file httpd.conf scrivete

ProxyPass /node http://localhost:8000/

Controllate che non siano commentate le seguenti righe

LoadModule proxy_module modules/mod_proxy.so
LoadModule proxy_http_module modules/mod_proxy_http.so

Infine nella vostra applicazione lanciate il solito server socket

var http = require('http');
http.createServer(function (req, res) {
  res.writeHead(200, {'Content-Type': 'text/plain'});
  res.end('Hello Apache!\n');
}).listen(8000, '127.0.0.1');