Your SlideShare is downloading. ×
Come spremere wordpress fino all'osso per realizzare siti complessi
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Introducing the official SlideShare app

Stunning, full-screen experience for iPhone and Android

Text the download link to your phone

Standard text messaging rates apply

Come spremere wordpress fino all'osso per realizzare siti complessi

3,238
views

Published on

Published in: Technology

0 Comments
16 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
3,238
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
43
Comments
0
Likes
16
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. 28 maggio 2011Wordcamp Milano 2011Come spremere wordpress finoallosso per realizzare siti complessi Wordcamp Milano 2011 Leonora Giovanazzi @lyonora
  • 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. Di che parleremo? Progetto Tecnologia 4 persone Information architect art director web developer web designer@lyonora @manu @vinz @lafede Wordcamp Milano 2011
  • 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. A che punto siamo?Analisi dei bisogniPersonasScenari d’usoInventario dei contenutiSitemapWireframeLayoutSviluppo applicativoSviluppo grafico (HTML) Wordcamp Milano 2011
  • 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. 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. Entità vs Categorie Notizia Progetto Semplice ! post daEntità Inserire! in una Categoria Wordcamp Milano 2011
  • 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. Dove finisco leentità? Entità Notizie Progetti Donatori Pubblicazioni Iniziative Documenti Wordcamp Milano 2011
  • 11. E le tassonomie? Tassonomie Categorie Tag Country [G] Settore Partnership Ente AVSI Point[G] Wordcamp Milano 2011
  • 12. Ma in pratica?Entità Tassonomie Wordcamp Milano 2011
  • 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. 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. 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. 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. 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. Menu e menu di menu Menu di Menu! (topmenu) Menu di ! Tutti i sezione! contenuti (sidebar) Wordcamp Milano 2011
  • 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. 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. Wordcamp Milano 2011
  • 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)