lezione 04 - pariweb.it...lezione 04 1 le pagine sono differenti dagli articoli . un esempio per...

Lezione 04

1

Le pagine sono differenti dagli articoli

www.pariweb.it

Un esempio per capire meglio la differenza

2

Immaginiamo un sito così strutturato :

• Home page• Pagina Chi siamo• Pagina Dove siamo• Pagina Contatti• Pagina Fotogallery• Pagina Prodotto (dove parli dei tuoi prodotti in generale)• Sezione News (dove inserisci periodicamente notizie relative al tuo

settore)• Sezioe Prodotti (dove inserisci varie schede prodotti divise per tipologie, o

categorie)

www.pariweb.it

3

Le pagine Chi siamo, Dove siamo, Contatti e Prodotto sono sezioni cosiddette “statiche”, ossia delle pagine web che non andranno modificate spesso.

Nel caso reale è difficile che il loro contenuto venga alterato dopo la messa online del sito web.

Vengono modificate per motivi di cambio sede (da parte del cliente), cambio gestore telefonico, oppure in ottica SEO (la pagina chi siamo)

www.pariweb.it

E la pagina contenente la galleria fotografica ?

4

La pagina Fotogallery può essere aggiornata periodicamente.

Una galleria è una piccola o grande serie di foto per un determinato argomento, di cui si vedono le miniature, cliccando sulle quali si aprono gli ingrandimenti.

Una fotogallery può contenere una o più gallerie, di argomenti simili o diversi tra loro, inserite anche periodicamente l’una dopo l’altra.

www.pariweb.it

5www.pariweb.it

Gli articoli

6

Gli Articoli sono esattamente uguali alle Pagine in quanto a gestione, solo che hanno la possibilità di essere categorizzate, cioè divise per argomenti.

Agli articoli possono essere assegnati anche dei Tag, argomento che non verrà trattato per ora.

www.pariweb.it

7

Prima di inserire gli Articoli è necessario creare le Categorie.

Le Categorie sono gli argomenti che raggruppano i vari articoli. Nel nostro caso le categorie saranno News e Prodotti.

Se volessimo creare una nuova News nel sito sarà sufficiente creare un nuovo Articolo ed assegnarlo alla categoria News, inserire il contenuto (titolo, testo ed eventuali foto) e fare clic sul pulsante azzurro a destra Pubblica (o Aggiorna se già pubblicato) e la nuova news sarà visualizzata nel sito.

www.pariweb.it

8

Se vogliamo creare un nuovo Prodotto faremo le stesse cose soltanto che dovremo assegnare il nuovo articolo alla categoria Prodotti.

www.pariweb.it

Ma come si crea un articolo ?

9

Un articolo si crea in maniera analoga alla creazione della pagine.

E' bene però creare (fase preliminare) alcune categorie

www.pariweb.it

Creazione categorie per articoli

10www.pariweb.it

11www.pariweb.it

12www.pariweb.it

13

Il salvataggio di una nuova categoria si effettua cliccando sul pulsante indicato in figura

www.pariweb.it

14

Una volta salvata, la categoria comparirà nell'opportuno elenco. Non è fondamentale che abbia una descrizione.

www.pariweb.it

Create le categorie, costruiamo un articolo

15www.pariweb.it

16

Come si può osservare, la schermata è molto simile a quella relativa la costruzione di una pagina.Occhio però al blocco "formato" indicato in figura.

www.pariweb.it

17

Standard è il tipo di formato più utilizzato, può contenere testi, immagini, video e svariati tipi di contenuti (iframe, mp3 etc)

www.pariweb.it

18

Gli altri formati sono molto legati al tipo di template in utilizzo sul sito.Il formato standard si adatta più o meno bene a ogni tipologia di template.

Per gli altri tipi, verranno forniti degli esempi in aula, oltre ad una breve trattazione che potrete trovare sul libro di testo a pagina 65.

www.pariweb.it

19

Ovviamente nel caso degli articoli le opzioni di pubblicazione sono molto importanti. Pensate alla redazione di un giornale, in cui un redattore , magari nell'arco di una giornata, può redarre svariati articoli che NON andranno pubblicati poi tutti quanti nello stesso giorno.

www.pariweb.it

Formati supportati

20

aside: un post senza titolo, simile all’aggiornamento di stato di Facebook.gallery: una galleria di immagini. Il contenuto del post dovrà contenere lo shortcode di una gallery.link: un link verso un altro sito. I temi possono utilizzare il primo tag <a href=””> che si trova nel contenuto del post come link esterno per quel post. In alternativa il post potrebbe contenere solamente un URL e il titolo potrebbe essere l’ancora da utilizzare nel link.image: un’immagine singola. Il primo tag <img /> contenuto nel post potrebbe essere considerato come l’immagine. In alternativa, il post potrebbe essere formato solo da un URL, da utilizzare poi come URL dell’immagine, mentre il titolo del post potrebbe essere usato come title dell’immagine.

