Marco Agustoni
ATTENZIONE: Adobe Muse non è più sviluppato e supportato da Adobe.
Vuoi imparare a realizzare siti web senza scrivere una sola riga di codice? Oggi è possibile! Grazie ad Adobe Muse.
In questo articolo ti spiego come, attraverso questo rivoluzionario software, sia possibile davvero disegnare pagine web responsive anche senza conoscere i più comuni linguaggi di scripting, markup e formattazione.
Non solo, all’interno della guida troverai tutto ciò che ti serve per iniziare a muovere i primi passi all’interno di Muse.
Sei pronto? Si comincia!
PS: La guida è offerta da Muse Beginner, il nostro gruppo privato su Adobe Muse.
Ti racconto una breve storia
Facciamo un tuffo nel passato.
Era l’anno 2009 e frequentavo la Scuola di Grafica & Multimedia.
Stavo concludendo le ultime pagine del mio sito web realizzato con Adobe Flash.
In quell’anno frequentavo un corso di Web design per imparare ad usare Adobe Flash; avevo ottenuto anche buoni risultati.
Disegnare siti web, poterli animare e poi pubblicare era davvero eccitante.
Poi, accadde il peggio.
Negli anni seguenti, Flash venne pian piano abbandonato e sostituito da standard open, più sicuri e leggeri come l’HTML 5.
Mi faceva sorridere il fatto di aver investito del tempo ad imparare un software che dopo qualche anno sarebbe stato dimenticato o rimpiazzato.
Flash aveva portato molte innovazioni nel web, soprattutto nel campo delle animazioni, ma era giunto per lui il momento di farsi da parte e la causa principale era l’avvento dei dispositivi come tablet e smartphone i quali tendevano a snobbare il formato flash.
Dovevo ricominciare tutto da zero.
Iniziai ad interessarmi ai CMS, software che, una volta installati su un server web, facilitano la gestione dei contenuti di un sito internet.
Mi appassionai a Joomla e successivamente a WordPress entrambi ottimi CMS, ma che non mi permettevano di disegnare e progettare da zero i layout dei miei siti web se non conoscendo i vari linguaggi di scripting, markup e formattazione.
Io sono un Designer, non uno sviluppatore!
Fu così che il destino mi fece scoprire un software rivoluzionario in grado di disegnare pagine web personalizzate senza dover ricorrere all’utilizzo di codici HTML, PHP O CSS: ADOBE MUSE
Che cosa è Adobe Muse?
Adobe Muse è un’applicazione che permette di creare siti web con codice standard compatibile senza il bisogno di scrivere una sola stringa di codice informatico.
Tramite Muse, puoi dare vita a pagine web complete di elementi interattivi, come presentazioni, menu, light box, moduli di contatto e siti responsive, grazie alla presenza di funzioni recentemente introdotte da Adobe con l’intento di estendere le applicazioni possibili del suo programma.
In caso ti stia domandando le ragioni che hanno impedito la diffusione globale di un software tanto efficace ed agevole, è mio dovere informarti che, per quanto lo spettro delle potenzialità offerto da Muse risulti piuttosto ampio, esistono alcune limitazioni interne al programma che ne rendono sconsigliabile l’impiego per determinate esigenze.
Adobe Muse non è la soluzione migliore per i siti web di grandi dimensioni e non può gestire database:
ciò significa che non può essere utilizzato come Blog, E-commerce o come piattaforma CMS, tipo WordPress, Joomla o Drupal.
In realtà è possibile integrare moltissime funzioni in un sito Muse fra cui anche un Blog e un e-commerce, ma per farlo bisogna ricorrere all’aiuto di Widget o servizi esterni. A proposito di Widget, anche Muse, un po’ come WordPress e Joomla, dispone di centinaia di Plugin pronti all’uso che ampliano le funzioni base del software e consentono una maggiore dinamicità.
Penso che Muse sia un ottimo punto di partenza per chiunque stia cercando di immergersi nel mondo del web senza possedere nozioni avanzate di informatica o programmazione.
Tuttavia, è importante sapere che oltre un certo limite Adobe Muse non può andare e se hai intenzione di superare i suoi naturali confini, dovrai necessariamente apprendere i linguaggi HTML, CSS e JavaScript, attraverso i quale andare a costruire un bagaglio di conoscenze individuali complementari e alternative a quelle che ci apprestiamo ad imparare in questo articolo.
Come si presenta l’interfaccia di Adobe Muse
Prima di iniziare a lavorare con Adobe Muse, è importante conoscere gli elementi dell’interfaccia che si presentano appena viene aperta l’applicazione.
In questo paragrafo faremo un breve tour dell’ambiente di lavoro.
Iniziamo!
Schermata di benvenuto
Dopo aver avviato il programma, si aprirà una schermata di benvenuto, dove potrai creare immediatamente un nuovo sito.
Facendo clic sulla voce Nuovo sito, si aprirà una finestra di dialogo in cui potrai scegliere se impostare il sito in larghezza fluida (ovvero responsive) oppure fissa e avrai la possibilità di definire alcune opzione fra cui il numero di colonne, la larghezza massima della pagina ed altre impostazioni avanzate.
Per adesso procedi facendo clic OK senza dare troppa importanza alle impostazioni di questa finestra.
Schermata pianificazione
Ti troverai immediatamente all’interno della schermata chiamata “Pianificazione”, che approfondiremo meglio più avanti.
Per ora ti basta sapere che qui puoi visualizzare le pagine del sito, decidere se rendere visibile la pagina mastro assegnata, attivare e disattivare le miniature, modificare la visualizzazione della mappa del sito e regolarne la dimensione.
In sostanza, nella vista di Pianificazione puoi gestisce la Mappa ovvero la gerarchia delle pagine che andranno a comporre il tuo sito web.
Nella barra superiore, a destra, hai la possibilità di accedere ad altre sezioni come: Progettazione, Anteprima e Pubblica.
Diamo subito un’occhiata alla vista di Progettazione.
Schermata Progettazione
Fai doppio click sulla pagina Home per accedere all’ambiente di Progettazione.
Non preoccuparti di ciò che vedi al centro della pagina, concentrati per ora solo sugli elementi esterni.
La schermata di Progettazione è composta, nella parte superiore sinistra, da un pannello a comparsa, che permette di impostare il livello di zoom del documento.
Alla sua destra sono presenti due piccole icone che offrono la possibilità di aprire pagine specifiche e modificare le opzioni di visualizzazione attivando e disattivando righelli, guide, bordi, piè di pagina, ecc.
Subito sotto trovi il pannello di controllo, una barra dinamica nella quale puoi visualizzare diverse opzioni a seconda di ciò che hai selezionato all’interno dell’area di lavoro.
Si tratta di una barra dinamica che si modifica e cambia in base agli elementi cliccati; con il testo attivo, per esempio, mostrerà le opzioni per modificare il tipo di font, la dimensioni, l’allineamento ecc.
Nella parte sinistra dell’interfaccia trovi il consueto pannello Strumenti presente anche nelle altre applicazioni di Adobe.
Gli strumenti di Muse sono piuttosto semplificati, abbiamo pochi tool a disposizione: Strumento Selezione, Strumento Taglierina, Strumento Testo, Strumento Rettangolo, Strumento cornice rettangolo, Strumento Mano e Strumento Zoom.
Passiamo ora al lato destro del programma in cui sono presenti i classici pannelli che puoi trovare anche in altri ambienti come Photoshop o Illustrator.
Qui hai a disposizione i pannelli di Testo, Colori, Campione, Libreria di widget, Stati, Effetti di scorrimento, Livelli, Libreria Risorse, ecc.
Come d’abitudine anche in Muse i pannelli possono essere spostati e riposizionati all’interno dell’area di lavoro.
Se dopo averli spostati desideri tornare alle impostazioni di default, ti basta fare clic sul menu Finestra e selezionare la voce Ripristina pannelli.
ll pannello strumenti
Dopo aver analizzato rapidamente l’interfaccia di Muse, diamo un’occhiata nel dettaglio ai singoli strumenti a disposizione.
Abbiamo detto che all’interno della schermata di Progettazione è presente, sulla sinistra dello schermo, il pannello strumenti.
Scopriamo ogni singolo tool!
Strumento di selezione
La prima icona disponibile si chiama “Strumento di selezione” e risulta essere piuttosto intuitiva per chiunque possiede un minimo di dimestichezza con l’universo Adobe.
Lo strumento consente infatti di selezionare, ingrandire, rimpicciolire o spostare gli oggetti desiderati, in base alla specifica esigenza del momento.
Strumento Taglierina
Subito sotto, trovi lo “Strumento Taglierina”.
A prima vista, la presenza di uno strumento dedicato al ritaglio all’interno di un programma come Muse potrebbe destarti qualche perplessità, data la natura del software che stiamo utilizzando.
Tutt’altro che trascurabile, lo “Strumento Taglierina” risulta essere invece fondamentale per la creazione di un sito in ambiente Muse e decisamente semplice da impiegare.
Esattamente come accade per Photoshop, lo strumento in questione si applica alle sole immagini, quindi, per testare le sue funzioni, è necessario inserire una qualunque immagine nel documento tramite il menu FILE > INSERISCI.
A questo punto, selezionando l’immagine con lo “Strumento Taglierina”, prendi il bordo e trascinalo verso l’interno dell’immagine. Così facendo, l’immagine non si riduce, ma viene solo ridimensionata la cornice esterna.
Questo renderà più facile ridimensionare le miniature, evitandoti di ricorrere all’utilizzo di Photoshop e risulterà funzionale in caso tu abbia bisogno di riempire velocemente un’area del sito con un’immagine.
Inoltre, il vantaggio principale dello strumento è rappresentato dalla possibilità di ripristinare in ogni momento il formato originale della tua immagine, semplicemente trascinando nel senso opposto i cursori che regolano il ritaglio.
Strumento di testo
Il terzo strumento che andiamo ad analizzare è quello di testo.
Tenendo premuto sull’icona, puoi notare che lo strumento è suddiviso in due parti: “Strumento testo” e “Strumento testo verticale”.
La distinzione è legata all’esigenza di creare caselle di testo per la scrittura secondo un dato schema, appunto, orizzontale o verticale. Per creare una casella di testo basta fare click su un punto della pagina e trascinare.
Strumento Rettangolo/Ellisse
Il prossimo strumento che andiamo ad analizzare è il rettangolo che nasconde all’interno anche lo strumento Ellisse. Questi due strumenti sono essenziali data la centralità delle figure rettangolari ed ellittiche nel processo di creazione delle sezioni, dei pulsanti e di numerose altri elementi che regolano il funzionamento del sito.
Lo “Strumento Rettangolo” funziona esattamente come un qualsiasi “strumento forma” presente in altre applicazioni: per regolare il suo utilizzo è sufficiente fare clic e trascinare per iniziare a disegnare una forma.
Alla forma ottenuta puoi associare un colore a tinta unita o sfumato, ma anche un’immagine. Ottimo!
Strumento Cornice Rettnagolo/Cornice Ellisse
Analizziamo adesso due strumenti recentemente introdotti in Muse: gli strumenti Cornice Rettangolo e Cornice Ellisse. Quali sono i fattori che li differenziano rispetto ai due tool precedenti? Abbiamo detto che con gli strumenti rettangolo ed ellisse possiamo disegnare forme geometriche che possono essere riempite con colori e immagini. Lo strumento cornice rettangolo invece ti permette di inserire degli elementi segnaposto provvisori utili a riempire eventuali spazi che poi potranno essere sostituiti da immagini. Puoi posizionare una cornice rettangolare come segnaposto e in un secondo momento sostituirla con l’immagine definitiva tramite i comandi CMD o CTRL + D. L’immagine inserita in una cornice rettangolo può essere solamente ridimensionarla in proporzione e non viene inserita in una cornice. Per capire meglio il funzionamento degli strumenti cornice farò un rapido esempio di quello che è il loro uso più comune. I due strumenti posso essere sfruttati nel momento in cui si deve presentare un sito web e non si possiedono ancora le immagini definitive. In fase di ultimazione del lavoro si potranno rapidamente sostituire gli elementi segnaposto con le immagini finali.
Tutto chiaro? Continua a leggere.
Strumento Mano
Il penultimo strumento è la Mano che consente di eseguire una panoramica del documento ed è essenziale per spostarsi comodamente all’interno della pagina.
Come in Illustrator e Photoshop, lo strumento Mano è attivabile provvisoriamente tenendo premuta la barra spaziatrice della tastiera.
Strumento Zoom
L’ultimo strumento che andiamo ad analizzare è il più intuitivo e consente di ingrandire o rimpicciolire a piacere la pagina selezionata: per effettuare una panoramica completa è sufficiente un singolo clic, mentre per diminuire il livello di zoom occorre mantenere premuto il tasto ALT.
Le viste Pianificazione, progettazione e anteprima
In precedenza abbiamo accennato alle diverse “Viste” presenti nell’ambiente di lavoro di Adobe Muse: in questo paragrafo ho intenzione di spiegarti nel dettaglio ciò che ognuna di essere è in grado di fare.
In primo luogo, troviamo la vista “Pianificazione”, modalità che, come già detto, consente di definire la struttura del sito web che stai creando, mediante l’aggiunta e la nominazione delle pagine, la creazione della struttura delle “Mastro” e la costruzione di una mappa di navigazione.
Accedendo tramite un doppio-click (da effettuarsi su una qualunque pagina) alla vista “Progettazione”, risulta subito evidente come questa modalità costituisca il cuore stesso dell’architettura di Adobe Muse, dal quale è agevolmente possibile progettare l’impaginazione grafica delle pagine web, modificare il layout dei testi, definirne i colori, aggiungere effetti e molto altro.
Accedendo alla voce “Anteprima”, in alto a destra, Muse genera una preview completa del tuo sito web direttamente all’interno dell’applicazione, mostrando come dovrebbe apparire il sito al quale stai lavorando dall’interno di un comune browser di navigazione internet, come Google Chrome.
Grazie a questa funzione, puoi navigare, cliccare e scorrere le pagine del sito come se si trovasse già “online”, consentendoti così di monitorare il corretto funzionamento di ogni dettaglio prima di concludere il lavoro.
Per uscire dall’anteprima puoi cliccare sulla piccola icona a forma di “X”, oppure navigare direttamente fra le “Viste”, utilizzando i collegamenti in alto a destra.
L’ultima voce presente nel menu si chiama “Pubblica” e ti consente di pubblicare definitiva un sito, una volta ultimato il lavoro e messo a punto ogni dettaglio residuo.
All’interno del menu Pubblica hai la possibilità di:
- Pubblicare un sito web sul tuo hosting (Siteground, Aruba);
- Pubblicare provvisoriamente il tuo sito all’interno di Business Catalyst;
- Esportare l’interno sito web all’interno di una cartella del tuo pc.
Ora che hai appreso le caratteristiche delle 4 “Viste” di Adobe Muse, ti ricordo che la capacità di prendere dimestichezza con queste funzioni è essenziale alla buona riuscita del tuo sito, data la continua necessità di passare con velocità dall’una all’altra.
Creare un Nuovo sito in Adobe Muse
Dopo la lunga e doverosa introduzione, è giunto il momento di creare il nostro primo sito web all’interno di Adobe Muse.
Iniziamo con l’aprire il programma accedendo alla schermata di “Benvenuto”, da dove risulta già possibile iniziare la costruzione del nostro sito, selezionando l’opzione “Crea nuovo sito” mediante un singolo clic, oppure scegliendo la voce “Nuovo sito” (Cmd + N oppure Ctrl + N) dal file Menu.
Le opzioni di Muse quando si crea un nuovo sito
Occorre ora prestare molta attenzione alla schermata delle impostazioni e analizzare nel dettaglio tutte le opzioni presenti (dall’alto verso il basso):
Larghezza fluida o fissa. Questa opzione consente di scegliere se iniziare la costruzione di un sito web con larghezza fluida ovvero ridimensionabile (responsive) in base alla larghezza del browser, oppure fissa cioè statica, non responsive. La soluzione migliore è rappresentata dalla progettazione di un sito concepito per adattarsi a qualsiasi dimensione dello schermo (come spiegato in questo articolo) quindi ti consiglio di scegliere l’opzione Larghezza fluida. Fra l’altro, attivando l’opzione Larghezza Fluida potrai sfruttare i punti di interruzione per ottimizzare il tuo sito web ed ottenere layout perfetti a qualsiasi risoluzione. Anche per questo argomento ho scritto un articolo molto dettagliato che trovi qua.
Larghezza max Pagina. Le maggiori difficoltà connesse con questa opzione riguardano il fatto che risulta spesso complesso decidere le specifiche misure da attribuire ad un sito web per quanto riguarda la larghezza dello schermo. Tenendo fermamente presente che la maggior parte dei siti per desktop odierni non scende sotto la soglia dei 960 px di larghezza, la scelta ottimale risulta orientata in direzione di una larghezza compresa tra i 1000 e i 1200 pixel.
Colonne. Il layout multicolonna presente in Muse è strutturato per creare una griglia che facilita il lavoro di impaginazione e lo rende molto più preciso.
Larghezza minima: rappresenta il valore oltre il quale le pagine non verranno ridotte, ma ritagliate. 320 px va più che bene considerando le dimensioni degli smartphone attuali.
Altezza minima. Prima di procedere con questa opzione, onde evitare fraintendimenti, bisogna tenere ben presente che questo campo non assegna un’altezza effettiva della pagina, ma una minima, in quanto Muse utilizza pagine dinamiche che si adattano in base al contenuto che viene inserito. Non è possibile quindi settare un’altezza fissa per ogni pagina, perché alcune pagine avranno maggiore o minore contenuto di altre, ma semplicemente impostare una superficie minima di lavoro, per poi eventualmente aumentarla in seguito.
Margini. Opzione presente anche in Adobe inDesign. Nell’ambiente di lavoro di Muse i margini definiscono in modo esclusivo una zona di sicurezza all’interno della quale inserire i contenuti. Personalmente preferisco non utilizzare i margini, ma sfruttare tutta la pagina disponibile, di modo che i contenuti presenti nel nostro sito vadano ad aderire pienamente alla finestra del browser in uso. Ti consiglio dunque di impostare un valore di margine pari a 0.
Spaziatura. Questa opzione consente di lasciare spazio libero nella parte superiore, inferiore, destra e sinistra della pagina. A destra trovi altre due opzioni denominate “Spaziatura sinistra” e “Centra orizzontalmente”: da qui puoi decidere se allineare il sito al centro oppure sinistra, mentre non è prevista, al momento, la possibilità di allineare il sito sulla destra.
Risoluzione. In quest’ultimo campo, hai la possibilità di decidere se utilizzare una risoluzione dello schermo standard oppure in alta definizione HiDPI(2x); opzione particolarmente in voga a seguito del rilascio, da parte di Apple, del celebre Retina Display, divenuto il movente per la genesi di un numero crescente di schermi in alta definizione. Nei display di tipo Retina, la densità dei pixel è raddoppiata quindi, per ottenere una definizione ottimale con un’immagine di 100×100 pixel, bisogna caricarne sul sito una di grandezza doppia (200×200 pixel), con risultato nettamente migliore, ma con un peso specifico dell’immagine raddoppiato.
Un abbraccio, Marco.