Autore: PugliaSOS

Iniziare a creare il tuo sito è semplice. Alcune nozioni di base ti saranno utili.

Cos’è un Content Management System?
Un content management system è un software che consente di creare e gestire pagine web in modo semplice, separando la creazione dei contenuti dalla meccanica richiesta per presentarli sul web.
In questo sito, i contenuti sono registrati in un database. L’aspetto e la presentazione vengono gestiti dal template. Il software Joomla!® combina il template e i contenuti per la creazione della pagina web.

Sito e Amministrazione
Il sito è separato in due lati. Il lato sito (chiamato anche front end) è ciò che vedono i visitatori del tuo sito. Il lato amministrativo (chiamato anche back end) utilizzato solo da chi gestisce il sito. Puoi accedere all’amministrazione o aggiungendo /administrator alla fine del nome di dominio (es. http://www.nomedidominio.com/administrator )

Effettua il login al lato amministrativo utilizzando i Nome utente e Password creati durante l’installazione di Joomla!®.

Login
Per effettuare il login da frontend, utilizza il modulo Login. Utilizza i Nome utente e Password creati durante il processo di installazione. Una volta effettuato il login, potrai creare e modificare articoli.

Potrai creare anche contenuti visibili solo agli utenti registrati al sito.

Creazione di un articolo
Una volta effettuato il login da frontend, sarà visibile un nuovo menu, il Menu utente. Per creare un nuovo articolo, clicca sul link “Invia un articolo” presente nel Menu utente.
L’interfaccia per la creazione di un nuovo articolo offre molte opzioni, ma in sostanza ciò che ti serve è inserire un titolo e inserire qualcosa nell’area per il contenuto. Per ritrovarlo facilmente, imposta lo Stato su Pubblicato e inseriscilo in una delle categorie disponibili.
Puoi modificare un articolo esistente cliccando sull’icona Modifica articolo (viene visualizzata solo dagli utenti che hanno i permessi per la modifica).

Altre informazioni
C’è molto altro da imparare sull’utilizzo di Joomla!®!. Puoi apprendere molto altro nel sito della documentazione di Joomla!® e nel forum di Joomla!®.

Joomla 3 integra il framework Bootstrap per una veloce e facile implementazione del web design. Inserire icone o testo formattato risulta semplice con i seguenti esempi (Typography) validi su qualsiasi template che supporta Bootstrap e jQuery presenti in Joomla!.

 

 

---

<p>Esempio di Tooltip sulla parola <abbr title="Il nostro caro CMS">Joomla</abbr></p>

Esempio di Tooltip sulla parola Joomla

---

 

 

Blocco formattato

<blockquote>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<small>Someone famous <cite title="Source Title">Source Title</cite></small></blockquote>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Someone famous Source Title

---

 

 

Blocco semplice in evidenza

<pre>Blocco semplice in evidenza</pre>

---

 

Immagine con effetto cornice polaroid

<img class="img-polaroid" src="images/sampledata/parks/animals/220px_spottedquoll_2005_seanmcclean.jpg" alt="nome immagine" />

---

Immagine miniatura che apre la grande

<div id="myModal2" class="modal hide fade" style=" width:auto;">
<div class="modal-header"><button class="close" type="button" data-dismiss="modal">×</button>
<h3 id="myModalLabel2">Titolo finestra</h3>
</div>
<div class="modal-body"><img src="images/sampledata/parks/landscape/800px_pinnacles_western_australia.jpg" alt="nome immagine" /></div>
<div class="modal-footer"><button class="btn" data-dismiss="modal">Chiudi</button></div>
</div>
<a href="#myModal2" data-toggle="modal"><img class="img-polaroid" src="images/sampledata/parks/landscape/120px_pinnacles_western_australia.jpg" alt="nome immagine" /></a>

---

 

Utilizzare una delle centinaia di icone vettoriali disponibili (vedi elenco)

<i class="icon-thumbs-up icon-large"></i>

 

 

<span style="font-size: 50px;" aria-hidden="true" class="icon-picture icon-large"></span>

 

 

Aumentare a piacere le dimensioni delle icone

<div style="font-size: 40px;">
<i class="icon-zoom-in icon-large"></i>
</div>

Modificare anche il colore delle icone

<div style="font-size: 40px; color: #DC143C">
<i class="icon-question-sign icon-large"></i>
</div>

 

Allineare l’icona grande con il testo normale

<i class="icon-quote icon-large" style="color: rgb(0, 0, 255); font-size: 60px; margin: 30px 60px 30px 0px; float: left;"></i> testo....testo...

In questo esempio l’icona è allineata a sinistra (float: left;) ed ha le dimensioni di valore 60 (font-size: 60px;) ed i valori per i margini sul testo sono i seguenti: 30px 60px 30px 0px
Risultà semplice modificare il valore del colore dell’icona, la dimensione ed i relativi margini. Nel primo valore dei margini metti la metà del valore della dimensione dell’icona, nel secondo il valore intero e nella terza ancora la metà del valore, mentre l’ultimo valore rimane a zero.
Questi alcuni esempi di codice colore: GIALLO (255, 255, 0); ROSSO (255, 0, 0); CELESTE (0, 0, 255); VERDE (0, 255, 0); ROSA (255, 0, 255); MARRONE (204, 102, 0); GRIGIO (85, 85, 85);

 

<i class="icon-quote-2 icon-large" style="color: rgb(0, 0, 255); font-size: 60px; margin: 30px 60px 30px 0px; float: right;"></i> testo....testo...

Mentre questo esempio utilizza lo stesso codice del precedente tranne l’allineamento dell’icona che è impostato a destra (float: right;) ed ovviamente una differente icona……………………….

 

 

 

Utilizzare le icone come bottoni

<a class="btn btn-small" href="#"><i class="icon-star"></i></a>

 

 

    <a href="#" class="btn"><i class="icon-edit"></i> <strong>Modifica</strong></a>
    <a href="#" class="btn"><i class="icon-trash"></i> <strong>Cancella</strong></a>
    <a href="#" class="btn"><i class="icon-key"></i> <strong>Chiave</strong></a>

Modifica Cancella Chiave

 

 

Inserire dei tasti

<p><a href="#"  class="btn btn-large btn-primary">Inizio</a></p>

Inizio

 

Sempre tasti ma di colore e dimensione differenti

<a href="#"  class="btn">Default</a>
<a href="#"  class="btn btn-small btn-info">Info</a>
<a href="#"  class="btn btn-mini btn-success">Success</a>
<a href="#"  class="btn btn-large btn-warning">Warning</a>
<a href="#"  class="btn btn-danger">Danger</a>
<a href="#"  class="btn btn-inverse">Inverse</a>

DefaultInfoSuccessWarningDangerInverse

---

 

Blocco di allerta con bottone di chiusura

<div class="alert">
    <button type="button" class="close" data-dismiss="alert">×</button>
    <strong>Attenzione!</strong> Ricordati di disabilitare l'editor prima di utilizzare questi codici nell'HTML del tuo contenuto.
    </div> 

 

 

    <div class="alert alert-error">
    Blocco errore
    </div>

 

 

 

<div class="alert alert-error"><span aria-hidden="true" class="icon-cancel"></span>
Blocco errore con immaginetta...
</div>

 

 

 

    <div class="alert alert-success">
    Blocco successo
    </div>

 

 

 

 <div class="alert alert-info">
   Blocco informazioni
    </div>

 

 

<div class="alert alert-info"><span aria-hidden="true" class="icon-flag-2 "></span> Blocco informazioni con immaginetta...
</div>

 

 

Blocco in evidenza all’interno di testo con dimensione e float e classe

<div class="alert alert-error" style=" float:left; width:150px; margin: 0 10px;">Testo nel blocco...</div>Testo artico....

Questo esempio mostra come sia possibile inserire un blocco di testo all’interno di un paragrafo per evidenziare frasi o altre informazioni.
E’ possibile agire sulla classe sostituendola con quelle viste in precedenza per cambiare lo sfondo od il colore del carattere. Per modificare le dimensioni del blocco è necessario variare il valore della larghezza (width:150px;) mentre per allinearlo a destra è necessario cambiare float:left; con float:right;

---

 

Esempio di tasto che apre una finestra “modal” con all’interno una immagine

<div id="myModal" class="modal hide fade">
<div class="modal-header"><button class="close" type="button" data-dismiss="modal">×</button>
<h3 id="myModalLabel">Titolo finestra</h3>
</div>
<div class="modal-body"><img class="img-polaroid" src="images/headers/walden-pond.jpg" alt="nome immagine" /></div>
<div class="modal-footer"><button class="btn" data-dismiss="modal">Chiudi</button></div>
</div>
<div class="bs-docs-example" style="padding-bottom: 24px;"><a class="btn btn-primary btn-large" href="#myModal" data-toggle="modal">Apri finestra popup</a></div>

 

---

Esempio slide immagini con effettto Carousel

<div id="myCarousel" class="carousel slide">
            <div class="carousel-inner">
              <div class="item active">
                <img src="images/headers/windows.jpg" alt="">
                <div class="carousel-caption">
                  <h4>Prima immagine</h4>
                  <p>Descrizione prima immagine....</p>
                </div>
              </div>
              <div class="item">
                <img src="images/headers/blue-flower.jpg" alt="">
                <div class="carousel-caption">
                  <h4>Seconda immagine</h4>
                  <p>Descrizione seconda immagine...</p>
                </div>
              </div>
              <div class="item">
                <img src="images/headers/walden-pond.jpg" alt="">
                <div class="carousel-caption">
                  <h4>Terza immagine</h4>
                  <p>Descrizione terza immagine...</p>
                </div>
              </div>
            </div>
            <a class="left carousel-control" href="#myCarousel" data-slide="prev">&lsaquo;</a>
            <a class="right carousel-control" href="#myCarousel" data-slide="next">&rsaquo;</a>
          </div>

---

 

 

Questo l’elenco delle Icone disponibili in Joomla 3