İçeriğe geç

HTML5 İle Neler Değişti?

Kategori: HTML

Daha önceki yazımızda HTML’in nasıl yazılacağını en temel seviyede de olsa öğrenmiştik. Şimdi de bu dilin gelişimini ve HTML5 İle Neler Değişti? bunu öğrenmeye çalışalım. Elbette ki her teknolojide olduğu gibi burada da gelen yenilikler ihtiyaçlara yönelik olarak ortaya çıkmış ve bir takım iyileştirmeler ile birlikte gelmiştir. Peki geçmişten günümüze bu değişim nasıl gerçekleşti?

Web Sitelerinin Evrimi

1- İlk Web Siteleri

İlk web siteleri yalnızca mevcut bilgiyi paylaşmak amacıyla kurulduğundan kullanıcı deneyimi ya da estetik gibi kaygılar yoktu. Tüm içerik doğrudan HTML kodlarıyla tarayıcıda görüntüleniyordu. Zaten o dönemde yeni çıkan bu teknoloji sayesinde bir başka ülkeden bile dilediğiniz zaman bu bilgilere ulaşıp görüntülemek büyük bir yenilikti. Buna örnek olarak 1991 yılından beri yayında olan acme.com sitesini örnek verebiliriz.

acme.com web site
Resim-1: acme.com web sitesi (1991-2020)

O dönemlerde internet üzerinden erişilebilecek bilgilerin az olmasını ve bilgi paylaşımının tek taraflı olmasını da göz önüne alırsak ihtiyacı fazlasıyla karşılıyordu.

2- Tablo Tabanlı Tasarımlar

90’ların ortalarına gelindiğinde artık 10 milyondan fazla web kullanıcısı vardı ve içeriğin daha kullanıcı dostu olarak sunulması ihtiyacı önem kazanmaya başladı. Standart html elementlerinden biri olan tablo yapılarının sayfa tasarımları için kullanılması fikri iyi bir çözümdü ve giderek yaygınlaşmaya başladı. Tabloların kenar çizgilerini gizlediğinizde geriye düzenli içeriklerle dolu bir sayfa kalmaktaydı.

tablo tabanlı web siteleri
Resim-2: 90’lı yıllarda Apple web sitesi

Resim-1 ile karşılaştırıldığında Resim-2’deki web sitesinin daha okunaklı ve anlaşılabilir olduğunu görebilirsiniz. Burada dikkat etmemiz gereken bir başka şey ise görsel kullanımının artması. Bu durum ziyaretçiler için web sayfalarını daha çekici hale getiriyordu ancak o dönemin internet hızlarını göz önünde bulundurursak sayfaların yüklenmesi daha yavaştı. Tablo tabanlı tasarımların kullanılmasıyla birlikte menü, kenar çubukları, site başlığı, site gövdesi gibi bölümler neredeyse her web sitesinde karşımıza çıkmaya başladı.

1994 yılında dünya çapında standartlar oluşturmak adına World Wide Web Konsorsiyumu (W3C) kuruldu. Bugün halen belirli dillerin standartlarını bu kurum belirlemektedir.

3- Flash Tabanlı Tasarımlar

90’ların sonunda 70 milyondan fazla kullanıcı ve 650 binden fazla canlı web sitesi yayındaydı. Kullanıcı etkileşimi çok daha fazla önem kazanmaya başlamıştı. Ancak görsel olayını biraz abartmış olmalıyız ki web sitelerinin tasarımları içeriğin önüne geçmeye başladı. Sanki güzel görünmesi içinde ne yazdığından daha önemliydi. Tabi bu görselliği sağlayan Flash ve JavaScript teknolojileri de artık hayatımızdaydı. Örnek olarak 1996 yılında Space Jam filminin tanıtımı için yapılan ve hala yayında olan spacejam.com web sitesine bakabilirsiniz.

spacejam.com web sitesi
Resim-3: spacejam.com web sitesi

Tabi o dönemler biz de boş durmuyorduk. Bizim de Akrep Nalan’ımızın efsane flash web sitesi hala yayında 🙂

akrepnalan.com web sitesi
Resim-4: akrepnalan.com web sitesi

4- İçerik ve Tasarımın Ayrılması

2000’li yılların başında birileri “Aga biz napıyoruz?” demiş olacak ki içeriğin doğru bir şekilde sunulması ve kullanıcı deneyimi önem kazanmaya başladı. Bu dönemlerde CSS ve PHP tanıtıldı. (CSS Nedir? başlıklı yazımızda daha detaylı bilgiye ulaşabilirsiniz.) Bu yeni teknolojilerle birlikte web siteleri yüklenen her içeriği belli bir tasarım kalıbında ekranda gösterebilir hale geldi ve artık CMS (Content Management System) dediğimiz İçreik Yönetim Sistemleri hayat buldu. Bu sayede içerik yüklemek için programlama bilmek zorunda kalmıyordunuz. Bu arada geçmişten günümüze bir web sitesinin evrimine güzel bir örnek olarak bbc.com sitesindeki bu içeriğe göz atabilirsiniz.

bbc news web site 2000
Resim-5: 2000’li yılların başında bbc.com web sitesi

5- Kullanıcı Odaklı İnternet – Web 2.0

2000’lerin ortasına gelindiğinde artık işler çığırından çıkmış gibiydi. 780 milyondan fazla web kullanıcısı ve 38 milyondan fazla web sitesi yayındaydı. Şirketler web sitelerinin olmayışını bir eksiklik olarak görüyor ve web tasarımı git gide bir endüstri haline geliyordu. 2005 yılından sonra Facebook ve Twitter’ın yaygınlaşmasıyla bir sosyal medya patlaması yaşandı. Artık internette yer almak için bir marka veya kurum olmanıza da gerek yoktu. Bireysel olarak internette sayfalarınız olabilirdi.

ilk facebook web sitesi
Resim-6: facebook.com web sitesi 2006

Bununla birlikte artık bilgi paylaşımı da tek taraflı olmaktan çıkıp kullanıcıların da içerik yükleyebildiği ve web ortamında bilgilerini saklayabildiği bir hal almaya başladı.

6- Duyarlı Web Tasarımı

2000’lerin sonuna doğru artık mobil cihazların yaygınlaşması tasarımların farklı cihazlara ve ekran çözünürlüklerine uyarlanabilir yapıda olması ihtiyacını getirdi. Artık CSS ve JavaScript teknolojilerinin de gelişmesiyle web siteleri farklı cihazlarda tasarımlarından bir şey kaybetmeden etkili bir biçimde çalışabiliyordu. Responsive yani duyarlı tasarımlar olmazsa olmazımız haline geldi.

responsive web tasarım
Resim-7: Responsive (duyarlı) web tasarımı

Günümüzde Web Siteleri

HTML5 sürümünün çıkmasıyla birlikte bir web sayfasının temel yapısı ya da başka bir deyişle iskeleti daha standart bir hal aldı. Hemen her sayfada bulunan üst kısım header, menü yapıları nav (navigation), sol ya da sağda bulunan içerikler aside (sidebar), sayfanın içeriğindeki bölümler section, sayfadaki her bir bağımsız içerik article ve ve her sayfanın en alt kısmında bulunan özet bilgi ve bağlantıların yer aldığı bölüm olan footer gibi yeni elementler HTML5 standartlarına dahil oldu.

html5 sayfa yapısı
Resim-8: HTML5 sayfa yapısı

Semantik Web

Bu yapı ile birlikte artık arama motorlarının web sitelerinin içeriklerini daha iyi analiz edebilmesi kolaylaştırılmış oldu. SEO (Search Engine Optimization) yani Arama Motoru Optimizasyonu daha kolay yapılabilir hale geldi. SEO’nun ne olduğunu daha sonraki yazılarımızda açıklayacağız.

Bunun dışında HTML5 ile gelen yeni elementlerin listesine de buradan göz atmanızda fayda var.

Özetle bugün HTML5 sayesinde çok daha efektif ve kullanıcı dostu siteler yapabilmekteyiz. Bir sonraki yazımızda HTML5 kullanarak nasıl daha detaylı web sayfaları yapabileceğimizi görelim.

İlk Yorumu Siz Yapın

Görüşleriniz bizim için değerlidir...