Eskişehir Osmangazi Üniversitesi, Eğitim Fakültesi, Bilgisayar ve Öğretim Teknolojileri Eğitimi Bölümünde açılan Web Tasarım ders notları. Web Sitesi Geliştirme Adımları

1. 09.10.2015
1
WebTasarım
Web Sitesi GeliştirmeAdımları
Yrd.Doç.Dr.Celal Murat KANDEMİR
ESOGÜ – Eğitim Fakültesi - BÖTE
twitter.com/cmkandemir
ÖYS
Ders Notları: http://canvas.ogu.edu.tr
Kullanıcı adı: öğrenciNumaraniz
Parola: T.C Kimlik ilk 6 Karakter

2. 09.10.2015
2
Değerlendirme
Arasınav
%30
Uygulama
%30
Final
%40
3
İçerik
Web geliştirme ekibi – Roller ve Sorumluluklar
Web geliştirme fazları
Web sayfası organizasyonel standartlar
Web site yapıları
Bilgi Mimarisi (Information Architecture)
Wireframes – Site İskeleti
4

3. 09.10.2015
3
Web Geliştirme Ekibi
Yetenekler
Web geliştirici ekibinde aşağıdaki yeteneklere sahip
kişilere ihtiyaç vardır:
Srateji ve planlama
Proje yönetimi
Bilgi mimarisi ve kullanıcı ara yüzü tasarımı
Web için grafik tasarım
Web Teknolojileri
Site üretimi

4. 09.10.2015
4
Roller ve Sorumluluklar
Web projelerindeki temel ekip rolleri ve
sorumlulukları
Proje paydaş veya destekçileri (sponsorlar)
Web site projesinin başlatılmasından sorumlu kişi ya da
grup
Web proje yöneticisi
Projenin gerçekleşmesi için koordinasyon be iletişim
sağlar. Proje planlama ve strateji belgelerinin
hazırlanması ve takibinden, bütçe hesaplarından, proje
zaman çizelgelerinden, harcama kayıtlarından, toplantı
notlarından ve ekiplerin detaylı aktivite raporlarının
bulunduğu diğer proje belgelerinden sorumludur.
Roller ve Sorumluluklar
Kullanılabilirlik lideri
Kullanıcı deneyimlerinin şekillenmesinden site
kullanılabilirliğinden sorumludur. Diagramlar,
wireframe’ler ve prototiplerden sorumludur.
Bilgi mimarı (InformationArchitect)
Web site yapısı ve içeriklerin düzenlenmesi ve
kategorize edilmesinden sorumludur.
Sanat yönetmeni
Web sitesinin genel görünüm ve hissinden sorumludur.
Web grafik tasarımcısı
Etkileşim tasarımcısı
Çoklu ortam uzmanı

5. 09.10.2015
5
Roller ve Sorumluluklar
Web teknoloji lideri
Yayınlama ortamları, geliştirme dilleri ve geliştirme
çatıları, veritabanı seçenekleri ve ağ teknolojileri de
dahil geniş bir yelpazeye hakim olmalıdır. Teknoloji
kullanıcıları ile ekibin yaratıcı ve proje yönetim
bileşenleri arasında köprü görevi görür.
Web uygulama geliştirici (.Net, Java, PHP/Perl, Ruby)
Web sayfa mühendisi (XHTML, CSS, JS, Ajax)
Veri tabanı yöneticisi
Web sistemleri uzamanı veya webmaster
Roller ve Sorumluluklar
Site üretim lideri
Başlangıç wireframe ve mockup gibi taslak
çalışmaların/planların HTML sayfa kodlanmasından
sorumludur. Master page, landing page kodlaması v.b
Site editörü
Tamamlanmış bir sitenin yazılı içeriğinden ve editoryal
kalitesinden sorumludur.

6. 09.10.2015
6
Web Geliştirme Fazları
12
Web Geliştirme Fazları

