:: Guida alle funzioni di 7.0 ::

Nota: Il Wmatic è un software in continua evoluzione, pertanto qualche immagine (screenshot, pulsanti) potrebbe non essere esattamente identica a quella che troverete nel vostro Wmatic.
Le funzioni fondamentali vengono costantemente aggiornate in questa guida che vi invitiamo a visitare periodicamente!


Sommario:
  1. Introduzione
  2. Guida alle funzioni di base
  3. Guida alle funzioni avanzate
  4. Conosciamo meglio le zone editabili
  5. Come si realizza un sito passo passo
  6. Trucchi grafici
  7. Trucchi per velocizzare la realizzazione del sito
  8. Errori comuni
  9. Guida all'uso della Fotogallery
  10. Fonti di assistenza
  11. Novità!! Guida filmata del Wmatic 7.0
  12. Gadget


  1 - Introduzione:


In questa guida spiegheremo tutte le funzioni del Wmatic e i passaggi necessari per realizzare un ottimo e semplice sito per presentare la vostra Azienda.

Cos'è il Wmatic?
E' un software CMS per realizzare in pochi click il vostro sito assumendo che non abbiate alcuna conoscenza di Html o altri linguaggi, e che sappiate ridimensionare, rinominare un'immagine, e sappiate usare le funzioni di un editor testuale (tipo MsWord)

Funzionamento:
Wmatic permette di cambiare facilmente la grafica del sito, e di inserire immagini, testi, filmati, link, news scorrevoli, il tutto in pochissimi click.

A chi è dedicato Wmatic? A chi ha l'esigenza di cambiare frequentemente ed in piena autonomia i contenuti del sito.

Wmatic è un blog?
Assolutamente no, è un software di gestione di un sito che abbia le tradizionali pagine di contenuti ( Home, chi siamo, dove siamo, servizi o prodotti, fotogallery, motore di ricerca, e amministrazione)

Wmatic è sicuro?
Si, sia sotto il profilo della persistenza dei contenuti, che della sicurezza del pannello di amministrazione protetto da password.

Che piattaforma usa Wmatic?
Wmatic si avvale delle ASP per la creazione dei contenuti scrivendo direttamente codice HTML, e usa un database basato su Access per le funzioni di amministrazione, e il motore di ricerca. E' un progetto iniziato nel 2006 (versione1.0) e usa per la maggior parte codice proprietario C-Group.

Devo istallare software nel mio PC?
Assolutamente no. Per amministrare occorre una normale connessione internet (anche a 56k!) e un browser. (Con MS Explorer 5.5 o superiore si ottiene la miglior corrispondenza tra la grafica realizzata e quella visibile nel sito).

Chi usa Wmatic?
Primarie aziende leaders di diversi settori hanno scelto la semplicità e la stabilità di Wmatic 5.0 e 6.0, adesso proponiamo
la versione 7.0


  2 - Guida alle funzioni di base:



Per amministrare il Wmatic è necessario loggarsi. Login e password vengono forniti al momento dell'istallazione del software su dominio di proprietà C-group.it e messo a disposizione per tutta la durata contrattuale.
Per accedere alla pagina di login cliccare sul link [admin] del menu. Si aprirà la pagina di login come riportato nello screenshot sottostante:


Pagina di Login


In questa pagina possiamo loggarci inserendo login e password (attenzione alle maiuscole!) per accedere al pannello di controllo, oppure possiamo tornare indietro alla home.

Possiamo usare la funzione richiedi password via e-mail che per motivi di sicurezza ulteriore NON è una procedura automatica ma la richiesta viene evasa in tempo reale dai Ns.Tecnici.

Se loggati correttamente accederemo al pannello generale di amministrazione e potremo usare le funzioni disponibili.


Pannello generale amministrazione


Le funzioni presenti sul pannello sono:
  • caricamento immagini generali
  • caricamento Logo e Testata
  • anteprima
  • gestione della grafica (layout) generale
  • inserimento e modifica contenuti
  • amministrazione fotogallery e database di ricerca
  • cancellazione immagini obsolete
  • pannello amministrazione utente
  • FAQ riguardo l'applicazione
  • accesso alle statistiche (a richiesta)
  • logout
Il pulsante "Carica il set di immagini che userai per il sito" accede al seguente pannello di caricamento immagini.
Questo pannello permette di caricare immagini jpg, gif e png che poi si utilizzeranno per le pagine dei contenuti. Si possono aggiungere più campi con un'opzione (1) ed effettuare un caricamento multiplo.


Pannello upload immagini


