Arşiv: Haberler / Fatih Hayrioğlu'nun not defteri

Google Chrome 5 (Beta)

Mayıs 8th, 2010 • 172615 yorumGoogle+Chrome+5+%28Beta%292010-05-08+18%3A32%3A06fatih.hayrioglu Haberler

Daha önce her çıkan tarayıcının yeni sürümleri hakkında bir araştırma makalesi yazdım, ancak Google Chrome hakkında yazmak nasip olmadı. Bunun en büyük sebebi Chrome’un çok hızlı sürüm atlaması, derli toplu sürüm bilgilerinin yayınlanmaması ve sürümler arasında çok büyük özellik eklemesi olmaması idi. Ayrıca Chrome’un pazar payınında bu yazının gecikmesinde etkisi olduğunu kabul etmeliyim.

Google chrome’un hızlı yükselişi ve hız konusundaki insanlara verdiği izlenim kısa sürede kendinden bahsettirdi. Son tarayıcı kullanım oranlarına göre Google Chrome en hızlı yükselen tarayıcı oldu ve kullanım oranını %6,73 oldu.

Arayüz geliştiricileri için tarayıcılar ve sürümleri çok önemlidir. Her sürüm incelemek ve sürüm yeniliklerinden haberdar olmak her arayüz geliştirici için şarttır. Arayüz geliştiricinin aklının bir köşesinde tarayıcı uyumluluğu bilgisi olmalıdır. Bu bize kod yazarken hız kazandıracaktır ve web mecrasının gelişimi hakkında bilgi sahibi yapacaktır.

Gelelim sonunda kendisini yakaladığım Google Chrome 5 Beta’dan bahsetmeye. Okumaya devam edin »

fatihhayrioglu.com 4. seneyi doldurdu

Nisan 28th, 2010 • 168717 yorumfatihhayrioglu.com+4.+seneyi+doldurdu2010-04-28+12%3A45%3A58fatih.hayrioglu Haberler
Etiketler: fatihhayrioglu.com

Yine sitenin yıl dönümünü kaçırdım, güya ayrıntılı bir yazı yazacaktım. 14 Nisan’ı biraz geçtik ve 5. seneye ayak bastık.

Zaman ne kadar çabuk geçiyor. Neyseki geriye bakınca elle tutulur bir şeyler görmek güzel.

Geçen senenin istatistikleri

48 yazı
277.428 tekil kullanıcı
730.199 sayfa görünümü

Toplamda 5.151 yorum var ve 45.164 yorumu akismet spam olarak yakalamış.

Beni en çok sevindiren istatistik css dersleri sayfasının anasayfadan daha çok ziyaret edilmesi.

Önümüzdeki senenin daha güzel geçeceğini ümit ediyorum.

İnternet Explorer 8′in CSS Desteği

Mart 31st, 2010 • 16688 yorum2010-03-31+20%3A50%3A43fatih.hayrioglu CSS, Haberler
Etiketler: :active, :after, :before, content, Data URI, display:inline-block, focus, hasLayout, ie8, outline

Biraz geç kalmış bir yazı olacak, ancak İnternet Explorer 8 çıktığından beri ilk defa birinciliği Firefox’dan aldı. Bende bu makaleyi yazmaya gerek duydum. Açıkçası İnternet Explorer 8′e ilgisiz kaldık. İnternet Explorer 6 ile o kadar uğraştık ki serinin 8. sürümü biraz atıl kaldı.

İnternet Explorer 8 yayıldıkça sorunları ortay çıkmaya başladı, yani test potamıza girmeye başladı. Her ne kadar uyumluluk kodu ile İnternet Explorer 7 gibi yorumlamasını sağlayıp test tarayıcı sayısını bire düşürme imkanımız olsada yeniliklerinden yararlanmak için bu kodu kullanmamak gerekebilir. Ayrıca makaleyi geç yazmamızın bir avantajı oldu o da ie8 sorunlarınıda görmeye başladık.

İnternet Explorer 8 ile birlikte CSS2.1 standartlarını tam desteklediğini açıkladı.