www.pariweb.it

21

quote: una citazione. Il post potrebbe contenere un tag<blockquote> che racchiude la citazione. In alternativa, la citazione potrebbe essere inserita come contenuto del post e la fonte come titolo.status: un breve aggiornamento di stato, simile ai tweet di Twitter-video: un video singolo. Il primo tag <video /> tag o object/embed contenuto nel post potrebbe essere considerato come il video. In alternativa, il post potrebbe essere formato solo da un URL, da utilizzare poi come URL del video.audio: un file audio, da utilizzare per esempio come podcast.chat: la trascrittura di una chat.

www.pariweb.it

22

I formati supportati illustrati nelle due slides precedenti erano quelli forniti con la versione 3.x.y di WordPress.Chiaramente il corso è basato sull'ultima versione disponibile quindi ci sarà una leggera discordanza tra le voci.Quel che conta è la sostanza !

www.pariweb.it

Tag

23www.pariweb.it

24

Creare un tag è molto semplice ed intuitivo, specie dopo aver imparato a creare una categoria

www.pariweb.it

Ma a cosa servono i tag ?

25

Lo spieghiamo con una immagine

www.pariweb.it

26

Assegnare tag ad articoli è importante anche perché esistono dei plugin che permettono di creare "affinità" di articoli.

Avete mai visto in giro per il web sezioni dal nome "Articoli correlati" ?

www.pariweb.it

Un esempio di correlazione

27

Il sito Amazon fa largo uso della correlazione tra gli articoli, o meglio tra prodotti.Ad esempio cercando una stampante laser, il sito tramite correlazione offre anche dei prodotti affini.

E' lecito immaginare un assegnazione di un ipotetico tag "stampante" a prodotti quali stampanti, toner, cartucce etc…

www.pariweb.it

Permalink

28

Quando scriviamo un post sul nostro blog, l’indirizzo che leggiamo nella barra degli indirizzi, in alto nel browser si presenta , più o meno così:

http://www.tuosito.it/?p=123

La prima parte è l’URL del nostro sito web, la seconda è l’ID o identificativo dell’articolo o della pagina che abbiamo appena scritto.

www.pariweb.it

29

Non c’è niente di sbagliato in tutto questo ma ammetterete che questo indirizzo è molto meno significativo di

http://www.tuosito.it/contatti

Il primo indirizzo fa capire probabilmente che non si tratta della homepage, ma non fa intuire (solo guardando il link) dove possiamo trovarci, il secondo ci dà un’idea precisa di dove ci troviamo,ossia nella pagina dei contatti.

Bene, è così anche per gli spider di Google e degli altri motori di ricerca:quando arrivano sul nostro sito “lo leggono” velocemente e da un indirizzo web ricaveranno informazioni precise.

Capirete che utilizzare un indirizzo che abbia un senso compiuto è necessario per dare un’identità alle pagine del sito web.

www.pariweb.it

Come si modificano i permalink ?

30www.pariweb.it

31www.pariweb.it

32

Tralasciando le impostazioni facoltative, dopo aver effettuato la scelta desiderata sarà sufficiente cliccare sul tasto "Salva le modifiche".In ambito lavorativo spesso si usano "nome articolo" e "data e nome"

www.pariweb.it

Come si presenta il sito al momento ?

33www.pariweb.it

34

Dopo aver spiegato la creazione di pagine, articoli, categorie, tag etc… cosa manca ?Manca una trattazione sui menù !

www.pariweb.it

I menù

35

I menu sono strumenti importantissimi, in quanto, facilitano e velocizzano la navigazione all'interno delle pagine del Sito Web.

www.pariweb.it

Lo scopo dei menù ?

36

Scopo dei menu è quello di consentire una migliore navigazione all’interno del proprio portale, facilitando l’utente nella ricerca delle informazioni e migliorando la fruibilità del sito. Ne consegue che le voci di menu devono non soltanto puntare alle pagine statiche più importanti, ma anche ad eventuali categorie e articoli.

www.pariweb.it

Tipologia di menù

37

I menu si suddividono in menu orizzontali e menu verticali.

I menu orizzontali, molto utilizzati soprattutto nei siti di ultima generazione, generalmente sono posizionati nelle vicinanze dell’header (posizione più alta della pagina) e vengono così chiamati in quanto i link sono predisposti orizzontalmente.

Al contrario, i menu verticali generalmente sono posizionati nella colonna laterale delle pagine e predispongono i link secondo un elenco verticale.

www.pariweb.it

Ricordare

38

