“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ış.

Etkileyici bir başlık olmasa da içeriğin sizi memnun edeceği kanaatindeyim. Amatör veya Profesyonel hiç farketmez. Web tasarımı ile uzun süredir uğraşanların ilk dönemlerde hayallerini süsleyen yazılım büyük ihtimal Dreamweaver olmuştur. Macromedia ile başlayan bu serüven Adobe geçmesi ile güç kazandı ve yazılımın internete bakış açısı değişti.

Son çıkan sürümlerinde görüyoruz ki, Adobe, ürünlerine entegrasyonu dışında çıkan son teknolojilere uyumluğu ile gönüllerimize taht kurdu ve bizleri büyük yüklerden kurtardı. Geliştirmek istediğimiz uygulamalarımızda bize sunduğu kuş bakışı dışında tabi ki sayılacak yüzlerce özelliği ve popülerliğinin getirdiği destek sayesinde ulaşabilirliğin kolay olduğu makaleler, örnekler de bizlere kolaylıklar sağlamaktadır.

Frontpage’den kurtulup Dreamweaver ile tanışmam Lise dönemlerime gelmektedir. Frontpage’de istediklerimi yapamadığımı görünce bir arayışa girdim ve bulduğum günden itibaren, sürekli keşfederek kullanmaktayım. Belirtmek isterim ki profesyonel bir tasarımcı veya webmaster değilim. Sadece insanlara muhtaç olmadan daha doğrusu rahatsız etmeden kendi çabalarım ile fikirlerimi sunmak adına kullanmaktayım. İnternette Adobe Dreamweaver CS4 üzerine Türkçe bir yazı, makale aradım fakat bulduklarımla memnun kalmayınca kendi gördüklerimi aktarmak en azından merakları gidermek istedim.

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ı - Lisans

Kurulum ekranı bile ayrı güzel. Lisans seçenekleri arasında Türkçe mevcut. Ben birazını okudum, sıkıntı oluşturacak bir durum yok. -sanırım- (eee yazı yazacağız dedik, kurmak zorundayız.)

Kurulum Ekranı - Kurulum Başladı ve İlerliyor

Sanki gücü hisseder gibiyim. Tatlı mavilikten midir? İnsana bir güven geliyor.

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

CS3′e göre karşılama ekranı biraz değişmiş. Fakat farkettiyseniz Windows’un pencere olaylarından kurtarmış kendisini. Ekranın hepsi benim diye söyleniyor sanki.

Uygulama - Komple Tasarım Ekranı ve Yeni Arayüz

Heyecan giderek artıyor. Sunduğu yeni arayüz etkilemek için fazlasını veriyor. MAC tarzında bir havası olmuş sanki. Kısayolların yerleri değişmiş ve kutucuklara yeni özellikler kazandırılmış.

Uygulama - Öntanımlı Çalışma Alanları

Bu arada söylemeyi unuttum. Resimleri büyütmek için üzerlerine tıklamanız yeterli. Resmin büyük boyutunda göreceksiniz ki sağ kısımda önceden ayarlanmış çalışma alanları var. “Dual Screen” yanlış bilmiyorsam ben ilk bu sürümde farkettim. CS4 ile esneknik ön planda. Tutun, sürükleyin, bırakın. Araçlar nereye çekerseniz oraya geliyor.

Uygulama - Ekli Dosyalarda Gezinin

Yazılım içerisinde “Indicator” olarak geçiyor. Kelime anlamına baktığımızda “Gösterge, İbare, İşaret eden şey” olarak çevriliyor. Yaptığı işe gelince görüntülediğimiz dosya eğer başka bir dosya bağlı çalışıyor ise onu da görmemizi ve üzerinde yaptığımız değişiklikleri uygulamamızı sağlıyor. Bir nevi bağlı olan dosyalara link atıyor ve sonuçları yansıtıyor.

Uygulama - CSS Uygula & Gör

Bir üst kısımda bahsettiğim mantık üzerine kurulu sistemde, CSS dosyasında yaptığımız değişiklikleri anında tasarım ekranımıza yansıtıyor. Tasarımdan kaçık yok. CSS dosyasını kaydetmeden yaptığımız değişiklikler karşımızda.

Ekran görüntüsü olarak sunacaklarım bu kadar. Diğer özelliklerine gelecek olursak;

Subversion entegrasyonu, Adobe Air desteği, Ajax ve Javascript kütüphanesi ve şahane Photoshop olayları. Bir sonraki yazım Adobe CS4 Fireworks hakkında olacak. Videolar aşağıda, izlemenizi tavsiye ederim.

Adobe TV’den Videolar

Inside The Dreamlabs - Dreamweaver CS4 Related Files

