Internet Explorer 9

Dün(14 Mart) akşamı Microsoft İnternet Explorer tarayıcısını son sürümü olan 9′un final sürümünü yayınladı. Yeni arayüzü, geliştirilmiş performansı, Windows 7 entegrasyonu vd. özellikleri ile dikkat çekiyor. 

Web mecrasında çalışanları tarayıcıları ve yetenekleri konusunda çok iyi bilgi sahibi olması gerekir. Helede Arayüz Geliştiricileri için çok önemlidir. Çünkü kodumuzu yazarken farklı tarayıcılara göre yazıyoruz. 

Bu yazımda İnternet Explorer 9′un önemli özelliklerinde bahsedeceğim. 

Yeni Görünüm

En büyük değişimlerden biri görünümde gerçekleşmiş. Yeni nesil tarayıcılardaki anlayış ile hareket edilmiş menü ve adres çubuklarının kapladığı alan en aza indirilerek gösterilen sayfa alanı genişletilmiştir. 

Yukarıda görüldüğü gibi gittikçe tarayıcılar orta noktada buluşuyorlar.

Bunun dışında;

  • Sekmelerin yapısı ve görünümüde değiştirilmiş.
  • Yeni sekme açıldığında karşımıza çıkan boş ve anlamsız bir sayfa yerine split görünmlü en sık açtığımız siteler listeleniyor.
  • Yeni bir bildirim alanı eklenmiş. İndirilen dosyalara ait bilgililerin gösterilmesi, popup pencerelerini ait bilgiler, güvenliğe ait uyarılar, şifre kayıtları vd. bildirimleri artık tarayıcının alt kısmında gösteriliyor.
  • Dosya yüklemek için kullanılan Yükleme Yöneticisi kısmı yenilenmiş ve kullanışlı bir yapıya kavuşturulmuş.

Standartlar ve Performans

İnternet Explorer 9′un alt yapısal olarak en büyük yeniliği GPU destekli yani "Hardware Acceleration" destekli yeni javascript tarama motoru(çakra) sayesinde web sitelerini daha hızlı yorumluyor. 

İnternet Explore 9′un geneline baktığımızda diğer tarayıcılara göre en büyük avantajı GPU destekli tarama motoru olarak görünüyor. Bu sayede web sayfalarını masaüstü programlar gibi hızlı ve beklemeksizin kullanım imkanı sunmayı düşünüyor. GPU destekli "Hardware Acceleration" kastımız şudur; grafik desteğini bilgisayar işlemcisinden(cpu) grafik işlemcisine(gpu) taşımayı sağlayan javascript motoru sayesinde ana işlemci üzerindeki yükü dağıtarak daha fazla verim almayı sağlıyor. Buda bize web’de görsel bakımdan zengin içerikli siteleri daha hızlı gezme imkanı sağlıyor.

Bu yenilenen ve hızlandırılan tarama motorları HTML5 desteğini sunuyor. Burada şöyle bir liste var. Destekleme konusunda İnternet Explorer’un eski sürümlerine göre çok büyük eklemeler var, ancak diğer tarayıcıların son sürümlerini dikkate aldığımızda neredeyse yarı yarıya bir eksiklik var.

http://www.findmebyip.com/litmus

Sitesini incelemenizi öneriyorum. 

Aşağıda İnternet Explorer 9′un desteklemediği özelliklerin belli başlıları listesi var.

  • Application Cache (offline)
  • Web Workers (threads in JavaScript)
  • HTML5 Forms (validation mechanism, CSS3 selectors)
  • JavaScript Strict Mode
  • ForeignObject (embed external content in SVG)
  • SMIL Animations (SVG animations)
  • File API
  • WebGL (3D)
  • CSS3 Transitions (for animations)
  • CSS3 Text Shadow
  • CSS3 Gradients
  • CSS3 Border Image
  • CSS3 Flex box model
  • ClassList APIs
  • FormData
  • HTML5 History API
  • Drag’n Drop from Desktop

Pek iç açıcı bir tablo değil.

Performansla ilgili bir çok yayınlanan grafik var. Bunlara bakıldığında İnternet Explorer 9 kendi ailesinin en hızlı ve yeni nesil tarayıcılara yaklaşan performansı var. 

