Partiamo con un primo esempio Analizziamo la homepage. L Header. Livia Giacomini (livia.giacomini@iaps.inaf.

Transcript

1 Partiamo con un primo esempio i it Lezione : realizzare un sito web con Wordpress Livia Giacomini (livia.giacomini@iaps.inaf.it) Analizziamo la homepage L Header Header Posts o News Social media Mostra LOGO E TITOLO Ha una grafica Il tt l Il menu permette la navigazione nelle pagine Video Footer

2 Sono le ultime notizie. Compare nella homepage Solo titolo, data, immagine e riassunto I Posts Footer E strutturato come un articolo della carta stampata (autore, data, titolo, riassunto, occhiello) Riporta le notizie sulla redazione Secondo esempio Secondo esempio Header Posts o News Social media Footer

3 Posts e Pagine Posts e Pagine Pagine del Menu Contenuto statico Pagina Post Posts Notizie Post Pagina

4 Dall HTML ai siti dinamici Questo laboratorio ha come obiettivo imparare a costruire un sito web dinamico con il CMS Wordpress Il sito statico: Nei primi anni del web i siti erano collezioni di pagine statiche tenute assieme dai link incrociati e realizzate da persone che conoscevano l HTML, il linguaggio di produzione dei contenuti. I siti erano creati sulla base di un progetto iniziale e revisionati periodicamente da chi li aveva realizzati. L evoluzione era fondamentalmente in mano allo sviluppatore che era l unico a poter mettere mano al sistema. Le pagine erano preparate una ad una ed allo stesso modo modificate, in caso di necessità. Le modifiche, date da necessità di vario tipo, erano formalizzate dagli uffici Marketing o Commerciali, comunicate agli sviluppatori che intervenivano sulle pagine. La realizzazione di una vetrina, in questo modo, significava produrre singolarmente ogni pagina relativa ai prodotti e doverla modificare individualmente e manualmente ogni volta che c era una variazione al listino. Il sito dinamico: Deciso passo avanti fu il sito dinamico. Una struttura grafica fissa riempita da contenuti letti da un database. Le pagine, sviluppate con linguaggi appositi, erano (e sono ancora) create al volo fondendo una parte fissa (di solito il layout grafico, i menu, i link principali) con quella prelevata dal database a seconda della sezione nella quale ci si trova. Il vantaggio è che poche pagine possono esplodere una serie infinita di documenti di contenuti per il visitatore. Nel caso del listino, per esempio, una scheda con struttura fissa può essere riempita volta per volta con i dati di ogni prodotto, dando la sensazione di migliaia di pagine disponibili. ibili I vantaggi rispetto al primo schema sono: * manutenzione più semplice; * minor numero di pagine effettive; * possibilità di modificare i contenuti senza modificare materialmente le pagine. Tipici sistemi dinamici sono i portali, i siti vetrina di aziende con molti prodotti/servizi, i motori di ricerca (e già, sono siti pure loro ). Il CMS: Ad un sito dinamico, cosa aggiunge il Cms? Un Content Management System è un applicazione che consente di variare i contenuti di un sito senza intervenire sulle pagine o sul database da cui sono lette le informazioni. Il suo vantaggio è che una volta creata la struttura che dinamicamente produce le pagine, i contenuti possono essere inseriti e variati senza conoscenze tecniche di sviluppo. Il responsabile Marketing può inserire i news o variare le promozioni i senza necessità di alcuna comunicazione i al personale tecnico. La Direzione Commerciale può modificare i listini senza che debbano essere variate centinaia di pagine Dall HTML ai siti dinamici Cos è uncms? Un CMS (Content Management System) è un software, spesso open source, che permette di realizzare pagine web dinamiche, cioè pagine in cui iii contenuti tie l impaginazione i i sono scorrelati

5 Come funziona un CMS? Un CMS (Content Management System) è un software, spesso open source, programmato in PHP che va a pescare i contenuti in un database (MySQL) e li re impagina per i visitatori. Cos è wordpress.com? Wordpress è un CMS open source scritto in PHP, con supporto del database MySQL, molto semplice, nato per i blog. Si può scaricare e installare in locale (come è stato fatto per i due siti che abbiamo visto come esempio). Oppure si può creare un sito GRATIS su un provider che offre questo servizio, tipo Creiamo il nostro sito Registratevi t isu con la vostra mail Vogliamo creare un sito come questo Aprite un sito del tipo (scegliete il nome): Io ho creato

6 Ritroviamo Header (blu); Posts (rosso); Pagine (giallo); menu laterale contenente alcuni widgets (verde); footer contenente altri widgets( viola) Entriamo nell amministrazione Per avere accesso alla parte di amministrazione, andiamo a: admin 21 Inseriamo ID PWD. 22 Entriamo nell amministrazione Impostazioni generali e template 23

7 Impostazioni generali del blog IMPOSTAZIONI > GENERALI La prima cosa da fare è settare le impostazioni generali del blog Scegliere il tema o template del sito ASPETTO >TEMI (rosso) selezionare uno dei temi preimpostati gratis (verde). Quello scelto è twenty Ten. Compaiono una serie di temi anche a pagamento (blu) ASPETTO >PERSONALIZZA Personalizzare il tema Personalizzare il tema Appaiono varie opzioni (l header lo modifichiamo dopo) CHE DIPENDONO DAL TEMA SCELTO. In questo caso possiamo modificare: i colori (rosso), come appare la home page (verde) l immagine di sfondo (viola), il nome e l occhiello del sito (giallo) 27 28

8 Ipost I post o articoli compaiono nella home page (rosso) e possono essere archiviati per categorie (verde), per tags, per data di inserimento Possono essere pubblici o privati I post 30 Scrivi un nuovo post Crea un nuovo post (freccia viola). Usa gli strumenti di scrittura, simili a word, come font testo e link (verde). Stabilisci data pubblicazione e visibilita (rossa). Scrivi un nuovo post: categorie e tags Inserisci categorie (rosso) e tags (verde) 31 32

9 Le pagine Le Pagine sono in genere fisse e non modificabili e compaiono in menu fissi, accessibile dalla home page. Esistono al di fuori della comune cronologia sulla base del quale è ordinato il blog; una Pagina può essere utilizzata per l organizzazione e la gestione di qualsiasi tipologia e quantità di contenuti. Le pagine 34 Scrivi una pagina Crea una nuova pagina (freccia viola). Usa gli strumenti di scrittura, simili a word, come font testo e link (verde). Stabilisci data pubblicazione e visibilita (rossa). Infine stabilisce l ordine e la della pagina (giallo) e il suo template (blu). Scrivi una pagina Crea una nuova pagina (freccia viola). Usa gli strumenti di scrittura, simili a word, come font testo e link (verde). Stabilisci data pubblicazione e visibilita (rossa). Infine stabilisce l ordine e la della pagina (giallo) e il suo template (blu)

10 Il codice della pagina Di ogni pagina (e di ogni post) è identificabile e modificabile il codice sorgente HTML Inserire immagini e filmati: la media gallery 37 Media gallery La media gallery è dove sono archiviate le immagini del sito (giallo) e dove si possono aggiungere (viola) Inserisci immagine in una pagina o un post Inserisci e modifica immagine dalla galleria dei media nel testo (in rosso) 39 40

11 Inserisci immagine in una pagina o un post Modifica l immagine Inserisci un filmato in una pagina da youtube Pagina Chi Sono: filmato inserito da Youtube (link: 7aXM) Inserisci un filmato in una pagina da youtube All interno della pagina selezionare aggiungi media (rosso) Inserisci un filmato in una pagina da youtube Procedura 43 44

12 I widgets I widgets sono plugin predefiniti di wordpress che possono essere attivati in varie aree del sito (verde menu laterale, viola piè di pagina) e che possono fare azioni semplici come: menu, archiviazione, immagini che scorrono, calendario, twits da un account I widgets 46 Gestire i widgets Sono gestiti da ASPETTO > WIDGET (freccia viola) e puoi vedere tutti i disponibili (in rosso) e quelli attivati nelle varie sezioni del tuo template (in verde) Eliminare widget nella barra laterale Puoi eliminare dei widget trascinandoli nell area di lavoro (freccia rossa). Spariranno dalla home page 47 48

13 Inserire un menu delle pagine nella barra laterale Puoi Inserire il menu PAGINE nella barra laterale (freccia rossa) Inserire un Twit feed nella barra laterale Puoi Inserire un Twit feed nella barra laterale (freccia rossa) Inserire un widget nel footer o piè di pagina Puoi Inserire un Twit feed nella barra laterale (freccia rossa) La testata (la grafica) 51

14 Inserire la testata o header nel sito Una volta creata l immagine caricala nel template Dobbiamo creare l header Immagine 940 x 198 pixels ottimizzata per il web (72,3 Kb) per ora prendetela già fatta