WordPress – WordPress Nedir? – Kurulum (1)

Sağdan soldan heryerden WordPress lafını duyuyorsunuzdur. Peki nedir bu wordpress? WordPress kendini kanıtlamış bir içerik yönetim sistemidir. Peki içerik yönetim sistemi nedir? İçerik, yani metin, resim, video ve başka bilgilerden oluşur. Temelde belli başlı kategorilere ait olan bilgilerdir. İçeriğin zaman boyutu da olursa (Haberler, günlük gibi.), o zaman bu içerik yönetim sistemine blog denir. WordPress’te zamana göre girilen içeriğe YAZI, sabit içeriğe SAYFA denir. Bizim de böyle sayfa ve yazılar içeren bir sisteme ihtiyacımız varsa, WordPress’i çok öneririm. Açık kaynaklı olması, desteği, oturmuş kod yapısı, güvenliği ile iyi bir tercih olacaktır. Peki ne zaman wordpress’i kullanacağız? Bizden iş isteyen şirketin, aşırı spesifik bilgi yönetimi ihtiyaçları yoksa (ki plugin’lerle bu ihtiyaçlar da giderilebilir.), sıfırdan FW kullanarak sistem geliştirmiyorsak, müşteri daha önceden WordPress sistemine aşinaysa, ve örneğin, STK’lar için sistemler kuruyorsam, ben WordPress’i tercih ediyorum. Şimdi gelelim kurulum kullanım aşamalarına. Öncelikle ht...
Patreon üyelerine özel içerik.
To view this content, you must be a member of Mutlu's Patreon at "Merakli Bilişimci Üye..." or higher tier
Already a Patreon member? Refresh to access this post.

Nesne Yönelimli Programlama Mantığı – OOP

Sürekli sağdan soldan duyuyorsunuzdur. Artık hayatımızda OOP ve NYP diye kavramlar var. Bu yazıda size teknik detaylardan daha çok sınıfları neden kullanmalıyız ve mantığı nedir onu anlatmaya çalışacağım. Eğer siz de “ben fonksiyon yazıyorum, oop neymiş yeaaaee” demiyorsanız, kendinizi geliştirmeye de açıksanız oop’nin, yani nesne yönelimli programlamanın faydalarından başlayalım. 1. Kodunuz okunabilir olur. Kodda kullandığınız değişkenleri, fonksiyonları rahatça görebilir ve değiştirebilirsiniz. Aynı projede çalışan sizden başka geliştiriciler kodunuzu anlayabilirler. 2. Kodunuz tekrar tekrar kullanılabilir Örneğin her veritabanı işleminde tekrar tekrar SQL kodu yazmak yerine, bir veritabnı sınıfı kullanırsınız, ya da bu ekle, sil, göster, listele işlemlerini yapan bi sınıf oluşturursunuz, başka bir şirket bu proje oracle’da çalışsın istiyorum dediğinde apışıp kalmazsınız. Ya da bir okul için yazdığınız “öğrenciler” sınıfını, öğrencilerin notlarının yönetildiği ders yönetim sisteminde ve yemekhane yönetim sisteminde kolayca kullanabilirsiniz. 3. K...
Patreon üyelerine özel içerik.
To view this content, you must be a member of Mutlu's Patreon at "Merakli Bilişimci Üye..." or higher tier
Already a Patreon member? Refresh to access this post.

Tasarımı HTML5 ve CSS3′e dökmek (Son) – CSS Yazma – 2

Bu yazıda CSS Kodumuzu yazmaya devam ediyoruz. Özet navigasyonu bitirdik ve detaylı navigasyonu bitirmemiz gerek. İlk iş detaylı navigasyonla başlayalım. Navigasyonun şu anki durumu bu şekilde. Bunu şu şekle çevirmeliyiz: Yani üst başlıklar yatay ama her üst başlığın alt menüleri dikey olacak. Bunu da #detail-navigation > ul > li{ float: left; display: inline-block; margin-right: 72px; } ile hallediyoruz. Burada “>” işareti etiketin içindeki ilk child-elemente gider. Mantığı şu şekilde açıklayabiliriz: <nine> <evlat id="anne"> <evlat id="kiz"></evlat> </evlat> </nine> Eğer “nine > evlat” dersek burada sadece id’si anne olan elemanı seçeriz. ama “nine evlat” deseydik, id’si “anne” olanı ve id’si “kız” olan etiketleri seçecektik. Bir sonraki adımımız, özet alt bilgi, yani “summary footer”. Burada 3 tane liste elemanımız var. Bu liste elemanlarını dağıtmak istiyoruz. Bunun için de foundation’un block-grid özelliğinden yararlanacağız. <div id=...
Patreon üyelerine özel içerik.
To view this content, you must be a member of Mutlu's Patreon at "Merakli Bilişimci Üye..." or higher tier
Already a Patreon member? Refresh to access this post.

Tasarımı HTML5 ve CSS3′e dökmek (5) – CSS Yazma – 1