Windows 7 ile Sorunsuz ve Tümleşik Çalışma

Masaüstünüzü ikiye ayırarak geniş ekranlarda iki farklı siteyi tek ekran görme imkanı sağlayan bir yapıyı kullanabilirisiniz. 

Windows 7′nin programlar için sunduğu en sık kullanılan sitelere daha hızlı erişimi sağlayan yapı web sitelerinde sağlanmış. Sık kullandığımız web sitelerini programlar gibi alt barımıza sabitleyebiliyoruz.

Eklenti Desteği ve Eklenti Performans Göstergesi

Eklenti Performans göstergesi bize eklentilerin ne kadar zaman kaybına neden olduğunu gösteriyor. Biz bu verilere göre eklentiyi kaldırıyor veya bize lazım ise kalmasına karar veriyor. Bence diğer tarayıcılarında edinmesi gereken bir özellik bu.

Gelişmiş Adres Çubuğu

Adres çubuğu hem arama yapmamıza, hemde web sitelerinde gezmeye yarayan bir yapıya kavuşturulmuş. Buna "Tek Kutu" adı verilmiş. Bir çok yeni nesil tarayıcının yöneldiği bu sisteme İnternet Explorer 9′da getirilmesi güzel.

Diğer tarayıcılardan elimizin alıştığı ve bize çok hız kazandıran bu yapı tüm tarayıcılar için güzel bir gelişme.

Sonuç

Sonuç olarak şunu söyleyebilirim ki yukarıda açıkladığım ve araştırdığım kadarı ile bir çok yönü ile gayet başarılı bir tarayıcı olarak görünüyor İnternet Explorer 9, ancak gerek HTML5 ve gerekse CSS3 özelliklerini destekleme konusundaki eksiklikleri beni düşündürüyor. Anlayamadığım bir olay varki bir çok yönden gelişmiş bir tarayıcı sunmasına rağmen nasıl oluyorda bu özellikleri desteklemiyor, anlam verebilmiş değilim. Ayrıca Windows XP’ye yüklenemeyecek olmasıda ilginç.

Chrome’daki güncelleme mantığı ile gelen bir yapıya sahip olsa idi bu durumda bir türlü geçiştirilebilirdi, ancak böyle bir yapıda olmadığını görünce üzülüyorum açıkçası. Hala %60 seviyelerinde kullanıcısı olan bir tarayıcıdan daha sorunsuz bir tarayıcı çıkarmasını bekliyordum. 

Mevcut tarayıcıları düşündüğümde belki sadece GPU nedeni ile belki kullanılabilir ama bu sene içinde çıkacak diğer tarayıcılarında bu özelliği kazanacağını ve İnternet Explorer 9 ile belki geçici bir yükselme yaşansa bile daha sonra düşüşün devam edeceğini düşünüyorum.

Kaynaklar

11 yorum

“Arayüz Geliştiricileri İçin Web Sitesi Kodlamak” Semineri – Ankara

26 Şubat 2011 Cumartesi günü bir aksilik olmazsa TÜTEV’de “Arayüz Geliştiricileri İçin Web Sitesi Kodlamak” adlı bir seminer düzenleyeceğiz. TÜTEV’e ve özellikle beni bu iş için ikna eden Ömer Faruk Sarıkaya’ya teşekkür ediyorum. Ayrıca bana yol arkadaşı olmaya kabul eden S. Ferit Arslan ve İlyas Osmanoğlulları’na da teşekkürler.

Genel manasıyla Arayüz Geliştiricileri ve Görevleri üzerinde durmaya çalışacağız bu seminerde.

Seminer Programı

  • Genel Web Sitesi Kodlaması Hakkında
    Web sitesi yapım aşamaları hakkında genel bir bilgilendirme
  • Arayüz Geliştiricilerin Görevi ve Öğrenme Süreci
    Arayüz Geliştiricileri neleri bilmeli nelere dikkat etmeli
  • HTML, CSS ve Javascript hakkında genel bir bilgi
    Genel tanımları ve işlevleri
  • Bir uygulama kodlama (html ve css kodunun yazılması)
    Daha önce yaptığım bir sitenin kodlanması
  • Soru -Cevap

