bildirgec.org - dislek - beğendikleri

Görenlere "OHA" Dedirten, JQuery ile Hazırlanmış, 10 Adet Animasyon ve Eğitimi

dislek — Mon, 02 Nov 2009 17:29:00 GMT

JQuery ile hazırlanmış 10 adet animasyonu ve bu animasyonların nasıl hazırlandığı ile ilgili eğitim dokümanlarını bulabileceğiniz bu liste yardımı ile web sitenize, blogunuza veya web uygulamalarınıza ziyaretçilerinizin beğenisiniz kazanacak animasyonlu web bileşenleri ekleyebilirsiniz.

1- Smoke Effect | Demo

2- Animated Postcard | Demo

3- Realistic Hover Effect | Demo

4- Scrolling Background Effect | Demo

5- Glimmer | Demo-1-Demo-2-Demo-3

6- jQuery Blend | Demo

7- Parallax Scrolling Background | Demo

8- Sliding Door Effect | Demo

9- parallax | Demo

10- Animated Header | Demo

Bonus++++++++++:
+30 Adet Göz Dolduran Javascript Menü ve Kodu
+15 Adet Dolu Dolu jQuery Kaynak Sitesi
+En iyi 10 jquery slider eklentisi
+Html formları için 25 harika jquery eklentisi
+70 adet harika photoshop eğitimi ve kaynağı
+Tasarımcılar İçin Ücretsiz, Legal ve Kaliteli Kaynaklar
+Portfolio için 13 Adet Muhteşem Wordpress Teması
+jQuery ve CSS ile Page Peel Effect'i
+Adet Kullanışlı jQuery Örneği ve Eğitimi

Kaynak: sixrevisions
algoz: Blog FriendFeed Twitter Facebook Email RSS

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

7 İlginç Jquery Takvim Eklentisi

dislek — Tue, 21 Jul 2009 12:00:00 GMT

jquery, web geliştiricileri için hızlı ve javascript kütüphanesini basitleştiriyor. Ayrıca ajax etkileşimini kolaylaştırıyor. Bu yazıda 7 ilginç jquery takvim eklentisine ulaşabilirsiniz.

1. fullcalendar - full-sized, drag & drop calendar

Sürükle bırak özelliği bulunan ve tam ekran özelliği sağlayan bir eklentidir. Kolayca özelleştirilebilir.

2. create ical-like calendars with css and jquery

Css ve jquery ile yapılmış iPhone tarzı takvim uygulamasıdır.

3. date picker

Birçok özelliği ile geniş bir çalışma imkanı sağlıyor. Tarih seçici tarih aralığı seçimine izin veriyor. Özel günleri ayırabiliyorsunuz. Css ile özelleştirebilirsiniz. mit ve gpl olarak çift lisans altında kullanılabilir.

4. jmonthcalendar

jquery için yazılmış, olayları destekleyen tam özelliğe sahip bir takvimdir. Kolayca düzenleyebilirsiniz.

5. jquery date range picker with shortcuts

Jquery etkileşimli tarih seçici aralığı ile büyük bir kolaylık sağlıyor. Listeden hızlı bir şekilde seçmek için optimize edilmiştir. Kolayca yumuşak geçişler ekleyebilirsiniz.

6. datejs - open source javascript date library

Ayrıştırma, biçimlendirme ve işlem için açık kaynak javascript tarih kütüphanesidir. MIT lisansı altında serbest bırakılmıştır.

7. timeago

timeago, otomatik zaman damgası oluşturulmasını sağlayan bir eklentidir. Çok kullanışlı bir imkan sağlar.

ayrıca aşağıdaki yazıda ilginizi çekebilir.

tasarımcılar i̇çin faydalı 28 jquery eklentisi

kaynak: dreamcss.com

yazılarımı takip edebilirsiniz.

blog | friendfeed | twitter | delicious

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

100+ Hayrete Düşürücü Ücretsiz Wordpress Teması (2009)

dislek — Tue, 19 May 2009 11:45:00 GMT

Yüksek kaliteli wordpress temaları genelde ücretli olarak sunulmaktadır. Aşağıda 2009 yılının en güzel wordpress temaları yer almaktadır.

1 - Blog & Portföy Temaları (1-35)

2 - Dergi & Şirket Temaları (36-57)

3 - Fotoğraf Blogları & Galeri Temaları (58-68)

4 - En düşük & Kusursuz Temalar (69-84)

5 - Smashing Magazine Temaları (85-98)

6 - Değişik Birşeyler (99-104)

Blog & Portföy Temaları

1 - Irresistible [Önizleme]

2 - One Room [Önizleme]

3 - Elegant Grunge [Önizleme]

4 - Typebased [Önizleme]

5 - BlogTheme [Önizleme]

6 - Colourise [Demo]

7 - Cellar Heat [Önizleme]

8 - Pixeled [Önizleme]

9 - Outdoorsy [Önizleme]

10 - Vector Flower [Önizleme]

11 - Magaling [Önizleme]

12 - WildDreams [Önizleme]

13 - WPESP [Önizleme]

14 - Portfolio Press [Önizleme]

15 - Black Pearl [Önizleme]

16 - Masinop [Önizleme]

17 - WP CODA [Önizleme]

18 - Google Chrome [Önizleme]

19 - miniBlog [Önizleme]

20 - Absynthe [Önizleme]

21 - BlueDiamond [Önizleme]

22 - BlackPower [Önizleme]

23 - Old School [Önizleme]

24 - Nami

25 - Freemium [Önizleme]

26 - Fholio [Önizleme]

27 - Versatility Lite [Önizleme]

