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 i tag:

	<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>

The TanzoLab Project

Il TanzoLab è una iniziativa senza fini di lucro, nata da un'idea di Sergio Tanzilli socio fondatore di Acme Systems srl nel Novembre 2015, per trasferire ad appassionati di elettronica e informatica, professionisti e aziende nel settore, le conoscenze necessarie per poter creare prodotti embedded adatti per la produzione industriale.

Le attività del TanzoLab si svolgono ogni mercoledi sera, salvo casi speciali, dalle ore 18:30 presso i locali della Acme Systems srl e consistono in:

  • Talk monotematici a cura di professionisti in vari settori tecnologici
  • Workshop pratici su elettronica embedded, produzione e informatica
  • Progettazione e realizzazione di nuovi prodotti embedded per l'IT

Le attività vengono coordinate tramite questo sito, in cui vengono pubblicati tutti i lavori svolti o in via di sviluppo, e tramite un gruppo Telegram con cui per interagire direttamente via chat con gli altri membri.