Forum: suggerimenti, trucchi e funzioni nascoste (parte 1)

Oltre alle funzionalità già presenti sull’editor , in questo forum sono presenti molte altre funzioni “nascoste” che esporremo in questo thread.

Questa guida verrà aggiornata ogni volta che verranno aggiunte nuove funzionalità.


Cliccare sulla sezione che si vuole consultare:

========================================================================

Formattazione testo:

  • testo sottolineato
[u]testo sottolineato[/u]
  • testo barrato
[s]testo barrato[/s]
  • testo allineato a sinistra
<div align=left>testo allineato a sinistra</div>
  • testo centrato
<div align=center>testo centrato</div>
  • testo allineato a destra
<div align=right>testo allineato a destra</div>
  • testo giustificato
<div align=justify>testo giustificato</div>
  • rimpicciolire un testo (senza usare gli header)

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas porttitor velit ante, et condimentum mi egestas non. Morbi malesuada leo vitae ligula aliquet, eu auctor odio viverra. Morbi sit amet mi tincidunt urna fringilla ultrices eget quis nisi. Quisque eget dolor quis eros porttitor pharetra. Pellentesque maximus fringilla tellus non posuere. Sed nisl metus, consectetur vel facilisis vel, pharetra mattis elit. Quisque laoreet odio ac risus pharetra varius. Phasellus ultrices dapibus quam, non tristique sem consectetur eget.
<small>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas porttitor velit ante, et condimentum mi egestas non. Morbi malesuada leo vitae ligula aliquet, eu auctor odio viverra. Morbi sit amet mi tincidunt urna fringilla ultrices eget quis nisi. Quisque eget dolor quis eros porttitor pharetra. Pellentesque maximus fringilla tellus non posuere. Sed nisl metus, consectetur vel facilisis vel, pharetra mattis elit. Quisque laoreet odio ac risus pharetra varius. Phasellus ultrices dapibus quam, non tristique sem consectetur eget.
</small>
  • ingrandire un testo (senza usare gli header)

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas porttitor velit ante, et condimentum mi egestas non. Morbi malesuada leo vitae ligula aliquet, eu auctor odio viverra. Morbi sit amet mi tincidunt urna fringilla ultrices eget quis nisi. Quisque eget dolor quis eros porttitor pharetra. Pellentesque maximus fringilla tellus non posuere. Sed nisl metus, consectetur vel facilisis vel, pharetra mattis elit. Quisque laoreet odio ac risus pharetra varius. Phasellus ultrices dapibus quam, non tristique sem consectetur eget.
<big>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas porttitor velit ante, et condimentum mi egestas non. Morbi malesuada leo vitae ligula aliquet, eu auctor odio viverra. Morbi sit amet mi tincidunt urna fringilla ultrices eget quis nisi. Quisque eget dolor quis eros porttitor pharetra. Pellentesque maximus fringilla tellus non posuere. Sed nisl metus, consectetur vel facilisis vel, pharetra mattis elit. Quisque laoreet odio ac risus pharetra varius. Phasellus ultrices dapibus quam, non tristique sem consectetur eget.
</big>
  • aumentare la spaziatura fra blocchi di testo allineati
<p>Questo testo andrà "a capo" due volte, anzichè una</p>

oppure

<p align=left,center o right>Anche questo testo andrà "a capo" due volte, anzichè una"</p>
  • testo in apice (ad esempio E=mc2)
E=mc<sup>2</sup>
  • testo in pedice (ad esempio H2O)
H<sub>2</sub>O
  • inserzioni di testo (ad esempio questo testo è stato inserito ed evidenziato)
<ins>questo testo è stato inserito ed evidenziato</ins>
  • cancellazioni di testi (ad esempio questo testo è stato cancellato ed evidenziato)
<del>questo testo è stato cancellato ed evidenziato</del>
  • quotare un testo a più livelli (diverso dal “Rispondi citando” o dall’uso del tasto che quota solo al primo livello)

Nel mezzo del cammin di nostra vita mi ritrovai per una selva oscura ché la diritta via era smarrita

Ahi quanto a dir qual era è cosa dura esta selva selvaggia e aspra e forte che nel pensier rinova la paura!

Tant’è amara che poco è più morte; ma per trattar del ben ch’i’ vi trovai, dirò de l’altre cose ch’i’ v’ho scorte.

> Nel mezzo del cammin di nostra vita mi ritrovai per una selva oscura ché la diritta via era smarrita
>>Ahi quanto a dir qual era è cosa dura esta selva selvaggia e aspra e forte che nel pensier rinova la paura!
>>>Tant'è amara che poco è più morte; ma per trattar del ben ch'i' vi trovai, dirò de l'altre cose ch'i' v'ho scorte.
  • informazioni di contatto (generalmente per citare qualche sito, il link viene usualmente visualizzato in corsivo) esempio link
