Come spremere wordpress fino all'osso per realizzare siti complessi

Wordcamp Milano 2011

28 maggio 2011

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

Leonora Giovanazzi @lyonora


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

Per chi è questa presentazione?


Information architect @lyonora

web developer @vinz

web designer @lafede

art director @manu

Progetto Tecnologia

4 persone

Di che parleremo?


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


Analisi dei bisogni

Personas

Scenari d’uso

Inventario dei contenuti

Sitemap

Wireframe

Layout

Sviluppo applicativo

Sviluppo grafico (HTML)

A che punto siamo?


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


E ora che si fa?

don’t panic


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

!   Eccole:


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


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


Entità

Notizie

Progetti

Donatori

Pubblicazioni

Iniziative

Documenti

Dove finisco le entità?


Tassonomie

Categorie

Country [G]

Settore

Partnership

AVSI Point[G]

Ente

Tag

E le tassonomie?


Ma in pratica?

Entità Tassonomie


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.


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.


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”

+ = =>


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


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.


Menu e menu di menu

Menu di !sezione!(sidebar)

Menu di Menu!

(topmenu)

Tutti i contenuti


!   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


!   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

?>

contatti Leonora Giovanazzi www.lyonora.it Gmail [email protected] Flickr lyonora Twitter @lyonora www.enter.it

Nessun webdesigner è stato maltrattato durante la realizzazione di questa presentazione (fino ad ora)

Come spremere wordpress fino all'osso per realizzare siti complessi

Technology

Transcript of Come spremere wordpress fino all'osso per realizzare siti complessi