08119 Web Tasarımının Temelleri · 08119 Web Tasarımının Temelleri Elbistan MYO 2017-2018...

08119 Web Tasarımının Temelleri

Elbistan MYO 2017-2018 Güz Dönemi – Öğr.Gör. Murat KEÇECİOĞLU

08119 Web Tasarımının TemelleriHafta I

İnternet Nedir ?

• İnternet, çok protokollü bir ağ olup birbirine bağlı bilgisayar ağlarının tümü olarak da tanımlanabilir.

• Binlerce akademik ve ticari ağ ile devlet ve serbest bilgisayar ağının birbirine bağlanmasıyla oluşmuştur.

Hafta I

İnternet Nedir ?

• Bilgisayarlar arasında bilgi çeşitli protokollere göre paketler halinde transfer edilir.

• İnternet üzerinde e-posta, sosyal ağlar ve birbirine bağlı sayfalar gibi çok çeşitli bilgiler ve hizmetler vardır. İnternet üzerinden oyunlar da oynanabilir.


Hafta I

IP (Internet Protocol) Numarası (IPv4)

• IP (Internet Protocol), bilgisayarların iletişim kurmasını sağlayan standart bir protokoldür. Genel olarak her bilgisayarın kendine özel bir numarası vardır.

• İki bilgisayar iletişim kurduğu zaman birbirlerini bulmak için IP adresini kullanır.

• IP adresi her biri noktayla ayrılan ve 0 ile 255 arasındaki rakamlardan oluşmuş 4 adet numara grubundan oluşur.


Hafta I


193.255.096.110W X Y Z

= 32 Bit

• Her bir numara grubuna oktet adı verilir. 8x4 toplamda 32 bitlik adrese karşılık gelir.

• Bugün 128 bit uzunluğunda ve 0-9 A-F hexadecimal sayı sayı sisteminde adreslenen IPv6 çalışmaları davardır.


Hafta I


• İnternete sürekli bağlı olan her bilgisayarın bir IP numarası vardır.

• Bu numaraları akılda tutmak zor olduğundan, alan adı (domain name) sistemi adını verdiğimiz bir isimlendirme oluşturulmuştur.

• Örn: sabah.com.tr – ksu.edu.tr gibi.


Hafta I

Alana Adı Sistemi (Domain Name System – DNS)

http://www.ksu.edu.tr

HyperText TransferProtocol

World WideWeb

Alan Adı Domain(Kısaltma)

Alan AdıTipi

(Eğitim)Ülke kodu(Kısaltma)

http://193.255.096.110


Hafta I

Alan Adı Tipleri (Domain Type)

gov: Hükümet kurumları (government) edu: Eğitim kurumları (education) org: Ticari olmayan kuruluşlar (organization) com: Ticari kuruluşlar (company) mil: Askeri kurumlar (military)net: Servis sunucular (network)ac: Akademik kuruluşlar (academic)int: Uluslararası kuruluşlar (international)

Ayrıca ülkere has .dr, .k12, .bel gibi tiplerde vardır.


Hafta I

Ükle Kodu (Uluslararası Trafik kodu)

.fr : Fransa .tr : Türkiye

.dk : Danimarka .eu : Avrupa Birliği

.de : Almanya .gr : Yunanistan

.br : Brezilya .jp : Japonya

.ir : İran .mn : Moğolistan

.my : Malezya .no : Norveç

.it : İtalya .ru : Rusya

.pe : Peru . tc : Kıbrıs (Türk)


Hafta I

Ülke Kodu (Uluslararası Trafik kodu)

• Abd’nin ülke kodu yoktur. Uzantısında ülke kodu bulunmayan internet adresleri ABD’de yerleşik bir kuruluş olan Network Solution tarafından sağlanır.

• Ülkemizde .tr uzantılı alan adı tahsis hizmetini (kişisel ve kuruluşlar) ODTÜ merkezli nic.tr tarafından yapılmaktadır.


Hafta I

WEB Tarayıcılar :

• WEB tarayıcısı, internet üzerindeki tüm bilgilere bakabilme ve bu bilgilerle etkileşim halinde olabilme olanağı veren bir uygulama programıdır.

• Tarayıcı kelimesinin İngilizce karşılığı “browser”’dır.

• Temelde bu programın işlevi text tabanlı web dilini «yorumlaması» dır.


Hafta I

En çok kullanılan WEB Tarayıcılar :

Windows&

Gnu-Linux

Konqueror Pale Moon Midori Ice Weasel

Gnu-Linux


Hafta I

Web Tasarımının Önemi

• Günümüzde internet ve web siteleri iletişim, tanıtım ve satış için en etkili iki araçtır.

• Bugün web siteleri işletmelerin sanal ortamda temsilcisi haline gelmiştir.

• İletişim, bilgi yayma ve pazarlama siteler aracılığıyla yapılabilir.

• Web siteleri bilgiye ulaşmada elektronik ticaret ve haberleşmede en sık kullanılan yoldur.

08119 Web Tasarımının Temelleri08119 Web Tasarımının Temelleri

Hafta I

• Herkes kendi web sitesinin en iyisi olmasını, görünüm, kullanılabilirlik, tasarımı özgün ve benzeri olmayan önemli bir yere sahip olmasını istemektedir.

• Gerçekten de iyi tasarlanmış kullanımı kolay web siteleri başarılı olmaktadır.