İnternet Explorer 8 ile gelen CSS özellikleri listesi; Okumaya devam edin »

Google Analitics Asenkron Kod’a Geçiş

Şubat 15th, 2010 • 157123 yorum2010-02-15+10%3A34%3A37fatih.hayrioglu Haberler, Javascript
Etiketler: Google Analytics, Javascript, site izleme

Bir çok sitede site trafiğini izlemek için insanlar google analitics hizmetini kullanıyor. Güzel bir hizmet, hemde ücretsiz. Bulunmaz bir nimet. Zaten daha önce paralı idi. Sonra google alınca ücretsiz yaptı.

Sitelerinin performansına dikkat eden herkesin gözüne takılmıştır google analitics’in kodları. Açıkçası ben sitemi yavaşlattığı için google analitics’ten vazgeçicektim. Bir aralar site çok yavaştı. O zamanlar düşünüyordum.

Google çalışanlarıda bu konudaki şikayetleri göz önüne alarak asenkron kod geliştirmişler. Asenkron kod sayesinden bir yandan google kodu çalışırken bir yandanda diğer içerikler taranabilme olanağı elde ediyor sistem, buda sitemizin daha hızlı açılmasını sağlayacaktır.

Kodlar aşağıdaki gibi;

<!DOCTYPE html>
<html>
<head>
<title>Başlık</title>
</head>
<body>
<script type="text/javascript">
  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-XXXXX-X']);
  _gaq.push(['_trackPageview']);
  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(ga);
  })();
</script>
<!-- site icegi buradan sonra gelir -->
</body>
</html>

Kodumuz eskisi gibi karmaşık ama siz karmaşıklığa aldanmayın. Burada yapacağımız şey çok basit. 9. satırdaki UA-XXXXXXX-X kısım yerine gooagle analytics’in bize verdiği kodu yerleştirmek.

Burada dikkat edeceğimiz bir husus daha vardır. Normalde javascript kodlarının </head> öncesine yazmamız önerilir, sitemizin performansı için. Ancak asenkaron nalytics kodları <body> etiketi sonrası yazmanız öneriliyor.

Sonuçta ben kullanıyorum gayet iyi, hızlandı site. Çok büyük beklentiye girmeyin ama hızda bir atış olduğu hissediliyor.

Kaynak

FireBug 1.5 Çıktı

Ocak 27th, 2010 • 15415 yorumFireBug+1.5+%C3%87%C4%B1kt%C4%B12010-01-26+22%3A11%3A33fatih.hayrioglu Haberler
Etiketler: css düzeltmeleri, firebug, Firefox, Firefox Eklentileri

FireBug 1.5 sürümü çıktı. Çıkalı biraz zamanda oldu ama ben anca yazabildim. Yenilikleri burada sizlere anlatacağım. Bir önceki sürümde yenilikler vardı ama bununla birlikte bazı sorunlarda yaşadık. Yeni sürümde bir çok sorunun giderildiği söyleniyor. Kullandığım kadarı ile iyi, yalnız sorunsuz değil. Yeni sürüm aynı zamanda Firefox’un yeni sürümüne yakın çıktığı için her ikisinide destekliyor. Hem Firefox 3.5 hemde 3.6′yı destekliyor.

Teftiş Et(Inpect Element) Teftiş Et kısmı geliştirilmiş. Artık daha sorunsuz çalışıyor. Quick Info bölümü ile seçilen elemanın bilgileri anında görülebiliyor. Ayrıca Image Map yakalama kısmı eklenmiş.

HTML Paneli: HTML düzenleme kısmı geliştirilmiş. Bir nesneye uygulanan tüm stil atamaları ve etkin stil atamaları artık iki ayrı sekme(Style ve Computed) halinde verilmiş. Sağdaki Layout kısmına position ve z-index değerlerinide gösteriyor artık. MathML ve SVG namespace desteği gelmiş.

CSS Paneli: Css panelde aktif elemanın sözde-sınıflarının(pseudo) hepsi görünüyor ve bunları değiştirebiliyoruz. Bu özellik iyi olmuş, burada sorun yaşıyorduk açıkçası.

