YBS 12.Hafta Ders Sunumu

1. Web
Teknolojileri

2. İçindekiler
Web tasarımı nasıl
olmalı, nelere dikkat
edilmeli…
Web tasarım süreçleri
nelerdir…
Bir yazılım firmasına
web tasarımı
yaptırılırken nelere
dikkat edilmeli…
Web tasarımı
yaptırılırken yapılan
hatalar…
Statik Web Tasarımı…İçerik…
Kendi web sitemizi
nasıl oluşturabiliriz…
Front-end, back-end
nedir…
HTML, CSS
2

3. Web sitesi nasıl
olmalıdır?
 Özgün web tasarımı
 Web sitesi özgün ve size özgü
olmalıdır.
 İnternet milyonlarca web
sitesinin olduğu bir platform.
Web sitenizde özgünlüğü hem
tasarım, hem de içerik
özgünlüğü olarak sunmalısınız.
 Arama motorlarında üst
sıralarda yer almak içinde özgün
metinler yayınlamalısınız.
3

4. Web sitesi nasıl
olmalıdır?
 İçerik
 Müşteriniz web sitenizde dolaşırken,
çalışmayan sayfalar, hatalı metinler,
kötü tasarım ve anlaşılmayan bir
kurguyla karşılaşırsa sizinle ilgili ilk
izlenimi pek de iyi olmayacaktır.
 Web sayfalarında kullanılan gereksiz
başlık ve firmayı tam olarak
anlatmayan içerik ve resimler web
tasarımının başarısız olmasına sebep
olur. Web sitesinin başarılı olması ve
sitedeki içeriğin doğru olarak ifade
edilmesinde öncelikle tespit ve
planların ortaya konulması gerekir
4

5. Web sitesi nasıl
olmalıdır?
Erişebilirlik
Web sitesi yapılırken potansiyel
müşterileriniz baz alınarak
yapılmalıdır. Siteye giren herhangi
biri kolayca aradığı şeylere
ulaşabilmelidir. Menüleri ve
navigasyonu buna göre
yapılmalıdır.
5

6. Web sitesi nasıl
olmalıdır?
 Responsive
 Siteniz tüm akıllı telefon,
mobil cihaz ve tabletlerle
uyumlu olmalıdır. Tüm
çözünürlükler ve cihazlara
uyumlu tasarım yapılmalıdır.
6

7. Web sitesi nasıl
olmalıdır?
 Hızlı yüklenme
 Yapılan web tasarımının hızlı yüklenmesi aynı zamanda
onun iyi bir şekilde kodlandığını gösterir. Genel olarak css3
ve html5 standartlarında hazırlanmış bir site hazır
şablonlarla yapılmış bir siteden daha hızlı yüklenmektedir.
Hız konusunda en önemli unsurlardan biride web sunucunun
güçlü bir server olması ve yüksek bant genişliğine sahip
olmasıdır. Esas olan, kullanıcıya ürün ve hizmeti en kısa
yolla ulaştırmaktır. Bu nedenle sitenin hızını düşürecek
abartılı animasyonlar, bekleme süreçleri, video ve ses
objeleri, kullanımı zor menüler tercih edilmemelidir. 7

8. Web Tasarım Süreçleri
 Projelendirme Aşaması:
 Doğru belirlenmiş strateji, analizler ve
hedeflerin oluşturduğu bir proje başarılı bir web
tasarımının en önemli süreçlerinden birini
oluşturur. Bu aşamada firma ve firmanın
faaliyet gösterdiği sektör analiz edilir. Ürün
veya hizmetlere dair, resim, açıklama,
teknik dökümanlar, referanslar ve benzeri bilgi
ve belgelerin sitede nasıl yayınlanacağına karar
verilir. İlgili siteler araştırılır. Web sitesinin
alan adı ve hosting ihtiyaçları belirlenir.
Analizlerden elde edilen bilgiler ışığında web
sitesinin kurgulaması yapılır.
8

9. Web Tasarım
Süreçleri
 Teknoloji Seçimi:
 Web sitesinin kurgulanmasından
sonra projenin hazırlanacağı
platform ve teknolojilere karar
verilir. Sitede veritabanı
kullanılacak mı, kullanılacaksa
hangi veritabanı(access, mysql,
mssql, oracle) , hangi
programlama veya script
dili(asp.net, php, asp, Java,
Ajax, Javascript) kullanılacak
karar verilir.
9

