Murat Yüksel | Blog

Web Geliştirmeye Başlamak

StajOkulu 2013 için yaptığım sunumu yukarıda bulabilirsiniz. Bunun yanında sunum sırasında söylediklerimi de bu yazımda slayt sayfalarına paralel ekleyerek sunmak istedim.
1 – Öncelikle bu 1.5 – 2 saatlik sunum ile böyle geniş bir konuyu öğrenmek imkansız. O yüzden ben de sunumda, web üzerine eğilecekseniz nelerle, hangi kavramlarla, hangi sorunlarla karşılaşacağınızı anlatarak gözünüzde bir yol haritası oluşturmanızı amaçladım.
2 – Karikatürü okuyamıyorsanız özetliyim. Bir dili 21 günde öğrenmenin tek bi yolu var: 21 gün dili çalışırsınız sonra bir kaç yıl daha çalışır dili öğrenirsiniz. Sonra zaman makinesini icat etmek için çalışırsınız. İcat edince de 21. güne geri dönersiniz. Bu arada sunum içerisinde bazen bildiğiniz şeylerden de bahsediyor olabilirim.  Tüm resmi çizmek adına bunlardan da kısa da olsa bahsetmenin yararlı olacağını düşünüyorum.
3 – Web için birşeyler yapacaksak webin nasıl çalıştığını biliyor olmamız lazım. Yani adres çubuğuna web adresini yazdık, enter dedikten sonra ne oluyor. Bunu bir benzetme ile anlatacağım. Entera basınca bir paket oluşur, içerisinde bizim IP, hangi dosyaya hangi protokolle gönderdiğimiz, kullandığımız işletim sistemi ve tarayıcı gibi bilgiler içeren bir paket. Önce adresi öğrenmemiz lazım çünkü elimizde sadece “Faruk Eczanesi” yazan kağıt var. Gidip kuru yemişçiye soruyoruz ve Cem Yılmaz’ın gösterisinde bahsettiğinden farklı olarak bu sefer tam adres veriyor, biz de elimizle koymuş gibi buluyoruz. Paketi teslim ediyoruz ve serverda ilgili program (apache en yaygını, nginx popüler, windows serverlar için IIS var … ) kendi konfigürasyonuna göre gerekli işlemleri yapıp bize HTML bir sonuç döndürüyor. Konu web olduğu için HTML diyorum ama şart değil XML, JSON vs de olabilir.
4 – Buradaki kavramlardan “Faruk Eczanesi” domainimiz. 1 yıl ila 10 yıllığına yetkili firmalardan kiralarsınız. Ücreti .com, .net gibi yaygın uzantılar için yıllık 20-25 lira civarıdır. IP biliyorsunuz internet dünyasında adres bilgisi. Hosting programladığınız/tasarladığınız web sitenizin dosyalarının tutulduğu yer. IP adresini DNS Server ile öğrendik bunu da Domainlerin IP’lerini tutan bir tablo olarak düşünebilirsiniz. Web sitenizin dosyaları da örneğe göre ilaçlar oluyor.
5 – Web geliştirmeyi genel manada ikiye ayırabiliriz. Front end – Back end. Front end serverdan bize cevap döndükten sonraki, tarayıcımıza gelen ve görsel öğeleri oluşturan kısım, Back end ise serverda çalıştırılan gerekiyorsa databaseden birşeyler okuyup yazan, kararlar alan buna göre çıktıyı oluşturan kısımdır.
6 – Front end kısmı malum görsel kısım olduğu için biraz estetik duygusu ister, biraz kodlama ve bol bol pratik.
7 – Malzemelerimiz kod kısmında HTML (Hyper Text Markup Language), CSS, Javascript. HTML bildiğiniz gibi etiketler içeriyo, etiketler koyarak burası paragraf, burda tablo, burası başlık falan diyorsunuz. CSS ise bu etiketlere özellikler vermenizi sağlıyor. Şunun arkaplanı şöyle olsun, bunun sağ kenarlığı şu kalınlık şu renkte olsun, bu elemanın konumu sayfanın tamamına göre diğeri bulunduğu yere göre belirlensin, buna kimse dışardan 5 px yaklaşamasın vb. Javascript ise olaya biraz hareket getiren kısmı. Javascript ile HTML’e müdahale edip özelliklerini değiştirebiliyorsunuz. Bu sayede siteye çeşitli animasyonlar, işte slayt, tıklayınca uçsun kaçsın geri gelsin, tooltip, lightbox gibi şeyler yapabiliyorsunuz. Ayrıca AJAX gibi bir nimet sunar. Sayfayı yenilemeden istek gönderip gelen veriyi şuraya ekle diyebilmenizi sağlar. Örneğin Facebook’ta 100 tane yorum var siz 2 tanesini görüyorsunuz. Tıkayınca diğerleri de gelip üstüne yerleşiyor sayfa yenilenmeden.
    İş tasarımsa tasarım araçlarını özellikle Photoshop’u asgari düzeyde bilmek gerekiyor. Ya da vektörel çizimler gerekecekse farklı araçlar kullanmalıyız.
    Bilgisayarımızda birden çok tarayıcı olmalı: IE, Chrome, Firefox, Opera…
