Web Sitesi Bileşenleri

                            1.18. Bir Web Sitesinin Bileşenleri Konu :(W6) Bir Web sitesi yapmakla yemek yapmak arasında biçimde fark...

...

                           

1.18. Bir Web Sitesinin Bileşenleri Konu :(W6)
Bir Web sitesi yapmakla yemek yapmak arasında biçimde farklılıklar olsa bile özde hiç bir fark yoktur. Her ikisinde de malzemeler belirli şekillerde bir araya getirilir ve bütün oluşturulur.
Malzemeler
Yapımı
Domates Çorbası
3-4 su bardağı su ya da et suyu
3 çorba kaşığı domates salçası
2 çorba kaşığı margarin ya da 3 çorba kaşığı sıvı yağ
2 çorba kaşığı un
1 çay bardağı süt (varsa)
Tuz
Yağ, bir tencereye koyulup bir iki dakika kavrulur. Domates salçası, varsa süt katılıp bir dakika karıştırılır. Su veya et suyu karıştırılarak ilave edilir. Tuzu atılıp karıştırılarak un kokusu gidinceye kadar beş-on dakika pişirilir. İstenilen koyulukta değilse, su ilave edilebilir. Kızarmış ekmek garnitürü veya çok az sert beyaz peynir ya da kaşar peyniri rendesi serpilerek servis yapılır.
Web Sayfam
GIF ve JPEG formatındaki resim
Biçimlendirilmiş ve biçimlendirilmemiş metinler
Script’ler
Animasyonlar
Metinler ve resimler diğer öğelerle birlikte yan yana getirilir ve İnternet’te bir sunucu (server) üzerinden sunulur

1.19. Metin
Her ne kadar bu günlerde Web’deki sayfaları gürültü, şaşalı grafikler ve göz alıcı resimlerden oluşsa da bir Web sayfasını esas olarak başarılı yapan şey içeriktir. İçerik ise doğrudan metin demektir.
Web sayfaları için metin yazmakla normal metin yazmak arasında her hangi bir fark yoktur. Birçok gazetenin Web sayfasının içeriği gazetede çıkan yazının aynısıdır. Yani sonuçta demek istediğim düzgün yazın. İlgi çekici ve düzgün bir metnin nasıl yazılacağı doğal olarak bu kitabın değil edebiyatın konusudur. Sadece bir kaç öneride bulunacağım;
Gerçekten can-ı gönülden ilgilendiğiniz konularda yazın:
Sizin ilgilenmediğiniz bir konu hakkında yazdığınız yazı büyük bir ihtimalle okuyucularınızı da sıkacaktır (eğer hayatını yazarak kazanan bir yazar değilseniz tabi).
İstek ve şevkle yazın:
Eğer Formula 1 yarışları için deli oluyorsanız ve hiç bir yarışı kaçırmıyorsanız bu konuda yazacak çok şeyiniz var demektir. Bir konuyla ne kadar çok ilgiliyseniz, o konu hakkında o kadar çok ilgi çekici yazı yazma ihtimaliniz vardır. Formula 1 konusu ile ilgilenen bir kişinin bonzai çiçek yetiştirmesiyle ilgili bir yazısı doğal olarak kuru ve ilgi çekici olmaktan uzak olacaktır.
Kendiniz olun: Yazdığınız ne olursa olsun her zaman kendiniz olarak yazın. Bir kişisel Web sayfasının içeriği de zaten bu şekilde olmalıdır. Günlük konuşma dilini bile kullanabilirsiniz, tabi argoya kaçmadan.


Gramer ve yazım hatalarına karşı dikkatli olun:
Bir metni ekran üzerinden okumak zaten oldukça zahmetli bir iştir. Bir de bozuk gramer ve imla hatalarıyla yüklü bir metni okumak okuyucunuzu sıkacaktır ve Web sitenizden kaçmasına yol açacaktır. İngilizce metinler için hazırlanmış birçok gramer ve imla kılavuzu vardır fakat Türkçe metinler için çok fazla seçeneğiniz yok. Microsoft Word programının Türkçe sürümünde gramer ve imla kılavuzu bulunmaktadır. Office 2000/2010 programı yazım hatalarını düzeltmektedir. Zorlandığınız durumlarda babadan kalma imla kılavuzunu kullanabilirsiniz. Tamamı büyük harfle olacak şekilde yazmayın çünkü hem okunması zor olur hem de büyük harflerle yazmak sanal alemde BAĞIRMAK olarak algılanır.Çok fazla metin biçimlendirme özelliği (font, büyüklük vs.) kullanmamaya özen gösterin: Çok fazla font okunmayı güçleştirir sadece. Belirli metin ve başlıklar için belirli font ve büyüklük kullanın. Bu kullandığınız özelliği tüm sitenize uygulayın.
Düzgün yazın, kısa yazın, akıcı yazın:
Düzgün yazmak demek anlaşılabilir cümleler kurmak demektir. Güzel Türkçe’mizi katletmemeye özen gösterin. Çok uzun ve ağdalı cümleler yerine kısa ve öz cümleler kurun. Ekrandan okumak yeterince güçtür, bir de uzun cümleler kurup daha da güçleştirmeyin. Akıcı yazın ki okunabilesiniz.

