bildirgec.org - etiketler: firebug

Web Tasarımcılara En İyi 10 Chrome Eklentisi

cevahirrr — Mon, 19 Apr 2010 14:08:00 GMT

Google Chrome’un popularitesi günden güne artıyor ancak yine de firefox’u geçmeyi başaramadı. Birçok web tasarımcısı ve geliştiricisi, onlara sunduğu ve ihtiyaçlarına anında cevap veren eklentileri sebebiyle firefox’u tercih ediyor. Fakat bu aralar google chrome da bu ihtiyaca cevap vermeye başladı çünkü Chrome’un eklenti desteği web tasarımcılar ve geliştiriciler için daha kullanılabilir hale geldi. Bu yazıda web tasarımcılar ve geliştiriciler için yararlı en iyi 10 chrome eklentisine değineceğiz.
1. MeasureIt!

Bu aracı kullanarak bir sayfadaki herhangi bir nesnenin yükseklik ve genişliğini bir cetvel yardımıyla elde edebilirsiniz.
2. Firebug Lite

Bu eklenti web geliştiricilerin herhangi bir sayfanın css, html ve java kodlarını düzenleyip işlemesine imkân tanıyor.

3. Pendule

Web tasarımcılar ve geliştiriciler için belki de en yararlı eklentilerden biri olan Pendule, istediğiniz herhangi bir sayfada gömülü veya bağlantılı olan stil sayfalarına yeni bir tabda erişebilmenizi sağlıyor.
4. Google Tasks

Bu eklenti herhangi bir sayfada herhangi bir zamanda Google Task’a ulaşmanızı sağlıyor.
5. Resolution Test

Bu eklenti ile farklı ekran çözünürlüklerinde web sayfalarınızın nasıl göründüğünü test edebilirsiniz.
6. Aviary Screen Capture

Herhangi bir web sitesinden ekran görüntüsü almak ve Aviary.com’daki uygulamaları kullanarak elde ettiğiniz görüntüleri anında düzenlemek bu eklenti ile mümkün.
7. Eye Dropper and Color Picker

Bir sitede beğendiğiniz rengi öğrenebilmek ya da geniş renk skalasından seçim yapmak isteyenler için bu eklenti birebir.
8. Chrome Sniffer

Bu eklenti web geliştiricilerinin mevcut bir sitedeki web frameworks/CMS ve javascript kütüphanelerini kontrol etmelerine yardımcı oluyor. Adres çubuğundaki bir ikon ile bulunan framework gösteriliyor.
9. Chrome SEO

Google Chrome SEO eklentisiyle ihtiyaç duyabileceğiniz tüm veriyi içeren Chrome SEO Tool ’u kullanabilir ve SEO görevlerinizi kolaylıkla halledebilirsiniz.
10. META SEO inspector

Bu kullanışlı chrome eklentisi, web sitelerinde kullanılan meta dataları kontrol etmenizi sağlıyor.

Daha fazla Google Chrome eklentisi için tıklayınız...

Kaynak

ilgili yazılar

Bu yazı cevahirrr 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 5 Tasarım Programı

axanc — Mon, 04 Jan 2010 16:48:00 GMT

Her profesyonelde olduğu gibi, internet tasarımcılarının kullandıkları aletler de yaptıkları işlerin kalitesini belirler. Dışarıda internet tasarımı üzerine kullanabileceğiniz oldukça çok sayıda uygulama mevcut. Ancak bazıları var ki, kalabalığın arasından sıyrılıp öne çıkıyor. Bu yazıda en iyi olarak belirtilenler, popüler olarak en çok kullanılan araçlar oluyor.

SixRevisions sitesinde yapılan bir oylama sonucu göre işte sonuçlar.

5. Fireworks

Adobe tarafından geliştirilmiş ve piyasaya sürülmüş olan Fireworks, hem windows hem de Mac üzerinde çalışabilen bir vektör grafik editörüdür. Photoshop'tan farklı olmak üzere, sadece web tasarımcıları için geliştirilmiştir. Site yayılım tasarımına kadar birçok araç Fireworks ile beraber gelmektedir.

Hızlı tasarım yapılmasını sağlayan, tasarımın bir resim halinden HTML/CSS haline dönüştürmede kullanılan dilimleme özelliği ve site denemesi olarak, bütün site tasarımını üzerine tıklanabilen etkileşimli pdf haline dönüştürebilmesi en önde gelen özellikleri arasında sayılabilir. En iyileme araçlarını da unutmamak gerekir.

4. Dreamweaver

Yine Adobe firmasının bir ürünü olan, Dreamweaver programı hem Windows hem de Mac üzerinde kullanılabiliyor. Yazım renklendirme, kod ipuçları, gömülü ftp istemcisi, canlı görüntüleme aracı onu diğer kod yazım programlarının önüne getiriyor. Ve diğer Adobe programları ile de uyumlu çalışıyor.

3. Panic Coda

Panic Coda, Mac kullanıcıların gözdesidir ve sadece Mac üzerinde kullanılabilir. Esas amaç olarak, internet tasarımında kullanılan programların sayısını azaltmak üzere geliştirilmiştir. FTP istemcisi, css editörü, versiyon kontrol sistemi gibi birçok özelliği bünyesinde barındırır. Coda, genel itibariyle görsel tasarımda tap kullanılan bir tasarıma sahiptir. Basit tasarımı ve kullanışlılığı ona 2007 yılında Apple'ın tasarım ödülünü kazandırmıştır.

2. Photoshop

Gelmiş geçmiş en klasik resim işleme programı. Ve üreticisi gene Adobe. Şu ana kadar kullanılan en popüler program olan Photoshop, Windows ve Mac işletim sistemlerinde etkin olarak çalışır. Profesyonel fotoğrafçılar ve tasarımcıların resim işleme ve internet tasarımı yaratmaları amacıyla yapılmıştır. Photoshop, ihtiyaç duyabileceğin bütün araçlara sahiptir. Filtreler, fırçalar, uygulamalar, scripler ve iş akışları.

1. Firebug

Firebug, firefox için bir eklenti olarak hazırlanmış, bedava, açık kaynak kodlu bir tarayıcı-içi internet tasarım aracıdır. Canlı olarak html ve css dosyalarını düzenlemenizi, kayıt işlemleri için konsol kullanmanızı, javascript'leri analiz etmenizi ve düzenlemenizi, DOM işlemleri yapmanızı ve sonuçları kısa bir sürede ekranınızda görmenizi sağlar.

Firebug eklentisini kullanmak için 10 sebep, onun neden popüler olduğunu ve neden kullanmanız gerektiğini size çok daha iyi açıklıyor. Firebug eklentisinin popülaritesi o kadar fazlalaşmıştır ki, firefox eklentisi olan bu firebug'ın kendisi için de eklentiler yazılmaya başlanmıştır. Örnek YSlow ve FirePHP.

Ayrıca belirtmekte fayda olduğunu düşündüklerim.

Adobe Flash
Web Developer (Firefox Eklentisi)
Aptana
Kağıt ve Kalem (ön-tasarım ve karalama için)
CSSEdit
Notepad++
GIMP

ilgili yazılar

En iyi 5 web tasarım aracı (1)

Bu yazı axanc 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

Web Geliştiricileri İçin En iyi 22 Firefox Eklentisi

guttsay — Tue, 27 Oct 2009 17:32:00 GMT

Tasarımcılar ve web geliştiricilerinin (webmaster) büyük çoğunluğu firefox kullanıyor. Bunun nedeni çoğunlukla eklenti desteği. Eklentiler sayesinde tarayıcının performans ve kapatisesi sonuna kadar kullanılabiliyor. Bu sayede web geliştiricileri zamandan kazanıyor ve işlerini daha kolay yapıyor. Aşağıda firefox ile birlikte kullanılarak webmasterlerin işini büyük ölçüde kolaylaştıracak 22 eklentiye yer verilmiştir.

Web Developer Toolbar

Geliştiriciler için basit ve kullanışlı bir araç çubuğu.

Firebug

Web sayfasının CSS, HTML ve JavaScript kodlarındaki hataları bulabilir ve onarabilirsiniz.

Page Speed

Açık kaynaklı bir eklenti. Sayfa hızının performansını değerlendirebilir ve nasıl iyileştirebileceği konusunda tavsiye alabilirsiniz.

FirePHP

FireBug konsoluna mesaj göndermeye yarar. Firebug yüklenmiş ve "net" paneli aktif olmalıdır. Bir adette PHP kütüphanesi yüklemelisiniz.

YSlow

Yahoonun performans kriterlerine göre sitenizdeki hataları tarar ve nasıl düzeltebileceğiniz hakkında önerilerde bulunur.