Konular çok geniş olduğu için zamanımız yettiğince değinmeye çalışacağız.

Katılım için TÜTEV’in sitesine başvurabilirsiniz.


View Larger Map

Görüşmek dileğiyle.

Sağlıcakla Kalın.

33 yorum

Resim Kullanmadan Altı Çizgili Başlıklar Oluşturmak

Resimde görüldüğü gibi başlık yapmak için bir bg resmi hazırlayıp başlığın altına tanımlıyordum. Sonra acaba ben bunu resim kullanmadan yapabilirmiyim diye düşündüm. Float uygulanmış elemanların kapsayamama sorunu diye ismini uzattığım clearfix sorunu aklıma geldi, aslında bu bir sorun değil kabul idi. Tarayıcılar olayı böyle kabul ettiği için içinde float uygulanmış bir eleman olan kapsayıcı eleman içeriğine göre yükseklik almıyor ve sorun oluşturuyor.

Peki, burası ile ne alakası var diyorsanız. Gelelim bura ile olan alakasına; şöyle bir şey geldi aklıma eğer bu başlık elemanına alt çizgisi eklersem ve  içine bir eleman koyup float uygularsam başlık eleman içindeki kapsayamayacak ve istediğim çözüme kavuşacağım. Sadede gelelim ve hemen bir örnek yapalım.

HTML kodu;

<h1><span>Ged tortor odio</span></h1>

CSS kodu;

