‘firebug’ etiketi için sonuçlar
FireBug 1.4 sürümü çıktı
Temmuz 19th, 2009 • 3 yorum CSS, XHTML
Etiketler: firebug, Firefox, Hata ayıklama, web
Firebug 1.4 sürümü çıktı. Firebug web sitelerine tarayıcı üzerinden düzenleme ve denetleme yapabileceğimiz, ayrıca hata ayıklaması yapmamızı ve network hareketlerini izlememizi sağlayan güzel bir Firefox eklentisidir. HTML, CSS ve javascript kodlarına tarayıcı üzerinden etkileşimli olarak müdahale etme olanağı sağladığı için biz web kod yazarları için bulunmaz bir araçtır.
Yeni sürüm ile gelen özellikler;
- Sekmeleri üste alınmış. Görsel olarak biraz daha derli toplu olması için. Eskiye alışanlar için ilk başta biraz garip olsada zamanla alışacağız.
- Birden fazla panelde arama imkanı. Bu bir çok zaman gereksinim duyduğumuz bir şey idi.
- Daha gelişmiş bir Net paneli
- Panel akif-pasif geçişi kolaylaştırılmış.
- Script paneli performansı arttırılmış.
- Firefox 3.5 desteği var
Bunun dışında 150′den fazla hata giderilmiş.
CSS İpucu 18: Optimizasyon İçin CSS Medya Dosyalarını Birleştirmek
Şubat 16th, 2009 • 4 yorum CSS, XHTML
Etiketler: birleştirme, CSS, firebug, Firefox, optimize, yazıcı, YSlow
Bir çok web kod yazarı için sayfaların yavaş açılması büyük bir sorundur. Bu sorunun çözümü için çeşitli metotlar uygulanır. Farklı araçlar ile testler yapılır çözümler üretilmeye çalışılır. Sonuçta en kararlı hale ulaşılmaya çalışılır.
Bende bir test aracı ile(Firefox – FireBug – YSlow) test ediyorum. Test ettiğim siteler HTTP isteklerinin çokluğundan dolayı düşük puan alıyor. Fazla sayıda css ve javascript dosyasının eklenmesi bu soruna neden oluyor. Bunun için en kolay ve basit yöntem css ve js dosyalarını birleştirmekten geçiyor.
Genelde projelermizde css dosyalarımızı genel stil için ve yazıcı için olmak üzere ikiye ayırıyoruz.
<link rel="stylesheet" href="/style/iskelet.css" type="text/css" media="screen" /> <link rel="stylesheet" href="/style/yazici.css" type="text/css" media="print" />
Normal ve çıktı almak için bunları bir css dosyasında birleştirerek HTTP istek sayısını azaltabiliriz.
<link rel="stylesheet" href="/style/iskelet.css" type="text/css" />
gibi iskelet.css içeriğinin yapısı ise aşağıdaki gibi olacaktır.
/* all media */
@media all
{
body { color:#666; font:13px arial, helvetica, sans-serif; padding:20px 0 30px 0; }
}
@media print
{
body { color:#000; font:12px arial, helvetica, sans-serif; padding:0; }
}
şeklinde yaparak css dosyalarımızı tek dosya içerisinde toplayabiliriz.
Daha fazla sayıda css dosyası kullanmamız durumunda ise sunucu veya istemci taraflı kod yardımı ile css veya js dosyalarımızı tek bir dosya gibi gösterebiliriz. Bu konuya burada girmeyeceğim. Konu ile alakalı çalışmaların linklerini aşağıda veriyorum.
Kaynak
- http://davidwalsh.name/combine-css-media-styles-file
- http://developer.yahoo.com/performance/rules.html#num_http
- http://www.vulgarisoip.com/2007/06/21/minify-your-external-javascript-and-css-with-php/
- http://www.websiteoptimization.com/speed/tweak/http/
- http://www.javascriptkit.com/javatutors/loadjavascriptcss.shtml
- http://yuiblog.com/blog/2006/11/28/performance-research-part-1/
- http://www.sitepoint.com/blogs/2007/04/10/faster-page-loads-bundle-your-css-and-javascript/
- http://www.jaisenmathai.com/blog/2008/02/27/speed-up-apache-how-i-went-from-f-to-a-in-yslow/
- http://www.cloudfour.com/77/easy-steps-to-speedup-your-wordpress-blog/
FireBug İpucu : FireBug’ın Yetenekleri
Ekim 23rd, 2008 • 8 yorum CSS, XHTML
Etiketler: anında-düzeltme, eklenti, firebug, Firefox
FireBug ile ilgili bir makale yazacağım ama bugün internette gezerken bir makaleye(50’den fazla doku kaynağı ile ilgili olan) bakıyordum birden aklıma yau benim sitenin ardalanına bunlardan hangisi uygun kaçar diye düşünmeye başladım. Sonra düşünmekten daha kolay bir yolunu buldum.
Aslında bir yazı olacak bir konu değil ama FireBug’ın yapabildiklerini görmek açısından önemli bir bilgi.
Sitedeki dokuları tek tek denemeye başladım. Resme sağ tıklayıp konumunu kopyaladım.
Sonrada kendi siteme gidip FireBug’ı açıp body elementini yakaladım ve ardalan olarak konumunu kopyaladığım resmi koydum. İlkini beğenmedim. Sonunda beğendiğim bir doku buldum.
Adım adım yaptıklarımı görmek için tıklayınız.(hareketli gif)
Siteme bu dokuyu uygulamasam da anında sonucu görebilmem ne kadar güzel bir şey olduğunu gördüm ve bunu sizlerle paylaşmak istedim.
Hiç sitenin kodlarına dokunmadan, herhangi bir resim kopyalamadan, site üzerinde bu dokuyu test edebilmek çok güzel.
FireBug 1.2 ve yenilikleri
Eylül 16th, 2008 • 6 yorum CSS, Haberler, Javascript, XHTML
Etiketler: CSS, firebug, Firefox 3, Hata yakalama, Javascript, XHTML
Daha önce FireBug’ın genel özelliklerinden bahsettik. Sıra FreiBug ile CSS ve Xhtml yazmaya gelmişti ki yeni sürüm çıkınca bu makaleyi yazma ihtiyacı duydum.
Web kod yazarları için büyük kolaylık sağlayan FireBug’ın yeni sürüm çıktı ama kimseden ses çıkmadı. Belkide Google Chrome duyurusunun altında ezildi. Ama Google Chrome’un benim için en büyük dezavantajı FireBug gibi gelişmiş bir CSS ve XHTML aracının olmamasıdır. Aslında ben bile geç kaldım, çünkü ben yazana kadar 1.2.1 sürüm çıktı.
FireBug’ın yeni sürümünde daha çok hata düzeltme, güvenlik düzeltmeleri ve kararlı hale getirme işlemleri göze çarpıyor.
Göze çarpan özellikleri incelersek; Okumaya devam edin »
15 Eylül 2008 web’den seçme haberler
Eylül 15th, 2008 • 1 yorum Haberler
Etiketler: 0 yükseklik, Developer Tools, firebug, Firefox 3.1, HTML 5, ie8, Javascript, jquery, mootools, yazı tipi
- Css-trics’ten jquery hakkında güzel bir video. Bağlantı
- Yazı tipi gömme işinde sona yaklaşılıyor gibi. Sonudan Mozilla(Firefox) @font-face’i destekleyeceğini açıklamış. Bu bizim için çok güzel bir gelişme. Bağlantı
- CSS ile %100 yükseklik için yapmamız gereken. Bağlantı
- SmashingMagazine’den 75 gerçekten kullanışlı javasscript teknikleri. Bağlantı
- IE8′den jscript profiler. FireBug benzeri bir araç. Bağlantı
- Firefox3.1 ile birlikte özel mod adında yeni özellik geliyor. Aslında bu Google Chrome ve IE8′de olan bir özellik. Yaptığınız işlemlerin herhangi bir site veyerde tutulmasına izin vermediğiniz bir tarayıcı modu. Tarayıcı savaşlarında en güzel yanı bir özellik eğer tutarsa bütün tarayıcılara dağalıyor Bağlantı
- Mootools ile yapılmış mükemmel bir google map gibi bir uygulama. Bağlantı
- Internet Explorer 8.0 ile beraber gelen Developer Tools’u inceleyelim. – daron.yondem.com Bağlantı
- CSS ile yapılmış açılır menü örnekleri. Bağlantı
- Web 2.0 bitti ,Web 3.0′ı beklerken – blog.harunpeksen.net Bağlantı
- FireBug1.2.1 sürümü yayınlamış. Değişen bazı hataların giderilmesi. Bağlanatı
- HTML 5 web alameni nasıl değiştirecek. Bağlantı
- Daron Yöndem’den ie8 hakkında güzel makaleler. Bağlantı
27 Ağustos – 2 Eylül web’den seçme haberler
Eylül 2nd, 2008 • 1 yorum Haberler
Etiketler: CSS, firebug, Firefox 3, hr, Javascript, jQuery plugin, safari, WordPress
- Javascript ile resim bilgilerini elde etmek. Bağlantı
- Web uygulamalarını hızlandırmak için çözüm yolları. Bağlantı
- FireBug 1.2 sürümü yani Firefox 3 içi olanı kararlı sürümü yayınlanmak üzereymiş. Bağlantı
- 11 WordPress uygulaması ipucu. Bağlantı
- CSS ile nasıl gölgeli menü yapılır. Bağlantı
- 10 ünlü CSS geliştiricisinden CSS teknikleri. Bağlantı
- 40 adet CSS sayfa planlama tekniği bağlantısı. Bağlantı
- Fireox 3 ile birlikte gelen CSS destekleri. Bağlantı
- CSS ve javascript ile yapılmış güzel bir garaj kapısı efektli menü örneği. Bağlantı
- Safari 4 Geliyor (2): 40A12 – macosxpc.com Bağlantı
- 10 adet jQuery plugini. Bağlantı
- 30 ücretsiz yüksek kaliteli WordPress teması. Bağlantı
- Firefox javascript okuma motorunu yeniliyor. Daha hızlı bir Firefox 3.1 kullanacağız. Bağlantı
- hr kullanımı ve örnekleri. Bağlantı
- Mutant Web Uygulamalari – azer.r92.org Bağlantı
- Siteme son zamanlarda çok fazla gereksiz yorum ve geriizleme geliyor. Akismet’i kurdum. İnşallah sorunları gideririz.