Pixel Perfect

Geliştiricilerin HTML üzerinden derleme yapmasını sağlar.

Aardvark

eleman seçme ve bunları çeşitli eylemler yapmak için seçim programı.

Total Validator

Sayfanın diğer tarayıcılarda nasıl gözüktüğüne bakabilirsiniz.

IE NetRenderer

Önceki eklenti benzeri. Sadece internet explorerde kontrol yapıyor.

Colorzilla

Tarayıcının herhangi bir alanında gördüğünüz rengin kodunu alabilirsiniz.

Screengrab

Web sayfasının tamamının veya bir bölümünün fotoğrafını çekmenizi sağlar.

FireFTP

Firefox ile ftp sunucularına bağlanabileceğiniz hızlı, güvenli bir istemci.

Codetech

Hem sörf yapıp hemde dreamweaver'daki gibi sitenizi düzenleyin.

Tab Mix Plus

Tablar dolduktan sonra yeni bir tab çubuğu açılmasını sağlar.

Greasemonkey

Kullanıcı scriptlerini kullanmamızı ve yönetmemizi sağlar.

InspectorWidget

Araç çubuğuna DOM Inspector menüsü ekler. Tek bir tuş ile bağlam menülerini açabilirsiniz.

GridFox

Bir web sayfasının üstüne tablolar çizer. Tasarımları kontrol etmek için yararlı bir eklenti.

Font Finder

Seçilen metinin CSS stillerinin bulunmasını sağlar.

JavaScript Debugger

JavaScript hata ayıklama eklentisi.

Live HTTP Headers

Gezinti halindeyken sayfanın HTTP başlıklarını gösterir.

Yellowpipe Lynx Viewer Tool

Sayfayı Lynx olarak görüntülememizi sağlar.

Kaynak

>Bütün yazılarım<

Bu yazı guttsay 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

Firebug kullanmak için 10 sebep

axanc — 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

ilgili yazılar

Bu yazı axanc 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 iyi 5 web tasarım aracı

LeBron — Thu, 16 Apr 2009 12:09:00 GMT

Bu makalede en popüler web tasarım araçlarına ulaşabilirsiniz.

5 - Fireworks

fireworks

Adobe Fireworks, mac ve windows işletim sistemlerinde kullanılabilen ücretli bir grafik editörüdür.

özel araçları sayesinde HTML/CSS için kolaylık sağlamasıdır. Bir web sitesi yapabilmek için bütün imkanları sağlamaktadır.

4 - Dreamweaver

dreamweaver

Dreamweaver mac ve windows işletim sistemlerinde web geliştirme için kullanılan ücretli bir uygulamadır.

Söz dizimi vurgulama, akıllı kod belirteci, ftp istemcisi, proje yöneticisi, iş akışı seçenekleri gibi özellikleri bulunmaktadır.

Dreamweaver diğer adobe ürünleri ile yapmış olduğunuz tasarımları hızlı ve basit bir şekilde aktarmanızı da sağlamaktadır.

3 - Panic Coda

panic coda

Panic Coda, mac işletim sisteminde çalışan belli bir süre ücretsiz olarak kullanabileceğiniz bir web geliştirme uygulamasıdır.

Tek pencere felsefesine dayanmaktadır. Metin editörü, dosya transferi, css gibi sekmeleri vardır.

2 - Photoshop

photoshop

Photoshop, mac ve windows işletim sistemlerinde kullanılan ücretli çok popüler bir grafik editörüdür.

Profesyonel fotoğrafçılar ve tasarımcılar için oluşturulmuştur. Web grafikleri oluşturmak için de kullanılmaktadır.

1 - Firebug

firebug

Firebug firefox web tarayıcısı nda kullanılan web geliştirme aracıdır.

Birçok özelliği bulunmaktadır. hataları düzeltmek için anında html ve css düzenleme, kayıt defteri ekranı, javascript hata ayıklama gibi birçok özelliği mevcuttur.

Firefox'un en popüler uygulamalarından birisidir.

kaynak: sixrevisions
diğer yazılarım
yazılarımı rss üzerinden takip edebilirsiniz

ilgili yazılar

En İyi 5 Tasarım Programı (15)

Bu yazı LeBron 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

Web Tasarımcıları İçin 30 Açık Kaynaklı Uygulama

pinkfloyd — Tue, 31 Mar 2009 15:55:00 GMT

