HTML5 ve API Kullanımları -1

HTML5 ve API’ler

HTML5 özelleştirmelerinin WHATWG¹ ve W3C tarafından yürütülen farklı sürümler çerçevesinde ele alındığının farkında olduğunuzu varsayıyorum. WHATWG² tarafından sunulan özelleştirmeler W3C³ HTML5 geliştirmelerine ek özellikler barındırmakta. Aşağıda bahsi geçen API‘leri de bu özellikler çerçevesinde tanımlamak mümkün. Bahsi geçen API’ler HTML5 sürümü altında dokümante edilmeden önce de kullanılmaktaydı, dolayısıyla sadece HTML5 ile ilişkilendirilmeleri ve bu şekilde ele alınmaları doğru olmayacaktır. Bu sebeple başlığı HTML5 ve API şeklinde kullanmayı tercih ettim⁴.

Media API

Media API HTML5’in öne çıkan API’lerinden biri ve 2 önemli medya elementini içermekte; video ve audio. Medya elementlerinin kullanımlarını biliyoruz.

<video width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>

<audio controls>
  <source src="horse.ogg" type="audio/ogg">
  <source src="horse.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>

Media API¹ ⁵ ile bu elementleri play, pause, load, canPlayType gibi JavaScript metotları aracılığıyla kontrol edebilmekteyiz.

let videoElem = document.getElementById(“video”);
let playButton = document.getElementById(“playbutton”);
playButton.addEventListener(“click”, handlePlayButton, false);
layVideo();

async function playVideo() {
  try {
    await videoElem.play();
    playButton.classList.add("playing");
  } catch(err) {
    playButton.classList.remove("playing");
  }
}

function handlePlayButton() {
  if (videoElem.paused) {
    playVideo();
  } else {
    videoElem.pause();
    playButton.classList.remove("playing");
  }
}

Text Track API

Media API ile erişilebilir olarak video altyazısı, resim yazısı ve işaret dili gibi eklemeleri yapmamızı sağlar. Tanımlama track etiketiyle media tanımına iliştirilir. track etiketi eklenen metin kaynağı (src), içerik dili (srclang:en|tr…), dosyanın türü (king: subtitles|caption…), etiketi (label) özelliklerine sahiptir.

<video id="vTest" class="playr_video" controls preload="metadata">
  <source src="v/upc-tobymanley.theora.ogg" type="video/ogg">
  <source src="v/upc-tobymanley.mp4" type="video/mp4">
  <track label="English subtitles" kind="subtitles" srclang="en" src="upc-video-subtitles-en.vtt" default>
</video>

Drag and Drop

Adından da anlaşıldığı üzere, sürükle-bırak işlemlerini gerçekleştirmemizi sağlar. Bu işlem draggable özelliği true olan sayfa içi elemanlar olabileceği gibi tarayıcıya belirlenen özelliklerdeki dosyaların taşınması da olabilir. Aşağıdaki örnek kod parçacığı vasıtasıyla liste elemanlarını başka bir liste altına taşıyabiliriz.

#area {
  background: #f2f2f2;
  padding: 15px;
  & ul {
    padding: 20px;
    border: 2px dotted #acacac;
  }
}

<ul>
<li
  id="p1"
  draggable="true"
  ondragstart="dragstart_handler(event)">Apple</li>
<li
  id="p2"
  draggable="true"
  ondragstart="dragstart_handler(event)">Banana</li>
<li
  id="p3"
  draggable="true"
  ondragstart="dragstart_handler(event)">Orange</li>
</ul>  
<div id="area"><strong>My favorite fruits</strong>
<ul
  id="target"
  ondrop="drop_handler(event)"
  ondragover="dragover_handler(event)">
</ul>
</div>

function dragstart_handler(ev) {
 ev.dataTransfer.setData("application/my-app", ev.target.id);
 ev.dataTransfer.dropEffect = "move";
}
function dragover_handler(ev) {
 ev.preventDefault();
 ev.dataTransfer.dropEffect = "move"
}
function drop_handler(ev) {
 ev.preventDefault();
 const data = ev.dataTransfer.getData("application/my-app");
 ev.target.appendChild(document.getElementById(data));
}

Offline Web Applications / Application Cache

