Web Teknolojileri Giriş – HTML5

Web Teknolojileri Giriş  olarak size uzun ve sıkıcı olmayan bir yazı yazmayı planlıyorum. Bilişim Hareketi blog için yazdığım ilk yazıma hoş geldiniz. Bu yazı boyunca başlıktan anlaşılabileceği gibi HTML5 ve CSS3 gibi web tasarım teknolojilerinden ve bunlara bağlı büyük gelişimlerden bahsedeceğim. Öncelikle nedir bu Web Teknolojileri ona bir bakalım.

Web Teknolojileri nedir?

Bunu aslında tek başına açıklamak zor. Çünkü birden fazla teknoloji ve kullanılabilirlik özelliğinin bir araya gelmesinden oluşmakta. HTML5 ve buna bağıl özellikler, CSS3 gibi stil şablon sisteminin en gelişmiş hali ve insanların internet ortamında gezinirken kullanabileceği çok fazla özelliğe sahip olmaktadır. Bunlardan en göze çarpanı ve en göz önünde bulunanları HTML5 ve sonraki CSS3 yazımız temel olacak.

HTML5

HTML en temel anlamıyla Hypertext Marking Language olarak tanımlanmakta ve 2010 yılına kadar w3c (world wide web consortium) tarafından standart olarak belirlenen 4 versiyonu bulunmaktaydı. 2010 yılı itibariyle duyurulan HTML5 bir işaretleme dili olmaktan daha fazlası olarak web teknolojileri ailesinin bir bireyi oldu. Kendi içerisinde barındırdığı API katmanları sayesinde interaktif web tabanlı uygulamaların geliştirilmesi konusunda yazılımcıların ve bilişim ağının önü açılmış oldu.

Bu teknoloji kodlama içerisine yazılan elemanların tamamının gösterimini sağlayan ve css gibi şablonlarla bunlara şekil şemal verilmesini sağlayan bir dilden, kişilerin etkileşimde bulunabildikleri, gerekli API kullanımları ile karşılıklı mesaj taşıma görevlerini sağlayan ve dinamikleşen bir dil olmayı başardı. Bunların yanında yeni eleman türlerini içerisinde barındıran bir dil olmayı başardı.

Önceden h1 ile h6 arası başlık alanlarını kullanabilir ve bölümleri belirli şekilde bölümlemeye çalışırken şu an figure,section,article,aside,footer,header,nav gibi temel ve tanımlı alanlar ile çok fazla CSS kodlama ve div bölümleme ile uğraşmıyoruz.

Yayımından itibaren en çok kullanılan API ve tanımlamaları ise şu şekilde;

Video ve Audio

Bu özellik ile tarayıcılar tarafından desteklenen inline-player (içe gömülü oynatıcı) özelliğini kullanarak ekstra flash ve benzeri oynatıcıları kurmaya gerek kalmadan içerikleri sunabilmekteyiz. Bu da kullanıcı dostu ve mobil telefonlar tarafından desteklenen varsayılan oynatıcıların kullanımını kolaylaştırmaktadır.

Örnek kod tanımlaması şu şekildedir;

Audio özelliği de benzer şekilde kullanılabilmektedir.

Form Elemanları

HTML5 ile birlikte standart, bildiğimiz girdi türlerinin yanına yeni türler geldi. Tarih, renk seçici, alan seçici gibi türler ile ekstra javascript kodlarına gerek kalmıyor artık.

Çevrimdışı Web Uygulamaları

Çok enteresan yeni bir özellik. İnternet ihtiyacı bulunmadan bazı uygulamaların sistemlerine kayıt işlemlerinin gerçekleştirilmesi ve bu işlemlerin internet erişimi mümkün olduğunda karşı tarafa iletilmesini sağlayan Web Storage gibi yeni APIlerle birlikte desteklenen uygulama türleri görmeye başladık.

Sürükle-Bırak

Şu an neredeyse bütün uygulamalarda dosya yüklerken kullandığımız API. Dosya seçim kutularına gerek kalmadan belirli dosyaların tekil ya da çoğul olarak tarayıcı üzerinden web uygulamasına aktarılmasını sağlayan ve modern tarayıcıların (mobil olanlar hariç) desteklediği API türüdür. HTML5 için en faydalılarından biridir diye düşünüyorum.

