tarihinde Fatih Hayrioğlu

Mart ayı internet tarayıcıları için bayağı yoğun geçiyor. Mart’ın başlarında Google Chrome 10 çıktı, Chrome o kadar sık sürüm geçiyor ki ne zaman 10 oldu anlayabilmiş değilim. Opera’da ise bu duruma biraz daha buçuklu bir cevap verdi Opera 11.10 sürümünü beta olarak yayınladı. Ardından uzun süredir beklenen İnternet Explorer 9 çıktı, normal kullanıcı isteklerini karşılayan bizim gibi geliştiricileri yine eksikleri ile düşündüren bir sürüm. Son olarak bu gün Firefox 4 çıktı. Burada sizlere FireFox 4’ün yeniliklerinden bahsedeceğim. Firefox 4’de aslında başta 3.7 olarak adlandırıldı sonra geçen sene çıkacaktı direkten döndü derken mart’a kadar bekletti bizi.  Yeni özellikleri inceleyelim.

Yenilenen Arayüz

Yeni nesil bir çok tarayıcıda gördüğümüz içeriğe daha fazla alan bırakan yeni tasarım kabulünü Firefox 4’de de görüyoruz. İnternet Explore 9’da dediğimiz gibi hepsi ortalama olarak doğru yolu buluyor.

Daha derli toplu bir arayüze kavuşmuş Firefox4. Gerçi o kadarda problememiz yoktu arayüzü ile ilgili, ama yenilenmiş daha hoş olmuş. Sekmeler Chrome’daki gibi üste alınmış. Ana bir Menü Sağ üst köşeye Firefox başlığı ile eklenmiş. Ana Sayfa ve Yerimleri arama kutusu yanına yerleştirilmiş. Ayrıca Yeni Eklenti Düzenleme arayüzü eklenmiş.

Performans

Bencee en büyük artıyı hızdan, performanstan yana olmuş. Bellek kullanımda uzun süreli kullanımda şişmeler oluyor ve can sıkıcı sonuçlar doğruyordu. İlk kullanım deneyimlerime göre gayet başarılı bir gelişme olmuş bu konuda. Google Chrome’un öncülüğünde artık tüm tarayıcıların önceliğini hız konusuna veriyor. Bence bu güzel bir gelişme.

Yenilenen javascript motoru(Jägermonkey) ve HTML5 motoru sayesinde bir önceki sürüme göre 6 kat daha hızlı olduğunu söylüyor Mozilla. Bunu kullanırken hissediyorsunuz. Ayrıca “hardware acceleration” sayesinde hızlanma daha fazla hissediliyor. İnternet Explorer 9’dan hatırladığımız bu özellik grafik işlemciyide devreye sokuyor.

Eklentileri güncellemeleri arkaplanda yükleyerek eklentilerin eski sürümlerdne dolayı yavaşlamasını engelliyor. Eklenti güncellemeleri sonrası tarayıcı kapatıp açmaya gerek yok artık.

Yeni Sekme Özellikleri

Panorama özelliği sayesinde çok fazla sekme kullanan kullancılar için bir düzeni sağlamak artık daha kolay olacak.

Sekmeli yapıya geçtikten sonra bir çok insan sekmelere alıştı, bunun sonucu olarakta sekmeleri düzenleme ihtiyacı duydular. Bu ihtiyacı çok iyi gören Firefox mart ayındaki bu yeni tarayıcı sürümleri içinde belki en iyi özelliği kullanıcılarına sundu.

Ayrıca sekmeleri sabitleme özelliğide eklendi. Daha önce Chrome’dan alışık olduğumuz uygulama sekmeleri sabitleme özelliği artık Firefox’da da var. Çok kullandığımız özellikleri veya uygulamaları sabitleyerek devamlı göz önünde tutuyoruz. Sabitlenen sekmeler görüntü olarakta sadece ikonları görünür kalıyor, bölylelikle fazla yer kaplamıyor.

Senkronize Firefox (Firefox Sync)

</param></param></param></embed>