Inside The Dreamlabs - Dreamweaver CS4 Web Widgets

Inside The Dreamlabs - Dreamweaver CS4 Dataset Wizard

Inside The Dreamlabs - Dreamweaver CS4 Javascript

Inside The Dreamlabs - Dreamweaver CS4 Live Preview

Inside The Dreamlabs - Dreamweaver CS4 Code Navigator

Firefox olmasaydı ne yapardık! Elbette internete girerdik, günlük rutin uğraşlarımızı gerçekleştirebilirdik. Peki farklı olmak gerektiğinde? İşte o zaman elimizde pek alternatif olacağını sanmıyorum. Yazımda Firefox -özellikle 3.0 sürümü- ve kullandığım eklentiler üzerine bilgilerimi paylaşacağım.

Kısaca Firefox ve 3.0 Sürümü:

Efendim Firefox diyorum ama aslında tam olarak Mozilla Firefox demeliyiz. Nasıl Richard Stallman GNU Linux değil de Linux diyenlere fıtık oluyorsa bizde Firefox diyoruz diye sitem edenler olabilir. Ben yazı içerisinde Firefox dediğim zaman Mozilla Firefox olarak algılarsınız.

Mozilla serüveni Netscape’in kaynak kodlarını açması ile başlıyor. Wikipedia‘dan;

Mozilla, Netscape‘in kaynak kodunu açmasıyla ortaya çıkan, ve ilk kurulduğundan beri Netscape’in Ağ tarayıcıları için kullandığı kod ismi olan “Mozilla”yı markalaştıran, açık kaynaklı yazılım ailesidir. Son olarak çıkardıkları Mozilla Firefox tarayıcısı ile tarayıcı dünyasının %10′unu ele geçirmeyi başarmıştır.

Basit bir tabir ile Firefox, internet tarayıcısıdır. Fakat kullanan bilir ki tarayıcıdan öte sunduğu özellikleri ile gönlümüzde taht kurmuştur. Firefox’un kısa zamanda milyonlara ulaşmasının en büyük sebebi açık kodlu olması ve standartlara sağdık kalmasıdır. Belli bir sektöre pazarlanmak amacıyla yapılmadığından düşünülebilirlik konusunda daha özgür davranıyorlar.

Mozilla Firefox 3.0′da Neler Var?

Öyle say say bitecek tarzdan değil. Yeni şeylerde var değişen şeyler de var. Fakat göze çarpanlar şunlar;

URL Süzgeci ve Adresleri Tanıması

Gelişmiş Yerimi -Bookmark- Yönetimi

Eklenti Yöneticisi

İndirme Yöneticisi

Zararlı Sitelere Karşı Görsel Uyarı

Bunlar iştahınızı kabarttıysa bu bağlantıdan ulaşabileceğiniz yazıyı okumanızı mutlaka öneriyorum. Gelecekte Firefox bize bunların çok çok fazlasını vereceği kesin.

Kullandığım Eklentiler ve Kısaca Notlar:

Stylish: Bu eklenti sayesinde Firefox içerisinde web siteleri dahil istediğiniz görselliği uygulayabiliyorsunuz. Eğer tasarım konusunda iyiyseniz ve standartlar ile aranız iyi ise web sitelerine, kullanıcıarabirimlerine kısaca istediğiniz herşeyi kendi zevkinize göre tasarlıyabiliyorsunuz. Globex Designs tarafından yapılan Gmail Redesigned tasarımı size eklentinin gücünü gösterecektir.

Table Tools: Web sayfalarında yer alan tabloları bu eklenti sayesinde düzene koyabiliyorsunuz. Filtre uygulayarak sıralamarı istediğiniz gibi yerleştirebiliyorsunuz.

Delicious Bookmarks: Del.icio.us bağlantılarınızı organize etmek adına birebir. Senkronizasyon özelliği ile karşılıklı güncellemeler yapabiliyorsunuz.

TinEye Image Search: Resimleri birebir karşılaştırıp diğer kopyalarının nerede olduğunu görebiliyorsunuz. (Teknolojisi şahane. Digg, Adobe gibi sağlam kullanıcıları var. İlerleyen günlerde bu konu üzerine yazı çıkabilir.)

QuietURL: Zaman kazandıran, can kurtaran eklentilerden bir diğeri. Web sayfalarında yer alan fakat link verilmemiş adresleri tanıyarak tıklanabilir yapıyor.

Taboo: Web sayfalarını sonra okuyabilmemiz için adreslerini kaydediyor. Sunduğu grafiksel arayüzü ile sayfanın o an ki halini imaj olarak görebiliyoruz. Böylece daha akılda kalıcı oluyor.