10. Web Tasarım Süreçleri
 Tasarım Süreci
 Bir ziyaretçi sitenize geldiği zaman, 8-10
saniye civarında sitenin görselliğine
yoğunlaşır ve sonra bir müşteriye dönüşür.
Madem ki, renkler hislerimize hitap ediyor,
algılamalarımızı ve etkileşimimizi
yoğunlaştırıyor, o halde kişiye kendini iyi
hissettiren, rahatlatıcı, tatmin edici ve güven
veren renkler kullanmamız gerekiyor. Bu
durumda web sitenizin renklerini seçmeden
önce, renklerin ve etkilerinin temel olarak ne
ifade ettiğini bilmek büyük önem kazanıyor.
10

11. Web Tasarım
Süreçleri
 Tasarım Süreci
 Renklerin araştırmalarına göre
internet üstünden yapılan
alışverişlerde kullanıcıların %85’i satın
alma kararlarında e-ticaret sitesindeki
renklerin daha çok etkili olduğunu
söylemekteler. Markayla renk
özdeşmesinin %80 oranlarında marka
bilinirliği ve satış hacmi üstünde de
etkili olduğu görülmektedir.
11

12. 12

13. Web Tasarım Süreçleri
 Tasarım Süreci
 Mavi: Huzur, sakinlik ve güven veren renk olduğundan ağırlıklı olarak devlet
kurumlarının sitelerinde ve tıp alanında satış yapan e-ticaretlerde
kullanılmaktadır.
 Kırmızı: Mutluluk, hareketlilik, canlılık gibi kavramları ele alan kırmızı renk,
birçok büyük marka tarafından tercih edilmektedir. Dikkat çekmesi, ilgi görmesi
gibi özellikleriyle uyarıcı ve harekete geçirici etkisi olduğundan özellikle de fast-
food firmaları ve yemekle alakalı olan e-ticaret siteleri tarafından seçilmektedir.
 Yeşil: Çevreyi, doğayı ve hayatı temsil ettiğinden genel olarak yardım kuruluşları
ve çevreci örgütler tarafından tercih edilmektedir. E-ticaret sitelerinin genel
olarak gıda ve organik ürünlerini sunan firmalar tarafından tercih edilir. Ayrıca da
dini ürünlerin ve hizmetlerin yapıldığı e-ticaret siteleri genel olarak yeşil renge
ağırlık vermekteler.
13

14. Web Tasarım Süreçleri
 Tasarım Süreci
 Beyaz: Asalet ve güveni simgeleyen beyaz renk, genel olarak arka plan
tercihinde kullanılır. Temizlik ve saflık anlamlarıyla evlilik ürünleri sunan
sitelerde daha çok tercih edilen renk olurken ilaç firmaları ve kurumsal e-
ticaret siteleri de beyaz rengine ağırlık vermektedir.
 Turuncu: Kararlı, agresif, baskın bir renk olan turuncu üye olma ve satın alma
butonlarının üzerinde oldukça etkili. Birçok farklı sektör içinde hem logo hem
de e-ticaret sitesi gibi sitelerde tercih edilir.
 Siyah: Okumayı zorlaştırması ve gözü yorması nedeniyle çok sık tercih
edilmemektedir. Fakat özel ürün ve hizmetlerin olduğu e-ticaret sitelerinde
ve niş pazarlamalarda tercih edilebilmektedir.
14

15. Web Tasarım
Süreçleri
 Yazılım Süreci
 Site içeriğinin web sitesinde
nasıl verileceği, hangi bilgilerin
hangi ortamlarda saklanacağı ve
ziyaretçiler ile nasıl interaktif
bir iletişim kurulacağı
belirlendikten sonra veritabanı
oluşturulması, admin paneli ve
içerik yönetim sisteminin
programlanması ve kullanıcı
tarafının kodlanmasıyla yazılım
sürecine devam edilir.
15

16. Web Tasarım
Süreçleri
 Test Süreci:
 Yazılım Süreci tamamlandıktan
sonra Browser testleri, hız
testleri, gerekirse stres testi,
site de yalnış ve ya kırık linklerin
kontrolü, Web standartlarına
uygunluğunun
denetlenmesi, Tüm ekran
çözünürlüklerinde teste tabi
tutulması gibi testler yapılır.
16