• Web tasarımı önemli bir iş sektörü olarak gelişimini sürdürmektedir.


Web Tasarımının Önemi

Hafta I

Web Sayfası Hazırlarken Dikkat Edilecek Noktalar

• Sayfa adında ya da sayfada yer alan herhangi bir resim ya da animasyonlar kaydedilirken asla Türkçe ve özel karakterler (ğ,ü,ş,İ gibi ve ?,\) kullanılmaz. Daima küçük harf kullanılırDOĞRU DOSYA İSİMLERİ

index.html

anasayfa.html

resimler.html

egitim.html

index.aspx

anasayfa.aspx

resimler.aspx

egitim.aspx

index.php

anasayfa.php

resimler.php

egitim.php


Hafta I

• Sabit diskinizde öncelikle WEB sayfanıza ait dokümanları kaydedeceğiniz bir dizin ve bu dizin içerisinde resimleri ya da animasyonlarınızı kaydedeceğiniz bir alt dizin oluşturulmalıdır.

İndex.html

resimler

dosyalar

logo.jpgmanzara.jpg

hakkinda.html

hobiler.html

benimweb



Hafta I

• WEB sitenizi yaptığınızda, mutlaka ana sayfanızı index.html olarak adlandırınız.

• Birçok WEB sunucu için varsayılan sayfa index.html'dir.

• Örneğin IIS (internet information Services)



Hafta I

• Bazı sunucular da varsayılan sayfanın default.html olarak adlandırılmasını ister.

• Kullanılan web dilinine göre bu isim index.asp(x), index.php, index.cf olabilir.



Hafta I

Web Sayfası Tasarımı

Monitör :

15.4 inch

17 inch

19 inch ve üzeri

Ekran Çözünürlüğü :

1024x768 Piksel

1280x768 Piksel

1280x800 ve üzeri


Hafta I

Web Sayfası Tasarımı

50-60 piksel

10-1

2 p

ikse

l

CHROME-MOZİLLA-OPERA-SAFARİ


Hafta I

Web Sayfası Görsel Tasarım

• Bir bilgisayar ekranının görsel taranma çizgisinin,

- Soldan üst köşeden sağ üst köşeye,- Sağ üst köşeden sağ alt köşeye doğru genel tarama - Yeniden sol üstten itibaren okuma - Üst orta noktadan aşağı doğru okumayı sürdürme tarzında olduğunu gösteriyor.*

* YALE Üniversitesi Tıp Fakültesi Araştırması


Hafta I


• Buna göre, izleyici;

- WEB sayfasında önce büyük şekil kitlesini ve renkleri görmektedir.

- Ön plandaki unsurlarla arka plandaki unsurlar arasındaki kontrastın farkına varmaktadır.



Hafta I


• Buna göre, izleyici;

- İzleyici ancak daha sonra, varsa grafik unsurların verdiği bilgiyi almakta, üçüncü olarak da okumaya başlamaktadır.

- Okuma en büyük kitleden benzetme yoluyla başlamakta ve daha sonra kelimelere inmektedir.



Hafta I


• Bu durum bize, WEB sayfasının bütünü itibariyle mükemmel bir grafik dengesine sahip olması gerektiğini gösteriyor.

• Tasarımcı; bu noktada sayfanın beklenen ziyaretçisinin varsayılan ilgi odağını, grafikle metni dengeleyerek bulmalıdır.


Hafta I


Web Sayfası Görsel Tasarım – En iyiler

Hafta I



• Yazıyı soldan sağa doğru okumaya alışmış toplumlarda, görsel dikkatin ekranda da soldan sağa doğru gitmesi doğaldır.

• Bu nedenle WEB sayfalarında da ekranın üst yarısı, görsel odak noktası olmalıdır.

• Bu alanın mümkün olduğu kadar yumuşak, pastel renklerle doldurulması; sert, aşırı yoğun çarpıcı renklerden kaçınılması gerekir.



• İlk bakışta göze çarpıcı renkler ancak çok fazla dikkat çekmek istediğimiz, bir ya da iki unsur için saklanmalıdır.

• Yazılar mutlaka arkalarındaki zeminle çarpıcı bir kontrast oluşturmalıdır.

• Dramatik ve karmaşık grafikler, mutlaka grafik sanatçıları tarafından yapılmalıdır.



• Metinleri daha belirgin hale getirecek noktalar, kutular, yatay ve dikey çizgiler, çoğu zaman görsel bütünlük sağlamak yerine sayfanın tümüne yama hissi verir.

• Bütün görsel tasarımlarda olduğu gibi, WEB sayfası tasarımında da tutarlılık şarttır.




• WEB sayfası tasarlarken diğer bir ölçüt ise hangi konuda web sayfası tasarladığınız konusudur.

• Benzer iş alanlarında yapılmış web sayfaları açık kaynak kodun desteğiyle tasarımcıya yol göstermede oldukça faydalıdır.

• Unutmayın kendi tasarımınız diğerlerinden özgün olmalıdır.

Hafta I

HTML (HYPER TEXT MARKUP LANGUAGE) TEMEL ETİKETLERİ

Devamı Haftaya…


08119 Web Tasarımının Temelleri · 08119 Web Tasarımının Temelleri Elbistan MYO 2017-2018...

Documents

Transcript of 08119 Web Tasarımının Temelleri · 08119 Web Tasarımının Temelleri Elbistan MYO 2017-2018...