Daha önce eklenti olarak sunduğu bu özelliği artık program içinde geliyor. Farklı araçlar ile internete girenler için ve farklı yerlerde tarayıcısının özelliklerini her kullandığı yere taşımak isteyenler için güzel bir özellik. Tüm tarayıcı bilgileriniz ve ayarlarınızı her kullandığınız yerden erişmenizi sağlıyor bu özellik.

Web Standartları Desteği Arttı

  • HTML5 yorumlama motoru geliştirildi,
  • HTML5 Form elemanları, form doğrulama ve form özellikleri desteğini arttırıldı,
  • HTML 5 Yapısal elemanları desteği sunuyor. <article>, <section>, <nav>, <aside>, <hgroup>, <header> ve <footer>,
  • HTML5 hidden özelliğini destekliyor,
  • Yeni HTML5 özelliklerini destekliyor: <mark>, <figure> ve <figcaption>,
  • WebSocket APı desteği sağlıyor,
  • WebGL desteği sunuyor,
  • Google’un çıkardığı WebM video formatı desteği sunuyor,
  • SVG animasyonu SMIL desteği sunuyor,
  • Medya elementlerinin(video, audio) buffered özelliğini destekliyor,
  • Medya elementlerinin(video, audio) preload özelliğini destekliyor,
  • CSS geçiş(transitions) özelliği desteği sunuyor,
  • Matematiksel işlemler yapmayı sağlayan -moz-calc özelliği desteği sunuyor,
  • CSS dokunma özellikleri desteği sunuyor,
  • -moz-font-feature-settings, -moz-tab-size, resize özelliklerini destekliyor
  • CSS3 :-moz-handler-crashed, :-moz-placeholder, :-moz-submit-invalid, :-moz-window-inactive, :invalid, :optional, :required ve :valid sözde sınıflarını ve :-moz-focusring sözde seçici desteği sunuyor
  • -moz-background-size yerine background-size, -moz-border-radius yerine border-radius ve -moz-box-shadow yerine box-shadow isim değişikliklerini yapıyor
  • Firebug’dan alışık olduğumuz Web Konsol özelliğini sunuyor

Diğer Özellikler

Beni izleme(Do Not Track) özelliği eklenmiş,  Çoklu dokunma özelliği ve daha güvenli gezintiler için bazı özellikler sunuyor. Ayrıca Chrome’dan alışık olduğumuz otomatik güncelleme özelliği ile biz indirmeden yeni sürümler kurulacak artık. Bu özellik tüm tarayıcılara gelirse çok güzel olur.

Sonuç

Mart ayı tarayıcılar için kendilerini gösterme zamanı olarak geçiyor. Her yeni özellik bizi heyecanlandırıyor. Gelişen web teknolojilerine ayak uyduran tarayıcılar ayrıca yeni ve kullanışlı özelliklerde sunuyor. Firefox’un hız sorununu bu sürümde düzelttiği kanısına varsam da uzun süreli kullanımlardaki performansını görmeden kesin bir şey söylemek zor.

Firefox’a FireBug ile olan göbek bağım nedeni ile benim için Firefox birincil tarayıcımdır ve bu yeni sürüm ile birlikte bu daha çok pekişecektir.

Son olarak rekabet güzel şey.

Yeni nesil tarayıcıların Hız testi http://lifehacker.com/#!5784396/browser-speed-tests-firefox-4-internet-explorer-9-chrome-11-and-more

Kaynaklar

tarihinde Fatih Hayrioğlu

Kodladığım bir çok sitede eğer site alt sayfalar ve onlarında alt sayflarında oluşan karmaşık bir yapıya sahip ise genelde kullanıcıya nerede olduğu göstermek için hiyerarşik linkler kullanırız. Bunu hiyerarşik yerimi olarak isimlendirmek bana daha mantıklı geldi. Amaç web sitemizin kullanılabilirliğini arttırmaktır.  Kullanıcıya bulunduğu sayfa hiyerarşik yapısıda gösterilerek daha kullanışlı bir erişim ve kullanım sağlanır. Ayrıca arama motorlarını taramaları içinde sitemize artı değer katar. Kullanıcıya her seviyeye kolayca geçiş imkanı sağlar.