17. Web Tasarım Süreçleri
 Yayınlanma ve yayın sonrası aşamalar:
 Testleri bitirilen ve son kontrolleri yapılan proje uygun ve hızlı bir hostingle
yayına başlar. Zaten arama motorlarının mantığına uygun olarak kodlanmış ve
tasarlanmış sitede anahtar kelimeler ön plana çıkarılır ve google, yahoo, msn
gibi arama motorlarına kayıt yaptırılır. Sitenin admin paneli ve içerik yönetimi
ile ilgili eğitimlerden sonra site müşteriye teslim edilir.
17

18. Nelere Dikkat Edilmelidir?
 Web tasarım firmasının referansları ve geçmişte
yaptığı projelere incelenmeli. Burada dikkat
edilecek nokta referans web
sitesinin altında web tasarımı firmasının
imzasının bulunup bulunmadığıdır. Firmanın
referans gösterdiği firmalarla
görüşülerek tasarım sürecinde ve sonrasında
firmadan memnun kalıp kalmadığı
sorgulanabilir.
 Web tasarım firmasının kaç yıllık firma
olduğu, tecrübe ve birikimi araştırılmalı
 Web tasarımı firmasının tasarım ve yazılım
ekibi, personeli ve bilgi birikimleri ne
derecededir sorgulanmalıdır.
18

19. Nelere Dikkat Edilmelidir?
 Web tasarım firmasının bir ofisi var mıdır?
 Firma yaptığı işlerin ufak teknik sorunları,
güncelleme işleriyle iş tesliminden sonra bir
süre ücretsiz olarak ilgilenmektemidir?
 Web tasarım firması ar-ge faaliyetlerine ne
derece önem vermektedir. Gelişen web
teknolojilerini uygulamalara aktarabilmekte
midir?
 Firmanın fiyat politikası nasıldır?
 Web tasarım firmasının yaptığı işleri bir
sözleşmeye dayandırmakta mıdır?
19

20. Nelere Dikkat Edilmelidir?
 Eğer web sitenizi yapan şirket, sizi arama motorlarına kaydettirecek
teknolojik bilgiden yoksunsa, siteniz ne yazık ki masraf hanesine
yazılabilir. Gelen ziyaretçinin sitenizde kalıp kalmamasını sağlayacak
olan şey, çekici, kolay gezilebilir ve hatasız kodlanmış bir tasarım
olmasıdır. Eğer siteniz çok geç yükleniyor, hatalar veriyor, renk seçimi
göz yoruyor ve neyin nerde olduğu belli olmuyorsa, terk edilecektir.
Profesyonellik, aynı zamanda yeni bir ürün türü eklemek, yılbaşı
promosyonu düzenlemek için aradığınız zaman karşınızda
bulabileceğiniz bir müşteri temsilcisinin olmasını ve müşteri
temsilcinizin, teknolojik trendleri takip edip, size uygun çözümleri
zaman içerisinde sunmasını da gerektirir.
20

21. Web tasarımı
hataları
 Web tasarımını kurumsal bir web
tasarım firması yerine, freelance
çalışan birine, akrabaya ya da aile
dostu bir bireye yaptırmak.
 Bir kere göreceli olarak yüksek
ücret ödeyerek sonuç elde etmek
yerine, defalarca düşük ücret
ödeyerek hiç sonuç elde
etmemek.
 Web uygulamalarını müşteri
gözüyle ve onların ihtiyaç ve
beklentilerini gözönünde
bulunduracak şekilde değil, kendi
gözüyle ve subjektif değerleriyle
oluşturmak.
21

22. Web tasarımı
hataları
 Arama motoru mantığını bilmemek ve
sadece görsel güzelliğe önem vererek
web sitesi yaptırmak.
 İnteraktif ve fonksiyonel web sitesine
önem vermemek.
 Hedef kitle ve amaçlar analiz
edilmeden "Benim de sitem var "
diyebilmek için site kurmak
 Ucuz ve yavaş hosting seçimi.
 Domain alımı sırasında alan adının
kendi adına tescil ettirilmesine dikkat
etmemek
 İnternet Reklamcılığına önem
vermemek
22

23. İçerik ve Tasarım Hataları
 Kullanıcılar sitenizin içeriğini çok kısa süre içerisinde anlayabilmeli.
 Okunaksız, süslü ve çok düşük puntolu bir yazı tipi kullanılmamalıdır.
 Flash öğeleri video ve müzik gibi medyaların aşırı kullanımı sitenin
