Abbiamo già visto in questo articolo cos’è stato introdotto con l’ultima versione di WordPress. Gutenberg è stato concepito per facilitare la vita alle nuove generazioni di Copywriters che stanno crescendo. Ma… come la mettiamo con i siti già fatti, con compositori visuali installati?

Genericamente, un visual composer salva per ogni modifica fatta ad un post una serie di metadati nella relativa tabella postmeta di WordPress, poi un parser si occuperà di ricostruire il contenuto di pagina con gli stessi metadati.
Con l’entrata in gioco di un editor a blocchi come Gutenberg, non è strano riflettere su quale sarà la vera fine di questi compositori, anche se sembra che ogni compagnia di sviluppo si stia adattando all’evoluzione del nostro CMS preferito.

Elementor e WordPress 5

Dopo ardua scelta, e dopo aver eseguito reverse engineering di 4 page builders e controllato la qualità del codice con cui sono stati scritti, in Websolution abbiamo deciso di accontentare anche i clienti con budget più limitato, utilizzando Elementor Pro per aiutarci a risparmiare tempo e fatica ed arrivare più velocemente al risultato.

Elementor Pro è già stato descritto in centinaia di blog, mi limiterò
quindi a descrivere ciò che riguarda la sua integrazione in WP5.

Cosa cambia?

A questa domanda, risponderò schiettamente: assolutamente nulla, in negativo. Gutenberg, essendo creato per essere retrocompatibile, non nega l’utilizzo di Elementor, plugin che non fa altro che “prendere il controllo” del contenuto di un post e lasciar possibilità di creare pagine tramite interfaccia visuale interattiva e di facile navigabilità.

Quindi, per passare da un’interfaccia di inserimento ad un’altra, è disponibile un apposito semplice tasto di editing.

Template di Elementor come blocchi di Gutenberg

Altra cosa davvero positiva è l’ingresso in gioco di un piccolo plugin, sviluppato sempre da PojoMe, che permette di inserire template sviluppati in Elementor direttamente come blocchi in Gutenberg. 

Potete trovare maggiori informazioni sul plugin direttamente in plugin repository di WordPress: https://wordpress.org/plugins/block-builder/

E’ finalmente arrivata quella parte dell’anno che ogni sviluppatore ama ed odia, dato che il rilascio di una nuova major release porta novità nel fronte dello sviluppo e dell’organizzazione applicativa (e quindi… felicità!), ma comporta ulteriore studio del sistema in questione, e sicuramente saprete che con le chiusure aziendali natalizie viene difficile pensare di potersi permettere un reale approfondimento del tema.
Con questo piccolo contributo alla causa, cercheremo di smarcare con semplicità le novità che vengono offerte da WordPress 5, più in particolare dal nuovo editor Gutenberg che va a sostituire il vecchio editor WYSIWYG.

Benvenuto Gutenberg

Dicevamo… Gutenberg è il nuovo editor che è già integrato in tutte le nuove versioni di WordPress, successive alla versione 5.0.0.
Dopo aver rilasciato da un paio d’anni un plugin dal nome analogo, per permettersi di testare un’idea e tutte le funzionalità ad essa legate, il plugin è stato integrato in core di WordPress. Ma… come funziona in parole spicce?

Benvenuti blocchi

E’ molto probabile che con l’avvento dei compositori visuali, gli stessi sviluppatori in Automattic abbiano sentito il bisogno di esporre alla comunità un metodo di inserimento dei contenuti che fosse più facile, divertente, snello che il solito e vecchio editor.

Ogni pezzo di contenuto ora può essere visto come un semplice blocchetto che fa esattamente una cosa specifica. Esistono blocchi per inserire un nuovo titolo, un nuovo paragrafo, una nuova immagine o galleria, una nuova lista, un nuovo video embedded (non li citerò tutti, sarebbero troppi). Persino uno spazio vuoto di altezza 30px è diventato un blocco, addio caro css, addio padding!

Ora, sarà molto più semplice per l’utilizzatore finale capire come inserire un titolo, un elenco, senza mandar fuori di testa noi poveri sviluppatori, che ci dovremo occupare solo ed esclusivamente (finalmente) di stilizzare qualcosa di già generato dal sistema. Quindi, addio classi css, addio bug frontend, addio clienti che ti chiamano per sistemare un colore. Ora è già tutto pronto all’uso. Ora un documento non sarà più semplice html, sarà astratto ad un livello superiore e strutturato.

