Web tasarımı için dünyada ve Türkiye’de en çok kullanılan yazılımlar Microsoft ve Adobe gibi büyük yazılım şirketlerinin çok da ucuz olmayan ürünleri . Microsoft, web tasarımcıları için Visual Web Developer Express gibi ücretsiz bir çözüm sunuyor olsa da tüm ihtiyaçları karşılayan program paketleri dişe dokunur lisans ücretleriyle satılıyor. Yüksek lisans ücretleri kurumsal kullanıcılar tarafında elbette ki bu başarılı yazılımlar için makul görünebilir. Fakat web tasarımına farklı amaçlarla yönelen, örneğin işe bir hobi gözüyle bakan kullanıcılar için çok can sıkıcı olabiliyor. Şimdi tanıtacağımız yazılımın hem ücretsiz bir sürümü, hem de makul ücretli bir sürümü var. Yüksek ücretli bir sürümüyse yok! :)
Kanada’lı Skybound firmasının bir ürünü olan Stylizer, web tasarımıyla uğraşan herkesi ilk görüşte şaşkınlığa sevk edebilecek, etkileyici bir yazılım. Yazılım, HTML sayfalardaki öğelerin görünümlerinin yönetilmesinde CSS dosyaları kullanan tasarımcıların hayatını daha önce görülmemiş şekilde kolaylaştırıyor .
Yine aynı konuda çözüm sunan Adobe Dreamweaver’ın da CSS düzenleme özellikleri mevcut. Fakat bir karşılaştırma yapacak olursak, işi yalnızca CSS dosyalarını düzenlemek olan Stylizer, Dreamweaver’ın yanında “sihirbaz” gibi duruyor. Sözü daha fazla uzatmadan yazılımın nasıl kullanıldığına ve ne gibi etkileyici özellikler içerdiğine göz atalım.
Canlı yayında CSS düzenleme
Web sayfalarının stil dosyalarını düzenlemenizi sağlayan tüm yazılımlar, kodları yazarken size yardımcı olabiliyor. Fakat Stylizer işi farklı bir boyuta taşımış durumda. Programı çalıştırdığınızda Internet Explorer ve Firefox gibi web tarayıcılara benzeyen tanıdık bir görünümle karşılaşıyorsunuz. Zaten yazılım, bilgisayarınızda kurulu bulunan tarayıcıları kullanarak çalışıyor. Her zaman görmeye alışkın olduğunuz yerde bulunan adres çubuğuna bir web sayfasının adresini girdiğinizde, büyük ihtimalle ilk şaşkınlığınızı yaşayacaksınız. Stylizer, ekranın sol tarafında yazılan adresi bir tarayıcı gibi görüntülerken, sağ taraftaki panelde de o sayfada kullanılan CSS dosyalarını açıyor.
Sağ taraftaki panelde istediğiniz tanımlamayı değiştirme şansına sahipsiniz. En güzeli de bu değişiklikleri yaptığınız anda sonucun sayfaya yansıyor olması. Bu sayede yaptığınız değişikliğin sonucunu görmek için CSS belgesini kaydetmek, tarayıcıda sayfayı tekrar yüklemek gibi bir zorunluluğunuz olmuyor.
CSS dosyalarında yaptığınız değişikliklerin sonucunu anlık olarak görebilmek, sayfa tasarıma ayrıntılı şekilde müdahale ederken ciddi şekilde zaman kazandırıyor. Üstelik Stylizer’ın CSS düzenleme paneli çok fonksiyonel şekilde tasarlanmış. Burada neyi kastettiğimizi hemen küçük bir örnekle açıklayalım.
Diyelim ki, sayfanızda bulunan bir
elementinin boyutlarını CSS dosyanızda belirliyorsunuz ve bu DIV, sayfada görüntülenen bir kutuyu oluşturuyor. Kutunun enini ayarlamak için CSS dosyasındaki gerekli “width:” ifadesine tıklıyor ve istediğiniz değeri girebiliyorsunuz. Gelişmiş kontrollerin öne çıktığı nokta ise şu: DIV’inizin enini belirlerken rakamı elle yazabileceğiniz gibi, var olan rakamın üzerine fare ile gelerek CTRL tuşunu basılı tutup farenizin tekerleğiyle de boyutu ayarlayabiliyorsunuz. Bir taraftan boyutu değiştirirken diğer taraftan da sayfadaki sonucun nasıl olduğunu izlemek gerçekten çok etkileyici.
Tamamlama özelliği: CSS kodlarını düzenlemenize olanak sunan diğer yazılımlarda olduğu gibi Stylizer’da da otomatik tamamlama özelliği mevcut. Bir öğe için özellik atamak istediğinizde, siz özelliğin ilk birkaç harfini yazarken uyumlu olan seçenekler ekranın sağ alt kısmında görüntüleniyor. İsterseniz TAB tuşunu kullanarak ya da sağ alt kısımdan istediğiniz ifadeye tıklayarak işinizi hızlandırabiliyorsunuz.
Hizalama ve cetvel: Sayfalarınızdaki öğeleri büyütüp küçültmek ve hizalamak, Stylizer ile çok kolaylaşıyor. Öğelerin magrin ve padding tanımlamalarını birkaç tıklamayla değiştirebiliyorsunuz. Sayfanızdaki bazı öğelerin aynı yatay ya da dikey çizgide başlamasını sağlamakta kolaylık olması amacıyla Stylizer’a cetvel ve kılavuz çizgileri eklenmiş. Sayfanızın istediğiniz yerinden bir kılavuz çizgisi çekip, öğeleri buna göre hizalayabiliyorsunuz. Cetvel özelliği iste sayfanızda bulunan bir öğenin boyutlarını öğrenmek istediğinizde çok işe yarıyor. Bu da tasarım sürecinde işinizi kolaylaştırabilecek değerli bir özellik.
Dijital büyüteç: Stylizer’ın rakiplerini kıskandıracak en önemli özelliklerinden biri de büyüteci. Düzenlemekte olduğunuz sayfada bulunan bir öğeyi ayrıntılı şekilde incelemek istediğinizde kullanabileceğiniz bu araç, küçük alanlarda yapacağınız işlemleri ciddi şekilde kolaylaştırıyor. Büyüteç sayesinde sayfanızdaki öğelerdeki tek piksellik kayma ve bozulmaları bile görebilir ve düzeltebilirsiniz.
Renk seçimi: Sırada yine Stylizer’ın etkileyici bir özelliği var. Sayfanızın içindeki bir öğenin renk özelliklerini ayarlamak istediğinizde, Stylizer’ın müthiş renk seçicisi devreye giriyor.
Diyelim ki, sayfanızdaki bir bölümün arka plan rengini belirlemek ya da değiştirmek istiyorsunuz. Stylizer’da açık olan CSS dosyasında bu tanımlamayı seçili hale getirdiğinizde, ekranın sağ alt köşesinde bir renk paleti ve bir de monitör simgesi görüntüleniyor. İşte bu monitör simgesine tıkladıktan sonra ekranın istediğiniz bir yerinden herhangi bir rengi alarak kullanabiliyorsunuz. İstediğiniz rengi kolayca alabilmeniz için otomatik bir büyüteç de kullanıma sunulmuş. Bunun dışında isterseniz Windows’un Paint’inde olduğu gibi standart renk paletinden istediğiniz rengi seçebiliyorsunuz.
Stylizer ve Firebug
Daha önce de belirttiğimiz gibi Stylizer’ı kullanırken görüntüleyici olarak sisteminizde kurulu bulunan tarayıcılardan istediğiniz birini seçebiliyorsunuz. Özellikle yaptığınız işin farklı tarayıcılarda verdiği sonucu görebilmek açısından tek tıklamayla kullanılan tarayıcıyı değiştirebilmek çok verimli bir özellik.
Stylizer’ı tarayıcı olarak Firefox’u seçerek kullanırken ek avantajlar kazanıyorsunuz. Bunlardan ilki, “Stakeout” özelliği. Bu özellik yalnızca Firefox üzerinden çalışıyor ve aktif hale getirmeniz durumunda CSS dosyasında seçili halde olan tanımlamanın etkilediği öğe sol taraftaki sayfada kırmızı bir çerçeveyle işaretleniyor.
Sisteminizde kurulu bulunan Firefox üzerinde FireBug eklentisi bulunuyorsa ek bir avantajınız daha var. Bu durumda Stakeout özelliği gelişiyor ve CTRL tuşuyla birlikte istediğiniz sayfa elementine tıklayarak kolayca biçimlendirmeye başlayabiliyorsunuz.
FTP’den kolayca gönderin
Stylizer ile düzenlediğiniz CSS dosyalarınızı FTP üzerinden kolayca yayınlanmakta olan web sitenize ulaştırabiliyorsunuz. Dosyalarda gerekli düzenlemeleri yaptıktan sonra ekranın sağ üst bölümünde bulunan “Save” düğmesine tıkladığınızda Stylizer FTP bilgilerinizi soruyor. Bu özellik web tasarımcılarının işini çok kolaylaştırdığından varsayılan olarak belirlenmiş. Burada yalnızca bir kez FTP bilgilerinizi girdikten sonra yaptığınız değişiklikleri “Save” düğmesine tek tıklamayla sitenize gönderebiliyorsunuz. Elbette ki, düzenlediğiniz CSS dosyasını o an web sitenize göndermek yerine bilgisayarınıza kaydetmek de isteyebilirsiniz. Bu tür durumlar için CSS dosyalarını masaüstüne kaydetme seçeneğiniz de bulunuyor. Save diyalogunda FTP bilgilerini girmek yerine Stylizer’a dosyanın kaydedileceği disk konumunu da belirtebilirsiniz.
Tamamlama özelliği: CSS kodlarını düzenlemenize olanak sunan diğer yazılımlarda olduğu gibi Stylizer’da da otomatik tamamlama özelliği mevcut. Bir öğe için özellik atamak istediğinizde, siz özelliğin ilk birkaç harfini yazarken uyumlu olan seçenekler ekranın sağ alt kısmında görüntüleniyor. İsterseniz TAB tuşunu kullanarak ya da sağ alt kısımdan istediğiniz ifadeye tıklayarak işinizi hızlandırabiliyorsunuz.
Hizalama ve cetvel: Sayfalarınızdaki öğeleri büyütüp küçültmek ve hizalamak, Stylizer ile çok kolaylaşıyor. Öğelerin magrin ve padding tanımlamalarını birkaç tıklamayla değiştirebiliyorsunuz. Sayfanızdaki bazı öğelerin aynı yatay ya da dikey çizgide başlamasını sağlamakta kolaylık olması amacıyla Stylizer’a cetvel ve kılavuz çizgileri eklenmiş. Sayfanızın istediğiniz yerinden bir kılavuz çizgisi çekip, öğeleri buna göre hizalayabiliyorsunuz. Cetvel özelliği iste sayfanızda bulunan bir öğenin boyutlarını öğrenmek istediğinizde çok işe yarıyor. Bu da tasarım sürecinde işinizi kolaylaştırabilecek değerli bir özellik.
Dijital büyüteç: Stylizer’ın rakiplerini kıskandıracak en önemli özelliklerinden biri de büyüteci. Düzenlemekte olduğunuz sayfada bulunan bir öğeyi ayrıntılı şekilde incelemek istediğinizde kullanabileceğiniz bu araç, küçük alanlarda yapacağınız işlemleri ciddi şekilde kolaylaştırıyor. Büyüteç sayesinde sayfanızdaki öğelerdeki tek piksellik kayma ve bozulmaları bile görebilir ve düzeltebilirsiniz.
Renk seçimi: Sırada yine Stylizer’ın etkileyici bir özelliği var. Sayfanızın içindeki bir öğenin renk özelliklerini ayarlamak istediğinizde, Stylizer’ın müthiş renk seçicisi devreye giriyor.
Diyelim ki, sayfanızdaki bir bölümün arka plan rengini belirlemek ya da değiştirmek istiyorsunuz. Stylizer’da açık olan CSS dosyasında bu tanımlamayı seçili hale getirdiğinizde, ekranın sağ alt köşesinde bir renk paleti ve bir de monitör simgesi görüntüleniyor. İşte bu monitör simgesine tıkladıktan sonra ekranın istediğiniz bir yerinden herhangi bir rengi alarak kullanabiliyorsunuz. İstediğiniz rengi kolayca alabilmeniz için otomatik bir büyüteç de kullanıma sunulmuş. Bunun dışında isterseniz Windows’un Paint’inde olduğu gibi standart renk paletinden istediğiniz rengi seçebiliyorsunuz.
Stylizer ve Firebug
Daha önce de belirttiğimiz gibi Stylizer’ı kullanırken görüntüleyici olarak sisteminizde kurulu bulunan tarayıcılardan istediğiniz birini seçebiliyorsunuz. Özellikle yaptığınız işin farklı tarayıcılarda verdiği sonucu görebilmek açısından tek tıklamayla kullanılan tarayıcıyı değiştirebilmek çok verimli bir özellik.
Stylizer’ı tarayıcı olarak Firefox’u seçerek kullanırken ek avantajlar kazanıyorsunuz. Bunlardan ilki, “Stakeout” özelliği. Bu özellik yalnızca Firefox üzerinden çalışıyor ve aktif hale getirmeniz durumunda CSS dosyasında seçili halde olan tanımlamanın etkilediği öğe sol taraftaki sayfada kırmızı bir çerçeveyle işaretleniyor.
Sisteminizde kurulu bulunan Firefox üzerinde FireBug eklentisi bulunuyorsa ek bir avantajınız daha var. Bu durumda Stakeout özelliği gelişiyor ve CTRL tuşuyla birlikte istediğiniz sayfa elementine tıklayarak kolayca biçimlendirmeye başlayabiliyorsunuz.
FTP’den kolayca gönderin
Stylizer ile düzenlediğiniz CSS dosyalarınızı FTP üzerinden kolayca yayınlanmakta olan web sitenize ulaştırabiliyorsunuz. Dosyalarda gerekli düzenlemeleri yaptıktan sonra ekranın sağ üst bölümünde bulunan “Save” düğmesine tıkladığınızda Stylizer FTP bilgilerinizi soruyor. Bu özellik web tasarımcılarının işini çok kolaylaştırdığından varsayılan olarak belirlenmiş. Burada yalnızca bir kez FTP bilgilerinizi girdikten sonra yaptığınız değişiklikleri “Save” düğmesine tek tıklamayla sitenize gönderebiliyorsunuz. Elbette ki, düzenlediğiniz CSS dosyasını o an web sitenize göndermek yerine bilgisayarınıza kaydetmek de isteyebilirsiniz. Bu tür durumlar için CSS dosyalarını masaüstüne kaydetme seçeneğiniz de bulunuyor. Save diyalogunda FTP bilgilerini girmek yerine Stylizer’a dosyanın kaydedileceği disk konumunu da belirtebilirsiniz.