Web Tasarımının Temelleri« İ N T E R N E T T E K N O LOJ İ L E R İ »

aelen@karabuk.edu.trKarabük Üniversitesi T.O.B.B. Teknik Bilimler Meslek YüksekokuluDemir Çelik Kampüsü 78050 Karabük/TÜRKİYE

KBÜKARABÜK ÜNİVERSİTESİ

Öğr. Gör. Dr. Abdullah ELEN

https://www.elenium.net

Belge No: TBP107/01Revizyon: R-001

Yayın Tarihi: 23.09.2018

TBP107

İçindekiler

2

➢İnternet ve Web Kavramları

➢Web Tarayıcılar

➢Arama Motorları

➢Web Tasarımı

İnternet ve Web KavramlarıI n t e r n e t a n d W e b C o n c e p t s

3

Æ

▪ İnternet, bir çok bilgisayar sisteminin birbirine bağlı olduğu, dünya çapında yaygın olan ve sürekli büyüyen bir iletişim ağıdır.

▪ Mecazi anlamıyla internet, siber uzayın fiziksel mekânıdır. Süper iletişim otoyoludur.

▪ Bu teknoloji yardımıyla; farklı alanlardaki bilgilere insanlar kolay, ucuz, hızlı ve güvenli bir şekilde erişebilmektedir.

Siber terimi; canlılar ve/veya makineler arasındaki iletişimdir.

4

İnternet Nedir?

Æ

▪ İnternete bağlı bilgisayarların markaları ve kullandıkları işletim sistemleri ne olursa olsun, birbirleri arasında iletişim sağlanır.

▪ Bunu sağlayan özel yazılımlar vardır. İnternet protokolü diye bilinen bu yazılımlar, TCP/IP kısaltmalarıyla bilinir.

▪ Bunlar İngilizce "Transmission Control Protocol/Internet Protocol" deyiminin baş harflerinden oluşur.

▪ İnternete bağlanan her bilgisayarda bu yazılımlar bulunmalıdır.

▪ Onlar olmadan, bilgisayar internetteki diğer bilgisayarla iletişim kuramaz.

5

İnternet Erişimi

Æ

▪ İnternetin sahibi yoktur.

▪ Herhangi bir kişi, kurum ya da devlet onun üzerinde hak sahibi değildir.

▪ Bütün ülkelerin iletişim ağları devrededir.

▪ Her ülkede internet kullanıcıları ya hat kirası öder ya da vatandaşlardan toplanan vergilerle bu iş yürütülür.

▪ İnternetin yapısını ve standartlarını koyan, onun gelişmesini sağlayan uluslararası gönüllü kuruluşlar vardır.

▪ Bilim ve teknolojinin her alanında olduğu gibi, internette de yeni ve iyi buluşlar kendiliğinden eskinin yerini alır.

6

İnternetin Sahibi Kimdir?

Æ

▪ İngilizce World Wide Web sözcüklerinin baş harflerinden oluşturulan bir kısaltmadır. Dünyayı saran ya da dünya çapında web diye açıklayabiliriz. Kısaca Web sözcüğü ile de ifade edilir.

▪ WWW, birbiriyle bağlantılı hiper-metin dokümanlarından oluşan ve internet tarayıcısı adı verilen yazılımlar sayesinde kullanılan bir bilgi sistemdir.

▪ WWW üzerinde bulunan her bir doküman veya sayfaya kısaca “Web Sayfası” denir. Web sayfaları içerisinde metin, görsel ve video klipleri içerebildikleri gibi diğer web sayfalarına gitmeyi kolaylaştıran bağlantılar içerebilir.

7

WWW Nedir?

Æ

▪ HyperText Transfer Protocol deyimindeki sözcüklerin baş harflerinden oluşur.

▪ İnternet üzerinde HTML ile yazılan dokümanların iletimini sağlayan protokoldür.

▪ Başka bir deyişle Web’in dilidir.

▪ Örneğin; http://elenium.net Web adresinin en başında yazılı olan http:// ifadesi, HyperText Transfer Protocol servisi alınacağını belirtir.

8

HTTP Nedir?

Æ

▪ 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 setidir. Örneğin: 192.168.123.254.

▪ Bilgisayarın networkte bir “adı” olsa bile, diğer bilgisayarlarla iletişim kurduğunda IP adresini kullanır.

9

IP Nedir?

Æ

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

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