• Menù orizzontali

• Menù verticali

www.pariweb.it

39www.pariweb.it

40www.pariweb.it

41

In questa schermata assegniamo un nome al menù che andiamo a creare.

www.pariweb.it

42

Una volta creato il menù, possiamo definire le sue impostazioni. E' importante la voce "posizione del tema". Il posizionamento del menù è strettamente legato al template in utilizzo.

www.pariweb.it

43www.pariweb.it

44

Ecco il nostro menù. Esteticamente è decisamente brutto, a causa del template di default. Come vedete, le voci di menù hanno lo stesso nome dei titoli delle "pagine" che abbiamo creato in precedenza.

Nel corpo principale della pagina (ricordiamo che ci troviamo nella home page con impostazioni di default) troviamo gli articoli. Il primo corrisponde all'ultimo creato in ordine di tempo.

www.pariweb.it

Sistemiamo il menù

45

Come possiamo sistemarlo ?Intanto creando delle pagine statiche più opportune rispetto alle precedenti.

www.pariweb.it

46www.pariweb.it

47

Se ho creato nuove pagine, perché ancora non compaiono nel front-end del sito ?Il motivo è semplice, queste pagine devono essere agganciate al menù.

www.pariweb.it

48

Torniamo qui

www.pariweb.it

49

Le voci evidenziate sono quelle che al momento compongono effettivamente il menù. Sulla sinistra osserviamo le pagine candidate a diventare voci di menù. www.pariweb.it

50

Questa slide verrà spiegata in maniera opportuna in aula. Se ci fate caso, è possibile trascinare le varie voci del menù. In questo modo possiamo invertire l'ordine, creare voci di "sottomenù" ed aggiungere/rimuovere voci.

www.pariweb.it

51

Quanto detto in precedenza si può fare tramite questa schermata, basta cliccare sulla freccina evidenziata in figura.

www.pariweb.it

52

Dopo aver cancellato le pagine/voci precedenti, aggiungiamo le nuove, poli clicchiamo su "Salva Menu"

www.pariweb.it

53

Menù salvato, come potete vedere anche dal messaggio in alto a sinistra.Ma come appare nel front-end ?

www.pariweb.it

54www.pariweb.it

Adesso cosa facciamo ?

55

Per il momento impariamo alcune operazioni che saranno senz'altro utili nella nostra esperienza con WordPress, ed in generale con qualsiasi CMS

www.pariweb.it

Plugin

56

Un plugin di WordPress è un componente che viene aggiunto a WordPressper modificarne o estenderne le funzionalità.

www.pariweb.it

57

Un plugin viene spesso chiamato modulo o estensione in altre applicazioni simili, ma la definizione rimane nello specifico la medesima.

Lo scopo di un plugin è infatti quello di permettere agli utilizzatori di eseguire delle operazioni in modo diverso rispetto a quello previsto da WordPress o di aggiungere nuove operazioni a quelle predefinite.

www.pariweb.it

Come si installa un plugin per wordpress

58www.pariweb.it

59

Un plugin prima di essere installato va cercato.

Si può cercare direttamente all'interno di WordPress, come indicato in figura, oppure all'esterno tramite motori di ricerca e siti dedicati (cosa diffusa in Joomla etc)

www.pariweb.it

60

Esistono una miriade di plugin appartenenti alle più svariate categorie.Ovviamente ci sono i popolari, raccomandati dagli utenti etc…

Tramite l'area di ricerca (in alto a destra) possiamo cercare quello a noi più utile.

www.pariweb.it

Proviamo a cercare un editor

61www.pariweb.it

62

Il consiglio è quello di non fermarsi mai ai primi risultati. Bisogna valutare quanti voti ha ricevuto il plugin, quanto è popolare, se esistono recensioni in giro per il web (da cercare in maniera opportuna tramite motori).

www.pariweb.it

63

Tra i primi due comparsi tramite la ricerca con la parola chiave "editor", probabilmente sarebbe opportuno scegliere il secondo, per via della quantità di download estremamente superiore al primo editor proposto

www.pariweb.it

64

Scegliamo quindi il secondo e clicchiamo sul pulsante indicato in figura.

www.pariweb.it

65

L'installazione è in corso

www.pariweb.it

66

Ad installazione ultimata, è opportuno andare in "Plugin installati" per rendere effettivamente attivo quanto installato.Di default i plugin non sono attivati.

www.pariweb.it

67www.pariweb.it

68

Osservate bene la figura.Spesso è presente una descrizione che accompagna ogni plugin installato.E' utile anche cliccare su "Visualizza i dettagli" , voce attraverso le quali si accederà ad una specie di documentazione attraverso la quale potremo avere una prima panoramica delle caratteristiche principali del plugin.

www.pariweb.it