1.20. Resim ve Grafikler
Birçok resim formatı olmasına rağmen Web sayfalarında genel olarak üç tür resim formatı kullanılır: GIF, JPEG ve PNG.
GIF: GIF türü resimler 256 kadar rengi tanımlayabileceğiniz resim dosyalarıdır. Elinizde 256 tane boya olan bir palet ile resim yaptığınızı düşünün. Daha fazla sayıda renk tanımlamak için ister
istemez JPEG resim formatına başvurmanız gerekir. GIF formatındaki resimler; düğmeler, oklar ya da işaretler gibi fotografik olmayan öğelerde kullanılır. GIF resim formatının JPEG formatından daha ufak yer tuttuğunu söylememe gerek yok sanırım. GIF resminin bir başka özelliği ise, resimde yer alan renklerden birini transparan (yani şeffaf) hale getirebilirsiniz, yani herhangi bir fonda bu renkler görünmeyeceklerdir. Böylece sayfalarınızda üç boyutlu bir etki yaratmak mümkündür.
JPEG: JPEG resim formatı fotoğraflar için idealdir çünkü bunlar 16 milyona yakın renge sahip bir renk paletine sahiptir. JPEG formatı doğal olarak daha çok yer kaplar. Yani bir resmi JPEG olarak kaydederseniz GIF resmine göre daha büyük bir dosya olacaktır, bu ise resmin yüklenmesinin gecikmesi demektir. Bir Web sayfasına baktığınızda o sayfanın bulunduğu sunucu size html dosyalarının yanı sıra resimleri ve grafikleri de gönderir. Eğer sayfanızda çok büyük resimler varsa bu gönderme işlemi yani sayfanın yüklenmesi oldukça vakit alacaktır. İnternet kullanıcısı çok şımarık ve sabırsızdır. 10 saniyeden fazla beklemez. O halde kullanıcıyı bekletmeyin.
İçerik açısından çok kaliteli olan fakat yüklenmesi saatler sürdüğü için çok az kişi tarafından bakılan pek çok sayfa gördüm. Pamuk Prenses gibi görülmeyen bir güzel olmak yerine taliplileri olan bir mahalle kızı olmak daha iyidir. Resmin kalitesi ve yükleme hızı arasında bir optimizasyona gitmeniz gerekir. Basit olarak resim boyutunun 40 KB’ı geçmeyecek şekilde hazırlayın ya da taratın. Sayfa boyutu da 150 KB’ı geçmesin fakat bu kesin bir kural değildir.

Her şey iyi hoş da Web sayfamıza koymak için resimleri nereden bulacağız?
Tarayın!Google görsellerde arayın.Telif haklarına dikkate edin.
Kendinizin, ailenizin ya da kedinizin resmini bir tarayıcıda (scanner) taratıp bu dosyayı JPEG formatında kaydedebilirsiniz. Bir tarayıcınız yoksa her yerde pıtırak gibi açan İnternet kafelerden birine gidin ve resminizi taratıp bir diske kaydettirin (kedim.jpg) ya da tarayıcısı olan bir arkadaşınıza rica edin. Bu iş için bir tarayıcı almaya kalkmayın (en ucuzu 100 dolar) Bir scanner’da taradığınız metnin çözünürlüğünün (resolution) çok olmamasına dikkat edin.

