Lavorare sul sito
to.camcom.it
28-29 maggio 2013
Settore Comunicazione esterna e URP
I soggetti che lavorano sul sito
Il sito web della Camera di commercio è un canale di comunicazione cruciale nei
confronti dei nostri utenti. Perciò la redazione web della Camera di Torino è
particolarmente articolata.
Ogni soggetto ha il suo ruolo
specifico nella gestione di tutto
quanto fa funzionare il sito
(produzione contenuti, architettura
dell’informazione, gestione utenti,
gestione problematiche tecniche).
19/12/2015
Corso editor sito web
REDAZIONE WEB
• Editor
• Super Editor
• Super User
FORNITORE TECNICO
Settore Comunicazione esterna e URP
Editor
sono circa 90, divisi tra i vari settori di competenza
abilitati a lavorare su alcune parti dell’albero dei contenuti nell’ambiente di staging
alcuni usano dei Tool disponibili nello staging (Novità, Newsletter, Mailing List)
in generale possono accedere soltanto alla parte di amministrazione pagine
a loro compete assicurarsi che le pagine di loro competenza siano sempre aggiornate
nel contenuto, nelle informazioni di contatto e nei link presentati
PRASSI: Quando un editor ha terminato il suo lavoro sui contenuti, deve
inviare una e-mail alla Redazione web ([email protected]): la
redazione pubblicherà le pagine indicate e si occuperà di promuoverle, di
modificarle o di fornire consulenza sulle operazioni da svolgere.
19/12/2015
Corso editor sito web
Settore Comunicazione esterna e URP
Super Editor
sono editor che lavorano su tutto l’albero dei contenuti e con tutti i Tool
Ce ne sono almeno 2 per Area
PRASSI: i Super Editor non sostituiscono il lavoro degli Editor, ma lo integrano
• pubblicano le modifiche realizzate dagli editor e le pagine nuove
• gestiscono gli strumenti di promozione del sito
(banner, promozioni, novità, scadenze, promozioni, appuntamenti, mailing list, URL statiche)
• supervisionano lo stile di presentazione dei contenuti
• offrono consulenza sull’organizzazione delle pagine
19/12/2015
Corso editor sito web
Settore Comunicazione esterna e URP
Super User
è l’utente amministratore unico
può aggiungere nuovi utenti (nuovi Editor o nuovi Super Editor)
può riassegnare login e password una volta scadute (scadono dopo 6 mesi)
può modificare i profili degli utenti esistenti (assegnando abilitazioni a lavorare su
nuove aree del sito o ad utilizzare determinati Tool).
PRASSI: Per la Camera di commercio di Torino il Super User designato è
Fabrizio Tarizzo. Per richieste in merito alla creazione di nuovi utenti o
all’abilitazione a lavorare su diverse aree del sito, occorre comunque inviare una
e-mail alla Redazione web ([email protected]): la redazione
provvederà a segnalare al Super User l’esigenza dell’Editor.
19/12/2015
Corso editor sito web
Settore Comunicazione esterna e URP
Fornitore tecnico
si occupa della piattaforma tecnologica che fa funzionare il sito
gestisce alcuni aspetti della manutenzione generale del sito e di rispetto dei canoni
di accessibilità web
risolve eventuali problemi tecnici legati alla fornitura
PRASSI: Per il sito istituzionale della Camera di commercio di Torino, il
fornitore tecnico è costituito dalla piattaforma Unioncamere Piemonte / So
Simple / Infocamere.
Per segnalare malfunzionamenti tecnici sul sito occorre inviare una e-mail alla
Redazione web ([email protected]): la redazione contatterà il
fornitore per gestire la segnalazione.
19/12/2015
Corso editor sito web
Settore Comunicazione esterna e URP
Staging:
l’ambiente di gestione del sito
Lo staging (letteralmente: la fase di organizzazione) del
sito della Camera di commercio di Torino è raggiungibile
all’URL https://auth.pie.camcom.it (si consiglia di
memorizzare questo indirizzo nei Preferiti).
Si utilizza lo staging per:
creare nuove pagine
operare modifiche sulle pagine del sito di proprio interesse
(che la redazione web alla fine controllerà)
per inserire file che verranno linkati nelle pagine del sito
(pdf e in casi più rari doc, xls o ppt)
Per poter lavorare sullo staging è necessario essere autorizzati dal Super
User ed avere una coppia identificativa login/password. Se non si utilizza lo
staging per 180 gg., la password scade e l’utente viene disattivato.
19/12/2015
Corso editor sito web
Settore Comunicazione esterna e URP
Login:
ingresso nell’ambiente di staging
ATTENZIONE: E’ importante ricordare che dopo 20 minuti di inattività l’utente viene
automaticamente “buttato fuori” dal sistema, per motivi di sicurezza. In questo caso
sarà il sistema stesso a richiedere di effettuare nuovamente la procedura di login.
Ovviamente, tutto il lavoro rimasto in sospeso e non salvato viene perso.
19/12/2015
Corso editor sito web
Settore Comunicazione esterna e URP
L’ambiente di staging
Nella schermata iniziale viene mostrato il menu delle funzioni di amministrazione del
sito: per gli Editor, normalmente, c’è un solo link (AMMINISTRAZIONE PAGINE)
riportato sul menu in testata e nel corpo della pagina.
19/12/2015
Corso editor sito web
Settore Comunicazione esterna e URP
Amministrazione pagine
Come si usa?
Si può intervenire sulle pagine operando sui
“checkbox” accanto ai titoli.
Cliccando sui simboli “+” o “-” accanto ai titoli
delle pagine, si espande o si comprime il ramo
dei contenuti.
Cliccando sul titolo di una pagina si accede ad
una finestra di anteprima.
Cliccando sulle voci del menu in testata si può
intervenire sulle pagine in precedenza
selezionate.
19/12/2015
Corso editor sito web
Settore Comunicazione esterna e URP
Codici colore
BIANCO
pagina identica su staging e su sito pubblico
VERDE
pagina nuova su staging, non visibile su sito pubblico
BLU
pagina modificata su staging, presente su sito
pubblico nella sua versione precedente alla modifica
ROSSO
pagina eliminata su staging ma ancora visibile su sito pubblico
GIALLO
pagina sospesa su staging, non visibile su sito pubblico
19/12/2015
Corso editor sito web
Settore Comunicazione esterna e URP
Creazione di una nuova pagina
Per creare una pagina è necessario stabilire subito il titolo e il template
Il TEMPLATE è un modello di pagina
predefinito che bisogna selezionare in
base alle differenti esigenze di
presentazione dei contenuti
Gli elementi di un template:
Testo
Immagini
Box (contatti, novità, ecc.)
19/12/2015
Corso editor sito web
Settore Comunicazione esterna e URP
Template - Testo
ELEMENTO T
Area in cui viene visualizzato il testo
formattato editabile dall'utente camerale
con l'utilizzo dell’Editor di testo
19/12/2015
Corso editor sito web
T
Settore Comunicazione esterna e URP
Template - Immagini
Le immagini hanno dimensione fissa
(ad esempio 123x73 pixel)
oppure
una dimensione massima
(che non è possibile superare)
Se l’immagine che si vuole inserire non è di quelle dimensioni si hanno due possibilità:
Ridimensionamento: se l’editor carica un'immagine più grande della dimensione fissa
l'immagine stessa verrà ridimensionata automaticamente dal sistema.
Centratura: se l’editor carica un'immagine più piccola della dimensione fissa il
sistema centrerà la stessa all'interno del box.
19/12/2015
Corso editor sito web
Settore Comunicazione esterna e URP
Template - Immagini
ELEMENTO 1
Immagine posizionata in alto a sinistra nel
corpo centrale della pagina (formato
rettangolare, immagine unica).
Dimensioni: 396x73 pixel
Se l'utente camerale sceglie un TEMPLATE
che prevede l’IMMAGINE 1, ma non la
inserisce, il sistema provvederà a caricare
in automatico un'immagine di default
(vuota) di DIMENSIONI FISSE (396x73).
19/12/2015
Corso editor sito web
1
Settore Comunicazione esterna e URP
Template - Immagini
ELEMENTO 2
Immagine posizionata in alto a destra nel
corpo centrale della pagina, adatta a inserire
un unico logo o immagine identificativa
(copertine, grafiche ad hoc).
Dimensioni: 123x73 pixel
Se l'utente camerale sceglie un
TEMPLATE che prevede l’IMMAGINE 2,
ma non la inserisce, il sistema non
caricherà alcuna immagine.
19/12/2015
Corso editor sito web
2
Settore Comunicazione esterna e URP
Template - Immagini
ELEMENTO 3
Immagine posizionata all’interno del corpo centrale
della pagina, a destra del testo, adatta a foto o
locandine e poster che devono essere visti in
grande formato.
3
Dimensione massima: 183x183 pixel
Se l'utente camerale sceglie un TEMPLATE
che prevede l’immagine 3, ma non la
inserisce, il sistema provvederà a caricare
in automatico un'immagine di default
VUOTA di dimensioni fisse (183x183).
19/12/2015
Corso editor sito web
N.B: l’immagine funziona sempre
come un link che apre la stessa
immagine nel suo formato originario
dentro una finestra popup (se per
esempio si carica un’immagine più
grande di 183x183 pixel)
Settore Comunicazione esterna e URP
Template - Immagini
ELEMENTO 4
Immagine posizionata al fondo della pagina.
Qualora si inserisca del testo questo verrà
posizionato sempre al di sopra dell’immagine.
Dimensione massima: 492x492 pixel
Se l’immagine 4 non viene inserita, il
sistema provvederà a caricare in automatico
un’immagine di dimensioni fisse (492x492).
19/12/2015
Corso editor sito web
4
Settore Comunicazione esterna e URP
Template - Box
ELEMENTO C
Area in cui viene visualizzato il box "Contatti".
L'operatore camerale può solamente scegliere il
singolo contatto tra quelli presenti nel sito: il
contenuto del box non viene editato quando si
accede all'area di editing del template scelto.
I contatti sono amministrabili solo
dai Super Editor (Strumento
Amministrazione contatti).
19/12/2015
Corso editor sito web
C
Settore Comunicazione esterna e URP
Template - Box
ELEMENTO N
Area in cui viene visualizzato il box ”Novità".
Il contenuto del box non viene editato quando si
accede all'area di editing del template scelto, ma
dall'operatore che ha i permessi per popolare il
box stesso (assegnati dal super utente).
Per amministrare le novità di macroarea
(livello 1) e di sezione (livello 2) è
necessario accedere all'area di
amministrazione delle novità.
19/12/2015
Corso editor sito web
N
Settore Comunicazione esterna e URP
Template - Abstract
ELEMENTO A
Area in cui viene visualizzato l’abstract
relativo al titolo della pagina che si vuole
creare. L’abstract va sempre inserito nelle
pagine iniziali delle sezioni del sito (es.
“Documenti e certificati per l’Estero”)
L’abstract ha un limite massimo di 512
caratteri
19/12/2015
Corso editor sito web
A
Settore Comunicazione esterna e URP
Template - Box
LINK AUTOMATICI
Area in cui vengono visualizzati i link alle
sottopagine della pagina in cui ci si trova.
Il contenuto del box non viene editato quando
si accede all'area di editing del template
scelto, ma viene generato automaticamente
dal sistema, che rileva le sottopagine.
19/12/2015
Corso editor sito web
Settore Comunicazione esterna e URP
Struttura gerarchica delle pagine
MACROAREA
Es.: Amministr.
trasparente
SEZIONI
Es.: Personale
Pagina di I livello
Template Macroarea
Template Sezione
Es.: Contrattazione
integrativa…
Template pag I e II
Pagina di II livello
Pagina di III livello
19/12/2015
Corso editor sito web
Es.: Contrattazione
anni precedenti
Es.: Contrattazione anno
2011
Template pag III
Settore Comunicazione esterna e URP
Template Macroarea
T01
Elementi:
Novità / Testo / (link automatici) / Contatto
Note:
è sicuramente l’unico template utilizzato a livello di
creazione di una pagina per una nuova macroarea
T15
Elementi:
Novità / Testo + IMG-3 / (link automatici) / Contatto
Note:
sostanzialmente aggiunge un’immagine di tipo 3
al template T01
19/12/2015
Corso editor sito web
A fronte della
creazione di una
nuova macroarea,
dopo la scelta del
template e del titolo,
viene presentata
all’editor anche la
scelta dell’immagine
di macroarea per
l’intestazione delle
pagine e quella per
il menu laterale.
Settore Comunicazione esterna e URP
Template Sezione (1)
T02
Elementi:
IMG-1 + IMG-2 / Novità / Testo / (Link automatici) / Contatto
Note: è un template che pone in testa alla pagina un’immagine di tipo 1 (banner) e
una di tipo 2.
La richiesta di un’immagine, se non soddisfatta, genera automaticamente un’immagine
bianca (vuota) della dimensione prevista. Quindi, è inopportuno usare questo template se
non c’è necessità di inserire nella pagina un’immagine di tipo 1.
T03
Elementi:
IMG-1 + IMG-2 / Novità / Testo + IMG-3 / (Link automatici) / Contatto
Note: è la variante di T02 con un’immagine di tipo 3 posizionata
accanto al testo.
19/12/2015
Corso editor sito web
Settore Comunicazione esterna e URP
Template Sezione (2)
T04 (Es: http://www.to.camcom.it/Page/t04/view_html?idp=3995)
Elementi:
Abstract + IMG-2 / Novità / Testo / (Link automatici) / Contatto
Note: è un template che pone in testa alla pagina l’elemento Abstract e accanto
un’immagine di tipo 2. È il più usato per creare pagine a livello di sezione.
T05 (Es: http://www.to.camcom.it/Page/t05/view_html?idp=6909)
Elementi:
Abstract + IMG-2 / Novità / Testo + IMG-3 / (Link automatici) / Contatto
Note: è la variante di T04 con immagine di tipo 3 posizionata accanto al testo.
19/12/2015
Corso editor sito web
Settore Comunicazione esterna e URP
Template Sezione (3)
T16
Elementi:
Novità / Testo + IMG-2(x5) / (Link automatici) / Contatto
Note: è un template usato in particolare per le pagine che riportano iniziative, eventi o
appuntamenti (corsi, convegni, seminari, etc). Le cinque immagini di tipo 2 posizionate
accanto al testo servono ad inserire altrettanti loghi di partner della Camera di
commercio in una singola iniziativa.
Va sottolineato che a livello di sezione questo tipo di pagina non viene mai usato, mentre è
molto diffusa la sua variante a livello di pagina di primo o secondo livello (T17).
T19 (Es: http://www.to.camcom.it/Page/t19/view_html?idp=10220)
Elementi:
Novità / Testo(x16) + IMG-2(x16) / (Link automatici) / Contatto
Note: è un template particolare, usato per elenchi testuali di tipo complesso, con 16
brevi blocchi di testo descrittivo affiancati da altrettante immagini di tipo 2.
19/12/2015
Corso editor sito web
Settore Comunicazione esterna e URP
Template Sezione (4)
T22
Elementi:
Novità / Testo + IMG-2(x16) / (Link automatici) / Contatto
Note: è un template adatto ad elenchi lunghi, con 16 immagini di tipo
2 (per iniziative che necessitino di più loghi). Va tenuto presente che
l’uso di questo template “forza” ovviamente la lunghezza della pagina
che, a fronte di un testo non lunghissimo, risulta scrollare in modo
antiestetico.
19/12/2015
Corso editor sito web
Settore Comunicazione esterna e URP
Template Pagine I o II livello (1)
T06 (Es.: http://www.to.camcom.it/Page/t06/view_html?idp=13070)
Elementi:
IMG-1 + IMG-2 / Testo / (Link automatici) / Contatto
Note: è il corrispettivo per le pagine di primo e secondo livello di T02, in
cui il testo è l’elemento preponderante. Da notare come l’immagine di tipo
1 può essere utile per un’eventuale necessità di disposizione orizzontale
dei loghi.
T07 (Es.: http://www.to.camcom.it/Page/t07/view_html?idp=12215)
Elementi:
IMG-1 + IMG-2 / Testo + IMG-3 / (Link automatici) / Contatto
Note: è la variante di T06 con immagine di tipo 3 posizionata accanto al
testo.
19/12/2015
Corso editor sito web
Settore Comunicazione esterna e URP
Template Pagine I o II livello (2)
T08 (Es.: http://www.to.camcom.it/Page/t08/view_html?idp=3471)
Elementi:
IMG-2 / Testo / (Link automatici) / Contatto
Note: è in assoluto il template più diffuso e usato sul sito. Si può dire in un
certo senso che sia il corrispettivo per le pagine di primo e secondo livello di
T04. La sua essenzialità lo candida a template migliore per le pagine di tipo
informativo, dove quello che conta è il testo e la sua corretta formattazione.
T10 (Es.: http://www.to.camcom.it/Page/t10/view_html?idp=6741)
Elementi: IMG-2 / Testo + IMG-3 / (Link automatici) / Contatto
Note: è la variante di T08, che ha solo il testo come elemento
centrale, con l’aggiunta dell’immagine di tipo 3 a fianco del testo.
19/12/2015
Corso editor sito web
Settore Comunicazione esterna e URP
Template Pagine I o II livello (3)
T09 (Es.: http://www.to.camcom.it/Page/t09/view_html?idp=7691)
Elementi:
IMG-2 / Testo / IMG-4 / (Link automatici) / Contatto
Note: presenta la stessa struttura di T08 con in più una immagine di tipo 4
posizionata al di sotto del testo. Il template è valido quando occorre in qualche
modo visualizzare un’immagine dalle dimensioni relativamente grandi.
T17 (Es.: http://www.to.camcom.it/Page/t17/view_html?idp=10778)
Elementi:
Testo + IMG-2(x5) / (Link automatici) / Contatto
Note: è un template usato in particolare per le pagine che riportano iniziative, eventi
o appuntamenti (corsi, convegni, seminari, etc). Le cinque immagini di tipo 2 posizionate
accanto al testo servono ad inserire altrettanti loghi di partner della Camera di
commercio.
19/12/2015
Corso editor sito web
Settore Comunicazione esterna e URP
Template Pagine I o II livello (4)
T20 (Es.: http://www.to.camcom.it/Page/t20/view_html?idp=7136)
Elementi:
Testo(x16) + IMG-2(x16) / (Link automatici) / Contatto
Note: è un template particolare, usato per elenchi testuali di tipo complesso, con
16 brevi blocchi di testo descrittivo affiancati da altrettante immagini di tipo 2.
T23 (Es.: http://www.to.camcom.it/Page/t23/view_html?idp=4960)
Elementi:
Testo + IMG-2(x16) / (Link automatici) / Contatto
Note: è un template con un unico blocco di testo, con 16 immagini di tipo 2 (per
iniziative che necessitino di più loghi). Va tenuto presente che l’uso di questo
template “forza” ovviamente la lunghezza della pagina che, a fronte di un testo
non lunghissimo, risulta scrollare in modo antiestetico.
19/12/2015
Corso editor sito web
Settore Comunicazione esterna e URP
Template Pagine III livello (1)
T11
Elementi:
IMG-1 + IMG-2 / Testo / Contatto
Note: è il corrispettivo per le pagine di primo e secondo livello di T06, in cui il
testo è l’elemento preponderante. Da notare come l’immagine di tipo 1 può
essere utile per un’eventuale necessità di disposizione orizzontale dei loghi.
T12 (Es.: http://www.to.camcom.it/Page/t12/view_html?idp=11465)
Elementi:
IMG-2 / Testo + IMG-3 / Contatto
Note: è la variante di T11 con immagine di tipo 3 posizionata accanto al testo.
19/12/2015
Corso editor sito web
Settore Comunicazione esterna e URP
Template Pagine III livello (2)
T13 (Es.: http://www.to.camcom.it/Page/t13/view_html?idp=11214)
Elementi:
IMG-2 / Testo / IMG-4 / Contatto
Note: prevede un’immagine di tipo 4 sotto al testo. Il template è valido quando
occorre in qualche modo visualizzare un’immagine dalle dimensioni relativamente
grandi.
T14 (Es.: http://www.to.camcom.it/Page/t14/view_html?idp=4708)
Elementi:
IMG-2 / Testo / Contatto
Note: è il corrispettivo per le pagine di terzo livello di T08. La sua essenzialità lo
candida a template migliore per le pagine di tipo informativo, dove quello che
conta è il testo e la sua corretta formattazione.
19/12/2015
Corso editor sito web
Settore Comunicazione esterna e URP
Template Pagine III livello (3)
T18 (Es.: http://www.to.camcom.it/Page/t18/view_html?idp=4664)
Elementi:
Testo + IMG-2(x5) / Contatto
Note: è un template usato in particolare per le pagine che riportano iniziative, eventi
o appuntamenti (corsi, convegni, seminari, etc). Le cinque immagini di tipo 2 posizionate
accanto al testo servono ad inserire altrettanti loghi di partner della Camera di
commercio.
T21 (Es.: http://www.to.camcom.it/Page/t21/view_html?idp=4735)
Elementi:
Testo(x16) + IMG-2(x16) / Contatto
Note: è il template usato per elenchi testuali di tipo complesso, con 16 brevi
blocchi di testo descrittivo affiancati da altrettante immagini di tipo 2.
19/12/2015
Corso editor sito web
Settore Comunicazione esterna e URP
Template Pagine III livello (4)
T24 (Es.: http://www.to.camcom.it/Page/t24/view_html?idp=6317)
Elementi:
Testo + IMG-2(x16) / Contatto
Note: è un template con un unico blocco di testo, con 16 immagini
di tipo 2 (per iniziative che necessitino di più loghi). Va tenuto
presente che l’uso di questo template “forza” ovviamente la
lunghezza della pagina che, a fronte di un testo non lunghissimo,
risulta scrollare in modo antiestetico.
19/12/2015
Corso editor sito web
Settore Comunicazione esterna e URP
Suggerimento
Per trovare facilmente esempi di uso dei template nelle pagine interne
del sito della Camera di commercio di Torino, è possibile usare un
qualsiasi motore di ricerca (es: Google):
inserire una stringa di questo tipo nel campo della ricerca:
"Page/t06" site:to.camcom.it
dove all’interno delle virgolette, dopo “Page/t” va inserito il numero a due
cifre del template ricercato
19/12/2015
Corso editor sito web
Settore Comunicazione esterna e URP
L’editor di testo
L’editor di testo è un software simile per certi versi ad una versione (molto ridotta) di Word.
Si attiva nel
momento in cui
si richiede la
compilazione o
la modifica di
un elemento
“Testo” nella
struttura della
pagina.
19/12/2015
Corso editor sito web
Editor di testo
Settore Comunicazione esterna e URP
Descrizione
La finestra dell’Editor di testo si presenta come quella di un tradizionale word
processor o editor HTML, ma con funzionalità ridotte.
All’interno della finestra di testo è possibile:
Incollare i contenuti dopo averli copiati da altre
applicazioni (Blocco Note, Adobe Acrobat, Word)
scrivere direttamente i contenuti desiderati
Editor di testo
INCOLLA
COPIA
19/12/2015
Corso editor sito web
Settore Comunicazione esterna e URP
Menu (tasti dell’editor)
Per formattare il contenuto delle pagine l’UNICO strumento che possiamo usare è l’Editor di testo.
L’Editor, però, non mantiene alcun tipo di formattazione quando si copia del testo da un’altra applicazione.
Perciò è inutile formattare il testo prima di incollarlo nella finestra dell’Editor: grassetti, a capi, elenchi
puntati o numerati vanno inseriti direttamente con gli strumenti messi a disposizione dall’Editor.
LEGENDA:
1. Consente di visualizzare il sorgente HTML della pagina.
2. Per eseguire il copia e incolla utilizzare questo pulsante. Il copia e incolla di testo formattato direttamente nell'area di gestione
del contenuto NON garantisce in alcun modo il rispetto dei criteri di accessibilità della pagina.
3. Annulla l'ultima modifica / Ripristina l'ultima modifica.
4. Consente di trovare all'interno del testo una parola o una frase. Consente di sostituire una parola o una lettera nel testo.
5. Consente di selezionare l'intero testo.
6. Consente di rimuovere la formattazione al testo selezionato.
7. Consente di inserire dei caratteri particolari all'interno del documento.
8. Gruppo di tasti che consentono di inserire link
•Consente di inserire un link ad un sito esterno o ad una e-mail o un link interno al testo.
•Consente di inserire un link ad una pagina del sito.
•Consente di inserire un link ad un file.
•Consente di togliere il link ad una parola.
•Consente di creare un link interno al testo.
19/12/2015
Corso editor sito web
Settore Comunicazione esterna e URP
Visualizzare il codice HTML
Per gli utenti più evoluti, è possibile
consultare la versione in linguaggio HTML
della pagina che si sta costruendo.
Utile per verificare la rispondenza a criteri di
accessibilità della pagina o per controllare la
presenza di tag errati nel corpo del testo.
19/12/2015
Corso editor sito web
Settore Comunicazione esterna e URP
Copia e incolla
Si può incollare qualsiasi tipo di testo
nell’Editor: l’unica accortezza è quella di
incollare sempre usando il tasto
INCOLLA COME TESTO SEMPLICE,
che assicura la perfetta rispondenza ai criteri
di accessibilità della pagina web.
A seconda della versione del browser, il tasto
può attivare una finestrella di dimensioni
ridotte dove incollare il testo o può incollare
direttamente il testo copiato nella finestra
centrale dell’Editor.
19/12/2015
Corso editor sito web
Settore Comunicazione esterna e URP
Inserimento dei link
(Link esterni)
Per creare un link ad una risorsa
esterna usare il pulsante con la
“PALLA AZZURRA”.
Questo apre una finestra di
creazione collegamento dove sarà
possibile scrivere (o incollare) l’URL
desiderato nel campo URL.
Selezionando il menu
“Tipo di collegamento”
è anche possibile collegarsi ad
un’ancora nella pagina (se prima la si è
creata) o ad un indirizzo di e-mail (è
sufficiente scriverlo o incollarlo nel campo
“Indirizzo e-mail”).
19/12/2015
Corso editor sito web
Settore Comunicazione esterna e URP
Inserimento dei link
(Link interni)
Per linkare una risorsa interna (una
pagina del nostro sito) è indubbiamente
più comodo usare il tasto di link interno
“PALLA ROSSA”.
La finestra di creazione collegamento in
questo caso propone un menu
corrispondente a quello delle macroaree,
da esplorare aprendone i “rami” fino ad
arrivare alla pagina desiderata che – se
cliccata – verrà evidenziata in giallo.
19/12/2015
Corso editor sito web
Settore Comunicazione esterna e URP
Inserimento dei link
(Link a file)
Per collegare un file ad una parola
linkata (es. “Scarica il file in formato
PDF”) occorre usare il pulsante
“PALLA VERDE”.
In questo caso la finestra di
creazione collegamento presenta
tutte le possibili cartelle del file server,
all’interno delle quali è possibile
trovare i file (i nomi segnalati sono
quelli del “titolo del file”). Scorrendo in
basso si trovano oltre ai file le
Newsletter.
19/12/2015
Corso editor sito web
Settore Comunicazione esterna e URP
Elenchi puntati
Per creare elenchi puntati è necessario scrivere o incollare il testo di base, andare
a capo tra un punto e l’altro con il tasto Invio e alla fine selezionare tutto il testo che
si desidera far diventare elenco puntato e cliccare sul tasto ELENCO PUNTATO.
Ripremendo lo stesso tasto una seconda volta, sempre con il testo o anche solo
una parte di esso selezionata, si ritorna alla formattazione precedente (assenza di
elenco puntato).
ATTENZIONE: È possibile che si verifichino dei problemi di formattazione del
testo nell’utilizzo di Elenchi puntati. In tal caso, rivolgersi alla Redazione web.
19/12/2015
Corso editor sito web
Settore Comunicazione esterna e URP
Linee guida principali
Le tre linee guida principali per scrivere sul web sono:
Essere succinti
sul Web semplicità e brevità sono d’obbligo, pena l’abbandono della pagina. La prima
regola è scrivere non più del 50% del testo che si è usato in una pubblicazione stampata
Scrivere per la scansionabilità
non bisogna richiedere agli utenti di leggere blocchi di testo lunghi e continui
Usare l’ipertesto
dividere in pagine multiple le informazioni eterogenee e strutturate gerarchicamente
19/12/2015
Corso editor sito web
Settore Comunicazione esterna e URP
Testo su più livelli
Sul Web ogni testo può essere scaglionato e quindi letto su più livelli, per esempio:
Titolo
Sottotitolo
Abstract
primo paragrafo
in cui concentrare il contenuto più importante
testo intero
con parole più significative ben evidenziate in grassetto o corsivo
eventuali link o testi di approfondimento
…e soprattutto: cominciamo dalla conclusione per passare poi ai dettagli!
19/12/2015
Corso editor sito web
Settore Comunicazione esterna e URP
Stile: alcune linee guida
1) Usare massima chiarezza e semplicità
•
•
frasi dirette
tono informale
2) Spezzare testi troppo lunghi in paragrafi, e assegnare un titoletto a
ciascuno
•Attenzione ai grassetti
•Attenzione agli “a capi”
3) Invertire l’ordine dei contenuti
•partire subito dalla conclusione o dall’idea centrale, e poi scendere nel dettaglio
4) Documenti scaricabili
•l’espressione standard è : “Scarica il file ………… - n pagine, tot Mb”
(con le parole linkate)
19/12/2015
Corso editor sito web
Settore Comunicazione esterna e URP
Formattazione: alcune linee guida
1) Dare sempre un “a capo” a inizio e fine pagina
2) Il grassetto va limitato a:
parole chiave
scadenze (es.: la data, se si sta parlando di un convegno)
parole o parti di frasi che si ritengono davvero importanti all’interno del testo
3) Creare solo elenchi puntati (non numerati)
4) Da evitare:
•Sottolineare le parole, che si confonderebbero coi link
•Riportare URL lunghissime nel testo che dilatano la pagina (linkare la parola/frase)
•Creare tabelle
19/12/2015
Corso editor sito web
Settore Comunicazione esterna e URP
Formati dei file
Sia le norme di usabilità e di accessibilità per il Web, sia la più recente normativa
impongono alle pubbliche amministrazioni l’uso di formati non proprietari, cioè di file
visualizzabili con software gratuiti.
Per questo motivo alleghiamo alle pagine web soltanto file con queste
estensioni:
• pdf
• rtf
Nel caso in cui il documento allegato sia in formato doc, ppt o xls, che sono i formati proprietari di MS Office, l’utente
potrà visualizzarlo solamente se ha acquistato il software di Microsoft, oppure se ha installato un visualizzatore
gratuito di Word, PowerPoint o Excel.
19/12/2015
Corso editor sito web
Settore Comunicazione esterna e URP
Novità
Lo strumento Novità è sempre stato uno dei più usati
strumenti di promozione del sito.
Le novità inserite nello staging vanno a posizionarsi
nel box presente prima del testo in tutte le pagine
scelte dall’editor, dalla home page alle pagine di
macroarea fino a quelle di sezione.
È possibile richiedere alla Redazione Web la pubblicazione della novità di appuntamenti nella
pagina relativa di settore specificando nella mail:
- Titolo della novità (in formato: xx/xx/xx – testo del titolo)
- Testo della novità (breve e incisivo)
19/12/2015
Corso editor sito web
Settore Comunicazione esterna e URP
Appuntamento
Per inserire un appuntamento sul calendario del sito bisogna
fare richiesta alla Redazione Web fornendo i seguenti dati:
- tipo di appuntamento (incontro, seminario, fiera..)
- titolo dell’appuntamento
- data, ora e luogo dell’appuntamento
- breve descrizione dell’appuntamento
19/12/2015
Corso editor sito web
Settore Comunicazione esterna e URP
Mailing List
Le mailing list sono uno strumento di promozione del sito
che consiste nell’invio ad una lista di utenti registrati di un
“promemoria” via mail relativo alle novità della Camera di
commercio.
La Redazione web inoltra la mail ogni venerdì pomeriggio.
La compilazione della mail viene fatta sulla base delle novità
e degli appuntamenti pubblicati durante la settimana sul sito
camerale, per tanto gli Editor sono invitati a monitorare i
tempi per la promozione delle iniziative del settore di
appartenenza per migliorare la comunicazione con i propri
utenti.
19/12/2015
Corso editor sito web
Settore Comunicazione esterna e URP
Promozioni
Le promozioni vengono utilizzate come focus su una
specifica notizia (es. Infopoint, Decreto,..)
Le promozioni non possono essere utilizzate per promuovere eventi.
Per richiedere l’inserimento di una promozione bisogna fare
richiesta alla Redazione Web fornendo i seguenti dati:
- Immagine o logo inerente la promozione
- titolo della promozione
- breve testo descrittivo della promozione (max 300 caratteri)
La Redazione web, prima di
accordare la pubblicazione
di una promozione, valuta
l’entità della novità.
19/12/2015
Corso editor sito web
Settore Comunicazione esterna e URP
Banner
I banner sono dei sistemi di promozione che, attraverso
un’immagine (statica o animata), informano gli utenti
dell'esistenza di un prodotto o di un servizio.
Queste “promozioni” possono essere pubblicate in Home page e saranno visibili, in alto a destra della
pagina, in modo intermittente. Possono inoltre essere pubblicati all’interno delle pagine di interesse.
La realizzazione grafica dei banner è a cura della redazione web, sotto indicazioni dell’editor che ne
fa richiesta e che dovrà fornire il materiale (immagine e testo) per la creazione della striscia.
Nel caso che l’editor che faccia richiesta di un banner sia in possesso dello stesso, questo può essere
inviato direttamente dai settori con una grafica apposita.
Per creare un banner in home page o nelle altre pagine
del sito bisogna rivolgersi alla Redazione Web.
19/12/2015
Corso editor sito web
Settore Comunicazione esterna e URP
Restyling e accessibilità
Il restyling dei siti camerali è stato condotto in
maniera che ogni sito sia conforme alle disposizioni
sull'accessibilità presenti nella legge n. 4/2004 e nel
relativo schema di regolamento attuativo.
Il tema dell'accessibilità si compone di due fondamentali elementi:
1. l'attenzione ai problemi di accesso al Web dei disabili
2. l'attenzione a garantire l'universalità dell'accesso, ovvero a non escludere nessuno:
non solo i disabili in senso stretto, ma anche chi soffre di disabilità temporanee, chi
ha attrezzature obsolete, chi usa sistemi poco comuni, chi dispone di connessioni
particolarmente lente
19/12/2015
Corso editor sito web
Settore Comunicazione esterna e URP
Inserimento di immagini
Ogni volta che viene inserita una immagine è necessario anche inserire un testo correlato.
Tali testi devono essere pertinenti alle immagini e devono garantire una descrizione non
tanto dell'elemento grafico, quanto piuttosto del suo valore logico all'interno della pagina.
Viene inserita una immagine del Castello del Valentino in un testo che
parla del monumento Torinese:
CORRETTO
testo alternativo utile
<img src=“castello.gif” alt=“Fotografia del castello del Valentino”>
SBAGLIATO
testo alternativo inutile
<img src=“castello.gif” alt=“castello”> o peggio <img src=“castello.gif” alt=“immagine”>
19/12/2015
Corso editor sito web
Settore Comunicazione esterna e URP
Inserimento di immagini
Nella stessa pagina non è corretto inserire link diversi caratterizzati dallo stesso testo.
Nel nostro caso, utilizzando l'editor di testo, non bisogna evidenziare due volte le stesse
parole facendo dei link a due pagine differenti (ad esempio due "clicca qui" nello stesso testo).
CORRETTO
link diversi con testi diversi:
<a href=“http://www.home.it” title=“vai al sito Home”>HOME</a>
<a href=“http://www.pie.camcom.it” title=“torna alla home page”>TORNA ALLA HOME</a>
SBAGLIATO
link diversi con stesso testo:
<a href=“http://www.home.it” title=“vai al sito Home”>HOME</a>
<a href=“http://www.pie.camcom.it” title=“torna alla home page”>HOME</a>
19/12/2015
Corso editor sito web
Settore Comunicazione esterna e URP
Separazione
Separazione dei
dei link
link
Deve essere premura dell'editor fare in modo di non inserire link adiacenti separati solo da
uno spazio bianco. Nel nostro caso, utilizzando l'editor Nekit, non bisogna linkare due parole
non inframmezzate da altro testo (anche solo una lettera o un segno di interpunzione).
CORRETTO
link adiacenti separati correttamente:
<p> gli evangelisti:<br/>
-<a href=“http://www.luca.it» title=»vai al sito di Luca”> Luca </a><br/>
-<a href=“http://www.Giovanni.it» title=»vai al sito di Giovanni”> Giovanni </a><br/>
-<a href=“http://www.Marco.it» title=»vai al sito di Marco”> Marco </a><br/>
-<a href=“http://www. Matteo.home.it» title=»vai al sito di Matteo”>Matteo </a><br/></p>
19/12/2015
Corso editor sito web
Settore Comunicazione esterna e URP
Separazione dei link
SBAGLIATO
link adiacenti separati scorrettamente:
<p> gli evangelisti:<br/>
<a href=“http://www.luca.it» title=»vai al sito di Luca”> Luca </a><br/>
<a href=“http://www.Giovanni.it» title=»vai al sito di Giovanni”> Giovanni </a><br/>
<a href=“http://www.Marco.it» title=»vai al sito di Marco”> Marco </a><br/>
<a href=“http://www. Matteo.home.it» title=»vai al sito di Matteo”>Matteo </a><br/></p>
N.B.: è preferibile inserire le liste di link come elenco puntato utilizzando
lo strumento disponibile nell’editor di testo
19/12/2015
Corso editor sito web
Settore Comunicazione esterna e URP
Passaggio da HTML 4.0
a XHTML 1.0
Le pagine dei siti non sono più scritte in HTML 4.0 bensi in XHTML 1.0.
L' XHTML è un'evoluzione ed un'estensione dell' HTML 4.0. Tuttavia certi usi che
erano perfettamente legali in HTML 4.0 devono essere cambiati.
Pertanto gli editor responsabili del contenuto di ogni sito, qualora vogliano essi stessi
inserire tag di formattazione, devono attenersi agli accorgimenti indicati.
E' fondamentale che il codice che viene inserito sia conforme alle regole, sia cioè
valido. Infatti questo è un prerequisito per poter definire accessibile una pagina.
Nel quotidiano lavoro degli editor sarà sufficiente evitare di copiare testo da altre applicazioni
o da altri siti senza utilizzare lo strumento INCOLLA COME TESTO SEMPLICE. Per editor
competenti a vario titolo sul codice HTML/XHTML, la redazione web può fornire le indicazioni
per lavorare sul codice correttamente e rispettando i criteri di accessibilità.
19/12/2015
Corso editor sito web