Una barra di scorrimento a Pop-up informa dell'avanzamento del caricamento. Al termine la pagina restituisce le informazioni dell'avvenuto corretto caricamento.


Barra di scorrimento

Importante: non si possono caricare più di 10MB in un'unica sessione ma 10 Mb corrispondono a 300 immagini per il web di circa 30Kb cadauna!
Una volta completato il caricamento si può provvedere a caricare altre immagini o tornare al pannello di controllo.

Il secondo pulsante accede al pannello di controllo per caricare le due immagini della grafica personalizzata e vale a dire il Logo e la Testatina (header).


Pannello caricamento grafica personale

Questa pagina permette di sfogliare e caricare la grafica personale, come si vede sono presenti sulla stessa le istruzioni, in linea di massima non dimentichiamo che:

la testatina deve essere nominata 1.jpg e avere dimensioni di 950x200 pixel in formato jpg,
e il logo deve chiamarsi logo.gif e sarà in formato gif preferibilmente trasparente
e dimensioni massime 200x150 Px
Caricate le due immagini, la Testatina e il Logo sono visibili in tutte le pagine del sito.

Per visualizzare la grafica caricata possiamo usare il pulsante VISUALIZZA ANTEPRIMA sia in questo caso che tutte le volte che abbiamo bisogno di visualizzare il lavoro realizzato.


Visualizzazione anteprima

Da questa schermata possiamo:
(1) Tornare al pannello di controllo
(2) Modificare la grafica
(3) Confermare ed uscire dall'amministrazione
La modifica della grafica generale si effettua mediante il pulsante "Imposta o modifica il modello ed i colori della grafica principale del sito", che accede al pannello di controllo della grafica che è uno dei due pannelli fondamentali del sito stesso.


Pannello gestione grafica

Questo pannello presenta cinque "Zone" di interesse; è opportuno conoscere bene a cosa servono e come si usano.

Zona (1) Qui si vede l'anteprima dei modelli disponibili col loro nome che va inserito nei campi della

Zona (2) che permette anche la selezione di tutte le opzioni grafiche (Opzioni modelli, Opzioni logo, Opzioni menu, Opzioni Font, Opzioni Link, Opzioni Scorrevole etc)

Zona (3) Pulsante OBBLIGATORIO DA CLICCARE PRIMA DI ABBANDONARE LA PAGINA. In caso contrario la grafica non si vedrà e occorrerà reimpostare le opzioni.

Zona (4) Pulsante che RESETTA le impostazioni DELLA GRAFICA PERSONALE. Da usare in caso di errori nella visualizzazione della grafica. Quando usato controllare che l'e-mail (5) sia ancora impostata.

Zona (5) Campo per l'inserimento dell'e-mail che sarà usata sia per il link E-mail del menu che nel form dei preventivi. ASSICURARSI OGNI VOLTA CHE SI ACCEDE AL PANNELLO GRAFICO CHE SIA IMPOSTATO IL CORRETTTO INDIRIZZO

Ora che abbiamo impostato la grafica (controllare con l'anteprima) possiamo passare ad inserire i contenuti delle pagine del sito usando l'apposito pusante . Questo è il pannello di controllo relativo:


Pannello di editing

Questo pannello è il secondo più importante del Wmatic; possiamo anche qui evidenziare le aree importanti per usarle al meglio, perchè il pannello grafico lo useremo raramente (ovvero quando vogliamo cambiare l'aspetto del sito), mentre questo pannello lo useremo frequentemente per modificare il contenuto delle pagine del sito.

L'utilizzo approfondito lo tratteremo in seguito per ora osserviamo le zone di interesse:

1) menu di selezione delle pagine da aggiornare. Ogni volta che vogliamo aggiornare una pagina, assicuriamoci che abbiamo scelto quella giusta, se aggiorniamo una pagina sbagliata sovrascriviamo e non possiamo più modificare.

2) anteprima delle immagini caricate. Qui possiamo scegliere le immagini da utilizzare. Per inserirle basta trascinarle nell'area editabile e se necessario ridimensionarle tirando gli angoli.

3) la zona editabile. Qui possiamo trascinare le immagini, scrivere i testi, mettere i link etc etc.

4) il pulsante invia modifiche. Quando siamo soddisfatti del risultato clicchiamo e la pagina è creata o modificata.
Questo potrebbe essere un risultato di editing:


Ipotesi di composizione contenuti

Dopo aver inviato le modifiche si apre questa pagina


Pagina di opzione