Dediğim gibi iş biraz sanat işi dolayısıyla yetenek lazım.
    Bir de sabırlı olmanız lazım. Çünkü tasarımın güzel olup olmaması göreceli birşey sizin beğendiğinizi müşteri beğenemeyebiliyor. Bol bol eleştirileceksiniz.
    Hasan Yalçın’ın bu işin felsefesi hakkında güzel makaleleri var onlardan birinin linkini de buraya koyuyorum.
8 – HTML CSS JS işte böyle birşey bu yanlış hatırlamıyorsam stajokulu.com sitesinden. Sağ tık kaynağı görüntüle…
9 – Front end’de nelere dikkat etmeli. Öncelikle renk uyumu bilginiz olması gerekiyor. Font da aynı şekilde renk ile beraber özellikle sitenin karakterini belirleyen etkenlerden. Bunların üzerinde teker teker durucaz yine ama kullanılabilirlik için kullanıcı gözünden bakabilmek önemli. Browser uyumu; sitenin farklı tarayıcılarda farklı/bozuk gözükmemesi gerek. Bir de şimdi responsive diye birşey çıktı, envai çeşit farklı çözünürlükte sitemizin nasıl gözükeceği ayrı bir problem. Ve özgünlük bu daha çok o sanat ruhunuzu ilgilendiren kısmı. Şimdi bir senaryo ile başlayalım: Müşteri geldi dedi ki benim görsellerimi logom falan kırmızı ağırlıklı o yüzden site de kırmızı ağırlıklı olsun. Peki hmm “kırmızı ağırlıklı site” tamam buyrun:
10 – Nasıl olmuş mu sizce ? Yani tamam kırmızı dedi adam ama gidip css’te red yazmanın da alemi yok. Daha yumuşak bir ton kullanılabilirdi. (Bu arada sitem normalde böyle değil örnek olsun diye böyle yaptım) Demek ki renk uyumu, güzel renk gibi kavramlar var. Benim ekstradan bi sıkıntım daha var: ben renk körüyüm. O yüzden kırmızıyı bulmak konusunda çokça sıkıntım oldu.
11 – Resimde gördüğünüz gibi bizde renkler böyle 6 haneli (3 de olabiliyor ama seçenek azalıyor) kodlar halinde. Kırmızı, Yeşil, Mavi için 2şer hegzadesimal sayı. Kırmızı için mesela FF0000 verirsiniz ki bi önceki slaytta sayfa öyleydi. Peki uygun rengi bulmak için ne yapabilirsiniz. Birincisi bu kod ile oynarsınız. Şu 0’ları 2-3-4 falan yapalım diye ama ben denedim o zaman da diyolar bu bordo olmuş, pembe olmuş diye. Çözümü beğendiğiniz bi rengi başka bi yerden renk seçici araçlarla almak, ya da renk paleti ve iki sonraki slaytta göstereceğim renk seçme araçlarını kullanmak.
12 – Font da, renk de eğer özellikle kurumsal bi web sayfası için konuşuyorsan, o kurumun kimliğini oluşturan etkenlerden. Bir makaleden okumuştum; adamlar ünlü sitelerin sadece butonlarını üstünde yazıları bile olmadan almışlar yan yana koymuşlar, daha bakar bakmaz anlıyorsunuz hangisi hangisinin butonu: bu outlooktan, bu face’den, bu linkedin’den. Fontlar da bu etkiyi güçlendirir. Mesela burada Microsoft ve Facebook’un logolarının Comic Sans fontuyla yapılmış halini görüyoruz. Pek olmamış gibi, ne bileyim bi ciddiyetsizlik var gibi, belki şu yuvarlatmalardandır. Demek ki uygun font diye birşey var. Nasıl seçicez ? Bazı durumlarda özgün olması yerinde olabilir. Okunaklı olması gözü yormaması başka bir etken. Bir de font dosyasını dahil ederek kullanacaksan UTF8 destekli olmalı ki latin alfabesi dışındaki karakterler bozuk çıkmasın.
13 – Font ve renk seçimi için gördüğünüz gibi 3’er kaynak linki koydum. Yukarıdaki 3 linkten binlerce font bulabilirsiniz. Bakmayın 1001 fonts dediğine 1001’den çok daha fazla. Google fonts’ta şöyle bi ekstra var. Font dosyasını Google host edebiliyor. Yani siz kullanacağınız fontun ilgili linkini html içinde ekliyorsunuz ve CSS’de kullanmaya başlıyorsunuz. Ayrıca yine Google fonts şöyle bir güzellik de yapıyor: Bir fontu incelerken detaylarında bu font ile şunlar da iyi gider diyerek size öneriler sunuyor. Böylece bu başlık için iyiymiş diğerini de paragraflarda kullanayım diyebiliyorsunuz.
    Renk için ise şu 3 araç var, bunlarda da bir renk belirliyorsunuz o da size bu renk ile uyumlu olabilecek 3-4 farklı renk öneriyor. Örneğin sıcak renklerden seçtiniz diğerleri de bu renge uygun sıcak renklerden oluyor. Algoritması nasıl bu öneriyi neye göre yapıyor bilmiyorum ama öneriler gayet başarılı.
