Bir web sitesi kodlayabilmek için en temelde html ve css bilmek gerekir. Web sitesi kodlarken sitenin ne kadar işlevsel olmasını istiyorsanız o kadar çok bilgi öğrenmelisiniz. Ben sadece tasarım olarak kodlayıp satacağım işlevselleştirmesini başkası yapsın da diyebilirsiniz sıfırdan her şeyi bana ait dinamik bir web sitesi kodlamak istiyorum da diyebilirsiniz. Aşağıda bulunan başlıklardan iki türlü de nasıl ilerleyeceğinize ulaşabilirsiniz.
Sıfırdan Yazılım Nasıl Öğrenilir?
Sıfırdan Yazılım Ne Kadar Sürede Öğrenilir?
Yazıya geçmeden önce yukarıda bulunan başlıklar ilginizi çektiyse bu yazıları da okumanızı tavsiye ederim. Bu yazıda web sitesi nasıl kodlanır konusunda aklınızda soru işareti kalmayacak şekilde bilgiler öğrenebilirsiniz. Ayrıca yazılım alanında bulunan programlama dili konusunda hiçbir şey bilmeden nasıl dinamik web siteleri kodlayabileceğinizi de öğrenebilirsiniz.
Sadece Web Sitesi Tasarımları Nasıl Kodlayabilirim?
Web sitesi alanında Front-End ve Back-End kavramları ile karşılaşacaksınız. Bu kavramlardan Front-End işin tasarımsalkısmıyken Back-End işin dinamik sunucu taraflı kısmıdır. Tabii ki ikisini de öğrenebilirsiniz ama büyük bir sabırla ilerlerseniz. Sadece tasarımsal kodlamalar yapmak için kütüphaneler ile birlikte neredeyse html ve css konusunda fazla ilerlememek bile yeterli olabiliyor.
İlk olarak izlemeniz gereken yol html => css => javascript şeklinde olmalı. Hangi yolu izlemek isterseniz isteyin ilk olarak bu üçünü öğrenmek neredeyse zorunlu diyebilirim. Örneğin bir web sitesinde kare bir kırmızı kutu oluşturmak istiyorsunuz. Kutuya tıklandığında da renginin sarı olması gerekiyor. Bu kırmızı kutunun iskeletinin oluşturulması html, renk ve genişliğinin ayarlanması css ve tıklandığında renginin değişmesi ise javascript ile ilgilidir. Örneğin bir html koduna bakalım.
<a href=”https://www.zfcakademi.com/2021/04/javascript-ogrenmek-zor-mu.html” target=”_blank”> Bana tıklarsan https://www.zfcakademi.com/2021/04/javascript-ogrenmek-zor-mu.htmladresine gidersin. </a>
Örneğin yukarıda görmüş olduğunuz kod bir html kodu. İçerisinde bulunan yazıya tıkladığınızda sizi href kısmındaki adrese götürecek. Target özelliği ise yeni bir sekmede açılması gerektiğini ifade ediyor. Gayet işlevsel ve güzel bir buton olarak gözükebilir kod sayfasında ancak görüntüsü gerçekten kodda olduğu kadar hoş değil. Bu a etiketinin rengini değiştirmemiz yazı büyüklüğünü arttırmamız ve standart linklerle birlikte gelen yazı altındaki çizgiyi kaldırmalıyız.
Ancak bu kısımlarda css kullanmamız gerekiyor. Şimdi etiketi tekrar alalım.
<a href=”https://www.zfcakademi.com/2021/04/javascript-mi-c-m-hangisini-ogrenmeliyiz.html” target=”_blank” class=”deneme”>
Bana tıklarsan https://www.zfcakademi.com/2021/04/javascript-mi-c-m-hangisini-ogrenmeliyiz.htmladresine gidersin.
</a>
Bu sefer sizin de farkedebileceğiniz bir farklılık olarak class ekledik. Bu clas ile şekillendirmek istediğimiz şeyi seçeceğiz. Css kullanarak yazı altındaki çizgiyi kaldıralım, yazı rengini kırmızı yapalım ve yazı fontunu biraz büyütelim.
.deneme {
color: red; text-decoration: none; font-size: 35px; }
Bu kodu eklediğimizde de aşağıdaki resimde gördüğünüz gibi bir görüntü ile karşılaşıyoruz.
Gördüğünüz gibi öğrenebileceğimiz birkaç css ile çok güzel şekillendirmeler yapabiliyoruz. İşin sadece bu kısmıyla bile tasarımlar kodlayıp rahatlıkla satabilirsiniz. İşin Back-End tarafında kodlama yaparken Front-End tarafı ile uğraşmak çok ağır gelebiliyor. İşin bir tarafına odaklanıldığında da ortaya tasarımsal olarak hoş görüntüler ortaya çıkamayabiliyor.
Javascriptten de biraz bahsedecek olursak herhangi bir web sitesine girdiğinizde menüyü düşünebilirsiniz. Belki masaüstü ya da laptoptan girdiğinizde menü direk açık olarak gelebilir ancak mobilden girdiğinizde genellikle kapalı bir şekilde olur ve siz bir bar ikonuna tıkladığınızda menü açılır. İşte javascript de tasarım anında burada devreye giriyor. Bu üçünü öğrenerek tasarımsal olarak neredeyse her şeyi yapabilirsiniz. Tabii ki burada gösterdiğim kodlar sadece sizde bir fikir oluşması içindi. Bu kodları yazmayı iyi bir eğitmenle öğrenmeniz sizin geleceğinizi değiştirebilir.
Zamanla web sitesi kodlayan kişiler bu alanda kolaylıklar sağlamak için kütüphaneler oluşturdu. Tasarımsal olarak örnek vermek gerekirse az önce deneme olarak verdiğimiz class ı btn btn-dark olarak verdiğimizde bize direk css ile rengi font büyüklüğü ve ufak animasyonu ayarlanmış bir buton geliyor. Hiçbir css kodu yazmamıza da gerek kalmıyor. Tabii ki değiştirmek istediğiniz özellikleri sonradan ekleyerek yapıyı bozmadan değiştirebiliyorsunuz. Gerçekten çok büyük bir kolaylık sağlayan kütüphane.
Kısaca web sitesi nasıl kodlanır başlığının açıklaması bu şekildeydi. Html, css ve javascript öğrenmeniz tasarım alanında size yeterli olacak diyebilirim. Tabii ki kod kısmında. Tasarımları Adobe XD gibi yazılımlarda yapıp koda çevirmeniz tasarımcı olmanız için çok büyük bir adım.
Back-End Alanına (dinamik işlerin döndüğü alan) Nasıl Başlayabilirim?
Bir önceki başlıkta javascript ile ilgili konuşmuştuk. Şu anda girdiğiniz neredeyse her web sitesinde javascript kodları bulunuyor. Bu da demek oluyor ki javascript neredeyse her tarayıcıda ve sunucuda çalışan çok iyi bir dil. Bu dili bir önceki bölümde tasarımsal olarak anlatmıştık. Zamanla javascript bir programlama dili haline geldi. Eskiden javascript kodları sadece tarayıcıda çalışan tarayıcı kapandığında da duran kodlardı. Şimdi ise artık javascript ile dinamik web siteleri kodlayabiliyoruz. Node.js ile çok güçlü dinamik web siteleri kodlayabilirsiniz.
Back-End alanına girdiğinizde ilerlemek için önünüzde bazı seçenekler olacak. Web alanında html ve css öğrendikten sonra tabii ki biraz da javascript ile artık bir yol seçmeniz gerekiyor. Örneğin c# ile mi javascript ile mi ya da php ile mi ilerleyeceksiniz belirlemelisiniz. Her bir programlama dilinin kendine göre avantajları ve dezavantajları var ancak bu yazının konusu size bir yol göstermek olduğundan bu konulara girmiyorum.
Javascript mi C# mı Hangisini Öğrenmeliyiz?
Yukarıdaki yazımı inceleyerek bildiğim iki programlama dilinin de kendinize göre avantaj ve dezavantajlarını inceleyebilirsiniz. Dinamik web sitesinden kastıma gelince de bir veri tabanınızın yani bir deponuzun olduğu web sitelerinden bahsediyorum. Örneğin bir siteye kaydolurken web sitesine verdiğiniz ve bilmeden verdiğiniz tüm bilgiler veri tabanına kaydedilir. Kaydedilen bu bilgiler siz giriş yaparken ya da web sitesinde gezinirken gizliden gizliye kullanılır. İşte işin dinamik dediğimiz kısmı da tam olarak bu diyebiliriz. Javascript öğrendikten sonra MySQL, MsSQL gibi veri tabanı çeşitlerini de öğrendiğinizde node.js ile çok kolay bir şekilde dinamik web siteleri oluşturabilirsiniz.
Veri tabanı konusunda da çeşitlilik sebebiyle korkmanıza hiç gerek yok. Genel olarak veri tabanlarından bir şey istenirken ya da yazılırken kullanılan sorgular neredeyse aynıdır. Zaten c# ile devam ettiğinizde link sorguları kullanabileceğinizden veri tabanı türü ve soru yazma şekli fark etmiyor. Javascript kullandığınızda node.js kısmında da link sorgularını kullanabileceğiniz kütüphaneler bulabilirsiniz.
Dinamik Bir Programlama Dili Bilmeden Dinamik Bir Web Sitesi Nasıl Kodlarım?
Dinamik bir programlama dili bilmeden web sitesi kodlamanın birçok yolu var. Bu yollardan en kolayı da Blogger diyebilirim. Bu kısımda wix gibi hazır site yapabileceğiniz yerlerden bahsetmeyeceğim. Bahsedeceğim şey kendiniz nasıl kodlayabilirsiniz? Sorusunun cevabıdır. Blogger altyapısını bu yazıyı yazmadan tam 6 ay öncesinde javascript öğrendiğimde araştırmaya başlamıştım. Şimdi ise dinamik siteler kodlayabiliyorum. Sürenin gözünüzü korkutmasına hiç gerek yok. Blogger tema kodlama ile ilgili neredeyse hiç kaynak yok diyebilirim. Sıfırdan nasıl kodlayacağınızı ya da nelere dikkat edeceğinizi belirten kaynaklardan bahsediyorum. Ben de kaynak olması açısından Blogger sıfırdan tema nasıl kodlanır konusunu ele alan bir web sitesi kurdum.
Blogger.zfcakademi.com
Yukarıdaki iki linki incelerseniz siz de sadece html ve css bilerek dinamik temalar kodlayabilirsiniz. Tabii ki javascriptte öğrenmek çok önemli bir adım olacaktır. Ben altı ayda yapmış olabilirim ancak javascript biliyorsanız bir gün içerisinde Blogger.zfcakademi.com adresinden tema kodlayabilirsiniz. Bunlara alternatif olarak heroku gibi platformları da araştırabilirsiniz.