11 Mart 2015 Çarşamba

Web Tasarım



     Herhangi bir web sitesi yaparken en zorlandığımız veya uğraşmayı sevmediğimiz kısım tasarım kısmıdır. İyi ve özgün bir tasarım için CSS , HTML ve Javascript'i iyi bilmeliyiz. Eğer dinamik bir web sitesi yapıyorsak bunlara  arka planda çalışan kodlarımızı da ekleyelim. Bunların dışında telefon , tablet gibi değişen ekran boyutları için CSS yazmamız veya mobil site tasarımı yapmamız gerekiyor. Bu da sonuç olarak tasarıma ayırmamız gereken zamanı arttırıyor. Bu gibi etkenlerden dolayı piyasada çeşitli platformlar için tasarımı hızlandıran  yazılımlar , kütüphaneler mevcut. 

     Bu yazı içerisinde tasarımı hızlandıracak , görsel olarak güzel ve en önemlisi de açık kaynak çalışmalardan ve bunları deneyebileceğimiz github.io dan bahsetmeye çalışacağım. 

1) CodePen

     Bu sitede bir web sitesinde olabilecek birçok hazır tasarımı kodlarıyla birlikte bulabiliriz. Açık kaynak olduğu için kodları direk alıp kendi çalışmalarımızda kullanabiliriz. Sitenin diğer güzel özelliği ise aynı zamanda editör olmasıdır. Site içerisindeki hazır çalışmaların Html , Css ve Javascript'ini düzenleyip anında önizlemesini görebiliriz. Ayrıca üye olup veya GitHub üyeliğimizle giriş yaparak sıfırdan kendimizde tasarımlar oluşturabiliriz. Siteyi ziyaret etmek için üstteki linke tıklayarak gerçekten güzel ve farklı tasarımların mevcut olduğunu görebilirsiniz.  


    Bu sitede bir önceki gibi hazır tasarımlar yok , ama çok fazla kütüphane desteği var. Böylece kendi yazdığımız veya internette bulduğumuz farklı kütüphaneler gerektiren kodları burada sorunsuzca çalıştırabiliriz. Diğer bir güzel özelliği de herhangi bir şekilde üye olmaya gerek duymadan yaptığımız çalışmayı kaydetmesidir. Böylece yarım kalan işimizi kaydedip yukarıda oluşturduğu linki alırsak daha sonra kaldığımız yerden devam edebiliriz.

3)Page Scroll 

     Bazı sitelerde menubardan seçtiğimiz sekmeye göre sayfa aşağı veya yana doğru güzel bir efekt ile tam sayfa kayıyor. Birde buna renk değişimi eklenmişse son derce güzel oluyor. Kafamızda tam canlanmamışsa aşağıdaki linke bakabilirsiniz.


     Bu ve buna benzer birçok hazır çalışma mevcut. Bu çalışmalar yine açık kaynak ve github üzerinde kaynak kodları mevcut. Bizim yapmamız gereken ise bu javascript ve css kodlarını indirip projemize dahil etmek. Eğer yukarıdaki hoşunuza gitmemişse aşağıdan alternatiflerine de göz atabilirsiniz;




  
     Yukarıdaki gibi hazır kodları kullanıp gerçekte nasıl olduğunu görmek isterseniz aşağıdaki GitHub io kısmına da göz atabilirsiniz.

GitHub io

     Bilmeyenler için  GitHub açık kaynak kodların bulunduğu yazılımcıların kullandığı bir sosyal ağ olarak tanımlayabiliriz. Eğer hesabınız yoksa oluşturup açık kaynak ile tanışmanızı tavsiye ederim. Github io ise burada hesabı olan kişilerin çalışmalarını tanıtabileceği github üzerinde çalışan web sayfasıdır. Bu web sayfası example.github.io şeklinde olup isteyen herkes oluşturabilir. 

     Bu yazıda github io dan bahsetmemin asıl sebebi yukarıda da belirttiğim gibi yaptığımız tasarımları yayınlayıp bilgisayar , tablet ve telefon üzerinde veya farklı tarayıcılar üzerinde nasıl çalıştığını gözlemlemektir. Burada kodlarımızın herkes tarafından görülebileceğini unutmamalıyız. 

     Github hesabımız varsa çalışmalarımızı tanıtan github io sayfası oluşturmak 1 dakikamızı alacaktır. Bunun nasıl yapıldığını aşağıdaki videoyu izleyerek görebiliriz.



     Ben github sayfamı oluşturdum. Yukarıdaki 3. madde de geçen fullpage.js kullanarak kendi çalışmalarımı gösteren bir sayfa tasarlamış oldum. (son derece hızlı bir şekilde!) Aşağıdaki linkten de benim sayfama erişebilirsiniz! Şimdilik bu kadar sizlere kolay gelsin!





     

0 yorum:

Yorum Gönder