Kā izveidot vietni, izmantojot Adobe Project Rome
Adobe nesen uzsāka projektu ar nosaukumu Roma, kas ir domāts par sava veida visaptveroša satura publicēšanas platformu. Varat izmantot šo novatorisko lietojumprogrammu, lai izveidotu vietnes, drukātu projektus, interaktīvus PDF failus un daudz ko citu.
Šodien es jums sniegšu super pamata iesācēja iepazīstināšanu ar Romu, lai jūs varētu redzēt, kas tas ir, kā to izmantot un vai tas jums ir piemērots.
Roma
Pēc paša Adobe vārdiem, Project Rome ir “vienkāršs, jaudīgs, visaptveroša satura radīšana un publicēšana praktiski ikvienam”. Ja domājat, ka tas ir nedaudz neskaidrs, jums taisnība. Bet tad atkal viss projekts ir nedaudz mīklains. Vai Roma ir Photoshop nākotne? Vai tā ir Dreamweaver vai InDesign konkurence?
Atbilde tiešām ir “neviens no iepriekšminētajiem”. Pēc nelielas spēles ar to kļūst acīmredzams, ka Adobe mēģina mērķēt uz citu tirgu, nevis ar Creative Suite. Lai gan CS ir neticami dārgs, jaudīgu, profesionālu lietojumprogrammu komplekts, kura pilnīga apgūšana var aizņemt gadus (gadu desmitus?), Roma ir domāta kā lietotājam draudzīgs veids, kā ikvienam izveidot bagātīgu saturu.
Pirms darba sākšanas jūs vēlēsities apstāties pie Romas vietnes un vai nu lejupielādēt darbvirsmas lietojumprogrammu, vai arī palaist tīmekļa lietotni (es izmantošu darbvirsmas versiju).
Cik tas maksā?
Roma šobrīd ir pieejama bezmaksas priekšskatījumā. Acīmredzot Adobe vēl nav izlēmis par cenu noteikšanas stratēģiju un vēlas uzzināt, kā lietotāji reaģē pirms turpināt. Jūs varat lejupielādēt kopiju tūlīt, bet tikai zināt, ka kādu dienu tā, iespējams, to deaktivizēs un liks jums iegādāties vienreizēju licenci vai, iespējams, pat abonementu.
Darba sākšana
Kad esat lejupielādējis lietojumprogrammu, palaižot to, uz darbvirsmas vajadzētu parādīties vertikāla pogu poga.
Šeit jūs varat pārlūkot noklusējuma veidnes vai pat jauku galeriju ar lietotāju iesniegtām veidnēm, taču tās jau notiek daudz, tāpēc mācību nolūkos ir labāk sākt no nulles.
Noklikšķiniet uz pogas “Izveidot jaunu”, lai atvērtu diezgan lielu iespējamo dokumentu izmēru galeriju. Šeit dodieties uz “Blank for Screen” un mapē “Browser Sizes” atlasiet kaut ko. Es izvēlējos 960 × 550.
Iepazīstieties ar Romu: interfeiss
Pirmoreiz apskatot Romas saskarni, tā izskatās kā ārkārtīgi vienkāršota Photoshop versija. Nevis nebeidzamu palešu jūru, bet arī tikai pāris. Patiesībā varētu šķist, ka to ir par maz. Tas notiek tāpēc, ka Adobe, šķiet, eksperimentē ar dažām jaunām idejām, kas parāda tikai to, kas jums jāredz, kad jums tas jāredz, nevis sniedz jums visu enchilada vienlaikus.
Iepriekš redzamajā attēlā redzams, cik tukšs ir ekrāns salīdzinājumā ar to, ko esam pieraduši Creative Suite. Mēs tuvāk apskatīsim katru zemāk esošo sadaļu, padziļinoties mūsu vienkāršajā projektā.
Loksnes
Vietnei, kuru mēs veidosim, būs vairākas lapas. Roma tos apzīmē kā “lapas” un parāda tos augšējā kreisajā stūrī ar sīktēlu priekšskatījumiem.
Pirmais, ko mēs vēlamies darīt, ir izveidot “galveno lapu”. Tas mums ļaus iestatīt dažus pamata elementus, kas parādīsies katrā lapā. Tā vietā, lai priekšmetus manuāli novietotu uz katras lapas, pamatlapas priekšmeti tiks automātiski pārnesti uz citām jūsu loksnēm. Sākumā tas var mulsināt, jo lapā bieži redzēsit elementu, kuru nevarat rediģēt. Tas ir tāpēc, ka, lai arī vienums var parādīties šajā lapā, tas ir galvenais elements, un tāpēc pirms rediģēšanas jums jāizvēlas galvenā lapa.
Lai izveidotu pamatlapu, izvēlnē “Skats” noklikšķiniet uz “Rādīt pamatlapas”. Jums vajadzētu sadalīt jūsu lapu izvēlni divās sadaļās: Sheets un Master Sheets. Noklikšķiniet uz pogas mazais plus, lai pievienotu dažas papildu parastās lapas. Blakus lapas sīktēlam ir maza Romas ikona, jūs redzēsit tās izkaisītas pa visu interfeisu, norādot, ka šeit ir slēpta, konteksta ziņā izvēlne.
Izmantojiet šo mazo izlecošo izvēlni, lai nosauktu savas lapas Sākums, Par, Portfolio un Kontaktpersona.
Navigācijas izvēlne
Tā kā mēs to uzskatām par vienkāršu lietotnes ievadu, mēs varam parādīt daudzas pamatfunkcijas, izveidojot navigācijas izvēlni. Lai sāktu, satveriet teksta rīku un uzzīmējiet lodziņu. Pēc tam ierakstiet “Sākums” un izmantojiet zemāk parādīto izvēlni, lai izvēlētos fontu, kas jums patīk.
Šeit jūs patiešām redzat šo izvēlnes maģiju darbībā. Šeit ir ļoti daudz izvēlņu opciju, katrai no tām ir apakšizvēlnes. Tas, ko jūs saņemat, ir daudz funkcionalitātes, bez visa jucekļa. Tas noteikti prasa zināmu pierašanu un var būt laikietilpīgs, bet, kad jūs to izdomājat, tas nav tik slikti. Man ļoti patīk mazie slīdņi, kurus var izmantot, lai pielāgotu dažādas īpašības, piemēram, fonta lielumu.
Kad esat izdomājis izmēru un fontu, dodieties uz izvēlni “Link” un iestatiet saiti uz “Home” lapu.
Tas automātiski mainīs saites izskatu uz zilu ar pasvītrojumu. Tā kā mēs nevēlamies nevienu no šiem, mums tas būs jālabo. Krāsu mainīt uz melnu ir pietiekami viegli, bet pasvītrojumu bija grūtāk atrast. Šī opcija ir atrodama zemāk parādītajā izvēlnē “Vairāk rakstzīmju opciju”.
Hover efekts
Tālāk mēs vēlamies mainīt saites izskatu, kad lietotājs virzās ar to virs kursora. Tas nav īsti intuitīvs process, un man vajadzēja dažas minūtes, lai izdomātu.
Kad teksta lodziņš ir atlasīts, izvēlnē “Advanced” dodieties uz “Event Settings” un aktivizējiet “Standard Events”.
Tagad galvenajā izvēlnē vajadzētu būt opcijai “Notikumi”. Tālāk dodieties uz “Peles ievadīšana” un “Iestatīt īpašumu”. Pēc tam atlasiet savu teksta objektu un iestatiet rekvizītu uz Necaurredzamību. Visbeidzot iestatiet vērtību uz 50%.
Tādējādi teksts tiks aptumšots līdz 50% no tā sākotnējā necaurredzamības, kad kāds virzīs virs tā. Es gribētu, lai krāsu būtu vienkārši iestatīts, taču šķiet, ka šī opcija netiek parādīta notikumu izvēlnē.
Problēma, ar kuru mēs tagad sastopamies, ir tā, ka peles ievadīšanas laikā mainās teksts, bet tas paliek nemainīgs. Lai to atrisinātu, Mouse Exit ir jāpievieno vēl viens notikums, kas necaurredzamību atkal nosaka 100%. Skatiet attēlu zemāk.
Sākuma saites kopēšana
Tagad, kad esam ieguvuši savu pirmo saiti, kas izveidota tieši tā, kā vēlamies, trīs reizes nokopējiet un ielīmējiet, lai izveidotu saites Par, Portfolio un Kontaktpersonas. Atcerieties, ka jums katram būs jāizvēlas teksts, pēc tam dodieties un nomainiet saites, lai norādītu uz atbilstošajām lapām.
Jūs arī vēlēsities objektus izvietot vertikāli, lai pārliecinātos, ka tie atrodas vienmērīgi. Lai to izdarītu, atlasiet visus tekstlodziņus un dodieties uz izvēlni Align.
Jūsu darba priekšskatīšana
Lai redzētu, vai navigācijas izvēlne darbojas pareizi, noklikšķiniet uz mazā monitora pogas ar atskaņošanas pogu netālu no ekrāna augšdaļas. Tam vajadzētu dot jums aktīvu vietnes priekšskatījumu darbībā.
Virziet kursoru virs saitēm, lai pārliecinātos, ka tie darbojas, un noklikšķiniet apkārt, lai redzētu, vai lapa mainās.
Objektu palete
Tagad, kad lapā ir daži elementi, apskatīsim Objektu paleti. Tas ir līdzvērtīgs slāņu paletei, kuru esat pieradis redzēt citās lietotnēs, un būtībā tas ir tikai interaktīvs visu lapas elementu saraksts.
Ņemiet vērā, ka tas ir daudz vienkāršāks nekā Photoshop slāņu palete. Nav maskēšanas, slāņu efektu utt.
Pabeigt pamatlapu
Tā kā katrai labai minimālisma vietnei ir klišejas loka logotips, mūsu vienkārši nevar palikt bez tā. Ātri iemērcot to, jūs sajutīsit formas instrumentu. Ievērojiet, ka formas ir pilnībā maināmas, un attēls netiek pasliktināts. Roma ir lieliski piemērota darbam gan ar vektoru, gan ar rastra objektiem.
Un ar to mēs esam pabeiguši mūsu galveno lapu. Šie elementi parādīsies katrā lapā bez papildu piepūles.
Vietnes pabeigšana un eksportēšana
Kā jau minēju iepriekš, navigācija ļāva mums aptvert lielāko daļu funkciju, kuras es vēlējos parādīt. Mēs izveidojām saites, izvietojām un sadalījām objektus un izveidojām kursora efektus.
No šejienes jums pašiem jāspēlē un jāpabeidz pārējās lapas. Mēģiniet ielīmēt attēlu, strādāt ar teksta rindkopām un varbūt pat izveidot režģi. Pirms satura pievienošanas noteikti atlasiet atbilstošo lapu, lai turpinātu pievienošanu galvenajai lapai.
Kad esat pabeidzis vietnes izveidi, jums ir divas pamata iespējas tās eksportēšanai. Pirmais ir kā Romas vietne. Tādējādi jūsu vietne tiek augšupielādēta Adobe mitinātā serverī, izmantojot jūsu Adobe ID (pagaidām bez maksas). Tomēr jūs neko nevarat ar to izdarīt šādā veidā, tāpēc es labprātāk to eksportēju uz SWF un atlasu opciju HTML faila izveidei.
Tas jums nodrošinās dzīvu, funkcionējošu vietni, ko izveidojis pats, bez koda unces!
Manas domas par Romu
Tagad nāk tā daļa, kas jūs patiešām interesē, vai jūs varat izmantot Romu faktiskiem projektiem? Lai atbildētu uz šo jautājumu, apskatīsim plusus un mīnusus.
Vispirms apskatīsim pozitīvo pusi. Roma ir inovatīva WYSIWYG, kas nekādā ziņā nav perfekta, bet jūtas diezgan noslīpēta un spēcīga. Mācīšanās līkne ir daudz mazāka nekā CS lietotnes, un tai noteikti vajadzētu patikt ikvienam, kuru iebiedē šis komplekts. Turklāt tas sasniedz arvien iluziozo mērķi - ļaut izstrādātājiem faktiski izveidot funkcionējošu vietni bez vienas koda līnijas.
Tomēr, neraugoties uz šīm priekšrocībām, es neredzu sevi kādreiz izmantojam Romu profesionālā kontekstā tīmekļa projektiem. Lielākais šķērslis man ir tas, ka tas ir tik dang atkarīgs no Flash. Es nedomāšu uzsākt zibspuldzes atskaņošanu, bet tas vienkārši ir nepraktiski izmantot tehnoloģiju, neatkarīgi no tā, vai jūs to mīlat vai ienīstat. Tikko mūsu izveidotajā vietnē bija tikai dažas saites un attēli. Nav absolūti nekāda iemesla, lai iegūtajiem failiem būtu jābūt tikai tīram HTML un CSS. Es saprotu Adobe, kas vēlas izmantot Flash atbalstu, bet neapgalvo, ka varu izveidot vietnes ar šo rīku, ja jums pat nav pamata tīmekļa izvades iespējas.
Paturiet prātā, ka šajā rakstā Roma tika apskatīta tikai no tīmekļa viedokļa. Tas joprojām varētu būt lieliski, lai izstrādātu drukas materiālus un interaktīvos PDF failus. Faktiski tas ir patiešām satriecošs pēdējās rīks.
Secinājums
Rezumējot, ja esat pilnīgi svešs tīmekļa izstrādei un jums pats jāveido ātra vietne, nevienu nenoalgojot un neizlasot 15 grāmatas, apskatiet Romu. To ir diezgan viegli uzņemt un vadīt neatkarīgi no jūsu kompetences līmeņa.
Tomēr, ja jūs meklējat izturīgas un lietotājam draudzīgas WYSIWYG, kas faktiski rada profesionālā līmeņa vietnes, tirgu, pārbaudiet mūsu apmācību par Flux 3. Ja saprotat CSS, Flux ir slepkavas lietojumprogramma, un es neesmu atradis cienīgu sāncensi.
Atstājiet komentāru zemāk un dariet mums zināmu, ko jūs domājat par Project Rome. Ko Adobe šajā eksperimentā izdarīja pareizi? Ko viņi izdarīja nepareizi? Mēs vēlamies dzirdēt no jums!
