�ݺ�ߣ

Web Geliştirmeye
Nasıl Başlarım
By Murat Yüksel

Web Nasıl Çalışır
Bir isteğin hayatı:
Faruk eczanesi yazıp entera basmak
Kuruyemişçiden adresi öğrenmek
İlgili adrese gidip isteği teslim etmek
İlgili server yazılımı ile cevabın
oluşturulması ve gönderilmesi

Bazı kavramlar
Domain: Faruk Eczanesi
IP: Adres bilgisi
Hosting: Eczane dükkanı
DNS Server: Kuruyemişçi
Web İçeriği: İlaçlar
Web Nasıl Çalışır

Webin İki Yüzü
FRONTEND
BACKEND

FRONT END
Biraz sanat, biraz kodlama, biraz emek...

FRONT END
Malzemeler
HTML, CSS, JavaScript Bilgisi
Tasarım araçları (PS, FW,...)
Birden çok tarayıcı
Yetenek
Sabır
Hasan Yalçın: Nasıl Web Tasarımcısı Olunur?

HTML, CSS, JS – İşte böyle birşey

FRONT END – Nelere Dikkat Etmeli
• Renk Seçimi
• Font Seçimi
• Kullanılabilirlik
• Browser Uyumu
• Responsive Dizayn
• Özgünlük

FRONT END – Renk Seçimi
Kırmızıyı Bulmak: renk körleri için renk kursu açılmalı

FRONT END – Font seçimi
Özgün, Okunaklı, UTF8 Destekli
Comic Sans ile Microsoft ve Facebook logoları

Renk ve Font Yardımcı Kaynaklar
http://www.1001fonts.com/
http://www.google.com/fonts/
http://www.fontsquirrel.com/
https://kuler.adobe.com/create/color-wheel/
http://colorschemedesigner.com/
http://www.colourlovers.com/palettes

FRONT END - Kullanılabilirlik
- Çok kullanılanı kolay erişilebilen yere
- Alışkanlıklara hitap etmek
- Zorluk çıkarmamak

FRONT END – Tarayıcı Uyumu
Eski versiyonlarla ilgili sorunlar
Tarayıcılar arası farklar
CSS sıfırlama

FROND END – Responsive Dizayn
Farklı çözünürlüklere farklı tepki veren tasarımlar

FRONT END - CSS Frameworkleri
Bootstrap - http://getbootstrap.com

FRONT END - CSS Frameworkleri
• Zurb Foundation: http://foundation.zurb.com/
• Gumby FW: http://gumbyframework.com/
• 960 Grid System: http://960.gs/
• YAML: http://www.yaml.de

FRONT END – JS Frameworkleri
• Backbone.js
• Knockout.js
• Google Closure
• Ember.js
• Angular.js

BACK END – Diller
• PHP
• ASP .NET
• JSP (Java)
• Django (Phyton)
• Ruby on Rails (Ruby)

BACK END – Dili Tanımak
Bu dil ile neler yapabilirim,
Hangi fonksiyonları sunuyor:
Array, Calender, Date, Directory, Error, File, Filter,
FTP, HTTP, XML, Math, Mail, DB, String,...
Dilin özellikleri neler; OOP, Frameworkler,
Libraryler, CMS’ler, Design Patternlar
PHP OO bir dildir !!!
http://www.phptherightway.com/

BACK END - Database
Verilerimi nerede tutayım ?
PHP – Mysql
ASP .NET – MSSQL
PostgreSQL, Oracle, SQLite, MongoDB,...

BACK END – İlk Adımlar
Yazılımda öğrenmenin en iyi yolu yazmaktır. Hızlıca
dilin çoğu özelliğini kullanabileceğimiz ilk
projemizi oluşturuyoruz. Kendi blog/portfolyo
sitemi yapıyorum.
https://github.com/adambard/learnxinyminutes-
docs/blob/master/php.html.markdown
http://www.php.net/
1. Adım: Tasarımım bitti, PHP ile bir admin paneli
yapayım, böylece yeni yaptığım işleri kod ile
değil panelden girerim.
Sonuç: MySQL bağlantı, Insert, Update, Select
işlemlerini biraz da Arrayleri öğrendik.