Neredeyse herşey hazır. Hala tek satır kod yazmadık. Ama bütün bileşenler yerli yerinde. Şimdi sıra bu bileşenlerin görünümlerini tasarımcının istediği gibi şekillendirmemizde. Bildiğiniz gibi ben bu blog’da PHP veya CSS el kitabı gibi herşeyi detaylı olarak anlatmıyorum. Konuların önce mantığını vermeye, daha sonra mantığını anlayan kişinin de merak ederek üreterek detaylara ineceğine inanıyorum. Sonuçta öğrenmeye yeni başlamış korku içindeki bir insanı ince detaylarda boğmamak gerekiyor. Bu nedenle bu yazıda da CSS detaylarını anlatmayacağım. Sadece temellerinden ve en çok ihtiyaç duyulan şeylerden bahsederek uygulamaya geçiyoruz. CSS, “cascading style sheets”, “Basamaklı Biçim Sayfaları”, bir internet sayfasını ve bölümleri oluşturna tag’leri (etiketleri) istediğimiz gibi renklendirmemizi, şekillendirmemizi sağlayan şablon dosyalarıdır. İnternet sayfalarından bilgiyi metin olarak almıyoruz, bazı başlıkların daha büyük, bazılarının daha küçük, daha okunaklı olmalarını amaçlıyoruz. Bazen ise vermek istediğimiz mesaja göre farklı tasarımlar yapmamı...
Patreon üyelerine özel içerik.
To view this content, you must be a member of Mutlu's Patreon at "Merakli Bilişimci Üye..." or higher tier
Already a Patreon member? Refresh to access this post.

Spagetti kod nedir?

Sıklıkla duyduğumuz spagetti kod bütün PHP geliştiricilerinin (ben dahil) içinden geçtiği bi aşamadır. Eğer “ben böyle iyiyim yeaa!” derseniz, içinde “OOP” geçen iş ilanlarından kaçarsınız. Ama doğru dürüst program yazacağım, kaliteli ve uzun ömürlü iş çıkarmak istiyorum diyorsanız, KENDİNİZİ GELİŞTİRECEKSİNİZ. Gelelim spaghettiye. Spaghetti kodun ilk özelliği, hiçbir sınıf veya daha açık bi şekilde nesne yönelimli programlama yapısına sahip olmamasıdır. Yani nesne yönelimli programlamanın avantajlarını kullanamazsınız. Aynı dosya içinde istediğiniz yerlere fonksiyonları tanımlarsınız ve html’nin bir köşesinde, js’nin içinde bu fonksiyonları gelişigüzel çağırırsınız. Diyelim ki sık kullandığınız fonksiyonları grupladınız ve include etmeye başladınız, include ‘1.php’; include ‘2.php’; gidiyor. Hangi fonksiyon nerdeydi? Ya 600 fonksiyonunuz varsa, ya da farklı kütüphaneleri çekiyorsanız? Acaba fonksiyon isimleri çakışıyor mu? Kabus. Mesela OOP, OOP diye duydunuz. Yazdığınız spagetti kodunun başına class yazmakla da olmuyo. Aşa...
Patreon üyelerine özel içerik.
To view this content, you must be a member of Mutlu's Patreon at "Merakli Bilişimci Üye..." or higher tier
Already a Patreon member? Refresh to access this post.

Tasarımı HTML5 ve CSS3′e dökmek (4) – Bileşenleri yerleştirmek

İmajları aldık, fontları yerleştirdik, css dosyamızı düzenledik. Tasarımcıdan “lorem ipsum” metinleri, navigasyon isimlerini istedik, çoğunu verdi, bazıları için de “eeah, psd verdik ya bak ordan işte” dedi. Dikkat ederseniz hala tek satır CSS kodu yazmadık. Ona da sıra gelecek. Önce tek tek imajlarımızı, menülerimizi, bileşenlerimizi yerleştirmemiz gerekiyor. Bunu böyle yapmamızdaki amaç, CSS olmadan da bütün herşeyin düzgün göründüğünü sağlama almak. Öncelikle imajları yerleştirelim. İmajları yerleştirirken dikkat etmemiz gereken şey her img tag’inin kendi kendini kapatıyor olması ve her birnin title yani başlık özelliğine sahip olması. <img src="img/logo-kucuk.png" title="logo" alt="logo" /> Tüm imajları bu şekilde yerleştirmemiz gerekiyor. Daha sonra sitede gezinmeyi sağlayan navigasyonları sırasız liste şeklinde eklemeliyiz. bunları “nav” taglerinin arasına yerleştiriyoruz ki, google robotçukları bunun sitemizde gezinmeye yarayan linkleri barındıran listeler olduğunu anlasın. Örneğin “summary-nav” dediğimiz hızlı gezinm...
Patreon üyelerine özel içerik.
To view this content, you must be a member of Mutlu's Patreon at "Merakli Bilişimci Üye..." or higher tier
Already a Patreon member? Refresh to access this post.