Bir web tasarımcısı olarak size yardımcı olabilecek pek çok açık kaynaklı yazılım bulunmaktadır. açık kaynaklı projeler sırf ücretsiz oldukları için mükemmel olmakla kalmaz, ayrıca onlara katkıda bulunan azimli geliştiriciler de ilgili yazılımları mükemmel kılarlar. Günümüzün zor ekonomik koşullarında harcamalarınızı mümkün olduğu kadar kısabilmek her zaman kullanışlıdır ve bu sebeple açık kaynaklı alternatifler de her zaman göz atılmaya değerdir.

Bu yazıda web tasarımcıları için 30 adet son derece kullanışlı uygulamayı bulacaksınız. Listede kaynak kodu düzenleyicilerinden WYSIWYG düzenleyicilerine, grafik tasarım yazılımlarından görev yönetim yazılımlarına kadar pek çok faydalı yazılımı bulacaksınız.

Kaynak Kodu ve WYSIWYG Düzenleyicileri

1. KompoZer

KompoZer

KompoZer tam özellikli bir web yayımlama uygulaması olup bütünleşik FTP istemcisi, sekmeli kullanıcı tasarımı ve tüm önemli işletim sistemleri için destek barındırmaktadır.

2. Bluefish Editor

Bluefish

Bluefish Editor, web tasarımcıları ve programcıları için geliştirilen hafif ve hızlı bir düzenleyicidir. Uygulamanın HTML belgeleri için sunduğu sihirbazlar, mükemmel proje yönetim özellikleri ve kaynak kodlarını yenileri ile değiştirmek için güçlü ara ve değiştir seçeneği gerçekten kullanışlı.

3. Quanta Plus

Quanta Plus

Quanta Plus güçlü bir web geliştirme IDE'si olup yüksek miktarda genişletilebilir ve özel betikleri de çalıştırabilir. Uygulamanın sunduğu muhteşem görsel CSS düzenleyicisi kodlar için otomatik tamamlama ve kod ipuçları görüntüleme yeteneklerine sahip.

4. Amaya

Amaya

Amaya, World Wide Web Konsorsiyumu (W3C) tarafından geliştirilen bir web düzenleyicisi ve web tarayıcısıdır. Amaya ilk olarak bir HTML / CSS düzenleyicisi olarak geliştirilmişti ancak zaman geçtikçe desteklediği diller arasına SVG ve MathML gibi pek çok XML tabanlı sistemleri de dahil etti.

5. CSSED

CSSED

CSSED tam özellikli GTK-2 tabanlı CSS düzenleyicisi olup yüksek miktarda genişletilebilirlik için eklenti sistemi bulunmaktadır. İlgilenen okurlarımız CSSED Eklentilerine bir göz atabilir.

6. OPEN BEXI HTML Builder

OPEN BEXI HTML Builder

Open BEXI HTML Builder tarayıcı tabanlı ve açık kaynaklı bir uygulama olup HTML web sayfaları oluşturmak için kullanılabilir. Uygulamanın arayüzüne entegre edilmiş CSS renk seçicisi ve basit bir proje yönetim seçeneği de mevcut.

7. NOTEPAD++

NOTEPAD++

NOTEPAD++ Windows için geliştirilen oldukça popüler bir metin düzenleyici yazılımıdır. Sırf web geliştiricileri için geliştiriliyor olmasa da HTML, XML, CSS ve JavaScript için sunduğu derinlemesine destek sebebiyle pek çok web geliştiricisi tarafından kullanılmaktadır.

8. jEdit

jEdit

jEdit özellikle programcılar için geliştirilen bir metin düzenleyicisidir. Mac, Windows ve Linux üzerinde çalışabilen uygulamanın HTML, XML, CSS, JavaScript ve diğer pek çok dile özgü kod renklendirme desteği bulunmaktadır.

9. SeaMonkey

Mozilla Vakfı tarafından geliştirilen SeaMonkey, SeaMonkey Composer adında tarayıcıya bütünleşik sade ancak bir o kadar da güçlü bir HTML düzenleyicisini de bünyesinde barındıran hepsi bir arada web tarayıcısıdır.

Grafik / Görsel Düzenleyicileri

1. GIMP

GIMP