TL;DR: Blocchi come Custom Post Types, commenti HTML come descrittori di blocco

Se non siete nel settore dello sviluppo, ma siete semplici persone curiose del mondo WordPress, potrete saltare questa sezione.

Come funziona tecnicamente questa cosa dei blocchi?
Un blocco è registrato a sistema come una nuova entità, come lo sono un Custom Post Type e una Taxonomy. La differenza in registrazione tra un blocco e un CPT/Taxonomy è che i nuovi blocchi interagiscono con il backend tramite javascript, che ne può dinamicizzare il contenuto al volo. E’ necessario quindi operare in entrambi i linguaggi PHP e Javascript (le guide ufficiali parlano di standard Javascript ES6, armatevi quindi di pazienza e, nel caso vi servissero informazioni su come registrare nuovi blocchi, date un’occhiata al tutorial ufficiale reperibile qui).
Quando un utente inserisce un nuovo blocco in interfaccia backend, il motore javascript di Gutenberg crea un nuovo elemento JSON che viene concatenato all’albero di elementi della pagina in costruzione, che descrive esattamente il medesimo blocco. Ne descrive quindi il contenuto e la formattazione.

[
    {
        type: "core/cover-image",
        attributes: {
            url: "my-hero.jpg",
            align: "full",
            hasParallax: false,
            hasBackgroundDim: true
        },
        children: ["Gutenberg posts aren't HTML"]
    },
    {
        type: "core/paragraph",
        children: ["Lately I've been hearing plen…"]
    }
];

Al salvataggio della pagina, il sistema salva in database, al posto del vecchio e puro HTML in colonna post_content, un insieme di blocchi rappresentati ognuno da un commento html. In base alla tipologia del blocco (se popolato staticamente o dinamicamente), viene appeso un array serializzato contenente le descrizioni del blocco in questione. Questa sotto è la risultante contenutistica della pagina che state leggendo.

Naturalmente, in frontend i commenti sarebbero inutilizzabili, come per l’array descrittivo serializzato… il browser interpreta solo HTML. Esiste quindi un parser che intepreta ogni commento HTML e converte i dati esistenti nell’array di configurazione del blocco in dati che abbiano un senso valido alla visualizzazione in frontend dello stesso.

In ogni momento della nostra giornata LUI c’è: sempre presente, pronto a rispondere ad ogni nostra esigenza informativa, pronto a soddisfare ogni nostra necessità “social”.

Si, sto parlando proprio del vostro (nostro) amato Smartphone. Più che un dispositivo, per molti è diventato un’estensione del proprio corpo.

Non c’è da stupirsi quindi se anche per Google i dispositivi mobile, nello specifico smartphone più che tablet, siano dei device da tenere come riferimento nell’indicizzazione dei siti web. Google infatti ha recentemente rilasciato il Mobile-First Index ovvero sta cambiando la modalità con la quale inizierà a scansionare i siti web: se finora iniziava dalla versione desktop dei siti, da oggi in poi inizierà dalla versione mobile.

Considerando che lo scorso anno anche in Italia in generale gli accessi ai siti web da mobile hanno superato quelli da desktop, è ovvio che questo cambiamento era inevitabile. Ma cosa comporterà?

Si presume che in questa prima fase in realtà i cambiamenti non saranno così evidenti, non ci saranno stravolgimenti eclatanti nei risultati di ricerca, ma sicuramente con il passare del tempo i siti web ben progettati ed ottimizzati per mobile riusciranno sicuramente a fare la differenza sul piano della visibilità.

Cosa bisogna fare per essere pronti a questo importante cambiamento?

