Hvordan bygge et nettsted med Adobe Project Rome
Adobe lanserte nylig et prosjekt kalt Roma som er ment å være en slags alt-i-ett-innholdsutgivelsesplattform. Du kan bruke denne innovative applikasjonen til å bygge nettsteder, skrive ut prosjekter, interaktive PDF-filer og mer.
I dag skal jeg gi deg en super grunnleggende nybegynner introduksjon til Roma, slik at du kan se hva det er, hvordan du bruker det og om det er riktig for deg eller ikke.
Roma
Med Adobes egne ord er Project Rome “Enkel, kraftig, alt-i-ett-innholdsoppretting og publisering for praktisk talt hvem som helst.” Hvis du synes dette er litt vagt, har du rett. Men igjen, hele prosjektet er litt rart. Er Roma fremtiden til Photoshop? Er det konkurranse om Dreamweaver eller InDesign?
Svaret er egentlig "ingenting av det ovennevnte." Etter å ha lekt litt med det, blir det tydelig at Adobe prøver å målrette et annet marked enn med Creative Suite. Mens CS er et utrolig dyrt sett med kraftige, profesjonelle applikasjoner som kan ta år (tiår?) Å lære grundig, er Roma ment å være en brukervennlig måte for omtrent hvem som helst å lage innholdsrikt innhold.
Før vi kommer i gang, vil du komme innom Roma-nettstedet og enten laste ned skrivebordsapplikasjonen eller starte webappen (jeg bruker skrivebordsversjonen).
Hvor mye koster det?
Roma er for øyeblikket tilgjengelig i en gratis forhåndsvisning. Adobe har tilsynelatende ennå ikke bestemt seg for sin prisstrategi og ønsker å se hvordan brukere reagerer før de fortsetter. Du kan laste ned en kopi nå, men bare vite at en dag vil den deaktivere den og få deg til å kjøpe en engangslisens eller til og med et abonnement.
Starter
Når du har lastet ned applikasjonen, bør du skyte den opp på vertikalbrettet når du skyter den opp.
Herfra kan du bla gjennom standardmalene eller til og med et fint galleri med brukerinnsendte maler, men disse har allerede mye på gang, så det er bedre for læringsformål å starte fra bunnen av.
Klikk på "Opprett ny" -knappen for å åpne et ganske stort galleri med mulige dokumentstørrelser. Herfra går du til "Blank for Screen" og velger noe i "Browser Størrelser" -mappen. Jeg valgte 960 × 550.
Møt Roma: grensesnittet
Når du først ser på Roma-grensesnittet, ser det ut som en ekstremt forenklet versjon av Photoshop. I stedet for et uendelig hav av paletter, er det bare et par. Det kan faktisk virke å være altfor få. Dette fordi Adobe ser ut til å eksperimentere med noen nye ideer som bare viser hva du trenger å se når du trenger å se det, i stedet for å gi deg hele enchiladaen på en gang.
Bildet over viser hvor bar skjermen er sammenlignet med hva vi er vant til i Creative Suite. Vi vil se nærmere på hver seksjon nedenfor når vi dykker inn i vårt enkle prosjekt.
ark
Nettstedet vi skal bygge vil ha flere sider. Roma refererer til disse som “Ark” og viser dem øverst til venstre med forhåndsvisning av miniatyrbilder.
Det første vi ønsker å gjøre er å lage et "Master Sheet." Dette vil tillate oss å sette opp noen få grunnleggende elementer som vises på hver side. I stedet for å plassere elementer manuelt på hvert ark, blir elementene i hovedarket automatisk overført til de andre arkene. Dette kan være forvirrende med det første fordi du ofte ser et element på et ark som du ikke ser ut til å redigere. Dette skyldes at selv om elementet kan vises på det arket, er det et masterelement og krever at du velger masterarket før du redigerer.
For å lage et masterark, klikk på "Show Master Sheets" i "View" -menyen. Dette bør dele arkmenyen din i to seksjoner: Ark og masterark. Klikk på den lille pluss-knappen for å legge inn noen få ekstra vanlige ark. Ved siden av miniatyrbildet av et ark er et lite Roma-ikon. Du vil se disse spredt over hele grensesnittet som indikerer at det er en skjult, kontekstsensitiv meny her.
Bruk denne lille flyout-menyen til å navngi arkene Hjem, Om, Portefølje og Kontakt.
Navigasjonsmeny
Siden vi holder dette som en enkel introduksjon til appen, kan vi vise frem mange av de grunnleggende funksjonene ved å lage en navigasjonsmeny. For å starte, ta tak i tekstverktøyet og tegne en boks. Skriv deretter inn "Hjem" og bruk menyen vist nedenfor for å velge en font du vil.
Her ser du virkelig den menymagien i aksjon. Her er det massevis av menyalternativer, hver med et sett med undermenyer. Det du får er mye funksjonalitet uten all rot. Det tar definitivt litt å bli vant til, og kan være tidkrevende, men når du først har funnet ut av det er det ikke så ille. Jeg liker veldig godt de små skyvekontrollene som kan brukes til å justere forskjellige egenskaper som skriftstørrelse.
Når du har funnet ut størrelsen og skrifttypen, går du ned til "Link" -menyen og setter lenken til "Home" -arket.
Dette vil automatisk endre utseendet til lenken til blått med en understrek. Siden vi ikke vil ha noen av disse, må vi ordne det. Det er enkelt å endre fargen tilbake til svart, men understrekingen var vanskeligere å finne. Dette alternativet finner du under "Flere karakteralternativer" -menyen som vises nedenfor.
Hold musepekeren
Neste vil vi endre utseendet på lenken når brukeren svever over den med markøren. Dette er ikke akkurat en intuitiv prosess, og det tok meg noen minutter å finne ut av det.
Når tekstboksen er valgt, går du til "Eventinnstillinger" i "Advanced" -menyen og aktiverer "Standard Events."
Du bør nå ha et "Hendelser" -alternativ i hovedmenyen. Herfra går du til "Mouse Enter" og "Set Property." Velg deretter tekstobjektet ditt og sett eiendommen til Opacity. Sett endelig verdien til 50%.
Dette vil dempe teksten til 50% av den opprinnelige uklarheten når noen svir over den. Jeg vil gjerne ha angitt farge, men det alternativet ser ikke ut til å vises i hendelsesmenyen.
Problemet som vi nå støter på er at teksten endrer farge på Mouse Enter, men vil forbli på den måten permanent. For å løse dette må vi legge til en annen hendelse på Mouse Exit som setter uklarheten tilbake til 100%. Se bildet under for en referanse.
Duplisering av hjemlenken
Nå som vi har fått vår første kobling satt opp slik vi vil, kopier og lim den inn tre ganger for å opprette koblingen About, Portfolio og Contact. Husk at du må velge teksten for hver, deretter gå inn og endre lenkene for å peke på de aktuelle arkene.
Du vil også fordele objektene vertikalt for å sikre at de er jevnt fordelt. For å gjøre dette, velg alle tekstboksene og gå til Juster-menyen.
Forhåndsvis ditt arbeid
For å se om navigasjonsmenyen din fungerer ordentlig, klikker du på den lille skjermknappen med en avspillingsknapp nær toppen av skjermen. Dette bør gi deg en direkte forhåndsvisning av nettstedet ditt i aksjon.
Hold musepekeren over lenkene for å sikre at de fungerer, og klikk rundt for å se om arket endrer seg.
Objektspaletten
Nå som du har noen få elementer på siden, la oss se på objekter-paletten. Dette tilsvarer Lag-paletten du er vant til å se i andre apper, og er egentlig bare en interaktiv liste over alle elementene på siden.
Merk at den er mye enklere enn lagpaletten til Photoshop. Det er ingen maskering, lageffekter osv.
Etterbehandling av masterarket
Siden hvert godt, minimalistisk nettsted har en klisjé-sirkel-logo, kan vi ganske enkelt ikke forbli uten en. Å spotte en raskt vil gi deg en følelse av formverktøyet. Legg merke til at formene er fullstendig størrelse uten bildedegradering. Roma passer perfekt til å arbeide med både vektor- og rasterobjekter.
Og med det er vi ferdige med Master Sheet. Disse elementene vises på hver side uten ytterligere anstrengelser.
Fullfører opp nettstedet og eksporterer
Som jeg nevnte før, la navigasjonen oss til å dekke de fleste funksjonene som jeg ønsket å vise frem. Vi satte opp lenker, plasserte og distribuerte objekter og opprettet sveveeffekter.
Herfra bør du leke på egen hånd og fullføre de andre sidene. Prøv å lime inn et bilde, jobbe med avsnitt av tekst og kanskje til og med bygge et rutenett. Sørg for å velge det aktuelle arket før du legger til innhold, slik at du ikke fortsetter å legge til i masterarket.
Når du er ferdig med nettstedet, har du to grunnleggende alternativer for å eksportere det. Den første er som en Roma-side. Dette laster opp nettstedet ditt til en Adobe-hostet server ved å bruke din Adobe ID (gratis for nå). Du kan imidlertid ikke gjøre noe med det på denne måten, så jeg foretrekker å eksportere den til en SWF og velger alternativet for å bygge en HTML-fil.
Dette vil gi deg et levende, fungerende nettsted bygget helt selv uten unse kode!
Mine tanker om Roma
Nå kommer den delen du virkelig er interessert i, kan du bruke Roma til faktiske prosjekter? La oss se på fordeler og ulemper for å svare på dette spørsmålet.
La oss først se på den positive siden. Roma er en innovativ WYSIWYG som på ingen måte er perfekt, men føles ganske polert og kraftig. Læringskurven er mye mindre enn CS-appene, og bør absolutt appellere til alle som er skremt av den suiten. Videre oppnår det det stadig illusive målet å la ikke-utviklere faktisk bygge et fungerende nettsted uten en eneste kodelinje.
Til tross for disse fordelene, ser jeg meg ikke noen gang bruke Roma i en profesjonell kontekst for nettprosjekter. Det største hinderet for meg er at det er så uavhengig av Flash. Jeg har ikke tenkt å starte med en Flash-bashing-lønning, men dette er ganske enkelt en upraktisk bruk av teknologien enten du elsker eller hater den. Nettstedet vi nettopp bygde, inneholdt bare noen få lenker og bilder. Det er absolutt ingen grunn til at de resulterende filene skal være annet enn ren HTML og CSS. Jeg kan forstå Adobe som ønsker å bygge inn Flash-støtte, men påstår ikke at jeg kan bygge nettsteder med dette verktøyet hvis du ikke en gang har et alternativ for en grunnleggende webutgang.
Husk at denne artikkelen bare så på Roma fra et websynspunkt. Det kan fremdeles være bra å utvikle utskriftsmateriell og interaktive PDF-filer. Det er faktisk et virkelig fantastisk verktøy for sistnevnte.
Konklusjon
Hvis du er en komplett fremmed for webutvikling og selv trenger å bygge et raskt nettsted uten å ansette noen eller lese 15 bøker, kan du sjekke Roma. Det er ganske enkelt å hente og løpe uansett hvilket nivå du er på.
Imidlertid, hvis du er i markedet for en robust og brukervennlig WYSIWYG som faktisk oppretter nettsteder på profesjonelt nivå, kan du sjekke tutorialen vår om Flux 3. Hvis du forstår CSS, er Flux et mordere-program, og jeg har ikke funnet noen verdig rival.
Legg igjen en kommentar nedenfor og la oss få vite hva du synes om Project Rome. Hva gjorde Adobe riktig i dette eksperimentet? Hva gjorde de galt? Vi vil høre fra deg!
