Web Yayıncılığı Araçları Dersi 4. Ünite Özet

Giriş

HTML, CSS ve JavaScript kodları yazmaya yarayan basit editörler dışında daha gelişmiş özelliklere sahip açık kaynak kodlu kod yazma editörleri ve görsel geliştirme araçları mevcuttur. Komodo Edit, Eclipse, Netbeans ve Aptana Studio gibi popüler kod yazma editörleri örnek olarak verilebilir. Ayrıca web uygulaması geliştirme sürecinde görsel tasarım yapmaya olanak sağlayan açık kaynak kodlu Google Web Designer isimli önemli bir yazılım daha bulunmaktadır.

Google Web Designer

Google Web Designer (GWD), temel olarak HTML5 standartlarından animasyonlar oluşturmaya yarayan, Microsoft Windows 7 veya üzeri, Mac OS X 10.7 veya üzeri, popüler Linux dağıtımlarının güncel sürümlerini destekleyen ve metin, çizim, 3 boyutlu nesne araçları ile görsel geliştirme yapılan açık kaynak kodlu bir yazılımdır. GWD ile görsel bir ortamda geliştirme yapılabildiği gibi HTML, CSS, JavaScript ve XML dosyalarını oluşturma ve kodlama yapılabilmektedir. Arayüzün sol tarafında dik olarak araçlar çubuğu yer almaktadır. Menü çubuğunun hemen altında açık olan dosyaların listesi vardır. Bu çubuğun hemen altında ise araç seçenekleri çubuğu bulunmaktadır. Araç seçenekleri çubuğunda araç çubuğundan seçilen araç için seçenekler görüntülenmektedir. Arayüzün sağ tarafında ise Renk, Özellikler, Bileşenler, Kitaplık, CSS gibi paneller yer almaktadır. Paneller, başlıklarına tıklanarak açılıp kapatılabilir ve fare ile sürüklenerek yerleri değiştirilebilir. Bu panellerin üzerinde ise Tasarım görünümü, Kod Görünümü, Önizle ve Yayınla düğmelerinin yer aldığı görünüm çubuğu bulunmaktadır. Kod Görünümü düğmesine tıklandığında orta bölümde kod düzenleme editörü açılacaktır. Önizle düğmesine tıklandığında ise çalışmanın İnternet tarayıcılarından nasıl görüntülendiği test edilebilmektedir. Yayınla düğmesi ise bitirilmiş bir çalışmanın nasıl yayınlanabileceği ile ilgili seçenekler sunmaktadır. Arayüzün en altında ise zaman çizelgesi bulunmaktadır. En ortadaki bölüm ise tasarımın gerçekleştirileceği çalışma alanını ve sahneyi içerir. Sahne, çalışma alanının içinde bulunan beyaz bölümdür. Sahnenin sol üst köşesi koordinat sisteminde (0,0) noktası olduğu kabul edilir ve y ekseni aşağı doğru, x ekseni ise sağa doğru artmaktadır. Dolayısıyla 300px genişliğinde ve 300px yüksekliğinde bir sahnenin en sağ alt köşesi (300,300) noktasıdır.

GWD ile metin, çizim, 3 boyutlu nesne araçları ile görsel geliştirme yapılabilmektedir. Yeni belge oluşturmak için “yeni boş dosya oluşturun” iletişim kutusunda reklamlar bölümünde yer alan banner, genişletilebilir, geçiş reklamı seçeneklerinden ya da diğerleri bölümünde yer alan HTML, sayfalar içeren HTML, CSS, JavaScript ve XML seçeneklerinden uygun olan seçilir. Araçlar çubuğunda bulunan seçim aracı özellikleri kullanılarak seçilen öğeler üzerinde taşıma, boyutlandırma, döndürme ve hizalama işlemleri yapılabilmektedir. Özellikler panelinde “kimlik”, “konum ve boyut”, “çevirme, döndürme ve ölçeklendirme “, “stil”,” kenar boşluları” ve “dolgu” bölümleri bulunmaktadır. GWD ile bir dosya içinde birden fazla sayfalar oluşturmak mümkündür. Sayfa oluşturmak için çalışma alanının sol alt köşesinde bulunan açılır listeye tıklamak gerekir. Artı (+) işareti tıklanarak yeni sayfalar oluşturmak mümkündür. GWD ile sahneye HTML etiketleri eklemek çin araçlar çubuğundaki etiket aracı kullanılmalıdır. Etiket aracı ile sahneye eklenebilen div öğesi kapsayıcı bir etikettir. GWD’de bulunan çizim araçlarını (kalem aracı, oval aracı, dikdörtgen aracı ve çizgi aracı) kullanmak için araçlar çubuğundaki kalem simgesinin üzerine fare ile geldikten sonra farenin sol tuşuna basılıp birkaç saniye basılı tutulur. Sahne üzerine metin eklemek için Metin aracı kullanılmalıdır. Metin eklemeden önce eklenecek metnin özellikleri Araç Özellikleri çubuğundan değiştirilebileceği gibi, metin eklendikten sonrada eklenen metin üzerine biçimlendirme yapılabilir. Sahnede seçili öğelerin renklerini değiştirmek için Renk Paneli kullanılabilir. CSS paneli kullanılarak seçili öğelere uygulanan CSS kodları incelenebilir veya yeni CSS kodları yazılabilir. Genellikle HTML etiketleri id ya da class özelliği ile işaretlenir. Böylece CSS kullanılarak bu bölümler rahatlıkla biçimlendirilebilecektir. Bu biçimlendirme işlemi doğrudan Kod Görünümü üzerinden de gerçekleştirilebilir.

