HTML5 “track” Elementine Toplu Bir Bakış

Günümüzde, HTML5 ile birlikte gelen video ve ses dosyalarında önemli bir sayıda artış mevcut. Google’a baktığımızda internet aramalarının yaklaşık %40‘ı gibi bir değere ulaşması da bunun bi’ göstergesi. Bu yazımda HTML5 ile birlikte gelen <track> elementi ile birlikte gelen, video dosyalarınıza altyazı ekleme gibi önemli bir işlevden bahsedeceğim. Önemli diyorum çünkü, video ile SEO konusunun yıldızları bu noktada barışıyor.

“<track>” Elementine Genel Bakış

<track> elementi, web sitenizde video dosyası oynatımı sırasında gösterilecek herhangi bir text / yazı’yı tanımlamamızı sağlıyor. Bu text / yazı; altyazı, içerik, açıklama, bölüm veya metadata bilgileri içeriyor olabilir. Bunları içerirken tahmin edersiniz ki <video> veya <audio> tag’leri arasında yer alıyor. Doğal olarak bu elementimizi </track> olarak kapatma ihtiyacımızın bulunmaması da genel özelliklerinden birisi. Kısa bir örnek verecek olursam:

[code lang=”html”]
<video width="640" height="320" controls="controls">
<source src="video.mp4" type="video/mp4">
<source src="video.ogg" type="video/ogg">
<track src="altyazi.srt" kind="subtitles" srclang="tr" label="Turkish_subs">
</video>
[/code]

“src” Attribute’u

Bu attribute tahmin edebileceğiniz üzere, video veya ses dosyalarınıza entegre etmek istediğiniz dosyanın yolunu belirteeceğiniz attribute ve doğal olarak da gerekli.

[code lang=”html”]
<track src="altyazi.srt">
[/code]

“srclang” Attribute’u

srclang, eklediğiniz altyazının dilini belirtebileceğiniz bi’ attribute. Eğer “kind” attribute’unda “subtitle” kullanılmışsa ( birazdan aşağıda değineceğiz ) kesinlikle doldurulması gereken alanlardan birisi. Eklediğiniz text / yazı dosyasının dili İngilizce ise “en”, Türkçe ise “tr” olarak kullanabilir. Diğer dilleri de kontrol edebilirsiniz.

[code lang=”html”]
<track src="video_subtitles.srt" kind="subtitles" srclang="tr">
[/code]

“kind” Attribute’u

kind attribute’u ile eklediğimiz text / yazı dosyasının türünü belirtmeye yarıyor. Aşağıda bunları sıralayalım:

subtitles

Video veya ses dosyasında geçen konuşmaların çevirisini sunar. srclang attribute’u ile kullanılmalıdır.

[code lang=”html”]
<track src="video_subtitles.srt" kind="subtitles" srclang="tr">
[/code]

captions

Video dosyasında bi’ brief verirken kullanılır.

[code lang=”html”]
<track src="video_captions.srt" kind="captions">
[/code]

descriptions

Video veya ses dosyası içeriğini açıklarken kullanılır. Video dosyasına erişilemediği zaman bu gösterilir.

[code lang=”html”]
<track src="video_descriptions.srt" kind="descriptions">
[/code]

metadata

[code lang=”html”]
<track src="video_metadata.srt" kind="metadata">
[/code]

chapters

Video veya ses dosyasında bölüm başlığı gibi durumları belirtirken kullanılır.

[code lang=”html”]
<track src="video_chapters.srt" kind="chapters">   
[/code]

“label” Attribute’u

Bu attribute video veya ses dosyanızda kullanmak istediğiniz text / dosya ‘nın başlığını belirler. “label” attribute’u kullandığınız zaman boş bırakmamanız gerekiyor, eğer ki bırakırsanız kod hatası almanız mümkün.

[code lang=”html”]
<track src="video_subtitles.srt" kind="subtitles" srclang="tr" label="Turkce_altyazi">
[/code]

“default” Attribute’u

Birden fazla <track> elementi kullanıldığında, default olarak neyi seçeceğimizi belirtiriz.