▪ Herhangi bir bilgisayara (veya Web sitelerine) bağlanmak için karmaşık IP numaralarını akılda tutmak yerine, hatırlanması ve yazılması kolay alan adlar kullanılmaktadır (www.google.com gibi).

▪ Web tarayıcınızın adres çubuğuna www.karabuk.edu.tr yazdığınızda, tarayıcınız merkezi bir bilgisayarla iletişim kurarak www. karabuk.edu.tr adresinin yerini tuttuğu IP numarasını öğrenecek ve bu IP numaralı bilgisayara bağlanarak istediğiniz bilgilere erişmenizi sağlayacaktır.

10

İnternet Alanı (Domain)

Æ

▪ Subdomain (alt alan adları), aşağıdaki şekilde görüldüğü gibi; domain altına tanımlanan, her biri birbirinden farklı bağımsız alt alan adlarıdır.

▪ Subdomain’ler bağımsız bir alan adı gibi çalışır ve oluşturulan her bir subdomain’inayrı FTP dizini vardır.

▪ Bunlara ek olarak, örneğin; farklı illerde bayiliğiniz varsa, her şehir için de subdomainoluşturarak şirketinizi kategorize etmiş olursunuz, ya da iş yaptığınız sektörde birbirinden bağımsız farklı hizmetleriniz varsa bunları da aynı şekilde gruplandırmak için ayrı siteler oluşturabilirsiniz.

▪ Örneğin; satış siteniz var ve mobilya, mutfak malzemeleri, vb. ürünler sattığınızda “mobilya.alanadi.com”, “mutfak.alanadi.com” gibi subdomain’ler açarak her bir alan adına, kendi adının içeriklerini ekleyerek site oluşturabilirsiniz.

11

Alt Alan Adı (Sub-domain)

Æ

▪ Açılımı File Transfer Protocol olan FTP’nin Türkçe karşılığı Dosya Transfer Protokolü’dür. İsminden de anlaşılabileceği gibi internete bağlı iki bilgisayar arasında dosya transferini sağlayan bir protokol ve bu işleme hizmet eden uygulamaya verilen isimdir.

▪ Web sitesinde yer alması istenen dosyalar, ilgili Web sunucularına FTP üzerinden aktarılabilir.

▪ FTP ilk geliştirilen internet protokollerinden biridir. FTP protokolü ile;▪ Bir bilgisayardan başka bir bilgisayara dosya aktarımı yapılırken, o bilgisayar ile

etkileşimi aynı anda bağlantı kurulur

▪ Protokol ile sağlanan bir dizi komutlar yardımıyla iki bilgisayar arasında dosya alma/gönderme işlemleri yapılır.

12

FTP Nedir?

Æ

▪ gov: Hükümet kurumları (government)

▪ edu: Eğitim kurumları (education)

▪ org: Ticari olmayan kuruluşlar (organization)

▪ com: Ticari kuruluşlar (commercial)

▪ mil: Askeri kurumlar (military)

▪ net: Servis sunucular (network)

▪ ac: Akademik kuruluşlar (academic)

▪ int: Uluslararası kuruluşlar (international)

Bunun yanında kullanılan tr: Türkiye, jp: Japonya, uk: İngiltere, it: İtalya, ch: Isviçre gibi ülke kısaltmaları da vardır.

13

Domain Uzantıları

karabuk.edu.tr«Türkiye’de bir Eğitim Kurumu»

Web TarayıcılarW e b B r o w s e r s

14

Æ

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

▪ Web tarayıcısı, Yardımlı Metin Transfer Protokolü'nü (İngilizcesi "Hypertext Transfer Protocol" - kısaca HTTP) kullanarak, tarayıcı kullanıcısı adına İnternet üzerinde Web sunucularından isteklerde bulunan bir istemci programdır.

15

Web Tarayıcılar

Æ

▪ Her bilgisayar üzerinde WEB sayfası adı verilen elektronik dosyaları saklar ve siz kendi bilgisayarınızdan bu bilgilere erişebilirsiniz.

▪ Web sizin zengin bir ortamda (metin, renkli çizim, resim, ses ve video) iletişim kurmamızı sağlar.

▪ Web istemci-sunucu (client-server) sistemi olarak bilinir. Sizin WEB tarayıcı yazılımınız istemci, uzaktaki sizin erişmek istediğiniz bilgileri saklayan bilgisayar ise sunucudur.

▪ Teknik olarak tarayıcıların neler yaptığını iki madde de toplayabiliriz.▪ Tarayıcınız sizin bağlandığınız Web sunucudan yaptığınız dosya isteğini ağ