Çözünürlük nedir?
Bir resim bilgisayarda bir mozaik gibi piksel dediğimiz noktalarla oluşturulur. Birim alana düşen piksel sayısı arttıkça resim daha kaliteli görünecektir ve boyutu da fazlalaşacaktır. Bunun ölçütü dpi birimidir (dots per inch: inç başına düşen nokta sayısı). Kalite ve resim boyutu arasında bir optimizasyon yapmanız gerekir aksi takdirde sayfalarınızın yüklenmesi çok ama çok vakit alır.
Şekil 1.13
Aynı resmin değişik çözünürlüklerdeki dosyal boyları.
a,b,c
Düşük çözünürlük 5.6 KB (72 dpi)
Orta çözünürlük 8.35 KB (150 dpi)
Yüksek çözünürlük 25.4 KB (300 dpi)

Resminizin büyüklüğünün 40 KB’ı geçmemesine özen gösterin, yine de bunun bir kural ya da zorunluluk değil de bir tavsiye olduğunu unutmayın.

Resim CD’leri
Piyasada birçok clip-art yani grafikler (oklar, insan resimleri, düğmeler vs. vs.) CD’ler içinde ayrı olarak ya da dergilerle birlikte gelmektedir. Bu resimlerin hemen hepsi ücretsizdir ve ayrıca bir telif ücreti ödemenize gerek yoktur. Birçok clip-art gallery CD’si oldukça zengin bir içeriğe sahiptir. Bu CD’leri sokaktan almak yerine dergilerin ekleriyle gelenleri tercih etmeye çalışın. Bunlar arasında beğendiklerinizi daha önce oluşturduğumuz klasöre kopyalayın.
İnternet’ten Yükleyin...İnternet’te milyonlarca resim, grafik vardır. Eğer İnternet’e bağlanıyorsanız ve bir sayfaya bakıyorsanız beğendiğiniz resimleri bilgisayarınıza kolaylıkla aktarıp daha sonra bunları kullanabilirsiniz. Tabi böyle bir şey yapmadan önce telif hakları ve izin konularına dikkat edin. Her resmi ya da öğeyi bilgisayarınızda görebilirsiniz fakat bu, izinsiz ya da telif hakkı olmadan kullanabilirsiniz anlamına gelmez.Internet Explorer programında Web sitelerine bakıyorsanız beğendiğiniz bir resmin üzerine fare ile gelin ve sağ fare tuşunu tıklayın. Karşınıza aşağıdaki menü gelecektir. Bu menüden Resmi Farklı Kaydet (Save Image As) seçeneğini tıklayın. Daha sonra dosya kaydetme iletişim kutusuna dosya için bir isim girin ve kaydedeceğiniz yeri belirleyin. Doğal olarak bu yer Web sitenizin bulunduğu dizinin altındaki /resimler ya da /images dizini olmalıdır. İsim girmezseniz dosyanın İnternet’teki adıyla kaydedilecektir.
Şekil 1.14
Web sayfanızda kaydetmek istediğiniz resmin üzerine farenizi sağ düğmesi ile tıkladığınızda açılan menüden Resmi Farklı Kaydet (Save Image As) seçeneğine tıklayın.
Aynı işlemi diğer tarayıcılarda’da benzer bir şekilde yapabilirsiniz. Bunun dışında İnternet üzerinde ücretsiz resim ve düğme veren birçok site vardır.
Bir Grafik Programında Siz Yapın
Adobe Photoshop, CorelDRAW ya da buna benzer bir grafik programında kendiniz resim oluşturabilirsiniz. En basitinden Windows’la gelen Paintbrush programında bile kendiniz bir şeyler yapabilirsiniz. Paintbrush’ın eski sürümünde tek format olan BMP formatında çalışıyordu fakat Windows 98,Xp ile yeni işletim sistemleri  ile birlikte gelen farklı programlarla diğer formatlarda da grafik üretebiliyorsunuz. Yapmanız gereken grafiği kaydederken dosyayı JPEG ya da GIF formatında kaydetmektir.Dikkat etmeniz gereken tek nokta, resimleri bitmap yani .bmp formatında değil de .gif ya da .jpeg formatında kaydetmenizdir. Çünkü bitmap formatı çok ama çok yer kaplar. Mümkünse bu formattaki bir resmi Web sayfanıza koymayın. Şöyle bir örnek vereyim aynı resim kalitesinde bir JPEG resmi 40 KB yer tutarken bitmap yani .bmp tipindeki resim en azından 1.000 KB (yani yaklaşık 1 MB) yer tutacaktır. Yüklenmesi tam bir işkence olur tabii ki.

