GUIDA Spark Page

GUIDA

Spark Page: ambiente semplice in cui creare gallerie di immagini, pagina web, storie pubblicabili direttamente online. https://spark.adobe.com/it-IT/

Adobe Spark for Education https://spark.adobe.com/it-IT/edu Questa app è disponibile solo sull’App Store per iPhone e iPad. https://apps.apple.com/it/app/adobe-spark-page/id968433730 https://apps.apple.com/app/id968433730

INTRODUZIONE Adobe Spark

Adobe Spark è una suite di strumenti che Adobe offre gratuitamente agli utenti, si tratta di un sistema integrato costituito da 3 applicazione per la creazione di contenuti digitali e la loro pubblicazione e condivisione sul web.

Adobe Spark è: # Free: è sufficiente registrarsi gratuitamente per poter disporre di tutte le sue funzionalità # Cloud o Web Based: non richiede nessuna installazione di software ma su utilizza dal web # Mobile: può essere utilizzata da dispositivi mobili, come Tablet, via web

La filosofia di Spark è quella di consentire a chiunque, anche a chi non sia dotato di competenze professionali specifiche, di creare contenuti digitali efficaci e di farlo in modo estremamente rapido e semplice.

Cos'è Adobe Spark Adobe Spark propone strumenti che erano già da tempo disponibili come applicazioni per dispositivi mobili con sistema operativo iOS, ora possono essere utilizzate anche dagli utenti tramite web, ma anche con Tablet e Chromebook.

Come ambiente formato da applicazioni integrate per il Web Publishing, Adobe Spark, risulta composto da tre principali strumenti: # Adobe Spark Post: testo + grafica, utile per creare oggetti grafici e grafica per i Social Media come Facebook, Twitter, Instagram, etc. Grazie a Post è possibile realizzare Meme, Poster, Banner, Copertine, Annunci e Inviti, Citazioni, etc. # Adobe Spark Page: testo + immagini + video + link, ottimo strumento per creare Storie e Documenti. Con Adobe Page è possibile realizzare Portfolio, Presentazioni, Narrazioni stile digital storytelling, Diari di apprendimento, Relazioni, Cataloghi e Repertori, etc. # Adobe Spark Video: testo + immagini + voce + icone, permette in modo rapido di creare animazioni video. Con Adobe Video si possono realizzare: Video Lezioni, Video Appunti, Guide e Tutorial, Video Presentazioni, Documentare Eventi, etc.

