Appunti per laboratorio

TecnologieWeb
LABORATORIO
a.a. 2015/2016
• WordPress e InstantWP
• Progettazione e realizzazione di un sito web
Goy - a.a. 2015/2016
Tecnologie Web
1
TecnologieWeb – WordPress
WordPress  si può utilizzare in due modi:
• Online: da wordpress.COM è possibile registrarsi e creare
un blog o un sito
– il servizio è gratuito
– offre un dominio di terzo livello, sotto il dominio
wordpress.com (es.: nomescelto.wordpress.com)
– non è possibile personalizzare il sito con plugin e temi
aggiuntivi rispetto a quelli pre-installati (a meno di acquistare
servizi aggiuntivi)
• In locale: da wordpress.ORG è possibile scaricare il CMS
d iinstallare
da
ll sull proprio
i PC
– è necessario aver installato Apache, l'interprete PHP e
MySQL Server (es. pacchetto XAMPP)
– questa modalità permette di utilizzare tutte le funzionalità di
WordPress senza vincoli.
Goy - a.a. 2015/2016
Tecnologie Web
2
1
TecnologieWeb – InstantWP - I
Instant WordPress [www.instantwp.com]
• Instant WordPress (4.4.2) is a complete standalone,
portable WordPress development environment (NB It will
even run from a USB key!)  Components:
– Apache web server (2.2.15 - Win32)
– interprete PHP (5.4.36)
– MySQL Server (5.1.46-community-nt)
• Apache and MySQL Server are started and stopped
automatically
• Instant WordPress can be installed as many times as you
wish and deleted by simply removing the folder that it is
running from
• NB: Instant WordPress is not suitable for live websites and
should only be used for testing and development
Goy - a.a. 2015/2016
Tecnologie Web
3
TecnologieWeb – InstantWP - II
• http://127.0.0.1:4001/wordpress/ = URL con cui, da browser,
potete accedere all'istanza (locale) di InstantWP (cioè del
vostro sito web realizzato con InstantWP)
– 127.0.0.1 = indirizzo IP del localhost;
– 4001 = porta TCP su cui è in ascolto il Web Server Apache
– wordpress = sotto-cartella della document-root(*) di Apache, in
cui si trovano i file che costituiscono il vostro sito
(*) cartella in cui il
Web Server va a
cercare le risorse che
gli vengono richieste
Goy - a.a. 2015/2016
Tecnologie Web
4
2
TecnologieWeb – InstantWP - III
• nella cartella di installazione di InstantWP c'è una cartella
iwpserver, dentro la quale si trova la document root di
Apache (cioè la cartella htdocs): il sito realizzato con
InstantWP si trova nella sotto-cartella wordpress
Goy - a.a. 2015/2016
Tecnologie Web
5
TecnologieWeb – InstantWP - IV
• http://127.0.0.1:4001/phpmyadmin/
= URL con cui, da browser,
potete accedere a PhpMyAdmin,
l'applicazione (web-based, scritta in PHP!)
per gestire i database (attraverso il DBMS
MySQL Server, incluso in InstantWP)
Quindi, nella document-root di Apache dovrei
trovare una cartella phpmyadmin ("sorella"
della cartella wordpress)... perché non c'è?!?
La cartella phpmyadmin si trova sotto iwpserver\admin:
E nel file di configurazione di Apache
(iwpserver\server\Apache\conf\httpd.conf)
c'è scritto che quando il browser si connette a
<local-server>/phpmyadmin Apache deve in
realtà connettersi a: ...\iwpserver\admin\phpmyadmin
Goy - a.a. 2015/2016
Tecnologie Web
6
3
TecnologieWeb – InstantWP - V
Ricordiamoci che:
• InstantWP "is not suitable for live websites and should only be
used for testing and development"
• dopo aver creato il nostro sito, occorre pubblicarlo online!
cioè: registrare un dominio, trovare un hosting e trasferire il
sito sul server del provider prescelto; in particolare dobbiamo:
1. copiare il contenuto della cartella wordpress nella cartella
definita sull'host per il sito (**)
2. fare una copia dei dati nel database e caricarli nel DBMS
offerto dall'host (***)
3. apportare le opportune modifiche di configurazione
richieste dall'hosting provider (es. accesso al DB)
• Rif:
– www.instantwp.com/unleashed/ (in particolare i cap. 4 e 5)
– www.wpitaly.it/wiki/Main/CambiareServer
a.a. 2014/15
Tecnologie Web
7
TecnologieWeb – InstantWP - VI
(**) Per copiare il contenuto della cartella wordpress nella
cartella definita sull'host per il sito abbiamo bisogno di un
FTP Server
(generalmente
disponibile sull'host
del provider) e di un
FTP client (per es.
FileZilla, incluso in
XAMPP)
FTP
Server
request
FTP client
FTP client
FTP client
response
a.a. 2014/15
Tecnologie Web
8
4
TecnologieWeb – InstantWP - VII
(***) Per fare una copia dei dati nel database e caricarli nel DBMS
offerto dall'host:
1. Connettetevi a PhpMyAdmin
((http://127.0.0.1:4001/phpmyadmin/)
p
p p y
) ed entrate con
username = root
password vuota
a.a. 2014/15
Tecnologie Web
9
TecnologieWeb – InstantWP - VIII
2. Sulla sinistra, selezionate il database wordpress, poi cliccate
su Esporta:
3. Senza modificare nulla cliccate in basso sul pulsante Esegui:
4. Il browser vi chiederà di salvare il file wordpress.sql: ditegli
di sì! (si tratta di un file di testo che contiene la query SQL
che vi permetterà di "ricostruire" altrove il vostro database)
5. Connettetevi al PhpMyAdmin sull'host e selezionate il
database wordpress, sulla sinistra
6. cliccate su Importa:
7. Selezionate wordpress.sql:
e cliccate in fondo su Esegui
a.a. 2014/15
Tecnologie Web
10
5
TecnologieWeb – X LAVORARE IN AULA
Purtroppo in aula, quando uscite dal
vostro account, le modifiche fatte con
InstantWP vanno perdute!
IMPORTANTE!!
 per poter
t continuare
ti
a lavorare,
l
dobbiamo:
d bbi
1. copiare il contenuto della cartella wordpress su una
chiavetta (o su uno storage in rete)
2. esportare il database (salvando il file .sql sulla chiavetta o
sullo storage)
Quando torniamo in aula:
1. copiare la cartella wordpress dalla chiavetta
2. importare il database
a.a. 2014/15
Tecnologie Web
11
TecnologieWeb – InstantWP - IX
Pannello di Controllo di InstantWP
quando avviate InstantWP (doppio click su
) vi compare il
Pannello di Controllo:
WordPress Frontpage
vi apre l'istanza locale di
InstantWP (cioè il vostro
sito web realizzato con
InstantWP) Explorer 
se volete usare un altro
browser, fate cut&paste
dell'URL
dell
URL del sito!!
Goy - a.a. 2015/2016
Tecnologie Web
12
6
TecnologieWeb – InstantWP - X
WordPress Admin apre
il backend di
amministrazione
dell'istanza
dell
istanza locale di
InstantWP
[username = admin,
password = password]
MySQL Admin apre
PhpMyAdmin
[username = root,
root
no password]
apre la cartella dei plugin
apre la cartella dei temi
Goy - a.a. 2015/2016
Tecnologie Web
13
TecnologieWeb – creare un sito - I
Creare un sito con WordPress
[una guida: premium.wpmudev.org/manuals/wordpress/]
NB: Il frontend di WP è impostato di default come blog, ma può
essere impostato anche come sito "normale"
normale
1. scegliamo un progetto [*]
2. definiamo la struttura del sito,
x es:
3. scegliamo il Tema [**]
4. costruiamo le pagine [***]
[da: www.wppratico.com/
creare-un-sito-aziendale-con-wordpress]
Goy - a.a. 2015/2016
Tecnologie Web
14
7
TecnologieWeb – creare un sito - II
[*] Scegliamo un progetto
• un progetto che vi interesssa personalmente (a vostra libera
scelta, meglio se "reale"), oppure
• il sito di una negozio (una ferramenta, una profumeria, una
libreria, un negozio di scarpe, ...)
• il sito di una ONG locale (es. salvaguardia ambientale o
difesa degli animali)
• il sito di un gruppo musicale o teatrale
• il sito
i di un agriturismo
i i
Goy - a.a. 2015/2016
Tecnologie Web
15
TecnologieWeb – creare un sito - III
[**] Scegliamo il Tema
• da WordPress Admin > Appearance > Themes
 selezione del Tema (Activate)
Goy - a.a. 2015/2016
Tecnologie Web
16
8
TecnologieWeb – creare un sito - IV
Cliccando sul tema attivato (Theme Details) si hanno a
disposizione una serie di pulsanti (Customize, Widgets, Menus,
Header, Backgound) che corrispondono alle voci di menu sotto
Appearance
• Customize: dato il tema attivato, il menu
a sinistra permette di personalizzare:
 titolo del sito e "motto"
 colore dello sfondo
 immagine dell'intestazione
 immagine di sfondo
 widgets
id t
 scelta del tipo di home page: ultimi
post o pagina statica (nel qual caso,
vi chiede quale pagina usare e dove
mettere i post...)
Goy - a.a. 2015/2016
Tecnologie Web
17
TecnologieWeb – creare un sito - V
• Widgets: dato il tema attivato, permette di gestire i widgets
Widget = componente grafico di un'interfaccia utente;
generalmente è un'applicazione con specifiche funzionalità
Goy - a.a. 2015/2016
Tecnologie Web
nel tema di default di WP:
- Primary/Secondary
Widget Area: permettono
di inserire/eliminare/
riordinare widgets (es.
Search, Recent posts, ...)
nella barra laterale (dx)
- Footer Widget Area(s):
permettono di inserire/
eliminare/riordinare18
widgets nel footer
9
TecnologieWeb – creare un sito - VI
• Menus: dato il tema attivato, permette di gestire le voci di
menu
per posizionare il menu (in particolare,
per selezionare quale menu usare come
Primary Navigation)
per creare e configurare il vostro menu
Goy - a.a. 2015/2016
Tecnologie Web
19
TecnologieWeb – creare un sito - VII
• Header: dato il tema attivato, permette di gestire l'immagine
dell'intestazione (come da Customize...)
g
dato il tema attivato,, ppermette di ggestire
• Background:
l'immagine di sfondo (come da Customize...)
• Editor  dato il tema attivato, permette di modificare il
codice dei fogli di stile CSS
[usare con moltissima cautela!!]
Una guida su temi e plugin:
premium.wpmudev.org/manuals/wordpress-plugins-themes/#manualcontents
Goy - a.a. 2015/2016
Tecnologie Web
20
10
TecnologieWeb – creare un sito - VIII
[***] Costruiamo le pagine
• da WordPress Admin > Pages > All pages
 permette di amministrare le pagine
[prox slide]
OnMuoseOver  compare un menu contestuale
che permette di modificare i contenuti (Edit)
l'editor ha 2 tab:
"visuale" e HTML
x salvare
Goy - a.a. 2015/2016
Tecnologie Web
21
TecnologieWeb – creare un sito - IX
• Add new  permette di aggiungere una nuova pagina
permette di aggiungere
immagini, video, ecc.
• pulsante Save Draft x salvare in bozza (la
pagina viene salvata ma non pubblicata)
• pulsante Preview x visualizzare l'ultima
bozza salvata
• modifica stato,, modifica visibilità,,
pianifica pubblicazione
• pulsante per cestinare la pagina
• pulsante per pubblicare la pagina
Goy - a.a. 2015/2016
x posizionare la pagina in modo gerarchico
rispetto ad un'altra pagina e per applicare
Tecnologie
Web un template particolare
22
alla pagina
11
TecnologieWeb – creare un sito - X
• da WordPress Admin > Posts > All posts
 permette di amministrare i post
• Add new  permette di aggiungere un
nuovo post
NB: l'interfaccia è uguale a quella per le
pagine, con in più sulla dx:
 il box Format per scegliere il formato
dell'articolo
 il box Categorie per selezionare la categoria
dell'articolo (se non è presente si può creare
cliccando su +Add New Category)
 il box Tags per aggiungere tag all'articolo
Goy - a.a. 2015/2016
Tecnologie Web
23
TecnologieWeb – creare un sito - XI
• Ci sono poi altre voci nel menu di sx (Media, Links,
Comments), che potete scoprire da soli...
• Infine ci sono alcune voci nel menu di sx che permettono di
gestire
ti aspetti
tti un po'' più
iù "avanzati"
"
ti" (e
( delicati):
d li ti)
– Plugins (permette di gestire i plugin installati eliminandoli, disattivandoli o attivandoli - e di installare
nuovi plugin)
– Users (permette di gestire gli utenti(*))
– Tools (permettono di salvare o ripristinare i contenuti di un
sito web WP online))
– Settings (permette di configurare varie proprietà del sito
[usare con cautela!])
(*) In WP esistono vari tipi di utenti, con privilegi diversi
(amministratore, editore, autore, collaboratore)
Goy - a.a. 2015/2016
Tecnologie Web
24
12