Adım Adım Nasıl Web Yazılımcısı Olunur?

“Web tasarım ile uğraşmak istiyorum, nereden başlamalıyım?” Bu soruyu özellikle öğrenci arkadaşlarımdan çokça duyduğumdan kısa ve öz olarak üzerinde durmak istedim. Malum, zamanımız değerli, bir an önce gözle görülür bir şeyler çıkarmalıyız. Hele çok hevesliysek bu soru daha da anlamlı ve ciddi hale geliyor. Bu yazımda işin teknik detayında boğulmadan, web dünyasında karşınıza çıkacak konuları, sorunları ve terimleri anlatmaya çalışacağım.

“Web tasarım ile uğraşmak istiyorum, nereden başlamalıyım?”

Bu soruyu özellikle öğrenci arkadaşlarımdan çokça duyduğumdan kısa ve öz olarak üzerinde durmak istedim. Malum, zamanımız değerli, bir an önce gözle görülür bir şeyler çıkarmalıyız. Hele çok hevesliysek bu soru daha da anlamlı ve ciddi hale geliyor. Bu yazımda işin teknik detayında boğulmadan, web dünyasında karşınıza çıkacak konuları, sorunları ve terimleri anlatmaya çalışacağım.

Web Nasıl Çalışıyor?

Web üzerine çalışacaksanız öncelikle iyi kötü arka planda işler nasıl yürüyor bilmeliyiz. En azından şu soruya cevap bulabilmeliyiz: “Tarayıcıya adresi yazıp enter’ladığımızda nasıl oluyor da istediğim sitenin bilgileri karşıma geliyor?”

Tarayıcıya adresi yazıp enter dediğimizde öncelikle arka planda bir paket oluşturulur ve bu paket istediğimiz sitenin barındığı sunucuya (server) gönderilir. Paketin içerisinde bizim IP’mizden, kullandığımız tarayıcıya, işletim sistemimizden, istek yaptığımız sayfanın bilgisine kadar çeşitli bilgiler saklanmıştır. Server da bir internet ağı üzerinde bir bilgisayar olduğuna göre paketimiz nasıl olacak da yolu bulacak? Bu aşamada bilgisayarımız DNS Serverlar ile haberleşerek aradığı alan adına (domain) ait IP bilgisini elde eder. Sonra bu IP adresi ile de paket postalanır.

Paket sunucuya ulaştığında paketin içeriği, istek yapılan adres gibi bilgiler göze alınarak belirli işlemler tetiklenir. Örneğin sunucu 80 portundan istek yapıldıysa bunu Apache (web server yazılımı) programına paslar. Php dosyasına istek yapıldıysa php yorumlayıcısı çalışır. Gerekiyorsa veritabanı (database) ile bağlantı kurularak bilgi alışverişi yapılabilir. Sonunda sunucu geriye bir sonuç döndürür. Web geliştirmeden ve bir siteye bağlanmaktan bahsettiğimize göre kabaca HTML çıktı üretileceğini söyleyebiliriz, ama bu çıktı HTML olmak zorunda değil, XML, resim formatları, JSON... olabilir.

Bahsi geçmişken biraz daha bilgi vermemiz gereken birkaç kavram var. Basit bir site yapacak birinin koca bir server alması saçma olur. Kendi bilgisayarını server’a çevirmek de pek mümkün değil. (Hiç kapanmaması, sürekli internete bağlı olması gerekiyor.) Bunun için hosting firmaları kullanılır. Belirli kotalar ile (alan, trafik...) ücreti karşılığında size server’dan alan tahsis ederler. Böylece web uygulamalarınızı bu alanda barındırabilirsiniz. Alan adları bu konuda yetkilendirilmiş firmalardan 1-10 yıllığına kiralanır. Alan adını aldığınızda size ufak bir panel ile DNS ayarını yapabilmenizi sağlarlar. Böylece aldığınız hosting servisi ile bağlayarak o adresin seçtiğiniz server’a yönlenmesini sağlayabilirsiniz.