Native uygulamalar ile web uygulamaları arasındaki çizginin her geçen zaman biraz daha bulanıklaşmakta. Bu durum elbette kullanını deneyimi sürecine de yansımakta. Uygulamaların sunduğu çevrimdışı kullanılabilirlik bu sürecin önemli katkılarından biri. Offline Web Applications/Application Cache uygulama önbelleği sayesinde bize çevrimdışı erişilebilir yetenekler sunar. Bu işlem uygulama için tanımlanan bir manifest dosyası ile tanımlanır. Dosya uygulamanın çevrimdışı çalışabilmesi için gereken dosyaların bir listesini barındırır. Tarayıcı burada belirtilen dosyaların kopyasını çevrimdışı kullanılmak üzere saklar. Kullanıcının etkinliği sürecinde ağ erişiminde bir problem yaşanırsa tarayıcı sakladığı kopyalar üzerinden süreci devam ettirir⁶ ⁷.

CACHE MANIFEST
clock1.html
clock.css
clock.js

/* clock.css */
output { font: 2em sans-serif; }

/* clock.js */
setInterval(function () {
    document.getElementById('clock').value = new Date();
}, 1000);

<!DOCTYPE HTML>
<!-- clock1.html -->
<html manifest="clock.appcache">
 <head>
  <meta charset="utf-8">
  <title>Clock</title>
  <script src="clock.js"></script>
  <link rel="stylesheet" href="clock.css">
 </head>
 <body>
  <p>The time is: <output id="clock"></output></p>
 </body>
</html>

History API

İnternet tarayıcılarında en sık kullanılan tuşlardan birinin gezinti geçmişinde hareket etmemizi sağlayan geri tuşu (ya da backspace) olduğunu söyleyebiliriz. JavaScript ile de history.back() ve history.forward() metotlarını kullanabilmekteyiz. Ancak, Ajax gibi teknikler bu özelliğin işlevselliğini sekteye uğratabilmektedir. HTML5 bu gibi olumsuz durumlara karşın History API özelinde önemli yetenekler sunar².

HTML5, History API öncesinde geçmiş yönetimi ileri-geri haraket ile kullanıcının ilgili oturumdaki geçmişinin uzunluğuna bağlı olarak işlenmekteydi. Ancak, HTML5 ile kullanıcı gezinti geçmişine giriş ekleme ve kaldırma, sayfa durumunu tutulan veriler ile geri yükleme, URL’i sayfa yenilemeden güncel tutma gibi yeni özelliklerle müdahale edebilmekteyiz.

Protocol Handler Registration

Bu API ile siteleri kendilerini belirli şemalar için işleyici olarak kaydedebilmekteler. Örnek vermek gerekirse; bitcoin, geo, magnet, mailto, sms, ssh, tel, webcal öne çıkan güvenli şema tanımlarından bazıları.

window.navigator.registerProtocolHandler(protocol, url, title);

Örneğin, bir web/mobil uygulamanız veya servisiniz var ve kullanıcılarınıza farklı mecralardan çeşitli bildirimler / onay mesajları gönderiyorsunuz. Bu mesajların içerisine bir şema yerleştirerek kullanıcının bir bağlantıyı tıklamasında doğrudan uygulamanızın belirttiğiniz URL ile birlikte açılmasını sağlayabilirsiniz.

ceaksan.com için cea adında bir protokol oluşturarak websitesi içerisinde, e-posta bültenlerinde veya sosyal medya paylaşımlarımda site içi bağlantıları cea:google+analytics şeklinde vermek istediğimi düşünelim. Kullanıcı bu bağlantıyı tıkladığında arama özelliğine yönlendireceğim. Bu durumda tanımlamam şu şekilde olacaktır.

window.navigator.registerProtocolHandler(cea, "https://ceaksan.com/search/query:%s", "CEAKSAN");

Elbette bu işlemin başarılı bir şekilde çalışabilmesi için bağlantıyı tıklayan kullanıcının daha önce websitemi ziyaret etmiş ve şema yapısını kabul etmiş olması gerekir. Aksi durumda kullanıcı bağlantıyı tıkladığında tarayıcıya ait 404 hata sayfasını görüntüleyecektir⁴.

Sonuç Olarak

Tüm API’leri tek bir yazı altında açıklamak yerine W3C ve WHATWG bağlamlarında bölümlendirdim. Bu yazı ilk bölümü oluşturmakta. Diğer yazıda HTML5 API anlatımlarına Canvas 2D Context, Microdata, Web Workers, Web Sockets gibi özelliklere değineceğim. İçerik ilginizi çektiyse, aşağıda yer alan bağlantıları ayrıca incelemenizi öneririm. Ek olarak, HTML5 temelinde kullanılabilecek diğer özellikler için MDN web docs⁸ ⁵ sayfasını da göz önünde bulundurabilirsiniz.