28 - Curious [Önizleme]

29 - Sketchy [Önizleme]

30 - Sanddollar [Önizleme]

31 - Fusion [Önizleme]

32 - Matalag [Önizleme]

33 - Typogriph [Önizleme]

34 - Coffee Desk [Önizleme]

35 - Andrea 0.3 [Önizleme]

Dergi & Şirket Temaları

36 - Arras Theme [Önizleme]

37 - Skyye News [Önizleme]

38 - Meta-Morphosis [Önizleme]

39 - TheLatest [Önizleme]

40 - Scarlett [Önizleme]

41 - TurnOut Mag [Önizleme]

42 - MegaNews [Önizleme]

43 - SchemerMag [Önizleme]

44 - TransGravita [Önizleme]

45 - Chara [Önizleme]

46 - Marcelle [Önizleme]

47 - Red Accent [Önizleme]

48 - Parchment [Önizleme]

49 - ThemePod [Önizleme]

50 - The Pinnacle [Önizleme]

51 - MMOZINE [Önizleme]

52 - Gamezine [Önizleme]

53 - Milano [Önizleme]

54 - Zinmag Tribune [Önizleme]

55 - IsoTherm News [Önizleme]

56 - CorporateMag [Önizleme]

57 - CryBook [Önizleme]

Fotoğraf Blogları & Galeri Temaları

58 - PhotoMadness [Önizleme]

59 - Snapshot [Önizleme]

60 - AutoFocus [Önizleme]

61 - Futurosity Aperio Prototype [Önizleme]

62 - Linquist [Önizleme]

63 - Fotofolio

64 - Viewport [Önizleme]

65 - Folio Elements [Önizleme]

66 - iQ2 [Önizleme]

67 - F8 Lite [Önizleme]

68 - The Unstandard WP 2.7 [Önizleme]

En düşük & Kusursuz Temalar

69 - MagZine [Önizleme]

70 - Equilibrium [Önizleme]

71 - Fontella [Önizleme]

72 - Minimo [Önizleme]

73 - Oulipo [Önizleme]

74 - Manifest [Önizleme]

75 - Modern Clix [Önizleme]

76 - Sharpfolio [Önizleme]

77 - Sator-ii [Önizleme]

78 - Undedicated [Önizleme]

79 - Clean Home [Önizleme]

80 - Sans-serif Racer [Önizleme]

81 - Lead

82 - Grid Focus 2.7 [Önizleme]

83 - Cardeo [Önizleme]

84 - Gigantic [Önizleme]

Smashing Magazine Temaları

85 - Imprezz [Önizleme]

86 - Compositio [Önizleme]

87 - Vintage and Blues [Önizleme]

88 - ASCII One [Önizleme]

89 - Black Magic [Önizleme]

90 - Color Paper [Önizleme]

91 - Cellar Heat [Önizleme]

92 - Simply Ornate [Önizleme]

93 - Agregado [Önizleme]

94 - Notepad Chaos [Önizleme]

95 - Wordpress Fun [Önizleme]

96 - Magazeen [Önizleme]

97 - Gallery [Önizleme]

98 - Infinity [Önizleme]

Değişik Birşeyler

99 - Changing Room [Önizleme]

100 - UnderCon [Önizleme]

101 - Crafty Cart [Önizleme]

102 - WP-Dashboard Like [Önizleme]

103 - City Dreams

104 - HELLBISCUIT [Önizleme]

kaynak: smashingmagazine.com
diğer yazılarım

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

yepyeni 40 adet kaliteli ve ücretsiz ikon seti

dislek — Thu, 28 May 2009 17:44:00 GMT

ikonlar, bilgisayar dünyasında önemli bir yere sahiptir. özellikle web tasarımında ve bilgisayar programlarında. bunun haricinde nasıl bir tasarımcı çalışmasını minik simgelerle süslüyorsa siz de çeşitli simgelerle bilgisayarınızı kendinize göre süsleyebilir, kullandığınız simgeleri beğendiklerinizle değiştirebilirsiniz. bu sebeple bu bildiride yepyeni 40 adet yüksek kalitede ve ücretsiz ikon setini bulabileceksiniz.
1 - Free icon set

AI, EPS, PDF ve XAR dosya formatlarına uyumlu ikon seti

2 - GP iCons

23 png formatında ikon.

3 - Cute Critters Free Icon Pack

mac os ve windows için 13 sevimli hayvan ikonu

4 - Handycons

Handycons ikon seti el çizmiyle oluşturulan 20 adet sosyal medya ikonunun bulunduğu ücretsiz bir set. set içerisinde şu servislerin ikonu bulunmakta: Facebook, Blinklist, Feedburner, Flickr, FriendFeed, Furl, Gmail, Google, Heart icon, Last FM, Linked IN, Magnolia, Newsvine, PayPal, Skype, Sphinn, Twitter, Vimeo, Yahoo ve YouTube.

5 - Islamic Icon

Pc, Mac ya da Pardus da kullanılabilen islamik simge seti.

6 - Realty Icons

12 gercekci simge

7 - Revolution for IconTweaker

8 - Free Animals icon set

9 - Construction Sigma Style

mac os ve windows için 5 güzel simge

10 - Coquette Part 4 Icons

yüksek kalitede 50 harika ikon

11 - 20 Free Blockie Icons

bilgisayarınızda ya da sitenizde kullanabileceğiniz, farklı renklerde toplam 80 adet simge.

12 - Hand-drawn vector arrows

set, el çizimi 120 adet ok ve diğer element simgelerini içeriyor.

13 - Grace Icons