che ci permette di scegliere se tornare a compilare altre pagine, tornare al pannello di controllo, oppure uscire abbandonando la sessione di aggiornamento.
Ricordiamo che abbandonando la sessione per rientrare è necessario rieseguire il login.

Ritornati al pannello generale il pulsante "Amministra la "Fotogallery" degli articoli (o servizi)..." ci permette di accedere al sottopannello "Gestione Fotogallery" per creare la nostra galleria di immagini prodotti o servizi e popolare il database con le parole chiave che saranno poi trovate dal Motore di Ricerca interno al sito.


Sottopannello Gestione Galleria immagini

Qui le opzioni sono tre: Aggiungi - Visualizza - Cancella.

La prima AGGIUNGI ci permette di aggiungere le immagini (precedentemente caricate) al database in modo che saranno visualizzate nella pagina "Gallery"


Carica immagini nella gallery

L'utilizzo è molto semplice, per prima cosa selezioniamo la foto da aggiungere, poi scriviamo il nome completo di estensione nel campo apposito, poi scriviamo la descrizione completa nel campo giallo (N.B. sarà utilizzata dal motore di ricerca per trovare le immagini), per ultimo premiamo invia.

La seconda VISUALIZZA ci permette di visualizzare il risultato dell'inserimento.


Visualizza la gallery

L'ultima CANCELLA* elimina le immagini dalla fotogallery (dal database) ma NON le cancella* dal sito
(l'opzione cancella definitivamente la trattiamo tra poco)


Pannello cancella* immagini dal database


Per eliminare i records e non farli più visualizzare nella fotogallery, basta cliccare cancella foto sotto l'immagine da cancellare*.
*N.B. questa opzione NON cancella le immagini dal sito ma solo dal database della fotogallery

Per cancellare DEFINITIVAMENTE le immagini non più utili od obsolete useremo l'apposito pulsante dal pannello generale "Cancella DEFINITIVAMENTE i files inutili sul server" che aprirà questa pagina.


Pannello cancella definitivamente immagini

Per cancellare definitivamente (opzione irreversibile) controlleremo nella lista delle immagini il nome del file da eliminare e successivamente lo selezioneremo dal menu a discesa in basso.
Cliccando su "cancella definitivamente il file selezionato" il file sarà eliminato dal server. In caso di errore dovrà essere ricaricato come specificato all'inizio.

Il pulsante "vai alla pagina amministrazione" ci apre la pagina di amministrazione account, dove possiamo controllare la situazione amministrativa (scadenze contrattuali, fatture emesse etc etc)


Pannello Utente

Il penultimo pulsante "FAQ..." ci mostra la pagina delle FAQ dove ci sono le domande comuni sul Wmatic e i link all'assistenza: (questa guida, il forum e l'e-mail tecnica di assistenza)


Pagina delle FAQ

L'ultimo pulsante "Controlla le statistiche di accesso al sito" (se attivato a richiesta) conduce alla sezione delle statistiche di accesso per periodo, IP, motore di ricerca, accessi unici, etc etc. (N.B. Servizio Open Source non Proprietario C-group)


Servizio statistiche O.S.R. a richiesta




  3 - Guida alle funzioni avanzate:



In questa sezione ci occuperemo di come modificare le pagine precedentemente create.

Dopo il login accederemo al pannello generale e useremo il pulsante che ci porta al solito pannello di gestione contenuti.


Per prima cosa selezioniamo la pagina da modificare dal menu a discesa (es. Home Page)
Poi usando il pulsante apri (circoscritto in verde in questa immagine) si aprirà un pop-up; sceglieremo tra i files lo stesso che dobbiamo modificare (in questo caso homepage.html), quindi clicchiamo su OK


Pop-up files da modificare


Cliccato OK si compone l'anteprima nel pop-up,
dopo aver controllato che la pagina scelta corrisponde a quella da modificare (zona rossa in alto a DX) clicchiamo su "apri"



Verifica e conferma trasferimento pagina


A questo punto l'anteprima si trasferirà nella zona editabile:


Modifica contenuti e invio in rete

Possiamo ora procedere alla modifica della pagina con gli strumenti di formattazione. A risultato ottenuto possiamo cliccare su Invia modifiche; la pagina è stata modificata. Controlliamo l'anteprima.

N.B. Un errore frequente durante la modifica delle pagine diverse dall'Home Page (che è settata di default) è non controllare la corrispondenza tra la pagina scelta nel menu a discesa e il file caricato.
Prestare quindi la giusta attenzione e, per non sbagliare, PRIMA selezionare la pagina da modificare dal menu a discesa (in alto a destra) e POI caricare il file sfogliando dal pop-up!!




  4 - Conosciamo meglio le zone editabili