<address><a href="https://example.com/"> esempio link</a></address>
  • digitazione da tastiera (spaziatura fissa)
<kbd>digitazione da tastiera</kbd>
  • sintassi per spiegare un acronimo che gli utenti potrebbero non conoscere. Gli acronimi con questa sintassi appaiono con sotto una riga composta da puntini. Per vedere il significato basta passarci sopra il mouse (no click)

CEO
HTTP

<abbr title="Chief Executive Officer - Amministratore delegato">CEO</abbr>
<abbr title="Hyper Text Transfer Protocol">HTTP</abbr>
  • inserire Task lists (o To Do Lists) con le “caselle di controllo” per spuntare i compiti già svolti.

Ad esempio:

  • @menzioni, #refs, links e formattazione sono supportati
  • è richiesto l’uso della sintassi per gli elenchi puntati (“ordinati” o meno non fa differenza)aggiornamento: non è più necessario usare l’elenco puntato
  • questa casella indica un compito già svolto
  • una casella senza il check indica un compito ancora da svolgere
 - [*] @menzioni, #refs, [links]() e **formattazione** sono supportati
 - [_] è richiesto l'uso della sintassi per gli elenchi puntati ("ordinati" o meno non fa differenza)
 - [\*] questa casella indica un compito già svolto
 - [ ] una casella senza il check indica un compito ancora da svolgere
  • le Task lists possono essere “nidificate” per strutturare meglio un’attività. La nidificazione può avere una profondità arbitraria, ma si consiglia di usare al massimo uno o due sotto-livelli. Task lists più complesse devono essere suddivise in liste separate.

Ad esempio:

  • Progetto principale
    • primo task
    • altro task
    • ultimo task
  • un task separato dagli altri
- [ ] Progetto principale
  - [x] primo task
  - [ ] altro task 
  - [ ] ultimo task
- [ ] un task separato dagli altri

Inserimento codici

  • sintassi per inserire codici (verranno automaticamente formattati)
[code]
codice
[/code]

Per esempio:

#!/bin/bash -e
# This script adds a 1GB swapfile to the system

function do_err() {
    code=$?
    echo "Command failed with code $code: $BASH_COMMAND"
    exit $code

}
trap do_err ERR


function set_swappiness() {
  if ! grep -q '^vm.swappiness' /etc/sysctl.conf; then
    echo -n 'Setting '
    sysctl -w vm.swappiness=10
    echo vm.swappiness = 10 >> /etc/sysctl.conf
  fi
}

function get_new_swapfile() {
  for i in `seq 0 99`; do
    if [ ! -e /swapfile.$i ]; then
      echo /swapfile.$i
      return
    fi
  done
  # Seriously? 100 swapfiles already exist?
  echo "too many swapfiles"
  exit 1
}
  • usare la seguente sintassi (tre accenti gravi consecutivi) per avere un codice non formattato ma compresso se molto lungo.
```
codice
```
    #!/bin/bash -e
# This script adds a 1GB swapfile to the system

function do_err() {
    code=$?
    echo "Command failed with code $code: $BASH_COMMAND"
    exit $code

}
trap do_err ERR


function set_swappiness() {
  if ! grep -q '^vm.swappiness' /etc/sysctl.conf; then
    echo -n 'Setting '
    sysctl -w vm.swappiness=10
    echo vm.swappiness = 10 >> /etc/sysctl.conf
  fi
}

function get_new_swapfile() {
  for i in `seq 0 99`; do
    if [ ! -e /swapfile.$i ]; then
      echo /swapfile.$i
      return
    fi
  done
  # Seriously? 100 swapfiles already exist?
  echo "too many swapfiles"
  exit 1
}
  • Per inserire codici non formattati e non compressi usare la sintassi
<pre>
codice
</pre>

Per esempio:


    #!/bin/bash -e
# This script adds a 1GB swapfile to the system

function do_err() {
    code=$?
    echo "Command failed with code $code: $BASH_COMMAND"
    exit $code

}
trap do_err ERR


function set_swappiness() {
  if ! grep -q '^vm.swappiness' /etc/sysctl.conf; then
    echo -n 'Setting '
    sysctl -w vm.swappiness=10
    echo vm.swappiness = 10 >> /etc/sysctl.conf
  fi
}