[code lang=”html”]
<track kind="subtitles" src="video_subtitles_tr.srt" srclang="tr" default>
<track kind="subtitles" src="video_subtitles_en.srt" srclang="en">
<track kind="subtitles" src="video_subtitles_ja.srt" srclang="ja">
[/code]

Yukarıda bahsettimiz bütün attribute ve değerlerini tek bir örnek üzerinde toplamak istersek:

[code lang=”html”]
<video src="video.ogv">
  <source src="video.mp4" type="video/mp4">
  <source src="video.ogg" type="video/ogg">
   <track kind="captions" src="video_captions.srt" srclang="tr">
   <track kind="descriptions" src="video_desciptions.srt" srclang="tr">
   <track kind="chapters" src="video_chapters.srt" srclang="tr">
   <track kind="subtitles" src="video_subtitles_tr.srt" srclang="tr" default>
   <track kind="subtitles" src="video_subtitles_en.srt" srclang="en">
   <track kind="metadata" src="video_metadata1.srt" srclang="tr" label="Metadata 1">
   <track kind="metadata" src="video_metadata2.srt" srclang="tr" label="Metadata 2">
</video>
[/code]

“<track>” Elementi ve SEO Değeri

Video ve ses dosyaları hakkında bilgi sahibi olamayan arama motorları artık <track> elementi sayesinde video veya ses dosyasının içeriğinin ne olduğunu görebiliyor duruma geçti. Bu da doğal olarak SEO konusunda önemli yerlere gelinebileceğinin kapısını araladı. Bunların yanında:

  • Video ve ses dosyalarındaki cümle ve kelimeleri örümcekler rahat rahat gezip video hakkında bilgi sahibi olacaklar.
  • Videonun spesifik bir yerinde linklemeyi okuyup algılayabilecekler.
  • Altyazı ve captionslar yardımıyla kullanıcı deneyimindeki artış.
  • Arama sonuçlarında video tumbnail’leri.

gibi bir çok artıyı da beraberinde getiriyor. Ek olarak video, altyazı ve SEO üçlüsü hakkında daha fazla bilgi sahibi olabilirsiniz.

 

“<track>” Elementi ve Browser Desteği

Hepinizin merak ettiği bu sorunun cevabı ise:

  • Chrome
  • Firefox 31+
  • IE10+
  • Safari 6+
  • Opera 15+

CSS ile Dikey Ortalama

3 satır CSS kodu ile herhangi bir elementi dikey alan içerisinde ortalamak kim istemez ki ? Yüksekliği belirlenmemiş herhagi bir alan içerisine, herhangi bir nesneyi “transform: translateY” yardımıyla ortalayabiliyoruz. “Transform” CSS değeri her ne kadar bir elementin rotasyonunu değiştirmek veya scale etmek için kullanılsa da “translateY” ile elementlerin dikey değerini düzenleyebiliyoruz.

Aşağıdaki kod bloğu yardımıyla dikey ortalamayı yapabilir, hatta IE9’da bile çalıştırabilirsiniz:

[code lang=”css”]
.element {
position: relative;
top: 50%;
transform: translateY(-50%);
}
[/code]

Kurcalamak isteyenler için de :

See the Pen Vertical center with only 3 lines of CSS by Ibrahim Nergiz (@PhyesiX) on CodePen.

HTML5 ile FileReader ( File API )

HTML5 ile yeni gelen özelliklerden birisi de lokaldeki dosyalarla etkileşim içerisine girebilmemiz ve bunu da File API ile yapabilmemiz olsa gerek. File API ile gelen özelliklerden birkaçından bahsetmek istersem; herhangi bir imajın önizlemesini sunucuya göndermeden anında görebilmek, dosya içeriğini ( düzenlenme tarihi, ismi, boyutu … vs ) görebilmek gibi bir çok şeye izin veriyor. Güncel browserın desteği bulunmakla birlikte bu özelliği:

[code lang=”js”]
if (window.File &amp;&amp; window.FileReader &amp;&amp; window.FileList &amp;&amp; window.Blob) {
alert(‘File API destekleniyor.’);
} else {
alert(‘File API desteklenmiyor.’);
}
[/code]