14 – Kullanılabilirlik başlı başına ayrı bir konu, hatta StajOkulu 2012’de Süleyman Öz hocamızın “Arayüz Tasarımı” adlı ayrı bir sunumu vardı. Ben ilk akla gelen noktaları burada sıralamak istedim. Öncelikle çok kullanılan şeyler kullanıcının elinin altında olmalı. Örneğin Facebook’ta gruplar, sayfalar linkleri solda kenarda profil fotonuzun altında, ya da profil, ana sayfa linkleri, arama bölümleri en tepede sabit olarak sizi takip ediyor.
    Mesela login kısmında login formu nerede ? Sağ üst. Dikkat edin çoğu sitede böyledir, form büyükse sağda küçükse ya da link şeklindeyse sağ üstte. Artık insanlar buna alışmış bu tür alışkanlıklara uymak gerek. Site kullanıcıyı yormamalı, birşeye ulaşmak istediğinde 2-3 kere düşünmemeli direk bulabilmeli. Bir de kullanıcıya ne kadar az zorluk çıkarırsanız kullanıcı sitenizde o kadar çok kalır. Eğer bi sefer yanlış şifre girince captcha soruyorsa ya da 1 dk bişey yapmayınca login düşüyorsa kullananın sıkılıp bırakması yakındır.
15 – Tasarımda en önemli sıkıntılardan biri de tarayıcı uyumu. Burada gördüğünüz gibi tarayıcılar sıralanmış ama genelde asıl sıkıntıyı çıkaran şu sonraki İnternet Explorer oluyor. Son zamanlarda İnternet Explorer’da ilerleme var hakkını yemeyelim mesela son güncellemelerle artık Chrome’u daha hızlı indirebiliyormuşuz. İnternet Explorerla ilgili en büyük sorunlar genelde versiyon ile ilgili sıkıntılardan kaynaklanıyor. Hala Windows XP kullanan çok insan var ve bunlar IE9 yükleyemiyor. Ya da hala IE7-8 kullananlar var. Onu da geçtim hala IE9 ve 10’da bile CSS3 ile ilgili sıkıntılar var. İnsanlar eskiden (özellikle IE 6 bu konuda baş belasıymış) tasarımı yapar bitirir, sonra bi de IE için CSS yazar, siteye girildiğinde eğer IE ise şu CSS değil ise bu CSS’i uygula şeklinde yaparmış. Neredeyse 2 kat efor. Şimdilerde bu farklar çok daha azaldı ama eski versiyon sıkıntısı halen devam ediyor. Bildiğim kadarıyla son sürümlerde IE’de otomatik güncelleme özelliği ekliyor. Mesela Chrome kullananlar hangi sürümü kullandığını biliyor mu? Ancak takip ediyorsanız biliyorsunuz, çünkü kendi güncelliyor.
    IE’nin tek sıkıntısı bu değil mesela upload prosedüründe eğer jpg, png, gif dışında gönderileni alma gibi birşey yazmışsanız ve bunu mime type’a bakarak yaptıysanız muhtemelen gönderdiğiniz image’ler diğerlerinde başarılıyla upload edilirken IE’de uzantı hatası ile karşılaşacaksınız. Bunun sebebi IE’nin mime type olarak jpeg veya png demek yerine pjpeg, x-png demesi.
  Bir de şöyle bir sorun var. Sayfanıza table eklediniz fakat herhangi bir css yazmadınız. Tarayıcının bu tabloyu nasıl görüntüleneceğine bir şekilde karar vermesi gerekiyor. Bunu belirli ilk değerler vererek yapıyor. Ama farklı tarayıcılar farklı ilk değerler ile başlayabilir. Bunun için CSS sıfırlama kullanılır. Neredeyse tüm elemanlara ilk değerler atarsınız. Böylece bu kararı tarayıcıya bırakmamış olursunuz, tarayıcı önce bunları uygular, sonra da sizin yazdığınız cssleri uygular. Böylece bu sorun da büyük ölçüde halledilmiş olur.
