Bloğumun bu kısmında bol bol Front-End geliştirmeleri yapacağımız ve mantığını anlamaya çalışacağımız kısımdır. İlk olarak Front-End nedir? Sorusunun cevabını verelim mi? Front-End nedir? aslında son 15 yılda ortaya çıkmış ve gelişmiş bir kavramdır.
Bizim gibi 90 jenerasyonu ve meslek lisesi mezunu arkadaşların da bileceği gibi. Bilgisayar programcılığı / Veri tabanı programcılığı vs. gibi bölümlerden mezun olan arkadaşlarım döneme sığmayan birbirinden bağımsız olmayan ama bir türlü Düzgün oturmamış dersler görmüşlerdir. Herkesin durumu bir değil karmaşa yapmak istemiyorum. Bazılarımız gerçekten bu işi çok iyi yapan iyi üniversitelerden mezun olmuş çok değerli hocalar ile karşılaştık. Bunlardan biri benim için Yıldıray YALMAN hocam’ dır. Şimdiki adı Evliya Çelebi Meslek ve Anadolu Meslek Lisesi olsa da bir zamanlar adı Ümraniye Anadolu Ticaret ve Ticaret Meslek Lisesi idi. Konuyu çok dağıtmadan o zamanlara dönerek biraz harmanlayarak biraz da eğlenceli hale getirerek soruyu hemen cevaplayayım.
Front-End Nedir? sorusunun bir cevabı da; (Ön Uç Geliştirici) bir web sayfasında ki gördüğünüz tüm görselliğin kendisine denir. Yani web programlama mezunu arkadaşlarımın HTML/CSS/ o zamanlar çok da gelişmiş ve popular olmasa da JavaScript ile geliştirdikleri sayfalar idi. O zamanlar CSS3 bile yoktu. Yani işlevsiz bir şekilde web sayfalarının tasarımcıdan gelen görüntüsünde ki verileri kullanarak. (Boyutu, duracağı yerin koordinatı vs.) koda döken kişi Front-End’ci oluyor. Önceden HTML+CSS+JS bilerek bir Front-End hatta bir de bunlara işlev katmak için benim de liseden bu zamana kadar gördüğüm C# dilini eklersen Full-Stack Developer oluyordun. Türkiye’ de bu kavram çok geçerli değil şu an. Bir zamanlar bu kişilere Web-Master da diyorduk. Yani oldluğumu pek sorgulamayın.
Günümüz de ise sadece bu diller yetmiyor. Front-End nedir? ve geliştirmeleri yapmak için artık bir framework bilmeniz de gerekiyor çünkü back-end işlerin büyük bir kısmı bize yüklendi. Velhasıl temelde Front-End yani Ön Uç Geliştirici dediğimiz arkadaşlarımız sadece Web uygulaması için söylemek artık doğru değil, mobil uygulama da olsun oyunlarda olsun son kullanıcının ekranlarında gördüğü her şeyi tasarımcıdan gelen tasarıma göre kodlayan kişilere denir.
HTML Nedir?
Uzun bir giriş yaptıktan sonra artık HTML nedir bahsedebiliriz.
HTML = Hypertext Markup Language yani Hiper Metin İşaretleme Dili.
Front-End Açılımı
Ben burada biraz açmak istiyorum bu kısmı çünkü yanlış bilinenler ve çoğu yerde denk geldiğim ama eksik bulduğum, yahu bu türkçe kaynak sorununa benim de kendimce bir katkım olsun dediğim ve ayrı bir yorum getireyim dediğimden yapıyorum bunu yanlış anlaşılmasın. Yoksa benim de gerçekten çok sevdiğim bilgisine hayran olduğum büyüklerim ve yaşıtım olmasına rağmen efsane diyebileceğim arkadaşlarım var. Bunlardan başlıcalaları Engin Demiroğ, Hakan Yalçınkaya, Murat Yücedağ. Kendileri bu bloğu bir gün okursa selamlar söylüyorum büyüklerimin ellerinden de öperim. Gelelim neymiş bu HTML.
Not: Bilgisi olanlar için ufak bir videom var ; Responsive Menü Yapımı
Adından biraz tüyo veriyor ama yeterli değil. İşaretleme dili diyor en güzel ifade eden kısmı bu çünkü. Yani şunu demek istiyorum kırılma noktam burası; HTML elementler, Etiketler ve bunlara verilen görsel sınıflar(class) lar üzerinden işlem görüyor. Kafa karışıklığı olmasın diye girmediğim detayları sonra anlatacağım. Etiket darken ne kastetmiş olabilirim ki?
Tim Berners-Lee abimiz 89 yılında CERN’ de çalışırken çalışanlar arası haberleşmeyi sağlamak için bir yapı oluşturmaya karar vermiş. Bir ihtiyaçtan doğuyor yani bu işler hep 😊 Sonra diyor ki ben misal; “kismizamanliblogcu.com ibrahim ne yazı yazmışsın be. 😊 Cümlesini” yazacağım bunun sadece bir metin veya paragraf olduğunu ve ekranda öylece boş boş durmasını istiyorum dedi ve bunu <p> kismizamanliblogcu.com ibrahim ne yazı yazmışsın be </p> yapısının içerisine almış. Bu içine aldığı yapıya etiket(tag) diyoruz. Bu taglar sayesinde istediğimiz metnin, görselin, videonun ve sayamadığım birçok şeyin sayfanın neresinde durmasını istiyorsak o etiketin içine alma işlemine de işaretleme diyoruz işte. Yani alt alta bu P etiketini yazsanız ve son kelimelerini değiştirseniz HTML yukarıdan aşağıya işleyecek ve yazdıklarını browser’ da açacaktır. İşte bu kadar HTML denilen şey. Gerçekten HTML denilen şey aslında web ara yüzünde görmek istediğimiz sayfaların tasarımı kodladığımız ve parafraf elementi sen üstte dur link etiketi yani <a>tıklayın</a> böylece ekranda sadece tıklayın metni görülecek ama orası bizi bir siteye yani web sayfasına götürecek.
CSS Nedir?
Dallanarak anlatma tekniğimi seviyorum bir sonra ki dal CSS.
CSS = Cascading Style Sheet kelimelerinin açılımı = Basamaklı Stil Sayfası demek Türkçe meali. Biz de tefsirini yapalım o zaman 😊. Şair burada şunu anlatmak istemiş. Ben ki HTML sayfalarını güllük, gülistanlık, yeşillik, böceklik yapmak için gönderildim. Laf-I güzafı bir kenara bırakayım ama kurduğum cümle gerçekten işi özetliyor. Şöyle ki; CSS denilen dil HTML sayfalarına görsellik katmak için yapılmış bir dildir. P etiketini yazdık tamam ama onun rengini, yazı tipini, boşluk ayarlarını, üzerine gelindiğinde bir renk alacak mı? bu gibi soruları CSS ile veriyoruz. Yani efekt vermek ve görsellik katmak için diyebiliriz.
JS(JavaScript) Nedir?
JavaScript ise ilk olarak Brendan Eich abimiz tarafından tasarlanmış olup daha sonrasında büyük bir geliştirici topluluğu devamını sağladı.
Peki ne yapıyor bu JavaScript?
İşte buranın üstünde biraz duracağız. Çünkü çok güzel bir şey diyebilirim. Neden mi? Bunun ilk sebebi yukarıda uzun uzun bahsettiğimiz Front-End mantığının ilerlemesi için gerekliliğidir. Biraz kitabi ve kafa karıştırıcı oldu belki ama şöyle açıklayayım. JavaScript gelmeden önce sayfalar HTML olarak tasarlanıyor ve statik bir şekilde duruyordu öyle boş boş. Bizim lise zamanlarından arkadaşlarımız hatırlar; o zamanlar bir site yapmak için sayfaları kopyala yapıştır yapardık da header ve footer kısımları hep aynı olurdu içini değiştirirdik. Al sana site diye meydana çıkardık. Geriye bakınca teknolojinin çocukluktan gençlik seviyesine erdiğine tanık ettiğimizi ancak yeni fark ediyorum. Bence ilerleyen zamanlarda teknolojinin olgunluk çağlarına ereceğiz ve belki biz görmeyiz ama yaşlılık dönemlerine çocuklarımız görebilir. Merak etmiyor değilim. 😊
İşin özü; JavaScript bu statik olan sayfaları dinamik hale getirmeye yarıyor. Yani bir iletişim formu yapıldı inputları duruyor ama gönder butonu çalışmıyor. Bomboş öyle duruyor. Burada JavaScript devreye giriyor. Diyor ki; ey iletişim formu bu HTML formuna girdiğin bilgileri ver bana ben onları Back-End’ e göndereceğim. İşte bu noktadan sonra Back-End denilen yeni bir kavram giriyor… Yazılımda yeniyim ve nasıl öğrenirim sorusunun cevabını hem blogumda hem de En Ünlü Yazılım Öğrenme Platformları yazımda kendine en uygun olan platformu seçebilirsin.
