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).



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



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



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).



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



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.



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


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



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?



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



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.)



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



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à:



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).



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



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)



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



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).



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



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



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



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



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.



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




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.





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.





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



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






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.


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.





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.


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.





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.


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.




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






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.


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.





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.


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.





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.




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



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.



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:



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.



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.



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.



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”).



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.



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.



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.



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



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!



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)



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



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.



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)



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



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.



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à.



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.



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

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:

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>

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: gli evangelisti: -<a href=“http://www.luca.it» title=»vai al sito di Luca”> Luca </a> -<a href=“http://www.Giovanni.it» title=»vai al sito di Giovanni”> Giovanni </a> -<a href=“http://www.Marco.it» title=»vai al sito di Marco”> Marco </a> -<a href=“http://www. Matteo.home.it» title=»vai al sito di Matteo”>Matteo </a>

04/11/23


SBAGLIATOlink adiacenti separati scorrettamente: gli evangelisti: <a href=“http://www.luca.it» title=»vai al sito di Luca”> Luca </a> <a href=“http://www.Giovanni.it» title=»vai al sito di Giovanni”> Giovanni </a> <a href=“http://www.Marco.it» title=»vai al sito di Marco”> Marco </a> <a href=“http://www. Matteo.home.it» title=»vai al sito di Matteo”>Matteo </a> 

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



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à.

Lavorare sul sito to.camcom.it 28-29 maggio 2013.

Documents

Transcript of Lavorare sul sito to.camcom.it 28-29 maggio 2013.