2 – Materiali corso Ambienti digitali

Venerdì 29 settembre si è svolto il secondo incontro del corso Didattica e Ambienti Digitali condivisi.

Si è parlato di Pagine, menu di navigazione, personalizzazione del tema e immagini. Su questi due ultimi aspetti torneremo nei prossimi incontri.

Problema e curisosità

Risolto problema personalizer

Il tema Mesocolumn che dava problemi nel personalizer (si accede facendo click sull’icona a forma di pennello sulla barra degli strumenti o da bacheca > aspetto > personalizza) aveva conflitti javascript con un plugin.

Ho risolto il problema ed ora funziona, sperando che non ci siano altri conflitti in agguato. Ora Giampiero potrà cambiare il colore delle sue categorie :-))

Font aggiuntivi

La proprietà CSS per caricare i font non è @media, utilizzata soprattutto per le regole di stampa come avevo detto, ma @font-face.

@font-face {iver
font-family: myFirstFont;
src: url(sansation_light.woff);
}

Google font, è un servizio online dove trovare font da utilizzare nei propri progetti web. Il font scelto resta sulla directory di Google font e il browser, attraverso la proprietà @import fa una richiesta di importazione nel tuo sito/blog di quel font, questo comporta un leggero rallentamento, ma se i font incorporati sono uno o due, non se ne accorge nessuno. Il codice di @import lo dà Google font e non rimane che incollarlo nel nostro foglio CSS personale.

@import url('https://fonts.googleapis.com/css?family=Acme');

a questa stringa seguirà:

body{
font-family: 'Acme', sans-serif;
}

Font river invece consente di scaricare e installare font nel proprio sistema operativo molto interessante per chi usa testo come grafica.

Pulizia e impostazione dell’istallazione

Vi ricordo i passagi per “pulire” un’istallazione WordPress

Eliminare:

• articoli
• pagine
• commenti
• widget

Per quanto riguarda i widget prova a rendere operativi nella sidebar i due widget per la ricerca e l’accesso.

Da bacheca > aspetto > fai click su widget o dall’icona a forma di bussola sulla barra degli strumenti seleziona widget.

La pagina dei widget, si presenta su due colonne. A sinistra ci sono i widget disponibili e a destra le aree widget. Queste aree possono essere diverse, più o meno numerose. Numero e possibilità di posizione dipendono dal tema attivo.

Per vedere e personalizzare i wiget, accedi al Personalizer, la famosa icona a forma di pennello sulla barra degli attrezzi. Clicca sul pennello. In alternativa passa da Bacheca > Aspetto > Personalizza.

Tra le opzioni cerca la voce widget e vedi quali sono le opzioni. Molti temi hanno due funzioni per i widget. Una definisce le aree widget del tema e l’altra consente di posizionare i widget nelle aree definte. Cercale e provale.

Prova ad attivare questi due widget:

• Cerca: (non quello che si chiama Ricerca forum) fai click sul nome e scegli una posizione tra le opzioni offerte. Di solito Sidebar. Cerca e seleziona il widget (BuddyPress) Accesso: fai click su di esso e scegli tra le opzioni la posizione in cui vuoi inserirlo. Di solito si sceglie Sidebar.

Ricorda che le aree widget sono definite dal tema grafico attivo.

Impostazioni:

1. generali: dove modificare il titolo del sito, fallo in tempi brevi se necessario;
2. scrittura: dove definire la categoria standard per gli articoli;
3. lettura: scelta di visualizzazione della home page, se articoli o pagina statica;
4. discussione: impostazioni molto importanti per i commenti;
5. media: impostazioni della dimensione per le immagini create da WordPress quando carica immagini;
6. permalink: impostazione del collegamento permanente visualizzato sulla barra degli indirizzi (slug).

Plugin

I plugin che trovi nel sito sono quelli non attivi in rete. Alcuni, come quelli per il network, la sicurezza e altri, sono attivi su tutta la rete dei siti/blog.

Per capire se tra i plugin disponibili e non attivi può essercene qualcuno di interesse, fai click sulla voce Visualizza dettagli o Vedi la pagina del plugin. Questi sono link posizionati di solito dopo il nome del plugin che portano alla descrizione del plugin.

Ho consigliato di attivare i seguenti plugin, che poi dovrete configurare, dai rispettivi menu di configurazione:

• Watu: ci servirà per costruire quiz di verifica;
• Embed Any Document: per chi deve incorporare file PDF, Exel, Word e diversi altri formati;
• TablePress: l’editor di WordPress consente la creazione di tabelle, ma questo plugin ha una marcia in più. Per chi fa delle tabelle una forma di comunicazione.
• WP Accessibility Helper: per l’accessibilità di chi ha difficoltà visive o per i siti dei colleghi di sostegno.

I plugin di solito installano i loro menu in bacheca con il nome del plugin, oppure in Bacheca > Impostazioni, più raramente dalla pagina plugin. Rintraccia il plugin e guarda se a destra del nome vedi la voce Setting o Impostazioni.

Creare Pagine e Articoli

Si sono create alcune pagine e articoli. Prima cosa importante è creare una categoria predefinita da Bacheca > Articoli > Categoria. La categoria appena creata devi selezionarla in Bacheca > Impostazioni > Scrittura nel campo Categoria predefinita articoli. Se ricordi, si è detto che WordPress non vive senza almeno una categoria.