Guida SPARK PAGE ( da https://www.html.it/guide/adobe-spark/)

Pagine Web Una tipologia di progetto offerto da Adobe Spark è Spark Page, che permette di creare delle vere e proprie pagine web. (Il software web-based, infatti, non solo permette di dilettarsi con flyer e condivisioni sui social network…………).

Lo stile è semplice e minimalista, e una costruzione di questo tipo si adatta

ovviamente a siti senza troppe pretese oppure a semplici vetrine di business, ma l’intero processo offerto da Adobe è efficace ed efficiente.

Il primo passo per la creazione di una pagina web è, come facile intuire, quello di scegliere uno dei tanti template messi a disposizione e di modificarlo a seconda delle proprie necessità. *(qui si fa riferimento ad Adobe Spark nella sua versione full-feature, ma le istruzioni di seguito fornite valgono anche per l’edizione gratuita del software web-based)*

1. Scelta e modifica del template Per poter accedere alle funzioni relative alla creazione di pagine web tramite Spark, è sufficiente effettuare il login e aprire la pagina iniziale del servizio, quella dove sono presenti tutti i progetti salvati o in corso d’opera. A questo punto, così come evidenziato in Figura 1, bisogna selezionare il “+” in alto, a destra dell’header, per ottenere alternative aggiuntive.

FIGURA 1

Si apre un menù a discesa da cui scegliere vari progetti. Ovviamente, per la creazione di un sito web, è necessario cliccare su Page Web.

Adobe Spark aprirà la pagina relativa all’editor vero e proprio di pagine web, mostrato in Figura 3. È proprio da questa sezione che si potrà regolare il proprio template a piacimento, a seconda delle necessità, modificandone ad esempio i riquadri oppure lo stile. Naturalmente, queste operazioni potranno essere eseguite anche in itinere, in caso siano necessari aggiustamenti.

FIGURA 3

Prima di entrare nel merito della suddivisione della pagina e delle sue griglie, può risultare utile pensare allo stile, ovvero alla combinazione di colori e di font per il proprio sito. Per farlo, è sufficiente posizionarsi sul menu Template in alto a destra e attendere l’apparizione della relativa colonna a scomparsa, come evidenziato in Figura 4. Dalla lista si potrà scegliere la modalità più gradita, in base al font reso disponibile, al colore di background e all’armonia tra tinta del testo e altre gradazioni presenti nella pagina.

FIGURA 4

A questo punto, non si dovrà fare altro che modificare la griglia a proprio piacere. In questa fase di progettazione, è utile unicamente modificare l’area principale della landing page, ovvero il box che conterrà una o più immagini che gli utenti vedranno caricarsi sui display dei loro dispositivi all’apertura del sito. Posizionandosi sulla toolbox mostrata in Figura 3, richiamabile con il tasto “+”, si può ad esempio suddividere questa area in due parti, optando per l’icona Glideshow illustrata in Figura 5. L’ampiezza delle celle può essere regolata a piacere tramite gli appositi slider.

FIGURA 5

2. Inserire foto e video Dopo aver visto come regolare il template della propria pagina web in Adobe Spark, suddividendo le griglie a seconda delle proprie esigenze, utile è comprendere come il software web-based gestisca le immagini e altri contenuti multimediali. Può essere utile, infatti, partire proprio da questi elementi prima di inserire testi e altri contenuti, per ottenere una prima bozza dell’effetto finale del sito. In questo modo, in caso di risultati non soddisfacenti, sarà molto semplice poter cambiare template o la disposizione delle griglie, senza dover ripetere da zero l’intero lavoro.

Inserire le immagini Il processo d’inserimento delle immagini in Adobe Spark, relativo alla creazione di una pagina web, è tutto fuorché dissimile da quello che riguarda la sezione dedicata alla grafica statica SPARK POST. Ad

esempio, posizionandosi sul riquadro più grande della landing page, è sufficiente cliccare l’icona “+” e, dal menu contestuale che apparirà, scegliere la voce Foto. In Figura 1 è riportato il pulsante in questione.

FIGURA 1

A questo punto, comparirà l’ormai ben conosciuta colonna di destra, che permette di agire direttamente sugli elementi contenuti nel proprio template. Per inserire una fotografia è possibile caricare un file conservato sul proprio computer oppure avvalersi di servizi online. La funzione Trova Foto Gratuite consente di passare al setaccio gli archivi di Pixabay e Unsplash, due popolari portali di scatti CC0 e royalty free, ma è possibile anche servirsi di Creative Cloud, Lightroom, Dropbox, Google Foto e Google Drive. Tutte le opzioni disponibili sono illustrate in Figura 2.

FIGURA 2

Per fare un esempio, riportato in Figura 3, è possibile sfruttare l’opzione Trova Foto Gratuite immettendo nel campo di ricerca una parola chiave, ottenendo così una lista di scatti a tema. Si consiglia di utilizzare chiavi in inglese, poiché i due portali collegati operano soprattutto in questa lingua.

FIGURA 3

Scovata la fotografia di propria preferenza, è sufficiente cliccare sul relativo box per vederla immediatamente applicata al box della griglia selezionato, in questo caso il riquadro di landing page. È però necessario sottolineare un dettaglio importante: così come evidente dalla Figura 4, sull’immagine verrà applicato lo stile grafico del tema precedentemente selezionato.

FIGURA 4

Per ovviare a questo problema, se il risultato non dovesse essere di proprio gradimento, è sufficiente scegliere il menu Temi in alto a destra e, dalla lista a comparsa sempre sulla colonna di destra, optare per una configurazione diversa. Un esempio è mostrato in Figura 5.

FIGURA 5

Naturalmente, è possibile seguire lo stesso procedimento anche per tutte le immagini secondarie: anche in questo caso, è sufficiente selezionare l’icona “+”, scegliere Foto dal menu e cercare l’immagine di proprio interesse tramite la colonna di destra.

Inserimento dei video Adobe Spark incorpora anche alcune funzionalità per l’inserimento dei video, seppur limitate. È infatti in grado di incorporare filmati ospitati su servizi esterni in modalità embed o, in alternativa, già precedentemente realizzati con Spark Video.

Per farlo, è sufficiente recarsi su un box di propria preferenza, selezionare il solito pulsante “+” e scegliere l’icona dei video dal menu contestuale. Apparirà quindi una finestra di dialogo simile a quella visualizzata in Figura 6.

FIGURA 6

I servizi oggi ammessi, oltre a Spark Video, sono YouTube e Vimeo: è sufficiente copiare nell’apposito campo il link del filmato in questione. Va però precisato come le dimensioni del player nel riquadro prescelto dipendano dal tema di pagina selezionato.

3. Punto focale, titoli e pulsanti Dopo aver visto come inserire foto e video nella propria pagina web, avvalendosi degli strumenti inclusi in Adobe Spark, è tempo di analizzare alcune funzioni aggiuntive. Si parte dal punto focale, previsto in alcuni template, per poi proseguire con titoli, testi e pulsanti. Ovviamente, tutte le modifiche apportate non sono distruttive e, oltre alla possibilità di tornare allo stato precedente, si può cambiare aspetto semplicemente scegliendo un template alternativo.

Alcuni template per i siti web di Adobe Spark, come quello scelto nella precedente versione, permettono di regolare il Punto Focale dell’immagine scelta come apertura. Questo perché, essendo dotati di

un design parallasse – quindi in movimento con lo scrolling verso l’alto e verso il basso – è possibile definire quale porzione dello scatto debba risultare sempre visibile.

Per accedere alla funziona è sufficiente, su un template abilitato, cliccare sull’immagine già inglobata nella griglia: apparirà un meno contestuale, come evidenziato in Figura 1, e dalle opzioni proposte si sceglierà proprio Punto Focale.

FIGURA 1

A questo punto, sullo scatto apparirà una grande maniglia circolare: basterà trascinarla nella posizione preferita, evidenziando la porzione dell’immagine che si desidera mantenere a fuoco. Una volta definito il proprio punto focale, è sufficiente scegliere l’opzione Salva disponibile in altro a destra o, se non si fosse soddisfatti del risultato, premere il corrispettivo Annulla. In Figura 2, un esempio.

FIGURA 2

Titoli e testi Regolata la fotografia d’apertura, è possibile aggiungere i titoli del sito, a seconda delle modalità previste dal template prescelto. Per l’esempio riportato in questa lezione, è disponibile sia un titolo che un sottotitolo, così come evidenziato in Figura 3. Sarà sufficiente cliccare sopra il testo di segnaposto già incluso e sostituirlo con la frase di propria preferenza, in modo semplice e immediato.

FIGURA 3

Inseriti i titoli, è utile apprendere come gestire le caselle di testo.

Cliccando l’icona “+” di un’area vuota della pagina, si ottiene un menu contestuale con svariate opzioni. Fra le tante proposte, è sufficiente scegliere Testo, così come illustrato in Figura 4.

FIGURA 4

A schermo verrà mostrato un rudimentale editor testuale, all’interno della casella o della cella selezionata, dove inserire il paragrafo di propria preferenza e procedere con una prima formattazione. Le

opzioni incluse prevedono la possibilità di definire paragrafi “H1” e “H2”, citazioni, elenchi a punti o numerati, grassetto e corsivo, collegamenti ipertestuali e, come facile intuire, un allineamento sinistro, destro oppure centrato. Un esempio è riportato in Figura 5.

FIGURA 5

Pulsanti Naturalmente, Adobe Spark permette anche di incorporare dei pulsanti nella propria pagina web, affinché il sito possa approfittare di link e collegamenti, sia interni che verso l’esterno. Per farlo, si clicca sempre sull’icona “+” nella casella di propria preferenza, scegliendo la voce Pulsante dal menu contestuale.

A questo punto, una bozza del tasto apparirà all’interno del design della pagina e un piccolo editor verrà mostrato a schermo, per finalizzarne la creazione. È infatti impossibile inserire il titolo che verrà mostrato sul pulsante stesso, il collegamento ipertestuale da seguire e il tipo di allineamento preferito. L’editor è evidenziato in Figura 6.

FIGURA 6

Inserite le opzioni di propria preferenza, è sufficiente premere il tasto Salva. Attenzione, però, poiché l’allineamento del tasto creato è relativo all’ampiezza della cella prescelta: in questo caso, scegliendo un allineamento centrato, il risultato è quello riportato in Figura 7.

Potrebbero esservi quindi delle differenze rispetto alla formattazione del proprio testo, che potrebbe risultare esteticamente sfalsato rispetto al pulsante stesso.

FIGURA 7

4. Griglia Foto Tra le varie possibilità previste da Adobe Spark per arricchire la propria pagina web, la soluzione Griglia Foto è certamente fra le più interessanti. Questa opzione permette infatti di aggiungere una piccola galleria d’immagini, in modo semplice e veloce, senza nemmeno dover compilare una singola riga di codice. Sfruttare questa possibilità è molto semplice, di seguito qualche istruzione utile.

Griglia foto: come si usa Per accedere alla funzione Griglia Foto, utile per la creazione di una piccola gallery, è innanzitutto necessario posizionarsi in un box libero della propria pagina web. La funzione è attiva nei riquadri orizzontali, mentre non è presente per i box verticalmente affiancati. A questo punto, come consuetudine per Adobe Spark, è sufficiente premere il tasto “+” e scegliere l’omonima voce, così come riportato in Figura 1.

FIGURA 1

Una volta selezionato il comando, apparirà l’interfaccia per la creazione della griglia. Sul lato sinistro si troverà il foglio di lavoro, così come consuetudine per Adobe Spark, mentre sulla colonna di destra tutti i tool utili. In questo caso, Spark richiede di scegliere le fotografie che comporranno la gallery: possono essere cercate con il classico strumento Trova Foto – pensato per condurre ricerche su servizi gratuiti e CC0 come Unsplash e Pixabay – oppure si potrà approfittare di Adobe Stock, dei file presenti sulla propria Creative Cloud, di Lightroom e del cloud storage di Dropbox, Google Foto e Google Drive. L’interfaccia è mostrata in Figura 2.

FIGURA 2

Per aggiungere immagini alla griglia, è sufficiente selezionarle dalla colonna di destra: man mano che verranno scelte, la griglia stessa comincerà a prendere forma, cosÏ come evidenziato in Figura 3.

FIGURA 3

Non esiste un numero massimo o minimo di immagini per creare la propria griglia, tuttavia la migliore visualizzazione si ottiene con almeno quattro elementi, così come riportato in Figura 4. Si noterà come, passando il cursore sopra ogni singola immagine, appariranno delle funzioni aggiuntive: l’immagine potrà essere modificata, ridimensionata, spostata di cella oppure semplicemente eliminata.

FIGURA 4

Come facile intuire, è possibile scegliere anche un layout diverso rispetto alla classica configurazione con riquadri immagine di dimensione fissa per ogni singolo scatto. Ad esempio, evidenziando le opzioni aggiuntive di una singola fotografia, si potrà accedere alla voce Foto Grande. Attivando questa funzionalità, l’immagine verrà ingrandita in un riquadro che occupa tutta la larghezza totale della griglia stessa, mentre le successive immagini verranno riportate immediatamente sotto, in box di dimensioni più ridotte. Un esempio è riportato in Figura 5.

FIGURA 5

Terminata la progettazione della propria griglia di fotografie, è sufficiente premere il pulsante Salva posizionato in alto a destra: la gallery apparirà automaticamente nella posizione prescelta del proprio layout. In alternativa, cliccando su Annulla la griglia verrà eliminata.

In ogni caso, sarà sempre possibile intervenire in un secondo momento, ad esempio per cambiare la propria selezione di scatti.

5. Glideshow Tra le varie funzionalità previste da Adobe Spark per la realizzazione di una pagina Web, l’opzione Glideshow farà di certo felici tutti gli utenti alla ricerca di un look moderno e versatile per il loro sito.

Questa tecnologia, infatti, permette di scegliere delle immagini di sfondo per ogni riquadro della propria pagina, animate con degli effetti che ricordano molto da vicino il gettonato design parallasse.

Così come già accennato, la funzionalità Glideshow di Adobe Spark permette di aggiungere delle foto di sfondo alla propria pagina web, affinché vengano mostrate in opacità sotto i riquadri con una piccola

animazione molto elegante, molto simile al design parallasse. Si tratta di una soluzione molto comoda per chi non si accontenta del classico sfondo bianco per i propri contenuti e, oltretutto, interessante per chi fosse alla ricerca di una nuova impaginazione per i propri testi. La modalità Glideshow, infatti, mostra sulla sinistra i normali box, mentre sulla destra lascia spazio alle fotografie, in un sistema di visualizzazione a scrolling singolo.

Innanzitutto, è necessario selezionare un riquadro vuoto e scegliere l’ormai ben conosciuta icona “+”: dal menu contestuale che apparirà a schermo, si opterà per l’omonima voce Glideshow, così come evidenziato in Figura 1.

FIGURA 1

A questo punto, verrà aperta l’interfaccia di creazione dello strumento Glideshow, molto simile ai precedenti già affrontati in questa guida: sulla sinistra si troverà il foglio di lavoro, mentre sulla destra la colonna dei tool aggiuntivi, come quello per la ricerca delle fotografie. L’interfaccia è mostrata in Figura 2.

FIGURA 2

Così come già accennato, tramite la colonna di destra è possibile selezionare – oppure caricare – le fotografie prescelte per il proprio Glideshow. Si può approfittare di risorse gratuite e CC0, come quelle di Pixabay e Unsplash, semplicemente digitando una chiave di ricerca nell’apposito campo. In alternativa, sono ammessi contenuti da Adobe Stock, dalla propria Creative Cloud, da Lightroom, Dropbox, Google Foto e Google Drive. Una volta trovate le immagini di propria preferenza, basterà cliccare sulla loro anteprima per inserirle all’interno del foglio di lavoro, come mostrato in Figura 3. Non vi sono limiti sulla quantità degli scatti: tutto dipende dalla lunghezza prescelta per il proprio Glideshow.

FIGURA 3

Ovviamente, le fotografie prescelte possono essere modificate.

Selezionando un’immagine sul foglio di lavoro, e passando il mouse sulla porzione inferiore della stessa, appariranno alcune icone di modifica, così come evidenziato in Figura 4. All’utente è offerta la possibilità di sostituire l’immagine con un nuovo scatto, di modificarne l’andamento cronologico verso il basso oppure verso l’alto e, infine, di cancellare in toto la fotografia.

FIGURA 4

Terminata la propria composizione, è sufficiente premere il tasto Salva – posizionato in alto a destra – per vederla comparire all’interno della propria pagina. Come si noterà dalla Figura 5, sopra a ogni immagine sarà disponibile un singolo riquadro, che potrà essere completato con una foto, del testo, un pulsante oppure un video.

FIGURA 5

6. Impostazioni finali e condivisione Dopo aver scelto e modificato il tema della pagina web, aver aggiunto elementi multimediali, testi o Glideshow, il lavoro creativo con Adobe Spark si conclude con la gestione di alcune impostazioni finali e con la pubblicazione del progetto. Anche in questo caso, Adobe mette a disposizione degli strumenti di facilissimo utilizzo, adatti anche a chi si avvicina a questo universo per la prima volta.

Gestione delle impostazioni finali Una volta creata la propria pagina web con Adobe Spark, completa dei testi e degli elementi multimediali di propria preferenza, bisogna compiere ancora qualche passo ulteriore prima di poter mostrare quanto di realizzato al mondo. Si tratta di piccole ma fondamentali ottimizzazioni, che renderanno il risultato finale ancora piĂš gradevole,

nonché anche più efficace in termini di condivisione e traffico generato.

Il primo passaggio è quello di controllare il menu Impostazioni, posizionato come prima voce all’interno della barra del menu superiore di Spark. Cliccandoci, così come evidenziato in Figura 1, verrà mostrato uno slider: quello relativo all’attivazione o alla disattivazione dell’Intestazione e del Piè di pagina.

FIGURA 1

Per poter inserire un’intestazione oppure un piè di pagina, occorre aver preventivamente caricato e impostato il proprio brand: dalla pagina generale di Spark, dove sono ospitati anche i propri progetti, è possibile definire un logo o uno slogan da applicare automaticamente a tutte le produzioni realizzate con il software. Questa feature, tuttavia, è destinata solo all’edizione a pagamento della piattaforma di Adobe.

A questo punto, è possibile verificare l’Anteprima della pagina realizzata, scegliendo dalla già citata barra superiore l’omonima voce.

Basterà attendere pochi istanti di caricamento per vedere il piccolo

sito completato, all’interno della finestra del browser. in Figura 2 è riportato un esempio.

FIGURA 2

Del tutto analoga è la funzionalità Presentazione, che permette di ammirare la propria pagina a schermo intero, con comodi pulsanti di navigazione riportati in alto della schermata. È inoltre possibile effettuare lo scrolling con le classiche barre di scorrimento a lato o, ancora, muoversi all’interno della pagina con i comodi tasti di direzione.

Condivisione e pubblicazione Verificato che il design rispecchi i propri desideri e che tutto funzioni come sperato, si può procedere con la condivisione e la pubblicazione del proprio progetto. Adobe Spark garantisce numerose alternative agli utenti, tuttavia per la pubblicazione si farà riferimento ai server della stessa società, poiché al momento non sembra essere implementata una modalità di esportazione del codice, del foglio di stile e delle risorse multimediali per il caricamento su un proprio spazio online.

Cliccando sul pulsante Condivisione, apparirà sullo schermo una piccola finestra di dialogo, con le voci Pubblica e Condividi Collegamento, Stampa e Invita. Il riquadro è mostrato in Figura 3.

FIGURA 3

Le ultime due opzioni non hanno bisogno di troppe spiegazioni: Stampa permette di ottenere una copia cartacea della propria pagina, Invita consente di mostrare direttamente su Spark il progetto a un’altra persona, come un membro del proprio team. Il comando Pubblica e Condividi, invece, vede un passaggio ulteriore definito da un’apposita finestra di dialogo, evidenziata in Figura 4.

FIGURA 4

Nel primo pannello è possibile aggiornare alcune informazioni, come il nome del sito, l’autore e gli eventuali credit delle immagini. Chi avesse approfittato del freestock integrato di Pixabay e Unsplash, vedrà i nomi dei creatori direttamente aggiunti nella casella credits, anche se rimane sempre la possibilità di modificarli. Ancora, si può scegliere la categoria della propria pagina – dal business ai viaggi – e decidere se debba essere messa o meno in evidenza sul sito di Adobe Spark.

Il successivo tab, invece, è quello relativo alla condivisione vera e propria, così come illustrato in Figura 5. Si potrà ottenere un collegamento diretto per la pagina, da inoltrare a chi si desidera, oppure approfittare dei principali servizi social e di sharing come Facebook, Twitter, la mail, l’embed in pagine preesistenti e molto altro ancora.

FIGURA 5

********************************************************

Crea pagine Web sensazionali con Adobe Spark **********************************************************************************

https://spark.adobe.com/it-IT/community-guidelines

5 modelli Adobe Spark per iniziare l'anno scolastico https://blog.adobespark.com/2020/08/26/5-adobe-spark-templates-to-start-the-school-year/

********************************************************************************** BEST PRACTICES

https://spark.adobe.com/page/ddxL9xPosPTEE/

https://spark.adobe.com/page/rTGtQJrRJ1Ywl/

https://spark.adobe.com/page/BRIDfOvLB6f7J/

https://spark.adobe.com/page/ifhEjOBMIuEF1/

https://spark.adobe.com/page/HtT4zp9UzjMFg/

https://spark.adobe.com/page/zxWbP/

shorturl.at/ejTX6

https://spark.adobe.com/page/HgZ0FeVYXeJN1/

https://ippolitagallo.wixsite.com/gruppo1erasmus/diario-di-bordo