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

Presentazione sul tema: "Lavorare sul sito to.camcom.it 28-29 maggio 2013."— Transcript della presentazione:

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

2 Corso editor sito web Settore Comunicazione esterna e URP 06/02/2014 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 dellinformazione, gestione utenti, gestione problematiche tecniche).

3 Corso editor sito web Settore Comunicazione esterna e URP 06/02/2014 Editor sono circa 90, divisi tra i vari settori di competenza abilitati a lavorare su alcune parti dellalbero dei contenuti nellambiente 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 (redazioneweb@to.camcom.it): 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 aggiornate nel contenuto, nelle informazioni di contatto e nei link presentati

4 Corso editor sito web Settore Comunicazione esterna e URP 06/02/2014 Super Editor sono editor che lavorano su tutto lalbero 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 sullorganizzazione 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 sullorganizzazione delle pagine

5 Corso editor sito web Settore Comunicazione esterna e URP 06/02/2014 Super User è lutente 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 allabilitazione a lavorare su diverse aree del sito, occorre comunque inviare una e-mail alla Redazione web (redazioneweb@to.camcom.it): la redazione provvederà a segnalare al Super User lesigenza dellEditor. 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).

6 Corso editor sito web Settore Comunicazione esterna e URP 06/02/2014 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 (redazioneweb@to.camcom.it): 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 (redazioneweb@to.camcom.it): la redazione contatterà il fornitore per gestire la segnalazione. risolve eventuali problemi tecnici legati alla fornitura

7 Corso editor sito web Settore Comunicazione esterna e URP creare nuove pagine 06/02/2014 Lo staging (letteralmente: la fase di organizzazione) del sito della Camera di commercio di Torino è raggiungibile allURL https://auth.pie.camcom.it (si consiglia di memorizzare questo indirizzo nei Preferiti).https://auth.pie.camcom.it Si utilizza lo staging per: Staging: lambiente 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 lutente viene disattivato.

8 Corso editor sito web Settore Comunicazione esterna e URP 06/02/2014 Login: ingresso nellambiente di staging ATTENZIONE: E importante ricordare che dopo 20 minuti di inattività lutente 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.

9 Corso editor sito web06/02/2014 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. Lambiente di staging

10 Corso editor sito web Settore Comunicazione esterna e URP 06/02/2014 Si può intervenire sulle pagine operando suicheckbox 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?

11 Corso editor sito web Settore Comunicazione esterna e URP 06/02/2014 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

12 Corso editor sito web Settore Comunicazione esterna e URP 06/02/2014 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 Box (contatti, novità, ecc.)

13 Corso editor sito web Settore Comunicazione esterna e URP 06/02/2014 Template - Testo T ELEMENTO T Area in cui viene visualizzato il testo formattato editabile dall'utente camerale con l'utilizzo dellEditor di testo

14 Corso editor sito web Settore Comunicazione esterna e URP 06/02/2014 Template - Immagini Ridimensionamento : se leditor carica un'immagine più grande della dimensione fissa l'immagine stessa verrà ridimensionata automaticamente dal sistema. Centratura : se leditor 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 limmagine che si vuole inserire non è di quelle dimensioni si hanno due possibilità:

15 Corso editor sito web06/02/2014 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 lIMMAGINE 1, ma non la inserisce, il sistema provvederà a caricare in automatico un'immagine di default (vuota) di DIMENSIONI FISSE (396x73).

16 Corso editor sito web06/02/2014 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 lIMMAGINE 2, ma non la inserisce, il sistema non caricherà alcuna immagine. 2

17 Corso editor sito web06/02/2014 Settore Comunicazione esterna e URP ELEMENTO 3 Immagine posizionata allinterno 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 limmagine 3, ma non la inserisce, il sistema provvederà a caricare in automatico un'immagine di default VUOTA di dimensioni fisse (183x183). 3 N.B: limmagine funziona sempre come un link che apre la stessa immagine nel suo formato originario dentro una finestra popup (se per esempio si carica unimmagine più grande di 183x183 pixel)

18 Corso editor sito web06/02/2014 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 dellimmagine. Dimensione massima: 492x492 pixel Template - Immagini Se limmagine 4 non viene inserita, il sistema provvederà a caricare in automatico unimmagine di dimensioni fisse (492x492). 4

19 Corso editor sito web06/02/2014 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 C I contatti sono amministrabili solo dai Super Editor (Strumento Amministrazione contatti).

20 Corso editor sito web06/02/2014 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à. 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

