Eki.20

Önbelleklenebilir (Cacheable) Responsive Web Sayfası Örneği

HTML5’in getirmiş olduğu yeniliklerden biri de önbelleklenebilir web sayfaları hazırlamaktır. Bunun anlamı; eğer bir sayfaya girildiyse, o sayfa daha sonraları internet bağlantısı olmasa bile tekrar ziyaretçinin bilgisayarındaki indirilmiş dosyalardan okunabilir.

Önbelleğe alınabilir bir web sayfası hazırlamak içini temel prensipte iki işlem yapılması gerekir. Birinci işlem; o web sayfasının önbelleklenebilir olduğunu belirtmek, ikinci işlem de hangi dosyaların önbellekten okunacağı, hangisinin her daim yeni kaynaktan okunacağıdır.

Önbelleklenecek Sayfayı Belirtme

Bu işlem oldukça basittir. Yapmanız gereken; sadece etiketinde manifest adında bir attribute tanımlamaktır. Tanımayacağınız manifestoda ise, dosya okuma durumlarını belirtecek olan .apache formatlı dosyanın isimi yazılır.

<html manifest="index_onbellek.appcache">

Bu tanımlamada index_onbellek.apache adlı bir dosyayı okumasını ve önbellek durumuna bakmasını belirtmiş olduk.

Manifesto Hazırlama, Önbelleklenecek veya Yeniden Okunacak Olan Dosyaları Belirtme

Sitemizin olduğu dizinde bir text dosyası oluşturalım. Notepad++ programı ile yapabilirsiniz. Bu dosyayı boş haliyle index_manifest.apache ismi ile kaydedin.

Şimdi bir örnek index sayfası hazırlayalım ve neler olduğunu inceleyelim…

Önbelleklenebilir Responsive Web Sayfası Örneği

index_onbellek.apache dosyamızın olduğu yerde bir index.html sayfası oluşturalım. Bu sayfa içinde de şu mantıkla bir tasarım yapalım.

• Sayfa dışarıdan CSS dosyası okuyacak. Yani stil.css adında bir dosya oluşturup okutacağız ve sayfayı biçimlendirecek. Her seferinde tekrar yüklenecek.
• Sayfada üç adet resim kullanılacak. Bu resimlerden üçü de önbelleklenebilir olmayacak. Yani sayfa her açıldığında tekrar yüklenecek.
• Bir resim ise, her seferinde tekrar yüklenecek.

Örneğimiz için, daha önce hazırlamış olduğumuz responsive sayfa örneğini kullanacağız.

<!DOCTYPE html>
<html lang="tr" manifest="index_onbellek.apache">
<head>
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="stil.css" />
</head>
<body>
	<h1>Attack of Titan</h1>
	<img src="attack-of-titan.jpg" width="100%" height="auto"></img>
	<div class="yazi" >
	GÜNÜN DEVİ
	</div>
	<div>
	   <h2>Attack of Titan Nedir?</h2>
	   <p>Attack on Titan (進撃の巨人 Shingeki no Kyojin, Devlerin Saldırısı) Hajime Isayama tarafından yazılan/çizilen bir manga serisidir. Seri Kodansha'nın Bessatsu Shōnen Magazin adlı aylık manga dergisinde 9 Eylül 2009 tarihinde yayınlanmaya başlamıştır ve şu ana kadar 15 manga kitabı (tankōbon) çıkmıştır.</p>
	</div>
	<div class="karakter">
	   <img src="Eren_Yeager.png" height="130px" width="130px"/>
	   <h3>Eren Yeager</h3>
	   <p>Devlerin kolunu parçalaması ve yemesi sonrasında, bir anda kendisi de dev insana dönüşen ve devlerden intikamını alan ana karakter.</p> 
	</div>
	<div class="karakter">
	   <img src="Armin.png" height="130px" width="130px"/>
	   <h3>Armin</h3>
	   <p>Döğüş yetenekleri olmamasına rağmen, kritik durumlarda soğukkanlılığını koruyup doğru kararlar verebilme yetisine sahip olan yan karakter.</p> 
	</div>
	<div class="karakter">
	   <img src="Mikasa.png" height="130px" width="130px"/>
	   <h3>Mikasa</h3>
	   <p>Döğüş yetenekleri, cesareti ve kılıçlarını kullanmadaki ustalıkları ile tam bir dev avcısı.</p> 
	</div>
</body>
</html>

stil.css

body{
	margin:0px;
}
.aciklama{
	margin:10px;
	text-align:center;
}
.karakter {
	float: left;
	padding:5px;
	margin:5px;
	width:250px;
	height:300px;
	text-align:center;
	border:5px solid silver;
} 
.yazi{
	z:index=2;
	font-family:Rockwell;
	font-weight:bold;	
	font-size:30px;
  	color:red;
  	opacity:0.7;
 	position:absolute;
  	top:140px;
  	left:50%;
 	margin-left:-110px;
	background-color:black;
	padding:10px;
}
h1{
	margin:0px;
	background-color:red;
	color:white;
	padding:5px;
}
img{
	margin:0px;
  	text-align:center;
}

Yüklenecek olan resim dosyaları:

Yazmış olduğumuz kodlara göre responsive tasarımımız şu şekilde olacaktır (sayfa daha da uzun ama göründüğü kadarı yeterlidir anlamamız için):

Şimdi bu tasarımda stil dosyasını ve en üstte görünen resmi sunucudan yeniden yükleteceğiz, diğerleri aynı kalacak. Buna göre manifesto dosyasını hazırlayalım.

index_onbellek.appcache dosyasını Notepad++’da veya Sublimetext’te açın. Aşağıdaki şekilde görüldüğü gibi tanımlamaları yazın ve kaydedin.

CACHE MANIFEST
/Armin.png
/Eren_Yeager.png
/Mikasa.png
NETWORK:
/stil.css
/attack-of-titan.jpg

Burada gördüğünüz gibi CACHE MANIOFEST tanımlaması içinde yer alan dosyalar önbelleklenecek. NETWOWK içinde yer alanlar da her defasında yeniden yüklenecek.

Web sayfamızı bir sunucuya yükleyelim veya lokal sunucu oluşturup (İlerleyen konuları inceleyebilirsiniz) Google Chrome’da test edelim. Google Chrom’da ayarlardan Geliştirici Seçenekleri’ni açalım. Açılan araç panelinde de Console sekmesine tıklayalım.

Konsol verilerini inceleyelim…

İlk açılışta sitenin bir manifestoya sahip olduğu ifade ediliyor. Böylece önbelleklenecek dosyalar yüklenmiyor. Sonrasında Armin.png, Mikasa.png, Eren_Yeager.png dosyalarının yüklenmemesi gerektiği belirleniyor ve önbellekten okunuyor. Eğer daha fazla test yapıp sonuçları görmek isterseniz, resimleri ve stil dosyasını değiştirip, sonucu gözlemleyin.

İçeriği paylaş:
  • facebook
  • twitter