Questo è un post di esempio del blog.
Se effettui l’accesso al sito (il link al Login è alla fine di questa pagina) potrai modificarlo e tutti gli altri articoli esistenti. Potrai anche creare un nuovo articolo e fare altre modifiche al sito.
Mano a mano che aggiungi e modifichi articoli, vedrai cambiare il tuo sito e come personalizzarlo in vari modi.
La tua homepage è impostata per visualizzare i quattro articoli più recenti della categoria del blog category in una colonna. Poi ci sono link ai due articoli precedenti. Puoi cambiare questi numeri in area amministrativa modificando le impostazioni delle Opzioni dei contenuti nel tab blog. C’è un link all’amministrazione del tuo sito nel menu in alto.
Se vuoi che il post del tuo blog sia diviso in due, un’introduzione e poi un testo esteso separato, utilizza il pulsante Leggi tutto per inserire la separazione.
Nella pagina del singolo articolo vedrai sia il contenuto introduttivo che il testo esteso. Se vuoi puoi cambiare le impostazioni per nascondere l’introduzione.
Il tuo sito ha alcuni moduli comunemente usati già preconfigurati. Questi includono:
Ciascuno di questi moduli ha molte opzioni che puoi sperimentare da Estensioni > Moduli nell’amministrazione del tuo sito. Spostando il mouse sopra ad un modulo e cliccando su Modifica entrerai nella schermata di modifica di quel modulo. Assicurati sempre di salvare e chiudere i moduli che modifichi.
Joomla! include anche molti altri moduli che puoi incorporare nel sito. Quando sviluppi il tuo sito potresti voler aggiungere altri moduli che puoi trovare nella Joomla Extensions Directory.
I Template controllano l’aspetto del sito.
Questo blog utilizza il template Cassiopeia.
Puoi modificare le opzioni cliccando sul link Modifica il tuo sito, Impostazioni Template nel menu in alto (visibile quando effettui il login).
Ad esempio puoi cambiare il colore di sfondo del sito, il titolo del sito, la descrizione del sito ed il font utilizzato per i titoli.
Ulteriori opzioni sono disponibili nell’area amministrativa del sito. Utilizzando la Gestione estensioni puoi anche installare un nuovo template.
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>
Inserire dei tasti
<p><a href="#" class="btn btn-large btn-primary">Inizio</a></p>
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">‹</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">›</a>
</div>
Descrizione prima immagine….
Descrizione seconda immagine…
Descrizione terza immagine…