Anlaşılacağı üzere web geliştirme kabaca back end (sunucu tarafı) ve front end (tasarım tarafı) olarak ikiye ayırabiliriz.



Front End Nedir?

Front End sunucudan cevap döndükten sonraki tarayıcımıza gelen ve görsel öğeleri oluşturan kısım. Bu kısım, görsel olduğu için de biraz estetik duygusu ister. Malzemelerimiz: HTML, CSS, JavaScript.

HTML adı üzerinde (Hyper Text Mark up Language) bir etiketleme dili. Çeşitli etiketler koyarak “bak burası paragraf, burdan sonrası ayrı kutu, şurası başlık” vs. diyebiliyoruz. Tarayıcı da konumlandırmayı ona göre yapıyor.

CSS ile bu etiketlere özellikler veriyoruz. “Şunun arka planı şöyle olsun, bunun sağ kenarının kalınlığı bu kadar ve şu renkte olsun, buna hiç bir öğe 5 px yaklaşamasın”... diyerek asıl tasarımı ortaya çıkarabiliyoruz.

JavaScript ise olaya biraz hareket katan kısım. JavaScript ile HTML’e sayfa yüklendikten sonra müdahale edebiliyoruz. Bu sayede siteye çeşitli animasyon, efektler koyabiliyoruz. Örneğin resim slaytları, tooltipler, lightbox... Ayrıca AJAX gibi bir nimeti sayesinde sayfayı yenilemeden istek gönderip gelen veriyi istediğimiz yere ekletebiliyoruz.

İş tasarım olunca tasarım araçlarını da yeterince kullanabilmek gerekiyor. Bunun için özellikle Photoshop şart. Vektörel çizimler için de farklı araçlar kullanmalıyız. Bilgisayarımızda birden çok tarayıcı olmalı: IE, Chrome, Firefox, hatta Opera...

Front End’de Nelere Dikkat Etmeli?

Renk Uyumu: Öncelikle renk uyumu bilginiz olması gerekiyor. Müşteri kırmızı ağırlıklı site istedi diye CSS’de renk kısmına ‘red’ yazarsanız adamın göz doktoru masraflarına ortak olmayı göze alın derim. Demek ki ‘güzel renk’ denen birşey var. Peki nereden bulacağız bu güzel renkleri? Renk paletleri kullanmak, bu paletlerden seçim yapmak daha sağlıklı sonuçlar verebilir. Ya da farklı sitelerden, görsellerden renk seçiciler ile renk almak mümkün. Bir de bu işler için özelleşmiş araçlar var. Seçtiğiniz renklerle uyumlu başka renkler öneren ya da uyumlu renk templateleri sunan siteleri başlıcaları şunlar: Adobe Kuler, Color Scheme Designer, Colour Lovers.

Font (Yazı Tipi): Renk ile beraber önemli konulardan biri de font. İkisi başka bazı özellikler ile birlikte sitenin kimliğini olşutururlar. Bu yüzden özellikle kurumsal bir firmanın web sitesinden bahsediyorsak özgün font seçmek iyi olacaktır.

Ayrıca Comic Sans gibi ciddiyetten uzak fontlardan da uzak durmalıyız. Font seçiminde dikkat edeceğimiz bir husus da UTF8 desteği.

Peki fontları nereden bulacağız. İşte buradan:
[*] http://www.google.com/fonts/
[*] http://www.fontsquirrel.com/
[*] http://www.1001fonts.com/

Kullanılabilirlik: Bir diğer konu ise kullanılabilirlik. Aslında bu başlı başına bir konu ama en önemli ve ilk akla gelenlerden bahsedeyim. Çok kullanılan şeyler kullanıcının elinin altında olsun. Örneğin menülerin yeri çok önemli. Alışkanlıklara aykırı olmamalı. Kullanıcıyı yormamalı. (basit bir site için 2-3 adımlı üyelik formları) Birşeye ulaşmak istediğinde 2-3 kere düşünmemeli. (kullanışlı sayfayı takip eden menüler)

