“Adobe Dreamweaver CS4 - Sanatsal Çalışmalar Yapın” başlıklı yazımda web tasarım dünyasına nasıl girdiğimden bahsetmiştim. Tabi o zamanlar Dreamweaver arkaplanda -kod olarak- tüm yükü üstleniyordu. Fakat görsel olarak birşeyler sunmak gerektiğinde derdime derman olan uygulama tabi ki Fireworks idi.

İlk başlarda sadece web sayfalarına görsel arayüz sunabilmek için kullandım. Fakat ilerleyen zamanlarda, özelliklerini daha doğrusu yapabildiklerini keşfettikçe artık görsel işlerimin hepsine vazgeçilmez uygulama olmuştu. Çoğu kişi Photoshop’u savunsa da bence Fireworks ile aralarında çok fark var. Neden bilmiyorum -alışmışlığın eseri olsa gerek- Fireworks’un daha yetenekli olduğu kanaatindeyim. Can kurtaran, zaman kazandıran yeteneği “slice” sayesinde amatör ruhumla birçok web sayfası tasarladım.

Kaybolmayan bu amatör ruhumla zaman içerisinde ki tecrübelerimden faydanalarak CS4 sürümünde neler değiştini görsel olarak aktaracağım. Hadi başlayalım.

Adobe tarafından resmi açıklama ne zaman yapıldı bilmesem de 1-2 haftadır CS4′ün kullanıcılara sunulduğunu duymaktayız. Buradan resmi sitesine bakabilir ve isterseniz yazılımı bilgisayarınıza yükleyebilirsiniz. (üye olmanız gerekmektedir. davetiye olmadığı için üyelik sonunda indirmenize izin verecektir.)

Kurulum Ekranı - Heyecan Başlıyor

Kurulum ekranı neredeyse Adobe’un çıkan tüm yeni sürümlerinde aynı. Sadece başlık kısımları -header- değişiyor ve içeriğe göre seçenekler sunuluyor.

Kurulum Ekranı - Yükleme Devam Ediyor

Önümüzdeki birkaç sene Adobe ürünlerinde bu kalıbı göreceğimizi umuyorum. Güven veren maviside cabası.

Uygulama - Karşılama Ekranı, Hoşgeldiniz

Karşılama ekranında değişen pek birşey yok. Sadece renkler değişmiş. Dreamweaver CS4 sürümünde ki hava burada yok.

Uygulama - Heyecan Verici Yeni Arayüz

Kalıp olarak Dreamweaver CS4 ile aynı. Sanırım Adobe’un stratejisi her yeni CS sürümünde kalıpsal değişikliklere gitmek. Bunu ilk CS3 serisinde görmüştük. Katkısına gelince, kullanıcılar yeni sürümlere geçiş yaparken adaptasyon konusunda çok sıkıntı yaşamayacaklardır. Sunulan bu yeni arayüz nefes kesici. İlerledikçe bize ne gibi yenilikler sunduğunu göreceğiz.

Uygulama - Farklı Tasarımcılar İçin Farklı Çalışma Alanları

Bir üst kısımda bulunan resmi ve buradakini büyültüp bakarsanız, arayüz içerisinde araçların yer değiştirdiğini göreceksiniz. Fireworks CS4 ile gelen hazır çalışma alanları farklı tasarım gruplarında ki kullanıcılar için kolaylık sağlıyor. Ayrıca isterseniz kendi çalışma alanınızı oluşturup, kaydedebilirsiniz.

Uygulama - Merkeze Kilitlenin

Bir önceki sürümlerde olmayan veya benim görmediğim bir özellik. Arayüz içerisinde resmi taşırken tam merkeze kilitlenebilmek için kılavuz çizgiler çıkıyor ve size bu konuda yardımcı oluyor. Ayrıca yine tasarım içerisinde farklı objelerimizi de birbirine hizalarken bize kılavuzluk ediyor.

Uygulama - Yeni Özelliklerini Keşfedin

Gördüğünüz gibi birçok yeni işlem var. Bunlar arasında AIR öne çıkıyor.

Uygulama - CSS Yapısına Uygun Tasarım Yapma ve Çıktı Alma