Tasarımı HTML5 ve CSS3′e dökmek (3) – Klasör yapısı, CSS Framework Seçimi

Tasarımcı arkadaşları psd kesmeleri için zorlayıp imajları, logoları, ikonları ve faviconları aldıktan sonra kullanmamız gereken css frameworküne karar vermemiz gerekiyor. CSS çerçeveleri genellikle 960px genişliğinde ve bizim için ortalanmış ve sayfa bileşenleri için önceden 12’ye bölünmüş genişlikleri kullanabilmemizi sağlayan class’ları verirler. Ayrıca barındırdıkları @media-query’ler sayesinde (responsive) “tepkileşimli” yani gösterildikleri ekrana, cihaza, cihazın yatay/dikeyliğine göre bozulmadan görüntülenmelerini sağlayan hazır css sınıflarıdırlar. Ayrıca yazıların boşlukların her tarayıcıda aynı görünmelerini sağlayan reset.css sınıflarını da barındırırlar. Diyelim ki ben bütün css sınıflarını genişliklerini kendim ayarlamak istiyorum ve kesinlikle tasarımıma sınıfın müdahelesini istemiyorum diyorsanız o zaman, sadece reset.css ve modernizr.js, yani html5 taglerinin, html5 desteklemeyen tarayıcılarda görünmesini sağlayan html5boilerplate öneririm. http://html5boilerplate.com/ İnternette kullanılan bir numaralı CSS Framework’ü kullanmak is...
Patreon üyelerine özel içerik.
To view this content, you must be a member of Mutlu's Patreon at "Merakli Bilişimci Üye..." or higher tier
Already a Patreon member? Refresh to access this post.

Tasarımı HTML5 ve CSS3′e dökmek (2) – Mantıksal Tasarım

Genellikle tasarımcılar bize tasarımlarını .psd olarak gönderirler ve bu tasarımı bizim koda dökmemiz gerekir. Öncelikle yapmamız gereken, hiçbir süsleme öğesi kulanmadan HTML5 kodu çıkarabilmek için tasarımı analiz etmek. Şimdi tasarıma göz atalım. home.psd dosyamız şu şekilde: Burada tasarımcı bize yardımcı olacak bazı rehber noktaları vermiş. Fakat bizim koda dökmemiz için daha detaylı incelememiz gerekiyor. Bunun için de tasarımı analiz etmemiz lazım. Öncelikle tasarıma baktığımızda gördüğümüz, kullanıcının navigasyon menüleri arasında kaybolmaması hedeflenmiş, en çok kullanılan navigasyon ve altbilgi öğeleri gruplanarak özet nav ve özet footer bölümleri oluşturulmuş. Bunları nasıl kodlarız? İlk başta dediğimiz gibi bu aşamada hiçbir süsleme ve içerik öğesini dosyalarımıza eklemeyeceğiz. ihtiyacımız olan en basit HTML5 dosyasını düşünerek kodlamamızı yapalım. Daha sonra body kısmını istediğimiz framework’e taşımamız kolay. <!DOCTYPE html> <html> <head>     <meta charset="UTF-8"> <title>ARTINTERNATIONAL</title> </head> <body>...
Patreon üyelerine özel içerik.
To view this content, you must be a member of Mutlu's Patreon at "Merakli Bilişimci Üye..." or higher tier
Already a Patreon member? Refresh to access this post.

Tasarımı HTML5 ve CSS3’e dökmek (1) – Font işleri

Genellikle bir web projesine başladığımda, tasarımcıdan tasarım Psd formatında gelir. Bazı tembel tasarımcı arkadaşlar, aynı psd dosyası üzerinde katman katman çalışıp o photoshop gözleriyle oynattırırlar insanı, buradan onlara sesleniyorum. Ayrı ayrı her sayfa için .psd yapın şunu lütfen. Tasarımı koda dökerken kulaklarını baya çınlatıyoruz o photoshop gözlerini açıp kapatırken. Aşama aşama yapacağımız şeyler şöyle: PSD olarak gelen dosyadaki fontları webfont’a çevirmek Tasarımdaki mantıksal öğeleri, hiçbir süsleme kullanmadan saf HTML’ye dökmek İmajlar, ikonlar, logolar için tasarımcının kafasını ütülemek Hangi CSS framework’ünü kullanacağımıza karar vermek Tasarıma özgü CSS kodunu oluşturmak. JS ile sağlanabilecek interaktif öğeleri jQuery ile yazmak. Back-End kısımını halletmek. (Bu projeyi wordpress teması olarak oluşturacağız. Bir sonraki seride bu işi yapacağız.) 1. Font çevirme işlemi Tasarımcıların tasarımlarında kullandıkları fontları web üzerinden, tarayıcı ile uyumlu hale getirmemiz gerekiyor. Genellikle font dosyaları farklı farklı olur ve bunları CSS i...
Patreon üyelerine özel içerik.
To view this content, you must be a member of Mutlu's Patreon at "Merakli Bilişimci Üye..." or higher tier
Already a Patreon member? Refresh to access this post.