In questa sezione conosceremo meglio le zone dove lavorare per costruire il sito, usando gli strumenti del Wmatic.
Per prima cosa analizziamo le zone della pagina standard che sono uguali per le pagine sotto elencate:

HOME - CHI SIAMO - DOVE SIAMO - SERVIZI


La Pagina Standard

Le zone di interesse sono:
  • Logo (è un immagine trasparente .gif)
  • Testatina (è uno sfondo .jpg)
  • Zona menu (tutta la riga)
  • Pagina (colonna a sinistra)
  • Scorrevole (colonna a destra in alto)
  • Extra (colonna a destra sotto lo scorrevole)
  • Footer (a piè di pagina)
Il logo e la testatina si caricano dalla sezione apposita come abbiamo già visto. Il logo può essere spostato in alto, in basso, a destra o a sinistra in relazione alla grafica della testatina stessa. Questa operazione si effettua dal pannello Imposta modello e colori...

La Zona menu interessa tutta la riga circoscritta di rosso, in questo "binario" possiamo far scorrere il menu, impostare la trasparenza della zona, il tipo, il colore, e gli "effetti" dei caratteri.

Le caratteristiche modificabili della zona menù sono:
  • Allineamento (centro, destra, sinistra, in alto sulla zona menu, in basso sulla zona menu)
  • Tipo font
  • Colore font
  • Colore font al passaggio del mouse
  • Colore dello sfondo della zona menu
  • Trasparenza della zona menu (maggiore, minore, senza)
  • Stile bordo (pieno, tratteggiato, puntato, etc)
  • Spessore bordo (senza, fine, medio, spesso)
Anche questa operazione si effettua dal pannello grafica. Come si può immaginare la combinazione di tutte queste opzioni permette una grafica molto varia (circa 200 combinazioni possibili di stile abbinabili a 256 colori)

La pagina si crea o si modifica dal pannello di editing e può contenere testi formattati, immagini, tabelle, video, oggetti flash embeddati, link etc. La larghezza è di circa 600 px mentre la lunghezza varia secondo i contenuti. Lo sfondo della pagina non è modificabile se non da codice e rimane bianco.

Lo scorrevole contiene un testo scorrevole (e immagini scorrevoli). Di questa zona si può modificare il font e lo sfondo della colonna (che avrà lo stesso colore degli extra)
In questa zona in genere si pubblicano le informazioni che desideriamo comunicare immediatamente (novità, partecipazione ad eventi fieristici, ottenimento di certificazioni, fusioni aziendali, cambio di sede o recapiti, etc)
La sua modifica si attua per quanto riguarda il Font (size, tipo,) attraverso il pannello di editing selezionando la pagina "scorrevole news" dal menu in alto a destra mentre lo sfondo e il colore si sceglie dal pannello grafico.

Col nome Extra abbiamo chiamato la "pagina" stretta e lunga che si trova nella colonna a destra sotto lo scorrevole, il suo colore viene assunto uguale a quello dello scorrevole, e si modifica dal pannello di editing. In genere si pubblicano qui i link esterni, piccole immagini (loghi aziendali, di certificazioni, etc) ma anche filmati e informazioni testuali importanti.

Il Footer è il classico piè di pagina e in genere contiene link, la partita IVA dell'azienda, ed eventualmente l'evidenziazione dei recapiti, copyright etc. Anche il footer si modifica dal pannello di editing.

Adesso che conosciamo le zone dove lavorare passiamo alla realizzazione vera e propria del sito:


  5 - Realizziamo il sito passo passo


Teniamo sempre presente come funziona il Wmatic:
  • le modifiche grafiche vengono scelte nel pannello grafico e memorizzate su un semplice database.
  • le modifiche di contenuti vengono generate dal pannello editing e scritte direttamente su pagine HTML.
  • le immagini sono caricate dal pannello upload su una cartella dedicata
  • la fotogallery legge un semplice database.
  • il motore di ricerca cerca tra la descrizione delle immagini
