La prima cosa da fare è selezionare Nuovo articolo dal menù principale di Joomla!

Clicca "Nuovo articolo"

A questo punto vi comparirà la schermata standard di inserimento.

Schermata di inserimento

Facciamo una panoramica delle voci principali. In alto a sinistra identifichiamo la nostra posizione (Articolo, ovvero la sezione per l’inserimento degli articoli). In alto a destra si vedono cinque funzioni principali: Anteprima (che ci permette di vedere come apparirà l’articolo senza pubblicarlo); Salva (che permette di salvare l’articolo nel sito, ma esce dalla pagina di inserimento); Applica (che salva eventuali modifiche senza uscire dalla pagina); Annulla (che permette di uscire dalla pagina senza effettuare alcuna modifica); Aiuto (che fornisce una guida rapida ed essenziale).

Sottostanti si vedono i principali dati identificativi dell’articolo: Titolo (non ha bisogno di spiegazioni); l’Alias (è parte di ciò che verrà visualizzato nell’url della pagina, e viene ricavato in automatico dal titolo; è formattato minuscolo e al posto degli spazi ha l’underscore, “_”).

A fianco ci sono due indicatori di stato: Pubblicato (se l’articolo è effettivamente pubblicato, e quindi visibile dagli utenti del sito) e Prima pagina (se si vuole visualizzare l’articolo nella prima pagina del sito). Il settaggio di base di questi due valori è rispettivamente si e no. Se si ha necessità di lavorare su un post senza renderlo visibile nella pagina (perché si aspetta una correzione da parte degli amministratori, perché si vuole aggiungere qualcosa successivamente…) è necessario spuntare “no” nello stato di Pubblicato. Una volta che l’articolo sarà pronto si potrà cambiare questo stato in “si”.

Ancora sotto sono visibili i selettori di Sezione (raggruppamento tematico dei post) e Categoria (ulteriore raggruppamento, sottoinsieme di Sezione).

Procediamo ora all’inserimento dei testi. L’area del Body (corpo del testo) è sottostante a una serie di tasti di funzione che ricordano un po’ quelli di Word e Writer: hanno infatti lo stesso scopo (e in alcuni casi lo stesso aspetto ed effetto).

Tasti funzione (giallo); Corpo del testo (verde)

Si può ingrandire la finestra di scrittura cliccando e trascinando l’angolo in basso a destra della stessa:

Ridimensione l'area di inserimento del testo

A questo punto non ci resta che scrivere il testo dell’articolo nel relativo spazio di inserimento. Questa procedura è simile a quella di qualsiasi altro elaboratore di testi.

Il più delle volte l’articolo da inserire è già stato scritto con un altro programma: word, writer o pages (per esempio). Tutto ciò che si deve fare a questo punto è copiarlo e incollarlo nello spazio del corpo di testo. La difficoltà di questo passaggio sta nella formattazione (carattere, paragrafo…) che viene impartita dal programma usato.

È consigliabile mantenere tutti gli articoli del sito puliti e simili tra di loro, uniformando la tipografia e le impostazioni di carattere. Per fare questo bisogna annullare la formattazione originaria, o subordinarla a quella del sito. Si può fare in due modi:

Il primo sistema, infallibile, consiste nell’incollare il testo prima su un blocco note (o l’equivalente del vostro sistema operativo): la formattazione verrà completamente cancellata diventando solo caratteri e spazi (come ogni buon txt).

Il secondo sistema consiste nell’incollare il testo tramite la funzione Paste as plain text (vedi immagine a seguire): il testo sarà quindi incollato con lo stesso principio, annullando ogni parte della formattazione del programma da cui è stato copiato.

Funzione "paste as plain text"

È anche possibile incollare il testo cercando di mantenere la formattazione originaria di Word. Per fare ciò bisogna usare un tasto di funzione creato appositamente: Paste from word (Word usa un codice di formattazione personale, particolarmente antipatico a tutti gli altri, in particolar modo quello usato in genere nel web).

Funzione "Paste from Word"

In qualsiasi modo abbiamo deciso di procedere per inserire il testo avremo ora un corpo (body) dell’articolo, come si può vedere a seguito:

Testo inserito