h1{border-bottom:3px solid #9faf41;}
h1 span{float:left; padding:0 10px; background-color:#111; margin-left:10px; margin-top:-15px; display:block; font-size:24px}

Örneği görmek için tıklayınız.

Örnekte dikkat edeceğimiz bir iki husus var. h1 içie koyduğumuz span’ın ardalan rengini zemin ile aynı yaparak yazının altındaki çizgileri yok ediyoruz, ayrıca bu span’a sağdan ve solda padding vererek yazıya tam yapışmasını engelliyoruz.

Metot sadece bir başlığın olduğu ve tek bir stilin olduğu durumlardan daha çok, site içinde birden fazla alt çizgi rengi ve şekli olan sitelerde daha kullanışlı olacağı düşüncesindeyim. Tabi karar size kalmış.

Metodu IE6+, Firefox, Chrome, Opera ve Safari destekliyor. Burada tek dezavantaj ise fazladan span kullanımıdır.

Kalın sağlıcakla

6 yorum

CSS3 Çoklu Ardalan(Multiple Background)

CSS3 standart geliştiricileri önceki sürümlerde eksik olan birçok sorunu gidermektir. Daha önce birçok uygulamamızda yaşadığımız sorunlardan biriside bir elemana birden fazla ardalan resmi(background-image) tanımlayamıyoruz. Bu sorun nedeni ile birden fazla ardalan resmi tanımlamak istediğimiz durumlarda fazla eleman ekleyerek çözüm üretiyorduk.

Yuvarlak kenarlı kutular,  CSS ile sekmeli tab menu yapımı, CSS ile gölge vermek, CSS ile buton yapmak vb. yazılarımızda bu durumu görebiliriz.

CSS3 geliştiricileri bu sorunu gördü ve çözüm üretildi. CSS3 background tanımında birden fazla resim tanımlamamıza izin veriyor. Birden fazla tanımı yapmak için aralarına virgül koyuyoruz.

background: url(image_1.jpg) top right no-repeat,
url(image_2.gif) bottom right no-repeat,
url(image_2.png) bottom right no-repeat;

Browser Uyumu:
Internet Explorer 9+
Firefox 3.6+
Chrome 2+
Safari 1.3+
Opera 10.5+
W3C’s CSS Level 3+
CSS Profile 3.0

Yeni nesil tarayıcıların bir çoğu bu özelliği desteklerken ie8 ve altı sürümler bu özelliği desteklemiyor ve bu web mecrasında bizi bu özelliği kullanmamızı engelleyecek. Desteklemeyen tarayıcılar için eski yöntemi, destekleyen tarayıcılar için ise yeni yöntemi kullanarak aşmaya çalışan çözümler var ancak bu yöntemler koordinasyon sorununa neden olacaktır. Ama bu yöntemi uzun süre kullanmayacağız anlamına gelmesin mobil mecrada bu metodu kullanabiliriz.

Örnek 1:

Bu yöntemi kullanarak daha önce yaptığımız css ile buton yapmak konumuzda anlattığımız Görselliği Arttırılmış Esnek Yapılı Butonlar yöntemi birde yeni bu tanım ile yapalım.

<a href="">Örnek Buton Metni</a>

CSS kodumuz

body {
    background-color:#363636
}
a {
    display:block;
    font:bold 14px Arial, Helvetica, sans-serif;
    color:#363636;
    float:left;
    padding:5px 14px 0 14px;
    height:23px;
    text-decoration:none;
    background:url(cancanli_butonlar_ard_.gif) left top no-repeat, url(cancanli_butonlar_ard_.gif) right -58px no-repeat, url(cancanli_butonlar_ard_.gif) center -29px repeat-x
}

Örneği görmek için tıklayınız.

Burada şuna dikkat ediyoruz, background tanımı yapılırken sıralama önemli. Sıralama şöyle oluyor background: sol, sağ ve orta şeklinde sıralama yapmalıyız.

Başka bir örnek ile özelliğin kullanılabileceği yerleri düşünelim. CSS3 ve özellikleri daha yeni yeni kafamızda ve uygulamalarımızda yerini almakta, bundan dolayıdır ki yapacağımız uygulamalar basit olabilir ama özelliği öğrenme açısından önemlidir.

Çoklu ardalan kullanımı birçok siteyi kodlarken ihtiyaç duyduğum bir özellikti. Her defasında hayıflanıyordum, keşke şöyle bir özellik olsada kullansak diye, gerçi hala kullanamıyoruz. Mobil araçlar için kod yazarken kullanabilmemiz çok güzel.

Örnek 2:

Alıntı: blockquote ve q etiketleri makalemize tekrar bakalım ve bu örneği çoklu ardalan ile ne kadar kolaylaştırdığımızı görelim.

Makaleye tekrar baktığımızda bu tip bir alıntı görselliğini kazanmak için üç adet ardalan resmi kullanıyoruz. İçeriğine göre yazının uzamasını istediğimiz için 3 adet resim kullanıyoruz. Tabi bu 3 resmi tanımlamak için 3 adette elemana ihtiyacımız oluyor. Bunlar eski örnekte blockquote, p ve cite elemanları. Biz burada çoklu ardalan kullanarak tek bir eleman ile bu işi yapabiliriz. Tabi burada cite etiketinin anlamından dolayı bırakacağız ama yine o olmadanda bu işi yapabileceğimizi bilelim.

CSS Sprite resmimiz aşağıdaki gibi tek resim olacaktır.

HTML kodu

<blockquote>Sevgide güneş gibi ol, dostluk ve kardeşlikte akarsu gibi ol, hataları örtmede gece gibi ol, tevazuda toprak gibi ol, öfkede ölü gibi
ol, her ne olursan ol, ya olduğun gibi görün, ya göründüğün gibi ol.</blockquote>
<cite>Mevla'na Celaleddin-i Rumi</cite>

CSS kodu

blockquote {
    width: 224px;
    margin:0;
    padding:30px 12px 0 12px;
    color: #fff;
    text-align:center;
    font:bold 14px/1.7em Georgia, "Times New Roman", Times, serif;
    background: url(images/alinti_ard.gif) -490px 0 no-repeat, url(images/alinti_ard.gif) -242px bottom repeat-y;
}
cite{
    font-size: 1.2em;
    padding-bottom:29px;
    display:block;
    text-align:center;
    color:#C6D9F1;
    text-decoration:underline;
    width:240px;
    background: url(images/alinti_ard.gif) no-repeat 1px bottom, url(images/alinti_ard.gif) -242px bottom repeat-y;
}

Aslında css kodumuz önceki koddan pek farkı yok. Farklı olan iki kısım var. background tanımları.

Örneği görmek için tıklayınız.

Örnek 3:

3. bir örneğide paralaks bir zemin için yapalım. www.storiesinflight.com buradaki örneği yapalım.

Her biri ayrı ayrı olan resimler(çimen, ağaç, bulut ve gökyüzü) üst üste koyarak bir resmi elde edeceğiz. Örneği aldığımız sitede bu resme hareketde kazandırılmıştır, ancak bizim konumuz olmadığı için işin bu kısmına girmeyeceğiz.

HTML kodu

<div id="paralaks">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque quam lacus, consequat eget sodales non, ultrices vitae arcu. Vivamus quis felis sit amet mi malesuada gravida vitae rhoncus diam.
</div>

CSS kodu

#paralaks{
	width:400px;
	height:180px;
	padding:5px;
	background-image: url(images/cimen.png), url(images/agac.png), url(images/bulut.png), url(images/gokyuzu.png);
	background-repeat: repeat-x, no-repeat, repeat-x, repeat-x;
	background-position:0 0, 120px 0, 0 0, 0 0;
}

Örneği görmek için tıklayınız.

Örnekte görüldüğü gibi bir elemana 4 adet resim tanımladık. background tanımlarını ayrı ayrı yapabildiğimiz gibi bir önceki örnekte olduğu gibi kısaltmada uygulayabiliriz.

Yukarıdaki resimde de görüldüğü gibi ilk tanımlamamız en önde daha sonradaki resimlerde  sıralamaya göre arkaya doğru sıralanmaktadır.

Sonuç

Yukarıda örnek olarak verdiğimiz sayfalarda görüldüğü gibi birçok yerde kullanılabilecek bir özelliktir çoklu ardalan özelliği. Daha yeni bir özellik olması açısından zamanla zihnimizde daha gelişmiş örnekler yer alacaktır ve ileride daha güzel sonuçları bu özellik sayesinde sayfalarımıza uygulayacağız. Ben CSS3 hakkındaki ilk çalışmalar başladığında ilk olarak bu özellik dikkatimi çekmiş ancak daha sonra border-image özelliğini gördükten sonra çoklu ardalan özelliği ile yapabileceğim birçok uygulamayı border-image özelliği ile daha kolay yapabileceğimiz gördüm. İleride zamanı gelince onuda anlatacağız, ama bu özelikte bizi heyecenlandırıyor açıkçası.

Kalın sağlıcakla.

Kaynaklar

2 yorum

CSS3 ile yuvarlak kenarlı resim yapmak

Bir resminize kenar çizgisi tanımı yapıp daha sonrada köşelerini ovalleştirmek istediğinizde köşelerdeki kenar çizgilerinde sorun yaşıyoruz.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>border-radius</title>
<style>
img{ border:2px solid #999; -webkit-border-radius:8px; -moz-border-radius:8px; border-radius:8px;}
</style>
</head>
<body>
<img src="gudi.jpg" width="75" height="75" />
</body>
</html>

Örneği görmek için tıklayınız.

Kırmızı ile işaretlediğim yere dikkat ederseniz sorunlu gözüken kısımalar var. Bu sorun tarayıcıların bir sorunu gibi duruyor. Eğer ie’nin sorunları ile bu kadar zaman kaybetmemiş olsa idik şimdi böyle güzel sorunlarla uğraşacaktık ve tarayıcılar bu sorunları düzletmek için uğraşacaktı.

Çözüm1:

Çözüm için dışa bir kapsayıcı div atayıp kenar çizgisi tanımını bu katmana yaparak çözebiliyoruz.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>css3</title>
<style>
.resimKapsulu{border:2px solid #999; width:75px; height:75px; -webkit-border-radius:12px; -moz-border-radius:12px; border-radius:12px;}
.resimKapsulu img{width:75px; height:75px; -webkit-border-radius:10px; -moz-border-radius:10px; border-radius:10px;}
</style>
</head>
<body>
<div class="resimKapsulu"><img src="gudi.jpg" width="75" height="75" /></div>
</body>
</html>

Örneği görmek için tıklayınız.

Kodunu aldığım sitede resim ve kapsayıcı katmana aynı border-radius değeri verilmiş, ancak ben öyle yapınca Chrome’da beyazlıklar ortaya çıktı bu nedenle bende kapsüle 12px verirken resme 10px border-radius verdim.

Örnek Safari ve Chrome’da çalışırken Firefox3.6 ve Opera11’de çalışmıyor.

Firefox4 ve yeni webkit tabanlı tarayıcılarda bu sorun ise kökten çözülmüş, tanımı direk resme verebileceğiz.

Çözüm2:

Firefox3.6 ve Opera için CSS3 Rounded Image With jQuery makalesindeki yöntemden yaralanabiliriz.

HTML kodumuzu şöyle değiştirelim

  • <div class="resimKapsulu" style="background: url(gudi.jpg) no-repeat center center; width: 75px; height: 75px;">
  •    <img src="gudi.jpg" width="75" height="75" style="opacity: 0;" />
  • </div>

Resme saydamlık verilip görünmez yapılıyor ve satır için css kodları tanımlanıyor, amaç buradaki kodları jquery yardımı ile bg olarak tanımlamak .

jQuery kodumuz

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>css3</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script type="text/javascript">
 $(document).ready(function() {

	$(".resimKapsulu").load(function() {
		$(this).wrap(function(){
			return '<span class="' + $(this).attr('class') + '" style="background:url(' + $(this).attr('src') + ') no-repeat center center; width: ' + $(this).width() + 'px; height: ' + $(this).height() + 'px;" />';
		});
		$(this).css("opacity","0");
	});

 });
</script>
<style>
.resimKapsulu{border:2px solid #999; width:75px; height:75px; -webkit-border-radius:12px; -moz-border-radius:12px; border-radius:12px;}
.resimKapsulu img{width:75px; height:75px; -webkit-border-radius:10px; -moz-border-radius:10px; border-radius:10px;}
</style>
</head>
<body>
<div class="resimKapsulu" style="background: url(gudi.jpg) no-repeat center center; width: 75px; height: 75px;">
	<img src="gudi.jpg" width="75" height="75" style="opacity: 0;" />
</div>
</body>
</html>

Örneği görmek için tıklayınız.

Ben bu çalışmayı iphone ve ipad için kod geliştirirken denk geldiğim için diğer tarayıcıların benim için pek önemi yoktu açıkçası. iphone ve ipad için ilk çözümü uygulayıp geçtim açıkçası, ama lazım olanlar için ikinci yöntem de kullanılabilir.

Kaynaklar

2 yorum

CSS İpucu 30 : background() tanımında tırnak kullanımı

CSS kodu yazarken background tanımlarında bazı yerlerde tırnaklı tanım yapıldığını, bazı yerlerde ise tırnaksız tanım yapıldığını görmüşsünüzdür.

	background("deneme.gif");

veya

	background(deneme.gif);

Ben birkaç güne kadar arada bir farkın olmadığını düşünüyordum.(Aslında benim gibi özel durumlar hariç bir fark olmadığı hakkındaki düşüncem devam ediyor.)

Projede css’de kullanılan resimlerin ön belleğe alınmaması için background:url(denem.gif?v={VERSION}) diye bir yol izliyoruz versiyon kısmına her atılan versiyonun numarası yazıyor ve böylelikle tarayıcılar resimler önbelleğe almıyor özelliklede Chrome!

Tabi bu kullanım Dreamweaver’da css otomatik tamamlamasını ve bu tanımdan sonraki özelliklerin renklendirmesini bozuyor.

	background(deneme.gif?v={VERSION});

Dün ise eğer bu tanımı tırnak içinde yazarsam Dreamweaver otomatik tamamlaması ve kod renklendirmesini bozmadığını gördüm ve sevindim.

	background("deneme.gif?v={VERSION}");

Sağlıcakla kalın.

7 yorum

Sayfa 7 - 101« İlk...56789...203040...Son »

Son yazılar

Kitap

CSS'e başlangıç Uzun süredir üzerinde çalıştığım CSS’e başlangıç kitabımı bitirdim. Aslında buna bir kitap demek ne kadar doğru bilmiyorum. Tam doğru tanımı makalelerimin derlenip düzenli hale getirildiği bir e-doküman demek daha doğru olur. Bu kitap makalelerimi derleyip hazırladığım ilk kitap. İnşallah ikinci kitabıda yazmayı düşünüyorum. Zaman ve imkânlar nispetinde 2. kitapta çıkacaktır.