siyah ve beyaz tonlarında 80 adet mükemmel simge.

14 - Project Icon Set

proje yönetimiyle ilgili 18 muhteşem ikon

15 - 15 Free Origami Icons

sette ico ve png formatlarında 15 ikon bulunmakta.

16 - Frankicon

diğer simge setlerine buradan ulaşabilirsiniz.

kaynak: noupe

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

psd'yi html'e çevirebilmeniz için 21 adet ders!

dislek — Mon, 25 May 2009 08:45:00 GMT

Birçok kişi o ya da bu şekilde; dersleri kullanarak, hazır dosyaları indirerek vb. yollarla photoshop'da web sitesi oluşturabiliyor. Ancak pek azımız bunu iyi bir şekilde harmanlanmış bir web sitesine dönüştürebiliyor. Bu yazıda Psd'yi HTML'e dönüştürmeyi öğrenebileceğiniz 21 adet ders bulacaksınız. Dilerseniz daha önce yayınlanmış şu bildiriye ya da buna da bakabilirsiniz.

1. the design lab: psd conversion

Psd çevirme

2. from psd to html, building a set of website designs step by step

adım adım psd'den html

3. coding: design lab tv styled layout

Televizyon Layoutlu Tasarım

4. psd to css/html in easy steps - part 1

Basit adımlarla Psd'den css - html çeviri

5. slice and dice that psd

psd bölümleme (slice)

6. converting a photoshop mockup: part two, episode one

psd çevirme

7. build a sleek portfolio site from scratch

çizimden siteye, portfolyo sitesi

8. portfolio layout - learn to code it

portfolyo tasarımı kodlamak

9. converting a design from psd to html

bir tasarımı psd'den html'e çevirmek

10. how to convert a psd to xhtml

psd'den xhtml'ye çeviri

11. how to convert psd to html

psd'den html'e çeviri

12. creating a css layout from scratch

çizimden css'ye tasarım aşamaları

13. psd > html/css

psd'den html - css'e çeviri

14. encoding a photoshop mockup into xhtml & css

psd'yi xhtml ve css olarak kodlamak

15. css template tutorial

css şablon dersi

16. portfolio layout 4: the code

portfolyo tasarımını kodlamak

17. tutorial coding a layout

bir layout'u kodlamak

18. converting a photoshop mockup

psd çevirmek

19. killer site - from illustrator to xhtm to drubal

illustrator'den xhtml'ye, oradan da drupala!

20. from psd to html

psd'den html'e çeviri

21. coding a car sales layout

Araba satış sitesi kodlamak

Kaynak

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

html formları için 25 harika jquery eklentisi

dislek — Thu, 23 Apr 2009 10:15:00 GMT

web sayfalarında bilgi girişleri için kullanılan html formlarının gerek görsellikleri gerekse işlevsellikleri üzerinde bazen uzun süreli çalışmalar yapılması gerekir. aşağıdaki jquery eklentileri sayesinde hem zamandan önemli ölçüde kazanç sağlayabilirsiniz, hem de kullanıcıların beğenisini kazanacak tasarımlar yapabilirsiniz.

Form Skinning(form kaplamaları):
jQuery jNice

Styling input file

jqTransform

Emblematiq Niceforms

Form Validation(form doğrulamları):

Form validator

Bassistance jQuery Validation

Live validation

Lightform

Masking(maskeleme):
Masked Input Plugin

Meio Mask

File Uploader(dosya yükleyicileri):

Multiple File Upload

jqUploader

Uploadify

Checkbox & Radio Button:

Checkbox & Radio Input Replacement

Fancy Form

jQuery Checkbox

Spin Button & Slider:

Spin Button

jQuery UI - Slider

Auto Complete(kendiliğinden tamamlama):

Bassistance jQuery Auto Complete

AjaxDaddy jQuery Auto Complete

Calendar & Time picker:

jQuery UI

Time Picker

Drop Down Menu (Select Element):

jQuery Image Drop Down

MC Dropdown

Drop down check list

Color Picker:

jQuery Color Picker

Farbtastic Color Picker

Textarea:

kaynak: queness

takip edin: bildirgeç friendfeed twitter rss

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

css link uygulamaları

dislek — Tue, 14 Apr 2009 05:06:00 GMT

her ne kadar fazla sitede rastlamasak da site içerisindeki bağlantıların çeşitli biçimlerde gösterilmesi mümkün. daha önce CSS ile linkleri simgeleştirmek yazısında işlenen konuda olduğu gibi... şuradaki kaynakta ise sitenizden verdiğiniz bağlantıların nasıl daha fazla açıklayıcı ve kullanılabilir olacağına dair bazı teknikler verilmiş.

dosya tipini ikon şeklinde göstermek

önizlemede de görüldüğü gibi ziyaretçi bir bağlantıya tıkladığı zaman ne türde bir sayfanın açılacağını önceden biliyor. dolayısıyla adres çubuğuna bakıp sayfa türünün ne olduğunu kestirmeye çalışmasına gerek kalmıyor.
sayfanın dilini göstermek

site yapımcıları tarafından kullanımı yaygın olsa okuyucuyu az da olsa zahmetten kurtaracak bir uygulama.

gerekli bölümleri belirginleştirmek

ziyaretçinin ilgileneceği düşündüğünüz bölümleri tasarımınızın bütünlüğünü bozmadan belirginleştirebilir, bu sayede sitenizin kullanılabilirliğini biraz daha arttırabilirsiniz.
harici bağlantıları göstermek