function get_new_swapfile() {
  for i in `seq 0 99`; do
    if [ ! -e /swapfile.$i ]; then
      echo /swapfile.$i
      return
    fi
  done
  # Seriously? 100 swapfiles already exist?
  echo "too many swapfiles"
  exit 1
}

  • inserire una stringa di codice in un testo, ad esempio echo "Command failed with code $code: $BASH_COMMAND". Aprire e chiudere la stringa di codice col simbolo ` (accento grave) oppure usare il pulsante </>
`echo "Command failed with code $code: $BASH_COMMAND"`

Inserimento e formattazione delle immagini:

Le immagini possono essere caricate tramite il tasto presente sull’editor, ma, a volte, è più semplice e veloce usare direttamente la sintassi Markdown per linkare le immagini prese dal web o dal pc.
La sintassi usata per le immagini è simile a quella usata per i link ma viene sempre preceduta dal punto esclamativo!, seguito da [ ] dove andrà inserito il nome dell’immagine (opzionale), seguito da ( ) che conterrà l’Url o il path dell’immagine:

![Alt Text](Url o Path)

Ad esempio:

![Adu Logo Forum Sketch] (http://www.adunanza.net/images/adu-d-logo-sketch.png)
  • Adu Logo Forum Small

In questo caso,oltre all’Url o al Path dell’immagine ho aggiunto anche il titolo (opzionale) “Logo Adunanza Small”. Passando col mouse sull’immagine, il titolo verrà visualizzato. E’ utile usarlo quando si vogliono dare informazioni più precise agli utenti.

![Adu Logo Forum Small](/uploads/default/original/2X/a/aa1461b98fd4cf8bf9fa4f8dbcc42eb7bba64a5c.png "Logo Adunanza Small")
  • le immagini possono contenere, proprio come i link, la sintassi a piè di pagina, ad esempio
![Alt text][id]

e nell’ id si dovrà inserire il riferimento alla posizione dell’Url o al path, ad esempio:

[id]: http://www.adunanza.net/images/adu-d-logo-sketch.png 

L’id va, di norma, posizionato in fondo al post che si sta editando, ma funziona perfettamente in qualsiasi posizione si voglia inserirlo (anche in cima al post, ad esempio).

  • allineamento centrato (immagine caricata da pc)
<div align=center><img src="/uploads/default/original/2X/a/aa1461b98fd4cf8bf9fa4f8dbcc42eb7bba64a5c.png" width="68" height="33"></div>
  • allineamento a destra (immagine caricata da pc)
<div align=right><img src="/uploads/default/original/2X/a/aa1461b98fd4cf8bf9fa4f8dbcc42eb7bba64a5c.png" width="68" height="33"></div>

Per le immagini caricate dal web cambierà il persorso "/uploads/default/original/xxxxxx.png (o .jpg) che comincerà con "https://xxxxxx.png (o .jpg)

  • variare le dimensioni di un’immagine: modificare i parametri width ed height

<img src="/uploads/default/original/2X/a/aa1461b98fd4cf8bf9fa4f8dbcc42eb7bba64a5c.png" width="136" height="66"> 

<img src="/uploads/default/original/2X/a/aa1461b98fd4cf8bf9fa4f8dbcc42eb7bba64a5c.png" width="34" height="16">
  • inserire testo intorno ad immagini di piccole dimensioni: basta aggiungere i simboli _ oppure * intorno all’immagine

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas porttitor velit ante, et condimentum mi egestas non. Morbi malesuada leo vitae ligula aliquet, eu auctor odio viverra. Morbi sit amet mi tincidunt urna fringilla ultrices eget quis nisi. Quisque eget dolor quis eros porttitor pharetra. Pellentesque maximus fringilla tellus non posuere. Sed nisl metus, consectetur vel facilisis vel, pharetra mattis elit. Quisque laoreet odio ac risus pharetra varius. Phasellus ultrices dapibus quam, non tristique sem consectetur eget.

Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Pellentesque interdum pharetra viverra. Morbi a tempor urna. Sed laoreet elit eu eros convallis rutrum. Etiam viverra pellentesque urna non pulvinar. Fusce vel metus scelerisque, luctus velit vel, fermentum elit. Donec risus neque, tempor ac lacinia porttitor, rutrum eget est. Proin elementum dolor in neque posuere, lacinia varius arcu egestas. In dui lacus, finibus et elementum rhoncus, porttitor pharetra sapien. Pellentesque quis arcu facilisis, luctus lorem et, scelerisque dui. Praesent suscipit laoreet sapien, a eleifend tortor tempus ornare. Nunc sed aliquam sem. Phasellus vel nisl nibh. Curabitur porttitor varius facilisis.

_<img src="/uploads/default/original/2X/9/9edc4c9e11dfd249a98b706c9e31aaf41b1e91d5.jpg" width="180" height="180">_
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas porttitor velit ante, et condimentum mi egestas non. Morbi malesuada leo vitae ligula aliquet, eu auctor odio viverra. Morbi sit amet mi tincidunt urna fringilla ultrices eget quis nisi. Quisque eget dolor quis eros porttitor pharetra. Pellentesque maximus fringilla tellus non posuere. Sed nisl metus, consectetur vel facilisis vel, pharetra mattis elit. Quisque laoreet odio ac risus pharetra varius. Phasellus ultrices dapibus quam, non tristique sem consectetur eget.

Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Pellentesque interdum pharetra viverra. Morbi a tempor urna. Sed laoreet elit eu eros convallis rutrum. Etiam viverra pellentesque urna non pulvinar. Fusce vel metus scelerisque, luctus velit vel, fermentum elit. Donec risus neque, tempor ac lacinia porttitor, rutrum eget est. Proin elementum dolor in neque posuere, lacinia varius arcu egestas. In dui lacus, finibus et elementum rhoncus, porttitor pharetra sapien. Pellentesque quis arcu facilisis, luctus lorem et, scelerisque dui. Praesent suscipit laoreet sapien, a eleifend tortor tempus ornare. Nunc sed aliquam sem. Phasellus vel nisl nibh. Curabitur porttitor varius facilisis.
  • mettere un titolo ad un’immagine

Logo Adunanza
<div align=center><img src="/uploads/default/original/2X/a/aa1461b98fd4cf8bf9fa4f8dbcc42eb7bba64a5c.png" width="68" height="33"><br>Logo Adunanza</div>

Aggiungere le ancore ad un testo:

- [Capitolo 1](#first)
- [Capitolo 2](#second)
- [Capitolo 3](#third)
- [Capitolo 4](#fourth)
  • mettere l’ancora sui paragrafi interessati nel topic. Il titolo del paragrafo avrà questa sintassi:
<a name="first">Capitolo 1</a>

Capitolo 1
testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo

<a name="second">Capitolo 2</a>

Capitolo 2
testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo

<a name="third">Capitolo 3</a>

Capitolo 3
testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo

<a name="fourth">Capitolo 4</a>

Capitolo 4
testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo

Maggiori e più dettagliate informazioni sull’uso delle ancore (anche in Html) le trovate Qui

Creare un sondaggio:

Prerequisiti:

  • Una volta postato, sarà possibile aggiungere/eliminare/modificare/rinominare il sondaggio solo nei primi 5 minuti.

  • Possono essere fatti più sondaggi sullo stesso post o topic, a patto che venga aggiunto l’attributo name con un nome diverso per ogni sondaggio.

  • Il sondaggio non deve per forza essere sul primo post di un thread.

  • Un utente può cambiare risposte fino a che il sondaggio rimane aperto.

  • Il sondaggio può avere un massimo di 20 opzioni.

  • I sondaggi sono anonimi. Solo l’amministratore del forum ha la facoltà di sapere chi ha votato cosa.

  • Sintassi di un sondaggio a risposta singola (l’utente può dare una sola risposta)

[poll]
 - risposta 1
 - risposta 2 
 - risposta 3 ....
[/poll]

Il forum supporta vari tipi di sondaggio. Maggiori informazioni le trovate Qui.

Altre funzionalità del forum sono descritte nella parte 2 di questa guida.

2 Mi Piace

@dax complimenti per la guida ma forse molte cose sarebbe meglio spiegarle con l’editor o la grammatica markdown invece del puro e semplice htlm, compreso l’inserimento delle immagini, i titoli ecc

Il markdown sulla formattazione delle immagini non funzionava (almeno l’ultima volta che ci avevo provato) e nemmeno sulla formattazione del testo (allineamento centrato, giustificato eccetera…).

Comunque faccio delle prove ed in caso correggo la sintassi usando il Markdown al posto dell’Html quando possibile. :ok_hand:

Grazie per il post utilissimo. Aggiungo anche che lo sto consultando dallo smartphone (Motorola Moto G LTE con Firefox browser) e i link che hai inserito ad inizio post (Formattazione, Inserire codici, ecc.) funzionano perfettamente :+1:

Ottimo a sapersi, grazie :smile:

Guida aggiornata 28/03/2016

Guida aggiornata 17/06/2016

@Dax ci sono dei problemi in diverse parti del thread. Non si vedono i codici di esempio e anche cliccando sul bottone Copia non succede nulla.

Il pulsante Copia funziona. Non deve fare nulla di che ma se lo clicchi dovresti vedere la scritta Copiato per 1 millisecondo (e se incolli dovresti vedere il risultato).

E’ stato introdotto il supporto totale al markdown, parecchie guide hanno problemi di formattazione.
@AduTeam aggiustatele man mano che trovate errori, molte le ho già corrette io.

Di regola:

  • gli heading adesso funzionano così # Titolo (con lo spazio) e non più così #Titolo
  • tutto il resto, non funziona più in linea, ad es:
    [quote]qualcosa[/quote] nella maggior parte dei casi non funziona più
    la sintassi corretta invece sarebbe:
[quote]
qualcosa
[/quote]

Fare riferimento a questo tutorial http://commonmark.org/help/tutorial/ che ogni membro dell’ @AduTeam dovrebbe conoscere a memoria ormai…non è vero???

2 Mi Piace