Tarayıcı Uyumu: Tasarımda en büyük sıkıntılardan biri de tarayıcı ve farklı çözünürlüklere uyum konusunda yaşanır. Siteniz farklı tarayıcılarda da aynı, ya da çok benzer, gözükmelidir. Bazen tarayıcılar gelen HTML ve CSS verilerini kendilerine göre yorumlama yoluna giderler, (bkz. Internet Explorer) ya da yeni standartları çok geriden takip ederler, (bkz. Internet Explorer) ya da eski sürümlerini kullanan kullanıcı sayısı o kadar fazladır ki eski sürümlerde de çalışacak bir arayüz hazırlamanız gerekir. (bkz. Internet Explorer) Her tarayıcı (hatta her tarayıcı sürümü) için ayrı CSS dosyası hazırlamak imkansız.

Çözünürlük: Sadece tarayıcı değil sitenin görüntülendiği çözünürlük de sıkıntı. Son zamanlara kadar siteler 960 ya da 1000 px genişliğe uygun olarak tasarlanırdı. Fakat şimdi sadece masa üstü ya da laptop bilgisayarlara değil tablet, telefon gibi farklı araçlara da hitap etmemiz gerekebiliyor. Bunun için responsive dizayn imdadımıza yetişiyor. Siteyi farklı çözünürlüklerde farklı davranacak şekilde tasarlayarak her alet için ayrı tasarım yapmaktan kurtuluyoruz.

CSS Framework: Tarayıcı ve çözünürlük sorununu aşmak için en kolay yol CSS Framework kullanmak. Bu frameworkler tasarımda sıkça kullanılan bir çok öğe için hazır css classları, hatta javascript kodları içerirler. Ayrıca bu kodlar responsive olarak hazırlandığından bu kodlar ile hazırladığınız tasarımlar da responsive özelliği gösterir. Şu an en çok kullanılan CSS Framework Bootstrap. Ayrıca görece karmaşık javascript işleri için de JQuery kullanırsak tarayıcı farkları konusunda minimum sıkıntı yaşarız.

Performans: Bir de performans konusunda hatırlatma yapmakta fayda var. Kimse açılması uzun süren bir siteye tekrar girmek istemez. Kullandığınız resimleri uygun boyutlandırmanız, sıkıştırma servislerinden geçirmeniz hızlı yüklenmesini sağlayacaktır. CSS ve JavaScript dosyalarınızı minification işleminden geçirmek (boşluk karakterlerinden arındırmak) kullanıcıya gönderilecek dosya miktarını azaltarak performans sağlar. Sitenizin açılış hızını ve yapılan istekleri Chrome ya da Firefox gibi geliştirici araçları olan bir tarayıcıda network tabından inceleyebilirsiniz.

Back End Nedir?

Eğer dinamik bir sitemiz varsa sitemizin istediğimiz çıktıyı vermesi için sunucu tarafında farklı bir programlama dili ile yorumlanmasını / derlenmesini sağlamalıyız. En popüler sunucu taraflı programlama dili PHP, bunun yanında özellikle kurumsal işlerde tercih edilen JAVA dilinin JSP eklentisi ve ASP .net, özgür yazılımcıların sevdiği Phyton dilinin Django frameworkü ya da Ruby dilinin Ruby on Rails framework’ü de işinizi görecektir. Bu noktada hangisini öğrensem diyeceksiniz muhtemelen. Hangisini öğrenirseniz öğrenin, düzgün ve kaliteli yazılımlar geliştirebildiğiniz sürece iş konusunda sıkıntınız olmaz. Eğer İngilizceniz de yeterliyse kaynak da sıkıntı olmaz. O yüzden bu konuya çok kafa yormadan bir an önce birini seçip içerisine dalın.