Gli articoli che contengono solo ed esclusivamente testo sono poco accattivanti, o magari avete necessità di postare un articolo composto soprattutto - o esclusivamente - da foto. Qualsiasi sia il motivo, la funzione di inserimento immagini nelle pagine web è di grande importanza; con Jce 24 diventa anche facile e intuitiva. Procediamo selezioniamo l’apposito tasto funzione (insert/edit image) dal menù:

Funzione "insert/edit image"

A questo punto comparirà la finestra di inserimento immagini. Le cose che ci interessano di più in questa area sono: la colonna centrale (il database di immagini che sono già presenti nell’archivio del sito); il tasto di inserimento immagini da disco fisso (dove selezioneremo immagini nuove da implementare nell’archivio del sito).

Schermata inserimento immagini

Dopo aver selezionato il tasto di inserimento da HD comparirà una finestra più piccola con le relative funzionalità di inserimento. Procediamo cliccando sul tasto Add.

Cliccate "Add"

Si aprirà un’ulteriore finestra dove potremo selezionare e aprire i file da tutti volumi che sono montati sul nostro computer. Selezioniamo quindi il file dell’immagine e apriamolo.

Seleziona l'immagine

Il file comparirà nell’elenco della finestra precedente. A questo punto dovremo cliccare su Upload per caricarlo nel archivio residente del sito su cui stiamo lavorando (e qui rimarrà finché non decideremo di cancellarlo).

Clicca "Upload" per carica l'immagine nel sito

Dopo aver atteso la fine del caricamento ci troveremo nella prima finestra, con il file di immagine appena selezionato. A questo punto procediamo cliccando sul tasto Insert, l’immagine sarà posizionata di seguito al testo (o comunque dove si trovava il cursore).

È possibile selezionare l’immagine anche dal database, cercandola tra le cartelle a disposizione, come su un normale hardisk. Anche in questo caso selezionare il file e cliccare il tasto Insert per consentire l’inserimento.

Lightbox. Se la funzione Lighbox è attivata nel modulo di Joomla che state usando è possibile modificare la grandezza dell’immagine visualizzata nell’articolo. Per fare ciò si riassegna il valore di altezza o larghezza in pixel negli appositi riquadri: il programma manterrà in automatico le proporzioni dei due valori. La foto visualizzata nella finestra di Lightbox (l’immagine che compare in sovrimpressione) proporrà l’immagine nelle sue dimensioni originali.

Consiglio. In ogni caso è consigliabile limitare la larghezza in pixel delle immagini originali inserite a 750 pixel. Questo per due motivi: esistono ancora monitor con risoluzione 800×600, ed è consigliabile strutturare un sito rispettando le esigenze del maggior numero di computer; inoltre, inserire immagini a risoluzione ridotta permette anche di tutelare il copyright della stessa foto (una larghezza di 750 è molto scarsa per le esigenze di stampa, per esempio).

Nella finestra di inserimento sono ancora visibili Url (titolo e percorso del file), Alternate text (il testo che compare nel box passando col cursore sopra all’immagine) oltre che le impostazioni di allineamento dell’immagine ed eventuali bordi.

Inserisci l'immagine (verde); Ridimensiona l'immagine (giallo)

Ecco l’immagine selezionata che ora è inserita all’interno dell’articolo!

A questo punto è ancora possibile modificare posizione, formattazione e grandezza dell’immagine, come visualizzata sulla pagina: si altera la grandezza cliccando e trascinando un angolo dell’immagine fino alla dimensione voluta (la proporzione è mantenuta di default). É inoltre possibile selezionare la foto e deciderne l’allineamento come se si trattasse di un paragrafo di testo: sinistra, centrale, destra.

Ridimensiona immagine (giallo); Allinea l'immagine (verde)

