Adobe ha recentemente lanciato un progetto chiamato Roma che vuole essere una sorta di piattaforma di pubblicazione di contenuti all-in-one. Puoi utilizzare questa innovativa applicazione per creare siti Web, progetti di stampa, PDF interattivi e altro ancora.
Oggi ti darò un'introduzione di base per principianti a Roma in modo che tu possa vedere cosa è, come usarlo e se è giusto per te.
Roma
Nelle parole di Adobe, Project Rome è "creazione e pubblicazione di contenuti semplici, potenti e all-in-one praticamente per chiunque." Se pensi che questo sia un po 'vago, hai ragione. Ma poi di nuovo, l'intero progetto è un po 'sconcertante. Roma è il futuro di Photoshop? È competizione per Dreamweaver o InDesign?
La risposta è davvero? Nessuna delle precedenti.? Dopo aver giocato un po 'con esso, diventa ovvio che Adobe sta tentando di rivolgersi a un mercato diverso rispetto a Creative Suite. Mentre CS è un insieme incredibilmente costoso di potenti e professionali applicazioni che possono richiedere anni (decenni?) Per apprendere a fondo, Roma è pensata per essere un modo facile per chiunque per creare contenuti ricchi.
Prima di iniziare, ti consigliamo di visitare il sito Web di Roma e scaricare l'applicazione desktop o avviare l'app Web (utilizzerò la versione desktop).
Quanto costa?
Roma è attualmente disponibile in anteprima gratuita. A quanto pare, Adobe non ha ancora deciso la sua strategia di determinazione dei prezzi e vuole vedere come rispondono gli utenti prima di procedere. Puoi scaricare una copia adesso, ma sappi che un giorno probabilmente la disattiverà e ti consentirà di acquistare una licenza una tantum o forse anche una sottoscrizione.
Iniziare
Dopo aver scaricato l'applicazione, accenderla dovrebbe far apparire sul desktop una striscia verticale di pulsanti.
Da qui puoi sfogliare i modelli predefiniti o anche una bella galleria di modelli inviati dagli utenti, ma questi hanno già un sacco in corso, quindi è meglio per scopi di apprendimento iniziare da zero.
Fare clic su? Crea nuovo? pulsante per aprire una galleria piuttosto ampia di possibili dimensioni del documento. Da qui vai a? Vuoto per schermo? e selezionare qualcosa nelle dimensioni del browser? cartella. Ho scelto 960? 550.
Incontra Roma: l'interfaccia
Quando guardi per la prima volta l'interfaccia di Roma, sembra una versione estremamente semplificata di Photoshop. Piuttosto che un mare infinito di tavolozze, c'è solo una coppia. In effetti, potrebbe sembrare che siano troppo pochi. Questo perché Adobe sembra sperimentare alcune nuove idee che ti mostrano solo ciò che devi vedere quando hai bisogno di vederlo, piuttosto che darti l'enchilada tutta in una volta.
L'immagine sopra mostra quanto è nuda lo schermo rispetto a quello a cui siamo abituati in Creative Suite. Daremo un'occhiata più da vicino a ciascuna sezione sottostante mentre ci immergiamo nel nostro semplice progetto.
lenzuola
Il sito che stiamo per costruire avrà diverse pagine. Roma si riferisce a questi come? Fogli? e li visualizza in alto a sinistra con anteprime in miniatura.
La prima cosa che vogliamo fare è creare un? Foglio principale? Questo ci permetterà di impostare alcuni elementi di base che appariranno su ogni pagina. Anziché posizionare gli articoli manualmente su ogni foglio, gli elementi nel foglio principale verranno automaticamente trasferiti agli altri fogli. Questo può essere fonte di confusione all'inizio perché spesso vedrai un elemento su un foglio che non riesci a modificare. Questo perché, sebbene l'elemento possa apparire su quel foglio, è un elemento principale e pertanto richiede di selezionare il foglio principale prima della modifica.
Per creare un foglio master, fai clic su "Mostra fogli principali"? nel? Visualizza? menu. Questo dovrebbe separare il menu dei fogli in due sezioni: Fogli e Fogli principali. Fai clic sul piccolo pulsante più per aggiungere alcuni fogli extra regolari. Accanto alla miniatura di un foglio c'è una piccola icona di Roma, vedrai questi sparsi nell'interfaccia che indicano che c'è un menu nascosto sensibile al contesto qui.
Usa questo piccolo menu a comparsa per nominare i tuoi fogli Home, Informazioni, Portafoglio e Contatti.
Menu di navigazione
Dal momento che stiamo mantenendo questo come una semplice introduzione all'app, possiamo mostrare molte delle funzionalità di base creando un menu di navigazione. Per iniziare, prendi lo strumento testo e disegna una casella. Quindi digitare? Home? e usa il menu mostrato sotto per selezionare un font che ti piace.
Qui vedi davvero quel menu magico in azione. C'è una tonnellata di opzioni di menu qui, ognuna con una serie di sottomenu. Quello che ottieni è un sacco di funzionalità senza tutto il disordine. Ci vuole sicuramente un po 'per abituarsi, e può richiedere molto tempo, ma una volta capito non è poi così male. Mi piacciono molto i piccoli cursori che possono essere utilizzati per regolare varie proprietà come la dimensione del carattere.
Una volta che hai capito la dimensione e il tipo di carattere, vai al link? menu e impostare il collegamento a? Home? foglio.
Ciò cambierà automaticamente l'aspetto del collegamento in blu con una sottolineatura. Dal momento che non vogliamo uno di questi, dovremo risolverlo. Cambiare il colore in nero è abbastanza facile, ma la sottolineatura era più difficile da trovare. Questa opzione si trova sotto? Altre opzioni di carattere? menu mostrato di seguito.
Effetto Hover
Quindi vogliamo cambiare l'aspetto del link quando l'utente ci passa sopra con il cursore. Questo non è esattamente un processo intuitivo e mi ci sono voluti alcuni minuti per capirlo.
Con la casella di testo selezionata, vai su? Impostazioni evento? nel? avanzato? menu e attivare? Eventi standard.?
Ora dovresti avere un? Eventi? opzione nel menu principale. Da qui, vai a? Mouse Enter? e? Set Property.? Quindi, seleziona il tuo oggetto di testo e imposta la proprietà su Opacity. Infine imposta il valore su 50%.
Ciò oscurerà il testo fino al 50% della sua opacità originale quando qualcuno aleggia su di esso.Mi sarebbe piaciuto semplicemente impostare il colore, ma quell'opzione non sembra apparire nel menu degli eventi.
Il problema che ora incontriamo è che il testo cambierà colore in Mouse Enter, ma rimarrà in questo modo in modo permanente. Per risolvere questo, abbiamo bisogno di aggiungere un altro evento su Esci del mouse che riporta l'opacità al 100%. Guarda l'immagine qui sotto per un riferimento.
Duplicazione del collegamento di casa
Ora che abbiamo impostato il nostro primo collegamento nel modo desiderato, copialo e incollalo tre volte per creare i collegamenti Informazioni, Portfolio e Contatto. Ricorda che dovrai selezionare il testo per ciascuno, quindi accedere e modificare i collegamenti per puntare ai fogli appropriati.
Dovrai anche distribuire gli oggetti verticalmente per assicurarti che siano equidistanti. Per fare ciò, seleziona tutte le caselle di testo e vai al menu Allinea.
Anteprima del tuo lavoro
Per vedere se il tuo menu di navigazione funziona correttamente, fai clic sul piccolo pulsante del monitor con un pulsante di riproduzione nella parte superiore dello schermo. Questo dovrebbe darti un'anteprima live del tuo sito in azione.
Passa il mouse sopra i collegamenti per accertarti che funzionino e fai clic in giro per vedere se il foglio sta cambiando.
La tavolozza degli oggetti
Ora che hai alcuni elementi nella pagina, diamo un'occhiata alla palette Oggetti. Questo è equivalente alla palette Livelli che sei abituato a vedere in altre app ed è essenzialmente solo un elenco interattivo di tutti gli elementi nella pagina.
Si noti che è molto più semplice della palette di livelli di Photoshop. Non ci sono mascherature, effetti di livello, ecc.
Finire il foglio principale
Dal momento che ogni buon sito minimalista ha un logo cliche circle, il nostro semplicemente non può rimanere senza uno. Mettersi in sordina uno rapidamente ti darà un'idea dello strumento forma. Si noti che le forme sono completamente ridimensionabili senza alcuna degradazione dell'immagine. Roma è perfetta per lavorare con oggetti vettoriali e raster.
E con questo, abbiamo finito con il nostro foglio principale. Questi elementi appariranno su ogni pagina senza alcuno sforzo aggiuntivo.
Finire il sito ed esportare
Come ho detto prima, la navigazione ci ha permesso di coprire la maggior parte delle funzionalità che volevo mostrare. Impostiamo link, posizioniamo e distribuiamo oggetti e creiamo effetti hover.
Da qui devi giocare da solo e finire le altre pagine. Prova a incollare un'immagine, a lavorare con paragrafi di testo e magari a costruire una griglia. Assicurarsi di selezionare il foglio appropriato prima di aggiungere il contenuto in modo da non continuare ad aggiungere al foglio principale.
Quando hai finito con il sito, hai due opzioni di base per esportarlo. Il primo è come un sito di Roma. Questo carica il tuo sito su un server Adobe ospitato usando il tuo ID Adobe (gratuito per ora). Tuttavia, non puoi fare nulla in questo modo, quindi preferisco esportarlo in un file SWF e selezionare l'opzione per creare un file HTML.
Questo ti darà un sito web dal vivo e funzionante, costruito tutto da solo senza un grammo di codice!
I miei pensieri su Roma
Ora arriva la parte che ti interessa davvero, puoi usare Roma per progetti reali? Per rispondere a questa domanda, esaminiamo i pro e i contro.
Per prima cosa, guardiamo al lato positivo. Roma è un WYSIWYG innovativo che non è affatto perfetto ma si sente abbastanza lucido e potente. La curva di apprendimento è molto più piccola delle app CS e dovrebbe sicuramente interessare chiunque sia intimidito da quella suite. Inoltre, raggiunge l'obiettivo sempre illusorio di consentire ai non sviluppatori di creare effettivamente un sito web funzionante senza una singola riga di codice.
Tuttavia, nonostante questi benefici, non mi vedo mai usare Roma in un contesto professionale per progetti web. Il più grande ostacolo per me è che dipende da Flash. Non ho intenzione di lanciarmi in uno sproloquio flash-bashing, ma questo è semplicemente un uso poco pratico della tecnologia, che tu lo ami o lo odi. Il sito che abbiamo appena creato includeva solo alcuni link e immagini. Non c'è assolutamente alcun motivo per cui i file risultanti dovrebbero essere nient'altro che puro HTML e CSS. Posso capire che Adobe vuole creare il supporto per Flash, ma non pretendere che io possa creare siti Web con questo strumento se non hai nemmeno un'opzione per un output web di base.
Tieni presente che questo articolo ha riguardato solo Roma dal punto di vista del web. Potrebbe comunque essere ottimo per lo sviluppo di materiali di stampa e PDF interattivi. In realtà, è davvero uno strumento davvero fantastico per quest'ultimo.
Conclusione
Per riassumere, se sei completamente estraneo allo sviluppo del web e hai bisogno di costruire un sito veloce da solo senza assumere nessuno o leggere 15 libri, dai un'occhiata a Roma. È abbastanza facile da imparare e da gestire, indipendentemente dal livello di esperienza.
Tuttavia, se sei nel mercato per un WYSIWYG robusto e facile da usare che crea siti Web di livello professionale, consulta il nostro tutorial su Flux 3. Se capisci CSS, Flux è un'applicazione killer e non ho trovato nessun degno rivale.
Lascia un commento qui sotto e facci sapere cosa ne pensi di Project Rome. Cosa ha fatto Adobe in questo esperimento? Cosa hanno sbagliato? Vogliamo sentire da voi!