HTML5 API’leri, mobil uygulamalarda olup web sayfalarında kullanamadığımız özellikleri API olarak ekleyerek eksikleri gideriyor. Bunlardan bir tanesi de Web Notification API. Mobil uygulamlarda kullanıcıya anlık bildirimler göndermek için kullanılan bilgileri bu API sayesinde web sayfalarımızdan da yapabiliyoruz.

HTML5 ve CSS3 özellikleri hala geliştirilmekte olduğu için zamanla değişim gösterebiliyor. Bu özellikte ilk çıktıktan sonra güncellendi ve 19 Nisan 2014’de onaylanarak kararlı hale geldi.

Kullanıcıyı bilgilendirmek için çok güzel bir yöntem.

Bu işi nasıl yaptığımıza bakalım.

Tarayıcı desteği kontrolü

İlk olarak kullanıcının tarayıcısı bu özelliği desteliyormu kontrolünü yapalım.

// İlk kontrol tarayıcının bu özelliği destekleyip desteklemediğini sorgulamak
if (!("Notification" in window)) {
  alert("Bu tarayıcı web bilgilendirme özelliğini desteklemiyor.");
}

Burada uyarı vermek yerine desteklemeyenler için çözüm üreten sistemler entegre edilebilir. https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-Browser-Polyfills#notification-api

Kullanıcıdan izin alma kısmı

HTML5’in yeni API’lerinde bir özelliği kullanıcıya sorupta kullanma pratiği yaygınlaşıyor. HTML5 Bildirimlerinde de aynı durum söz konusu. Kullanıcıya bildirim almak istermisin diye soralım.

// Daha önce kullanıcı izin verdi ise
else if (Notification.permission === "granted") {
    // Bilgilendirme popup'ını çıkaralım.
    var notification = new Notification("Merhaba dünya!");
}

Eğer onay yoksa tekrar onay isteme ve bildirim oluşturma kısmı

// Eğer onay yoksa
else if (Notification.permission !== 'denied') {
// Kullanıcıdan onay ise
Notification.requestPermission(function (permission) {
  // Kullanıcı onaylamadı ise tekrar soralım
  if (permission === "granted") {
    // onaylarsa bilgilendirme popup'ı aç
    var notification = new Notification("Merhaba dünya!");
  }
});
}

Kod kısmı bu kadar basit. Daha detaylı bildirimlerde oluşturabiliyoruz.

Başlık, içerik, ikon, etiketleme, metin başlangıç yönü ve dil seçeneklerini tanımlayabiliyoruz.

HTML5 bilgilendirme

Tarayıcı Desteği

Chrome explorer Firefox
+ - +

Mobil Tarayıcılar

Chrome Mobil Safari Samsung Internet
+ + +

Mobil tarafında sadece Firefox(onunda desteği az) destekliyor. Diğer mobil tarayıcılar da desteklerse süper olacaktır.

Kaynaklar

Herkesin dilinde olan responsive web tasarımı nedir? Farklı çeviri önerileri var, ben Uyumlu web çevirisini beğendim ve bundan sonra Uyumlu web diye kullanacağım.

Uyumlu web; kısaca farklı çözünürlükler için tasarlanan ve kodlanan web sayfalarına denebilir. Burada şöyle bir yanlış anlaşılma var; farklı araçlar için değil farklı çözünürlükler için sayfa üretmeye uyumlu web diyoruz.

Uyumlu web çıkış noktası mobil cihazların yaygınlaşması ile oldu. Aslında mobil cihaz değilde akıllı telefonların yaygınlaşması ile ihtiyaç haline geldi desek daha doğru olacak. Çünkü ilk nesil mobil araçlar pekte internete girilesi telefonlar değildi. Zamanında Siemens S 35(Bende vardı :) ile internette dolaşmak bir hayaldi. Ne zamanki bilgisayara benzer mobil araçlar çıkmaya başladı, yani telefonlar akıllandı, işte o zaman web siteleri için bir ihtiyaç doğdu. Artık insanlar bir çok ihtiyacını mobil aracı(akıllı telefon, tablet vs.) ile hallediyor.

Sahibinden.com sitesine mobil araçlar ile giren kullanıcı oranı %32(Aralık 2014 verileri) civarında. Bu siteyi gezenlerin neredeyse 1/3’ünün mobil üzerinden geldiğini gösteriyor.

Durum böyle olunca masaüstü için tasarlanan ve kodlanan web siteleri mobil cihazlar için nasıl uyumlu hale getiririz konusuna yoğunlaşan kod yazarlarının imdadına uyumlu web yetişti. Her ne kadar mobil uygulamanın yerini tutmuyor diyenler olsa da, bence gayette tutar. Yeter ki baştan iyi projelendirilip kodlansın.

Bir arada masaüstü için farklı mobil için farklı site tasarlanıp kodlamayı seçenler olsa da, bu işten yavaş yavaş vaz geçiliyor.