7. 09.10.2015
7
Web Geliştirme Fazları
Planlama
Web sitesinin amacı nedir?
Web sitesi kullanıcısı kimler olacak?
Kullanıcıların erişim ortamları ne olacak?
Web sitesindeki bilginin sahibi ve yazarı kimler olacak?
Analiz
Kullanıcıların hangi görevleri gerçekleştirmesi
gerekiyor?
Hangi süreçlerin gözönünde bulundurulmalı?
Web Geliştirme Fazları
Tasarım ve Geliştirme
Web sitesinde kaç tane web sayfası bulunmalı?
Web sayfaları nasıl organize edilecek?
İçerikler için hangi tip web site yapısı uygun?
Kolay kullanım için içerik en iyi nasıl sunulur?
Bu web site için hangi dosya isimlendirme kuralları kullanılmalı?
Web sayfaları için hangi klasör yapısı kullanılmalı?
Geliştirme süreci boyunca XHTML standardları nasıl
uygulanabilir?
Hangi formdaki çoklu ortamlar web sitesine pozitif katkıda
bulunur?
Kullanılabilirlik sınırlanmadan erişilebilirlik sorunları nasıl ele
alınabilir?
Uluslararası kullanıcı grubu olacak mı?

8. 09.10.2015
8
Web Geliştirme Fazları
Test
Web sayfaları, XHTML uyumlu olarakW3C (world wide
web consortium) doğrulamasını geçecek mi?
http://validator.w3.org/
Web içeriği doğru mu?
Web sitesi işlevleri doğru çalışıyor mu?
Kullanıcılar arzu ettikleri işlemleri gerçekleştirmek için
ihtiyaç duydukları bilgileri bulabiliyor mu?
Navigasyon açık ve kolay kullanılabilir mi?
Web Geliştirme Fazları
Uygulama ve Bakım
Web sitesi nasıl yayınlanacak?
Kullanıcıların tekrar ziyaret etmeleri için web sitesi
nasıl çekici olabilir?
Web sitesi nasıl güncellencek?
İçerik güncellemelerinden kim sorumlu olacak?
Yapı güncellemelerinden kim sorumlu olacak?
Kullanıcılar web sitesi güncellemelerinden nasıl
haberdar olacaklar?
Web sitesi gözelenecek/izlenecek mi?

9. 09.10.2015
9
Web Sayfası
Organizasyonel
Standartlar
Organizasyonel Standartlar
Bileşen
• Başlık (Title)
Standart
• Sayfanın
amacını açık bir
şekilde ifade
eden basit
başlıklar kullanın
Neden
• Başlıklar
kullanıcıların
sayfanın amacını
anlamalarına
yardımcı olurlar;
iyi başlıklar
arama
motorlarının
sonuç
listelerinde sayfa
içeriğini açıklar

10. 09.10.2015
10
Organizasyonel Standartlar
Bileşen
• Konu başlıkları
(Headings)
Standart
• Ana konuları
ayırmak için
konu
başlıklarını
kullanın.
Neden
• Konu başlıkları
web sayfasının
kolay
okunmasını
sağlar; basit
konu başlıkları
sayfanın
amacını net
bir şekilde
açıklar.
Organizasyonel Standartlar
Bileşen
• Yatay
çizgiler
(horzontal
rules)
Standart
• Ana konuları
ayırmak için
yatay
çizgileri
kullanın.
Neden
• Yatay
çizgiler, web
sayfa
içeriğini
parçalamaya
olanak
sağlayan
grafik
bileşenlerdir.

11. 09.10.2015
11
Organizasyonel Standartlar
Bileşen
• Paragraflar
Standart
• Büyük
miktardaki
metni
bölmeye
yardımcı
olurlar.
Neden
• Paragraflar,
metin içinde
daha
okunabilir
ve kısa
bölümler
oluşturmaya
imkan
sağlar.
Organizasyonel Standartlar
Bileşen
• Listeler
Standart
• Uygun olan
yerlerde sıralı
veya sırasız
listeler kullanın
Neden
• Okuyucunun
hızla
tarayabileceği,
kolay okunur
metiler
organize
edilmesini
sağlar.

12. 09.10.2015
12
Organizasyonel Standartlar
Bileşen
• Sayfa uzunluğu
Standart
• Uygun web
sayfası
uzunluklarını
koruyun.
Neden
• Kullanıcılar,
uzun sayfalarda
bilgiyi görmek
için her zaman
kaydırma
çubuklarını
kullanmazlar;
uygun sayfa
uzunlukları
önemli bilgileri
görme olasılığını
arttırır.
Organizasyonel Standartlar
Bileşen
• Bilgi
Standart
• Önemli bilgileri
web sayfasının
en üstüne
yerleştirierek
vurgulayın.
Neden
• Web kullancıları
bir sayfayı çok
hızlı inceler;
kritik bilgilerin
sayfanın en
üstüne
yerleştirilmesi
önemli
bilgilerin
görülme
olasılığını
arttırır.

