Hızlı Bir Şekilde Web Projesine Başlangıç için Araçlar #1

by C

İkinci kere ULTRAMEMS araştırma grubu için bir Matlab kodunu Web’e taşımam gerekti. Yapılan hesap makinesi belli parametreleri alıyor ve bunları kullanarak belli üç değeri hesaplıyor ve son olarak bir de bir grafik çiziyor. Bu yazımda bu projede faydalandığım araçları tanıtacağım. 

Editör

Web sayfalarını nasıl hazırladığımı soran bir çok insan oldu bugüne kadar. FrontPage ve Dreamweaver programlarını ekol olan gören bir nesil çoktan yetişti bile. Ancak herşeyin görsel dünyaya geçtiği bu yıllarda bile kod yazma bağımlılığı olan insanlar klavyeyi bir kere olsun bırakamıyorlar. Ben de kendimi bu ikinci grupta görüyorum. Dolayısıyla FrontPage ve Dreamweaver gibi görsel odaklı da çalışabilen programlardan bahsetmeyeceğim. Buna ek olarak projede kullandığım Sublime Text 2‘nin nasıl kullanıldığından da bu yazıda bahsetmeyeceğim. Sizlere sadece Sublime Text 2’yi isim olarak tanıtacağım. Kafa karıştırmayan ve oldukça anlaşılır bir arabirimi olan bir editör. Eğer dosyanın içine ne yazacağınızı/ekleyeceğinizi biliyorsanız, sizi oldukça tatmin edecek özellikleri bünyesinde barındıyor. Bu özelliklerin tanıtımı ayrıca bir yazının konusu. Bu editöre ücretsiz alternatif olarak NotePad++‘ı deneyebilirsiniz. Notepad++ da Sublime ayarında pratik özelliklere sahip. Üçüncü olarak devasa bir program olan Aptana mevcut. Eclipse tabanı üzerinden geliştirilen Aptana, Web programlama dillerini destekleyen kocaman bir IDE. Sahip olduğu onlarca özelliğe rağmen benim deneyimlerimde sürekli hantal kaldığı için kullanmanızı çok fazla öneremiyorum. Ancak yine de ondan verim alabilirsiniz. Komodo Edit ise kullanılabilecek bir başka editör. Bütün hepsi eklentilerle zenginleştirilebilen editörler ve herhangi birini veya bir başkasını projenize başlarken kullanabilirsiniz.

Boş HTML5 Şablonu

Projeye hızlıca başlayabilmek için HTML5 Boilprate isimli  içinde ön yüze ait çeşitli iyileştirmeler barındıran boş bir HTML dökümanı açmam gerekti. HTML5 Boilprate, ön yüz geliştiricisi olarak çalışan bir grup insanın çeşitli teknikleri HTML5’e uyumlu boş bir html dosyasında bütünleştirmesi sonucu ortaya çıkan bir proje. Boilprate’in sunduğu boş sayfada tarayıcı özelliği algılamada kullanılan Modenizr’ı, jQuery kütüphanesini, tarayıcının varsayılan CSS’ini sıfırlayıcı CSS kodunu, HTML5’in semantik(anlamsal) etiketlerini desteklemeyen tarayıcıların davranışlarını düzenleyen CSS kodlarını ve daha bir sürü şeyi bulabilirsiniz. Bu cümlede kafanız belki karışmış olabilir. Blogumda bunları tanıtmayı planlıyorum ancak bu yazıda değil. Boilprate’in sunduğu çoğu özelliğe projenin ihtiyacı olmadığı için sade bir sürümünü Initializr sitesinden edindim. Mesela Google Analytics kodu gerekmiyordu.

Grafik Çizimi

Bir Web uygulamasıyla grafiğin nasıl çizileceği konusunda çok bir fikir sahibi değildim. Bugüne kadar denk geldiğim sitelerde her zaman Flash kullanılmıştı ama Flash bilmediğim için bunu Web’e uygun bir şeyle halletmem gerektiğini düşündüm. Web’te kısa bir araştırma sonucunda High Chart isimli bir Javascript framework’ü(bunun iskelet, sistem karşılıkları var) buldum. Bu sistem SVG görüntüleme teknolojisini kullanıyor. Internet Explorer’ın eski sürümleri için ise VLM’e geçiş yapıyor. SVG, ölçeklenebilir grafikler. Yani biz bunları ne kadar büyütürsek büyütelim vektör tabanlı oldukları için herhangi bir çözünürlük deformasyonuna uğramıyorlar. Diğer yandan jpeg gibi fotoğraf verisi saklamaya da elverişli değiller. SVG konusunda Türkçe pek bilgi bulunmamakta ve denk geldiğim Türkçe sitelerde de çok büyük oranda kullanılmamakta. Internet Explorer’ın SVG’yi oldukça geç desteklemeye başlaması, SVG’nin diğer resim biçimlerine göre oluşturulmanın nispeten zor olması ve projenin gerçekten SVG’ye ihtiyaç duymaması veya SVG’den bil haberdar olunması, SVG’nin yaygın olarak kullanılmasını engellediği kanaatindeyim. Ancak SVG görsellerini Vikipedi sitesinde görebilmeniz mümkündür.

Bir sonraki yazıda görüşmek dileğiyle.