16 – Internet Explorer Mevlana zamanında olsaydı muhtemelen böyle olacaktı.
17 – Tasarımda bir sıkıntı da çözünürlükler ile ilgili. Eskiden sadece masaüstü bilgisayarlar vardı 3-5 farklı çözünürlük için 960 ya da 1000 px alan belirler tasarımı yapardık. Sonra laptoplar çıktı, netbooklar çıktı, telefonlar, tabletler yetmedi fabletler çıktı. Sonuç olarak da bir sürü farklı çözünürlük. Her çözünürlüğe göre tasarım yapmak imkansız. Bunun için imdada media query koşar. Siteye şunu diyebilirsiniz; eğer çözünürlük şu genişlikten düşükse şu cssleri çalıştır, şundan küçükse bunları çalıştır. Düşük çözünürlüklerde neyi değiştirmek isterseniz onları yazarsınız ekstra olarak. Bunu tarayıcıyı tam ekrandan çıkartıp küçülterek test edebilirsiniz. Eğer responsive ise burdan tutup küçültmeye başlayınca belli bir eşiği geçtiğinde sağ bölüm düşer, ya da resim küçülür, ya da menü dropdowna dönüşür…
18 – İtiraf edeyim işin bu kısmı, front end kısmı, pek bana göre değil. Ama bi şekilde işlerimi halledebiliyorum. Bunu sağlayan ilk araç JQuery. Çok fazla Javascript bilgisi olmadan JQuery ile ufak animasyonlar yapabiliyorsunuz. Onlarca yüzlerce JQuery plugini ile slider’dan lightbox’a, efektli menülere, tooltiplere kadar bir sürü görsel öğeyi sadece kopyala yapıştır ile siteye ekleyebiliyorsunuz. Örneğin slider’da yaptığınız değişiklik, kopyala yapıştırdan sonra örnek koddaki resim linkleri yerine sizinkileri koymanız, belki biriki parametre ile oynamanız kadar. Ajax işini de ajax, get, post gibi fonksiyonları ile 1-2 satır kod ile halledebilmenizi sağlıyor. Okuduğum bir makaleye göre javascript kullanan sitelerin yarısı JQuery kullanıyor.
    Diğer güzel bir araç da bir CSS frameworkü olan Bootstrap. Adamlar demiş ki biz her sitede aynı tasarımları aynı css kodlarını yazıp duruyoruz. Bi sefer son standartlara, modaya göre yazalım paket haline getirelim böylece herkes bunu alıp gerekli yerleri özelleştirip kullansın. Bootstrap içerisinde hazır classlar var siz 3 dosyayı HTML’e ekliyorsunuz (bootstrap.css, bootstrap-responsive.css, bootstrap.js) o size hazır onlarca class sunuyor. İlgili elemana o class’ı verdiğiniz zaman o hazırlanmış özellikleri alıyor. Örneğin table-stripped diyorsunuz table’ın tekli satırlarıyla çift satırları farklı renkte oluyor. Üstelik responsive özelliklere de sahip olduğu için farklı çözünürlükler için çok fazla kafa yormuyorsunuz. Bootstraptaki nav’ı kullandıysanız küçük ekranda otomatikman dropdowna dönüşüyor.
