come spremere wordpress fino all'osso per realizzare siti complessi
DESCRIPTION
TRANSCRIPT
![Page 1: Come spremere wordpress fino all'osso per realizzare siti complessi](https://reader034.vdocuments.site/reader034/viewer/2022051514/5492c82eac79593b2e8b46c4/html5/thumbnails/1.jpg)
Wordcamp Milano 2011
28 maggio 2011
Wordcamp Milano 2011 Come spremere wordpress fino all'osso per realizzare siti complessi
Leonora Giovanazzi @lyonora
![Page 2: Come spremere wordpress fino all'osso per realizzare siti complessi](https://reader034.vdocuments.site/reader034/viewer/2022051514/5492c82eac79593b2e8b46c4/html5/thumbnails/2.jpg)
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?
![Page 3: Come spremere wordpress fino all'osso per realizzare siti complessi](https://reader034.vdocuments.site/reader034/viewer/2022051514/5492c82eac79593b2e8b46c4/html5/thumbnails/3.jpg)
Wordcamp Milano 2011
Information architect @lyonora
web developer @vinz
web designer @lafede
art director @manu
Progetto Tecnologia
4 persone
Di che parleremo?
![Page 4: Come spremere wordpress fino all'osso per realizzare siti complessi](https://reader034.vdocuments.site/reader034/viewer/2022051514/5492c82eac79593b2e8b46c4/html5/thumbnails/4.jpg)
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
![Page 5: Come spremere wordpress fino all'osso per realizzare siti complessi](https://reader034.vdocuments.site/reader034/viewer/2022051514/5492c82eac79593b2e8b46c4/html5/thumbnails/5.jpg)
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?
![Page 6: Come spremere wordpress fino all'osso per realizzare siti complessi](https://reader034.vdocuments.site/reader034/viewer/2022051514/5492c82eac79593b2e8b46c4/html5/thumbnails/6.jpg)
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
![Page 7: Come spremere wordpress fino all'osso per realizzare siti complessi](https://reader034.vdocuments.site/reader034/viewer/2022051514/5492c82eac79593b2e8b46c4/html5/thumbnails/7.jpg)
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
![Page 8: Come spremere wordpress fino all'osso per realizzare siti complessi](https://reader034.vdocuments.site/reader034/viewer/2022051514/5492c82eac79593b2e8b46c4/html5/thumbnails/8.jpg)
Wordcamp Milano 2011 Wordcamp Milano 2011
Progetto
Notizia
Entità
Semplice !post da Inserire!in una
Categoria
Entità vs Categorie
![Page 9: Come spremere wordpress fino all'osso per realizzare siti complessi](https://reader034.vdocuments.site/reader034/viewer/2022051514/5492c82eac79593b2e8b46c4/html5/thumbnails/9.jpg)
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
![Page 10: Come spremere wordpress fino all'osso per realizzare siti complessi](https://reader034.vdocuments.site/reader034/viewer/2022051514/5492c82eac79593b2e8b46c4/html5/thumbnails/10.jpg)
Wordcamp Milano 2011
Entità
Notizie
Progetti
Donatori
Pubblicazioni
Iniziative
Documenti
Dove finisco le entità?
![Page 11: Come spremere wordpress fino all'osso per realizzare siti complessi](https://reader034.vdocuments.site/reader034/viewer/2022051514/5492c82eac79593b2e8b46c4/html5/thumbnails/11.jpg)
Wordcamp Milano 2011
Tassonomie
Categorie
Country [G]
Settore
Partnership
AVSI Point[G]
Ente
Tag
E le tassonomie?
![Page 12: Come spremere wordpress fino all'osso per realizzare siti complessi](https://reader034.vdocuments.site/reader034/viewer/2022051514/5492c82eac79593b2e8b46c4/html5/thumbnails/12.jpg)
Wordcamp Milano 2011
Ma in pratica?
Entità Tassonomie
![Page 13: Come spremere wordpress fino all'osso per realizzare siti complessi](https://reader034.vdocuments.site/reader034/viewer/2022051514/5492c82eac79593b2e8b46c4/html5/thumbnails/13.jpg)
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.
![Page 14: Come spremere wordpress fino all'osso per realizzare siti complessi](https://reader034.vdocuments.site/reader034/viewer/2022051514/5492c82eac79593b2e8b46c4/html5/thumbnails/14.jpg)
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.
![Page 15: Come spremere wordpress fino all'osso per realizzare siti complessi](https://reader034.vdocuments.site/reader034/viewer/2022051514/5492c82eac79593b2e8b46c4/html5/thumbnails/15.jpg)
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”
+ = =>
![Page 16: Come spremere wordpress fino all'osso per realizzare siti complessi](https://reader034.vdocuments.site/reader034/viewer/2022051514/5492c82eac79593b2e8b46c4/html5/thumbnails/16.jpg)
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”.
![Page 17: Come spremere wordpress fino all'osso per realizzare siti complessi](https://reader034.vdocuments.site/reader034/viewer/2022051514/5492c82eac79593b2e8b46c4/html5/thumbnails/17.jpg)
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.
![Page 18: Come spremere wordpress fino all'osso per realizzare siti complessi](https://reader034.vdocuments.site/reader034/viewer/2022051514/5492c82eac79593b2e8b46c4/html5/thumbnails/18.jpg)
Wordcamp Milano 2011 Wordcamp Milano 2011
Menu e menu di menu
Menu di !sezione!(sidebar)
Menu di Menu!
(topmenu)
Tutti i contenuti
![Page 19: Come spremere wordpress fino all'osso per realizzare siti complessi](https://reader034.vdocuments.site/reader034/viewer/2022051514/5492c82eac79593b2e8b46c4/html5/thumbnails/19.jpg)
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
![Page 20: Come spremere wordpress fino all'osso per realizzare siti complessi](https://reader034.vdocuments.site/reader034/viewer/2022051514/5492c82eac79593b2e8b46c4/html5/thumbnails/20.jpg)
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
?>
![Page 21: Come spremere wordpress fino all'osso per realizzare siti complessi](https://reader034.vdocuments.site/reader034/viewer/2022051514/5492c82eac79593b2e8b46c4/html5/thumbnails/21.jpg)
Wordcamp Milano 2011
![Page 22: Come spremere wordpress fino all'osso per realizzare siti complessi](https://reader034.vdocuments.site/reader034/viewer/2022051514/5492c82eac79593b2e8b46c4/html5/thumbnails/22.jpg)
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)