mosaico_learning_logo
mosaico_logo_elearning
p11
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 

CONTATTACI

Come creare cover responsive per i corsi Rise

2021-07-22 02:00

mosaicoelearning

Digital learning, Tutorial, elearning, feedback, screenr, stile, graphic, italog, comparazione, personalizzati, responsive design, Articulate 360, rise 360,

Come creare cover responsive per i corsi Rise

come-.png

Chi utilizza


Articulate Rise 360

per la produzione di corsi visualizzabili su tutti i dispositivi, si sarà reso conto della


difficoltà di gestire l’immagine di fondo della cover

(che è poi la stessa che compare nel menu laterale del corso).


L’immagine, magari perfettamente visibile in visualizzazione desktop, viene


tagliata in maniera apparentemente casuale

quando si guarda il corso da tablet o da smartphone.


creare-cover-rise-responsive-01-esempio-cover-.png

Si tratta di un tema molto discusso sulla


community di Articulate

, dove si richiede a gran voce una


funzione che permetta quantomeno di stabilire un’area di “focus”

sempre visibile sui vari dispositivi.


Come possiamo risolvere il problema della responsività delle cover Rise? In questo articolo vi proponiamo una soluzione possibile.

Se vuoi scoprire direttamente il


come

senza scoprire il


perché

, puoi saltare direttamente alla


Soluzione: come creare cover responsive in Rise

Indice degli argomenti

Cosa significa responsive?

Per capirlo, facciamo un esempio: immaginate un pittore che debba dipingere un paesaggio. Sceglierà la sua


tela

, la poggerà sul cavalletto e comincerà a dipingere. Una volta completato il quadro, magari, lo venderà ad un collezionista, che lo appenderà in bella vista alla parete.


Per il resto della vita, quel dipinto rimarrà lì, su quella tela di proporzioni e dimensioni fisse, immutabile se non per l’usura degli agenti atmosferici

.


Per chi crea prodotti digitali, invece, si crea un problema:


quella tela avrà dimensioni sempre diverse!

La “tela digitale” è infatti rappresentata da


tutti i dispositivi su cui verrà fruito il quadro

(cioè il nostro corso): schermi grandi in 4K, schermi grandi in HD (anche quadrati), tablet e smartphone di varie misure e proporzioni con 2 orientamenti possibili (verticale e orizzontale).


Le dimensioni della tela digitale


sono praticamente infinite

e non è possibile prevedere tutti i casi.


display-bgr-com-.jpg

Come il Web Design ha risolto il problema del responsive

Nello


sviluppo di siti web

, questo aspetto è già stato esplorato da tempo.


La soluzione individuata consiste nell’impostare


regole diverse per gli elementi

contenuti nella pagina


in funzione

:


  • della larghezza in pixel della finestra del browser (o della viewport, cioè la pagina web mostrata all’interno della finestra del browser)
  • della sua altezza
  • dell’orientamento del dispositivo (portrait per l’orientamento verticale, landscape per quello orizzontale).

Si chiama


Responsive Web Design

e fa uso delle cosiddette


Media Query

 per definire quale comportamento deve avere, ad esempio, il rettangolo X qualora la finestra del browser abbia dimensioni 1024x768 pixel (un comune tablet con orientamento orizzontale).


Rise 360 sfrutta esattamente questo principio

. Lo si vede bene osservando il comportamento delle


Flashcard Grid

su vari dispositivi.


creare-cover-rise-responsive-02-flashcard-.png

Problema risolto?

Ebbene no

. Sebbene Rise sia completamente responsive, la copertina del corso è sempre composta da un


titolo

(che rimane sempre ben saldo e visibile) e da un’


immagine di sfondo

, che invece risulta solitamente tagliata su alcuni dispositivi.


Perché? Per capirlo, occorre capire quali sono le regole dimensionali della cover.


Com’è fatta la cover di un corso Rise?

Prendiamo come esempio un corso visualizzato su un dispositivo con risoluzione


1366x768px

(un comune notebook).


Questa è la


struttura fisica

della cover in questo contesto:


creare-cover-rise-responsive-03-struttura-desktop-.png

La stessa struttura, segue invece


regole leggermente diverse

su uno


smartphone in verticale

(nell’esempio, un iPhone X):


creare-cover-rise-responsive-04-struttura-smartphone-.png

Si nota quindi che lo sfondo copre sempre l’intera area destinata al titolo

. Questo perché utilizza una regola specifica chiamata


background

.


Come viene posizionato lo sfondo sulle cover dei corsi Rise?

Su Rise l’immagine utilizzata come sfondo del titolo segue queste


regole

