Adobe Project Rome ile Web Sitesi Nasıl Yapılır
Adobe kısa süre önce bir tür hepsi bir arada içerik yayınlama platformu olan Roma adlı bir proje başlattı. Bu yenilikçi uygulamayı web siteleri, baskı projeleri, etkileşimli PDF'ler ve daha fazlasını oluşturmak için kullanabilirsiniz.
Bugün size ne yapacağınızı, nasıl kullanılacağını ve sizin için doğru olup olmadığını görebilmeniz için size süper basit bir başlangıç yapan Roma'ya giriş yapacağım.
Roma
Adobe'nin kendi deyimiyle Project Rome, “Herkes için basit, güçlü, hepsi bir arada içerik oluşturma ve yayınlama” dır. Bunun biraz belirsiz olduğunu düşünüyorsanız, haklısınız. Ama sonra tekrar, tüm proje biraz kafa karıştırıcı. Roma Photoshop'un geleceği mi? Dreamweaver veya InDesign için rekabet mi?
Cevap gerçekten “yukarıdakilerin hiçbiri” değil. Onunla biraz oynadıktan sonra, Adobe'nin Creative Suite'ten farklı bir pazarı hedeflemeye çalıştığı açıktır. CS, ayrıntılı bir şekilde öğrenmesi yıllar (on yıllar?) Alabilen inanılmaz derecede pahalı bir dizi güçlü, profesyonel uygulama olsa da, Roma'nın hemen hemen herkesin zengin içerik oluşturması için kullanıcı dostu bir yol olması amaçlanmaktadır.
Başlamadan önce, Roma web sitesine uğramayı ve masaüstü uygulamasını indirmeyi veya web uygulamasını başlatmayı isteyeceksiniz (masaüstü sürümünü kullanacağım).
Fiyatı ne kadar?
Rome şu anda ücretsiz bir önizlemede mevcuttur. Adobe görünüşe göre fiyatlandırma stratejilerine henüz karar vermedi ve kullanıcıların devam etmeden önce nasıl tepki verdiğini görmek istiyor. Şimdi bir kopyasını indirebilirsiniz, ancak bir gün onu devre dışı bırakacağını ve bir kerelik bir lisans veya belki de bir abonelik satın almanızı sağlayacağını bilin.
Başlangıç
Uygulamayı indirdikten sonra, tetiklediğinizde masaüstünüzde dikey bir düğme şeridi görünmelidir.
Buradan varsayılan şablonlara veya hatta kullanıcı tarafından gönderilen şablonlardan oluşan güzel bir galeriye göz atabilirsiniz, ancak bunlar zaten çok şey var, bu nedenle öğrenme amaçlarının sıfırdan başlaması daha iyi.
Olası belge boyutlarından oluşan oldukça büyük bir galeri açmak için “Yeni Oluştur” düğmesini tıklayın. Buradan “Ekran için Boşluk” a gidin ve “Tarayıcı Boyutları” klasöründen bir şey seçin. 960 × 550'yi seçtim.
Roma ile tanışın: Arayüz
Roma arayüzüne ilk baktığınızda, Photoshop'un son derece basitleştirilmiş bir versiyonuna benziyor. Sonsuz bir palet denizinden ziyade, sadece bir çift var. Aslında, çok az olabilir. Bunun nedeni, Adobe'nin size tüm enchilada'yı bir kerede vermek yerine, yalnızca görmeniz gerektiğinde ne görmeniz gerektiğini gösteren bazı yeni fikirleri deniyor olması gibi görünüyor.
Yukarıdaki resim, ekranın Creative Suite'te alışkın olduğumuz şeyle ne kadar çıplak olduğunu gösteriyor. Basit projemize daldıkça aşağıdaki her bölüme daha yakından bakacağız.
Çarşaflar
İnşa edeceğimiz sitenin birkaç sayfası olacak. Roma bunlara “E-Tablolar” denir ve sol üst köşede küçük resim önizlemeleriyle görüntüler.
Yapmak istediğimiz ilk şey bir “Ana Sayfa” oluşturmak. Bu, her sayfada görünecek birkaç temel öğe ayarlamamıza izin verecektir. Öğeleri her sayfaya manuel olarak yerleştirmek yerine, ana sayfadaki öğeler otomatik olarak diğer sayfalarınıza taşınır. Bu başlangıçta kafa karıştırıcı olabilir, çünkü bir sayfada genellikle düzenleyemeyeceğiniz bir öğe görürsünüz. Bunun nedeni, öğe bu sayfada görünebilse de, bu bir ana öğedir ve bu nedenle düzenlemeden önce ana sayfayı seçmenizi gerektirir.
Bir ana sayfa oluşturmak için, “Görünüm” menüsünde “Ana Sayfaları Göster” seçeneğine tıklayın. Bu, sayfa menünüzü iki bölüme ayırmalıdır: Sayfalar ve Ana Sayfalar. Birkaç ekstra normal sayfa eklemek için küçük artı düğmesini tıklayın. Bir sayfanın küçük resminin yanında küçük bir Roma simgesi var, bunların arayüz boyunca dağıtılmış olduğunu görüyorsunuz, burada gizli, bağlama duyarlı bir menü var.
Sayfalarınıza Ev, Hakkında, Portföy ve İletişim adını vermek için bu küçük açılır menüyü kullanın.
Gezinme Menüsü
Bunu uygulamaya basit bir giriş olarak tuttuğumuz için, bir gezinme menüsü oluşturarak temel özelliklerin çoğunu gösterebiliriz. Başlamak için metin aracını alın ve bir kutu çizin. Ardından, “Home” yazın ve istediğiniz yazı tipini seçmek için aşağıdaki menüyü kullanın.
Burada gerçekten o menü büyüsünü görüyorsunuz. Burada her biri bir dizi alt menüye sahip bir ton menü seçeneği var. Elde ettiğiniz şey, tüm karmaşa olmadan çok fazla işlevselliktir. Kesinlikle alışmak biraz zaman alır ve zaman alıcı olabilir, ama bir kez anladıktan sonra o kadar da kötü değil. Yazı tipi boyutu gibi çeşitli özellikleri ayarlamak için kullanılabilecek küçük kaydırıcıları gerçekten çok seviyorum.
Boyutu ve yazı tipini öğrendikten sonra, "Bağlantı" menüsüne gidin ve bağlantıyı "Ana Sayfa" sayfasına ayarlayın.
Bu, bağlantının görünümünü otomatik olarak alt çizgiyle mavi olarak değiştirir. Bunlardan hiçbirini istemediğimiz için, düzeltmemiz gerekecek. Rengi siyaha geri döndürmek yeterince kolaydır, ancak alt çizgiyi bulmak daha zordu. Bu seçenek, aşağıda gösterilen “Diğer Karakter Seçenekleri” menüsünde bulunur.
Fareyle Üzerine Gelme Etkisi
Daha sonra, kullanıcı imleçle üzerine geldiğinde bağlantının görünümünü değiştirmek istiyoruz. Bu tam olarak sezgisel bir süreç değil ve çözmem birkaç dakika sürdü.
Metin kutunuz seçiliyken, "Gelişmiş" menüsündeki "Etkinlik Ayarları" na gidin ve "Standart Etkinlikler" i etkinleştirin.
Artık ana menüde bir "Etkinlikler" seçeneğiniz olmalıdır. Buradan, “Mouse Enter” ve “Property Set” e gidin. Ardından, metin nesnenizi seçin ve özelliği Opaklık olarak ayarlayın. Son olarak değeri% 50 olarak ayarlayın.
Bu, birisi üzerine geldiğinde metni orijinal opaklığının% 50'sine karartır. Sadece rengi ayarlamak istiyorum, ancak bu seçenek etkinlikler menüsünde görünmüyor.
Şu anda karşılaştığımız sorun, metnin Mouse Enter'da rengini değiştirmesi ancak bu şekilde kalıcı olarak kalması. Bunu çözmek için, Fare Çıkışına opaklığı% 100'e ayarlayan başka bir etkinlik eklememiz gerekiyor. Referans için aşağıdaki resme bakın.
Ana Bağlantıyı Çoğaltma
Şimdi ilk bağlantımızı tam istediğimiz gibi ayarladık, Hakkında, Portföy ve İletişim bağlantılarını oluşturmak için üç kez kopyalayıp yapıştırın. Her biri için metni seçmeniz gerektiğini unutmayın, daha sonra içeri girin ve bağlantıları uygun sayfaları işaret edecek şekilde değiştirin.
Ayrıca, eşit aralıklı olduklarından emin olmak için nesneleri dikey olarak dağıtmak isteyeceksiniz. Bunu yapmak için, tüm metin kutularını seçin ve Hizala menüsüne gidin.
Çalışmanızı Önizleme
Gezinme menünüzün düzgün çalışıp çalışmadığını görmek için ekranın üst kısmındaki oynatma düğmesiyle küçük monitör düğmesini tıklayın. Bu, eylem halindeki sitenizin canlı bir önizlemesini vermelidir.
Çalıştıklarından emin olmak için bağlantıların üzerine gelin ve sayfanın değişip değişmediğini görmek için burayı tıklayın.
Nesneler Paleti
Sayfada birkaç öğeniz olduğuna göre, şimdi Nesneler paletine bakalım. Bu, diğer uygulamalarda görmeye alışık olduğunuz Katmanlar paletine eşdeğerdir ve aslında sayfadaki tüm öğelerin etkileşimli bir listesidir.
Photoshop katmanları paletinden çok daha basit olduğunu unutmayın. Maskeleme, katman etkisi vb. Yoktur.
Ana Sayfayı Tamamlama
Her iyi minimalist site klişe daire logosuna sahip olduğundan, bizimki sadece bir tane olmadan kalamaz. Hızlı bir şekilde alay etmek, şekil aracı için bir his verecektir. Şekiller, görüntü bozulması olmadan tamamen yeniden boyutlandırılabilir. Roma, hem vektör hem de raster nesnelerle çalışmak için mükemmel bir şekilde uygundur.
Ve bununla birlikte, Ana Sayfamızı bitirdik. Bu öğeler, hiçbir çaba harcamadan her sayfada görünecektir.
Sitenin Tamamlanması ve Dışa Aktarılması
Daha önce de belirttiğim gibi, navigasyon göstermek istediğim özelliklerin çoğunu kapsamamıza izin verdi. Bağlantılar, konumlandırma ve dağıtım nesneleri kurduk ve fareyle üzerine gelme efektleri oluşturduk.
Buradan kendi başınıza oynamalı ve diğer sayfaları tamamlamalısınız. Bir görüntüyü yapıştırmayı, metin paragraflarıyla çalışmayı ve hatta bir ızgara oluşturmayı deneyin. Ana Sayfa'ya eklemeye devam etmemek için içerik eklemeden önce uygun sayfayı seçtiğinizden emin olun.
Siteyi bitirdiğinizde, siteyi dışa aktarmak için iki temel seçeneğiniz vardır. Birincisi bir Roma sitesi. Bu, sitenizi Adobe ID'nizi kullanarak Adobe barındırılan bir sunucuya yükler (şimdilik ücretsiz). Ancak, bu şekilde bir şey yapamazsınız, bu yüzden onu bir SWF'ye dışa aktarmayı ve bir HTML dosyası oluşturma seçeneğini seçmeyi tercih ederim.
Bu size bir ons kod olmadan tek başına inşa edilmiş, canlı, işleyen bir web sitesi verecektir!
Roma hakkındaki Düşüncelerim
Şimdi gerçekten ilgilendiğiniz kısım geliyor, Roma'yı gerçek projeler için kullanabilir misiniz? Bu soruyu cevaplamak için, artıları ve eksileri inceleyelim.
İlk olarak, olumlu tarafa bakalım. Roma, hiçbir şekilde mükemmel olmayan ama oldukça parlak ve güçlü hissettiren yenilikçi bir WYSIWYG'dir. Öğrenme eğrisi CS uygulamalarından çok daha küçüktür ve bu paket tarafından korkutulan herkese kesinlikle hitap etmelidir. Ayrıca, geliştirici olmayanların aslında tek bir kod satırı olmadan çalışan bir web sitesi oluşturmalarına izin verme konusunda her zaman yanıltıcı bir hedefe ulaşır.
Ancak, bu faydalara rağmen, Roma'yı hiçbir zaman web projeleri için profesyonel bir bağlamda kullandığımı görmüyorum. Benim için en büyük engel, Flash'a çok bağımlı olması. Flash dayak atışına girmeyeceğim, ancak bu, ister sevsin ister nefret edin, teknolojinin pratik olmayan bir kullanımıdır. Yeni oluşturduğumuz site sadece birkaç bağlantı ve resim içeriyordu. Ortaya çıkan dosyaların saf HTML ve CSS'den başka bir şey olmamasının kesinlikle hiçbir nedeni yoktur. Adobe'nin Flash desteği oluşturmak istediğini anlayabiliyorum, ancak temel bir web çıktısı için seçeneğiniz yoksa bu araçla web siteleri oluşturabildiğimi iddia etmiyorum.
Bu makalenin Roma'ya yalnızca web açısından baktığını unutmayın. Baskı malzemeleri ve etkileşimli PDF'ler geliştirmek için hala harika olabilir. Aslında, ikincisi için gerçekten harika bir araç.
Sonuç
Özetlemek gerekirse, web geliştirmeye tamamen yabancıysanız ve kimseyi işe almadan veya 15 kitap okumadan kendiniz hızlı bir site kurmanız gerekiyorsa, Roma'ya bakın. Uzmanlık seviyeniz ne olursa olsun, almak ve çalıştırmak oldukça kolaydır.
Ancak, aslında profesyonel düzeyde web siteleri oluşturan sağlam ve kullanıcı dostu bir WYSIWYG için pazardaysanız, Flux 3'teki eğiticimize göz atın. CSS'yi anlarsanız, Flux bir katil uygulamadır ve değerli bir rakip bulamadım.
Aşağıya bir yorum bırakın ve Roma Projesi hakkında ne düşündüğünüzü bize bildirin. Adobe bu denemede ne yaptı? Neyi yanlış yaptılar? Senden duymak istiyoruz!