yüklenmesini etkilediğinden ziyaretçilerinizi sıkabilir.
 Web sitesine iletişim bilgilerinin eklendiğinden emin olunmalıdır.
Aksi takdirde geri beslemelerde problem çıkabilir.
23

24. İçerik ve Tasarım Hataları
 Anlaşılabilir bir site navigasyonuna sahip olunmalıdır. Ziyaretçiler
istediklerine kolayca ulaşabilsin.
 Sitenin tüm browser(tarayıcı)larda aynı şekilde görüntülendiğinden emin olun
 Tasarlanan sayfaların altına fonksiyonel linkler koyun bu arama motorları
açısından da faydalıdır.
 Web sitenizde ürünlerinizi sergiliyorsanız ürünlerinizi doğru bir kategori, alt
kategorilerde herkesin anlayacağı şekilde sitenize yerleştirin
 Dilbilgisi ve Yazım hataları, çoğul ifadeler, alt tire ve tire işaretleri gibi
sebepler yüzünden genelde arama motorları açısından optimizasyon ortadan
kalkabilir. Site üzerindeki arama motoru botları amacına ulaşmıyorsa bu
indekslenme açısından çok kötüdür.
24

25. İçerik ve Tasarım Hataları
 Web sitenize giren ziyaretçiler yatay kaydırma çubuğundan(scroll) nefret
ederler. Yatay kaydırma çubukları kullanıcıların monitör çözünürlüklerine bağlı
olarak ortaya çıkabilir. Düşük çözünürlükteki sayfalarda çıkan yatay kaydırma
çubukları ziyaretçilerin siteyi tam olarak görüntüleyememesine yol açabilir.
 Tasarımda kullanılan bloklar çok sıkıcı ve içeriği okumayı engelleyicidir ve
kullanıcıların çabucak siteyi terk etmelerine sebep olur.
 Herkes reklam için ve ya nedensiz açılan pop-up pencereden nefret eder.
25

26. İçerik ve Tasarım Hataları
 Web siteleri e-mail adresleri istediği zaman kullanıcılar olumsuz tepki verirler.
Spam olarak geri döneceği düşüncesi ile hiç kimse bir garanti verilmeden bu
bilgilerini vermek istemez.Web siteleri ziyaretçilerinden e-mail adreslerini
istediği zaman kullanıcılara gizlilik politikasını açıklamalı ve bunların reklam
için 3. şahıslara verilmediğini taahüt etmelidirler. Aksi takdirde spam olarak
geri döneceği düşüncesi ile hiç kimse bir garanti verilmeden kişisel bilgilerini
vermek istemez
 Eğer alan adı(domain) çok uzunsa ziyaretçiler açısından bu negatif bir
durumdur. Uzun site adlarında kullanıcı sitenin adını yazdığı
zaman çıkmıyorsa %80 oranla ikinci kez denemeyecektir. Bu yüzden kısa ve
anlaşılabilir bir domain site ziyaretçileri açısından önemlidir
26

27. Statik Web Tasarımı
 Statik web design; Görsel olarak iyi hazırlanmış ve çeşitli flash animasyonların
entegre edildiği, ürün ve hizmet tanıtımlarının yapıldığı, kullanıcılara işiniz ve
iletişim bilgileriniz hakkında bilgi veren, kendi kendinize
güncelleyemeyeceğiniz sitelerdir. Bu tip sitelerde sizin siteyi
yönetebileceğiniz bir admin paneli yoktur.
 Web sayfanızı sık sık güncellemeye ihtiyacınız yoksa web tasarımının statik
yapıda olması daha avantajlıdır . Tasarımdaki ve içerikdeki güncelleme ve
değişiklikleri web tasarım firmanıza güncelleme ücreti karşılığında
yaptırabilirsiniz.
 Statik web siteleri ; Web tasarımı bilginiz olmadığı
takdirde web tasarım firmasına bağımlı kalabileceğiniz bir site türüdür. Statik
web tasarımı daha çok görsel programlarla hazırlanan sitelerdir. Programlama
bilgisi gerektirmez. Bu yüzden maaliyeti daha düşüktür
27

28. Statik-Dinamik Web Tasarımı
28