19 – Bootstrap bu konudaki tek araç değil alternatifleri de burada.
20 – Bir de JS frameworkler var ki ayrı bir dünya. Bu araçlarla baştan sona bir applicationın frontendini yazmanız mümkün. Tek sıkıntısı SEO. Malum Google siteyi tararken JS’leri çalıştırmıyor, dolayısıyla site full JS ile yazılınca hiç birşey göremiyor. Yine de bununla ilgili çözüm yöntemleri geliştiriliyor, örneğin Türkiye’den Sonsuz Döngü firmasının Kavuq diye bir projesi var. Eğer bu sorun çözülürse bu frameworkler büyük çıkış yapabilir. Hali hazırda SEO ile ilgili derdi olmayan applicationlarda kullanılabilir.
    Unutmadan performans hakkında da birkaç hatırlatma yapmakta yarar var. Malum bu css, js dosyaları olduğu gibi kullanıcıya gönderiliyor ve boşluklar da yer kaplayarak bu dosyaların boyutuna katkı sağlıyor. Minify araçlarıyla bu dosyaları küçültebiliyoruz. Ayrıca js dosyalarını sayfanın sonunda include ettirerek (tasarıma göre bu değiştirilebilir) önce sayfa öğeleri yükleceğinden sayfanın açılışı hızlandırılabilir. Bunun dışında resimleri de optimize etmek gerekebilir. Şu resmin kaç mb olduğunu söyleyebilir misiniz? Belki 10 mblik resim htmlde küçültülmüş. Bazen sitelerde görürsünüz bazı resimler adım adım yavaş yavaş açılır. Büyük ihtimalle böyle büyük boyutlu bir resim, o yüzden yavaş açılıyor. Bu upload edilirken müdahale edilerek küçültülebilir. Ayrıca resimlerin kalitesini bozmadan boyutunu küçülten araçlar da var. Sayfa açılırken kaç istek gönderilmiş, ne kadar sürmüş,… bunları öğrenmek için Chrome’da sağ tık öğeyi denetle dediğinizde aşağıda gelen panelden network sekmesine gelin. Sayfayı yenilediğinizde burada grafiksel olarak yükleme sürelerini göreceksiniz.
 ————– ARA ————–
21 – Back endci de böyle birşey. Neskafeyi kod dönüştüren yaratık.
22 – Back end’de kullanılan en popüler dilleri sıraladım PHP, ASP .NET, Java’dan JSP frameworkü, Python’un Django frameworkü, Ruby’den Ruby on Rails frameworkü.
23 – Eğer bu işe sıfırdan başlıyorsak önce dilin özelliklerini tanımamız gerekir. Dil native 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 bilgi sahibi olmak da fayda sağlayacaktır. Örneğin dilin fonksiyonel programlama ya da OO programlama özellikleri var mı ? PHP için genelde yanlış bir izlenim vardır. OOP olmadığı ya da “güzel” kod yazılamadığı söylenir. PHP’de OOP programlama yapılabiliyor. Abstract sınıflar, interfaceler, kalıtım, namespace… hepsi var. PHP’nin asıl kötü özelliği (ki aslında aynı zamanda iyide bir özelliğidir) 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ştirilerce kullanılabilir bir dil olmasını da sağlar. Bu yüzden PHP öğreneceklerin direk öğrenemeseler bile şu altta verdiğim linki okumalarını tavsiye ederim. http://www.phptherightway.com (Bunun Türkçe çevirisi de yapıldı sitede linkini bulabilirsiniz.) En azından kulak dolgunluğu kazandırır.
    Dile ait frameworkleri, external libraryleri de tanımak, o dil ile yazılmış CMS’leri incelemek de faydalı olacaktır. Biraz ileri seviye olsa da OOP konusunda sıkıntınız yok ve dili de tanıyorsanız o dildeki Design Pattern uygulamalarını da incelemelisiniz.
24 – Backend’deki önemli konulardan biri de veritabanıdır. Hangi veritabanı (database) kullanmalıyım? Hangisi işini en iyi görüyorsa. Hız, maliyet,… gibi şartlar bunu belirleyebilir. PHP için MySQL domates peynir gibidir. ASP .NET için MSSQL kullanılabilir. PostgreSQL var, Oracle var, SQLite var, MongoDB gibi noSQL database sistemleri var. Hangisini seçerseniz seçin kullandığınız dilin o DB için hazırlanan driverları ile bağlantı sağlayabilirsiniz. Örneğin PHP’de PDO sınıfı ile bu veritabanlarına (MongoDB hariç onun kendi driverını eklemeniz lazım) bağlanmanız mümkün.
25 – Bence bir dili öğrenmenin en iyi yolu o dilde bir proje yazmaktır. Hemen bir proje belirleyelim ve başlayalım genelde klasiktir blog sitesi ya da portfolyo sitesi yapılır. Ben de ilk öyle başlamıştım kendi blog sitemi yapayım diye başladım. Bir admin paneli olsun, yazılarımı oradan girip kaydettiğimde database’e yazsın, ana sayfada da database’den çekip ekrana bassın. Bu işi yapabildiğinizde büyük bir adım atmış olacaksınız. Çünkü backendin temeli CRUD ( ekle oku düzenle sil) işlemlerine dayanır. Ayrıca veriler arrayler şeklinde geleceğinden arrayler ile de pratik yapmış oluruz.
26 – Blog yazıları bölümünde string fonksiyonlarını, resim upload ve watermark eklemek için image manipulasyon kütüphanelerini, eklenen gönderileri tarihe göre arama, sıralama, tarihleri Türkiyede kullanıldığı gibi gün ay yıla çevirme için tarih işlemlerini, blogumuz için RSS feed ya da site haritası oluşturmak için XMLi öğrenirsiniz.
27 – Admin panelin girişi için güvenlik konusunu araştırırsınız. SQL injection, Cross-site Scripting, Session Fixation gibi kavramlarla tanışırsınız. Ha hacklenirsiniz, ben de hacklendim ilk yaptığım sitenin anketinde açık vardı, gördüm o meşhur yazıyı; hacked by bilmem kim. Moral bozmadan araştırmaya devam edin. Okudukça araştırdıkça zaten zaten kendi yaptığınız hataları da görecek düzelteceksiniz.
    Bir de bloga yorum kısmı ekleyer burada da AJAX konusunda pratikler yapabilirsiniz. Yine güvenlikle ilgili düşünmeniz gereken durumlar olacak. Herkes masum bir şekilde oraya yorum yazmayabilir.
28 – Artık dili tanıdık iyi kötü 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 ? Şimdi bunların üzerinde teker teker duralım.
29 – Bir çok proje yapıyoruz bitiriyoruz ama şunu farkederiz, aynı problemler burda da var diğerlerinde de var ama her seferinde kod yazıyoruz. Object Oriented programlamanın nimetlerinden faydalansak. O problemi çözecek bir class yazsak da tekrar karşımıza çıktığında bu classı kullansak daha iyi olmaz mı? Class yeni duruma uymuyor mu genişlet düzelt devam et. Sonunda elinde o problemi her koşulda çözebilecek bir classın olacak. Hem o kodların daha önce test etmiş olacaksın hem de projeni daha çabuk bitireceksin.
30 – DRY – Dont repeat yourself. Ne kadar çok aynı kodu tekrarlıyorsanız o kadar kötü kod yazıyorsunuz. Hatta kod kalite araçları vardır koddaki tekrarları ölçer, atıyorum %10 kod tekrar edilmiş kopyala yapıştır yapılmış gibi sonuçlar verir.
    Bunun neden kötü olduğunu çok basit bir örnekle anlatayım. Hatta örnek frontend’den olsun ki gözünüzde daha net canlansın. Diyelim 10 sayfalı bir sitemiz var. Genelde sitelerde üst taraf aynıdır, ne vardır, başlık, logo menü vs… Sayfalar arasında geçiş yapsanız da bu bölüm değişmez. Siz de tembellik edip bu alanı kopyala yapıştır diyerek her sayfaya koydunuz. Güzel, mis gibi çalışıyor dimi ? Peki yarın o menüye bir buton daha eklenecek derlerse ne yapacaksınız ? Her sayfayı tekrar düzenle butonu koy, ohooo. Halbuki ortak kullanılacak alanı ayırsaydık gerektiği yerde include etseydik ortak dosyadan değiştirmemiz yetecekti.
    Farzedelim aynı problemi çözen birden çok kodunuz var ve bir düzeltme ile daha performanslı hale getirebiliyorsunuz. Her birini değiştirmek zorunda kalacaksınız. İşte OOP nimetlerinden yararlanmayınca bu duruma düşmek kolay. Aslında PHP ile ilgili kötü yorumların da kaynağı bu aslında. Kötü kod yazabiliyoruz ve çalıştığı sürece PHP size bunu farkettirmiyor.
    Problemleri küçük parçalara bölüp çözüm üretmek hem kod tekrarı yapmamak hem de kolay taşınabilir kod yazmak için de önemli. OOP için önemli bir kural vardır classlarınız tek bir işten sorumlu olsun.