Önce hangi dili seçtiysek özelliklerini inceleyelim. Dil hangi fonksiyonları sunuyor? Array fonksiyonları, calender-datetime fonksiyonları, XML JSON fonksiyonları, Directory, File handling fonksiyonları, String, Math, Filter fonksiyonları, Error handling, DB işlemleri…

Dil özellikleri hakkında da bilgi sahibi olmak gerek. Örneğin dilin fonksiyonel programlama ya da Object Oriented Programlama özellikleri var mı ? Bunun için hazırlanmış çok güzel de bir kaynak var: Learn X in Y minutes .

Burada PHP’ye özel bir parantez açma gereği duyuyorum. Genelde PHP için yanlış bir izlenim var. OOP yapılamadığı ya da ‘güzel’ kod yazılamadığı söylenir. PHP OO programlamanın tüm özellikleri destekliyor: Abstract sınıflar, interfaceler, kalıtım, namespace… Hepsi var. PHP’nin asıl kötü özelliği (ki aslında başka bir yönden iyi de bir özelliği) fazla esnek olması. Yani sana herşeyi OOP yazacaksın diye dayatmaz. İstersen PHP ile HTML’i hatta SQL sorgularını aynı sayfada yazabilirsin. Bu tabii ki kaliteli kod yazma süreçleri için çok kötüdür, ama PHP’nin kolay öğrenilebilir, programlama bilgisi her seviyeden geliştiricilerce kullanılabilir bir dil olmasını da sağlar. PHP‘de doğru adımlar atmak için PHPTheRightWay adlı siteye göz atmakta fayda var.

Seçtiğiniz dile ait external kütüphaneleri, frameworkleri tanımak, o dil ile geliştirilmiş CMS projelerini incelemek de hızlı bir başlangıç için faydalı olacaktır. Bir de yine seçtiğiniz dile de biraz bağlı olsa da bir veritabanı (database) hakkında da bilgi sahibi olmak, en azından CRUD işlemlerini (ekle, düzenle, sil, oku) yapabiliyor olmanız gerekir. Genelde proje büyüklüğüne göre SQLite
Bir Dil Nasıl Öğrenilir?

Bir dili öğrenmenin en etkili yolu o dil ile projeler geliştirmektir. O yüzden siz de dilin çoğu özelliğini kullanabileceğiniz bir proje seçin ve hemen kodlamaya başlayın. İlk proje için basit bir CMS (örneğin bloglarınızı tutacağınız bir site) hazırlayabilirsiniz.

Blog yazılarını manipüle ederken string fonksiyonları ile tanışırsınız. Resim eklerken resim düzenleme hatta watermark ekleme gibi şeyleri keşfedebilirsiniz. RSS oluşturacaksanız XML fonksiyonları/kütüphaneleri ile haşır neşir olursunuz. Gönderileri yorumları tarihe göre kaydederek tarih fonksiyonları ile çalışırsınız. Admin paneli hazırlarken güvenlik meselesi ile tanışırsınız. Şunu belirteyim eğer hiç hacklenmezseniz çok şanslısınız ya da iyi bir başlangıç yaptığınızı söyleyebilirsiniz.

“Güzel” Kod Yazmak

Artık dili tanıdık iyi kötü bir proje geliştirebilir haldeyiz. Ama bir de “güzel” kod yazma diye birşey var. Örneğin bir projede yazdığımız bir kodu başka projelerde de değişiklik yapmadan kullanabiliyor muyuz? Ya da aynı problem için proje içerisinde tekrar tekrar benzer kodlar mı yazıyoruz, hatta kopyala yapıştır mı yapıyoruz ? Projemize 1 ay sonra geri döndüğümüzde nerede kaldığımızı ne yaptığımızı anlayabiliyor muyuz? Kolayca üzerine ekleme yapabiliyor muyuz ya da bulunan bir hatayı düzeltebiliyor muyuz? Yoksa aklımıza şu klasik laf mı geliyor: “Yeniden yazalım”. Üzerinden uğraştığım problemleri küçük parçalara ayırabiliyor muyum? Yoksa problemin içerisinde kaybolmaya mı başlıyorum?