In un sito in cui li aggiornamenti delle news sono parecchi, se vi vuole evitare di far vedere un lungo elenco di articoli interi - magari molto corposi - è possibile decidere di tagliare il pezzo e far visualizzare solo una breve anteprima (il lead). Per fare ciò è sufficiente inserire un punto di Leggi tutto all’interno del testo. Posizionate il cursore dove intendete tagliare l’articolo (da quella posizione in poi il pezzo sarà visibile solo selezionando Leggi tutto dalla pagina) e cliccate nell’apposito tasto nel menù delle funzioni (in inglese article.readmore“:

Funzione "Leggi tutto" (article.readmore)

Impostazioni di default. Il webmaster del sito può comunque settare per ogni singolo utente alcune impostazioni standard, rendendo automatiche molte delle operazioni che abbiamo appena spiegato: inserimento automatico del Leggi tutto dopo una certa quantità di caratteri; formattazione dell’immagine che viene visualizzata nella pagina in base a un foglio di stile predefinito (esempio: larghezza 120 pixel, allineata a sinistra con margine a destra e in basso di 10 pixel). Questo facilita e rende più veloci e intuitive le operazioni, adattandosi alle esigenze di qualsiasi amministratore e utente attivo del sito.

Ricordate sempre di salvare il vostro lavoro in modo regolare, soprattutto se molto lungo: usate il tasto Applica per salvare le modifiche senza uscire dalla pagina, o Salva per conservare le modifiche e uscire dalla pagina. Una volta finito modificare lo stato di Pubblicato in “si” e salvate.

Curiosità. È possibile modificare gli stati di Pubblicato e Prima pagina anche dal menù generale di Gestione articoli (vedi prima immagine di questo tutorial). Dallo stesso menù è possibile accedere agli articoli salvati e modificarli.

Con il costante aumento degli utenti che usano internet in modo attivo, a tutti sarà capitato di dover modificare un’immagine: inserire una foto in un profilo personale sul web, nel post di un blog, nell’album fotografico di un social network, nell’avatar di un client di messaggeria, eccetera. L’operazione più comune in tal senso è il ridimensionamento, ovvero ingrandire o rimpicciolire un’immagine.

GIMP è un ottimo programma per questo tipo di operazioni: leggero e veloce, ma soprattutto FREE. La prima cosa da fare è ovvia: scarichiamo Gimp dal sito. Nella sezione Downloads del  menù cercate il sistema operativo su cui lavorate: Gimp è disponibile per ogni distribuzione di Linux, microsoft Windows o Mac OS X.

Clicca download sul sito di Gimp

Seleziona il tuo Os

Installate Gimp seguendo la procedura del vostro sistema operativo.

Una volta installata l’applicazione lanciatela. Se avete pronta un’immagine potete cliccare su File e poi Apri, selezionando il file dalla cartella in cui l’avete posizionato. In alternativa cliccate col tasto destro del mouse sul file che volete modificare e apritelo con Gimp.

Clicca File > Apri

Ora abbiamo la nostra immagine nella finestra di visualizzazione, pronta per essere modificata. Il nostro obbiettivo è cambiarne la dimensione, senza alterare le proporzioni. Questo è possibile selezionando la voce Scala dal pulsante di menù Immagine (Immagine → Scala). Apparirà quindi la finestra per la funzione di ridimensionamento. É anche possibile richiamare questa finestra dal menù a tendina, cliccando col tasto destro del mouse; le voci da selezionare sono le stesse:  Immagine → Scala.

Clicca Immagine > Scala

Nella finestra di ridimensionamento possiamo vedere altezza e larghezza espressi in pixel, oltre che la definizione dell’immagine. È possibile cambiare l’unità di misura di riferimento nel menù sulla destra. Consigliamo di lavorare in pixel, visto che è il parametro più comune usato nel web.

Schermata di ridimensionamento

L’operazione di ridimensionamento è di per sé elementare: scrivete il valore numerico di altezza o larghezza nel rispettivo riquadro. Una volta assegnato il nuovo parametro il suo complementare sarà modificato automaticamente, mantenendo le stesse proporzioni (se modificate l’altezza allora la larghezza cambierà di conseguenza, e viceversa).

In alcuni casi la modifica delle immagini per il web si rende necessaria per rispettare dei requisiti di grandezza (minimi, ma più spesso massimi). Consigliamo di selezionare il valore più alto tra altezza e larghezza e riassegnarlo entro il limite indicato: il suo valore complementare sarà proporzionato a dovere.

Se per esempio un sito richiede l’inserimento di immagini di dimensioni non superiori a 600 x450 pixel e l’immagine che abbiamo è 1241×1600, sarà sufficiente assegnare 450 al posto di 1600 nel valore di altezza e ne risulterà un’immagine di 349×450 pixel: entro i limiti imposti.

È consigliabile evitare di inserire immagini con una risoluzione superiore a 750×750 pixel. Questo per diversi motivi: esistono ancora molti computer con una risoluzione di 800×600 pixel, e in questo modo ci si adegua alle esigenze del maggior numero di utenti; le immagini per il web dovrebbero essere comunque non troppo grosse, anche per questioni di velocità di caricamento;  infine, si tutela in parte l’eventuale copyright delle immagini (foto fatte da voi), dando una risoluzione inferiore alle esigenze per una stampa di buona qualità.

Curiosità: Si può scalare un’immagine senza mantenere le proporzioni. É sufficiente spuntare il simbolo a forma di catena che connette i valori di altezza e larghezza. Facendo ciò diventerà necessario assegnare tali valori singolarmente. Assegnare valori non proporzionali però altera l’aspetto dell’immagine. Nel web le immagini devono essere inserite mantenendo le proporzioni.

Clicca per togliere o assegnare la proporzionalità

Curiosità: Quello che abbiamo fatto è modificare la dimensione di un’immagine nella sua interezza. Eventualmente è possibile scalare un oggetto o livello all’interno del quadro di lavoro, mantenendo inalterata la grandezza effettiva dell’immagine finale: l’operazione è simile, ma viene selezionato Scala dalla voce Livello, anziché da Immagine.

Salviamo ora la foto nella sua nuova proporzione con il formato che preferiamo. Su File clicchiamo sulla voce Salva (o digitiamo Ctrl + S) per mantenere inalterato il formato originale, oppure Salva come (o digitando Maiusc + Ctrl + S) per cambiare il formato dell’immagine.

Prova la demo realizzata per Conseil Comunicazione con il tuo telefonino.

L’utilizzo del codice QR è un tema di attualità nel mondo della comunicazione: il codice bidimensionale QR si pone come trait d’union tra la comunicazione cartacea e i nuovi media, in particolare gli smartphone.

E’ infatti possibile inserire un codice QR su riviste, manifesti e simili: con un telefonino dotato di software di riconoscimento QR si può inquadrare il codice e si viene automaticamente rimandati ad una pagina web. E’ possibile associare il codice, oltre che ad un indirizzo web, anche a VCard (per fornire velocemente i propri dati aziendali), un breve testo. Ma l’utilizzo che si presta maggiormente al nostro caso è quello di restituire una pagina web che può essere un mini-sito, può contenere un video o molto altro ancora. Ci vuole solo la fantasia di trovare l’utilizzo più efficace per una determinata situazione.

Abbiamo realizzato una demo per Conseil Comunicazione compatibile con i principali modelli di smarthone (a partire dall’iPhone): lo sviluppo di questo tipo di applicazioni non è particolarmente complicato. La parte più ostica è la compatibilità con i vari sistemi operativi degli smartphone soprattuto per quanto riguarda gli standard video supportati.

D’altra parte sarà da vedere da vicino quanto sviluppo e diffusione avrà il QR: al momento sembra in espansione ma siamo veramente lontani dai dati di utilizzo di paesi come il Giappone. D’altra parte gli smartphone sono un mercato in continua crescita, vedremo…

Hurrah è un’azienda  con sede a Imola - in provincia di Bologna - attiva nel settore internet  dal 2002, composta da un team di professionisti in grado di seguire tutti i diversi aspetti che entrano in gioco nella realizzazione di un sito internet o di una applicazione web di successo.

I siti sono stati divisi per in primo luogo per categoria (per esempio turismo, automobilismo, servizi) e in secondo luogo per il modo in cui sono stati realizzati. Per esigenze diverse Hurrah web agency a Imola è in grado di proporre ai propri clienti la soluzione più appropriata, scegliendo tra sistemi interamente realizzati da Hurrah, come per esempio la piattaforma e-commerce, e  tecnologie open source, come per per esempio il sistema di gestione dei contenuti Joomla.

Per maggiori informazioni visita il sito www.hurrah.it.