Come spremere wordpress fino all'osso per realizzare siti complessi
-
Upload
leonora-giovanazzi -
Category
Technology
-
view
3.220 -
download
1
description
Transcript of 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
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 [email protected] Flickr lyonora Twitter @lyonora www.enter.it
Nessun webdesigner è stato maltrattato durante la realizzazione di questa presentazione (fino ad ora)