içeriğinizde diğer sitelere verdiğiniz bağlantılar varsa, ki olması gerekir elbette, bunları küçük bir ikonla daha anlaşılır hale getirebilirsiniz. gerekli mi, gereksiz mi bilemiyorum ama bazı forumlarda olduğu gibi "şu an bilmem ne forumundan ayrılıyorsunuz ve şuraya doğru gidiyorsunuz" penceresinden daha estetik olacağı kesin.
ipuçları ve açıklamalar

bağlantılarınız küçük ipuçlarına ya da herkes tarafından bilinmeyen bir terimse küçük açıklamalara ihtiyaç duyabilir.
önceden ziyaret edilmiş bağlantılar

sıklıkla başvurulan yol, daha önce o bilgisayar tarafından ziyaret edilmiş bağlantıyı normalden daha açık bir renkle belli etmek. bunun gibi ikon atama yolu da kullanılabilir tabii.
bağlantıları çıktılarda da göstermek

çıktısı alınmış sayfalarda uzun bağlantı açıklamaları pek bir işe yaramayacaktır ama yine de bulunması gerekebilir. bir diğer yol da burada.

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

2009'da Kullanmanız Gereken 21 Firefox Eklentisi

dislek — Tue, 06 Jan 2009 19:33:00 GMT

Firefox 2008'in en hızlı popülerleşen web tarayıcısı idi ve 2009'da da bu ünvanı elinde tutatacak gibi görünüyor. Firefox'un popüler olmasının ardında pek çok neden yatıyor ve bunların başında hiç şüphesiz tarayıcı için hazırlanan tonla eklentinin mevcut oluşu yatıyor. Bu makalemde 2009 yılında kullanmanız gereken 21 Firefox Eklentisini listelemeye çalışacağım.

Siz de yorumlarınızla bildirgeç ziyaretçilerinin ilgisini çekeceğini düşündüğünüz eklentileri paylaşabilirsiniz. Gelin bu makale altında güzel bir eklenti arşivi oluşturalım.

Xoopit

Xoopit'i kurarak Gmail'in yeteneklerini arttırın ve Gmail'e dosya, video ve resim paylaşımı özelliğini ekleyin. Elektronik posta yazarken Google Arama'yı kullanın. Gmail sohbet sırasında insanlar hakkında bilgi alın. Xoopit Gmail, Google Mail ve Google Apps kullanıcılarının hesaplarının tümünde çalışıyor.

Sxipper

Sxipper Web ile etkileşimi basitleştirerek sınırsız sayıda kullanıc adı, şifre ve adres, telefon numaraları gibi kişisel bilgileri depoluyor ve bu bilgileri tam ihtiyacınız olduğu an karşınıza getiriyor. Sxipper bu verileri sisteminizde güvenli olarak depoluyor.

Interclue

Hiç daha önce bir bağlantıya tıklamadan önce o bağlantının ardında ne olduğunu bilmek istediniz mi? InterClue eklentisi yeni bir sekme açmadan önce bile ihtiyacınız olan tüm bilgileri size gösteriyor.

Evernote

Ziyaret ettiğiniz web sayfalarının Evernote üzerinde kullanılabilmesini sağlıyor. Eklenti Windows, Mac ve Linux üzerinde çalışıyor.

Glubble for Families

Glubble, web ortamını bireysel aktiviteden tüm aile için eğlenceli bir deneyime dönüştürüyor. Veliler ve çocuklar birbirleri ile iletişim kurabilir, oyunlar oynayabilir ve eğlenceli aktiviteler sayesinde yeni şeyler öğrenebilirler. Aile sayfası, oyunlar, sohbet, sörf, oyun sanatı, eğitimsel egzersizler de eklentinin sunduğu diğer özellikler arasında yer alıyor.

Fotofox

Bilgisayarınızdaki resimleri seçip onların etiket ve başlık bilgilerini girebilir ve kolayca web üzerindeki fotoğraf paylaşım sitelerine gönderebilirsiniz. Eklenti Flickr, Tabblo, 24hq, SmugMug, Marela, Kodak EasyShare Gallery, Pixelpipe ve Zoomr ile çalışıyor.

Cooliris

Daha önce PicLens olarak bilinen Cooliris, web tarayıcınızı, arama yapmak, keşfetmek, çevrimiçi fotoğrafları, videoları ve daha pek çok şeyi görüntülemek ve paylaşmak için güzel görünümlü ve hızlı bir platforma dönüştürüyor. Eklentinin kendine özgü "3B Duvar" özelliği sayesinde binlerce öğe üzerinde sonü hiç gelmeyen bir duvar üzerinde gezinebiliyorsuınuz. Google Resimler, Flickr, Hulu ve diğer yüzlerce web sitesi üzerinde gezinmek için en hızlı yöntem.

Foxmarks Bookmar Synchronizer

Eğer Firefox'u birden fazla bilgisayar üzerinde kullanıyorsanız, o zaman Foxmarks eklentisini kullanmak isteyeceksinizdir. Foxmark'ı her bilgisayarınıza ayrı ayrı kurun ve onun arkaplanda çalışarak yer imlerinizi ve (isteğe bağlı olarak) şifrelerinizi tüm bilgisayarlarınız üzerinde senkronize etmesini sağlayın. Foxmarks tüm verilerinizin güvenli bir şekilde yedeklenmesini sağlıyor. Eğer bilgisayarınızdan uzaktaysanız, Foxmarks kendi bilgisayarınızdan uzak olmanız durumunda my.foxmarks.com üzerinden yer imlerinize ulaşabilmenizi de sağlıyor.

Fast Dial

