Front-end terimi, Türkçede önyüz anlamına gelmektedir. Bir web sitesi oluşturulurken geliştirilen görünüm ve içerik ile alakalı tüm görsel, işitsel, tasarımsal kısımları kapsayan bir işlemdir. Web sitesine girdiğinizde karşılaştığınız renkli temalar, arka fonlar, yazı tipleri, tasarımsal görseller ve bunların kullanıcıya hitap edebilecek biçimde uyumlanması, sayfaya yerleştirilmesi gibi işlemlerin hepsi front-end yani önyüz olarak adlandırılır. Bu işi yapan ve geliştirenlere de front-end developer yani önyüz geliştirici denir. Bir web sitesi oluşturulurken olaya tıpkı kamera önü ve kamera arkasından oluşan bir film seti gibi bakılabilir. Kamera önü Front-end, kamera arkası da Back-end terimlerine karşılık gelmektedir. Bir filmde izleyici olarak gördüğümüz kamera önündeki her şey; oyuncular, filmin çekildiği mekânlar, olaylar front-end’e örnek olarak verilebilir. Kamera arkasında yer alan teknik ekipler ve ekipmanlar ise Back-end’e örnektir.

Bir Front-end Developer olabilmek için bu iş ile ilgili bazı terimlere hâkim olmak ve gerekli donanımlara sahip olmak gerekmektedir. Bu donanımlara sahip olunabilmesi için, özellikle sıfırdan başlayacak olan geliştirici adayları açısından bu yazımız önem arz etmektedir. Kendimizi kullanıcı olarak ele aldığımızda, ilk olarak web sitelerinde karşılaştığımız, sayfalarda gözümüze çarpan tüm aktivitelerin başından sonuna dek son derece incelikle ve uzun süreçler sonucunda elde edildiğini bilmemiz gerekir. Tasarımlara başlamadan önce verilen emeklerin, tasarımlar oluşturulurken verilen emeklerden daha detaylı olduğu aşikârdır. Bu sebeple, başlamadan önce yapılacak araştırmaların detaylı ve çok yönlü olmasına dikkat edilmelidir.

Front-end Developer Ne İş Yapar?

Front-end geliştirici, bu iş için gerekli HTML, CSS ve JavaScript adında üç ana program dilini kullanarak bahsetmiş olduğumuz web kullanıcıları tarafından ilk karşılaşılan sayfanın tüm tasarımlarını ve oluşumunu gerçekleştirebilen kişidir. Kullanılan bu arayüzlere “dil” denmesinin son derece isabetli bir özelliği vardır. Bu programlar bildiğimiz herhangi bir Türkçe, İngilizce, Almanca gibi farklı karakterleri ve sözcükleri bir araya getirerek kendine has bir yazım ve imla oluşturmuştur. Bildiğimiz dillerden tek farkı, çoğunlukla İngilizce kelimelerden oluşan kodlar olması ve bu kelimeleri değişik karakterlerle bir arada kullanarak kendine ait farklı bir dil oluşturmasıdır.

Aşağıda bir front-end geliştiricide yer alması gereken donanımsal ve bilimsel özellikler ile yapabildikleri işlemler sıralanmıştır.

Her şeyden önce bir front-end geliştiricinin bahsetmiş olduğumuz bu üç ana program geliştiricinin ne anlama geldiğini ve ne işe yaradığını, yazımızdan yola çıkarak sonrasında akademik çapta bilgilerden yararlanarak araştırmalıdır. En önemli başlangıç budur.

Front-end’ in kendine ait bölümleri bulunur. Örneğin metinlerle, görsellerle ilgili düzenlemeler; yazı tipi, yazı fontu, rengi, görünümü, görselin boyutu ve fonu gibi konuları barındırır. Bunun dışında yazılan metinlerin ve görsellerin sayfaya yerleştirilmesi ve sayfanın yapılandırılması ile ilgili konular başka bir alt bölümdür. Bu alt bölümle uğraşmak istiyorsanız JavaScript dilini biliyor olmanız yeterli olacaktır. Diğer arayüzleri kullanmanıza gerek yoktur. Ancak metin ve görselleri oluşturacaksanız bu üç dili de bilmeniz gerekir. Tasarımcı unvanıyla çalışmalar yapmayı düşünüyorsanız tek bir dilde uzmanlaşmanız yeterli olacaktır.

Araştırmalar yapıldıktan sonra, geliştiricileri kullanabilmek için kodlar yazmaya başlanmalıdır. Bu evreye geçebilmek için araştırmaların sıkı ve sabırla yürütülmüş olması gerekmektedir.

Kodlar yazılmaya başlandıktan sonra, oluşumu sağlanmış web sayfalarından ziyade, henüz başlanmamış ya da tamamen bitirilmemiş, gelişimi ve düzenlenmesi üzerinde durulan web sitelerinde çalışmalara başlamak gerekir. Bitirilerek kullanıcılara sunulmuş ve üzerinde yalnızca düzeltmeler yapılan web sayfalarında, henüz yeni öğrenmiş olduğunuz ve pratikte kullanmadığınız teorik bilgileri kullanabilmeniz mümkün olmayacak ya da zorlanmanıza sebep olacaktır. O nedenle tamamen basit kodlamalarla oluşturabileceğiniz komutlarla bir web sayfası yaratmayı deneyebilirsiniz.