Mobil cihazlarının kullanımının artması ile farklı ekran büyüklüklerine otomatik olarak uyum sağlayabilen tasarımlara, duyarlı (responsive) tasarımlara ihtiyaç duyulmaktadır. Duyarlı düzen tamamen CSS kodları ile yazılan medya kuralları ile gerçekleştirilmektedir. GWD, kod yazmadan medya kuralı oluşturmaya olanak sağlamaktadır. Bunula birlikte CSS kodlarını öğrenmek duyarlı düzenin nasıl çalıştığını anlamaya yardımcı olacaktır. Duyarlı düzeni kullanmak için GWD ile yeni belge oluşturulurken Duyarlı Düzen seçeneğinin işaretli olduğuna emin olmak gerekir. Kullanıcı tarafından gerçekleştirilen bir eylem sonucu tetiklenen işlemlere (etkinliklere) programlama dillerinde Event Handling denir. Kullanıcının sahnedeki bir yere tıkladığında bir animasyonun başlatılması bir event handling örneğidir. DWD’de kullanabilecek etkinlik türlerinden bazıları şunlardır;

• Click
• Mousedown
• Mouseup
• Mouseover
• Mousemove
• Mouseout
• Touchstart
• Touchend
• Touchmove
• Touchenter
• Touchleave
• Toouchcancel

Etkinlik ekleme işlemi tamamen JavaScript komutları ile de rahatlıkla gerçekleştirilebilir. GWD’da JavaScript kodu yazmadan etkinlik eklemeye olanak sağlayan Etkinlikler paneli bulunmaktadır. GWD ile hızlı mod ve gelişmiş mod olmak üzere iki modda animasyon oluşturmak mümkündür. GWD bir çok uygulamada kullanılan işleri daha hızlı bir şekilde geliştirmek için hazır bileşenler sunmaktadır. Bu bileşenler ile geliştiriciler resim galerisi, harita, youtube videosu oynatma gibi işleri çok kolay bir şekilde geliştirdikleri yazılıma ekleyebilmektedirler. GWD penceresini sağ üst bölümünde yer alan önizle butonu ile geliştirilen yazılımın istenilen tarayıcı üzerinde nasıl çalıştığı izlenebilir. Geliştirme süreci tamamlanmış bir projenin sonlandırılarak uygun ortamlara yüklenmesi gerekmektedir. Bunun için önizle düğmesinin yanında bulunan Yayınla düğmesine tıklamak gerekir. Bu bölümden yerel yayınla, Google Drive’da yayınla ce Doubleclick Studio’da yayınla seçeneklerinden uygun olanı seçilir.

Komodo Edit