Fast Dial, boş sekmeleri favori sitelerinizin küçük resimleri ile dolduruyor. Fast Dial yer imleri birer Firefox yer imi olarak depolanıyor. Böylece Fast Dial yer imlerini Firefox Yer İmi Yöneticisi ve Yer İmi Yan Barı kullanarak yönetmek mümkün hale geliyor.

Yoono

Yoono web üzerindeki sosyal yaşamanızı, üyesi olduğunuz tüm sosyal ağları ve anında mesajlaşma platformlarını tek bir sidebar üzerinde depolayarak kolaylaştırıyor. Tüm arkadaşlarınızın güncel duyurularını web'de nerede olursanız olun takip etmenin ve kendi durum mesajlarınızı Facebook, MySpace, Twitter ve çok daha fazlası üzerinde güncelleyebilmenin keyfini çıkarın.

Shareaholic

Eğer Facebook, MySpace, Digg, Gmail, Twitter gibi siteleri kullanıyorsanız, o zaman Shareaholic web sitesini seveceksiniz. Extend Firefox yarışmasının galibi olan Shareaholic, web sayfalarını kolayca yer imlerine ekleyebilmenizi, paylaşmanızı ve elektronik posta ile gönderebilmenizi sağlıyor ve bu işlemi popüler web 2.0 sosyal ağ ve yer imi servisleri üzerinden yapıyor. Servis Digg, Facebook, Gmail, MySpace, StumbleUpon ve çok daha fazlasını destekliyor.

NoScript

Bir web tarayıcısı üzerinde alabileceğiniz en iyi güvenlik eklentisi olan NoScript, güvenmediğiniz web sitelerinin sisteminiz üzerinde uygulama çalıştırmalarının önüne geçmenizi sağlarken, kendinizi XSS ve Clickjacking saldırılarından korumanızı sağlıyor.

DownThemAll

DownThemAll bir indirme yöneticisinden beklediğiniz her şeyi sunabilen bir Firefox eklentisi. Gelişmiş hızlandırıcısı sayesinde indirme hızını %400 arttırmanızı sağlarken yarım kalan indirmelerinize kaldığınız yerden devam edebilmenizi sağlıyor.

Power Twitter

Power Twitter Twitter Web arabirimine yeni özellikler ekleyerek Flickr resimlerini ve YouTube videolarını gösteriyor. TinyURL bağlantıları da analiz edilerek ziyaret etmek istediğiniz web sitesinin sayfa başlığını görüntülüyor. Son olarak bloglar, fotoğraflar gibi Twitter kullanıcısı ile eşleşen tüm sosyal bilgiler de Twitter sayfası üzerindeki yan bar üzerinde görüntüleniyor.

Toggle Private Browsing

Firefox'un bütünleşik gizli gezinme modunu açıp kapatmanızı sağlayan bu eklenti, ayrıca Firefox'un gizli gezinme modunda otomatik başlamasını da iptal edebilmenizi sağlıyor.

OutWit Images

OutWit Images kullanıcıların Web sayfaları ve arama motoru sonuçları üzerinde hızlıca gezinmelerini sağlıyor. Ücretsiz ve Firefox 3 ile uyumlu olan bu eklenti Windows, Mac OS ve Linux ile uyumlu çalışıyor. OutWit Images, resimleri kullanıcının bilgisayarına kolayca kaydedebilmesi özelliği ile kendini diğer eklentilerden ayırıyor.

Juice

Linkool Labs'ın geliştirdiği Juice, tarayıcınız ile bütünleşen yeni bir keşfetme motoru olarak tanımlanabilir. Herhangi bir web sitesi üzerindeki bir metni seçin ve sürükleyip Juice penceresi üzerine bırakın. Eklenti seçtiğiniz metin ile ilişkili diğer web içeriklerini (haberler, blog girdileri, videolar vs.) size listeleyecektir.

TooManyTabs

TooManyTabs 50'nin üzerinde sekmeyi tıklama ile açılan bir çubuk üzerinde depolayabiliyor. Bu sayede tarayıcınızın kullanılabilir alanının kısıtlanması ve aşırı bellek kullanımı sorunlarının önüne geçebiliyor. Fazladan satırlar sekmelerinizi daha kolay önceliklendirmenizi ve görsel olarak daha kolay ayrıştırabilmenizi sağlıyor.

Inquisitor

Inquisitor eklentisi, aramalarınızı diğer tüm eklentilerin sunamadığı kadar hızlandırıyor. Yazmaya başlayın ve web siteleri, önerilen diğer web siteleri ile birlikte anında görünmeye başlasın. Inquisitor sizin web karakterinizi anlayarak arama sonuçlarınızı ona göre listeler.

Hide Navigation Bar

Bu eklenti bir tık ile gezinti çubuğunu kaldırmanızı sağlıyor. Geçerli olarak bu eklentiyi aktifleştirmek için kullanabileceğiniz klavye düğmesi F2 ancak eklenti seçeneklerinden bu değiştirilebilir. Bunun yanısıra gezinti çubuğunun Firefox kurulurken açılıp açılmamasını da yine eklenti seçenekleri üzerinden belirtmeniz mümkün. Eklentinin otomatik gizle özelliği de bulunuyor.

ScribeFire Blog Editörü

ScribeFire, tarayıcınız ile bütünleşen ve bloglarınıza kolayca giriş yapabilmenizi sağlayan bir eklenti. Biçimlendirilmiş metni sürükleyip doğrudan pencere üzerine bırakarak metnin biçimini korumasını sağlayabilir, notlar alabilir, resimler gönderebilir ve birden fazla blogu yönetebilirsiniz.

Kaynak: SmashingApps

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

10 Mükemmel Çoklu Seviye Menü Tekniği

