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

Web geliştirmeye başlamak

Embed Size (px)

DESCRIPTION

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.

Citation preview

  • 1. Web Gelitirmeye Nasl Balarm By Murat Yksel

2. Web Nasl alr Bir istein hayat: Faruk eczanesi yazp entera basmak Kuruyemiiden adresi renmek lgili adrese gidip istei teslim etmek lgili server yazlm ile cevabn oluturulmas ve gnderilmesi 3. Baz kavramlar Domain: Faruk Eczanesi IP: Adres bilgisi Hosting: Eczane dkkan DNS Server: Kuruyemii Web erii: lalar Web Nasl alr 4. Webin ki Yz FRONTEND BACKEND 5. FRONT END Biraz sanat, biraz kodlama, biraz emek... 6. FRONT END Malzemeler HTML, CSS, JavaScript Bilgisi Tasarm aralar (PS, FW,...) Birden ok tarayc Yetenek Sabr Hasan Yaln: Nasl Web Tasarmcs Olunur? 7. HTML, CSS, JS te byle birey 8. FRONT END Nelere Dikkat Etmeli Renk Seimi Font Seimi Kullanlabilirlik Browser Uyumu Responsive Dizayn zgnlk 9. FRONT END Renk Seimi Krmzy Bulmak: renk krleri iin renk kursu almal 10. FRONT END Font seimi zgn, Okunakl, UTF8 Destekli Comic Sans ile Microsoft ve Facebook logolar 11. Renk ve Font Yardmc 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 12. FRONT END - Kullanlabilirlik - ok kullanlan kolay eriilebilen yere - Alkanlklara hitap etmek - Zorluk karmamak 13. FRONT END Tarayc Uyumu Eski versiyonlarla ilgili sorunlar Tarayclar aras farklar CSS sfrlama 14. FROND END Responsive Dizayn Farkl znrlklere farkl tepki veren tasarmlar 15. FRONT END - CSS Frameworkleri Bootstrap - http://getbootstrap.com 16. 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 17. FRONT END JS Frameworkleri Backbone.js Knockout.js Google Closure Ember.js Angular.js 18. BACK END 19. BACK END Diller PHP ASP .NET JSP (Java) Django (Phyton) Ruby on Rails (Ruby) 20. BACK END Dili Tanmak 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, CMSler, Design Patternlar PHP OO bir dildir !!! http://www.phptherightway.com/ 21. BACK END - Database Verilerimi nerede tutaym ? PHP Mysql ASP .NET MSSQL PostgreSQL, Oracle, SQLite, MongoDB,... 22. BACK END lk Admlar Yazlmda renmenin en iyi yolu yazmaktr. Hzlca dilin ou zelliini kullanabileceimiz ilk projemizi oluturuyoruz. Kendi blog/portfolyo sitemi yapyorum. https://github.com/adambard/learnxinyminutes- docs/blob/master/php.html.markdown http://www.php.net/ 1. Adm: Tasarmm bitti, PHP ile bir admin paneli yapaym, bylece yeni yaptm ileri kod ile deil panelden girerim. Sonu: MySQL balant, Insert, Update, Select ilemlerini biraz da Arrayleri rendik. 23. BACK END lk Admlar 2. Adm: Yazlarn toplu gsterildii sayfa iin string ilemleri yapmamz gerekiyor. Sonu: String fonksiyonlar ile pratik 3. Adm: Portfolyodaki resimler iin resim upload, boyutlandrma, water mark zellii eklesek Sonu: File upload ve image manipulasyon ilemleri renildi 4. Adm: Eklenen gnderilerin tarihleri, tarih aralna gre gnderileri listeleme ... Sonu: Tarih fonksiyonlar ile pratik 24. BACK END lk Admlar 5. Adm: RSS feed ve site haritas oluturalm Sonu: XML fonksiyonlarn tandk 6. Adm: Admin paneli iin login ekran Sonu: Gvenlik ile ilgili pratik, SQL injection, Session fixation, Cross-site scripting engelleme 7. Adm: Yazlara yorum da ekletsem ve yeni yorumlar dkda bir sayfaya eksem Sonu: Biraz daha gvenlik ve AJAX ile pratik 25. BACK END - "Gzel" Kod Yazmak Tekrar Kullanlabilir Kodlama Dont Repeat Yourself ( DRY ) Okunabilir Kodlama Keep It Simple, Stupid ( KISS ) 26. BACK END Tekrar Kullanlabilirlik Her projeye sfrdan m balayacaz. Ayn problemlere tekrar tekrar uramak yerine, OOP nimetlerinden yararlanarak soruna zel bir zm retip farkl yerlerde ayn kodlar kullarak zmek byk vakit kazandrr. stelik farkl durumlara gre bu class/plugini gncelleyerek baarl bir rn elde edilebilir. 27. BACK END DRY ve KISS Ne kadar ok ayn kodlar tekrar yazyorsanz o kadar kt kod yazyorsunuz. Her class tek bir iten sorumlu olmal. Problemleri mmkn olduunca kk, basit, anlalabilir paralara bl, ondan sonra zm retmeye bala. 28. BACK END Okunabilir Kod Yazmak Anlaml isimlendirmeler yaplmal. Method / Classlarn zerlerine yorum satrlar eklenmeli (ayrca bkz. PHPDoc) Tutarl isimlendirme ve syntax kullanm. Standartlara uymak: PSR standartlar 29. BACK END Frameworkler Tekerlei yeniden icat etmeye gerek yok Popler ak kaynak rnlerin kodlarndan daha kaliteli/gvenli kodlama ansn ? Farkl ihtiyalara uygun yzlerce ara Modlerlik, tekrar kullanlabilirlik Takm almasnda daha hzl adaptasyon 30. 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 31. BACK END - Performans Kod optimizasyonu: CPU, RAM dostu kodlar SQL optimizasyonu: DBye mmkn olduunca az git. Diske eriim maliyetli i. Cache mekanizmalar: memcache, APC, ... En olmad dikey ve/veya yatay lekleme 32. Sosyal Medya ile renme PHP-TR: https://www.facebook.com/groups/tr.develop ers/ PHP-ist: https://www.facebook.com/groups/istanbul.d evelopers/ Arayz Gelitiriciler: https://www.facebook.com/groups/arayuzer/ 33. Sektrde Web Gelitirici sve aks Front End Back End Uzmanlklar