13. 09.10.2015
13
Organizasyonel Standartlar
Bileşen
• Diğer
Standart
• İletişim bilgileri
ve son
değiştirilme
tarihini ekleyin.
Neden
• E-posta
adreslerive
tarihler web site
yöneticisine soru
sorma imkanı
tanırken; son
değiştirilme
tarihi site
güncelliği
hakkında bilgi
edinilmesini
sağlar.
Web SiteYapıları

14. 09.10.2015
14
Web SiteYapıları
Doğrusal (linear) yapı
Aşamalı (hierarchical) yapı
Perdeli (webbed) yapı
Geniş web yapısı
Derinlemesine web yapısı
Web SiteYapıları
Bir web sitesi geliştirilirken kullanılan temel
yapılar:
• Düz doğrusal
• Ana sayfa dönüş doğrusal
• Konu dışı bağlantılı doğrusal
Doğrusal
• Göbek ve ispit (hub-and-
spoke)
• Karmaşık aşamalı
Aşamalı
(Hiyerarşik)
• Sığ ağ
• Derin ağAğ

15. 09.10.2015
15
Web SiteYapıları - Doğrusal
Web SiteYapıları – Aşamalı
(hiyerarşik)
Göbek ve ispit
(hub-and-spoke)
Karmaşık

16. 09.10.2015
16
Web SiteYapıları – Aşamalı
(hiyerarşik)
Web SiteYapıları - Ağ

17. 09.10.2015
17
Web SiteYapıları - Ağ
Sığ
Derin
Web SiteYapıları - Ağ
Modern siteler genellikle bu 3 tür yapının
birleşimini kullanırlar

18. 09.10.2015
18
Bilgi Mimarisi
(Information Architecture)
Site Diagramları
Bilgi mimarı Jesse James Garret site
diagramları için görsel bir sözlük geliştirmiştir.

19. 09.10.2015
19
Site Diagramları
Olgunlaşmış bir site diagramı içinde bulunması
gereken en önemli bileşenler:
İçerik yapısı ve organizasyon: İçerik bölümleri ve
alt bölümler
Mantıksal işlevsel gruplama veya yapısal ilişkiler
Sitenin herbir seviyesinin ‘Tık derinliği’: Bir
sayfaya ereişim için gerekli tık sayısı
Sayfa tipi veya şablon: Menü sayfası, iç sayfa …
Site klasör ve dosya yapısı
37
Site Diagramları
Dinamik veri bileşenleri: veritabanı, RSS veya uygulamalar
En önemli navigasyon terimleri ve kontrollü sözcükler
Bağlantı ilişkileri, dahili ve harici bağlantılar
Kullanıcı erişim seviyeleri, giriş gerekli, kayıt gerekli, veya
diğer yasaklı/kısıtlı bölümler
Site diagramları müşteri ve paydaşlarla genel seviyede
iletişimde kullanılmak üzere kavramsal olarak; ya da teknik,
editoryal ve grafik tasarım ekiplerine kılavuzluk etmek
amacıyla ara yüz, klasör ve dosya yapısını da gösteren daha
karmaşık bir yapıda olabilir.
38

20. 09.10.2015
20
Site Diagramları
39
Site Diagramları
40

21. 09.10.2015
21
Wireframes – Site İskeleti
Wireframe – Site İskeleti
Wireframe (Tel Çerçeve/Site İskeleti), üzerinde çalıştığınız web
sitenizin, mobil uygulamaların veya yazılımların tasarımını şematik
olarak oluşturmanıza yardımcı olan bir araçların genel adıdır.
Static wireframe birebirinden bağımsız sayfaların taslaklarıdır.
Dynamic wireframe sayfaların basit linklerle birbirine bağlayıp
fonksiyonellik hakkında da fikir veren versiyonuna denir.
Uluslararası literatürde zaman zaman blueprint, page schematics ya
da page architecture gibi terimlerle de anılabiliyor.

