Ön Uç Web Geliştirmeye Giriş
Web geliştirme, pek çok farklı bilgi ve beceriyi bünyesinde barındıran karmaşık bir süreçtir. Bu alanda kariyer yapmak istiyorsanız yol haritanızı doğru belirlemeniz gerekir. Gerekli yetkinlikleri edinmek için kendinize yeterli zamanı tanıyın. Şunu önceden belirtmekte fayda olacaktır; web geliştirmeye yeni başlayan biri olarak ilk etapta bir Facebook kodlayabilmeyi beklemeyin, bunun yerine kendi kişisel web sitenizi geliştirmeyi hedeflemek daha doğru bir tercih olacaktır. Bu bölümde sizinle birlikte ilk websitenizi geliştirirken takip etmeniz gereken yol haritasını ve sahip olmanız gereken yetkinlikleri inceleyeceğiz. Hadi başlayalım!
Web Geliştiricisinin Alet Çantası
İster çok büyük bir e-ticaret uygulaması geliştiriyor olun ister kendi kişisel websitenizi; atacağınız ilk adım, geliştirme ortamınızı kurmak olacaktır. Öncelikle bir web geliştiricisinin sahip olması gereken araç setlerinin neler olması gerektiğini inceleyelim.
- Bir bilgisayar: Web geliştirme yapabilmek için güncel donanım konfigürasyonlarına sahip güçlü bir masaüstü yada dizüstü bilgisayara sahip olmanız gerekir. Özellikle, hızlı ve rahat yazabildiğiniz bir klavyeye sahip olmasına dikkat edin!
- Kod editörü: Web geliştiricisi olma yolunda en çok kullanacağınız araç, kod yazarken size kolaylık sağlayacak bir metin editörü olacaktır. Piyasada bu amaçla kullanabileceğiniz pek çok güçlü yazılım bulunmaktadır. Visual Studio Code, Atom, WebStorm, Sublime Text ve Brackets yaygın kullanılan metin editörlerinden bazılarıdır. Eğer özellikle kullanmayı tercih ettiğiniz favori bir kod editörünüz yoksa Visual Studio Code kullanmanızı öneririm.
- Web tarayıcısı: Yazdığınız kodu test etmek ve hata ayıklamak için bir web tarayıcısına sahip olmanız gerekir. Chrome, Firefox, Edge (Internet Explorer), Safari ve Opera en çok kullanılan tarayıcılardır. Bir geliştirici olarak size tavsiyem, yazdığınız kodu mümkün olan en çok sayıda tarayıcıda test edin. Ayrıca kodladığınız web sayfalarının mobil cihazlarda ve eski tarayıcılarda nasıl bir performans sergilediğini de test etmeyi unutmayın. Bu konulara yeri gelince detaylı olarak değineceğim.
- Grafik editörü: Geliştirmek istediğiniz web sitesinin arayüzünü ve grafiklerini tasarlarken bir grafik editörüne ihtiyacınız olacaktır. Photoshop, Adobe XD, Sketch, Figma, Gimp ve Krita gibi pek çok güçlü alternatif arasından favori grafik editörünüzü seçebilirsiniz. Eğer web tasarımı konusunda kendinizi geliştirmek isterseniz, yine AKADEMA kapsamında vermekte olduğum Kullanıcı Deneyimi ve Arayüz Tasarımı dersine katılmanızı öneririm.
- Sürüm kontrol sistemi: Yazılım projelerinizde dosyaları yönetmek, ekiple işbirliği yapmak, kodlarınızı paylaşmak ve kodlarınızdaki çakışmalardan kaçınmak için kullanılan bir çözümdür. Git, günümüzün en popüler sürüm kontrol sistemidir. Web projelerinizde, Git sürüm kontrol sisteminden yararlanmak isterseniz GitHub isimli popüler kod barındırma hizmetini kullanabilirsiniz.
- FTP istemcisi: Türkçe karşılığı dosya transfer protokolü olan FTP (File Transfer Protokol), internete bağlı iki bilgisayar arasında dosya transferini mümkün kılan bir protokoldür. Web barındırma hizmeti sunan firmaların tamamına yakını, web sitenizi yayınlamanız için FTP'den yararlanır. FileZilla, Cyberduck ve Fetch gibi popüler FTP istemcilerinden birini kullanarak web sitenizi kolaylıkla yayınlayabilirsiniz.
- Kütüphaneler (Library), Şablonlar (Template) ve Çerçeveler (Framework): Web geliştirme süreçlerinde, ortak işlevselliği arttırmak ve yeniden kullanılabilirliği en üst düzeye çıkarmak için sıklıkla kütüphanelerden (jQuery, Bootstrap), şablonlardan (ThemeForest) ve çerçevelerden (Angular, React, Vue) faydalanılır.
Web geliştirme süreçlerinde kullanılan araçlar tabiki bunlarla sınırlı değil. Geliştirmek istediğiniz web sitesinin yapısına, biçimine ve kapsamına bağlı olarak bu araç setlerini çeşitlendirmeniz gerekebilir. Ama profesyonel düzeyde bir web sitesi geliştirmek için bunlar çoğunlukla yeterli olacaktır.
Tasarım Kararları
Web sitenizi kodlamaya başlamadan önce, bir planınızın ve tasarımınızın olması gerekir: Web sitenizde hangi bilgileri, nasıl sunacaksınız? Sayfalar arasında gezinmek için kullanıcılara ne tür bir işlevsellik sağlayacaksınız? Web sitenizinde kullanacağınız yerleşim düzenleri, renkler, yazı tipleri ve grafikler neler olacak?
Aslında tüm bu tasarım kararları, web geliştiricisinden daha çok bir web tasarımcısının sorumluluğundadır. Pek çok orta ve büyük ölçekli web projesinde, web tasarımı ve geliştirilmesi için roller ayrıştırılır. Eğer böyle bir projede geliştirici olarak görev alırsanız, çok büyük olasılıkla, geliştirmeniz istenen web sitesinin tüm görsel tasarımı size başka bir tasarımcı tarafından sağlanacaktır.
Eğer bir web projesinde sizden hem geliştirme hem de tasarım yapmanız bekleniyorsa önünüzde iki seçenek olacaktır: (1) Adobe XD gibi bir grafik editörü kullanarak sıfırdan özgün tasarım yapmak (2) Ücretli yada ücretsiz olarak elde edebileceğiniz bir web şablonu kullanmak.
Dosya Yönetimi
Bir web sitesi; kodlar (html, javascript, json), stiller (css, less, sass), metinler ve medyalar (görsel, video, ses, animasyon) gibi çok çeşitli dosyaların bir araya getirilmesiyle oluşturulur. Bu süreçte kullanacağınız dosyaları, mantıklı bir yapıda ve bir bütün içerisinde saklamanız gerekir. Bu konuda size bazı tavsiyelerim olacak:
- Bir web sitesi üzerinde çalışırken, ilgili tüm dosyaları tek bir klasörde tutun. Web jargonunda root yani kök dizin olarak adlandırılan bu klasörü, bilgisayarınızda kolay erişebileceğiniz her hangi konumda saklayabilirsiniz. Örneğin; bilgisayarınız masaüstünde veya işletim sisteminizde oturum açtığınız kullanıcı hesabının ana dizininde Projeler isimli, -web projelerine özel- bir klasör oluşturun. Ardından bu klasörün içerisine geliştireceğiniz her bir web sitesi için yeni bir klasör (web-projesi-01 veya WebProjesi01) ekleyin.
- Web projelerinizde kullanacağınız tüm klasörleri ve dosyaları isimlendirirken lütfen; websitesi-01, dosya-adi.html, dosya_adi.jpg veya DosyaAdi.png gibi Türkçe, özel karekter ya da boşluk içermeyen bir isimlendirme formatı kullanmaya özen gösterin.
- Önerilen dosya isimlendirme formatlarından hangisi seçerseniz seçin, web projenizin tamamında aynı formatı kullanın.
- Web sitenizde kullanacağınız dosyaları belli bir mantık dahilinde sınıflandırmak dsoya yönetimi için harcadığınız zamanı en aza indirecektir. Web geliştiriciler arasında en yaygın kullanılan klasör yapısı şu şekildedir:
- index.html: Web sitesi ilk açıldığında görüntülenecek içeriği oluşturmak için kullanılır.
- images veya img klasörü: Web sitesindeki görselleri saklamak için kullanılır.
- styles veya css klasörü: Web sitesindeki olan stil dosyalarını saklamak için kullanılır.
- scripts veya js klasörü: Web sitesindeki kod betiklerini saklamak için kullanılır.
Şekil 1. İlk web sitemizin klasör yapısı
HTML
Hypertext Markup Language (HTML), web içeriğimizi yapılandırmak amacıyla kullandığımız koddur. HTML; h1, p, img vb. gibi etiketleri (tag) kullanarak web içerikleri oluşturabilmemize olanak sağlar. HTML olmadan web'de birşey geliştiremeyiz. HTML'ye ilişkin tüm detayları ikinci modülde inceleyeceğiz.
CSS
Cascading Stylesheets (CSS), web sitemizi görsel olarak biçimlendirmek için kullandığımız koddur. Hangi yazı tipini, yerleşim düzenini, renkleri vb. tüm görsel biçimi css kullanarak yapılandırırız. CSS ile çalışmaya üçüncü modülde başlayacağız.
JavaScript
JavaScript, web sitemize interaktivite eklemek için kullandığımız nesne yönelimli bir programlama dilidir. Tıklama, sürükleme, form gönderme, dinamik stil efektleri oluşturma vb. gibi kullanıcıların web içeriği ile etkileşime girmelerini sağlayacak her türlü aktivite JavaScript aracılığıyla geliştirilir. JavaScript ile web sitemize etkileşim katmaya dördüncü modülde başlayacağız.