31 – Kodu anlamıyorum, ben de anlamıyorum ama çalışıyor. Peki ya çalışmazsa, ya bir hata çıkarsa ya da birşey eklemen gerekirse. Spagetti kod denen birşey var mesela, HTML, PHP hatta SQL sorgularını bile aynı sayfa içerisinde yazabilirsiniz. Syntax olarak bir sıkıntı yoksa PHP bunu çalıştırır. Ama sonra ne tasarımla oynayabilirsiniz, ne PHP’de çıkan hataları düzeltebilirsiniz. Kodu mümkün olduğunca temizlemeniz gerekir. Ki template engineler sayesinde PHP kodlarını HTML’den tamamen ayırabiliyorsunuz.
32 – Bilgisayarın kodları okuması çok önemli değil okur ama insana okunaklı kod yazmak asıl maharet. İlk zamanlarımda çok başıma geldi 5-10 gün arayla eski projeme dönüp ne yaptığımı anlayamadığım oldu. Proje bitti teslim ettim, bir sonrakine başladım. Bir hafta 10 gün sonra bir düzeltme isteği geldi.  Daha yeni bitirmişsin diyemezsin de yeniden yazalım diye. hani 1 yıl geçse belki dersin de o aslında şu anlama gelir: “Ben bu kodu çok kötü yazmışım, kendi kodumu bile anlayamıyorum o derece”.
    Bakıyorsun hatanın olduğu yere fonksiyon var adı kaydet. Hmm neyi ? Nereye ? Parametre almış 2 tane a ve b, a ne b ne ? İsimlendirme çok önemli, uzun yazın açıklayıcı yazın makine yorulmaz merak etmeyin. 10 karakter olsun 20 karakter olsun farketmez açıklayıcı olsun da: getUserInfo, insertBlogEntry… Genelde dikkat edin fiil ile başlar. Bir de isimlendirme için Camel Case kullanarak okunurluğu kolaylaştırabilirsiniz bunu kelimeler arasına alt tire koyarak da yapan konvensiyonlar var.
    O da yetmez çünkü fonksiyonun/methodun parametrelerin ya da return ettiği değerin tipini de bilmek isteyebilirsiniz. Yorum satırları böyle şeyler için çok uygundur. Methodun tepesine 2 satır açıklama aldığı parametreler ve return tipini verirsiniz. Tekrar baktığınızda herşeyi oradan anlayabilirsiniz. Bir de PHPdoc diye bir araç var (Java’da da var hatta ordan port edilmiştir)  Belirli formatta yazdığınız bu yorumları alıp birleştirip dokümantasyon oluşturur.
    Okunabilir kod için şekil de önemlidir. Örneğin eğer if’ten sonra küme parantezini alt satırda açıyorsanız her yerde öyle yapın, ya da isimlendirmeyi camelCase yapıyorsanız proje boyunca öyle yapın. İndentleri önemseyin, indent için 4 boşluk bırakın vs vs. Bu tür şeyleri düzenleyip standart da getirmişler, gerçi herkesçe uygulanmıyor ama, PSR standartlarına göz atmakta fayda var.
33 – Frameworkler özellikle hızlı geliştirme yapmak için çok güzel araçlardır. Kaliteli ve güvenli kod yazmak için özellikle açık kaynak popüler frameworkler işinizi çok kolaylaştırır. Geliştirme sürecinde karşılaşacağınız birçok problem için çözümler barındırır. Özellikle PHP için konuşacak olursak hem projenizi daha hızlı yapar hem de kalite yönünden belli bir standardı tutturmak için kendinizi zorlamış olursunuz. Yazdığınız kodların yapısına da bağlı olarak değişir ama daha taşınabilir kodlar yazmanızı sağlar. Bir güzel yanı da takım çalışması yapılacaksa ortaya çıkar. Bir firmada işe girdiğinizde muhtemelen halihazırda geliştirilmesi başlamış bir projenin başına oturursunuz. Eğer bir framework kullanılmışsa ve siz de o framework konusunda tecrübe edinmişseniz kodları anlamak ve projeye adapte olmak daha kolay gelecektir. Çünkü frameworkün zorladığı belirli standartlara uyulduğu için  neyin nerede olduğu ne yaptığı bellidir.
34 – Burada farklı dillerde web amaçlı frameworkleri sıraladım. ASP .NET Frameworkünü ve MVC kullanıyor. Python’da web için birdan çok framework varken Django bunların arasında en popüleri. Ruby’de web geliştirme için RoR (Ruby on Rails) var. Java için de JSF, Spring, Play!, Vaadin gibi alternatifler var. PHP’de seçenekler daha çok. Özellikle büyük projeler için Symfony ve Zend en bilinenleri. Özellikle Symfony modülerlik konusunda iddialı. Frameworkün kendisi bile bir bundle (her bir modüle bundle deniyor). Örneğin framework Twig template engine kullanıyor, siz kendi projenizde frameworkü istemiyorum sadece Twig’i istiyorum diyebiliyorsunuz. Lego gibi tak çıkar. Laravel ve Yii son zamanlarda popülerleşen, öğrenmesi görece kolay frameworklerden. CodeIgniter dokumantasyon bakımından en zengin framework fakat geliştiren firma artık geliştiremeyeceğini, ilgilenen başka bir firmaya vermek istediğini duyurdu. Ayrıca PHP’nin yeni sürümleri ile de kendini geliştiremedi. Bu yüzden yeni başlayanlar için tavsiye etmiyorum. Onun yerine “Zanaatkarlar için PHP frameworkü” mottosuyla işe koyulan Laravel daha mantıklı geliyor.
35 – Back End’de en önemli konulardan biri de performans. Performans arttırmak için ilk akla gelen yöntemlerden bahsedelim. Öncelikle kod optimizasyonuna değinelim. Kodlarınız işi mümkün olduğunca kısa yoldan yapmalı. Bazı durumlarda dilin alt yapısını bilmeden hangi fonksiyonun hangi yöntemin ne zaman daha performans sağladığını bilmek mümkün olmayabiliyor. İlk aşamada en azından sağ elle sol kulağı tutmayalım, gidip de sonsuz döngüye falan girmeyelim. Ama ilerledikçe okuyarak, araştırarak ufak trickleri öğrenelim.
    SQL optimizasyonu performans açısından en önemli unsurlardan. Çünkü diske erişim maliyetli iş. Ee veritabanı da diskte olduğuna göre, veri çekerken yazarken dikkat etmemiz gerek. SELECT * FROM yerine, eğer gerekmeyen sütunlar varsa * yerine istenen sütunları yazalım. Gerekiyorsa JOIN ile verileri bir seferde çekebilelim. Döngü içerisinde SQL gibi hatalara düşmeyelim.
    Performans arttırmak için cacheleme çözümleri de oldukça yararlı. Örneğin memcache ile şöyle birşey yapabiliyoruz: bir sayfamız var, veritabanı sorguları falan da var içerisinde, bir istek gelip sayfa çıktısı oluşturulduğunda bu çıktının bir kopyasını saklayarak tekrar aynı sayfa istendiğinde tekrar çıktıyı oluşturmak yerine direk hazırını gönderiyoruz. Diyelim veritabanında ilgili verilerde bir değişiklik ya da çıktıyı değiştirecek birşeyler yaptık memcache’den ilgili cache’i temizliyoruz. Böylece bir sonraki gelen tekrar ilgili işlemleri yaparak sayfaya ulaşıyor. Facebook’un cacheleme ile gelen isteklerin %90’ına diske dokunmadan cevap verdiğini okumuştum. Tabi bu biraz uç bir örnek.
    Diyelim hepsini denedik ama yine de donanım yetmiyor, o zaman dikey ya da yatay ölçeklendirme yapabiliriz. Dikeyde makineye ek donanımlar takarız. Ram yetmiyorsa Ram ekleriz. Yatayda ise yükü birden fazla servera yaymayı deneriz.