Bunun için bazı prensipleri takip etmemiz gerekiyor. Object Oriented programlamanın nimetlerinden faydalanmalıyız. Problemleri olabildiğince küçük parçalara bölmeliyiz. Her metod tek bir işten sorumlu olmalı ve o işi sadece o metoda yaptırmalıyız. Kod tekrarından kaçınmalıyız. Aynı kod birkaç yerde tekrar ediyorsa bir metoda ayırmanın zamanı gelmiş demektir. Anlaşılır kodlamalıyız, bunu yorum satırları ekleyerek, indentleri düzgün yaparak, metod/değişken/class isimlerini anlamlı ve okunaklı (camelCase) yazarak sağlayabiliriz. Bu konuda standartları takip etmek de önemli. Örneğin PHP için PSR standartlarına göz atmak yararlı olacaktır.

Hızlı geliştirme yapmak için frameworkleri iyi değerlendirmek gerekir. Bu aynı zamanda kaliteli kod yazmayı da zorlayıcı etkenler barındırır. İş sahipleri için koda daha iyi adapte olacak eleman bulma konusunda da frameworkler yararlıdır. Çünkü belli bir framework kullanılmışsa neyin nerde olduğu, algoritmanın nereleri dolandığı bellidir. ASP MVC, Python’da Django, Ruby’de Ruby On Rails, Java’da JSF, Spring, Play!, Vaadin gibi alternatifler var. PHP’de seçenekler biraz daha çok: Zend, Symfony, Yii, Laravel, CodeIgniter, CakePHP, Kohana, Phalcon...

BackEnd’te Performans

Backend’de en önemli konulardan biri de performans. Kodlarınız bir işi mümkün olduğu kadar kısa yoldan yapmalı. Bazı durumlarda bunu yapabilmek için dilin alt yapısını da bilmek gerekir. İlk aşamada en azından sağ kulağı sol elle tutmaya çalışmayalım, gidip sonsuz döngüye girmeyelim yeter. SQL optimizasyonu da performans açısından çok önemli. Çünkü diske erişim çok zaman alan bir iş. Veri tabanı da diskte olduğuna göre veriye erişirken dikkat etmeliyiz. Örneğin SELECT * FROM yerine eğer gerekmeyen sütunlar varsa istediğimiz sütun isimlerini ekleyerek çekmeliyiz. Gerekli yerlerde JOIN kullanarak sorgu sayısını azaltabiliriz. Döngü içerisinde sorgu yapmak gibi hatalara düşmemeliyiz. Gerekli yerlerde INDEX kullanabiliriz.

Performans için cacheleme çözümleri de oldukça yararlı. Bir sayfaya girildiğinde sayfa çıktısını sayfa değişmediği sürece kaydederiz. Bu şekilde tekrar girilen sayfada çıktıyı tekrar üretmekten kurtulabiliriz. Bu da işe yaramazsa server özellikleri arttırmak ya da birden çok server ile hizmet vermek gerekebilir.
Web geliştirme konusunda mümkün olduğunca bütün anahtar kelimeleri vermeye çalıştığım yazımın sonuna geldim. Umarım faydam dokunmuştur. Eksik kaldığım noktalar mutlaka vardır, ama en azından artık neyi nerede arayacağınızı biliyorsunuz.

Bol kodlu günler dilerim.
  • Etiketler;
Yorum Yaz

Yorum yazabilmek için üye girişi yapmanız gerekiyor!

cok guzel anlatim tesekkurler
Teşekkürler.Çok faydalı bir yazı olmuş.Yazılıma yeni başlayan arkadaşlara bir tavsiye. HTMlL->CSS-->Javascript-->PHP bu yolu takip edin :) İyi günler
çalışmalarınızda ve paylaşımlarınızda başarı ve mutluluğunuzun devamını dilerim. bu değerli emek ve paylaşımlarınız için teşekkür ederim. saygılarımla.
emeğinize sağık teşekkürler

Yukarı Git