Sistemden gelen özellikleri artık görebiliyoruz. Sadece okunabilir.

CSS kısayollarını göster ve gizle yapabiliyoruz.

Javascript Paneli: Gelişmiş inceleme-noktaları oluşturabilme özelliği eklenmiş. Bir çok panel artık inceleme-noktası oluşturabiliyoruz. Dondur işaretinin olduğu kısımlarda buraya kadar incele imkanı veriyor.

Net Paneli: Net panelindeki zamanlama hataları giderilmiş ve geliştirilmiş. Net panelin çalışma mantığı değiştirilmiş ve tam sonuçların alınması sağlanmış. Ayrıntılı bilgi için tıklayınız.

Console ve Net panele Persist özelliği eklenmiş. Eski ile yeniyi karşılaştırma imkanı sağlıyor bu buton bize. Firefox önbelliğini pasifleştirme butonu eklenmiş.

XHR inceleme noktası oluşturabiliyoruz.

Kolonları çıkarabiliyor ve ekleyebiliyoruz.

Gelen ve giden veriler araç ipuçu içinde gösteriliyor.

Araç Çubuğu ve Menüler: Arama kısmını geliştirilmiş. Küçük büyük harfe duyarlı arama yapabiliyoruz ve ileri doğru ve geriye doğru arama yapabiliyoruz. Kapama düğmesindeki “Off” yazısı kaldırılmış.

Sonuç

Sonuç olarak şunu söyleyebilirim; daha önceki sürümlerde yenilikler ile birlikte bazı sorunlarda beraberinde geliyordu bu sefer daha bir oturmuş gibi bu araç. Daha yapısal değişiklikler ve çözümler üretilmiş. Web geliştiricileri için olmazsa olmaz olan FireBug sorunları olsada bir numaralı yerini kimseye kaptırmıyor.

Kaynaklar

Firefox 3.6 çıktı

Ocak 22nd, 2010 • 153214 yorumFirefox+3.6+%C3%A7%C4%B1kt%C4%B12010-01-21+22%3A11%3A03fatih.hayrioglu Haberler
Etiketler: çoklu background, Firefox, Firefox3.6, font-face, gradyen, İnternet Tarayıcısı, woff

Firefox 3.5 çıkalı daha 6 ay oldu, bazıları şunu diyebilir bu kadar kısa aralıklarla niye yeni sürüm çıkarıyorsunuz kardeşim. Bu tamamen İnternet tarayıcıları ile olan ilişkimize bağlı bir şey. Artık İnternetsiz bilgisayar çok yavan duruyor. Yani her şeyimiz İnternet. Bu durumu düşününce ve İnternete erişimimizi sağlayan araçlarında İnternet tarayıcıları olduğunu düşünürsek 6 ay normal bir süre bence. Elimizi güçlendiriyor bu güncellemeler.

Mozilla’nın en güzel yanlarında biriside bence bu. Belli aralıklarla çıkan sürümlerde bir çok sorunlar gideriliyor ve yeni özellikler ekleniyor. Bu İnternet kullanıcısına ve özellikle web sayfası geliştiricilerine çok büyük avantajlar sağlıyor. Eğer aynı yöntemi Microsoft’da uygulasa idi biz ie6 gibi bir garabet ile uğraşmıyor olacaktık. Belki bu kadar rekabet olmayacaktı ama bizde yenilikleri daha hızlı uygulayacaktık. Neyse yine ie6 ile uğraşmayalım.

Firefox 3.6 çıktı. Buradan indirebilirsiniz.

Gelelim yeniliklere;