dislek — Sun, 15 Mar 2009 13:26:00 GMT

Web geliştiricileri kullanıcı dostu dikey ve yatay gezinti (navigasyon) menülerini CSS kullanarak oluşturabiliyorlar. JavaScript sayesinde de bu menüler daha etkileşimli, yanıt veren ve değişken hale geliyorlar.

Bugünkü yazıda jQuery, mooTools gibi JavaScript kütüphanelerinin yanısıra CSS ile oluşturulmuş 10 mükemmel çoklu seviye gezinti menüsü tekniğine yer vereceğiz.

1. Vimeo Benzeri Navigasyon Oluşturmak

Vimeo.com üzerindeki menünün neredeyse aynısı Janko tarafından geliştirilmiş durumda. Bu menünün en güzel tarafı menü öğesi üzerine fare imleci getirildiğinde menünün beliriyor olması. Ayrıca menünün sunduğu farklı arama seçenekleri sayesinde menü elementlerini eleyebiliyorsunuz.

Bu rehberin temelinde sırasız listeye dayalı CSS tabanlı bir açılır menü yatmaktadır. Menünün yapısı aşağıdaki görsel üzerinde açıklanmış.

Sizin de göreceğiniz üzere UL elementinin dört öğesi bulunuyor. Bunlardan ilki kısa bir alt menü içeren logo. Ardından giriş bağlantısı, alt menü içeren yardım bağlantısı ve yine alt menü çeren arama öğesi yer alıyor. Her bir alt menü, dahili olduğu menü elementinin üzerine fare imleci götürüldüğünde beliriyor.

Demo | İndir | Detay

2. CSS Açılır Menü Çatısı

Bu menü HTML'yi CSS'den ayırmakla kalmıyor, bunun yanısıra CSS tanımlamaları da yapısal ve tematik biçimlere ayrılmış durumda. Bu sayede yeni bir CSS açılır menü oluşturmak sadece yeni bir tema oluşturarak mümkün zire menünün altyapısı korunmaya devam ediyor. Farklı stiller sadece sınıf isimlerini değiştirerek kullanılabilir. Çatının desteklediği yönelmeler arasında, yatay, soldan sağa dikey, sağdan sola dikey, doğrusal yatay, yukarı yönlü yatay.

Menünün Özellikleri:

Kod ve dosyalar iyi düzenlenmiş. Kullandığınız içerik yönetim sistemine ya da diğer araçlara entegre edebileceğiniz gibi, (X)HTML biçimindeki web siteleri üzerinde de kullanabileceğiniz kanallar mevcut.
Menü stili sadece sınıf isimlerini değiştirerek özelleştirilebilir. Desteklenen yönelmeler arasında yatay, soldan sağa dikey, sağdan sola dikey, doğrusal yatay ve yukarı yönlü yatay yer alıyor.
Windows Internet Explorer 5+, Mozilla Firefox 1.5+, Opera 7+, Apple Safari 2+, Google Chrome 1 vb. tarayıcılar destekleniyor.
IE6 ve öncesi için küçük bir JavaScript kullanılıyor. Menü, jQuery ya da Scriptaculous gibi JavaScript kütüphaneleri ile rahatlıkla kullanılabilir. Geriye kalan her şey sadece CSS'den ibaret.

3. Çoklu Seviye JavaScript Açılır Menü

Bu çoklu seviye desteği olan açılır menünün kullandığı JavaScript'in dosya boyutu sadece 1.2 KB. Animasyon, aktif başlık belirleme, kolay aktarım ve birden fazla menü kullanabilme desteği gibi özellikleri bulunuyor. Betik Firefox 2+, IE6+, Opera, Safari ve Chrome üzerinde çalışıyor.

Demo | İndir

4. MenuMatic

MenuMatic bir mooTools 1.2 sınıfı olup sıralı ya da sırasız semantik listeleri alıp onları dinamik açılır menü sistemine dönüştürüyor. JavaScript'in etkin olmadığı tarayıcılarda ise menü, Patrick Griffiths ve Dan Webb tarafından geliştirilen Suckerfish Açılır Menüsü'ne klavye desteği kazandıran Matthew Carrol'un CSS tabanlı sürümünü kullanıyor.

Menünün Özellikleri

Arama Motoru Dostu
Erişilebilir: Menü bağlantıları üzerinde tab tuşu ile gezinin. Açılır menüler üzerinde ok tuşları ile gezinin.
JavaScript'in etkin olmadığı tarayıcılarda otomatik olarak CSS menüsü haline gelme.

Yatay | Dikey | İndir

5. Alt Menüler İçeren Dairesel Menü

Bu güzel menü küçük simgeler içeren alt menü öğelerini, ana menü elementlerinin bulunduğu dairenin içine yerleştiriyor. Menü ayrıca her bir simgeye açıklama eklemenize de izin veriyor. IE6, IE7, Firefox, Opera, Safari ve Google Chrome üzerinde sorunsuz çalışıyor.

6. mooTools İçin Kayan Menü

mooTools JavaScript kütüphanesini kullanan bu menü fare imleci hareket etmediğinde ya da sizin belirleyeceğiniz belirli bir zamandan sonra tüm menü elementlerini orjinal boyutuna getiriyor.

Demo | İndir | Detay

7. Yumuşak Gezinti Menüsü

Yumuşak Gezinti Menüsü çoklu seviye desteğine sahip ve CSS tabanlı bir menü olup, web site gezinti elementlerinin yumuşakça belirmesi için jQuery kullanıyor. Özellikle gezinti elementleri web sitelerinin genelinde önemli bir rol oynadığı için bu elementin güzel görünmesi ve işlemesi, sitenin geneli için de önemli hale geliyor.