:


  • background-position: 50% 50% (vale a dire: centrata in direzione verticale e orizzontale rispetto al suo contenitore)
  • background-size: cover (che comunica all’immagine di scalare proporzionalmente rispetto all’area disponibile. L’area disponibile non è altro che l’area che contiene il titolo (testo) e i tasti Inizia il corso e Dettagli.

Questo


adattamento al contenitore

è proprio ciò che causa il taglio dell’immagine, come visibile in questa immagine:


creare-cover-rise-responsive-05-adattamento-sfondo-.png

Non esiste, in Rise, un modo per modificare questo comportamento. Quindi la soluzione al problema passa dal creare


un’immagine di sfondo che tenga già in conto qual è lo spazio visibile su ciascun dispositivo

.


Soluzione: come creare cover responsive in Rise

Per farlo, il mio suggerimento è quello di prendere alcune


schermate delle cover da 3 dispositivi

:


  1. desktop (che usa le stesse regole del tablet con orientamento orizzontale)
  2. tablet verticale (che usa le stesse regole dello smartphone con orientamento orizzontale)
  3. smartphone verticale (che usa le stesse regole del menu laterale)
“Ma non abbiamo tutti questi dispositivi!”

, direte voi. In realtà potete sia


simularli su Rise

, tramite i tasti presenti in alto a destra in modalità preview, sia


simularli dal vostro browser

sfruttando gli


Strumenti per gli sviluppatori

.


Ad esempio su Edge (non molto dissimile dagli altri browser):


  1. cliccate con il tasto destro sulla pagina
  2. nel menu contestuale che si apre, cliccate su Esamina
    . Si aprirà la finestra degli Strumenti per sviluppatori
  3. cliccate sull’icona in alto a destra che rappresenta i dispositivi
  4. selezionate il dispositivo da simulare usando la tendina in alto

Et voilà! Di volta in volta potrete vedere come appare la cover sui vari dispositivi. Utilizzando inoltre il tasto Ruota


creare-cover-rise-responsive-ico-ruuota-.png

potrete decidere l’orientamento del dispositivo e vedere di conseguenza come cambia il comportamento degli elementi.


Una volta creati i 3 screenshot, potete


caricarli in un programma di grafica

e


centrarli adattandoli all’altezza della vostra tavola da disegno

(in questo esempio ho usato una tavola da disegno di dimensioni 1680x427 pixel.


creare-cover-rise-responsive-sovrapp-screnn-.png


I 3 screenshot sovrapposti. È già possibile intuire le 3 aree relative ai 3 dispositivi.


 



Otterremo questo risultato:


  1. l’area 1 sarà visibile su desktop e tablet orizzontale
  2. l’area 2 sarà visibile su tablet verticale e smartphone orizzontale
  3. l’area 3 sarà visibile su smartphone verticale e sul menu laterale

creare-cover-rise-responsive-responsive-.png

Inoltre, è sempre bene mantenere


un’area di sicurezza

(io ho usato una spaziatura di 45 pixel dal bordo) su cui non posizionare elementi importanti, onde evitare tagli dovuti all’adattamento dello sfondo.


Lo step finale è quindi


posizionare gli elementi dell’immagine in modo tale che la stessa mantenga un senso sui vari dispositivi

. Ad esempio:


creare-cover-rise-responsive-ris-desktop-.png
creare-cover-rise-responsive-ris-tabletsmartphone-.png

È una soluzione perfetta?

Ovviamente no, perché il controllo continua ad essere parziale.


Ma certamente può evitarvi molte emicranie, in attesa di una soluzione definitiva da parte di Articulate.


 



Antonio Scribano



Instructional Designer


 


Ti è piaciuto questo articolo? Condividilo con i tuoi colleghi ed amici usando i tasti social!

Training

Per ricevere informazioni sulle attività di training in aula o online training@mosaicoelearning.it
 

Training

Per ricevere informazioni sulle attività di training in aula o online training@mosaicoelearning.it
 

Articulate

Per acquistare o ricevere informazioni sui prodotti Articulate articulate@mosaicoelearning.it
 

Dove
Ragusa, Via del Melograno, 77

Digital Learning

Per richiedere un preventivo su corsi o servizi elearning corsi@mosaicoelearning.it

Digital Learning

Per richiedere un preventivo su corsi o servizi elearning corsi@mosaicoelearning.it

Articulate

Per acquistare o ricevere informazioni sui prodotti Articulate articulate@mosaicoelearning.it
 

Assistenza

Per richiedere assistenza o per segnalare malfunzionamenti del sito assistenza@mosaicoelearning.it
 

Assistenza

Per richiedere assistenza o per segnalare malfunzionamenti del sito assistenza@mosaicoelearning.it
 

footer

facebook
instagram
twitter
linkedin

www.mosaicoelearning.it @ All Right Reserved 2022 - Sito Realizzato da Flazio Experience

k2.svg
k1.svg
k4.svg
p2.svg
k5.svg
k3.svg
Create Website with flazio.com | Free and Easy Website Builder