La categoria predefinita è la categoria Senza categoria o se in inglese Uncategorized. Quando dimentichi di definire una categoria per un articolo, o cancelli una categoria cui erano assegnati degli articoli, il sistema sceglie la categoria impostata in Impostazione > Scrittura, pertanto, è utile che questa categoria predefinita abbia un nome significativo. Fallo!

Importante per non perderci il sonno. Se ti chiedi perché una categoria non è visualizzata da nessuna parte, ricorda che una categoria diventa visibile solo se ad essa è associato almeno un articolo.

Abbiamo creato alcuni articoli sui quali si sono attivati link a siti esterni. In breve:

Trovata la risorsa da collegare:

1. premi i tasti ALT + D per selezionare l’indirizzo della risorsa dalla barra degli indirizzi del browser;
2. premi CTRL + C per copiare l’indirizzo
3. torna all’editor e selezionate o scrivete nel testo dell’articolo le parole che saranno l’etichetta del link;
4. fai click sull’icona a forma di catena, dovrebbe trovarsi dopo le icone per l’allineamneto del testo. Oppure dal menu Inserisci fate click sulla voce Inserisci modifica link nel campo a sfondo azzurro che compare e dove dovrebbe già essere inserito il cursore;
5. incolla l’indirizzo con CTRL + V ;
6. click sull’icona a freccia.

Le impostazioni del link le potete variare facendo click sull’icona rotella.

ID di articoli, pagine e categorie

Articoli, pagine e  categorie, sono indentificate da un numero, un ID univoco molto utile. Per trovarlo e riconoscerlo devi posizionare il cursore  sul nome di una delle risorse e sulla barra di stato del browser si leggerà una stringa di testo nella quale trovi questa informazione. La procedura è descritta anche nell’articolo relativo alla creazione di pagine e menu.

Utenti

La gestione degli utenti è importante e abbiamo visto come inserire un utente nel vostro blog. Da Bacheca > Utenti > Aggiungi nuovo

Se l’utente è già esistente comincia a sciverne il nome o l’email nel campo di inserimento, definisci un ruolo, per uno studente può essere contributore, per un collega autore o se conosce il sistema editore. Se l’utente sa ed ed è d’accordo ad essere un utente del blog, spunta la voce per non inviare l’email, in caso contrario lascia che l’utente riceva l’email e faccia click sul link associato, come avviene in una normale registrazione.

Ricorda agli utenti che si registrano che il nome utente è formato da nome e cognome, preceduto dalle ultime due cifre dell’anno in corso, scritto tutto minuscolo e tutto attaccato. Fate registrare con password forti.

Immagini

Ogni sito/blog salva i contributi media, immagini e altri tipi di file,  in tabelle del database separate.  Questo significa che il network ha un solo database, ma ogni singolo blog ha una tabella per i media, per gli articoli, le pagine, le configurazioni del tema e per tutto quanto non è “sistema” i file detti “core” che stanno nelle tabelle del database principale.

Abbiamo accennato alle immagini ma lo rivedremo la prossima volta. Negli articoli correlati selezionati in fondo a questo articolo, trovi tutte le informazioni necessarie per operare in autonomia.

Importante: le immagini richiedono responsabilità perché:

• non sono utilizzabili solo perché sono in Internet. Verifica e insisti per far verificare i loro diritti d’uso;
• se non ottimizzate occupano molto spazio sul server;
• rallentano il caricamento delle pagine;
• scaricare un’immagine esageratamente grande incide sul costo di banda e i nostri studenti hanno sempre il cellulare scarico;
• salvo rari casi di immagini con testo, una dimensione massima di 800/1024 px in larghezza, è più che sufficiente, molte immagini sono perfette a dimensioni molto inferiori;
• se hai selezionato alcune immagini e pensi che siano tutte importanti, pensa a quella senza la quale il tuo discorso non potrebbe essere capito. Forse ti accorgerai di non aver bisogno di immagini o forse ne pubblicherai una sola.

Se cerchi immagini per provare ad inserirle nei tuoi articoli, fallo pure ma cancellale dalla libreria Media quando non ti servono più.

Menu di navigazione

Abbiamo creato un menu personalizzato (custom menu) inserendo pagine, link esterni, categorie. Nei riferimenti trovi un articolo per procedere in autonomia nella costruzione dei menu.

La navigazione va meditata e progettata attentamente, sopratutto se si hanno molte pagine e molte risorse. Cambiarla in corsa è sempre possibile, ma prima di renderla definitiva, provala.

Per definire una navigazione è necessario scrivere su carta quali sono le risorse del tuo sito blog e metterle in relazione tra loro come in un organigramma di flusso, tracciando le linee che mettono in relazione le varie parti e come queste devono essere relazionate tra loro.

Principi generali di un menu di navigazione:

• consentire di tornare alla home page;
• non presentare la stessa risorsa su più menu;
• far raggiungere la risorsa in non più di due click;
• creare sottomenu con massimo due livelli.

Per favore fatemi contento, inviate un commento agli articoli.

Articoli correlati

• Come creare Link ipertestuali, etichette di navigazione;
• Come formulare titoli e sommari;
• Come eliminare la formattazione del testo;
• Come conoscere e attribuire ruoli agli utenti;
• Come ricercare e ottimizzare le immagine per il web;
• Come inserire immagini in un articolo;
• Come ottimizzare le immagini con gli strumenti di wordpress;
• Come costruire un menu di navigazione