Menü öğeleri dilerseniz doğrudan sayfa üzerindeki kod üzerinden, ya da AJAX aracılığı ile harici bir dosya üzerinde çağırılabilir. jQuery sayesinde de alt menüler hem kayarak (slide) hem de yavaşça belirerek (fade in) görüntülenebiliyor.

8. Katlanır Menü

Bu menü aslında Antonio Lupetti'nin web projelerinizdeki kodları yeniden daha verimli bir şekilde kullanabilmenize yönelik hazırladığı rehberin bir parçası. Bu örnete Antonio, fare imlecinin menü öğeleri üzerine getirilmesinin ardından bir efekt içeriyor (farenizi "About Me" ve "Click Here" öğelerinin üzerine getirin).

Demo | İndir | Detay

9. Digg Başlığını Tasarlamak

Bu menü Digg web sitesi üzerinde yer alan menünün bir kopyası. Abonelik, arama ve hesap bilgileri gibi önemli öğeler, tam olmalarını beklediğiniz yerde, sayfanın üst kısmında yer alıyorlar. Belirli bir genişliğe kadar genişleyebilen genişlik, açılır menüler, çekici arama ve renklerin kolay değiştirilebilmesi, menünün sunduğu özellikler arasında yer alıyor.

Demo | İndir | Detay

10. jQuery Dosya Ağacı

jQuery Dosya Ağacı, jQuery için geliştirilmiş özelleştirilebilir bir AJAX dosya tarayıcı eklentisidir. Sadece bir satır JavaScript kodu ile tümüyle etkileşimli dosya ağaçlarını oluşturabilmeniz mümkün. Ayrıca bu betiğin sunucu taraflı dosya sistemlerine entegre edilebilmesi için PHP, ASP.NET, JSP ve Lasso eklentileri de bulunuyor.

Bu menünün sevdiğim yanı, AJAX aracılığı ile dosya uzantılarına bakıp onlara uygun simgeleri eş zamanlı olarak gösterebiliyor olması. Dahası da alt menü öğelerinin açılma ve kapanma efeklerini ve hızlarını belirleyebiliyorsunuz.

Demo | İndir | Detay

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

google api ve araçları

dislek — Sat, 07 Mar 2009 15:16:00 GMT

google'ın geliştiriciler için hazılamış olduğu onlarca api ve aracı bulunmakta. Bu api ve araçlar sayesinde özellikle web projelerinize bir kaç satırlık kod ile google'ın oldukça kullanışlı servislerini ekleyebilirsiniz. Üstelik ücretsiz.
google'ın bundan kazancı ise şu: bu api ve araçlar geliştiriciler tarafından ne kadar çok kullanılırsa, google'ın interneti etkileme gücü de o derece artıyor. Bu servislerin büyük çoğunluğu aşağıda listelenmiş durumda.