Sicuramente bisogna avere un sito web ottimizzato per mobile. In realtà per noi il cambiamento è già in atto da tempo: sono già diversi anni che progettiamo siti web responsive ovvero siti web in grado di adattarsi ai diversi dispositivi con i quali vi si accede (desktop, notebook, tablet e smartphone) per fornire sempre un’esperienza d’uso appagante.  E già da un po’ che pensiamo ai nuovi progetti web partendo dal mobile: design, contenuti e funnel di conversione vengono studiati inizialmente per mobile e poi adattati per desktop. Non è semplice farlo, soprattutto nel momento in cui ci si confronta con il cliente nelle prime fasi di sviluppo di un nuovo sito web: molti infatti si aspettano sempre di vedere per prima cosa una proposta grafica del nuovo template in versione desktop.

Ormai la strada è chiara. Se stai valutando di rivedere il tuo sito web ed allinearti con le tendenze in atto contattaci subito senza impegno.

Il 2017 si sta per concludere ed alla luce di tanti importanti avvenimenti di quest’anno vediamo insieme quali potrebbero essere i trend principali per il 2018.

Dal Mobile First al Mobile Only?

Il 2017 è stato l’anno in cui anche in Italia gli accessi ad internet da mobile (parliamo di smartphone) hanno superato gli accessi effettuati con altri dispositivi (tablet, desktop). Smartphone sempre più evoluti, potenti, con monitor sempre più grandi abbinati a GB di traffico dati sempre più convenienti, consentono ormai a tutti di navigare in qualsiasi momento (mentre si fa una pausa dal lavoro, mentre si aspetta l’autobus, in fila alle poste, ecc,), di effettuare ricerche proprio nel momento in cui ne hai la necessità. Oltre alle ricerche si accede ad internet per finalità social, per chattare, ecc.

Già da qualche anno si parla di Mobile first ossia la necessità, per chi come noi cura la presenza on line delle aziende, di pensare in fase di progettazione prima alla versione mobile di un sito e poi alla versione per desktop.  Ora la tendenza sembra andare addirittura verso il Mobile Only e quindi pensare solo al mobile, sviluppare siti e portali web progettati ed ottimizzati solo per mobile.

Considerando i dati di accesso ad internet da mobile non sembra poi un trend così difficile da ipotizzare.

App progressive

E’ un concetto strettamente legato all’approccio mobile di cui sopra, anzi sicuramente potrebbe rappresentare la naturale evoluzione.

Le app progressive sono delle web app ossia dei siti web responsive che:

• dopo il primo accesso riconoscono il visitatore e propongono di salvare l’icona sul device;
• possono presentare una splash page introduttiva in stile app nativa;
• possono gestire le notifiche push;
• forniscono un’esperienza d’uso veloce, pratica ed estremamente intuitiva.

Tutti i siti web responsive possono diventare app progressive?
Dipende, se il sito è progettato bene, pensato secondo i canoni del mobile only, allora potrebbe essere una buona base di partenza su cui lavorare per arrivarci.

Quali sono i vantaggi delle App progressive?

1. non è necessario scaricare app dai vari app store;
2. una versione di app progressiva è compatibile sia con sistemi android che con quelli ios;
3. può essere aggiornata e sviluppata molto più rapidamente.

Content is the King

Oramai da tempo è chiaro che il contenuto (testo, immagini, video, ecc.) è il re, è il fattore fondamentale per il successo nel mondo digital (non a caso il contenuto è uno dei fattori più determinanti nella seo). Se vuoi acquisire nuovi potenziali clienti o se vuoi vendere i tuoi prodotti on line, è di fondamentale importanza avere contenuti di qualità.

Cosa vuol dire avere contenuti di qualità? Significare avere contenuti che rappresentino effettivamente una valore aggiunto e che siano utili ai visitatori. I contenuti di un sito web dovrebbero rispondere alle esigenze di informazioni dei visitatori, incuriosirli, far crescere in loro l’interesse per i prodotti e/o servizi che si propongono e condurli quindi al contatto oppure all’acquisto.

I contenuti di un sito web devono distinguere l’azienda, ed i prodotti/servizi che il sito rappresenta, dalla concorrenza. Bisogna dimenticarsi del classico “siamo leader del settore.. da oltre… “ e spiegare invece perchè un potenziale cliente dovrebbe scegliere noi piuttosto che uno dei nostri concorrenti. Ogni realtà aziendale ha delle peculiarità che spesso vengono date per scontate, ma che in realtà dovrebbero essere raccontate ai potenziali clienti.