36 –  Facebook üzerinden ilgilendiğiniz dil ile ilgili sayfaları grupları takip etmekte de fayda var. Örneğin PHP için şu 2 link https://www.facebook.com/groups/tr.developers/  ve https://www.facebook.com/groups/istanbul.developers/ kaliteli tartışmaların döndüğü gruplardır. Front end için de şu grubu tavsiye ederim https://www.facebook.com/groups/arayuzer/ Hatırlatma yapmadan geçmiyim; bu gruplarda genelde kaliteyi korumak adına bazı konularda duyarlılar. Örneğin düzgün soru sorma konusunda dikkat etmek gerek. Hiç araştırma yapmadan sormak yerine önceden bir arayın tarayın eğer bulamazsanız yardım isteyin. Genelde okumaya üşenenlerle ilgili sıkıntılar da var. Biri birşey soruyor cevap veriliyor diyelim şu makalede aradığın var diye, adam okumadan gelip de olmuyo derse yine sıkıntı. Mesela PHP-ist grubunda bu tür durumlar için çözüm olarak bu tür postları trolleme kararı almışlardı.
37 – Piyasada Web geliştirme üzerine işleri 3’e ayırabiliriz. Birincisi herşeyi bilen herşeyden anlayan isveç çakısı modunda çalışanlar. Tahmin ettiğiniz gibi bunlar öyle yüksek maaşlar almazlar. Genelde düşük bütçeli firmalar bu tür geliştiriciler aralar. Örneğin bir arkadaşım böyle bir işe girmişti, karşısına asp’den python’a, PHP spagetti kodlarla yapılmış sitelerden CodeIgniter ile yapılmışına, Face uygulaması geliştirmesine kadar her işi yaptırıyorlardı. İşinde biraz daha tecrübeliler Front end ya da Back end üzerine yoğunlaşırlar. Ayrıca çeşitli uzmanlık alanlarına da yönelinebilir: testçi, güvenlikçi vs. Tabi çalışma şekli olarak bir de freelance’lik var. Bunda da işi dışarıdan yaparsınız, proje başına ücret alırsınız.

, , , , , ,

4 thoughts on “Web Geliştirmeye Başlamak

Leave a Reply

Your email address will not be published. Required fields are marked *