Web tasarımı ve geliştirme ile ilgilenenler HTML5′in halefine göre daha semantik bir yapıda olduğuyla alakalı yazıları mutlaka okumuştur. HTML5′in neden daha semantik olduğunu WebDesigner Depot bir makalede anlatmış. Bu makaleyi direkt olarak çevirmedim fakat kendi düşüncelerimle harmanlayarak kısa başlıklarda açıklamaya çalıştım.
Öncelikle Semantik, semantik web semantik yapılar hakkında bilgi edinmek için önerdiğim 2 makaleyi yazının en altına ekledim. Onlardan faydalanabilirsiniz.
Çok kısaca bahsedecek olursa “Semantik” türkçeye Anlambilim olarak geçmiştir. Bilgisayar bilimi için kullanılan terim daha çok Semantik Web’dir. Anlamsal Ağ anlamına gelen bu terim, Webde ki tüm içeriklerin sadece insanlar tarafından değil, yazılımlar tarafındanda rahatça anlaşılabilmesi bunun sonucunda daha doğru yorumlanması ve kullanılması amacıyla yayılmakta ve kullanılmaktadır.
Hemen konuya dönecek olursak, html5′ten önce kullandığımız 2 satır html koduna bakalım :
<p>The man threw the computer through the window.</p> <img src="broken_window.png" alt="Broken Window" />
IMG elementinin SRC özniteliği ile, kullanıcının görmesi için açıklama bilgisi ekledik. Bu sayede kullanıcının daha fazla bilgi edinmesini amaçladık. Mevcut kullanımdan anlıyoruz ki HTML bir seviye de zaten anlamlı bir yapıdaydı. HTML5 ise hem kullanıcı hem yazılım taraflı anlamlandırma kazanmak için hazır etiketlerle beraber duyurulmuştur. Bu sayede sayfa yapılarının/içeriklerin daha belirgin şekilde gruplandırılması amaçlanmıştır.
Kıyaslama yaparsak, Xml dili semantik yapılara daha yakındır. Geçmişte XML kullanan kişiler aşağıda örnekte de göreceğiniz üzere içerikleri zaten anlamlı şekilde sınıflayarak kullanıyordu.
<news_story piece_id="12345">
<journalist>Jim Smith</journalist>
<posted>23 November 2012</posted>
</news_story>
Xml’de sayfada, yazılımda kullanacağımız kısımları, içerik tipine göre gruplandırarak hem anlaşılmasının ve hem kullanımının kolaylaşması amaçlanır.Yukarıda ki XML belgesi, İçerik tiplerine göre ideal isimleri verilerek daha anlaşılabilir daha kullanışlı bir hale getirilmeye çalışılmıştır.
Yazının başında dediğimiz gibi HTML5, standart HTML kullanımından daha anlamlıdır. Yukarıda ki HTML örneğinden daha fazla bilgi sunmayı-özellikle yazılıma- amaçlamıştır. Bir html etiketiyle beraber Üstbilgi ve Alt bilgi sunulabilecek alanlar HTML5′in özelliklerinden biridir. Aynı zamanda yazılan HTML kodunun rolü ve amacı hakkında da bilgi verilebilmesini sağlar.
Aşağıda ki 2 HTML örneğinde HTML5 özellikleri sayesinde sayfada ki yerleşimi, yapısı hakkında bilgi verir.
<header>
<h1>Man in Window Outburst</h1>
</header>
<footer>
<p>The information on this website is nothing but lies.</p>
</footer>
Nav etiketi bağlantıların yer aldığı sayfa içeriğini temsil eder. Yani amacını açıklar.
<nav>
<ul>
<li><a href="news.php">News</a></li>
<li><a href="weather.php">Weather</a></li>
<li><a href="entertainment.php">Entertainment</a></li>
</ul>
</nav>
Section etiketi sayfa içerisinde kullanılan (Slider, Content,) alanların kapsayıcısı görevindedir. Genellikle içerisinde bir başlıkta barındırır.
<section id="overview">
<h2>What happened</h2>
<p>Police officers apprehended the man at 3.30pm...</p>
<img src="images/arrest.jpg" alt="The Arrest"/>
</section>
Yukarıdaki yeni HTML5 özellikleri gibi article, aside gibi çeşitli özellikler mevcut. Yeni HTML5 elemanlarının sadece bazıları anlamsallaşmayı daha da derinleştirir. Eski mantıkla bakacak olursak sayfalarımız çoğunlukla DIV’lerden oluşuyordu. Bu divlerin nasıl bir yapıda olmasını gerektiğini bizler CSS yazarak belirliyorduk. Ögenin yerleşimi, amacı hakkında örneğin Arama motorunun net bilgi alabileceği kısımlar yoktu.
HTML5′in koda pekte anlam kazandırmadığını düşünenler için, Sadece bu bir kaç eleman ve yazım standardı bile gerçekten akademik bir gözle bakıldığında önemli gelişmelere sebep oluyor. Daha köklü bir değişikliğin yapılmasına gerek kalmadan, varolan yapı üzerine inşaa edilerek hem geliştiriciyi kaybetmeden hem de basit kurallarla standartların oluşmasını sağlayarak web’in daha anlamlı bir yapıya bürünmesini amaçlıyor.
Yine’de ikna olmayanlar için göz atacak olursak :
- Searchability (Türkçeye Aranabilirlik olarak çevirdim o da pek anlamlı olmadığından orjinalini aldım.) İçeriklerin işaretlenmesi ve amaçlarına göre sınıflanması sonucu çeşitli Arama motorları, Örümcekler gibi diğer uygulamalar tarafından daha anlaşılabilir ve aranabilir bir yapıda olmasını sağlar.,
- Erişilebilirlik (Accessibility) Erişilebilirlik semantik biçimlendirmenin sağladığı önemli faydalardan biridir. Bu sayede örneğin görme problemi yaşayan bir kullanıcı için geliştirilen tarayıcı ve eklentilerin doğru çalışması sağlanır. Semantik işaretleme sayesinde bu kişilerin ihtiyaçlarına uygun bir şekilde varolan mesajın, olduğu gibi aktarılması da sağlanır. Yazılım yazdığımız kodu ne kadar iyi anlarsa o kadar doğru şekilde gösterir. Sonuç olarak web içeriği sadece görebilenler için değil engeli bulunan kişiler içinde kullanılabilir bir hale gelir.
- Consistency (Türkçeye Tutarlılık / Uyum olarak çevrilebilir. SlideShare’de karşılaştığım bir slaytta Tutarlılık olarak tanımlanmıştı. ) Orjinal makale de ki kısımla, araştırdığım anlatımlar birbiriyle pek uyuşmadı. Bu yüzden benim anladığım kadarıyla webdeki içeriklerin daha tutarlı-anlaşılabilir olmasının sağlanması için belirli bir tutarlılık standartının oluşturulması, daha parçacı öznitelik elemanlarıyla uyumlu bir yapı sağlanması (Örneğin rel=”friends”, rel=”nofollow” gibi) sonucunda içerikler, bilgisayarlar / yazılımlar tarafından çok daha DOĞRU anlaşılabilir hale gelecektir. -Bu kısmı tam olarak anlayamadığımdan çeviremedim, açıkcası daha önce semantik web ile alakalı okuduğum yazı ve dökümanlarda Consistency ayrı bir başlık olarak değilde Searchabilityle beraber kullanılıyordu.-
Semantik web ile amaçlanan yazılımların birbirlerini daha iyi anlaması ve bunun sonucunda kullanıcıya daha doğru bilgiler vermesi.Fakat buna karşın pratikte uygulanmasının daha çok zaman alacağı aşikar. Bu bakımdan bu tür gelişmeler amaçlanan koca bir Dünya için sadece bir adımdır. Yine de hayal ettiğimiz geleceğe yakınlaştıran önemli yeniliklerdir.
Yanlış tanımladığım ve ek olarak yazıdan çevirmek ve eklemek istediğiniz kısımları yorum ile belirtirseniz yazıya müdahale edebilirim.
Faydalanabileceğiniz kaynaklar :