Resimde gördüğümüz üzere “STYLES” menüsünden CSS etiketimizi oluşturuyoruz. Burada seçili olan kısımlar CSS içerisinde ki biçimlendirmelerde geçiyor. Seçtiğimiz ve uyguladığımız stillerin hepsi CSS dosyasına aktarılıyor. Önceki sürümlerde yazıyı editörde düzenleyip -yazı üzerine sağ tuş yapınca editörü görebiliyorduk- birebir sonucu ekranda görüyorduk. Fakat bu sürümde -sanırım, varsa da çok aradım bulamadım- kaldırmışlar. Artık sadece alt kısımda bulunan “PROPERTIES” bölümünden yapabiliyoruz.

Tasarım içerisinde oluşturduğumuz stilleri burada yazılarımıza uygulayabiliyoruz. Her yazı için yeni bir stil oluşturup kullanmak en güzeli.

Tasarımın CSS çıktısını almak için “Export” işlemini uyguluyoruz ve resimdeki gibi “CSS and Images” çıktısını seçiyoruz.

Resimdeki gibi bir uyarı alırsanız telaşlanmayın. Uyarının sebebi, kullandığımız fontların Web için adaptasyonunda sıkıntı çıkarabileceğini bildirmek amaçlı.

Uygulama - Dreamweaver CS4 ile Tasarıma Devam Edelim

Şimdi Dreamweaver CS4 ile kaldığımız yerden devam ediyoruz. Çıktısını aldığımız HTML dosyanın editörde görüntüsü resimdeki gibidir. Farkettiyseniz Fireworks CS4 tarafında yaptığımız font şekilleri aynı şekilde buraya aktarılmamış.

Aslında CSS dosyamız tasarımımızda oluşturduğumuz stillere göre başarılı bir şekilde oluşturuluyor. Fakat Fireworks CS4, “Export” işlemini yaparken uyarı verdiği için CSS dosyasında seçtiğimiz stilde ki fontlara alternatif olarak tüm işletim sistemlerinde olabilecek fontları ilave ediyor ve onların kullanımını aktifleştiriyor. Tek yapmamız gereken resimde belirttiğim gibi o kısımları silmek.

Gördüğünüz gibi alternatif olarak eklenen kısımları kaldırdıktan sonra istediğimiz gibi şekilleniyor. Unutmayın! Burada CSS’e hakim olabilmek için Fireworks CS4′de oluşturduğumuz stillerde nelerin kullanılacağını iyi seçmeliyiz.

Tasarımımızın son hali. Tarayıcımızda aynen tasarladığımız gibi gözüküyor ve bunların hepsini kendisi ayarlıyor.

Yazımda ki amacım programı tanıtmak idi fakat sonlara doğru biraz “how to” mantığına büründü. CSS sorununu aşabilmek için baya uğraştığım ve çözümü sizlerle paylaşayım istedim. Sonuç olarak, Fireworks CS4 ile hayallerimiz gerçek oluyor. Web & Grafik tasarımı yapabiliriz, Programlarımız için arayüz tasarlayabiliriz ve daha fazlası. Komple çözüm arayanlara birebir uygulama olmuş. İnanıyorum ki CS5 -tabi böyle bir sürüm olursa- sürümünde özellikle CSS konusunda eksiklerini gidererek bizler için vazgeçilmez bir uygulama olacak. Şu an Adobe’un kendi ürünleri arasında ki adaptasyonu alkışlamak gerekir.

Değerli görüşlerinizi ve yorumlarını esirgemez iseniz çok mutlu olacağım. Keşfetmeye devam ediyorum ve yeni şeyler buldukça paylaşacağım.

(Not: Bu arada WP’de farkettim ki günler arası geçiş sorunu var. Yani 28 Mayıs - 23:00′de yazınıza başladınız, saatler ilerledi ve 29 Mayıs - 01:10 oldu. Tam bu sırada Galeri’den resim eklemeniz gerekti fakat yüklediğiniz resimler görünmüyor. Sebebi arkaplanda taslak olarak sadece yazı bilgileri kaydediliyor. Bu yüzden yüklediğiniz dosyalar gün bazında arşivlendiği için sistem yazıyı ilk oluşturduğu güne bakıyor. Sorun nasıl çözülecek? Sadece “Kaydet” deyin. Sizi tekrar editöre yönlendirecektir. Artık Galeri’den dosyalarınızı ekleyebilirsiniz. )

150′ye yakın abonesi olduğum siteden günlük ortalama 200′den fazla yazı okuyorum. İstedim ki sizlerle de aktarayım ve paylaşımı en yüksek düzeye çıkarayım.

Kaynak