üzerinden size yani kullandığınız bilgisayara ulaştırır.

▪ Tarayıcının ikinci görevi ise yaptığınız isteği, yani WEB sunucudan gelen dosyayı size, yani monitörünüze nasıl yansıtacağını, formatlamasını bilmesidir.

16

Web Tarayıcıların Çalışması

Arama MotorlarıS e a r c h E n g i n e s

17

Æ

▪ İnternet büyük miktarda bilgi içerir, ancak en büyük sorun ihtiyacınız olan bilginin yerini tespit etmektir.

▪ Arama motoru, Web sitelerini dolaşarak içeriklerini inceleyen ve bu içerikleri sizin arama yapabilmeniz için uygun şekilde indeksleyenprogramlara verilen isimdir.

▪ Arama motorları genellikle çok büyük bir veritabanına sahiptir.

▪ Belli bir konuda araştırma yaptırabilmek için tüm yapmanız gereken anahtar bir kelime ya da sözcüğü girmektir.

▪ Girdiğiniz verilere göre araştırma yapılacak, sonra da konuyla ilgili olarak bulunan linkler bir liste halinde size sunulacaktır.

18

Arama Motorları

Æ

▪ İnternette dizinler ve crawlerlar olmak üzere iki tür arama motoru vardır.

▪ Arama motoru kelimesi crawlerları ve dizinleri tanımlamak için kullanılır ancak bu ikisi tamamen farklı yöntemlerle çalışır.

▪ Crawlerlar internetteki siteleri tarar ve indeksler. Eğer sitelerin içeriği değiştirilirse bu listedeki durumunuzu etkiler. Çünkü crawlerlar sayfaların tümünü hafızalarına alır ve bir aramada sayfada geçen tüm kelimeler arasından arar.

▪ Dizinler ise insanlar tarafından yönetilir. Siteleri kaydederken bir başlık ve bir açıklama yazılır ya da editörler bir açıklama yazar ve sonuçlarda bu iki etken etkili olur. Sayfalarda yapılan değişiklikler sonuçları etkilemez.

▪ Hybrid olarak adlandırılan arama motorları ise her iki türden de sonuç getirir ve genellikle bir tarafı ki bu taraf genellikle dizinler olur, diğerinden daha üstün tutar.

19

Arama Motorlarının Çalışması

Æ

▪ Bu tip arama motorları siteleri otomatik olarak ziyaret eder ve hemen hemen tüm sayfaları hafızalarına alır. Bunun için de bir çeşit robot kullanır.

▪ Bu robotlar siteleri bir sayfayı ziyaret ettikten sonra o sayfada bulunan tüm linkleri de ziyaret eder.

▪ Ana sayfayı ziyaret ederlerse ve buradan bütün sayfalara link verilmişse oraları da dolaşacak demektir.

▪ Site dışında bir siteye link verilmiş ise orayı da ziyaret edecektir ve eğer bu site listelerinde yoksa onu da ekleyeceklerdir.

20

Arama Motoru: Crewler

▪ Spider: Siteyi ziyaret eder, okur ve daha sonra linkleri takip ederek diğer sayfalara ulaşır. Spidersiteyi bir ay ya da iki ay arayla düzenli olarak tekrar ziyaret eder.

▪ Index: İndekste spiderın bulduğu tüm sayfaların bir kopyası depolanır ve spider sayfaları tekrar ziyaret edip güncel hallerini getirdiğinde index’de yenilenir.

▪ Yazılım: Son parça olan arama motoru yazılımı ise indekste depolanan milyonlarca sayfa arasından uygun sonuçları bulur ve en uygun olanlara göre sıralama yaparak sonuçları getirir.

Crewlerların Bölümleri

Æ

▪ İnsanlar tarafından kontrol edilen arama motorlarıdır.

▪ Güvenilir olarak görüldüklerinden birçok insan bunları ziyaret eder.

▪ Ayrıca bunlara kayıt olmak, crawlerların siteleri bulmasını kolaylaştırır.

▪ Bunlardan bazıları da crawlerlara dizin hizmeti verirler.

▪ Dizinlere kayıt olmada siteler 25 kelimeyi geçmeyecek bir açıklamada bulunurlar.

▪ Dizinler, crawlerlar gibi siteleri tüm içeriğini değil sadece yazılan açıklamayı ve sitelerin başlığını görüntüler ve arama sonuçlarını da bu verilere dayanarak getirirler.

21

Arama Motoru: Dizin