2. Adım: Yazıların toplu gösterildiği sayfa için string
işlemleri yapmamız gerekiyor.
Sonuç: String fonksiyonları ile pratik
3. Adım: Portfolyodaki resimler için resim upload,
boyutlandırma, water mark özelliği eklesek
Sonuç: File upload ve image manipulasyon
işlemleri öğrenildi
4. Adım: Eklenen gönderilerin tarihleri, tarih
aralığına göre gönderileri listeleme ...
Sonuç: Tarih fonksiyonları ile pratik

5. Adım: RSS feed ve site haritası oluşturalım
Sonuç: XML fonksiyonlarını tanıdık
6. Adım: Admin paneli için login ekranı
Sonuç: Güvenlik ile ilgili pratik, SQL injection,
Session fixation, Cross-site scripting engelleme
7. Adım: Yazılara yorum da ekletsem ve yeni
yorumları dk’da bir sayfaya çeksem
Sonuç: Biraz daha güvenlik ve AJAX ile pratik

BACK END - "Güzel" Kod Yazmak
Tekrar Kullanılabilir
Kodlama
Dont Repeat Yourself
( DRY )
Okunabilir Kodlama
Keep It Simple, Stupid
( KISS )

BACK END – Tekrar Kullanılabilirlik
Her projeye sıfırdan mı başlayacağız.
Aynı problemlere tekrar tekrar uğraşmak
yerine, OOP nimetlerinden yararlanarak
soruna özel bir çözüm üretip farklı yerlerde
aynı kodları kullarak çözmek büyük vakit
kazandırır. Üstelik farklı durumlara göre bu
class/plugini güncelleyerek başarılı bir ürün
elde edilebilir.

BACK END – DRY ve KISS
Ne kadar çok aynı kodları tekrar yazıyorsanız o
kadar kötü kod yazıyorsunuz.
Her class tek bir işten sorumlu olmalı.
Problemleri mümkün olduğunca
küçük, basit, anlaşılabilir parçalara böl, ondan
sonra çözüm üretmeye başla.

BACK END – Okunabilir Kod Yazmak
Anlamlı isimlendirmeler yapılmalı.
Method / Classların üzerlerine yorum satırları
eklenmeli (ayrıca bkz. PHPDoc)
Tutarlı isimlendirme ve syntax kullanımı.
Standartlara uymak: PSR standartları

BACK END – Frameworkler
Tekerleği yeniden icat etmeye gerek yok
Popüler açık kaynak ürünlerin kodlarından daha
kaliteli/güvenli kodlama şansın ?
Farklı ihtiyaçlara uygun yüzlerce araç
Modülerlik, tekrar kullanılabilirlik
Takım çalışmasında daha hızlı adaptasyon

BACK END – Frameworkler
PHP
• Symfony
• Zend
• Laravel
• Yii
• CakePHP
• CodeIgniter (???)
• Kohana
ASP
•.NET Framework
•MVC
Python
•Django
Ruby
•Ruby on Rails
JAVA
•JSF
•Spring
•Play!
•Vaadin

BACK END - Performans
Kod optimizasyonu: CPU, RAM dostu kodlar
SQL optimizasyonu: DB’ye mümkün olduğunca
az git. Diske erişim maliyetli iş.
Cache mekanizmaları: memcache, APC, ...
En olmadı dikey ve/veya yatay ölçekleme

Sosyal Medya ile Öğrenme
PHP-TR:
https://www.facebook.com/groups/tr.develop
ers/
PHP-ist:
https://www.facebook.com/groups/istanbul.d
evelopers/
Arayüz Geliştiriciler:
https://www.facebook.com/groups/arayuzer/

Sektörde Web Geliştirici
• İsveç Çakısı
• Front End
• Back End
• Uzmanlıklar

�ݺ�ߣ

Web geliştirmeye başlamak

More Related Content

Similar to Web geliştirmeye başlamak (20)

Web geliştirmeye başlamak