GIMP, günümüzün en tanınan açık kaynak projelerinden birisidir. Uygulamanın sunduğu özellikler ile ücretli rakiplerine bile taş çıkartabilecek kalitede bir yazılım olan GIMP'in arabirimine alışmak için zaman kaybetmek istemiyorsanız ve Photoshop'un arabirimine aşina iseniz, o zaman Gimpshop adındaki ve Photoshop'un arayüzünü GIMP'e uyarlayan GIMP eklentisini deneyebilirsiniz.

2. Inkscape

Inkscape

Inkscape, rakipleri Adobe Illustrator ve CorelDRAW gibi vektör grafiklerini düzenlemeye yönelik geliştirilen açık kaynaklı bir yazılım.

3. Krita

Krita

Krita, KOffice için geliştirilen bir boyama ve görsel düzenleme yazılım uygulamasıdır.

4. Karbon14

KOffice

Karbon14 genişletilebilir vektör tabanlı çizim uygulaması olup KOffice projesinin bir parçasıdır.

5. Kivio

Kivio

Bir web tasarımcısı olarak genellikle iş planınızı ve tasarımınızın prototipini oluşturmanız ve gezinti şemaları için çizelgeler hazırlamanız gerekebilir. Kivio işte tam da bu alanda imdadınıza yetişiyor ve prototiplerinizi, çizelgelerinizi ve diyagramlarınızı oluşturmak için size yardımcı olacak bir dizi faydalı aracı sunuyor. Bu yazılım da KOffice yazılım paketinin bir parçası.

6. Dia

Dia

Dia diyagram oluşturmak için kullanabileceğiniz bir diğer kullanışlı uygulama.

7. Skencil

Skencil

Skencil özellikle illüstrasyonlar ve diyagramlar için kullanılabilecek bir vektörel çizim uygulaması. Uygulama üzerinde hazırladığınız kompozisyonlarınızı pek çok vektör düzenleme uygulamasının tanıdığı EPS biçiminde kaydederek farklı uygulamalar üzerinde de çalışabilirsiniz.

8. OpenOffice Draw

OpenOffice Draw

OpenOffice Draw OpenOffice yazılım paketinin bir parçası olup basit ancak bir o kadar da güçlü çizim ve diyagram yazılımıdır.

9. mtPaint

mtPaint

mtPaint, Mark Tyler (mt) tarafından geliştirilen sade ve basit bir boyama ve düzenleme uygulaması.

10. FontForge

FontForge

Eğer daha önce tasarımlarınız için kullandığınız fontları düzenleme ihtiyacı hissettiyseniz, o zaman FontForge uygulaması, sunduğu farklı araçlarla bu ihtiyacınıza yanıt verecektir.

11. ImageMagick

ImageMagick güçlü bir görsel düzenleme yazılımı olup, çalışmalarınızı bitmap tabanlı biçimlerde kaydedebilmenizi sağlıyor. Uygulama, GIF, JPG, SVG ve PDF gibi popüler web biçimlerinin de yer aldığı yüzün üzerinde dosya biçimini destekliyor.

12. GraphicsMagick

GraphicsMagick, uygulamanın ana geliştiricileri tarafından görsel işleme için İsviçre çakısı olarak isimlendiriliyor. Uygulamanın desteklediği görsel biçimlerinin listesine bir göz atabilirsiniz.

Yardımcı Araçlar

1. HTML TIDY

HTML TIDY ücretssiz ve açık kaynaklı bir uygulama olup HTML kodlarını iyileştirmeye ve düzeltmeye yarıyor.

2. Cyberduck

Cyberduck

Cyberduck, Mac OS X kullanıcılarının gönlünde taht kurmuş açık kaynaklı ve ücretsiz bir FTP istemcisi. Yazılımın sunduğu bütünleşik Mosso Cloud dosyaları için destek ve yine bütünleşik Amazon S3 desteği, uygulamayı, web tasarımcıları ve web uygulama geliştiricileri için bir numara yapıyor. Eğer Mac OS X için FTP Yazılımı arıyorsanız, Cyberduck yazılımını mutlaka denemelisiniz.

3. FileZilla

FileZilla

FileZilla en popüler açık kaynaklı FTP istemcisi olarak bilinir. Linux, Mac ve Windows işletim sistemleri için sürümleri bulunan FileZilla uygulamasının bir dizi protokol için desteği bulunuyor.

4. WinSCP

WinSCP

WinSCP, sadece Windows üzerinde çalışabilen bir (S)FTP istemcisidir. Uygulamanın sade arayüze sahip dosya yöneticisi, dosyalarınız üzerinde gezinebilmenizi ve onları düzenleyebilmenizi sağlıyor.

5. CamStudio

CamStudio

Bir gün müşteriniz ya da proje yöneticiniz sizden bir web sitesi turu ya da elektronik kurs gibi bir bilgisayar simülasyonu hazırlamanızı isteyebiir. Eğer herhangi bir ekran görüntüsü yakalama uygulamasına ihtiyacınız olursa, tam özellikli ve açık kaynaklı CamStudio başkasını aramanıza gerek yok.

6. Greenshot

Greenshot

Web tasarımcıları genellikle belgeleme ya da tarayıcı içerisinde tasarım sunumları için ekran görüntüsü yakalama yazılımlarına ihtiyaç duyarlar. Greenshot ücretsiz ve açık kaynaklı bir ekran görüntüsü yakalama yazılımı olup özellikleri ile göz dolduruyor.

7. ZScreen

ZScreen

ZScreen, tam ekran, görünen alan ya da monitörünüzün sadece belirli bir bölümünün ekran görüntüsünü alabilmenize yarayan son derece kullanışlı ve açık kaynaklı bir ekran görüntüsü yakalama yazılımıdır. Alınan ekran görüntülerinin otomatik olarak FTP sunucularına aktarılmasını ya da ImageShack servisine aktarılmasını sağlayabilirsiniz. Özellikle sık sık ekran görüntüleri paylaşan kullanıcılar için bu iki özellik çok faydalı olacaktır.

8. Xournal

Xournal

Xournal, Tablet bilgisayarınızı bir girdi aygıtı olarak kullanabilmenizi sağlayan sade ancak güçlü bir not alımı ve taslak uygulamasıdır. Uygulama, Windows Journal ile benzer şekilde çalışıyor.

9. Firebug

Firebug

Firebug son derece kullanışlı, değişken ve her web geliştiricisinin bilgisayarında kurulu olması gerektiğine inandığım bir hata ayıklama aracı. Özellikle HTML ve CSS koduna yeni iseniz ve geliştirdiğiniz web sitelerindeki hataları ayıklamak istiyorsanız doğrudan tarayıcı üzerinden bu değişiklikleri gerçekleştirebilirsiniz.

10. Gallery

Gallery

Gallery uygulaması sayesinde görsel kaynaklarınız üzerinde derinlemesine kontrol sahibi olabilirsiniz. Web tabanlı görsel (imaj) galerisi olan bu uygulama sayesinde görsellerinizi depolayabilir, organize edebilir ve ziyaretçileriniz ile paylaşabilirsiniz.

Beğendiğiniz Uygulamalar Üzerindeki Deneyiminizi Paylaşın

Eğer sizin en beğendiğiniz açık kaynaklı uygulama yukarıda listelenmemişse ya da yukarıda listelenen uygulamalar ile ilgili paylaşmak istediğinz bir şey varsa, yorumlarınızda belirtmeyi ihmal etmeyin.

Tasarım Araçları Hakkında Yazdığım Diğer Yazılar

Açık Kaynaklı Yazılımlar Hakkında Yazdığım Diğer Yazılar

ilgili yazılar

Bu yazı pinkfloyd 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

FireBug Pasifleştirme

skopje — Mon, 22 Sep 2008 18:29:00 GMT

Her ne kadar belden aşağı vurmak gibi gelse de bazen projeler içerisinde firefox eklentisi olan firefug ‘un sitemin tüm kirli çamaşırlarını sermesi hoşumuza gitmez, bazı sayfalarda firebug ‘u kullanıcıda pasif hale getirmek gerekebilir...

Belki sizinde işinize yarar.

if (! ('console' in window) || !('firebug' in console)) {
var names = ['log', 'debug', 'info', 'warn', 'error', 'assert', 'dir', 'dirxml', 'group', 'groupEnd', 'time', 'timeEnd', 'count', 'trace', 'profile', 'profileEnd'];
window.console = {};
for (var i = 0; i < names.length; ++i) window.console[names[i]] = function() {};
}

Bu yazı skopje 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

Firecookie Firebug için çerez yönetimi

mdemir85 — Tue, 16 Sep 2008 12:19:00 GMT

Firecookie

Firecookie
Firebug için bir eklenti. Bu eklenti ile tarayıcınızda Firebug ile düzenlediğiniz veya incelediğiniz sitelerin çerezlerini yönetebilir (silebilir, değiştirebilir) veya yeni bir çerez ekleyebilirsiniz.
Firecookie'yi buradan yükleyebilirsiniz (Önceden Firebug yüklü olmalıdır, yüklü değilse Firebug'u da buradan yükleyin.).
Kurulum(lar) bittikten sonra Firebug ikonuna tıklayın, Cookies başlıklı bir sekmenin geldiğini farkedeceksiniz.

Cookies sekmesine tıklayın

İşte çerezler karşımızda çerezi yönetmek için çerezin üzerine sağ tıklamanız yeterli.

Firecookie

Ayrıca firebug simgesinin yanına gelen menüden, çerez ekleyebilir, söz konusu site için var olan çerezleri silebilir yada çerezleri kabul veya red edebilirsiniz.

Bu yazı mdemir85 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

Web tasarımcılar için 10 firefox eklentisi

AntiHumanIST — Wed, 02 Jul 2008 17:27:00 GMT

firefox'a eklenti kurmak sanırım her web tasarımcının yaptığı birşey. özellikle kimi eklentiler hayat kurtarır nitelikte zaman kazandırıp işleri kolaylaştırıyor. benim gibi acemilerine bile kod sisteminin içinde kulaç atmayı öğreten eklentileri bir web tasarımcının kullanması gerekenler olarak sıralamışlar.

Web Developer Toolbar | detay

çeşitli kısayollarda kaynak kodlara ulaşmanızı sağlayan küçük bir toolbar eklentisi

FireFTP | detay

internete dosyalarınızı yüklerken yeni bir program açmak yerine işleri basitçe halledebileceğiniz bir ftp eklentisi

Firebug | detay

işte firefoxun belki de en beğendiğim fantastik eklentisi. gerçek zamanlı düzenlemeler yapabileceğiniz, CSS, HTML ve JavaScript kodlarını incelemenize olanak tanıyan, hataları gözler önüne seren, kısaca sitenin röntgenini çeken süper ötesi bir eklenti.

Screengrab | detay

web sitelerinin tam ekran görüntüsünü almak bazen işkenceye dönüşebilir. işte bu eklentiyle bu işi en kolayından halledebiliyorsunuz.

CSS Viewer | deta

çok faydalı bir css görüntüleyici olan bu eklenti ile, css i öğrenmeniz kolaylaşabilir.

IE NetRenderer | detay

tasarımlarınızı firefox ta hazırlıyorsanız, browser uyumluluğunu göz ardı etmemek için IE 5.5, 6, 7 ve Beta 8 de sitenizin nasıl göründüğünü bu eklenti sayesinde kolayca görebilirsiniz.

Window Resizer | detay

web tasarımlarınızı yaptığınız çözünürlük dışında 640×480, 800×600, 1024×768, 1280×1024 ve 1600×1200 çözünürlükte de görmek isterseniz bu eklentiyi arıyorsunuz.

Dummy Ipsum | detay

hazır templateler hazırlayan bir tasarımcı iseniz sizin için rastgele yazılar hazırlayan bir eklenti.

Font Finder | detay

bu da seçtiğiniz metinin bütün bilgilerini sizinle paylaşan güzel bir eklenti.

Offline Page Validator | detay

sayfanızı tek tıkla W3C validator e gonderebileceğiniz sizi rahatlatan bir uygulama.

yazının orjinali için şöyle buyrun.

Bu yazı AntiHumanIST 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

wordpress tema çalma / kopyalama

bakiyyebemolu — Tue, 01 Apr 2008 05:01:00 GMT

wordpress tema açısından her ne kadar zengin olsa da site yapımcılarına, blogculara belirli bir ücret karşılığında tema satan birçok site de mevcut.

şurada firefox'un firebug eklentisi ile bir wordpress temasının nasıl kolayca ele geçirilebileceği (kaynakta çalınacağı denilmiş, ancak gayemiz o değil, olmamalı) anlatılmış. elbette konunun bu haliyle etik bir yanı yok fakat yazıda da değinildiği üzere XHTML, CSS bilgisini geliştirmek isteyenler çeşitli denemeler yapabilir. zaten bu konuda ilerleme kaydetmek isteyenlerin kopya bir tasarım kullanmalarını beklemek yersiz olur.

ilgili yazılar

Bu yazı bakiyyebemolu 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