29. Web Tasarımı-Özet
29
 İyi tasarlanmış, güncel web trendlerine uygun,
 İyi programlanmış ve güncel teknolojilerden faydalanan,
 Yeterli derecede bilgi veren, özgün,
 İsteyene ayrıntılı görsel ve daha fazla bilgi sunan,
 İçinde ziyaretçilerin size 7 gün 24 saat ulaşabilecekleri online bilgi formları bulunan,
 Sürekli güncellenen ve içeriği yenilenen,
 En yavaş hızda bile yüklenmesi kısa süren,
 Arama motoru sonuçlarında üst sıralarda yer alan,
 Bünyesinde web ziyaretçi analizi yapılabilen,
 Analiz sonuçlarına göre kendini yenileyen,
 Tercihen müşteri ilişkileri yönetimi yapılabilen,

30. Web Sitesi Nasıl Yapılır? Adım-1: Platform
Seçimi
 CMS – İçerik Yönetimi Sistemi Kullanmak: İçerik yönetimi sistemlerini web
siteleri ve web sitelerini oluşturan içerikleri yayınlamak için kullanılabilecek
gelişmiş geliştirici araçları olarak düşünebilirsiniz. Söz konusu CMS olduğunda
piyasanın gerçek liderleri WordPress, Drupal ve Joomla’dır. Tüm 3 araç da
ücretsiz ve açık kaynaklıdır. Ancak kesinlikle WordPress en çok adapte
olanlarıdır. Tüm 3 sistem de PHP ile geliştirilmiştir ve hepsi de görünüm için
şablonları/temaları kullanır. Hepsi de topluluk tarafından güçlendirilir ve yön
verilir. Kullanışlılık, basitlik, bakım kolaylığı, topluluk büyüklüğü ve ücretsiz
tema & eklenti sayısı göz önünde bulundurulduğunda kesinlikle hiçbiri
WordPress ile yarışamaz. Geliştirme tecrübesi olmayanlar için WordPress kesin
seçenektir.
30

31. Web Sitesi Nasıl Yapılır? Adım-1: Platform
Seçimi
 Site Kurucusu Kullanmak: Web sitesi kurucuları çıkmaya başladığından beri
otomasyon dünyası yeni bir boyuta ulaştı. İlk başta tasarım ve fonksiyonellik
özelleştirilmesi açısından seçenekler limitlendirilmiş olsa da bugün yalnızca
sürükleyip bırakarak modern web sitesi kurucusunda harikalar yaratmak
mümkün. İçerik yöneticisi sistemlerine ve sıfırdan web sitesi oluşturmaya
kıyasla geliştirme deneyimi olmayanlar ve site kurulumu için çok fazla zaman
harcamak istemeyenler için web sitesi kurucuları hızlı, verimli ve
mükemmeldir.
31

32. Web Sitesi Nasıl Yapılır? Adım-1: Platform
Seçimi
 Sıfırdan Web Sitesi Kodlamak: Üçüncü seçenek ise sıfırdan site kurulumudur.
Özellikle basit derecede geliştirici deneyimine sahip kullanıcılar için soru
işaretleriyle dolu bir serüven olabilmektedir. Sabit bir web sitesi oluşturmak
için kullanılan teknolojiler HTML ve CSS’dir.
32

33. Web Sitesi Nasıl Yapılır? Adım 2 – Hosting ve
Domain Almak
 Eğer bir site kurmak ya da alacağım domain uzantılı bir mail adresi
kullanmak istiyorum diyorsanız, bu işlerin temelinde gereksinim duyulan 2 şey
vardır. Domain ve hosting.
 Bir internet sitesinin insanlar tarafından ulaşılabilir olması için bir adet
hosting servisine, bir de bir adet domaine sahip olması gerekiyor. Bu iki
şey internette yayım yapmak için olmazsa olmazdır.
33

34. Web Sitesi Nasıl Yapılır? Adım 2 – Hosting ve Domain Almak
 Host: Sitenizin internette yayın yapabilmesi için aslında
bir bilgisayara ihtiyacı vardır. Sitenizi kendi bilgisayarınıza
kurarak bilgisayar üzerinden internet bağlantınızla yayın
yapabilirsiniz. Fakat;
 Yayın yapmak için bilgisayarınızın 7/24 açık kalması
gerekmektedir. Kişisel bilgisayarlar için bu pek de mümkün
değildir.
 Kişisel internet hattınız ve bilgisayarınızın