Microdata

HTML hali hazırda kendi elemanları ve bunların tanımlamalarını yapan bir teknoloji. Ancak microdata kavramı modern arama motorlarının ve özellikle Google gibi arama sonuçlarında bu verileri tamamıyla kullanan sistemlerin istediği tanımlamalar. Böylelikle kullanıcı için en uygun içeriği destekleyerek öncelikle sorgularda ön pnala çıkartmayı sağlamakta.

Bu teknoloji sadece HTML elemanlarını tanımlamakla kalmıyor ve içeriğin de bu standart hale getirilmiş formatlarda sunulmasını sağlıyor. Bu konu hakkında detaylı bilgi bir yazı olacağından ilerleyen süreçte bu konu hakkında yazı çıkartabiliriz.

HTML5 içerisine katılan yeni Web Teknolojileri

SVG

Boyutlandırılabilir vektörel grafikler aslında W3C tarafından 1999 yılında standartlaştırılmış bir teknoloji. Ancak günümüze kadar pek popüler olmamıştı. Şu an web fontlar, birden fazla görüntü barındıran ve bunları sunan siteler gibi uygulamalarda kullanılmaktadır.

Geolocation

Kullanıcının tarayıcısı üzerinden yerini belirlemeye yarayan bu teknoloji özellikle özelleştirilmiş sonuçlar sunmak adına -kimi zaman da dijital pazarlama platformlarınca- kullanılmaktadır. Son günlerde Twitter, Facebook ve benzeri sosyal uygulamalar bunu efektif olarak kullanmaktadırlar.

Web Storage

Kullanıcıların tarayıcıları üzerinde girilen verileri, yine tarayıcılar tarafından kendi yapılarında desteklenen veri tabanı üzerinde tutulmasını sağlayan teknolojidir. Google Chrome, Firefox gibi modern web tarayıcıları bu veri tabanlarını varsayılan olarak desteklemektedirler. Yukarıda bahsettiğim Çevrimdışı Web Uygulamaları oluşturmak için en güvenilir ve en hızlı teknolojidir.

WebGL

Web tabanlı grafik kütüphanesi (WebGL) javascript altyapısı ile üç boyutlu görsellerin tarayıcı üzerinde kullanıcıya sunulmasında kullanılan ve gelişmiş grafik işleme kabiliyetine sahip olan kütüphanedir. Çok fazla kullanım alanı bulunmaktadır. Günümüzde çok fazla javascript kütüphanesi webgl geliştirilmesine destek olmak adına projeler geliştirmektedir.


Yukarıda bahsettiğim API ve teknolojilerin tümü günümüz web tasarımı konusunda en gelişmiş Web Teknolojilerini kullanımımıza sunmaktadır. Bu sistemler ile geliştirilen web tabanlı uygulamaların sayıları arttıkça HTML6 ve daha fazla sürüm hayatımıza girebilir. Biraz olsun bu teknolojiye yetişmenizi sağlayabilirsem ne güzel.

Bonus : Can I Use

Bu teknolojileri hangi tarayıcılar destekliyor diye kontrol etmek için caniuse.com kullanabilirsiniz. Bu site tüm modern ve web tarayıcılar üzerinde kullanılabilirlik sorgulaması yapabileceğiniz sitedir. Misal ben WebGL için sorgu yaptığımda aşağıdaki ekran görüntüsü ile karşılaştım.

Web Teknolojileri - Can I Use

Not: Aslında bu yazı CSS3 ve diğer birkaç şeyi de barındıracaktı ancak yazı gittikçe uzamaya başladı. Bu başlık sanırım seriye dönecek. Göreceğiz.

Selametle kalın

Serkan Algur

WordPress ve Web üzerine makaleler yazan ve "yazılımcıyım" diye ortada dolanan bir deli :) Birkaç ay içinde taze baba :D

Web Teknolojileri Giriş – HTML5” için 3 yorum

Bir Cevap Yazın

%d blogcu bunu beğendi: