bildirgec.org - MaviKartaL - beğendikleri

Firebug kullanmak için 10 sebep

MaviKartaL — Tue, 22 Sep 2009 10:26:00 GMT

Firebug

Firebug daima web geliştiricileri arasında en yoğun kullanılan en popüler araçlardan birisi olmuştur. Firefox'u muhteşem yapan eklentilerden birisi bence. Bu yazıda firebug kullanmanız için sizi ikna edebilecek 10 konudan bahsedeceğim.

Sebep 1: Konsol

Firebug - Konsol

firebug'ı açınca ilk farkedeceğiniz şey (ister sağ alttaki simgeye tıklayarak açın, ister ctrl+f12 kısayolunu kullanın) karşınıza çıkacak olan konsol paneli olacaktır. Firefox'un hata konsolu ile çok benzeştiğini düşünseniz de, ortak özellikleri şunlar:
- Hata, uyarı, ikaz görüntüleme
- Javascript kodu çalıştırabilme
Ancak firefug konsolu eşsiz kılan ek özellikler şunlar:
- Javascript, CSS, XML, xmlhttprequest (ajax) ve firefox'un kendi iç hatalarını görüntüleyebilir.
- mevcut sayfa üzerinde javascript kodu çalıştırabilir.
Örnek bir sayfa üzerinde incelemek gerekirse.

sebep 2: HTML

Firebug - Html

Firebug'un panelleri arasında belki de en çok zaman geçireceğiniz panel html paneli.
- 1. Ögeyi incele olarak çevirebileceğimiz bu düğme, hem hangi ögeyi incelediğinizi kısaca size gösterirken, hem de istediğiniz tag'i seçme konusunda inanılmaz bir kolaylık sağlıyor.
- 2. Burada seçili olan tag'in hiyerarşik yapısını görebilir ve üzerinde değiştirmekten silmeye kadar her türlü işlemi yapabilirsiniz.

- 3. Ana kod penceresi, kod üzerinde hızlı değişiklikler yapma eksiklikleri kapatmak için birebir. Erken kapatılmış bir div gibi.
- 4. Bu bölümde firefox'un seçili olan tag için hesapladığı stil elementlerini görebilir ve değiştirebilirsiniz.
- 5. Yerleşim bölümünde kolaylıkla, offset, margin, border ve padding değerlerini görebilirsiniz.

Firebug - Html - Yerleşim

- 6. Ayrıca dom kısmında seçili ögeye ait, bütün method ve özellikleri görebilirsiniz.

sebep 3: CSS
Hesaplanmamış olan temel css verileri ile direk oynayabilirsiniz. psd'den xhtml'e çevirim yaparken direk buradan çalışmak inanılmaz zaman kazandırıyor.

Firebug - CSS

- 1. Çalıştığımız sayfada birden fazla stil dökümanı varsa istediğimizi seçebiliriz.
- 2. CSS kodunun gösterildiği ana bölge.
- 3. CSS değerleri kolaylıkla değiştirilebilir.
- 4. istenilen CSS değeri engellenebilir. etkisiz hale getirebilir.

sebep 4: Script
Hazır script kodu kullandığınız zamanların dışında neredeyse her zaman script kodları ile büyük savaşlar vermeniz gerekir. Böyle durumlarda firefox'un script konsolu hiç de yeterli gelmez. Firebug ise bu noktada oldukça etkilidir.

Firebug - Script

- 1. Üzerinde çalışacağınız js dosyasını seçebilirsiniz.
- 2. Debug işlemleri. çalıştır, bir adım çalıştır, bölüm bitinceye kadar çalıştır vs.
- 3. Ana kod bölmesi. durma noktaları tanımlayabilirsiniz (kırmızı notka.)
- 4. DOM ekranı gibi çalışan objelere ait çıktıları inceleyebilirsiniz.
- 5. Değişkenlerin stack'teki değişimi izleyebilirsiniz.
- 6. Aktif durma noktalarının listesi.

sebep 5: Performans Testi
Herhangi bir javascript'in ne kadar sürede tamamlanacağı gibi bir performans testi yapmak istiyorsanız, firefug'un kendisine özgü console.time fonksiyonunu kullanın.

function timetracker() { console.time("mytimer"); for(x=5000; x > 0; x--) { } console.timeend("mytimer");
}

Çok basit üç adımla işlemi tamamlayabilirsiniz. console.time fonksiyonunu istediğini bir benzersiz isimle çağırın, araya kodunuzu koyun ve gene aynı şekilde benzersiz isimle console.timeend fonksiyonunu çağırın. benzersiz isim kullanarak istediğiniz kadar timer kullanabilir ve her birinin performansını ayrı ayrı görebilirsiniz.

sebep 6: Bağlantı
Sayfanın yüklenmesinin ne kadar sürdüğünü merak mı ediyorsunuz? veya hangi sayfanın, dosyanın ne kadar sürede yüklendiğini? sayfanın gecikme nedenlerini keşfedebileceğiniz ve performans üzerine çalışabileceğiniz yegane sekme Bağlantı sekmesidir.

Firebug - Bağlantı

- 1. Tiplerine göre istek (sorgu) tiplerini filtreleyebilirsiniz.
- 2. Ana bölüm. Bu bölüm içerisinde toplam istek miktarını ve her bir isteğin, boyutu, ne kadarının bellekten öntanımlı alındığını, tamamlanmasının ne kadar sürdüğü gibi bilgileri alabilirsiniz.
- 3. Üzerine tıklandığı taktirde http başlıkları gibi daha ayrıntılı bilgiler edinilebilir.

sebep 7: Kaynak
CodeBurner eklentisi ile edinilen ekstra bir panel. isminden de tahmin edebileceğiniz gibi html ve css kodları için size kaynak sağlayarak ne anlama geldiklerini vakit kaybı yaşamadan öğrenmenizi sağlar.

Firebug - Kaynak

- 1. Arama ve filtreleme yapabiliyorsunuz.
- 2. Arama sonucunun çıkacağı bölge.
- 3. Uyumluluk listesi. Seçtiğiniz ögenin tarayıcılar ile olan uyumunu kolaylıkla görebilirsiniz.
- 4. Örnekler, versiyon bilgileri, uyumluluk ve daha ayrıntılı tanım gibi bilgilere bu link üzerinden ulaşabilirsiniz.

sebep 8: hatasız piksel
Eğer photoshop üzerinde hazırladığınız bir web sitesini psd'den xhtml'e dönüştürmüşseniz, hatasız piksel ölçümlerinin ve boşlukların ne kadar önemli olduğunu biliyorsunuzdur. PikselPerfect (hatasız piksel) size bu konuda yardımcı olacaktır.

Firebug - Hatasız Piksel

- 1. Bu düğmeyle yeni katman resim ekleyebilirsiniz.
- 2. Katman resimleri istediğiniz gibi yönetebilir ve silebilirsiniz.
- 3. Resimlerin konumları üzerinde oynabilirsiniz.

sebep 9: Neden Yavaş
Yahoo tarafından geliştirilmiş bir firefug eklentisi daha. YSlow, okunuşuyla beraber çevirirseniz, "Neden Yavaş". Eklenti, yapmış olduğu bir dizi teste dayanaraktan size hız ve performans konusunda tavsiyelerde bulunuyor.

Firebug - Neden Yavaş

Genel performansınızı değerlendirerek, hemen etkisini gösterecek olan önerilerde bulunuyor.

Firebug - Neden Yavaş

Dilim grafiklerle de anlatımını destekliyor.

sebep 10: FirePHP
En son sebebimiz de PHP kod geliştiricileri oldukça mutlu edecek bir eklenti. FirePHP, bu eklenti sayesinda php kodunuzun içinden doğrudan firefug konsola çeşitli bilgiler gönderebilirsiniz. isterseniz kayıt, bilgi, uyarı, hata gibi veriler seçebilirsiniz.

fb::log('log message'); fb::info('info message'); fb::warn('warn message'); fb::error('error message');

Sonuç
Umarım bu küçük firebug panel ve eklentileri tanıtımı size yardımcı olmuştur. halen daha bir çok tasarımcı temel kod tasarımlarından, düzeltmelerine kadar bir çok işini firebug üzerinden gerçekleştiriyor. Ve bu tür eklentiler firefox'u özgür kılıyor. Konu içerisinde geçen eklentilere de aşağıdaki adreslerden ulaşabilirsiniz.

Firebug
CodeBurner
PixelPerfect
YSlow
FirePHP

Orjinal

Bu yazı MaviKartaL tarafından bildirgec.org adresli sitede yayımlanmak üzere yazılmıştır. Kaynak gösterilmeksizin kopyalanamaz.

Pilli Projeleri: Pilli.com: Kolektif Bağımsız İçerik | Sosyomat.com: Arkadaşını Etiketle | Put.io: Online Cloud Storage

En İyi 25 Tasarım Forumu

MaviKartaL — Mon, 16 Feb 2009 14:46:00 GMT

Forumlar; kodlamaya, tasarıma, SEO'ya, pazarlamaya ve bloglamaya yönelik konular hakkında kolayca yardım alabileceğiniz mükemmel ortamlardır. Forumlar sayesinde http://www.allgraphicdesign.com/phpBB2/ sorunu çözmek için kodunuz üzerinde ya da Google üzerinde harcayacağınız zamanı büyük ölçüde kısaltabilirsiniz. Bunun yanı sıra ilgili siteler üzerinden sizinle aynı ilgi alanlarına sahip insanlarla ya da endüstrinin profesyonelleri ile yazışma imkanı doğar. Bir tasarımcı olarak bu tip sitelere daima ihtiyacım olduğunu düşnüyorum. Belki siz de bu siteleri kullanışlı bulursunuz. Bu tip forumlara katılmak bilginizi diğerleri ile paylaşmanızı sağlamakla kalmaz, ayrıca diğerlerinin güvenini kazanmanıza da yol açar. Örneğin eğer siz de benim gibi bir blog yazarı iseniz, bu tip popüler forumlarda oluşturacağınız güzel profiller sizin için mükemmel bir pazarlama aracı da olacaklardır.

1. Estetica Tasarım Forumu
Tipografi, fotografi, grafik tasarım, baskı tasarımı, logo tasarım ve marka kimliği, genel 3B ve daha pek çok farklı konularda kategorileri olan bir forum.

Mükemmel bir grafik tasarım forumu olan bu forumda 15.580 konu, 157.326 yazı ve 6.675 üye bulunuyor.

2. All Graphic Design
Tasarım tartışmaları, kritikler ve incelemeler, dersler, zorluklar ve yine takip etmeniz gereken dev bir tasarım komünitesi.

99.822 yazı, 13.998 başlık ve 6.894 üye.

3. Your Design Forums
Çok büyük bir forum olmayabilir ancak grafik tasarımı, web tasarımı, fotografi, kurumsal ve konu dışı gibi kategorilere katkıda buluna arkadaş canlısı bir komüniteye sahip.

1.959 başlık, 11.149 yazı, 4.938 üye, 1.873 aktif üye.

4. Grafik Tasarım Forumu
Oldukça büyük bir grafik tasarım komünitesine sahip bu forumda grafik tasarım, yazılım, fotografi, komünite gibi kategorilerin alt kategorileri de bulunuyor. Örneğin yazılım kategorisinde Adobe Ürünleri, Corel Ürünleri, Quark, 3B Yazılım ve diğer yazılım kategorileri yer alıyor.

568.254 yazı, 39.463 başlık ve 23.636 üye.

5. Grafik Tasarım Forumu (Birleşik Krallık)
Bir diğer grafik tasarım forumumuz da İngiltere'den. Forumun komünitesi henüz yeni ancak buna rağmen katılımcılar oldukça aktif. İsteklerinize çok çabuk yanıt alabilirsiniz ki bence forumların ana amacı da bu zaten.

410 konu, 2.037 yazı, 273 üye, 86 aktif üye.

6. Grafik Forumları
Genel, Tanıtm, Öğren ve Teknik gibi bölümlere ayrılmış bir grafik tasarım forumu.

26.306 konu, 267.160 yazı, 5.278 üye.

7. Steel Dolphin Forumları
Kategoriler: Sanat & Grafik Tasarım Tanıtımları, Yardım, İş, Freelance ve Salon.

6.356 konu, 47.489 yazı, 20.439 üye.

8. Typophile
Tipografi ile alakalı olan bu forum üzerinde kullanıcılar tipografiye yönelik sorularınıza yanıt bulabilir ve yardım alabilirsiniz. Dev bir komünitesi var. Veriler hakkında detaya giremeyeceğim ancak 200,000'in üzerinde yazının olması kötü bir şey olmasa gerek.

9. Forums: Freelance.uk
Birleşik Krallık'ta serbest çalışanlara yönelik bu forumda grafik tasarımı, web tasarım, gazetecilik, metin yazımı, fotografi, pazarlama ve hatta CAD forumu bile bulunuyor.

1.966 konu, 7.080 yazı, 6.615 üye, 2.946 aktif üye.

10. Webmaster Forum (V7N)
Pazarlama, bloglama ve web geliştirme hakkında her şey.

102.149 başlık, 988.877 yazı, 55.174 üye.

11. SitePoint Forum
Tasarım komünitesi arasında oldukça popüler olan bu forum grafik tasarımı, web tasarımı, sunucu ve site yönetimi gibi konuları kapsıyor.

585.252 konu, 3.992.339 yazı ve 301.049 üye.

12. Designer Talk
Grafik tasarımı, web tasarımı, web geliştirimi, SEO, reklamcılık ve daha pek çok konuyu kapsayan büyük bir forum.

40.057 başlık, 404.756 yazı ve 42.062 üye.

13. Digital Point Forum
Arama motorları, pazarlama, kurumsal, tasarım ve geliştirme, ürünler ve araçlar gibi konuları kapsayan alanındaki en büyük forum.

1.097.169 konu, 9.615.724 yazı, 232.428 üye, 60.423 aktif üye.

14. WebDesignerForum.co.uk

Tüm kodlama dillerini, SEO ve hatta Photoshop, Illustrator, Flash gibi yazılımları bile kapsayan, her web tasarımcısına yönelik bir forum.

Site bünyesinde 95.604 yazı yazmış 7.237 kayıtlı kullanıcı bulunyor.

15. CSS Chat Forum
CSS hakkında sohbet edebileceğiniz ve sorunlarınıza çözüm bulabileceğiniz bir forum.

33.307 konu, 155.391 yazi ve 17.718 üye.

16. CSS Beauty
Site bünyesinde web standartları, SEO ve pazarlama ile ilgili 3.000'in üzerinde başlık bulunuyor.

17. DaniWeb
463.376 yazılım geliştiricisinin, web geliştircisinin, İnternet pazarlamacılarını ve teknoloji uzmanlarının bir araya geldiği ve işleri güçleri yeni kişilerle tanışmak, iş paylaşmak ve birbirlerinden yeni şeyler öğrenmek olan insanların oluşturduğu dev bir forum.

18. Kirupa
Flash, Visual Studio, geliştirme sanatı ve tasarım, kariyer ve daha fazlasını kapsayan bir komünite.

272.060 başlık, 2.065.550 yazı ve 133.068 üye.

19. WTricks
Web tasarım ve geliştirimi hakkında tartışabileceğiniz, kaliteli rehberlere ulaşabileceğiniz ve ücretsiz indirmeler bulabileceğiniz bir forum.

4.590 konu, 33.302 yazı ve 1.445 üye.

20. OZZU Webmaster Forumu
Ozzu üzerinde profesyonel bir web yöneticisinin, tasarımcısının, programcısının, geliştiricisinin ya da web sanatçısının günlük işlerinde kullanabileceği her tür bilgiye ulaşabilirsiniz. Siteye katıldıktan sonra yeteneklerinizi ilerletebileceğiniz yarışmalara katılabilir ve yardım alabileceğiniz ya da diğerlerinin ilgisini çekebilecek yeni konuşar açabilirsiniz. Arkadaş canlısı bir komünitesi var.

60.932 başlık, 451.706 yazı ve 35.874 üye.

21. Webmaster Talk
Kodlama, grafik tasarımı, SEO, web yönetimi ve pazarlama hakkında konuşmaya başlayan.

143.040 konu, 769.187 yazı ve 71.328 üye.

22. Australian InFront
Tasarımla ilgili her şeyi kapsayan, Avustralya merkezli popüler bir forum.

36.007 konu, 313.451 yazı ve 18.986 üye.

23. KillerSites
Grafik ve tasarım ile ilgili olan bu komünite web tasarımı, programlama, grafik tasarımı ve dijital fotografi konularını ele alıyor.

10.683 konu, 59.895 yazı ve 9.013 üye.

24. StyleGala
Kodlama, CSS, web standartları, grafik tasarımı, kaynaklar ve tüm bunlarla ilgili her konuyu tartışın.

Site bünyesinde 24.000 civarında tartışma var ve eminim kendinize bir yer bulacaksınız.

25. Cre8site Forums
Kendilerinden İlham, Networking, Yaratıcı Web Siteleri ve Gelişmiş Çevrimiçi Kurumlara yönelik bir komünite olarak bahsediyorlar.

Site bünyesindeki 17.058 kayıtlı kullanıcı toplamda 267.631 yazı yazmış.

Her zaman olduğu gibi sizin de beğendiğiniz forumlar varsa yorumlarınızda belirtmekten çekinmeyin. Eminim bu liste bazılarınızın işine yarayacaktır.

Kaynak: 1stwebdesigner

Web Kaynakları İle İlgili Yazdığım Diğer Yazılar

Bu yazı MaviKartaL tarafından bildirgec.org adresli sitede yayımlanmak üzere yazılmıştır. Kaynak gösterilmeksizin kopyalanamaz.

Pilli Projeleri: Pilli.com: Kolektif Bağımsız İçerik | Sosyomat.com: Arkadaşını Etiketle | Put.io: Online Cloud Storage