Web TasarımıW e b D e s i g n

22

Æ

Web Sayfası Hazırlarken Dikkat Edilecek Noktalar;

➢Sayfa adında ya da sayfada yer alan herhangi bir resim ya da animasyonlar kaydedilirken Türkçe ve özel karakterler (ğ,ü,ş,İ ,?,\ vs.) kullanılmaz.

➢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şturunuz. Sunucu bilgisayarına bu bilgiler atılırken (upload) aynı dizinleri bu alanda oluşturmak gerektiği asla unutulmamalıdır.

➢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. Bazı sunucular da varsayılan sayfanın default.html olarak adlandırılmasını ister.

23

Web Tasarımı

Æ

Görsel Tasarım

➢Günümüzde içeriği tayin ederken sayfamızın amacı uzun uzun bilgi vermekse, “Nasıl olsa kimse okumuyor!” diye bu bilgileri kırpmak, gerçekten o bilgiye ihtiyacı olan kişilere haksızlık olur. Sayfamızın bir hareket noktası, bir geçiş noktası olduğunu tahmin ediyorsak, kimseyi fazla oyalamaya, istemediklerini bildiğimiz bilgileri zorla vermeye de hakkımız yoktur.

➢Yale Tıp Fakültesi’nin, ekrana bakan kişinin göz hareketlerini belirleyen cihazlarla donattığı bilgisayarların başına oturttuğu 12 bin kişiyle yaptığı araştırma bir bilgisayar ekranının görsel taranma çizgisinin; (1) soldan üst köşeden sağ üst köşeye, (2) sağ üst köşeden sağ alt köşeye doğru genel tarama (3) yeniden sol üstten itibaren okuma ve (4) üst orta noktadan aşağı doğru okumayı sürdürme tarzında olduğunu gösteriyor.

24

Web Tasarımı

Æ

Görsel Tasarım

➢Buna göre, izleyici Web sayfasında önce büyük şekil kitlesini ve renkleri görmekte, ön plandaki unsurlarla arka plandaki unsurlar arasındaki kontrastın farkına varmaktadır. İzleyici ancak daha sonra, varsa grafik unsurların verdiği bilgiyi almakta, üçüncü olarak da okumaya başlamaktadır. Okuma tahmin edilebileceği gibi, en büyük kitleden benzetme yoluyla başlamakta ve daha sonra kelimelere inmektedir.

➢Bu belirleme, bize, Web sayfasının bütünü itibariyle mükemmel bir grafik dengesine sahip olması gerektiğini gösteriyor. Salt metinden ibaret gri bir sayfa itici ve sıkıcı iken, büyük ve geniş grafikler, büyük ve kara lekeler halindeki harfler özellikle içerik arayan daha rafine izleyiciye “içi boş” izlenimini verecektir.

25

Web Tasarımı

Æ

Görsel Tasarım

➢Grafik tasarımcısı, bu noktada ziyaretçinin (müşterinin) Web sayfasındaki ilgi odağını, grafikle metni dengeleyerek bulmak zorundadır. Bu dengede oran ve uygunluk, sadece sayfanın hedef kitlesi ya da başka bir deyişle sayfanın içeriği dikkate alınarak bulunabilir.

➢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. Bu tür renkler ancak çok fazla dikkat çekmek istediğimiz, bir ya da iki unsur için saklanmalıdır. Yazılarmutlaka arkalarındaki zeminle çarpıcı bir kontrast oluşturmalıdır. Dramatik ve karmaşık grafikler, mutlaka grafik tasarımcıları tarafından yapılmalıdır.

26

Web Tasarımı

Æ

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.

➢Grafik unsurlarla “stil” oluşturmaya kalkmak, grafikçilerin işidir. Bir Web alanının başından sonuna tutarlı bir şekilde izlenen grafik uygulama, sonunda izleyicide Web alanının sahibi kurum hakkında bir yorum uyandırır. Bu nedenle sırf süsleme amacıyla, sayfaların orasına burasına çizgi ya da fotoğraf unsurları konulmamalıdır.

27

Web Tasarımı

Æ

1 Tasarımın Temel İlkeleri, Milli Eğitim Bakanlığı (23.09.2018)

2 www.hosting.com.tr (23.09.2018)

3

4

5

6

7

8

9

10

B u d e r s n o t u h a z ı r l a n ı r k e n a ş a ğ ı d a b e l i r t i l e n k a y n a k l a r d a n y a r a r l a n ı l m ı ş t ı r.

28

Kaynaklar