08119 Web Tasarımının Temelleri. Elbistan MYO Güz Dönemi Öğr.Gör. Murat KEÇECİOĞLU

Transkript

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

2 İ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.

3 İ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.

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

5 IP (Internet Protocol) Numarası (IPv4) W 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ı da vardır.

6 IP (Internet Protocol) Numarası (IPv4) İ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.

7 Alana Adı Sistemi (Domain Name System DNS) HyperText Transfer Protocol World Wide Web Alan Adı Domain (Kısaltma) Alan Adı Tipi (Eğitim) Ülke kodu (Kısaltma)

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

9 Ü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)

10 Ü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.

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

12 En çok kullanılan WEB Tarayıcılar : Windows & Gnu-Linux Gnu-Linux Konqueror Pale Moon Midori Ice Weasel

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

14 Web Tasarımının Önemi 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.

15 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 (ğ,ü,ş,i gibi ve?,\) kullanılmaz. Daima küçük harf kullanılır DOĞ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

16 Web Sayfası Hazırlarken Dikkat Edilecek Noktalar 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. benimweb İndex.html resimler logo.jpg manzara.jpg dosyalar hakkinda.html hobiler.html

17 Web Sayfası Hazırlarken Dikkat Edilecek Noktalar 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)

18 Web Sayfası Hazırlarken Dikkat Edilecek Noktalar 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.

19 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

20 Web Sayfası Tasarımı piksel CHROME-MOZİLLA-OPERA-SAFARİ piksel

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

22 Web Sayfası Görsel Tasarım 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. * YALE Üniversitesi Tıp Fakültesi Araştırması

23 Web Sayfası Görsel Tasarım 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. * YALE Üniversitesi Tıp Fakültesi Araştırması

24 Web Sayfası Görsel Tasarım 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.

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

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

27 119 Web Tasarımının Temelleri Web Sayfası Görsel Tasarım En iyiler

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

29 119 Web Tasarımının Temelleri Web Sayfası Görsel Tasarım 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.

30 119 Web Tasarımının Temelleri Web Sayfası Görsel Tasarım İ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.

31 119 Web Tasarımının Temelleri Web Sayfası Görsel Tasarım 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.

32 119 Web Tasarımının Temelleri Web Sayfası Görsel Tasarım 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.

33 HTML (HYPER TEXT MARKUP LANGUAGE) TEMEL ETİKETLERİ Devamı Haftaya