Detto questo passiamo alla pratica.
Se apriamo il sito dal browser: (http://www.nomedelsito.xx) senza aver fatto ancora nessuna modifica si aprirà una pagina simile a questa:


Pagina iniziale "NUDA"

Questa pagina si visualizza anche ogni volta che commettiamo l'errore di abbandonare il pannello grafico senza cliccare sul pulsante:

Pulsante obbligatorio salva configurazione

Rispetto alla pagina standard questa non ha nessun elemento attivo tranne il logo che viene fornito di default, quindi andiamo a comporre il sito.

Clicchiamo su admin (ultimo link trasparente a destra) e logghiamoci con i dati forniti alla sottoscrizione.
Verremo rimandati al pannello di controllo generale:


Quindi per prima cosa caricheremo la grafica standard (il nostro logo e la testatina) usando il pannello di caricamento logo e testatina. Clicchiamo sul secondo pulsante del pannello generale): e si apre il seguente pannello di upload logo e testatina


Pannello Upload Logo e Testatina

Ci saremo precedentemente creati e salvati sul PC locale:

- la TESTATINA che DEVE ESSERE NOMINATA COME 1.jpg
- il LOGO che DEVE ESSERE NOMINATO COME logo.gif (il logo è bene che sia trasparente o con sfondo idoneo alla testatina)

Quindi selezioniamo SFOGLIA cerchiamo il file 1.jpg (la testatina) e lo carichiamo. Ripetiamo l'operazione col file logo.gif

A questo punto se riapriamo il pannello di caricamento vedremo il logo e la testatina caricati.


Logo e Testatina caricati...

Per attivare la grafica personale dobbiamo andare sul pannello grafico.
Cliccando sul quarto pulsante del pannello generale si aprirà il pannello grafico:



Le operazioni preliminari da fare sono tre:

Per prima cosa clicchiamo sul pulsante resetta la grafica (a sx in basso) per impostare i primi valori sul database e avere un'idea di dove lavorare.
Secondo impostiamo il contatto e-mail (primo campo colonna SX)
Terzo da Nome Modello selezioniamo Grafica Personale (secondo campo colonna SX)

senza fare altro (per ora) clicchiamo sul pulsante obbligatorio
Saremo rimandati direttamente alla pagina anteprima con le tre opzioni:


Pagina anteprima


Vedere correttamente la grafica prescelta indica la riuscita delle operazioni.
In questa pagina è opportuno cliccare su E-mail dal menu e verificare che l'indirizzo immesso sia corretto.

Notare che la grafica "prende forma" ed assomiglia molto alla pagina standard anche se priva di contenuti.

Ora cliccando sul secondo pulsante "modifica questa grafica" possiamo tornare al pannello grafico e lavorare su altre opzioni grafiche.

N.B. In questa guida tratteremo le impostazioni più comuni lasciando all'utente la "sperimentazione" di tutte le numerose combinazioni grafiche. Se vorrete tornare alla prima configurazione, basta cliccare "resetta grafica" (ricordate di ricontrollare il campo e-mail).

Le opzioni più usate sono indicate con i numeri in rosso; quelle meno usate in blu; quelle non più attive con questa versione sono oscurate" (e presto eliminate dal pannello di controllo):


I campi disponibili sono:
  1. attuale contatto e-mail : imposta l'e-mail per il link e-mail del menu e il form preventivi


  2. nome modello : seleziona il modello di testatina da usare


  3. allineamento orizzontale logo : sposta il logo a dx-sx o centro orizzontalmente


  4. scostamento verticale logo max 50 : dispone il logo in alto in basso o centrato verticalmente di max 50 pixels


  5. allineamento orizzontale menu : sposta il menu a dx-sx o centro orizzontalmente


  6. allineamento verticale menu : sposta il menu a dx-sx o centro verticalmente


  7. colore sfondo menu : imposta il colore di sfondo del menu tra le opzioni colori*


  8. trasparenza menu: imposta la trasparenza del menu tra meno-più-senza trasparenza


  9. opzioni bordi del menu: imposta lo stile dei bordi del menu (nessuno, tratteggiato, solido etc)


  10. colore bordo del menu: imposta il colore dei bordi del menu tra le opzioni colori*


  11. larghezza bordi menu: imposta lo spessore dei bordi del menu (sottili, medi, spessi)


  12. tipo carattere link: imposta il tipo di carattere per tutti i link del sito (oltre al menu) tra 5 tipi più usati


  13. grandezza carattere link: imposta la dimensione del font per tutti i link del menu (piccolo-medio-grande)


  14. colore link: imposta il colore del font per tutti i link del menu tra le opzioni colori*


  15. colore link passaggio mouse: imposta il colore dei link di tutto il sito al pasaggio del mouse tra le opzioni colori*


  16. spessore carattere link: imposta il carattere per tutti i link del sito (oltre al menu) tra normale e grassetto


  17. link sottolineati: imposta lo stile di carattere per tutti i link del sito (oltre al menu) tra non sottolineato e sottolineato


  18. colore sfondo scorrevole news: imposta il colore di sfondo a tutta la colonna destra (scorrevole ed extra) tra le opzioni colori*


  19. scelta gadget: Imposta il gadget prescelto (orologio, calendario etc..) tra quelli disponibili


  20. pulsante salva configurazione: pulsante obbligatorio che salva la grafica. Se non usato riporta alla grafica nuda


  21. modello personale: miniatura della grafica personale caricata nel sito


  22. modello predefinito: miniatura della grafica predefinita


  23. altri modelli: permette di scegliere altre grafiche fornite (disponibili a richiesta in alcuni tipi di sottoscrizioni)


  24. pulsante resetta grafica: pulsante che riporta la grafica ai valori di default in caso di emergenza.
    Dopo averlo usato reimpostare il contatto e-mail


