Web Tasarıma Nasıl Başlanır ?

Merhabalar,
Eğer bu yazıyı okuyarsanız büyük ihtimalle bizim sektöre atılmak istiyorsunuz. Öncelikle bir uyarı yapayım. Dikkat

Bu işlere başladığınız saniyeden itibaren hayatınız son derece değişebilir. Eğer kendinizi azcık kaptırırsanız yavaş yavaş asosyalleşmeye başlayabilir, sürekli karşınıza çıkacak buglardan dolayı ufak sinir krizleri geçirebilir, projelerinizi deadline’a ([Okunuşu: Dedlayn] – Bitiş Zamanı) yetiştirmeye çalışırken geceleri uykusuz kalabilir ve de ciddi anlamda kahve bağımlısı olabilirsiniz. Her ne kadar bu söylediklerim sanki espriymiş gibi dursa da ciddiye almanızda fayda var. Sonra uyarmadı demeyin.

Evet şimdi başlayabiliriz. Öncelikle web tasarımcı kavramından başlayalım. Her ne kadar web tasarımcı dendiğinde akla bir web sitesi yapan kişi gelse de aslında bu durum böyle değildir. Yani en azından bu işlerle ilgilendiğim 4 yıl boyunca beni kandırmamışlarsa söylediğim cümle sonuna kadar doğru.

Peki nedir bu web tasarımcı kavramı, şimdi oradan başlayabiliriz. Bir sitenin yapım aşamasında aslında en sağlıklı yöntem en az 3 kişi ile çalışmaktır çünkü bir web sitesinin yapımındaki her aşama ayrı bir uzmanlık gerektirmektedir. Ortalama bir web sitesini tek bir kişi yapabilir tabiki ama bizim burada bahsettiğimiz büyük bir proje. Neden en az 3 kişi dediğimi de açıklayayım.

Bir web sitesi temel olarak 3 parçadan oluşur, ilk parçası sitenin tasarımıdır, ikinci parçası front-end olarak adlandırdığımız kısım ve son parçası da back-end olarak adlandırılan kısımdır. Merak etmeyin şimdi de bunları açıklayacağım.

Web Tasarım

Web tasarım dediğimiz kısım sitenin gerçekten tasarım kısmıdır. Kodlamayla alakası yoktur. Tasarımcı arkadaşımız Adobe Photoshop (ki bu işte en çok kullanılan programdır kendisi) gibi programlar kullanarak web sitesinin çizimini yapar. Nerede ne olacağına, kullanılacak renklere, sitedeki butonların kenarlıklarının rengine ve yuvarlaklığına kadar her şeyine karar veren, hayal ettiği sitenin görünümünü bilgisayara aktaran kişidir. Bu kısımda hayal gücü biraz daha ön plandadır. Eğer çizim yeteneğiniz varsa, bir şeyleri görsel açıdan eleştirebiliyorsanız, ciddi bir hayal gücüne sahipseniz bu kısım size göre olabilir.

Front-end Geliştirme

Bu alanda kendinizi geliştirmek isterseniz kodlama öğrenmeniz gerekecek. Kodlama dediğime bakmayın, Front-end kodlamak çok da zor değil. HTML ve CSS adındaki iki dili mutlak surette öğrenmeniz gerekecek. Her ne kadar çok basit diller olsalar da pratik yapmadığınız sürece öğrenemeyeceksiniz ve öğrendiklerinizi de unutacaksınız. O yüzden yazının sonunda verdiğim kaynaklarla çalışmaya başladıktan sonra sürekli olarak pratikler yapıp öğrendiklerinizi pekiştirin. Front-end geliştiricinin ne yaptığından biraz bahsedelim. Bu arkadaşımız da tasarımcı arkadaşımızın yapmış olduğu tasarımı alıp ona bakarak gördüğü şeyleri koda dökmekle görevli. Tabiki de tasarımcı arkadaşımızın ne yaptığını anlaması için kendisinin de temel düzeyde tasarımcısının kullandığı programı bilmesi gerekiyor. Genel olarak Adobe Photoshop kullanıldığı için Front-end developer arkadaşımızın da Photoshop kullanımını temel anlamda bilmesi gerektiğini söyleyebiliriz.

Kısaca toplarlayacak olursak kendisine gelen tasarımı HTML ve CSS dilleriyle koda döken, temel anlamda Photoshop kullanabilme becerisine sahip arkadaş oluyor kendileri.

Back-end Geliştirme

