Kako izgraditi web mjesto s Adobe Project Rome
Nedavno je Adobe pokrenuo projekt nazvan Rim koji bi trebao biti svojevrsna platforma za objavljivanje sadržaja sve u jednom. Ovu inovativnu aplikaciju možete koristiti za izradu web stranica, ispis projekata, interaktivnih PDF-ova i još mnogo toga.
Danas ću vam dati super osnovni uvod u Rim za početnike kako biste vidjeli što je to, kako ga koristiti i je li to za vas ili ne.
Rim
Adobeovim riječima, Project Rome je "Jednostavno, moćno, sveobuhvatno stvaranje sadržaja i objavljivanje za gotovo svakoga." Ako mislite da je ovo malo nejasno, u pravu ste. Ali opet, cijeli projekt je pomalo zagonetan. Je li Rim Photoshopa budućnost? Je li to natjecanje za Dreamweaver ili InDesign?
Odgovor je zaista "ništa od navedenog." Nakon što se s njom malo poigrate, postaje očito da Adobe pokušava ciljati na drugo tržište nego s Creative Suiteom. Iako je CS nevjerojatno skup skupa moćnih, profesionalnih aplikacija koje mogu potrajati godinama (desetljećima?) Za temeljito učenje, Rim je namijenjen korisniku prilagođenom načinu stvaranja bogatog sadržaja za svakoga.
Prije nego što započnemo, poželjet ćete se zaustaviti na web stranici Rim i preuzeti ili aplikaciju za radnu površinu ili pokrenuti web aplikaciju (koristit ću verziju za radnu površinu).
Koliko to kosta?
Rim je trenutno dostupan u besplatnom pregledu. Adobe očito još nije odlučio svoju strategiju cijena i želi vidjeti kako korisnici reagiraju prije nego što nastave. Kopiju možete preuzeti sada, ali samo znate da će je jednog dana ona deaktivirati i natjerati vas da kupite jednokratnu licencu ili možda čak i pretplatu.
Početak rada
Nakon što preuzmete aplikaciju, otvaranje bi se trebalo pojaviti na vertikalnoj traci gumba na radnoj površini.
Odavde možete pregledati zadane predloške ili čak lijepu galeriju predloženih korisničkih predložaka, ali ovi se već uveliko događaju pa je bolje da u svrhu učenja krenete ispočetka.
Kliknite gumb "Stvori novo" da otvorite prilično veliku galeriju mogućih veličina dokumenta. Odavde idite na "Prazno za ekran" i odaberite nešto u mapi "Veličine preglednika". Odabrao sam 960 × 550.
Upoznajte Rim: sučelje
Kad prvi put pogledate sučelje Rima, to izgleda kao krajnje pojednostavljena verzija Photoshopa. Umjesto beskonačnog mora palete, postoji samo par. Zapravo, može se činiti da ih je premalo. To je zato što Adobe izgleda eksperimentira s nekim novim idejama koje vam pokazuju samo ono što trebate vidjeti kad to morate vidjeti, a ne daje vam cijelu enchiladu odjednom.
Slika iznad pokazuje koliko je goli zaslon u usporedbi s onim na što smo navikli u Creative Suite-u. Detaljnije ćemo pogledati svaki odjeljak u nastavku dok zaronimo u naš jednostavni projekt.
Listovi
Web-lokacija koju ćemo izraditi sadržavat će nekoliko stranica. Rim ih naziva "listovima" i prikazuje ih u gornjem lijevom kutu s minijaturnim prikazima.
Prvo što želimo učiniti je stvoriti "glavni list". To će nam omogućiti postavljanje nekoliko osnovnih stavki koje će se pojaviti na svakoj stranici. Umjesto da stavke stavite ručno na svaki list, predmeti u glavnom listu automatski će se prenijeti na vaše druge listove. To u početku može biti zbunjujuće jer često možete vidjeti element na listu koji izgleda ne može uređivati. To je zato što se, iako se stavka može pojaviti na tom listu, nalazi kao glavni element i stoga zahtijeva da prije uređivanja odaberete glavni list.
Da biste stvorili glavni list, kliknite na "Prikaži glavne tablice" u izborniku "View". Ovo bi trebalo razdvojiti izbornik vaših listova u dva odjeljka: listovi i glavni listovi. Kliknite gumb plus i dodajte nekoliko dodatnih običnih listova. Pored sličice lista nalazi se mala Rimska ikona, vidjet ćete ih razbacane po sučelju što ukazuje da je ovdje skriven, kontekstualno osjetljiv izbornik.
Upotrijebite ovaj mali letkovni list kako biste svoje listove imenovali Početna, O nama, Portfelj i Kontakt.
Navigacijski izbornik
Budući da to držimo kao jednostavan uvod u aplikaciju, možemo prikazati mnoge osnovne značajke izradom navigacijskog izbornika. Za početak, zgrabite alat za tekst i nacrtajte okvir. Zatim upišite "Početna" i pomoću izbornika prikazanog u nastavku odaberite font koji vam se sviđa.
Ovdje zaista vidite tu magiju menija na djelu. Ovdje je mnoštvo opcija izbornika, a svaka ima skup podizbornika. Ono što dobivate je puno funkcionalnosti bez svih nereda. Definitivno se treba naviknuti i može potrajati mnogo vremena, ali kad to shvatite, nije tako loše. Doista volim male klizače koji se mogu koristiti za podešavanje različitih svojstava poput veličine fonta.
Nakon što utvrdite veličinu i font, pređite na izbornik "Link" i postavite vezu na listu "Početna".
To će automatski promijeniti izgled veze u plavu s podvlakom. Budući da ne želimo nijednu od ovih, morat ćemo to popraviti. Promjena boje natrag u crnu dovoljno je jednostavno, ali podvlačenje je bilo teže pronaći. Ta se opcija nalazi u nastavku prikazanom izborniku "Više mogućnosti znakova".
Učinak lebdenja
Dalje želimo promijeniti izgled veze kada korisnik mišem prelazi preko kursora. Ovo nije baš intuitivan proces i trebalo mi je nekoliko minuta da shvatim.
Kad je odabran tekstni okvir, idite na "Postavke događaja" u izborniku "Napredno" i aktivirajte "Standardni događaji".
Sada biste trebali imati opciju "Događaji" u glavnom izborniku. Odavde, idite na "Mouse Enter" i "Set Property". Zatim odaberite tekstualni objekt i postavite svojstvo na Opacity. Na kraju postavite vrijednost na 50%.
To će umanjiti tekst na 50% njegove izvorne neprozirnosti kada netko lebdi iznad njega. Htio bih jednostavno postaviti boju, ali čini se da se ta opcija ne pojavljuje u izborniku događanja.
Problem s kojim se sada susrećemo je taj što će tekst na Mouse Enter promijeniti boju, ali tako će trajno ostati. Da bismo to riješili, trebamo dodati još jedan događaj na Mouse Exit koji vraća neprozirnost na 100%. Pogledajte sliku ispod za referencu.
Umnožavanje kućne veze
Sada kada smo postavili našu prvu vezu točno onako kako želimo, kopirajte je i zalijepite tri puta kako bismo stvorili veze About, Portfolio i Contact. Imajte na umu da ćete morati odabrati tekst za svaki, a zatim ući i promijeniti veze kako bi ukazali na odgovarajuće listove.
Također ćete htjeti objekte distribuirati okomito da biste bili sigurni da su ravnomjerno raspoređeni. Da biste to učinili, odaberite sve tekstne okvire i idite na izbornik Poravnaj.
Pregled vašeg rada
Da biste vidjeli je li vaš navigacijski izbornik ispravno funkcionira, kliknite mali gumb monitora s gumbom za reprodukciju blizu vrha zaslona. To će vam omogućiti aktivan pregled vaše web lokacije u akciji.
Zadržite pokazivače miša iznad veze kako biste bili sigurni da rade i kliknite da biste vidjeli mijenja li se list.
Paleta objekata
Sada kada imate nekoliko elemenata na stranici, pogledajmo paletu objekata. To je ekvivalentno paleti Slojeva koje ste navikli vidjeti u drugim aplikacijama i u osnovi je samo interaktivni popis svih elemenata na stranici.
Imajte na umu da je mnogo jednostavnija od palete slojeva Photoshopova. Nema maskiranja, efekata slojeva itd.
Dovršavanje glavnog lista
Budući da svaka dobra minimalistička web lokacija ima logotip kliševa kruga, naše jednostavno ne može ostati bez njega. Brzo podmetanje jedan će vam pružiti osjećaj alata za oblik. Primjetite da su oblici potpuno promjenjivi, bez propadanja slike. Rim je savršeno pogodan za rad s vektorskim i rasterskim objektima.
I s tim smo završili s našim Master Sheetom. Ti će se elementi pojavljivati na svakoj stranici bez ikakvih dodatnih napora.
Dorada web mjesta i izvoz
Kao što sam već spomenuo, navigacija nam je omogućila da pokrijemo većinu značajki koje sam želio pokazati. Postavljali smo veze, pozicionirali i distribuirali objekte i stvorili lebdeće efekte.
Od ovog trenutka trebali biste se igrati sami i dovršiti ostale stranice. Pokušajte zalijepiti sliku, raditi s odlomcima teksta i možda čak izgraditi mrežu. Prije dodavanja sadržaja obavezno odaberite odgovarajući list tako da ga ne dodavate u glavni list.
Kada završite s web-lokacijom, imate dvije osnovne mogućnosti za izvoz. Prva je kao nalazište u Rimu. Time se vaša web lokacija prenosi na poslužitelj s Adobeom pomoću vašeg Adobe ID-a (za sada besplatan). Međutim, s tim načinom ne možete učiniti ništa pa preferiram izvoz u SWF i odabir opcije za izgradnju HTML datoteke.
Ovo će vam pružiti živu, funkcionalnu web stranicu koju ste sagradili sami, bez ikakvog koda!
Moje misli o Rimu
Sad dolazi dio koji vas stvarno zanima, možete li Rim koristiti za stvarne projekte? Da bismo odgovorili na ovo pitanje, pogledajmo prednosti i nedostatke.
Prvo, pogledajmo pozitivnu stranu. Rim je inovativni WYSIWYG koji ni u kom slučaju nije savršen, ali osjeća se prilično uglađeno i moćno. Krivulja učenja mnogo je manja od CS aplikacija i definitivno bi trebala odgovarati svima koji su zastrašeni tim paketom. Nadalje, on postiže uvijek iluzorni cilj omogućavanja ne-programerima da stvarno naprave funkcionalno web mjesto bez ijednog retka koda.
Međutim, usprkos tim blagodatima, ne vidim da sam ikad koristio Rim u profesionalnom kontekstu za web projekte. Najveća prepreka za mene je što toliko ovisi o Flashu. Neću se upuštati u Flash-bashing rant, ali ovo je jednostavno nepraktično korištenje tehnologije, bilo da je volite ili mrzite. Stranica koju smo upravo izgradili sadrži samo nekoliko veza i slika. Nema apsolutno nikakvog razloga da rezultirajuće datoteke trebaju biti išta osim čistog HTML-a i CSS-a. Mogu razumjeti Adobe koji želi graditi u Flash podršci, ali ne tvrdim da mogu stvarati web stranice s ovim alatom ako čak i nemate mogućnost za osnovni web izlaz.
Imajte na umu da je ovaj članak na Rim gledao samo s internetske točke gledišta. Možda je još uvijek sjajan za razvoj materijala za tisak i interaktivnih PDF-ova. Zapravo je zapravo strašan alat za ovo posljednje.
Zaključak
Ukratko, ako ste potpuni stranac u razvoju web stranica i trebate sami izraditi brzo web mjesto bez da zaposlite nikoga ili čitate 15 knjiga, provjerite Rim. Prilično je lako odabrati i pokrenuti bez obzira na razinu vaše stručnosti.
Međutim, ako ste na tržištu za robustan i jednostavan za upotrebu WYSIWYG koji zapravo stvara web stranice profesionalne razine, pogledajte naš vodič o Fluxu 3. Ako razumijete CSS, Flux je ubojita aplikacija i nisam našao dostojnog suparnika.
Ostavite komentar ispod i javite nam što mislite o Projektu Rim. Što je Adobe učinio ispravno u ovom eksperimentu? Što su učinili krivo? Želimo vas čuti!