Uyumlu Web

Yukarıdaki resimdeki örnekte görüldüğü gibi tarayıcınızın genişliğini değiştirdiğinizde farklı tasarımlar görmektesiniz. Bu sayede siteniz farklı araçlara aynı kaynak üzerinde uyumlu hale gelmiş oldu. Tabi web sitelerini uyumlu hale getirmek emek isteyen bir çalışma gerektirmektedir. Üç liraya beş köfte olmuyor maalesef. Projelenmesinden tasarımına ve kodlanmasına kadar eski alışkanlıklarınızı değiştirmemiz gerekiyor.

Niçin Uyumlu web sayfaları yapmalıyız

Tamam iyi güzel de web sitelerimizi niçin uyumlu hale getirmeliyiz? Bu soru aslında avantajları sıralamak için bir başlık. Yani uyumlu web sayfaları kodlamanın avantajları nedir?

Tüm platformlarda web siteniz düzgün görünür

Uyumlu web sayfaları kodlayarak farklı platformlar için kodlanan sayfalar tüm platformlarda aynı standartta ve görsellikte kullanıcıya görünecektir. Benzer kullanıcı deneyimi ile sitenize kullanıcıların aşinalığını bozmadan farklı mecralardan gezmelerini sağlamış oluruz.

Daha az çalışma zamanı

Uyumlu web sayfası hazırlarken bir site üzerinden tüm platforma ait işler yapılırken. Diğer seçeneklerde akıllı telefonlar için ayrı, masaüstü için ayrı, tabletler için ayrı kodlama yapmak gerekir. Bu da çok büyük bir zaman kaybına neden olur.

Uyumlu web ile tüm platformlar için tek elden site yönetimi sağlanır. Websiteniz her platformdan erişilebilir olur. Doğru bir yapı kurarak ileride ortaya çıkabilecek farklı araçlar için otomatik çözüm üretmiş olursunuz.

Bakım kolaylığı

Web sitenizin birden çok farklı sürümünü oluşturmak hantal bir yapı ve yavaş bir içerik yönetimine neden olur. Bir güncelleme yapmak için her platform(iphone, ipad vd.) için ayrı ayrı iş yapmak gerekir. Uyumlu web sayfalarında ise tek bir yerden yapılan güncelleme ile tüm platformlar aynı anda güncellenmiş olur. Uyumlu web sayfalarında farklı sürümler ve bunların güncelleme sorunları ile uğraşmazsınız.

Daha az para

Farklı platformlar için uygulama veya site yaptırmak fazladan para harcamasına neden olacaktır. iPad uygulaması için ayrı emek ve para, iphone için ayrı emek ve para, Android uygulaması için ayrı emek ve para, masaüstü site için ayrı emek ve para harcaması bir çok şirket için büyük bir gider kalemi olarak görülebilir.

Uyumlu web sayfaları ile tek bir site ile bu farklı araç ve platformlara tek yerden çözüm ve tek ödeme yapma imakanımız var. Patronlar, kulağa hoş geliyor değil mi?

Arama motorlarında daha iyi sonuç

Arama motoru deyince akıllara hemen google geliyor. Google web sayfası geliştirenlere uyumlu sayfalar oluşturmaları yönünde destek vermektedir. Aramalarda daha değerli olacağını söylemektedir. Arama sonuçlarında mobile uygun ibarelerini koyuyor artık google.

Tek bağlantı üzerine içeriği zenginleştirmek size büyük avantaj sağlar. Diğer seçeneklerde farklı araçlar farklı url’leriniz olduğu için her biri için tek tek seo çalışmanız gerekecektir.

Ayrıca aynı içeriğin tekrar tekrar farklı adreslerden yayınlanması google’un istemediği bir durumdur. Tekrarlanan içerikten dolayı google’un cezalandırmasına uğrayabilirsiniz.

İleriye dönük uyumluluk

Uyumlu web sayflarının esnekliği sayesinde yeni çıkacak olan araçlar ve platformlara hemen uyum sağlama imkanı sağlıyor. Yeni yeni filizlenen giyilebilir teknolojiler için ayrı bir site yapmak yerine mevcut sitenizi giyilebilir araçlara uyumlu hale getirmek için ufak bir iki değişiklik yapmak yeterli olacaktır.

Paylaşıma tek çözüm

Paylaşım yapılan bir sayfamızın farklı platformlardan erişiminde sorun yaşamayız. Diğer seçeneklerde iki farklı url’leden dolayı sorun yaşanır. Örneğin akıllı telefondan bakarken paylaşılan bağlantıya masaüstü kullanıcı açtığında karşısına mobil için tasarlanmış sayfa gelir. Buda güzel bir deneyim olmaz.

Yüksek tarayıcı destek oranı

