WordPress, un CMS per la

scuola: novità e sviluppi

Alberto Ardizzone

Renata Durighello

Christian Ghellere

Marco Milesi

2

L’associazione internazionale per la professionalità nel Web

• Prima associazione al mondo (dal 1996) che

raggruppa chi lavora nel Web, sia nel settore

pubblico che privato.

• Obiettivo di IWA è creare rete tra i soci,

partecipare all'evoluzione della rete e divulgare

conoscenza tramite i soci con eventi ed

iniziative.

• Associazione professionisti Web (Legge

4/2013), unica della categoria nell’elenco del

MISE.

partecipazioni internazionali

partecipazioni nazionali

3

Perché associarsi?

IWA Italy è associazione professionale

che raggruppa chi opera nel Web,

ovvero i soggetti che - ai sensi della

legge 4/2013, sono definibili come

"professionisti Web" (liberi

professionisti, dipendenti - pubblici e

privati, altre forme di lavoro che come

attività prevalente operano nel Web).

IWA Italy ha inoltre rilasciato i primi

profili professionali (G3 Web Skill

Profiles) in linea con i dettami

dell'agenda digitale europea e italiana

ed ha avviato accordi di collaborazione

con realtà di tutela del lavoro (sindacati)

e di domanda/offerta di lavoro: ancora

una volta il ruolo di IWA è quello di

unire, far collaborare e tutelare chi

opera nel Web.

http://www.skillprofiles.eu

SMAU MILANO2015

Quota speciale

€ 50,00Potrai ottenere uno sconto sulla quota

associativa che pagherai € 50,00 anziché

€ 65,00. Lo sconto vale sia per i nuovi

soci che per i rinnovi.

Per usufruire dello sconto usa in fase di

registrazione o rinnovo il seguente

promocode:

www.iwa.it/join

Pasw 2015

Bello, accessibile e innovativo

Progettato per gli istituti scolastici

PASW2015 – tutti per uno

Il modello WordPress

SEMPLICE

Facile da installare

Veloce da aggiornare

Bello da usare

AGGIORNATO

Periodicamente rinnovato

Continuamente migliorato

SUPPORTATO DALLA

COMUNITA’

Il modello WordPress

Non solo… Scuole!

Comuni

Associazioni

… altri enti

PASW2015 – uno per tutti

Altamente personalizzabile

Come modificare il sito

• Personalizzare il tema con le

opzioni di default

• Creare un proprio tema child

La personalizzazione del tema

• Cambiare i colori

• Immagine della testata

• Sfondo (immagine o

colore)

• Opzioni di navigazione…

Bacheca > Aspetto > Personalizza

La scelta dei colori

• Controllare il contrasto dei colori e la luminosità

– Colour Contrast Analyser

– Web Accessibility toolbar

Attenzione all’accessibilità

Tema Child

Come modificare correttamente i file del tema

Tema child di WordPress, che cos’è?

• CHILD = BAMBINO, FIGLIO

un tema child è un tema, che deriva e dipende da un

tema «padre»

• Un tema child di WordPress è un tema a tutti gli effetti;

il tema importa tutte le funzionalità e caratteristiche del

tema padre.

• Un tema child viene creato quindi se si vogliono

apportare modifiche nell’aspetto o nelle funzionalità del

tema installato

Perché usare un tema Child? 1

• Prima dell’esistenza dei temi child chi

desiderava personalizzare il tema

installato doveva apportare le proprie

modifiche ai files.

• PRO: è facile, posso farlo direttamente

da bacheca, intervengo solo dove mi

interessa

• CONTRO: perdo di vista l’originale,

non posso «ereditare» aggiornamenti

Vedi versioni PASW2009-2013

Perché usare un tema Child? 2

• Il tema Wordpress PASW2015 è costantemente aggiornato nella sua

versione ufficiale

• WordPress. Aggiornare Pasw2015 è esattamente come aggiornare

un plugin!

• Ma se abbiamo modificato i files del tema perderemo le nostre

personalizzazioni (N.B. non Aspetto>Personalizza)

Tema child anche per modifiche semplici

• Si consiglia l’uso del tema child quando c’è la necessità di apportare

al tema padre delle modifiche sia semplici che complesse.

• Tra le modifiche semplici possiamo far rientrare la variazione del

CSS.

• In tal caso il nostro tema child avrà essenzialmente un nuovo file

style.css (con function.php per includere il foglio di stile genitore)

Tema child per modifiche complesse 1

• Tra le modifiche un po’ più complesse possiamo far rientrare la

creazione di funzioni particolari per coprire determinate esigenze, la

creazione di widget particolari ecc.

• Il nostro tema child avrà quindi al suo interno altri file, a partire dal

file function.php per avviare le nuove funzionalità

Tema child per modifiche complesse 2

• Es: creazione di pagine di accesso differenziate per diverse

categorie di utenza potenziando i widget:

Come funziona un child?

• I file del child hanno la priorità:

sovrascrivono i files «omonimi» del genitore

• Fa eccezione function.php: in questo caso

il file «figlio» viene caricato prima e in

aggiunta del function.php del genitore

• Il solo file obbligatorio del child è style.css,

(ma serve anche function.php se voglio importare lo

style.css del genitore)

• Se voglio modificare la testata creerò un

nuovo header.php e così via

• È possibile anche includere file nel tema

child che non sono presenti nel tema

genitore

Da dove partire?

• Nel gruppo Siti Scolastici di facebook è possibile trovare alcuni childrilasciati dagli utenti

• Nel Github è possibile scaricare un child master e un child creato da Christian

Tutorial by Caterina Toccafondi

Alla portata di tutti

Link

• https://www.facebook.com/groups/sitiscolastici/

File

• https://github.com/PorteAperteSulWeb

pasw2015-child

Cookie

Cookie

Modulo Integrato ( @Christian ) per Pasw2015

Plugin esterno ( es. @Marco ) per Pasw2015, Pasw2013 e altri temi grafici

Cookie

Cookie

Cookie

Cookie

Installazione semplificata

Modulo:pasw2015->Impostazioni

Plugin:plugin->aggiungi nuovo->Eu Cookie Law

Aggiornamenti semplificati

Modulo:direttamente con il tema

Plugin:aggiornamento standard

Progettati in parallelo

Blocco manuale interscambiabile, stesse performance, stesse tecnologie

Plugins per le

Pubbliche Amministrazioni

www.wpgov.it

Plugin

Trasforma WordPress in un bot di Telegram

• Compatibile con

Trasforma WordPress in un bot di Telegram

…Un’altra piccola integrazione

…Un’altra piccola integrazione

• Crea una tabella a partire da un dataset xml

• Presto disponibile su wordpress.org

Anac xml viewer

Google Analytics

• Nuova visualizzazione

• Nuovi standard di sicurezza (= non più password)

Google Analytics nel nuovo Pasw

• Configurabile dalle impostazioni di

Pasw2015

• Più bello e funzionale

Pasw 2015

Versione 2015.2.0+R

La nuova versione « Responsiva »

Adattabile ad ogni schermo

Non necessita plugin aggiuntivi

Abbiamo cercato di:

Evitare «Caccia al tesoro»

Non disorientare (troppo)

Garantire una certa continuità nella ricerca delle informazioni

Evitare soluzioni javascript o jQuery (non sempre affidabili)

Alcuni punti essenziali da definire/migliorare:

Visualizzazione dei Menù

Visualizzazione delle barre laterali (sopra, sotto, espandibili)

Pasw2015 RESPONSIVE

Come funziona il responsive

#id {

color: blue;

}

@media screen and (max-width: 480px) {

#id {

color: red;

}

}

@media screen and (max-width: 768px) {

#id {

color: yellow;

}

}

@media screen and (max-width: 1024px) {

#id {

color: green;

}

}

Pc:

BLU

Tablet:

GREEN

Tablet portrait:

YELLOW

Smartphone:

RED

CSS originale:

pasw2015/responsive.css

CSS per modifiche:

pasw2015-child/style.css(o modelli più articolati)

Come funziona il responsive

DESKTOP FIRST

Il sito viene progettato per pc.

Vengono introdotte regole di stile man mano che si

rimpicciolisce lo schermo

(standard)

max-width ( … ) { }

MOBILE FIRST

PASW2015 è DESKTOP-FIRST

Il sito viene progettato per smartphone.

Vengono introdotte regole di stile man mano che si

ingrandisce lo schermo

(standard)

min-width ( … ) { }

Recupero spazio «inutilizzato»

Pasw2015 RESPONSIVE

In fase di ultimazione

Da attivare manualmente nelle impostazioni (per non interferire con chi

utilizza altri sistemi – es. WPTouch)

Attenzione a tema child fortemente personalizzati (es. con aggiunta di

«box» e «classi»)

Attenzione a immagini, slider, video,…

Come aggiornare?

In Aspetto > Temi > Pasw2015 è possibile aggiornare il

tema a qualsiasi versione da noi rilasciata. Aggiornando

alla versione master puoi provare in anteprima tutto

quanto presentato oggi.

In particolare:

- Nuovo modello Responsive

- Nuovo sistema Google Analytics

- Miglioramenti nel pannello di amministrazione

Presto rilasceremo la versione 2.0 (stabile) di Pasw2015

GitHub

Tutto il codice è disponibile sul Repository GitHub.

GitHub permette uno sviluppo collaborativo

consentendo a chiunque di fare segnalazioni e proposte

(anche e soprattutto a livello di codice).

Pasw2015 ha bisogno anche di te!

github.com/PorteAperteSulWeb/Pasw2015

Alla prossima!Per approfondire:Gruppo Facebook «Siti Scolastici»www.porteapertesulweb.itwww.wpgov.it (Marco Milesi)plugin.sisviluppo.info (Ignazio Scimone)