Come costruire un sito Web con Adobe Project Rome
Adobe ha recentemente lanciato un progetto chiamato Rome che dovrebbe essere una sorta di piattaforma di pubblicazione di contenuti all-in-one. È possibile utilizzare questa innovativa applicazione per creare siti Web, stampare progetti, PDF interattivi e altro ancora.
Oggi ti darò un'introduzione super basilare per principianti a Roma in modo che tu possa vedere di cosa si tratta, come usarlo e se è giusto per te.
Roma
Secondo le parole di Adobe, Project Rome è "Creazione e pubblicazione di contenuti semplici, potenti e all-in-one praticamente per chiunque". Se pensi che sia un po 'vago, hai ragione. Ma poi di nuovo, l'intero progetto è un po 'sconcertante. Roma è il futuro di Photoshop? È concorrenza per Dreamweaver o InDesign?
La risposta è davvero "nessuna delle precedenti". Dopo averci giocato un po ', diventa ovvio che Adobe sta tentando di indirizzare un mercato diverso rispetto a Creative Suite. Mentre CS è un insieme incredibilmente costoso di applicazioni potenti e professionali che possono richiedere anni (decenni?) Per l'apprendimento approfondito, Roma è pensata per essere un modo facile da usare 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 (userò la versione desktop).
Quanto costa?
Roma è attualmente disponibile in un'anteprima gratuita. Apparentemente Adobe non ha ancora deciso la propria strategia di prezzo e vuole vedere come gli utenti rispondono prima di procedere. Puoi scaricare una copia ora, ma sappi solo che un giorno probabilmente la disattiverà e ti farà acquistare una licenza singola o forse anche un abbonamento.
Iniziare
Una volta scaricata l'applicazione, accendendola dovrebbe 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à molto da fare, quindi è meglio iniziare a scopi di apprendimento da zero.
Fai clic sul pulsante "Crea nuovo" per aprire una galleria piuttosto grande di possibili dimensioni del documento. Da qui vai su "Vuoto per schermo" e seleziona qualcosa nella cartella "Dimensioni del browser". Ho scelto 960 × 550.
Meet Rome: The Interface
Quando guardi per la prima volta l'interfaccia di Roma, sembra una versione estremamente semplificata di Photoshop. Invece di un mare infinito di palette, ce n'è solo una coppia. In effetti, sembra che ci siano troppi pochi. Questo perché Adobe sembra sperimentare alcune nuove idee che mostrano solo ciò che devi vedere quando devi vederlo, piuttosto che darti l'intera enchilada in una volta.
L'immagine sopra mostra quanto sia nudo lo schermo rispetto a quello a cui siamo abituati nella Creative Suite. Daremo un'occhiata più da vicino ad ogni sezione di seguito mentre ci tuffiamo nel nostro semplice progetto.
lenzuola
Il sito che costruiremo 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 consentirà di impostare alcuni elementi di base che verranno visualizzati su ogni pagina. Invece di posizionare manualmente gli articoli su ogni foglio, gli articoli nel foglio principale verranno automaticamente trasferiti sugli altri fogli. All'inizio questo può essere fonte di confusione 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 quindi richiede di selezionare il foglio principale prima di modificarlo.
Per creare un foglio principale, fai clic su "Mostra fogli principali" nel menu "Visualizza". Ciò dovrebbe separare il menu dei fogli in due sezioni: Fogli e Fogli master. Fai clic sul piccolo pulsante più per aggiungere alcuni fogli extra regolari. Accanto alla miniatura di un foglio c'è una piccola icona di Roma, li vedrai sparsi in tutta l'interfaccia per indicare che qui c'è un menu nascosto, sensibile al contesto.
Usa questo piccolo menu a comparsa per nominare i tuoi fogli Home, Informazioni, Portfolio e Contatti.
Menu di navigazione
Dato che lo stiamo mantenendo 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 utilizzare il menu mostrato di seguito per selezionare un carattere che ti piace.
Qui vedi davvero quel menu magico in azione. Ci sono un sacco 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 'di tempo 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 carattere, vai al menu "Link" e imposta il collegamento al foglio "Home".
Ciò cambierà automaticamente l'aspetto del collegamento in blu con una sottolineatura. Dal momento che non vogliamo nessuno di questi, dovremo risolverlo. Cambiare il colore in nero è abbastanza facile ma la sottolineatura era più difficile da trovare. Questa opzione si trova nel menu "Altre opzioni personaggio" mostrato di seguito.
Effetto al passaggio del mouse
Ora vogliamo cambiare l'aspetto del collegamento quando l'utente ci passa sopra con il cursore. Questo non è esattamente un processo intuitivo e mi ci sono voluti alcuni minuti per capire.
Con la casella di testo selezionata, vai su "Impostazioni evento" nel menu "Avanzate" e attiva "Eventi standard".
Ora dovresti avere un'opzione "Eventi" nel menu principale. Da qui, vai su "Invio mouse" e "Imposta proprietà". Quindi, seleziona l'oggetto di testo e imposta la proprietà su Opacità. Infine imposta il valore al 50%.
Questo ridurrà il testo al 50% della sua opacità originale quando qualcuno ci passa sopra. Mi piacerebbe semplicemente impostare il colore, ma questa opzione non sembra apparire nel menu degli eventi.
Il problema che incontriamo ora è che il testo cambierà colore con il tasto Invio del mouse ma rimarrà tale in modo permanente. Per risolvere questo problema, dobbiamo aggiungere un altro evento all'uscita del mouse che ripristini l'opacità al 100%. Vedi l'immagine sotto per un riferimento.
Duplicazione del collegamento principale
Ora che abbiamo impostato il nostro primo collegamento nel modo desiderato, copiarlo e incollarlo tre volte per creare i collegamenti Informazioni, Portfolio e Contatti. Ricorda che dovrai selezionare il testo per ciascuno, quindi andare e modificare i collegamenti per puntare ai fogli appropriati.
Ti consigliamo inoltre di distribuire gli oggetti in verticale per assicurarti che siano distribuiti uniformemente. 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 dal vivo del tuo sito in azione.
Passa il mouse sopra i collegamenti per assicurarti che funzionino e fai clic per vedere se il foglio sta cambiando.
La tavolozza degli oggetti
Ora che hai alcuni elementi nella pagina, diamo un'occhiata alla palette Oggetti. Ciò equivale alla palette Livelli che sei abituato a vedere in altre app ed è essenzialmente solo un elenco interattivo di tutti gli elementi della pagina.
Nota che è molto più semplice della palette dei livelli di Photoshop. Non ci sono mascheramento, effetti di livello, ecc.
Finitura del foglio principale
Dal momento che ogni buon sito minimalista ha un logo circolare, il nostro semplicemente non può rimanere senza uno. Deridere rapidamente uno ti darà un'idea dello strumento forma. Si noti che le forme sono completamente ridimensionabili senza degrado dell'immagine. Rome è perfettamente adatta per lavorare con oggetti sia vettoriali che raster.
E con ciò, abbiamo finito con il nostro foglio principale. Questi elementi appariranno su ogni pagina senza alcuno sforzo aggiuntivo.
Completamento del sito ed esportazione
Come accennato in precedenza, la navigazione ci ha permesso di coprire la maggior parte delle funzionalità che volevo mostrare. Abbiamo creato collegamenti, posizionato e distribuito oggetti e creato effetti hover.
Da qui dovresti giocare da solo e finire le altre pagine. Prova a incollare un'immagine, lavorando con paragrafi di testo e magari anche creando una griglia. Assicurati 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 sito di Roma. Questo carica il tuo sito su un server ospitato Adobe usando il tuo ID Adobe (gratuito per ora). Tuttavia, non puoi farci 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.
Innanzitutto, diamo un'occhiata al lato positivo. Rome è 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 fare appello a 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 vantaggi, non mi vedo mai usare Roma in un contesto professionale per progetti web. Il più grande ostacolo per me è che dipende così tanto da Flash. Non ho intenzione di lanciarmi in un rant di Flash, ma questo è semplicemente un uso impraticabile della tecnologia, che tu lo ami o lo odi. Il sito che abbiamo appena realizzato presentava solo alcuni link e immagini. Non c'è assolutamente alcun motivo per cui i file risultanti dovrebbero essere altro che HTML e CSS puri. Sono in grado di comprendere che Adobe desidera creare il supporto Flash, ma non posso affermare di poter creare siti Web con questo strumento se non hai nemmeno un'opzione per un output Web di base.
Tieni presente che questo articolo ha esaminato Roma solo dal punto di vista del web. Potrebbe essere comunque ottimo per lo sviluppo di materiali di stampa e PDF interattivi. In realtà, è in realtà uno strumento davvero fantastico per quest'ultimo.
Conclusione
Per riassumere, se sei completamente estraneo allo sviluppo web e hai bisogno di creare un sito veloce da solo senza assumere nessuno o leggere 15 libri, dai un'occhiata a Roma. È abbastanza facile da raccogliere ed eseguire indipendentemente dal tuo livello di competenza.
Tuttavia, se sei sul mercato per un WYSIWYG robusto e facile da usare che crea effettivamente siti Web di livello professionale, dai un'occhiata al nostro tutorial su Flux 3. Se capisci i CSS, Flux è un'applicazione killer e non ho trovato nessun degno rivale.
Lascia un commento qui sotto e facci sapere cosa pensi di Project Rome. Che cosa ha fatto Adobe in questo esperimento? Cosa hanno sbagliato? Vogliamo sentire da voi!