Front-end Developer Olmak İçin Bilmeniz Gerekenler

  • Meraklı
  • Araştırmacı
  • Sorunlara çözüm üretebilme
  • Yabancı dil bilgisi

Sahip olmanız gereken yetenekler arasında sayılabilir.

Front-end geliştirici olabilmek için kullanılan donanımsal programlar konusunda detaylı bilgiyi bu başlık altında verebiliriz. HTML, CSS ve JavaScript. Bunlar birer geliştirici program olup web sitesinin bahsettiğimiz gibi kullanıcıya görünen kısmının tasarımında ve yazılımında kullanılırlar.

1. HTML

HTML (Hyper Text Markup Language), web sitesinin front-end’ini oluşturan yazı, görüntü, video gibi verileri sayfaya oturtabilmek için kullanılan bir işaretleme aracıdır. Amacı, sitenin görünümünü istenilen ve hatasız biçimde tasarlayabilmek ve kullanıcıların arama motorlarında, web sitesinde yer alan içerikle alakalı bir arama yaptığında düzgün bir şekilde karşısına çıkarabilmektir. Tüm bunları yapabilmek için çeşitli komutlar barındırır. Bu komutlar büyüktür (>) ve küçüktür (<) işaretleriyle verilir. Konulmak istenen içeriğin başına ve sonuna bu işaretleri yerleştirerek komut verilmiş olur. HTML, terimsel açıdan bir program dili olarak adlandırılmayabilir. Esas itibariyle bu komutlar için tasarlanmış bir ana programa program dili denilir. HTML, bu ana programın içine konumlandırmış olarak çalıştırılabilir. HTML standartları, W3C (World Wide Web Consortium) yani “www” uzantısını oluşturan dünya çapında bir sanal ağ birliği tarafından oluşturulmuştur. Son sürümü HTML5’ tir.

2. CSS

CSS (Cascading Style Sheets) basamaklı stil şablonları olarak da bilinen arayüz ise HTML ’ye ek olarak kullanılan bir web arayüz geliştirme dilidir. HTML işaret dili yazarken yazılan arayüzü geliştirici ve ek anlatılarla komutlar sağlayıcı imkânlar içerir. Bir metin komutu yazıldıysa bu metnin nasıl ve ne biçimde olacağının belirleyebilmek için kullanılır. Örneğin; metnin yazı stili, puntosu, rengi, içerdiği şablonları gibi sunulması istenen tarzların yapılabilmesini sağlar. Aynı zamanda sayfadaki metinler hariç var olan içerikteki görsel tasarımlar için de kullanılan renkler ve biçimler arasındaki uyumu da gerçekleştirir. Her bir yazı tipi, şablonu, görsel rengi için ayrı ayrı çalışmalarda bulunmak yerine bunların hepsi için yalnızca bir kez komut üretip hepsini tek bir sayfada toplayabilmeyi sağlar. CSS komutları, HTML ‘ye ek olarak kullanılabildiği gibi bağımsız kodlarla yazılan komutlar olarak da kullanılabilir. “<body>” veya “<head>” olarak yazılan kod biçimlerinde bölümleri bulunur. Bu bölümler, tek bir kez kod yazılarak bu kodun kaydedilmesini ve farklı web sayfalarında kullanılabilmesini sağlar. Kodların tek bir sayfada saklanması ve bu sayfanın her web sitesi için yazılan HTMLkodları için kullanılmasına olanak verir. Böylelikle her bir HTML için ayrı ayrı CSS kodu oluşturulmasına gerek kalmaz. Ek olarak HTML uzantılarının ayrı tarayıcılar için uyumlaştırılmasında da kullanılır. Örneğin arama motoruna araştırmak istediğiniz anahtar kelimeyi yazdığınızda bunun web sitesinde yer alıp almadığını test eder. Bu testi yapabilmek için kullanılan kodlar bütünü CSS‘de yazılır.

3. JAVASCRIPT

JavaScript; web arayüz geliştirme işlemleri sırasında çokça kullanılan bir programlama aracıdır. Betik denilen, web tarayıcısı ile istemci arasındaki bağlantıyı sağlayan çalıştırıcılar vesilesiyle web sitesinin içeriği ile kullanıcıyı buluşturma görevini üstlenir. Bunun yanı sıra kullanıcının tercih etmiş olduğu tarayıcı ile aradığı anahtar kelimenin sunucusunu birbirine bağlamak, web sayfasında kullanılan içeriklerin düzenlenmesi ve değiştirilmesi gibi işlevleri de üstlenir. Sunucu ve kullanıcı arasında herhangi bir senkronizasyon sorunu olduğunda devreye girer ve sunucu ile iletişime geçer. Yazılımı “C Programlama” sistemi ve “Self” ve “Scheme” adındaki programlardan esinlenerek gerçekleştirilmiştir. İçerdiği bu kapsamlı görevleri neticesinde arayüz geliştiricileri tarafından oldukça sık başvurulan bir program dilidir. Web sitelerinde sayfaların devamlı olarak geliştirilmesini sağlayabilmek için HTML kodları içerisine serpiştirilmiş olarak bulunur.