* Per usare la palette opzioni colori nei campi che la prevedono, cliccare su: e all'apertura del seguente pop-up:


Pop-up tavolozza colori


Selezionare (cliccandoci sopra) il colore da utilizzare, quindi scriverlo o copiarlo nel campo apposito. Potete usare anche tutti i codici colore previsti dalla codifica HTML (56 miloni)

Usando le opzioni sopraelencate possiamo modificare la grafica del sito. Al termine come sempre non dimenticare di cliccare sul pulsante


Se avessimo scelto queste opzioni:

logo: al centro
menu: centrato, color giallo, meno trasparente, con bordi spessi e neri
colore sfondo scorrevole: arancio
link: font lucida, color blu, grande, sottolineato, on mouse over color rosso

avremmo ottenuto qualcosa di simile:


Esempio di modifica

da notare che i contenuti (in questo caso già presenti) non sono stati modificati, il logo trasparente permette di sovrapporlo alla testatina, e la colonna a destra adesso è tutta di color arancio.
Da notare anche che questa combinazione non è delle migliori, ma fa capire le potenzialità del Wmatic!

A questo punto è necessario disporre delle immagini per usarle nelle pagine.

- Reperire le immagini: dal web (attenzione ai copyright!), da una fotocamera, da una scansione,
- ridimensionarle di circa max 400x300 pixel e salvarle (jpg per le foto, gif o png per le grafiche) in una cartella facilmente accessibile.
N.B. Nella parte trucchi grafici daremo qualche consiglio per una buona elaborazione.

Successivamente cliccando sul primo pulsante: del pannello generale accediamo al pannello di upload immagini generali:


Pannello caricamento immagini


Dove possiamo aggiugere i campi vuoti (1) che ci occorrono per caricare le immagini, cliccare quindi su SFOGLIA e cercare sul Pc locale le immagini da caricare, e inserire una immagine per ogni campo. Alla fine cliccare "carica i files sul server" (2)
Una finestra a pop-up ci informa dello stato del caricamento, alla fine si chiuderà e nella pagina troviamo il riepilogo dell'operazione (numero files inviati, e KB totali).
NB per ogni sessione di invio non si superi la dimensione massima ammessa di 10 Mb!!

Possiamo ora tornare al pannello generale e passare a inserire i contenuti.


Ora dopo aver ottimizzato la grafica e caricate le immagini sul server possiamo inserire i nostri contenuti per le pagine che lo prevedono che sono:

HOME - CHI SIAMO - DOVE SIAMO - SERVIZI - EXTRA - SCORREVOLE NEWS


innanzitutto (se abbiamo abbandonato la sessione) occorre ri-loggarsi; poi dal pannello di controllo clicchiamo sul pulsante:
Si apre il solito pannello di Editing


Pannello di editing

Procediamo poi con questi 5 passaggi in ordine:

1- In alto a sinistra (1) dobbiamo selezionare la pagina da creare (di default è Home Page).
2- Poi scegliamo nell'anteprima (2) le immagini già caricate da usare trascinandole nella zona (3)
   (possiamo ridimensionarle stirando gli angoli, centrarle etc).
3- Quindi inseriamo i testi formattandoli con gli strumenti di editing
4- Controlliamo che sia tutto a posto (centrato, formattato, etc).


Esempio di inserimento contenuti formattati

5- Clicchiamo sul pulsante "invia modifiche" (4) e la nostra pagina (la Home Page in questo caso) è pubblicata e visibile in rete!!

Ripetiamo l'operazione per tutte le altre pagine del sito ricordando di
SELEZIONARE PRIMA DI TUTTO LA PAGINA DA CREARE
e poi inserire i contenuti !!!!


