Ağu.20

HTML5.1 ile Gelen Yenilikler

2014 yılında HTML5’in çıkması ile birlikte web dünyasının yeni standartlarının temelleri atılmış oldu. Bu süre zarfında genellikle API’ler tarafında geliştirmeler yapılmış olmakla birlikte, Kasım 2016’da da HTMl5.1 minor sürümü ile ufak tefek yenilikler geldi. 2017 sonlarına doğru da HTML5.2 taslağının sunulması bekleniyor.

Şimdi HTMl5.1 ile gelen özelliklerin başlıca ve önemli olanlarını inceleyelim…

HTML 5.1’in özellikleri her tarayıcıda çalışmayabilir. Yeni özellikler bütün tarayıcılarda sorunsuz olarak desteklendiği zaman kullanmanız gerekir. Test amacı ile Mozilla Firefox’un en güncel versiyonunu kullanınız.

Responsive Tasarım için img Etiketine Birden Fazla Kaynak Tanımlama

Responsive tasarımlarda normalde bir img etiketini istersek Bootstrap gibi bir CSS framework’ü ile esnek bir hale getirebiliriz. Ancak bu durumda resmin kaynağı, yani URL’i değişmez, sadece sayfaya göre kendini esnetir. Adaptive tasarım modelinde ise istersek @media sorgularını kullanıp, eğer resmi arkaplan gibi bir tasarımda kullanıyorsak, çeşitli ekran çözünürlüklerine göre farklı resim yüklemeleri yapabiliriz. Hatta JavaScript ile de ekran boyutuna göre resmin URL’ini yeniden düzenleyip, farklı resimler yükleyebiliriz. Ancak bu yapılan işlemlerin her biri fazladan bir yük olacak, kod kalabalığı oluşturacak. HTML5.1’de ise, içinde srcset attribute’ü ile ekran ölçülerini sorgularımızı tanımlayıp kaynakları farklı adreslerden çekebiliyoruz.

<img srcset="barakamon-3.jpg 1024w, barakamon-2.jpg 640w, barakamon-1.jpg 320w" alt="Barakamon">

img örneğimizde srcset içinde , (virgül) operatörünü kullanarak 3 farklı ölçü için resim kaynağı tanımladık. Bu tanımlamada kalıp olarak ilk URL, sonra da ekran genişliği w (width) olarak belirtildi. Ekran boyutu 320w’den büyükse barakamon-1.jpg, 640w’den büyükse barakamon-2.jpg, 1024w’den daha da büyükse barakamon-3.jpg gösterilecek. Aşağıdaki ekran görüntülerini inceleyin…

img örneğimizde srcset içinde , (virgül) operatörünü kullanarak 3 farklı ölçü için resim kaynağı tanımladık. Bu tanımlamada kalıp olarak ilk URL, sonra da ekran genişliği w (width) olarak belirtildi. Ekran boyutu 320w’den büyükse barakamon-1.jpg, 640w’den büyükse barakamon-2.jpg, 1024w’den daha da büyükse barakamon-3.jpg gösterilecek. Aşağıdaki ekran görüntülerini inceleyin…

İç İçe Header ve Footer

Semantic Web konusunu işlerken header ve footer etiketlerinden bahsetmiştik. Bunlar, bir semantic yapıdaki şablonda birer tane olmalıydı. Çünkü bir sayfada bir başlık ve bir alt kısım bulunması mantıklı görünüyor. Ancak iç içe içerikler oluşturulduğunda her birinin header ve footer’ı ayrı ayrı tanımlanabilir. İçerikleri birbirinden ayırmak için de aside etiketi kullanılmaktadır. Aşağıdaki örneği inceleyin.

