Adobe lanserade nyligen ett projekt som heter Rom, som är tänkt att vara en slags all-in-one-innehållsplattform. Du kan använda denna innovativa applikation för att bygga webbplatser, skriva ut projekt, interaktiva PDF-filer och mer.
Idag ger jag dig en super grundläggande nybörjare introduktion till Rom så att du kan se vad det är, hur man använder det och huruvida det är rätt för dig.
rom
I Adobes egna ord är Project Rome ett enkelt, kraftfullt, allt-i-ett-innehåll skapande och publicering för nästan alla.? Om du tycker att det här är lite vagt, har du rätt. Men då är hela projektet lite lurande. Är Rom framtiden för Photoshop? Är det konkurrens om Dreamweaver eller InDesign?
Svaret är verkligen? Inget av ovanstående.? Efter att ha spelat lite med det blir det uppenbart att Adobe försöker rikta sig till en annan marknad än med Creative Suite. Medan CS är en otroligt dyr uppsättning kraftfulla, professionella applikationer som kan ta år (årtionden?) För att lära sig noggrant, är Rom menat att det är ett användarvänligt sätt för nästan alla att skapa rikt innehåll.
Innan vi börjar, vill du sluta på Rom-webbplatsen och antingen ladda ner skrivbordsapplikationen eller starta webben (jag använder skrivbordsversionen).
Hur mycket kostar det?
Rom är för närvarande tillgängligt i en gratis förhandsgranskning. Adobe har uppenbarligen ännu inte bestämt sin prissättningsstrategi och vill se hur användarna svarar innan de fortsätter. Du kan ladda ner en kopia nu men bara vet att en dag det sannolikt kommer att inaktivera det och gör att du antingen köper en engångslicens eller kanske till och med en prenumeration.
Komma igång
När du har laddat ner programmet ska det skjutas upp en vertikal remsa av knappar på skrivbordet.
Härifrån kan du bläddra i standardmallarna eller till och med ett fint galleri med användarvänliga mallar, men de har redan mycket på gång så det är bättre för lärande att börja från början.
Klicka på? Skapa ny? knappen för att öppna ett ganska stort galleri med möjliga dokumentstorlekar. Härifrån går du till? Blank for Screen? och välj något i webbläsarens storlek? mapp. Jag valde 960? 550.
Möt Rom: Gränssnittet
När du först tittar på Rom-gränssnittet, ser det ut som en extremt förenklad version av Photoshop. Snarare än ett oändligt hav av paletter finns det bara ett par. Faktum är att det kan tyckas vara alltför få. Detta beror på att Adobe verkar experimentera med några nya idéer som bara visar dig vad du behöver se när du behöver se det, snarare än att ge dig hela enchiladan på en gång.
Bilden ovan visar hur mycket skärmen jämförs med vad vi är vana vid i Creative Suite. Vi tar en närmare titt på varje avsnitt nedan när vi dyker in i vårt enkla projekt.
ark
Den sida som vi ska bygga kommer att ha flera sidor. Rom hänvisar till dessa som ark? och visar dem längst upp till vänster med förhandsgranskningar av miniatyrbilder.
Det första vi vill göra är att skapa ett? Master Sheet.? Detta gör det möjligt för oss att ställa upp några grundläggande objekt som kommer att visas på varje sida. I stället för att placera objekt manuellt på varje ark, kommer objekt i huvudbladet automatiskt att överföras till dina andra ark. Detta kan vara förvirrande först eftersom du ofta ser ett element på ett ark som du inte kan verka för att redigera. Detta beror på att, trots att objektet kan visas på det aktuella arket, det är ett huvudelement och kräver därför att du väljer huvudbladet före redigering.
För att skapa ett huvudblad, klicka på? Visa huvudblad? i "View"? meny. Det här ska skilda din lakmeny i två sektioner: ark och mallar. Klicka på den lilla plusknappen för att lägga till några extra vanliga blad. Bredvid miniatyrbilden på ett ark är en liten Rom-ikon, så ser du dessa spridda över gränssnittet vilket indikerar att det finns en dold, kontextkänslig meny här.
Använd den här lilla flyttmenyn för att namnge dina ark Hem, Om, Portfölj och Kontakt.
Navigeringsmeny
Eftersom vi håller detta som en enkel introduktion till appen kan vi visa upp många av de grundläggande funktionerna genom att bygga en navigeringsmeny. För att börja, ta tag i textverktyget och rita en låda. Skriv sedan? Hem? och använd menyn som visas nedan för att välja ett typsnitt som du vill ha.
Här ser du verkligen den menymeniken i aktion. Det finns massor av menyalternativ här, var och en med en uppsättning undermenyer. Vad du får är en hel del funktionalitet utan all röran. Det tar definitivt lite att vänja sig och kan vara tidskrävande, men när du förstår det är det inte så illa. Jag gillar verkligen de små reglagen som kan användas för att justera olika egenskaper som typsnittstorlek.
När du har fått storleken och teckensnittet, gå ner till "Link"? menyn och sätt länken till? Hem? ark.
Detta ändrar automatiskt länkens utseende till blått med en understruk. Eftersom vi inte vill ha något av dessa måste vi fixa det. Att ändra färgen tillbaka till svart är lätt nog men underlaget var svårare att hitta. Det här alternativet finns under? Mer teckenalternativ? menyn visas nedan.
Hover Effect
Nästa vill vi ändra länkens utseende när användaren svävar över den med markören. Detta är inte exakt en intuitiv process och tog mig några minuter att räkna ut.
Med din textrutan vald, gå till? Händelsesinställningar? i "Advanced"? meny och aktivera? Standardhändelser.?
Du borde nu ha en? Händelser? alternativet i huvudmenyn. Härifrån, gå till? Mus Enter? och? Ange egendom.? Välj sedan ditt textobjekt och ställ egenskapen till Opacity. Slutligen sätta värdet till 50%.
Detta dämpar texten till 50% av sin ursprungliga opacitet när någon svänger över den.Jag skulle bara vilja ha satt färgen, men det här alternativet verkar inte förekomma i evenemangsmenyn.
Det problem som vi nu stöter på är att texten kommer att ändra färg på Mouse Enter, men kommer att vara så permanent. För att lösa detta måste vi lägga till en annan händelse på Mouse Exit som sätter opacitet tillbaka till 100%. Se bilden nedan för en referens.
Duplicera hemlänken
Nu när vi har vår första länk upprättad precis som vi vill, kopiera och klistra in den tre gånger för att skapa Om, Portfölj och Kontaktlänkar. Kom ihåg att du måste välja texten för var och en, gå in och ändra länkarna för att peka på lämpliga ark.
Du vill också distribuera objekten vertikalt för att se till att de är jämnt fördelade. För att göra detta, välj alla textrutorna och gå till menyn Justera.
Förhandsgranska ditt arbete
För att se om din navigationsmeny fungerar som den ska klickar du på den lilla bildskärmsknappen med en uppspelningsknapp nära toppen av skärmen. Detta borde ge dig en levande förhandsvisning av din webbplats i aktion.
Håll över länkarna för att se till att de fungerar och klicka för att se om arket ändras.
Objektpaletten
Nu när du har några element på sidan, låt oss ta en titt på paletten Objekt. Detta motsvarar paletten Lager du brukar se i andra appar och är i grund och botten bara en interaktiv lista över alla element på sidan.
Observera att det är mycket enklare än paletten för Photoshop-lagret. Det finns ingen maskering, lagereffekter etc.
Avsluta huvudbladet
Eftersom varje bra minimalistiska webbplats har en klichécirkellogo, kan vår helt enkelt inte förbli utan en. Mocking up one snabbt kommer att ge dig en känsla för formverktyget. Observera att formerna är helt resizable utan bildnedbrytning. Rom är perfekt för att arbeta med både vektor och rasterobjekt.
Och med det är vi färdiga med vårt huvudblad. Dessa element kommer att visas på varje sida utan ytterligare ansträngningar.
Avsluta webbplatsen och exportera
Som jag nämnde tidigare möjliggjorde navigationen att vi skulle täcka de flesta funktioner som jag ville visa upp. Vi satte upp länkar, placerade och distribuerade objekt och skapade svängareffekter.
Härifrån bör du leka på egen hand och avsluta de andra sidorna. Försök att klistra in en bild, arbeta med textstycken och kanske till och med bygga ett galler. Var noga med att välja lämpligt ark innan du lägger till innehåll så att du inte fortsätter lägga till m arket.
När du är klar med webbplatsen har du två grundläggande alternativ för att exportera den. Den första är som en Rom-plats. Detta laddar upp din webbplats till en Adobe-värdig server med ditt Adobe ID (gratis för nu). Du kan dock inte göra något med det här sättet, så jag föredrar att exportera det till en SWF och välja alternativet att bygga en HTML-fil.
Detta kommer att ge dig en levande och fungerande hemsida som är byggd allt själv utan en ounce kod!
Mina tankar på Rom
Nu kommer den del som du verkligen är intresserad av, kan du använda Rom för faktiska projekt? För att kunna svara på den här frågan, låt oss titta på fördelarna och nackdelarna.
Låt oss först titta på den positiva sidan. Rom är en innovativ WYSIWYG som inte är perfekt, men känns ganska polerad och kraftfull. Inlärningskurvan är mycket mindre än CS-appar och borde definitivt vädja till någon som hotas av den sviten. Vidare uppnås det någonsin illusiva målet att låta icke-utvecklare faktiskt bygga en fungerande webbplats utan en enda kodrad.
Men trots dessa fördelar ser jag mig inte själv att använda Rom i ett professionellt sammanhang för webbprojekt. Den största hindren för mig är att det är så dangt beroende av Flash. Jag kommer inte att lansera i en Flash-bashing rant, men det här är helt enkelt en opraktisk användning av tekniken om du älskar eller hatar det. Den webbplats som vi just byggt presenterade bara några länkar och bilder. Det finns absolut ingen anledning att de resulterande filerna ska vara allt annat än ren HTML och CSS. Jag kan förstå Adobe som vill bygga in Flash-stöd, men hävdar inte att jag kan bygga webbplatser med det här verktyget om du inte ens har möjlighet till en grundläggande webbutmatning.
Tänk på att den här artikeln bara tittade på Rom från en webbsynvinkel. Det kan fortfarande vara bra att utveckla utskriftsmaterial och interaktiva PDF-filer. Det är faktiskt ett riktigt bra verktyg för den senare.
Slutsats
Sammanfattningsvis, om du är en komplett främling för webbutveckling och behöver bygga en snabb webbplats själv utan att anställa någon eller läsa 15 böcker, kolla in Rom. Det är ganska lätt att hämta och springa oavsett vilken nivå du har.
Om du är på marknaden för en robust och användarvänlig WYSIWYG som faktiskt skapar webbplatser på professionell nivå, kolla in vår handledning om Flux 3. Om du förstår CSS är Flux en mördareansökan och jag har inte hittat någon värdig rival.
Lämna en kommentar nedan och låt oss veta vad du tycker om Project Rome. Vad gjorde Adobe rätt i detta experiment? Vad gjorde de fel? Vi vill höra från dig!