Not ;Web sitenizi yaparken resimleri ayrı bir dizin altında bulundurmanız çalışmanız ve daha sonra düzenleme yapmanız için size kolaylık sağlayacaktır. Bunun için bir /resimler dizini oluşturun. Aynı şekilde düğmeler içinde ayrı bir dizin açıp sitenizde kullandığınız tüm düğmeleri buraya ekleyebilirsiniz. Mümkün olduğunca bir dizin altına çok dosya eklemeye özen gösterin yoksa birçok dosya arasında kaybolabilirsiniz.
1.21. Sesler
Web sayfanızın arka planında çalacak bir ses ekleyebilirsiniz. Ses dosyaları çok yer kaplarlar bu yüzden size tavsiyem mümkünse arka plana bir ses koymamanızdır. İlla bir ses koyacaksanız bunu yüklenip yüklenmemesine kullanıcı karar versin.Yani eğer kullanıcı ses dosyasını dinlemek istiyorsa ve bunun için beklemeye hazırsa bir linki tıklayarak dinlesin. Sayfa yüklenirken ses dosyası da otomatik olarak yüklenirse bu yükleme zamanını çok ama çok uzatacaktır. Bir örnek vermek gerekirse CD kalitesinde bir dakikalık bir ses ya da müzik dosyası yaklaşık olarak 5 MB yer tutacaktır. MPEG formatındaki bir parça bile en azından 2 MB yer kaplar. 28.8 Kb/s hızında bir İnternet bağlantısıyla böyle bir dosyanın yüklenmesi yaklaşık olarak bir dakika alacaktır ki bu en iyimser tahmindir.
Farklı kedi, köpek ya da bir uçağın kalkışının sesini yükleyebilirsiniz. Bunun dışında kendinizin sesini kaydedebilirsiniz. Birçok bilgisayarda artık ses kartı vardır. Bir ses kartı ve bir mikrofon ve Windows ses kaydedicisi programını kullanarak kendiniz ses kaydı yapabilirsiniz.
(BaşlatProgramlarDonatılarEğlenceSes Kaydedicisi).Bu kaydettiğiniz sesi (örneğin kedinizin kuyruğunu çektiğinizde nasıl ses çıkardığını kaydedebilirsiniz. Lütfen bu önerimi ciddiye almayın!) .wav formatında kaydettikten sonra normal bir dosyaya link verir gibi bu dosyayı ziyaretçilerinize dinletebilirsiniz. İleride link verme kısmında bu tür ayrıntıları göreceğiz.
Şekil 1.15
Windows Ses Kaydedicisi.
Windows ile birlikte gelen Ses Kaydedicisi’ni kullanarak (BaşlatProgramlarDonatılarEğlenceSes Kaydedicisi ya da Start ProgramsAccessories Entertainment Sound Recorder) Web sayfasında kullanabileceğiniz sesleri bilgisayar ortamına aktarabilirsiniz.
Uyarı: Resimler ve sesler çoooooook yavaşşşşşş yüklenirrrrrrrrrr...
Web sayfanıza resim ve ses koymadan önce düşünün çünkü boyutları nedeniyle sayfanızın yüklenmesini geciktirebilirler. İnternet bağlantı hızı şu an için oldukça düşüktür bu yüzden resimlere ve seslere a-ban-ma-yınn.
Bölüm II
Sitemizi İnşa Edelim!
Web sitemizi oluşturmak için gerekli olan malzemelerimizi inceledikten sonra şimdi bu malzemelerle nasıl bir Web sitesi yapacağımızı görelim
Bir sonraki konumuz ......( HTML) Ne Demek?
Web Sitesi Yaratma Kılavuzu adlı yazıların  tümünü blogumuzun menü kısmından Web Klavuzu  ismine tıklayarak izleyebilirsiniz.

• Bedava Blog Sahibi Olmak İstiyorsanız ? Blogumuzun Menüler kısmından Blog ile ilgili tüm yazılar,  “Blog sitesi kurulumu” adı altında toplanmış olup, incelemek isteyebilirsiniz.

Web Sitesi Yaratma Kılavuzu adlı yazıların  tümünü blogumuzun menü kısmından Web Klavuzu  ismine tıklayarak izleyebilirsiniz.Tüm yazılar ;  (W1, W2, W3) şeklinde sıralanacaktır.

Devam edecek...  Bir önceki yazıları incelemek isterseniz tıklayarak ulaşabilirsiniz.  

W1 ,W2,W3,W4,W5,W6,