<article>
    <header>
      <h1>HTML5 Kitabı Yazar</h1>
          <aside>
                <header>
                    <h2>Yazar hakkında</h2>
                    <p><a href="mailto:ugurgelisken@gmail.com">E-posta</a>
	    </header>
	    <img src="ugurgelisken.jpg" alt="Uğur GELİŞKEN">
	    <p>Daha önce de uzmanlık alanı olan Adobe yazılımları konusunda kitapları ve eğitim setleri ile tanınmış olan yazar; 2013-2014-2015 yıllarında Adobe Community Professional programında, 8 farklı uzmanlık alanı ile (Web Design, Graphic Design...</p>
          </aside>
    </header>
    <p>Yazarın başlıca kitapları:</p>
    <ul>
        <li>Mobil Oyun Tasarımı ve Programlama</li>
        <li>Yeni Nesil Tekniklerle Web Tasarımı ve Web Programlama</li>
    </ul>
</article>

Sıfır Genişlik / Yükseklik Değerlerinde Resimlerin Oluşturulabilmesi

img etiketi ile gösterilen resim dosyalarının genişlik ve yüksekliklerine artık 0 değeri verilebiliyor.

<img src="takamura.jpg" width="0" height="0" />

İçi Boş Liste Elemanı(

option etiketli select, output ve datalist ile birlikte liste oluşturmak için kullanılan alt etikettir. Bir listede boş eleman oluşturmanız gerekebilir. Yani herhangi bir value veya text’i olmayan liste elemanı. İsterseniz liste elemanının metin alanını tanımlayabilirsiniz. Bu özellik, genellikle formlarda o açılır listenin ne işe yaradığını tanımlamak için kullanılan bir iki kelimelik içerik barındırır. Mesela; “Yaş aralığınızı seçiniz” gibi… Örneğimizde iki adet select ile örnek yapalım. Birincisinde tamamen değer girmeyelim, diğerinde de açıklama metni girelim.

<select>
  <option></option>
  <option value="1">1</option>
  <option value="2">2</option>
</select>
<select>
  <option>Lütfen Bir Sayı Seçiniz</option>
  <option value="1">1</option>
  <option value="2">2</option>
</select>

figcaption Elementinin Serbest Kullanımı

HTML5 ile gelen semantic etiketlerden biri olan figure etiketi içinde birlikte kullanılan

, resim dosyası için bir açıklama başlığı tanımlamak için ya en başta ya da en sonda kullanılırdı. Ancak HTML5.1’de artık serbest bırakılmış, yani istediğimiz yerde kullanabiliyoruz.

<figure>
     <img src="yoshida.jpg" alt="Utsuro">
     <figcaption>Utsuro, Oboro'nun görevine başlamasından önce Tenshouin Naraku'nun kurucusu ve ilk lideridir. </figcaption>
     <p>O, Yoshida Shouyou'nun orijinal kimliğidir ve şimdi Tendoshu'nun bir parçasıdır. </p>
</figure>

Sağ Tuş Menüsüne Buton Ekleme

HTML5.1 ile artık herhangi bir DOM elemanına Mouse ile tıklandığında açılacak olan menüde buton ekleyebiliriz. Mesela bir etiketi düşünün. Resmin üzerinde sağ tıklanınca bir takım butonlar çıksın ve resim ile ilgili düzenlemeler yapabilelim.

Yapacağımız düzenlemelerde aşağıdaki şekilde bir menü hiyerarşisi olsun.

Resmi Kaldır
Resmi Boyutlandır > %50, %25

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
</head>
<body>
     <img contextmenu="resimMenu" id="resim" src="katsura.jpg" />
     <menu type="context" id="resimMenu">
          <menu label="Resmi Boyutlandır..." icon="olculendir.png" >
               <menuitem label="50%" onclick="boyutlandir(50)" ></menuitem>
               <menuitem label="25%" onclick="boyutlandir(25)" ></menuitem>
          </menu>
          <menuitem label="Resmi Kaldır" icon="kaldir.png" onclick="resmiKaldir()" > </menuitem>
     </menu>
</body>
<script type="text/javascript">	
	function resmiKaldir(){
	   document.getElementById('resim').parentNode.removeChild(resim);
	}
	function boyutlandir(oran){
	   var resimElementi = document.getElementById('resim');
	   resimElementi.style.width = oran+"%";
	   resimElementi.style.height = oran+"%";
	}
</script>
</html>

Yazdığımız kodlarda ilk olarak sağ tuş menüsünün (contexmenu), oluşturulacağı elemente contextmenu attribute’ünü ekleyip bir isim (resimMenu) tanımladık. Böylelikle o element üzerinde sağ tıklandığında menüde ek butonlar açılacağını belirtmiş olduk. Açılacak olan menüyü de menu etiketleri ile tanımladık. Kök menu etiketine id olarak, hangi elementte sağ tuş menüsü çıkacaksa o elementin contextmenu attribute değeri ile eşleştirdik, yani aynı resimMenu değerini verdik. Menü içinde de menuitem /menuitem ile alt butonları oluşturduk. menu ve menuitem için ortak olarak label özelliğine butonun görünen ismini, icon özelliğine de png formatlı ikon görsellerimizin yolunu verdik. onclick ile de bu butonlara tıklanınca çalıştırılacak olan JavaScript fonksiyonlarını yazdık.

Ters Link (reverse) Bağlantısı Kullanma

Aslında HTML4’te kullanılan, HTML5’te kaldırılmış ve HTML5.1’de tekrar geliştiricilerin talepleri doğrultusunda geri gelmiş bir özelliktir. Artık link ve a etiketlerinde kullanımında rev (reverse, ters) attribute’ü tekrar kullanılabiliyor. Bu attribute, rel (relative) attribute’ünün tersi anlamındadır. İkisinin de temel görevi, içinde bulunduğu belge ile yüklenecek olan belgenin ilişkilendirme durumunu belirlemektir. Tarayıcılar ve arama motorları için önemli bir özelliktir.

Mesela bir ürünler sayfamız olsun ev alt ürün sayfasında bir link tanımlaması yapalım.

<link rev="parent" href="kategoriler.html">

Bu tanımlama ile içinde yazılı olan sayfanın bir üst sayfasının (parent) kategoriler.html olduğunu belirttik.

CSS ve JavaScript Yüklemelerinde Kriptografi Kullanma (XSS Koruma)

Content Security Policy ile birlikte kullanılan bir sistemdir. CSP, sayfanın hangi kaynaklar tarafından yükleneceğini belirleyen ve hangi kaynakları da sayfanın yükleyeceğini belirleyen bir yetkilendirme sistemidir. Böylelikle XSS saldırılarına karşı sayfayı korunaklı bir hale getirir. Mesela font’ların hangi sayfadan yükleneceği, resimlerin hangi kaynaktan çekilebileceği gibi yetkiler olabilir. Eğer sayfada herhangi bir CSP tanımlaması yapılmamışsa, içeriklerde herhangi bir kısıtlama da uygulanmaz. CSP tarafından üretilen bir uniq key ile script’lerin çalıştırılabilmesi için HTML5.1’de yenilik getirilmiştir.

<script nonce=”as324asc145ksf”>
…
</script>

Oltalama (Phishing) Saldırılarına Karşı İçerikleri Ayırma

Bir güvenlik önlemi olarak geliştirilmiştir. HTML5.1’de a ve area etiketlerinde target=”_blank” olarak verilip yeni bir sayfa açıldığında, üst sayfa olan _parent’ta bir işlem yapmasını rel=”noopener” ile sağlanmıştır. Eğer harici bir sayfaya link verilecekse, mutlaka bu sistemle ana sayfa koruma altına alınmalıdır.

<a href=”https://www.ugurgelisken.com” target=”_blank” rel=”noopener” > Tıkla </a>
İçeriği paylaş:
  • facebook
  • twitter

Leave a comment

Yorum