kapasitesi, yüksek ziyaretçi trafiğine bağlı olarak yapılan
işlemler için yeterli olmayacaktır.
 Bunun çözümü ise sitenizin dosyalarının
barındığı, 7/24 açık kalan, sadece internet yayını için
tasarlanmış ağ bağlantılarına sahip olan Serverlar.
 Dünya üzerinde sadece bu işi yapan yüzlerce hosting
firması var. Bu hosting firmaları sayesinde
sitenizi kesintisiz olarak ve rahatlıkla yayınlanabilir.
34

35. Web Sitesi Nasıl Yapılır? Adım 2 – Hosting ve
Domain Almak
 Domain: Bir nevi sitenizin ismi olan domain aynı zamanda insanları sitenize
ulaştıracak bir web adresidir. www.hepsiburada.com, facebook.com ,
google.com gibi. Ziyaretçileriniz sitenize direk ulaşabilmek için tarayıcılarının
adres bölümüne domaininizi yazarak girerler.
 Domain ve hosting servisleri ücretli servislerdir. Ücretsiz servisler de vardır fakat
bu servisler site kurmaktan ziyade web projelerini test etmek için daha
uygunlardır. Site yayını için ücretli servisler kullanmak daha akıllıca bir seçim
olacaktır.
 Domainler sizin adınıza en az 1 yıllığına tescillenir. Domaininizi daha uzun süreli
olarak da tescilleyebilirsiniz. Fakat her süre sonucu domaini kullanabilmek için
yenileme yapmanız gerekmektedir.
 Hosting servislerini de ister aylık ister yıllık, isterseniz daha uzun süre kiralama
yapabilirsiniz. Sitenizin yayına devam etmesi için her süre sonunda yine yenileme
yapmanız gerekmektedir.
35

36. Sıfırdan Web Sitesi Nasıl Yapılır
 Sıfırdan bir web sitesi HTML ve CSS kullanarak yapılabilir. Sabit bir web sitesi
erişen kullanıcıya göre hiçbir değişiklik göstermez ve hep belirli bir içeriği
gösterir. Avantajları ve dezavantajları bulunur.
36

37. Sıfırdan Web Sitesi Nasıl Yapılır
 Artıları:
 Sabit web siteleri hızlıdır.
 Sabit web siteleri herhangi bir veritabanına bağlanmaz.
 Dinamik karşılıklarına göre site kurulumu daha kolaydır.
 Eksileri:
 İçeriği yönetmek ve güncellemek daha uzun zaman alır.
 Ziyaretçiye içeriği dinamik olarak göstermenin hiçbir yolu yoktur.
37

38. Sıfırdan Web Sitesi Nasıl Yapılır
 Ek olarak kod düzenleyicisine de ihtiyacınız olacaktır. En iyi kod
düzenleyicilerinden bazıları:
 Notepad++
 TextWrangler
 Sublime Text
38

39. Sıfırdan Web Sitesi Nasıl Yapılır
 HTML Nedir?
 HTML “Hyper Text Markup Language” kelimelerinin kısaltılmasından oluşur.
Türkçe anlamı Zengin metin işaretleme dilidir. Web sitesi oluşturmak için
kullanılan bir betik dilidir. Uzantısı .html veya .htm şeklinde tanımlanır.
 HTML dili tag (etiket) yapısından oluşur. Genel
olarak <etiket></etiket> şeklinde tanımlanmış alanlar arasında işlemler
yapılır. Burada dikkat edilmesi gereken nokta, etiketlerin açılması
(<etiket>) ve kapatılması</etiket> olayıdır.
39

40. Sıfırdan Web Sitesi Nasıl Yapılır
 HTML bir programlama
dili olmadığı için
derlenme gibi bir
gereksinimi yoktur.
Standart bir metin
belgesinin uzantısını
.html yapıp
kaydetmemiz halinde
dosyamızı direk
tarayıcı üzerinde
görüntüleyebilir ve
değişikler yapabiliriz.
40

41. Sıfırdan Web Sitesi Nasıl Yapılır
 CSS nedir?
 CSS, “Cascading Style Sheets” kelimelerinin kısaltılmasından oluştur ve
türkçe anlamı Basamaklı Stil Şablonları ya da Basamaklı Biçim Sayfaları
şeklindedir.
 CSS en temel haliyle HTML etiketlerimizin görsel açından biçimlendirilmesini