Ricordiamoci che le pagine Scorrevole News e Extra fanno parte della stessa stretta colonna a destra, quindi useremo testi, grafica ed immagini di dimensioni appropriate!! (per lo scorrevole usare un testo non molto lungo in quanto si ripete...) e il Footer è una striscia a piè di pagina che contiene poche informazioni

Il risultato finale potrebbe essere simile a questo:


Esempio Pagina standard ( ...allungata di propostito)


Completate le pagine standard non ci rimane che amministrare la fotogallery ed il sito è pronto:

Quindi riapriamo il pannello di amministrazione e selezioniamo il pulsante che ci porta qui:


Selezionando la prima opzione "aggiungi al database le immagini... " si apre questo pannello:


Per aggiungere un record (foto), scrivere il nome compreso di estensione (es. 11.jpg) nel campo celeste, e la relativa breve ma esauriente descrizione sotto. Tenere presente che le parole usate nella descrizione saranno le parole chiave usate dal motore di ricerca interno, e non usare caratteri speciali ( ' ? " " & % $ etc...)

Al termine del caricamento, tornando indietro e selezionando "visualizza anteprima" possiamo visualizzare quanto realizzato. Cosi:


Anteprima gallery

Se vogliamo cancellare dal database (ma non dal sito) delle foto, scegliamo la relativa opzione, e cliccando su Cancella foto, sotto l'immagine relativa, il record e la descrizione saranno eliminati dal database (ma rimangono a disposizione per i contenuti delle pagine).

Allo stesso modo immagini eliminate fisicamente dal server non si vedranno più nella fotogallery, ma rimane la loro descrizione


Pannello cancella records


A questo punto il sito è pronto!!!

Daremo solo una controllata ed eventualmente operemo delle modifiche come spiegato sopra nella sezione
Guida alle funzioni avanzate

Le immagini obsolete e inutili non utilizzate in nessuna parte del sito si possono eliminare come spiegato nella sezione
Guida alle funzioni di base.


  6 - Trucchi grafici


Le dimensioni delle immagini migliore per questo sito è 400x300 px (le thumbs sono proporzionali) che è la metà della vecchia risoluzione 800x600.

Questo vuol dire che possiamo ottenere dei ridimensionamenti "interi" partendo da una foto digitale salvata sul PC. Basta aprirla con un editor fotografico e impostare la base a 400 px l'altezza si porta automaticamente a 300 px.

Poi salviamola con compressione di circa il 15% otterremo il miglior rapporto qualità/pesantezza.

Per un sito evitiamo l'uso misto affiancato di immagini verticali (portrait) o orizzontali (landscape). La miglior soluzione è utilizzare tutte immagini orizzontali come negli esempi precedenti.

Evitiamo accuratamente se non necessario effetti grafici sulle immagini (cornici, ovali, etc) e di scriverci su. Non è un sistema ritenuto professionale!!

Anche se il Web è un'ottima fonte di immagini assicuriamoci che non ci siano copyright sui loghi (quasi sempre) o sulle immagini (frequentemente). Per le immagini generali, tipo quelle che sono state utilizzate qui, esistono dei siti che offrono immagini libere da diritti, non sono eccezionali, ma di buone ed utili se ne trovano.

Usate immagini consone al sito e al messaggio che volete comunicare.

Curate che i colori siano "accordati"; se reputate di non avere una sufficiente conoscenza della teoria del colore, avvaletevi dello strumento Colorpicker il cui link è riportato alla fine di questa guida. Chiedete se potete qualche parere sui vostri accostamenti, la percezione dei colori è molto soggettiva!!


  7 - Trucchi per velocizzare la realizzazione del sito


Caricate sul server tutte le immagini insieme se possibile.

Quando inserite i contenuti, scrivete i testi (o copiateli da un documento), ed inserite le immagini tutte senza formattazione tranne gli "a capo".

Poi selezionate e formattate secondo il vostro gusto. Se ne disponete scrivete i testi su Word e controllate gli errori di digitazione con lo strumento correzione, quindi copiateli nell'editor.

Se dovete inserire dei link complicati, aprite la pagina del link e copiatelo direttamente dalla barra degli indirizzi. Si eliminano gli errori. Controllate sempre che i link siano funzionanti.

Non è necessario cancellare le immagini dal sito, se non strettamente necessario.

Prima di inserire i contenuti fatevi uno schema di massima dell'impaginazione alla vecchia maniera (carta e matita). Semmai prendete qualche spunto da siti graficamente validi e semplici, di aziende importanti (non per copiare ma per farsi un'idea da professionisti del settore).