22. 09.10.2015
22
Wireframe – Site İskeleti
Tam anlamıyla hazırlanan full wireframe’lerde aşağıdaki öğeler
bulunur:
Sayfa planı: Header, footer, navigasyon öğeleri, içerik gibi öğelerin
nereye yerleşeceğini belirtir.
Gruplama: Hangi öğelerin beraber gruplanacağını gösterir (örneğin
bir resim ve tekst birlikte gruplanıp bir çerçeve içine alınabilir)
Etiketleme: Sayfa başlığı ve link başlıkları gibi öğeleri içerir.
İçeriğin hazır olmadığı durumlarda resimleri ya da tekstleri
sembolize eden öğeler içerir, ünlü lorem ipsum örnek olarak
verilebilir.
Wireframe – Site İskeleti
http://www.sitepoint.com/5-free-wireframe-
applications/
http://lumzy.com/index.cfm (tamamen
ücretsiz)

23. 09.10.2015
23
Wireframe – Site İskeleti
Lorem Ipsum Nedir
Lorem Ipsum, dizgi ve baskı endüstrisinde
kullanılan mıgır metinlerdir.
Lorem Ipsum, adı bilinmeyen bir matbaacının
bir hurufat numune kitabı oluşturmak üzere bir
yazı galerisini alarak karıştırdığı 1500'lerden
beri endüstri standardı sahte metinler olarak
kullanılmıştır.
Beşyüz yıl boyunca varlığını sürdürmekle
kalmamış, aynı zamanda pek değişmeden
elektronik dizgiye de sıçramıştır.
46

24. 09.10.2015
24
Lorem Ipsum Neden Kullanırız
Yinelenen bir sayfa içeriğinin okuyucunun dikkatini dağıttığı
bilinen bir gerçektir.
Lorem Ipsum kullanmanın amacı, sürekli 'buraya metin
gelecek, buraya metin gelecek' yazmaya kıyasla daha
dengeli bir harf dağılımı sağlayarak okunurluğu artırmasıdır.
Şu anda birçok masaüstü yayıncılık paketi ve web sayfa
düzenleyicisi, varsayılan mıgır metinler olarak Lorem Ipsum
kullanmaktadır.
http://tr.lipsum.com/
http://www.nedirnedemek.com/araclar/turkce-lorem-ipsum
47
Standart sayfa iskeleti
(wireframe) bileşenleri
48

25. 09.10.2015
25
Standart sayfa iskeleti
(wireframe) bileşenleri
Logo
Site kimliği veya başlığı
Sayfa başlığı, manşetler/konu başlıkları (headlines)
Breadcrump navigasyon: sitede nerede olduğunuzu
gösterir.
Arama formu
Parçası olduğunuz daha büyük organizasyona
bağlantılar
Site için genel navigasyon bağlantıları
49
Standart sayfa iskeleti
(wireframe) bileşenleri
Yerel içerik navigasyonu
Birincil / ana sayfa içeriği
Posta adresleri ve e-posta bilgileri
Telif hakkı ifadeleri
İletişim bilgileri
50

26. 09.10.2015
26
Bileşenleri Nereye ve Neden
Koyalım
Kompozisyon ve okuma alışkanlıklarımızın
klasik kuralları birlikte bilgi gösterim
yaklaşımını kontrol eder.
51
Bileşenleri Nereye ve Neden
Koyalım
52

27. 09.10.2015
27
Bileşenleri Nereye ve Neden
Koyalım
53
Bileşenleri Nereye ve Neden
Koyalım
54

28. 09.10.2015
28
Etkinlik 1
1. Web sitesi geliştirme fazlarında sorulması
gereken soruları sorup cevaplayınız.
Gerekiyorsa daha fazla soru sorabilirsiniz.
2. Bir kontrol listesi hazırlayınız. Nelere
ihtiyacınız var ve ne tür bilgiyi
sağlayacaksınız?
Teslim tarihi: Önümüzdeki hafta
55
Etkinlik 2
1. Seçeceğiniz bir wireframe (site iskeleti)
oluşturma uygulaması ile web sitenizdeki
tüm sayfaların (aynı görsel ve içerik sayfalar
için bir tane yeterli) kavramsal diagramlarını
çiziniz.
2. Web sitesinin detaylı diagramını (klasör ve
dosya yapısı ile isimlendirme kurallarını
gösteren) çiziniz.
56

29. 09.10.2015
29
Gelecek Ders
Ara yüz tasarımı
Genel tasarım temelleri
Navigasyon ve yön bulma
Web site testi
Web site gerçekleme, bakım ve HTML
temelleri
57
Sorular?