Uyumlu web sayfaları kodlarken kullandığımız @media sorgularını ie8 hariç tüm tarayıcılar desteklemektedir. Şu an ki orana baktığımızda tarayıcı destek oranı %97’dir. Bu oran çok yüksek bir oran.

Sonuç

Sonuç olarak baktığımızda arkasına aldığı rüzgar ile eksiklerinide yakın zamanda gidereceğini düşünürsek web sitelerinin uyumlu web dünyasına hızlıca gireceğini tahmin etmek çok büyük bir kehanet değildir. Resim ve performans sorunları için üretilen çözümler ile ihtiyaçları tam karşılayan bir yapı olarak önümüze çıkıyor uyumlu web.

Kalın sağlıcakla.

Kaynaklar

HTML sayfalarına CSS, Javascript, resim video, ses vd. dosyaları ekleyebilirken diğer html dosyalarını eklemek için iframe, ajax isteği ile veya çakma script dosyası gibi gösterilmiş html dosyaları ile ekleyerek yapıyorduk/yapıyoruz. HTML import ile artık html dosyalarımızı html içine ekleyebileceğiz.

HTML kodlama yapımızı değiştirecek bu yapıyı henüz sadece Chrome ve Chrome alt yapısını kullanan tarayıcılar(Opera ve Chrome mobil) destekliyor.

HTML içine HTML’i eklerken normal CSS ve Javascript ekler gibi ekliyoruz. Bir iki farklı yanı var. İlk fark rel=”import” kısmı. İkinci fark ise direk HTML içine eklenmiyor içerik. Bu kod ile tarayıcı yüklüyor, sahne arkasında saklanarak kulanıma hazır hale geliyor. Biz kullanmak istediğimizde javascript ile bu içeriği ekliyoruz.

Kullanımı;

<head>
  <link rel="import" href="/sablonlar/ekmek.html">
</head>

Önemli bir not: Bu yöntem ile aynı domain altındaki dosyaları ekleyebiliyoruz. Farklı domain’den çağıralacak dosyalar için CORS özelliğinin açılması gerekmektedir.

Daha sonra işin içine javascript giriyor.

<link rel="import" id="sablon" href="ekmek.html">

İlk olarak javascript ile daha kolay erişmek için import koduna bir id=”sablon” ekleyelim. Daha sonra ayrı html dosyası oluşturalım mevcut HTML’in içine ekleyeceğimiz.

ekmek.html;

<section id="icerik">Ekmke 1 TL</section>

Mevcut HTML’in body kısmında javascript ile import elemanını yakalayalım.

var ekmekAl = document.querySelector('#sablon');

Sonra içe aktracağımız HTML’in içindeki elemanı yakalayalım.

var ekmekIci = ekmekAl.import.querySelector('#icerik');

Son olarakta aldığımız bu içeriği mevcut HTML içine ekleyelim.

document.body.appendChild(document.importNode(ekmekIci, true));

Sonuç aşağıdaki ekran görüntüsündeki gibi olacaktır.

HTML import

Örnek bir dokümanı oluşturup, kendi bilgisayarınızda açtığınızda yukarıdaki sonucu göremeyeceksiniz. Görmek için bir Server’a ihtiyacınız olacak. Örneğin http://localhost gibi bir urlde erişmeniz gerekecek.

Eklenen html dosyası CSS ve Javascript dosyaları gibi mevcut HTML’in yüklenmesini bloklayacaktır. Bunu engellemek için async özniteğini eklemek yeterlidir.

<link rel="import" id="sablon" href="ekmek.html" async>

Desteklemeyen tarayıcılar için

Bu özelliği başta belirttiğim gibi sadece Chrome tabanlı tarayıcılar desteklemektedir. Peki desteklemeyenler için bir çözüm yokmudur derseniz. İlk olarak bu özelliği taracının destekleyip desteklemediğini kontrol etmek için

if ('import' in document.createElement('link')) {
    // HTML imports destekleniyor
} else {
    // HTML imports desteklenmiyor.
}

böyle bir javascript kodu var. Ayrıca Polymer grubunun ürettiği HTMLImports adlı bir çözüm var.

Sonuç

Bir çok alanda kullanılabilecek güzel bir yapı. Benim ilk duyduğumda sadece html ile yapılan bir yapı olduğunu düşünmüştüm. Sonra işin içine javascript girdiğini öğrendiğimde biraz soğudum, ama buda iyidir. Sadece html ile yapmak daha güzel olurdu.

Sonuç olarak güzel bir özellik ama bazı sorunlarıda beraberinde getiriyor. Örneğin sonradan javascript yardımı ile eklenen html arama motorlarının tarama alanı dışana çıkması sorunu oluşturacaktır. Google’un javascriptleri yorumlayacağı durumda bu sorun olmaktan çıkacak gibi. Ama henüz erken.

Kaynaklar