Komodo Edit (KE) sadece kod yazmaya odaklanmış açık kaynak kodlu, ücretsiz ve gelişmiş özelliklere sahip popüler bir kod editörüdür.KE ile C, C++, Perl, PHP, Ruby, Python, Java, HTML, JavaScript, CSS, XML, vb. gibi çok sayıda farklı programlama dili için kod yazmak mümkündür. Komodo Edit’in açılış penceresinde sol bölümde bilgisayarın sabit diskine ulaşılabilen bir bölüm ile üzerinde çalışılan projeler bölümü yer almaktadır. Bu bölümler kullanılarak sabit diskteki dosyalar veya projelerde bulunan dosyalar bulunarak açılıp üzerinde düzenleme yapılabilir. Bir web sitesi için çalışma yapmak için en uygun yöntem bu web sitesi için bir proje oluşturmaktır. Ortadaki bölümde bulunan New File seçeneği ile yeni bir metin dosyası oluşturulabilir. Yeni proje için yeni bir dosya oluşturmak için Projenin adına sağ tıklanarak Add / New File seçeneği ve dosyanın türü seçilmelidir. Yeni bir dosya oluşturduktan sonra yazılım geliştirici kodlama yaparak projesini geliştirebilir. KE, kodlama yapan yazılım gelişticiye yardımı olmak için sağladığı özellikler;

• Programlama diline göre yazılan kodların renklendirilmesi,
• Kod bloklarının açılıp kapatılabilmesi, kodların otomatik olarak tamamlanabilmesi,
• CSS özelliğinde kullanılabilecek değerlerin listelenmesi
• Etiketin son karakteri olan > işareti yazıldığı anda KE otomatik olarak < /ul > şeklinde kapatma etiketinin oluşması.

KE ile yerel diskte web sitesini geliştirip, daha sonra bu dosyaları bir FTP veya SFTP istemcisi ile sunucu bilgisayarına yüklenerek web sitesi internet ortamında yayınlanabilir. KE doğrudan server üzerindeki dosyalar üzerinde çalışmayı da mümkün kılmaktadır.

Eclipse

Eclipse, tüm dünyada çok sayıda geliştiricisi bulunan açık kaynak kodlu tümleşik bir geliştirme platformudur. Eclipse’yi güçlü kılan en önemli özelliği çok esnek bir yapısının olması çok farklı alt sistemlerin küçük bir ana çekirdek üzerinde çalışabiliyor olmasıdır. Bu esnek yapısı sayesinde Eclipse, çok farklı geliştirme ihtiyaçlarına cevap verebilecek çok güçlü platformdur. Eclipse ilk açıldığında gelen Hoş geldin (Welcome) sayfasının tüm Eclipse penceresini kapladığı görülecektir. Bu bölüm kullanılarak yeni proje oluşturma ve yardım alma gibi bazı işler yapılabilmektedir. Eclipse’in çalışma ortamında sol bölümde çalışılan projeler gösterilmektedir. Orta bölümün üst kısmında kod editörü veya görsel geliştirme ortamı bulunmaktadır. Sağ bölümde outline yazan yerde ise yazılan kodun bölümleri listelenmektedir. Alt bölüm ise problemler, Sunucular ve Özellikler ile ilgili bölümler yer almaktadır. Eclipse ile çalışılmak isteniyorsa öncelikle bir proje oluşturmak en uygun yöntemdir. Yeni Proje iletişim kutusunda Static Web Project seçeneği seçilerek ileri düğmesine tıklanmalıdır. New Static Web Project iletişim kutusunda öncelikle projeye bir isim vermek gerekir. Daha sonra ise Target Runtime bölümünden web sayfaları için önizlemenin hangi ortam üzerinde yapılacağı seçilmelidir. eni bir HTML sayfası oluşturulduğunda HTML şablonundan temel HTML kodları otomatik olarak aktarılmaktadır. Eclipse’de de Komodo Edit’te bulunan kod tamamlama özellikleri mevcuttur. Ayrıca Eclipse yazılan CSS özelliğinde kullanılabilecek değerlerin bir listesini listelemektedir. Geliştirilen web sayfalarının önizlemesini yapmak için araç çubuğunda Run düğmesine ya da dosya üzerine sağ tıkladıktan sonra Run As/Run on Server seçenekleri seçilmelidir. clipse’in açık kaynak kodlu olması ve çok esnek bir yapısının olması sebebiyle çok sayıda Eclipse temelli tümleşik geliştirme platformu bulunmaktadır. Web sayfası geliştirmeye yönelik olarak Aptana Studio ve Zen Studio tümleşik geliştirme platformları, Eclipse temelli geliştirme platformları için iki önemli örnek olarak gösterilebilir. Eclipse ve Komodo Edit dışında bir başka açık kaynak kodlu tümleşik geliştirme platformu ise NetBeans IDE’dir. Eclipse gibi gelişmiş özelliklere sahip olan Netbeans IDE ile Java yazılımları, mobil uygulamalar, C/C++ yazılımları, Web Siteleri (HTML, JavaScript, CSS), vb. hızlı ve kolay bir şekilde geliştirilebilir.