servislerin isimleri (orjinal isimleri ile google'da arama yaparak daha fazla bilgiye erişebilirsiniz), linkleri, kısa açıklamaları ve bazıları ile ilgili örnek sayfa linkleri mevcut.

Tüm sevisleri sabırla inceleyip, kendi projelerinize uygun olanları seçip, bir yap-boz'u birleştirir gibi projelerinize entegre edebilirseniz oldukça güzel sonuçlar elde edebilirsiniz.

Google Account Authentication: Google servisleri ile yazacağınız uygulamalarda, kullanıcıların hesaplarına erişimi sağlamakta.
Google AdSense API: projelerinizi AdSense'e entegre edip değişik raporlar alabilirsiniz.
Google AdWords API : AdWords ile entegrasyonu sağlıyor.
Google AJAX APIs: sadece javascript ve html içeren bir kaç satır kod yazarak, web sayfanıza arama kutusu ve harita gibi dinamik içerikler kazandırabilirsiniz.
Google AJAX Feed API: ajax tabanlı bu api ile rss ve atom beslemeleri üzerinde çeşitli işlemler yaparak web sayfanıza içerik sağlayabilirsiniz. Örnek.
OpenSocial: sadece javascript ve html ile tüm sosyal sitelerde geçerli olabilecek (myspace, hi5,friendster, orkut vb.) uygulamalar yazabilirsiniz.

Orkut Developer Home: Google'ın kendi sosyal sitesi olan orkut'un kullanıcıları için sosyal uygulamalar yazabilirsiniz.
Google AJAX Language API: sonunda Türkçe'yide desteklemeye başlayan Google Translate ile web sayfanıza çoklu dil desteği sağlamakta. Örnek
Google AJAX Search API: web sayfanıza dinamik google arama kutusunu eklemenizi yardımcı oluyor. Örnek
Google Analytics: web sitenizin trafiğini görmeniz ve analiz etmeniz için.
Android: Google'ın mobil cihazlar için geliştirdiği işletim sistemi.
Google Friend Connect: Google'ın facebook ile yoğun rekabet yaşadığı bir uygulama.web sayfanıza ekleyerek ziyretçilerinizin google,aol ve open id hesapları ile sitenize üye olup yorum yazmalarını sağlayabilirsiniz. Örnek

Google App Engine: Son zamanlarda web tabanlı projelerin geliştirilmesinde internet tabanlı platformlar(Cloud Computing) kullanılmakta. amazon.com, force.com, microsoft azure gibi platformların bu yönde birçok hizmeti mevcut.google'da App Engine ile size bir ugulama motoru sunuyor.PaaS olarakta adlandırılmakta Örnek: FriendFeed'in kurucularında bret taylor'ın blogu app engine üzerine kurulu.
Google Apps APIs: Şirketlere ve topluluklara web tabanlı birçok hizmetin (email, takvim, belgeler vb.) sunulduğu platform. SaaS olarakta adlandırılmakta.
Google Calendar APIs and Tools: Google'ın takvim hizmeti'ne entegre projeler üretmenizi sağlayan api.
Google Chart API: Çok kolay bir şekilde grafikler üretebileceğiniz bir api. Örnek
Google Checkout API: Google'ın Paypal tarzı ödeme sistemi olan Checkout ile entergasyonu sağlıyor.
Google Visualization API: Raporlarınızı görsel grafikler halinde sunabilirsiniz. Örnek

Chromium: Google'ın web tarayıcısı olan Chrome'u destekleyen bir açık kanak kodlu proje.
Google Contacts Data API: projenizin kullanıcılarının, google hesaplarındaki kişilerini yönetebilirsiniz.
Google Custom Search API: Web siteniz için arama motoru oluşturabilirsiniz. Örnek
Google Data APIs: Google servislerindeki (belgeler,blogger,takvim vb.) bilgilere erişiminizi sağlar.
Google Documents List Data API: Google belgelere erişimi sağlayarak görüntüleme ve arama yapmanızı sağlar.
Google Earth API: Google Earth'e çoğumuz hayran kalmışızdır.eğer Google Earth'ü 3 boyutlu bir görüntüleme ile web sayfanızda kullanmak istiyorsanız bu api'yi kullanmalısınız. kullanıcılarınıza uygulamayı görmeden önce bir tarayıcı eklentisi yüklemesi istenecek. Örnek

Gmail Atom Feeds: Kendi gmail kutunuzu atom-xml formatında okumanızı sağlıyor.
Google Health API: Google kullanıcılarının, sağlık bilgilerini girdikleri Google Health'e erşimi sağlıyor.
KML: Google Earth üzerinde çeşitli görsel işlemler yapmanızı sağlayan bir işaretleme dili. Örnek
Google Mapplets: Google Maps'te kullanılmak üzere mini uygulamalar yazabilirsiniz.
Gadgets API: javascript,css ve html dillerini kullanarak minik uygulamalar yazabilir ve bu uygulamaları web sayfalarına,igoogle'a,google toolbar'a ekleyebilirsiniz. Örnek

iGoogle Developer Home: igoogle'ın yeni versiyonunun ana sayfasında değişik düzenlemeler yapabiliryorsunuz.farklı gösterimleri(canvas view,profile view) deneyebilir ve OpenSocial api'sini kullanabilirsiniz..
Google Maps API For Flash: haritaları(Google Maps) flash uygulamalarınıza ekleyebileceğiniz ActionScript 3.0 tabanlı api Örnek
Picasa Web Albums Data API: Google'ın resim depolama,paylaşma ve işleme sitesi olan picasa'daki albümlere erşiminizi sağlar.
Google Sitemaps: Google'ın sitenizi sağlıklı bir şekilde indexlemesi için oluşturacağınız web sitenizin haritasını(sitemaps) ekleyebilir ve yönetebilirsiniz.
Google SketchUp Ruby API: SketchUp Google'ın 3 Boyutlu çizimler için kullanabileceğiniz programı.Bu Ruby tabanlı api ile programı kendi kullanımınıza göre şekillendirebilirsiniz.

Subscribed Links: Google'daki belli kelimeler için arama sonuçları oluşturabilir ve kullanıcıların kendi hesapları ile abone olmalarını sağlayabilirsiniz.
Google Transit Feed Specification: Google Earth, Google Maps ile entegre beslemeler yapabilirsiniz.
Google Maps API: Web sayfanıza kolay bir şekilde etkileşimli haritalar(Google Maps) ekleyebilirsiniz. Örnek

Google Static Maps API: Web sayfanıza etkileşimli olmayan, durağan haritalar(Google Maps) ekleyebilirsiniz. Örnek
V8: C++ ile Google Chrome için yazılan açık kaynak kodlu javascript motoru.
Google Web Toolkit: Ajax tabanlı uygulamalar yapabileceğiniz açık kaynak kodlu java geliştirme ortamı.
YouTube APIs: You Tube verileri ile değişik uygulamalar geliştirebilirsiniz.

Yardım Kaynakları:

Yukarıdaki api ve araçlardan başka, henüz gelişim aşamasında olanlar mencut, onlara da Google Code Labs sayfasında erişebilirsiniz.
google yakın zaman önce içinde bir çok api için örnekler bulunan "AJAX APIs Playground" aracını duyurdu.araça buradan erişerek örnek kodlar üzerinde değişiklikler yaparak api'lerin yapısını daha iyi anlayabilirsiniz.
html, javascript, css vb. konularla ilgili içinde eğitimler bulunan Google Code University'i ziyaret edebilirsiniz.
google'ın web geliştiricileri için hazılamış olduğu Google DocType ansiklopedisinden yararlanabilirsiniz.
google api ve araçları ile ilgili daha fazal bilgiye ve geliştiriciler tarafından yapılmış birçok örneğe www.programmableweb.com sitesinden erişebilirsiniz.
ingilizce kaynaklar üzerinde Google Translate ile çalışmalar yapabilirsiniz.

Sizler de Google api ve araçlar ile ilgili deneyimlerinizi ve kendi yaptığınız veya internette rastladığınız google api ve araçları ile ilgili örnekleri, yorum bölümünden paylaşırsanız daha yararlı bir bildiri olacaktır.

benim rasladığım bir örnek burada.

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