21 Corso editor sito web06/02/2014 Settore Comunicazione esterna e URP Template - Abstract ELEMENTO A Area in cui viene visualizzato labstract relativo al titolo della pagina che si vuole creare. Labstract va sempre inserito nelle pagine iniziali delle sezioni del sito (es. Documenti e certificati per lEstero) Labstract ha un limite massimo di 512 caratteri A

22 Corso editor sito web06/02/2014 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

23 Corso editor sito web06/02/2014 Settore Comunicazione esterna e URP Struttura gerarchica delle pagine MACROAREA SEZIONI Pagina di I livello Pagina di II livello Pagina di III livello Es.: Amministr. trasparente Es.: Personale Es.: Contrattazione integrativa… Es.: Contrattazione anni precedenti Es.: Contrattazione anno 2011 Template Macroarea Template Sezione Template pag I e II Template pag III

24 Corso editor sito web06/02/2014 Settore Comunicazione esterna e URP Template Macroarea Elementi: Novità / Testo / (link automatici) / Contatto Note: è sicuramente lunico 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 unimmagine 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 alleditor anche la scelta dellimmagine di macroarea per lintestazione delle pagine e quella per il menu laterale.

25 Corso editor sito web06/02/2014 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 unimmagine di tipo 1 (banner) e una di tipo 2. La richiesta di unimmagine, se non soddisfatta, genera automaticamente unimmagine bianca (vuota) della dimensione prevista. Quindi, è inopportuno usare questo template se non cè necessità di inserire nella pagina unimmagine di tipo 1. T02 Elementi: IMG-1 + IMG-2 / Novità / Testo + IMG-3 / (Link automatici) / Contatto Note: è la variante di T02 con unimmagine di tipo 3 posizionata accanto al testo. T03

26 Corso editor sito web06/02/2014 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 lelemento Abstract e accanto unimmagine 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)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)http://www.to.camcom.it/Page/t05/view_html?idp=6909

27 Corso editor sito web06/02/2014 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)

28 Corso editor sito web06/02/2014 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 luso di questo template forza ovviamente la lunghezza della pagina che, a fronte di un testo non lunghissimo, risulta scrollare in modo antiestetico. T22

29 Corso editor sito web06/02/2014 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 è lelemento preponderante. Da notare come limmagine di tipo 1 può essere utile per uneventuale 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 )

30 Corso editor sito web06/02/2014 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 ) 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 laggiunta dellimmagine di tipo 3 a fianco del testo. T10 (Es.: http://www.to.camcom.it/Page/t10/view_html?idp=6741 ) http://www.to.camcom.it/Page/t10/view_html?idp=6741

31 Corso editor sito web06/02/2014 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 unimmagine dalle dimensioni relativamente grandi. T09 (Es.: http://www.to.camcom.it/Page/t09/view_html?idp=7691 ) http://www.to.camcom.it/Page/t09/view_html?idp=7691

32 Corso editor sito web06/02/2014 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 luso 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 ) 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 )

33 Corso editor sito web06/02/2014 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 è lelemento preponderante. Da notare come limmagine di tipo 1 può essere utile per uneventuale 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 )

34 Corso editor sito web06/02/2014 Settore Comunicazione esterna e URP Template Pagine III livello (2) Elementi: IMG-2 / Testo / IMG-4 / Contatto Note: prevede unimmagine di tipo 4 sotto al testo. Il template è valido quando occorre in qualche modo visualizzare unimmagine 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 )

35 Corso editor sito web06/02/2014 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 ) 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 )

36 Corso editor sito web06/02/2014 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 luso 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 )

37 Corso editor sito web06/02/2014 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 allinterno delle virgolette, dopo Page/t va inserito il numero a due cifre del template ricercato

38 Corso editor sito web Settore Comunicazione esterna e URP 06/02/2014 Leditor di testo è un software simile per certi versi ad una versione (molto ridotta) di Word. Leditor 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.

39 Corso editor sito web Settore Comunicazione esterna e URP 06/02/2014 Descrizione COPIA INCOLLA Editor di testo La finestra dellEditor 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) Allinterno della finestra di testo è possibile:

40 Corso editor sito web Settore Comunicazione esterna e URP 06/02/2014 Menu (tasti delleditor) LEditor, però, non mantiene alcun tipo di formattazione quando si copia del testo da unaltra applicazione. Perciò è inutile formattare il testo prima di incollarlo nella finestra dellEditor: grassetti, a capi, elenchi puntati o numerati vanno inseriti direttamente con gli strumenti messi a disposizione dallEditor. 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 lUNICO strumento che possiamo usare è lEditor di testo.

41 Corso editor sito web06/02/2014 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.