Dil Desteği: Bir çok dilde aynı anda çıktı, aralarında Türkçe’de var
Personas: Daha önce kullandığımız Personas(yani tarayıcı çerçevesini tasarlama aracı) daha kolay kullanıma sunulmuş. Tek tık ile tarayıcı çerçevesini değiştirebiliyoruz. Ben bu konuda Mozilla’nın daha cüretkar davranarak css kodu ile tarayıcı çerçevesini değiştirme yönünde bir çalışması olduğunu okumuştum, ama hala geliştirme aşamasında galiba. Ne güzel olurdu tüm tarayıcı görünümünü değiştirmek. Tasarımcılara biraz daha iş çıkardı.
Plugin Güncelleme: Daha etkin bir plugin güncelleme sistemi. Eski pluginlerin bir çok dezavantajını gören Firefox bu konuda daha güzel bir çözüm bulmuş ama ne kadar kullanılır bilemem.
Gelişmiş Video Desteği: Videolara tam ekran desteği ve HTML5 ile gelen poster frames desteği gelmiş. Şimdilik genel projelerimiz için pek bir şey ifade etmiyor.
Javascript Performansı: Javascript performansında hızlandırmaya gidilmiş. Ayrıntılı bilgi için tıklayınız.
Form Tamamlama: Formlardaki bezer alanlar için Firefox geçmişindekiler ile eşleşiyor ise otomatik tamamlıyor.
3. Parti Yazılım Desteği: Yeni sürüm ile birlikte 3. parti yazılımcıların Firefox entegrasyonu daha kolay olacağı söyleniyor.
WOFF Desteği: Daha önce font-face özelliğini anlatırken belirttiğim gibi WOFF font desteği geldi. Bu tip yazı tipi dosyları diğerlerinin yarısı kadar boyutları olduğunu belirterek bu kısmı kapatayım.
CSS: Yeni CSS özellik desteği gelmiş.
- Gradyen özelliği ilk olarak webkit geliştiricilerinin geliştirdiği bir özellikti, Firefox’da bu kervana katıldı, ama biz uygulayamıyacağız, çünkü ie desteklemiyor. İE’ye de javascript ile bir çözüm bularak kullanabiliriz. Doğrusal ve radyal granyen desteği geldi Firefox 3.6 ile. CSS web sitelerinin görselliğini tek başına ele alacak gibi.
- Çoklu background desteği geldi. CSS3 ile gelen bu özellik bence Firefox için gecikmiş bir destek ile geldi. Gerçi ie desteklemediği için şimdilik duracağız. Bu özelliği kullanımı ile neler yapabileceğimizi düşünmek bile yeter. Ah ulan Microsoft.
- Farklı medya tiplerinin desteği geldi. Ayrıntı için tıklayınız.
- Background genişletme özelliği geldi, CSS3 ile birlikte gelen bu özellik, Firefox3.6 ile destekleniyor. Flash ile yapılan %100 genişlik ve yükseklikteki sitelerde ardalana konulan sayfa backgroundunu artık css ile yapabileceğiz, ama şimdi değil. Ah ulan Microsoft
- pointer-events özelliği desteği gelmiş. Bu özelliği bende ilk defa görüyorum desem yalan olmaz. Buradaki örnek aydınlatıcı.
- ve bunun haricinde irili ufaklı özellikler gelmiş ve sorunlar giderilmiş.
HTML5 ve DOM Desteği: Yeni DOM ve HTML5 destekleri gelmiş. Drag&Drop API ve File API. Örnekleri görmek için videoyu izleyin.
Hız: İlk kurulumdan sonra daha hızlı olduğunu söyleyebilirim, ancak bunu kullandıkça göreceğiz. FireBug1.5 ve Firefox3.6 performansının daha iyi olduğunu kesin. Mozilla’nın iddiasına göre %20′lik bir hızlanma varmış.
Ortama Adapte Olmak: Yeni device API’si desteği ile artık desteği olan makinelerde Firefox duruma göre vazife çıkaracak ve görünümünü ayarlayacak. Nasıl olduğunu görmek için videoyu izleyin. Çoğunlukla Mac kullanıcılarının kullanacağı bir özellik gibi.

Birde yapımcılarından Mike Beltzner’dan dinleyelim

Haberler için arşiv

Google Chrome 5 (Beta)

fatihhayrioglu.com 4. seneyi doldurdu

İnternet Explorer 8′in CSS Desteği