Web Sitesi Geliştirme Adımları

09.10.2015

1

Web Tasarım

Web Sitesi Geliştirme Adımları

Yrd.Doç.Dr. Celal Murat KANDEMİRESOGÜ – Eğitim Fakültesi - BÖTEtwitter.com/cmkandemir

ÖYS

� Ders Notları: http://canvas.ogu.edu.tr

� Kullanıcı adı: öğrenciNumaraniz

� Parola: T.C Kimlik ilk 6 Karakter

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

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

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.


� Kullanılabilirlik lideri

� Kullanıcı deneyimlerinin şekillenmesinden site kullanılabilirliğinden sorumludur. Diagramlar, wireframe’ler ve prototiplerden sorumludur.

� Bilgi mimarı (Information Architect)

� 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ı

09.10.2015

5


� 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


� 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.

09.10.2015

6

Web Geliştirme Fazları

12


09.10.2015

7


� 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ı?

09.10.2015

8


� Test

� Web sayfaları, XHTML uyumlu olarak W3C (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?


� 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?

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

09.10.2015

10


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.


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.

09.10.2015

11


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.


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.

09.10.2015

12


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.


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.

09.10.2015

13


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 Site Yapıları

09.10.2015

14

Web Site Yapıları

� Doğrusal (linear) yapı

� Aşamalı (hierarchical) yapı

� Perdeli (webbed) yapı

� Geniş web yapısı

� Derinlemesine web yapısı

Web Site Yapı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ğrusalDoğrusal

• Göbek ve ispit (hub-and-spoke)

• Karmaşık aşamalı

Aşamalı (Hiyerarşik)

• Sığ ağ

• Derin ağAğ

09.10.2015

15

Web Site Yapıları - Doğrusal

Web Site Yapıları – Aşamalı (hiyerarşik)

Göbek ve ispit(hub-and-spoke)

Karmaşık

09.10.2015

16

Web Site Yapıları – Aşamalı (hiyerarşik)

Web Site Yapıları - Ağ

09.10.2015

17


Sığ

Derin


� Modern siteler genellikle bu 3 tür yapının birleşimini kullanırlar

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.

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

09.10.2015

20

Site Diagramları

39

Site Diagramları

40

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.

09.10.2015

22


� 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.


� http://www.sitepoint.com/5-free-wireframe-applications/

� http://lumzy.com/index.cfm (tamamen ücretsiz)

09.10.2015

23


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

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-ipsum47

Standart sayfa iskeleti (wireframe) bileşenleri

48

09.10.2015

25


� 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


� Yerel içerik navigasyonu

� Birincil / ana sayfa içeriği

� Posta adresleri ve e-posta bilgileri

� Telif hakkı ifadeleri

� İletişim bilgileri

50

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


52

09.10.2015

27


53


54

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

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?

Education

Web Sitesi Geliştirme Adımları