Markdown source

#L'editing di articoli su www.tanzolab.it

<abstract>
Come scrivere articoli su TanzoLab.it
</abstract>

##Concetti generali

<blockquote markdown="1">
Gli articoli possono essere inseriti usando l'editor on-line Codiad disponibile da questo link:

* [Editor on-line](/edit)

Il fomato di scrittura è [Markdown](https://daringfireball.net/projects/markdown/) misto a html. 

Per poter accedere in scrittura occorre avere una coppia user/password da chiedere a Sergio Tanzilli.

Per ogni articolo va creata una directory nella sezione __Explore__ di Codiad. Il nome della directory
deve essere tutto minuscolo, tutto attaccato (si possono usare solo i segni di interpunzione "-" e "_" ). 

Il nome scelto per l'articolo deve evocarne il contenuto in quanto farà parte integrante della sua URL.

Ad esempio l'articolo che stai leggendo è accessibile su [http://www.tanzolab.it/help](http://www.tanzolab.it/help) 
ed è memorizzato su un file salvato nella directory __help__ del progetto __public__ con nomefile __help.md__ comevisibile 
qui sotto:

<img src="./screenshot.jpg" class="img-responsive" width="100%">

Il pannello __Explore__ di Codiad riporta la radice delle directory del progetto.

Il pannello __Projects__ contiene l'elenco delle directory progetto a cui può accedere un autore.

E' possibile vedere il sorgente di qualsiasi articolo contenuto nel CMS specificando l'URL diretta.

Ad esempio [http://www.tanzolab.it/help](http://www.tanzolab.it/help) è visible dalla URL
[http://www.tanzolab.it/public/help/help.md](http://www.tanzolab.it/public/help/help.md)
</blockquote>

##Sandbox

<blockquote markdown="1">
E' possibile fare esperimenti accedendo al progetto <b>sandbox</b> è creando un articolo con il proprio <b>nomecognome</b>
</blockquote>

##Markdown extra

* [Markdown sintassi extra](https://michelf.ca/projects/php-markdown/extra/#table)

##Sistema di griglie Bootstrap

* [Bootstrap grid system](http://getbootstrap.com/css/#grid)


##Basato su Bootstrap 3.x

<blockquote markdown="1">
Di seguito riporto un pò di esempi veloci ma in generale, essendo tutto basato su Bootstrap,
vale tutto quello che è riportato qui: [http://getbootstrap.com/components/](http://getbootstrap.com/components/)
ad eccezione dei tag che iniziano con __@__ che invece sono particolari di questo CMS e implementati in PHP.
</blockquote>

##Elementi di testo

<blockquote markdown="1">

Sorgente nell'articolo:

	#Titolo 1
	##Titolo 2
	###Titolo 3

Risultato:

#Titolo 1
##Titolo 2
###Titolo 3

Il testo invece si scrive semplicemente senza nessun tag particolare

Sorgente nell'articolo:

	Ciao a tutti questo è un testo semplice

Risultato:

Ciao a tutti questo è un testo semplice

</blockquote>

##Abstract del'articolo

<blockquote markdown="1">

L'abstract contiene una descrizione breve del contenuto dell'articolo

Sorgente nell'articolo:

#Come fare soldi senza lavorare

	<abstract>
	In questo articolo vi spiegheremo come fare soldi senza lavorare
	</abstract>

Risultato:

#Come fare soldi senza lavorare

<abstract>
In questo articolo vi spiegheremo come fare soldi senza lavorare.. prendete appunti.
</abstract>

</blockquote>


##Inserimento immagini

<blockquote markdown="1">
Le immagini devono essere salvate nella stessa directory dell'articolo. Cliccando con il tasto destro del mouse sul
nome della directory e selezionando la voce __Update files__ si apre il box __Upload files__ in cui si possono trascinare
i file delle immagini da inserire nell'articolo.

<img src="./upload_files.jpg" class="img-responsive" width="25%">

All'interno dell'articolo una immagine si inserisce con il seguente tag html:

<pre class="prettyprint">
&lt;img src="&#46;/screenshot.png" class="img-responsive center-block" width="80%"&gt;
</pre>

E' preferibile usare direttamente il tag HTML invece della forma semplificata di Markdown per poter
sfruttare le classi Bootstrap come in questo caso in cui la classe __img-responsive__ consente di
inserire immagini che si ridimensionano automaticamene con la pagina. Per evitare di appensantire il sito inserite 
immagini jpeg non più grandi di 200Kbytes.
</blockquote>

##Bottoni

Per inserire dei bottoni all'interno della pagina vi consiglio di creare il vostro bottone
da questo sito:

* <a href="https://bootsnipp.com/buttons" target="_blank">Bootstrap Button Generator </a>

ed inserire il codice HTML generato direttamente nell'articolo.

</blockquote>


##Inserimento di codice

<blockquote markdown="1">
E' possibile inserire del codice sorgente di esempio all'interno del testo usando spostando il testo di 
un tab dal margine sinistro:

		ls -al 

Oppure usando la classe prettyprint nel caso si voglia colorare la sintassi:

	<pre class="prettyprint">
		<font color="red">...righe di codice da inserire...</font>
	</pre>

Grazie a [Google code-prettify](https://github.com/google/code-prettify) la sintassi del codice verrà
colorata automaticamente.

###Esempio 

Sorgente nell'articolo:

	<pre class="prettyprint">
	#include "stdio.h"
	 
	int main(void) {
	  printf("Hello world !\n");
	  return 0;
	}
	</pre>

Risultato:

<pre class="prettyprint">
#include "stdio.h"
 
int main(void) {
  printf("Hello world !\n");
  return 0;
}
</pre>
</blockquote>

##Inserimento esempi di comandi Linux

<blockquote markdown="1">
Sorgente nell'articolo:

<pre class="prettyprint">
&lt;pre class="terminal"&gt;
ls -al
&lt;/pre&gt;
</pre>

Risultato:

	ls -al

</blockquote>

##Inserimento di esempi di codice salvati nella directory dell'articolo

<blockquote markdown="1">
<div class="alert alert-warning"><span class="glyphicon glyphicon-exclamation-sign" aria-hidden="true"></span> Funziona solo per gli articoli inseriti nel progetto <b>public</b></div>

Sorgente nell'articolo:

<pre>
&#64;source='hello.cpp'
</pre>

Risultato:

@source='hello.cpp'

E' importante usare i singoli apici per il nome del sorgente da includere
</blockquote>


##Inclusione di esempi di codice da GitHub

<blockquote markdown="1">
Ipotizzando di voler visualizzare il seguente sorgente preso da GitHub:

<pre class="terminal">
Sito: <b>https://github.com</b>
	User: <b>acmesystems</b>
		Project: <b>acmepins</b>
			File: <b>setup.py</b>
</pre>

Inseriamo nel sorgente:

	<div class="github" user="acmesystems" project="acmepins" file="setup.py">
	</div>

Per avere il seguente risultato:

<div class="github prettyprint" user="acmesystems" project="acmepins" file="setup.py">
</div>
</blockquote>

##Riferimenti ad altri articoli

<blockquote markdown="1">
Sorgente nell'articolo:

<pre>
&#42; &#64;article='mqtt'
&#42; &#64;article='openhab'
&#42; &#64;article='cm3'
</pre>

Risultato:

Link e titolo di altri articoli presenti sul sito 

* @article='mqtt'
* @article='openhab'
* @article='cm3'
</blockquote>

##Inclusione di altri articoli

<blockquote markdown="1">
Esempio di inclusione dell'articolo [http://www.tanzolab.it/licence](/licence)

<pre>
&#64;include='docterms'
</pre>

</blockquote>

##Alerts

<blockquote markdown="1">
<div class="alert alert-success">
  <strong>Success!</strong> Indicates a successful or positive action.
</div>

<div class="alert alert-info">
  <strong>Info!</strong> Indicates a neutral informative change or action.
</div>

<div class="alert alert-warning">
  <strong>Warning!</strong> Indicates a warning that might need attention.
</div>

<div class="alert alert-danger">
  <strong>Danger!</strong> Indicates a dangerous or potentially negative action.
</div>

	<div class="alert alert-success">
	  <strong>Success!</strong> Indicates a successful or positive action.
	</div>
	
	<div class="alert alert-info">
	  <strong>Info!</strong> Indicates a neutral informative change or action.
	</div>
	
	<div class="alert alert-warning">
	  <strong>Warning!</strong> Indicates a warning that might need attention.
	</div>
	
	<div class="alert alert-danger">
	  <strong>Danger!</strong> Indicates a dangerous or potentially negative action.
	</div>
</blockquote>

##Inserimento icona "Under construction"

<blockquote markdown="1">
Sorgente nell'articolo:

<pre class="prettyprint">
&#64;wip
</pre>

Risultato:

@wip
</blockquote>

##inserimento biografia autore a fine articolo

<blockquote markdown="1">
Sorgente nell'articolo:

<pre class="prettyprint">
&#64;include='bio_sergio_tanzilli'
</pre>

Risultato:

@include='bio_sergio_tanzilli'

Se la vostra biografia non appare è perchè non c'è ancora nel sito, per 
aggiungerla fate una copia dell'articolo __bio_sergio_tanzilli__ e 
rinominatela __bio_cognome_nome__ aggiungendo i vostri dati.
</blockquote>

##Inserimento emoticon

<blockquote markdown="1">
&amp;#128514;
</pre>

Risultato:

&#128514;

[Lista dei codici per gli emoticon](https://websitebuilders.com/tools/html-codes/emoticons/
)

</blockquote>