Bu kısım diğerlerine göre biraz daha karmaşık. Çünkü burada işin içine algoritma giriyor. Bu kısımda yapılan şeyleri açıklamak bana her zaman zor gelmiştir açıkçası. Bunu bir örnek üzerinde açıklasam iyi olur. Ufak bir blog sitesi yapıldığını hayal edelim. Tasarımcı abimiz tasarımı yaptı ve daha sonra Front-end Developer kardeşimize gönderdi. Bu kardeşimiz de tasarımda gördüğü şeyleri kodladı. Her şey iyi güzel ama burada şöyle bir durum var, tasarım kodlandığı zaman, yani sadece HTML ve CSS ile kodlandığı zaman insanların kullanacağı bir site haline gelmiyor. Blog örneğimiz üzerinden devam edelim. Bu blogun kullanıma hazır olması için kodlanmış tasarımın üzerine bir sistem eklenmeli. Blog yazılarının eklenebildiği, insanların üye olup yorum yapabildiği, iletişim formları üzerinden yöneticilere bilgi verilebildiği bir sistem hazırlanması gerekiyor. İşte bu durumda da Back-end Developer kardeşimiz imdadımıza yetişiyor. Burada biraz kafanız karışmış olabilir. O yüzden şöyle düşünebilirsiniz. Sitemizin arayüzü kodlanmış durumda, yani tasarım HTMl ve CSS dilleriyle kodlanmış. Bir web sitesi görünümünü aldı. Bu durumda site her ne kadar bir görünüm kazanmış olsa da içerisindeki her içerik statik durumda. Bu içerikleri düzenlemek istediğimiz zaman kodlarımızı açıp değiştirmemiz gerekiyor. İşte biz tekrar tekrar kodlara dokunmamak ve siteye dinamiklik kazandırmak için bir yönetim paneli yapıyoruz. İşte bu paneli yapan arkadaşımız da Back-end Developer olarak adlandırılıyor. Aslında olay çok daha derin ama en basit şekliyle böyle anlatabileceğime karar verdim. Biraz daha farklı bir şekilde anlatmak gerekirse Back-end Developer arkadaşımızın görevi kullanıcıdan veri almak, bu verileri işlemek, verileri saklamak ve istenilen şekilde servis etmek. Veriyi saklamak için genellikle veritabanı kullanıldığı için bu arkadaşımız veritabanına da hakim olmak zorunda. Ayrıca tıpkı Front-end developerın temel seviyede Photoshop bilmesi gerektiği gibi bu arkadaşımız da en azından okuduğunu anlayacak kadar HTML diline hakim olmalı. Bu arkadaşımız yaptığı işi birçok farklı dille yapabilecek olsa da bu konuda en çok tercih edilen dil PHP’dir. Ayrıca benim de tavsiyem PHP yönündedir.

Evet, şimdi az çok bu arkadaşlarımızın ne iş yaptığını öğrendiğimize göre artık kendimize bir alan seçimi yapabiliriz. Dikkatli bir şekilde düşünün ve kendinize bir alan seçin, daha sonra aşağıda vereceğim kaynaklardan yardırıp gidin.

Alan seçiminizi yaptığınıza göre şimdi kaynaklarınızı verebilirim. Öncelikle burada belirteceğim kaynaklar dışında oldukça çok kaynak vardır, hepsini inceleme fırsatım olmadığı için buraya içeriğinin kaliteli olduğundan emin olduğum kaynakları koyacağım. Başlayalım.

Arayüz Tasarım Dersleri

Yukarıda bahsettiğim Photoshop ile web sitesi çizimini içeren alanda gelişmek isterseniz her ne kadar çok inceleyememiş olsam da Designus adlı Youtube kanalının videolarını izleyebilirsiniz. Sizler için 16 videoluk bir set hazırlamışlar, iyi görünüyor açıkçası. Buyrun burada linki: Arayüz Tasarım Eğitim Seti

Front-end Geliştirme Dersleri

Bu işlere ilk başladığımda tek bir kaynağı takip etmedim, birazcık bodoslama daldım diyelim. O yüzden oturup baştan sona izlediğim kesinlikle tavsiye ederim dediğim bir kanal yok ama arkadaşım Baran Somaklı‘nın videolarının kalitesinden şüphe duymam. Buyrun bunlar da onun çekmiş olduğu eğitim setleri. Sırayla izleyip uygularsanız kendinizi temellerini almış bir front-end developer olarak bulursunuz. Gelişmek tamamen size kalmış.

HTML Eğitim Seti

CSS Eğitim Seti

PSD to CSS Eğitim Seti (İlk ikisini izledikten sonra bu eğitim setini izlemenizi kesinlikle tavsiye ederim. Bu sette bir web sitesi tasarımının nasıl kodlandığını göreceksiniz. Pratik açısından son derece güzel bir set)

Bu setlerin yanı sıra Google amcaya front-end eğitim veya html css dersleri gibi şeyler sorarsanız sizi farklı kaynaklara da göndereceğinden eminim.

Back-end Geliştirme Dersleri

Benim asıl alanım Back-end Development. Yakın zamanda da PHP dili üzerine eğitim videoları çekmiştim. İsterseniz PHP eğitim setime buradan ulaşabilirsiniz: PHP Eğitim Seti

Benim eğitim setimin yanı sıra tarihi birazcık eski olmasına rağmen gayet güzel olan bir eğitim seti var. Bunu hazırlayan da Tayfun Erbilen: PHP Eğitim Seti

PHP Eğitim Seti dışında kendisinin daha birçok videosundan yararlanacağınızdan emin olabilirsiniz.

Temel eğitim setinin dışında eğer öğrendiklerinizle bir şeyler yapmak, bunları pratikte görmek isterseniz de tavsiye edebileceğim iki eğitim seti daha var, inşaAllah üçüncüsünü de ben çekeceğim yakında 🙂

Birinci setimiz yine Tayfun Erbilen tarafından hazırlanmış olan BBSY (Bir Blog Scripti Yazmak). PHP veritabanı fonksiyonları konusunda bir değişiklik yaptığı için bu sete göre yaptığınız veritabanı işlemleriniz çalışmayacaktır. Yine de ben hallederim ya ne olacak sanki derseniz siz bilirsiniz.

Diğer eğitim setimiz de Yavuz Selim Şahin tarafından hazırlanan PDO & Ajax Blog Scripti Kodlama seti. Bu hala geçerliliğini koruduğu için pratik yapmaya buradan devam edebilirsiniz.

Kesinlikle kaliteli videolar olduğuna emin olduğum videoları sizlerle paylaştım.

Eğer eklemek istedikleriniz varsa, yanlış söylediğim şeylerim varsa, Sorularınız veya istekleriniz varsa bana bunları hemen aşağıdan yorum atarak veya iletisim@zahidefe.net adresine mail atarak bildirebilirsiniz.

Herkese başarılar dilerim.

Genel Mustafa Zahid Efe 3 yorum