1. 28 maggio 2011
Wordcamp Milano 2011
Come spremere wordpress fino
all'osso per realizzare siti complessi
Wordcamp Milano 2011
Leonora Giovanazzi @lyonora

2. Per chi è questa
presentazione?
! Per tutti i progettisti web che vorrebbero parlare
la stessa lingua di chi sviluppa su wordpress (e
viceversa)
Wordcamp Milano 2011

3. Di che parleremo?
Progetto
Tecnologia
4 persone
Information architect art director web developer web designer
@lyonora
@manu
@vinz
@lafede
Wordcamp Milano 2011

4. Chi è AVSI?
La Fondazione AVSI è una organizzazione non governativa,
ONLUS, nata nel 1972 e impegnata con oltre 100 progetti di
cooperazione allo sviluppo in 38 paesi del mondo di Africa,
America Latina e Caraibi, Est Europa, Medio Oriente, Asia.
Settori di attività
! Agricoltura e ambiente
! Aiuto umanitario e emergenza
! Formazione professionale e sviluppo PMI
! Sanità
! Socio-educativo
! Sostegno a distanza
! Sviluppo urbano
Wordcamp Milano 2011

5. A che punto siamo?
Analisi dei bisogni
Personas
Scenari d’uso
Inventario dei contenuti
Sitemap
Wireframe
Layout
Sviluppo applicativo
Sviluppo grafico
(HTML)
Wordcamp Milano 2011

6. E ora che si fa?
! Pronti con tutte le specifiche, come sviluppiamo tutto
questo con wordpress, che nativamente gestisce solo
post e pagine?
don’t panic
Wordcamp Milano 2011

7. Partiamo dalle “entità”
! Osservando l’architettura informativa, quali
sono i gruppi di pagine, ovvero pagine “dello
stesso tipo” e con la stessa struttura di
pagina?
! Eccole: ! Notizie ! Pubblicazioni
! Progetti ! Iniziative
! Donatori ! Documenti
Wordcamp Milano 2011

8. Entità vs Categorie
Notizia
Progetto
Semplice !
post da
Entità
Inserire!
in una
Categoria
Wordcamp Milano 2011

9. La tabella magica di Vinz
Tassonomie
Entità
Categorie
Tags
Country
[G]
Se3ore
Partnership
Ente
AVSI
Point
[G]
No<zie X X X X X
Proge? X X X
Donatori X X
Pubblicazioni X X
Inizia<ve X X
Documen< X X
[G] = tassonomia gerarchica (a che serve ve lo dico dopo)
Wordcamp Milano 2011

10. Dove finisco le
entità?
Entità
Notizie
Progetti
Donatori
Pubblicazioni
Iniziative
Documenti
Wordcamp Milano 2011

11. E le tassonomie?
Tassonomie
Categorie
Tag
Country [G]
Settore
Partnership
Ente
AVSI Point[G]
Wordcamp Milano 2011

12. Ma in pratica?
Entità
Tassonomie
Wordcamp Milano 2011

13. Pagina custom “Country”
Categorie
Tags
Country
[G]
Se3ore
Partnership
Ente
AVSI
Point
[G]
No<zie X X X X X
Proge? X X X
Donatori X X
Pubblicazioni X X
Inizia<ve X X
Documen< X X
Nella pagina custom di una tassonomia richiamiamo
tutti i contenuti assegnati ad essa (v. tabella magica)
e stilizziamo gli elementi ad hoc.
Esempio:
Africa contiene un elenco di notizie, documenti, progetti,
pubblicazioni, tutti relativi a quella tassonomia.
Tassonomia gerarchica
In particolare essendo la tassonomia Country gerarchica ed
essendo “Africa” un item genitore, in pagina vedrò tutti gli
elementi assegnati a una qualsiasi nazione appartenente
all’Africa. Infine sempre tramite le tassonome è stato possibile
differenziare graficamente i colori degli elementi sulla base della
loro appartenenza.
Wordcamp Milano 2011

14. Pagina custom “Settore”
! La pagina custom della tassonomia
“Settore di attività” mostra un
elenco dei progetti assegnati a quel
settore.
! Ogni elemento dell’elenco è
visualizzato nel colore che
contraddistingue la nazione
(continente) di appartenenza.
! Tramite l’utilizzo di icone
comunichiamo a quali altri settori
appartiene il progetto. Al click si
accede alla pagina di quel settore.
Wordcamp Milano 2011

15. Geolocalizzazione
! Cos’avete notato di particolare due slide fa?
! Si tratta di una mappa dinamica in grado di mostrare
la la geolocalizzazione dei progetti (applicato anche
agli AVSI Point per generare la mappona “Google
AVSI”
+
=
=>
Wordcamp Milano 2011

16. Custom template: genitore
! Per avere un’efficace
struttura d’accesso
alle numerose
sottopagine
esplicative di un
determinato servizio o
argomento, si è
utilizzato il template
“Show children box”.
Wordcamp Milano 2011

17. Header e colori custom
! Sempre tramite le tassonomie è stato possibile differenziare graficamente i colori degli
elementi sulla base della loro appartenenza.
! Mentre grazie all’assegnazione di tutte le pagine e categorie di post a un certo menu,
è stato possibile assegnare loro anche un’immagine in testata ad hoc.
Wordcamp Milano 2011

18. Menu e menu di menu
Menu di
Menu!
(topmenu)
Menu di !
Tutti i
sezione!
contenuti
(sidebar)
Wordcamp Milano 2011

19. Multilingua
! Non ci crederete, ma in questo caso non è stato
usato nessun plugin. Solo custom field per
assegnare alle pagine in lingua un tag di richiamo
(es: “en”) e creare un semplice menu posizionato in
testata.
Wordcamp Milano 2011

20. E il tema?
! Come sviluppare un tema ad hoc è uno speech che
lascio ad altri. Vi lascio solo un concetto:
<?php
?>
web developer
@vinz
Information architect web designer
@lyonora
@lafede
art director
@manu
Wordcamp Milano 2011

21. Wordcamp Milano 2011

22. contatti
Leonora Giovanazzi
www.lyonora.it
Gmail leonora.giovanazzi@gmail.com
Flickr lyonora
Twitter @lyonora
www.enter.it
Nessun webdesigner è stato maltrattato durante la realizzazione di questa presentazione (fino ad ora)