Bir Website Yaparken Hangi Adımlar Uygulanmalıdır [Yardım]

SelamuAleyküm, kendim için bir portfolio hazırlayacağım. Hali hazırda web tasarım üzerine kodlama bilgim az buçuk var. Javascript de öğrenmeye çalışıyorum ancak aşama aşama bunları projelerle pekiştirmek istiyorum. Velhasıl bu projeleri yaparken uygulayacağım adımlarda bazı problemler yaşıyorum. Bu konunun ben dahil birçok kişiye fayda sağlayacağı düşüncesindeyim.

Bir web tasarımcı, sıfırdan bir proje kodlayacağı zaman hangi aşamaları izlemelidir. Adımlarını nasıl atmalıdır?
Örneğin;

-Klasörler açılır. (Javascript, css, img's, other, assets vb.)
-Git kurulur(kullanılacaksa)
-İndex sayfası oluşturulur.
-Bir defterde taslak hazırlanır.
-CSS dosyaları açılır vs.vs gibi

Bu adımları uygulama aşamasında kendimi çok amatör hissediyorum, profesyonel olarak front-end'den para kazanan arkadaşlarımız varsa hangi adımları izlediklerini en azından şablon halinde paylaşırlarsa mutlu olurum. Örneğin taslaktan alıp projeye mi döküyorsunuz, git kullanıyor musunuz, ilk kodlamaya hangi sayfadan başlıyorsunuz, herşeyi kendiniz mi yazmaya çabalıyorsunuz yoksa Copy-Paste kod kullanmak da profesyonelliğin bir parçası mı.. Bu gibi detaylar eminim hepimize fayda sağlayacaktır.

Git nedir? Ne zaman git kullanilmali? Kimler git kullanmali?
Bir versiyonlama sistemidir. Git her zaman kullanabilirsiniz. Ornegin bir alandaki koda artik ihtiyac duymuyorsunuz yerine alternatif bi kod yazdiniz. Aaa o da ne icinize sinmedi ve geri almak istiyorsunuz. iste tam olarak git versiyonlama burada devreye girer. tabi daha buyuk olaylar ve daha buyuk ekip isin icine girerse git daha da anlam kazaniyor.
Nodejs Nedir?
Hebele hubele yapip uzatmayacagim. Javascriptin serverside calisan versiyonudur diyip yuzeysel birakacagim.
Yarn nedir?
Paket yoneticidir. Kapiciya benzetebilirisiniz. Ekmek al. Copleri dok gibi.
Gulp Nedir?
javascriptin gorev calistiricisidir. javascript icin gorevler atarsaniz ve durumlara gore bunlari isteginize gore calistirir diyeyim.
Gulp pluginleri Nedir?
Gulp ile birlikte calismasi icin yazilmis eklentidir.
Sass nedir?
css uzanti dili diyebiliriz kendi tabiri ile.

Nasil bir calisma ortami olusturabilir?

Proje ihtiyaciniza gore kullanacaginiz her sey degisiklik gosterebilir. Fakat basma kalip ile olmaz mi? Olur.

Projeyi ortamini kabaca 2ye ayirabiliriz.
development ve production
yani gelistirme ve urun.

gelistirme ortami icin basit giris yapabiliriz.
app ve dist olarak 2 klasore ayiralim ornegin.

app kisminda gelistirdigimiz dosyalar olacak dist kisminda ise urunumuzun ciktisi olacak.

dev kisminin klasor yapisini basitce su sekilde sekillendirebiliriz. tamamen aliskanliklariniza keyfinize gore degisebilir.



bu sekilde klasorlendirdikten sonra assets'in icine bir goz atalim


simdi de images'in icine bakalim? evet icerisinde ben bir dosya daha olusturuyorum sprite icin.



images da tamam simdi bir de bakalim scriptste neler kullanabiliriz?



simdi scriptler neden bu kadar bolundu ve bu klasorler neler?
libs kutuphaneler icindir. jquery, vue, angular vs.
plugins nedir? mesela bootstrap yada bootstrap icin yazilmis diger eklentiler yada dogrudan jquery icin angular vs icin yazilmis eklentiler icin. ornegin jquery-pickadate.js gibi bir takvim eklentisi.
views nedir peki? buraya bir ornek verirsek

seklinde yapabilirsin. boylece bilirsin ki artik sadece anasayfa icin home.js'e bakacaksin. ajax login gibi islemler icin general.js'e bakacaksin.
hatta abartip mesela general.js yerine general seklinde bir klasor olusturup icerisine yazacak her kismi ayri ayri tek tek parcalayabilirsin. ve bir sey aradiginda daha kolay bulabilirsin.
son olarak da script icinde controllersta fonksiyonlarimizi yerlestiririz. ornegin ajax registir formu doldurdu datayi /views/home.js ile aldik ve /controllers/home.js'teki fonksiyonumuza yolladik ve fonksiyon bakti username dolu mu 5 karakterden buyuk mu gibi front endte yapilacak basit guvenlik kontrollerini sagladi. daha kompleks bir sey olusturmak istemiyorum her seyi yuzeysel birakmaya calisiyorum cunku en bastada belirttim tamamen aliskanlik ve yogurt yiyisle alakali. tabiki duzen onemli ama

script bitti gelelim styles'a



frameworks altinda core mixin gibi yapisal stillerimizi barindirabiliriz.


kaba yazdim proje ihtiyacina gore daraltabilir yada genisletebilirsin.
ornegin mixini son bir dal daha acalim


Uzerinde devam edecegim. Genis bir sey yazmayi bildiklerimi aktarmayi dusunuyorum bilgi almak isteyen guncelledikce etiketlememi isteyenler not dusebilirler.

Yapılacak projenin ihtiyaçları analiz edilir.
Bu analizler sonucunda ortaya çıkan ihtiyaçların cevapları verilmeye çalışır.
Bu cevaplar ile trend çizgiler uygularak prototip çalışması yapılır. (PSD çizim diyebiliriz.)
Prototip çalışması ardından proje, müşterinin onayına sunulur.

Eğer onay verilmezse eksikler göden geçirilip işlemler tekrar yapılır.
Eğer onay alınırsa HTML - CSS kısmına geçiş yapılır.

HTML - CSS kısmında benim ağaç yapım şu şekilde:

../proje/css/*.css
../proje/js/*.js
../proje/img/*.*
../proje/video/*.*
../proje/plugins/*/*.*

Hazırladığınız tasarımda kullanacağınız bütün kütüphaneleri (css - js fark etmeksizin) plugins altında topluyorum. Eğer tasarıma özgü kod yazmam gerekirse css, js gibi klasörler altında uygun dosyaları oluşturup yazıyorum. Kesinlikle ama kesinlikle pluginss altındaki kütüphaneleri değiştirmeyin. Yoksa projenizi güncellemek isterseniz çökecektir. Tabi herkesin yoğurt yemesi farklıdır. Kendinize özgü dosya ağacı oluşturabilirsiniz.

HTML - CSS dökümü ardından test aşaması var. Hem tüm ekranlarda hem de tüm tarayıcılarda test etmeye çalışın. Test sonucuna göre eksiklikler varsa tamamlamak gerek.

Test sonucunda proje müşteriye sunulur. Onay aldıktan sonra ürün hazır hale gelmiş, yazılımcıların üzerinde çalışacağı uygun ortam oluşmuş demektir.

Teşekkürler devamını bekleriz

Gayet doyurucu bir yorum hocam, çok teşekkürler. Peki size bir soru sormak istiyorum, taslak çizim kısmı ne kadar sürüyor. Örneğin ortalama bir web sitesi için çizim yaparken ne kadar zaman harcıyorsunuz?

zaman buldukca paylasacagim genel mantigini en son teknolojilerle biraz da benim aliskanliklarimla anlatacagim.
yapman gereken sey son teknolojilerin son surumlerindeki degisiklikleri takip etmek ve kendi aliskanliklari edinmen.
front endte nodejs kullanarak ufak ufak eklentileri kullanarak ornek kod parcaciklariyla bir seyler atmaya calisacagim oncelikle klasor yapisini ve mantigini nasil oldugunu vs yani calisma ortaminin iskeletini hazirliyorum.

İstenilen özelliklere, çalışmanın inceliğine, sayfa sayısına göre değişiyor. Sabit bir zaman diyemem size.

Hocam ben yeni yorum atarsınız sanmıştım, yeni gördüm kusura bakmayın elinize sağlık çok uzun uzadıya anlatmışsınız teşekkür ederiz