28 maggio 2011Wordcamp Milano 2011Come spremere wordpress finoallosso per realizzare siti complessi                       ...
Per chi è questapresentazione?!   Per tutti i progettisti web che vorrebbero parlare    la stessa lingua di chi sviluppa s...
Di che parleremo?    Progetto	                                             Tecnologia	   4 persone	Information architect  ...
Chi è AVSI?      La Fondazione AVSI è una organizzazione non governativa,      ONLUS, nata nel 1972 e impegnata con oltre ...
A che punto siamo?Analisi dei bisogniPersonasScenari d’usoInventario dei contenutiSitemapWireframeLayoutSviluppo applicati...
E ora che si fa?!   Pronti con tutte le specifiche, come sviluppiamo tutto   questo con wordpress, che nativamente gestisc...
Partiamo dalle “entità”!   Osservando l’architettura informativa, quali    sono i gruppi di pagine, ovvero pagine “dello  ...
Entità vs Categorie                                         Notizia	 Progetto	                                      Sempli...
La tabella magica di Vinz                                                                                                 ...
Dove finisco leentità?        Entità	         Notizie	         Progetti	         Donatori	         Pubblicazioni	         ...
E le tassonomie?         Tassonomie	         Categorie	          Tag	          Country [G]	          Settore	          Par...
Ma in pratica?Entità	             Tassonomie	                      Wordcamp Milano 2011
Pagina custom “Country”                          Categorie	   Tags	     Country	  [G]	     Se3ore	   Partnership	   Ente	 ...
Pagina custom “Settore”!    La pagina custom della tassonomia     “Settore di attività” mostra un     elenco dei progetti ...
Geolocalizzazione!   Cos’avete notato di particolare due slide fa?!   Si tratta di una mappa dinamica in grado di mostrare...
Custom template: genitore!   Per avere un’efficace   struttura d’accesso   alle numerose   sottopagine   esplicative di un...
Header e colori custom!     Sempre tramite le tassonomie è stato possibile differenziare graficamente i colori degli      e...
Menu e menu di menu                              Menu di                               Menu!                            (t...
Multilingua!   Non ci crederete, ma in questo caso non è stato   usato nessun plugin. Solo custom field per   assegnare al...
E il tema?   !   Come sviluppare un tema ad hoc è uno speech che          lascio ad altri. Vi lascio solo un concetto:    ...
Wordcamp Milano 2011
contattiLeonora Giovanazziwww.lyonora.itGmail leonora.giovanazzi@gmail.comFlickr lyonoraTwitter @lyonorawww.enter.it	  Nes...
Upcoming SlideShare
Loading in …5
×

Come spremere wordpress fino all'osso per realizzare siti complessi

3,580 views

Published on

Published in: Technology
0 Comments
16 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
3,580
On SlideShare
0
From Embeds
0
Number of Embeds
152
Actions
Shares
0
Downloads
45
Comments
0
Likes
16
Embeds 0
No embeds

No notes for slide

Come spremere wordpress fino all'osso per realizzare siti complessi

  1. 1. 28 maggio 2011Wordcamp Milano 2011Come spremere wordpress finoallosso per realizzare siti complessi Wordcamp Milano 2011 Leonora Giovanazzi @lyonora
  2. 2. Per chi è questapresentazione?!   Per tutti i progettisti web che vorrebbero parlare la stessa lingua di chi sviluppa su wordpress (e viceversa) Wordcamp Milano 2011
  3. 3. Di che parleremo? Progetto Tecnologia 4 persone Information architect art director web developer web designer@lyonora @manu @vinz @lafede Wordcamp Milano 2011
  4. 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. 5. A che punto siamo?Analisi dei bisogniPersonasScenari d’usoInventario dei contenutiSitemapWireframeLayoutSviluppo applicativoSviluppo grafico (HTML) Wordcamp Milano 2011
  6. 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. 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. 8. Entità vs Categorie Notizia Progetto Semplice ! post daEntità Inserire! in una Categoria Wordcamp Milano 2011
  9. 9. La tabella magica di Vinz Tassonomie Entità Categorie   Tags   Country  [G]   Se3ore   Partnership   Ente   AVSI  Point  [G]  No<zie X X X X XProge? X X XDonatori X XPubblicazioni X XInizia<ve X XDocumen< X X [G] = tassonomia gerarchica (a che serve ve lo dico dopo) Wordcamp Milano 2011
  10. 10. Dove finisco leentità? Entità Notizie Progetti Donatori Pubblicazioni Iniziative Documenti Wordcamp Milano 2011
  11. 11. E le tassonomie? Tassonomie Categorie Tag Country [G] Settore Partnership Ente AVSI Point[G] Wordcamp Milano 2011
  12. 12. Ma in pratica?Entità Tassonomie Wordcamp Milano 2011
  13. 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. 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. 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. 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. 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. 18. Menu e menu di menu Menu di Menu! (topmenu) Menu di ! Tutti i sezione! contenuti (sidebar) Wordcamp Milano 2011
  19. 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. 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. 21. Wordcamp Milano 2011
  22. 22. contattiLeonora Giovanazziwww.lyonora.itGmail leonora.giovanazzi@gmail.comFlickr lyonoraTwitter @lyonorawww.enter.it  Nessun webdesigner è stato maltrattato durante la realizzazione di questa presentazione (fino ad ora)

×