42 Corso editor sito web06/02/2014 Settore Comunicazione esterna e URP Copia e incolla Si può incollare qualsiasi tipo di testo nellEditor: lunica 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 dellEditor.

43 Corso editor sito web06/02/2014 Settore Comunicazione esterna e URP Inserimento dei link (Link esterni) Per creare un link ad una risorsa esterna usare il pulsante con laPALLA AZZURRA. Questo apre una finestra di creazione collegamento dove sarà possibile scrivere (o incollare) lURL desiderato nel campo URL. Selezionando il menuTipo di collegamento è anche possibile collegarsi ad unancora nella pagina (se prima la si è creata) o ad un indirizzo di e-mail (è sufficiente scriverlo o incollarlo nel campo Indirizzo e-mail).

44 Corso editor sito web06/02/2014 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 internoPALLA 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.

45 Corso editor sito web06/02/2014 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 pulsantePALLA VERDE. In questo caso la finestra di creazione collegamento presenta tutte le possibili cartelle del file server, allinterno 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.

46 Corso editor sito web06/02/2014 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 laltro 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 nellutilizzo di Elenchi puntati. In tal caso, rivolgersi alla Redazione web.

47 Corso editor sito web Settore Comunicazione esterna e URP 06/02/2014 Essere succinti sul Web semplicità e brevità sono dobbligo, pena labbandono 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 lipertesto dividere in pagine multiple le informazioni eterogenee e strutturate gerarchicamente

48 Corso editor sito web Settore Comunicazione esterna e URP 06/02/2014 Testo su più livelli 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 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 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!

49 Corso editor sito web Settore Comunicazione esterna e URP 06/02/2014 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 lordine dei contenuti partire subito dalla conclusione o dallidea centrale, e poi scendere nel dettaglio 4) Documenti scaricabili lespressione standard è : Scarica il file ………… - n pagine, tot Mb (con le parole linkate)

50 Corso editor sito web Settore Comunicazione esterna e URP 06/02/2014 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 allinterno 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

51 Corso editor sito web06/02/2014 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 luso 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, lutente potrà visualizzarlo solamente se ha acquistato il software di Microsoft, oppure se ha installato un visualizzatore gratuito di Word, PowerPoint o Excel.

52 Corso editor sito web Settore Comunicazione esterna e URP 06/02/2014 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 dalleditor, 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)

53 Corso editor sito web Settore Comunicazione esterna e URP 06/02/2014 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 dellappuntamento - data, ora e luogo dellappuntamento - breve descrizione dellappuntamento

54 Corso editor sito web Settore Comunicazione esterna e URP 06/02/2014 Mailing List Le mailing list sono uno strumento di promozione del sito che consiste nellinvio 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.

55 Corso editor sito web Settore Comunicazione esterna e URP 06/02/2014 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 linserimento 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 lentità della novità.

56 Corso editor sito web Settore Comunicazione esterna e URP 06/02/2014 Banner I banner sono dei sistemi di promozione che, attraverso unimmagine (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. Queste promozioni possono essere pubblicate in Home page e saranno visibili, in alto a destra della pagina, in modo intermittente. Possono inoltre essere pubblicati allinterno delle pagine di interesse. La realizzazione grafica dei banner è a cura della redazione web, sotto indicazioni delleditor che ne fa richiesta e che dovrà fornire il materiale (immagine e testo) per la creazione della striscia. Nel caso che leditor che faccia richiesta di un banner sia in possesso dello stesso, questo può essere inviato direttamente dai settori con una grafica apposita.

57 Corso editor sito web Settore Comunicazione esterna e URP 06/02/2014 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

58 Corso editor sito web Settore Comunicazione esterna e URP 06/02/2014 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. CORRETTO testo alternativo utile SBAGLIATO testo alternativo inutile o peggio Viene inserita una immagine del Castello del Valentino in un testo che parla del monumento Torinese:

59 Corso editor sito web Settore Comunicazione esterna e URP 06/02/2014 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: HOME TORNA ALLA HOME SBAGLIATO link diversi con stesso testo: HOME

60 Corso editor sito web Settore Comunicazione esterna e URP 06/02/2014 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). CORRETTO link adiacenti separati correttamente: gli evangelisti: - Luca - Giovanni - Marco - Matteo Separazione dei link

61 Corso editor sito web Settore Comunicazione esterna e URP 06/02/2014 Separazione dei link SBAGLIATO link adiacenti separati scorrettamente: gli evangelisti: Luca Giovanni Marco Matteo N.B.: è preferibile inserire le liste di link come elenco puntato utilizzando lo strumento disponibile nelleditor di testo

62 Corso editor sito web Settore Comunicazione esterna e URP 06/02/2014 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à.