Wordcamp Milano 2011

28 maggio 2011

Wordcamp Milano 2011 Come spremere wordpress fino all'osso per realizzare siti complessi

Leonora Giovanazzi @lyonora

Wordcamp Milano 2011

!   Per tutti i progettisti web che vorrebbero parlare la stessa lingua di chi sviluppa su wordpress (e viceversa)

Per chi è questa presentazione?

Wordcamp Milano 2011

Information architect @lyonora

web developer @vinz

web designer @lafede

art director @manu

Progetto Tecnologia

4 persone

Di che parleremo?

Wordcamp Milano 2011

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

Analisi dei bisogni

Personas

Scenari d’uso

Inventario dei contenuti

Sitemap

Wireframe

Layout

Sviluppo applicativo

Sviluppo grafico (HTML)

A che punto siamo?

Wordcamp Milano 2011

!   Pronti con tutte le specifiche, come sviluppiamo tutto questo con wordpress, che nativamente gestisce solo post e pagine?

Wordcamp Milano 2011

E ora che si fa?

don’t panic

Wordcamp Milano 2011

!   Osservando l’architettura informativa, quali sono i gruppi di pagine, ovvero pagine “dello stesso tipo” e con la stessa struttura di pagina?

!   Eccole:

Wordcamp Milano 2011

Partiamo dalle “entità”

!   Notizie

!   Progetti

!   Donatori

!   Pubblicazioni

!   Iniziative

!   Documenti

Wordcamp Milano 2011 Wordcamp Milano 2011

Progetto

Notizia

Entità

Semplice !post da Inserire!in una

Categoria

Entità vs Categorie

Wordcamp Milano 2011

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

Entità

Tassonomie

[G] = tassonomia gerarchica (a che serve ve lo dico dopo)

La tabella magica di Vinz

Wordcamp Milano 2011

Entità

Notizie

Progetti

Donatori

Pubblicazioni

Iniziative

Documenti

Dove finisco le entità?

Wordcamp Milano 2011

Tassonomie

Categorie

Country [G]

Settore

Partnership

AVSI Point[G]

Ente

Tag

E le tassonomie?

Wordcamp Milano 2011

Ma in pratica?

Entità Tassonomie

Wordcamp Milano 2011

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 Wordcamp Milano 2011

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 Wordcamp Milano 2011

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 Wordcamp Milano 2011

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 Wordcamp Milano 2011

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 Wordcamp Milano 2011

Menu e menu di menu

Menu di !sezione!(sidebar)

Menu di Menu!

(topmenu)

Tutti i contenuti

Wordcamp Milano 2011

!   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.

Multilingua

Wordcamp Milano 2011

!   Come sviluppare un tema ad hoc è uno speech che lascio ad altri. Vi lascio solo un concetto:

E il tema?

art director @manu

web designer @lafede

Information architect @lyonora

web developer @vinz

<?php

?>

Wordcamp Milano 2011

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)