Lavorare sul sito to.camcom.it 28-29 maggio 2013.
-
Upload
gianluca-magnani -
Category
Documents
-
view
217 -
download
1
Transcript of Lavorare sul sito to.camcom.it 28-29 maggio 2013.
Lavorare sul sitoto.camcom.it
28-29 maggio 2013
Corso editor sito web
Settore Comunicazione esterna e URP
04/11/23
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.
I soggetti che lavorano sul sito
REDAZIONE WEB• Editor• Super Editor• Super User
FORNITORE TECNICO
REDAZIONE WEB• Editor• Super Editor• Super User
FORNITORE TECNICO
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).
Corso editor sito web
Settore Comunicazione esterna e URP
04/11/23
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
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.
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.
a loro compete assicurarsi che le pagine di loro competenza siano sempre aggiornatenel contenuto, nelle informazioni di contatto e nei link presentati
Corso editor sito web
Settore Comunicazione esterna e URP
04/11/23
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
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
Corso editor sito web
Settore Comunicazione esterna e URP
04/11/23
Super User
è l’utente amministratore unico
può aggiungere nuovi utenti (nuovi Editor o nuovi Super Editor)
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.
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.
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).
Corso editor sito web
Settore Comunicazione esterna e URP
04/11/23
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
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.
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.
risolve eventuali problemi tecnici legati alla fornitura
Corso editor sito web
Settore Comunicazione esterna e URP
creare nuove pagine
04/11/23
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:
Staging: l’ambiente di gestione del sito
per inserire file che verranno linkati nelle pagine del sito(pdf e in casi più rari doc, xls o ppt)
operare modifiche sulle pagine del sito di proprio interesse (che la redazione web alla fine controllerà)
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.
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.
Corso editor sito web
Settore Comunicazione esterna e URP
04/11/23
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.
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.
Corso editor sito web04/11/23
Settore Comunicazione esterna e URP
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.
L’ambiente di staging
Corso editor sito web
Settore Comunicazione esterna e URP
04/11/23
Si può intervenire sulle pagine operando sui “checkbox” accanto ai titoli.
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.
Cliccando sui simboli “+” o “-” accanto ai titoli delle pagine, si espande o si comprime il ramo dei contenuti.
Amministrazione pagine
Come si usa?
Corso editor sito web
Settore Comunicazione esterna e URP
04/11/23
Codici colore
BIANCO
VERDE
BLU
ROSSO
GIALLO
pagina identica su staging e su sito pubblico
pagina nuova su staging, non visibile su sito pubblico
pagina modificata su staging, presente su sito pubblico nella sua versione precedente alla modifica
pagina eliminata su staging ma ancora visibile su sito pubblico
pagina sospesa su staging, non visibile su sito pubblico
Corso editor sito web
Settore Comunicazione esterna e URP
04/11/23
Creazione di una nuova pagina
Gli elementi di un template:
Testo
Immagini
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
Il TEMPLATE è un modello di pagina predefinito che bisogna selezionare in base alle differenti esigenze di presentazione dei contenuti
Box (contatti, novità, ecc.)
Corso editor sito web
Settore Comunicazione esterna e URP
04/11/23
Template - Testo
T
ELEMENTO T
Area in cui viene visualizzato il testo formattato editabile dall'utente camerale con l'utilizzo dell’Editor di testo
Corso editor sito web
Settore Comunicazione esterna e URP
04/11/23
Template - Immagini
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.
Le immagini hanno dimensione fissa(ad esempio 123x73 pixel)
oppure una dimensione massima(che non è possibile superare)
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à:
Corso editor sito web04/11/23
Settore Comunicazione esterna e URP
ELEMENTO 1
Immagine posizionata in alto a sinistra nel corpo centrale della pagina (formato rettangolare, immagine unica).
Dimensioni: 396x73 pixel
Template - Immagini
1
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).
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).
Corso editor sito web04/11/23
Settore Comunicazione esterna e URP
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
Template - Immagini
Se l'utente camerale sceglie un TEMPLATE che prevede l’IMMAGINE 2,
ma non la inserisce, il sistema non caricherà alcuna immagine.
Se l'utente camerale sceglie un TEMPLATE che prevede l’IMMAGINE 2,
ma non la inserisce, il sistema non caricherà alcuna immagine.
2
Corso editor sito web04/11/23
Settore Comunicazione esterna e URP
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.
Dimensione massima: 183x183 pixel
Template - Immagini
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).
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).
3
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)
Corso editor sito web04/11/23
Settore Comunicazione esterna e URP
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
Template - Immagini
Se l’immagine 4 non viene inserita, il sistema provvederà a caricare in automatico
un’immagine di dimensioni fisse (492x492).
Se l’immagine 4 non viene inserita, il sistema provvederà a caricare in automatico
un’immagine di dimensioni fisse (492x492).
4
Corso editor sito web04/11/23
Settore Comunicazione esterna e URP
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.
Template - Box
CI contatti sono amministrabili solo
dai Super Editor (Strumento Amministrazione contatti).
I contatti sono amministrabili solo dai Super Editor (Strumento Amministrazione contatti).
Corso editor sito web04/11/23
Settore Comunicazione esterna e URP
Template - Box
Per amministrare le novità di macroarea (livello 1) e di sezione (livello 2) è necessario accedere all'area di amministrazione delle novità.
Per amministrare le novità di macroarea (livello 1) e di sezione (livello 2) è necessario accedere all'area di amministrazione delle novità.
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).
N
Corso editor sito web04/11/23
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
A
Corso editor sito web04/11/23
Settore Comunicazione esterna e URP
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.
Template - Box
Corso editor sito web04/11/23
Settore Comunicazione esterna e URP
Struttura gerarchica delle pagine
MACROAREAMACROAREA
SEZIONISEZIONI
Pagina di I livelloPagina di I livello
Pagina di II livelloPagina di II livello
Pagina di III livelloPagina di III livello
Es.: Amministr. trasparente
Es.: Personale
Es.: Contrattazioneintegrativa…
Es.: Contrattazioneanni precedenti
Es.: Contrattazione anno2011
Template Macroarea
Template Sezione
Template pag I e II
Template pag III
Corso editor sito web04/11/23
Settore Comunicazione esterna e URP
Template Macroarea
Elementi: Novità / Testo / (link automatici) / Contatto
Note: è sicuramente l’unico template utilizzato a livello di creazione di una pagina per una nuova macroarea
T01
Elementi: Novità / Testo + IMG-3 / (link automatici) / Contatto
Note: sostanzialmente aggiunge un’immagine di tipo 3 al template T01
T15
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.
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.
Corso editor sito web04/11/23
Settore Comunicazione esterna e URP
Template Sezione (1)
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.
T02
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.
T03
Corso editor sito web04/11/23
Settore Comunicazione esterna e URP
Template Sezione (2)
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.
T04 (Es: http://www.to.camcom.it/Page/t04/view_html?idp=3995)
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.
T05 (Es: http://www.to.camcom.it/Page/t05/view_html?idp=6909)
Corso editor sito web04/11/23
Settore Comunicazione esterna e URP
Template Sezione (3)
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).
T16
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.
T19 (Es: http://www.to.camcom.it/Page/t19/view_html?idp=10220)
Corso editor sito web04/11/23
Settore Comunicazione esterna e URP
Template Sezione (4)
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.
T22
Corso editor sito web04/11/23
Settore Comunicazione esterna e URP
Template Pagine I o II livello (1)
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.
T06 (Es.: http://www.to.camcom.it/Page/t06/view_html?idp=13070)
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.
T07 (Es.: http://www.to.camcom.it/Page/t07/view_html?idp=12215)
Corso editor sito web04/11/23
Settore Comunicazione esterna e URP
Template Pagine I o II livello (2)
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.
T08 (Es.: http://www.to.camcom.it/Page/t08/view_html?idp=3471)
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.
T10 (Es.: http://www.to.camcom.it/Page/t10/view_html?idp=6741)
Corso editor sito web04/11/23
Settore Comunicazione esterna e URP
Template Pagine I o II livello (3)
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.
T17 (Es.: http://www.to.camcom.it/Page/t17/view_html?idp=10778)
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.
T09 (Es.: http://www.to.camcom.it/Page/t09/view_html?idp=7691)
Corso editor sito web04/11/23
Settore Comunicazione esterna e URP
Template Pagine I o II livello (4)
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.
T23 (Es.: http://www.to.camcom.it/Page/t23/view_html?idp=4960)
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.
T20 (Es.: http://www.to.camcom.it/Page/t20/view_html?idp=7136)
Corso editor sito web04/11/23
Settore Comunicazione esterna e URP
Template Pagine III livello (1)
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.
T11
Elementi: IMG-2 / Testo + IMG-3 / Contatto
Note: è la variante di T11 con immagine di tipo 3 posizionata accanto al testo.
T12 (Es.: http://www.to.camcom.it/Page/t12/view_html?idp=11465)
Corso editor sito web04/11/23
Settore Comunicazione esterna e URP
Template Pagine III livello (2)
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.
T13 (Es.: http://www.to.camcom.it/Page/t13/view_html?idp=11214)
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.
T14 (Es.: http://www.to.camcom.it/Page/t14/view_html?idp=4708)
Corso editor sito web04/11/23
Settore Comunicazione esterna e URP
Template Pagine III livello (3)
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.
T18 (Es.: http://www.to.camcom.it/Page/t18/view_html?idp=4664)
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.
T21 (Es.: http://www.to.camcom.it/Page/t21/view_html?idp=4735)
Corso editor sito web04/11/23
Settore Comunicazione esterna e URP
Template Pagine III livello (4)
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.
T24 (Es.: http://www.to.camcom.it/Page/t24/view_html?idp=6317)
Corso editor sito web04/11/23
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
Corso editor sito web
Settore Comunicazione esterna e URP
04/11/23
L’editor di testo è un software simile per certi versi ad una versione (molto ridotta) di Word.
L’editor di testo
Editor di testo
Si attiva nel momento in cui si richiede la compilazione o la modifica di un elemento “Testo” nella struttura della pagina.
Si attiva nel momento in cui si richiede la compilazione o la modifica di un elemento “Testo” nella struttura della pagina.
Corso editor sito web
Settore Comunicazione esterna e URP
04/11/23
Descrizione
COPIA
INCOLLA
Editor di testo
La finestra dell’Editor di testo si presenta come quella di un tradizionale word processor o editor HTML, ma con funzionalità ridotte.
scrivere direttamente i contenuti desiderati
Incollare i contenuti dopo averli copiati da altre applicazioni (Blocco Note, Adobe Acrobat, Word)
All’interno della finestra di testo è possibile:
Corso editor sito web
Settore Comunicazione esterna e URP
04/11/23
Menu (tasti dell’editor)
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.
Per formattare il contenuto delle pagine l’UNICO strumento che possiamo usare è l’Editor di testo.
Corso editor sito web04/11/23
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.
Corso editor sito web04/11/23
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.
Corso editor sito web04/11/23
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”).
Corso editor sito web04/11/23
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.
Corso editor sito web04/11/23
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.
Corso editor sito web04/11/23
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.
Corso editor sito web
Settore Comunicazione esterna e URP
04/11/23
Essere succintisul 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
Linee guida principali
Le tre linee guida principali per scrivere sul web sono:
Scrivere per la scansionabilitànon bisogna richiedere agli utenti di leggere blocchi di testo lunghi e continui
Usare l’ipertestodividere in pagine multiple le informazioni eterogenee e strutturate gerarchicamente
Corso editor sito web
Settore Comunicazione esterna e URP
04/11/23
Testo su più livelli
Titolo
Sottotitolo
Abstract
primo paragrafoin cui concentrare il contenuto più importante
testo interocon parole più significative ben evidenziate in grassetto o corsivo
eventuali link o testi di approfondimento
Titolo
Sottotitolo
Abstract
primo paragrafoin cui concentrare il contenuto più importante
testo interocon parole più significative ben evidenziate in grassetto o corsivo
eventuali link o testi di approfondimento
Sul Web ogni testo può essere scaglionato e quindi letto su più livelli, per esempio:
…e soprattutto: cominciamo dalla conclusione per passare poi ai dettagli!
Corso editor sito web
Settore Comunicazione esterna e URP
04/11/23
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)
Corso editor sito web
Settore Comunicazione esterna e URP
04/11/23
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
Corso editor sito web04/11/23
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.
Corso editor sito web
Settore Comunicazione esterna e URP
04/11/23
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)
Corso editor sito web
Settore Comunicazione esterna e URP
04/11/23
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
Corso editor sito web
Settore Comunicazione esterna e URP
04/11/23
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.
Corso editor sito web
Settore Comunicazione esterna e URP
04/11/23
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à.
La Redazione web, prima di accordare la pubblicazione di una promozione, valuta
l’entità della novità.
Corso editor sito web
Settore Comunicazione esterna e URP
04/11/23
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.
Per creare un banner in home page o nelle altre pagine del sito bisogna rivolgersi alla Redazione Web.
Per creare un banner in home page o nelle altre pagine del sito bisogna rivolgersi alla Redazione Web.
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.
Corso editor sito web
Settore Comunicazione esterna e URP
04/11/23
Restyling e accessibilità
Il tema dell'accessibilità si compone di due fondamentali elementi:
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.
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
Corso editor sito web
Settore Comunicazione esterna e URP
04/11/23
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.
CORRETTOtesto alternativo utile<img src=“castello.gif” alt=“Fotografia del castello del Valentino”>
SBAGLIATOtesto alternativo inutile<img src=“castello.gif” alt=“castello”> o peggio <img src=“castello.gif” alt=“immagine”>
Viene inserita una immagine del Castello del Valentino in un testo cheparla del monumento Torinese:
Corso editor sito web
Settore Comunicazione esterna e URP
04/11/23
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).
CORRETTOlink 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>
SBAGLIATOlink 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>
Corso editor sito web
Settore Comunicazione esterna e URP
04/11/23
Separazione dei 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).
CORRETTOlink 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>
Separazione dei link
Corso editor sito web
Settore Comunicazione esterna e URP
04/11/23
Separazione dei link
SBAGLIATOlink 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
N.B.: è preferibile inserire le liste di link come elenco puntato utilizzando lo strumento disponibile nell’editor di testo
Corso editor sito web
Settore Comunicazione esterna e URP
04/11/23
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à.
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à.