Yukarıdaki kod bloğu yardımıyla kullanıcının browserinin File API destekleyip desteklemediğini öğrenebiliriz.

Form içerisinde Input Kullanımı

Dosya seçimi için form içerisinde standart olarak  <input type=”file” />  kod bloğunu kullanıyoruz. Javascript seçilen dosyaların listesini FileList adı altında dönüyor. Aşağıda da ‘multiple’ yani çoklu dosya seçimi olan bir form örneğini görebilirsiniz:

[code lang=”html”]
<input type="file" id="files" name="files[]" multiple />
<output id="list"></output>
[/code]

[code lang=”js”]
<script>
function handleFileSelect(evt) {
var files = evt.target.files;

var output = [];
for (var i = 0, f; f = files[i]; i++) {
output.push(‘<li><strong>’, escape(f.name), ‘</strong> (‘, f.type || ‘n/a’, ‘) – ‘,
f.size, ‘ byte, son düzenlenme: ‘,
f.lastModifiedDate ? f.lastModifiedDate.toLocaleDateString() : ‘n/a’,
‘</li>’);
}
document.getElementById(‘list’).innerHTML = ‘<ul>’ + output.join(”) + ‘</ul>’;
}

document.getElementById(‘files’).addEventListener(‘change’, handleFileSelect, false);
</script>
[/code]

Canlı örneği ile sonuçları görebilirsiniz:

See the Pen BLuln by Ibrahim Nergiz (@PhyesiX) on CodePen.

Form içerisinde Sürükle Bırak

Aşağıda da browser desteği ile sunulan drag and drop ( sürükle bırak ) yönetmiyle, form içerisine dosyalarınızı sürükleyerek oluşturduğunuz bir form:

[code lang=”html”]
<div id="drop_zone">Sürükle Bırak</div>
<output id="list"></output>
[/code]

[code lang=”js”]
<script>
function handleFileSelect(evt) {
evt.stopPropagation();
evt.preventDefault();

var files = evt.dataTransfer.files; // FileList object.

// files is a FileList of File objects. List some properties.
var output = [];
for (var i = 0, f; f = files[i]; i++) {
output.push(‘<li><strong>’, escape(f.name), ‘</strong> (‘, f.type || ‘n/a’, ‘) – ‘,
f.size, ‘ bytes, last modified: ‘,
f.lastModifiedDate ? f.lastModifiedDate.toLocaleDateString() : ‘n/a’,
‘</li>’);
}
document.getElementById(‘list’).innerHTML = ‘<ul>’ + output.join(”) + ‘</ul>’;
}

function handleDragOver(evt) {
evt.stopPropagation();
evt.preventDefault();
evt.dataTransfer.dropEffect = ‘copy’; // Explicitly show this is a copy.
}

// Setup the dnd listeners.
var dropZone = document.getElementById(‘drop_zone’);
dropZone.addEventListener(‘dragover’, handleDragOver, false);
dropZone.addEventListener(‘drop’, handleFileSelect, false);
</script>
[/code]

Canlı örneği ile sonuçları görebilirsiniz: See the Pen qCJxD by Ibrahim Nergiz (@PhyesiX) on CodePen.

Dosyaları Okumak

En güzel bölüm de burası. Hani anında önizleme özelliği var ya … Formumuzda bulunan input yardımıyla dosyamızıı seçip FileReader yardımıyla objeyi bellek içerisinden okuyabiliyoruz. FileReader komutuyla dosya özelliğini okumak için 4 farklı şekil mevcut:

  • FileReader.readAsBinaryString : Dosyayı binary ile görüntüler
  • FileReader.readAsText : Dosyayı text olarak okur. Text ‘UTF-8’ olarak sunulur.
  • FileReader.readAsDataURL: dataURL’i sunar.
  • FileReader.readAsArrayBuffer: ArrayBuffer olarak sunar.

Bunların yanında onloadstart, onprogress, onload, onabort, onerror ve onloadend gibi seçenekler yardımıyla da dosyamızın durumunu görebiliriz. Durumuna göre de fonksiyonlar tetikleyebiliriz … Aşağıdaki kod bloğunda seçilen imajın: FileReader.readAsDataURL yardımıyla url’ini alıp, img src içerisine yazdıralım ve sonucu aşağıda canlı canlı görelim:

[code lang=”html”]
<input type="file" id="files" name="files[]" multiple />
<output id="list"></output>
[/code]

[code lang=”js”]
<script>
function handleFileSelect(evt) {
var files = evt.target.files; // FileList object

// Loop through the FileList and render image files as thumbnails.
for (var i = 0, f; f = files[i]; i++) {

// Only process image files.
if (!f.type.match(‘image.*’)) {
continue;
}

var reader = new FileReader();

// Closure to capture the file information.
reader.onload = (function(theFile) {
return function(e) {
// Render thumbnail.
var span = document.createElement(‘span’);
span.innerHTML = [‘<img class="thumb" src="’, e.target.result,
‘" title="’, escape(theFile.name), ‘"/>’].join(”);
document.getElementById(‘list’).insertBefore(span, null);
};
})(f);

// Read in the image file as a data URL.
reader.readAsDataURL(f);
}
}

document.getElementById(‘files’).addEventListener(‘change’, handleFileSelect, false);
</script>
[/code]

Canlı örnek için:

See the Pen tkesc by Ibrahim Nergiz (@PhyesiX) on CodePen.

Font-face Kullanımında Türkçe Karakter Sorunu

Front-end Developer’lar arasında @font-face kullanımını bilmeyen yoktur sanırım. Önceleri sistem fontlarına bağlı olarak çıkan tasarımlar ve front-end development süreçleri, günümüzde yerine hayalimizdeki hemen hemen her şeyi tasarlayacak ve kodlayacak haline geldi. İşin kötü yanı da biz Türk tasarım ve yazılım geliştiricilerinin font seçeneğinin pek bulunmaması. Dünya çapında popüler olan çoğu fontun Türkçe’si bulunabilir düzeydeyken kimilerini bulmaksa işkence haline dönüşüyor. Hadi bulduk diyelim, tasarımda işledik diyelim Front-end tarafında @font-face kullanımında Türkçe karakterlerin bozuk çıkması insanı çileden çıkarıyor.

Tasarımcının kullandığı font, Photoshop’da düzgün, tüm Türkçe karakterleri sorunsuz gözükürken, @font-face‘e çevrildiği anda bu fontlar patlıyordu. İşte tam bu noktada aslında sorunun fontlardan değil de bana bu çıktıyı sunan servis kaynaklı olduğunu düşündüm ki gerçekten de öyleydi. Her ne kadar alternatifleri çoğalmaya başlasa da @font-face generator adı altında “Fontsquirrel” iyi iş çıkarıyor. İşte bu anlatımı da “fontsquirrel” üzerinden yapacağım.

  1. Fontlarımızı seçtikten sonra “expert” modu seçiyoruz.
  2. Font formats bölümünden “svg” yi işaretliyoruz.
  3.  Subsetting bölümünden “Subsetting..” seçiyoruz.
  4. Language bölümünden “Turkish” i seçiyoruz.
  5. Single Characters bölümünden “ç,Ç,ş,Ş,ı,İ,ğ,Ğ,ü,Ü,ö,Ö,ü,Üharflerimizi ekliyoruz

Sonrasında da bilgisayarımıza dosyalarımızı yüklüyoruz. Bu kadar.

CSS Loading Spinner

Bir zamanlar, “yükleniyor” adı altında öyle çok gif yapıldı ki. Gerçi baktığımızda hala bu imajları kullanıyoruz. Geçenlerde yaptığım sayfa için bu imajlardan kullanaktım. Proje içerisine baktığımda bir çok imajın olduğunu, bunlardan kurtulmak gerektiğini farkettim. Günümüz CSS teknolojisi, :before ve :after elementleri yardımıyla öyle güzel şeyler yapılabiliyor ki.

İşte sadece CSS’den oluşan “yükleniyor” animasyonumuz:

See the Pen aqcip by Ibrahim Nergiz (@PhyesiX) on CodePen.

Diğer örneklere de bakacak olursak:

  • http://codepen.io/adonisk/pen/IAzbo
  • http://codepen.io/adonisk/pen/oJLge