Web MySelf v.4 Sito dinamico autogestibile Web MySelf (versione4) è un progetto realizzato da Project Com S.a.s. di Cosimo Imbriani & Co. sito ufficiale www.projectcom.it Designer & Art director Priscilla Imbriani Gentile cliente, grazie per aver scelto Web MySelf. La seguente guida vi aiuterà ad orientarvi all uso del semplice pannello di controllo di Web MySelf. Potrete gestire autonomamente quando e quanto volete i contenuti e le pagine del vostro sito web. Consigliamo l intera lettura del manuale seguendo l ordine stabilito. Vi auguriamo una buona lettura Project Com Sas Per segnalare errori o imprecisioni contattare grafica@projectcom.it 2
Indice La struttura del sito web con tecnologia MySelf v4 4 Accesso ai pannelli di controllo 5 Accesso al pannello di amministratore del sito web Gestire le e-mail professionali Panoramica del pannello di controllo 7 Uscire dal pannello di controllo 7 Avviso di sicurezza 8 Configurazioni fondamentali tramite il pannello di controllo 9 Il form-mail della pagina contatti 10 Aggiungere foto e files 11 Regole fondamentali Ridimensionare Rinominare correttamente le foto e i files Il formato delle foto e l estensione del files Eliminare una foto o un file 15 Gestione della photogallery 16 Fotoritocco, alcune risorse gratuite Creare una categoria e modificarla 17 Modificare la gerarchia della categoria Modificare il contenuto della pagina categoria Eliminare una categoria 19 Aggiungere un articolo 20 Modificare la gerarchia dell articolo Modificare il contenuto dell articolo Elenco delle funzioni più diffuse dell editor Eliminare un articolo 22 Creare dei link in un articolo 23 Collegare una pagina del notro stesso sito Collegare una pagina di un sito web esterno Collegare un file per far eseguire un download Inserire un immagine nell articolo 26 Strumenti per la gestione 28 Esplora risorse Newsletter 28 Archivio eventi 29 Funzioni avanzate dell editor 30 La funzione Codice sorgente dell editor e accessori e risorse gratuite per la funzione Slide di immagini e video Youtube Mp3 e video players Google map 3
1) La struttura del sito web con tecnologia MySelf v4 È utile prima di iniziare a lavorare sul nostro sito web, mantenere una pagina del browser aperto (come ad esempio Internet Explorer) che visualizza il pannello di amministrazione (BACK-END) ed una nuova pagina che visualizza il sito web accessibile dai visitatori (FRONT-END), per verificare subito i risultati delle modifiche che stiamo effettuando. Il front-end Il back-end 4
2) Accesso ai pannelli di controllo Accesso al pannello di amministratore del sito web Per accedere al pannello di amministrazione del sito web, digitiamo l indirizzo principale del sito seguito da /admin e premere il tasto invio da tastiera Un esempio pratico > www.webmyself.com/admin Si visualizzerà il pannello di accesso. Inseriamo l account e la password (prestiamo attenzione che non sia attivata sulla tastiera BLOC MAIUSC), facciamo un clic sul pulsante Accedi. Ora avremo ottenuto l accesso al pannello di controllo per gestire il sito web. 5
Gestire le e-mail professionali Potrete gestire le vostre e-mail senza configurarvi Microstoft OFFICE OUTLOOK (o altri programmi di gestione di posta elettronica) se lo desiderate. Un modo per accedere al pannello di gestione web delle e-mail professionali associate al vostro dominio (es. info@webmyself.it), è collegarsi al sito ufficiale di Project Com: www.projectcom.it cliccate su servizio clienti e troverete un pulsante di accesso ad Aruba Web Mail. Dalla versione 4 abbiamo semplificato l accesso inserendo direttamente il collegamento ad Aruba Web Mail nel vostro pannello di amministrazione del sito web: Inseriamo la nostra e-mail e la password > una volta allocati avremo a disposizione il pannello per gestire, scrivere e ricevere le e-mail come un e-mail di Libero, Hotmail o Gmail. NOTA In alternativa possiamo configurare le nostre e-mail professionali in Outlook Express del pacchetto Office di Microsoft. Nel sito ufficiale di Project Com mettiamo a disposizione un piccolo tutorial che vi spiega passo dopo passo la configurazione. Collegarsi al sito www.projectcom.it > Cliccando sempre il link Servizio Clienti > troveremo la pagina con la pubblicazione del tutorial Configurazione E-mail domini. 6
3) Panoramica del pannello di controllo Il pannello di controllo è stato studiato per essere subito intuitivo e di facile utilizzo. Facciamo una panoramica veloce delle sue funzioni: - Gestione contenuti: possiamo inserire un nuovo articolo e associarlo ad una categoria preesistente, sapere quanti articoli sono correlati per ogni categoria, accedere alla lista per modificare e gestire gli articoli associati ad ogni categoria, gestire la posizione delle categorie nel menù orizzontale del front-end (1) - Gestione categorie: possiamo inserire e rimuovere nuove categorie che saranno visibili nel menù orizzontale del front-end, modificare il contenuto della pagina della categoria (2) - Calendario eventi: possiamo creare un archivio di eventi per chi necessita la pubblicazione di eventi associato ad un calendario, questa funzione può essere disattivata e riattivata se non ve ne è bisogno (3) - Photogallery: possiamo gestire le foto decidendo se farle comparire nella pagina photogallery del front-end o oscurarle dalla photogallery per utilizzarle solo per caricarle in un articolo (4) - Newsletter: chi si sottoscrive alla newsletter comparirà nella lista (da cui si potrà gestire, aggiungere ed eliminare un utente) dove è presente un editor per comporre una newsletter da inviare agli iscritti della lista. (5) - Esplora risorse: possiamo avere un anteprima di tutti i files e le foto che abbiamo caricato, aagiungere/eliminare i files e le foto (le foto andranno direttamente nella photogallery), eseguire un copia e incolla del nome del file per creare un link al file e farlo scaricare dai visitatori o inserire il percorso della foto che vogliamo pubblicare in un articolo (6) - Pannello di controllo: potremo configurare alcuni aspetti tecnici importanti per l ottimizzazione del vostro sito ed altre gestioni (7) - Logout: possiamo uscire dal pannello di controllo di amministrazione del sito web (8) - Link utili: come già accennato vi è un link che vi farà accedere ad un pannello di gestione di posta elettronica professionale di Aruba Webmail per chi preferisce non utilizzare Microsoft Office Outlook o altri programmi gi gestione della posta elettronica. Mentre il link al pannello di controllo di Google Adwords, date le numerose richieste in materia, è un suggerimento per chi vuole aprirsi un profilo per pubblicizzarsi sul più rinomato motore di ricerca e far crescere le visite (questo è un servizio a pagamento di determinati pacchetti di Google la gestione ed il pagamento non riguarda i servizi di Web Myself e Project Com, ma riguardano espressamente ed unicamente Google. Questa non è l unica modalità di pubblicizzazione del proprio sito, in giro per il web vi sono moltitudini di motori di ricerca, portali e sistemi vari per raggiungere l accrescimento delle visite del proprio sito web). 4) Uscire dal pannello di controllo Per uscire dal pannello di amministrazione del sito web, basta semplicemente cliccare su Logout (8), sarà automaticamente inviato un nuovo collegamento sulla home del nostro sito web. 7
5) AVVISO DI SICUREZZA (importante) Per ragioni di sicurezza, se si effettua l accesso da altri computer, è assolutamente consigliato eliminare tutti i cookie ed i file temporanei, altrimenti corriamo il rischio di rendere accessibile l amministrazione del nostro sito web. Con Internet Explorer (nell esempio la versione 8): cliccare su Strumenti, nella lista scegliere Opzioni Internet > Aperta la finestra Opzioni Internet > cliccare Elimina nel campo di Cronologia esplorazioni > si aprirà un ulteriore finestra Elimina cronologia esplorazioni > Selezionare e attivare tutte le caselle di spunta > cliccare Elimina - aspettare che venga eseguita l operazione e chiudere Internet Explorer. 8
6) Configurazioni fondamentali tramite il pannello di controllo Nel pannello di controllo vi sono dei semplici ma funzionali campi di configurazione, la spiegazione dell Email dell amministratore è riportata nel paragrafo successivo e riguarda la configurazione della e-mail associata al form-mail della pagina contatti. Titolo - compilare questo campo è molto importante, non solo perché il vostro sito non avrebbe un nome al fianco dell icona sulla scheda aperta sul browser, ma soprattutto perché è il primo riferimento a cui fa un motore di ricerca quando qualcuno vi cerca. Un suggerimento è inserire nel nome la vostra attività specifica e la città, un esempio pratico, se avete una palestra di nome GymClubFB, non inserite solamente GymClubFB ma Palestra GymClubFB Roma, sarà migliore la probabilità che un utente vi trovi: 9
Descrizione e parole chiave descrivete in maniera breve la vostra attività, anche questo campo è importante per il motore di ricerca quando qualcuno esegue una ricerca. Esempio Palesta con centro massaggi con pacchetti wellness, corsi di danza ecc.ecc. Mentre le parole chiave sono fondamentali, inserite più parole possibili sempre separati da una virgola fra loro. Esempio: spa, massaggi, gag, fitto, aerobica, ecc. ecc.. D.Lgv. sulla Privacy vi è già un testo di default, questo testo è riportato sotto il form-mail nella pagina contatti del vostro sito, cosa molto importante visto che l utente acconsente al rilascio e all utilizzo dei propri dati personali come vuole il garante della privacy. Lo potrete modificare sostituendo il nome della vostra attività e mettendo a conoscenza a quale e-mail l utente sta inviando il messaggio. Modulo eventi non tutti necessitano di questa funzione, chi non vuole utilizzare il calendario può abilitarlo e disattivarlo quando vuole. ATTENZIONE Elenco file temporanei attualmente in uso sono file propriamente del software NON MODIFICARE CANCELLARE O MANOMETTERE QUESTO CAMPO O POTRETE COMPROMETTERE IL VOSTRO SITO WEB. 7) Il form-mail della pagina contatti Un visitatore cliccando sul link contatti nel menu principale può compilare il form-mail presente nella pagina ed inviarci un messaggio. Compilando il form-mail, il nostro visitatore lascia i propri dati e la propria richiesta, e cosa molto importante acconsente al rilascio e all utilizzo dei propri dati personali come vuole il garante della privacy. I messaggi compilati nel form-mail saranno inviati al vostro indirizzo di posta elettronica. Potrete decidere l indirizzo di posta elettronica a cui volete vi arrivino i messaggi del form-mail semplicemente configurandolo dal Pannello di Controllo. Una volta compilato il campo e-mail dell aministratore cliccate il pulsante Salva modifiche: 10
8) Aggiungere foto e files Per CARICARE una foto o un file cliccare su Esplora risorse nel pannello di controllo. Ciò che caricheremo sarà inserito nel percoso /media ci serve sapere ciò perché così potremo creare il percorso per inserire una foto in un articolo o creare dei link per poter far eseguire un download di un file. Le foto saranno automaticamente inserite nella photogallery. Caricare una foto Per caricare una foto facciamo clic su Sfoglia, scegliamo la foto da caricare dal nostro computer. I formati accettati sono jpg, gif, png e bmp. Aspettare che esca l avviso: file o foto caricate correttamente! Caricare un file Sempre Sfoglia ci permette di caricare un file. Ecco alcuni formati di files che possiamo caricare: Pdf, documenti di Word (doc), di Excel (xls), files audio come gli mp3, files video come mpeg, presentazioni multimediali di PowerPoint (ppt), cartelle compresse zip e rar. 11
Se dopo il caricamento della foto o del file vediamo che questo risulta errato, sono diverse le cause possibili: è un errore dovuto da perdite di pacchetti dati da client al server. Questo errore è generato da una non stabile connessione ad internet, o all utilizzo di modem umts o per congestione della rete. La soluzione è alquanto semplice, cancelliamo il file corrotto e ricarichiamolo nuovamente. REGOLE FONDAMENTALI: (importante, prima di caricare le foto o i files, prestare attenzione a quanto descritto in seguito) Ci sono alcune piccole regole generali nel mondo del web che bisogna assolutamente rispettare, altrimenti si riscontrano problemi di visualizzazione e di accessibilità sul sito web. Prima di caricare una foto dobbiamo ottimizzarla, capire come ridimensionarla, rinominarla e darle il giusto formato. Ridimensionare Se abbiamo una foto a buona risoluzione e di grande dimensione, sarà troppo pesante per girare sul web. La conseguenza sarà che un visitatore dovrà attendere troppo per visualizzare la nostra immagine, o a volte, non riuscirà neanche a visualizzarla. Bisogna eseguire prima di caricare le foto due semplici elaborazioni con un qualunque software di fotoritocco (come ad esempio il famosissimo Photoshop) e ridimensionare la nostra immagine. Es. abbiamo una foto di una modella scattata da un fotografo per un catalogo, quindi una foto di ottima qualità destinata alla stampa le sue dimensioni sono 3.624 (larghezza) x 2.550 (altezza) pixel ed una dimensione di 7,5 MB. È decisamente troppo grande e pesante da caricare sul web, considerato che il peso dovrebbe rimanere al di sotto di 1 MB, perderemo molto tempo noi stessi a caricarla sulla nostra photogallery, inoltre sborderà dallo schermo, considerando che i monitor che girano oggi nella media sono di 1280x1024 pixel (anche se ci stiamo orientando a monitor sempre più grandi grazie anche all avvento delle TV LCD). Il nostro utente avrà difficoltà a visualizzare e sfogliare le foto della nostra photogallery, mentre noi avremo maggiore difficoltà anche ad inserirle in un articolo. Apriamo un programma di fotoritocco (se non possediamo un programma di fotoritocco, nel paragrafo 10 di questa guida, sono elencate alcune risorse gratuite sul web) e ridimensioniamo la foto portando le dimensioni da 3.624x2.550 pixel a 700x493 pixel (questa è una misura di esempio, possiamo regolarci in base all esigenza). Assicuriamoci che sia selezionata l opzione che mantenga le proporzioni, infatti in questo caso sostituendo nel campo della larghezza (in inglese Width) il valore 3624 con il valore 700, l altezza (in inglese Height) viene ridimensionata dal programma automaticamente: Prima 12
Dopo Ora la nostra foto ha le giuste dimensioni per il web. Prima di eseguire l elaborazione appena descritta, è consigliabile inoltre ottimizzare ulteriormente il peso della foto: prestiamo attenzione ad abbassare anche la risoluzione. In questo esempio, la foto ha una risoluzione di 300 dpi conviene portarla a un valore compreso tra 70-90 dpi (la più diffusa è 72 dpi) quella ottimale per il web. Come mostra l immagine d esempio, bisogna sostituire il valore 72 al valore 300 nella casella Resolution, successivamente cliccare OK, fatto questo avremo abbassato la risoluzione della nostra foto. Naturalmente è ovvio che dobbiamo prestare attenzione al peso anche per altri tipi di files che intendiamo caricare, come un Pdf o un file di World. Cerchiamo ove possibile di caricare files ottimizzati per il web e non molto pesanti. Rinominare correttamente le foto ed i files Questo punto è importantissimo, altrimenti non riusciremo a creare dei collegamenti validi come l inserimento di una foto in una pagina del nostro sito. Quindi prima di caricarli impariamo ad assegnare dei nomi ai nostri file in maniera corretta. Prendiamo sempre come esempio la foto della modella > Possiamo vedere che in questo caso il nome assegnato alla foto è modella 0039.jpg Se si carica sul web un file con un nome così, si avrebbe un errore, perché NON DEVONO ESSERCI DEGLI SPAZI tra una parola ed un altra. Selezioniamo la foto, facciamo un clic destro del mouse e scegliamo Rinomina > assegniamo il nuovo nome alla foto in maniera corretta e senza spazi, ovvero modella0039.jpg oppure sostituendo allo spazio un trattino basso (underscore) modella_0039.jpg - inoltre nel nome del file è meglio EVITARE DI NOMINARE CON LETTERE MAIUSCOLE MA USARE LETTERE MINUSOLE. Consigliamo di NON USARE CARATTERI SPECIALI, MA SOLO LETTERE SEMPLICI DELL ALFABETO E/O NUMERI. 13
Queste regole ci aiuteranno a lavorare bene e con facilità sul nostro sito. Facciamo un ulteriore esempio: decidiamo di caricare le foto coppa di frutta.jpg e delizia alla vaniglia.jpg, prima di caricarli dobbiamo assegnargli dei nomi corretti come coppa_di_frutta.jpg o deliziaallavaniglia.jpg Stesse regole valide per ogni tipo di file. Se decidiamo di caricare un documento di Word che si chiama dichiarazione dei redditi 2009.doc > rinominiamo il documento così: dichiarazione_dei_redditi_2009.doc Il formato delle foto e l estensione dei files Nella photogallery possiamo inserire delle foto con diversi formati: bitmap (nome estensione BMP), gif (GIF), jpeg (JPG) e png (PNG). Se non abbiamo abbastanza competenza con i tipi di formati e le estensioni dei files, limitiamoci con il formato più semplice da gestire, il JPG. Con il JPG il file viene compresso, con una piccola perdita di qualità ma un abbassamento del peso del file, che nel mondo del web, come citato prima, è fondamentale. Il JPG è il formato ormai standard e più usato nel web. Come si fa a sapere l estensione dei file? Visualizzare l estensione dei file in Windows XP e Vista: Il modo più semplice è selezionare la foto o il file e fare un clic destro del mouse > scegliere Proprietà, si aprirà una finestra che ci darà varie informazioni, compresa l estensione del file. È un metodo semplice, ma bisogna fare ogni volta l operazione, e dopo un po può risultare fastidioso. Per impostazione predefinita Windows non mostra le estensioni dei file presenti sul nostro computer, per capire il tipo di file ci si affida all icona associata ai file stesso: Ma cos è l estensione di un file? L estensione è dichiarata alla fine del nome del file dopo il carattere punto che divide appunto il nome del file dalla sua estensione - nomefile.estensione = modella_0039.jpg (facciamo 14
attenzione quando rinominiamo un file che riporta l estensione a NON CANCELLARE il punto e il nome estensione >.jpg in questo esempio) Consigliamo di visualizzare sempre le estensioni dei files (anche per ragioni di sicurezza). Visualizzare sempre le estensioni ci permetterà di organizzare bene il nostro lavoro. Per fare in modo che Windows mostri sempre le estensioni dei files eseguiamo questi piccoli passi: Con Windows XP andiamo in Pannello di controllo > Opzioni di cartella Con Windows Vista andiamo in Pannello di controllo > (Aspetto e Personalizzazione) Opzioni di cartella Scegliamo la scheda Visualizzazione. Nel riquadro Impostazioni Avanzate troviamo l opzione Nascondi le estensioni per i tipi di file conosciuti deselezioniamola > eseguiamo un Clic sul pulsante Applica e successivamente sul pulsante Ok > fatta questa procedura per ogni file sarà visibile anche la sua estensione: Se non abbiamo un formato della foto o del file desiderato, provvediamo alla sua conversione, utilizziamo un software idoneo al tipo di file. Con una foto ad esempio se notiamo che l estensione è TIF (il TIFF è un formato d elevata qualità per la stampa), convertiamo tramite un programma di fotoritocco il suo formato (in genere basta scegliere salva con nome e associargli nel campo formato quello desiderato, in questo caso JPG, fatto questo salvarla). 9) Eliminare una foto o un file In Esplora risorse, cliccando le crocette rosse al fianco di ogni icona, potremo eliminare le foto ed i files, questi saranno rimossi dal percorso /media, ed oltretutto le foto saranno rimosse dalla photogallery. 15
10) Gestione della Photogallery Andando sulla schermata Photogallery, possiamo decidere quali foto selezionare da lasciare nella visualizzazione della photogallery da parte dell utente. Se ad esempio non vogliamo che tutte le foto che carichiamo dal Pannello di controllo vengano visualizzate nella photogallery perché una di queste è una foto di una mappa da inerire nella pagina contatti mentre le altre foto sono le foto di una collezione di borse (quindi risulterebbe fastidioso veder spuntare una foto di una mappa fra delle belle foto di catalogo), tramite questo pannello cliccando semplicemente sopra l icona della freccina verde spostiamo la foto della mappa nell archivio, e di conseguenza non sarà più visibile nella photogallery. Possiamo far visualizzare nuovamente una foto risposando la stessa sotto il gruppo fotogallery: Fotoritocco, alcune risorse gratuite Google mette a disposizione PICASA, un ottimo e facile programma di gestione e ritocco: inoltre è una risorsa gratuita! Scaricalo dal sito ufficiale> http://picasa.google.it/ Per chi volesse scaricare gratuitamente un software open source eccellente di fotoritocco (ma più complesso) c è GIMP> http://gimp.linux.it/www/index.html PICS ATTACK è un sito gratuito, è un modo semplice per ritagliare, ridimensionare e ruotare le foto, lo consigliamo per chi vuole risolvere in maniera veramente facile e veloce, queste due operazioni di modifica> www.picsattack.com 16
11) Creare una categoria e modificarla Alla voce Gestione categorie, vi è un campo inserisci nuova categoria principale, assegniamo un titolo, in questo esempio vogliamo creare una categoria chiamata SERVIZI: Una volta creata possiamo vedere sul menu orizzontale del sito web che è stata aggiunta la nuova voce SERVIZI: Naturalmente ora anche nel pannello di controllo vedremo che lista delle categorie principali sarà aggiornata: 17
Modificare la gerarchia della categoria Possiamo cambiare la gerarchia, ovvero la posizione della categoria SERVIZI, perché vogliamo lasciare ad esempio, la categoria CONTATTI come ultima nel menù orizzontale. Basta semplicemente cliccare sulla freccina verde, che indica appunto lo spostamento della categoria di una postazione superiore: Ora nel menù orizzontale del sito web vi sarà la seguente modifica: prima dopo Modificare il contenuto della pagina categoria La categoria è una pagina web come le altre, quindi si potrà redigere il testo con eventuali foto, tabelle ecc. ecc. Per modificare il suo contenuto basta cliccare sull icona Modifica (N.B. anche contatti è un articolo modificabile anche se ad essa è associata il form-mail): 18
Si aprirà la schermata con l editor per poter redigere la nostra pagina: Una volta ultimato cliccare Salva modifiche, ora la pagina sarà aggiornata in tempo reale sul sito web: 12) Eliminare una categoria Alla voce Gestione categorie basta cliccare l icona della crocetta rossa, ATTENZIONE insieme alla categoria saranno eliminati tutti gli articoli associati ad esso, se alcuni articoli ci servono spostiamoli prima in un'altra categoria: 19
13) Aggiungere un articolo Alla voce Gestione contenuti vi è un campo Inserisci nuovo articolo, inserire un titolo e selezionare a quale categoria vogliamo associarlo (in questo caso vogliamo ad esempio associarlo alla categoria SERVIZI che abbiamo creato precedentemente, vedi paragrafo 11). Tutti gli articoli associati ad una categoria compariranno sul menu verticale a destra del sito web: Modificare la gerarchia dell articolo Possiamo cambiare la gerarchia, ovvero la posizione dell articolo semplicemente cliccando sulla freccina verde che indica lo spostamento sopra o sotto di un articolo: 20
Modificare il contenuto dell articolo Alla voce Gestione contenuti troviamo un icona che indica gli articoli correlati ad una categoria, specificandone anche in numero. Cliccare sull icona Modifica articoli correlati: Ora sarà visualizza la lista degli articoli associata ad una categoria, in questo esempio la categoria SERVIZI: Clicchiamo sull icona modifica e apriremo l editor per redigere il nostro articolo: 21
Elenco delle funzioni più diffuse dell editor: Tutte sono tra le funzioni più conosciute. Partiamo dalla prima fila da sinistra: le prime freccine sono le funzioni di annullamento delle operazioni compiute. Subito dopo l icona delle forbici, troviamo tre icone che raffigurano delle cartelle. Tramite queste funzioni, possiamo incollare il testo copiato da un file di word o di testo con la sua formattazione. Se copiate il testo da dei files o da un sito web crea dei problemi è consigliabile selezionare tutto il testo e rimuovere la formattazione. Successivamente le funzioni di scelta font, grandezza font, scelta del corsivo, la sottolineatura o il grassetto al testo ed infine quanto far rientrare i margini del testo selezionato. Nella seconda fila da sinistra troviamo una funzione di creazione di liste numerate e punteggiate, le funzioni per dare un allineamento al testo, l icona per l inserimento di un immagine (sarà approfondito nei prossimi paragrafi), inserimento tabelle (quando vogliamo inserire un listino prezzi o si necessita un di certo ordine di impaginazione, è consigliabile utilizzare una tabella. La tabella ci aiuterà a rendere ordinate alcune impaginazioni leggermente più elaborate ed è utile anche se vogliamo creare delle schede informative con foto e vari campi di testo), funzione per creare dei link ed inserire oggetti FLASH (approfondiremo anche questi argomenti), inserire delle emoticon, scegliere il colore del testo e dello sfondo del testo. Infine troviamo la funzione CODICE SORGENTE che approfondiremo, perché ci permetterà di inserire vari gadget nella nostra pagina, dai video di YouTube a degli Slide di immagini ecc. ecc. 14) Eliminare un articolo Nella lista degli articoli basta cliccare l icona della crocetta rossa, ATTENZIONE l articolo eliminato non sarà più recuperabile. 22
15) Creare dei link in un articolo Collegare una pagina del nostro stesso sito Spesso quando editiamo un testo può essere utile creare dei link alle pagine del nostro stesso sito, ad esempio in questo caso vogliamo che nella nostra pagina home ci sia un collegamento nel testo alla pagina contatti. Dal nostro browser aperto andiamo sulla pagina contatti e copiamo l intero percorso URL: Ora nel pannello di controllo apriamo la schermata di modifica della pagina (in questo esempio la pagina home). Selezioniamo la parola CONTATTACI e clicchiamo sull icona dell editor inserisci/modifica collegamento: Si aprirà una finestra collegamento, incolliamo l indirizzo nel campo URL e lasciamo scritto l indirizzo da www. in poi, in maniera completa, cliccare il pulsante ok, vedremo che nel nostro testo selezionato si sarà creato un collegamento: 23
Collegare una pagina di un sito web esterno Possiamo creare nel testo un link ad un sito differente dal nostro, es. vogliamo fare un link al sito www.projectcom.it. Con il browser, navighiamo fino a visualizzare il sito www.projectcom.it > copiamo l indirizzo completo. Nell editor seguiamo gli stessi passi spiegati in precedenza Suggerimento: quando si creano dei link a siti esterni è meglio che si apri una nuova finestra di navigazione, così il nostro visitatore potrà visitare i siti esterni ma non perderà il contatto con il nostro sito > nella finestra collegamento, clicchiamo sulla scheda destinazione, scorriamo la lista a discesa e scegliamo Nuova finestra (_blank) 24
Collegare un file Dopo aver caricato un file (come spiegato nel paragrafo 8), possiamo creare un collegamento in una pagina del nostro sito web, in modo tale che il nostro visitatore possa aprirlo o salvarlo: es. abbiamo caricato un file di word di un modulo per la dichiarazione dei redditi, e ora vogliamo che possa essere scaricato dai nostri visitatori, il nome del file è dichiarazione_dei_redditi_2012.doc Suggerimento: Se non ricordiamo esattamente il nome del file possiamo andare prima su Esplora risorse nel pannello di controllo, nella scheda avremo la lista di tutto ciò che abbiamo caricato, sia le foto che i files. Ci basterà cliccare il nome del file interessato, si aprirà una nuova scheda del browser dove potremo copiare l url intero per creare il link di download del file: Se già ricordiamo il nome del file, andiamo sull articolo dove vogliamo inserire il collegamento al file, selezioniamo il testo che diverrà il link di download e clicchiamo sul pulsante inserisci/modifica collegamento, incolliamo nel campo URL subito dopo aver digitato media/ il nome del file completo di estensione SENZA LASCIARE NESSUNO SPAZIO (altrimenti il collegamento sarà errato). Cliccare su ok e salvare l articolo. Ora il nostro visitatore cliccando sul collegamento che abbiamo creato nella nostra pagina web, potrà aprire o salvare il nostro file. Naturalmente possiamo creare dei collegamenti file a mp3, file video, cartelle compresse zip e rar ecc. ecc. 25
16) Inserire un immagine nell articolo Nell editor troviamo un icona inserisci/modifica immagine. Con il mouse facciamo un clic di selezione tra il testo nel punto dove desideriamo inserire un immagine, scelto il punto, possiamo cliccare sul pulsante Inserisci/modifica immagine. Si aprirà una nuova finestra che ci permetterà di editare la nostra immagine. Premesso che possiamo far ciò dopo aver caricato una foto (come spiegato nel paragrafo 8), suggeriamo di aprire una nuova scheda del browser esplora risorse (clic destro open in a new tab o apri in una nuova scheda) in modo da avere sottomano l elenco delle foto caricate: Decidiamo di voler inserire l immagine vetta.jpg 26
Clicchiamo sull icona vetta.jpg si aprirà una nuova scheda del browser dove vedremo la sua anteprima e potremo copiare l indirizzo URL: Ora torniamo nella nostra finestra per editare l immagine, incolliamo nel campo URL l indirizzo che abbiamo copiato prima: Possiamo impostare l allineamento della foto rispetto al testo attraverso la lista allineamento (ad esempio, se vogliamo che la foto sia a destra del testo scegliamo destra), avremo comunque una piccola anteprima sulla destra della lista per orientarci), nei campi delle dimensioni larghezza e altezza possiamo decidere la larghezza e l altezza in pixel della foto. In questo caso vogliamo che la foto sia più piccola, controlliamo che sia attiva la casella blocca rapporto (il simbolo del lucchetto) in modo che la nostra foto sia sempre proporzionata, e sostituiamo ad esempio facendo finta che sia un valore di 700 pixel di larghezza il valore 300 pixel, automaticamente sarà scalata in proporzione anche l altezza. Nei campi Vertical space (VSpace) e Horizontal space (HSpace) possiamo decidere quanto spazio vogliamo lasciare tra il testo e la foto, è consigliabile lasciare almeno la media di 5-10 pixel. Dopo aver eseguito tutte le modifiche desiderate, salviamo con un clic su ok. La foto sarà inserita nel nostro articolo, salviamo le modifiche. 27