Scrivete testi corti e distanziati con un font di colore leggibile. Sul web di legge poco perchè ci si stanca.

Un ultimo ma importante consiglio:

prima di affrontare il lavoro definitivo, fate qualche prova con pochi contenuti, sia di scrittura che di modifica, su diverse pagine in modo da prendere confidenza coi pannelli di controllo ed evitare gli errori comuni sotto descritti.

Fate anche qualche prova di modifica grafica e annotate i risultati, al termine potete usare il pulsante "resetta grafica" per ripartire da zero e poi impostare la grafica che avete ritenuto soddisfacente nelle vostre precedenti prove!!



  8 - Errori comuni


Il Wmatic è un sistema molto stabile e sicuro per fare siti, progettato per chi non ha conoscenza informatica, non ha molto tempo da perdere e desidera un discreto risultato finale. Il software è testato, ma nelle prime sessioni di utilizzo abbiamo riscontrato che si commettono degli errori nell'utilizzo della procedura che non possiamo eliminare ma possiamo consigliarvi come non ripeterli

Del resto si verificano generalmente nelle prime sessioni di utilizzo dei pannelli di amministrazione e dopo una o due volte, presa confidenza, abbiamo riscontrato dal feedback dei nostri utenti che non si commettono più.

Gli errori comuni che si commettono le prime volte sono sostanzialmente TRE.

1- Abbandonare (chiudere o tornare indietro col browser) la pagina di Grafica senza premere il pulsante di conferma:



2- Modificare una pagina senza prima averla selezionata preventivamente dal menu a discesa.


3- Lasciare inavvertitamente vuoto un campo del pannello grafico.

=> Nel primo errore otterremo che la grafica sembri "sparire" dal sito ottenendo una pagina simile a questa:


Errore di abbandono pannello grafico

Si corregge rientrando nel pannello grafico e reimpostando i valori (usando di emergenza il pulsante "resetta grafica" e poi reimpostando i valori successivamente).
Consigliamo di conservare un documento con le impostazioni preferite in modo da poterle rapidamente reinserire.



=> Il secondo errore provoca la sovrascrittura di una pagina con i contenuti di un'altra.

Si corregge reinserendo i contenuti. Consiglio di salvare sul PC locale in formato unico la pagina realizzata per poi riutilizzarla in caso di necessità.

Si previene: abituandosi a selezionare subito la pagina da modificare e poi aprirla dall'apposito tool.




=> Il terzo errore si genera TENTANDO DI VISUALIZZARE UN'ANTEPRIMA DAL PANNELLO GENERALE LA PRIMA VOLTA CHE SI ACCEDE ALL'AMMINISTRAZIONESENZA AVER IMPOSTATO ANCORA NESSUNA GRAFICA (o se si clicca "salva configurazione" la prima volta senza riempire uno dei campi del pannello grafico).

In tal caso si visualizza un messaggio di errore come questo:


Messaggio di errore di campo vuoto

Si corregge tornando al pannello grafico e cliccando su "resetta grafica" (poi si reimpostano le opzioni e si deve reimmettere l'e-mail).

Ricordiamo che il pulsante resetta grafica è un sistema di emergenza per ricaricare una grafica "accettabile" in attesa di ripristinare le opzioni personalizzate!!!


  9 - Fonti di assistenza



  10 - Novità! Guida Filmata all'utilizzo del Wmatic.


Un ulteriore aiuto all'utilizzo del Wmatic può darlo la Guida Filmata, che permette di vedere "click dopo click" la realizzazione di un sito partendo da zero e fare un tour su tutte le principali funzioni del Wmatic.


Screenshot della Guida filmata


Questa è la schermata di inizio, visitate il link sottostante, premete Play e " lo spettacolo" inizia!.
Il filmato è in Flash ® e pesa 50 MB circa. Si accede cliccando qui:

Guida filmata del Wmatic 7.0



  11 - Uso dei Gadget


La dalla versione 7.0 del WMatic sono disponibili simpatici gadget da inserire nel sito.

Per ora c'è la possibilità di inserire il Calendario (con gli onomastici) e l'Orologio analogico.

Per inserirli basta sceglierli nel pannello Grafico nel menu a cascata, si disporranno sotto lo scorrevole News.


Gadget Calendario



Gadget Orologio



Guida realizzata da
Giuseppe Cristofani by C-group.it ® 2008
Tutti i diritti riservati vietata la riproduzione anche parziale