• Kafamızdaki sorulara cevap olması dileğiyle Microsoft’tan Xp - Vista karşılaştırması.
• Mono projesi kapsamında Microsoft Silverlight Linux’da çalışır hale gelmiş. Karşınızda Moonlight.
• Windows 7 merakları giderecek ekran görüntüleri.
• Youtube alternatif arayanlara Ceyhun’dan Google Video Player üzerine faydalı bir yazı.
• Fatih Hayrioğlu, Adobe Dreamweaver CS4′ü incelemeye almış. Benim yazıma göre biraz farklı. Okumaya değer.
• Gayi Safi Milli Hasıla’nın nasıl hesaplandığını merak edenlere açıklayıcı bir yazı.
• SEO konusunda çalışmamız gereken kişiler / kurumlar hakkında bilinmesi gerekenler.
• Web siteniz ne kadar başarılı. Hadi test edelim.
• Google Spreadsheets ile güç bizde. Örnek olarak buna bakabilirsiniz.
• Wordpress kullandığınız sitelerinize yorumlara hükmedin.
• Wordress içerisinde yer alan kod betiklerinin ne anlam ifade ettiğini öğrenmek istiyorsanız buraya bakmalısınız.
• Ruby On Rails için Açık Kodlu Sosyal Ağ Uygulaması.
• Google Adsense’de kalitesiz reklamları daha doğrusu spamcıları engelleyin.

Blogcularımızdan

• Serkan URHAN, Reklamstore’den ilk ödemesini almış. Google Adsense’ye alternatif arayanlara çözüm olabilir. Güvenilirliğini kanıtlıyor olması güzel.
• Serkan URHAN, İzmir’e gelmeyi düşünenlere nasihat tadında 100 önerisi var. Çok ilginç şeyler yok değil.
• Bol bol seyahat ediyorsanız ve Tuvaletler ile aranız iyiyse bu işaretleri görmeniz ve aklınızda bir köşeye yazmanız gerekir. Bu işlerde standart olmuyormuş demek ki!
• Türk Blog Yazarları ve Acı Gerçekler. Çok güzel bir yazı olmuş. Lütfen, okuyun.
• Hastalardan Öğrendiklerim. Mutlaka takip etmeniz gereken bir blog. Eski Yugoslavya ve Çobanlık üzerine güzel şeyler paylaşmış.
• Erdil Yaşaroğlu, Teknoloji Marketleri‘ne duyduğu sitemi aktarmış.

Reklam & Pazarlama

• Kuş Yuvası. Çok ilginç ve farklı bir çalışma olmuş.
• Offical pazarlama ve reklam gururumuz 41? 29! birbirinden güzel 6 tane ödül almış. Hemde hepsini aynı anda.
• Can Turanli’nin, Kategorinin Sahibi Olmak yazısı istatistiksel sonucu yüzümüze vuruyor. Çok haklı.
• Viral Marketing üzerine Alemşah döktürmüş. 2.kez okuyunca kafanızda daha anlamsal şeyler üretebiliyorsunuz.
• Lebron Yiğit’in bu videosunu izlemediyseniz, çok şey kaçırmışsınız.

Tasarım

• Nokia - The Morph Concept. Gelecek böyle birşey olacak.
• Resimlerinize Konuşma Balonu ekleyin. Yakuter’e teşekkürler.
• CSS ile Galerilerinize hayat verin, şekillendirin.
• Odasına henüz kitaplık almamışlara alternatif tasarımlar. Çekici ve farklı olmuş.
• Logolarda hangi yazi tipinin -font- kullanıldığı arayanlara müjdeli haber.
• Vertrue çalışanları çok mutlu olsa gerek. Ofisin tasarımı göz kamaştırıyor.
• Orjinal fikirler tasarım ile birleşince ortaya çıkanlar.
• Bu Tişört tasarımları göz dolduruyor. Hepsinden 1′er tane almak gerek.
• JQuery ile Dialog kutuları. SimpleModal.
• Milky Ücretsiz İkon seti. Mutlaka bakın. Kullanın, kullandırın.
• Basit ama gösterişli ve kullanışlı birbirinden güzel 48 tasarım.
• İletişim formu tasarlamak için birebir.
• Birbirinden güzel ve kullanışlı Magazin tadında 30 tasarım.

Duyuru & Haber

• Sun’dan Açık Kaynak İşletim Sistemi.
• Google, aramalarda forumlar için ayrıntılı bilgiler sunmaya başlamış.
• Bill Gates, TouchWall Prototipinin tanımını yapmış.