(Renk, yazı şekli, arka plan rengi, genişlik, yükseklik, pozisyon durumu vs)
sağlar.
 CSS’in sahip olduğu seçiciler vardır. Bunlar id ve class olarak ikiye
ayrılır. HTML etiketlerinde tanımladığımız seçici isimleriyle
birlikte CSS kullanarak etiketleri biçimlendiririz.
41

42. Sıfırdan Web Sitesi Nasıl Yapılır
Basit bir CSS kodu aşağıdaki gibidir.
.secici
{
font-size: 20px;
color:red;
width:100%;
height:50px;
}
42

43. Front-end Back-end Nedir?
 Konu web tasarımı olduğunda, "frontend" ve "backend" en sık sözü geçen
terimler arasında yer alır.
 Bu iki terim, aslında "web tasarımı" ve "web geliştirme" olarak da
adlandırılabilir. Bu iki terim genelde sektörün dışından olanlarda kafa
karışıklığı yaratıyor gibi görünse de aslında aralarındaki farkı açıklamak
nispeten kolay. Bunu en basit tabirle açıklamak gerekirse;
 frontend, bir web sitesine girdiğinizde etkileşime girdiğiniz arayüzün tasarım
ve geliştirmesine,
 backend, bu web sitesinin perde arkasında yer alan, işin server kısmı ve taban
yazılımını geliştirme işine verilen adlardır.
43

44. Front-end Back-end Nedir?
 Frontend
Frontend, web'in görüp etkileşime girebildiğiniz kısımlarına verilen addır.
Frontend genellikle web tasarımı ve web'in ön yüzünün geliştirilmesini kapsar.
Web tasarımı dendiğinde; Adobe XD, Photoshop ve Sketch gibi tasarım
programlarını kullanabilen, aynı zamanda da HTML, CSS, JavaScript ve JQuery
ile kod yazabilen tasarımcılardan bahsedilir. Bir web sitesini kullanırken
gördüğünüz her şey; HTML, CSS ve JavaScript'in, kullandığınız web tarayıcı
tarafından kontrol edilmesidir. Bunun içinde de fontlar, açılır menüler,
geçişler, sliderlar, iletişim formları vb. tasarımsal işler yer alır.
Frontend'de yer alan bu öğelere eklenen bilgilerin depolanabilmesi, yani
kısaca frontend'in hayata geçebilmesi için gereken alt yapı ve teknolojiyi
sağlayan ise backend'dir.
44

45. Front-end Back-end Nedir?
 Backend
Backend genellikle bir sunucu, bir uygulama ve bir veri tabanından oluşur. Bir
havayolu veya otobüs firmasının web sitesine girerek bilet aldığınızda
frontend ile etkileşime girmiş olursunuz. Siz bilgilerinizi web sitesine
girdiğinizde, uygulama bu bilgiyi alır ve bir sunucu üzerinde kurulmuş olan
veri tabanına depolar. Backend işleyişini basit bir şekilde anlatabilmek için
şöyle örnekleyebiliriz: Siz (uygulama), bir bilgiyi bilgisayarınızda (sunucu)
bulunan bir Excel (veri tabanı) dosyasına kaydediyorsunuz.
45

46. Front-end Back-end Nedir?
 Backend
 Bu teknolojiyi ortaya çıkaran; sunucu, veri tabanı ve uygulamanın birlikte
çalışmasını sağlayan kişiye de backend geliştiricisi denir. Web'in backend
kısmını oluşturmak için de PHP, Ruby, Python vb. yazılım dilleri ve MySql,
PostgreSQL ve Oracle gibi veri tabanları kullanılır. Bunlar, daha kolay
kullanılabilmeleri için de Zend, Laravel ve Code Igniter gibi geliştirme sürecini
hızlandıran frameworkler ile güçlendirilirler.
46

47. Front-end Back-end Nedir?
 Web tasarımı (frontend) ve web geliştirme (backend), ancak bir araya
geldiklerinde bir web sitesi oluşabilir, ancak her ikisi de birbirinden farklı işler
yapar.
 Hem frontend hem de backend'i tek başına yapabilen nadir yazılımcılar da
"full-stack developer" olarak adlandırılır.
 Tekrar kısaca özetlemek gerekise de bir web sitesini sıfırdan oluşturabilmek
için frontend ve backend'in bir arada olması gerekir; biri olmadan diğeri, tek
başına web sitesi oluşturamaz.
47