En çok örnek verilen site:  apple.com

Basit yapılı bir yerimi: bonus.com.tr

Basit yapılı bir örnek daha: http://turkcetwitter.livego.com/

Farklı renkte bir uygulama: http://www.ligonier.org/rym/

Farklı Tasarımda bir uygulama: http://www.ideo.com

Yukarıda bir kaç örneğini verdiğim görüntülerde görüldüğü gibi bir çok şekilde uygulamaya geçirilebilir.

Sadede gelelim ve biz kendi hiyerarşik yerimimizi yapalım.

HTML kodu;

<ul id="yerimi" class="kapsul">
    <li><a href="#">Ana Sayfa</a></li>
    <li><a href="#">Birinci alt Menü</a></li>
    <li><a href="#">İkinci alt Menü</a></li>
    <li><a href="#">Üçüncü alt menü</a></li>
    <li>Bulunduğumuz sayfa</li>
</ul>

Gelelim CSS kodumuza, liste başlangıç değerlerini sıfırlayalım. Listelerin başındaki sabit yuvarlak ikonları kaldırıp, etrafındaki boşlukları kaldıralım.

ul#yerimi,
ul#yerimi li{
	list-style:none;
	margin:0;
	padding:0;
}

Listeyi yatay yapmak için float:left tanımı yapıyoruz. İnternet Explorer 6 için bağlantıya da float:left atamamız gerekecek.

ul#yerimi li {
	float:left;
	font:12px Arial, Helvetica, sans-serif;
	line-height:30px;
	padding-left:15px;
	font-weight:bold
}

Bağlantılara şeklini verelim ve görselliğini düzenleyelim.

ul#yerimi li a {
	display:block;
	float:left;
	color:#0086C0;
	text-decoration:none;
	height:30px;
	font-weight:normal
}

ul#yerimi li a:hover {
	text-decoration:underline
}

Her kademe arasına ayraç koyalım. Burada şöyle bir ipucu var ki, oda bulunduğumuz sayfaya link koymuyoruz ve bu sayede araya koyacağımız ayraçları sadece linklere vererek kolayca çözüm sağlıyoruz.

ul#yerimi li a {
	display:block;
	float:left;
	color:#0086C0;
	text-decoration:none;
	background:url(bc_separator.png) top right no-repeat;
	height:30px;
	padding-right:15px;
	font-weight:normal
}

Son olarakta tüm alana bir ardalan resmi koyup birde kenar çizgisi ekleyelim.

ul#yerimi {
	border:1px solid #cacaca;
	background:url(bc_bg.png) 0 0 repeat-x
}

Bu eklemeyide yapınca Float Uygulanmış Elementleri Tam Kapsayamama (clearfix) sorunu ile karşılaşırız. Çözüm linkteki gibidir. sonuç olarak CSS kodumuz;

.kapsul:after {
	content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
}

.kapsul {
	display: inline-block;
} /*IE-mac de bu bolumu sakla

*/ * html
.kapsul { height: 1%; }
.kapsul { display: block; } /* IE-mac bu bolumu saklam artik */

ul#yerimi {
	border:1px solid #cacaca;
	background:url(bc_bg.png) 0 0 repeat-x
}

ul#yerimi,
ul#yerimi li {
	list-style:none;
	margin:0;
	padding:0;
}

ul#yerimi li {
	float:left;
	font:12px Arial, Helvetica, sans-serif;
	line-height:30px;
	padding-left:15px;
	font-weight:bold
}

ul#yerimi li a{
	display:block;
	float:left;
	color:#0086C0;
	text-decoration:none;
	background:url(bc_separator.png) top right no-repeat;
	height:30px;
	padding-right:15px;
	font-weight:normal
}

ul#yerimi li a:hover {
	text-decoration:underline
}

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

Kaynaklar

tarihinde Fatih Hayrioğlu

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.

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