ºÝºÝߣ

ºÝºÝߣShare a Scribd company logo

Web geliÅŸtirmeye baÅŸlamak

•Download as PPTX, PDF•
•
Murat Yüksel
Murat Yüksel

Stajokulu 2013 için yaptığım sunumdur. Amacım 2 saat içerisinde, web ile ilgilenecek, bu alanda kendini geliştirmek isteyenlere nelerle, hangi sıkıntılarla karşılaşacaklarını, nelere dikkat etmeleri gerektiğini anlatarak kafalarında bir yol haritası oluşturmalarını sağlamaktı. Sunumun detaylı anlatımını da blogumda paylaştım: http://muratyuksel.net/blog/web-gelistirmeye-baslamak/ Umarım faydası olmuştur.

1 of 38
Downloaded 13 times
Web Geliştirmeye Nasıl Başlarım By Murat Yüksel
Web geliÅŸtirmeye baÅŸlamak
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ı
Web geliÅŸtirmeye baÅŸlamak
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
Web geliÅŸtirmeye baÅŸlamak
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
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.
BACK END – İlk Adımlar 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
BACK END – İlk Adımlar 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.
Web geliÅŸtirmeye baÅŸlamak
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

Web geliÅŸtirmeye baÅŸlamak

  • 3. 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
  • 4. 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
  • 6. FRONT END Biraz sanat, biraz kodlama, biraz emek...
  • 7. 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?
  • 8. HTML, CSS, JS – Ä°ÅŸte böyle birÅŸey
  • 9. FRONT END – Nelere Dikkat Etmeli • Renk Seçimi • Font Seçimi • Kullanılabilirlik • Browser Uyumu • Responsive Dizayn • Özgünlük
  • 10. FRONT END – Renk Seçimi Kırmızıyı Bulmak: renk körleri için renk kursu açılmalı
  • 12. FRONT END – Font seçimi Özgün, Okunaklı, UTF8 Destekli Comic Sans ile Microsoft ve Facebook logoları
  • 13. 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
  • 14. FRONT END - Kullanılabilirlik - Çok kullanılanı kolay eriÅŸilebilen yere - Alışkanlıklara hitap etmek - Zorluk çıkarmamak
  • 15. FRONT END – Tarayıcı Uyumu Eski versiyonlarla ilgili sorunlar Tarayıcılar arası farklar CSS sıfırlama
  • 17. FROND END – Responsive Dizayn Farklı çözünürlüklere farklı tepki veren tasarımlar
  • 18. FRONT END - CSS Frameworkleri Bootstrap - http://getbootstrap.com
  • 19. 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
  • 20. FRONT END – JS Frameworkleri • Backbone.js • Knockout.js • Google Closure • Ember.js • Angular.js
  • 22. BACK END – Diller • PHP • ASP .NET • JSP (Java) • Django (Phyton) • Ruby on Rails (Ruby)
  • 23. 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/
  • 24. BACK END - Database Verilerimi nerede tutayım ? PHP – Mysql ASP .NET – MSSQL PostgreSQL, Oracle, SQLite, MongoDB,...
  • 25. 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.
  • 26. BACK END – Ä°lk Adımlar 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
  • 27. BACK END – Ä°lk Adımlar 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
  • 28. BACK END - "Güzel" Kod Yazmak Tekrar Kullanılabilir Kodlama Dont Repeat Yourself ( DRY ) Okunabilir Kodlama Keep It Simple, Stupid ( KISS )
  • 29. 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.
  • 30. 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.
  • 32. 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ı
  • 33. 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
  • 34. 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
  • 35. 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
  • 36. 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/
  • 37. Sektörde Web GeliÅŸtirici • Ä°sveç Çakısı • Front End • Back End • Uzmanlıklar